/* ===============================
   RESET + HARD SCROLL LOCK
   =============================== */
*{ box-sizing:border-box; }

html, body{
  height:100%;
  margin:0;
  overflow:hidden;
  overscroll-behavior:none;
}

.scroll-root{
  height:100%;
  overflow-y:auto;
  overflow-x:clip;
  touch-action: pan-y;
  overscroll-behavior-x:none;
  -webkit-overflow-scrolling: touch;
  padding-top:56px;
  width:100%;
  max-width:100vw;
  position:relative;
  contain: paint;
}

img, svg, video, canvas{
  max-width:100%;
  height:auto;
  display:block;
}

/* ===============================
   VARIABLES (MINIMAL LUX)
   =============================== */
:root{
  --container-max: 1500px;
  --content-max: 1100px;

  --block-y: 34px;
  --flow-gap: 14px;

  --base-font: 17px;
  --text-shadow: 0 8px 30px rgba(0,0,0,.42);
}

/* ===============================
   BASE
   =============================== */
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#fff;
  font-size: var(--base-font);
}

.panel h1, .panel h2, .panel h3, .panel h4, .panel p{ margin:0; }
.panel ul{ margin:0; }

/* ===============================
   LAYOUT
   =============================== */
.container{
  width:min(var(--container-max), calc(100% - 56px));
  margin:0 auto;
}

.block{ padding: var(--block-y) 0; }

.panel{
  max-width: var(--content-max);
  margin:0 auto;
  text-align:center;
}

.flow{
  display:flex;
  flex-direction:column;
  gap: var(--flow-gap);
  align-items:center;
}

/* ===============================
   GLOBAL ANIMATED BACKGROUND
   =============================== */
.global-bg{
  position:fixed;
  inset:0;
  z-index:-2;
  overflow:hidden;
  pointer-events:none;
  width:100vw;
  background:
    radial-gradient(1100px 700px at 18% 18%, rgba(0,210,255,.22), transparent 62%),
    radial-gradient(1000px 720px at 92% 18%, rgba(90,120,255,.18), transparent 60%),
    radial-gradient(900px 700px at 50% 110%, rgba(0,210,255,.10), transparent 62%),
    linear-gradient(180deg, #0f3358 0%, #081a2c 55%, #040b12 100%);
}

.global-bg::after{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.10) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.08) 0 2px, transparent 3px);
  opacity:.3;
  animation: drift 18s linear infinite;
}

.bubble-layer{ position:absolute; inset:0; }

.b{
  position:absolute;
  border-radius:50%;
  will-change: transform;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.26), transparent 45%),
    radial-gradient(circle at 70% 70%, rgba(45,212,255,.24), transparent 55%);
  border:1px solid rgba(160,235,255,.14);
  animation:bubbleUp linear infinite;
}

@keyframes bubbleUp{
  from{ transform:translateY(120vh); opacity:0; }
  10%{ opacity:.75; }
  to{ transform:translateY(-140vh); opacity:0; }
}
@keyframes drift{
  0%{ transform:translate(-2%,-1%); }
  50%{ transform:translate(2%,1%); }
  100%{ transform:translate(-2%,-1%); }
}

/* 24 bubbles */
.b1{left:4%;width:10px;height:10px;animation-duration:10s}
.b2{left:8%;width:18px;height:18px;animation-duration:14s}
.b3{left:12%;width:34px;height:34px;animation-duration:22s}
.b4{left:16%;width:12px;height:12px;animation-duration:11s}
.b5{left:20%;width:26px;height:26px;animation-duration:18s}
.b6{left:24%;width:44px;height:44px;animation-duration:26s;opacity:.7}
.b7{left:28%;width:10px;height:10px;animation-duration:10s}
.b8{left:32%;width:18px;height:18px;animation-duration:13s}
.b9{left:36%;width:28px;height:28px;animation-duration:19s}
.b10{left:40%;width:12px;height:12px;animation-duration:11s}
.b11{left:44%;width:22px;height:22px;animation-duration:16s}
.b12{left:48%;width:38px;height:38px;animation-duration:24s;opacity:.72}
.b13{left:52%;width:10px;height:10px;animation-duration:9s}
.b14{left:56%;width:18px;height:18px;animation-duration:13s}
.b15{left:60%;width:30px;height:30px;animation-duration:20s}
.b16{left:64%;width:12px;height:12px;animation-duration:10s}
.b17{left:68%;width:24px;height:24px;animation-duration:17s}
.b18{left:72%;width:46px;height:46px;animation-duration:27s;opacity:.7}
.b19{left:76%;width:10px;height:10px;animation-duration:9s}
.b20{left:80%;width:18px;height:18px;animation-duration:13s}
.b21{left:84%;width:34px;height:34px;animation-duration:22s}
.b22{left:88%;width:12px;height:12px;animation-duration:11s}
.b23{left:92%;width:22px;height:22px;animation-duration:16s}
.b24{left:96%;width:10px;height:10px;animation-duration:10s}

/* ===============================
   TOPBAR
   =============================== */
.topbar{
  position:fixed;
  top:0; left:0; right:0;
  height:56px;
  background:rgba(15,17,20,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.1);
  z-index:10;
}

.topbar-wrap{
  height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.topbar-logo img{ height:38px; }

.topbar-right{
  display:flex;
  gap:10px;
  align-items:center;
}

.topbar-label{
  font-size:11px;
  opacity:.7;
  letter-spacing:.14em;
}

.topbar-phone{
  font-weight:800;
  font-size:13px;
  color:#fff;
  text-decoration:none;
}

/* ===============================
   HERO
   =============================== */
.hero-biglogo{
  width:min(900px, 96%);
}

.hero-subtitle{
  font-size: clamp(22px, 2vw, 30px);
  letter-spacing:.16em;
  text-transform:uppercase;
  text-shadow: var(--text-shadow);
  margin-top:6px;
}

.hero-points{
  font-size: clamp(15px, 1.05vw, 18px);
  line-height:1.65;
  text-shadow: var(--text-shadow);
}

.hero-points p + p{ margin-top:10px; }

/* ===============================
   INFO
   =============================== */
.section-main{
  font-size: clamp(28px, 2vw, 36px);
  font-weight:700;
  max-width:1100px;
  text-shadow: var(--text-shadow);
  margin-top:6px;
}

.section-lead{
  max-width:980px;
  font-size: clamp(15px, 1.02vw, 18px);
  line-height:1.75;
  opacity:.92;
  text-shadow: var(--text-shadow);
}

/* ===============================
   ICON
   =============================== */
.drop{ margin:10px 0 4px; }

/* ===============================
   PIVO / LIMO / VÍNO – MINIMAL LUX
   =============================== */
.usage-grid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:28px;
  margin-top:14px;
  align-items:start;
}

.usage{
  max-width:360px;
  margin:0 auto;
  text-align:center;
}

.usage h4{
  font-size:14px;
  letter-spacing:.28em;
  text-transform:uppercase;
  margin:0 0 12px;
  opacity:.95;
  text-shadow: var(--text-shadow);
}

.usage ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.usage li{
  padding-left:0;
  line-height:1.55;
  font-size: clamp(14.5px, 1.03vw, 18px);
  opacity:.92;
  text-shadow: var(--text-shadow);
}

.usage li::before{
  content:"– ";
  opacity:.55;
}

/* ===============================
   TLAKOVÉ LAHVE
   =============================== */
.cylinder-text{
  max-width:900px;
  margin-top:6px;
}

.cylinder-title{
  font-size: clamp(20px, 1.35vw, 26px);
  font-style:italic;
  letter-spacing:.06em;
  text-decoration:underline;
  text-underline-offset:6px;
  text-shadow: var(--text-shadow);
  margin-bottom:12px;
}

.cylinder-text p{
  font-size: clamp(15px, 1.02vw, 18px);
  line-height:1.75;
  opacity:.92;
  text-shadow: var(--text-shadow);
}

.cylinder-text p + p{ margin-top:14px; }

.cylinder-text .highlight{
  font-weight:700;
  opacity:1;
  margin-top:18px;
}

/* ===============================
   SORTIMENT – GLASS CARD
   =============================== */
.sortiment-card{
  width:100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 18px;
  border-radius: 14px;
  background: rgba(10, 16, 24, .34);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 16px 55px rgba(0,0,0,.38);
  backdrop-filter: blur(10px);
}

.sortiment-head{
  text-align:center;
  margin-bottom: 14px;
}

.sortiment-title{
  font-size: clamp(18px, 1.25vw, 22px);
  letter-spacing: .10em;
  text-transform: uppercase;
  text-shadow: var(--text-shadow);
  margin: 0;
}

.sortiment-lead{
  margin-top: 8px;
  font-size: 13.8px;
  opacity: .82;
  text-shadow: var(--text-shadow);
}

.sortiment-body{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items:center;
}

.sortiment-list{
  list-style:none;
  margin:0;
  padding:0;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.sortiment-item{
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
}

.sortiment-name{
  display:block;
  font-weight: 800;
  letter-spacing: .04em;
  color:#fff;           /* žádné barvy */
  text-shadow: var(--text-shadow);
  margin-bottom: 4px;
}

.sortiment-desc{
  display:block;
  font-size: 14px;
  opacity: .86;
  line-height: 1.45;
  text-shadow: var(--text-shadow);
}

.sortiment-visual{
  width: min(170px, 26vw);
  opacity: .95;
  filter: drop-shadow(0 18px 44px rgba(0,0,0,.5));
}

.sortiment-visual img{
  width:100%;
  height:auto;
  display:block;
}

/* Responsive */
@media (max-width: 900px){
  .sortiment-card{ padding: 16px 14px; }
  .sortiment-body{ grid-template-columns: 1fr; }
  .sortiment-list{ text-align:center; }
  .sortiment-visual{ margin: 4px auto 0; width: min(160px, 45vw); }
}



/* ===============================
   KONTAKTY
   =============================== */
.contacts-title{
  font-size:26px;
  letter-spacing:.18em;
  text-shadow:var(--text-shadow);
}

.contacts-line{
  width:44px;
  height:1px;
  background:rgba(255,255,255,.6);
  margin:6px 0 14px;
}

.contacts-meta{
  font-size:13.5px;
  opacity:.85;
}

.contacts-meta a{
  color:#fff;
  text-decoration:none;
  font-weight:600;
}

.contacts-city{
  font-size:24px;
  letter-spacing:.22em;
  margin-top:10px;
  text-shadow:var(--text-shadow);
}

.contacts-note{
  font-size:13.5px;
  opacity:.8;
}

.contacts-address{
  font-size:15.5px;
  line-height:1.6;
  opacity:.92;
}

.contacts-address span{
  font-size:13.5px;
  opacity:.8;
}

.contacts-warning{
  font-size:14px;
  font-weight:700;
  letter-spacing:.04em;
  text-shadow:var(--text-shadow);
}

.contacts-warning a{
  color:#fff;
  text-decoration:none;
  font-size:18px;
}

.contacts-alt{
  font-size:13.5px;
  opacity:.85;
}

/* MAPA */
.contacts-map{
  width:100%;
  max-width:760px;
  margin-top:10px;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 10px 40px rgba(0,0,0,.35);
}

.contacts-map iframe{
  width:100%;
  height:280px;
  border:0;
}

/* ===============================
   FOOTER – MINIMAL
   =============================== */
.site-footer{
  margin-top:26px;
  padding:22px 0 26px;
  border-top:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.28));
}

.footer-inner{
  max-width:820px;
  margin:0 auto;
  text-align:center;
}

.footer-inner h3{
  font-size:16px;
  letter-spacing:.06em;
  margin-bottom:10px;
  text-shadow:var(--text-shadow);
}

.footer-inner p{
  font-size:13.8px;
  line-height:1.7;
  opacity:.88;
}

.footer-copy{
  margin-top:12px;
  font-size:12.2px;
  opacity:.62;
}

/* ===============================
   RESPONSIVE
   =============================== */
@media(max-width:900px){
  .usage-grid{ grid-template-columns:1fr; gap:18px; }
  .topbar-label{ display:none; }
}