/* styles.css */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap");

:root{
  --bg:#060606;
  --panel:#0d0d0d;
  --panel2:#121212;
  --text:#fff;
  --muted:rgba(255,255,255,.72);
  --stroke:rgba(255,255,255,.10);
  --accent:#ffd400; /* žlutá */
  --accent-strong:#ffe066;
  --accent-soft:rgba(255,212,0,.18);
  --accent-glow:0 0 40px rgba(255,212,0,.25);
  --radius:18px;
  --max:1120px;
  --shadow:0 18px 50px rgba(0,0,0,.55);
  --font-body:"Manrope", "Space Grotesk", sans-serif;
  --font-head:"Space Grotesk", "Manrope", sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(900px 420px at 12% 0%, rgba(255,212,0,.20), transparent 58%),
    radial-gradient(700px 420px at 92% 12%, rgba(255,212,0,.16), transparent 55%),
    linear-gradient(180deg, rgba(255,212,0,.08), transparent 35%),
    var(--bg);
  color:var(--text);
  font-family: var(--font-body);
  line-height:1.55;
}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
h1,h2,h3{font-family: var(--font-head)}
::selection{background: rgba(255,212,0,.35); color:#0a0a0a}

section[id]{scroll-margin-top:110px}

.container{max-width:var(--max); margin:0 auto; padding:0 20px}

.skip{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip:focus{
  left:20px; top:16px; width:auto; height:auto;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--stroke);
  background:rgba(0,0,0,.85);
  z-index:9999;
}

.header{
  position:sticky; top:0; z-index:50;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(14px);
  border-bottom:1px solid var(--stroke);
}
.header__inner{
  height:84px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.brand__logo{height:64px; width:auto; display:block}

.burger{
  width:48px; height:48px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.04);
  cursor:pointer;
  display:grid;
  place-items:center;
}
.burger span{
  width:22px; height:3px;
  background: var(--accent);
  display:block;
  border-radius:3px;
  transition: transform .18s ease, opacity .18s ease;
}
.burger span:nth-child(2){margin:5px 0}
.burger[aria-expanded="true"] span:nth-child(1){transform: translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform: translateY(-8px) rotate(-45deg)}

.menu{
  position:fixed;
  inset:84px 0 auto 0;
  background: rgba(10,10,10,.92);
  border-bottom:1px solid var(--stroke);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
  transform: translateY(-12px);
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
  padding:18px 20px;
}
.menu.is-open{
  transform: translateY(0);
  opacity:1;
  pointer-events:auto;
}
.menu .container{display:grid; gap:8px}
.menu__link{
  display:block;
  width:100%;
  padding:14px 20px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.86);
  text-transform: uppercase;
  letter-spacing: .6px;
  font-weight: 600;
}
.menu__link:hover{border-color:rgba(255,212,0,.35)}
.menu__link.is-active{
  border-color: rgba(255,212,0,.55);
  box-shadow: 0 0 0 6px rgba(255,212,0,.10) inset;
}

.heroBand{
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.heroBand::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(0deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.56) 28%, rgba(0,0,0,.30) 56%, rgba(0,0,0,.08) 82%, rgba(0,0,0,0) 100%),
    linear-gradient(110deg, rgba(0,0,0,.34) 10%, rgba(0,0,0,.18) 42%, rgba(0,0,0,.28) 100%),
    url("images/IMG_8683.avif") center 36% / cover no-repeat;
}
.heroBand .container{
  position: relative;
  z-index:1;
}
.hero{
  padding:120px 0 20px;
}
.section--heroLead{
  padding-top: 10px;
  padding-bottom: 34px;
}
.hero__title{
  margin:0;
  font-size: clamp(36px, 4.3vw, 56px);
  text-transform: uppercase;
  letter-spacing: .6px;
}
.hero__title span{
  color: var(--accent);
  text-shadow: 0 0 22px rgba(255,212,0,.35);
}
.hero__kicker{
  margin:0 0 10px;
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--accent);
}
.hero__subtitle{
  margin:12px 0 18px;
  font-size: clamp(16px, 2.1vw, 20px);
  color: rgba(255,255,255,.82);
  max-width: 640px;
}
.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.section{padding:46px 0}
.section--tight{padding:26px 0}
.section--accent{
  background:
    linear-gradient(180deg, rgba(255,212,0,.16), rgba(255,212,0,0) 52%),
    rgba(255,255,255,.01);
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.section__head{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:20px;
}
.section__kicker{
  margin:0;
  text-transform: uppercase;
  letter-spacing: .26em;
  font-size: 12px;
  color: var(--accent);
}
.section__title{
  margin:0;
  font-size: clamp(26px, 3.2vw, 40px);
  text-transform: uppercase;
  letter-spacing: .7px;
}
.section__intro{
  margin:0;
  color: rgba(255,255,255,.76);
  max-width: 720px;
}

.lead{
  margin:0;
  font-size: clamp(18px, 2.0vw, 26px);
  color: rgba(255,255,255,.92);
}

.text{
  margin:0;
  font-size: 18px;
  color: var(--muted);
}

.slider{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  overflow:hidden;
  box-shadow: var(--shadow);
}
.slider__viewport{overflow:hidden}
.slider__track{
  display:flex;
  transition: transform .34s ease;
  will-change: transform;
}
.slide{
  min-width:100%;
  aspect-ratio: 16/9;
  position:relative;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
.slide picture{
  display:block;
  width:100%;
  height:100%;
}
.slide img{
  width:100%;
  height:100%;
  object-fit: cover;
  filter: contrast(1.05) saturate(1.03);
}
.slider__controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  border-top:1px solid rgba(255,255,255,.08);
}

.btn{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
  font-weight:700;
}
.btn--accent{
  background: var(--accent);
  color:#111;
  border-color: rgba(255,212,0,.65);
  box-shadow: var(--accent-glow);
}
.btn--accent:hover{filter: brightness(1.05)}
.btn--ghost:hover{border-color:rgba(255,212,0,.35)}

.dots{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
}
.dot{
  width:22px;
  height:22px;
  padding:0;
  border:0;
  border-radius:999px;
  background: transparent;
  cursor:pointer;
  position:relative;
  display:grid;
  place-items:center;
}
.dot::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.32);
  background: rgba(255,255,255,.18);
  transition: width .24s ease, background .24s ease, border-color .24s ease, box-shadow .24s ease;
}
.dot:hover::before{
  background: rgba(255,255,255,.34);
}
.dot.is-active::before{
  width:22px;
  border-color: rgba(255,212,0,.85);
  background: linear-gradient(90deg, rgba(255,212,0,.95), rgba(255,226,112,.95));
  box-shadow: 0 0 14px rgba(255,212,0,.45);
}

.machine__title{
  margin:0 0 18px;
  text-align:center;
  text-transform: uppercase;
  letter-spacing: .7px;
  font-size: clamp(22px, 2.4vw, 28px);
}

.machine{
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap:18px;
  align-items:start;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding:18px;
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
}

.rule{
  width:100%;
  height:2px;
  background: linear-gradient(90deg, var(--accent), rgba(255,255,255,.2));
  margin:6px 0 12px;
}
.machine__headline{
  margin:0;
  font-size: 18px;
  color: rgba(255,255,255,.92);
  font-weight: 750;
}
.machine__body .text{color: rgba(255,255,255,.78)}

.photoGrid{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
.photo{
  margin:0;
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: var(--panel2);
  box-shadow: 0 12px 34px rgba(0,0,0,.45);
}
.photo img{
  width:100%;
  height:240px;
  object-fit: cover;
}
.photo picture,
.mediaCard picture{
  display:block;
}

.stepGrid{
  display:grid;
  gap:12px;
  align-items:stretch;
}
.stepCard{
  display:flex;
  flex-direction:column;
  height:100%;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding:14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.4);
}
.stepCard__num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:999px;
  background: var(--accent);
  color:#111;
  font-weight:700;
  margin-bottom:8px;
}
.stepCard h3{
  margin:0 0 6px;
  font-size: 18px;
}

.skinCard{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding:16px;
  box-shadow: 0 12px 34px rgba(0,0,0,.45);
}
.skinTable{
  width:100%;
  border-collapse: collapse;
  font-size: 15px;
}
.skinTable th,
.skinTable td{
  padding:10px 8px;
}
.skinTable th{
  text-align:left;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 11px;
  background: rgba(255,212,0,.18);
  color: var(--accent);
}
.skinTable td:last-child{
  text-align:right;
  font-weight:700;
  color: var(--accent-strong);
}
.skinTable tr + tr td{
  border-top:1px solid rgba(255,255,255,.08);
}
.note{
  margin:10px 0 0;
  font-size: 13px;
  color: rgba(255,255,255,.65);
}

.split{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:22px;
  align-items:stretch;
}
.split__content{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.mediaCard{
  margin:0;
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background: var(--panel2);
  box-shadow: var(--shadow);
}
.mediaCard__caption{
  padding:12px 14px 16px;
  font-size: 14px;
  color: rgba(255,255,255,.72);
  border-top:1px solid rgba(255,255,255,.08);
}

.list{
  margin:0;
  padding-left:18px;
  color: rgba(255,255,255,.78);
}
.list li{margin:6px 0}

.priceGrid{
  display:grid;
  gap:18px;
}
.priceCard{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding:18px;
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
}
.priceCard__title{
  margin:0 0 12px;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: .6px;
}
.priceTable{
  width:100%;
  border-collapse: collapse;
  font-size: 16px;
}
.priceTable th,
.priceTable td{
  padding:12px 10px;
}
.priceTable th{
  text-align:left;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 12px;
  background: var(--accent);
  color:#111;
  border-radius: 0;
}
.priceTable th:first-child{
  border-top-left-radius:12px;
  border-bottom-left-radius:12px;
}
.priceTable th:last-child{
  border-top-right-radius:12px;
  border-bottom-right-radius:12px;
  text-align:right;
}
.priceTable tr + tr td{
  border-top:1px solid rgba(255,255,255,.08);
}
.priceTable td:last-child{
  text-align:right;
  font-weight:700;
  color: var(--accent-strong);
}
.priceNote{
  margin:14px 0 0;
  font-size: 14px;
  color: rgba(255,255,255,.65);
}
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  text-transform: uppercase;
  letter-spacing:.14em;
  background: rgba(255,212,0,.14);
  border:1px solid rgba(255,212,0,.35);
  color: var(--accent);
  margin:0 0 12px;
}

.contactGrid{
  display:grid;
  gap:16px;
}
.contactCard{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding:16px;
  box-shadow: 0 12px 36px rgba(0,0,0,.45);
}
.contactCard h3{
  margin:0 0 8px;
  font-size:16px;
  text-transform: uppercase;
  letter-spacing:.16em;
  color: rgba(255,255,255,.88);
}
.contactList{
  margin:0;
  padding:0;
  list-style:none;
  color: rgba(255,255,255,.78);
}
.contactList li{margin:6px 0}
.contactText{
  margin:0;
  color: rgba(255,255,255,.78);
  font-style: normal;
}
.contactCard--map{
  grid-column: 1 / -1;
}
.mapCard{
  position:relative;
  display:block;
  aspect-ratio: 1200 / 675;
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
}
.mapCard__frame{
  width:100%;
  height:100%;
  display:block;
  border:0;
  filter: saturate(.92) contrast(1.02);
}
.mapCard__cta{
  position:absolute;
  left:12px;
  bottom:12px;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(0,0,0,.7);
  color:#fff;
  border:1px solid rgba(255,255,255,.2);
  font-size:12px;
  letter-spacing:.08em;
  text-transform: uppercase;
}

.faqList{
  display:grid;
  gap:10px;
}
.faqItem{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  overflow:hidden;
}
.faqItem summary{
  cursor:pointer;
  padding:14px 16px;
  font-weight:600;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.faqItem summary::-webkit-details-marker{display:none}
.faqItem summary::after{
  content:"+";
  color: var(--accent);
  font-size:18px;
}
.faqItem[open] summary{
  color: var(--accent);
}
.faqItem[open] summary::after{
  content:"–";
}
.faqItem p{
  margin:0;
  padding:0 16px 16px;
}

.placeholder{
  color: rgba(255,255,255,.55);
  font-style: italic;
}

.reveal{
  opacity:0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible{
  opacity:1;
  transform: translateY(0);
}
.reveal.stagger{
  transition-delay: var(--delay, 0ms);
}

.ctaBar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:70;
  display:none;
  gap:8px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(12px);
  border-top:1px solid rgba(255,255,255,.1);
  box-shadow: 0 -12px 30px rgba(0,0,0,.45);
}
.ctaBar__link{
  flex:1;
  text-align:center;
  padding:12px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  font-weight:700;
  text-transform: uppercase;
  letter-spacing:.08em;
  font-size:12px;
  white-space: nowrap;
}
.ctaBar__link--call{
  background: var(--accent);
  color:#111;
  border-color: rgba(255,212,0,.65);
}

.focus-ring:focus-visible,
a:focus-visible,
button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

.footer{
  padding:40px 0 50px;
  border-top:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.35);
}
.footer__copy{
  margin:0;
  color: rgba(255,255,255,.80);
  font-size: 14px;
}

/* responsive */
@media (min-width: 980px){
  .menu{
    position:static;
    inset:auto;
    transform:none;
    opacity:1;
    pointer-events:auto;
    background:transparent;
    border:0;
    padding:0;
    display:flex;
    flex-direction:row;
    gap:10px;
    align-items:center;
    justify-content:flex-end;
  }
  .menu__link{
    padding:10px 12px;
    background: transparent;
    border-color: transparent;
    color: rgba(255,255,255,.78);
    text-transform: uppercase;
    font-weight:650;
    letter-spacing:.4px;
  }
  .menu__link:hover{color:#fff; border-color:rgba(255,212,0,.30)}
  .menu__link.is-active{color:#fff}
  .burger{display:none}

  /* Align "3 kroky" cards with "Doporučené časy" card in desktop layout */
  #how .split__content:first-child .stepGrid{
    margin-top: 28px;
  }

  /* Cosmetics: keep text and image cards at equal height on desktop without stretching the image */
  #cosmetics .split__media{
    display:flex;
  }
  #cosmetics .split__media .mediaCard{
    flex:1;
  }
  #cosmetics .split__media .mediaCard picture,
  #cosmetics .split__media .mediaCard img{
    width:100%;
    height:100%;
  }
  #cosmetics .split__media .mediaCard img{
    object-fit: cover;
  }
}

@media (max-width: 980px){
  .machine{grid-template-columns: 1fr}
  .photoGrid{grid-template-columns: 1fr}
  .photo img{height:260px}
  .split{grid-template-columns: 1fr}
  #cosmetics .split__media .mediaCard{
    max-width: 560px;
    margin:0 auto;
  }
  #cosmetics .split__media .mediaCard picture,
  #cosmetics .split__media .mediaCard img{
    width:100%;
  }
  #cosmetics .split__media .mediaCard img{
    height:auto !important;
    object-fit: contain;
  }
  .dots{gap:5px}
  .dot{
    width:18px;
    height:18px;
  }
  .dot::before{
    width:6px;
    height:6px;
  }
  .dot.is-active::before{width:14px}
  body{padding-bottom: calc(86px + env(safe-area-inset-bottom))}
  .ctaBar{display:flex}
}

@media (min-width: 900px){
  .priceGrid{grid-template-columns: repeat(2, 1fr)}
  .contactGrid{grid-template-columns: repeat(2, 1fr)}
  .stepGrid{
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
  }
}

@media (prefers-reduced-motion: reduce){
  .reveal,
  .reveal.is-visible{
    transition:none;
    opacity:1;
    transform:none;
  }
}