/* ============================================================================
   Základ

   Šablónové štýly (bootstrap, style.css, responsive.css) sa už nenačítavajú.
   Ťahali cez @import ďalších pätnásť súborov, z ktorých web nepoužíval ani
   jeden. To, čo z nich bolo potrebné, je zhrnuté tu.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* Základná sadzba webu. Predtým ju určoval šablónový style.css. */
body {
  margin: 0;
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 15px;
  line-height: 27px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { max-width: 100%; }
img { height: auto; border: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; }
a { text-decoration: none; color: inherit; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }

/* Prvok viditeľný len na počítači, náhrada za bootstrapovské hidden-*. */
.dk-desktop-only { display: flex; flex: 1; justify-content: center; }
@media (max-width: 991px) { .dk-desktop-only { display: none; } }

/* ============================================================================
   Dentalika — nadstavba nad šablónou Dentalcare.
   Pôvodné súbory style.css a responsive.css zostávajú nedotknuté.
   Tento súbor pridáva: farebné premenné, tmavý režim, opravy mobilného menu
   a štýly nových sekcií.
   Farby vychádzajú z loga Dentalika (zlatá) a z primárnej modrej šablóny.
   ========================================================================= */

:root {
  /*
    --dk-blue je značková modrá zo šablóny. Používa sa na plochy a ikony.
    --dk-blue-strong je tmavší odtieň tej istej farby a používa sa všade,
    kde je na modrom bielý text alebo modrý text na svetlom podklade.
    Biela na #209fd6 má kontrast len 3,0 : 1, čo nespĺňa WCAG AA (4,5 : 1).
    Na #197fab je pomer 4,5 : 1.
  */
  --dk-blue: #209fd6;
  --dk-blue-strong: #197fab;
  --dk-on-blue: #ffffff;
  --dk-blue-dark: #1b86b5;
  --dk-navy: #2c4ca5;
  --dk-gold: #b08d3f;
  --dk-gold-soft: #f3ead5;

  --dk-bg: #ffffff;
  --dk-bg-alt: #f3fbff;
  --dk-bg-soft: #ebf8ff;
  --dk-card: #ffffff;
  --dk-ink: #22333a;
  --dk-body: #5b6b70;
  --dk-line: #e0edf4;
  --dk-shadow: 0 10px 40px -28px rgba(32, 159, 214, .55);
  --dk-header-h: 70px;
}

html[data-theme='dark'] {
  --dk-blue: #3fb4e6;
  /* Text na tlačidlách je biely aj v tmavom režime, preto je podklad
     rovnako tmavý ako vo svetlom. Biela na #197fab má 4,5 : 1. */
  --dk-blue-strong: #197fab;
  --dk-on-blue: #ffffff;
  --dk-blue-dark: #2f9ecd;
  --dk-navy: #6f8ede;
  --dk-gold: #d9b866;
  --dk-gold-soft: #2a2415;

  --dk-bg: #0e1b22;
  --dk-bg-alt: #132530;
  --dk-bg-soft: #162c38;
  --dk-card: #152530;
  --dk-ink: #e8f1f6;
  --dk-body: #b6c9d3;
  --dk-line: #23404f;
  --dk-shadow: 0 10px 40px -28px rgba(0, 0, 0, .9);
}

/* Plynulé, ale nie blikajúce prepnutie témy */
html { color-scheme: light; }
html[data-theme='dark'] { color-scheme: dark; }

body,
.boxed_wrapper {
  background-color: var(--dk-bg);
  color: var(--dk-body);
}

/* ---------------------------------------------------------------- Tmavý režim
   Šablóna má farby zapísané natvrdo, preto ich prepisujeme cielene.        */

html[data-theme='dark'] h1,
html[data-theme='dark'] h2,
html[data-theme='dark'] h3,
html[data-theme='dark'] h4,
html[data-theme='dark'] h5,
html[data-theme='dark'] h6 { color: var(--dk-ink); }

html[data-theme='dark'] p,
html[data-theme='dark'] li,
html[data-theme='dark'] td,
html[data-theme='dark'] span:not(.icon-bar) { color: inherit; }

html[data-theme='dark'] .top-bar-area,
html[data-theme='dark'] .mainmenu-area,
html[data-theme='dark'] .mainmenu-bottom-area,
html[data-theme='dark'] .dk-section--soft,
html[data-theme='dark'] .dk-card,
html[data-theme='dark'] .footer-area,
html[data-theme='dark'] .footer-bottom-area {
  background-color: var(--dk-bg-alt);
  border-color: var(--dk-line);
}

html[data-theme='dark'] .sec-title h2,
html[data-theme='dark'] .sec-title h1 { color: var(--dk-ink); }

html[data-theme='dark'] input,
html[data-theme='dark'] select,
html[data-theme='dark'] textarea {
  background-color: var(--dk-card);
  border-color: var(--dk-line);
  color: var(--dk-ink);
}
html[data-theme='dark'] input::placeholder,
html[data-theme='dark'] textarea::placeholder { color: #7c94a2; }

/* --------------------------------------------------------------- Základ typo
   Nadpisová hierarchia je jednotná na celom webe: jeden viditeľný h1,
   sekcie h2, karty a podsekcie h3, detaily h4.                            */

h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', sans-serif; color: var(--dk-ink); }

.dk-h1 { font-size: 38px; line-height: 1.22; font-weight: 700; margin: 0 0 18px; }
.dk-h2 { font-size: 30px; line-height: 1.25; font-weight: 700; margin: 0 0 16px; }
.dk-h3 { font-size: 20px; line-height: 1.35; font-weight: 600; margin: 0 0 10px; }
.dk-h4 { font-size: 16px; line-height: 1.4; font-weight: 600; margin: 0 0 8px; }
.dk-lead { font-size: 16px; line-height: 30px; color: var(--dk-body); max-width: 68ch; }
.dk-eyebrow {
  display: inline-block; font-family: 'Montserrat', sans-serif; font-size: 12px;
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dk-blue-strong); margin-bottom: 12px;
}

@media (max-width: 991px) { .dk-h1 { font-size: 31px; } .dk-h2 { font-size: 25px; } }
@media (max-width: 575px) { .dk-h1 { font-size: 26px; } .dk-h2 { font-size: 22px; } .dk-h3 { font-size: 18px; } }

/* -------------------------------------------------------------- Prístupnosť */

.dk-skip {
  position: absolute; left: -9999px; top: 0; z-index: 9999;
  background: var(--dk-blue-strong); color: #fff; padding: 12px 20px; border-radius: 0 0 4px 0;
}
.dk-skip:focus { left: 0; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--dk-blue); outline-offset: 2px;
}

/* ------------------------------------------------------------------- Hlavička */

.dk-header { position: sticky; top: 0; z-index: 1000; background: var(--dk-bg); border-bottom: 1px solid var(--dk-line); }
.dk-topbar { background: var(--dk-bg-soft); border-bottom: 1px solid var(--dk-line); font-size: 13px; }
.dk-topbar__inner,
.dk-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; }
.dk-topbar__contact { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; margin: 0; padding: 0; list-style: none; }
.dk-topbar__contact li { display: flex; align-items: center; gap: 8px; color: var(--dk-body); }
.dk-topbar__contact a { color: var(--dk-body); }
.dk-topbar__contact a:hover { color: var(--dk-blue-strong); }
.dk-topbar__contact i { color: var(--dk-blue); }
.dk-topbar__tools { display: flex; align-items: center; gap: 10px; }

.dk-nav__inner { min-height: var(--dk-header-h); }
.dk-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.dk-brand img { width: 46px; height: 46px; object-fit: contain; border-radius: 6px; background: #fff; }
.dk-brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.dk-brand__name { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 20px; color: var(--dk-ink); letter-spacing: .02em; }
.dk-brand__sub { font-size: 11.5px; color: var(--dk-body); letter-spacing: .04em; }

/* -------------------------------------------------------------------- Menu */

.dk-menu { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.dk-menu > li { position: relative; }
.dk-menu > li > a,
.dk-menu > li > button {
  display: flex; align-items: center; gap: 6px;
  font-family: 'Montserrat', sans-serif; font-size: 13.5px; font-weight: 600;
  color: var(--dk-ink); background: none; border: 0; cursor: pointer;
  padding: 24px 13px; text-decoration: none; text-transform: uppercase; letter-spacing: .02em;
  transition: color .2s ease;
}
.dk-menu > li > a:hover,
.dk-menu > li > button:hover,
.dk-menu > li.is-active > a,
.dk-menu > li.is-active > button { color: var(--dk-blue); }
.dk-menu > li.is-active > a::after,
.dk-menu > li.is-active > button::after {
  content: ''; position: absolute; left: 13px; right: 13px; bottom: 16px; height: 2px; background: var(--dk-blue);
}

.dk-submenu {
  position: absolute; top: 100%; left: 0; min-width: 250px; margin: 0; padding: 8px 0;
  list-style: none; background: var(--dk-card); border: 1px solid var(--dk-line);
  border-radius: 4px; box-shadow: var(--dk-shadow); z-index: 40;
}
.dk-submenu a {
  display: block; padding: 10px 18px; font-size: 13.5px; color: var(--dk-body); text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.dk-submenu a:hover, .dk-submenu a.is-active { background: var(--dk-bg-soft); color: var(--dk-blue); }

.dk-nav__actions { display: flex; align-items: center; gap: 10px; }

.dk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase; text-decoration: none;
  padding: 13px 26px; border-radius: 3px; border: 1px solid transparent; cursor: pointer;
  transition: background .22s ease, color .22s ease, border-color .22s ease;
}
.dk-btn--primary { background: var(--dk-blue-strong); color: #fff; }
.dk-btn--primary:hover, .dk-btn--primary:focus { background: var(--dk-navy); color: #fff; }
html[data-theme='dark'] .dk-btn--primary:hover { background: #2f9ecd; color: #fff; }
.dk-btn--ghost { background: transparent; color: var(--dk-ink); border-color: var(--dk-line); }
.dk-btn--ghost:hover { border-color: var(--dk-blue); color: var(--dk-blue); }
.dk-btn--sm { padding: 9px 16px; font-size: 12px; }
.dk-btn--block { width: 100%; }

.dk-iconbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 38px; height: 38px; padding: 0 10px; border-radius: 3px;
  border: 1px solid var(--dk-line); background: var(--dk-card); color: var(--dk-ink);
  font-size: 12.5px; font-weight: 600; font-family: 'Montserrat', sans-serif; cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.dk-iconbtn:hover { border-color: var(--dk-blue); color: var(--dk-blue); }
.dk-iconbtn[aria-pressed='true'] { border-color: var(--dk-blue); color: var(--dk-blue); }

.dk-lang { display: inline-flex; border: 1px solid var(--dk-line); border-radius: 3px; overflow: hidden; }
.dk-lang button {
  border: 0; background: var(--dk-card); color: var(--dk-body); cursor: pointer;
  padding: 0 11px; height: 38px; font-size: 12.5px; font-weight: 700;
  font-family: 'Montserrat', sans-serif; letter-spacing: .04em; transition: background .2s ease, color .2s ease;
}
.dk-lang button[aria-pressed='true'] { background: var(--dk-blue-strong); color: #fff; }

.dk-burger { display: none; }

/* Zásuvné menu existuje iba na tablete a mobile. Na desktope sa nevykresľuje. */
.dk-drawer { display: none; }

/* ----------------------------------------------------- Mobilné a tablet menu */

@media (max-width: 1199px) {
  .dk-menu > li > a, .dk-menu > li > button { padding: 22px 9px; font-size: 12.5px; }
}

@media (max-width: 991px) {
  .dk-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 3px; border: 1px solid var(--dk-line);
    background: var(--dk-card); color: var(--dk-ink); font-size: 18px; cursor: pointer;
  }
  .dk-nav__actions .dk-btn--primary { display: none; }

  .dk-drawer {
    position: fixed; inset: 0; z-index: 1100;
    display: block;
    background: rgba(14, 27, 34, .55);
    opacity: 0; pointer-events: none; transition: opacity .25s ease;
  }
  .dk-drawer.is-open { opacity: 1; pointer-events: auto; }

  .dk-drawer__panel {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(88vw, 380px);
    background: var(--dk-bg); border-left: 1px solid var(--dk-line);
    display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform .28s ease;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .dk-drawer.is-open .dk-drawer__panel { transform: translateX(0); }

  .dk-drawer__head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 18px; border-bottom: 1px solid var(--dk-line); position: sticky; top: 0;
    background: var(--dk-bg); z-index: 2;
  }
  .dk-drawer__body { padding: 8px 0 24px; }
  .dk-drawer__foot { margin-top: auto; padding: 18px; border-top: 1px solid var(--dk-line); display: grid; gap: 10px; }

  .dk-menu {
    display: block; width: 100%;
  }
  .dk-menu > li { border-bottom: 1px solid var(--dk-line); }
  .dk-menu > li > a,
  .dk-menu > li > button {
    width: 100%; justify-content: space-between; padding: 15px 18px;
    font-size: 14px; text-transform: none; letter-spacing: 0;
  }
  .dk-menu > li.is-active > a::after,
  .dk-menu > li.is-active > button::after { display: none; }
  .dk-menu > li.is-active > a,
  .dk-menu > li.is-active > button { color: var(--dk-blue); }

  .dk-submenu {
    position: static; min-width: 0; border: 0; border-radius: 0; box-shadow: none;
    padding: 0 0 8px; background: var(--dk-bg-soft);
  }
  .dk-submenu a { padding: 12px 18px 12px 32px; }

  .dk-topbar__contact li:not(:first-child) { display: none; }
}

@media (max-width: 575px) {
  .dk-brand img { width: 40px; height: 40px; }
  .dk-brand__name { font-size: 17px; }
  .dk-brand__sub { display: none; }
  .dk-topbar { display: none; }
}

/* ------------------------------------------------------------------ Sekcie */

.dk-section { padding: 74px 0; }
.dk-section--soft { background: var(--dk-bg-alt); }
.dk-section--tight { padding: 52px 0; }
@media (max-width: 767px) { .dk-section { padding: 48px 0; } .dk-section--tight { padding: 36px 0; } }

.dk-sectionhead { margin-bottom: 38px; }
.dk-sectionhead--center { text-align: center; }
.dk-sectionhead--center .dk-lead { margin-left: auto; margin-right: auto; }

.dk-grid { display: grid; gap: 24px; }
.dk-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.dk-grid--3 { grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.dk-grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.dk-card {
  background: var(--dk-card); border: 1px solid var(--dk-line); border-radius: 5px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.dk-card:hover { transform: translateY(-4px); box-shadow: var(--dk-shadow); border-color: var(--dk-blue); }
.dk-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--dk-bg-soft); }
.dk-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.dk-card:hover .dk-card__media img { transform: scale(1.06); }
.dk-card__body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.dk-card__price {
  align-self: flex-start; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12.5px;
  color: var(--dk-blue-strong); background: var(--dk-bg-soft); border-radius: 20px; padding: 5px 13px;
}
.dk-card__foot { margin-top: auto; padding-top: 6px; }

.dk-link { color: var(--dk-blue-strong); font-weight: 600; font-family: 'Montserrat', sans-serif; font-size: 13px; text-decoration: none; }
.dk-link:hover { color: var(--dk-navy); }
.dk-link i { margin-left: 6px; }

/* ---------------------------------------------------------------- Zoznamy */

.dk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dk-list li { display: flex; align-items: flex-start; gap: 11px; }
.dk-list i { color: var(--dk-blue); margin-top: 6px; flex-shrink: 0; }

.dk-usp { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--dk-line); border: 1px solid var(--dk-line); border-radius: 5px; overflow: hidden; }
.dk-usp__item { background: var(--dk-card); padding: 26px 22px; display: flex; gap: 14px; align-items: flex-start; }
.dk-usp__icon { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; background: var(--dk-bg-soft); color: var(--dk-blue); display: grid; place-items: center; font-size: 19px; }

/* ------------------------------------------------------------------- Hero */

.dk-hero {
  /*
    Výška je oproti pôvodnému návrhu znížená o 5 % zhora aj zdola,
    takže fotografia zaberá 90 % pôvodnej výšky. Ťažisko orezu je mierne
    nad stredom, aby tváre zostali v zábere.
  */
  position: relative; min-height: 504px; display: grid; align-items: center;
  overflow: hidden; background: var(--dk-bg-soft);
}
.dk-hero__slide {
  position: absolute; inset: 0; opacity: 0;
  /*
    Prichádzajúca snímka sa prelína cez odchádzajúcu, ktorá pod ňou zostáva
    plne nepriehľadná. Nikdy tak nie sú obe polopriehľadné naraz a v polovici
    prechodu nevznikne svetlý prepad.
  */
  transition: none;
  will-change: opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.dk-hero.is-armed .dk-hero__slide { transition: opacity var(--hero-fade, 1900ms) linear; }
.dk-hero__slide.is-prev { opacity: 1; z-index: 1; transition: none; }
.dk-hero__slide.is-active { opacity: 1; z-index: 2; }
.dk-hero__slide img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.dk-hero__scrim {
  position: absolute; inset: 0; z-index: 3;
  /*
    Dve vrstvy: vodorovná drží text čitateľný na svetlých fotografiách,
    zvislá zjemňuje spodný okraj, kde sedia tlačidlá.
  */
  background:
    linear-gradient(100deg, rgba(10,22,28,.92) 0%, rgba(10,22,28,.78) 38%, rgba(10,22,28,.34) 68%, rgba(10,22,28,.12) 100%),
    linear-gradient(to top, rgba(10,22,28,.42) 0%, transparent 42%);
}
.dk-hero__inner { position: relative; z-index: 4; padding: 81px 0; }
.dk-hero__content { max-width: 620px; color: #fff; }
.dk-hero__content .dk-eyebrow { color: #a8e4ff; text-shadow: 0 1px 10px rgba(0,0,0,.45); }
.dk-hero__content h1, .dk-hero__content .dk-h2 { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.4); }
.dk-hero__content p { color: rgba(255,255,255,.94); font-size: 17px; line-height: 30px; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.dk-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.dk-hero__actions .dk-btn--ghost { color: #fff; border-color: rgba(255,255,255,.55); }
.dk-hero__actions .dk-btn--ghost:hover { background: #fff; color: var(--dk-navy); border-color: #fff; }
.dk-hero__dots { display: flex; gap: 9px; margin-top: 30px; }
.dk-hero__dots button { width: 30px; height: 4px; border: 0; border-radius: 2px; background: rgba(255,255,255,.4); cursor: pointer; padding: 0; }
.dk-hero__dots button[aria-current='true'] { background: #fff; }

@media (max-width: 767px) {
  .dk-hero { min-height: 432px; }
  .dk-hero__inner { padding: 54px 0; }
  .dk-hero__content p { font-size: 15px; line-height: 27px; }
  .dk-hero__actions .dk-btn { flex: 1 1 100%; }
}

/* ------------------------------------------------------------- Breadcrumb */

.dk-crumb { background: var(--dk-bg-soft); border-bottom: 1px solid var(--dk-line); padding: 30px 0; }
.dk-crumb__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--dk-body); }
.dk-crumb__nav a { color: var(--dk-blue-strong); text-decoration: none; }
.dk-crumb__nav span[aria-current] { color: var(--dk-ink); font-weight: 600; }

/* --------------------------------------------------------------- Cenník */

.dk-price { border: 1px solid var(--dk-line); border-radius: 5px; overflow: hidden; background: var(--dk-card); }
.dk-price__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 18px 22px; background: var(--dk-bg-alt); border: 0; text-align: left; cursor: pointer; }
.dk-price__head:hover { background: var(--dk-bg-soft); }
.dk-price__rows { list-style: none; margin: 0; padding: 0; }
.dk-price__row { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 13px 22px; border-top: 1px solid var(--dk-line); }
.dk-price__row.is-highlight { background: var(--dk-bg-soft); }
.dk-price__name { flex: 1; }
.dk-price__dots { flex: 1; border-bottom: 1px dotted var(--dk-line); min-width: 20px; transform: translateY(-4px); }
.dk-price__value { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--dk-blue-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 575px) {
  .dk-price__row { flex-wrap: wrap; gap: 4px 12px; }
  .dk-price__dots { display: none; }
  .dk-price__value { width: 100%; }
}

/* --------------------------------------------------------- Pred a po */

.dk-ba { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 5px; border: 1px solid var(--dk-line); user-select: none; touch-action: pan-y; }
.dk-ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dk-ba__after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.dk-ba__handle { position: absolute; top: 0; bottom: 0; width: 3px; background: #fff; left: var(--pos, 50%); box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.dk-ba__grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--dk-navy); display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.28); }
.dk-ba__tag { position: absolute; top: 12px; padding: 4px 11px; border-radius: 3px; background: rgba(14,27,34,.72); color: #fff; font-size: 11.5px; font-family: 'Montserrat', sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.dk-ba__tag--before { left: 12px; }
.dk-ba__tag--after { right: 12px; }
.dk-ba__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; }

/* ------------------------------------------------------------- Akordeón */

.dk-acc { border: 1px solid var(--dk-line); border-radius: 5px; overflow: hidden; background: var(--dk-card); }
.dk-acc__item + .dk-acc__item { border-top: 1px solid var(--dk-line); }
.dk-acc__btn { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 18px 22px; background: none; border: 0; text-align: left; cursor: pointer; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 15px; color: var(--dk-ink); }
.dk-acc__btn:hover { color: var(--dk-blue); }
.dk-acc__btn i { color: var(--dk-blue); transition: transform .25s ease; flex-shrink: 0; }
.dk-acc__btn[aria-expanded='true'] i { transform: rotate(180deg); }
.dk-acc__panel { padding: 0 22px 20px; }

/* --------------------------------------------------------------- Formulár */

.dk-form { display: grid; gap: 16px; }
.dk-form__row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.dk-field { display: grid; gap: 6px; }
.dk-field label { font-family: 'Montserrat', sans-serif; font-size: 12.5px; font-weight: 600; color: var(--dk-ink); }
.dk-field input, .dk-field select, .dk-field textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--dk-line); border-radius: 3px;
  background: var(--dk-card); color: var(--dk-ink); font-family: 'Open Sans', sans-serif; font-size: 14px;
}
.dk-field textarea { min-height: 130px; resize: vertical; }
.dk-field--error input, .dk-field--error select, .dk-field--error textarea { border-color: #d9534f; }
.dk-field__error { color: #d9534f; font-size: 12.5px; }
.dk-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; }
.dk-consent input { margin-top: 4px; }
.dk-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.dk-alert { padding: 14px 18px; border-radius: 4px; font-size: 14px; }
.dk-alert--ok { background: #e6f6ec; color: #1d6b3a; border: 1px solid #bfe6cd; }
.dk-alert--err { background: #fdecea; color: #a3312a; border: 1px solid #f5c6c3; }
html[data-theme='dark'] .dk-alert--ok { background: #14301f; color: #8fd6a8; border-color: #24543a; }
html[data-theme='dark'] .dk-alert--err { background: #33191a; color: #f0a29c; border-color: #5c2a29; }

/* ------------------------------------------------------------------ Mapa */

.dk-map { position: relative; border: 1px solid var(--dk-line); border-radius: 5px; overflow: hidden; background: var(--dk-bg-soft); }
.dk-map img { display: block; width: 100%; height: auto; }
.dk-map__overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(14,27,34,.35); }
.dk-map iframe { display: block; width: 100%; height: 420px; border: 0; }

/* --------------------------------------------------------------- Pätička */

.dk-footer { background: var(--dk-bg-alt); border-top: 1px solid var(--dk-line); padding: 60px 0 0; }
.dk-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 34px; align-items: start; }
.dk-footer h3 { font-size: 15px; font-weight: 700; margin-bottom: 16px; color: var(--dk-ink); }
.dk-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.dk-footer a { color: var(--dk-body); text-decoration: none; font-size: 14px; }
.dk-footer a:hover { color: var(--dk-blue); }

.dk-footer__bottom {
  margin-top: 46px; border-top: 1px solid var(--dk-line); padding: 18px 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 22px;
  font-size: 13px; color: var(--dk-body);
}
.dk-footer__bottom > * { display: flex; align-items: center; gap: 8px; margin: 0; }
.dk-footer__version {
  font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 12.5px; letter-spacing: .06em;
  color: var(--dk-ink); background: var(--dk-bg-soft); border: 1px solid var(--dk-line);
  border-radius: 3px; padding: 3px 10px; white-space: nowrap;
}
@media (max-width: 767px) {
  .dk-footer__bottom { justify-content: center; text-align: center; }
}

/* ----------------------------------------------------------------- Cookies
   Celoštvorcová spodná lišta s rozbaliteľnými nastaveniami.               */

.dk-cookies {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
  background: var(--dk-card); border-top: 1px solid var(--dk-line);
  box-shadow: 0 -12px 40px -30px rgba(0, 0, 0, .55);
  padding: 22px 0;
  max-height: 85vh; overflow-y: auto;
}

.dk-cookies__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px 32px;
}

.dk-cookies__text { flex: 1 1 380px; min-width: 0; }
.dk-cookies__title {
  font-family: 'Montserrat', sans-serif; font-size: 17px; font-weight: 700;
  color: var(--dk-ink); margin: 0 0 6px;
}
.dk-cookies__text p { margin: 0; font-size: 13.5px; line-height: 24px; max-width: 62ch; }
.dk-cookies__text a { color: var(--dk-ink); text-decoration: underline; text-underline-offset: 3px; }
.dk-cookies__text a:hover { color: var(--dk-blue); }

.dk-cookies__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.dk-cookies__actions .dk-btn { min-width: 150px; }

.dk-btn--dark { background: var(--dk-ink); color: var(--dk-bg); border-color: var(--dk-ink); }
.dk-btn--dark:hover, .dk-btn--dark:focus { background: var(--dk-blue); border-color: var(--dk-blue); color: #fff; }

.dk-cookies__panel {
  margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--dk-line);
  display: grid; gap: 18px; justify-items: start;
}
.dk-cookies__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; width: 100%; }
.dk-cookies__list li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; }
.dk-cookies__list input { width: 17px; height: 17px; margin-top: 3px; accent-color: var(--dk-blue); }
.dk-cookies__list label { display: grid; gap: 2px; cursor: pointer; }
.dk-cookies__list label strong { font-family: 'Montserrat', sans-serif; font-size: 14px; color: var(--dk-ink); }
.dk-cookies__list label span { font-size: 13px; line-height: 22px; }
.dk-cookies__list input:disabled + label { cursor: default; }

@media (max-width: 767px) {
  .dk-cookies { padding: 18px 0; }
  .dk-cookies__actions { width: 100%; }
  .dk-cookies__actions .dk-btn { flex: 1 1 100%; min-width: 0; }
}

/* ------------------------------------------------------------- Plávajúce CTA */

.dk-fab { position: fixed; right: 16px; bottom: 16px; z-index: 1050; display: none; }
@media (max-width: 991px) {
  .dk-fab { display: flex; gap: 10px; }
  .dk-fab a { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: var(--dk-on-blue); background: var(--dk-blue-strong); box-shadow: 0 8px 24px -8px rgba(32,159,214,.9); font-size: 20px; text-decoration: none; }
  .dk-fab a.is-alt { background: var(--dk-navy); }
  body.has-cookiebar .dk-fab { bottom: 150px; }
}

/* -------------------------------------------------------------- Chybová str. */

.dk-error { min-height: 62vh; display: grid; place-items: center; text-align: center; padding: 70px 0; }
.dk-error__code { font-family: 'Montserrat', sans-serif; font-size: 96px; font-weight: 800; line-height: 1; color: var(--dk-blue); }

/* ------------------------------------------------------------------ Ostatné */

.dk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dk-chip { border: 1px solid var(--dk-line); background: var(--dk-card); color: var(--dk-ink); border-radius: 20px; padding: 7px 15px; font-size: 12.5px; cursor: pointer; font-family: 'Montserrat', sans-serif; font-weight: 600; }
.dk-chip[aria-pressed='true'] { background: var(--dk-blue-strong); border-color: var(--dk-blue-strong); color: #fff; }

.dk-steps { counter-reset: step; display: grid; gap: 18px; }
.dk-step { display: grid; grid-template-columns: 42px 1fr; gap: 16px; align-items: start; }
.dk-step__num { counter-increment: step; width: 42px; height: 42px; border-radius: 50%; background: var(--dk-bg-soft); color: var(--dk-blue); display: grid; place-items: center; font-family: 'Montserrat', sans-serif; font-weight: 700; }
.dk-step__num::before { content: counter(step); }

.dk-quote { border-left: 3px solid var(--dk-blue); padding: 6px 0 6px 20px; font-size: 15px; }

.dk-media { border-radius: 5px; overflow: hidden; border: 1px solid var(--dk-line); }
.dk-media img { display: block; width: 100%; height: auto; }

.dk-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.dk-gallery figure { margin: 0; border-radius: 5px; overflow: hidden; border: 1px solid var(--dk-line); position: relative; }
.dk-gallery img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .5s ease; }
.dk-gallery figure:hover img { transform: scale(1.05); }
.dk-gallery figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 14px; background: linear-gradient(to top, rgba(14,27,34,.82), transparent); color: #fff; font-size: 13px; }

.dk-team__card { text-align: center; }
.dk-team__photo { aspect-ratio: 3/4; overflow: hidden; background: var(--dk-bg-soft); }
.dk-team__photo img { width: 100%; height: 100%; object-fit: cover; }

.dk-note { background: var(--dk-gold-soft); border: 1px solid var(--dk-line); border-left: 3px solid var(--dk-gold); border-radius: 4px; padding: 16px 18px; font-size: 13.5px; }

.dk-sticky { position: sticky; top: calc(var(--dk-header-h) + 20px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ------------------------------------------------- Dvojstĺpcové rozloženia
   Inline grid-template-columns sa nedá zalomiť médiovým dopytom, preto
   majú obsah a bočný panel vlastné triedy.                                */

.dk-split { display: grid; gap: 40px; grid-template-columns: minmax(0, 2fr) minmax(270px, 1fr); align-items: start; }
.dk-split--form { grid-template-columns: minmax(0, 3fr) minmax(270px, 2fr); }
.dk-split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 991px) {
  .dk-split,
  .dk-split--form,
  .dk-split--even { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .dk-sticky { position: static; }
}

/* Monogram namiesto fotografie, kým klient nedodá vlastné portréty tímu. */
.dk-monogram {
  width: 100%; height: 100%; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--dk-bg-soft), var(--dk-card));
  color: var(--dk-blue); font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 44px; letter-spacing: .04em;
}

/* Bezplatné položky ako jeden vstupný bod nad cenníkom. */
.dk-free {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 24px; padding: 22px 24px;
  background: var(--dk-bg-soft); border: 1px solid var(--dk-blue);
  border-radius: 5px;
}
.dk-free__price {
  font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 34px;
  color: var(--dk-blue-strong); white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* Pri tlači rozbalíme všetky skupiny cenníka. */
@media print {
  .dk-price__rows[hidden] { display: block !important; }
  .dk-header, .dk-footer, .dk-cookies, .dk-fab, .dk-crumb__nav { display: none !important; }
  .dk-section { padding: 12px 0 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; }
}


/* -------------------------------------------------- Zarovnanie v mriežkach
   Nadpisy v dlaždiciach majú rôzny počet riadkov, takže text pod nimi
   začínal v každej karte inde. Nadpisu preto rezervujeme dva riadky,
   aby popisy začínali na rovnakej výške naprieč celým radom.           */

.dk-usp__item > span { display: grid; align-content: start; }
.dk-usp__item .dk-h4 { min-height: calc(2 * 1.4em); margin-bottom: 4px; }
.dk-usp__item { align-items: start; }

.dk-card__body > .dk-h3 { min-height: calc(2 * 1.35em); }
.dk-team__card .dk-card__body > .dk-h3 { min-height: 0; }

@media (max-width: 575px) {
  .dk-usp__item .dk-h4,
  .dk-card__body > .dk-h3 { min-height: 0; }
}


/* Odznaky v orientačnom rozpočte: dva zarovnané stĺpce namiesto zalamovania.
   Rovnaká šírka aj výška buniek, cena zarovnaná vpravo, aby sa dala porovnať. */
.dk-chips--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}
/* V úzkom priestore radšej jeden stĺpec než lámanie názvov na päť riadkov. */
@media (max-width: 1100px) {
  .dk-chips--grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
.dk-chips--grid .dk-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; border-radius: 4px; padding: 11px 14px; line-height: 1.35;
}
.dk-chips--grid .dk-chip > span {
  font-variant-numeric: tabular-nums; white-space: nowrap; opacity: .85; font-weight: 700;
  flex-shrink: 0;
}
.dk-chips--grid .dk-chip { min-width: 0; }
.dk-chips--grid .dk-chip[aria-pressed='true'] > span { opacity: 1; }

@media (max-width: 767px) {
  .dk-chips--grid { grid-template-columns: minmax(0, 1fr); }
}


/* V tmavom režime sú akcentové texty svetlé, pretože ležia na tmavom podklade.
   Tlačidlá majú vlastný tmavší podklad a vždy biele písmo. */
html[data-theme='dark'] .dk-link,
html[data-theme='dark'] .dk-eyebrow,
html[data-theme='dark'] .dk-price__value,
html[data-theme='dark'] .dk-card__price,
html[data-theme='dark'] .dk-free__price,
html[data-theme='dark'] .dk-crumb__nav a,
html[data-theme='dark'] .dk-usp__icon,
html[data-theme='dark'] .dk-monogram { color: #5ec2ee; }

/* Tlačidlo musí byť od tmavého podkladu odlíšené aj okrajom. */
html[data-theme='dark'] .dk-btn--primary { border-color: #2f9ecd; }

/* Zaškrtávacie políčka a prepínače v tmavom režime. */
input[type='checkbox'], input[type='radio'] { accent-color: var(--dk-blue-strong); }
html[data-theme='dark'] input[type='checkbox'],
html[data-theme='dark'] input[type='radio'] { accent-color: #5ec2ee; }
.dk-consent input { width: 17px; height: 17px; }

/* Odkaz na agentúru v pätičke nech je rozoznateľný. */
.dk-footer__bottom a { color: var(--dk-ink); text-decoration: underline; text-underline-offset: 3px; }
.dk-footer__bottom a:hover { color: var(--dk-blue-strong); }

/* ---------------------------------------------------------- Právne stránky */

.dk-prose { max-width: 68ch; }
.dk-prose section + section { margin-top: 34px; }
.dk-prose .dk-h2 { font-size: 22px; margin-bottom: 12px; scroll-margin-top: calc(var(--dk-header-h) + 30px); }
.dk-prose p { margin: 0 0 14px; }
.dk-prose .dk-list { margin: 4px 0 14px; }
.dk-updated {
  font-family: 'Montserrat', sans-serif; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--dk-body); margin-bottom: 26px;
}
.dk-toc { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.dk-toc a { font-size: 13.5px; color: var(--dk-body); text-decoration: none; }
.dk-toc a:hover { color: var(--dk-blue-strong); }

/* Kým je otvorené mobilné menu, plávajúce tlačidlá prekážajú, preto ich skryjeme. */
body.has-drawer .dk-fab { display: none; }
body.has-drawer { overflow: hidden; }

/* ============================================================================
   Pohyb a mikrointerakcie
   Cieľom je, aby web pôsobil živo, nie aby sa hýbalo všetko naraz.
   Každá animácia sa vypne pri systémovom nastavení „obmedziť pohyb“.
   ========================================================================= */

/* --- Ukazovateľ prečítanej časti stránky --- */
.dk-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1300;
  background: transparent; pointer-events: none;
}
.dk-progress span {
  display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--dk-blue-strong), var(--dk-blue), var(--dk-gold));
  transition: transform .12s linear;
}

/* --- Odkrývanie pri rolovaní --- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
[data-reveal='left']  { transform: translateX(-26px); }
[data-reveal='right'] { transform: translateX(26px); }
[data-reveal='zoom']  { transform: scale(.965); }

/* deti sa odkrývajú s odstupom, aby to pôsobilo prirodzene */
[data-reveal].is-revealed > * { animation: dk-rise .6s cubic-bezier(.22,.61,.36,1) backwards; }
[data-reveal].is-revealed > *:nth-child(2) { animation-delay: .07s; }
[data-reveal].is-revealed > *:nth-child(3) { animation-delay: .14s; }
[data-reveal].is-revealed > *:nth-child(4) { animation-delay: .21s; }
[data-reveal].is-revealed > *:nth-child(5) { animation-delay: .28s; }
[data-reveal].is-revealed > *:nth-child(6) { animation-delay: .35s; }
@keyframes dk-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* --- Prelnutie pri zmene stránky --- */
/* Prechod medzi stránkami sa nepoužíva. Stránka sa musí zobraziť okamžite. */

/* --- Hero: pomalé priblíženie fotografie a nábeh textu --- */
.dk-hero__slide img {
  transform-origin: 50% 42%;
  transform: scale(1.045) translateZ(0);
  backface-visibility: hidden;
  animation: none;
}
/*
  Priblíženie beží len na práve zobrazenej a na odchádzajúcej snímke, takže
  sa vždy rozbehne od začiatku a prelína sa pohyb do pohybu.
  Trvá o niečo dlhšie než cyklus, aby na konci nezastalo.
*/
.dk-hero__slide.is-active img,
.dk-hero__slide.is-prev img {
  animation: dk-kenburns calc(var(--hero-cycle, 9500ms) * 1.35) linear both;
}
@keyframes dk-kenburns {
  from { transform: scale(1.045) translateZ(0); }
  to   { transform: scale(1.115) translateZ(0); }
}

.dk-hero__h1 { animation: dk-heroin .8s cubic-bezier(.22,.61,.36,1) backwards; }
/*
  Text snímky sa pri prepnutí obnovuje. Dlhé oneskorenia znamenali, že hero
  bol vyše sekundy prázdny. Nábeh je preto krátky a takmer bez odstupu,
  takže text je čitateľný prakticky okamžite.
*/
.dk-hero__slidetext > * { animation: dk-heroin .34s cubic-bezier(.22,.61,.36,1) backwards; }
.dk-hero__slidetext > *:nth-child(1) { animation-delay: .04s; }
.dk-hero__slidetext > *:nth-child(2) { animation-delay: .09s; }
.dk-hero__slidetext > *:nth-child(3) { animation-delay: .14s; }
.dk-hero__slidetext > *:nth-child(4) { animation-delay: .19s; }
.dk-hero__claim {
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 26px;
  line-height: 1.25; color: #fff; margin: 0 0 12px;
}
@media (max-width: 767px) { .dk-hero__claim { font-size: 21px; } }
@keyframes dk-heroin { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

/* bodky hera ukazujú, koľko času do prepnutia zostáva */
.dk-hero__dots button { position: relative; overflow: hidden; }
.dk-hero__dots button[aria-current='true']::after {
  content: ''; position: absolute; inset: 0; background: #fff;
  transform-origin: 0 50%; animation: dk-dot var(--hero-cycle, 9500ms) linear both;
}
@keyframes dk-dot { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.dk-hero__dots button[aria-current='true']::after { animation-duration: var(--hero-cycle, 9500ms); }
.dk-hero__dots button.is-paused::after { animation-play-state: paused; }

/* --- Tlačidlá: šípka sa pohne, tlačidlo mierne vystúpi --- */
.dk-btn { position: relative; overflow: hidden; }
.dk-btn::after {
  content: ''; position: absolute; inset: 0; background: #fff; opacity: 0;
  transition: opacity .25s ease;
}
.dk-btn:hover::after { opacity: .09; }
.dk-btn:active { transform: translateY(1px); }
.dk-btn > * { position: relative; z-index: 1; }

.dk-link i { transition: transform .25s ease; display: inline-block; }
.dk-link:hover i { transform: translateX(5px); }

/* --- Karty: obrázok sa priblíži, spodok dostane akcentovú linku --- */
.dk-card { position: relative; }
.dk-card::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--dk-blue-strong); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.dk-card:hover::after { transform: scaleX(1); }

/* --- Ikony výhod jemne pulzujú pri nábehu --- */
.dk-usp__item:hover .dk-usp__icon { transform: scale(1.08) rotate(-4deg); }
.dk-usp__icon { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }

/* --- Počítadlá --- */
.dk-counter { font-variant-numeric: tabular-nums; }
.dk-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px; background: var(--dk-line); border: 1px solid var(--dk-line);
  border-radius: 5px; overflow: hidden;
}
.dk-stat { background: var(--dk-card); padding: 28px 22px; text-align: center; }
.dk-stat__value {
  display: block; font-family: 'Montserrat', sans-serif; font-weight: 800;
  font-size: 40px; line-height: 1.1; color: var(--dk-blue-strong); margin-bottom: 6px;
}
.dk-stat__label { font-size: 13.5px; }
html[data-theme='dark'] .dk-stat__value { color: #5ec2ee; }

/* --- Jemný farebný nádych na okrajoch sekcií --- */
.dk-section--soft { position: relative; }
.dk-section--soft::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 90% at 12% 0%, rgba(32,159,214,.10), transparent 60%),
    radial-gradient(50% 80% at 92% 100%, rgba(176,141,63,.08), transparent 60%);
}
.dk-section--soft > .container { position: relative; }

/* --- Formuláre: pole sa pri písaní zvýrazní --- */
.dk-field input, .dk-field select, .dk-field textarea {
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.dk-field input:focus, .dk-field select:focus, .dk-field textarea:focus {
  border-color: var(--dk-blue-strong);
  box-shadow: 0 0 0 3px rgba(32, 159, 214, .16);
  outline: none;
}

/* --- Odznaky a chipy --- */
.dk-chip { transition: transform .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease; }
.dk-chip:hover { transform: translateY(-2px); border-color: var(--dk-blue-strong); }

/* --- Akordeón sa rozbaľuje plynulo --- */
.dk-acc__panel { animation: dk-acc .32s cubic-bezier(.22,.61,.36,1) both; }
@keyframes dk-acc { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* --- Galéria --- */
.dk-gallery figure { transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease; }
.dk-gallery figure:hover { transform: translateY(-5px); box-shadow: var(--dk-shadow); }

/* --- Rešpekt k obmedzenému pohybu --- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .dk-hero__slide img,
  .dk-hero__h1,
  .dk-hero__slidetext > *,
  .dk-hero__dots button[aria-current='true']::after,
  .dk-acc__panel,
  [data-reveal].is-revealed > * { animation: none !important; }
  .dk-progress span { transition: none; }
}

/* ------------------------------------------------ Vycentrovaný posledný rad
   Mriežka necháva neúplný posledný rad zarovnaný vľavo a vpravo vzniká diera.
   Preto karty ukladáme cez flex, kde sa posledný rad vycentruje sám.
   Šírka stĺpca zostáva rovnaká ako pri mriežke.                            */

.dk-grid--3,
.dk-grid--4 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.dk-grid--3 > * { flex: 0 1 calc((100% - 2 * 24px) / 3); min-width: 272px; }
.dk-grid--4 > * { flex: 0 1 calc((100% - 3 * 24px) / 4); min-width: 220px; }

@media (max-width: 991px) {
  .dk-grid--3 > *,
  .dk-grid--4 > * { flex: 0 1 calc((100% - 24px) / 2); }
}
@media (max-width: 575px) {
  .dk-grid--3 > *,
  .dk-grid--4 > * { flex: 1 1 100%; min-width: 0; }
}

/* Galéria má rovnaký problém s posledným radom. */
.dk-gallery { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.dk-gallery > figure { flex: 0 1 calc((100% - 2 * 16px) / 3); min-width: 240px; }
@media (max-width: 767px) { .dk-gallery > figure { flex: 1 1 100%; min-width: 0; } }

/* ============================================================================
   Interaktívna schéma chrupu
   ========================================================================= */

.dk-chart {
  border: 1px solid var(--dk-line); border-radius: 6px; background: var(--dk-card);
  padding: 30px; display: grid; gap: 26px; box-shadow: var(--dk-shadow);
}
.dk-chart__head { text-align: center; }
.dk-chart__head .dk-lead { margin: 0 auto; }
.dk-chart__body { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(260px, 1fr); gap: 30px; align-items: start; }

.dk-teeth {
  display: grid; gap: 8px; justify-items: center;
  padding: 22px 12px; border-radius: 5px;
  background: linear-gradient(180deg, var(--dk-bg-soft), var(--dk-card));
  border: 1px solid var(--dk-line);
}
.dk-teeth__label {
  font-family: 'Montserrat', sans-serif; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dk-body);
}
.dk-teeth__mid { width: 78%; height: 1px; background: var(--dk-line); margin: 4px 0; }
.dk-teeth__row { display: flex; gap: 14px; flex-wrap: nowrap; max-width: 100%; }
.dk-teeth__quadrant { display: flex; gap: 3px; }

.dk-tooth {
  border: 0; background: none; padding: 2px 1px; cursor: pointer;
  display: grid; justify-items: center; gap: 2px; border-radius: 4px;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), background-color .18s ease;
}
.dk-tooth svg { width: 22px; height: 28px; display: block; }
.dk-tooth__crown {
  fill: #fbfcfd; stroke: #b9cbd4; stroke-width: 1.1;
  transition: fill .18s ease, stroke .18s ease;
}
.dk-tooth__root { stroke: #c9d8df; stroke-width: 1.6; fill: none; stroke-linecap: round; }
.dk-tooth__num {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 9px;
  color: var(--dk-body); opacity: .65; font-variant-numeric: tabular-nums;
}
.dk-tooth:hover { transform: translateY(-3px); background: var(--dk-bg-soft); }
.dk-tooth:hover .dk-tooth__crown { fill: #eaf6fc; stroke: var(--dk-blue); }
.dk-tooth.is-selected { background: var(--dk-bg-soft); transform: translateY(-4px); }
.dk-tooth.is-selected .dk-tooth__crown { fill: var(--dk-blue); stroke: var(--dk-blue-strong); }
.dk-tooth.is-selected .dk-tooth__root { stroke: var(--dk-blue-strong); }
.dk-tooth.is-selected .dk-tooth__num { opacity: 1; color: var(--dk-blue-strong); font-weight: 600; }
.dk-tooth:focus-visible { outline: 3px solid var(--dk-blue-strong); outline-offset: 2px; }

html[data-theme='dark'] .dk-tooth__crown { fill: #1d3540; stroke: #3c5b68; }
html[data-theme='dark'] .dk-tooth__root { stroke: #37545f; }
html[data-theme='dark'] .dk-tooth:hover .dk-tooth__crown { fill: #24485a; stroke: #5ec2ee; }
html[data-theme='dark'] .dk-tooth.is-selected .dk-tooth__crown { fill: #5ec2ee; stroke: #a8e4ff; }

.dk-chart__panel {
  border: 1px solid var(--dk-line); border-radius: 5px; background: var(--dk-bg-alt);
  padding: 22px; min-height: 260px; display: grid; align-content: start; gap: 6px;
}
.dk-chart__empty { display: grid; justify-items: center; gap: 12px; text-align: center; align-content: center; min-height: 216px; }
.dk-chart__icon {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--dk-card); color: var(--dk-blue-strong); font-size: 21px; border: 1px solid var(--dk-line);
}
.dk-chart__badge {
  justify-self: start; font-family: 'Montserrat', sans-serif; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--dk-blue-strong);
  background: var(--dk-bg-soft); border-radius: 20px; padding: 5px 12px; margin-bottom: 4px;
}
.dk-chart__services { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 1px; background: var(--dk-line); border: 1px solid var(--dk-line); border-radius: 4px; overflow: hidden; }
.dk-chart__services a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 11px 14px; background: var(--dk-card); text-decoration: none; font-size: 13.5px;
  color: var(--dk-ink); transition: background-color .18s ease;
}
.dk-chart__services a:hover { background: var(--dk-bg-soft); }
.dk-chart__services strong { color: var(--dk-blue-strong); white-space: nowrap; font-size: 12.5px; }
.dk-chart__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.dk-chart__note { margin: 0; text-align: center; font-size: 12.5px; opacity: .8; }

@media (max-width: 991px) {
  .dk-chart { padding: 22px; }
  .dk-chart__body { grid-template-columns: minmax(0, 1fr); }
  .dk-teeth__row { gap: 8px; }
  .dk-tooth svg { width: 17px; height: 22px; }
}
@media (max-width: 575px) {
  .dk-chart { padding: 16px; }
  .dk-teeth { padding: 14px 4px; }
  .dk-teeth__row { gap: 5px; }
  .dk-teeth__quadrant { gap: 1px; }
  .dk-tooth { padding: 1px 0; }
  .dk-tooth svg { width: 13px; height: 18px; }
  .dk-tooth__num { font-size: 7.5px; }
}

/* ------------------------------------------------------------ Šírka obsahu
   Obsah je z každej strany stiahnutý o 5 % šírky okna, takže má okolo seba
   viac vzduchu. Celoplošné pozadia sekcií a fotografie v hero zostávajú
   po celej šírke, zužuje sa len stĺpec s obsahom.                          */

.container {
  width: 100%;
  max-width: min(1170px, 90vw);
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 575px) {
  /* Na malom displeji by 5 % bolo primálo, necháme pohodlný okraj. */
  .container { max-width: calc(100% - 36px); }
}

/* ============================================================================
   PRÉMIOVÁ VRSTVA

   Väčšina zubných ambulancií na Slovensku stavia web na svetlomodrej a bielych
   boxoch. Dentalika má vo svojom logu zlatú, ktorú konkurencia nepoužíva,
   preto je práve ona nosnou akcentovou farbou. Modrá zostáva na funkčné prvky
   a odkazy, zlatá nesie identitu.

   Tri veci, ktoré web odlišujú:
     1. hlboká tmavotyrkysová plocha ako druhý podklad, nie len biela,
     2. serifové písmo na veľkých nadpisoch, ktoré pôsobí ako súkromná klinika,
     3. zlatý oblúk úsmevu odvodený z loga, používaný ako podpisový prvok.
   ========================================================================= */

:root {
  --dk-gold: #8a6a24;          /* zlatá na svetlom podklade, 5,04 : 1 */
  --dk-gold-bright: #c9a227;   /* zlatá na tmavom podklade, 6,35 : 1 */
  --dk-gold-soft: #f6f0e2;
  --dk-deep: #0f2830;          /* hlboká tmavotyrkysová */
  --dk-deep-2: #143440;
  --dk-deep-ink: #eef6f8;
  --dk-deep-body: #cfe0e6;
  --dk-serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
}
html[data-theme='dark'] {
  --dk-gold: #d8bc6a;
  --dk-gold-bright: #d8bc6a;
  --dk-gold-soft: #241f12;
}

/* ------------------------------------------------------------ Typografia */

.dk-h1, .dk-h2 {
  font-family: var(--dk-serif);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.dk-h1 { font-size: clamp(2.6rem, 5.2vw, 4.1rem); line-height: 1.06; }
.dk-h2 { font-size: clamp(1.95rem, 3.4vw, 2.85rem); line-height: 1.12; }
.dk-hero__claim { font-family: var(--dk-serif); font-weight: 600; font-size: clamp(1.5rem, 2.6vw, 2.05rem); }
.dk-h3 { font-family: 'Montserrat', sans-serif; letter-spacing: -0.01em; }

/* Kurzívou zvýraznené slovo v nadpise pôsobí ako podpis, nie ako reklama. */
.dk-h1 em, .dk-h2 em { font-style: italic; color: var(--dk-gold); }

/* --------------------------------------------------- Očíslované nadnadpisy */

.dk-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11.5px; letter-spacing: .2em; color: var(--dk-gold);
}
.dk-eyebrow::before {
  content: ''; width: 34px; height: 1px; background: currentColor; opacity: .6;
}
.dk-sectionhead--center .dk-eyebrow::after {
  content: ''; width: 34px; height: 1px; background: currentColor; opacity: .6;
}

/* --------------------------------------------- Podpisový prvok: oblúk úsmevu */

.dk-arc { display: block; width: 128px; height: 20px; margin: 18px auto 0; overflow: visible; }
.dk-arc path {
  fill: none; stroke: var(--dk-gold); stroke-width: 1.4; stroke-linecap: round;
  stroke-dasharray: 240; stroke-dashoffset: 240;
}
[data-reveal].is-revealed .dk-arc path,
.dk-arc.is-on path { animation: dk-arc 1.5s cubic-bezier(.22,.61,.36,1) .25s forwards; }
@keyframes dk-arc { to { stroke-dashoffset: 0; } }
.dk-sectionhead:not(.dk-sectionhead--center) .dk-arc { margin-left: 0; }

/* --------------------------------------------------- Tmavá plocha ako rytmus */

.dk-section--deep {
  background: var(--dk-deep);
  color: var(--dk-deep-body);
  position: relative;
}
.dk-section--deep::after {
  /* jemný zlatý závoj v rohoch, aby plocha nebola plochá */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 100% at 8% 0%, rgba(201,162,39,.16), transparent 62%),
    radial-gradient(60% 100% at 96% 100%, rgba(32,159,214,.16), transparent 62%);
}
.dk-section--deep > .container { position: relative; z-index: 1; }
.dk-section--deep .dk-h1,
.dk-section--deep .dk-h2,
.dk-section--deep .dk-h3,
.dk-section--deep .dk-h4 { color: var(--dk-deep-ink); }
.dk-section--deep .dk-lead,
.dk-section--deep p { color: var(--dk-deep-body); }
.dk-section--deep .dk-eyebrow { color: var(--dk-gold-bright); }
.dk-section--deep .dk-arc path { stroke: var(--dk-gold-bright); }
.dk-section--deep .dk-btn--ghost { color: #fff; border-color: rgba(255,255,255,.34); }
.dk-section--deep .dk-btn--ghost:hover { background: #fff; color: var(--dk-deep); border-color: #fff; }

/* ------------------------------------------------------- Karty bez rámu */

.dk-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.dk-card:hover { transform: none; box-shadow: none; border: 0; }
.dk-card__media {
  border-radius: 3px; aspect-ratio: 5 / 4;
  box-shadow: 0 18px 44px -30px rgba(15, 40, 48, .55);
}
.dk-card__body { padding: 20px 2px 0; gap: 8px; }
.dk-card::after { left: 2px; right: 2px; bottom: auto; top: 100%; background: var(--dk-gold); height: 1px; }
.dk-card:hover .dk-card__media { box-shadow: 0 24px 54px -28px rgba(15, 40, 48, .7); }

/* cena ako jemný zlatý štítok, nie modrá bublina */
.dk-card__price {
  background: transparent; padding: 0; border-radius: 0;
  color: var(--dk-gold); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
}
.dk-card__body > .dk-h3 { font-size: 21px; }
.dk-card__body > .dk-h3 a:hover { color: var(--dk-gold); }

html[data-theme='dark'] .dk-card__media { box-shadow: 0 18px 44px -30px rgba(0,0,0,.9); }

/* ---------------------------------------------------- Pás výhod bez mriežky */

.dk-usp { background: transparent; border: 0; border-radius: 0; gap: 0; }
.dk-usp__item { background: transparent; padding: 4px 26px; position: relative; }
.dk-usp__item + .dk-usp__item::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px;
  background: linear-gradient(to bottom, transparent, var(--dk-line), transparent);
}
.dk-usp__icon {
  background: transparent; border: 1px solid var(--dk-gold); color: var(--dk-gold);
  width: 38px; height: 38px; font-size: 14px;
}

/* ---------------------------------------------------------------- Čísla */

.dk-stats { background: transparent; border: 0; gap: 0; }
.dk-stat { background: transparent; position: relative; }
.dk-stat + .dk-stat::before {
  content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px;
  background: linear-gradient(to bottom, transparent, var(--dk-line), transparent);
}
.dk-stat__value { font-family: var(--dk-serif); font-weight: 700; font-size: 56px; color: var(--dk-gold); }
.dk-stat__label { letter-spacing: .02em; }
html[data-theme='dark'] .dk-stat__value { color: var(--dk-gold); }
.dk-section--deep .dk-stat__value { color: var(--dk-gold-bright); }
.dk-section--deep .dk-stat + .dk-stat::before { background: linear-gradient(to bottom, transparent, rgba(255,255,255,.18), transparent); }

/* --------------------------------------------------------------- Tlačidlá */

.dk-btn { border-radius: 2px; letter-spacing: .12em; font-size: 12px; padding: 15px 30px; }
.dk-btn--gold { background: var(--dk-gold); color: #fff; border-color: var(--dk-gold); }
.dk-btn--gold:hover { background: var(--dk-deep); border-color: var(--dk-deep); color: #fff; }
.dk-section--deep .dk-btn--gold { background: var(--dk-gold-bright); color: var(--dk-deep); border-color: var(--dk-gold-bright); }

/* -------------------------------------------------------------- Hero ladenie */

.dk-hero__scrim {
  background:
    linear-gradient(100deg, rgba(15,40,48,.94) 0%, rgba(15,40,48,.80) 38%, rgba(15,40,48,.34) 70%, rgba(15,40,48,.10) 100%),
    linear-gradient(to top, rgba(15,40,48,.46) 0%, transparent 44%);
}
.dk-hero__content .dk-eyebrow { color: var(--dk-gold-bright); }
.dk-hero { border-bottom: 1px solid var(--dk-gold); }
.dk-hero__dots button[aria-current='true']::after { background: var(--dk-gold-bright); }

/* --------------------------------------------------------------- Cenník */

.dk-price__value { color: var(--dk-gold); font-family: var(--dk-serif); font-size: 19px; font-weight: 700; }
.dk-free { border-color: var(--dk-gold); background: var(--dk-gold-soft); }
.dk-free__price { color: var(--dk-gold); font-family: var(--dk-serif); font-size: 46px; }
.dk-free .dk-h3 { color: var(--dk-ink); }

/* ------------------------------------------------------------ Drobnosti */

.dk-link { color: var(--dk-gold); letter-spacing: .08em; text-transform: uppercase; font-size: 11.5px; }
.dk-link:hover { color: var(--dk-deep); }
html[data-theme='dark'] .dk-link:hover { color: #fff; }
.dk-chart__badge { color: var(--dk-gold); background: var(--dk-gold-soft); }
.dk-chart__services strong { color: var(--dk-gold); }
.dk-footer { background: var(--dk-deep); color: var(--dk-deep-body); border-top: 2px solid var(--dk-gold); }
.dk-footer h3 { color: var(--dk-deep-ink); font-family: var(--dk-serif); font-size: 19px; font-weight: 600; }
.dk-footer a, .dk-footer li { color: var(--dk-deep-body); }
.dk-footer a:hover { color: var(--dk-gold-bright); }
.dk-footer__bottom { border-top-color: rgba(255,255,255,.14); color: var(--dk-deep-body); }
.dk-footer__bottom a { color: var(--dk-deep-ink); }
.dk-footer__bottom a:hover { color: var(--dk-gold-bright); }
.dk-footer__version { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: var(--dk-deep-ink); }
.dk-progress span { background: linear-gradient(90deg, var(--dk-gold), var(--dk-gold-bright), var(--dk-blue)); }

@media (max-width: 767px) {
  .dk-usp__item { padding: 14px 0; }
  .dk-usp__item + .dk-usp__item::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px;
    background: linear-gradient(to right, transparent, var(--dk-line), transparent); }
  .dk-stat + .dk-stat::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px;
    background: linear-gradient(to right, transparent, var(--dk-line), transparent); }
  .dk-stat__value { font-size: 42px; }
}

/* Hero: nadnadpis nad nadpisom, oblúk pod ním. */
.dk-hero__eyebrow {
  animation: dk-heroin .34s cubic-bezier(.22,.61,.36,1) backwards;
  animation-delay: 0s;
  margin-bottom: 14px;
}
.dk-hero__arc { margin: 10px 0 20px; }
.dk-hero__arc path { stroke: var(--dk-gold-bright); animation: dk-arc 1.6s cubic-bezier(.22,.61,.36,1) .5s forwards; }
@media (prefers-reduced-motion: reduce) {
  .dk-hero__eyebrow, .dk-arc path { animation: none !important; stroke-dashoffset: 0 !important; }
}

/* Vlastné SVG ikony dedia farbu a majú jednotnú hrúbku ťahu. */
.dk-icon { display: block; }
.dk-usp__icon .dk-icon { width: 19px; height: 19px; }

/* ============================================================================
   PALETA Z LOGA

   Farby sú odčítané priamo zo súboru loga. Logo obsahuje jediný odtieň,
   teplú zlatú s odtieňom 44,5°, na teplom slonovinovom podklade. Modrá zo
   šablóny sa preto na webe už nepoužíva.

     zlatá v logu     #d6be79   ťažisko sýtych bodov
     tmavšia zlatá    #c1a659   tieňovaná časť zuba
     svetlá zlatá     #eddeb4   odlesk
     podklad loga     #f7f5f2   teplá slonovinová

   Odtiene na text sú stmavené tak, aby spĺňali WCAG AA:
     #7d6420 na bielej 5,65 : 1     biela na #7d6420 5,65 : 1
   ========================================================================= */

:root {
  /* zlatá radа */
  --dk-gold:        #7d6420;   /* text a tlačidlá na svetlom */
  --dk-gold-mid:    #c1a659;   /* linky, rámy, dekor */
  --dk-gold-bright: #d6be79;   /* zlatá z loga, na tmavom */
  --dk-gold-pale:   #eddeb4;   /* odlesk */
  --dk-gold-soft:   #f6f1e3;   /* jemná výplň */

  /* modré premenné šablóny presmerujeme na zlatú, aby sa nikde neobjavila */
  --dk-blue:        #c1a659;
  --dk-blue-strong: #7d6420;
  --dk-blue-dark:   #6a541a;
  --dk-navy:        #241f16;
  --dk-on-blue:     #ffffff;

  /* podklady a text v teplých tónoch loga */
  --dk-bg:       #ffffff;
  --dk-bg-alt:   #faf9f7;
  --dk-bg-soft:  #f4f2ee;
  --dk-card:     #ffffff;
  --dk-ink:      #241f16;
  --dk-body:     #5c5445;
  --dk-line:     #e7e1d5;
  --dk-shadow:   0 10px 40px -28px rgba(36, 31, 22, .45);

  /* tmavý pás */
  --dk-deep:      #241f16;
  --dk-deep-2:    #2e2719;
  --dk-deep-ink:  #f4f0e6;
  --dk-deep-body: #d3c9b4;
}

html[data-theme='dark'] {
  --dk-gold:        #d6be79;
  --dk-gold-mid:    #c1a659;
  --dk-gold-bright: #d6be79;
  --dk-gold-pale:   #eddeb4;
  --dk-gold-soft:   #241f12;

  --dk-blue:        #d6be79;
  --dk-blue-strong: #d6be79;
  --dk-blue-dark:   #c1a659;
  --dk-navy:        #eddeb4;
  --dk-on-blue:     #17140d;

  --dk-bg:       #17140d;
  --dk-bg-alt:   #1d1a12;
  --dk-bg-soft:  #221e15;
  --dk-card:     #211d14;
  --dk-ink:      #f4f0e6;
  --dk-body:     #c6bda9;
  --dk-line:     #37301f;
  --dk-shadow:   0 10px 40px -28px rgba(0, 0, 0, .9);

  --dk-deep:      #100e09;
  --dk-deep-ink:  #f4f0e6;
  --dk-deep-body: #c6bda9;
}

/* V tmavom režime má tlačidlo tmavé písmo na zlatej, tam je kontrast 10 : 1. */
html[data-theme='dark'] .dk-btn--primary,
html[data-theme='dark'] .dk-btn--gold { background: var(--dk-gold-bright); color: #17140d; border-color: var(--dk-gold-bright); }
html[data-theme='dark'] .dk-btn--primary:hover,
html[data-theme='dark'] .dk-btn--gold:hover { background: var(--dk-gold-pale); color: #17140d; border-color: var(--dk-gold-pale); }

/* Farebné závoje prekreslíme do zlatej, modrá sa už nikde neobjaví. */
.dk-section--soft::before {
  background:
    radial-gradient(60% 90% at 12% 0%, rgba(193,166,89,.16), transparent 60%),
    radial-gradient(50% 80% at 92% 100%, rgba(214,190,121,.12), transparent 60%);
}
.dk-section--deep::after {
  background:
    radial-gradient(70% 100% at 8% 0%, rgba(214,190,121,.14), transparent 62%),
    radial-gradient(60% 100% at 96% 100%, rgba(193,166,89,.10), transparent 62%);
}
.dk-hero__scrim {
  background:
    linear-gradient(100deg, rgba(26,22,14,.94) 0%, rgba(26,22,14,.80) 38%, rgba(26,22,14,.34) 70%, rgba(26,22,14,.10) 100%),
    linear-gradient(to top, rgba(26,22,14,.48) 0%, transparent 44%);
}
.dk-progress span { background: linear-gradient(90deg, var(--dk-gold-mid), var(--dk-gold-bright), var(--dk-gold-pale)); }
.dk-field input:focus, .dk-field select:focus, .dk-field textarea:focus {
  box-shadow: 0 0 0 3px rgba(193, 166, 89, .22);
}
.dk-teeth { background: linear-gradient(180deg, var(--dk-bg-soft), var(--dk-card)); }
.dk-tooth__crown { fill: #fffdf8; stroke: #d8cfb9; }
.dk-tooth__root { stroke: #e0d7c2; }
.dk-tooth:hover .dk-tooth__crown { fill: var(--dk-gold-soft); stroke: var(--dk-gold-mid); }
.dk-tooth.is-selected .dk-tooth__crown { fill: var(--dk-gold-mid); stroke: var(--dk-gold); }
.dk-tooth.is-selected .dk-tooth__root { stroke: var(--dk-gold); }
html[data-theme='dark'] .dk-tooth__crown { fill: #2b2618; stroke: #4a412b; }
html[data-theme='dark'] .dk-tooth__root { stroke: #453c28; }
html[data-theme='dark'] .dk-tooth:hover .dk-tooth__crown { fill: #3a3220; stroke: var(--dk-gold-bright); }
html[data-theme='dark'] .dk-tooth.is-selected .dk-tooth__crown { fill: var(--dk-gold-bright); stroke: var(--dk-gold-pale); }

/* Logo v hlavičke na teplom podklade, nie na čistej bielej. */
.dk-brand img { background: #fdfcfa; }

/* --------------------------------------------------- Náznak posunu v hero */

.dk-hero__scroll {
  position: absolute; right: 5vw; bottom: 26px; z-index: 5;
  display: inline-flex; align-items: center; gap: 14px;
  background: none; border: 0; cursor: pointer; padding: 8px 0;
  font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  transition: color .25s ease;
}
.dk-hero__scroll:hover { color: var(--dk-gold-bright); }
.dk-hero__scrollline {
  display: block; width: 52px; height: 1px; background: currentColor;
  transform-origin: 0 50%;
  animation: dk-scrollline 2.4s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes dk-scrollline {
  0%, 100% { transform: scaleX(.45); opacity: .55; }
  50%      { transform: scaleX(1);   opacity: 1; }
}
.dk-hero__scroll:focus-visible { outline: 2px solid var(--dk-gold-bright); outline-offset: 4px; }

@media (max-width: 767px) {
  .dk-hero__scroll { right: 50%; transform: translateX(50%); bottom: 16px; font-size: 10px; letter-spacing: .18em; }
  .dk-hero__scrollline { width: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .dk-hero__scrollline { animation: none; transform: scaleX(1); }
}

/* Ikona presne v strede krúžku. Inline SVG si so sebou nesie účtovanie
   riadkovania, preto ho vynulujeme a prvok centrujeme mriežkou. */
.dk-usp__icon,
.dk-chart__icon {
  display: grid;
  place-items: center;
  place-content: center;
  line-height: 0;
  padding: 0;
}
.dk-usp__icon > *,
.dk-chart__icon > * { display: block; margin: 0; grid-area: 1 / 1; place-self: center; }

/* Náznak posunu musí byť čitateľný aj nad svetlou časťou fotografie. */
.dk-hero__scroll {
  color: #fff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .55);
}
.dk-hero__scrollline { box-shadow: 0 1px 6px rgba(0, 0, 0, .45); }

/* ============================================================================
   Zaoblenie a tiene v duchu macOS

   macOS nepoužíva jeden ostrý tieň, ale niekoľko vrstiev s rastúcim rozostrením
   a klesajúcou sýtosťou. Vďaka tomu prvok pôsobí, akoby ležal nad plochou,
   a nie akoby mal pod sebou nakreslenú škvrnu.
   ========================================================================= */

:root {
  --dk-r-sm: 8px;    /* drobné prvky, štítky */
  --dk-r-md: 12px;   /* tlačidlá, polia */
  --dk-r-lg: 16px;   /* karty, panely */
  --dk-r-xl: 20px;   /* fotografie a veľké plochy */

  --dk-shadow-1:
    0 1px 1px rgba(36, 31, 22, .04),
    0 2px 4px rgba(36, 31, 22, .04);
  --dk-shadow-2:
    0 1px 1px rgba(36, 31, 22, .04),
    0 4px 8px rgba(36, 31, 22, .05),
    0 10px 20px rgba(36, 31, 22, .06);
  --dk-shadow-3:
    0 1px 1px rgba(36, 31, 22, .05),
    0 6px 12px rgba(36, 31, 22, .06),
    0 16px 32px rgba(36, 31, 22, .08),
    0 32px 64px rgba(36, 31, 22, .10);
}
html[data-theme='dark'] {
  --dk-shadow-1: 0 1px 2px rgba(0,0,0,.5);
  --dk-shadow-2: 0 2px 4px rgba(0,0,0,.45), 0 8px 18px rgba(0,0,0,.5);
  --dk-shadow-3: 0 2px 6px rgba(0,0,0,.5), 0 12px 28px rgba(0,0,0,.55), 0 28px 60px rgba(0,0,0,.6);
}

/* ------------------------------------------------------------- Tlačidlá */

.dk-btn {
  border-radius: var(--dk-r-md);
  box-shadow: var(--dk-shadow-1);
  transition: background-color .22s ease, color .22s ease, border-color .22s ease,
              box-shadow .28s cubic-bezier(.22,.61,.36,1), transform .18s cubic-bezier(.22,.61,.36,1);
}
.dk-btn:hover { box-shadow: var(--dk-shadow-2); transform: translateY(-1px); }
.dk-btn:active { box-shadow: var(--dk-shadow-1); transform: translateY(0); }
.dk-btn--ghost { box-shadow: none; }
.dk-btn--ghost:hover { box-shadow: var(--dk-shadow-1); }
.dk-btn--sm { border-radius: var(--dk-r-sm); }
.dk-iconbtn, .dk-burger { border-radius: var(--dk-r-sm); }
.dk-lang { border-radius: var(--dk-r-sm); }
.dk-chip { border-radius: 999px; }
.dk-chips--grid .dk-chip { border-radius: var(--dk-r-md); }

/* ---------------------------------------------------------- Fotografie */

.dk-card__media {
  border-radius: var(--dk-r-lg);
  box-shadow: var(--dk-shadow-2);
  transition: box-shadow .35s cubic-bezier(.22,.61,.36,1), transform .35s cubic-bezier(.22,.61,.36,1);
}
.dk-card:hover .dk-card__media { box-shadow: var(--dk-shadow-3); transform: translateY(-3px); }

.dk-media,
.dk-gallery figure,
.dk-ba,
.dk-map,
.dk-team__photo {
  border-radius: var(--dk-r-xl);
  box-shadow: var(--dk-shadow-2);
  border: 0;
  overflow: hidden;
}
.dk-gallery figure:hover,
.dk-media:hover { box-shadow: var(--dk-shadow-3); }
.dk-team__card { overflow: visible; }
.dk-team__photo { margin-bottom: 4px; }

/* ------------------------------------------------------ Panely a plochy */

.dk-chart,
.dk-price,
.dk-acc,
.dk-free,
.dk-note,
.dk-alert,
.dk-cookies,
.dk-stats,
.dk-usp,
.dk-teeth,
.dk-chart__panel,
.dk-chart__services,
.dk-submenu {
  border-radius: var(--dk-r-lg);
}
.dk-chart { box-shadow: var(--dk-shadow-3); }
.dk-price, .dk-acc, .dk-free { box-shadow: var(--dk-shadow-1); }
.dk-submenu { box-shadow: var(--dk-shadow-3); }
.dk-cookies { border-radius: var(--dk-r-lg) var(--dk-r-lg) 0 0; box-shadow: var(--dk-shadow-3); }

/* polia formulára */
.dk-field input, .dk-field select, .dk-field textarea { border-radius: var(--dk-r-md); }
.dk-field textarea { border-radius: var(--dk-r-lg); }

/* prvý a posledný riadok v zoznamoch nech kopírujú zaoblenie */
.dk-price__rows > li:last-child { border-bottom-left-radius: var(--dk-r-lg); border-bottom-right-radius: var(--dk-r-lg); }
.dk-price__head { border-radius: var(--dk-r-lg) var(--dk-r-lg) 0 0; }

/* logo v hlavičke */
.dk-brand img { border-radius: var(--dk-r-md); box-shadow: var(--dk-shadow-1); }

/* plávajúce tlačidlá a schéma chrupu */
.dk-fab a { box-shadow: var(--dk-shadow-3); }
.dk-tooth { border-radius: var(--dk-r-sm); }
.dk-chart__icon { box-shadow: var(--dk-shadow-1); }
.dk-stat, .dk-usp__item { border-radius: var(--dk-r-md); }

@media (max-width: 575px) {
  :root { --dk-r-lg: 14px; --dk-r-xl: 16px; }
}

/* Obsah, ktorý je pri načítaní už na obrazovke, sa nikdy neprelína.
   Animácia patrí len tomu, čo návštevník ešte nevidel. */
[data-reveal].is-instant,
[data-reveal].is-instant > * {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}



/* ============================================================================
   Priestorové fotografie

   Aby fotografia pôsobila, že leží nad plochou, potrebuje tri veci naraz:
   kontaktný tieň hneď pod okrajom, mäkký rozptýlený tieň do diaľky
   a tenký svetlý lem, ktorý naznačí hranu. Samotný veľký tieň to nespraví.
   ========================================================================= */

:root {
  --dk-lift:
    0 2px 3px rgba(36, 31, 22, .07),
    0 8px 14px rgba(36, 31, 22, .07),
    0 20px 34px rgba(36, 31, 22, .09),
    0 40px 70px rgba(36, 31, 22, .12);
  --dk-lift-hi:
    0 3px 5px rgba(36, 31, 22, .09),
    0 12px 22px rgba(36, 31, 22, .10),
    0 30px 52px rgba(36, 31, 22, .12),
    0 60px 100px rgba(36, 31, 22, .16);
  --dk-edge: inset 0 0 0 1px rgba(255, 255, 255, .5);
}
html[data-theme='dark'] {
  --dk-lift:
    0 2px 3px rgba(0,0,0,.55),
    0 10px 18px rgba(0,0,0,.5),
    0 26px 44px rgba(0,0,0,.5),
    0 50px 90px rgba(0,0,0,.55);
  --dk-lift-hi:
    0 3px 6px rgba(0,0,0,.6),
    0 16px 28px rgba(0,0,0,.55),
    0 36px 64px rgba(0,0,0,.55),
    0 70px 120px rgba(0,0,0,.6);
  --dk-edge: inset 0 0 0 1px rgba(255, 255, 255, .07);
}

.dk-card__media,
.dk-media,
.dk-gallery figure,
.dk-ba,
.dk-map,
.dk-team__photo {
  box-shadow: var(--dk-lift), var(--dk-edge);
  transform: translateZ(0);
  transition:
    box-shadow .4s cubic-bezier(.22,.61,.36,1),
    transform .4s cubic-bezier(.22,.61,.36,1);
}

.dk-card:hover .dk-card__media,
.dk-gallery figure:hover,
.dk-media:hover {
  box-shadow: var(--dk-lift-hi), var(--dk-edge);
  transform: translateY(-6px) scale(1.006);
}

/* Fotografia dostane pod spodnou hranou kontaktný tieň, ktorý ju
   pritlačí k ploche. Bez neho pôsobí, akoby sa vznášala. */
.dk-card__media::after,
.dk-media::after,
.dk-gallery figure::after {
  content: '';
  position: absolute;
  left: 8%; right: 8%; bottom: -14px; height: 18px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(36,31,22,.22), transparent 72%);
  filter: blur(7px);
  opacity: .8;
  pointer-events: none;
  transition: opacity .4s ease, transform .4s ease;
  z-index: -1;
}
.dk-media, .dk-gallery figure { position: relative; }
.dk-card:hover .dk-card__media::after,
.dk-gallery figure:hover::after,
.dk-media:hover::after { opacity: 1; transform: translateY(5px) scaleX(1.04); }
html[data-theme='dark'] .dk-card__media::after,
html[data-theme='dark'] .dk-media::after,
html[data-theme='dark'] .dk-gallery figure::after {
  background: radial-gradient(ellipse at center, rgba(0,0,0,.6), transparent 72%);
}

@media (prefers-reduced-motion: reduce) {
  .dk-card:hover .dk-card__media,
  .dk-gallery figure:hover,
  .dk-media:hover { transform: none; }
}

/* ============================================================================
   Motív z loga: drôtený glóbus
   ========================================================================= */

.dk-meridian { display: block; color: currentColor; }
.dk-meridian.is-spinning { animation: dk-spin 90s linear infinite; transform-origin: 50% 50%; }
@keyframes dk-spin { to { transform: rotate(360deg); } }

.dk-watermark {
  position: absolute; pointer-events: none; z-index: 0;
  opacity: .18; color: var(--dk-gold-mid);
}
.dk-watermark--right { right: -12%; top: 50%; transform: translateY(-50%); width: min(62vw, 720px); }
.dk-watermark--left  { left: -16%; bottom: -30%; width: min(50vw, 560px); }
.dk-section--deep .dk-watermark { color: var(--dk-gold-bright); opacity: .13; }
.dk-hero .dk-watermark { opacity: .16; color: var(--dk-gold-bright); z-index: 3; }
@media (max-width: 767px) { .dk-watermark { opacity: .1; } }
@media (prefers-reduced-motion: reduce) { .dk-meridian.is-spinning { animation: none; } }

/* ============================================================================
   Prehliadka služieb
   ========================================================================= */

.dk-showcase {
  display: grid;
  grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.15fr);
  gap: 44px;
  align-items: start;
}

.dk-showcase__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.dk-showcase__list li + li { border-top: 1px solid var(--dk-line); }

.dk-showcase__item {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: baseline;
  gap: 14px;
  padding: 15px 14px;
  text-decoration: none;
  border-radius: var(--dk-r-md);
  transition: background-color .25s ease, padding-left .3s cubic-bezier(.22,.61,.36,1);
}
.dk-showcase__num {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .06em; color: var(--dk-gold-mid);
  font-variant-numeric: tabular-nums;
}
.dk-showcase__name {
  font-family: var(--dk-serif); font-size: 25px; font-weight: 600; line-height: 1.15;
  color: var(--dk-ink); transition: color .25s ease;
}
.dk-showcase__price {
  font-family: 'Montserrat', sans-serif; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dk-body); white-space: nowrap;
  opacity: .7; transition: opacity .25s ease, color .25s ease;
}
.dk-showcase__item:hover,
.dk-showcase__item.is-active { background: var(--dk-gold-soft); padding-left: 22px; }
.dk-showcase__item.is-active .dk-showcase__name { color: var(--dk-gold); }
.dk-showcase__item.is-active .dk-showcase__price { opacity: 1; color: var(--dk-gold); }
.dk-showcase__item:focus-visible { outline: 2px solid var(--dk-gold); outline-offset: 2px; }

.dk-showcase__stage { position: sticky; top: calc(var(--dk-header-h) + 24px); display: grid; gap: 24px; }

.dk-showcase__frame {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--dk-r-xl);
  box-shadow: var(--dk-lift), var(--dk-edge);
  background: var(--dk-bg-soft);
}
.dk-showcase__frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.06);
  transition: opacity .55s ease, transform 1.1s cubic-bezier(.22,.61,.36,1);
}
.dk-showcase__frame img.is-active { opacity: 1; transform: scale(1); }

.dk-showcase__counter {
  position: absolute; left: 18px; bottom: 16px; z-index: 2;
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px;
  color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.6); font-variant-numeric: tabular-nums;
}
.dk-showcase__counter strong { font-size: 26px; font-weight: 500; color: var(--dk-gold-bright); }
.dk-showcase__counter em { font-style: normal; opacity: .7; }

.dk-showcase__caption { animation: dk-rise .5s cubic-bezier(.22,.61,.36,1) both; }
.dk-showcase__caption .dk-h2 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); margin-bottom: 0; }
.dk-showcase__caption .dk-arc { margin: 10px 0 14px; }
.dk-showcase__caption p { margin: 0 0 18px; max-width: 54ch; }
.dk-showcase__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.dk-showcase__tag { font-family: var(--dk-serif); font-size: 22px; font-weight: 700; color: var(--dk-gold); }

@media (max-width: 991px) {
  .dk-showcase { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .dk-showcase__stage { position: static; order: -1; }
  .dk-showcase__name { font-size: 20px; }
}
@media (max-width: 575px) {
  .dk-showcase__item { grid-template-columns: 28px 1fr; padding: 13px 10px; }
  .dk-showcase__price { grid-column: 2; }
  .dk-showcase__item:hover, .dk-showcase__item.is-active { padding-left: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .dk-showcase__frame img { transition: opacity .2s linear; transform: none; }
  .dk-showcase__caption { animation: none; }
}

/* Vodoznak sa nesmie prelievať do susednej sekcie, preto ho sekcia oreže. */
.dk-section--deep,
.dk-hero { overflow: hidden; }
.dk-section--deep > .container { position: relative; z-index: 1; }

/* ------------------------------------------------------------- Užší hero
   Hero je stiahnutý o 10 % šírky okna z každej strany, takže netlačí na
   okraje obrazovky a pôsobí ako samostatný panel. Rohy sú zaoblené a plocha
   dostáva rovnaký priestorový tieň ako fotografie.                         */

.dk-hero {
  width: 80%;
  margin: 0 auto;
  border-radius: var(--dk-r-xl);
  border-bottom: 0;
  box-shadow: var(--dk-lift), var(--dk-edge);
}
.dk-hero__scroll { right: 40px; }

/* Vnútri užšieho hera už netreba ďalšie stiahnutie obsahu. */
.dk-hero .container { max-width: min(1170px, 88%); }

@media (max-width: 991px) {
  /* Na tablete a mobile by 10 % z každej strany ukrojilo priveľa,
     necháme preto len pohodlný okraj. */
  .dk-hero { width: calc(100% - 32px); border-radius: var(--dk-r-lg); }
  .dk-hero__scroll { right: 24px; }
}
@media (max-width: 575px) {
  .dk-hero { width: calc(100% - 20px); }
}

/* ---------------------------------------------------- Prechod medzi stránkami
   Animácia sa musí dať prehliadnuť, nie odčakať. Obsah preto nikdy nezačína
   na nule, ale na 55 % priehľadnosti, takže je čitateľný po celý čas.
   Trvanie 220 ms je pod hranicou, kde človek začne vnímať čakanie.        */

.dk-pagefade {
  animation: dk-page .22s cubic-bezier(.22, .61, .36, 1) both;
  transform-origin: 50% 0;
}
@keyframes dk-page {
  from { opacity: .55; transform: translateY(7px) scale(.996); }
  to   { opacity: 1;   transform: none; }
}

/* Hlavička sa neanimuje, aby menu pôsobilo pevne. */
.dk-pagefade > * { will-change: opacity, transform; }

@media (prefers-reduced-motion: reduce) {
  .dk-pagefade { animation: none; }
}

/* ============================================================================
   Jednotná šírka obsahu

   Hero aj všetky sekcie sedia v rovnako širokom stĺpci, takže ich ľavý
   a pravý okraj lícuje po celej dĺžke stránky. Šírku drží jedna premenná,
   takže sa nikde nerozíde.
   ========================================================================= */

:root { --dk-shell: min(1280px, 80%); }

.dk-hero,
.container {
  width: var(--dk-shell);
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

/* Vnútri hera je text odsadený od okraja panela, nie od okraja okna. */
.dk-hero .container {
  width: 100%;
  padding-left: clamp(24px, 3.6vw, 62px);
  padding-right: clamp(24px, 3.6vw, 62px);
}
.dk-hero__scroll { right: clamp(24px, 3.6vw, 62px); }

@media (max-width: 991px) {
  :root { --dk-shell: calc(100% - 32px); }
  .dk-hero { width: var(--dk-shell); }
  .dk-hero .container { padding-left: 22px; padding-right: 22px; }
  .dk-hero__scroll { right: 22px; }
}
@media (max-width: 575px) {
  :root { --dk-shell: calc(100% - 20px); }
  .dk-hero .container { padding-left: 16px; padding-right: 16px; }
  .dk-hero__scroll { right: 16px; }
}

/* Celoplošné pozadia sekcií sa musia ťahať po celej šírke okna,
   preto ich rozťahujeme späť a stĺpec vnútri necháme úzky. */
.dk-section--soft,
.dk-section--deep,
.dk-footer {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ============================================================================
   Tlačidlá: menšie a s výraznejším správaním

   Menšia plocha pôsobí drahšie než veľký blok. Efekt nesie zlatý lesk,
   ktorý prebehne cez tlačidlo pri prejdení, a jemné nadvihnutie.
   ========================================================================= */

.dk-btn {
  padding: 11px 22px;
  font-size: 11px;
  letter-spacing: .14em;
  border-radius: 999px;
  gap: 9px;
}
.dk-btn--sm { padding: 9px 17px; font-size: 10.5px; letter-spacing: .12em; }
.dk-btn--block { padding: 12px 20px; }

/* Lesk prechádzajúci cez tlačidlo. Nahrádza pôvodné plošné presvetlenie. */
.dk-btn::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .42), transparent);
  opacity: 0;
  transform: skewX(-18deg);
  transition: none;
}
.dk-btn:hover::after { opacity: 1; animation: dk-sheen .72s cubic-bezier(.3, 0, .2, 1); }
@keyframes dk-sheen {
  from { left: -60%; }
  to   { left: 130%; }
}
.dk-btn--ghost:hover::after { background: linear-gradient(100deg, transparent, rgba(193,166,89,.28), transparent); }

.dk-btn:hover { transform: translateY(-2px); }
.dk-btn:active { transform: translateY(0) scale(.985); }

/* Šípka v tlačidle sa pri prejdení posunie. */
.dk-btn i { transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.dk-btn:hover i { transform: translateX(3px); }

/* Prvé tlačidlo v hero má okolo seba jemný zlatý nádych, aby viedlo oko. */
.dk-hero__actions .dk-btn--gold {
  box-shadow: var(--dk-shadow-1), 0 0 0 0 rgba(214, 190, 121, .5);
  animation: dk-pulse 3.4s ease-in-out infinite;
}
@keyframes dk-pulse {
  0%, 100% { box-shadow: var(--dk-shadow-1), 0 0 0 0 rgba(214, 190, 121, .42); }
  50%      { box-shadow: var(--dk-shadow-2), 0 0 0 9px rgba(214, 190, 121, 0); }
}
.dk-hero__actions .dk-btn--gold:hover { animation: none; }

@media (max-width: 575px) {
  .dk-btn { padding: 12px 20px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .dk-btn:hover::after { animation: none; opacity: 0; }
  .dk-hero__actions .dk-btn--gold { animation: none; }
  .dk-btn:hover, .dk-btn:active { transform: none; }
}

/* ============================================================================
   Porovnanie riešení chýbajúceho zuba
   ========================================================================= */

.dk-gap { display: grid; gap: 28px; }

.dk-gap__filters { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }

.dk-gap__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  align-items: stretch;
}

.dk-gap__card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 28px 24px 24px;
  background: var(--dk-card);
  border: 1px solid var(--dk-line);
  border-radius: var(--dk-r-lg);
  box-shadow: var(--dk-shadow-1);
  transition: box-shadow .35s cubic-bezier(.22,.61,.36,1),
              transform .35s cubic-bezier(.22,.61,.36,1),
              opacity .3s ease, border-color .3s ease;
}
.dk-gap__card:hover { box-shadow: var(--dk-shadow-2); transform: translateY(-3px); }

.dk-gap__card.is-best {
  border-color: var(--dk-gold);
  box-shadow: var(--dk-shadow-2), 0 0 0 1px var(--dk-gold);
  transform: translateY(-4px);
}
.dk-gap__card.is-dim { opacity: .55; }
.dk-gap__card.is-dim:hover { opacity: 1; }

.dk-gap__flag {
  position: absolute; top: -11px; left: 24px;
  background: var(--dk-gold); color: #fff;
  font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px; white-space: nowrap;
  box-shadow: var(--dk-shadow-1);
}

.dk-gap__icon {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--dk-gold); color: var(--dk-gold);
  display: grid; place-items: center; line-height: 0; margin-bottom: 4px;
}
.dk-gap__card .dk-h3 { margin: 0; font-size: 19px; }
.dk-gap__summary { margin: 0; font-size: 13.5px; }

.dk-gap__price { margin: 8px 0 0; display: flex; align-items: baseline; gap: 7px; }
.dk-gap__price em {
  font-style: normal; font-family: 'Montserrat', sans-serif;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--dk-body);
}
.dk-gap__price strong {
  font-family: var(--dk-serif); font-size: 30px; font-weight: 700;
  color: var(--dk-gold); font-variant-numeric: tabular-nums;
}
.dk-gap__breakdown { margin: 0; font-size: 12px; opacity: .75; }

.dk-gap__lists { display: grid; gap: 14px; margin: 14px 0 4px; }
.dk-gap__label {
  margin: 0 0 6px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 7px;
}
.dk-gap__label::before { content: ''; width: 14px; height: 1px; background: currentColor; }
.dk-gap__label--pro { color: var(--dk-gold); }
.dk-gap__label--con { color: var(--dk-body); }
.dk-gap__lists ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.dk-gap__lists li { font-size: 13px; line-height: 21px; padding-left: 14px; position: relative; }
.dk-gap__lists li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--dk-gold-mid);
}
.dk-gap__card .dk-btn { margin-top: 12px; }

.dk-gap__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 24px; padding-top: 6px;
}
.dk-gap__note { margin: 0; font-size: 12.5px; opacity: .8; max-width: 62ch; }

@media (max-width: 575px) {
  .dk-gap__card { padding: 26px 20px 22px; }
  .dk-gap__foot { justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .dk-gap__card, .dk-gap__card:hover, .dk-gap__card.is-best { transform: none; }
}

/* ------------------------------------------- Farebné pásy na šírku hero
   Tmavé aj jemné sekcie prestávajú byť celoplošné a stávajú sa z nich
   panely rovnako široké ako hero, so zaoblenými rohmi. Celá stránka tak
   má jednu zvislú os a nič nevybieha po okraj obrazovky.                  */

.dk-section--soft,
.dk-section--deep {
  width: var(--dk-shell);
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--dk-r-xl);
}
.dk-section--deep { box-shadow: var(--dk-lift), var(--dk-edge); }
.dk-section--soft { border: 1px solid var(--dk-line); }

/* Vnútri panela už je stĺpec plný, obsah odsadíme od jeho okraja. */
.dk-section--soft > .container,
.dk-section--deep > .container {
  width: 100%;
  padding-left: clamp(20px, 3vw, 52px);
  padding-right: clamp(20px, 3vw, 52px);
}

/* Pätička zostáva celoplošná, tam to pôsobí správne. */
.dk-footer {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

@media (max-width: 575px) {
  .dk-section--soft,
  .dk-section--deep { border-radius: var(--dk-r-lg); }
  .dk-section--soft > .container,
  .dk-section--deep > .container { padding-left: 16px; padding-right: 16px; }
}

/* ------------------------------------ Rýchlejšie otvorenie stránky
   Prechod skracujeme na 140 ms a začíname bližšie k cieľovému stavu,
   takže stránka pôsobí, že je na mieste okamžite.                        */

.dk-pagefade { animation-duration: .14s; animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
@keyframes dk-page {
  from { opacity: .72; transform: translateY(4px); }
  to   { opacity: 1;   transform: none; }
}

/* ---------------------------------------- Hlavička stránky na šírku hero
   Blok s drobčekmi, nadpisom a úvodom je rovnako široký panel ako hero
   a ostatné sekcie, takže zvislá os stránky je jednotná aj na podstránkach. */

.dk-crumb {
  width: var(--dk-shell);
  margin: 0 auto;
  border-radius: var(--dk-r-xl);
  border-bottom: 0;
  border: 1px solid var(--dk-line);
  padding: 38px 0 34px;
}
.dk-crumb > .container {
  width: 100%;
  padding-left: clamp(20px, 3vw, 52px);
  padding-right: clamp(20px, 3vw, 52px);
}

/* Prvá sekcia za hlavičkou nemusí mať plné odsadenie zhora. */
.dk-crumb + .dk-section { padding-top: 56px; }

@media (max-width: 575px) {
  .dk-crumb { border-radius: var(--dk-r-lg); padding: 28px 0 26px; }
  .dk-crumb > .container { padding-left: 16px; padding-right: 16px; }
  .dk-crumb + .dk-section { padding-top: 36px; }
}


/* ------------------------------------------------ Okamžité otvorenie stránky
   Stránka vybraná z menu sa musí zobraziť bez akéhokoľvek nábehu. Žiadny
   prechod, žiadne prelínanie, žiadne rolovanie s animáciou.               */

.dk-pagefade { animation: none !important; }

html { scroll-behavior: auto; }

/* Poistka: nič, čo je označené ako okamžité, sa nesmie animovať. */
[data-reveal].is-instant,
[data-reveal].is-instant *,
[data-reveal].is-instant > * {
  animation: none !important;
  transition: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ============================================================================
   Vyhľadávanie
   ========================================================================= */

.dk-search__open { padding: 0 9px; }

.dk-search {
  position: fixed; inset: 0; z-index: 1400;
  background: rgba(20, 16, 10, .55);
  backdrop-filter: blur(3px);
  display: grid; align-items: start; justify-items: center;
  padding: clamp(16px, 9vh, 110px) 16px 16px;
  animation: dk-fadein .16s ease both;
}
@keyframes dk-fadein { from { opacity: 0; } to { opacity: 1; } }

.dk-search__panel {
  width: min(680px, 100%);
  background: var(--dk-card);
  border: 1px solid var(--dk-line);
  border-radius: var(--dk-r-lg);
  box-shadow: var(--dk-lift-hi);
  overflow: hidden;
  animation: dk-rise .2s cubic-bezier(.22,.61,.36,1) both;
}

.dk-search__field {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--dk-line);
  color: var(--dk-gold);
}
.dk-search__field input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font-family: 'Open Sans', sans-serif; font-size: 16px; color: var(--dk-ink);
}
.dk-search__field input::placeholder { color: var(--dk-body); opacity: .8; }
.dk-search__field input::-webkit-search-cancel-button { display: none; }

.dk-search__results { max-height: min(52vh, 460px); overflow-y: auto; }
.dk-search__results ul { list-style: none; margin: 0; padding: 6px; display: grid; gap: 2px; }
.dk-search__results button {
  width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
  display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px;
  align-items: baseline; padding: 11px 12px; border-radius: var(--dk-r-md);
}
.dk-search__results button.is-active { background: var(--dk-gold-soft); }
.dk-search__kind {
  grid-row: 1; font-family: 'Montserrat', sans-serif; font-size: 9.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--dk-gold);
  border: 1px solid var(--dk-line); border-radius: 999px; padding: 3px 8px;
}
.dk-search__title { grid-row: 1; font-size: 15px; color: var(--dk-ink); font-weight: 600; }
.dk-search__meta {
  grid-row: 1; font-family: var(--dk-serif); font-size: 16px; font-weight: 700;
  color: var(--dk-gold); white-space: nowrap;
}
.dk-search__note {
  grid-row: 2; grid-column: 2 / -1; font-size: 12.5px; color: var(--dk-body);
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
.dk-search__empty { margin: 0; padding: 26px 18px; text-align: center; font-size: 14px; }
.dk-search__hint {
  margin: 0; padding: 9px 16px; border-top: 1px solid var(--dk-line);
  background: var(--dk-bg-alt); font-size: 11.5px; color: var(--dk-body);
  font-family: 'Montserrat', sans-serif; letter-spacing: .06em;
}

@media (max-width: 575px) {
  .dk-search { padding-top: 12px; }
  .dk-search__results button { grid-template-columns: 1fr auto; }
  .dk-search__kind { grid-row: 1; grid-column: 1; justify-self: start; }
  .dk-search__title { grid-row: 2; grid-column: 1 / -1; }
  .dk-search__note { grid-row: 3; grid-column: 1 / -1; }
  .dk-search__meta { grid-row: 1; grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .dk-search, .dk-search__panel { animation: none; }
}

/* ------------------------------------------------------- Menu bez zalamovania
   Anglické popisky sú dlhšie než slovenské a lámali sa na dva riadky, čím sa
   rozhodila výška aj rozostupy. Položky preto nikdy nezalamujeme a namiesto
   toho na užších obrazovkách uberáme z odsadenia a veľkosti písma.        */

.dk-menu > li > a,
.dk-menu > li > button { white-space: nowrap; }

@media (min-width: 992px) and (max-width: 1279px) {
  .dk-menu > li > a,
  .dk-menu > li > button { padding-left: 9px; padding-right: 9px; font-size: 12px; letter-spacing: 0; }
  .dk-brand__sub { display: none; }
}
@media (min-width: 992px) and (max-width: 1099px) {
  .dk-menu > li > a,
  .dk-menu > li > button { padding-left: 7px; padding-right: 7px; font-size: 11.5px; }
  .dk-nav__actions .dk-btn--primary { padding-left: 14px; padding-right: 14px; }
}

/* V zásuvke na mobile sa naopak zalomiť môže, tam je miesto. */
@media (max-width: 991px) {
  .dk-menu > li > a,
  .dk-menu > li > button { white-space: normal; }
}

/* Tlačidlá sa nikdy nezalamujú, inak text vytečie mimo tvaru. */
.dk-btn { white-space: nowrap; }
.dk-btn--block { white-space: normal; }

/* ============================================================================
   Ordinačné hodiny
   ========================================================================= */

.dk-hours { display: grid; gap: 10px; }
.dk-hours__title { display: flex; align-items: center; gap: 9px; margin: 0; color: var(--dk-ink); }
.dk-hours__title .dk-icon { color: var(--dk-gold); }

.dk-hours__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dk-hours__list li {
  display: flex; align-items: baseline; gap: 10px; font-size: 13.5px;
  padding: 3px 0; border-radius: 4px;
}
.dk-hours__day { white-space: nowrap; }
.dk-hours__dots { flex: 1; border-bottom: 1px dotted var(--dk-line); min-width: 14px; transform: translateY(-4px); }
.dk-hours__time { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--dk-ink); font-weight: 600; }
.dk-hours__list li.is-today .dk-hours__day,
.dk-hours__list li.is-today .dk-hours__time { color: var(--dk-gold); }

.dk-hours__break, .dk-hours__note { margin: 0; font-size: 12.5px; opacity: .82; }
.dk-hours__fallback { margin: 0; font-size: 13.5px; }

/* Stav v hlavičke */
.dk-hours__today { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.dk-hours__today strong { color: var(--dk-ink); font-weight: 600; }
.dk-hours__sep { opacity: .45; }
.dk-hours__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dk-hours__dot.is-open { background: #2f7d4f; box-shadow: 0 0 0 3px rgba(47, 125, 79, .18); }
.dk-hours__dot.is-closed { background: #a3452f; box-shadow: 0 0 0 3px rgba(163, 69, 47, .16); }
html[data-theme='dark'] .dk-hours__dot.is-open { background: #6fc08d; box-shadow: 0 0 0 3px rgba(111, 192, 141, .2); }
html[data-theme='dark'] .dk-hours__dot.is-closed { background: #e08a72; box-shadow: 0 0 0 3px rgba(224, 138, 114, .2); }

/* V pätičke sú hodiny na tmavom podklade */
.dk-footer .dk-hours__time,
.dk-footer .dk-hours__list li.is-today .dk-hours__day,
.dk-footer .dk-hours__list li.is-today .dk-hours__time { color: var(--dk-gold-bright); }
.dk-footer .dk-hours__dots { border-bottom-color: rgba(255,255,255,.16); }

@media (max-width: 1279px) {
  /* V úzkej hlavičke necháme len adresu, hodiny sú v pätičke aj na kontakte. */
  .dk-topbar__hours { display: none; }
}