:root{
  --wd-bg:#ffffff;
  --wd-text:#0f1222;
  --wd-muted:#6b7280;
  --wd-accent:#6a36ff;        /* fialová */
  --wd-accent-600:#5a2fe0;
  --wd-accent-100:#f2efff;
  --wd-border:#e5e7eb;
  --wd-shadow:0 10px 30px rgba(16,24,40,.08);
}

/* Základ */
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  color:var(--wd-text);
  background:var(--wd-bg);
  line-height:1.5;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ===== NAV – pôvodný vzhľad ===== */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.7);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid rgba(0,0,0,.04);
}
.nav__row{display:flex; align-items:center; justify-content:space-between; height:70px}
.brand{display:flex; align-items:center; gap:.7rem; font-weight:800; letter-spacing:.2px}
.brand__logo{
  width:36px; height:36px; border-radius:9px;
  background:conic-gradient(from 180deg, #7a48ff, #5a2fe0, #a78bfa);
  box-shadow:0 8px 18px rgba(106,54,255,.35);
}
.brand__name{font-size:1.05rem}
.nav__menu{display:flex; gap:1.2rem}
.nav__menu a{padding:.5rem .7rem; border-radius:10px}
.nav__menu a:hover{background:var(--wd-accent-100); color:var(--wd-accent)}
.nav__cta{display:flex; gap:.6rem; align-items:center}
.nav__toggle{display:none}
/* (ak v headeri používaš tieto triedy, nechávam aj pôvodný breakpoint) */
@media (max-width:980px){
  .nav__menu{display:none}
  .nav__toggle{display:inline-flex; border:1px solid var(--wd-border); border-radius:12px; padding:.6rem; background:#fff}
  .nav--open .nav__menu{
    display:flex; position:absolute; top:70px; left:0; right:0;
    background:#fff; border-bottom:1px solid var(--wd-border);
    padding:1rem .8rem; flex-direction:column; gap:.4rem;
  }
  .nav--open .nav__menu a{padding:1rem; border-radius:12px}
}

/* Place items center utility (pro timeline čísla) */
.place-items-center {
  place-items: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Override Bootstrapu pro karty - aby měly náš shadow */
.shadow-soft {
  box-shadow: var(--wd-shadow) !important;
  border: 1px solid var(--wd-border);
  border-radius: 14px;
  background: #fff;
}

/* Chip štítek - zachování původního designu */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .6rem;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid var(--wd-border);
  font-size: .9rem;
}

/* Hero 3D karty - kompletní zachování původního chování */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 400px;
}

.hero__art {
  position: relative;
  perspective: 1200px;
  transform-style: preserve-3d;
}

.card3d {
  position: absolute;
  inset: auto;
  width: min(340px, 90%);
  aspect-ratio: 4/3;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--wd-border);
  box-shadow: var(--wd-shadow);
  transform: translate3d(0,0,0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(var(--tz,0px));
  transition: transform .2s ease;
}

.card3d img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card3d--1 { right: -10%; top: 0;    --tz: 60px;  }
.card3d--2 { right: 10%;  top: 26%;  --tz: 120px; }
.card3d--3 { right: 0;    top: 54%;  --tz: 200px; }

/* Mobile 3D karty - samostatný blok bez změny vrstvení */
.d-lg-none .hero__art {
  min-height: 420px;
}

.d-lg-none .card3d {
  left: 50%;
  transform: translateX(-50%) translateZ(var(--tz,0px));
}

/* Brands pás - mask pro fade efekt */
.brands {
  display: flex;
  gap: 48px;
  overflow: auto;
  padding: 14px 0;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.brands img {
  height: 26px;
  opacity: .7;
  filter: grayscale(1);
  transition: .2s;
}

.brands img:hover {
  opacity: 1;
  filter: none;
}

/* Details/Summary (FAQ) - override Bootstrap default */
details {
  cursor: pointer;
}

details summary {
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

details summary::-webkit-details-marker {
  display: none;
}

/* Přístupnost - redukce pohybu */
@media (prefers-reduced-motion: reduce) {
  .card3d,
  .btn--primary,
  .btn--ghost,
  .brands img {
    transition: none;
  }
}

/* ===== OVERRIDES PRO BOOTSTRAP ===== */

/* Zachování custom button stylů nad Bootstrap tlačítky */
.btn--primary {
  display: inline-flex !important;
  align-items: center;
  gap: .6rem;
  padding: .9rem 1.2rem !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  background: var(--wd-accent) !important;
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(106,54,255,.25);
  transition: .25s all ease;
  will-change: transform, box-shadow;
  text-decoration: none !important;
}

@media (max-width: 767.98px) {
  .btn--primary {
    padding: .4rem !important;  /* Menší padding */
    font-size: .9rem !important;     /* Menšie písmo */
  }
}


.btn--primary:hover,
.btn--primary:focus {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(106,54,255,.35) !important;
  background: var(--wd-accent-600) !important;
  color: #fff !important;
}

.btn--ghost {
  display: inline-flex !important;
  align-items: center;
  gap: .6rem;
  padding: .9rem 1.2rem !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  border: 1px solid var(--wd-border) !important;
  background: #fff !important;
  color: inherit !important;
  transition: .25s all ease;
  text-decoration: none !important;
}

.btn--ghost:hover,
.btn--ghost:focus {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(16,24,40,.06) !important;
  background: #fff !important;
  color: inherit !important;
}

/* Bootstrap form-select - přizpůsobení našemu designu */
.form-select {
  border-radius: 12px !important;
  border: 1px solid var(--wd-border) !important;
  padding: 12px 14px;
}

.form-select:focus {
  border-color: var(--wd-accent) !important;
  box-shadow: 0 0 0 3px rgba(106, 54, 255, 0.1) !important;
}

/* Bootstrap form-control (input) - přizpůsobení */
.form-control {
  border-radius: 12px !important;
  border: 1px solid var(--wd-border) !important;
  padding: 12px 14px;
}

.form-control:focus {
  border-color: var(--wd-accent) !important;
  box-shadow: 0 0 0 3px rgba(106, 54, 255, 0.1) !important;
}

/* Bootstrap card - přizpůsobení */
.card {
  border-radius: 14px !important;
}

.card-body {
  padding: 1.5rem !important;
}

/* Text colors - používáme naše proměnné */
.text-muted {
  color: var(--wd-muted) !important;
}

.text-accent {
  color: var(--wd-accent) !important;
}

.bg-accent-100 {
  background: var(--wd-accent-100) !important;
}

/* Article body styling */
.article-body {
  line-height: 1.8;
}

.article-body h2 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

.article-body h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.article-body p {
  margin-bottom: 1rem;
}

.article-body ul,
.article-body ol {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

.article-body li {
  margin-bottom: 0.5rem;
}

.article-body code {
  background: var(--wd-accent-100);
  color: var(--wd-accent-600);
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-size: 0.9em;
}

.article-body a {
  color: var(--wd-accent);
  text-decoration: underline;
}

.article-body a:hover {
  color: var(--wd-accent-600);
}