:root{
  --card-bg: rgba(10,12,14,.55);
  --card-border: rgba(255,255,255,.14);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --shadow: 0 20px 80px rgba(0,0,0,.45);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  color:var(--text);
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  overflow-x:hidden;
  background:#0b0c0f;
}

#bg{ position:fixed; inset:0; z-index:0; overflow:hidden; }

.bg-layer{
  position:absolute;
  inset:-4%;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition: opacity 1200ms ease;
  will-change: opacity, transform;
  transform: translate3d(var(--px,0px), var(--py,0px), 0) scale(1.05);
}

/* Ken Burns – jemný pohyb */
.bg-layer.is-visible{
  opacity:1;
  animation: kenburns 12s ease-in-out infinite alternate;
}

@keyframes kenburns{
  from { transform: translate3d(var(--px,0px), var(--py,0px), 0) scale(1.08); }
	to   { transform: translate3d(calc(var(--px,0px) * -1), calc(var(--py,0px) * -1), 0) scale(1.22); }
}

.bg-overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 700px at 30% 20%, rgba(0,0,0,.12), rgba(0,0,0,.55)),
    linear-gradient(to bottom, rgba(0,0,0,.20), rgba(0,0,0,.72));
}

.wrap{
  position:relative; z-index:1;
  min-height:100%;
  display:grid; place-items:center;
  padding:28px 16px;
}

.card{
  width:min(560px, 100%);
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:22px;
  backdrop-filter: blur(10px);
}

.header{ display:grid; gap:6px; margin-bottom:14px; }
.brand{ display:flex; align-items:center; gap:10px; }
.dot{
  width:10px; height:10px; border-radius:999px;
  background:rgba(255,255,255,.92);
  box-shadow:0 0 18px rgba(255,255,255,.25);
}
h1{ margin:0; letter-spacing:.16em; font-weight:700; font-size:22px; }
.subtitle{ margin:0; color:var(--muted); font-size:13px; }

.links{ display:grid; gap:10px; margin:16px 0 18px; }
.link{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px;
  border-radius:12px;
  text-decoration:none;
  color:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
}
.link:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
  color: rgba(255,255,255,.98);
}
.link i{ opacity:.7; }

.footer{
  display:grid; gap:10px;
  padding-top:6px;
  border-top:1px solid rgba(255,255,255,.10);
}
.icons{ display:flex; gap:10px; }
.icon{
  width:42px; height:42px;
  display:grid; place-items:center;
  border-radius:12px;
  text-decoration:none;
  color:var(--text);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  transition: background 140ms ease, transform 140ms ease, border-color 140ms ease;
}
.icon:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
}

.fineprint a{
  color: rgba(255,255,255,.55);
  text-decoration:none;
  font-size:12px;
}
.fineprint a:hover{ color: rgba(255,255,255,.78); }

@media (max-width:420px){
  .card{ padding:18px; border-radius:16px; }
  h1{ font-size:20px; }
}