:root {
  /* Neon / Futuristic palette */
  --bg: #060708;
  --ink: #f5f7fa;
  --muted: #a9b4c0;
  --neon: #39ff14;
  --cyan: #00e5ff;
  --panel: #0f1216;
  --grid: rgba(255, 255, 255, 0.04);

  --radius: 18px;
  --shadow: 0 25px 70px rgba(0, 0, 0, 0.55);

  --container: min(1200px, 92vw);
  --pad: clamp(18px, 3vw, 28px);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  color: var(--ink);
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Arial,
    sans-serif;
  background: radial-gradient(1200px 700px at 10% -10%, rgba(57, 255, 20, 0.1), transparent 60%),
    radial-gradient(1000px 600px at 100% 0%, rgba(0, 229, 255, 0.08), transparent 60%), var(--bg);
  overflow-x: hidden;
  padding-top: 72px;
      overflow: scroll !important;
}
a {
  color: var(--cyan);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}


/* Utility */
.container {
  width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2.6vw, 24px);
}
@media (max-width: 980px) {
  .grid-3 {
    grid-template-columns: 1fr;
  }
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  font-weight: 700;
  border-radius: 14px;
  letter-spacing: 0.2px;
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 12px 30px rgba(0, 0, 0, 0.35);
}
.btn.primary {
  color: #00160a;
  border-color: color-mix(in oklab, var(--neon) 70%, white 10%);
  background: linear-gradient(180deg, var(--neon), #92ff7d);
  box-shadow:
    0 0 20px rgba(57, 255, 20, 0.45),
    0 16px 40px rgba(0, 0, 0, 0.5);
}
.btn.glass {
  backdrop-filter: blur(8px);
}
.eyebrow {
  color: var(--cyan);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 12px;
  text-shadow: 0 0 12px rgba(0, 229, 255, 0.55);
}
.title {
  font:
    700 clamp(34px, 5vw, 64px) / 1.02 "Space Grotesk",
    system-ui,
    sans-serif;
  margin: 10px 0;
  letter-spacing: -0.01em;
  background: linear-gradient(90deg, var(--ink) 0%, #c9f7ff 40%, #d8ffd9 60%, var(--ink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 20px rgba(0, 229, 255, 0.15);
}
.lead {
  color: var(--muted);
  max-width: 68ch;
}

/* ===== Header base ===== */
.site-header {
  position: fixed; 
  top: 12px; 
  z-index: 1000;
  display: flex; 
  justify-content: center; 
  pointer-events: none;
  width: 100%;
}
.topbar{
  pointer-events: auto;
  display:flex; align-items:center; gap:16px;
  width: min(1200px, 94vw);
  padding: 10px 14px;
  border-radius: 14px;
  background: color-mix(in oklab, var(--panel, #0f1216) 82%, transparent);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
    margin-top: 8px; /* přidá prostor od horní hrany */
}

/* Brand */
.brand{display:inline-flex; align-items:center; gap:10px; text-decoration:none}
.brand .badge{display:inline-grid; place-items:center; height:30px; border-radius:10px; color:#00160a; font-weight:800;
  background: conic-gradient(from 210deg, var(--neon,#39ff14), #b8ffb0 35%, #7dfff5 60%, var(--cyan,#00e5ff) 95%);
  box-shadow: 0 6px 16px rgba(57,255,20,.28);
}
.brand-text{font-weight:700; color:var(--ink,#f5f7fa)}

/* Links (desktop) */
.nav-links{display:flex; align-items:center; gap:10px; margin-left:auto}
.navlink{color:var(--muted,#a9b4c0); padding:8px 10px; border-radius:10px; text-decoration:none; white-space:nowrap}
.navlink:hover{background:rgba(255,255,255,.06); color:var(--ink,#f5f7fa)}
.cta{margin-left:6px}

/* Hamburger (hidden on desktop) */
.nav-toggle{
  display:none; position:relative; width:40px; height:36px; border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-radius:10px; cursor:pointer;
}
.nav-toggle-bar{
  position:absolute; left:8px; right:8px; height:2px; background:var(--ink,#f5f7fa);
  transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.nav-toggle-bar:nth-child(1){ top:10px }
.nav-toggle-bar:nth-child(2){ top:17px }
.nav-toggle-bar:nth-child(3){ top:24px }

/* ===== Mobile layout ===== */
@media (max-width: 860px){
  .nav-toggle{display:block; margin-left:auto}
  .nav-links{
    position: fixed; inset: 0 0 auto 0; /* drop panel from top */
    top: 0; height: 100dvh;
    display:flex; flex-direction:column; align-items:stretch; gap:8px;
    padding: 76px 18px 18px; /* leave space for topbar */
    background: color-mix(in oklab, var(--panel,#0f1216) 92%, transparent);
    border: none; border-radius: 0;
    transform: translateY(-100%);
    opacity: 0; pointer-events: none;
    transition: transform .28s ease, opacity .28s ease;
  }
  .nav-links a{font-size:16px}
  .nav-links .cta{margin-left:0}
  /* open state */
  .site-header.nav-open .nav-links{
    transform: none; opacity: 1; pointer-events: auto;
  }
  .site-header.nav-open .nav-toggle .nav-toggle-bar:nth-child(1){
    top:17px; transform: rotate(45deg);
  }
  .site-header.nav-open .nav-toggle .nav-toggle-bar:nth-child(2){
    opacity:0;
  }
  .site-header.nav-open .nav-toggle .nav-toggle-bar:nth-child(3){
    top:17px; transform: rotate(-45deg);
  }
  /* prevent body scroll while menu open */
  body.menu-lock{ overflow: hidden; }
}

/* Smooth anchor offset for sticky header */
html{ scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (max-width: 860px){ html{ scroll-padding-top: 76px; } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .nav-links{ transition: none }
  .nav-toggle-bar{ transition: none }
}

/* Brand */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.brand .badge {
  display: inline-grid;
  place-items: center;
  height: 30px;
  border-radius: 10px;
  color: #00160a;
  font-weight: 800;
  background: conic-gradient(from 210deg, var(--neon, #39ff14), #b8ffb0 35%, #7dfff5 60%, var(--cyan, #00e5ff) 95%);
  box-shadow: 0 6px 16px rgba(57, 255, 20, 0.28);
  padding-left: 10px;
  padding-right: 10px;
}
.brand-text {
  font-weight: 700;
  color: var(--ink, #f5f7fa);
}

/* Links (desktop) */
.nav-links {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.navlink {
  color: var(--muted, #a9b4c0);
  padding: 8px 10px;
  border-radius: 10px;
  text-decoration: none;
  white-space: nowrap;
}
.navlink:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink, #f5f7fa);
}
.cta {
  margin-left: 6px;
}

/* Hamburger (hidden on desktop) */
.nav-toggle {
  display: none;
  position: relative;
  width: 40px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border-radius: 10px;
  cursor: pointer;
}
.nav-toggle-bar {
  position: absolute;
  left: 8px;
  right: 8px;
  height: 2px;
  background: var(--ink, #f5f7fa);
  transition:
    transform 0.25s ease,
    opacity 0.2s ease,
    top 0.25s ease;
}
.nav-toggle-bar:nth-child(1) {
  top: 10px;
}
.nav-toggle-bar:nth-child(2) {
  top: 17px;
}
.nav-toggle-bar:nth-child(3) {
  top: 24px;
}

/* ===== Mobile layout ===== */
@media (max-width: 860px) {
  body {
    padding-top: 62px;
  }
  .nav-toggle {
    display: block;
    margin-left: auto;
  }
  .nav-links {
    position: fixed;
    inset: 0 0 auto 0; /* drop panel from top */
    top: 0;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 76px 18px 18px; /* leave space for topbar */
    background: color-mix(in oklab, var(--panel, #0f1216) 92%, transparent);
    border: none;
    border-radius: 0;
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition:
      transform 0.28s ease,
      opacity 0.28s ease;
  }
  .nav-links a {
    font-size: 16px;
  }
  .nav-links .cta {
    margin-left: 0;
  }
  /* open state */
  .site-header.nav-open .nav-links {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
  .site-header.nav-open .nav-toggle .nav-toggle-bar:nth-child(1) {
    top: 17px;
    transform: rotate(45deg);
  }
  .site-header.nav-open .nav-toggle .nav-toggle-bar:nth-child(2) {
    opacity: 0;
  }
  .site-header.nav-open .nav-toggle .nav-toggle-bar:nth-child(3) {
    top: 17px;
    transform: rotate(-45deg);
  }
  /* prevent body scroll while menu open */
  body.menu-lock {
    overflow: hidden;
  }
}

/* Smooth anchor offset for sticky header */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}
@media (max-width: 860px) {
  html {
    scroll-padding-top: 76px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .nav-links {
    transition: none;
  }
  .nav-toggle-bar {
    transition: none;
  }
}
/* Hero - immersive full screen with animated point cloud */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
#pc-hero {
  position: absolute;
  inset: 0;
  opacity: 0.85;
}
.hero-inner {
  position: relative;
  z-index: 1;
  width: var(--container);
  padding: calc(var(--pad) + 24px) var(--pad);
  display: grid;
  gap: 18px;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
}
@media (max-width: 1020px) {
  .hero-inner {
    grid-template-columns: 1fr;
  }
}
.glass-panel {
  padding: 18px;
  border-radius: 18px;
  background: color-mix(in oklab, var(--panel) 80%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}
.btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* Showcase — bold tilted screenshot panel */
.showcase {
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.12);
  transform-style: preserve-3d;
  perspective: 1000px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.showcase img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.96;
  filter: contrast(1.05) saturate(1.05);
}
.showcase::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 16px;
  box-shadow:
    inset 0 0 40px rgba(0, 229, 255, 0.16),
    inset 0 0 80px rgba(57, 255, 20, 0.14);
}

/* Diagonal “Layers of the Forest” */
.slice {
  position: relative;
  padding: clamp(48px, 12vw, 140px) 0;
  overflow: hidden;
  isolation: isolate;
}
.slice:nth-child(odd) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
}
.slice::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12vw;
  height: 12vw;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.06));
  transform: skewY(-4deg);
}
.slice::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12vw;
  height: 12vw;
  background: linear-gradient(0deg, transparent, rgba(255, 255, 255, 0.06));
  transform: skewY(-4deg);
}
.num {
  font:
    700 clamp(36px, 10vw, 120px) / 0.9 "Space Grotesk",
    system-ui,
    sans-serif;
  color: transparent;
  -webkit-text-stroke: 2px rgba(0, 229, 255, 0.35);
  text-stroke: 2px rgba(0, 229, 255, 0.35);
  letter-spacing: -0.02em;
}
.feature-card {
  padding: 18px;
  border-radius: 16px;
  background: color-mix(in oklab, var(--panel) 80%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}
.feature-card h3 {
  margin: 6px 0 8px;
  font:
    700 20px/1.2 "Space Grotesk",
    system-ui,
    sans-serif;
  text-shadow: 0 0 12px rgba(57, 255, 20, 0.15);
}
.parallax {
  will-change: transform;
}

/* Floating Gallery */
.gallery {
  position: relative;
  padding: clamp(50px, 10vw, 120px) 0;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.Livedata {
  padding-top: 4rem;
}
.float-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 980px) {
  .float-grid {
    grid-template-columns: 1fr;
  }
}
.float {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
  transform: translateY(20px);
  opacity: 0.001;
}
.float.revealed {
  transform: none;
  opacity: 1;
  transition:
    transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.6s;
}
.float img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
}

/* Download CTA (glass panel, centered) */
#download{margin:3rem;}
.cta {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: radial-gradient(800px 400px at 20% 0%, rgba(0, 229, 255, 0.1), transparent 60%),
    radial-gradient(800px 400px at 80% 100%, rgba(57, 255, 20, 0.1), transparent 60%);
}
.cta .panel {
  margin-inline: auto;
  width: min(900px, 94vw);
  padding: 20px;
  border-radius: 18px;
  background: color-mix(in oklab, var(--panel) 85%, transparent);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}

/* Footer */
footer {
  padding: 18px 0 36px;
  color: var(--muted);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(255, 255, 255, 0.04) 38px 39px);
}
.foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.social a {
  color: var(--muted);
  padding: 6px 8px;
  border-radius: 10px;
}
.social a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .float {
    transition: none;
  }
}
.toolbar label {
  font-size: 13px;
  color: var(--muted);
}
.toolbar input[type="text"] {
  width: min(520px, 70vw);
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #0b131b;
  color: var(--ink);
}
.toolbar button,
.toolbar select,
.toolbar input[type="range"] {
  background: #0b131b;
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
}
.toolbar button.primary {
  background: var(--primary);
  color: #052916;
  border-color: color-mix(in oklab, var(--primary) 80%, white 10%);
}
.hint {
  color: var(--muted);
  font-size: 12px;
}
#dropzone {
  position: absolute;
  inset: 44px 0 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(255, 255, 255, 0.18);
  color: var(--muted);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
#dropzone.on {
  opacity: 1;
}
#deck-container {
  position: fixed;
  inset: 44px 0 0 0;
}
#deck {
  width: 100%;
  height: 560px; /* uprav dle potřeby */
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  overflow: hidden;
  margin-top: 24px;
  background: #0b131b; /* kontrast k bodům */
}
.hud {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
}
.controls {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  font-size: 13px;
  color: var(--muted);
}
.controls label {
  display: flex;
  align-items: center;
  gap: 6px;
}
.controls input[type="range"] {
  cursor: pointer;
}
.controls select {
  background: #0b131b;
  color: var(--ink, #e6eef8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  padding: 2px 6px;
}
#potree {
  height: 560px;
}