:root{
  --bg-900:#0f1b28; --bg-800:#132235; --card:#122033; --text:#e8f0ff; --muted:#a6b3c8;
  --accent:#ffd34d; --accent-2:#ff3b3b; --ring: rgba(255,255,255,.08);
  --shadow:0 10px 30px rgba(0,0,0,.35); --radius:18px; --max:1100px;
  --link-email:#fff;
}
html,body{height:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;color:var(--text);
  background:radial-gradient(1200px 600px at 50% -50%, #254467 0%, var(--bg-900) 60%), var(--bg-900);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.6;overflow-x:hidden}
.container{width:min(var(--max),92%);margin-inline:auto}

/* Header */
.site-header{position:sticky;top:0;z-index:50;backdrop-filter:blur(8px);background:rgba(15,27,40,.75);border-bottom:1px solid var(--ring)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;cursor:pointer}
.brand img{width:34px;height:34px}
.menu{display:flex;gap:10px;flex-wrap:wrap}
.menu a{display:inline-block;padding:8px 14px;border:1px solid var(--ring);border-radius:999px;color:var(--text);text-decoration:none;font-weight:600;font-size:14px;transition:background .2s ease, box-shadow .2s ease, transform .2s ease, text-shadow .2s ease}
.menu a:hover{background:rgba(255,255,255,.06)}
.menu a.active{background:rgba(255,211,77,.18); box-shadow:0 0 0 1px rgba(255,211,77,.35) inset, 0 0 18px rgba(255,211,77,.28); text-shadow:0 0 6px rgba(255,211,77,.7)}
.sound-btn{background:none;border:none;color:var(--text);font-size:20px;cursor:pointer}

/* Snow */
.snow-wrap{pointer-events:none;position:fixed;inset:0;z-index:1;overflow:hidden}
.snow{position:absolute;top:-10px;width:6px;height:6px;background:#fff;border-radius:50%;opacity:.8;filter:drop-shadow(0 0 2px rgba(255,255,255,.7));animation:fall linear infinite}
@keyframes fall{to{transform:translateY(110vh)}}
@media (prefers-reduced-motion:reduce){.snow{animation:none;display:none}}

/* Hero */
.hero{position:relative;z-index:2;padding:90px 0 40px;flex:1 0 auto}
.title{font-family:'Luckiest Guy',system-ui;text-align:center;font-size:clamp(42px,8vw,84px);line-height:1;color:var(--accent);text-shadow:0 4px 0 var(--accent-2),0 12px 30px rgba(0,0,0,.5);letter-spacing:1px;margin:0 0 8px}
.subtitle{color:var(--muted);text-align:center;margin:0 auto 28px;max-width:760px}
.hero-ornaments{position:absolute;inset:0;pointer-events:none}
.orn{position:absolute;opacity:.9;filter:drop-shadow(0 8px 18px rgba(0,0,0,.4))}
.orn.gift{width:72px}.orn.tree{width:100px}.orn.santa{width:100px}

/* Sections */
h2.section {
  font-size: clamp(26px, 4vw, 36px);
  margin-bottom: 8px;  /* menší mezera pod nadpisem */
  text-align: center;
}

.section-note{color:var(--muted);margin-top:-6px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
@media (max-width:820px){.grid{grid-template-columns:1fr}}
.card{background:linear-gradient(180deg,var(--card),#0f1b28);border:1px solid var(--ring);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;position:relative;overflow:hidden;cursor:pointer;text-decoration:none;color:inherit;display:block;transition:transform .25s ease, box-shadow .25s ease, background .25s ease}
.card::after{content:"";position:absolute;inset:auto -20% -40% -20%;height:180px;background:radial-gradient(240px 100px at 50% 0,rgba(255,211,77,.12),transparent 60%)}
.card h3{margin:4px 0 6px}.card p{color:var(--muted);margin:0 0 16px}
.card:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 12px 24px rgba(0,0,0,.5);background:linear-gradient(180deg,#1a3350,var(--card))}
.btn{display:inline-block;text-decoration:none;font-weight:700;color:#0f1b28;background:var(--accent);padding:10px 16px;border-radius:12px;box-shadow:0 6px 16px rgba(255,211,77,.25)}
.btn:hover{filter:brightness(1.06)}
.pill-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.pill{padding:8px 12px;border:1px dashed var(--ring);border-radius:12px;color:var(--muted)}

/* Views */
.view{position:relative;z-index:2;padding:10px 0 22px;display:block;flex:1 0 auto}
.cols{display:grid;grid-template-columns:1.4fr 1fr;gap:22px;align-items: center;}
@media (max-width:980px){.cols{grid-template-columns:1fr}}
.media{
  background:#0f1b28;
  border:1px solid var(--ring);
  border-radius:var(--radius);
  aspect-ratio: 16 / 9;
  width: 60%;              /* ⬅ poloviční šířka */
  max-width: 650px;        /* ⬅ volitelné, aby to nebylo obří na velkých monitorech */
  margin: 0 auto;          /* ⬅ centrování */
  display: grid;
  place-items: center;
  overflow: hidden;
}


/* Slider */
.slider {
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:12px;
  position:relative;
}

.slides {
  display:flex;
  height:100%;
  animation:slide 20s infinite;
}

.slides img {
  flex:0 0 100%;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* 5 obrázků → 5 kroků = 0%, -100%, -200%, -300%, -400% */
@keyframes slide{
  0%,10%    { transform: translateX(0%); }
  20%,30%   { transform: translateX(-100%); }
  40%,50%   { transform: translateX(-200%); }
  60%,70%   { transform: translateX(-300%); }
  80%,90%   { transform: translateX(-400%); }
  100%      { transform: translateX(0%); }
}


/* Coming soon strip */
.coming-soon-strip{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);background:#c00;padding:10px 0;text-align:center;z-index:10}
.coming-soon-strip span{color:#fff;font-weight:800;font-size:1.1rem;letter-spacing:1px}

/* Footer */
footer{position:relative;z-index:50;margin-top:auto;flex-shrink:0;background:rgba(10,16,24,.7);border-top:1px solid var(--ring);backdrop-filter:blur(8px)}
.foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:22px 0;flex-wrap:wrap}
.social a{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--ring);text-decoration:none;color:var(--text)}

/* Hero ornaments hide together */
@media (max-width:1100px){
  .hero-ornaments .santa,
  .hero-ornaments .gift,
  .qr,
  #company-name {
  display:none!important;
  }
}

/* Email links: always white */
a[href^="mailto:"],
a[href^="mailto:"]:visited{
  color:#fff !important;
  text-decoration:underline;
  font-weight:600;
}
a[href^="mailto:"]:hover{ text-decoration:underline; opacity:.9; }

.cc-download {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
  max-width: 720px;
  margin: 24px auto;
  padding: 0 16px;
}

.cc-store {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cc-badge img {
  height: 56px; /* uprav dle potřeby */
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.12));
}

.cc-qr {
  margin-top: 12px;
  padding: 12px 10px 10px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}

.cc-qr img {
  display: block;
  width: 164px;
  height: 164px;
  image-rendering: crisp-edges;
  margin: 0 auto 8px;
}

.cc-qr span {
  font-size: 13px;
  color: #444;
}

@media (max-width: 640px) {
  .cc-download {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .cc-badge img { height: 52px; }
  .cc-qr img { width: 148px; height: 148px; }
}

/* Grid pro dvě platformy */
.download-grid {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  column-gap: 32px;
  row-gap: 12px;
  align-items: start;
  max-width: 460px;
}


/* Každý sloupec centrovaný podle vlastního obsahu */
.download-grid > * {
  text-align: center;
  justify-self: center;
}


/* QR kódy */
.download-grid .qr img {
  display: block;
  margin: 0 auto;
  width: 130px;
  height: 130px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
  transition: box-shadow 0.25s ease, filter 0.25s ease;
}

/* “Rozsvícení” QR na hover – stejné glow jako button, ale bez pohybu */
.download-grid .qr img:hover {
  box-shadow: 0 0 18px rgba(255, 255, 255, 1);
  filter: brightness(1.05);
}


/* Mobil: vše pod sebe doprostřed */
@media (max-width: 600px) {
  .download-grid {
    grid-template-columns: 1fr;
    max-width: none;
    column-gap: 0;
    row-gap: 10px;
    justify-items: center;
  }
}


/* Align the store buttons visually above QR codes */
.btn {
  min-width: 140px;         /* stejné jako QR kódy (130 + mezera) */
  text-align: center;
}


/* Glow effect on button hover */
.btn {
  position: relative;
  overflow: hidden;
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}

.btn:hover {
  background: #ffe060; /* mírně světlejší odstín než var(--accent) */
  box-shadow: 0 0 18px rgba(255, 211, 77, 0.6);
  transform: translateY(-2px);
}

/* VIDEO – 16:9 responsive */
.video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;   /* drží poměr stran */
  overflow: hidden;
  border-radius: 12px; /* nebo var(--radius), pokud chceš sjednotit */
}

.video-wrap video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* vyplní prostor (ořeže okraje) */
}

/* Pokud chceš vidět celé video bez ořezu, použij tuto třídu na <video>: */
.video-wrap video.fit-contain {
  object-fit: contain;
  background: #000;
}

.cols{
  display:grid;
  grid-template-columns:1fr 1fr;  /* NOVÉ */
  gap:22px;
  align-items: start;
}

.kickstarter-btn-wrap {
  text-align: center;
  margin-top: 40px;      /* mezera NAD buttonem */
  margin-bottom: 10px;   /* menší mezera POD buttonem */
}

.kickstarter-btn-wrap .btn {
  display: inline-block;
}