/* VY-DENTAL — zubní ordinace Vyškov
   Brand: logo #A275DB · web #CBB2EB (client) + deep #6B46A3 / ink #2A2236 for contrast. */

@font-face {
  font-family: 'Manrope';
  src: url('assets/fonts/Manrope-VF.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --logo: #A275DB;
  --web: #CBB2EB;
  --deep: #6B46A3;
  --deep-2: #5A3990;
  --ink: #2A2236;
  --text: #463F51;
  --muted: #6E6679;
  --mist: #F8F4FD;
  --lav: #EFE6FA;
  --line: rgba(42, 34, 54, .1);
  --grad: linear-gradient(92deg, #5E3A98 0%, #8656C9 55%, #A275DB 100%);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --nav-h: 72px;
  --wrap: 1080px;
  --gutter: 22px;
  --pad-x: max(var(--gutter), calc((100% - var(--wrap)) / 2));
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body { overflow-x: clip; }
/* blocks waiting off to the side (floating-in animation) must never widen the page — clip, not hidden, so sticky cards still work */
main > section { overflow-x: clip; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--logo); outline-offset: 3px; border-radius: 6px; }
section[id], #akutni { scroll-margin-top: calc(var(--nav-h) + 12px); }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 600;
}
.skip:focus { top: 12px; }

/* ---------- shared type ---------- */
.eyebrow {
  font-size: 12.5px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase;
  color: var(--deep); margin-bottom: 14px;
}
.grad {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  padding-bottom: .08em; /* keeps descenders inside the clip */
}
h1, h2 { font-weight: 500; letter-spacing: -.035em; }
h2 { font-size: clamp(34px, 5vw, 58px); line-height: 1.07; }

/* ---------- buttons ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 24px; border-radius: 999px;
  background: var(--deep); color: #fff;
  font-weight: 600; font-size: 15.5px; letter-spacing: -.005em; white-space: nowrap;
  transition: background .25s var(--ease), translate .25s var(--ease), box-shadow .25s var(--ease);
}
.pill:hover { background: var(--deep-2); translate: 0 -1px; box-shadow: 0 10px 24px -12px rgba(107, 70, 163, .7); }
.pill:active { translate: 0 0; }
.pill-ghost { background: transparent; color: var(--deep); box-shadow: inset 0 0 0 1.5px rgba(107, 70, 163, .45); }
.pill-ghost:hover { background: rgba(107, 70, 163, .07); box-shadow: inset 0 0 0 1.5px var(--deep); }
.pill-sm { height: 30px; padding: 0 14px; font-size: 12.5px; }
.pill-white { background: #fff; color: var(--deep); }
.pill-white:hover { background: var(--web); color: var(--ink); }
.link { color: var(--deep); font-weight: 600; }
.link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- nav (slim, frosted) ---------- */
.nav {
  position: sticky; top: 0; z-index: 50; height: var(--nav-h);
  overflow-x: hidden; overflow-x: clip;   /* the chips fly out past the edges when the nav hides */
  pointer-events: none;                    /* no bar: the strip itself lets taps through */
}
/* every nav element floats on its own frosted chip, readable over any section */
.nav .brand, .nav .links, .nav .burger {
  pointer-events: auto;
  background: rgba(255, 255, 255, .84); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 8px 22px -10px rgba(42, 34, 54, .35), inset 0 0 0 1px rgba(255, 255, 255, .7);
}
.nav .brand { height: 46px; padding: 0 14px; border-radius: 18px; }
.nav .pill-sm { pointer-events: auto; height: 46px; padding: 0 22px; font-size: 14px; box-shadow: 0 10px 24px -12px rgba(107, 70, 163, .75); }
.nav-in {
  max-width: var(--wrap); height: 100%; margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 10px;
}
.brand { display: flex; align-items: center; }
.brand-mark { height: 30px; width: auto; }
/* the chip shows just the mark; the name slides out of it on hover (desktop) */
.brand-word { display: block; height: 30px; width: auto; margin-left: 2px; }   /* the full VY-DENTAL logo, always visible */
.links { position: relative; display: flex; align-items: center; gap: 2px; margin-left: auto; height: 46px; padding: 0 5px; border-radius: 999px; font-size: 13.5px; font-weight: 500; }
.links a { position: relative; z-index: 1; padding: 9px 15px; border-radius: 999px; color: rgba(42, 34, 54, .82); transition: color .25s, scale .35s cubic-bezier(.34, 1.56, .64, 1); }
.links a:active { scale: .92; }
/* playful: a soft pill that springs from link to link under the pointer */
.nav-pill {
  position: absolute; z-index: 0; top: 50%; left: 0; width: 0; height: 36px; translate: 0 -50%;
  border-radius: 999px; background: #EFE5FA; box-shadow: inset 0 0 0 1px rgba(162, 117, 219, .28);
  opacity: 0; pointer-events: none;
  transition: left .55s cubic-bezier(.34, 1.56, .64, 1), width .55s cubic-bezier(.34, 1.56, .64, 1), opacity .25s;
}
.nav-pill.on { opacity: 1; }
.nav .pill-sm { position: relative; overflow: hidden; }
.nav .pill-sm::after {
  content: ''; position: absolute; inset: 0; translate: -120% 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%);
  transition: translate .8s var(--ease);
}
.nav .pill-sm:hover::after { translate: 120% 0; }
.links a:hover { color: var(--deep); }
.links, .nav .pill-sm { display: none; }   /* one menu everywhere: logo + menu button */
.burger {
  display: grid; place-items: center; margin-left: auto; width: 40px; height: 40px;
  background: none; border: 0; cursor: pointer; position: relative;
}
.burger span { position: absolute; width: 18px; height: 1.5px; background: var(--ink); border-radius: 2px; transition: translate .3s var(--ease), rotate .3s var(--ease), background .3s, width .3s var(--ease); }
.burger span:first-child { translate: 0 -4px; }
.burger span:last-child { translate: 0 4px; }
.burger[aria-expanded="true"] span:first-child { translate: 0 0; rotate: 45deg; }
.burger[aria-expanded="true"] span:last-child { translate: 0 0; rotate: -45deg; }
.burger[aria-expanded="false"]:hover span:last-child { width: 11px; translate: -3.5px 4px; }   /* small playful nudge on hover */
.nav .burger { width: 46px; height: 46px; border-radius: 50%; }

.menu {
  position: fixed; inset: 0; z-index: 49; overflow: hidden; color: var(--ink);   /* full screen: the nav sits on top of it */
  padding: calc(var(--nav-h) + 26px) 22px 34px; display: flex; flex-direction: column; gap: 26px;
  background:
    radial-gradient(520px 380px at 100% 0%, rgba(203, 178, 235, .38), transparent 70%),
    radial-gradient(440px 360px at 0% 100%, rgba(162, 117, 219, .16), transparent 70%),
    #FFFFFF;
  clip-path: circle(0px at calc(100% - 45px) calc(var(--nav-h) / 2));   /* grows out of the burger */
  transition: clip-path .75s cubic-bezier(.7, 0, .2, 1);
}
.menu[hidden] { display: none; }   /* closed menu: out of the tab order and accessibility tree too */
.menu.open { clip-path: circle(160vmax at calc(100% - 45px) calc(var(--nav-h) / 2)); }
/* while the menu is open the nav melts into it (no separate bar) */
body.menu-nav .nav { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.menu-open .burger span { background: var(--deep); }
.menu-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }   /* the watermark must not add scroll room to the card */
.menu-mark { position: absolute; right: -50px; bottom: -40px; width: 320px; opacity: .07; rotate: -10deg; }
.menu-heart { position: absolute; fill: var(--logo); opacity: .28; animation: menuFloat 6s ease-in-out infinite; }
@keyframes menuFloat { 0%, 100% { translate: 0 0; rotate: -10deg; } 50% { translate: 0 -16px; rotate: 10deg; } }
/* menu = practical info: day blocks, the phone number, a small address */
.menu-card { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 18px; }
.menu-label, .menu-call, .menu-addr, .menu-links {
  opacity: 0; transform: translateY(24px);
  transition: transform .7s cubic-bezier(.34, 1.56, .64, 1) var(--d, .2s), opacity .4s var(--ease) var(--d, .2s);
}
.menu.open .menu-label, .menu.open .menu-call, .menu.open .menu-addr, .menu.open .menu-links { opacity: 1; transform: none; }
.menu-label { --d: .18s; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--deep); }

/* day blocks flip down like a departure board: open days solid purple, closed days quiet lilac */
.menu-week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; perspective: 700px; }
.menu-week li {
  --i: 0; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  min-height: clamp(112px, 21vh, 176px); padding: 14px 2px; border-radius: 20px;
  background: linear-gradient(165deg, #9A6BDB 0%, #6B46A3 100%); color: #fff;
  box-shadow: 0 18px 30px -18px rgba(107, 70, 163, .75);
  transform-origin: 50% 0; opacity: 0; transform: rotateX(-100deg);
  transition: transform .85s cubic-bezier(.34, 1.56, .64, 1) calc(.26s + var(--i) * .07s), opacity .3s var(--ease) calc(.26s + var(--i) * .07s);
}
.menu.open .menu-week li { opacity: 1; transform: none; }
.menu-week b { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #EADFF9; margin-bottom: clamp(4px, 1.4vh, 12px); }
.menu-week span { font-size: clamp(16px, 2.5vh, 21px); font-weight: 600; letter-spacing: -.02em; line-height: 1; }
/* the times dial in like a clock counter: digit wheels spin and land on the number when the menu opens */
.menu-week .dial { display: inline-flex; align-items: flex-start; height: 1em; overflow: hidden; font-variant-numeric: tabular-nums; }
.menu-week .dig { display: block; height: 1em; overflow: hidden; }
.menu-week .reel { display: flex; flex-direction: column; transform: translateY(calc(var(--n, 0) * -1em)); }   /* rests on the right digit */
.menu-week .reel em { display: block; height: 1em; font-style: normal; text-align: center; }
.menu.open .menu-week .reel { animation: dialIn 1.25s cubic-bezier(.16, 1, .3, 1) var(--dd, .5s) both; }   /* spins in on every open */
@keyframes dialIn { from { transform: translateY(0); } }
.menu-week i { width: 2px; height: clamp(10px, 2vh, 18px); border-radius: 2px; background: rgba(255, 255, 255, .55); }
.menu-week .off { background: #F6F1FC; color: var(--muted); box-shadow: inset 0 0 0 1px rgba(162, 117, 219, .28); }
.menu-week .off b { color: var(--deep); opacity: .7; }
.menu-week .off span { color: #B3A6C6; font-size: 20px; }
.menu-week .deal { background: #fff; box-shadow: inset 0 0 0 1.5px rgba(162, 117, 219, .55); }
.menu-week .deal em { font-style: normal; font-size: 10.5px; font-weight: 700; line-height: 1.25; text-align: center; color: var(--deep); }
.menu-note { margin-top: -6px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.menu-week .today { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--logo), 0 18px 30px -18px rgba(107, 70, 163, .75); }
.menu-week .off.today { box-shadow: inset 0 0 0 2px var(--logo); }
.menu-week .today::after {
  content: 'Dnes'; position: absolute; top: -11px; left: 50%; translate: -50% 0;
  background: var(--deep); color: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 99px;
}

/* the number: a soft lilac call card with a ringing purple phone */
.menu-call {
  --d: .66s;
  display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 12px; border-radius: 26px;
  background: #F6F1FC; box-shadow: inset 0 0 0 1px rgba(162, 117, 219, .3); color: var(--ink);
}
.menu-call:active { scale: .97; }
.menu-call-ic { position: relative; flex: none; width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(165deg, #9A6BDB, #6B46A3); display: grid; place-items: center; }
.menu-call-ic::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px var(--logo);
  animation: ringPulse 2.4s var(--ease) infinite;
}
.menu-call-ic svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; animation: ringWiggle 2.4s ease-in-out infinite; }
@keyframes ringPulse { 0% { scale: 1; opacity: .9; } 100% { scale: 1.55; opacity: 0; } }
@keyframes ringWiggle { 0%, 60%, 100% { rotate: 0deg; } 66% { rotate: -14deg; } 72% { rotate: 12deg; } 78% { rotate: -8deg; } 84% { rotate: 5deg; } }
.menu-call-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.menu-call small { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--deep); }
.menu-call strong { font-size: 25px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; color: var(--ink); }
.menu-call strong.placeholder { font-size: 18px; font-weight: 500; font-style: italic; color: var(--muted); }

/* small address */
.menu-addr { --d: .76s; display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--text); }
.menu-addr svg { flex: none; width: 16px; height: 16px; margin-top: 2px; fill: none; stroke: var(--logo); stroke-width: 1.8; }
.menu-addr a { color: var(--deep); font-weight: 700; white-space: nowrap; }

/* pages, kept small at the bottom */
.menu-links { --d: .86s; position: relative; z-index: 1; margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.menu-links a {
  padding: 8px 14px; border-radius: 99px; font-size: 13.5px; font-weight: 600; color: var(--deep);
  background: #F3ECFB; box-shadow: inset 0 0 0 1px rgba(162, 117, 219, .25); transition: background .25s, color .25s;
}
.menu-links a:hover { background: #E8DCF8; }
.menu-links a[aria-current="page"] { background: var(--deep); color: #fff; box-shadow: none; }
/* the menu is a floating card that grows out of the menu button (every screen size) */
.menu {
    inset: auto; top: calc(var(--nav-h) - 4px);
    right: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));   /* right edge lines up with the button */
    width: 440px; max-height: calc(100vh - var(--nav-h) - 24px);
    padding: 26px 24px 24px; gap: 22px; border-radius: 30px;
    box-shadow: 0 40px 90px -34px rgba(42, 34, 54, .5), 0 0 0 1px rgba(162, 117, 219, .2);
    clip-path: circle(0px at calc(100% - 23px) -32px);              /* origin = centre of the menu button */
    transition: clip-path .6s cubic-bezier(.7, 0, .2, 1);
  }
  .menu.open { clip-path: circle(1000px at calc(100% - 23px) -32px); }
  .menu-week li { min-height: 118px; }
  .menu-links { margin-top: 2px; }
  .menu-mark { width: 220px; right: -40px; bottom: -40px; }
@media (max-width: 960px) {     /* phones/tablets: full-width card under the button, the page stays visible */
  .menu {
    right: 12px; width: calc(100% - 24px); top: calc(var(--nav-h) - 6px);
    max-height: calc(100svh - var(--nav-h) - 12px); overflow-y: auto; overscroll-behavior: contain;
    padding: 22px 18px 18px; gap: 18px; border-radius: 28px;
    clip-path: circle(0px at calc(100% - 33px) -26px);
  }
  .menu.open { clip-path: circle(1000px at calc(100% - 33px) -26px); }
}

/* ---------- ribbon ---------- */
/* no border, and the bar fades from the page white into the hero's top colour: no seam with the hero */
.ribbon { background: linear-gradient(180deg, #FFFFFF 0%, #F8F4FD 100%); padding: 8px var(--gutter); text-align: center; font-size: 12px; line-height: 1.45; color: var(--text); }
.ribbon a { color: var(--deep); font-weight: 600; margin-left: 4px; white-space: nowrap; }
.ribbon a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- hero: the window, the words, the buttons ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.hero {
  position: relative; text-align: center;
  /* hearts may rise above the hero, but nothing may widen the page: clip only sideways */
  overflow: visible; overflow-x: hidden; overflow-x: clip;
  padding: clamp(26px, 4.6vh, 56px) 0 clamp(34px, 5.6vh, 64px);
  background:
    radial-gradient(900px 520px at 50% 40%, #FFFFFF 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #F8F4FD 0%, #EFE5FA 100%);
}
.stage {
  position: relative; padding: 0 var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  column-gap: clamp(28px, 4vw, 64px); align-items: center;
}
.arcs {
  position: absolute; left: 0; right: 0; top: -6%; bottom: -12%; width: 100%; height: 118%;   /* stays inside the hero */
  fill: none; stroke: rgba(107, 70, 163, .18); stroke-width: 1.2; transform-origin: 50% 50%;
  -webkit-mask-image: radial-gradient(ellipse 50% 55% at 50% 50%, #000 40%, transparent 100%); mask-image: radial-gradient(ellipse 50% 55% at 50% 50%, #000 40%, transparent 100%);
}
/* the window: height follows the screen so window + words + buttons fit the first view */
.arch {
  --aw: min(calc(clamp(360px, 100svh - 290px, 640px) * .81), 86vw);
  position: relative;
  width: var(--aw); height: calc(var(--aw) * 1.235);
  border-radius: calc(var(--aw) / 2) calc(var(--aw) / 2) 34px 34px; overflow: hidden;
  background: var(--web);
  box-shadow: 0 0 0 10px rgba(255, 255, 255, .4), 0 44px 100px -34px rgba(107, 70, 163, .6);
  transform-origin: 50% 100%;
}
/* unclipped wrapper: same box as the window, so the hearts can leave it */
.arch-wrap { position: relative; z-index: 2; grid-column: 2; grid-row: 1; width: max-content; }
.arch picture { display: contents; }
.arch img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.arch figcaption {
  position: absolute; right: 20px; bottom: 18px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .02em; color: var(--muted);
  background: rgba(255, 255, 255, .86); padding: 4px 9px; border-radius: 6px;
}
.side {
  position: relative; z-index: 1; grid-row: 1; top: 6%;
  font-size: clamp(24px, 2.9vw, 46px); font-weight: 500; letter-spacing: -.035em; line-height: 1.08;
  white-space: nowrap;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .1em;
}
.side-l { grid-column: 1; justify-self: end; text-align: right; }
.side-r { grid-column: 3; justify-self: start; text-align: left; }
.ctas { position: relative; z-index: 2; margin-top: clamp(22px, 3.6vh, 36px); display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; padding: 0 var(--gutter); }

/* intro (fill-mode backwards so scroll-driven translate/opacity take over afterwards) */
@keyframes rise { from { opacity: 0; transform: translateY(26px); } }
@keyframes riseArch { from { opacity: .001; transform: translateY(70px) scale(.96); } }   /* .001, not 0: looks the same, but the photo counts as painted at once (LCP) */
@keyframes fromL { from { opacity: 0; transform: translateX(60px); } }
@keyframes fromR { from { opacity: 0; transform: translateX(-60px); } }
.arch { animation: riseArch 1.2s var(--ease) .1s backwards; }
.side-l { animation: fromL 1.1s var(--ease) .65s backwards; }
.side-r { animation: fromR 1.1s var(--ease) .65s backwards; }
.hero .ctas { animation: rise 1s var(--ease) .9s backwards; }


/* ---------- sections ---------- */
.section { padding: clamp(84px, 11vw, 140px) var(--pad-x); }
.sec-head { text-align: center; margin: 0 auto clamp(40px, 5vw, 60px); max-width: 860px; }
.sec-head.left { text-align: left; margin-left: 0; }

/* services */
/* checkerboard: every service = explanation tile + animated illustration, sides alternate row by row */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.svc { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (min-width: 961px) {                         /* 4 tiles per row: rows 2, 4… start with the illustration */
  .svc:nth-child(4n+3) .art, .svc:nth-child(4n+4) .art { order: -1; }
}
.art {
  position: relative; overflow: hidden; border-radius: 26px; min-height: 236px;
  display: grid; place-items: center;
  background: radial-gradient(120% 95% at 28% 18%, #F8F4FD 0%, #ECE2F9 58%, #E2D3F6 100%);
}
.orb {
  width: min(80%, 200px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #FFFFFF 0%, #F7F2FD 72%);
  box-shadow: inset 0 0 0 1px rgba(162, 117, 219, .22), 0 26px 46px -28px rgba(107, 70, 163, .6);
}
.orb svg { display: block; width: 100%; height: 100%; overflow: visible; }
.art .tooth { fill: #fff; stroke: var(--deep); stroke-width: 4; stroke-linejoin: round; }
.art .accent { fill: none; stroke: var(--logo); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }

/* 1 · prevention: a magnifier circles the tooth, then a check draws in */
.art-scan .lens { transform: translate(102px, 80px); }
.art-scan .lens circle { fill: rgba(255, 255, 255, .62); stroke: var(--deep); stroke-width: 4.5; }
.art-scan .lens path { stroke: var(--deep); stroke-width: 6; stroke-linecap: round; }
.art-scan .check { stroke-dasharray: 100; stroke-dashoffset: 0; }
.art-scan.play .lens { animation: scanLens 4.2s cubic-bezier(.45, 0, .25, 1) infinite; }
.art-scan.play .check { animation: scanCheck 4.2s ease infinite; }
@keyframes scanLens { 0%, 100% { transform: translate(84px, 78px); } 30% { transform: translate(120px, 70px); } 55% { transform: translate(104px, 102px); } 78% { transform: translate(84px, 78px); } }
@keyframes scanCheck { 0%, 55% { stroke-dashoffset: 100; opacity: 1; } 72%, 90% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }

/* 2 · fillings: the cavity shrinks away, sparkles appear */
.art-fill .cavity { fill: var(--deep); transform-box: fill-box; transform-origin: center; }
.art-fill .spark { fill: var(--logo); transform-box: fill-box; transform-origin: center; }
.art-fill.play .cavity { animation: cavity 3.6s cubic-bezier(.5, 0, .2, 1) infinite; }
.art-fill.play .spark { animation: spark 3.6s ease-in-out infinite; }
.art-fill.play .s2 { animation-delay: .25s; }
@keyframes cavity { 0%, 25% { transform: scale(1); opacity: 1; } 45%, 88% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes spark { 0%, 40% { transform: scale(0) rotate(0deg); opacity: 0; } 55% { transform: scale(1.15) rotate(45deg); opacity: 1; } 72% { transform: scale(1) rotate(90deg); opacity: 1; } 86%, 100% { transform: scale(0) rotate(135deg); opacity: 0; } }

/* 3 · root canals: the canals draw down through the roots */
.art-canal .canal { fill: none; stroke: var(--logo); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.art-canal .pulp { fill: var(--logo); transform-box: fill-box; transform-origin: center; }
.art-canal.play .canal { animation: canal 3.4s cubic-bezier(.5, 0, .2, 1) infinite; }
.art-canal.play .canal + .canal { animation-delay: .15s; }
.art-canal.play .pulp { animation: pulp 3.4s ease-in-out infinite; }
@keyframes canal { 0%, 10% { stroke-dashoffset: 100; } 55%, 82% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -100; } }
@keyframes pulp { 0%, 100% { transform: scale(.7); opacity: .6; } 50% { transform: scale(1.15); opacity: 1; } }

/* 4 · gums: a calm gum line flows, little bubbles rise */
.art-gum .teeth rect { fill: #fff; stroke: var(--deep); stroke-width: 4; }
.art-gum .g1 { fill: #EAC4E0; }                 /* rose-lilac reads as gums, stays in the palette */
.art-gum .g2 { fill: #C98DBA; opacity: .5; }
.art-gum.play .g1 { animation: wave 3.2s linear infinite; }
.art-gum.play .g2 { animation: wave 4.6s linear infinite reverse; }
@keyframes wave { from { transform: translateX(0); } to { transform: translateX(-100px); } }
.art-gum .bub { fill: #fff; stroke: var(--logo); stroke-width: 2; opacity: 0; }
.art-gum.play .bub { animation: bubble 3s ease-in infinite; }
.art-gum.play .b2 { animation-delay: 1s; }
.art-gum.play .b3 { animation-delay: 2s; }
@keyframes bubble { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-74px); opacity: 0; } }

/* 5 · extraction: the tooth lifts out of the gum, then settles back */
.art-lift .lift { transform-box: view-box; transform-origin: 100px 100px; }
.art-lift .gumfill { fill: #EAC4E0; }
.art-lift .gumedge { fill: none; stroke: #C98DBA; stroke-width: 4; stroke-linecap: round; }
.art-lift .arrow { stroke-dasharray: 100; stroke-dashoffset: 0; }
.art-lift.play .lift { animation: lift 3.4s cubic-bezier(.55, 0, .25, 1) infinite; }
.art-lift.play .arrow { animation: arrowUp 3.4s ease infinite; }
@keyframes lift { 0%, 18%, 92%, 100% { transform: translateY(0) rotate(0deg); } 48%, 66% { transform: translateY(-22px) rotate(-5deg); } }
@keyframes arrowUp { 0%, 20% { stroke-dashoffset: 100; opacity: 1; } 45%, 70% { stroke-dashoffset: 0; opacity: 1; } 90%, 100% { stroke-dashoffset: 0; opacity: 0; } }

/* 6 · acute care: the bolt pulses with ripples, then a calm heartbeat line draws */
.art-acute .bolt { fill: var(--logo); stroke: var(--deep); stroke-width: 3.5; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; }
.art-acute .ring { fill: none; stroke: var(--logo); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
.art-acute .beat { fill: none; stroke: var(--deep); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; }
.art-acute.play .bolt { animation: bolt 4s ease-in-out infinite; }
.art-acute.play .ring { animation: ring 4s ease-out infinite; }
.art-acute.play .r2 { animation-delay: .35s; }
.art-acute.play .beat { animation: beat 4s ease infinite; }
@keyframes bolt { 0% { transform: scale(.9); opacity: 1; } 12% { transform: scale(1.08); } 24% { transform: scale(.96); } 36% { transform: scale(1.06); } 46% { transform: scale(1); opacity: 1; } 54%, 90% { transform: scale(.6); opacity: 0; } 100% { transform: scale(.9); opacity: 1; } }
@keyframes ring { 0% { transform: scale(.6); opacity: .9; } 40%, 100% { transform: scale(1.9); opacity: 0; } }
@keyframes beat { 0%, 50% { stroke-dashoffset: 100; opacity: 1; } 78%, 90% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.card {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--mist); border-radius: 26px; padding: 30px 28px 32px;
  transition: opacity .9s var(--ease), transform .9s var(--ease), translate .35s var(--ease), box-shadow .35s var(--ease);
}
.card::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .35s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(162, 117, 219, .22), transparent 70%);
}
.card:hover { translate: 0 -6px; box-shadow: 0 26px 50px -30px rgba(107, 70, 163, .55); }
.card:hover::before { opacity: 1; }
.ic { width: 52px; height: 52px; border-radius: 16px; background: #fff; display: grid; place-items: center; transition: rotate .45s var(--ease), scale .45s var(--ease); }
.card:hover .ic { rotate: -8deg; scale: 1.06; }
.ic svg { width: 26px; height: 26px; fill: none; stroke: var(--deep); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.card h3 { margin: 22px 0 8px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.card p { font-size: 15.5px; line-height: 1.55; color: var(--text); }


/* doctor */
/* the closing card: team + footer are ONE violet card — one background, one radius, one scroll animation */
.endcard {
  position: relative; overflow: hidden; color: #fff;
  width: min(calc(100% - 24px), calc(var(--wrap) + 112px)); margin: 0 auto clamp(12px, 2vw, 24px);
  border-radius: 36px;
  background:
    radial-gradient(700px 420px at 92% 0%, rgba(203, 178, 235, .38), transparent 70%),
    radial-gradient(560px 420px at 0% 22%, rgba(162, 117, 219, .28), transparent 70%),
    linear-gradient(180deg, #6B3FB0 0%, #50298F 46%, #351A69 78%, #26124C 100%);   /* one continuous fall, top to bottom */
}
.doctor { position: relative; padding: clamp(44px, 5.5vw, 68px) clamp(24px, 5vw, 56px) clamp(36px, 4vw, 52px); }
.doctor-mark { position: absolute; right: -40px; top: -36px; width: clamp(170px, 18vw, 240px); opacity: .08; rotate: 10deg; pointer-events: none; }
.doctor-in { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; column-gap: clamp(32px, 5vw, 72px); align-items: end; }
.doctor-in > .creds { grid-column: 2; grid-row: 1 / span 3; }
.doctor .eyebrow { color: var(--web); }
.doctor h2 {
  font-size: clamp(32px, 4vw, 50px); line-height: 1.05; letter-spacing: -.035em;
  background: linear-gradient(92deg, #fff 35%, var(--web) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em;
}
.role { margin-top: 8px; font-size: clamp(16px, 1.5vw, 18px); color: rgba(255, 255, 255, .8); }
.creds { border-top: 1px solid rgba(255, 255, 255, .2); }
.creds li { display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .18); font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .92); }
.creds span { color: var(--web); font-weight: 700; }

/* hours */
.week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; max-width: 980px; margin: 0 auto; }
.week li {
  position: relative; text-align: center; padding: 30px 16px 28px; border-radius: 24px;
  background: var(--mist); transition: translate .35s var(--ease), box-shadow .35s var(--ease);
}
.week li b { display: block; font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: .01em; }
.week li span { display: block; margin-top: 10px; font-size: clamp(20px, 2.4vw, 28px); font-weight: 500; letter-spacing: -.025em; }
.week li:not(.off) { background: linear-gradient(160deg, #fff 0%, var(--lav) 100%); box-shadow: inset 0 0 0 1px rgba(162, 117, 219, .28); }
.week li:not(.off):hover { translate: 0 -4px; box-shadow: inset 0 0 0 1px var(--logo), 0 20px 40px -26px rgba(107, 70, 163, .6); }
.week .off { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.week .off span { color: #B5AEC0; }
.week li small { display: block; margin-top: 6px; font-size: 11.5px; font-weight: 500; letter-spacing: 0; line-height: 1.3; color: var(--muted); }
.week li.deal { background: #fff; box-shadow: inset 0 0 0 1.5px rgba(162, 117, 219, .5); }   /* by arrangement: neither open nor closed */
.week .deal span { font-size: clamp(17px, 1.9vw, 22px); color: var(--deep); }
.week .today::before {
  content: 'Dnes'; position: absolute; top: -11px; left: 50%; translate: -50% 0;
  background: var(--deep); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 99px;
}
.hours-note { text-align: center; margin-top: 36px; font-size: 17px; color: var(--text); }
.hours-note strong { color: var(--ink); font-weight: 600; }

/* insurers + price */
.money { position: relative; background: var(--mist); }
.money-grid { display: grid; grid-template-columns: 1.65fr 1fr; gap: 28px; align-items: stretch; }
.money .sec-head { margin-bottom: 34px; }
.insurers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.insurers li {
  display: flex; align-items: center; gap: 16px; padding: 16px 18px;
  background: #fff; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line);
  font-size: 15px; line-height: 1.35; color: var(--text);
  transition: translate .3s var(--ease), box-shadow .3s var(--ease);
}
.insurers li:hover { translate: 0 -3px; box-shadow: inset 0 0 0 1px var(--logo), 0 16px 30px -22px rgba(107, 70, 163, .6); }
.insurers b { min-width: 46px; font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: var(--deep); }
.price {
  position: relative; overflow: hidden; border-radius: 28px; padding: 36px;
  background: var(--web); color: var(--ink);
  display: flex; flex-direction: column; justify-content: flex-end; min-height: 320px;
}
.price::before {
  content: ''; position: absolute; top: -40px; right: -40px; width: 220px; height: 220px;
  background: url('assets/logo/vy-bubble-mark-white.svg') center / contain no-repeat; opacity: .55; rotate: 10deg;
  transition: rotate .8s var(--ease), scale .8s var(--ease);
}
.price:hover::before { rotate: -4deg; scale: 1.05; }
.price .eyebrow { color: var(--ink); }
.price h3 { position: relative; font-size: clamp(26px, 2.8vw, 32px); font-weight: 500; letter-spacing: -.03em; line-height: 1.15; }
.price p:last-child { position: relative; margin-top: 12px; color: rgba(42, 34, 54, .82); }

/* contact */
.contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; }
.where { background: var(--mist); border-radius: 28px; padding: 26px 26px 32px; }
.map { position: relative; height: 230px; border-radius: 20px; overflow: hidden; background: var(--lav); }
.map svg { width: 100%; height: 100%; }
.map-link { position: absolute; inset: 0; display: block; }
.map-link svg { transition: scale .6s var(--ease); }
.map-link:hover svg { scale: 1.04; }
.osm-label { font-size: 17px; font-weight: 700; letter-spacing: .04em; fill: #7A659C; paint-order: stroke; stroke: #F3EDFB; stroke-width: 5px; stroke-linejoin: round; }
.map-credit { position: absolute; right: 10px; bottom: 8px; z-index: 2; font-size: 10px; font-weight: 600; color: var(--muted); background: rgba(255, 255, 255, .78); padding: 2px 7px; border-radius: 99px; }
.map-credit:hover { color: var(--deep); }
.map .road { fill: none; stroke: #fff; stroke-width: 16; stroke-linecap: round; }
.map .road.thin { stroke-width: 8; }
.map .ring { fill: rgba(162, 117, 219, .16); stroke: var(--logo); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: pulse 2.6s var(--ease) infinite; }
@keyframes pulse { 0% { scale: .6; opacity: 1; } 100% { scale: 1.6; opacity: 0; } }
.pin {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;   /* the map is always centred on the practice */
  width: 48px; height: 48px; border-radius: 16px; background: var(--logo);
  display: grid; place-items: center; box-shadow: 0 12px 26px -10px rgba(107, 70, 163, .8);
}
.pin img { width: 30px; height: auto; }
address { font-style: normal; margin-top: 24px; font-size: 19px; line-height: 1.5; }
address b { display: block; font-weight: 600; }
.park { margin-top: 12px; color: var(--text); }
.where .link { display: inline-block; margin-top: 16px; }
.reach {
  display: flex; flex-direction: column; border-radius: 28px; padding: 34px 32px;
  background: radial-gradient(400px 260px at 100% 0%, rgba(162, 117, 219, .35), transparent 70%), #211A2B; color: #fff;
}
.eyebrow.light { color: var(--web); }
.reach dl > div { padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.reach dt { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.reach dd { margin-top: 6px; font-size: 21px; font-weight: 500; letter-spacing: -.02em; overflow-wrap: anywhere; }   /* the long e-mail must wrap on phones */
.reach dd a:hover { color: var(--web); }
.reach dd small { display: block; margin-top: 4px; font-size: 13px; font-weight: 400; letter-spacing: 0; color: rgba(255, 255, 255, .6); }
.reach dd.placeholder { color: rgba(255, 255, 255, .42); font-style: italic; font-weight: 400; font-size: 18px; }
.reach .pill { margin-top: 28px; align-self: flex-start; }
.reach .small { margin-top: 14px; font-size: 13.5px; color: rgba(255, 255, 255, .6); }

/* footer */
/* footer: the whole closing card (the card owns the background) */
.foot { position: relative; padding: clamp(12px, 2vw, 24px) clamp(24px, 5vw, 56px) 24px; }
.foot-grid {
  display: grid; grid-template-columns: 1.2fr 1.5fr 1.1fr 1fr .8fr; gap: 28px clamp(20px, 3vw, 40px);
  padding: clamp(34px, 4vw, 46px) 0 clamp(30px, 3.4vw, 40px);
}
.foot-brand { display: flex; flex-direction: column; gap: 14px; }
.foot-brand p { font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .72); }
.foot-col { display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .78); }
.foot-col b { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--web); margin-bottom: 4px; }
.foot-col a { color: rgba(255, 255, 255, .9); width: fit-content; transition: color .2s; overflow-wrap: anywhere; }
.foot-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.foot-solo {                        /* sub-pages: the footer is the whole card */
  border-radius: 36px; padding-top: clamp(30px, 4vw, 42px);
  background:
    radial-gradient(520px 280px at 92% 0%, rgba(203, 178, 235, .32), transparent 70%),
    linear-gradient(180deg, #5A33A0 0%, #3A1C70 55%, #241246 100%);
}
.foot-in { display: flex; align-items: center; gap: 24px 36px; flex-wrap: wrap; border-top: 1px solid rgba(255, 255, 255, .16); padding-top: 26px; }
.foot-solo .foot-in { border-top: 0; padding-top: 0; }
.foot-logo { height: 44px; width: auto; }
.foot-in p { font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, .68); }
.foot-in nav { margin-left: auto; display: flex; gap: 20px; flex-wrap: wrap; font-size: 13px; font-weight: 500; }
.foot-in nav a { color: rgba(255, 255, 255, .88); }
.foot-in nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.fine {
  padding: 16px 0 0; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 11.5px; color: rgba(255, 255, 255, .5);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px;
}
/* agency credit: same quiet line, a lilac heart that beats on hover */
.credit { display: inline-flex; align-items: center; gap: 5px; color: rgba(255, 255, 255, .5); white-space: nowrap; transition: color .25s; }
.credit svg { width: 11px; height: 11px; fill: var(--web); transition: scale .3s var(--ease); }
.credit:hover { color: rgba(255, 255, 255, .85); }
.credit:hover svg { animation: creditBeat .9s ease-in-out infinite; }
@keyframes creditBeat { 0%, 100% { scale: 1; } 20% { scale: 1.3; } 40% { scale: 1; } 60% { scale: 1.2; } }

/* ---------- sub-page: O ordinaci ---------- */
.links a[aria-current="page"] { color: var(--deep); font-weight: 700; }
.foot-in nav a[aria-current="page"] { color: var(--web); }
.page-hero {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(72px, 10vw, 128px) var(--pad-x) clamp(64px, 9vw, 112px);
  background:
    radial-gradient(110% 70% at 50% 78%, #FFFFFF 0%, rgba(255, 255, 255, 0) 70%),   /* sized to the header: never reaches its top edge */
    linear-gradient(180deg, #F8F4FD 0%, #EFE5FA 100%);
}
.page-hero-in { position: relative; z-index: 1; }
.page-hero h1 { font-size: clamp(42px, 6.6vw, 84px); line-height: 1.03; letter-spacing: -.04em; }
.page-hero h1 .grad { display: block; }
.page-lead { margin-top: 20px; font-size: clamp(18px, 2vw, 22px); color: var(--text); letter-spacing: -.012em; }
.page-hero-mark { position: absolute; right: -40px; bottom: -70px; width: clamp(200px, 26vw, 360px); opacity: .55; rotate: 12deg; pointer-events: none; }
.page-hero .eyebrow, .page-hero h1, .page-lead { animation: rise 1s var(--ease) backwards; }
.page-hero h1 { animation-delay: .1s; }
.page-lead { animation-delay: .22s; }

.about-page-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.about-copy { display: grid; gap: 18px; font-size: clamp(18px, 1.7vw, 21px); line-height: 1.6; color: var(--text); }
.about-copy .link { justify-self: start; margin-top: 6px; font-size: 17px; }
.glance { background: var(--mist); border-radius: 28px; padding: 30px 32px 16px; }
.glance h2 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; margin-bottom: 10px; }
.glance dl > div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 15px 0; border-top: 1px solid var(--line); }
.glance dt { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--deep); padding-top: 3px; }
.glance dd { margin: 0; font-size: 16px; line-height: 1.5; }

.page-cta { padding-top: 0; }
.page-cta-in { text-align: center; border-top: 1px solid var(--line); padding-top: clamp(64px, 9vw, 110px); }
.page-cta h2 { max-width: 760px; margin: 0 auto; }
.page-cta .ctas { margin-top: 30px; }

/* ---------- hero hearts ---------- */
.heart { position: absolute; z-index: 3; pointer-events: none; filter: drop-shadow(0 3px 8px rgba(255, 255, 255, .6)); }
.heart svg { display: block; width: 100%; height: auto; overflow: visible; }
.heart path {
  fill: var(--logo); fill-opacity: 0; stroke: var(--logo); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: heartDraw 1.1s var(--ease) forwards, heartFill .6s var(--ease) forwards;
}
.heart-1 { width: 10%; left: 35%; top: 6.5%; rotate: -14deg; animation: heartFloat 4.2s ease-in-out 2.6s infinite; }
.heart-2 { width: 7%; left: 55.5%; top: 3.6%; rotate: 13deg; animation: heartFloat 3.6s ease-in-out 2.9s infinite reverse; }
.heart-1 path { animation-delay: 1.25s, 2.15s; }
.heart-2 path { animation-delay: 1.55s, 2.45s; }
@keyframes heartDraw { to { stroke-dashoffset: 0; } }
@keyframes heartFill { to { fill-opacity: .95; } }
@keyframes heartFloat { 0%, 100% { translate: 0 0; scale: 1; } 50% { translate: 0 -5px; scale: 1.08; } }

/* purple echoes that trail the hearts on their way out (GSAP shows them while scrolling) */
.heart-layer { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.heart-trail { animation: none; opacity: 0; filter: none; }
.heart-trail path { animation: none; stroke-dashoffset: 0; fill: var(--logo); stroke: var(--logo); fill-opacity: 1; }

/* ---------- O ordinaci: three arched photo windows ---------- */
.windows { padding-bottom: 0; }
.win-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.6vw, 34px); align-items: end; }
.win { margin: 0; text-align: center; }
.win:nth-child(2) { margin-bottom: clamp(24px, 4vw, 52px); }          /* the middle window sits higher */
.win-frame {
  position: relative; overflow: hidden; aspect-ratio: 3 / 4;
  border-radius: 999px;                                                    /* round at both ends: a capsule window */
  background: radial-gradient(120% 80% at 50% 0%, #FAF7FE 0%, #E9DEF9 58%, #DCCAF4 100%);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, .7), 0 30px 60px -34px rgba(107, 70, 163, .6);
  transition: translate .5s var(--ease), box-shadow .5s var(--ease);
}
.win:hover .win-frame { translate: 0 -6px; box-shadow: 0 0 0 8px rgba(255, 255, 255, .8), 0 40px 70px -34px rgba(107, 70, 163, .7); }
.win-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.win-ph { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--deep); font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.win-ph svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.win figcaption { margin-top: 18px; font-size: 15px; font-weight: 600; color: var(--ink); }
@media (max-width: 760px) {     /* phones: a swipeable row */
  .win-row {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--pad-x)); padding: 14px var(--pad-x) 10px;
  }
  .win-row::-webkit-scrollbar { display: none; }
  .win { flex: 0 0 66%; scroll-snap-align: center; }
  .win:nth-child(2) { margin-bottom: 0; }
}

/* GRAPHIQ "let's work" shape effect: the block stretches via --sx, its content is counter-scaled so text never distorts */
.shape-in { scale: var(--s, 1); rotate: var(--r, 0deg); }

/* ---------- acute care + dental emergencies ---------- */
.acute {
  margin-top: 22px; display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(24px, 4vw, 56px);
  border-radius: 28px; padding: clamp(26px, 3.4vw, 40px);
  background: radial-gradient(520px 300px at 0% 0%, rgba(203, 178, 235, .55), transparent 70%), var(--mist);
  box-shadow: inset 0 0 0 1px rgba(162, 117, 219, .2);
}
.acute-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: var(--logo); margin-bottom: 18px; box-shadow: 0 12px 24px -12px rgba(107, 70, 163, .8); }
.acute-ic svg { width: 24px; height: 24px; fill: #fff; }
.acute h3 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 600; letter-spacing: -.03em; margin-bottom: 14px; }
.acute-main p:not(.eyebrow) { font-size: 15.5px; line-height: 1.6; color: var(--text); }
.acute-main p + p { margin-top: 10px; }
.acute-main [data-mobile-inline] { font-weight: 700; color: var(--deep); white-space: nowrap; }
.er-title { font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--ink); margin-bottom: 12px; }
.acute-er ul { display: grid; gap: 10px; }
.acute-er li { display: flex; flex-direction: column; gap: 2px; background: #fff; border-radius: 16px; padding: 14px 16px; box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; line-height: 1.45; color: var(--text); }
.acute-er li b { font-size: 15px; color: var(--ink); }
.acute-er li a { color: var(--deep); font-weight: 600; white-space: nowrap; }
.acute-er li em { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--deep); }
.er-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; font-size: 14.5px; }

/* ---------- team: its own light section between the hours and the services ---------- */
.team { background: linear-gradient(180deg, #fff 0%, var(--mist) 16%, var(--mist) 84%, #fff 100%); }
.team-in { display: grid; grid-template-columns: 1fr 1.05fr; column-gap: clamp(36px, 6vw, 88px); row-gap: 40px; align-items: center; }
.team-copy h2 { font-size: clamp(32px, 4.2vw, 52px); }
.team-text { display: grid; gap: 12px; margin-top: 20px; font-size: clamp(15.5px, 1.3vw, 17px); line-height: 1.65; color: var(--text); max-width: 540px; }
.team-list { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 30px); align-items: start; }
.team-list .member:nth-child(2) { margin-top: clamp(28px, 5vw, 64px); }   /* a gentle step, like two bubbles */
.team-list { order: -1; }   /* photos stay left although the heading comes first in the HTML (heading outline) */
.member { display: flex; flex-direction: column; gap: 3px; }
.member-photo {
  margin: 0 0 14px; aspect-ratio: 3 / 4; border-radius: 999px; overflow: hidden; background: var(--lav);
  box-shadow: 0 0 0 6px #fff, 0 0 0 7.5px rgba(162, 117, 219, .35), 0 28px 46px -28px rgba(107, 70, 163, .6);
}
.member-photo picture { display: contents; }
.member-photo img { width: 100%; height: 100%; object-fit: cover; }
.member h3 { font-size: clamp(15px, 1.4vw, 17.5px); font-weight: 600; letter-spacing: -.01em; line-height: 1.3; color: var(--ink); }
.member span { font-size: 14px; color: var(--deep); font-weight: 600; }
.member small { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.sec-lead { margin-top: 16px; font-size: clamp(16px, 1.5vw, 18px); color: var(--text); }
.card-link { display: inline-block; margin-top: 14px; font-size: 15px; font-weight: 600; color: var(--deep); }
.card-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.hours-note a { color: var(--deep); font-weight: 600; white-space: nowrap; }

/* ---------- new service illustrations ---------- */
/* protetika: a crown drops onto the tooth and settles, then a sparkle */
.art-crown .cap path:first-child { fill: var(--logo); stroke: var(--deep); stroke-width: 4; stroke-linejoin: round; }
.art-crown .cap-shine { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: .8; }
.art-crown .spark { fill: var(--logo); transform-box: fill-box; transform-origin: center; opacity: 0; }
.art-crown.play .cap { animation: capDrop 3.6s cubic-bezier(.3, 0, .2, 1) infinite; }
.art-crown.play .spark { animation: spark 3.6s ease-in-out infinite; }
@keyframes capDrop { 0%, 8% { transform: translateY(-44px); opacity: 0; } 22% { opacity: 1; } 38% { transform: translateY(3px); } 46%, 88% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-44px); opacity: 0; } }
/* spolupráce: links draw out from the heart to three partner circles, which pop in turn */
.art-collab .link { fill: none; stroke: var(--logo); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.art-collab .node { fill: #fff; stroke: var(--deep); stroke-width: 4; transform-box: fill-box; transform-origin: center; }
.art-collab .hub { fill: #fff; stroke: var(--deep); stroke-width: 4; }
.art-collab .hub-heart { fill: var(--logo); }
.art-collab.play .link { animation: linkDraw 4s ease infinite; }
.art-collab.play .l2 { animation-delay: .25s; } .art-collab.play .l3 { animation-delay: .5s; }
.art-collab.play .node { animation: nodePop 4s ease infinite; }
.art-collab.play .n2 { animation-delay: .25s; } .art-collab.play .n3 { animation-delay: .5s; }
@keyframes linkDraw { 0%, 6% { stroke-dashoffset: 100; } 30%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 100; } }
@keyframes nodePop { 0%, 18% { transform: scale(0); } 30% { transform: scale(1.18); } 38%, 85% { transform: scale(1); } 100% { transform: scale(0); } }

/* ---------- reveal ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s); }
.js .card[data-reveal] { transition: opacity .9s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s), translate .35s var(--ease), box-shadow .35s var(--ease); }
.js [data-reveal].in { opacity: 1; transform: none; }
/* GSAP drives the reveals: no CSS transitions fighting it (cards keep their hover easing) */
.gsap-on [data-reveal] { transition: none; }
.gsap-on .menu { transition: none; }
.gsap-on .menu-label, .gsap-on .menu-call, .gsap-on .menu-addr, .gsap-on .menu-links, .gsap-on .menu-week li { opacity: 1; transform: none; transition: none; }
.gsap-on .card[data-reveal] { transition: translate .35s var(--ease), box-shadow .35s var(--ease); }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  /* phones: no bar — just two floating elements, each on its own frosted chip so they read over any section */
  :root { --nav-h: 64px; }
  .nav .brand { height: auto; padding: 7px 11px; border-radius: 16px; }
  .nav .brand-mark, .nav .brand-word { height: 26px; }
  .nav .burger { width: 46px; height: 46px; border-radius: 50%; }
  .links, .nav .pill-sm { display: none; }
  .burger {
    display: grid; place-items: center; margin-left: auto; width: 40px; height: 40px;
    background: none; border: 0; cursor: pointer; position: relative;
  }
  .burger span { position: absolute; width: 18px; height: 1.5px; background: var(--ink); border-radius: 2px; transition: translate .3s var(--ease), rotate .3s var(--ease), background .3s; }
  .burger span:first-child { translate: 0 -4px; }
  .burger span:last-child { translate: 0 4px; }
  .burger[aria-expanded="true"] span:first-child { translate: 0 0; rotate: 45deg; }
  .burger[aria-expanded="true"] span:last-child { translate: 0 0; rotate: -45deg; }
  .cards { grid-template-columns: 1fr; }
  .svc:nth-child(even) .art { order: -1; }
  .money-grid, .contact-grid, .about-page-grid, .acute { grid-template-columns: 1fr; }
  .map { height: clamp(230px, 40vw, 340px); }   /* one column: wider card, so grow taller too, not a thin strip */
  .foot-grid { grid-template-columns: repeat(4, 1fr); }
  .foot-brand { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
}
@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  .stage { grid-template-columns: minmax(0, 1fr); row-gap: clamp(10px, 1.8vh, 18px); justify-items: center; }
  .side { top: 0; font-size: clamp(26px, 3.9vh, 38px); white-space: normal; text-align: center; max-width: 92vw; }
  .side br { display: none; }   /* stacked: one line each, the name wraps if it must */
  .side-l { grid-row: 1; grid-column: 1; justify-self: center; }
  .arch { --aw: min(calc(clamp(300px, 100svh - 400px, 640px) * .81), 86vw); }
  .arch-wrap { grid-row: 2; grid-column: 1; }
  .side-r { grid-row: 3; grid-column: 1; justify-self: center; }
  .side-l, .side-r { animation-name: rise; }
}
@media (max-width: 760px) {
  .week { grid-template-columns: 1fr; gap: 10px; }
  .week li { display: flex; justify-content: space-between; align-items: center; text-align: left; padding: 20px 22px; border-radius: 18px; }
  .week li span { margin-top: 0; font-size: 21px; }
  .week .today::before { left: auto; right: 18px; top: -10px; translate: none; }
  .insurers { grid-template-columns: 1fr; }
  .doctor-in, .team-in { grid-template-columns: 1fr; }
  /* phones: heading → the two faces → the text */
  .team-in { row-gap: 0; }
  .team-copy { display: contents; }
  .team-copy .eyebrow { order: 1; }
  .team-copy h2 { order: 2; }
  .team-list { order: 3; margin-top: 30px; }
  .team-text { order: 4; margin-top: 30px; }
  .doctor-in > .creds { grid-column: auto; grid-row: auto; margin-top: 26px; }
  .creds li { grid-template-columns: 56px 1fr; font-size: 14.5px; }
  .endcard { border-radius: 28px; }
  .doctor-mark { width: 130px; top: -24px; right: -28px; }
  .foot-solo { border-radius: 28px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .svc { grid-template-columns: 1fr; gap: 12px; }
  .svc .art { order: -1; min-height: 0; aspect-ratio: 16 / 10; }
  .price { min-height: 260px; padding: 30px; }
  .glance { padding: 26px 22px 12px; }
  .glance dl > div { grid-template-columns: 1fr; gap: 4px; }
  .osm-label { font-size: 19px; stroke-width: 6px; }   /* the map draws at half scale here: keep street names readable */
}

/* phones: each service is one card (animation on top, text below); the cards stick and stack while scrolling */
@media (max-width: 760px) {
  .cards { display: flex; flex-direction: column; gap: 18px; }
  .svc {
    position: sticky; top: calc(var(--nav-h) + 6px + var(--i, 0) * 12px);   /* each card stops a bit lower: the pile shows its edges */
    display: grid; grid-template-columns: 1fr; gap: 0; padding: 10px; border-radius: 30px;
    background: #fff; transform-origin: 50% 0;
    box-shadow: 0 -10px 30px -18px rgba(42, 34, 54, .28), 0 24px 50px -30px rgba(107, 70, 163, .5), inset 0 0 0 1px rgba(162, 117, 219, .2);
  }
  .svc .art { order: -1; min-height: 0; aspect-ratio: 16 / 10; border-radius: 22px; }
  .svc .card { background: transparent; box-shadow: none; padding: 18px 12px 12px; translate: none; }
  .svc .card::before { display: none; }
  .svc .card .ic { display: none; }                                     /* the animation above already says it */
  .svc .card h3 { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .heart path { stroke-dashoffset: 0; fill-opacity: .95; }
}

/* ---------- admin-editable content: any text length / number of items keeps the layout intact ---------- */
.ribbon p, .card h3, .card p, .team-copy h2, .team-text, .member h3, .member span, .member small, .insurers li,
.price h3, .price p, .acute h3, .acute p, .acute-er li, .where address, .park, .week li small, .menu-note,
.menu-addr span, .sec-head h2, .sec-lead, .hours-note, .foot-col span, .foot-col a, .reach .small { overflow-wrap: anywhere; hyphens: auto; }
.team-in > *, .money-grid > *, .contact-grid > *, .svc > *, .acute > *, .foot-grid > * { min-width: 0; }
.side.side-long { font-size: clamp(20px, 2.2vw, 36px); }   /* longer hero words: smaller, still one line each */
.week li.two span { font-size: clamp(16px, 1.6vw, 20px); line-height: 1.3; }   /* two time ranges (e.g. a lunch break) */
.member-initials {
  display: grid; place-items: center; width: 100%; height: 100%;
  font-size: clamp(38px, 5vw, 60px); font-weight: 600; letter-spacing: -.03em; color: var(--deep);
  background: radial-gradient(120% 90% at 30% 15%, #fff 0%, var(--lav) 70%);
}
/* one person: a single capsule; three or more: the text first, then everyone in a row of capsules */
.team--one .team-list { grid-template-columns: minmax(0, 300px); justify-content: center; }
.team--many .team-in { grid-template-columns: 1fr; }
.team--many .team-copy { order: -1; max-width: 780px; }
.team--many .team-list { grid-template-columns: repeat(auto-fit, minmax(170px, 230px)); justify-content: center; column-gap: clamp(18px, 3vw, 34px); row-gap: 34px; }
.team--many .team-list .member:nth-child(2) { margin-top: 0; }
.team--many .team-list .member:nth-child(even) { margin-top: clamp(22px, 4vw, 48px); }
.money-grid.no-insurers { grid-template-columns: minmax(0, 640px); justify-content: center; }
@media (max-width: 760px) {
  .team--many .team-list { grid-template-columns: 1fr 1fr; }
  .team--one .team-list { grid-template-columns: minmax(0, 240px); }
  .team--many .team-copy { order: initial; }
}
@media (min-width: 761px) {
  .team--many .team-copy { margin-inline: auto; text-align: center; }
  .team--many .team-text { margin-inline: auto; max-width: 680px; }
}

/* ---------- notice strip: a clearly visible lavender band under the nav (2026-10-17) ---------- */
.ribbon { background: #EEE8FF; padding: 11px var(--gutter); font-size: 13.5px; line-height: 1.5; color: #4A3D60; }
.ribbon a { color: var(--deep); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(107, 70, 163, .45); text-underline-offset: 3px; }
.ribbon a:hover { text-decoration-color: currentColor; }

/* ---------- hero v4 (2026-10-17): text left, round photo right — everything inside one band ---------- */
.hero { text-align: left; background: #fff; padding: clamp(44px, 8vh, 84px) 0 clamp(48px, 8.5vh, 92px); }
.hero-in {
  --d: clamp(260px, min(28.5vw, 100svh - 300px), 430px);   /* photo diameter ≈ height of the text block (eyebrow → buttons), and it always fits the first screen */
  max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) var(--d); column-gap: clamp(32px, 6vw, 96px); align-items: center;
}
.hero-copy { min-width: 0; }
.hero-eyebrow { font-size: 13px; font-weight: 800; letter-spacing: .12em; color: #6E47B6; margin-bottom: clamp(12px, 1.8vh, 20px); }
.hero-title { font-weight: 500; letter-spacing: -.045em; overflow-wrap: anywhere; }
.ht-main { display: block; font-size: clamp(48px, 6.4vw, 92px); line-height: .98; color: #310667; }
.ht-name { display: block; margin-top: clamp(12px, 2vh, 22px); font-size: clamp(28px, 3.3vw, 48px); line-height: 1.08; letter-spacing: -.035em; font-weight: 400; color: #6E47B6; }
.hero-title.title-long .ht-main { font-size: clamp(40px, 5vw, 72px); }
.hero .ctas { justify-content: flex-start; padding: 0; margin-top: clamp(24px, 3.6vh, 38px); }
.hero-photo { position: relative; width: var(--d); height: var(--d); }
.hero-photo::before, .hero-photo::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.hero-photo::before { inset: -7%; border: 1px solid rgba(107, 70, 163, .13); }   /* the faint rings of the reference */
.hero-photo::after { inset: -12%; border: 1px solid rgba(107, 70, 163, .06); }
.hero .arch-wrap { width: 100%; height: 100%; }
.hero .arch {
  width: 100%; height: 100%; border-radius: 50%; transform-origin: 50% 60%;
  box-shadow: 0 0 0 8px #fff, 0 0 0 9px rgba(162, 117, 219, .18), 0 40px 90px -38px rgba(107, 70, 163, .55);
}
.hero .arch img { object-position: 50% 30%; }   /* portrait photo in a circle: keep the face in the middle */
@keyframes riseText { from { opacity: .001; transform: translateY(22px); } }
.hero-eyebrow { animation: riseText .9s var(--ease) .15s backwards; }
.ht-main { animation: riseText 1s var(--ease) .25s backwards; }
.ht-name { animation: riseText 1s var(--ease) .4s backwards; }
.hero .ctas { animation: riseText 1s var(--ease) .6s backwards; }
@media (max-width: 760px) {
  .hero { text-align: center; padding: 26px 0 40px; }
  .ribbon { font-size: 12.5px; padding: 10px var(--gutter); }
  .hero-in { --d: clamp(200px, min(66vw, 100svh - 520px), 310px); grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 22px; }
  .hero-copy { display: contents; }   /* phones: eyebrow → heading → photo → buttons */
  .hero-eyebrow { order: 1; margin-bottom: -14px; }
  .hero-title { order: 2; }
  .hero-photo { order: 3; margin: 6px 0; }
  .hero .ctas { order: 4; justify-content: center; margin-top: 0; }
  .ht-main { font-size: clamp(40px, 12vw, 56px); }
  .hero-title.title-long .ht-main { font-size: clamp(32px, 9vw, 44px); }
  .ht-name { font-size: clamp(24px, 7vw, 32px); margin-top: 10px; }
}
@media (max-width: 400px) {   /* narrow phones: both buttons stay on one row */
  .hero .ctas { gap: 10px; }
  .hero .ctas .pill { padding-inline: 16px; font-size: 14.5px; }
}

/* ---------- menu button: three purple lines (2026-10-21, client request) ---------- */
.burger span { width: 20px; height: 2px; background: #8656C9; transition: translate .3s var(--ease), rotate .3s var(--ease), background .3s, width .3s var(--ease), opacity .2s, scale .3s var(--ease); }
.burger span:nth-child(1) { translate: 0 -6px; }
.burger span:nth-child(2) { translate: 0 0; }
.burger span:nth-child(3) { translate: 0 6px; }
.burger[aria-expanded="true"] span:nth-child(1) { translate: 0 0; rotate: 45deg; }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; scale: .2 1; }
.burger[aria-expanded="true"] span:nth-child(3) { translate: 0 0; rotate: -45deg; }
.burger[aria-expanded="false"]:hover span:nth-child(3) { width: 12px; translate: -4px 6px; }
body.menu-open .burger span { background: var(--deep); }

/* ---------- Aktuality: news card right under the hero (2026-10-21) ---------- */
.news { padding: clamp(8px, 2vw, 24px) var(--pad-x) clamp(36px, 5vw, 64px); }
.news-card {
  max-width: 860px; margin: 0 auto; padding: clamp(28px, 4vw, 44px) clamp(20px, 4vw, 44px);
  border-radius: 28px; background: linear-gradient(160deg, #FFFFFF 0%, #F6F1FD 100%);
  box-shadow: inset 0 0 0 1px rgba(162, 117, 219, .22), 0 26px 60px -44px rgba(107, 70, 163, .55);
}
.news-head { text-align: center; }
.news-head h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; color: #310667; }
.news-head .sec-lead { margin: 12px auto 0; max-width: 560px; font-size: clamp(15.5px, 1.4vw, 17.5px); color: var(--text); }
.news-list { list-style: none; padding: 0; margin: clamp(22px, 3vw, 32px) 0 0; display: grid; gap: 12px; }
.news-item { background: #fff; border-radius: 18px; padding: 18px 20px; box-shadow: inset 0 0 0 1px var(--line); }
.news-item time { display: inline-block; margin-bottom: 6px; padding: 3px 10px; border-radius: 99px; background: var(--lav); color: var(--deep); font-size: 12.5px; font-weight: 700; letter-spacing: .02em; }
.news-item h3 { font-size: clamp(17px, 1.6vw, 19px); font-weight: 650; letter-spacing: -.01em; line-height: 1.3; color: var(--ink); }
.news-text { display: grid; gap: 8px; margin-top: 6px; font-size: 15.5px; line-height: 1.6; color: var(--text); }
.news-text a { color: var(--deep); font-weight: 600; }
.news-empty { margin-top: 18px; text-align: center; font-size: 14.5px; color: var(--muted); }
.news-item h3, .news-text, .news-head h2, .news-head .sec-lead { overflow-wrap: anywhere; hyphens: auto; }