:root{
  --bg:#faf6f0;
  --paper:#ffffff;
  --ink:#1a1a1a;
  --muted:#6f6a62;
  --line:#e9e1d8;

  --gold:#c6a470;
  --gold2:#b8945e;

  --radius: 28px;
  --radius2: 34px;

  --shadow: 0 18px 50px rgba(0,0,0,.08);
  --shadow2: 0 10px 24px rgba(0,0,0,.06);

  --max: 1160px;
      --topbar-height: 72px;
}

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      background:var(--bg);
      color:var(--ink);
      font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      line-height:1.6;
    }
    a{color:inherit}
    .container{max-width:var(--max); margin:0 auto; padding:0 20px}

    /* Top nav */
    .topbar{
      position:sticky; top:0; z-index:50;
      background:rgba(250,246,240,.9);
      backdrop-filter: blur(10px);
      border-bottom:1px solid var(--line);
    }
    .topbar-inner{
      display:flex; align-items:center; justify-content:space-between;
      gap:16px; padding:16px 0;
    }
    .brand{
      font-family:"Playfair Display", serif;
      font-weight:600;
      font-size:26px;
      text-decoration:none;
      letter-spacing:.2px;
      white-space:nowrap;
    }
    nav{
      display:flex; gap:22px; align-items:center;
      font-size:14px; color:var(--muted);
    }
    nav a{
      text-decoration:none;
      padding:8px 6px;
      border-radius:12px;
    }
    nav a:hover{color:var(--ink)}
    .phone-pill{
      display:inline-flex; align-items:center; gap:10px;
      background:var(--gold);
      color:#fff;
      text-decoration:none;
      padding:12px 18px;
      border-radius:999px;
      font-weight:600;
      box-shadow: 0 10px 22px rgba(198,164,112,.25);
      white-space:nowrap;
      transition: transform var(--trans-fast) ease, box-shadow var(--trans-fast) ease, filter var(--trans-fast);
    }
    .phone-pill svg{width:16px; height:16px; fill:#fff}
    .phone-pill:hover{ transform:translateY(-3px) scale(1.02); box-shadow:var(--btn-elev); filter:brightness(1.02) }

    /* Hero */
    .hero{
      position:relative;
      padding:42px 0 46px;
      overflow:hidden;
      border-bottom:1px solid var(--line);
    }
      /* Make each section occupy the viewport (taking sticky header into account) */
      section{
        min-height: calc(100vh - var(--topbar-height));
        display:block;
        position:relative;
      }
      /* Anchor behavior: don't offset the intro (#uvod) so clicking it goes fully to top */
      section:not(#uvod){
        scroll-margin-top: calc(var(--topbar-height) + 12px);
      }
      /* Ensure hero fills viewport and content centers vertically */
      .hero{ padding-top:0; padding-bottom:0 }
      .hero .container{ min-height: calc(100vh - var(--topbar-height)); display:flex; align-items:center }
    .hero::before{
      content:"";
      position:absolute; inset:0;
      /* Background managed via inline style on .hero element */
      z-index:0;
    }
    .hero .container{position:relative; z-index:1}
    .hero-grid{
      display:grid;
      grid-template-columns: 1.05fr .95fr;
      gap:30px;
      align-items:center;
      min-height: calc(100vh - var(--topbar-height));
    }
    @media (max-width: 980px){
      .hero-grid{grid-template-columns:1fr; min-height:auto}
      nav{display:none}
    }
    .hero h1{
      margin:0;
      font-family:"Playfair Display", serif;
      font-weight:600;
      font-size:68px;
      line-height:1.02;
      letter-spacing:-.6px;
      text-shadow: 2px 2px 8px rgba(0,0,0,0.4);
    }
    .hero h1 em{
      display:block;
      font-style:italic;
      font-weight:400;
      color:var(--gold);
      text-shadow: 1px 1px 4px rgba(0,0,0,0.4);
    }
    @media (max-width: 640px){
      .hero h1{font-size:40px; line-height:1.1; letter-spacing:-.3px}
    }
    .hero p{
      margin:18px 0 18px;
      max-width: 560px;
      color:#fff;
      font-size:18px;
      text-shadow: 1px 1px 4px rgba(0,0,0,0.35);
    }
    .hero-meta{
      display:flex; align-items:center; gap:10px;
      color:#fff;
      font-size:14px;
      margin:10px 0 18px;
      text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    }
    .hero-buttons{
      display:flex; gap:14px; flex-wrap:wrap;
      margin-top:10px;
    }
    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      gap:10px;
      border-radius:999px;
      padding:14px 22px;
      text-decoration:none;
      font-weight:700;
      letter-spacing:.5px;
      font-size:13px;
    }
    .btn.primary{background:var(--gold); color:#fff; box-shadow:0 10px 22px rgba(198,164,112,.25)}
    .btn.ghost{background:rgba(255,255,255,.65); border:1px solid var(--line); color:var(--ink)}
    .btn:hover{transform:translateY(-1px)}

    /* About block */
    section{padding:50px 0}
    @media (max-width:640px){
      section{padding:40px 0}
    }
    .label{
      text-transform:uppercase;
      letter-spacing:3px;
      font-size:12px;
      color:var(--gold);
      font-weight:700;
    }
    .section-title{
      font-family:"Playfair Display", serif;
      font-size:46px;
      margin:10px 0 50px;
      line-height:1.05;
      font-weight:600;
    }
    @media (max-width:640px){
      .section-title{
        font-size:32px;
        margin:10px 0 40px;
      }
    }
    .two-col{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:34px;
      align-items:start;
    }
    @media (max-width: 980px){ .two-col{grid-template-columns:1fr} }

    .img-card{
      position:relative;
      border-radius: 34px;
      overflow:hidden;
      box-shadow: var(--shadow);
      background:#ddd;
      min-height: 520px;
    }
    .img-card img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
    .stat{
      position:absolute;
      left: 24px;
      bottom: 22px;
      background: rgba(255,255,255,.88);
      border:1px solid var(--line);
      border-radius: 20px;
      padding:16px 18px;
      width: 210px;
      box-shadow: 0 14px 26px rgba(0,0,0,.10);
    }
    .stat .big{
      font-family:"Playfair Display", serif;
      font-size:34px;
      color:var(--gold);
      margin:0;
      line-height:1.0;
    }
    .stat .small{
      margin:6px 0 0;
      text-transform:uppercase;
      letter-spacing:2px;
      font-size:11px;
      color:var(--muted);
      font-weight:700;
    }
    .about h2{
      font-family:"Playfair Display", serif;
      font-size:60px;
      margin:12px 0 16px;
      line-height:1.0;
      font-weight:600;
    }
    @media (max-width:640px){
      .about h2{
        font-size:40px;
        margin:10px 0 12px;
      }
    }
    .about h2 em{display:block; font-style:italic; font-weight:400; color:var(--gold)}
    .about p{color:var(--muted); font-size:17px; margin:0 0 12px}
    .quote{
      margin-top:26px;
      padding-left:16px;
      border-left:4px solid var(--gold);
      font-family:"Playfair Display", serif;
      font-style:italic;
      font-size:22px;
      color:#2a2723;
    }

    /* Cards row (COSMEDIX) */
    .center{text-align:center}
    .subtitle{
      margin:50px auto 0;
      max-width: 760px;
      color:var(--muted);
      font-size:18px;
      padding: 0 20px;
    }
    @media (max-width:640px){
      .subtitle{
        font-size:16px;
        margin:40px auto 0;
        padding:0 16px;
      }
    }
    .cards{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:22px;
      margin-top:70px;
    }
    @media (max-width: 980px){ .cards{grid-template-columns:1fr} }
    .card{
      background: var(--paper);
      border:1px solid var(--line);
      border-radius: 34px;
      padding:28px 26px;
      box-shadow: 0 14px 30px rgba(0,0,0,.06);
    }
    .card h3{
      font-family:"Playfair Display", serif;
      font-size:24px;
      margin:0 0 10px;
      font-weight:600;
    }
    @media (max-width:640px){
      .card h3{
        font-size:20px;
        margin:0 0 8px;
      }
    }
    .card p{margin:0; color:var(--muted)}

    /* Dr Platon dark section */
    .dark{
      background:
        linear-gradient(90deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,.78) 55%, rgba(10,10,10,.45) 100%),
        url("https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/7bb152b0-8d78-4f90-aaeb-24165b40df18_1600w.webp");
      background-size:cover;
      background-position:center;
      color:#fff;
      padding:86px 0;
    }
    .dark .two-col{align-items:center}
    .dark h2{
      font-family:"Playfair Display", serif;
      font-size:56px;
      margin:10px 0 14px;
      line-height:1.0;
      font-weight:600;
    }
    .dark h2 em{display:block; font-style:italic; font-weight:400; color:var(--gold)}
    .dark p{color:rgba(255,255,255,.78); font-size:17px; margin:0 0 18px; max-width: 620px}
    .checks{
      display:grid; grid-template-columns: 1fr 1fr; gap:14px 22px;
      margin-top:18px;
      color:rgba(255,255,255,.86);
      font-size:15px;
    }
    @media (max-width: 980px){ .checks{grid-template-columns:1fr} }
    .check{
      display:flex; gap:10px; align-items:flex-start;
    }
    .check span{
      display:inline-flex; align-items:center; justify-content:center;
      width:22px; height:22px; border-radius:999px;
      background: rgba(198,164,112,.22);
      border:1px solid rgba(198,164,112,.35);
      margin-top:2px;
      flex:0 0 auto;
    }
    .dark .cta-row{margin-top:26px}
    .dark .cta-row .btn{padding:14px 24px}
    .img-right{
      border-radius: 36px;
      overflow:hidden;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.14);
      box-shadow: 0 18px 40px rgba(0,0,0,.35);
      position:relative;
    }
    .img-right img{width:100%; height:100%; display:block; object-fit:cover}
    .note{
      position:absolute;
      left: 22px;
      bottom: 22px;
      background: rgba(40,40,40,.55);
      border: 1px solid rgba(255,255,255,.14);
      backdrop-filter: blur(6px);
      color:#fff;
      padding:16px 16px;
      border-radius: 18px;
      max-width: 330px;
    }
    .note strong{display:block; font-size:16px}
    .note small{color:rgba(255,255,255,.75)}

    /* Pricing */
    .hr{
      height:1px; background:var(--line);
      margin:24px 0 34px;
    }
    .price-block{
      max-width: 860px;
      margin: 0 auto;
    }
    .price-card{
      background: var(--paper);
      border:1px solid var(--line);
      border-radius: 34px;
      padding:26px 26px;
      box-shadow: 0 14px 30px rgba(0,0,0,.06);
      margin-top:18px;
      overflow:auto;
    }
    @media (max-width:640px){
      .price-card{
        padding:18px 16px;
        border-radius:24px;
      }
    }
    .price-card h3{
      font-family:"Playfair Display", serif;
      font-size:28px;
      margin:0 0 10px;
    }
    @media (max-width:640px){
      .price-card h3{
        font-size:20px;
        margin:0 0 8px;
      }
    }
    .row{
      display:flex; justify-content:space-between; gap:14px;
      padding:14px 0;
      border-top:1px solid var(--line);
      color:var(--muted);
      flex-wrap:wrap;
      align-items:flex-start;
    }
    .row:first-of-type{border-top:none}
    .row b{color:var(--ink); font-weight:700; white-space:nowrap}
    table{
      width:100%;
      border-collapse:separate;
      border-spacing:0;
      overflow:auto;
      border-radius: 14px;
      border:1px solid var(--line);
      margin-top:12px;
      background:#fff;
      display:block;
    }
    @media (max-width:640px){
      table{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
      }
    }
    th, td{
      text-align:left;
      padding:12px 12px;
      border-bottom:1px solid var(--line);
      font-size:14px;
      color:var(--muted);
      white-space:nowrap;
    }
    @media (max-width:640px){
      th, td{
        padding:10px 8px;
        font-size:13px;
      }
    }
    th{font-size:12px; text-transform:uppercase; letter-spacing:1.5px; color:var(--muted); background:#fbf9f6}
    tr:last-child td{border-bottom:none}
    /* pricing table improvements */
    table thead th{ background: linear-gradient(90deg,#fbf9f6,#fff) }
    table td:not(:first-child){ text-align:right; font-weight:700; color:var(--ink) }
    table tbody tr:nth-child(odd){ background: linear-gradient(180deg, rgba(250,246,240,.6), rgba(255,255,255,0)) }
    .two-price{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:24px;
      margin-top:26px;
    }
    @media (max-width: 980px){ .two-price{grid-template-columns:1fr} }
    ul{margin:12px 0 0; padding-left:18px; color:var(--muted)}
    li{margin:8px 0}
    .footnote{
      margin-top:18px;
      color:var(--muted);
      font-style:italic;
      text-align:center;
    }

    /* Gallery */
    .gallery{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:18px;
      margin-top:34px;
    }
    @media (max-width: 980px){ .gallery{grid-template-columns:1fr} }
    .gallery img{
      width:100%;
      height: 260px;
      object-fit:cover;
      border-radius: 26px;
      box-shadow: var(--shadow);
      border: 1px solid var(--line);
      background:#ddd;
    }

    /* Contact */
    .contact-grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:22px;
      align-items:start;
      margin-top:30px;
    }
    @media (max-width: 980px){ .contact-grid{grid-template-columns:1fr} }
    .contact-card{
      background: var(--paper);
      border:1px solid var(--line);
      border-radius: 34px;
      padding:26px 26px;
      box-shadow: 0 14px 30px rgba(0,0,0,.06);
    }
    .kv{
      margin-top:14px;
      border-top:1px solid var(--line);
      padding-top:14px;
      color:var(--muted);
      display:grid;
      grid-template-columns: 1fr auto;
      gap:10px 20px;
      align-items:center;
    }
    .kv b{color:var(--ink)}
    .kv-label{ text-transform:uppercase; font-size:12px; letter-spacing:1px; color:var(--muted); font-weight:700 }
    .kv-value{ font-size:16px; color:var(--ink) }
    .contact-link{ display:inline-block; padding:8px 12px; border-radius:999px; background:rgba(198,164,112,0.08); color:var(--ink); text-decoration:none; transition:transform .18s }
    .contact-link:hover{ transform:translateY(-3px); background: linear-gradient(90deg,var(--gold),var(--gold2)); color:#fff }
    iframe{
      width:100%;
      height: 360px;
      border:0;
      border-radius: 26px;
      border:1px solid var(--line);
      box-shadow: var(--shadow);
    }
    @media (max-width:640px){
      iframe{
        height: 280px;
        border-radius:18px;
      }
    }

    footer{
      padding:36px 0 46px;
      border-top:1px solid var(--line);
      color:var(--muted);
      text-align:center;
    }
    .footer-links{
      display:flex; justify-content:center; gap:14px; flex-wrap:wrap;
      margin-top:10px;
      font-size:14px;
    }
    .footer-links a{color:var(--muted); text-decoration:none}
    .footer-links a:hover{color:var(--ink)}
    .scroll-indicator{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  width:40px;
  height:40px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--gold);
  opacity:.9;
  z-index:5;
  pointer-events:none;
}
.scroll-indicator svg{
  width:26px;
  height:26px;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); opacity:.85; }
  50% { transform: translateY(-8px); opacity:1; }
}
.scroll-indicator{ animation:bounce 1.4s infinite; }
/* --- sjednocení radius & shadow --- */
.card,
.contact-card,
.price-card{
  border-radius: var(--radius2);
  box-shadow: var(--shadow2);
}

.btn,
.phone-pill{
  border-radius: 999px;
}

img{
  border-radius: var(--radius2);
}
/* Modern UI enhancements */
:root{
  --trans-fast: 180ms;
  --trans-medium: 280ms;
  --trans-slow: 420ms;
  --btn-elev: 0 12px 30px rgba(198,164,112,0.20);
}

@media (prefers-reduced-motion: reduce){
  .btn, .gallery img, .img-card img, .img-right img, .card{transition:none; animation:none; transform:none}
}

/* Buttons: gradient, hover, focus */
.btn.primary{
  background: linear-gradient(90deg,var(--gold),var(--gold2));
  transition: transform var(--trans-fast) ease, box-shadow var(--trans-fast) ease, filter var(--trans-fast);
}
.btn.primary:hover{ transform:translateY(-4px) scale(1.02); box-shadow:var(--btn-elev); filter:brightness(1.02)}
.btn.primary:active{ transform:translateY(-1px) scale(.995)}
.btn.primary:focus-visible{outline:3px solid rgba(198,164,112,0.18); outline-offset:4px; border-radius:999px}

/* Ghost button subtle lift */
.btn.ghost{ transition: transform var(--trans-medium), box-shadow var(--trans-medium), background var(--trans-medium) }
.btn.ghost:hover{ transform:translateY(-3px); background: rgba(255,255,255,0.9); box-shadow:0 8px 20px rgba(0,0,0,.06) }

/* Make buttons hit-target larger on small screens */
@media (max-width:640px){
  .btn{padding:14px 18px; font-size:15px}
  .phone-pill{padding:14px 16px}
}

/* Image hover interactions */
.img-card img, .img-right img, .gallery img{
  transition: transform var(--trans-medium) cubic-bezier(.2,.9,.2,1), filter var(--trans-medium), box-shadow var(--trans-medium);
  will-change: transform, filter;
}
.img-card:hover img, .img-right:hover img, .gallery img:hover{
  transform: scale(1.05) translateY(-6px);
  filter: saturate(1.06) contrast(1.02);
  box-shadow: 0 30px 60px rgba(0,0,0,.12);
}

/* Gallery staggered hover (slight parallax) */
.gallery img{ transform-origin:center }
.gallery img:hover{ transform: scale(1.06) translateY(-8px) rotate(-0.6deg) }

/* Card lift on hover */
.card, .price-card, .contact-card{ transition: transform var(--trans-medium), box-shadow var(--trans-medium) }
.card:hover, .price-card:hover, .contact-card:hover{ transform: translateY(-6px); box-shadow: 0 22px 46px rgba(0,0,0,.08) }

/* Decorative accent under headings */
.section-title{ position:relative }
.section-title::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-28px;
  width:56px;
  height:4px;
  background: linear-gradient(90deg,var(--gold),var(--gold2));
  border-radius:999px;
  box-shadow:0 6px 18px rgba(198,164,112,.14);
}

/* subtle floating animation for scroll-indicator */
@keyframes floaty { 0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)} }
.scroll-indicator{ animation: floaty 2.2s ease-in-out infinite }

/* Accessible focus for links */
a:focus-visible{outline:3px solid rgba(0,0,0,.08); outline-offset:3px; border-radius:6px}

/* Floating contact FABs */
.fab-container{
  position:fixed;
  right:18px;
  bottom:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:120;
}
.fab{
  width:52px;
  height:52px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  text-decoration:none;
  box-shadow:0 10px 26px rgba(0,0,0,.14);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.fab:hover{ transform:translateY(-6px); box-shadow:0 20px 40px rgba(0,0,0,.18) }
.fab.whatsapp{ background:#25D366 }
.fab.fb{ background:#1877F2 }
.fab.insta{ background: radial-gradient(circle at 30% 20%, #feda75, #fa7e1e 30%, #d62976 60%, #962fbf 80%); }
.fab svg{ filter:drop-shadow(0 1px 0 rgba(0,0,0,.06)); }

@media (max-width:640px){ .fab{ width:46px; height:46px } .fab-container{ right:12px; bottom:12px } }

/* Slideshow */
#slideshow{
  margin:40px auto;
  max-width:1100px;
  width:100%;
}

.slideshow-container{
  position:relative;
  width:100%;
  overflow:hidden;
  border-radius:12px;
  background:#f5f5f5;
  aspect-ratio:16/9;
  display:block;
  box-shadow:0 12px 32px rgba(0,0,0,0.12);
}

.slideshow-container img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:none;
  transition:opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.slideshow-container img.active{
  display:block;
  opacity:1;
}

.slideshow-dots{
  display:flex;
  gap:10px;
  justify-content:center;
  margin-top:24px;
  flex-wrap:wrap;
}

.slideshow-dots .dot{
  width:12px;
  height:12px;
  border-radius:50%;
  border:2px solid var(--gold);
  background:transparent;
  cursor:pointer;
  transition:all 0.3s ease;
  padding:0;
}

.slideshow-dots .dot.active{
  background:var(--gold);
  transform:scale(1.15);
}

.slideshow-dots .dot:hover{
  background:var(--gold);
  opacity:0.8;
}

@media (max-width:768px){
  .slideshow-container{aspect-ratio:16/10}
  .slideshow-dots .dot{width:10px;height:10px;}
}
@media (max-width:640px){
  .slideshow-container{aspect-ratio:4/3}
  .slideshow-dots{
    bottom:12px;
  }
  .slideshow-dots .dot{
    width:8px;
    height:8px;
    margin:0 4px;
  }
}

/* Cookie Consent Banner */
.cookie-banner{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background: var(--paper);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(0,0,0,.10);
  padding:20px;
  z-index:999;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  font-size:14px;
}

.cookie-banner.show{
  transform: translateY(0);
}

.cookie-content{
  max-width:1160px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
}

.cookie-text{
  flex:1;
  min-width:280px;
}

.cookie-text strong{
  display:block;
  color:var(--ink);
  font-weight:700;
  margin-bottom:6px;
}

.cookie-text p{
  margin:0;
  color:var(--muted);
  line-height:1.5;
}

.cookie-buttons{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  min-width:240px;
}

.cookie-btn{
  padding:10px 16px;
  border:none;
  border-radius:999px;
  font-weight:600;
  font-size:13px;
  cursor:pointer;
  white-space:nowrap;
  transition: transform 0.18s, box-shadow 0.18s;
}

.cookie-btn.primary{
  background:var(--gold);
  color:#fff;
  box-shadow:0 6px 16px rgba(198,164,112,.18);
}

.cookie-btn.primary:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(198,164,112,.25);
}

.cookie-btn.ghost{
  background:transparent;
  color:var(--muted);
  border:1px solid var(--line);
}

.cookie-btn.ghost:hover{
  background:rgba(198,164,112,.06);
  color:var(--ink);
}

@media (max-width:640px){
  .cookie-content{
    flex-direction:column;
    align-items:stretch;
    gap:16px;
  }
  .cookie-text, .cookie-buttons{
    min-width:auto;
  }
  .cookie-text{
    flex:none;
  }
  .cookie-text p{
    font-size:13px;
  }
  .cookie-buttons{
    width:100%;
    flex-direction:column;
  }
  .cookie-btn{
    flex:1;
    width:100%;
  }
}