/* ---- Design tokens ---- */
:root{
  --bg: #ffffff;
  --text: #141518;
  --muted: #6b7280;
  --accent: #1f2937;          /* neutrálny „slate“ akcent */
  --accent-ink: #ffffff;
  --card: #f6f7fb;
  --ring: rgba(47,109,246,.28);
  --radius: 16px;
  --w-container: 1100px;
  --shadow: 0 10px 30px rgba(10,10,20,.08);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg: #0f1115;
    --text: #eef1f7;
    --muted: #b5bcc9;
    --card: #171a21;
    --accent: #e5e7eb;       /* svetlý akcent v dark mode */
    --accent-ink: #0f1115;
    --shadow: 0 10px 30px rgba(0,0,0,.35);
  }
}


/*:root {*/
/*  --bg: #ffffff;*/
/*  --text: #0F1012;*/
/*  --muted: #6F6A67; !* jemne teplejšia šedá *!*/
/*  --accent: #1A7C9F; !* tyrkysový kabát *!*/
/*  --accent-ink: #ffffff;*/
/*  --accent-warm: #E4A83A; !* zlatý akcent *!*/
/*  --card: #F4F7FA; !* jemné svetlé pozadie *!*/
/*  --ring: rgba(26, 124, 159, .32);*/
/*  --radius: 16px;*/
/*  --shadow: 0 10px 30px rgba(10,10,20,.08);*/
/*  --w-container: 1100px;*/
/*  }*/

/*  @media (prefers-color-scheme: dark) {*/
/*    :root {*/
/*      --bg: #0F1113;*/
/*      --text: #EEF1F7;*/
/*      --muted: #B5B1AF;*/
/*      --accent: #4DB7D8;*/
/*      --accent-ink: #0F1113;*/
/*      --card: #16181C;*/
/*      --shadow: 0 10px 30px rgba(0,0,0,.4);*/
/*      --w-container: 1100px;*/
/*    }*/
/*  }*/

/* ---- Base ---- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; border-radius: calc(var(--radius) - 4px)}
a{color:inherit}
.container{max-width:var(--w-container); margin-inline:auto; padding: 0 20px}
section{padding: clamp(48px, 7vw, 96px) 0}
h1,h2{line-height:1.15; margin:0 0 .6em}
h1{font-size: clamp(32px, 5vw, 45px); letter-spacing:-.02em}
h2{font-size: clamp(24px, 3.4vw, 30px)}
p{margin: 0 0 1em; color: var(--muted)}
ul{color: var(--muted)}
/* ---- Header ---- */
.header{position:sticky; top:0; backdrop-filter:saturate(150%) blur(8px); background:color-mix(in oklab, var(--bg) 80%, transparent); z-index:50; border-bottom:1px solid color-mix(in oklab, var(--muted) 15%, transparent)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700}
.brand-badge{width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:var(--card); box-shadow:var(--shadow)}
/* ---- CTA / buttons (zjednotené) ---- */
.btn,
button,
input[type="submit"],
.nav-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:.85em 1.2em; border-radius:14px; font-weight:700;
  background:var(--accent); color:var(--accent-ink); border:1px solid transparent;
  box-shadow:var(--shadow); cursor:pointer;
  transition: transform .06s ease, filter .18s ease, opacity .18s ease, background .18s ease;
  text-decoration:none;
}
.btn:hover, button:hover, input[type="submit"]:hover, .nav-cta:hover{filter:brightness(1.03)}
.btn:active, button:active, input[type="submit"]:active, .nav-cta:active{transform:translateY(1px)}
.btn:focus-visible, button:focus-visible, input[type="submit"]:focus-visible, .nav-cta:focus-visible{outline:3px solid var(--ring); outline-offset:2px}
.btn.secondary{
  background:transparent; color:var(--text);
  border:1px solid color-mix(in oklab, var(--muted) 35%, transparent);
  box-shadow:none;
}

/* ---- Hero ---- */
.hero{display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(20px, 4vw, 40px); align-items:center}
.hero .tag{display:inline-block; padding:.35em .7em; border-radius:999px; background:var(--card); color:var(--muted); font-weight:600; font-size:.9rem}
.hero p{font-size: clamp(16px, 1.6vw, 18px)}
.hero-media{position:relative}
.hero-media img{width:100%; aspect-ratio:3/4; max-height:600px; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow)}
.hero-card{display:flex; gap:14px; align-items:center; background:var(--card); padding:12px 14px; border-radius:12px; position:absolute; left:12px; bottom:12px; box-shadow:var(--shadow)}
.hero-dot{width:10px; height:10px; border-radius:999px; background: #10b981}
/* ---- Grid helpers ---- */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap: clamp(20px, 4vw, 32px)}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap: clamp(16px, 3vw, 24px)}
@media (max-width: 920px){
  .hero{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
}
/* ---- Cards / icons ---- */
.card{background:var(--card); border-radius:var(--radius); padding: clamp(18px, 2.6vw, 24px); box-shadow:var(--shadow)}

.ico{width:28px; height:28px; display:inline-block}
/* ---- Carousel ---- */
.carousel{position:relative; overflow:hidden; border-radius:var(--radius); background:var(--card)}
.carousel-track{display:flex; transition: transform .5s cubic-bezier(.2,.7,.2,1)}
.slide{min-width:100%; padding: clamp(20px, 3vw, 28px)}
.slide blockquote{margin:0; font-size:clamp(16px,1.6vw,18px); color:var(--text)}
.slide cite{display:block; margin-top:.6em; color:var(--muted); font-style:normal}
.carousel-nav{position:absolute; inset:auto 0 10px 0; display:flex; justify-content:center; gap:8px}
.dot{width:9px; height:9px; border-radius:999px; background:color-mix(in oklab, var(--muted) 35%, transparent); border:none}
.dot[aria-current="true"]{background:var(--accent)}
.carousel-btn{
  position:absolute; top:50%; translate:0 -50%; border:none; width:42px; height:42px; border-radius:12px;
  background:color-mix(in oklab, var(--bg) 70%, transparent); display:grid; place-items:center; cursor:pointer;
}
.prev{left:10px} .next{right:10px}
/* ---- Footer ---- */
footer{padding:36px 0; border-top:1px solid color-mix(in oklab, var(--muted) 15%, transparent); color:var(--muted)}
/* ---- Motion preferences ---- */
@media (prefers-reduced-motion: reduce){
  .carousel-track{transition:none}
}

/* --- Carousel dots: minimalistické a menšie (override) --- */
.carousel-nav{ gap:6px }
.dot{
  width:8px; height:8px; border:none; border-radius:999px;
  background:color-mix(in oklab, var(--muted) 30%, transparent);
  opacity:.7; position:relative; box-shadow:none;
}
.dot::after{                  /* väčšia klik zóna bez zmeny vzhľadu */
  content:""; position:absolute; inset:-10px;
}
.dot[aria-current="true"]{ background:var(--accent); opacity:1 }
.dot:focus-visible{ outline:3px solid var(--ring); outline-offset:2px }

/* --- Carousel dots: skutočne malé a minimalistické --- */
.carousel-nav{ gap:6px; }

.dot{
  appearance:none; -webkit-appearance:none;   /* zruší natívny štýl tlačidla */
  padding:0 !important; margin:0;
  width:6px !important; height:6px !important;/* menšie než predtým */
  border:0; border-radius:999px;
  background:color-mix(in oklab, var(--muted) 30%, transparent);
  opacity:.75;
  display:inline-block;
  line-height:0;                               /* žiadny vnútorný riadok */
  position:relative;                           /* pre klik zónu nižšie */
  box-shadow:none;
  cursor:pointer;
}

.dot::after{                                   /* väčší „neviditeľný“ hitbox */
  content:""; position:absolute; inset:-10px;  /* cca 26×26 px klikateľné */
}

.dot[aria-current="true"]{ background:var(--accent); opacity:1; }
.dot:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; }

@media (max-width: 920px) {

  /* Menší container padding */
  .container {
    padding: 0 16px;
  }

  /* Hero – obrázok hore, text pod ním */
  .hero {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero div:first-child {
    order: 2;
  }
  .hero-media {
    order: 1;
  }

  /* CTA pod hero textom zarovnať na stred */
  .hero div:first-child > div {
    justify-content: center;
  }

  /* Karty nech majú väčší spacing */
  .card {
    padding: 20px;
  }

  /* Recenzie – tlačidlá centrovať */
  #recenzie .grid-2 {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 24px;
  }

  #recenzie .grid-2 > div:first-child {
    text-align: center;
  }

  #recenzie .grid-2 > div:first-child > div {
    justify-content: center;
  }
  .hero-media img {
    object-position: center 30%; /* ↓ posun hore (nižšie percento = viac hore) */
  }
}
@media (max-width: 600px) {

  h1 {
    font-size: 28px;
  }
  h2 {
    font-size: 22px;
  }

  /* Hero CTA – stacked */
  .hero div:first-child > div {
    flex-direction: column;
    gap: 10px;
  }

  /* Grid align */
  .grid-3,
  .grid-2 {
    gap: 20px;
  }

  /* Footer */
  footer .container {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }

  section[aria-label="Záverečná výzva"] .btn {
    white-space: nowrap;      /* zabráni lámaniu riadku */
    min-width: 140px;         /* dostatočná šírka pre “Napíšte mi” */
    text-align: center;
  }

  /* CTA layout — nech komponenty pekne sedia aj na mobile */
  section[aria-label="Záverečná výzva"] .container.card {
    flex-direction: column;
    text-align: center;
  }
}
@media (max-width: 400px) {

  body {
    font-size: 15px;
  }

  .btn,
  .nav-cta {
    padding: 0.75em 1.1em;
    font-size: 15px;
  }

  .card {
    padding: 16px;
  }

  .carousel-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }
}

/* Modern button hover */
.btn,
.nav-cta {
  transition: transform 0.18s ease, box-shadow 0.2s ease, filter 0.18s ease;
}

.btn:hover,
.nav-cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
}

.btn:active,
.nav-cta:active {
  transform: translateY(0);
  box-shadow: var(--shadow);
}

/* Card hover */
.card {
  transition: transform 0.20s ease, box-shadow 0.25s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
}


/* Footer links */
footer a {
  transition: color .15s ease;
}

footer a:hover {
  color: var(--accent);
}