/* =====================================================================================
   HD Direkt Hungary — publikus weboldal
   A Toborzós app és az allas.hddirekt.hu design-nyelve: narancs + menta, üveg, pirula
   gombok, Space Grotesk / Manrope / JetBrains Mono. Világos alap, sötét „futurisztikus”
   szekciók. Csak CSS-animációk + kis vanilla JS — nincs keretrendszer, gyors betöltés.
   ===================================================================================== */
:root{
  --bg:#fbf8f4;--bg-2:#f3eee6;--solid:#fff;--ink:#121826;--ink-2:#1b2333;--muted:#5f6776;--faint:#69707d;
  --line:rgba(18,24,38,.08);--line-2:rgba(18,24,38,.14);
  --o:#f9951a;--o-2:#f47b20;--o-deep:#b05000;--o-soft:#fff0dc;--mint:#10b48a;
  --night:#0a0d14;--night-2:#111622;--night-line:rgba(255,255,255,.09);
  --r-lg:32px;--r-md:24px;--r-sm:16px;
  --shadow:0 30px 70px -36px rgba(70,38,0,.38);
  --ease:cubic-bezier(.16,1,.3,1);
  --wrap:min(1240px,calc(100% - 48px));
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:500 16px/1.6 Manrope,system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:rgba(249,149,26,.28)}
:focus-visible{outline:2px solid var(--o);outline-offset:3px;border-radius:10px}
.wrap{width:var(--wrap);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Tipográfia ---------- */
h1,h2,h3,h4{font-family:'Space Grotesk',system-ui,sans-serif;letter-spacing:-.04em;line-height:1.05;margin:0;font-weight:700}
h1{font-size:clamp(46px,7.4vw,104px);letter-spacing:-.06em;line-height:.95}
h2{font-size:clamp(32px,4.4vw,58px)}
h3{font-size:clamp(21px,2vw,26px);letter-spacing:-.03em}
p{margin:0}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:500 11.5px 'JetBrains Mono',monospace;letter-spacing:.22em;text-transform:uppercase;color:var(--o-deep)}
.eyebrow::before{content:'';width:22px;height:1.5px;background:currentColor;opacity:.7}
.lead{font-size:clamp(17px,1.4vw,19px);line-height:1.7;color:var(--muted)}
.grad{background:linear-gradient(100deg,#e2610a 0%,#c24f06 35%,#b84a05 70%,#d9590a 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradShift 8s ease-in-out infinite}
@keyframes gradShift{50%{background-position:100% 0}}

/* ---------- Gombok ---------- */
.btn{--h:54px;position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:12px;height:var(--h);padding:0 8px 0 26px;border:0;border-radius:999px;font:700 15px 'Space Grotesk',sans-serif;letter-spacing:-.01em;white-space:nowrap;cursor:pointer;transition:transform .35s var(--ease),box-shadow .35s var(--ease),color .3s,background-color .3s;will-change:transform}
.btn .ico{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;transition:transform .45s var(--ease),background-color .3s}
.btn .ico svg{width:17px;height:17px}
.btn:hover .ico{transform:rotate(45deg)}
.btn:active{transform:scale(.97)}
.btn-primary{background:linear-gradient(135deg,#ff9f3a,#f47b20 55%,#e2610a);color:#1a1006;box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 16px 36px -14px rgba(244,123,32,.9)}
.btn-primary .ico{background:rgba(26,16,6,.12)}
.btn-primary::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,#ffb454,#f9951a);opacity:0;transition:opacity .35s}
.btn-primary::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.45),transparent 70%);transform:translateX(-120%);transition:transform .8s var(--ease)}
.btn-primary:hover{box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 22px 44px -14px rgba(244,123,32,1)}
.btn-primary:hover::before{opacity:1}
.btn-primary:hover::after{transform:translateX(120%)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark .ico{background:var(--o);color:#fff}
.btn-dark:hover{box-shadow:0 18px 40px -16px rgba(18,24,38,.8)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2);padding-right:26px}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--o);color:var(--o-deep)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light .ico{background:var(--ink);color:#fff}
.btn-sm{--h:44px;padding-left:20px;font-size:14px}
.btn-sm .ico{width:32px;height:32px}
.btn-ghost.btn-sm{padding-right:20px}

/* ---------- Fejléc ---------- */
.progress{position:fixed;inset:0 0 auto;height:3px;z-index:100;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#ffb454,#f47b20,#e2610a)}
.site-header{position:sticky;top:0;z-index:50;transition:background-color .35s,box-shadow .35s,backdrop-filter .35s}
.site-header.is-scrolled{background:rgba(251,248,244,.94);backdrop-filter:saturate(160%) blur(16px);-webkit-backdrop-filter:saturate(160%) blur(16px);box-shadow:0 1px 0 var(--line)}
.nav{height:84px;display:flex;align-items:center;gap:28px;transition:height .35s var(--ease)}
.is-scrolled .nav{height:70px}
.logo{display:block;flex-shrink:0}
.logo img{height:38px;width:auto;transition:transform .4s var(--ease)}
.logo:hover img{transform:scale(1.04)}
.nav-links{display:flex;gap:4px;margin-left:auto}
.nav-links a{position:relative;padding:10px 14px;font-size:14.5px;font-weight:700;color:var(--muted);border-radius:999px;transition:color .25s}
.nav-links a::after{content:'';position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;background:var(--o);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav-links a:hover,.nav-links a[aria-current=page]{color:var(--ink)}
.nav-links a:hover::after,.nav-links a[aria-current=page]::after{transform:scaleX(1);transform-origin:left}
.nav-actions{display:flex;align-items:center;gap:12px}
.lang{display:flex;padding:4px;border-radius:999px;background:var(--solid);box-shadow:inset 0 0 0 1px var(--line-2)}
.lang a,.lang span{display:grid;place-items:center;min-width:38px;height:32px;padding:0 8px;border-radius:999px;font:600 11.5px 'JetBrains Mono',monospace;letter-spacing:.06em;color:var(--muted);transition:background-color .25s,color .25s}
.lang .active{background:var(--ink);color:#fff}
.lang a:hover{color:var(--ink);background:var(--bg-2)}
.menu-toggle{display:none;width:46px;height:46px;border:0;border-radius:50%;background:var(--ink);cursor:pointer;position:relative}
.menu-toggle span{position:absolute;left:14px;right:14px;height:2px;border-radius:2px;background:#fff;transition:transform .4s var(--ease),opacity .2s}
.menu-toggle span:nth-child(1){top:17px}.menu-toggle span:nth-child(2){top:22px}.menu-toggle span:nth-child(3){top:27px}
.menu-open .menu-toggle span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.menu-open .menu-toggle span:nth-child(2){opacity:0}
.menu-open .menu-toggle span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:45;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:110px 28px 40px;background:var(--night);color:#fff;clip-path:circle(0 at calc(100% - 46px) 42px);transition:clip-path .7s var(--ease);pointer-events:none}
.menu-open .mobile-menu{clip-path:circle(150% at calc(100% - 46px) 42px);pointer-events:auto}
.mobile-menu a{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--night-line);font:700 clamp(28px,8vw,40px)/1.1 'Space Grotesk',sans-serif;letter-spacing:-.04em;opacity:0;transform:translateY(24px);transition:opacity .5s,transform .6s var(--ease)}
.mobile-menu a small{font:500 12px 'JetBrains Mono',monospace;color:var(--o)}
.menu-open .mobile-menu a{opacity:1;transform:none;transition-delay:calc(.15s + var(--i,0) * .05s)}
.mobile-menu .btn{margin-top:26px;align-self:flex-start;font-size:15px;border-bottom:0;opacity:0;transform:translateY(24px)}
.menu-open{overflow:hidden}
.menu-open .site-header{background:transparent;box-shadow:none;backdrop-filter:none}
.menu-open .site-header .logo,.menu-open .site-header .lang,.menu-open .site-header .nav-cta{visibility:hidden}

/* ---------- Hero ---------- */
.hero{position:relative;padding:40px 0 30px;overflow:hidden;isolation:isolate}
.hero::before{content:'';position:absolute;inset:0;z-index:-2;background-image:radial-gradient(var(--line-2) 1px,transparent 1px);background-size:24px 24px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 30% 30%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 30% 30%,#000 20%,transparent 75%);opacity:.7}
.blob{position:absolute;z-index:-1;border-radius:50%;filter:blur(70px);opacity:.55;pointer-events:none;animation:drift 22s ease-in-out infinite}
.blob.b1{width:520px;height:520px;left:-200px;top:-140px;background:radial-gradient(circle,#ffd6a3,transparent 70%)}
.blob.b2{width:420px;height:420px;right:30%;bottom:-220px;background:radial-gradient(circle,rgba(16,180,138,.28),transparent 70%);animation-delay:-9s}
@keyframes drift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(40px,-30px,0) scale(1.06)}}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;min-height:min(78vh,760px)}
.hero h1{margin:22px 0 26px}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.08em}
.hero h1 .line>span{display:inline-block;transform:translateY(105%);animation:lineUp 1.1s var(--ease) forwards;animation-delay:calc(.1s + var(--i,0) * .12s)}
@keyframes lineUp{to{transform:none}}
.hero .lead{max-width:560px;opacity:0;animation:fadeUp .9s var(--ease) .55s forwards}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;opacity:0;animation:fadeUp .9s var(--ease) .7s forwards}
.trust{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px;opacity:0;animation:fadeUp .9s var(--ease) .85s forwards}
.trust span{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--solid);box-shadow:inset 0 0 0 1px var(--line);font-size:13px;font-weight:700;color:var(--muted)}
.trust span::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(16,180,138,.14)}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero-visual{position:relative;perspective:1200px}
.hero-frame{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;box-shadow:var(--shadow);background:var(--bg-2) center/cover no-repeat;clip-path:inset(12% 12% 12% 12% round 32px);animation:frameIn 1.4s var(--ease) .15s forwards;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--ease)}
@keyframes frameIn{to{clip-path:inset(0 0 0 0 round 32px)}}
.hero-frame img{width:100%;height:100%;object-fit:cover;object-position:60% 50%;transform:scale(1.18);animation:imgIn 1.8s var(--ease) .15s forwards}
@keyframes imgIn{to{transform:scale(1.02)}}
.hero-frame::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(10,13,20,.55)),linear-gradient(90deg,rgba(244,123,32,.18),transparent 40%)}
.hero-caption{position:absolute;left:24px;right:24px;bottom:22px;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;color:#fff}
.hero-caption strong{display:block;font:700 22px/1.15 'Space Grotesk',sans-serif;letter-spacing:-.03em;max-width:260px}
.hero-caption small{font:500 11px 'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;opacity:.75}
.chip{position:absolute;z-index:3;display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;border-radius:20px;background:rgba(255,255,255,.86);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);box-shadow:0 20px 50px -24px rgba(18,24,38,.5),inset 0 0 0 1px rgba(255,255,255,.7);opacity:0;animation:chipIn .9s var(--ease) forwards,float 7s ease-in-out infinite}
.chip .dot{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:var(--o-soft);color:var(--o-deep);flex-shrink:0}
.chip .dot svg{width:20px;height:20px}
.chip b{display:block;font:700 14.5px 'Space Grotesk',sans-serif;letter-spacing:-.02em}
.chip span{display:block;font-size:12px;color:var(--muted);font-weight:600}
.chip.c1{top:9%;left:-34px;animation-delay:1s,1.9s}
.chip.c2{bottom:20%;right:18px;animation-delay:1.2s,2.4s}
.chip.c2 .dot{background:rgba(16,180,138,.12);color:var(--mint)}
@keyframes chipIn{from{opacity:0;transform:translateY(20px) scale(.92)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -10px}}
.scroll-cue{display:flex;align-items:center;gap:12px;margin-top:40px;font:500 11px 'JetBrains Mono',monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.scroll-cue i{position:relative;width:22px;height:36px;border-radius:12px;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.scroll-cue i::after{content:'';position:absolute;left:50%;top:8px;width:4px;height:7px;margin-left:-2px;border-radius:2px;background:var(--o);animation:wheel 1.8s ease-in-out infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(-3px)}40%{opacity:1}100%{opacity:0;transform:translateY(10px)}}

/* ---------- Futószalag ---------- */
.ticker-wrap{overflow:hidden;padding:24px 0 14px;margin-top:10px}
.ticker{position:relative;padding:22px 0;background:var(--night);color:#fff;overflow:hidden;transform:rotate(-1.2deg) scale(1.02)}
.ticker-track{display:flex;width:max-content;animation:ticker 38s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker span{display:inline-flex;align-items:center;gap:34px;padding-right:34px;font:700 clamp(22px,3vw,36px) 'Space Grotesk',sans-serif;letter-spacing:-.03em;white-space:nowrap}
.ticker span::after{content:'';width:12px;height:12px;border-radius:4px;background:var(--o);transform:rotate(45deg);box-shadow:0 0 18px var(--o)}
.ticker span:nth-child(even){color:transparent;-webkit-text-stroke:1.2px rgba(255,255,255,.55)}
@keyframes ticker{to{transform:translateX(-50%)}}

/* ---------- Szekciók ---------- */
.section{padding:clamp(48px,6vw,84px) 0}
.section-head{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end;margin-bottom:56px}
.section-head h2{margin-top:16px}
.section-head p{color:var(--muted);font-size:17px;line-height:1.7;max-width:460px;justify-self:end}

/* Két út — képes kártyák */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.path{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(460px,48vw,620px);padding:clamp(26px,3vw,40px);border-radius:var(--r-lg);overflow:hidden;color:#fff;isolation:isolate;box-shadow:var(--shadow)}
.path img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.2s var(--ease)}
.path::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,13,20,.05) 20%,rgba(10,13,20,.78) 78%);transition:background-color .5s}
.path.alt::before{background:linear-gradient(180deg,rgba(10,13,20,.25),rgba(10,13,20,.88) 75%)}
.path:hover img{transform:scale(1.1)}
.path .num{text-transform:uppercase;font:500 11.5px 'JetBrains Mono',monospace;letter-spacing:.2em;color:#ffc27a}
.path h3{font-size:clamp(32px,3.6vw,48px);letter-spacing:-.045em;margin:14px 0 12px}
.path p{max-width:440px;color:rgba(255,255,255,.82);line-height:1.65}
.path .go{position:absolute;top:26px;right:26px;display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.14);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);transition:transform .5s var(--ease),background-color .35s}
.path .go svg{width:24px;height:24px}
.path:hover .go{transform:rotate(45deg) scale(1.06);background:var(--o);color:#1a1006}
.path .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.path .tags span{padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:12.5px;font-weight:700;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.path-link{position:absolute;inset:0;z-index:2;border-radius:inherit}

/* Szolgáltatások — sötét, futurisztikus */
.dark{position:relative;background:var(--night);color:#f2efe9;overflow:hidden;isolation:isolate}
.dark .eyebrow{color:#ffb454}
.dark .section-head p{color:rgba(242,239,233,.66)}
.dark-bg{position:absolute;inset:-10% 0 auto;height:120%;z-index:-2;opacity:.55}
.dark-bg img{width:100%;height:100%;object-fit:cover;object-position:75% 50%}
.dark::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--night) 25%,rgba(10,13,20,.6) 60%,rgba(10,13,20,.85)),linear-gradient(180deg,var(--night),transparent 20%,transparent 80%,var(--night))}
.dark::after{content:'';position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
.services{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:svc}
.service{position:relative;display:flex;flex-direction:column;min-height:330px;padding:28px;border-radius:var(--r-md);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--night-line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);overflow:hidden;transition:transform .5s var(--ease),box-shadow .4s,background-color .4s}
.service::before{content:'';position:absolute;inset:0;background:radial-gradient(380px circle at var(--x,50%) var(--y,0%),rgba(249,149,26,.22),transparent 45%);opacity:0;transition:opacity .4s;pointer-events:none}
.service:hover{transform:translateY(-8px);box-shadow:inset 0 0 0 1px rgba(249,149,26,.45),0 30px 60px -30px rgba(249,149,26,.55);background:rgba(255,255,255,.06)}
.service:hover::before{opacity:1}
.service .n{font:500 12px 'JetBrains Mono',monospace;letter-spacing:.14em;color:#ffb454}
.service .glyph{display:grid;place-items:center;width:56px;height:56px;margin:26px 0 28px;border-radius:18px;background:linear-gradient(135deg,rgba(249,149,26,.25),rgba(249,149,26,.05));box-shadow:inset 0 0 0 1px rgba(249,149,26,.35);color:#ffb454;transition:transform .6s var(--ease)}
.service:hover .glyph{transform:rotate(-12deg) scale(1.08)}
.service .glyph svg{width:26px;height:26px}
.service h3{font-size:22px;color:#fff}
.service p{margin:12px 0 26px;font-size:14.5px;line-height:1.65;color:rgba(242,239,233,.66)}
.service a{position:relative;z-index:1;margin-top:auto;display:inline-flex;align-items:center;gap:8px;font:700 14px 'Space Grotesk',sans-serif;color:#fff}
.service a svg{width:16px;height:16px;transition:transform .4s var(--ease)}
.service a:hover{color:#ffb454}
.service a:hover svg{transform:translateX(4px)}
.service a::after{content:'';position:absolute;inset:-400px}

/* Történet */
.story{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,6vw,90px);align-items:center}
.story-media{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:5/4;box-shadow:var(--shadow)}
.story-media img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover}
.story-badge{position:absolute;left:22px;bottom:22px;right:22px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-radius:20px;background:rgba(255,255,255,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 18px 40px -24px rgba(18,24,38,.5)}
.story-badge strong{font:700 17px 'Space Grotesk',sans-serif;letter-spacing:-.02em}
.story-badge small{display:block;font:500 10.5px 'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--o-deep)}
.story-badge img{position:static;width:44px;height:44px;object-fit:contain}
.story-copy h2{margin:16px 0 22px}
.story-copy p{color:var(--muted);line-height:1.75;margin-bottom:14px}
.countries{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 30px}
.countries span{display:inline-flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:999px;background:var(--solid);box-shadow:inset 0 0 0 1px var(--line);font-weight:700;font-size:14px;transition:transform .35s var(--ease),box-shadow .3s}
.countries span:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--o),0 12px 24px -16px rgba(244,123,32,.8)}
.countries i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;font:600 10px 'JetBrains Mono',monospace;font-style:normal}

/* Jelölt CTA */
.cta-card{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:clamp(34px,5vw,64px);border-radius:40px;background:linear-gradient(130deg,#ff9f3a,#f47b20 48%,#d9560a);color:#1a1006;overflow:hidden;isolation:isolate;box-shadow:0 40px 90px -40px rgba(196,82,0,.7)}
.cta-card::before{content:'';position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,.22) 1px,transparent 1px);background-size:20px 20px;-webkit-mask-image:linear-gradient(110deg,#000,transparent 60%);mask-image:linear-gradient(110deg,#000,transparent 60%)}
.cta-card::after{content:'';position:absolute;width:520px;height:520px;right:-160px;top:-240px;z-index:-1;border-radius:50%;background:radial-gradient(circle,rgba(255,225,180,.55),transparent 65%);animation:drift 16s ease-in-out infinite}
.cta-card .eyebrow{color:#3a1e04}
.cta-card h2{margin:16px 0 18px;font-size:clamp(34px,4.4vw,60px)}
.cta-card p{max-width:520px;color:#2a1704;font-size:17px;line-height:1.7}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.cta-media{position:relative;justify-self:center;width:min(380px,100%)}
.cta-media img{border-radius:28px;aspect-ratio:3/4;object-fit:cover;box-shadow:0 30px 60px -30px rgba(80,25,0,.9);transform:rotate(3deg);transition:transform .7s var(--ease)}
.cta-card:hover .cta-media img{transform:rotate(0) scale(1.02)}
.cta-media .chip{position:absolute;left:-36px;bottom:34px;opacity:1;animation:float 7s ease-in-out infinite}

/* Kapcsolat sáv */
.contact{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:clamp(30px,4vw,52px);border-radius:var(--r-lg);background:var(--solid);box-shadow:inset 0 0 0 1px var(--line),var(--shadow)}
.contact h2{font-size:clamp(28px,3.2vw,42px)}
.contact p{margin-top:12px;color:var(--muted)}
.contact-actions{display:flex;flex-wrap:wrap;gap:12px;flex-shrink:0}

/* ---------- Lábléc ---------- */
.site-footer{position:relative;margin-top:clamp(70px,8vw,120px);padding:80px 0 34px;background:var(--night);color:rgba(242,239,233,.72);overflow:hidden;isolation:isolate}
.site-footer::before{content:'';position:absolute;width:640px;height:640px;left:50%;top:-460px;margin-left:-320px;z-index:-1;border-radius:50%;background:radial-gradient(circle,rgba(249,149,26,.32),transparent 65%)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
.footer-logo{height:40px;width:auto}
.footer-desc{margin-top:20px;max-width:340px;font-size:14.5px;line-height:1.7}
.footer-col h4{margin-bottom:16px;font:500 11px 'JetBrains Mono',monospace;letter-spacing:.2em;text-transform:uppercase;color:#ffb454}
.footer-col a{display:block;padding:5px 0;font-size:14.5px;font-weight:600;color:rgba(242,239,233,.8);transition:color .25s,transform .35s var(--ease)}
.footer-col a:hover{color:#fff;transform:translateX(4px)}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:56px;padding-top:24px;border-top:1px solid var(--night-line);font-size:13px}

/* ---------- Aloldalak ---------- */
.subhero{position:relative;padding:clamp(56px,8vw,110px) 0 clamp(50px,6vw,80px);overflow:hidden;isolation:isolate;border-bottom:1px solid var(--line)}
.subhero::before{content:'';position:absolute;inset:0;z-index:-2;background-image:radial-gradient(var(--line-2) 1px,transparent 1px);background-size:24px 24px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 90%);mask-image:linear-gradient(180deg,#000,transparent 90%);opacity:.6}
.subhero .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}
.subhero h1{font-size:clamp(42px,6.2vw,86px);margin:18px 0 22px}
.subhero p{max-width:620px;font-size:18px;line-height:1.7;color:var(--muted)}
.subhero-media{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow);clip-path:inset(10% 10% 10% 10% round 32px);animation:frameIn 1.3s var(--ease) .1s forwards}
.subhero-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.15);animation:imgIn 1.6s var(--ease) .1s forwards}
.subhero-text>*{opacity:0;animation:fadeUp .9s var(--ease) forwards;animation-delay:calc(.08s + var(--i,0) * .1s)}
.content-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:clamp(36px,6vw,80px);align-items:start}
.prose h2{font-size:clamp(28px,3vw,40px);margin:0 0 20px}
.prose h3{margin:42px 0 12px;font-size:23px}
.prose h4{margin:28px 0 10px;font-size:19px}
.prose p,.prose li{color:var(--muted);font-size:16.5px;line-height:1.8}
.prose p+p{margin-top:14px}
.prose a{color:var(--o-deep);text-decoration:underline;text-underline-offset:3px}
.side-card{position:sticky;top:110px;padding:30px;border-radius:var(--r-md);background:var(--solid);box-shadow:inset 0 0 0 1px var(--line),var(--shadow);overflow:hidden;isolation:isolate}
.side-card::before{content:'';position:absolute;width:240px;height:240px;right:-110px;top:-110px;z-index:-1;border-radius:50%;background:radial-gradient(circle,rgba(249,149,26,.35),transparent 70%)}
.side-card h3{margin:14px 0 10px}
.side-card p{color:var(--muted);margin-bottom:22px;line-height:1.65}
.side-card .btn{margin-top:4px}
.preview-note{padding:16px 18px;border-radius:var(--r-sm);background:var(--o-soft);color:#7a3d00;font-size:14.5px;line-height:1.6;box-shadow:inset 0 0 0 1px rgba(244,123,32,.25)}
.preview-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0 10px;padding:26px;border-radius:var(--r-md);background:var(--solid);box-shadow:inset 0 0 0 1px var(--line)}
.preview-form .btn{grid-column:1/-1;justify-self:start}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font:500 11px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.field input,.field select{height:52px;padding:0 16px;border:0;border-radius:14px;background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--line-2);font:600 15px Manrope,sans-serif;color:var(--ink);outline:0;transition:box-shadow .25s,background-color .25s}
.field input:focus,.field select:focus{background:#fff;box-shadow:inset 0 0 0 1.5px var(--o),0 0 0 5px rgba(249,149,26,.14)}
.field input[type=file]{padding:12px 16px;height:auto}
.disabled-btn{opacity:.7}
.legal-source{max-width:860px;margin-inline:auto}
.legal-source h2{font-size:clamp(28px,3vw,40px);margin:34px 0 20px}
.legal-source h3,.legal-source h4{margin:34px 0 12px;font-size:21px}
.legal-source p,.legal-source li,.legal-source td{color:var(--muted);font-size:15.5px;line-height:1.8}
.legal-source p{margin:10px 0}
.legal-source table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14px}
.legal-source td,.legal-source th{padding:10px 12px;border:1px solid var(--line-2);vertical-align:top;text-align:left}
.legal-source a{color:var(--o-deep);word-break:break-word}
.source-evidence{margin-top:40px;font-size:13px;color:var(--faint)}

/* ---------- Adatkezelési tájékoztató (tartalomjegyzékes) ---------- */
.subhero .legal-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.legal-chips a{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:var(--solid);box-shadow:inset 0 0 0 1px var(--line-2);font-size:13.5px;font-weight:700;transition:box-shadow .25s,transform .35s var(--ease),color .25s}
.legal-chips a span{font:500 10.5px 'JetBrains Mono',monospace;color:var(--o-deep)}
.legal-chips a:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--o),0 10px 22px -14px rgba(244,123,32,.8);color:var(--o-deep)}
.legal-section{padding-top:clamp(48px,6vw,80px)}
.legal-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.legal-nav{position:sticky;top:96px;max-height:calc(100vh - 120px);overflow:auto;padding:22px 18px;border-radius:var(--r-md);background:var(--solid);box-shadow:inset 0 0 0 1px var(--line);scrollbar-width:thin}
.legal-nav .eyebrow{margin:0 6px 12px}
.legal-nav-doc+.legal-nav-doc{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.legal-nav-title{display:flex;gap:10px;align-items:baseline;padding:8px 8px;border-radius:12px;font:700 14px/1.35 'Space Grotesk',sans-serif;letter-spacing:-.01em;transition:background-color .2s,color .2s}
.legal-nav-title span{font:500 10.5px 'JetBrains Mono',monospace;color:var(--o-deep)}
.legal-nav-title:hover,.legal-nav-title.is-active{background:var(--o-soft);color:var(--o-deep)}
.legal-nav ol{list-style:none;margin:2px 0 6px;padding:0 0 0 28px;display:none}
.legal-nav-doc.is-open ol{display:block}
.legal-nav ol a{position:relative;display:block;padding:5px 8px;border-radius:8px;font-size:12.5px;font-weight:600;line-height:1.4;color:var(--muted);transition:color .2s,background-color .2s}
.legal-nav ol a::before{content:'';position:absolute;left:-12px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--line-2);transition:background-color .2s,box-shadow .2s}
.legal-nav ol a:hover{color:var(--ink)}
.legal-nav ol a.is-active{color:var(--ink);background:var(--bg)}
.legal-nav ol a.is-active::before{background:var(--o);box-shadow:0 0 0 4px rgba(249,149,26,.18)}
.legal-body{min-width:0;max-width:880px}
.legal-doc{padding:clamp(26px,4vw,48px);border-radius:var(--r-lg);background:var(--solid);box-shadow:inset 0 0 0 1px var(--line);scroll-margin-top:96px}
.legal-doc+.legal-doc{margin-top:24px}
.legal-doc-head{padding-bottom:22px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.legal-doc-head h2{margin-top:12px;font-size:clamp(26px,3vw,38px)}
.legal-doc h3{margin:38px 0 12px;font-size:21px;scroll-margin-top:100px}
.legal-doc h4,.legal-doc h5,.legal-doc h6{margin:26px 0 10px;font-size:17px}
.legal-doc p,.legal-doc li,.legal-doc td,.legal-doc th{color:var(--muted);font-size:15.5px;line-height:1.8}
.legal-doc p{margin:10px 0}
.legal-doc strong{color:var(--ink)}
.legal-doc ul,.legal-doc ol{padding-left:22px}
.legal-doc li{margin:4px 0}
.legal-doc a{color:var(--o-deep);text-decoration:underline;text-underline-offset:3px;word-break:break-word}
.legal-doc table{display:block;width:100%;overflow-x:auto;border-collapse:collapse;margin:18px 0}
.legal-doc td,.legal-doc th{padding:10px 12px;border:1px solid var(--line-2);vertical-align:top;text-align:left;font-size:14px;min-width:140px}
@media (max-width:980px){.legal-layout{grid-template-columns:minmax(0,1fr)}.legal-nav{position:relative;top:0;max-height:none}.legal-nav ol{display:none!important}}


/* ---------- Blog-lista ---------- */
.post-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.post{position:relative;display:flex;flex-direction:column;min-height:280px;padding:30px;border-radius:var(--r-md);background:var(--solid);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;isolation:isolate;transition:transform .5s var(--ease),box-shadow .4s}
.post::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(360px circle at var(--x,50%) var(--y,0%),rgba(249,149,26,.12),transparent 50%);opacity:0;transition:opacity .4s}
.post:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px rgba(244,123,32,.4),var(--shadow)}
.post:hover::before{opacity:1}
.post-day{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:var(--ink);color:#fff;font:700 22px 'Space Grotesk',sans-serif;letter-spacing:-.04em}
.post h3{margin:24px 0 10px;font-size:clamp(21px,2vw,25px)}
.post-meta{font:500 12px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--o-deep)}
.post a{margin-top:auto;padding-top:22px;font:700 14.5px 'Space Grotesk',sans-serif;color:var(--ink);transition:color .25s}
.post a::after{content:'';position:absolute;inset:0}
.post:hover a{color:var(--o-deep)}

/* ---------- Karrierút ---------- */
.path-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.path-card{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;min-height:260px;padding:34px;border-radius:var(--r-lg);background:var(--solid);box-shadow:inset 0 0 0 1px var(--line),var(--shadow);overflow:hidden;isolation:isolate;transition:transform .5s var(--ease)}
.path-card::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(380px circle at var(--x,80%) var(--y,0%),rgba(249,149,26,.16),transparent 50%)}
.path-card.dark{background:var(--night);color:#f2efe9}
.path-card.dark p{color:rgba(242,239,233,.7)}
.path-card:hover{transform:translateY(-6px)}
.path-card .num,.step-no{font:500 11.5px 'JetBrains Mono',monospace;letter-spacing:.18em;color:var(--o-deep)}
.path-card.dark .num{color:#ffb454}
.path-card h3{margin:16px 0 12px;font-size:clamp(26px,2.6vw,34px)}
.path-card p{color:var(--muted);line-height:1.65;max-width:420px}
.path-card .arrow{flex-shrink:0;display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--o);color:#1a1006;font-size:22px;transition:transform .5s var(--ease)}
.path-card .arrow::after{content:'';position:absolute;inset:0}
.path-card:hover .arrow{transform:rotate(-45deg) scale(1.06)}
.process-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.step{display:flex;flex-direction:column;align-items:flex-start;padding:28px;border-radius:var(--r-md);background:var(--solid);box-shadow:inset 0 0 0 1px var(--line)}
.step h3{margin:14px 0 10px;font-size:22px}
.step p{color:var(--muted);line-height:1.65;margin-bottom:24px}
.step .btn{margin-top:auto}
@media (max-width:900px){.post-grid,.path-grid,.process-grid{grid-template-columns:minmax(0,1fr)}.path-card{min-height:0}}

/* ---------- Görgetéses megjelenés ---------- */
[data-reveal]{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform 1.1s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
[data-reveal=left]{transform:translateX(-40px)}
[data-reveal=scale]{transform:scale(.94)}
[data-reveal].is-in{opacity:1;transform:none}
.no-js [data-reveal]{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .hero h1 .line>span,.hero-frame,.hero-frame img,.subhero-media,.subhero-media img{transform:none!important;clip-path:none!important}
  [data-reveal]{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- Reszponzív ---------- */
@media (max-width:1100px){
  .nav-links{display:none}
  .nav-actions{margin-left:auto}
  .menu-toggle{display:block}
  .services{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .hero-grid,.story,.cta-card,.subhero .wrap,.content-grid,.section-head{grid-template-columns:minmax(0,1fr)}
  .hero-grid{min-height:0;gap:44px}
  .hero-frame{aspect-ratio:4/3}
  .chip.c1{left:12px;top:12px}
  .chip.c2{right:12px;bottom:84px}
  .section-head p{justify-self:start}
  .paths{grid-template-columns:minmax(0,1fr)}
  .side-card{position:relative;top:0}
  .cta-media{justify-self:start}
  .subhero-media{max-width:560px}
}
@media (max-width:640px){
  :root{--wrap:calc(100% - 32px)}
  .nav{height:70px}
  .logo img{height:30px}
  .nav-cta{display:none}
  .lang a,.lang span{min-width:32px;height:28px;padding:0 6px}
  .hero{padding-top:20px}
  .btn{--h:52px;font-size:14.5px}
  .hero-ctas .btn{flex:1 1 100%;justify-content:space-between}
  .hero-frame{aspect-ratio:4/5}
  .chip{padding:10px 12px 10px 10px}
  .chip .dot{width:34px;height:34px}
  .scroll-cue{display:none}
  .services{grid-template-columns:minmax(0,1fr)}
  .service{min-height:0}
  .path{min-height:480px}
  .contact{flex-direction:column;align-items:flex-start}
  .cta-card{border-radius:30px}
  .cta-media .chip{left:10px}
  .preview-form{grid-template-columns:1fr;padding:18px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
  .footer-grid>div:first-child{grid-column:1/-1}
}
/* October review: accessible actions and a shorter mobile route to jobs. */
html{scroll-padding-top:100px}
.btn,button.job-more,.job-more{min-height:48px}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #e87424;outline-offset:4px}
.jobs-foot{flex-wrap:wrap;gap:16px}
[hidden]{display:none!important}
.job-more.btn{align-self:flex-start;color:var(--ink);padding:12px 18px}
.apply-steps{padding-left:24px;margin-top:36px}
.apply-steps li{padding:10px 0}
.application-help{padding-block:40px}
.application-help p{font-size:18px;line-height:2}
.application-help a{text-decoration:underline;text-underline-offset:4px}
.portal-language-note{max-width:72ch;margin-bottom:24px;line-height:1.6}
@media(min-width:901px){
 #allaskeresok .paths{gap:20px}
 #allaskeresok .path{min-height:clamp(320px,28vw,380px);padding:28px;border-radius:24px}
 #allaskeresok .path img{object-position:center 32%}
 #allaskeresok .path h3{font-size:clamp(28px,2.6vw,36px);letter-spacing:-.03em;margin:10px 0}
 #allaskeresok .path p{font-size:15px;line-height:1.5;max-width:48ch}
 #allaskeresok .path .go{width:48px;height:48px;top:20px;right:20px}
 #allaskeresok .path .tags{margin-top:14px;gap:6px}
 #allaskeresok .path .tags span{padding:6px 10px;font-size:12px}
}
@media(max-width:700px){
 .hero{padding-top:110px;padding-bottom:32px}
 .hero-grid{gap:24px}
 .hero h1{font-size:clamp(40px,10vw,66px)}
 .hero-visual{display:none}
 .hero .scroll-cue{display:none}
 .hero-ctas{display:grid;grid-template-columns:1fr;gap:12px}
 .hero-ctas .btn{width:100%;justify-content:space-between}
 .jobs{padding-top:36px}
 .jobs-foot{align-items:stretch;flex-direction:column}
 .jobs-search input{font-size:16px}
 .job h3{overflow-wrap:anywhere}
 .split-cards{grid-template-columns:1fr}
 .side-card .btn{max-width:100%;overflow-wrap:anywhere}
}

/* Privacy notice: reading width and accessible anchored sections. */
.legal-doc{scroll-margin-top:110px;overflow-wrap:anywhere}.legal-doc p{max-width:74ch;font-size:16px;line-height:1.8}.legal-doc a,.subhero-text p a{color:inherit;text-decoration:underline;text-underline-offset:3px}.legal-doc h2{font-size:clamp(24px,3vw,34px);letter-spacing:-.03em;margin-bottom:20px}.legal-nav ol{padding-left:20px}.legal-nav li{margin:10px 0}

/* =====================================================================================
   ÉJSZAKAI MÓD — sötét grafit + HD Direkt narancs
   A publikus oldal és az allas.hddirekt.com (fotós hero, narancs hullám, kategóriafelhő)
   ötvözete. Csak változók + célzott felülírások: a nappali mód változatlan marad.
   (Forrás: src/theme-dark.css — a build a styles.css végére fűzi.)
   ===================================================================================== */
[data-theme=dark]{
  color-scheme:dark;
  --bg:#121315;--bg-2:#18191c;--solid:#1c1d21;--ink:#f3f0eb;--ink-2:#e6e2dc;--muted:#a8aab0;--faint:#8a8c92;
  --line:rgba(255,255,255,.07);--line-2:rgba(255,255,255,.13);
  --o-deep:#ff9b4f;--o-soft:rgba(244,123,32,.13);--mint:#2fd3a3;
  --night:#0c0d0f;--night-2:#141518;--night-line:rgba(255,255,255,.08);
  --shadow:0 30px 70px -36px rgba(0,0,0,.9);
}
[data-theme=dark] body{background:var(--bg)}
[data-theme=dark] .site-header.is-scrolled{background:rgba(18,19,21,.9);box-shadow:0 1px 0 var(--line)}
[data-theme=dark] .lang .active{background:var(--o);color:#1a1006}
[data-theme=dark] .menu-toggle{background:var(--o)}
[data-theme=dark] .menu-toggle span{background:#1a1006}
[data-theme=dark] .btn-dark{background:#f3f0eb;color:#121315}
[data-theme=dark] .btn-dark:hover{box-shadow:0 18px 40px -16px rgba(244,123,32,.55)}
[data-theme=dark] .btn-light{color:#121315}
[data-theme=dark] .btn-light .ico{background:#121315;color:#fff}
[data-theme=dark] .btn-ghost:hover{color:var(--o-deep)}
[data-theme=dark] .chip,[data-theme=dark] .story-badge{background:rgba(28,29,33,.84);box-shadow:0 20px 50px -24px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.08)}
[data-theme=dark] .chip .dot{background:rgba(244,123,32,.16)}
[data-theme=dark] .blob.b1{background:radial-gradient(circle,rgba(244,123,32,.38),transparent 70%);opacity:.7}
[data-theme=dark] .blob.b2{background:radial-gradient(circle,rgba(244,123,32,.16),transparent 70%)}
[data-theme=dark] .hero::before{opacity:.45}
[data-theme=dark] .countries i,[data-theme=dark] .post-day{background:var(--o);color:#1a1006}
[data-theme=dark] .preview-note{color:#ffc58f;box-shadow:inset 0 0 0 1px rgba(244,123,32,.3)}
[data-theme=dark] .field input:focus,[data-theme=dark] .field select:focus{background:var(--solid)}
[data-theme=dark] .site-footer{background:#0b0c0e;border-top:1px solid var(--line)}
[data-theme=dark] .path img,[data-theme=dark] .story-media img,[data-theme=dark] .cta-media img,[data-theme=dark] .subhero-media img{filter:brightness(.86) saturate(1.05)}
[data-theme=dark] .contact,[data-theme=dark] .side-card,[data-theme=dark] .post,[data-theme=dark] .step,[data-theme=dark] .legal-doc,[data-theme=dark] .legal-nav,[data-theme=dark] .preview-form,[data-theme=dark] .path-card:not(.dark){background:linear-gradient(180deg,#1d1e22,#18191c)}
[data-theme=dark] .cta-card{box-shadow:0 40px 90px -40px rgba(244,123,32,.55)}
/* A futószalag éjjel narancs sáv — az allas.hddirekt.com narancs hullámának visszhangja. */
[data-theme=dark] .ticker{background:linear-gradient(90deg,#e2610a,#f9951a 50%,#e2610a);color:#141414}
[data-theme=dark] .ticker span::after{background:#141414;box-shadow:none}
[data-theme=dark] .ticker span:nth-child(even){-webkit-text-stroke:1.2px rgba(20,20,20,.55)}

/* ---------- Témaváltó gomb (nap ↔ hold morf) ---------- */
.theme-toggle{position:relative;display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border:0;border-radius:50%;background:var(--solid);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2);cursor:pointer;transition:box-shadow .3s,transform .35s var(--ease),color .3s}
.theme-toggle:hover{box-shadow:inset 0 0 0 1px var(--o),0 10px 24px -14px rgba(244,123,32,.9);color:var(--o-deep)}
.theme-toggle:active{transform:scale(.92)}
.tt{width:22px;height:22px;overflow:visible}
.tt-core{transform-origin:12px 12px;transition:transform .6s var(--ease)}
.tt-bite{transition:transform .6s var(--ease)}
.tt-rays{transform-origin:12px 12px;transition:transform .6s var(--ease),opacity .35s}
[data-theme=dark] .tt-core{transform:scale(1.7)}
[data-theme=dark] .tt-bite{transform:translate(-7px,1px)}
[data-theme=dark] .tt-rays{transform:rotate(60deg) scale(.4);opacity:0}
[data-theme=dark] .theme-toggle{background:rgba(244,123,32,.12);color:#ffb470;box-shadow:inset 0 0 0 1px rgba(244,123,32,.35)}

/* Kör alakú témaváltás (View Transitions API, ahol támogatott; máshol finom áttűnés) */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){animation:vtReveal .7s cubic-bezier(.16,1,.3,1)}
@keyframes vtReveal{from{clip-path:circle(0 at var(--vt-x,90%) var(--vt-y,40px))}to{clip-path:circle(var(--vt-r,150vmax) at var(--vt-x,90%) var(--vt-y,40px))}}
html.theme-fade,html.theme-fade *{transition:background-color .45s ease,color .45s ease,border-color .45s ease,box-shadow .45s ease!important}

/* Éjszakai hero-kép: csak sötét módban töltődik be (lusta betöltés + display) */
.hero-frame .img-night{display:none;position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;opacity:0;transition:opacity .9s ease}
[data-theme=dark] .hero-frame .img-night{display:block}
[data-theme=dark] .hero-frame .img-night.is-loaded{opacity:1}
.hero-frame .hero-caption{z-index:2}
.hero-frame::after{z-index:1}

/* Egérkövető narancs fény a hero-n (éjjel) */
.hero::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .6s;background:radial-gradient(520px circle at var(--gx,70%) var(--gy,30%),rgba(244,123,32,.14),transparent 60%)}
[data-theme=dark] .hero::after{opacity:1}

/* Narancs hullám a hero alján (allas.hddirekt.com motívum) */
.hero-wave{position:absolute;left:0;bottom:-2px;z-index:-1;width:200%;height:110px;pointer-events:none;opacity:0;transition:opacity .6s;animation:waveDrift 22s linear infinite}
.hero-wave .w1{fill:rgba(244,123,32,.18)}
.hero-wave .w2{fill:rgba(244,123,32,.10)}
[data-theme=dark] .hero-wave{opacity:1}
@keyframes waveDrift{to{transform:translateX(-50%)}}

/* ---------- Élő állásblokk ---------- */
.jobs{position:relative;isolation:isolate;overflow:hidden}
.jobs-bg{position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .6s;background:url("/assets/img/wave-1200.webp") center 85%/cover no-repeat;-webkit-mask-image:linear-gradient(180deg,transparent,#000 35%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 35%,#000 70%,transparent)}
[data-theme=dark] .jobs-bg{opacity:.55}
@media (min-width:1200px){[data-theme=dark] .jobs-bg{background-image:url("/assets/img/wave-2000.webp")}}
.live-dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--mint)}
.live-dot::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--mint);animation:livePulse 1.8s ease-out infinite}
@keyframes livePulse{from{transform:scale(.6);opacity:1}to{transform:scale(1.8);opacity:0}}
.jobs .eyebrow::before{display:none}
.jobs-tools{display:flex;flex-direction:column;gap:16px;margin-bottom:28px}
.jobs-search{position:relative;display:flex;align-items:center;gap:12px;max-width:640px;height:60px;padding:0 14px 0 20px;border-radius:999px;background:var(--solid);box-shadow:inset 0 0 0 1.5px var(--line-2),var(--shadow);transition:box-shadow .3s}
.jobs-search:focus-within{box-shadow:inset 0 0 0 1.5px var(--o),0 0 0 6px rgba(249,149,26,.14),var(--shadow)}
.jobs-search svg{width:20px;height:20px;color:var(--o-deep);flex-shrink:0}
.jobs-search input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;color:var(--ink);font:600 16px Manrope,sans-serif}
.jobs-search input::placeholder{color:var(--faint)}
.jobs-search kbd{display:grid;place-items:center;min-width:28px;height:28px;border-radius:8px;font:500 12px "JetBrains Mono",monospace;color:var(--faint);box-shadow:inset 0 0 0 1px var(--line-2)}
.jobs-chips{display:flex;flex-wrap:wrap;gap:8px}
.jobs-chips button{position:relative;display:inline-flex;align-items:center;gap:9px;padding:9px 10px 9px 16px;border:0;border-radius:999px;background:var(--solid);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line-2);font:700 13px Manrope,sans-serif;cursor:pointer;transition:color .25s,background-color .3s,box-shadow .3s,transform .35s var(--ease)}
.jobs-chips button b{display:grid;place-items:center;min-width:24px;height:22px;padding:0 6px;border-radius:999px;background:var(--bg-2);font:600 11px "JetBrains Mono",monospace;color:var(--muted)}
.jobs-chips button:hover{color:var(--ink);transform:translateY(-2px)}
.jobs-chips button[aria-pressed=true]{background:linear-gradient(135deg,#ff9f3a,#f47b20);color:#1a1006;box-shadow:0 10px 24px -12px rgba(244,123,32,.95)}
.jobs-chips button[aria-pressed=true] b{background:rgba(26,16,6,.14);color:#1a1006}
.jobs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;min-height:200px}
.job{position:relative;display:flex;flex-direction:column;min-height:228px;padding:24px;border-radius:var(--r-md);background:var(--solid);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;isolation:isolate;transition:transform .5s var(--ease),box-shadow .4s;animation:jobIn .6s var(--ease) both;animation-delay:calc(var(--i,0) * 55ms)}
@keyframes jobIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.job::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(340px circle at var(--x,50%) var(--y,0%),rgba(244,123,32,.14),transparent 55%);opacity:0;transition:opacity .4s}
.job::after{content:'';position:absolute;left:24px;right:24px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:linear-gradient(90deg,#ffb454,#f47b20);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.job:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px rgba(244,123,32,.4),var(--shadow)}
.job:hover::before{opacity:1}
.job:hover::after{transform:scaleX(1)}
.job-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.job-tag{max-width:65%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:5px 10px;border-radius:999px;background:var(--o-soft);color:var(--o-deep);font:500 10.5px "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase}
.job-loc{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--muted);white-space:nowrap}
.job-loc svg{width:13px;height:13px}
.job h3{margin:18px 0 8px;font-size:19px;line-height:1.25;letter-spacing:-.025em}
.job p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:13.5px;line-height:1.6;color:var(--muted)}
.job-more{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:18px;font:700 13.5px "Space Grotesk",sans-serif;color:var(--ink)}
.job-more i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-2);font-style:normal;transition:background-color .35s,color .35s,transform .5s var(--ease),box-shadow .35s}
.job-more svg{width:16px;height:16px}
.job:hover .job-more i{background:var(--o);color:#1a1006;box-shadow:none;transform:rotate(-45deg)}
.job a::after{content:'';position:absolute;inset:0}
.job.is-skeleton{animation:none;gap:14px}
.job.is-skeleton i{display:block;height:14px;border-radius:8px;background:linear-gradient(90deg,var(--bg-2) 30%,var(--line-2) 50%,var(--bg-2) 70%);background-size:300% 100%;animation:shimmerBg 1.4s linear infinite}
.job.is-skeleton i:nth-child(1){width:40%;height:22px}
.job.is-skeleton i:nth-child(2){width:85%;height:20px;margin-top:10px}
.job.is-skeleton i:nth-child(3){width:70%}
.job.is-skeleton i:nth-child(4){width:30%;margin-top:auto}
@keyframes shimmerBg{to{background-position:-150% 0}}
.jobs-empty{grid-column:1/-1;padding:40px;border-radius:var(--r-md);text-align:center;color:var(--muted);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.jobs-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:28px}
.jobs-count{font:500 13px "JetBrains Mono",monospace;letter-spacing:.08em;color:var(--muted)}
.no-js .jobs-grid,.no-js .jobs-tools{display:none}
@media (max-width:1100px){.jobs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Mobilmenü alja: CTA + nyelvválasztó (kis képernyőn a fejlécből ide kerül a nyelv) */
.mobile-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:26px;opacity:0;transform:translateY(24px);transition:opacity .5s,transform .6s var(--ease)}
.menu-open .mobile-foot{opacity:1;transform:none;transition-delay:.4s}
.mobile-menu .mobile-foot .btn{margin-top:0;padding:0 8px 0 24px;opacity:1;transform:none;font-size:15px;border-bottom:0}
.lang-mobile{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.mobile-menu .lang-mobile a,.mobile-menu .lang-mobile span{display:grid;justify-content:center;padding:0 10px;border:0;font:600 12px "JetBrains Mono",monospace;opacity:1;transform:none;color:rgba(255,255,255,.7)}
.mobile-menu .lang-mobile .active{background:var(--o);color:#1a1006}
.lang-mobile{display:none}
@media (max-width:640px){
  .nav-actions>.lang{display:none}
  .lang-mobile{display:flex}
  .jobs-grid{grid-template-columns:minmax(0,1fr)}
  .jobs-chips{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:2px 16px;scrollbar-width:none}
  .jobs-chips::-webkit-scrollbar{display:none}
  .jobs-chips button{flex-shrink:0}
  .jobs-search kbd{display:none}
  .theme-toggle{width:40px;height:40px}
  .jobs-foot .btn{width:100%;justify-content:space-between}
}
@media (prefers-reduced-motion:reduce){.hero-wave,.live-dot::after{animation:none}::view-transition-new(root){animation:none}}

[data-theme=dark] .grad{background-image:linear-gradient(100deg,#ffb454 0%,#f9951a 35%,#ff7a2e 70%,#ffb454 100%)}

/* =====================================================================================
   VIDEÓK + PRO — toborzóvideók (álló „sztori” kártyák, teljes képernyős lejátszó),
   „Mellény vagy zakó?” összehasonlító csúszka a HDD Pro felé, videós cikkoldalak.
   (Forrás: src/media.css — a build a styles.css végére fűzi.)
   ===================================================================================== */
:root{--pro:#8b2bff;--pro-2:#ff3dbe;--pro-deep:#6d1fd1;--pro-text:#6d1fd1;--pro-ink:#150f24}
[data-theme=dark]{--pro-text:#c77dff}

/* ---------- Videókártyák ---------- */
.reels{position:relative;overflow:clip;isolation:isolate}
.reels-glow{position:absolute;z-index:-1;width:900px;height:900px;left:50%;top:40%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(249,149,26,.16),transparent 62%);pointer-events:none}
.reel-shell{position:relative}
.reel-track{display:flex;gap:18px;align-items:flex-start;margin-right:calc(50% - 50vw);padding:10px calc(50vw - 50%) 26px 0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;perspective:1400px}
.reel-track::-webkit-scrollbar{display:none}
.reel-track>.reel:nth-child(even){margin-top:42px}
.reel{display:flex;flex:0 0 clamp(220px,20.5vw,262px);flex-direction:column;gap:14px;min-width:0;scroll-snap-align:start}
.reel-arrows{display:flex;justify-content:flex-end;gap:10px}
.reel-arrow{display:grid;place-items:center;width:50px;height:50px;padding:0;border:0;border-radius:50%;background:var(--solid);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2);cursor:pointer;transition:background-color .25s,color .25s,box-shadow .3s,transform .35s var(--ease),opacity .25s}
.reel-arrow svg{width:20px;height:20px}
.reel-arrow:hover{background:var(--o);color:#1a1006;box-shadow:0 14px 30px -14px rgba(244,123,32,.9);transform:translateY(-2px)}
.reel-arrow[disabled]{opacity:.35;pointer-events:none}
@media (hover:none){.reel-arrows{display:none}}
.reel-hook{position:absolute;z-index:1;left:16px;right:16px;font:700 clamp(20px,1.75vw,25px)/1.12 'Space Grotesk',sans-serif;letter-spacing:-.035em;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.6);transition:opacity .4s var(--ease),transform .5s var(--ease)}
.hook-b{bottom:18px}.hook-t{top:54px}
.reel-hook em{display:inline-block;margin:2px 0;padding:0 .24em;border-radius:.2em;background:linear-gradient(135deg,#ffb454,#f47b20);color:#1a1006;font-style:normal;text-shadow:none;transform:rotate(-2.5deg);box-shadow:0 10px 24px -10px rgba(0,0,0,.6)}
.reel:nth-child(3n+2) .reel-hook em{transform:rotate(2deg)}
.reel.is-playing .reel-hook{opacity:0;transform:translateY(10px)}
.reel-btn{--rx:0deg;--ry:0deg;display:grid;gap:14px;width:100%;padding:0;border:0;background:none;color:var(--ink);text-align:left;cursor:pointer}
.reel-media{position:relative;display:block;aspect-ratio:9/16;border-radius:26px;overflow:hidden;isolation:isolate;background:#0d0e10;color:#fff;box-shadow:0 30px 60px -34px rgba(18,24,38,.55),inset 0 0 0 1px rgba(255,255,255,.06);transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .6s var(--ease),box-shadow .45s var(--ease);will-change:transform}
.reel-media img,.reel-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel-media img{transition:transform 1.2s var(--ease)}
/* Egységes színvilág az előnézeteken: a videók más-más fényben készültek (az egyik hideg-szürke, a többi meleg-narancs),
   ezért a kártyákon a kép és a futó előnézet közös „grade”-et kap — enyhe telítetlenítés + kontraszt, fölötte egy
   meleg, márkaszínű réteg, amely a színárnyalatot közös tónusra húzza (a fényerőt nem bántja). A lejátszóban a
   videó az eredeti színeivel megy. */
.reel-media img,.reel-media video{filter:grayscale(.2) contrast(1.1) brightness(1.06) saturate(1.18)}
.reel-media::before{content:'';position:absolute;z-index:0;inset:0;pointer-events:none;background:linear-gradient(160deg,#e0903a,#c46a26);mix-blend-mode:color;opacity:.32}
/* A „30 mp” videó sötétebb, laposabb és hidegebb a többinél (mért átlag: 92/71/54, szórás 36 — a többieké kb.
   123/83/52, szórás 54): külön fényerő-, kontraszt- és melegítés-korrekciót kap, mielőtt a közös grade ráül. */
.reel[data-src*="harminc-mp"] .reel-media img,.reel[data-src*="harminc-mp"] .reel-media video{filter:brightness(1.2) contrast(1.3) saturate(1.28) sepia(.14) grayscale(.2) contrast(1.1) brightness(1.06) saturate(1.18)}
.reel-shade{background-color:rgba(26,14,4,.1)}
.reel-media video{opacity:0;transition:opacity .5s var(--ease)}
.reel.is-playing .reel-media video{opacity:1}
.reel-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,transparent 30%,transparent 58%,rgba(0,0,0,.6) 100%);pointer-events:none;transition:opacity .4s}
.reel.is-playing .reel-shade{opacity:.4}
.reel-top{position:absolute;z-index:1;left:12px;right:12px;top:12px;display:flex;justify-content:space-between;align-items:center}
.reel-dur{display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 8px;border-radius:999px;background:rgba(10,10,12,.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);font:600 11.5px 'JetBrains Mono',monospace;letter-spacing:.04em}
.reel-dur svg{width:11px;height:11px;color:#ffb454}
.reel-n{font:500 11px 'JetBrains Mono',monospace;letter-spacing:.14em;color:rgba(255,255,255,.8);text-shadow:0 1px 6px rgba(0,0,0,.6)}
.reel-play{position:absolute;z-index:1;left:50%;top:50%;display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:linear-gradient(135deg,#ffb454,#f47b20);color:#1a1006;box-shadow:0 18px 40px -12px rgba(244,123,32,.95);transform:translate(-50%,-50%) scale(.7);opacity:0;transition:transform .5s var(--ease),opacity .35s}
.reel-play::before{content:'';position:absolute;inset:-8px;border-radius:50%;border:1.5px solid rgba(255,180,84,.7);animation:ring 1.8s var(--ease) infinite}
.reel-play svg{width:24px;height:24px;margin-left:3px}
@keyframes ring{0%{transform:scale(.85);opacity:1}100%{transform:scale(1.35);opacity:0}}
.reel-media::after{content:'';position:absolute;z-index:1;left:0;bottom:0;height:3px;width:100%;background:linear-gradient(90deg,#ffb454,#f47b20);transform:scaleX(0);transform-origin:left;opacity:0}
.reel.is-playing .reel-media::after{opacity:1;animation:reelProg 5s linear infinite}
@keyframes reelProg{to{transform:scaleX(1)}}
.reel-meta{display:grid;gap:8px;padding:0 4px}
.reel-tag{justify-self:start;padding:4px 9px;border-radius:999px;background:var(--o-soft);color:var(--o-deep);font:600 10.5px 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase}
.reel-meta b{font:700 clamp(16px,1.35vw,19px)/1.2 'Space Grotesk',sans-serif;letter-spacing:-.025em;transition:color .25s}
.reel-btn:hover .reel-media,.reel-btn:focus-visible .reel-media,.reel.is-playing .reel-media{box-shadow:0 40px 70px -30px rgba(244,123,32,.55),inset 0 0 0 2px rgba(249,149,26,.85)}
.reel-btn:hover .reel-play,.reel-btn:focus-visible .reel-play,.reel.is-playing .reel-play{opacity:1;transform:translate(-50%,-50%) scale(1)}
.reel-btn:hover img{transform:scale(1.05)}
.reel-btn:hover .reel-meta b{color:var(--o-deep)}
.reel-btn:focus-visible{outline:none}
.reel-btn:focus-visible .reel-media{outline:3px solid var(--o);outline-offset:3px}
.reel-read{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin:-4px 0 0 4px;font:700 14px 'Space Grotesk',sans-serif;color:var(--ink);transition:color .25s,gap .35s var(--ease)}
.reel-read svg{width:15px;height:15px}
.reel-read:hover{color:var(--o-deep);gap:12px}
.reels-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:-50px;flex-wrap:wrap;max-width:calc(100% - 140px)}
@media (hover:none){.reels-foot{margin-top:8px;max-width:none}}
.reels-hint{font:500 11.5px 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
@media (hover:none){.reels-hint{display:none}}

/* ---------- Teljes képernyős lejátszó ---------- */
html.rm-open{overflow:hidden}
.rm{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#fff;overflow:hidden}
.rm::backdrop{background:rgba(6,6,8,.9)}
.rm-bg{position:absolute;inset:-10%;background:center/cover no-repeat;filter:blur(60px) saturate(1.4) brightness(.45);opacity:0;transition:opacity .6s var(--ease),background-image .4s}
.rm.is-open .rm-bg{opacity:1}
.rm-wrap{position:relative;display:flex;align-items:center;justify-content:center;gap:28px;width:100%;height:100%;padding:20px}
.rm-stage{position:relative;height:min(88vh,880px);aspect-ratio:9/16;max-width:calc(100vw - 40px);border-radius:28px;overflow:hidden;background:#000;box-shadow:0 60px 120px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.08);transform:translateY(24px) scale(.94);opacity:0;transition:transform .55s var(--ease),opacity .4s var(--ease)}
.rm.is-open .rm-stage{transform:none;opacity:1}
.rm-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.rm-bars{position:absolute;z-index:3;left:12px;right:12px;top:12px;display:flex;gap:5px}
.rm-bars i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.28);overflow:hidden}
.rm-bars i::after{content:'';display:block;height:100%;background:#fff;transform:scaleX(var(--p,0));transform-origin:left}
.rm-head{position:absolute;z-index:3;left:14px;right:60px;top:26px;display:flex;align-items:center;gap:10px;min-width:0}
.rm-head img{width:30px;height:30px;flex:none;border-radius:50%;background:#fff;padding:3px}
.rm-head b{font:700 14px 'Space Grotesk',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.rm-head span{flex:none;padding:3px 8px;border-radius:999px;background:rgba(244,123,32,.92);color:#1a1006;font:600 10px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase}
.rm-stage::before{content:'';position:absolute;z-index:2;inset:0 0 auto;height:120px;background:linear-gradient(180deg,rgba(0,0,0,.55),transparent);pointer-events:none}
.rm-stage::after{content:'';position:absolute;z-index:2;inset:auto 0 0;height:170px;background:linear-gradient(0deg,rgba(0,0,0,.7),transparent);pointer-events:none}
.rm-tap{position:absolute;z-index:2;top:70px;bottom:110px;width:32%;border:0;background:transparent;cursor:pointer}
.rm-tap-prev{left:0}.rm-tap-next{right:0}
.rm-center{position:absolute;z-index:2;left:32%;right:32%;top:70px;bottom:110px;display:grid;place-items:center;border:0;background:transparent;color:#fff;cursor:pointer}
.rm-center span{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:rgba(10,10,12,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);opacity:0;transform:scale(.8);transition:opacity .3s,transform .4s var(--ease)}
.rm-center svg{width:28px;height:28px;margin-left:4px}
.rm.is-paused .rm-center span{opacity:1;transform:none}
.rm-foot{position:absolute;z-index:3;left:14px;right:14px;bottom:16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rm-foot .btn{--h:42px;padding-left:18px;font-size:13.5px}
.rm-foot .btn .ico{width:30px;height:30px}
.rm-foot .btn .ico svg{width:14px;height:14px}
.rm-mute{margin-left:auto}
.rm-icon{display:grid;place-items:center;width:42px;height:42px;padding:0;border:0;border-radius:50%;background:rgba(10,10,12,.5);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);cursor:pointer;transition:background-color .25s,transform .35s var(--ease)}
.rm-icon:hover{background:rgba(244,123,32,.9);color:#1a1006;transform:scale(1.06)}
.rm-icon svg{width:18px;height:18px}
.rm-close{position:absolute;z-index:4;top:20px;right:20px;width:48px;height:48px}
.rm-nav{width:54px;height:54px;flex:none}
.rm-nav[disabled]{opacity:.25;pointer-events:none}
.rm-mute .on{display:none}.rm.is-muted .rm-mute .on{display:block}.rm.is-muted .rm-mute .off{display:none}
@media (max-width:760px){
  .rm-wrap{padding:0}
  .rm-stage{height:100%;max-width:100%;width:100%;aspect-ratio:auto;border-radius:0}
  .rm-nav{display:none}
  .rm-close{top:22px;right:12px;width:40px;height:40px}
  .rm-head{top:28px}
}

/* ---------- Mellény vagy zakó? — PRO csúszka ---------- */
.pro-split{--p:.5;--acc:color-mix(in oklab,#f47b20 calc(var(--p) * 100%),#8b2bff);--acc-text:color-mix(in oklab,var(--o-deep) calc(var(--p) * 100%),var(--pro-text));position:relative;overflow:clip;isolation:isolate}
.pro-split::before,.pro-split::after{content:'';position:absolute;z-index:-1;width:860px;height:860px;top:46%;border-radius:50%;pointer-events:none;transition:opacity .2s}
.pro-split::before{left:-260px;background:radial-gradient(circle,rgba(249,149,26,.2),transparent 62%);opacity:calc(var(--p) * 1.4)}
.pro-split::after{right:-260px;background:radial-gradient(circle,rgba(139,43,255,.22),transparent 62%);opacity:calc((1 - var(--p)) * 1.4)}
.split-eyebrow{color:var(--acc-text)}
.pro-grad{background:linear-gradient(100deg,#c24f06 0%,#b84a05 30%,#7a24e0 70%,#6d1fd1 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-theme=dark] .pro-grad{background-image:linear-gradient(100deg,#ffb454 0%,#ff9b4f 30%,#c77dff 70%,#ff8ad8 100%)}
.split{position:relative;aspect-ratio:1454/487;border-radius:var(--r-lg);overflow:hidden;isolation:isolate;background:#0d0e10;cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none;box-shadow:0 50px 100px -50px rgba(18,24,38,.7),0 0 0 1px var(--line)}
.split-img{position:absolute;inset:0}
.split-img img{width:100%;height:100%;object-fit:cover;object-position:50% 17%;pointer-events:none}
.split-b{clip-path:inset(0 0 0 calc(var(--p) * 100%))}
.split-a img{transform:scale(calc(1 + (1 - var(--p)) * .04))}
.split-b img{transform:scale(calc(1 + var(--p) * .04))}
.split-line{position:absolute;z-index:2;top:0;bottom:0;left:calc(var(--p) * 100%);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 24px 2px var(--acc);pointer-events:none}
.split-knob{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:66px;height:66px;border-radius:50%;background:#fff;color:var(--acc);box-shadow:0 0 0 6px color-mix(in oklab,var(--acc) 35%,transparent),0 20px 40px -12px rgba(0,0,0,.6);transform:translate(-50%,-50%);transition:transform .35s var(--ease)}
.split-knob svg{width:26px;height:26px}
.split-knob small{position:absolute;top:calc(100% + 12px);padding:4px 10px;border-radius:999px;background:rgba(10,10,12,.66);color:#fff;font:600 10.5px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.split.is-dragging .split-knob{transform:translate(-50%,-50%) scale(1.12)}
.split:focus-within{outline:3px solid var(--acc);outline-offset:4px}
.split-tag{position:absolute;z-index:2;top:18px;padding:8px 14px;border-radius:999px;font:700 12px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;transition:opacity .25s,transform .4s var(--ease)}
.tag-a{left:18px;background:linear-gradient(135deg,#ffb454,#f47b20);color:#1a1006;opacity:calc(.25 + var(--p) * 1.2)}
.tag-b{right:18px;background:linear-gradient(135deg,#9b44ff,#6d1fd1);color:#fff;opacity:calc(.25 + (1 - var(--p)) * 1.2)}
.split-range{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.split-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px}
.split-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:clamp(24px,3vw,36px);border-radius:var(--r-md);overflow:hidden;isolation:isolate;transition:box-shadow .45s var(--ease),transform .5s var(--ease),filter .45s}
.split-card h3{max-width:30ch}
.split-card .btn{margin-top:auto}
.card-a{background:var(--solid);box-shadow:inset 0 0 0 1px var(--line)}
.card-a ul{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px;padding:0;list-style:none}
.card-a li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:999px;background:var(--o-soft);font-size:13.5px;font-weight:700}
.card-a li svg{width:15px;height:15px;color:var(--o-deep)}
.card-b{background:radial-gradient(420px circle at 100% 0%,rgba(255,61,190,.22),transparent 60%),linear-gradient(150deg,#1b1330,#150f24 60%,#0b0a12);color:#f6f3ff;box-shadow:inset 0 0 0 1px rgba(199,125,255,.18)}
.card-b p{color:#b7add6;line-height:1.65}
.pro-split.is-a .card-a{box-shadow:inset 0 0 0 2px rgba(244,123,32,.7),0 30px 60px -36px rgba(244,123,32,.6);transform:translateY(-4px)}
.pro-split.is-b .card-b{box-shadow:inset 0 0 0 2px rgba(155,68,255,.85),0 30px 60px -30px rgba(139,43,255,.7);transform:translateY(-4px)}
.split-kicker{display:inline-flex;align-items:center;gap:10px;font:500 11.5px 'JetBrains Mono',monospace;letter-spacing:.18em;text-transform:uppercase}
.card-a .split-kicker{color:var(--o-deep)}
.pro-mark{display:inline-grid;place-items:center;height:22px;padding:0 7px;border-radius:6px;background:linear-gradient(135deg,#9b44ff,#6d1fd1);color:#fff;font:700 11px 'JetBrains Mono',monospace;letter-spacing:.08em}
.card-b .split-kicker{color:#c77dff}
.pro-codes{display:flex;flex-wrap:wrap;gap:6px}
.pro-codes span{padding:5px 9px;border-radius:8px;background:rgba(139,43,255,.14);box-shadow:inset 0 0 0 1px rgba(199,125,255,.3);color:#e4ccff;font:600 11px 'JetBrains Mono',monospace;letter-spacing:.1em;transition:background-color .25s,transform .35s var(--ease)}
.pro-codes span:hover{background:rgba(139,43,255,.4);transform:translateY(-2px)}

/* PRO gomb — a HDD Pro lila arculata, finom „glitch” átmenettel */
.btn-pro{background:linear-gradient(135deg,#9b44ff,#8b2bff 50%,#6d1fd1);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 16px 36px -14px rgba(139,43,255,.95);letter-spacing:.14em;font-family:'JetBrains Mono',monospace;font-weight:600}
.btn-pro .ico{background:rgba(255,255,255,.16)}
.btn-pro>span[data-text]{position:relative;display:inline-block}
.btn-pro>span[data-text]::before,.btn-pro>span[data-text]::after{content:attr(data-text);position:absolute;inset:0;opacity:0}
.btn-pro>span[data-text]::before{color:#ff3dbe;clip-path:inset(0 0 55% 0)}
.btn-pro>span[data-text]::after{color:#7ef9ff;clip-path:inset(55% 0 0 0)}
.btn-pro:hover{box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 22px 46px -14px rgba(255,61,190,.85)}
.btn-pro:hover>span[data-text]::before{animation:glitchA .5s steps(2,end) 2}
.btn-pro:hover>span[data-text]::after{animation:glitchB .5s steps(2,end) 2}
@keyframes glitchA{0%{opacity:.9;transform:translate(-2px,0)}50%{opacity:.9;transform:translate(2px,-1px)}100%{opacity:0;transform:none}}
@keyframes glitchB{0%{opacity:.9;transform:translate(2px,0)}50%{opacity:.9;transform:translate(-2px,1px)}100%{opacity:0;transform:none}}

/* ---------- Videós cikkoldal ---------- */
.vhero .wrap{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
.vhero h1{font-size:clamp(34px,4.6vw,64px);letter-spacing:-.05em;line-height:1}
.vhero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.vphone{position:relative;justify-self:center;width:min(100%,330px);aspect-ratio:9/16;padding:8px;border-radius:42px;background:linear-gradient(160deg,#2a2b30,#0d0e10);box-shadow:0 60px 110px -40px rgba(70,38,0,.55),0 0 0 1px rgba(255,255,255,.06),inset 0 0 0 1px rgba(255,255,255,.08);opacity:0;animation:phoneIn 1.2s var(--ease) .25s forwards}
.vphone::before{content:'';position:absolute;z-index:-1;inset:10% -18% -6%;border-radius:50%;background:radial-gradient(circle,rgba(249,149,26,.4),transparent 65%)}
.vphone video{width:100%;height:100%;object-fit:cover;border-radius:34px;background:#000}
.vphone-play{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:78px;height:78px;padding:0;border:0;border-radius:50%;background:linear-gradient(135deg,#ffb454,#f47b20);color:#1a1006;cursor:pointer;box-shadow:0 20px 44px -12px rgba(244,123,32,.95);transform:translate(-50%,-50%);transition:transform .4s var(--ease),opacity .3s}
.vphone-play::before{content:'';position:absolute;inset:-10px;border-radius:50%;border:1.5px solid rgba(255,180,84,.7);animation:ring 1.8s var(--ease) infinite}
.vphone-play svg{width:28px;height:28px;margin-left:4px}
.vphone-play:hover{transform:translate(-50%,-50%) scale(1.08)}
.vphone.is-playing .vphone-play,.vphone.is-playing .vphone-tag{opacity:0;pointer-events:none}
.vphone-tag{position:absolute;left:24px;top:24px;padding:5px 10px;border-radius:999px;background:rgba(244,123,32,.92);color:#1a1006;font:600 10.5px 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;transition:opacity .3s}
@keyframes phoneIn{from{opacity:0;transform:translateY(40px) rotate(-5deg) scale(.94)}to{opacity:1;transform:none}}
.vprose>h2{margin-top:56px}
.vquote{position:relative;margin:0 0 8px;padding:28px 28px 26px;border-radius:var(--r-md);background:var(--solid);box-shadow:inset 0 0 0 1px var(--line),var(--shadow);overflow:hidden}
.vquote::before{content:'';position:absolute;left:0;top:24px;bottom:24px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,#ffb454,#f47b20)}
.vquote ol{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.vquote li{padding:8px 14px;border-radius:12px;background:var(--bg-2);font:700 14.5px/1.35 'Space Grotesk',sans-serif;letter-spacing:-.01em;color:var(--ink);opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i) * 80ms)}
.vquote li:first-child{background:linear-gradient(135deg,#ffb454,#f47b20);color:#1a1006}
.vquote.is-in li,.no-js .vquote li{opacity:1;transform:none}
.vsteps{display:grid;gap:12px;margin:22px 0 0;padding:0;list-style:none}
.vsteps li{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr);gap:16px;padding:18px 20px;border-radius:var(--r-sm);background:var(--solid);box-shadow:inset 0 0 0 1px var(--line)}
.vsteps b{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--ink);color:var(--bg);font:700 17px 'Space Grotesk',sans-serif}
.vsteps li:hover b{background:linear-gradient(135deg,#ffb454,#f47b20);color:#1a1006}
.vsteps h4{margin:2px 0 4px;font-size:18px}
.vsteps p{margin:0;font-size:15.5px;line-height:1.65}
.vcheck{display:grid;gap:10px;margin:20px 0 0;padding:0;list-style:none}
.vcheck li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:start;color:var(--ink);font-weight:600}
.vcheck svg{width:26px;height:26px;padding:5px;border-radius:50%;background:var(--o-soft);color:var(--o-deep)}
.vtiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:22px 0}
.vtiles div{display:grid;gap:6px;padding:20px 22px;border-radius:var(--r-sm);background:var(--solid);box-shadow:inset 0 0 0 1px var(--line);transition:transform .4s var(--ease),box-shadow .35s}
.vtiles div:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(244,123,32,.45)}
.vtiles b{font:700 18px 'Space Grotesk',sans-serif}
.vtiles span{color:var(--muted);font-size:15px;line-height:1.55}
.vcompare{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:12px;margin:22px 0}
.vcompare div{padding:22px;border-radius:var(--r-sm);background:var(--solid);box-shadow:inset 0 0 0 1px var(--line)}
.vcompare div:first-child{box-shadow:inset 0 0 0 1.5px rgba(244,123,32,.45)}
.vcompare h4{margin:0 0 12px;font-size:18px}
.vcompare ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.vcompare li{position:relative;padding-left:18px;font-size:15px;line-height:1.55}
.vcompare li::before{content:'';position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--o)}
.ladder{position:relative;display:grid;gap:12px;margin:22px 0;padding:0;list-style:none}
.ladder::before{content:'';position:absolute;left:31px;top:20px;bottom:20px;width:2px;background:linear-gradient(180deg,#f47b20,#8b2bff)}
.ladder li{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;align-items:start}
.ladder b{position:relative;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--solid);box-shadow:inset 0 0 0 2px rgba(244,123,32,.6);font:700 15px 'JetBrains Mono',monospace;color:var(--o-deep)}
.ladder li>div{padding:16px 20px;border-radius:var(--r-sm);background:var(--solid);box-shadow:inset 0 0 0 1px var(--line)}
.ladder h4{margin:0 0 4px;font-size:18px}
.ladder p{margin:0;font-size:15px;line-height:1.6}
.ladder .is-pro b{background:linear-gradient(135deg,#9b44ff,#6d1fd1);color:#fff;box-shadow:0 14px 30px -12px rgba(139,43,255,.9)}
.ladder .is-pro>div{background:linear-gradient(150deg,#1b1330,#150f24);color:#f6f3ff;box-shadow:inset 0 0 0 1px rgba(199,125,255,.3)}
.ladder .is-pro p{color:#b7add6}
.ladder .is-pro .btn{margin-top:14px;text-decoration:none}
.prose .btn-pro{color:#fff;text-decoration:none}
.faq{display:grid;gap:10px;margin-top:20px}
.faq details{border-radius:var(--r-sm);background:var(--solid);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .3s}
.faq details[open]{box-shadow:inset 0 0 0 1.5px rgba(244,123,32,.5)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;cursor:pointer;list-style:none;font:700 17px 'Space Grotesk',sans-serif;letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{position:relative;flex:none;width:28px;height:28px;border-radius:50%;background:var(--o-soft)}
.faq summary i::before,.faq summary i::after{content:'';position:absolute;left:50%;top:50%;width:11px;height:2px;margin:-1px 0 0 -5.5px;border-radius:2px;background:var(--o-deep);transition:transform .35s var(--ease)}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq details p{padding:0 22px 20px}
.vaside{position:sticky;top:110px;display:grid;gap:18px}
.vaside .side-card{position:relative;top:0}
.pro-card{display:grid;gap:14px;padding:28px;border-radius:var(--r-md);background:radial-gradient(360px circle at 100% 0%,rgba(255,61,190,.22),transparent 60%),linear-gradient(150deg,#1b1330,#150f24 60%,#0b0a12);color:#f6f3ff;box-shadow:inset 0 0 0 1px rgba(199,125,255,.2),0 30px 60px -36px rgba(139,43,255,.6)}
.pro-card p{color:#b7add6;line-height:1.6}
.pro-card .btn{justify-self:start}
.pro-card .split-kicker{color:#c77dff}

/* ---------- Éjszakai mód finomítások ---------- */
[data-theme=dark] .reel-media{box-shadow:0 30px 60px -34px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.07)}
[data-theme=dark] .vsteps b{background:#f3f0eb;color:#121315}
[data-theme=dark] .split{box-shadow:0 50px 100px -50px rgba(0,0,0,.9),0 0 0 1px var(--line)}
[data-theme=dark] .vphone{box-shadow:0 60px 110px -40px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.06),inset 0 0 0 1px rgba(255,255,255,.08)}

/* ---------- Reszponzív ---------- */
@media (max-width:1100px){
  .reel-track{margin-left:-24px;padding-left:24px;scroll-padding-inline:24px}
  .reel{flex:0 0 min(60vw,250px)}
  .reel-track>.reel:nth-child(even){margin-top:0}
}
@media (max-width:900px){
  .vhero .wrap{grid-template-columns:minmax(0,1fr)}
  .vphone{width:min(76vw,300px)}
  .vaside{position:relative;top:0}
  .split-cards{grid-template-columns:minmax(0,1fr)}
  .vcompare{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .split{aspect-ratio:4/2.04;border-radius:var(--r-md)}
  .split-knob{width:54px;height:54px}
  .split-tag{top:12px;padding:6px 11px;font-size:10.5px}
  .tag-a{left:12px}.tag-b{right:12px}
  .vtiles{grid-template-columns:minmax(0,1fr)}
  .reels-foot{margin-top:24px}
}
@media (prefers-reduced-motion:reduce){
  .reel-play::before,.vphone-play::before{animation:none}
  .reel-media,.reel-media img,.rm-stage{transition:none}
  .vphone{animation:none;opacity:1}
  .vquote li{opacity:1;transform:none;transition:none}
}

/* --- UI audit: finomhangolas --- */
.reel-read{padding:8px 0;margin-top:-10px}
@media (max-width:1100px){.hero-caption small{display:none}.hero-caption strong{max-width:none}}
@media (max-width:900px){.reels-hint{display:none}}
@media (max-width:760px){
  .lang a,.lang span{min-width:36px;height:36px}
  .footer-col a{padding:9px 0}
  .split-card ul{flex-direction:row;flex-wrap:wrap}
}
.card-a ul{margin-bottom:0}
.card-a p{color:var(--muted);line-height:1.65}
.prose a.btn{text-decoration:none}
.prose a.btn-primary{color:#1a1006}
.prose a.btn-dark{color:#fff}
.prose a.btn-ghost{color:var(--ink)}
.prose .btn+.btn{margin-left:8px}
[data-theme=dark] .prose a.btn-dark{color:#121315}

/* --- Videósor: nem lóg ki oldalra; pontosan annyi kártya látszik, amennyi kifér, kétoldalt lapozó nyilakkal --- */
@media (min-width:761px){
  .reel-track{--n:5;margin-right:0;padding:10px 0 26px;scroll-padding-inline:0}
  .reel{flex:0 0 calc((100% - (var(--n) - 1) * 18px) / var(--n))}
  .reel-shell .reel-arrows{position:absolute;inset:0;z-index:3;display:block;pointer-events:none}
  .reel-shell .reel-arrow{position:absolute;top:calc(50% - 70px);pointer-events:auto;width:54px;height:54px;box-shadow:inset 0 0 0 1.5px var(--line-2),0 18px 40px -18px rgba(18,24,38,.6)}
  .reel-shell .reel-arrow[data-reel-prev]{left:-27px}
  .reel-shell .reel-arrow[data-reel-next]{right:-27px}
  .reel-shell .reel-arrow[disabled]{opacity:0}
}
@media (min-width:761px) and (max-width:1240px){.reel-track{--n:4}.reel-shell .reel-arrow[data-reel-prev]{left:-12px}.reel-shell .reel-arrow[data-reel-next]{right:-12px}}
@media (min-width:761px) and (max-width:980px){.reel-track{--n:3}}
@media (min-width:761px) and (hover:none){.reel-shell .reel-arrows{display:block}}
@media (min-width:761px){.reels-foot{margin-top:6px;max-width:none}}

/* --- Lábléc: cégadatok + külföldi irodák + közösségi oldalak + támogatási infoblokk --- */
.footer-legal{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.25fr;gap:40px;margin-top:52px;padding-top:36px;border-top:1px solid var(--night-line);font-size:14px;line-height:1.65}
.fl-col h4{margin:0 0 14px;font:500 11.5px 'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:#f9a14a}
.fl-col p{margin:0 0 10px}
.fl-col b{color:#fff;font-weight:700}
.fl-col dl{display:grid;gap:8px;margin:14px 0 0}
.fl-col dt{font:500 10.5px 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:rgba(242,239,233,.5)}
.fl-col dd{margin:1px 0 0;color:rgba(242,239,233,.9);font-weight:600;font-variant-numeric:tabular-nums}
.fl-col > a{color:#ffb866;font-weight:600;transition:color .25s}
.fl-col > a:hover{color:#fff}
.fl-side{display:flex;flex-direction:column;align-items:flex-end;gap:18px}
.fl-social{display:flex;gap:10px}
.fl-social a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:#fff;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition:background-color .3s,transform .4s var(--ease),box-shadow .3s}
.fl-social a:hover{background:var(--o);color:#1a1006;transform:translateY(-3px);box-shadow:0 14px 30px -14px rgba(244,123,32,.9)}
.fl-social svg{width:19px;height:19px}
.fl-grant{display:block;width:min(100%,340px);border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 20px 44px -26px rgba(0,0,0,.8);transition:transform .45s var(--ease),box-shadow .35s}
.fl-grant:hover{transform:translateY(-3px);box-shadow:0 26px 54px -24px rgba(244,123,32,.55)}
.fl-grant img{display:block;width:100%;height:auto}
.footer-bottom{margin-top:36px}
@media (max-width:980px){.footer-legal{grid-template-columns:1fr 1fr;gap:30px}.fl-side{align-items:flex-start}}
@media (max-width:520px){.footer-legal{grid-template-columns:1fr}}

/* --- Támogatás oldal --- */
.grant-banner{max-width:760px;border-radius:var(--r-md);overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px var(--line),0 30px 70px -44px rgba(18,24,38,.5)}
.grant-banner img{display:block;width:100%;height:auto}
.grant-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);margin-top:clamp(36px,5vw,64px);align-items:start}
.grant-facts{display:grid;gap:0;margin:0;padding:8px clamp(20px,2.4vw,32px);border-radius:var(--r-md);background:var(--solid);box-shadow:inset 0 0 0 1px var(--line)}
.grant-facts > div{padding:18px 0;border-bottom:1px solid var(--line)}
.grant-facts > div:last-child{border-bottom:0}
.grant-facts dt{font:500 11px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--o-deep)}
.grant-facts dd{margin:6px 0 0;font:700 clamp(17px,1.5vw,21px)/1.3 'Space Grotesk',sans-serif;letter-spacing:-.02em;color:var(--ink)}
.grant-train ol{display:grid;gap:10px;margin:20px 0 0;padding:0;list-style:none}
.grant-train li{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;padding:20px 22px;border-radius:var(--r-md);background:var(--solid);box-shadow:inset 0 0 0 1px var(--line);transition:transform .45s var(--ease),box-shadow .35s}
.grant-train li:hover{transform:translateX(8px);box-shadow:inset 0 0 0 1.5px var(--o)}
.grant-train li > b{font:500 13px 'JetBrains Mono',monospace;color:var(--o-deep);padding-top:3px}
.grant-train h3{font-size:clamp(16px,1.35vw,19px);line-height:1.25;letter-spacing:-.02em}
.grant-train p{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.grant-train p span{padding:5px 10px;border-radius:999px;background:var(--bg-2);font:500 11.5px 'JetBrains Mono',monospace;color:var(--muted)}
.grant-train p .grant-h{background:var(--o-soft);color:var(--o-deep)}
@media (max-width:900px){.grant-grid{grid-template-columns:minmax(0,1fr)}}

/* Hero mozgókép: az állókép fölé úszik be, ha elindult */
.hero-frame .hero-vid{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%;opacity:0;transition:opacity 1.1s ease;pointer-events:none}
.hero-frame .hero-vid.is-on{opacity:1}
[data-theme=dark] .hero-frame .hero-vid{object-position:62% 50%}
@media (prefers-reduced-motion:reduce){.hero-frame .hero-vid{display:none}}

/* === Partnereknek: „ablakon át” jelenet (valódi irodai séta → kirepülés a városképre) ===
   JS nélkül / csökkentett mozgásnál: sima, teljes szélességű városkép a szöveggel. */
.winview{position:relative;background:#07090e;color:#f4f1ec}
.winview.is-live{height:420vh}
.wv-sticky{position:relative;height:100vh;height:100svh;min-height:520px;overflow:hidden}
.winview.is-live .wv-sticky{position:sticky;top:0}
.wv-view{position:absolute;inset:0;transform:scale(var(--vs,1));will-change:transform}
.wv-view video{width:100%;height:100%;object-fit:cover;object-position:50% 46%;display:block}
.wv-view::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,9,14,.15),transparent 30%,rgba(7,9,14,calc(.78*var(--co,1))) 96%)}
.wv-room{position:absolute;inset:0;opacity:var(--ro,0);pointer-events:none;background:radial-gradient(ellipse at 50% 45%,rgba(244,123,32,.16),transparent 55%),#07090e}
.wv-office{position:absolute;left:50%;top:calc(50% + 26px);height:min(78vh,78svh,940px);aspect-ratio:54/94;max-width:92vw;transform:translate(-50%,-50%) scale(var(--os,1));opacity:var(--oo,0);border-radius:calc(22px/var(--os,1));overflow:hidden;will-change:transform,opacity;pointer-events:none;
  box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 0 1px rgba(255,170,90,.28),0 0 70px rgba(244,123,32,.18)}
.wv-office canvas,.wv-office img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#0d1118}.wv-office canvas{z-index:1}
.winview:not(.is-live) .wv-room,.winview:not(.is-live) .wv-intro,.winview:not(.is-live) .wv-office{display:none}
.wv-intro{position:absolute;left:0;right:0;bottom:2.2vh;text-align:center;opacity:var(--io,0);transform:translateY(calc((1 - var(--io,0))*-14px));pointer-events:none;z-index:2}
.wv-intro .eyebrow{justify-content:center;display:none}.wv-intro p{display:inline-block;margin:0 0 8px;padding:8px 14px;border-radius:99px;background:rgba(7,9,14,.72);backdrop-filter:blur(8px);font-size:14px;color:rgba(244,241,236,.92)}
.wv-cue{display:block;margin:0 auto;width:22px;height:34px;border:2px solid rgba(255,255,255,.5);border-radius:12px;position:relative}
.wv-cue::after{content:'';position:absolute;left:50%;top:6px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:#f47b20;animation:wvCue 1.6s ease-in-out infinite}
@keyframes wvCue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{opacity:0}}
.wv-copy{position:absolute;inset:auto 0 0 0;padding:0 0 clamp(40px,9vh,96px);opacity:var(--co,1);transform:translateY(calc((1 - var(--co,1))*26px))}
.wv-copy h2{font-size:clamp(34px,5.2vw,72px);line-height:1.02;letter-spacing:-.04em;margin:10px 0 14px;max-width:14ch;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.45)}
.wv-copy p{max-width:54ch;margin:0 0 22px;font-size:clamp(15px,1.25vw,18px);line-height:1.6;color:rgba(244,241,236,.9);text-shadow:0 1px 16px rgba(0,0,0,.5)}
@media (max-width:760px){.winview.is-live{height:380vh}.wv-view video{object-position:58% 46%}.wv-office{height:min(74svh,74vh)}.wv-cue{display:none}}
@media (prefers-reduced-motion:reduce){.wv-cue::after{animation:none}}

/* =====================================================================================
   MOZGÁS — „élő” képek (Ken Burns + fényvillanás + fényporszemcsék), GIF-szerű videóloopok
   (telefon-mockup, élő iroda-buborék), szavankénti címsor-animáció.
   Csak transform/opacity/background-position animál → kompozitoron fut, nem akasztja a görgetést.
   (Forrás: src/motion.css — a build a styles.css végére fűzi.)
   ===================================================================================== */
@keyframes kbA{from{scale:1;translate:0 0}to{scale:1.1;translate:-2.5% -1.5%}}
@keyframes kbB{from{scale:1.09;translate:2% 1%}to{scale:1.01;translate:-1% -1%}}
@keyframes kbC{from{scale:1.02;translate:1.5% 0}to{scale:1.12;translate:-1.5% -2%}}
.hero-frame img{animation:imgIn 1.8s var(--ease) .15s forwards,kbA 24s ease-in-out 2s infinite alternate}
.subhero-media img{animation:imgIn 1.6s var(--ease) .1s forwards,kbA 26s ease-in-out 1.8s infinite alternate}
.path img{animation:kbB 22s ease-in-out infinite alternate}
.path.alt img{animation:kbC 26s ease-in-out infinite alternate}
.path[data-reveal]:not(.is-in) img{transform:scale(1.24)}
.story-media img{animation:kbC 30s ease-in-out infinite alternate}
.dark-bg img{animation:kbB 40s ease-in-out infinite alternate}

/* Fényvillanás végigfut a képen */
@keyframes sheen{0%{background-position:-160% 0,0 0,0 0}38%,100%{background-position:260% 0,0 0,0 0}}
.hero-frame::after{background:linear-gradient(105deg,transparent 38%,rgba(255,236,214,.16) 49%,transparent 60%) -160% 0/260% 100% no-repeat,linear-gradient(180deg,transparent 45%,rgba(10,13,20,.55)),linear-gradient(90deg,rgba(244,123,32,.18),transparent 40%);animation:sheen 9s ease-in-out 2.6s infinite}
.story-media::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(255,236,214,.18) 49%,transparent 60%) -160% 0/260% 100% no-repeat;animation:sheen 11s ease-in-out 1s infinite}
.story-badge{z-index:2}

/* Fényporszemcsék a hero képen (cinemagraph-hatás) */
@keyframes dust{to{background-position:0 -160px,90px -240px,0 -120px}}
.hero-frame::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background-image:radial-gradient(circle,rgba(255,220,180,.95) 0 1px,transparent 1.7px),radial-gradient(circle,rgba(255,180,100,.8) 0 1.3px,transparent 2.2px),radial-gradient(circle,rgba(255,255,255,.6) 0 .8px,transparent 1.4px);background-size:140px 160px,180px 240px,90px 120px;background-position:0 0,90px 0,0 0;mix-blend-mode:screen;opacity:.5;animation:dust 22s linear infinite}
[data-theme=dark] .hero-frame::before{opacity:.75}

/* Élő iroda-buborék a Rólunk képen */
@keyframes recPulse{0%{box-shadow:0 0 0 0 rgba(255,77,77,.7)}70%{box-shadow:0 0 0 7px rgba(255,77,77,0)}100%{box-shadow:0 0 0 0 rgba(255,77,77,0)}}
.live-bubble{position:absolute;z-index:3;right:20px;top:20px;display:flex;align-items:center;gap:10px;padding:6px 16px 6px 6px;border-radius:999px;background:rgba(10,10,12,.66);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 20px 40px -20px rgba(0,0,0,.8);color:#fff;font:700 12.5px Manrope,sans-serif;animation:float 6s ease-in-out infinite}
.live-bubble video{width:60px;height:60px;border-radius:50%;object-fit:cover;background:#111;box-shadow:0 0 0 2px #f47b20,0 0 0 6px rgba(244,123,32,.25)}
.live-bubble i{display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;background:#ff4d4d;animation:recPulse 1.6s infinite}

/* Telefon-mockup a jelentkezési folyamattal (CTA) */
.cta-phone{position:absolute;z-index:2;left:-74px;bottom:-34px;width:150px;aspect-ratio:9/16;padding:6px;border-radius:26px;background:linear-gradient(160deg,#2a2b30,#0d0e10);box-shadow:0 40px 70px -30px rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,255,255,.12);transform:rotate(-7deg);animation:float 7s ease-in-out 1s infinite;transition:transform .7s var(--ease)}
.cta-phone::before{content:'';position:absolute;z-index:1;top:11px;left:50%;width:34px;height:5px;border-radius:5px;background:#000;translate:-50% 0}
.cta-phone video{width:100%;height:100%;object-fit:cover;border-radius:20px;background:#000}
.cta-card:hover .cta-phone{transform:rotate(-2deg) scale(1.04)}
.cta-media .chip{left:auto;right:-26px;bottom:auto;top:34px}

/* Szavankénti címsor-animáció (app.js bontja szavakra) */
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.18em .03em .12em;margin:-.18em -.03em -.12em}
.w>span{display:inline-block;transform:translateY(112%) rotate(5deg);transform-origin:0 100%;transition:transform 1s var(--ease);transition-delay:calc(var(--wi,0) * 55ms + 120ms)}
.is-in .w>span{transform:none}

@media (max-width:1100px){.cta-phone{left:-40px}}
@media (max-width:640px){
  .cta-phone{left:-6px;bottom:-24px;width:118px}
  .cta-media .chip{right:8px}
  .live-bubble{right:12px;top:12px}
  .live-bubble video{width:48px;height:48px}
}
@media (prefers-reduced-motion:reduce){
  .hero-frame img,.subhero-media img,.path img,.path.alt img,.story-media img,.dark-bg img,.hero-frame::after,.hero-frame::before,.story-media::after,.live-bubble,.cta-phone{animation:none}
  .hero-frame::before{display:none}
}

/* =====================================================================================
   IMAGE FILM — „Minden út hozzánk vezet”: görgetéssel vezérelt, valós idejű 3D (WebGL) drónjelenet
   a filmből vett körforgalom fölött (public/assets/js/film3d.js) + futó 35 mm-es filmszalag a film snittjeiből.
   A szekció mindkét témában sötét (mozis hatás). (Forrás: src/film.css)
   ===================================================================================== */
.film{--p:0;--e:clamp(0,calc(var(--p) / .42),1);position:relative;background:#0b0c0e;color:#f3f0eb}
.film-track{height:260vh}
.film-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate;background:#0b0c0e}
/* Lágy keret-sötétítés: felül a cím, alul a statisztikák mindig olvashatók maradnak a fotó fölött */
.film-sticky::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(11,12,14,.92) 0%,rgba(11,12,14,.62) 14%,rgba(11,12,14,.12) 30%,transparent 42%,transparent 70%,rgba(11,12,14,.5) 86%,rgba(11,12,14,.9) 100%),radial-gradient(ellipse 130% 100% at 50% 57%,transparent 60%,rgba(11,12,14,.32) 100%)}

/* 3D színpad: a motor ide fűzi a vásznat; WebGL nélkül a lemez állóképe látszik */
.film-stage{position:absolute;inset:0}
.film-plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform:translateY(7%) scale(calc(1.06 - var(--e) * .06));-webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);transition:opacity .9s ease}
.film-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .9s ease}
.film-stage.is-3d .film-canvas{opacity:1}
.film-stage.is-3d .film-plate{opacity:0}

/* Városnevek: HTML-címkék a 3D jelölők vetített pontján (éles szöveg, üveg chip) */
.film-labels{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.film-city{position:absolute;left:0;top:0;padding:6px 12px;border-radius:999px;background:rgba(16,17,20,.58);-webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 10px 26px -12px rgba(0,0,0,.9);font:600 13.5px/1.2 'Space Grotesk',sans-serif;letter-spacing:-.005em;color:#f3f0eb;white-space:nowrap;opacity:0;transition:opacity .45s ease;will-change:transform}
.film-city::before{content:'';display:inline-block;width:6px;height:6px;margin-right:8px;vertical-align:1px;border-radius:50%;background:#f47b20;box-shadow:0 0 10px #f47b20}
.film-city.is-on{opacity:1}

/* Szöveg és élő számok */
.film-head{position:absolute;z-index:3;top:clamp(76px,11vh,124px);left:0;right:0;text-align:center;transform:translateY(calc(var(--e) * -12px))}
.film-head .eyebrow{color:#ffb454}
.film-head h2{width:fit-content;margin:14px auto 0;font-size:clamp(36px,5.2vw,74px);color:#f3f0eb}
.film-head p{width:fit-content;max-width:560px;margin:14px auto 0;font-size:16.5px;line-height:1.65;color:rgba(243,240,235,.72);opacity:calc(1 - clamp(0,calc((var(--p) - .5) / .2),1))}
.film .grad{background-image:linear-gradient(100deg,#ffb454 0%,#ff9b4f 40%,#f47b20 70%,#ffb454 100%)}
.film-stats{position:absolute;z-index:3;left:0;right:0;bottom:clamp(22px,5vh,54px);display:flex;flex-wrap:wrap;justify-content:center;gap:10px;opacity:clamp(0,calc((var(--p) - .42) / .14),1);transform:translateY(calc((1 - clamp(0,calc((var(--p) - .42) / .14),1)) * 24px))}
.film-stats span{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:inline-flex;align-items:baseline;gap:10px;padding:12px 20px;border-radius:999px;background:rgba(16,17,20,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 20px 40px -20px rgba(0,0,0,.8);font-size:13.5px;font-weight:600;color:rgba(243,240,235,.74)}
.film-stats b{font:700 22px 'Space Grotesk',sans-serif;letter-spacing:-.02em;color:#ffb454}

/* 35 mm-es filmszalag: egy vonalban, fix helyen fut jobbról balra. Valódi arányok (a képmagasság = --fh):
   a szalag 1,46 × --fh magas, kockánként 9 perforáció; a lyukak tényleg átlátszók (maszk), így a szalag mögötti
   meleg háttérfény átüt rajtuk. A fények (háttérfény, csillanás, szélek elhalványulása) állnak, a film fut alattuk. */
.film-reel{position:relative;padding:24px 0 clamp(36px,5vw,72px);overflow:hidden;background:#0b0c0e}
.film-reel-head{text-align:center}
.film-reel-head .eyebrow{color:#ffb454}
.film-reel-head h3{margin-top:12px;font-size:clamp(26px,3vw,40px);color:#f3f0eb}
.fs-stage{--fh:clamp(140px,17.5vw,250px);--fw:calc(var(--fh) * 16 / 9);--gap:calc(var(--fh) * .083);--cw:calc(var(--fw) + var(--gap));--rb:calc(var(--fh) * .23);--sh:calc(var(--fh) * 1.46);position:relative;margin-top:clamp(4px,1vw,14px);padding:calc(var(--sh) * .2) 0;overflow:hidden;touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:grab}
.fs-stage.is-drag{cursor:grabbing}
.fs-glow{position:absolute;left:50%;top:50%;width:min(1180px,96%);height:calc(var(--sh) * 1.62);transform:translate(-50%,-50%);background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(255,196,124,.85) 0%,rgba(252,150,58,.46) 36%,rgba(244,123,32,.14) 60%,transparent 74%);pointer-events:none}
.fs-run{position:relative;height:var(--sh);box-shadow:0 calc(var(--fh) * .16) calc(var(--fh) * .2) calc(var(--fh) * -.14) rgba(0,0,0,.95)}
/* a szalag a két szélen sötétbe fut */
.fs-run::after{content:'';position:absolute;z-index:4;inset:calc(var(--sh) * -.16) 0;pointer-events:none;background:linear-gradient(90deg,#0b0c0e 0%,rgba(11,12,14,.8) 2.5%,rgba(11,12,14,.25) 5.5%,transparent 8%,transparent 92%,rgba(11,12,14,.25) 94.5%,rgba(11,12,14,.8) 97.5%,#0b0c0e 100%)}
.fs-track{display:flex;width:max-content;height:100%;will-change:transform;animation:fs-run 110s linear infinite;background:linear-gradient(180deg,rgba(255,232,204,.2) 0,rgba(255,232,204,0) 1.1%,transparent 98.7%,rgba(255,232,204,.12) 100%),linear-gradient(180deg,#1d1713 0%,#120e0c 17%,#0c0a09 50%,#120e0c 83%,#1a1511 100%);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 206.75 1460' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0h206.75v1460H0zM45.4 118a20 20 0 0 1 20-20h76a20 20 0 0 1 20 20v40a20 20 0 0 1-20 20h-76a20 20 0 0 1-20-20zM45.4 1302a20 20 0 0 1 20-20h76a20 20 0 0 1 20 20v40a20 20 0 0 1-20 20h-76a20 20 0 0 1-20-20z'/%3E%3C/svg%3E") 0 0/calc(var(--cw) / 9) 100% repeat-x;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 206.75 1460' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0h206.75v1460H0zM45.4 118a20 20 0 0 1 20-20h76a20 20 0 0 1 20 20v40a20 20 0 0 1-20 20h-76a20 20 0 0 1-20-20zM45.4 1302a20 20 0 0 1 20-20h76a20 20 0 0 1 20 20v40a20 20 0 0 1-20 20h-76a20 20 0 0 1-20-20z'/%3E%3C/svg%3E") 0 0/calc(var(--cw) / 9) 100% repeat-x}
@keyframes fs-run{to{transform:translate3d(-50%,0,0)}}
.fs-stage.is-js .fs-track{animation:none}
.fs-cell{position:relative;flex:none;width:var(--cw);height:var(--sh);margin:0}
.fs-pic{position:absolute;left:calc(var(--gap) / 2);top:var(--rb);width:var(--fw);height:var(--fh);overflow:hidden;border-radius:calc(var(--fh) * .014);background:#060606}
.fs-pic img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none;filter:brightness(1.05) contrast(1.04) saturate(1.08)}
.fs-pic::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),inset 0 0 calc(var(--fh) * .1) rgba(0,0,0,.36)}
/* --- Celluloid-felület és fények ---
   .fs-track::after: a filmmel EGYÜTT utazó réteg — finom szemcse + ferde, lágy tükröződés-sávok (a hordozó
   enyhe hullámossága), ezért futás közben a fény „megtörik” a felületen.
   .fs-light: ÁLLÓ fényréteg. A szalagon BELÜL ül (így a szalag perforáció-maszkja rá is érvényes: a lyukakon
   nem csillan fény), az app.js pedig minden képkockán visszatolja a film elmozdulásával, ezért a nézőhöz
   képest egy helyben marad: időnként átfutó csillanás szivárványos széllel,
   hosszanti hajszálkarcok, lámpa-vibrálás. */
.fs-track{position:relative}
.fs-track::after{content:'';position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(104deg,transparent 0%,transparent 16%,rgba(255,236,210,.085) 23%,rgba(255,255,255,.02) 27%,transparent 33%,transparent 58%,rgba(190,225,255,.05) 64%,rgba(255,226,196,.075) 68%,transparent 75%,transparent 100%) 0 0/calc(var(--cw) * 3) 100% repeat-x,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .88 0 0 0 .3 -.13'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/240px 240px;opacity:.9}
.fs-light{display:none;position:absolute;z-index:2;left:0;top:0;bottom:0;width:100vw;overflow:hidden;pointer-events:none;will-change:transform;background:linear-gradient(180deg,rgba(255,240,222,.13) 0%,rgba(255,240,222,.03) 9%,transparent 22%,transparent 80%,rgba(255,200,150,.06) 100%)}
.fs-stage.is-js .fs-light{display:block}
.fs-sweep{position:absolute;top:-20%;bottom:-20%;left:0;width:34%;transform:translate3d(-140%,0,0) skewX(-20deg);background:linear-gradient(90deg,transparent 0%,rgba(255,170,90,.05) 18%,rgba(255,214,170,.16) 40%,rgba(255,248,236,.5) 49%,rgba(255,255,255,.72) 50.5%,rgba(190,235,255,.3) 53%,rgba(214,170,255,.13) 58%,rgba(255,150,120,.05) 70%,transparent 100%);animation:fs-sweep 11s cubic-bezier(.45,.05,.3,1) infinite 1.4s}
.fs-sweep-2{width:15%;opacity:.55;animation-duration:17s;animation-delay:6.2s;animation-direction:reverse}
@keyframes fs-sweep{0%{transform:translate3d(-140%,0,0) skewX(-20deg)}24%,100%{transform:translate3d(440%,0,0) skewX(-20deg)}}
.fs-sweep-2{animation-name:fs-sweep-2}
@keyframes fs-sweep-2{0%{transform:translate3d(-160%,0,0) skewX(-20deg)}30%,100%{transform:translate3d(820%,0,0) skewX(-20deg)}}
.fs-scratch{position:absolute;inset:0;background:linear-gradient(180deg,transparent 0 31.4%,rgba(255,255,255,.1) 31.4% 31.6%,transparent 31.6% 57.8%,rgba(255,255,255,.055) 57.8% 57.95%,transparent 57.95% 71.2%,rgba(0,0,0,.28) 71.2% 71.4%,transparent 71.4%);animation:fs-scratch 6.5s steps(1,end) infinite}
@keyframes fs-scratch{0%{opacity:.9;transform:translateY(0)}18%{opacity:.25;transform:translateY(3%)}31%{opacity:1;transform:translateY(-4%)}47%{opacity:0}63%{opacity:.7;transform:translateY(7%)}80%{opacity:.4;transform:translateY(-2%)}}
/* --- Hullámzó szalag (.is-wave, app.js) ---
   A valódi film soha nem fut nyílegyenesen: a görgők között lazán lóg, lassú hullám fut végig rajta, és finoman
   lebeg. Ehhez a perforáció-maszk és a felület a szalagról az egyes KOCKÁKRA kerül, az app.js pedig kockánként
   állítja a függőleges eltolást és a dőlést (skewY) úgy, hogy a szomszédos kockák élei pontosan találkozzanak
   — így a szalag folytonos, lágyan hullámzó vonal marad. A kockák 1 px-t átfednek (nincs hajszálrés), a
   kockaszélesség pedig 9 px többszöröse (app.js), hogy a perforáció a kockahatárokon is folytonos legyen. */
.fs-stage.is-wave .fs-track{background:none;-webkit-mask:none;mask:none}
.fs-stage.is-wave .fs-track::after{display:none}
.fs-stage.is-wave .fs-cell{width:calc(var(--cw) + 1px);margin-right:-1px;will-change:transform;background:linear-gradient(180deg,rgba(255,232,204,.2) 0,rgba(255,232,204,0) 1.1%,transparent 98.7%,rgba(255,232,204,.12) 100%),linear-gradient(180deg,#1d1713 0%,#120e0c 17%,#0c0a09 50%,#120e0c 83%,#1a1511 100%); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 206.75 1460' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0h206.75v1460H0zM45.4 118a20 20 0 0 1 20-20h76a20 20 0 0 1 20 20v40a20 20 0 0 1-20 20h-76a20 20 0 0 1-20-20zM45.4 1302a20 20 0 0 1 20-20h76a20 20 0 0 1 20 20v40a20 20 0 0 1-20 20h-76a20 20 0 0 1-20-20z'/%3E%3C/svg%3E") 0 0/calc(var(--cw) / 9) 100% repeat-x;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 206.75 1460' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0h206.75v1460H0zM45.4 118a20 20 0 0 1 20-20h76a20 20 0 0 1 20 20v40a20 20 0 0 1-20 20h-76a20 20 0 0 1-20-20zM45.4 1302a20 20 0 0 1 20-20h76a20 20 0 0 1 20 20v40a20 20 0 0 1-20 20h-76a20 20 0 0 1-20-20z'/%3E%3C/svg%3E") 0 0/calc(var(--cw) / 9) 100% repeat-x}
.fs-stage.is-wave .fs-cell::after{content:'';position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(104deg,transparent 0%,transparent 16%,rgba(255,236,210,.085) 23%,rgba(255,255,255,.02) 27%,transparent 33%,transparent 58%,rgba(190,225,255,.05) 64%,rgba(255,226,196,.075) 68%,transparent 75%,transparent 100%) calc(var(--i) * var(--cw) * -1) 0/calc(var(--cw) * 3) 100% repeat-x,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .88 0 0 0 .3 -.13'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/240px 240px;opacity:.9}
/* az álló fényréteg itt nem követi a hullámot: a szalag belsejére szűkítjük, lágy felső/alsó átmenettel */
.fs-stage.is-wave .fs-light{top:calc(var(--fh) * .07);bottom:calc(var(--fh) * .07);-webkit-mask:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
.fs-stage.is-wave .fs-run{animation:none;box-shadow:none}

/* --- Vetítő-mechanika (felülnézet), valódi anyagtextúrákkal ---
   Régi vetítő hatás. Textúrák (public/assets/film/tex, generálva): bed = öntött gépváz kopott, szürkészöld
   kalapácslakkal (lepattogzások, olajfoltok); plate = patinás, karcos sárgaréz a kapu pofáihoz; roller / rail =
   megkopott nikkelezett acél; screw = egyenes hornyú sárgaréz csavar; aged = öreg film szemcséje,
   porszemei, karcai. A fényt (csúcsfény-sáv, élletörés, árnyék) CSS adja a textúrák fölött.
   .fs-bed: alaplap a film alatt a filmvájattal, két vezetőrúddal, a lámpa fényével és a két fogazott görgővel.
   A perforáció valóban átlátszó → a lyukakon át az alaplap és a görgők fogai látszanak; a fogak osztása megegyezik
   a perforációéval, és az app.js a filmmel együtt lépteti őket.
   .fs-mech: a film FÖLÖTTI álló elemek — a görgőkön megtörő fény és a képkapu. */
.fs-bed{position:absolute;z-index:0;left:0;right:0;top:calc(var(--sh) * -.1);bottom:calc(var(--sh) * -.1);pointer-events:none;border-radius:calc(var(--fh) * .03);
  background:
    linear-gradient(180deg,rgba(255,255,255,.16) 0,rgba(255,255,255,.03) .9%,transparent 2.2%,transparent 97%,rgba(0,0,0,.55) 100%),
    linear-gradient(101deg,transparent 18%,rgba(255,255,255,.075) 31%,rgba(255,255,255,.02) 38%,transparent 47%,transparent 61%,rgba(255,244,230,.05) 72%,transparent 83%),
    radial-gradient(ellipse 46% 120% at 50% 50%,rgba(255,196,120,.2),transparent 70%),linear-gradient(180deg,transparent 0 6.6%,rgba(0,0,0,.7) 6.6% 7.6%,rgba(0,0,0,.34) 7.6% 92.4%,rgba(0,0,0,.7) 92.4% 93%,rgba(255,255,255,.12) 93% 93.4%,transparent 93.4%),
    url(/assets/film/tex/bed.webp) 0 0/calc(var(--fh) * 2.4) auto;
  box-shadow:0 calc(var(--fh) * .12) calc(var(--fh) * .26) rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.1),inset 0 calc(var(--fh) * .012) 0 rgba(255,255,255,.14),inset 0 0 calc(var(--fh) * .4) rgba(0,0,0,.28)}
.fs-rail{position:absolute;left:0;right:0;height:calc(var(--fh) * .055);border-radius:999px;background:linear-gradient(90deg,rgba(0,0,0,.25),transparent 12%,transparent 88%,rgba(0,0,0,.25)),url(/assets/film/tex/rail.webp) 0 0/auto 100% repeat-x;box-shadow:0 calc(var(--fh) * .03) calc(var(--fh) * .05) rgba(0,0,0,.85)}
.fs-rail-t{top:calc(var(--fh) * .03)}
.fs-rail-b{bottom:calc(var(--fh) * .03)}
.fs-lamp{position:absolute;left:50%;top:50%;width:calc(var(--cw) * 1.5);height:86%;transform:translate(-50%,-50%);background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(255,214,150,.95) 0%,rgba(255,170,80,.6) 34%,rgba(244,123,32,.18) 62%,transparent 76%);animation:fs-lampflick 5.2s ease-in-out infinite}
@keyframes fs-lampflick{0%,100%{opacity:.92}12%{opacity:1}14%{opacity:.82}16%{opacity:1}48%{opacity:.88}71%{opacity:1}73%{opacity:.9}}
.fs-roller,.fs-over{--rw:calc(var(--fh) * .3)}
.fs-roller{position:absolute;top:1.5%;bottom:1.5%;width:var(--rw);border-radius:calc(var(--fh) * .035);
  background:
    linear-gradient(180deg,rgba(0,0,0,.7) 0,rgba(0,0,0,.1) 2.5%,rgba(255,255,255,.2) 3.2%,transparent 6.5%,rgba(0,0,0,.6) 7%,rgba(0,0,0,0) 8.5%,transparent 91.5%,rgba(0,0,0,.6) 93%,transparent 93.5%,rgba(255,255,255,.14) 96.8%,rgba(0,0,0,.1) 97.5%,rgba(0,0,0,.75) 100%),
    url(/assets/film/tex/roller.webp) 0 0/100% auto repeat-y;
  box-shadow:calc(var(--fh) * .04) calc(var(--fh) * .02) calc(var(--fh) * .09) rgba(0,0,0,.8),calc(var(--fh) * -.02) 0 calc(var(--fh) * .05) rgba(0,0,0,.55),inset 0 0 0 1px rgba(0,0,0,.5)}
.fs-roller-l{left:calc(9% - var(--rw) / 2)}
.fs-roller-r{left:calc(91% - var(--rw) / 2)}
/* fogak: a perforáció osztásával ismétlődő acélcsapok a két lyuksor magasságában; --px = a film pillanatnyi
   eltolása a görgőhöz képest (app.js), így a fogak mindig a lyukak közepén ülnek és a filmmel együtt haladnak */
.fs-roller::before,.fs-roller::after{content:'';position:absolute;left:0;right:0;height:calc(var(--sh) * .044);
  background:linear-gradient(180deg,rgba(255,255,255,.35),transparent 30%,transparent 70%,rgba(0,0,0,.45)),linear-gradient(90deg,transparent 0 30%,#3d4046 30%,#b9bcc3 36%,#f6f7f9 47%,#c9ccd2 57%,#6b6e75 66%,#2a2c30 70%,transparent 70%) var(--px,0px) 0/calc(var(--cw) / 9) 100% repeat-x;
  -webkit-mask:linear-gradient(90deg,transparent 0 30%,#000 30% 70%,transparent 70%) var(--px,0px) 0/calc(var(--cw) / 9) 100% repeat-x;mask:linear-gradient(90deg,transparent 0 30%,#000 30% 70%,transparent 70%) var(--px,0px) 0/calc(var(--cw) / 9) 100% repeat-x}
.fs-roller::before{top:calc(15% - var(--sh) * .022)}
.fs-roller::after{bottom:calc(15% - var(--sh) * .022)}
.fs-track{z-index:1}
.fs-mech{position:absolute;z-index:3;inset:0;pointer-events:none}
/* a film a görgőn megtörik: keskeny csúcsfény, két oldalt árnyék */
.fs-over{position:absolute;top:0;bottom:0;width:calc(var(--rw) * 1.5);background:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.4) 16%,rgba(0,0,0,.06) 36%,rgba(255,244,228,.26) 48.5%,rgba(255,255,255,.07) 57%,rgba(0,0,0,.34) 82%,transparent 100%)}
.fs-over-l{left:calc(9% - var(--rw) * .75)}
.fs-over-r{left:calc(91% - var(--rw) * .75)}
/* képkapu: két mart acélpofa (imbuszcsavarokkal, gravírozott felirattal), két polírozott oszlop */
.fs-gate{--gw:calc(var(--fw) + var(--fh) * .34);--sc:calc(var(--fh) * .095);position:absolute;left:calc(50% - var(--gw) / 2);width:var(--gw);top:calc(var(--sh) * -.04);bottom:calc(var(--sh) * -.04)}
.fs-clamp{position:absolute;left:0;right:0;height:calc(var(--sh) * .04 + var(--rb) - var(--fh) * .012);border-radius:calc(var(--fh) * .03);
  background:
    url(/assets/film/tex/screw.webp) calc(var(--fh) * .05) 42%/var(--sc) var(--sc) no-repeat,
    url(/assets/film/tex/screw.webp) calc(100% - var(--fh) * .05) 42%/var(--sc) var(--sc) no-repeat,
    linear-gradient(180deg,rgba(255,255,255,.2) 0,rgba(255,255,255,.04) 3%,transparent 9%,transparent 82%,rgba(0,0,0,.5) 100%),
    linear-gradient(98deg,transparent 14%,rgba(255,236,190,.34) 30%,rgba(255,250,235,.1) 38%,transparent 52%,transparent 70%,rgba(255,220,160,.14) 82%,transparent 94%),
    linear-gradient(180deg,rgba(30,18,4,0),rgba(30,18,4,.34)),
    url(/assets/film/tex/plate.webp) 0 0/calc(var(--fh) * 2.6) auto;
  box-shadow:0 calc(var(--fh) * .06) calc(var(--fh) * .12) rgba(0,0,0,.85),0 1px 0 rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.3),inset 1px 0 0 rgba(255,255,255,.08),inset -1px 0 0 rgba(0,0,0,.5),inset 0 calc(var(--fh) * -.012) 0 rgba(0,0,0,.55)}
.fs-clamp-t{top:0}
.fs-clamp-b{bottom:0;transform:scaleY(-1)}
.fs-clamp b{position:absolute;left:0;right:0;top:22%;text-align:center;font:500 calc(var(--fh) * .04)/1 'JetBrains Mono',monospace;letter-spacing:.34em;font-weight:700;color:rgba(46,28,8,.78);text-shadow:0 1px 0 rgba(255,232,170,.4)}
.fs-clamp-b b{transform:scaleY(-1)}
/* narancs jelölő a pofa élén: a kép középvonala */
.fs-clamp::after{content:'';position:absolute;left:calc(50% - var(--fh) * .007);bottom:calc(var(--fh) * .02);width:calc(var(--fh) * .014);height:calc(var(--fh) * .07);border-radius:1px;background:#8f1d12;box-shadow:inset 0 1px 0 rgba(0,0,0,.5),0 1px 0 rgba(255,225,160,.35)}
.fs-post{position:absolute;top:calc(var(--sh) * .04 + var(--rb) - var(--fh) * .02);height:calc(var(--fh) * 1.04);width:calc(var(--fh) * .05);background:url(/assets/film/tex/roller.webp) 0 0/100% auto repeat-y;box-shadow:0 0 calc(var(--fh) * .06) rgba(0,0,0,.85)}
.fs-post-l{left:calc(var(--fh) * .17 - var(--fh) * .06)}
.fs-post-r{right:calc(var(--fh) * .17 - var(--fh) * .06)}
/* a kivágás: itt világítja át a lámpa a filmet → a kapuban álló kocka fényesebb, melegebb */
.fs-aperture{position:absolute;left:calc(var(--fh) * .17);right:calc(var(--fh) * .17);top:calc(var(--sh) * .04 + var(--rb));height:var(--fh);background:radial-gradient(ellipse 70% 80% at 50% 50%,rgba(255,232,190,.14),rgba(255,200,130,.04) 70%,transparent);-webkit-backdrop-filter:brightness(1.38) contrast(1.04) saturate(1.22);backdrop-filter:brightness(1.38) contrast(1.04) saturate(1.22);box-shadow:inset 0 0 calc(var(--fh) * .1) rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.75)}
/* a film vetett árnyéka az alaplapon */
.fs-stage.is-wave .fs-track{filter:drop-shadow(0 calc(var(--fh) * .03) calc(var(--fh) * .035) rgba(0,0,0,.75))}
/* --- Öreg film: melegre fakult, enyhén kimosott képek, vignetta, és a filmmel utazó szemcse / por / karc --- */
.fs-stage.is-js .fs-pic img,.fs-stage.is-js .fs-cell.is-gate .fs-pic img,.fs-pic img{filter:sepia(.2) saturate(.9) contrast(1.1) brightness(.88)}
.fs-pic::after{box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),inset 0 0 calc(var(--fh) * .22) rgba(18,8,0,.6);background:linear-gradient(180deg,rgba(255,206,150,.1),rgba(120,70,20,.07)),radial-gradient(ellipse 85% 85% at 50% 50%,transparent 52%,rgba(24,10,0,.4) 100%)}
.fs-stage.is-wave .fs-cell::before{content:'';position:absolute;z-index:2;inset:0;pointer-events:none;background:url(/assets/film/tex/aged.webp) calc(var(--i) * 97px) calc(var(--i) * 53px)/calc(var(--fh) * 1.25) auto;opacity:.5}

/* kapu-remegés (a film soha nem fut tökéletesen simán) + a háttérfény lélegzése/vibrálása */
.fs-run{animation:fs-weave 7.3s ease-in-out infinite}
@keyframes fs-weave{0%,100%{transform:translate3d(0,0,0) rotate(0deg)}21%{transform:translate3d(0,-1.2px,0) rotate(-.1deg)}43%{transform:translate3d(0,.8px,0) rotate(.07deg)}67%{transform:translate3d(0,-.5px,0) rotate(.12deg)}84%{transform:translate3d(0,1.1px,0) rotate(-.06deg)}}
.fs-glow{animation:fs-lamp 5.2s ease-in-out infinite}
@keyframes fs-lamp{0%,100%{opacity:.92;transform:translate(-50%,-50%) scale(1)}12%{opacity:1}14%{opacity:.84}16%{opacity:1}48%{opacity:.86;transform:translate(-47%,-50%) scale(1.05,1.03)}71%{opacity:1}73%{opacity:.9}76%{opacity:1;transform:translate(-53%,-50%) scale(.98,1)}}
/* a középen (a „kapuban”) álló kocka kap több fényt, a többi kicsit visszafogott */
.fs-pic img{transition:filter .6s ease}
.fs-edge b{transition:color .6s ease,text-shadow .6s ease}
.fs-cell.is-gate .fs-edge b{color:#ffe1b0;text-shadow:0 0 calc(var(--fh) * .06) rgba(255,170,70,.95)}
/* belépő: a szalag „felpörög” — a lámpa felgyullad, a film gyorsan befut, majd lelassul (app.js) */
.fs-stage.is-js .fs-run-in{transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.fs-stage.is-js:not(.is-in) .fs-run-in{opacity:0;transform:scaleY(.82)}
.fs-stage.is-js .fs-glow-in{transition:opacity 1.6s ease .15s}
.fs-stage.is-js:not(.is-in) .fs-glow-in{opacity:0}

/* szélfelirat: a perforáción kívüli sávba „világított” számok és feliratok, mint a valódi filmen */
.fs-edge{position:absolute;left:0;right:0;height:calc(var(--fh) * .098);font:500 calc(var(--fh) * .05)/calc(var(--fh) * .098) 'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;color:#ffb454;text-shadow:0 0 calc(var(--fh) * .035) rgba(255,150,50,.65)}
.fs-edge-t{top:0}
.fs-edge-b{bottom:0}
.fs-edge i,.fs-edge b{position:absolute;top:0;left:calc(var(--gap) / 2 + var(--fh) * .02);font-style:normal;opacity:.82}
.fs-edge i + i,.fs-edge b + i{left:54%}
.fs-edge b{font-weight:700;opacity:1;color:#ffc77a}
@media (hover:hover) and (pointer:fine){
  .fs-stage.is-js .fs-cell:hover .fs-pic img,.fs-cell:hover .fs-pic img{filter:brightness(1.2) contrast(1.06) saturate(1.16)}
}

/* Tesztmód (?film3d=<p>): a jelenet a nézet fölé rögzítve, hogy a fej nélküli képernyőkép is lássa */
.film3d-debug .film-sticky{position:fixed;inset:0;z-index:200}

.film.is-off *,.film.is-off *::after{animation-play-state:paused!important}

@media (max-width:760px){
  .film-track{height:220vh}
  .film-head p{font-size:15px;padding:0 8px}
  .film-stats span{padding:10px 14px;font-size:12px}
  .film-stats b{font-size:18px}
  .film-head h2{text-wrap:balance}
}
/* Álló, keskeny kijelzőn csak a jelölők maradnak, a városnevek rejtve */
@media (max-width:760px) and (orientation:portrait){
  .film-city{display:none}
}
@media (prefers-reduced-motion:reduce){
  .film-track{height:auto}
  .film-sticky{position:relative;height:100vh}
  .film *,.film *::after{animation:none!important}
  .fs-run{overflow-x:auto;overflow-y:hidden}
  .fs-run::after,.fs-sweep,.fs-scratch{display:none}
  .fs-cell[aria-hidden]{display:none}
  .fs-stage{cursor:auto;touch-action:auto}
}

/* --- A teljes Image film: gomb, amely helyben nyitja ki a lejátszót (alapból rejtve) --- */
.film-watch{display:grid;justify-items:center;gap:18px;margin-top:clamp(28px,4vw,56px);text-align:center}
.film-screen{width:min(100%,1040px);border-radius:clamp(12px,1.4vw,20px);overflow:hidden;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 40px 90px -40px rgba(0,0,0,1),0 0 120px -30px rgba(244,123,32,.4);opacity:0;transform:translateY(14px) scale(.985);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.film-screen[hidden]{display:none}
.film-screen.is-open{opacity:1;transform:none}
.film-screen video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.film-watch-btn{cursor:pointer;border:0;font:inherit}
.film-watch-meta{margin:-6px 0 0;font:500 11.5px 'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:rgba(243,240,235,.5)}

/* --- Vetítő mobilon: kisebb filmkocka, hogy a kapu két oldalán is látsszon a futó film (ne a kapu töltse ki a
   kijelzőt), a görgők a szélekre húzódnak, az apró gravírozás pedig eltűnik (olvashatatlan lenne) --- */
@media (max-width:760px){
  .fs-stage{--fh:clamp(92px,25vw,150px)}
  .fs-roller,.fs-over{--rw:calc(var(--fh) * .24)}
  .fs-roller-l{left:calc(5.5% - var(--rw) / 2)}
  .fs-roller-r{left:calc(94.5% - var(--rw) / 2)}
  .fs-over-l{left:calc(5.5% - var(--rw) * .75)}
  .fs-over-r{left:calc(94.5% - var(--rw) * .75)}
  .fs-gate{--gw:calc(var(--fw) + var(--fh) * .26)}
  .fs-post-l{left:calc(var(--fh) * .13 - var(--fh) * .06)}
  .fs-post-r{right:calc(var(--fh) * .13 - var(--fh) * .06)}
  .fs-aperture{left:calc(var(--fh) * .13);right:calc(var(--fh) * .13)}
  .fs-clamp b{display:none}
  .fs-edge{font-size:calc(var(--fh) * .062)}
  .fs-run::after{background:linear-gradient(90deg,#0b0c0e 0%,rgba(11,12,14,.7) 1.5%,transparent 4%,transparent 96%,rgba(11,12,14,.7) 98.5%,#0b0c0e 100%)}
  .film-reel{padding-bottom:56px}
}
/* --- csak a film fut: vetito-mechanika (sin, gorgok, rez kapu) kikapcsolva --- */
.fs-bed,.fs-mech{display:none!important}

/* --- Teljesítmény (gyenge eszközön is sima): a szalag egyetlen GPU-rétegként csúszik ---
   - nincs szűrő (drop-shadow) a mozgó sávon, a kockák nem külön rétegek;
   - a WebGL-vászon fölötti címkéken nincs háttér-elmosás (azt minden képkockánál újra kellene számolni). */
.fs-stage.is-wave .fs-track{filter:none;will-change:transform;backface-visibility:hidden}
.fs-stage.is-wave .fs-cell{will-change:auto;transform:none!important}
.film-city,.film-stats span{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(16,17,20,.86)}
@media (pointer:coarse),(max-width:760px){
  .fs-stage .fs-light,.fs-stage.is-js .fs-light{display:none}
  .fs-glow{animation:none}
  .fs-run{animation:none!important}
}