:root{
  --bg:#101a2d;
  --bg2:#0d1526;

  --card: rgba(255,255,255,.08);
  --card2: rgba(255,255,255,.06);

  --text:#eef4ff;
  --muted:#c6d2ee;
  --line:rgba(255,255,255,.18);

  --accent:#4f8cff;
  --accent2:#67f5c6;

  --shadow: 0 10px 30px rgba(0,0,0,.30);
  --radius:18px;
  --max:1120px;

  /* hero “enterprise” materiál */
  --heroCard: rgba(210,218,230,.92);

  /* body glass – cieľ: aby presvital detail, nie hmla */
  --glassBg: rgba(255,255,255,.028);
  --glassBorder: rgba(255,255,255,.16);
  --glassBlur: 9px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  background:
    radial-gradient(1200px 650px at 50% -220px, rgba(79,140,255,.16), transparent 70%),
    radial-gradient(900px 550px at 15% 10%, rgba(103,245,198,.10), transparent 65%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  color: var(--text);
  line-height:1.55;
}

a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
p{color:var(--muted); margin: 0 0 14px}
h1,h2,h3{margin:0 0 10px; line-height:1.15}
h1{font-size: clamp(28px, 4vw, 44px)}
h2{font-size: clamp(22px, 3vw, 30px)}
h3{font-size: 18px}
small{color:var(--muted)}
.container{width: min(var(--max), calc(100% - 32px)); margin: 0 auto;}

.skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;}
.skip-link:focus{left:16px; top:16px; width:auto; height:auto; padding:10px 12px; background: rgba(255,255,255,.10); border:1px solid var(--line); border-radius: 12px; z-index: 9999; color: var(--text);}

/* =========================
   HEADER (base)
========================= */
.header{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(16, 26, 45, .78);
  border-bottom: 1px solid var(--line);
}

.nav{display:flex; align-items:center; justify-content:space-between; padding: 14px 0; gap: 12px;}

/* BRAND – BASE je pre tmavé pozadie (footer/sekcie) */
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:900; letter-spacing:.2px;
  color: var(--text);
}
.brand span{display:block}
.header .brand > span{transform: translateY(-2px);}
.brand .sub{font-weight:650; color: var(--muted); font-size:12px; margin-top:-2px}

.brand-logo{
  width:36px; height:36px;
  border-radius:10px;
  object-fit:contain;
  display:inline-block;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
}

.brand-badge{
  width:38px; height:38px;
  border-radius:10px;
  background: url("../img/logo-mark.png") center / contain no-repeat !important;
  box-shadow:none !important;
}

/* MENU */
.menu{display:flex; align-items:center; gap: 10px; flex-wrap: wrap; justify-content: flex-end;}
.menu a{
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  color: rgba(238,244,255,.92);
}
.menu a:hover{
  border-color: var(--line);
  background: rgba(255,255,255,.05);
  color: var(--text);
}

/* CTA – BASE pre tmavé pozadie (sekcie/footer) */
.cta{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 10px 14px; border-radius: 14px;
  border: 1px solid rgba(79,140,255,.45);
  background: rgba(79,140,255,.18);
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
  color: rgba(238,244,255,.96);
  font-weight: 800;
}
.cta:hover{
  border-color: rgba(79,140,255,.75);
  background: rgba(79,140,255,.24);
}
.cta.secondary{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.18);
  box-shadow: none;
  color: rgba(238,244,255,.94);
}
.cta.small{padding:8px 12px; border-radius: 12px; font-weight:800}

/* =========================
   HERO (base)
========================= */
.hero{
  position: relative;
  padding: 64px 0 40px;
  overflow:hidden;
  isolation:isolate;
  z-index:3;
}

.hero::before{
  content:"";
  position:absolute;
  inset:-20px;
  background: url("../img/hero-laptop.png") center/cover no-repeat;
  filter: brightness(.97) contrast(1.08) saturate(1.02);
  opacity: .92;
  z-index:0;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 450px at 30% 10%, rgba(79,140,255,.14), transparent 60%),
    linear-gradient(180deg,
      rgba(224,231,242,.80),
      rgba(206,214,226,.90),
      rgba(16,26,45,.14)
    );
  z-index:1;
}

.hero > .container{position:relative; z-index:2;}

.hero-grid{display:grid; grid-template-columns: 1.2fr .8fr; gap: 18px;}
@media (max-width: 900px){.hero-grid{grid-template-columns:1fr}}

/* =========================
   CARDS (global)
========================= */
.card{
  border-radius: var(--radius);
  padding: 0;
}
.card.pad{padding: 18px}
.card.pad-lg{padding: 22px}

/* =========================
   BODY STAGE (datacenter background)
========================= */
main#content{
  position: relative;
  isolation: isolate;
}

/* datacenter vrstva */
main#content::before{
  content:"";
  position:absolute;
  inset:0;
  background: url("../img/hero-datacenter.png") center/cover no-repeat;
  background-position: center 20% !important;
  filter: contrast(1.85) saturate(1.65) brightness(1.06);
  opacity: .98;
  z-index:0;
  pointer-events:none;
}

/* overlay */
main#content::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.03),
      rgba(255,255,255,0) 45%,
      rgba(0,0,0,.08)
    ),
    radial-gradient(1200px 560px at 45% 20%, rgba(79,140,255,.16), transparent 62%),
    linear-gradient(180deg, rgba(13,21,38,.08), rgba(13,21,38,.38));
  z-index:1;
  pointer-events:none;
}

@media (min-width: 1100px){
  main#content::before{ background-attachment: fixed; }
}

main#content > *{ position: relative; z-index:2; }

/* =========================
   REAL GLASS (sekcie)
========================= */
.section .card,
.section .service,
.section .notice,
.section .code,
.section .badge{
  backdrop-filter: blur(var(--glassBlur));
  -webkit-backdrop-filter: blur(var(--glassBlur));
}

/* hlavné karty v sekciách */
.section .card{
  background: var(--glassBg) !important;
  border: 1px solid var(--glassBorder) !important;
  box-shadow:
    0 14px 36px rgba(2,6,23,.42),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* service cards (grid) */
.service{
  padding: 16px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.022) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 12px 28px rgba(2,6,23,.38);
}
.service h3{margin-bottom: 8px}
.service p{margin-bottom: 12px; color: rgba(238,244,255,.84) !important;}
.service a.link{color: var(--accent); font-weight: 850;}

/* badges (dark sekcie) */
.badges{display:flex; flex-wrap:wrap; gap:8px; margin-top: 10px;}
.badge{
  display:inline-flex; gap:8px; align-items:center;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  color: rgba(238,244,255,.92);
  font-size: 13px;
}
.badge b{color: var(--text); font-weight: 850;}

/* =========================
   SECTIONS / LAYOUT
========================= */
.section{padding: 22px 0}
.grid{display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px;}
@media (max-width: 900px){.grid{grid-template-columns:1fr}}

.two-col{display:grid; grid-template-columns: 1fr 1fr; gap: 12px;}
@media (max-width: 900px){.two-col{grid-template-columns:1fr}}

.list{margin: 0; padding-left: 18px; color: rgba(238,244,255,.84);}
.list li{margin: 8px 0}

.hr{height:1px; background: rgba(255,255,255,.14); margin: 14px 0}

.notice {
  color: #111827; /* tmavá sivá / takmer čierna */
}

.code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  color: var(--text);
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.14);
  padding: 2px 6px;
  border-radius: 8px;
}

/* =========================
   INLINE BACKGROUND OVERRIDE
========================= */
.section .card[style],
.section .card.pad[style],
.section .card.pad-lg[style]{
  background: var(--glassBg) !important;
}

/* =========================
   OVERRIDES – LIGHT AREAS (HEADER + HERO)
========================= */
.header{
  background: var(--heroCard) !important;
  border-bottom: 1px solid rgba(15,23,42,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.header .brand{ color:#0f172a !important; }
.header .brand .sub{ color: rgba(15,23,42,.72) !important; }
.header .menu a{ color: rgba(15,23,42,.86) !important; }
.header .menu a:hover{
  border-color: rgba(15,23,42,.12);
  background: rgba(15,23,42,.06);
  color: #0f172a !important;
}

.header .cta{
  border: 1px solid rgba(37, 99, 235, .32) !important;
  background: rgba(37, 99, 235, .12) !important;
  box-shadow: none !important;
  color: rgba(15, 23, 42, .92) !important;
}
.header .cta:hover{
  background: rgba(37, 99, 235, .16) !important;
  border-color: rgba(37, 99, 235, .48) !important;
}
.header .cta.secondary{
  background: rgba(15,23,42,.06) !important;
  border-color: rgba(15,23,42,.12) !important;
  color: #0f172a !important;
}

.hero .card{
  background: var(--heroCard) !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  box-shadow: 0 12px 30px rgba(2,6,23,.18) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.hero h1,.hero h2,.hero h3{ color:#0f172a !important; }
.hero p,.hero small,.hero li{ color: rgba(15,23,42,.78) !important; }
.hero b{ color:#0f172a !important; }
.hero a{ color: rgba(15,23,42,.86) !important; }
.hero a:hover{ color:#1d4ed8 !important; }

.hero .badge{
  border: 1px solid rgba(15,23,42,.12) !important;
  background: rgba(15,23,42,.06) !important;
  color: rgba(15,23,42,.86) !important;
}
.hero .badge b{ color:#0f172a !important; }

.hero .cta{
  border: 1px solid rgba(37, 99, 235, .32) !important;
  background: rgba(37, 99, 235, .12) !important;
  box-shadow: none !important;
  color: rgba(15, 23, 42, .92) !important;
}
.hero .cta:hover{
  background: rgba(37, 99, 235, .16) !important;
  border-color: rgba(37, 99, 235, .48) !important;
}
.hero .cta.secondary{
  background: rgba(15,23,42,.06) !important;
  border-color: rgba(15,23,42,.12) !important;
  color: #0f172a !important;
}

.hero .card[style],
.hero .card.pad[style],
.hero .card.pad-lg[style]{
  background: var(--heroCard) !important;
}

/* =================================================
   FOOTER – logo pri texte, ale názov centrovaný nad scope
================================================= */
.footer{
  padding: 26px 0 40px;
  border-top: 1px solid rgba(255,255,255,.14);
  margin-top: 22px;
  background: #0b1220;
  color: rgba(238,244,255,.90);
}

.footer-grid{
  display:flex;
  justify-content:center;
  text-align:center;
}
.footer-grid > div:last-child:not(:first-child){ display:none !important; }

/* brand blok vycentrovaný ako celok */
.footer .brand{
  display:flex !important;
  flex-direction:row !important;
  align-items:flex-start !important;
  justify-content:center !important;
  gap:10px !important;
  width: fit-content !important;
  margin-left:auto !important;
  margin-right:auto !important;
  color: rgba(238,244,255,.96) !important;
}

/* logo */
.footer .brand-logo,
.footer .brand-badge{
  width:36px;
  height:36px;
  filter:none !important;
  margin:0 !important;
}

/* optické zarovnanie: logo o trochu nižšie */
.footer .brand-logo,
.footer .brand-badge{
  position: relative;
  top: 4px; /* ak treba, skús 3px */
}

/* text blok: centrovať názov aj sub nad sebou */
.footer .brand > span{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  text-align:center !important;
  gap:2px !important;
  color: rgba(238,244,255,.96) !important;
  transform: translateY(-2px);
}

/* sub */
.footer .brand .sub{
  color: rgba(238,244,255,.78) !important;
  font-weight:650;
}

/* copyright */
.footer-grid small{
  display:block;
  margin-top:8px;
  color: rgba(238,244,255,.85);
}

/* odkazy vycentrovať (inline div s margin-top) */
.footer-grid > div > div[style*="margin-top"]{
  display:flex !important;
  justify-content:center !important;
  gap:16px !important;
  width:100% !important;
}

/* linky */
.footer a{ color: rgba(238,244,255,.88) !important; }
.footer a:hover{ color:#ffffff !important; }

/* Responsive */
@media (max-width: 900px){
  .nav{padding: 12px 0}
}