/* ============================================================
   CHECKPOINT NYÍREGYHÁZA
   Design system + layout
   ============================================================ */

/* ---------- 1. TOKENS ------------------------------------- */
:root{
  /* Felületek */
  --bg:            #04070500;
  --ink:           #040706;
  --ink-2:         #070D0A;
  --ink-3:         #0A1410;
  --panel:         #0C1712;
  --panel-2:       #101E17;

  /* Zöld */
  --green-deep:    #0A2018;
  --green:         #123B2C;
  --green-lit:     #1B5C42;
  --green-glow:    #27D08A;
  --teal:          #1F4A44;

  /* Arany */
  --gold:          #D4AF54;
  --gold-lit:      #F3E1AC;
  --gold-dim:      #8A6E2E;
  --gold-ghost:    rgba(212,175,84,.16);

  /* Szöveg */
  --cream:         #EFEADC;
  --paper:         #EAE3D1;   /* a bár szekció világos alapja */
  --muted:         #8D9B92;
  --muted-2:       #5C6B62;

  /* Tipó */
  --f-display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --f-slab:    'Alfa Slab One', Georgia, serif;
  --f-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Ritmus */
  --pad:       clamp(1.25rem, 5vw, 5.5rem);
  --sec:       clamp(5rem, 13vw, 12rem);
  --maxw:      1560px;
  --hair:      rgba(212,175,84,.20);
  --hair-soft: rgba(239,234,220,.09);

  /* Fejléc magassága — a ragadós elemek ehhez igazodnak */
  --navh:     clamp(4.2rem,6.6vw,5.6rem);

  /* Képsarkok */
  --r-img:     clamp(12px, 1.3vw, 20px);

  /* Anton nagybetűs sortávok — a betűtípusból mérve (upem 2048):
     Ő/Ű ékezet 1.1733em · Á/É/Ó/Ú/Í 1.1006em · vessző -0.1147em
     => 1.1733 + 0.1147 = 1.288 a legrosszabb eset, innen az 1.3     */
  --lh-cap:    1.3;

  /* Görbék */
  --e-out: cubic-bezier(.16,1,.3,1);
  --e-io:  cubic-bezier(.76,0,.24,1);
}

/* ---------- 2. RESET -------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--f-body);
  font-size:clamp(15px,1.02vw,17px);
  line-height:1.62;
  font-weight:380;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-locked{overflow:hidden}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,video,canvas,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--gold);color:var(--ink)}

/* Görgetősáv */
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:var(--green);border-radius:0}
::-webkit-scrollbar-thumb:hover{background:var(--gold-dim)}

/* ---------- 3. TIPOGRÁFIA --------------------------------- */
.display{
  font-family:var(--f-display);
  font-weight:400;
  line-height:var(--lh-cap);
  letter-spacing:-.015em;
  text-transform:uppercase;
}
.d-xl{ font-size:clamp(3.2rem, 13vw, 11.5rem) }
.d-lg{ font-size:clamp(2.7rem, 8.2vw, 7.6rem) }
.d-md{ font-size:clamp(2.1rem, 5.4vw, 4.6rem) }
.d-sm{ font-size:clamp(1.5rem, 3.2vw, 2.6rem) }

.label{
  font-family:var(--f-mono);
  font-size:clamp(.62rem,.78vw,.74rem);
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:500;
}
.label--muted{color:var(--muted)}

.lead{
  font-size:clamp(1.02rem,1.42vw,1.32rem);
  line-height:1.55;
  color:#CFD6D0;
  font-weight:340;
}
.small{font-size:.86rem;color:var(--muted)}
.gold{color:var(--gold)}
.crm{color:var(--cream)}

/* Arany gradiens szöveg */
.grad{
  background:linear-gradient(174deg,var(--gold-lit) 4%,var(--gold) 38%,#9C7C33 70%,var(--gold-lit) 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
/* A transzformált gyerekek saját rétegre kerülnek, ezért a szülő
   background-clip:text nem vágja őket — mindegyik kapja meg a sajátját. */
.grad > span,.grad > i,.grad > .ch,.grad > .w,.grad > .w > i{
  background-image:inherit;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}

/* Kontúros szöveg */
.outline{
  color:transparent;
  -webkit-text-stroke:1px rgba(212,175,84,.42);
}

/* ---------- 4. LAYOUT ------------------------------------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
[id]{scroll-margin-top:calc(var(--navh) + 3.5rem)}
.sec{position:relative;padding-block:var(--sec)}
.sec--tight{padding-block:clamp(3.5rem,8vw,7rem)}

.rule{height:1px;background:var(--hair);width:100%;transform-origin:left;}

.sec-head{
  display:grid;grid-template-columns:1fr;gap:clamp(1rem,2.4vw,2rem);
  align-items:end;margin-bottom:clamp(2.5rem,5vw,4.5rem);
}
@media(min-width:900px){
  .sec-head{grid-template-columns:minmax(0,1fr) minmax(0,28rem)}
}
.sec-num{
  display:flex;align-items:center;gap:.9rem;margin-bottom:1.1rem;
}
.sec-num::after{content:'';flex:1;height:1px;background:var(--hair);max-width:9rem}

/* ---------- 5. HÁTTÉR-RÉTEGEK ----------------------------- */
.grain{
  position:fixed;inset:-120%;z-index:9000;pointer-events:none;
  opacity:.14;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
  animation:grainShift 6s steps(6) infinite;
  will-change:transform;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}      16%{transform:translate(-4%,-3%)}
  33%{transform:translate(3%,-5%)}  50%{transform:translate(-2%,4%)}
  66%{transform:translate(4%,2%)}   83%{transform:translate(-5%,-2%)}
  100%{transform:translate(0,0)}
}
.vignette{
  position:fixed;inset:0;z-index:8998;pointer-events:none;
  background:radial-gradient(122% 92% at 50% 42%,transparent 42%,rgba(0,0,0,.62) 100%);
}
/* Finom szkennelt vonalháló */
.scanlines{
  position:fixed;inset:0;z-index:8997;pointer-events:none;opacity:.16;
  background:repeating-linear-gradient(180deg,transparent 0 2px,rgba(0,0,0,.55) 2px 3px);
}

/* ---------- 6. KURZOR ------------------------------------- */
.cursor,.cursor-dot{
  position:fixed;top:0;left:0;z-index:9500;pointer-events:none;
  border-radius:50%;mix-blend-mode:difference;
  will-change:transform;
}
.cursor{
  width:34px;height:34px;margin:-17px 0 0 -17px;
  border:1px solid rgba(212,175,84,.85);
  transition:width .32s var(--e-out),height .32s var(--e-out),
             margin .32s var(--e-out),background-color .32s var(--e-out),
             border-color .32s var(--e-out),opacity .3s;
}
.cursor-dot{width:4px;height:4px;margin:-2px 0 0 -2px;background:var(--gold-lit)}
body.cursor-hot .cursor{
  width:76px;height:76px;margin:-38px 0 0 -38px;
  background:rgba(212,175,84,.14);border-color:transparent;
}
body.cursor-hide .cursor,body.cursor-hide .cursor-dot{opacity:0}
@media(hover:none),(pointer:coarse){.cursor,.cursor-dot{display:none}}

/* ---------- 7. PRELOADER ---------------------------------- */
.pre{
  position:fixed;inset:0;z-index:9800;background:var(--ink);
  display:grid;place-items:center;
}
.pre__inner{text-align:center;width:min(90vw,42rem)}
.pre__word{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(2.2rem,9vw,6rem);line-height:1;letter-spacing:.02em;
  display:flex;justify-content:center;flex-wrap:wrap;
}
.pre__word span{display:inline-block;transform:translateY(105%);opacity:0}
.pre__word{padding:.34em 0 .12em;margin:-.34em 0 -.12em;overflow:hidden}
.pre__bar{
  margin-top:2.2rem;height:1px;width:100%;background:rgba(239,234,220,.14);
  position:relative;overflow:hidden;
}
.pre__bar i{
  position:absolute;inset:0 100% 0 0;background:var(--gold);
  transition:right .1s linear;
}
.pre__meta{
  display:flex;justify-content:space-between;margin-top:.85rem;
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted-2);
}
/* Sorompó-csíkok (checkpoint = határátkelő) */
.pre__gates{position:fixed;inset:0;z-index:9799;display:flex;pointer-events:none}
.pre__gates i{flex:1;background:var(--ink);transform-origin:top}

/* ---------- 8. NAVIGÁCIÓ ---------------------------------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:clamp(.9rem,1.7vw,1.4rem) var(--pad);
  transition:background-color .5s var(--e-out),backdrop-filter .5s,border-color .5s;
  border-bottom:1px solid transparent;
}
/* Állandó lefutó árnyalás a fejléc mögött: bármi is van alatta
   (3D fény, világos fotó), a linkek olvashatók maradnak.        */
.nav::before{
  content:'';position:absolute;inset:-1px 0 auto 0;height:190%;z-index:-1;
  pointer-events:none;opacity:1;transition:opacity .5s var(--e-out);
  background:linear-gradient(180deg,rgba(4,7,6,.92) 0%,rgba(4,7,6,.66) 46%,transparent 100%);
}
.nav.is-stuck::before{opacity:0}
.nav.is-stuck{
  background:rgba(4,7,6,.72);backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--hair);
}
.nav.is-up{transform:translateY(0)}
.brand{
  display:flex;align-items:baseline;gap:.6rem;
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(1.05rem,1.7vw,1.4rem);letter-spacing:.04em;line-height:1;
}
.brand small{
  font-family:var(--f-mono);font-size:.55rem;letter-spacing:.3em;
  color:var(--gold);transform:translateY(-.15em);
}
.nav__links{display:none;gap:clamp(1.2rem,2.4vw,2.4rem);align-items:center}
@media(min-width:1000px){.nav__links{display:flex}}
.nav__links a{
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:#B4C0B7;position:relative;padding-block:.3rem;
  transition:color .4s var(--e-out);
}
.nav__links a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--e-out);
}
.nav__links a:hover{color:var(--cream)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}

.nav__cta{display:flex;align-items:center;gap:.6rem}
@media(max-width:719px){.nav__cta .btn{display:none}}

/* Hamburger */
.burger{
  width:46px;height:46px;display:grid;place-items:center;
  border:1px solid var(--hair);border-radius:50%;
  transition:border-color .3s,background-color .3s;
}
.burger:hover{border-color:var(--gold);background:var(--gold-ghost)}
.burger i{display:block;width:17px;height:1px;background:var(--cream);transition:transform .4s var(--e-out),opacity .3s}
.burger i+i{margin-top:5px}
body.menu-open .burger i:first-child{transform:translateY(3px) rotate(45deg)}
body.menu-open .burger i:last-child{transform:translateY(-3px) rotate(-45deg)}
@media(min-width:1000px){.burger{display:none}}

/* Teljes képernyős menü */
.menu{
  position:fixed;inset:0;z-index:880;background:var(--ink-2);
  display:flex;flex-direction:column;justify-content:center;
  padding:6rem var(--pad) 3rem;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .85s var(--e-io);
  overflow-y:auto;
}
body.menu-open .menu{clip-path:inset(0 0 0 0)}
.menu__list li{overflow:hidden}
.menu__list a{
  display:block;font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(2.2rem,10vw,5rem);line-height:1.2;
  transform:translateY(110%);transition:transform .8s var(--e-out),color .3s;
  padding-block:.26em .08em;
}
body.menu-open .menu__list a{transform:translateY(0)}
.menu__list li:nth-child(1) a{transition-delay:.12s}
.menu__list li:nth-child(2) a{transition-delay:.18s}
.menu__list li:nth-child(3) a{transition-delay:.24s}
.menu__list li:nth-child(4) a{transition-delay:.30s}
.menu__list li:nth-child(5) a{transition-delay:.36s}
.menu__list li:nth-child(6) a{transition-delay:.42s}
.menu__list a:hover{color:var(--gold)}
.menu__foot{
  margin-top:clamp(2rem,5vw,4rem);padding-top:1.4rem;border-top:1px solid var(--hair);
  display:flex;flex-wrap:wrap;gap:1.2rem 2rem;justify-content:space-between;align-items:center;
}

/* ---------- 9. GOMBOK ------------------------------------- */
.btn{
  --bh:#0000;
  backdrop-filter:blur(6px);
  position:relative;display:inline-flex;align-items:center;gap:.75rem;
  padding:1.02em 1.9em;border:1px solid var(--gold);
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);overflow:hidden;
  border-radius:999px;isolation:isolate;white-space:nowrap;
  transition:color .45s var(--e-out),border-color .45s;
}
.btn::before{
  content:'';position:absolute;inset:0;z-index:-1;background:var(--gold);
  transform:translateY(101%);transition:transform .55s var(--e-out);
}
.btn:hover{color:var(--ink)}
.btn:hover::before{transform:translateY(0)}
.btn--solid{background:var(--gold);color:var(--ink)}
.btn--solid::before{background:var(--gold-lit)}
.btn--ghost{border-color:rgba(239,234,220,.34);color:var(--cream);background:rgba(4,7,6,.42);backdrop-filter:blur(8px)}
.btn--ghost::before{background:var(--cream)}
.btn--ghost:hover{border-color:var(--cream)}
.btn--lg{padding:1.2em 2.4em;font-size:.78rem}
.btn i{display:inline-block;transition:transform .45s var(--e-out)}
.btn:hover i{transform:translateX(4px)}

/* Mágneses burok */
.mag{display:inline-block;will-change:transform}

/* ---------- 10. HERO -------------------------------------- */
.hero{
  position:relative;min-height:100svh;min-height:100vh;
  display:flex;flex-direction:column;
  padding-bottom:clamp(1.6rem,4vw,3rem);
  overflow:hidden;isolation:isolate;
}
.hero > .wrap{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  padding-top:calc(var(--navh) + clamp(1rem,3vw,2.5rem));
}
.hero__bg{position:absolute;inset:0;z-index:-3;overflow:hidden}
.hero__bg video{
  width:100%;height:100%;object-fit:cover;
  opacity:.43;filter:grayscale(.18) contrast(1.18) brightness(1.02);
  transform:scale(1.08);
  animation:heroSmoke 2s ease-in-out infinite;
}
@keyframes heroSmoke{
  0%,100%{opacity:.43}
  50%{opacity:.86}
}
.hero__bg::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(70% 55% at 50% 58%,rgba(18,59,44,.55),transparent 72%),
    linear-gradient(180deg,rgba(4,7,6,.9) 0%,rgba(4,7,6,.15) 38%,rgba(4,7,6,.96) 100%);
}
#hero-canvas{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  opacity:0;transition:opacity 1.8s var(--e-out);
  /* a felső sáv elhalványul, hogy a fejléc mögé ne kerüljön erős fény */
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.55) 9%,#000 22%);
  mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.55) 9%,#000 22%);
}
#hero-canvas.ready{opacity:1}

.hero::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,7,6,.72) 0%,transparent 22%,transparent 40%,rgba(4,7,6,.76) 78%,rgba(4,7,6,.97) 100%);
}
@media(min-width:980px){
  .hero::before{
    background:
      linear-gradient(96deg,rgba(4,7,6,.96) 0%,rgba(4,7,6,.86) 32%,rgba(4,7,6,.42) 54%,transparent 74%),
      linear-gradient(0deg,rgba(4,7,6,.94) 0%,rgba(4,7,6,.60) 18%,transparent 42%);
  }
}
.phero::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,7,6,.72) 0%,transparent 26%,transparent 46%,rgba(4,7,6,.72) 80%,rgba(4,7,6,.96) 100%);
}
.hero__grid{
  display:grid;gap:clamp(1.2rem,2.2vw,1.8rem);align-items:start;
  grid-template-columns:1fr;
}
/* A hero egyetlen oszlop: cim, alatta az uveglap, balra igazitva a
   cimmel es a claim sorral. A felso szelessegkorlat ugy van beallitva,
   hogy a panel jobb szele meg a lebego kockak elott vegzodjon, es a
   jobb oldal vegig szabadon maradjon a 3D pipanak.                 */
@media(min-width:980px){
  .hero__side{
    margin-left:0;
    max-width:clamp(24rem,42vw,36rem);
  }
}
.hero__title{position:relative}
.hero__title .d-xl{
  display:flex;flex-wrap:wrap;
  overflow:hidden;padding:.34em 0 .12em;margin:-.34em 0 -.12em;
}
.hero__title .ch{display:inline-block;will-change:transform}
.hero__kicker{
  display:flex;flex-wrap:wrap;gap:.55rem 1.1rem;align-items:center;
  margin-bottom:clamp(1rem,2vw,1.6rem);
}
.hero__kicker span{position:relative;padding-left:1.05rem}
.hero__kicker span::before{
  content:'';position:absolute;left:0;top:50%;width:5px;height:5px;
  margin-top:-2.5px;background:var(--gold);transform:rotate(45deg);
}
.hero__claim{
  font-family:var(--f-mono);font-size:clamp(.72rem,1.05vw,.86rem);
  letter-spacing:.34em;text-transform:uppercase;color:var(--gold);
  margin-top:clamp(.9rem,1.8vw,1.4rem);
}
/* Uveglap a bevezeto szoveg alatt. A 3D pipa pont e mogott fut, ezert
   a szoveg addig olvashatatlan volt; a homalyositott hatter megtartja
   a kep hangulatat, de visszaadja a kontrasztot.                    */
.hero__side{
  position:relative;
  padding:clamp(1.3rem,2.3vw,1.9rem);
  border-radius:clamp(14px,1.5vw,22px);
  background:rgba(7,14,11,.44);
  border:1px solid rgba(239,234,220,.13);
  -webkit-backdrop-filter:blur(20px) saturate(135%);
  backdrop-filter:blur(20px) saturate(135%);
  box-shadow:0 26px 64px rgba(0,0,0,.42);
}
/* vekony arany fenycsik a panel felso elen */
.hero__side::before{
  content:'';position:absolute;left:12%;right:12%;top:0;height:1px;border-radius:inherit;
  background:linear-gradient(90deg,transparent,rgba(212,175,84,.55),transparent);
}
.hero__side .lead{max-width:46ch;color:#DDE4DC}
.hero__actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem}

.hero__foot{
  margin-top:auto;padding-top:clamp(1.4rem,3vw,2.6rem);
  border-top:1px solid var(--hair);
  position:relative;text-shadow:0 1px 12px rgba(4,7,6,.9);
  display:grid;gap:.55rem 2rem;align-items:center;
  grid-template-columns:1fr;
}
.hero__foot > *:nth-child(2){display:none}
/* Keskeny nezetben a szoveg az aljara megy, hogy a felso sav
   szabadon maradjon a 3D pipanak. Szeles nezetben marad a
   fuggoleges kozepre igazitas.                              */
@media(max-width:979px){
  .hero > .wrap{justify-content:flex-end}
  .hero__foot{margin-top:clamp(1.4rem,4vw,2.2rem)}
}
@media(min-width:940px){
  .hero__foot{grid-template-columns:auto 1fr auto;justify-items:start}
  .hero__foot > *:nth-child(2){display:flex;justify-self:center}
  .hero__foot > *:nth-child(3){justify-self:end;text-align:right}
}
.scroll-hint{display:flex;align-items:center;gap:.7rem}
.scroll-hint .bar{width:44px;height:1px;background:var(--hair-soft);position:relative;overflow:hidden}
.scroll-hint .bar::after{
  content:'';position:absolute;inset:0;background:var(--gold);
  animation:hint 2.4s var(--e-io) infinite;
}
@keyframes hint{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}

/* Élő státusz-pötty */
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--muted-2);flex:none}
.dot.on{background:var(--green-glow);box-shadow:0 0 0 0 rgba(39,208,138,.6);animation:pulse 2.2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(39,208,138,0)}100%{box-shadow:0 0 0 0 rgba(39,208,138,0)}}
.status{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--f-mono);
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ---------- 11. SPLIT-REVEAL ------------------------------ */
.rv{display:block}
.rv > *{display:block;will-change:transform}
.fade-up{opacity:0;transform:translateY(28px)}

/* ---------- 12. MARQUEE ----------------------------------- */
.marq{
  position:relative;overflow:hidden;
  border-block:1px solid var(--hair);
  padding-block:clamp(.9rem,1.6vw,1.4rem);
  --mspd:38s;
}
.marq__track{display:flex;width:max-content;animation:marq var(--mspd) linear infinite}
.marq:hover .marq__track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.marq__item{
  display:inline-flex;align-items:center;gap:1.4rem;padding-inline:1.4rem;
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(1.3rem,3.4vw,2.8rem);line-height:1;white-space:nowrap;
  padding-block:.28em .12em;margin-block:-.28em -.12em;
}
.marq__item i{
  width:9px;height:9px;background:var(--gold);transform:rotate(45deg);flex:none;
}
.marq--rev .marq__track{animation-direction:reverse}

/* ---------- 13. KÁRTYÁK ----------------------------------- */
.card{
  position:relative;background:var(--panel);
  border:1px solid var(--hair-soft);overflow:hidden;isolation:isolate;
  transition:border-color .5s var(--e-out),transform .6s var(--e-out);
}
.card::after{
  content:'';position:absolute;inset:0;z-index:-1;opacity:0;
  background:radial-gradient(60% 60% at var(--mx,50%) var(--my,0%),rgba(212,175,84,.14),transparent 70%);
  transition:opacity .5s;
}
.card:hover{border-color:var(--hair)}
.card:hover::after{opacity:1}

/* ---------- 14. GALÉRIA / MÉDIA --------------------------- */
.media{position:relative;overflow:hidden;isolation:isolate;background:var(--ink-3);border-radius:var(--r-img)}
.media img,.media video,.media picture,.media canvas{border-radius:inherit}
/* A picture alapertelmezetten inline: e nelkul a benne levo kep
   height:100% erteke nem tudna mihez igazodni. */
.media picture{display:block;width:100%;height:100%}
.media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e-out)}
.media img[data-par]{
  position:absolute;left:0;top:-10%;
  width:100%;height:120%;
}
.media:hover img{transform:scale(1.05)}
.media--tall{aspect-ratio:3/4}
.media--wide{aspect-ratio:16/9}
/* Panorama: a keret aranya PONTOSAN a kep aranya (1920x458), igy az
   object-fit:cover semmit nem vag le. 16/9-es keretben a 4.19:1-es
   felvetel szelessegenek tobb mint fele levagodott.                */
.media--pano{aspect-ratio:1920/458}
.media--pano .media__cap{padding:.7rem .9rem}
.media--sq{aspect-ratio:1}
.media__cap{
  position:absolute;left:0;right:0;bottom:0;padding:1.1rem 1.2rem;
  background:linear-gradient(0deg,rgba(4,7,6,.92),transparent);
  display:flex;justify-content:space-between;align-items:end;gap:1rem;
}

/* ---------- 15. SCROLL-SZEKVENCIA (üres → tele) ----------- */
.swap{position:relative;height:100svh;height:100vh;overflow:hidden;background:var(--ink);border-radius:var(--r-img)}
.swap__layer{position:absolute;inset:0}
.swap__layer img{
  width:100%;height:100%;object-fit:cover;
  filter:brightness(.72) contrast(1.14) saturate(.78) hue-rotate(-6deg);
}
.swap__layer--b{opacity:0}
.swap::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 30%,transparent 35%,rgba(4,7,6,.72) 100%),
    linear-gradient(0deg,rgba(4,7,6,.97) 0%,rgba(4,7,6,.72) 26%,transparent 58%),
    linear-gradient(180deg,rgba(4,7,6,.85),transparent 26%);
}
.swap__ui{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:var(--pad) var(--pad) calc(var(--pad) + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:.9rem;
}
.swap__ui .display{text-shadow:0 2px 28px rgba(4,7,6,.95),0 1px 4px rgba(4,7,6,.9)}
@media(max-width:999px){.swap__ui{padding-bottom:5.5rem}}
.swap__meter{height:2px;background:rgba(239,234,220,.14);position:relative;overflow:hidden}
.swap__meter i{position:absolute;inset:0 100% 0 0;background:var(--gold)}
.swap__row{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}

/* ---------- 16. VÍZIPIPA ÍZEK ----------------------------- */
.flav{
  display:grid;gap:1px;background:var(--hair-soft);
  border:1px solid var(--hair-soft);
}
.flav__row{
  position:relative;background:var(--ink-2);padding:clamp(1.1rem,2.4vw,1.9rem) clamp(1rem,2.2vw,1.8rem);
  display:grid;grid-template-columns:auto 1fr auto;gap:1.2rem;align-items:center;
  transition:background-color .55s var(--e-out),padding-left .55s var(--e-out);
  overflow:hidden;
}
.flav__row::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:hsl(var(--h,45) 62% 52%);transform:scaleY(0);transform-origin:bottom;
  transition:transform .5s var(--e-out);
}
.flav__row:hover{background:var(--panel-2)}
.flav__row:hover::before{transform:scaleY(1)}
.flav__dot{
  width:34px;height:34px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 32% 28%,hsl(var(--h,45) 78% 68%),hsl(var(--h,45) 62% 32%));
  box-shadow:inset 0 -3px 8px rgba(0,0,0,.5),0 0 22px hsl(var(--h,45) 70% 45% / .35);
}
.flav__name{
  font-family:var(--f-body);font-weight:600;letter-spacing:-.01em;
  font-size:clamp(1.02rem,1.9vw,1.34rem);line-height:1.3
}
.flav__notes{font-size:.82rem;color:var(--muted);letter-spacing:.02em}
.flav__idx{font-family:var(--f-mono);font-size:.68rem;color:var(--muted-2);letter-spacing:.16em}

/* ---------- 17. ÁRLISTA / MENÜ ---------------------------- */
.menu-note{
  display:flex;gap:.9rem;align-items:flex-start;
  padding:1rem 1.2rem;border:1px dashed rgba(212,175,84,.42);
  background:rgba(212,175,84,.05);
}
.menu-note b{color:var(--gold);font-weight:600}

.mrow{
  display:grid;grid-template-columns:1fr auto;gap:.4rem 1.2rem;
  padding-block:clamp(.95rem,1.9vw,1.35rem);
  border-bottom:1px solid var(--hair-soft);
  align-items:baseline;position:relative;
  transition:padding-left .5s var(--e-out);
}
.mrow:hover{padding-left:.7rem}
.mrow::before{
  content:'';position:absolute;left:0;top:50%;width:3px;height:0;background:var(--gold);
  transform:translateY(-50%);transition:height .4s var(--e-out);
}
.mrow:hover::before{height:62%}
.mrow__name{
  font-family:var(--f-body);font-weight:600;
  font-size:clamp(1rem,1.6vw,1.2rem);line-height:1.35;letter-spacing:-.005em;
}
.mrow__desc{grid-column:1;font-size:.83rem;color:var(--muted);line-height:1.5;max-width:52ch}
.mrow__price{
  grid-row:1;grid-column:2;font-family:var(--f-mono);
  font-size:clamp(.95rem,1.5vw,1.15rem);color:var(--gold-lit);white-space:nowrap;
  font-weight:500;letter-spacing:.02em;
}
.mrow__price b{font-weight:400;color:var(--muted-2);margin:0 .45em}
.mrow__price.is-empty{
  color:var(--muted-2);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
}
.mrow__tag{
  display:inline-block;margin-left:.6rem;padding:.16em .55em;
  font-family:var(--f-mono);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--hair);color:var(--gold);vertical-align:middle;
  transform:translateY(-.15em);
}

/* ---------- PAPÍR SÁV (03 · A bár) -------------------------
   Az oldal egyetlen világos szekciója. Szándékos törés: a hosszú
   sötét folyamban ez a nyomtatott itallap pillanata. Nincs benne
   keretes kártya, csak tipográfia és egy sötét filmsáv.        */
.sec--paper{
  position:relative;background:var(--paper);color:var(--ink-2);
  padding-block:clamp(4rem,10vw,7.5rem);
}
.sec--paper::before,.sec--paper::after{
  content:'';position:absolute;left:0;right:0;height:1px;background:rgba(4,7,6,.16);
}
.sec--paper::before{top:0}
.sec--paper::after{bottom:0}

/* színek átfordítása a világos alapon */
.sec--paper .display{color:var(--ink)}
.sec--paper .label{color:var(--gold-dim)}
.sec--paper .label--muted{color:rgba(4,7,6,.45)}
.sec--paper .lead{color:rgba(4,7,6,.72)}
.sec--paper .sec-num::after{background:rgba(4,7,6,.22)}

.paper__head{max-width:46rem;margin-bottom:clamp(2.4rem,5vw,4rem)}
.paper__head .lead{margin-top:1.1rem}

.paper__grid{display:grid;gap:clamp(2rem,4vw,3.6rem);grid-template-columns:1fr;align-items:center}
@media(min-width:980px){
  .paper__grid{grid-template-columns:minmax(0,19rem) minmax(0,1fr)}
}

/* Happy hour: keret nélkül, tisztán tipográfiával */
.hh{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem}
.hh__big{
  font-family:var(--f-slab);line-height:.88;
  font-size:clamp(3.4rem,8.5vw,5.8rem);color:var(--gold-dim);
}
.hh__rule{color:rgba(4,7,6,.72);max-width:26ch}
.hh__when{color:var(--gold-dim)}
.hh .btn{margin-top:.6rem}

/* Filmsáv: az egyetlen sötét elem a világos alapon */
.film{
  position:relative;margin:0;overflow:hidden;isolation:isolate;
  border-radius:var(--r-img);background:var(--ink);aspect-ratio:16/10;
}
.film video{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.film__cap{
  position:absolute;left:0;right:0;bottom:0;padding:1rem 1.2rem;
  display:flex;justify-content:flex-end;
  background:linear-gradient(0deg,rgba(4,7,6,.88),transparent);
}
.film__cap .label{color:var(--gold)}

/* Sötét gomb a világos alapon */
.btn--ink{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn--ink::before{background:var(--green-lit)}
.btn--ink:hover{color:var(--cream);border-color:var(--green-lit)}

/* Kategória-navigáció (ragadós) */
.catnav{
  position:sticky;top:var(--navh);z-index:200;
  background:rgba(4,7,6,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hair);
  display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;
  padding:.7rem var(--pad);
}
.catnav::-webkit-scrollbar{display:none}
.catnav a{
  flex:none;padding:.5em 1em;border:1px solid transparent;border-radius:999px;
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);transition:color .3s,border-color .3s,background-color .3s;
}
.catnav a:hover,.catnav a.is-on{color:var(--gold);border-color:var(--hair);background:var(--gold-ghost)}

/* ---------- 18. VÉLEMÉNYEK -------------------------------- */
.revs{position:relative;overflow:hidden;padding-block:.5rem;--rspd:64s}
.revs::before,.revs::after{
  content:'';position:absolute;top:0;bottom:0;width:clamp(3rem,12vw,14rem);z-index:3;pointer-events:none;
}
.revs::before{left:0;background:linear-gradient(90deg,var(--ink),transparent)}
.revs::after{right:0;background:linear-gradient(270deg,var(--ink),transparent)}
.revs__track{display:flex;gap:clamp(1rem,2vw,1.6rem);width:max-content;animation:marq var(--rspd) linear infinite}
.revs:hover .revs__track,.revs__track:hover{animation-play-state:paused}
.rev{
  width:clamp(19rem,30vw,26rem);flex:none;background:var(--panel);
  border:1px solid var(--hair-soft);padding:clamp(1.3rem,2.4vw,1.9rem);
  display:flex;flex-direction:column;gap:1rem;
  transition:border-color .5s var(--e-out),transform .5s var(--e-out);
}
.rev:hover{border-color:var(--hair);transform:translateY(-4px)}
.rev__stars{display:flex;gap:.22rem;color:var(--gold)}
.rev__stars svg{width:15px;height:15px;fill:currentColor}
/* A vendég sortöréseit megtartjuk (pre-line), de a szalag magasságát
   nem viheti el egy hosszú vélemény: 9 sor után elvágjuk, a teljes
   szöveg a Google profilon olvasható. A szöveget NEM írjuk át.     */
.rev__text{
  font-size:.95rem;line-height:1.62;color:#D8DED8;white-space:pre-line;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:9;overflow:hidden;
}
.rev__meta{
  margin-top:auto;padding-top:.9rem;border-top:1px solid var(--hair-soft);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
.rev__who{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;color:var(--cream)}
.rev__when{font-family:var(--f-mono);font-size:.63rem;letter-spacing:.14em;color:var(--muted-2);text-transform:uppercase}
.rev__demo{
  align-self:flex-start;font-family:var(--f-mono);font-size:.55rem;letter-spacing:.2em;
  text-transform:uppercase;color:#E0B24A;border:1px solid rgba(224,178,74,.4);
  padding:.2em .6em;background:rgba(224,178,74,.08);
}
.gscore{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.gscore b{font-family:var(--f-display);font-size:clamp(1.5rem,3vw,2.2rem);line-height:1;color:var(--gold-lit);font-weight:400}
.gscore__stars{display:inline-flex;gap:.15rem;color:var(--gold)}
.gscore__stars svg{width:15px;height:15px;fill:currentColor}
.gscore__n{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
.g-badge{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-mono);
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* Fizetési módok ikonnal */
.pays{display:flex;flex-wrap:wrap;gap:.5rem}
.pay{
  display:inline-flex;align-items:center;gap:.55em;
  border:1px solid var(--hair-soft);border-radius:999px;padding:.5em .9em;
  font-family:var(--f-mono);font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;
  transition:color .35s var(--e-out),border-color .35s var(--e-out);
}
.pay svg{width:16px;height:16px;flex:none;color:var(--gold)}
.pay:hover{color:var(--cream);border-color:var(--hair)}
/* ---------- 19. FOGLALÁS ---------------------------------- */
.book{
  display:grid;gap:1px;background:var(--hair-soft);border:1px solid var(--hair-soft);
  grid-template-columns:1fr;
}
@media(min-width:820px){.book{grid-template-columns:1fr 1fr}}
.book__cell{
  background:var(--ink-2);padding:clamp(1.6rem,3.6vw,3rem);
  display:flex;flex-direction:column;gap:1rem;position:relative;overflow:hidden;
  transition:background-color .5s var(--e-out);
}
.book__cell:hover{background:var(--panel-2)}
.book__cell .big{
  font-family:var(--f-display);text-transform:uppercase;line-height:1.2;
  padding-block:.18em .06em;margin-block:-.18em -.06em;
  font-size:clamp(1.5rem,3.6vw,2.6rem);
}
.book__num{
  font-family:var(--f-display);font-size:clamp(1.6rem,4.4vw,3rem);line-height:1;
  letter-spacing:-.01em;transition:color .4s;
}
.book__cell:hover .book__num{color:var(--gold)}
.book__ico{
  width:46px;height:46px;border:1px solid var(--hair);border-radius:50%;
  display:grid;place-items:center;color:var(--gold);flex:none;
}
.book__ico svg{width:19px;height:19px;fill:currentColor}

/* ---------- 20. TÉRKÉP ------------------------------------ */
.map{
  position:relative;aspect-ratio:16/10;border:1px solid var(--hair-soft);overflow:hidden;background:var(--ink-3);
}
@media(max-width:700px){.map{aspect-ratio:4/5}}
.map iframe{
  width:100%;height:100%;border:0;
  filter:invert(.92) hue-rotate(155deg) saturate(.55) contrast(.92) brightness(.92);
  transition:filter .8s var(--e-out);
}
.map:hover iframe{filter:invert(.9) hue-rotate(150deg) saturate(.85) contrast(1) brightness(1)}
.map__pin{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  pointer-events:none;z-index:2;
}
.map__pin i{
  display:block;width:14px;height:14px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 0 rgba(212,175,84,.55);animation:pulse 2.4s infinite;
}
.map__badge{
  position:absolute;left:1rem;top:1rem;z-index:3;
  background:rgba(4,7,6,.82);backdrop-filter:blur(10px);
  border:1px solid var(--hair);padding:.7rem 1rem;
}

/* ---------- 21. NYITVATARTÁS ------------------------------ */
.hours{border-top:1px solid var(--hair-soft)}
.hours li{
  display:flex;justify-content:space-between;gap:1rem;align-items:center;
  padding-block:.82rem;border-bottom:1px solid var(--hair-soft);
  font-family:var(--f-mono);font-size:.82rem;letter-spacing:.08em;
  transition:color .35s,padding-left .45s var(--e-out);
}
.hours li:hover{padding-left:.5rem}
.hours li .d{text-transform:uppercase;color:var(--muted);letter-spacing:.18em;font-size:.7rem}
.hours li.is-today{color:var(--gold-lit)}
.hours li.is-today .d{color:var(--gold)}
.hours li.is-closed{color:var(--muted-2)}

/* ---------- 22. FOOTER ------------------------------------ */
.foot{border-top:1px solid var(--hair);padding-block:clamp(2.6rem,6vw,4.5rem) 2rem;position:relative;overflow:hidden}
.foot__word{
  font-family:var(--f-display);text-transform:uppercase;line-height:.8;
  padding-block:.36em .1em;margin-block:-.36em -.1em;
  font-size:clamp(3.4rem,17vw,14rem);letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1px rgba(212,175,84,.22);
  margin-block:clamp(1.6rem,4vw,3rem) clamp(1.2rem,3vw,2.4rem);
  white-space:nowrap;
}
.foot__grid{display:grid;gap:clamp(1.6rem,3vw,2.6rem);grid-template-columns:1fr}
@media(min-width:760px){.foot__grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){.foot__grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.foot h4{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);margin-bottom:1rem;font-weight:500;
}
.foot a:not(.soc):not(.btn){color:var(--muted);transition:color .3s}
.foot a:not(.soc):not(.btn):hover{color:var(--cream)}
.foot__bar{
  margin-top:clamp(2rem,4vw,3rem);padding-top:1.3rem;border-top:1px solid var(--hair-soft);
  display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;justify-content:space-between;align-items:center;
}

/* Közösségi ikonok */
.socs{display:flex;gap:.6rem;flex-wrap:wrap}
.soc{
  width:46px;height:46px;border:1px solid var(--hair);border-radius:50%;
  display:grid;place-items:center;color:var(--cream);position:relative;overflow:hidden;
  transition:color .4s,border-color .4s;
}
.soc svg{width:18px;height:18px;fill:currentColor;position:relative;z-index:1}
.soc::before{
  content:'';position:absolute;inset:0;background:var(--gold);
  transform:translateY(101%);transition:transform .5s var(--e-out);
}
.soc:hover{color:var(--ink);border-color:var(--gold)}
.soc:hover::before{transform:translateY(0)}

/* Lebegő gyors-sáv mobilra */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:850;
  display:flex;gap:1px;background:var(--hair-soft);
  border-top:1px solid var(--hair);
  transform:translateY(110%);transition:transform .6s var(--e-out);
}
.dock.on{transform:translateY(0)}
@media(min-width:1000px){.dock{display:none}}
.dock a{
  flex:1;background:rgba(6,11,9,.94);backdrop-filter:blur(12px);
  padding:.95rem .5rem;display:flex;flex-direction:column;align-items:center;gap:.3rem;
  font-family:var(--f-mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.dock a svg{width:17px;height:17px;fill:currentColor}
.dock a.hot{color:var(--ink);background:var(--gold)}

/* ---------- 23. ALOLDAL HERO ------------------------------ */
.phero{
  position:relative;min-height:78svh;display:flex;align-items:flex-end;
  padding-block:clamp(7rem,14vw,11rem) clamp(2rem,5vw,4rem);overflow:hidden;
}
.phero__bg{position:absolute;inset:0;z-index:-2;overflow:hidden;border-radius:var(--r-img)}
.phero__bg img{width:100%;height:100%;object-fit:cover;opacity:.34;filter:contrast(1.15) brightness(.8);border-radius:inherit}
.phero__bg::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(180deg,rgba(4,7,6,.94),rgba(4,7,6,.35) 45%,rgba(4,7,6,.98));
}
#page-canvas{position:absolute;inset:0;z-index:-1;width:100%;height:100%;opacity:0;transition:opacity 1.2s}
#page-canvas.ready{opacity:1}

/* ---------- 24. KOCKA-RÁCS (társasjátékok) ---------------- */

/* Fotó-háttér egy szekció mögé. A szélek felé teljesen beleolvad
   az oldal alapszínébe, így nincs látható vágás a szomszéd
   szekciók felé — a kép nem 'doboz', hanem hangulat.          */
.sec--bg{position:relative;isolation:isolate}
.secbg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.secbg picture{display:block;width:100%;height:100%}
.secbg img{
  width:100%;height:100%;object-fit:cover;
  opacity:.52;filter:contrast(1.08) brightness(.58) saturate(.74);
  transform:scale(1.04);
}
.secbg::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(112% 76% at 50% 40%,rgba(4,7,6,.40) 0%,rgba(4,7,6,.84) 100%),
    linear-gradient(180deg,var(--ink) 0%,rgba(4,7,6,.30) 19%,rgba(4,7,6,.34) 78%,var(--ink) 100%),
    linear-gradient(0deg,rgba(10,32,24,.40),rgba(10,32,24,.40));
}

/* A POLC — nincs rács és nincs doboz. A nevek egyetlen folyamként
   futnak végig a fotón, arany pontokkal elválasztva, és a felső
   sorból kategóriára lehet szűrni. Így a háttérben lévő dobozok
   végig látszanak a nevek között.                              */
.shelf{display:flex;flex-direction:column;gap:clamp(1.5rem,3vw,2.6rem)}

/* Szűrősor */
.shelf__filter{display:flex;flex-wrap:wrap;gap:.5rem}
.tagbtn{
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);background:transparent;cursor:pointer;
  border:1px solid var(--hair-soft);border-radius:999px;
  padding:.55em 1.05em;display:inline-flex;align-items:center;gap:.6em;
  transition:color .35s var(--e-out),border-color .35s var(--e-out),background-color .35s var(--e-out);
}
.tagbtn i{font-style:normal;color:var(--muted-2);font-size:.92em}
.tagbtn:hover{color:var(--cream);border-color:var(--hair)}
.tagbtn.is-on{color:var(--ink);background:var(--gold);border-color:var(--gold)}
.tagbtn.is-on i{color:rgba(4,7,6,.5)}

/* A névfolyam */
.shelf__flow{
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:.3em .8em;list-style:none;margin:0;padding:0;
}
.gitem{
  display:inline-flex;align-items:baseline;gap:.38em;
  font-family:inherit;font-weight:600;font-size:clamp(1.12rem,2.5vw,2.05rem);
  line-height:1.3;letter-spacing:-.012em;color:var(--cream);
  background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:left;
  transition:color .35s var(--e-out),filter .55s var(--e-out);
}
.gitem::after{
  content:'·';color:var(--gold);opacity:.55;margin-left:.8em;font-weight:400;
}
.gitem:last-of-type::after{content:none}
.gitem__m{
  font-family:var(--f-mono);font-weight:400;font-size:.34em;letter-spacing:.1em;
  color:var(--muted-2);align-self:flex-start;margin-top:.6em;white-space:nowrap;
  transition:color .35s var(--e-out);
}
.gitem__x{
  font-family:var(--f-mono);font-weight:500;font-size:.32em;letter-spacing:.1em;
  color:var(--gold);border:1px solid rgba(212,175,84,.45);border-radius:999px;
  padding:.3em .6em;align-self:flex-start;margin-top:.5em;
}
.gitem:hover,.gitem.is-open{color:var(--gold-lit)}
.gitem:hover .gitem__m,.gitem.is-open .gitem__m{color:var(--gold-dim)}
.gitem:focus-visible{outline:2px solid var(--gold);outline-offset:.25em;border-radius:2px}

/* A PULTTIPP — az egyetlen animáció a szekcióban, és az is válasz
   egy koppintásra. A grid-template-rows 0fr→1fr trükk azért kell,
   mert így a magasság JS-es méricskélés nélkül animálható.       */
.shelf__tip{
  display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .6s var(--e-out),opacity .45s var(--e-out);
}
.shelf__tip.is-open{grid-template-rows:1fr;opacity:1}
.shelf__tip > div{overflow:hidden;min-height:0}
.tip{
  border-left:2px solid var(--gold);
  padding:.2rem 0 .2rem clamp(1rem,2.2vw,1.6rem);
  display:flex;flex-direction:column;gap:.5rem;
}
.tip__s{font-size:clamp(1.02rem,1.5vw,1.32rem);line-height:1.5;color:var(--cream);font-weight:400}
.tip__m{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}

/* Tételenkénti beúszás — a nevek hullámban jelennek meg */
.g-in{opacity:0;transform:translateY(14px)}

/* A kiszűrtek nem tűnnek el, csak háttérbe lépnek — így végig
   látszik, mekkora a teljes kínálat. Nem opacity, hanem filter,
   mert az opacity-t a beúszó animáció felülírná.               */
.gitem.is-off{filter:opacity(.15) saturate(.4);pointer-events:none}
.gitem.is-off:hover{color:var(--cream)}

/* ---------- 24/b. TELJES SZÉLESSÉGŰ KÉPSÁV ---------------- */
/* Nem kártya és nem doboz: a kép a képernyő két széléig ér, a cím
   ráúszik. Levegővétel egy sűrű lista után.                    */
.bleed{
  position:relative;width:100%;
  min-height:clamp(21rem,46vw,33rem);
  margin-top:clamp(3rem,7vw,5.5rem);
  display:flex;align-items:flex-end;
  overflow:hidden;isolation:isolate;
}
.bleed picture{position:absolute;inset:-6% 0;z-index:-1;display:block}
.bleed img{width:100%;height:100%;object-fit:cover}
.bleed::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(0deg,rgba(4,7,6,.94) 0%,rgba(4,7,6,.62) 38%,rgba(4,7,6,.12) 72%),
    linear-gradient(90deg,rgba(4,7,6,.72),transparent 62%);
}
.bleed__body{
  position:relative;z-index:1;width:100%;
  padding-block:clamp(1.8rem,4.5vw,3.2rem);
}
.bleed__body .lead{max-width:34ch}
.chip{
  font-family:var(--f-mono);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--hair-soft);padding:.22em .6em;color:var(--muted);
}
.chip--hot{border-color:rgba(212,175,84,.4);color:var(--gold)}

/* Készítői hivatkozás a láblécben */
.foot__by{color:var(--muted-2)}
.foot__by a{color:#5AA9F0;transition:color .35s var(--e-out)}
.foot__by a:hover{color:#8CC6FA;text-decoration:underline}

/* Jogi hivatkozások a lábléc alsó sávjában */
.foot__legal{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem}
.foot__legal a{color:var(--muted);transition:color .35s var(--e-out)}
.foot__legal a:hover{color:var(--gold)}

/* ---------- 25. SEGÉD ------------------------------------- */
.grid-2{display:grid;gap:clamp(1.6rem,3.4vw,3.2rem);grid-template-columns:1fr}
@media(min-width:900px){.grid-2{grid-template-columns:1fr 1fr}}
.grid-3{display:grid;gap:clamp(1rem,2.4vw,2rem);grid-template-columns:1fr}
@media(min-width:700px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.stack{display:flex;flex-direction:column}
.gap-s{gap:.6rem}.gap-m{gap:1.1rem}.gap-l{gap:1.9rem}
.mt-s{margin-top:.8rem}.mt-m{margin-top:1.6rem}.mt-l{margin-top:clamp(2rem,4vw,3.4rem)}
.center{text-align:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nowrap{white-space:nowrap}

/* Kiemelt szám-blokk */
.stat{display:flex;flex-direction:column;gap:.3rem}
.stat b{font-family:var(--f-display);font-size:clamp(2rem,4.6vw,3.4rem);line-height:1;color:var(--gold-lit);font-weight:400}
/* Csak a KÖZVETLEN gyerek span a felirat. Leszarmazo szelektorral a
   <b> belsejeben levo szamlalo span-t is eltalalta, ezert lett apro a
   21 es az 5, mig a 03:00 (sima szoveg) nagy maradt.                */
.stat > span{font-family:var(--f-mono);font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* ---------- 26. CSÖKKENTETT MOZGÁS ------------------------ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .grain{display:none}
  .fade-up,.g-in{opacity:1;transform:none}
  .rv > *{transform:none!important}
}