:root{
  /* === Téma === */
  --bg:#0a0b0f; --bg-elev:#0f1117; --txt:#e6eaf2; --muted:#9aa0a6;
  --brand:#8958c9; --brand-2:#22d3ee; --card:#11131a; --border:#1b1f2a;

  /* Logo */
  --logo-size:80px;

  /* Hero cover – jemný zoom-in na hover (ostré v klidu) */
  --hero-rest-scale: 1;
  --hero-hover-scale: 1.03;
  --hero-hover-speed: 320ms;
  --hero-shadow-rest: 0 20px 60px rgba(0,0,0,.35);
  --hero-shadow-hover: 0 24px 72px rgba(0,0,0,.45);

  /* Karty (grid) – plynulý zoom obrázku */
  --card-rest-scale: 1;
  --card-hover-scale: 1.03;      /* 1.03–1.06 je safe */
  --card-hover-speed: 300ms;
  --card-shadow-rest: 0 10px 24px rgba(0,0,0,.22);
  --card-shadow-hover: 0 16px 36px rgba(0,0,0,.30);

  /* Barvy titulků karet (neovlivní nic jiného) */
  --card-title:       #cccccc;
  --card-title-hover: #ffffff;

  /* Mobilní menu – výšku blur veilu doplní JS */
  --menu-h:0px;
  --veil-extra:0px;
}

/* ================= Base ================= */
*{ box-sizing:border-box }  
html{
  overflow-y: scroll;
}

@supports (scrollbar-gutter: stable){
  html{
    overflow-y: auto;          
    scrollbar-gutter: stable;  
  }
}

body{
  margin:0; padding:0; background:var(--bg); color:var(--txt);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
a{ color:inherit; text-decoration:none }
img{ max-width:100%; display:block }
.container{ width:min(1100px,92%); margin:0 auto }

/* ================= Header / Nav ================= */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(10,11,15,.6);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:6px 0 }
.nav .brand{ display:flex; align-items:center; gap:12px }
.nav .brand > a{ flex:0 0 auto }
.brand > a > img.logo-img{
  height:auto; width:auto; display:block;
  max-height:var(--logo-size);
  max-width:none; /* přebije globální img{max-width:100%} pro logo */
}
.nav a.link{ color:var(--muted); margin-left:16px }
.nav a.link:hover{ color:var(--txt) }

/* ================= Hero / CTA ================= */
.hero{
  display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center;
  padding:56px 0 20px;
}
.hero h1{ margin:0 }
.hero p.kicker{
  color:var(--brand); text-transform:uppercase; letter-spacing:.18em;
  font-size:12px; margin:0 0 16px;
}
.hero p.sub{ color:var(--muted); font-size:18px }
.cta{ display:flex; gap:12px; margin-top:22px; align-items:center; flex-wrap:wrap }

/* ================= Buttons ================= */
.btn{
  display:inline-flex; align-items:center; gap:8px; line-height:1;
  padding:12px 16px; border-radius:10px; background:var(--brand); color:#fff;
  font-weight:600; border:1px solid transparent;
  transition: transform 150ms ease, box-shadow 200ms ease, filter 180ms ease,
              background-color 180ms ease, border-color 180ms ease, color 180ms ease;
  will-change: transform;
}
.btn:hover,.btn:focus-visible{
  background-color:#543b79; /* tmavší fialová pro hover */
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(0,0,0,.24);
  outline:none;
}
.btn:active{ transform:translateY(0); box-shadow:0 4px 10px rgba(0,0,0,.18) }
.btn.ghost{
  background:transparent; border:1px solid var(--border); color:var(--txt);
  transition:border-color 200ms ease, background-color 200ms ease,
             transform 150ms ease, box-shadow 200ms ease, color 180ms ease;
}
.btn.ghost:hover,.btn.ghost:focus-visible{
  border-color:var(--brand); background-color:rgba(139,92,246,.12);
  transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.24); outline:none;
}

/* ================= Marquee ================= */
/* Bordery přes celou šířku, dráha textu „končí“ u pravého okraje .containeru */
.marquee{
  --marquee-right-gap: calc((100vw - min(1100px, 92vw)) / 2);
  --marquee-border: 1px;
  position:relative; overflow:hidden; white-space:nowrap;
  border-top: var(--marquee-border) solid var(--border);
  border-bottom: var(--marquee-border) solid var(--border);
  margin:30px 0;
}
.marquee::after{
  content:""; position:absolute; right:0;
  top:var(--marquee-border); bottom:var(--marquee-border);
  width:var(--marquee-right-gap); background:var(--bg);
  pointer-events:none; z-index:1;
}
.marquee .row{
  display:inline-block; white-space:nowrap; padding:10px 0;
  animation: slide 35s linear infinite;
  color:var(--muted); will-change:transform; position:relative; z-index:0;
}
.marquee .row span{ margin:0 24px }
@keyframes slide{
  from{ transform:translateX(0) }
  to  { transform:translateX(-33.333%) } /* 3× duplicitní obsah → posun o 1/3 */
}

/* ================= Layout / Cards grid ================= */
.section{ padding:50px 0 }
.grid{ display:grid; gap:20px }
.grid.cards{ grid-template-columns:repeat(auto-fill,minmax(240px,1fr)) }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:28px }

/* Karta (anchor) = blok + maskování zoomu + stín */
.grid.cards a.card{
  display:block; position:relative; overflow:hidden; border-radius:16px;
  background:var(--card); border:1px solid var(--border);
  box-shadow:var(--card-shadow-rest);
  transition: box-shadow 240ms ease; /* žádný transform — nekoliduje s .reveal */
}

/* Obrázek v kartě – plynulý zoom */
.grid.cards a.card > img{
  width:100%; height:auto; object-fit:cover; display:block;
  transform: scale(var(--card-rest-scale)) translateZ(0);
  transform-origin:50% 50%; backface-visibility:hidden; will-change:transform;
  transition: transform var(--card-hover-speed) cubic-bezier(.22,.61,.36,1);
}

/* Hover/Focus (jen kurzorová zařízení) */
@media (hover:hover){
  .grid.cards a.card:hover{ box-shadow:var(--card-shadow-hover) }
  .grid.cards a.card:hover > img{
    transform: scale(var(--card-hover-scale)) translateZ(0);
  }
}
.grid.cards a.card:focus-visible{
  outline:none; box-shadow:var(--card-shadow-hover),0 0 0 3px rgba(139,92,246,.35);
}
.grid.cards a.card:focus-visible > img{
  transform: scale(var(--card-hover-scale)) translateZ(0);
}

/* Meta část karty + typografie */
.grid.cards a.card .meta{ padding:12px 14px 14px }
.grid.cards a.card .meta h3{
  margin:6px 0 6px;
  font-size: clamp(16px, 1.15vw, 18px);
  font-weight:750; line-height:1.28;
  color: var(--card-title);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; text-overflow:ellipsis; text-wrap:balance;
}
.grid.cards a.card .meta p{
  margin:6px 0 0; font-size:13px; line-height:1.35;
  color: color-mix(in oklab, var(--muted) 92%, white 8%);
  font-variant-numeric: tabular-nums; letter-spacing:.01em;
}
@media (hover:hover){
  .grid.cards a.card:hover .meta h3{ color:var(--card-title-hover) }
}
.grid.cards a.card:focus-visible .meta h3{ color:var(--card-title-hover) }   

/* ================= Status ribbons (Coming Soon / Pre-Order) ================= */
.has-ribbon { position: relative; }

/* Parametry laděné na karty (viz hero badge) */
:root{
  --card-ribbon-x:   -80px;   /* ukotvení vlevo do rohu (negativně přes obrázek) */
  --card-ribbon-y:    28px;   /* vzdálenost od horní hrany coveru */
  --card-ribbon-l:   240px;   /* délka stužky (karty jsou menší než hero) */
  --card-ribbon-h:    28px;   /* tloušťka pruhu */
  --card-ribbon-rot: -45deg;  /* úhel jako v hero */
  --card-ribbon-font: 12px;   /* velikost textu */
  --card-ribbon-ls:   .07em;  /* letter-spacing jako v hero */
}

/* Základ stužky – stejné měřítko/typografie jako hero badge */
.ribbon{
  position:absolute; z-index:5; pointer-events:none;
  top:var(--card-ribbon-y); left:var(--card-ribbon-x);
  width:var(--card-ribbon-l); height:var(--card-ribbon-h);
  display:grid; place-items:center; padding-inline:12px;
  line-height:1; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:clip;
  font-size:var(--card-ribbon-font); font-weight:800; letter-spacing:var(--card-ribbon-ls); text-transform:uppercase;
  color:#111; text-shadow:0 1px 0 rgba(255,255,255,.15);
  box-shadow:0 8px 24px rgba(0,0,0,.30);
  transform:rotate(var(--card-ribbon-rot));
  transform-origin:center;
  backface-visibility:hidden; will-change:transform;
}

/* Barvy – ponecháváme tvoje (jen aplikované na nový tvar) */
.ribbon--soon{ background:#9ea0a6; }  /* Coming Soon (šedostříbrná) */
.ribbon--pre { background:#ff7a00; }  /* Pre-Order (oranžová) */

/* ================= Hover (sjednocení s /releases) ================= */
/* Obrázek v kartě může být obalen .has-ribbon → cílíme na img uvnitř něj stejně, jako by byl přímým potomkem */
.grid.cards a.card .has-ribbon img{
  width:100%; height:auto; object-fit:cover; display:block;
  transform: scale(var(--card-rest-scale)) translateZ(0);
  transform-origin:50% 50%; backface-visibility:hidden; will-change:transform;
  transition: transform var(--card-hover-speed) cubic-bezier(.22,.61,.36,1);
}
/* Hover/Focus (identické škálování jako na stránce Releases) */
@media (hover:hover){
  .grid.cards a.card:hover .has-ribbon img{ transform: scale(var(--card-hover-scale)) translateZ(0); }
}
.grid.cards a.card:focus-visible .has-ribbon img{
  transform: scale(var(--card-hover-scale)) translateZ(0);
}
/* Stabilita vrstvy – žádné „vlnění“ textu na stužce při hoveru */
.grid.cards a.card .has-ribbon{ contain: paint; }

footer.site {
  padding: 24px 0 26px;
  font-size: 0.85rem;
  color: var(--muted, #9aa0a6);
}

footer.site .footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

footer.site .footer-copy {
  opacity: 0.9;
}

footer.site .socials--icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

footer.site .socials--icons .social {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #11131a;
  border: 1px solid #1b1f2a;
  opacity: 0.9;
  transition: background 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

footer.site .socials--icons .social svg {
  width: 32px;
  height: 32px;
  fill: var(--muted, #9aa0a6);
  transition: fill 0.1s ease;
}

footer.site .socials--icons .social:hover {
  opacity: 1;
  background: var(--brand, #8b5cf6);
  transform: translateY(-1px);
}

footer.site .socials--icons .social:hover svg {
  fill: #ffffff;
}


/* ================= Responsive ================= */
@media (max-width:940px){
  .hero{ grid-template-columns:1fr }
  .split{ grid-template-columns:1fr }
}
/* Clipni ribbon do okraje coveru (platí pro karty i single) */
.has-ribbon{ position: relative; overflow: hidden; border-radius:16px; }

/* (volitelné) na velkém coveru může být delší pruh, ať přesáhne roh komfortně */
@media (min-width: 700px){
  .release .ribbon,
  .releases-single .ribbon,
  .single .ribbon{ width: 300px; }   /* klidně 280–320 podle oka */
}

/* ================= Reveal animace ================= */
.reveal{ opacity:0; transform:translateY(14px) }
.reveal.in{ opacity:1; transform:none; transition:opacity .7s ease,transform .7s ease }

/* ================= Lightbox (Anti-flicker) ================= */
.llx-scrim{
  position:fixed; inset:0; background:rgba(0,0,0,.7);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 400ms ease-out, visibility 0s linear 400ms !important;
  z-index:9998;
}
.llx-scrim.llx-open{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity 400ms ease-out !important }
.llx-zoom-img{
  position:fixed; z-index:9999; border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.5); will-change:transform;
  backface-visibility:hidden; pointer-events:none;
}
.llx-thumb-hidden{ visibility:hidden !important }
html.llx-no-scroll, body.llx-no-scroll{ overflow:hidden !important }

/* ================= Odkazy „jako v menu“ (mimo header) ================= */
:where(.section,.hero,.grid,.split,footer.site) a:not(.btn){
  color:var(--muted); text-decoration:none; transition:color 180ms ease;
}
:where(.section,.hero,.grid,.split,footer.site) a:not(.btn):hover,
:where(.section,.hero,.grid,.split,footer.site) a:not(.btn):focus-visible{
  color:var(--txt); outline:none;
}
:where(.section,.hero,.grid,.split,footer.site) a:not(.btn):focus-visible{
  box-shadow:0 0 0 3px rgba(139,92,246,.28); border-radius:6px;
}

/* ================= Reduced motion ================= */
@media (prefers-reduced-motion:reduce){
  .reveal.in, .btn, .btn.ghost, .marquee .row, .llx-scrim{ transition:none !important }
}

/* ================= Hero slogan (1 věta = 1 řádek) ================= */
.hero-title{
  margin:0; font-weight:800; line-height:1.06;
  font-size:clamp(30px,4.2vw,58px); letter-spacing:0;
}
.hero-title .line{ display:block; white-space:nowrap }
.hero-title .line-1{ font-size:0.6em }
.hero-title .line-2{ font-size:0.8em }
.hero-title .line-1::before,
.hero-title .line-1::after{
  content:"✦"; display:inline-block; font-size:.9em; line-height:1;
  transform:translateY(.03em); opacity:.95;
}
.hero-title .line-1::before{ margin-right:.28em }
.hero-title .line-1::after { margin-left:.28em }

/* ================= Mobilní MENU (hamburger + blur jen pod menu) ================= */
/* Desktop stav */
.site-menu{ display:flex; align-items:center; gap:16px }
.menu-toggle{ display:none }
/* Přístupnost */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* Mobilní stav */
@media (max-width:940px){
  .menu-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:52px; height:52px; border-radius:12px;
    background:transparent; border:1px solid var(--border); color:var(--txt);
    cursor:pointer; transition:border-color 160ms, background-color 160ms, transform 120ms;
  }
  .menu-toggle .icon-hamburger{ width:28px; height:28px; display:block }
  .menu-toggle:hover, .menu-toggle:focus-visible{
    border-color:var(--brand); background-color:rgba(139,92,246,.12); outline:none; transform:translateY(-1px);
  }
  /* Fallback bez JS */
  .site-menu{ display:block; padding:8px 0 }

  /* JS mód – panel fixně pod headerem */
  html.menu-js .site-menu{
    position:fixed; left:0; right:0; top:var(--header-h,64px);
    z-index:49; background:transparent; text-align:right;
    max-height:0; overflow:hidden; opacity:0; pointer-events:none;
    transition:max-height 220ms ease, opacity 220ms ease;
  }
  html.menu-js .site-menu.is-open{
    max-height:calc(100dvh - var(--header-h,64px));
    overflow:auto; opacity:1; pointer-events:auto;
    -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  }
  .site-menu .link{
    display:block; padding:14px 28px 14px 16px; color:var(--txt);
    border-bottom:1px solid var(--border); text-align:right;
  }
  .site-menu .link:last-child{ border-bottom:0 }

  /* Blur vrstva – jen pod menu (výšku řídí --menu-h + --veil-extra) */
  .menu-veil{
    position:fixed; left:0; right:0; top:var(--header-h,64px);
    height:calc(var(--menu-h) + var(--veil-extra));
    z-index:48; background:rgba(10,11,15,.28);
    -webkit-backdrop-filter:blur(10px) saturate(120%); backdrop-filter:blur(10px) saturate(120%);
    opacity:0; transition:opacity 220ms ease;
  }
  .menu-veil.is-on{ opacity:1 }
}

/* ================= Hero cover (klikací) + Ribbon ================= */
.hero-cover{
  display:block; position:relative; border-radius:16px; overflow:hidden;
  box-shadow:var(--hero-shadow-rest); outline:none; transition: box-shadow 320ms ease;
}
.hero-cover img{
  width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; display:block;
  transform: scale(var(--hero-rest-scale)) translateZ(0);
  transform-origin:center; backface-visibility:hidden; will-change:transform;
  transition: transform var(--hero-hover-speed) cubic-bezier(.22,.61,.36,1);
}
@media (hover:hover){
  .hero-cover:hover img, .hero-cover:focus-visible img{ transform:scale(var(--hero-hover-scale)) translateZ(0) }
  .hero-cover:hover, .hero-cover:focus-visible{ box-shadow:var(--hero-shadow-hover) }
}

/* Ribbon – nastavuj na jednom místě ↓ */
.hero{
  --ribbon-x:   -90px;     /* záporné = víc přes roh vlevo */
  --ribbon-y:    36px;     /* vzdálenost od horní hrany coveru */
  --ribbon-l:   290px;     /* délka stužky přes roh */
  --ribbon-h:    28px;     /* tloušťka pruhu */
  --ribbon-rot: -45deg;    /* úhel */
  --ribbon-shift: 0px;     /* posun po diagonále */
  --ribbon-font: 12px;     /* velikost textu */
  --ribbon-grad: linear-gradient(135deg,var(--brand),var(--brand-2));
}
.hero .hero-badge{
  position:absolute; top:var(--ribbon-y); left:var(--ribbon-x); z-index:2;
  width:var(--ribbon-l); height:var(--ribbon-h);
  display:grid; place-items:center; padding-inline:12px;
  line-height:1; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:clip;
  font-size:var(--ribbon-font); font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.25);
  background:var(--ribbon-grad); box-shadow:0 8px 24px rgba(0,0,0,.30);
  transform:rotate(var(--ribbon-rot)) translateX(var(--ribbon-shift));
  transform-origin:center; pointer-events:none; border:0;
}
.hero .hero-badge::before, .hero .hero-badge::after{
  content:""; position:absolute; top:0; width:10px; height:100%;
  background:rgba(0,0,0,.25); filter:blur(.2px); opacity:.35;
}
.hero .hero-badge::before{ left:12px } .hero .hero-badge::after{ right:12px }

/* ================= About page split ================= */
.about-split{ align-items:center; gap:40px }
.about-copy > .kicker{
  color:var(--brand); text-transform:uppercase; letter-spacing:.18em;
  font-size:12px; margin:0 0 14px;
}
.about-visual{ display:grid; place-items:center }
.about-logo-img{
  width:min(550px,95%); height:auto; display:block;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.35)); border-radius:12px;
}
@media (max-width:940px){ .about-visual{ margin-top:16px } }

.storelist-heading {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted, #9aa0a6);
  letter-spacing: 0.3px;
  margin-bottom: 6px;
  text-transform: none;
}