/* =========================================================================
   Smart Square Productions — arculati stíluslap
   Minden szín tokenből jön (világos + sötét téma). Komponensben nincs
   literál színérték. A hat platformlogó eredeti fájl: kizárólag CSS-tálalás
   (die-cut matrica) illeszti őket a formanyelvhez, a fájlokhoz nem nyúlunk.
   ========================================================================= */

/* ---------- 1. tokenek ---------- */
:root{
  --bg:#EFF3F1;
  --surface:#FAFCFB;
  --plaza:#E1E9E6;
  --ink:#152836;
  --muted:#5A6B76;
  --line:#152836;
  --shadow:rgba(21,40,54,.9);
  --c-vp:#D9534E;
  --c-pod:#6F3D5E;
  --c-et:#3684D6;
  --c-int:#7D5CF0;
  --c-pro:#159C74;
  --c-ft:#EFA02E;
  --tint-vp:#F8E4E3; --tint-pod:#E9E2E7; --tint-et:#E1EDFA;
  --tint-int:#EAE4FC; --tint-pro:#DDF2EA; --tint-ft:#FBEED8;
  --eye-white:#FFFFFF;
  --eye-ink:#152836;   /* a pupilla mindkét témában sötét: fehér szemgolyón ül */
  /* --line = az ILLUSZTRÁCIÓ vonala (a jel, a logótálalás): marad tintaerős.
     --edge = a FELÜLET kerete (kártya, gomb, pirula): hajszálvékony, halk.
     A kettő szétválasztása teszi üzletiessé a lapot úgy, hogy a jel karaktere
     megmarad. A kemény matrica-árnyék helyett lágy, mély árnyék dolgozik. */
  --edge:rgba(21,40,54,.16);
  --edge-strong:rgba(21,40,54,.28);
  --sh-1:0 1px 2px rgba(21,40,54,.05), 0 4px 12px -6px rgba(21,40,54,.16);
  --sh-2:0 2px 4px rgba(21,40,54,.06), 0 12px 26px -12px rgba(21,40,54,.24);
  --sh-3:0 4px 10px rgba(21,40,54,.08), 0 26px 50px -20px rgba(21,40,54,.30);
  --die-cut:#FFFFFF;          /* a matricaszegély színe a sziluett mentén */
  --scrim:rgba(21,40,54,.62);  /* a kiemelt kártya mögötti fátyol */
  color-scheme:light;
}

/* sötét téma: rendszerbeállításból, ha a látogató nem választott kézzel */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0D1C29;
    --surface:#16293A;
    --plaza:#1D3347;
    --ink:#EAF1F5;
    --muted:#9DB0BC;
    --line:#EAF1F5;
    --shadow:rgba(0,0,0,.75);
    --c-vp:#E8736E; --c-pod:#C08BAE; --c-et:#5EA3E8;
    --c-int:#9D83F6; --c-pro:#2FBD93; --c-ft:#F5B558;
    --tint-vp:#3A2530; --tint-pod:#33242E; --tint-et:#1D3350;
    --tint-int:#2B2650; --tint-pro:#173A32; --tint-ft:#3E3120;
    --eye-white:#FDFDFB;
    --eye-ink:#0D1C29;
    --die-cut:#FDFDFB;
    --scrim:rgba(4,10,16,.72);
    --edge:rgba(234,241,245,.20);
    --edge-strong:rgba(234,241,245,.34);
    --sh-1:0 1px 2px rgba(0,0,0,.30), 0 4px 12px -6px rgba(0,0,0,.55);
    --sh-2:0 2px 4px rgba(0,0,0,.32), 0 12px 26px -12px rgba(0,0,0,.60);
    --sh-3:0 4px 10px rgba(0,0,0,.34), 0 26px 50px -20px rgba(0,0,0,.66);
    color-scheme:dark;
  }
}
/* sötét téma: kézi választás (a kapcsoló mindkét irányban nyer) */
:root[data-theme="dark"]{
  --bg:#0D1C29;
  --surface:#16293A;
  --plaza:#1D3347;
  --ink:#EAF1F5;
  --muted:#9DB0BC;
  --line:#EAF1F5;
  --shadow:rgba(0,0,0,.75);
  --c-vp:#E8736E; --c-pod:#C08BAE; --c-et:#5EA3E8;
  --c-int:#9D83F6; --c-pro:#2FBD93; --c-ft:#F5B558;
  --tint-vp:#3A2530; --tint-pod:#33242E; --tint-et:#1D3350;
  --tint-int:#2B2650; --tint-pro:#173A32; --tint-ft:#3E3120;
  --eye-white:#FDFDFB;
  --eye-ink:#0D1C29;
  --die-cut:#FDFDFB;
  --scrim:rgba(4,10,16,.72);
  --edge:rgba(234,241,245,.20);
  --edge-strong:rgba(234,241,245,.34);
  --sh-1:0 1px 2px rgba(0,0,0,.30), 0 4px 12px -6px rgba(0,0,0,.55);
  --sh-2:0 2px 4px rgba(0,0,0,.32), 0 12px 26px -12px rgba(0,0,0,.60);
  --sh-3:0 4px 10px rgba(0,0,0,.34), 0 26px 50px -20px rgba(0,0,0,.66);
  color-scheme:dark;
}

/* ---------- 2. alapok ---------- */
*{box-sizing:border-box}
html{overflow-x:hidden;scroll-behavior:smooth}
body{
  margin:0;
  /* FIGYELEM — ide ne kerüljön vissza az overflow-x:hidden.
     A html elemen már ott van, ez itt csak ismétlés volt, DE a body-n
     görgetőkonténert csinál, és ezzel kiütötte a position:sticky-t: a fejléc
     és az almenü sosem tapadt, pedig annak volt írva. */
  background:var(--bg);
  color:var(--ink);
  font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;
  text-wrap:balance;line-height:1.12;margin:0;font-weight:800;
}
p{margin:0}
img{max-width:100%}
a{color:inherit}
:where(a,button,[tabindex]):focus-visible{
  outline:3px solid var(--c-et);
  outline-offset:3px;
  border-radius:6px;
}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:1060px;margin:0 auto;padding:0 24px}
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--surface);color:var(--ink);
  padding:10px 16px;border:1px solid var(--edge);border-radius:0 0 14px 0;
}
.skip:focus{left:0}

/* ---------- 3. matrica-formanyelv ---------- */
.sticker{
  background:var(--surface);
  border:1px solid var(--edge);
  border-radius:12px;
  box-shadow:var(--sh-1);
}
.tag{
  display:inline-block;
  font-size:13.5px;font-weight:600;padding:5px 12px;
  border:1px solid var(--edge);border-radius:999px;
  background:var(--surface);box-shadow:var(--sh-1);
}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:14px;
}
.eyebrow::before{
  content:"";width:14px;height:14px;
  border:1px solid var(--edge);border-radius:4px;
  background:var(--eb,var(--plaza));display:inline-block;
}
.h2{font-size:clamp(26px,4vw,36px)}
.lede{color:var(--muted);max-width:56ch;font-size:17px}

section{padding:64px 0}
section + section{border-top:1px solid var(--edge)}
section[data-hue="vp"]{background:color-mix(in srgb, var(--c-vp) 4.5%, var(--bg))}
section[data-hue="pod"]{background:color-mix(in srgb, var(--c-pod) 4.5%, var(--bg))}
section[data-hue="et"]{background:color-mix(in srgb, var(--c-et) 4.5%, var(--bg))}
section[data-hue="int"]{background:color-mix(in srgb, var(--c-int) 4.5%, var(--bg))}
section[data-hue="pro"]{background:color-mix(in srgb, var(--c-pro) 4.5%, var(--bg))}
section[data-hue="ft"]{background:color-mix(in srgb, var(--c-ft) 5%, var(--bg))}

/* ---------- 4. logótálalás (die-cut) — a fájlokhoz nem nyúlunk ---------- */
.lg{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;
}
.lg img,.lg svg{
  width:100%;height:100%;display:block;object-fit:contain;
  filter:
    drop-shadow(1px 0 0 var(--die-cut)) drop-shadow(-1px 0 0 var(--die-cut))
    drop-shadow(0 1px 0 var(--die-cut)) drop-shadow(0 -1px 0 var(--die-cut))
    drop-shadow(0 2px 3px rgba(21,40,54,.22));
}
.lg img[alt^="VProperty"]{border-radius:50%}   /* körlogó: fehér sarkok levágása */
.lg img[alt^="Főtér"]{border-radius:26%}       /* lekerekített négyzet sziluett */
.lg .pill{
  position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:8px;
  letter-spacing:.06em;padding:2px 7px;border-radius:999px;
  background:color-mix(in srgb, var(--pc,var(--c-pod)) 82%, var(--ink));
  color:var(--surface);
  border:1px solid var(--edge);white-space:nowrap;line-height:1.2;
}

/* ---------- 5. fejléc ---------- */
.top{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--edge-strong);
}
.top .wrap{display:flex;align-items:center;gap:12px;height:64px;position:relative}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;
  font-family:"Bricolage Grotesque",sans-serif;font-size:16px;letter-spacing:-.01em;
  white-space:nowrap;flex:0 0 auto}   /* a márkanév egy sorban marad */
.brand svg{width:32px;height:32px;flex:0 0 auto}
.brand .sq{color:var(--c-et)}
.brand .brand-short{display:none}   /* fajsúly: a .mono később áll */

/* ---------- a rövidítés: S■P ----------
   A négyzet NEM karakter (a ◼ jelet több rendszer emoji-ként rajzolja és nem
   fogadja el a színt), hanem egy rajzolt doboz — így mindenhol azonos, és
   felveheti a mindenkori aktív platformszínt a --mc változón keresztül. */
.mono{
  font-family:"Bricolage Grotesque","Instrument Sans",sans-serif;
  font-weight:800;letter-spacing:-.02em;white-space:nowrap;
  display:inline-flex;align-items:baseline;gap:.06em;
}
.mono i{
  display:inline-block;flex:0 0 auto;
  width:.60em;height:.60em;margin:0 .08em;
  border:.055em solid var(--line);border-radius:.14em;
  background:var(--mc,var(--c-et));
  transform:translateY(.005em);
}
.top-nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.menu-sep{display:none}
.top-nav > a{
  font-family:"Bricolage Grotesque","Instrument Sans",sans-serif;
  text-decoration:none;font-size:15px;font-weight:700;letter-spacing:-.005em;
  color:color-mix(in srgb, var(--muted) 45%, var(--ink));
  padding:6px 11px;border-radius:999px;border:2.5px solid transparent;
  white-space:nowrap;          /* a menüfelirat soha nem törik két sorba */
}
.top-nav > a:hover{color:var(--ink);border-color:var(--line);background:var(--surface)}

/* A lap lényege: kiemelt gomb a fejlécben, minden szélességen látható.
   Tinta alapon világos szöveg — ez a fejléc egyetlen kitöltött eleme, ezért
   egyértelmű, hova kell kattintani. */
.cta-top{
  font-family:"Bricolage Grotesque","Instrument Sans",sans-serif;
  font-size:14.5px;font-weight:800;letter-spacing:-.005em;
  text-decoration:none;white-space:nowrap;
  background:var(--ink);color:var(--surface);
  border:1px solid var(--edge);border-radius:999px;
  padding:7px 15px;box-shadow:var(--sh-1);
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
}
.cta-top:hover{transform:translateY(-2px);box-shadow:var(--sh-1)}
.cta-top:active{transform:translateY(1px);box-shadow:var(--sh-1)}
.cta-top .ic{width:16px;height:16px;flex:0 0 auto}

/* Burger: csak szűk kijelzőn. A téma-gombbal azonos pirula, felirattal —
   a puszta három vonal önmagában túl halk volt. */
.burger{
  display:none;
  font-family:"Bricolage Grotesque","Instrument Sans",sans-serif;
  font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--ink);cursor:pointer;
  background:var(--surface);border:1px solid var(--edge);border-radius:999px;
  padding:5px 12px;box-shadow:var(--sh-1);
  align-items:center;gap:7px;flex:0 0 auto;
}
.burger .ic{width:16px;height:16px;display:block;flex:0 0 auto}
.burger:active{transform:translateY(1px);box-shadow:var(--sh-1)}
.top[data-menu="open"] .burger{background:var(--plaza);box-shadow:var(--sh-1);transform:translateY(1px)}
.burger .ic[hidden]{display:none}   /* SVG-n az [hidden] nem hat magától */
.theme-btn{
  font-family:"Bricolage Grotesque","Instrument Sans",sans-serif;
  font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--ink);cursor:pointer;
  background:var(--surface);border:1px solid var(--edge);border-radius:999px;
  padding:5px 12px;box-shadow:var(--sh-1);
  display:inline-flex;align-items:center;gap:7px;
}
.theme-btn:active{transform:translateY(1px);box-shadow:var(--sh-1)}
.theme-btn .ic{width:15px;height:15px;display:block}
/* az [hidden] a UA-stíluslapban csak HTML-elemekre hat, SVG-re nem */
.theme-btn .ic[hidden]{display:none}

/* ---------- 6. hero ---------- */
.hero{padding:72px 0 64px;position:relative;overflow:hidden}
.hero-grid{display:flex;gap:44px;align-items:center;flex-wrap:wrap;position:relative;z-index:1}
.hero-mark{flex:0 0 auto}
.hero-copy{flex:1 1 380px;min-width:280px}
.hero h1{font-size:clamp(38px,6vw,62px);letter-spacing:-.01em}
.hero h1 .sq{color:var(--c-et)}
.kicker{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-size:clamp(19px,2.6vw,24px);margin-top:14px;
}
.kicker em{font-style:normal;color:var(--muted);font-weight:600}
.hero .lede{margin-top:14px;max-width:52ch}
.hero-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.hero-tags .tag:nth-child(1){background:var(--tint-et)}
.hero-tags .tag:nth-child(2){background:var(--tint-ft)}
.hero-tags .tag:nth-child(3){background:var(--tint-pro)}
.hero-tags .tag:nth-child(4){background:var(--tint-int)}
.hero-tags .tag:nth-child(5){background:var(--tint-pod)}
.confetti{position:absolute;inset:0;pointer-events:none;z-index:0}
.confetti span{
  position:absolute;display:block;border-radius:3px;
  width:9px;height:9px;opacity:.5;
}
#mark{width:min(240px,58vw);height:auto;display:block}

/* ---------- 7. a tér: térkép ---------- */
/* minmax(0,1fr): enélkül egy hosszú szó vagy egy pirula szétfeszíti a hasábot,
   és a rács túllóg a lapon. Kis kijelzőn két hasáb — háromban a csempe 110 px
   lenne, amiben a nevek csúnyán törnek. */
.map-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:30px}
.block,.floor{
  position:relative;text-align:left;font:inherit;color:inherit;cursor:pointer;
  display:flex;flex-direction:column;justify-content:flex-end;gap:6px;
  background:var(--bt);
}
.block{
  min-height:142px;padding:16px 14px 14px;
  border:1px solid var(--edge);border-radius:12px;
  box-shadow:var(--sh-1);
  transition:transform .15s ease, box-shadow .15s ease;
}
/* A kártyák nem dőlnek: az üzleti hangnem egyenes rácsot kíván. */
.block:hover,.block:focus-visible{transform:translateY(-3px);box-shadow:var(--sh-2)}
.block:focus-visible,.floor:focus-visible{outline:3px solid var(--c-et);outline-offset:3px}
.block[aria-pressed="true"]{box-shadow:var(--sh-2), inset 0 0 0 1.5px var(--bc)}
.bn{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:16.5px;line-height:1.2}
.bd{font-size:13px;color:var(--muted);line-height:1.35}
.dot{
  position:absolute;top:12px;right:12px;width:14px;height:14px;border-radius:5px;
  border:1px solid var(--edge);background:var(--bc);
}
.block .lg{width:48px;height:48px}
.floor .lg{width:42px;height:42px}

/* A ház (tetővel és több lakóval) jelenleg nincs használatban: a podcast külön
   kártyát kapott, és egyetlen lakó fölött a tetőfelirat csak ismételte a nevet.
   A szabályok itt maradnak — ha egyszer újra két lakó kerül egy épületbe,
   elég a <div class="house"> visszatétele az index.html-be. */
.house{
  display:flex;flex-direction:column;
  background:var(--surface);
  border:1px solid var(--edge);border-radius:12px;
  box-shadow:var(--sh-1);
  overflow:hidden;
}
.house .roof{
  padding:8px 14px;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;
  background:color-mix(in srgb, var(--c-vp) 82%, var(--ink));
  color:var(--surface);
  border-bottom:1px solid var(--edge);
}
.floor{flex:1;border:0;padding:14px;min-height:104px}
.floor + .floor{border-top:1px solid var(--edge)}
.floor:hover{box-shadow:inset 6px 0 0 var(--bc)}
.floor:focus-visible{outline-offset:-4px}
.floor[aria-pressed="true"]{box-shadow:inset 6px 0 0 var(--bc);background:color-mix(in srgb, var(--bc) 16%, var(--bt))}
.floor .bn{font-size:15.5px}
.floor .bd{font-size:12.5px}
.floor .dot{top:10px;right:12px;width:13px;height:13px}

/* Áruházi jelzés a csempén: kattintás nélkül is látszik, hogy letölthető.
   Nem link (a csempe gomb, linket nem tartalmazhat) — a valódi hivatkozás a
   megnyitott kártyában van. JS rakja ki, és csak akkor, ha tényleg van link. */
.store-tag{
  display:none;align-items:center;gap:5px;align-self:flex-start;margin-top:9px;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);background:var(--surface);
  border:1px solid var(--edge);border-radius:999px;padding:3px 9px 3px 7px;
}
.store-tag.on{display:inline-flex}
.store-tag svg{width:11px;height:11px;flex:0 0 auto;fill:currentColor}

/* ---------- videós csempe: mozgó kirakat ----------
   A videó kattintás nélkül, némán, ismétlődve fut a téren — ez a tér „hangja".
   A szöveg olvashatóságát alulról sűrülő fátyol biztosítja, nem áttetszőség:
   így a kontraszt állandó és mérhető, akármi van épp a képen.
   Csak akkor játszik, amikor látszódik (lásd ssp.js), és mozgáscsökkentés
   esetén meg sem indul — olyankor a borítókép áll. */
.has-video{position:relative;isolation:isolate;overflow:hidden;padding:14px}
.block.has-video{border-color:rgba(255,255,255,.14)}
.block.has-video:hover,.block.has-video:focus-visible{
  transform:translateY(-3px);box-shadow:var(--sh-2), inset 0 0 0 2px var(--bc);
}
.has-video .tile-media{position:absolute;inset:0;z-index:-2;background:#151428;pointer-events:none}
.has-video .tile-media video,
.has-video .tile-media img{width:100%;height:100%;object-fit:cover;display:block}
.has-video::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,
    rgba(9,12,20,.93) 0%, rgba(9,12,20,.88) 36%, rgba(9,12,20,.58) 64%, rgba(9,12,20,.30) 100%);
}
.has-video .bn{color:#FFFFFF}
.has-video .bd{color:rgba(255,255,255,.84)}
.has-video .dot{border-color:rgba(255,255,255,.5)}
.has-video:hover,.has-video:focus-visible{box-shadow:inset 0 0 0 2px var(--bc)}
.has-video[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--bc);background:none}
/* apró jelzés, hogy ez mozgókép */
.has-video .live{
  position:absolute;top:10px;left:12px;z-index:1;pointer-events:none;
  display:inline-flex;align-items:center;gap:6px;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:#FFFFFF;background:rgba(9,12,20,.58);
  border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:3px 8px 3px 6px;
}
.has-video .live i{
  width:5px;height:5px;border-radius:50%;background:var(--c-pod);display:block;flex:0 0 auto;
}

/* A tér közepe nem díszítés: ez maga a Smart Square Productions — a hat lakó
   mögötti műhely. Korábban „a főtér" felirat állt itt, ami ütközött a Főtér
   nevű platformmal (foter.eu): két különböző dolgot hívtunk ugyanúgy. */
.plaza{
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;
  text-align:center;
  background:var(--plaza);
  border:1px solid var(--edge);border-radius:14px;
  box-shadow:inset 0 1px 3px rgba(21,40,54,.10);
  min-height:142px;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:14px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.plaza .pn{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;
  font-size:15px;letter-spacing:.01em;text-transform:none;color:var(--ink);
  line-height:1.18;max-width:22ch;
}
.plaza .pn b{color:var(--c-et);font-weight:800}
.plaza .ps{
  font-family:"Instrument Sans",sans-serif;font-weight:400;
  font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--muted);
  line-height:1.35;max-width:26ch;
}
.plaza svg{width:56px;height:56px}
.map-hint{margin-top:18px;font-size:14.5px;color:var(--muted)}

/* ---------- 7/b. almenü ----------
   Egy szakaszlapon belüli navigáció. Ragadós, közvetlenül a fejléc alatt ül
   (a fejléc 65 px), és keskeny kijelzőn vízszintesen csúsztatható, hogy a négy
   pont soha ne törjön két sorba. */
.subnav{
  position:sticky;top:65px;z-index:40;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--edge);
}
.subnav .wrap{
  display:flex;gap:8px;align-items:center;
  padding-top:9px;padding-bottom:9px;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.subnav .wrap::-webkit-scrollbar{display:none}
.subnav a{
  flex:0 0 auto;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:14px;
  color:var(--muted);text-decoration:none;white-space:nowrap;
  padding:6px 13px;border-radius:999px;border:1px solid transparent;
  transition:color .15s ease, background .15s ease, border-color .15s ease;
}
.subnav a:hover,.subnav a:focus-visible{color:var(--ink);background:var(--plaza);border-color:var(--edge)}
.subnav a:focus-visible{outline:3px solid var(--c-et);outline-offset:2px}
/* Keskeny kijelzőn kisebb pirulák, hogy a négy pontból minél több látszódjon
   elsőre. A sáv csúsztatható marad — a levágott negyedik pont maga jelzi, hogy
   van tovább. */
@media (max-width:560px){
  .subnav .wrap{gap:5px;padding-top:8px;padding-bottom:8px}
  .subnav a{font-size:13px;padding:5px 10px}
}
/* A horgonyra ugrás ne csússzon a ragadós sávok alá. Most, hogy a fejléc
   valóban tapad (65 px), a horgonynak ennyit kell hagynia — ahol almenü is
   van, ott a kettő összegét. */
:target{scroll-margin-top:81px}
.subnav ~ section:target{scroll-margin-top:126px}

/* ---------- 8. kiemelt kártya (spotlight) ---------- */
.scrim{
  position:fixed;inset:0;z-index:50;
  background:var(--scrim);
  backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  opacity:0;transition:opacity .18s ease;
}
.scrim[hidden]{display:none}
.scrim.is-open{opacity:1}
.spot{
  background:var(--bt,var(--surface));
  border:1px solid var(--edge);border-left:4px solid var(--bc,var(--c-et));
  border-radius:14px;
  box-shadow:var(--sh-3);
  width:min(620px,100%);
  max-height:min(88vh,760px);
  overflow-y:auto;
  padding:26px 28px 28px;
  position:relative;
  transform:scale(.9);opacity:0;
  transition:transform .2s cubic-bezier(.2,.9,.3,1.2), opacity .2s ease;
}
.scrim.is-open .spot{transform:scale(1);opacity:1}
.spot-close{
  position:absolute;top:14px;right:14px;
  width:36px;height:36px;line-height:1;cursor:pointer;
  font:inherit;font-size:18px;font-weight:700;color:var(--ink);
  background:var(--surface);border:1px solid var(--edge);border-radius:10px;
  box-shadow:var(--sh-1);
  display:flex;align-items:center;justify-content:center;
}
.spot-close:active{transform:translateY(1px);box-shadow:var(--sh-1)}
.spot-head{display:flex;gap:18px;align-items:flex-start;padding-right:44px}
.spot-head .lg{width:76px;height:76px}
.spot-head .lg .pill{font-size:10px;bottom:-10px}
.spot-role{
  font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);
}
.spot h3{font-size:clamp(24px,4vw,30px);margin-top:2px}
.spot-url{font-size:14.5px;font-weight:600;color:var(--muted);letter-spacing:.02em;margin-top:2px}
/* Videó a kiemelt kártyában (podcast-intró).
   16:9 arány, hajszálkeret és lágy árnyék — ugyanaz a nyelv, mint a többi
   felületé. A bal oldali platformszínű sávval nem ütközik, mert a panelen
   belül áll. A lejátszó a bezáráskor leáll (lásd ssp.js). */
.spot-video{
  margin-top:18px;
  border:1px solid var(--edge);border-radius:12px;
  box-shadow:var(--sh-1);
  overflow:hidden;
  background:color-mix(in srgb, var(--ink) 88%, var(--bc,var(--c-et)));
  line-height:0;
}
.spot-video video{
  display:block;width:100%;height:auto;aspect-ratio:16/9;
  background:inherit;
}
.spot-video:empty{display:none}

.spot-desc{margin-top:16px;max-width:60ch}
.spot-quote{
  margin-top:14px;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-size:19px;color:color-mix(in srgb, var(--bc) 70%, var(--ink));
  border-left:4px solid var(--bc);padding-left:12px;
}
.spot-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:15.5px;
  text-decoration:none;cursor:pointer;
  padding:11px 18px;border-radius:12px;
  border:1px solid var(--edge);
  background:var(--surface);color:var(--ink);
  box-shadow:var(--sh-1);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn:active{transform:translateY(1px);box-shadow:var(--sh-1)}
.btn-primary{
  background:color-mix(in srgb, var(--bc) 78%, var(--ink));
  color:var(--btn-fg,#FFFFFF);
}
.btn .ic{width:18px;height:18px;flex:0 0 auto}
.btn-store{font-size:14px;padding:9px 15px;line-height:1.15;flex-direction:row}
.btn-store b{display:block;font-size:15px}
.btn-store small{display:block;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.btn[aria-disabled="true"]{
  cursor:not-allowed;opacity:.55;box-shadow:none;
  border-style:dashed;
}
.btn[aria-disabled="true"]:hover{transform:none;box-shadow:var(--sh-1)}
.spot-note{margin-top:12px;font-size:13.5px;color:color-mix(in srgb, var(--muted) 65%, var(--ink))}

/* ---------- 9. kártyasorok, mozaikok ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:28px}
.card{padding:22px 24px}
.card h3{font-size:17.5px;font-weight:700;margin-bottom:6px}
.card p{font-size:15px;color:var(--muted)}
.card .ex{
  margin-top:12px;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-size:15.5px;color:var(--ink);
}
.badges{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:18px;margin-top:28px}
.badge{
  padding:18px 14px;display:flex;flex-direction:column;align-items:center;gap:10px;
  text-align:center;background:var(--bt2,var(--surface));text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease;
}
a.badge:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.badge .lg{width:58px;height:58px}
.badge .bn{font-size:15px}
.badge .role{font-size:12.5px;color:var(--muted)}
.note{margin-top:24px;padding:18px 22px;font-size:15.5px;color:var(--muted)}
.note strong{color:var(--ink)}
.lockup-demo{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;color:var(--ink)}
.lockup-demo .host{color:var(--muted);font-weight:600;font-size:.85em}
.logo-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px;margin-top:28px}
.logo-card{padding:26px 20px;text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center}
.logo-card .cap{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.05em;text-transform:uppercase}
.monogram{font-size:44px;line-height:1}

/* a rövidítés bemutatása a hero-ban */
.short-name{
  display:inline-flex;align-items:center;gap:10px;margin-top:18px;
  padding:7px 14px 7px 12px;
  background:var(--surface);border:1px solid var(--edge);border-radius:999px;
  box-shadow:var(--sh-1);
  font-size:14px;font-weight:600;color:var(--muted);
}
.short-name .mono{font-size:20px;color:var(--ink)}
.short-name b{color:var(--ink);font-weight:600}

/* a lábléc a rövidítéssel nyit */
footer .sign{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
footer .sign .mono{font-size:20px;color:var(--ink)}

/* ---------- 10. lábléc ---------- */
footer{padding:44px 0 56px;color:var(--muted);font-size:14px;border-top:1px solid var(--edge)}
footer .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center}
footer a{font-weight:600}
footer .links{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- 11. mozgásérzékenység és mobil ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition:none !important;animation:none !important}
  .scrim{opacity:1}
  .spot{transform:none;opacity:1}
}
@media (max-width:760px){
  section{padding:52px 0}
}
/* 900 px alatt a menü legördülő panelbe költözik. A sávban marad a jel,
   a kiemelt gomb és a burger — így a lap lényege mobilon is egy koppintás. */
@media (max-width:900px){
  .burger{display:inline-flex}
  .cta-top{margin-left:auto}
  .top-nav{
    position:absolute;top:100%;left:0;right:0;z-index:45;
    margin:0;flex-direction:column;align-items:stretch;gap:6px;
    background:var(--surface);
    border-bottom:1px solid var(--edge);
    box-shadow:var(--sh-2);
    padding:16px 24px 20px;
    display:none;
  }
  .top[data-menu="open"] .top-nav{display:flex}
  .top-nav > a{
    font-size:17.5px;padding:12px 14px;border-radius:12px;
    background:var(--plaza);border-color:transparent;color:var(--ink);
  }
  .top-nav > a:hover{border-color:var(--line);background:var(--plaza)}
  .menu-sep{
    display:block;height:0;margin:8px 2px 2px;
    border-top:1px solid var(--edge);
  }
  .top-nav .lang,.top-nav .theme-btn{align-self:flex-start}
}
@media (max-width:640px){
  /* A csempe TÖRZSE mobilon is ugyanaz, mint weben: logó · név · leírás.
     Korábban a leírás el volt rejtve, ettől a kártya fölött nagy üres folt
     maradt, és a csempe „félkésznek" látszott. Most csak kisebb a szedés. */
  .map-grid{gap:12px}
  .store-tag{font-size:9.5px;padding:2px 8px 2px 6px;letter-spacing:.04em;margin-top:7px}
  .block{min-height:158px;padding:12px 11px 11px;gap:4px}
  .bn{font-size:14.5px;line-height:1.18}
  .bd{font-size:11.5px;line-height:1.32}
  .floor{min-height:82px;padding:10px}
  .plaza{min-height:158px}
  .plaza svg{width:42px;height:42px}
  /* A logó nagyobb: 40 px-en a VProperty körlogójában a felirat olvashatatlan
     folttá esett össze, a fehér matricaszegély pedig gyűrűnek látszott.
     Ezért itt vékonyabb a szegély és nagyobb a jel. */
  .block .lg{width:48px;height:48px}
  .block .lg img{filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
  .floor .lg{width:36px;height:36px}
  .scrim{padding:0;align-items:flex-end}
  .spot{
    width:100%;max-width:none;max-height:92vh;
    border-radius:14px 20px 0 0;border-left-width:3px;border-top:3px solid var(--bc);
    box-shadow:0 -12px 30px -10px rgba(21,40,54,.28);
  }
  .spot-head{gap:14px}
  .spot-head .lg{width:60px;height:60px}
  .btn{width:100%;justify-content:center}
}

/* Mobilon is a KÖR marad: hat lakó a tér körül, ugyanaz az elrendezés, mint
   weben. Korábban két hasábra bontottam, attól sorrenddé esett szét, és
   elveszett a „tér" képe. Itt csak a csempe zsugorodik, a rend nem. */
@media (max-width:560px){
  .map-grid{gap:9px}
  .block{min-height:118px;padding:9px 8px 8px;gap:2px}
  .block .lg{width:34px;height:34px}
  .bn{font-size:11.5px;line-height:1.15;letter-spacing:-.01em;
      overflow-wrap:anywhere;hyphens:auto}
  /* A leírás megmarad, de három sor után elvágjuk — 106 px széles csempén
     enélkül hat sorra nyúlna és kitolná a rácsot. A teljes szöveg a
     megnyitott kártyában olvasható. */
  .bd{
    font-size:10.5px;line-height:1.28;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
    overflow:hidden;
  }
  /* Az áruházi jelzésnek itt csak az ikonja fér el; a nevét a képernyőolvasó
     a title-ből kapja, a teljes gomb pedig a megnyitott kártyában van. */
  .store-tag{font-size:0;padding:3px 5px;gap:0;margin-top:6px}
  .store-tag svg{width:12px;height:12px}
  .plaza{min-height:118px;gap:5px;padding:8px}
  .plaza svg{width:34px;height:34px}
  .plaza .pn{font-size:10.5px;line-height:1.15}
  .plaza .ps{display:none}
  .dot{width:11px;height:11px;top:8px;right:8px}
  .has-video .live{font-size:8.5px;padding:2px 6px 2px 5px;top:7px;left:8px}
}

/* ---------- 12. arculati oldal (arculat.html) ---------- */
.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;margin-top:28px}
.sw{padding:0;overflow:hidden}
.sw .chip{height:86px;border-bottom:1px solid var(--edge);background:var(--sc)}
.sw .meta{padding:12px 14px}
.sw .nm{font-weight:700;font-size:15px}
.sw .hx{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.type-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:28px}
.type-card{padding:26px 28px}
.type-card .cap{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.type-card .demo-d{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:34px;line-height:1.15;margin-top:10px}
.type-card .demo-b{font-size:17px;margin-top:10px}
.type-card .pang{margin-top:14px;font-size:14px;color:var(--muted)}
pre.code{
  margin-top:20px;padding:18px 20px;overflow-x:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.55;
  background:var(--plaza);border:1px solid var(--edge);border-radius:14px;
  box-shadow:var(--sh-1);
}
.todo{display:grid;gap:14px;margin-top:28px}
.todo li{list-style:none;padding:16px 20px}
.todo .who{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.todo h3{font-size:16.5px;font-weight:700;margin:4px 0 6px}
.todo p{font-size:15px;color:var(--muted)}

/* ---------- 13. a műhely: terméképítés ----------
   Ez az ernyőmárka saját szolgáltatása, nem a hat lakó egyike, ezért nem kap
   platformszínt: a tér kövén (--plaza) áll, és a tinta rajzolja. A hat szín
   csak bizonyítékként, apró pöttyökben jelenik meg benne. */
.workshop{background:var(--plaza)}
.workshop .lede{max-width:60ch}
.claim{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-size:clamp(17px,2.2vw,20px);margin-top:18px;
}
.steps{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));gap:18px;margin-top:30px;
  counter-reset:step;
}
.step{padding:20px 22px 22px;position:relative;overflow:hidden}
.step .n{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:46px;line-height:1;
  color:color-mix(in srgb, var(--ink) 22%, var(--surface));
  font-variant-numeric:tabular-nums;
}
.step h3{font-size:17.5px;font-weight:700;margin-top:6px}
.step p{font-size:15px;color:var(--muted);margin-top:6px}

.proof{
  margin-top:28px;padding:20px 24px;display:flex;gap:18px;align-items:center;flex-wrap:wrap;
  background:var(--surface);
}
.proof .dots{display:flex;gap:7px;flex:0 0 auto}
.proof .dots i{width:15px;height:15px;border-radius:5px;border:1px solid var(--edge);display:block}
.proof p{flex:1 1 300px;font-size:15.5px}
.proof strong{font-weight:700}

.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.btn-ink{background:var(--ink);color:var(--surface);border-color:var(--line)}
.btn-quiet{background:transparent;box-shadow:none;border-color:var(--edge-strong)}
.btn-quiet:hover{background:var(--surface);box-shadow:var(--sh-1)}

/* kétoldalas lista: kinek igen, kinek nem */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:28px}
.list{padding:22px 24px}
.list h3{font-size:17px;font-weight:700;margin-bottom:12px}
.list ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.list li{display:flex;gap:10px;font-size:15.5px;color:var(--muted);line-height:1.45}
.list li b{color:var(--ink);font-weight:600}
.list .mk{
  flex:0 0 auto;width:21px;height:21px;border-radius:6px;border:1px solid var(--edge);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;
  color:var(--ink);margin-top:1px;
}
.list.yes .mk{background:var(--tint-pro)}
.list.no .mk{background:var(--tint-vp)}

/* szakasz-részletek az aloldalon */
.phase{padding:24px 26px;display:grid;gap:6px}
.phase + .phase{margin-top:18px}
.phase .meta{
  font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
}
.phase .meta .num{
  display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;
  border:1px solid var(--edge);border-radius:8px;background:var(--plaza);
  font-size:13px;letter-spacing:0;font-variant-numeric:tabular-nums;color:var(--ink);
}
.phase h3{font-size:20px;font-weight:800}
.phase p{color:var(--muted)}
.phase .out{
  margin-top:8px;padding-top:12px;font-size:15px;
  border-top:1px solid var(--edge);
}
.phase .out b{font-weight:700}

/* ---------- 14. esettanulmányok ----------
   Kártyánként egy lakó: a bal szélén a saját platformszíne, a fejlécben az
   eredeti logó die-cut tálalásban. A törzs három hasáb: az ötlet, a megépített
   dolog, és ami lett belőle. Egy lakó = egy szín, a 4.2/2. szabály szerint. */
.cases{display:grid;gap:22px;margin-top:30px}
.case{
  padding:0;overflow:hidden;
  border-left:4px solid var(--bc,var(--c-et));
  background:var(--surface);
}
.case-head{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:18px 24px;
  background:var(--bt2,var(--tint-et));
  border-bottom:1px solid var(--edge);
}
.case-head .lg{width:52px;height:52px}
.case-head .bn{font-size:19px}
.case-head .role{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.case-head .yr{
  margin-left:auto;font-size:13px;font-weight:600;color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.case-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0}
.case-body > div{padding:20px 24px}
.case-body > div + div{border-left:1px solid var(--edge)}
.case-body h4{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:12.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 8px;
}
.case-body p{font-size:15.5px;color:var(--muted);line-height:1.5}
.case-body b{color:var(--ink);font-weight:600}
.case-line{
  padding:16px 24px 20px;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-size:17px;color:color-mix(in srgb, var(--bc) 62%, var(--ink));
  border-top:1px solid var(--edge);
}
@media (max-width:760px){
  .case-body > div + div{border-left:0;border-top:1px solid var(--edge)}
  .case-head .yr{margin-left:0;width:100%}
}

/* ---------- 15. árcsomagok ----------
   Három sáv. A középső a hangsúlyos: vastagabb árnyék és tintakeretes fejléc.
   Az összegek helye a .amount elem — ott egyetlen sort kell átírni. */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:30px;align-items:start}
/* Négy sávos árazás (podcast lap): 2×2. A hármas rácsban a negyedik kártya
   magára maradt egy üres sorban — a párba rendezés kiegyensúlyozza, és a
   hatpontos „Indítás" kártyának is több hely jut. */
@media (min-width:760px){
  .tiers.four{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.tier{padding:24px 24px 26px;display:flex;flex-direction:column;gap:10px;background:var(--surface)}
.tier.is-main{box-shadow:var(--sh-2)}
.tier .cap{
  font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.tier h3{font-size:21px;font-weight:800}
.tier .amount{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;
  font-size:clamp(22px,3.4vw,28px);line-height:1.15;font-variant-numeric:tabular-nums;
  color:var(--ink);
}
.tier .amount small{display:block;font-size:13.5px;font-weight:600;color:var(--muted);letter-spacing:0;margin-top:4px}
.tier ul{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.tier li{display:flex;gap:10px;font-size:15px;color:var(--muted);line-height:1.45}
.tier li::before{
  content:"";flex:0 0 auto;width:13px;height:13px;margin-top:5px;border-radius:4px;
  border:1px solid var(--edge);background:var(--tc,var(--plaza));
}
.tier .foot{
  margin-top:auto;padding-top:14px;font-size:13.5px;color:var(--muted);
  border-top:1px solid var(--edge);
}

/* ---------- 16. kapcsolat ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:28px}
.contact-card{padding:22px 24px;display:flex;flex-direction:column;gap:8px;background:var(--surface)}
.contact-card .cap{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.contact-card .val{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:19px;
  word-break:break-word;
}
.contact-card p{font-size:14.5px;color:var(--muted)}
.checklist{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.checklist li{display:flex;gap:10px;font-size:15px;color:var(--muted);line-height:1.45}
.checklist li b{color:var(--ink);font-weight:600}
/* „Amit nem ígérek" felsorolás: szándékosan bekezdés, nem lista. A .checklist
   rugalmas sora szétvágná a félkövér nyitást és a mögötte lévő magyarázatot. */
/* „Amit nem ígérek": egyszerű, egy hasábos doboz. A .proof rácsába nem való,
   az a szereplők pontjaihoz készült, és két hasábba tördelné a mondatokat. */
.nope-box{margin-top:28px;padding:22px 24px}
.nope-box h3{
  font-family:"Bricolage Grotesque",sans-serif;font-size:18px;font-weight:700;
  color:var(--ink);margin:0 0 12px;
}
.nope{margin:0 0 10px;font-size:15px;color:var(--muted);line-height:1.5;max-width:80ch}
.nope:last-child{margin-bottom:0}
.nope strong{color:var(--ink);font-weight:700}
.checklist .n{
  flex:0 0 auto;width:22px;height:22px;border-radius:7px;border:1px solid var(--edge);
  background:var(--tint-pro);color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:1px;
}

/* ---------- 17. nyelvváltó ----------
   Egyetlen pirula, ami a MÁSIK nyelvre visz — nem kétszeletes kapcsoló.
   Ok: a kétszeletes változatban a kijelölt szelet szögletes kitöltése ült egy
   ovális kereten belül — kocka a pirulában. A pirula pontosan a téma-gomb
   formája és mérete, így a fejléc jobb sarka két egyforma gomb. */
.lang{
  font-family:"Bricolage Grotesque","Instrument Sans",sans-serif;
  font-size:14px;font-weight:700;letter-spacing:.02em;
  color:var(--ink);text-decoration:none;
  background:var(--surface);border:1px solid var(--edge);border-radius:999px;
  padding:5px 12px;box-shadow:var(--sh-1);
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
}
.lang:hover{background:var(--plaza)}
.lang:active{transform:translateY(1px);box-shadow:var(--sh-1)}
.lang .ic{width:15px;height:15px;display:block;flex:0 0 auto}
@media (max-width:560px){
  /* Kis kijelzőn a teljes név helyett a rövidítés áll — a márka így nem tűnik
     el a fejlécből, és a látogató menet közben megtanulja az S■P jelet. */
  .top .wrap{gap:8px}
  .brand-full{display:none}
  .brand .brand-short{display:inline-flex;font-size:19px}
  .burger{padding:7px 10px}
  .burger [data-burger-label]{display:none}
  .cta-top{font-size:14px;padding:7px 13px}
  .cta-top .ic{display:none}
}

/* gyakori kérdések */
.faq{display:grid;gap:14px;margin-top:28px}
.faq details{padding:0 24px}
.faq summary{
  cursor:pointer;list-style:none;padding:18px 0;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:17px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";font-size:22px;font-weight:700;line-height:1;color:var(--muted);flex:0 0 auto;
}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{padding-bottom:10px}
.faq .answer{padding-bottom:20px;color:var(--muted);max-width:64ch}
.faq summary:focus-visible{outline:3px solid var(--c-et);outline-offset:3px;border-radius:8px}

/* ---------- 18. napló: timeline ----------
   A bejegyzések egy függőleges gerincre vannak felfűzve. A gerinc nem
   díszítés: az időrendet mutatja meg egyetlen pillantásra, és az évszámok
   rajta ülnek. Asztali nézetben a gerinc balra van, a kártyák mellette —
   szándékosan NEM cikkcakkban, mert a felváltva jobbra-balra ugró elrendezés
   olvasás közben oda-vissza küldi a szemet.

   A kártya EGÉSZE hivatkozás (.tl-link), ezért a címkék azon KÍVÜL vannak:
   hivatkozás hivatkozáson belül nem lehet. */
.tl{list-style:none;margin:26px 0 0;padding:0;position:relative}
.tl::before{
  content:"";position:absolute;left:11px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg, transparent, var(--edge) 8%, var(--edge) 92%, transparent);
}
.tl-szam{
  margin:0;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);font-variant-numeric:tabular-nums;
}

/* évszám a gerincen */
.tl-ev{position:relative;padding:22px 0 10px 46px;list-style:none}
.tl-ev span{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:15px;
  color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.04em;
  background:var(--bg);padding:2px 10px;border-radius:999px;border:1px solid var(--edge);
}
.tl-ev::before{
  content:"";position:absolute;left:4px;top:50%;width:16px;height:16px;
  margin-top:-2px;border-radius:50%;background:var(--bg);border:2px solid var(--edge);
}

/* egy bejegyzés */
.tl-elem{position:relative;padding:0 0 18px 46px;list-style:none}
.tl-pont{
  position:absolute;left:5px;top:26px;width:14px;height:14px;border-radius:50%;
  background:var(--plaza);border:2px solid var(--c-pod);box-shadow:0 0 0 4px var(--bg);
}
.tl-elem.is-featured .tl-pont{background:var(--c-pod)}

.tl-kartya{overflow:hidden;transition:transform .16s ease, box-shadow .16s ease}
.tl-kartya:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.tl-elem.is-featured .tl-kartya{border-color:var(--edge-strong);box-shadow:var(--sh-2)}

.tl-link{
  display:grid;grid-template-columns:190px minmax(0,1fr);gap:0;
  text-decoration:none;color:inherit;position:relative;
}
.tl-link:focus-visible{outline:3px solid var(--c-et);outline-offset:-3px;border-radius:12px}
.tl-kep{
  display:block;width:100%;height:100%;min-height:132px;object-fit:cover;
  background:var(--plaza);border-right:1px solid var(--edge);
}
/* lejátszásjel a borítón: jelzi, hogy videó tartozik hozzá */
.tl-jatek{
  position:absolute;left:95px;top:50%;transform:translate(-50%,-50%);
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb, var(--bg) 74%, transparent);
  border:1px solid var(--edge-strong);color:var(--ink);
  backdrop-filter:blur(3px);pointer-events:none;
}
.tl-jatek svg{width:17px;height:17px;margin-left:2px}

.tl-torzs{padding:16px 20px 15px;min-width:0}
.tl-meta{
  margin:0;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;
  display:flex;flex-wrap:wrap;gap:7px;align-items:baseline;
}
.tl-meta .sep{opacity:.5}
.tl-cim{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-size:19px;line-height:1.24;margin:7px 0 0;color:var(--ink);
  overflow-wrap:anywhere;
}
.tl-kartya:hover .tl-cim{color:var(--c-pod)}
.tl-bev{margin:7px 0 0;font-size:14.5px;color:var(--muted);line-height:1.5}
.tl-tovabb{
  display:inline-flex;align-items:center;gap:6px;margin-top:11px;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:13.5px;
  color:var(--ink);
}
.tl-tovabb .ic{width:15px;height:15px;transition:transform .16s ease}
.tl-kartya:hover .tl-tovabb .ic{transform:translateX(3px)}

.tl-cimkek{display:flex;flex-wrap:wrap;gap:6px;padding:0 20px 15px}
.tl-cimkek:empty{display:none}
.tg{
  font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink);background:var(--tg,var(--plaza));
  border:1px solid var(--edge);border-radius:999px;padding:3px 9px;
}

/* üres állapot: őszinte, nem kitalált bejegyzésekkel feltöltött */
.tl-ures{margin-top:26px;padding:30px 26px;text-align:center}
.tl-ures h2{font-family:"Bricolage Grotesque",sans-serif;font-size:21px;margin:0}
.tl-ures p{margin:9px auto 18px;max-width:46ch;color:var(--muted)}

/* ---------- 19. napló: egy bejegyzés lapja ---------- */
.bp{padding:44px 0 56px}
.bp-wrap{max-width:760px}
.bp-vissza{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:13.5px;
  color:var(--muted);
}
.bp-vissza:hover{color:var(--ink)}
.bp-vissza .ic{width:15px;height:15px}
.bp-cimkek{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}
.bp-cimkek:empty{display:none}
.bp h1{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;
  font-size:clamp(26px,4.4vw,40px);line-height:1.12;letter-spacing:-.01em;
  margin:14px 0 0;color:var(--ink);overflow-wrap:anywhere;
}
.bp-meta{
  margin:12px 0 0;font-size:13px;color:var(--muted);
  font-variant-numeric:tabular-nums;display:flex;flex-wrap:wrap;gap:7px;align-items:baseline;
}
.bp-meta .sep{opacity:.5}
.bp-bev{margin:16px 0 0;font-size:18.5px;line-height:1.55;color:var(--ink)}
.bp-bev:empty{display:none}
/* Őszinte jelzés az angol lapon: az adás magyarul van. */
.bp-nyelv{
  margin:16px 0 0;padding:9px 14px;font-size:14px;color:var(--muted);
  background:var(--plaza);border:1px solid var(--edge);border-radius:10px;
  display:inline-block;
}

/* beágyazott lejátszó: 16:9, a betöltés a lap aljára van halasztva */
.bp-yt-cim{
  margin:26px 0 8px;font-size:12.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);
}
.bp-yt{
  position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;
  background:#000;border:1px solid var(--edge);box-shadow:var(--sh-1);
}
.bp-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.bp-yt-alt{margin:9px 0 0;font-size:13.5px}
.bp-yt-alt a{
  display:inline-flex;align-items:center;gap:6px;color:var(--muted);
  text-decoration:none;font-weight:600;
}
.bp-yt-alt a:hover{color:var(--ink);text-decoration:underline}
.bp-yt-alt .ic{width:16px;height:16px}

/* a törzs tipográfiája */
.bp-torzs{margin-top:30px;font-size:17px;line-height:1.68}
.bp-torzs > :first-child{margin-top:0}
.bp-torzs p{margin:0 0 17px}
.bp-torzs h2,.bp-torzs h3,.bp-torzs h4{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;color:var(--ink);
  line-height:1.22;margin:32px 0 10px;
}
.bp-torzs h2{font-size:25px}
.bp-torzs h3{font-size:20px}
.bp-torzs h4{font-size:17.5px}
.bp-torzs ul,.bp-torzs ol{margin:0 0 17px;padding-left:1.3em}
.bp-torzs li{margin:0 0 7px}
.bp-torzs li::marker{color:var(--c-pod)}
.bp-torzs a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--edge-strong)}
.bp-torzs a:hover{text-decoration-color:var(--c-pod)}
.bp-torzs strong{font-weight:700;color:var(--ink)}
.bp-torzs code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;
  background:var(--plaza);border:1px solid var(--edge);border-radius:5px;padding:1px 5px;
}
.bp-torzs blockquote{
  margin:0 0 17px;padding:2px 0 2px 18px;border-left:3px solid var(--c-pod);
  color:var(--muted);font-style:normal;
}
.bp-torzs blockquote p{margin:0}
.bp-torzs hr{border:0;border-top:1px solid var(--edge);margin:30px 0}

/* előző / következő bejegyzés */
.bp-lepteto{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;
  margin-top:40px;padding-top:26px;border-top:1px solid var(--edge);
}
.bp-lep{
  display:flex;align-items:center;gap:10px;text-decoration:none;
  padding:14px 16px;border:1px solid var(--edge);border-radius:12px;
  background:var(--surface);color:var(--ink);font-size:14.5px;font-weight:600;
  line-height:1.35;transition:border-color .16s ease, transform .16s ease;
}
.bp-lep:hover{border-color:var(--edge-strong);transform:translateY(-2px)}
.bp-lep .ic{width:17px;height:17px;flex:0 0 auto;color:var(--muted)}
.bp-lep-jobb{justify-content:flex-end;text-align:right}

/* ---------- 20. napló mobilon ----------
   A borítókép a kártya tetejére kerül, a gerinc közelebb húzódik. A FIGYELEM:
   ez a blokk a 640-es után áll a fájlban, ahogy a lap többi mobilos szabálya. */
@media (max-width:640px){
  .tl::before{left:7px}
  .tl-elem{padding-left:32px;padding-bottom:14px}
  .tl-ev{padding-left:32px}
  .tl-ev::before{left:0}
  .tl-pont{left:1px;top:20px}
  .tl-link{grid-template-columns:minmax(0,1fr)}
  .tl-kep{
    min-height:0;aspect-ratio:16/9;border-right:0;border-bottom:1px solid var(--edge);
  }
  .tl-jatek{left:50%;top:26%}
  .tl-torzs{padding:14px 16px 13px}
  .tl-cim{font-size:17.5px}
  .tl-bev{font-size:14px}
  .tl-cimkek{padding:0 16px 13px}
  .bp{padding:30px 0 42px}
  .bp-bev{font-size:17px}
  .bp-torzs{font-size:16.5px}
  .bp-torzs h2{font-size:22px}
  .bp-torzs h3{font-size:18.5px}
  .bp-lep-jobb{justify-content:flex-start;text-align:left;flex-direction:row-reverse}
}