:root{
  --bg:#070B14;
  --surface:#0C1326;
  --surface2:#0A1022;

  --border:rgba(120,170,255,0.12);
  --border2:rgba(120,170,255,0.18);

  --text:rgba(255,255,255,0.94);
  --text2:rgba(255,255,255,0.76);
  --muted:rgba(255,255,255,0.58);

  --accent:#59C6FF;
  --accent2:#2F7DFF;
  --amber:#FFB454;

  --shadow: 0 16px 60px rgba(0,0,0,0.42);
  --radius: 18px;

  --container: 1120px;

  --px: 0px;
  --py: 0px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.58;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
strong{ font-weight:650; }

.container{ width: min(var(--container), calc(100% - 40px)); margin:0 auto; }

.skip-link{
  position:absolute; left:-999px; top:12px;
  padding:10px 12px; border:1px solid var(--border2);
  background:rgba(12,19,38,0.95); border-radius:12px; z-index:9999;
}
.skip-link:focus{ left:12px; }

:focus-visible{ outline:2px solid rgba(89,198,255,0.65); outline-offset:3px; border-radius:12px; }

/* Ambient */
.ambient{ position:fixed; inset:0; pointer-events:none; z-index:-1; overflow:hidden; }
.ambient-blob{
  position:absolute; width:900px; height:900px; border-radius:50%;
  filter: blur(60px); opacity:0.42; transform: translate3d(0,0,0);
}
.ambient-blob.a1{
  left:-240px; top:-260px;
  background: radial-gradient(circle at 30% 30%, rgba(47,125,255,0.40), rgba(47,125,255,0.02) 62%);
  animation: blobFloat1 12s ease-in-out infinite;
}
.ambient-blob.a2{
  right:-320px; top:-220px;
  background: radial-gradient(circle at 60% 40%, rgba(89,198,255,0.28), rgba(89,198,255,0.02) 64%);
  animation: blobFloat2 14s ease-in-out infinite;
}
@keyframes blobFloat1{ 0%,100%{ transform: translate3d(0,0,0);} 50%{ transform: translate3d(40px,28px,0);} }
@keyframes blobFloat2{ 0%,100%{ transform: translate3d(0,0,0);} 50%{ transform: translate3d(-34px,36px,0);} }

.ambient-grid{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 360px at 22% 0%, rgba(47,125,255,0.12), transparent 65%),
    radial-gradient(700px 360px at 86% 8%, rgba(89,198,255,0.10), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent 55%),
    repeating-linear-gradient(90deg, rgba(89,198,255,0.045) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg, rgba(89,198,255,0.035) 0 1px, transparent 1px 56px);
  opacity: 0.30;
  mask-image: radial-gradient(circle at 50% 20%, black 0 55%, transparent 78%);
}
.ambient-noise{
  position:absolute; inset:0; opacity:0.05; mix-blend-mode: overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:60;
  border-bottom: 1px solid rgba(120,170,255,0.12);
  backdrop-filter: blur(14px);
  background: rgba(7,11,20,0.35);
}
.header-surface{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(12,19,38,0.92), rgba(12,19,38,0.58)),
    radial-gradient(700px 120px at 25% 0%, rgba(89,198,255,0.10), transparent 62%),
    radial-gradient(700px 120px at 85% 0%, rgba(47,125,255,0.10), transparent 62%);
  opacity: 0.95;
}
.header-inner{
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0; gap:16px;
}
.brand{ display:flex; align-items:center; min-width: 200px; }
.brand-logo{
  width: 150px; height:auto;
  filter: drop-shadow(0 16px 26px rgba(0,0,0,0.55));
  opacity: 1;
}
@media (min-width: 980px){ .brand-logo{ width: 180px; } }
@media (max-width: 420px){ .brand-logo{ width: 140px; } }

.nav{ display:none; gap: 18px; align-items:center; position:relative; z-index:1; }
.nav-link{
  font-size:14px;
  color: var(--text2);
  padding: 8px 10px;
  border-radius: 12px;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.nav-link:hover{
  color: var(--text);
  background: rgba(120,170,255,0.08);
  border: 1px solid rgba(120,170,255,0.16);
  padding: 7px 9px;
  transform: translateY(-1px);
}
.nav-link.is-active{
  color: var(--text);
  background: rgba(47,125,255,0.12);
  border: 1px solid rgba(89,198,255,0.22);
}

.header-cta{ display:none; position:relative; z-index:1; }

.nav-toggle{
  display:flex; flex-direction:column; gap:5px;
  padding:10px; border-radius:12px;
  border:1px solid rgba(120,170,255,0.14);
  background: rgba(12,19,38,0.60);
  cursor:pointer; position:relative; z-index:1;
}
.nav-toggle span{ width:18px; height:2px; background: rgba(255,255,255,0.80); border-radius:2px; }
.nav-toggle:hover{ border-color: rgba(120,170,255,0.24); }

.mobile-nav{
  border-top:1px solid rgba(120,170,255,0.12);
  background: rgba(7,11,20,0.72);
}
.mobile-nav-inner{ padding: 10px 0 18px; display:grid; gap:10px; }
.mobile-nav-link{
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(120,170,255,0.12);
  background: rgba(12,19,38,0.55);
  color: var(--text2);
}
.mobile-nav-link:hover{ color: var(--text); border-color: rgba(120,170,255,0.20); }

@media (min-width: 920px){
  .nav{ display:flex; }
  .header-cta{ display:block; }
  .nav-toggle{ display:none; }
  .mobile-nav{ display:none !important; }
}

.scrollbar{ position:fixed; left:0; top:0; width:100%; height:2px; z-index:70; background: rgba(255,255,255,0.02); }
.scrollbar-fill{
  height:100%; width:0%;
  background: linear-gradient(90deg, rgba(47,125,255,0.0), rgba(47,125,255,0.70), rgba(89,198,255,0.80));
  box-shadow: 0 0 18px rgba(89,198,255,0.22);
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 12px 16px; border-radius: 14px;
  border: 1px solid rgba(120,170,255,0.16);
  background: rgba(12,19,38,0.60);
  color: var(--text);
  font-weight: 750;
  font-size: 14px;
  letter-spacing: 0.2px;
  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
  user-select:none;
}
.btn:hover{ border-color: rgba(120,170,255,0.26); background: rgba(12,19,38,0.72); transform: translateY(-1px); }
.btn:active{ transform: translateY(0px); }

.btn-primary{
  background: linear-gradient(180deg, rgba(47,125,255,0.98), rgba(47,125,255,0.62));
  border-color: rgba(89,198,255,0.30);
  box-shadow: 0 14px 44px rgba(47,125,255,0.22);
  position:relative; overflow:hidden;
}
.btn-primary::after{
  content:""; position:absolute; inset:-40px -120px;
  background: radial-gradient(320px 90px at 30% 40%, rgba(255,255,255,0.22), transparent 65%);
  transform: translateX(-20%); opacity:0; transition: opacity .18s ease;
}
.btn-primary:hover::after{ opacity:1; }

.btn-secondary{
  background: rgba(12,19,38,0.52);
  border-color: rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.90);
}
.btn-secondary:hover{
  border-color: rgba(89,198,255,0.26);
  background: rgba(47,125,255,0.10);
}
.btn-sm{ padding: 10px 14px; border-radius: 13px; font-size: 13px; }

/* Typography */
.eyebrow{
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 14px;
  display:flex; align-items:center; gap:10px;
}
.eyebrow--center{ justify-content:center; }
.eyedot{
  width:8px; height:8px; border-radius:99px;
  background: rgba(89,198,255,0.78);
  box-shadow: 0 0 0 0 rgba(89,198,255,0.18);
  animation: liveBreath 2.8s ease-in-out infinite;
}
@keyframes liveBreath{
  0%{ box-shadow: 0 0 0 0 rgba(89,198,255,0.18); }
  55%{ box-shadow: 0 0 0 10px rgba(89,198,255,0.02); }
  100%{ box-shadow: 0 0 0 0 rgba(89,198,255,0.00); }
}
h1,h2,h3{ color: var(--text); }
.lead{ color: var(--text2); font-size: 16.8px; max-width: 70ch; margin: 14px 0 18px; }
.lead--center{ margin-left:auto; margin-right:auto; text-align:center; }
.microcopy{ color: var(--muted); font-size: 13px; margin-top: 14px; }
.microcopy--center{ text-align:center; }
.muted{ color: var(--muted); }
.small{ font-size: 12.5px; }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12.5px; color: rgba(255,255,255,0.78); }

/* Cards */
.card{
  background: linear-gradient(180deg, rgba(12,19,38,0.78), rgba(12,19,38,0.52));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}
.card-glow{
  position:absolute; inset:-2px; pointer-events:none;
  background:
    radial-gradient(520px 170px at 20% 0%, rgba(47,125,255,0.18), transparent 62%),
    radial-gradient(420px 170px at 80% 10%, rgba(89,198,255,0.12), transparent 62%);
  opacity:0; transition: opacity .18s ease;
}
.card:hover .card-glow{ opacity:1; }
.card-title{ font-weight: 800; letter-spacing: -0.2px; margin: 0 0 8px; font-size:16px; }

/* Layout */
.section{ padding: 60px 0; position:relative; }
.section::before{
  content:""; position:absolute; left:50%; top:0;
  width: min(var(--container), calc(100% - 40px));
  height:1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(120,170,255,0.14), transparent);
}
.section-compact{ padding-top: 36px; padding-bottom: 70px; }
.section-head{ margin-bottom: 18px; }
.section h2{ margin: 0; font-size: 24px; letter-spacing: -0.2px; }
.section-sub{ margin: 10px 0 0; color: var(--text2); max-width: 70ch; }

.grid{ display:grid; gap: 14px; }
.grid-3{ grid-template-columns: 1fr; }
@media (min-width: 860px){ .grid-3{ grid-template-columns: repeat(3, 1fr); } }

/* HERO */
.hero{ position:relative; overflow:hidden; border-bottom: 1px solid rgba(120,170,255,0.12); }
.hero--home{ padding: 78px 0 72px; min-height: 640px; display:flex; align-items:center; }
.hero-bg{ position:absolute; inset:0; pointer-events:none; z-index:0; }

/* ✅ FIX: background musí byť VIDIEŤ -> viac brightness, menej zatemnenia, lepší fokus */
.hero-photo{
  position:absolute; inset:0;
  /* !!! nepoužívame image-set (niekde to padá a skončíš s prázdnym pozadím) */
  background-image: url("assets/bg/rack_hero.jpg");
  background-position: 78% 38%;
  background-size: cover;
  background-repeat: no-repeat;

  transform: scale(1.04);
  opacity: 1;

  /* vyraznejsie, “cool” enterprise */
  filter: contrast(1.40) brightness(1.22) saturate(1.10);
}

/* jemná modrá glazúra aby to sedelo do palety */
.hero-photo::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px 520px at 75% 25%, rgba(89,198,255,0.18), transparent 60%),
    linear-gradient(90deg, rgba(7,11,20,0.55), rgba(7,11,20,0.15) 55%, rgba(7,11,20,0.25));
  mix-blend-mode: multiply;
}

/* zjemnená vignette (už to neudusí foto) */
.hero-vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 700px at 50% 55%, rgba(0,0,0,0.02), rgba(0,0,0,0.28));
}

/* LED overlay */
.hero-layer{
  position:absolute; inset:-70px -40px -140px -40px;
  width: calc(100% + 80px); height: calc(100% + 210px);
  transform: translate3d(var(--px), var(--py), 0);
  will-change: transform;
}
.hero-leds{ opacity: 0.55; mix-blend-mode: screen; }
.hero-leds .led{ fill: rgba(89,198,255,0.92); opacity: 0.35; }

.hero-scan{
  position:absolute; inset:0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.00) 35%,
    rgba(89,198,255,0.10) 48%,
    rgba(255,255,255,0.04) 52%,
    transparent 70%);
  opacity: 0.0;
  transform: translateX(-20%);
  animation: scanSweep 7.2s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes scanSweep{
  0%{ opacity:0; transform: translateX(-22%); }
  25%{ opacity:0.65; }
  50%{ opacity:0.18; transform: translateX(22%); }
  100%{ opacity:0; transform: translateX(26%); }
}

.hero-dust{
  position:absolute; inset:0;
  opacity: 0.10;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.40), transparent 60%),
    radial-gradient(1px 1px at 70% 20%, rgba(255,255,255,0.35), transparent 60%),
    radial-gradient(1.6px 1.6px at 60% 60%, rgba(255,255,255,0.25), transparent 60%),
    radial-gradient(1px 1px at 35% 75%, rgba(255,255,255,0.30), transparent 60%),
    radial-gradient(1.4px 1.4px at 82% 72%, rgba(255,255,255,0.22), transparent 60%);
  animation: dustFloat 10s ease-in-out infinite;
}
@keyframes dustFloat{
  0%,100%{ transform: translate3d(0,0,0); opacity:0.10; }
  50%{ transform: translate3d(10px, -12px, 0); opacity:0.13; }
}

/* scrim už len jemný – čitateľnosť rieši hero-panel */
.hero-scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(1000px 620px at 50% 46%, rgba(7,11,20,0.12), rgba(7,11,20,0.40)),
    linear-gradient(180deg, rgba(7,11,20,0.18), rgba(7,11,20,0.38));
}

/* hero layout */
.hero-inner{ position:relative; z-index:1; display:grid; gap: 18px; }
.hero-inner--center{ justify-items:center; text-align:center; }
.hero-copy--center{ max-width: 980px; }

/* ✅ Glass panel behind text (enterprise) */
.hero-panel{
  padding: 26px 22px 22px;
  border-radius: 24px;
  background: rgba(7,11,20,0.42);
  border: 1px solid rgba(120,170,255,0.16);
  box-shadow: 0 26px 90px rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
}
@media (max-width: 520px){
  .hero-panel{ padding: 18px 14px 16px; border-radius: 20px; }
}

.hero-title-backdrop{
  font-weight: 900;
  letter-spacing: -0.06em;
  font-size: clamp(46px, 8vw, 96px);
  line-height: 0.95;
  color: rgba(255,255,255,0.06);
  text-transform: uppercase;
  margin: 10px 0 10px;
  user-select:none;
  pointer-events:none;
}

/* ✅ H1 split into 2 lines, centered */
.hero-copy h1{
  margin: 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 6px;
  line-height: 1.02;
  letter-spacing: -0.9px;
  color: rgba(255,255,255,0.97);
  text-shadow: 0 22px 70px rgba(0,0,0,0.70);
}
.h1-line1{
  font-size: clamp(46px, 5.6vw, 82px);
  font-weight: 900;
}
.h1-line2{
  font-size: clamp(30px, 3.6vw, 56px);
  font-weight: 850;
  opacity: 0.98;
}

.hero-cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 14px; }
.hero-cta--center{ justify-content:center; }
.trust-chips{ display:flex; flex-wrap:wrap; gap: 10px; margin-top: 16px; }
.trust-chips--center{ justify-content:center; }
.chip{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(12,19,38,0.55);
  color: rgba(255,255,255,0.88);
  font-size: 13px;
}
.chip:hover{ border-color: rgba(89,198,255,0.26); background: rgba(47,125,255,0.10); }

/* Status + footer (nezmenené jadro) */
.card-head{ padding: 18px 18px 0; }
.card-body{ padding: 14px 18px 18px; }

.status-top{ display:flex; justify-content:space-between; gap: 12px; align-items:flex-start; }
.status-pill{
  display:inline-flex; align-items:center; gap:8px;
  font-size: 12px; padding: 6px 10px;
  border-radius:999px;
  border: 1px solid rgba(120,170,255,0.16);
  background: rgba(12,19,38,0.60);
  color: rgba(255,255,255,0.90);
}
.dot{ width: 8px; height: 8px; border-radius:999px; display:inline-block; background: rgba(255,255,255,0.35); }
.dot-live{ background: rgba(89,198,255,0.78); box-shadow: 0 0 0 0 rgba(89,198,255,0.24); animation: liveBreath 2.8s ease-in-out infinite; }
.dot-neutral{ background: rgba(255,255,255,0.30); }
.dot-ok{ background: rgba(89,198,255,0.88); }
.dot-bad{ background: rgba(255,180,84,0.94); }
.dot-pulse{ box-shadow: 0 0 0 0 rgba(120,170,255,0.18); animation: dotPulse 3.2s ease-in-out infinite; }
@keyframes dotPulse{
  0%{ box-shadow: 0 0 0 0 rgba(120,170,255,0.14); }
  60%{ box-shadow: 0 0 0 10px rgba(120,170,255,0.02); }
  100%{ box-shadow: 0 0 0 0 rgba(120,170,255,0.00); }
}
.status-row{
  display:flex; align-items:center; justify-content:space-between; gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(120,170,255,0.10);
}
.status-row:last-of-type{ border-bottom:none; }
.status-left{ display:flex; align-items:center; gap:10px; }
.status-ic{ color: rgba(89,198,255,0.86); font-size: 18px; }
.status-name{ color: rgba(255,255,255,0.90); font-weight: 700; font-size: 13.5px; }
.status-right{ display:flex; align-items:center; gap:10px; }
.status-text{ color: rgba(255,255,255,0.82); font-size: 13px; }
.status-meta{
  display:flex; justify-content:space-between; margin-top: 12px; padding-top: 10px;
  border-top: 1px solid rgba(120,170,255,0.10);
}
.status-foot{ margin-top: 10px; }
.status-row.is-flash{ animation: rowFlash 520ms ease-out 1; }
@keyframes rowFlash{ 0%{ background: rgba(89,198,255,0.10); } 100%{ background: transparent; } }

.status-card--compact{
  transform: scale(0.72);
  transform-origin: top right;
  width: min(520px, 100%);
}

.endbar{ display:grid; gap: 14px; align-items:start; }
.endbar-left h2{ font-size: 26px; margin:0; letter-spacing:-0.3px; }
.endbar-right{ display:flex; justify-content:flex-end; }
@media (min-width: 980px){ .endbar{ grid-template-columns: 1.25fr 0.75fr; } }

.nav-card{ padding: 18px; display:block; }
.micro-link{
  display:inline-flex; gap:8px;
  color: rgba(89,198,255,0.96);
  font-weight: 800;
  font-size: 13.5px;
}
.micro-link:hover{ text-decoration: underline; text-underline-offset: 4px; }
.link-cta{ color: rgba(89,198,255,0.98); font-weight: 850; }
.link-cta:hover{ text-decoration: underline; text-underline-offset: 4px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .ambient-blob, .hero-scan, .hero-dust, .eyebrow .eyedot, .dot-live, .dot-pulse{ animation:none !important; }
  .hero-layer{ transform:none !important; }
}

/* Mobile */
@media (max-width: 520px){
  .hero-leds{ opacity: 0.42; }
  .hero--home{ min-height: 580px; }
  .status-card--compact{ transform-origin: top left; transform: scale(0.78); }
}

/* ===== Under Construction (dočasný index) ===== */
.uc-body{
  margin:0;
  background:#070B14;
  color:rgba(255,255,255,0.92);
  overflow:hidden;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

.uc{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    radial-gradient(900px 520px at 20% 0%, rgba(47,125,255,0.20), transparent 65%),
    radial-gradient(800px 520px at 90% 10%, rgba(89,198,255,0.16), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent 35%);
}

.uc-stage{
  position:relative;
  width:min(1200px, calc(100vw - 48px));
  aspect-ratio: 16 / 9;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(120,170,255,0.16);
  box-shadow: 0 26px 110px rgba(0,0,0,0.62);
  background: rgba(12,19,38,0.25);
}

.uc-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter: contrast(1.06) brightness(0.98) saturate(1.03);
}

/* jemná „glass“ vrstva, aby to bolo enterprise */
.uc-stage::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px 520px at 70% 18%, rgba(89,198,255,0.10), transparent 58%),
    linear-gradient(180deg, rgba(7,11,20,0.10), rgba(7,11,20,0.20));
  pointer-events:none;
}

/* ===== Skrytý hotspot (notebook) =====
   Nastavené podľa tvojho obrázka. Ak bude treba, doladíme percentá. */
.uc-hotspot{
  position:absolute;
  left: 30%;
  top: 35%;
  width: 18%;
  height: 30%;
  display:block;
  background: transparent;
  cursor: pointer;

  /* úplne neviditeľné */
  opacity: 0.001;
}

/* Keyboard accessibility – iba pri tabovaní */
.uc-hotspot:focus-visible{
  opacity: 1;
  outline: 2px solid rgba(89,198,255,0.70);
  outline-offset: 6px;
  border-radius: 14px;
  background: rgba(89,198,255,0.08);
}