:root{ --purple:#1f0075; --ink:#1B123F; --lav:#7E6CE3; --bg:#FFFFFF; --text:#17161A; }
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior: smooth;}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:radial-gradient(1200px 600px at 10% -10%, #F0EDFF 0%, #FFFFFF 60%) fixed}

@font-face {
    font-family: "DynaPuff";
    src: url("../fonts/DynaPuff-Regular.woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Artistic background */
.bg-art{position:fixed;inset:0;z-index:-2;overflow:hidden}
.bg-art svg{position:absolute;filter:blur(24px);opacity:.35}
.bg-art .blob1{top:-10%;left:-8%;width:40vw}
.bg-art .blob2{bottom:-15%;right:-10%;width:46vw}

/* Simple header (no logo duplication) */
header{position:sticky;top:0;background:rgba(255,255,255,.8);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid rgba(0,0,0,.05);z-index:10}
.wrap{max-width:1200px;margin:auto;padding:12px 16px}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px}
.title{font-family:"DynaPuff",serif;font-weight:700;color:var(--ink);font-size:22px}
.lang{display:flex;gap:8px}
.lang button{border:1px solid var(--purple);color:var(--purple);background:transparent;padding:6px 12px;border-radius:999px;cursor:pointer}
.lang button.active,.lang button:hover{background:var(--purple);color:#fff}

/* Ribbon with six links (localized) */
.ribbon{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;padding:10px 16px;background:linear-gradient(90deg,#efeafe,#f5f3ff);border-bottom:1px solid #eee}
.ribbon a{--c: var(--lav);display:inline-block;color:var(--purple);border:1px solid var(--c);padding:8px 12px;border-radius:999px;text-decoration:none;font-weight:700;background:#fff;box-shadow:0 4px 14px rgba(46,32,118,.08)}
.ribbon a:hover{background:var(--purple);color:#fff;border-color:var(--purple)}

/* Hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center;padding:28px 16px}
.hero h1{font-family:"DynaPuff",cursive,"Bodoni MT", Bodoni, serif;font-size:40px;line-height:1.05;margin:0;color:var(--purple)}
.hero p{font-size:18px;margin:16px 0 26px;color:#3b3852}
.cta{display:inline-flex;align-items:center;gap:10px;background:var(--purple);color:#fff;padding:14px 18px;border-radius:14px;text-decoration:none;box-shadow:0 10px 30px rgba(46,32,118,.25)}
.cta.secondary{background:#fff;color:var(--purple);border:1px solid var(--purple)}
.hero .logo{width:100%;max-width:420px;border-radius:28px;border:1px solid #3a2d7e;box-shadow:0 24px 70px rgba(46,32,118,.35)}

/* Sections */
.section{padding:24px 16px}
.section h2{font-family:"DynaPuff",cursive,"Bodoni MT", Bodoni, serif;font-size:30px;color:var(--purple);margin:8px 0 16px;}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.card{border-radius:18px;background:linear-gradient(180deg,#fff,#f8f7ff);border:1px solid #3a2d7e;padding:18px 18px 22px;box-shadow:0 12px 34px rgba(46,32,118,.08)}
.card h3{margin:0 0 8px;color:var(--purple);font-family:"DynaPuff",cursive,"Bodoni MT", Bodoni, serif;font-size:18px}
.panel h3{margin:0 0 8px;color:var(--purple);font-family:"DynaPuff",cursive,"Bodoni MT", Bodoni, serif;font-size:20px;line-height:1.7}
.card p{margin:0;color:#4a456a}

.about{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.about .panel{border-radius:20px;background:linear-gradient(180deg,#fff,#F7F6FF);border:1px solid #3a2d7e;padding:22px;box-shadow:0 10px 28px rgba(46,32,118,.08)}
.about ul{margin:0;padding-left:20px; padding-top:0px; margin-top:-5px}

.contact{display:grid;grid-template-columns:1fr .8fr;gap:20px;align-items:start}
.contact .box{border-radius:18px;border:1px solid #3a2d7e;background:#fff;padding:18px;box-shadow:0 8px 26px rgba(46,32,118,.08)}
.badges{display:flex;gap:10px;flex-wrap:wrap}
.badges a{display:inline-block;border-radius:999px;padding:10px 14px;color:#fff;text-decoration:none}
.badges .viber{background:#7360f2}
.badges .mail{background:#6e6e6e}

footer{margin-top:56px;padding:26px 16px;color:#555}

@media (max-width:980px){.hero{grid-template-columns:1fr}.about{grid-template-columns:1fr}.contact{grid-template-columns:1fr}.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cards{grid-template-columns:1fr} .hero h1{font-size:40px}}

.text { font-family: "Book Antiqua"; font-size: 15px; color: #000000; font-weight: normal }
.text2 { font-family: "Book Antiqua"; font-size: 18px; color: #000000; font-weight: bold }
.special_p { font-size: 20px; color: #4a456a; font-weight: bold }
.sleva { color: #4a456a; font-weight: bold }

.price-list li {
  cursor: pointer;
  padding: 5px;
}

.price-list li:hover {
  background: #f0f0f0;
}

/* modal */
.modal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
}

.modal img {
  max-width: 80%;
  max-height: 80%;
}

.close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: white;
  font-size: 40px;
  cursor: pointer;
}

.modal-content {
  text-align: center;
  color: white;
  font-size: 14px;
}

a.odkaz {
  color: #1f0075;
  font-weight: normal;
  text-decoration: none;
  position: relative;
  transition: color 0.25s ease;
  margin-left: 5px;
}

/* podtržení jako animovaná linka + jemný základ */
a.odkaz::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;              /* vždy viditelné */
  height: 1px;              /* tenká linka */
  background-color: currentColor;
  opacity: 0.25;            /* jemné */
  transition: width 0.25s ease, opacity 0.25s ease;
}

/* hover */
a.odkaz:hover {
  color: #2e0057;
}

a.odkaz:hover::after {
  width: 100%;
  opacity: 1;               /* zesílí */
  height: 2px;              /* volitelné jemné zvýraznění */
}

/* active (kliknutí) */
a.odkaz:active {
  color: #ff6600;
}

/* visited */
a.odkaz:visited {
  color: #1f0075;
}

/* Mobilní zařízení */
@media (max-width: 768px) {

    h1 {
        font-size: 2rem !important;
        line-height: 1.2;
    }

    h2 {
        font-size: 1.6rem !important;
        line-height: 1.1;
    }

}