/* Google @import pisiem odstranene 30.8.2026 - pisma su hostovane lokalne (/fonty/), @font-face je v hlave stranok. */
/* ============================================================
   CLAUDE DESIGN — Sprchové kúty (BYDOP v3)
   Source:  ui_kits/website/sprchove-kuty.html (Claude design handoff)
   Scope:   .cd-root  (everything is namespaced — never affects nebula-nav)
   Locked:  bydop-nav-hero.css + bydop-hero-carousel.js are NOT touched.
   ============================================================ */

/* ---------- Fonts (Bricolage Grotesque, DM Sans, Inter, Instrument Serif, Space Grotesk) */

/* ============================================================
   DESIGN TOKENS — scoped to .cd-root (no leak into nebula-nav)
   ============================================================ */
.cd-root {
  /* MATCH HOMEPAGE — DM Sans pre všetky headingy aj body (rovnako ako --floens-font na hlavnej) */
  --font-display: "DM Sans", "DM Sans nahrada", system-ui, sans-serif;
  --font-body:    "DM Sans", "DM Sans nahrada", system-ui, sans-serif;
  --font-ui:      "DM Sans", "DM Sans nahrada", system-ui, sans-serif;
  --font-serif:   "Instrument Serif", "Instrument nahrada", "Playfair Display", Georgia, serif;

  --bydop-orange:      #F97316;
  --bydop-orange-deep: #EA580C;
  --bydop-amber:       #FBBF24;
  --bydop-copper:      #C7844F;
  --bydop-copper-deep: #8A5133;
  --bydop-ink:         #2B1E16;

  --light-bg-1: #FFFFFF;
  --light-bg-2: #F2EEEA;
  --light-bg-3: #EBE3D5;

  --dark-bg-1: #0A0A0A;
  --dark-bg-2: #120C08;

  font-family: var(--font-body);
  color: rgba(40,28,20,.78);
  -webkit-font-smoothing: antialiased;
  display: block;
  width: 100%;
  max-width: 100%;
}
.cd-root *, .cd-root *::before, .cd-root *::after { box-sizing: border-box; }
.cd-root img { max-width: 100%; display: block; }
.cd-root a { color: var(--bydop-copper); text-decoration: none; }

/* ============================================================
   .m-* base layout (taken from mobile.css, only what is used)
   ============================================================ */
.cd-root.m-root {
  max-width: 430px;
  margin: 0 auto;
  background: #1a120c;
  background-image:
    radial-gradient(60% 50% at 50% 0%, rgba(249,115,22,.10), transparent 70%),
    linear-gradient(180deg, #1a120c 0%, #0a0707 100%);
  overflow-x: hidden;
  position: relative;
}
.cd-root .m-section { padding: 56px 22px; }
.cd-root .m-section--cream { background: #F2EEEA; }
.cd-root .m-section--white { background: linear-gradient(180deg, #FFFFFF 0%, #F2EEEA 100%); }
.cd-root .m-section--dark  { background: linear-gradient(180deg, #0F0A06 0%, #1A1108 50%, #0A0705 100%); }
.cd-root .m-section { position: relative; overflow: hidden; }
.cd-root .m-section::before {
  content: ""; position: absolute; top: -160px; right: -120px;
  width: 320px; height: 320px; pointer-events: none; z-index: 0;
  background: radial-gradient(circle at center, rgba(184,97,44,.05), transparent 65%);
  filter: blur(8px);
}
.cd-root .m-section--dark::before { background: radial-gradient(circle at center, rgba(255,122,0,.22), transparent 65%); }
.cd-root .m-section--cream:nth-of-type(even)::before { right: auto; left: -120px; }
.cd-root .m-section > * { position: relative; z-index: 1; }

.cd-root .m-section + .m-section::after {
  content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(184,97,44,.28) 50%, transparent 100%);
  z-index: 2;
}

/* ---------- Hero ---------- */
.cd-root .m-hero {
  position: relative;
  padding: 36px 22px 52px;
  background: radial-gradient(120% 80% at 0% 0%, rgba(249,115,22,.18), transparent 55%),
              linear-gradient(180deg, #1a120c 0%, #120A05 100%);
  color: rgba(255,240,224,.94);
  overflow: hidden;
}
.cd-root .m-hero__chip {
  display: inline-block; padding: 5px 12px;
  border-radius: 999px;
  background: rgba(249,115,22,.10);
  border: 1px solid rgba(249,115,22,.32);
  color: var(--bydop-orange);
  font: 600 10px/1 var(--font-ui);
  letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 18px;
}
.cd-root .m-hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 11vw, 60px);
  line-height: 1.02;
  letter-spacing: -1.2px;
  color: #fff;
  margin: 0 0 14px;
}
.cd-root .m-hero__sub {
  font: 400 15px/1.55 var(--font-body);
  color: rgba(229,213,197,.82);
  margin: 0 0 14px;
}
.cd-root .m-hero__sub b { color: #fff; font-weight: 600; }
.cd-root .m-hero__cta { margin-top: 22px; display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.cd-root .sp-hero-cta { margin-top: 22px; }

/* ---------- Phone rail (mobile floating phone CTA) ---------- */
.cd-root .m-hero__phone-rail {
  display: flex; align-items: center; gap: 10px;
  margin-top: 22px;
  padding: 12px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,122,0,.22);
  border-radius: 14px;
  color: #fff;
  text-decoration: none;
}
.cd-root .m-hero__phone-rail__icon {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: linear-gradient(135deg,#FFB347,#FF7A00); color: #fff; flex-shrink: 0;
}
.cd-root .m-hero__phone-rail__icon svg { width: 18px; height: 18px; }
.cd-root .m-hero__phone-rail__text { display: flex; flex-direction: column; gap: 2px; }
.cd-root .m-hero__phone-rail__lbl {
  font: 500 9px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase;
  color: rgba(229,213,197,.6);
}
.cd-root .m-hero__phone-rail__num { font: 700 18px/1 var(--font-display); color: #fff; letter-spacing: -.2px; }

/* ---------- shiny CTA (orange conic-gradient pill) ---------- */
@property --gradient-angle {
  syntax: "<angle>"; initial-value: 0deg; inherits: false;
}
.cd-root .shiny-cta {
  position: relative; display: inline-block;
  padding: 14px 26px;
  font: 600 14px/1 var(--font-ui);
  letter-spacing: .02em;
  color: #fff;
  background: linear-gradient(135deg, #FF7A00 0%, #E85B00 100%);
  border-radius: 999px;
  text-decoration: none;
  isolation: isolate;
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 10px 28px -10px rgba(255,122,0,.55), inset 0 1px 0 rgba(255,255,255,.25);
}
.cd-root .shiny-cta::before {
  content: ""; position: absolute; inset: -2px; z-index: -1;
  border-radius: inherit;
  background: conic-gradient(
    from var(--gradient-angle),
    #FFB347, #FF7A00, #C24800, #FF7A00, #FFB347
  );
  filter: blur(6px); opacity: .8;
  animation: cd-shiny-spin 8s linear infinite;
}
.cd-root .shiny-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 32px -10px rgba(255,122,0,.65); }
@keyframes cd-shiny-spin { to { --gradient-angle: 360deg; } }

/* ============================================================
   SUBPAGE-SPECIFIC styles (ported from <style> in source)
   ============================================================ */

/* Pull-quote hero */
.cd-root .sp-pullquote {
  position: relative; margin: 4px 0 22px; padding: 18px 18px 18px 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,122,0,.10) 0%, rgba(255,255,255,.04) 60%, rgba(255,179,71,.08) 100%);
  border-left: 3px solid;
  border-image: linear-gradient(180deg, #FFD08A 0%, #FF7A00 50%, #C24800 100%) 1;
  box-shadow: 0 14px 32px -16px rgba(255,122,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(6px);
}
.cd-root .sp-pullquote__mark {
  position: absolute; top: -6px; left: 12px;
  font: 700 56px/1 "Instrument Serif", "Instrument nahrada", Georgia, serif;
  background: linear-gradient(135deg, #FFD08A 0%, #FF7A00 60%, #C24800 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  pointer-events: none; user-select: none;
}
.cd-root .sp-pullquote p {
  margin: 0;
  font: 500 18px/1.5 "Instrument Serif", "Instrument nahrada", Georgia, serif;
  color: rgba(255,240,224,.95);
  letter-spacing: .1px;
}
.cd-root .sp-pullquote p em {
  font-style: italic; font-weight: 600;
  background: linear-gradient(110deg, #FFD08A 0%, #FFB347 40%, #FF7A00 60%, #FFD08A 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: sp-shine 5s linear infinite;
}

/* Section eyebrow + h2 + lead */
.cd-root .sp-eyebrow {
  display: inline-flex; align-items:center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: linear-gradient(135deg, rgba(199,132,79,.16), rgba(138,81,51,.06));
  border: 1px solid transparent; background-clip: padding-box;
  box-shadow: inset 0 0 0 1px rgba(199,132,79,.30), 0 4px 16px -6px rgba(138,81,51,.22);
  color: var(--bydop-copper-deep);
  font: 600 10px/1 var(--font-ui);
  letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 12px;
  position: relative;
}
.cd-root .sp-eyebrow::before {
  content:""; width: 6px; height: 6px; border-radius: 50%;
  background: linear-gradient(135deg, #E8C4A0, #C7844F);
  box-shadow: 0 0 8px rgba(199,132,79,.55);
  animation: sp-pulse 2.4s ease-in-out infinite;
}
@keyframes sp-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: .7; } }

.cd-root .sp-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 7vw, 36px);
  line-height: 1.12;
  letter-spacing: -.5px;
  color: var(--bydop-ink);
  margin: 0 0 8px;
}
.cd-root .sp-h2 em {
  font-style: italic; font-weight: 400;
  background: linear-gradient(135deg, #E8C4A0 0%, #C7844F 50%, #8A5133 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font-family: "Instrument Serif", "Instrument nahrada", serif;
}
.cd-root .m-section--dark .sp-h2 { color: #fff; }
.cd-root .m-section--dark .sp-h2 em {
  background: linear-gradient(135deg, #FFD08A 0%, #FF9540 50%, #FF7A00 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cd-root .sp-lead { font: 400 14px/1.6 var(--font-body); color: rgba(40,28,20,.72); margin: 0 0 18px; }
.cd-root .m-section--dark .sp-lead { color: rgba(229,213,197,.72); }

/* RAL accent — animated shine */
.cd-root .ral, .cd-root .accent-orange {
  background: linear-gradient(110deg, #E8C4A0 0%, #C7844F 30%, #F2DCC2 50%, #C7844F 70%, #8A5133 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: sp-shine 6s linear infinite;
  font-weight: 700;
}
@keyframes sp-shine { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }

/* SPEC table card */
.cd-root .sp-spec {
  background: linear-gradient(180deg, #fff 0%, #F2EEEA 100%);
  border-radius: 16px;
  padding: 4px 16px;
  border: 1px solid rgba(138,81,51,.12);
  box-shadow: 0 4px 18px -10px rgba(40,28,20,.12);
  margin-bottom: 10px;
}
.cd-root .sp-spec__row {
  display: grid; grid-template-columns: 90px 1fr; gap: 10px;
  padding: 12px 0; border-top: 1px dashed rgba(138,81,51,.18);
  transition: background .25s;
}
.cd-root .sp-spec__row:first-child { border-top: 0; }
.cd-root .sp-spec__row:hover { background: rgba(184,97,44,.05); }
.cd-root .sp-spec__k {
  font: 700 10px/1.3 var(--font-ui); letter-spacing: .1em; text-transform: uppercase;
  background: linear-gradient(135deg, #8A5133, #C7844F);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  align-self: start; padding-top: 2px;
}
.cd-root .sp-spec__v { font: 400 13px/1.5 var(--font-body); color: var(--bydop-ink); }
.cd-root .sp-spec__v b { font-weight: 600; }

/* Why cards */
.cd-root .sp-why { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.cd-root .sp-why__card {
  background: linear-gradient(135deg, #FFFFFF 0%, #F6F2EC 100%);
  padding: 22px 20px;
  border: 1px solid rgba(138,81,51,.14);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s, border-color .3s;
  box-shadow: 0 4px 14px -8px rgba(40,28,20,.12);
}
.cd-root .sp-why__card::before {
  content:""; position:absolute; top:0; left:0; right:0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, #C7844F 30%, #E8C4A0 50%, #C7844F 70%, transparent 100%);
  opacity: 0; transition: opacity .4s;
}
.cd-root .sp-why__card:hover {
  transform: translateX(4px);
  border-color: rgba(199,132,79,.4);
  box-shadow: 0 18px 40px -16px rgba(199,132,79,.30), 0 8px 20px -10px rgba(40,28,20,.18);
}
.cd-root .sp-why__card:hover::before { opacity: 1; }
.cd-root .sp-why__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cd-root .sp-why__dot {
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg, #DCA46A 0%, #C7844F 60%, #8A5133 100%);
  color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 6px 18px -4px rgba(138,81,51,.45), inset 0 1px 0 rgba(255,255,255,.4);
}
.cd-root .sp-why__dot svg { width: 16px; height: 16px; stroke: #fff; }
.cd-root .sp-why__title { font: 600 16px/1.25 var(--font-display); letter-spacing: -.3px; color: var(--bydop-ink); margin: 0; }
.cd-root .sp-why__body { font: 400 13.5px/1.55 var(--font-body); color: rgba(40,28,20,.78); margin: 0; }
.cd-root .sp-why__body b { color: var(--bydop-ink); font-weight: 600; }
.cd-root .sp-why__body .ral { color: var(--bydop-copper); font-weight: 700; }

/* Type cards */
.cd-root .sp-types { display: flex; flex-direction: column; gap: 12px; }
.cd-root .sp-type {
  background: #fff; border: 1px solid rgba(138,81,51,.14);
  border-radius: 16px; padding: 18px 18px 16px;
  position: relative; overflow: hidden;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
}
.cd-root .sp-type::after {
  content:""; position:absolute; inset:0; border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, rgba(199,132,79,0) 0%, rgba(199,132,79,.55) 50%, rgba(199,132,79,0) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .4s; pointer-events: none;
}
.cd-root .sp-type:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(199,132,79,.32); }
.cd-root .sp-type:hover::after { opacity: 1; }
.cd-root .sp-type h3 small {
  display: block;
  background: linear-gradient(135deg, #C7844F, #8A5133);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  font-size: 10px; margin-bottom: 4px;
}
.cd-root .sp-type h3 { font: 600 16px/1.2 var(--font-display); color: var(--bydop-ink); margin: 0 0 8px; }
.cd-root .sp-type p { font: 400 13px/1.55 var(--font-body); color: rgba(40,28,20,.72); margin: 0; }
.cd-root .sp-type p b { color: var(--bydop-ink); font-weight: 600; }

/* Type with media (2026 layout) */
.cd-root .sp-type--media { padding: 0; overflow: hidden; }
.cd-root .sp-type__media {
  position: relative;
  aspect-ratio: 16/8;
  background-size: cover; background-position: center;
}
.cd-root .sp-type__media::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.45) 100%);
}
.cd-root .sp-type__idx {
  position: absolute; left: 14px; bottom: 10px; z-index: 1;
  font: 700 32px/1 "Instrument Serif", "Instrument nahrada", Georgia, serif; font-style: italic;
  color: #fff; letter-spacing: -.5px;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.cd-root .sp-type__yr {
  position: absolute; right: 14px; top: 12px; z-index: 1;
  font: 600 10px/1 var(--font-ui);
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.92);
  background: rgba(0,0,0,.32);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.22);
  padding: 6px 9px; border-radius: 999px;
}
.cd-root .sp-type__body { padding: 16px 18px 18px; }
.cd-root .sp-type--media h3 { margin-top: 0; }

/* Edition badge */
.cd-root .sp-edition {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px;
  font: 600 10px/1 var(--font-ui);
  letter-spacing: .22em; text-transform: uppercase;
}
.cd-root .sp-edition__line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(199,132,79,.45) 50%, transparent 100%); }
.cd-root .sp-edition__yr { color: rgba(40,28,20,.55); }
.cd-root .sp-edition__num {
  font-family: "Instrument Serif", "Instrument nahrada", Georgia, serif; font-style: italic; font-weight: 400;
  font-size: 22px; letter-spacing: 0;
  background: linear-gradient(135deg, #E8C4A0 0%, #C7844F 50%, #8A5133 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.cd-root .m-section--dark .sp-edition__yr { color: rgba(229,213,197,.55); }

/* Process (dark section) */
.cd-root .sp-process { display: flex; flex-direction: column; gap: 12px; }
.cd-root .sp-process__item {
  background: linear-gradient(135deg, rgba(255,255,255,.04) 0%, rgba(255,122,0,.04) 100%);
  border: 1px solid rgba(229,213,197,.12);
  border-radius: 16px; padding: 18px 18px 16px;
  backdrop-filter: blur(8px);
  transition: border-color .3s, transform .4s;
}
.cd-root .sp-process__item:hover { border-color: rgba(255,122,0,.4); transform: translateX(4px); }
.cd-root .sp-process__head { display:flex; align-items:center; gap: 12px; margin-bottom: 4px; }
.cd-root .sp-process__num {
  background: linear-gradient(135deg, #FFB347, #FF7A00 50%, #C24800);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font: 800 32px/1 var(--font-display); letter-spacing: -1px;
  text-shadow: 0 2px 16px rgba(255,122,0,.3);
}
.cd-root .sp-process__title { color: #fff; font: 600 14px/1.3 var(--font-display); margin: 0; }
.cd-root .sp-process__body { color: rgba(229,213,197,.72); font: 400 13px/1.55 var(--font-body); margin: 8px 0 0; }
.cd-root .sp-process__body b { color: #fff; font-weight: 500; }

/* Price split */
.cd-root .sp-price { display: flex; flex-direction: column; gap: 10px; }
.cd-root .sp-price__row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: linear-gradient(180deg, #fff 0%, #F2EEEA 100%);
  border: 1px solid rgba(138,81,51,.16);
  border-radius: 12px; padding: 12px 14px;
  transition: transform .3s, box-shadow .3s;
}
.cd-root .sp-price__row:hover { transform: translateX(2px); box-shadow: 0 8px 22px -10px rgba(199,132,79,.28); }
.cd-root .sp-price__lbl { font: 500 13px/1.3 var(--font-display); color: var(--bydop-ink); }
.cd-root .sp-price__pct {
  background: linear-gradient(135deg, rgba(232,196,160,.30), rgba(199,132,79,.18));
  color: var(--bydop-copper-deep); font-weight: 700;
  font: 700 13px/1 var(--font-ui);
  padding: 6px 10px; border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(199,132,79,.30);
  white-space: nowrap;
}
.cd-root .sp-extras {
  background: linear-gradient(135deg, rgba(199,132,79,.08) 0%, rgba(232,196,160,.05) 100%);
  border-left: 3px solid;
  border-image: linear-gradient(180deg, #E8C4A0, #C7844F, #8A5133) 1;
  padding: 12px 14px; border-radius: 0 10px 10px 0; margin-top: 10px;
  font: 400 12.5px/1.55 var(--font-body); color: var(--bydop-ink);
}
.cd-root .sp-extras b { font-weight: 600; }

/* FAQ */
.cd-root .sp-faq { display: flex; flex-direction: column; gap: 10px; }
.cd-root .sp-faq__item {
  background: linear-gradient(180deg, #fff 0%, #F2EEEA 100%);
  border: 1px solid rgba(138,81,51,.16);
  border-radius: 12px; overflow: hidden;
  transition: border-color .3s, box-shadow .3s;
}
.cd-root .sp-faq__item:hover { border-color: rgba(199,132,79,.35); box-shadow: 0 6px 16px -8px rgba(199,132,79,.22); }
.cd-root .sp-faq__item.is-open {
  background: linear-gradient(180deg, #fff 0%, #FAF1E4 100%);
  border-color: rgba(199,132,79,.42);
  box-shadow: 0 10px 24px -12px rgba(199,132,79,.30);
}
.cd-root .sp-faq__q {
  width: 100%; appearance: none; background: transparent; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; text-align: left;
  font: 600 16px/1.45 var(--font-display); color: var(--bydop-ink);
}
.cd-root .sp-faq__q::after {
  content: "+"; font: 300 22px/1 var(--font-display); color: var(--bydop-copper); flex-shrink: 0;
}
.cd-root .sp-faq__item.is-open .sp-faq__q::after { content: "−"; }
.cd-root .sp-faq__a {
  padding: 0 16px 14px; font: 400 16px/1.6 var(--font-body);
  color: rgba(40,28,20,.75); display: none;
}
.cd-root .sp-faq__a b { color: var(--bydop-ink); font-weight: 600; }
.cd-root .sp-faq__item.is-open .sp-faq__a {
  display: block;
  animation: sp-faqIn .35s cubic-bezier(.2,.8,.2,1);
}
@keyframes sp-faqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* Realizations grid */
.cd-root .sp-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cd-root .sp-gallery__item {
  aspect-ratio: 4/3; border-radius: 10px;
  background-size: cover; background-position: center;
  position: relative; overflow: hidden;
  transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
  box-shadow: 0 4px 14px -6px rgba(40,28,20,.2);
}
.cd-root .sp-gallery__item::before {
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.6) 100%);
  transition: opacity .4s;
}
.cd-root .sp-gallery__item::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(199,132,79,0) 0%, rgba(199,132,79,.45) 100%);
  opacity: 0; transition: opacity .4s; mix-blend-mode: overlay;
}
.cd-root .sp-gallery__item:hover { transform: scale(1.03); box-shadow: 0 18px 36px -10px rgba(199,132,79,.35); }
.cd-root .sp-gallery__item:hover::after { opacity: 1; }
.cd-root .sp-gallery__item span {
  position: absolute; left: 8px; bottom: 8px; right: 8px; z-index: 1;
  font: 500 10px/1.25 var(--font-ui); letter-spacing: .04em;
  color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.7);
}

/* Reviews */
.cd-root .sp-reviews { display: flex; flex-direction: column; gap: 12px; }
.cd-root .sp-review {
  background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,122,0,.04) 100%);
  border: 1px solid rgba(229,213,197,.14);
  border-radius: 14px; padding: 14px 16px;
  backdrop-filter: blur(10px);
  transition: border-color .3s, transform .3s;
}
.cd-root .sp-review:hover { border-color: rgba(255,122,0,.35); transform: translateY(-2px); }
.cd-root .sp-review__rating {
  background: linear-gradient(135deg, #FFD08A, #FFB347 50%, #FF7A00);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 2px; font-size: 16px; margin-bottom: 6px;
}
.cd-root .sp-review__text {
  font: 400 13px/1.55 var(--font-body);
  color: rgba(229,213,197,.85); margin: 0 0 8px; font-style: italic;
}
.cd-root .sp-review__author {
  font: 500 12px/1 var(--font-ui); color: rgba(229,213,197,.6); letter-spacing: .04em;
}

/* Contact rows in CTA */
.cd-root .sp-byline { margin: 0; text-align: center; }
.cd-root .sp-contact-list { margin-top: 22px; }
.cd-root #bydop-box .bb-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  font-size: 11px;
  line-height: 1.1;
  letter-spacing: .04em;
  white-space: nowrap;
}
.cd-root #bydop-box .bb-badge__clock {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}
.cd-root .sp-contact-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-top: 1px dashed rgba(138,81,51,.18);
  font: 500 13px/1.3 var(--font-body); color: var(--bydop-ink);
}
.cd-root .sp-contact-row:first-child { border-top: 0; }
.cd-root .sp-contact-row .lbl {
  font: 700 10px/1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase;
  background: linear-gradient(135deg, #C7844F, #8A5133);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  width: 92px; flex-shrink: 0;
}
.cd-root .sp-contact-row a { color: var(--bydop-ink); text-decoration: none; font-weight: 600; }

/* CTA form */
.cd-root .m-cta__form {
  display: flex; flex-direction: column; gap: 10px;
  margin: 14px 0 18px;
}
.cd-root .m-cta__form input {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid rgba(138,81,51,.20);
  border-radius: 10px;
  font: 400 14px/1.4 var(--font-body);
  color: var(--bydop-ink);
  background: #fff;
  transition: border-color .3s, box-shadow .3s, background .3s;
}
.cd-root .m-cta__form input::placeholder { color: rgba(40,28,20,.45); }
.cd-root .m-cta__form input:focus {
  outline: none;
  border-color: rgba(199,132,79,.6);
  box-shadow: 0 0 0 4px rgba(199,132,79,.18);
  background: rgba(199,132,79,.05);
}

/* Reveal-on-scroll for major children (modern browsers, falls back to no-anim) */
@supports (animation-timeline: view()) {
  .cd-root .m-section > .sp-eyebrow,
  .cd-root .m-section > .sp-h2,
  .cd-root .m-section > .sp-lead,
  .cd-root .m-section > .sp-why,
  .cd-root .m-section > .sp-types,
  .cd-root .m-section > .sp-spec,
  .cd-root .m-section > .sp-process,
  .cd-root .m-section > .sp-price,
  .cd-root .m-section > .sp-extras,
  .cd-root .m-section > .sp-gallery,
  .cd-root .m-section > .sp-reviews,
  .cd-root .m-section > .sp-faq,
  .cd-root .m-section > .m-cta__form {
    animation: sp-rise .8s cubic-bezier(.2,.8,.2,1) both;
    animation-timeline: view();
    animation-range: entry 0% cover 25%;
  }
}
@keyframes sp-rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   THEME TOGGLE — floating button + dark mode body class
   ============================================================ */
.sp-theme-toggle {
  position: fixed; right: 14px; bottom: 14px; z-index: 50;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255,122,0,.4);
  background: linear-gradient(135deg, rgba(20,12,7,.92), rgba(40,25,12,.92));
  backdrop-filter: blur(10px);
  color: var(--bydop-copper);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 28px -10px rgba(255,122,0,.45), 0 2px 6px rgba(0,0,0,.3);
  transition: transform .3s, box-shadow .3s;
}
.sp-theme-toggle:hover { transform: scale(1.06); box-shadow: 0 14px 32px -8px rgba(255,122,0,.6); }
.sp-theme-toggle svg { width: 20px; height: 20px; }
body.theme-dark .sp-theme-toggle {
  background: linear-gradient(135deg, #FFF8EE, #FFE7CC);
  border-color: rgba(199,132,79,.55);
  color: var(--bydop-copper-deep);
}
.sp-theme-toggle .sun { display: none; }
.sp-theme-toggle .moon { display: block; }
body.theme-dark .sp-theme-toggle .sun { display: block; }
body.theme-dark .sp-theme-toggle .moon { display: none; }

/* Dark mode — applies inside .cd-root only */
body.theme-dark .cd-root.m-root { background: #0a0705; }
body.theme-dark .cd-root .m-section--cream { background: linear-gradient(180deg, #110A06 0%, #0A0705 100%); }
body.theme-dark .cd-root .m-section--white { background: linear-gradient(180deg, #0F0A06 0%, #150D08 100%); }
body.theme-dark .cd-root .sp-h2 { color: #fff; }
body.theme-dark .cd-root .sp-lead { color: rgba(229,213,197,.72); }
body.theme-dark .cd-root .sp-spec {
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,122,0,.04) 100%);
  border-color: rgba(229,213,197,.12);
}
body.theme-dark .cd-root .sp-spec__v { color: rgba(229,213,197,.85); }
body.theme-dark .cd-root .sp-spec__row { border-top-color: rgba(229,213,197,.10); }
body.theme-dark .cd-root .sp-spec__row:hover { background: rgba(255,122,0,.06); }
body.theme-dark .cd-root .sp-why__card,
body.theme-dark .cd-root .sp-type,
body.theme-dark .cd-root .sp-faq__item,
body.theme-dark .cd-root .sp-price__row {
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,122,0,.04) 100%);
  border-color: rgba(229,213,197,.12);
  backdrop-filter: blur(8px);
}
body.theme-dark .cd-root .sp-why__title,
body.theme-dark .cd-root .sp-type h3,
body.theme-dark .cd-root .sp-faq__q,
body.theme-dark .cd-root .sp-price__lbl { color: #fff; }
body.theme-dark .cd-root .sp-why__body,
body.theme-dark .cd-root .sp-type p,
body.theme-dark .cd-root .sp-faq__a { color: rgba(229,213,197,.78); }
body.theme-dark .cd-root .sp-why__body b,
body.theme-dark .cd-root .sp-faq__a b { color: #fff; }
body.theme-dark .cd-root .sp-faq__item.is-open { background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,122,0,.10) 100%); }
body.theme-dark .cd-root .sp-extras {
  color: rgba(229,213,197,.85);
  background: linear-gradient(135deg, rgba(255,122,0,.10) 0%, rgba(255,179,71,.05) 100%);
}
body.theme-dark .cd-root .sp-extras b { color: #fff; }
body.theme-dark .cd-root .sp-contact-row { color: rgba(229,213,197,.85); border-top-color: rgba(229,213,197,.12); }
body.theme-dark .cd-root .sp-contact-row a { color: #fff; }
body.theme-dark .cd-root .m-cta__form input {
  background: rgba(255,255,255,.04);
  border-color: rgba(229,213,197,.18);
  color: #fff;
}
body.theme-dark .cd-root .m-cta__form input::placeholder { color: rgba(229,213,197,.5); }
body.theme-dark .cd-root .sp-edition__yr { color: rgba(229,213,197,.55); }

/* ============================================================
   DESKTOP — ≥ 900px viewport (cd-root unwraps to full width)
   ============================================================ */
@media (min-width: 900px) {
  .cd-root.m-root {
    max-width: 100%;
    box-shadow: none;
    overflow: visible;
    background: transparent;
    background-image: none;
  }
  .cd-root .m-section,
  .cd-root .m-hero { padding-left: 48px; padding-right: 48px; }
  .cd-root .m-section > *,
  .cd-root .m-hero > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
  .cd-root .m-section { padding-top: 96px; padding-bottom: 96px; }
  .cd-root .m-hero { padding-top: 80px; padding-bottom: 80px; }

  /* Consistent editorial header stack for all major content sections. */
  .cd-root .m-section > .sp-eyebrow {
    display: flex;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
  }
  .cd-root .m-section > .sp-eyebrow + .sp-h2,
  .cd-root .m-section > .sp-eyebrow + .sp-h2 + .sp-lead {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .cd-root .m-section--faq > .sp-h2 {
    margin-bottom: 32px;
  }
  .cd-root .m-section--byline > .sp-byline {
    width: 100%;
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .cd-root .m-section > .g-recenzie-badge {
    display: flex;
    width: max-content;
    margin: 6px auto 24px;
  }

  /* Homepage-aligned inquiry action and contact directory. */
  .cd-root #cta .m-hero__cta.sp-hero-cta {
    align-items: center;
  }
  .cd-root #cta button.bydop-pill-cta {
    width: max-content;
    max-width: 100%;
    padding: 16px 40px;
    margin-left: auto;
    margin-right: auto;
    font-size: 15px;
  }
  .cd-root #cta .sp-contact-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 64px;
    width: 100%;
    max-width: 760px;
    margin-top: 30px;
  }
  .cd-root #cta .sp-contact-row {
    padding: 16px 0;
    border-top: 0;
    border-bottom: 1px dashed rgba(138,81,51,.22);
    font-size: 16px;
    line-height: 1.4;
  }
  .cd-root #cta .sp-contact-row .lbl {
    width: 110px;
    font-size: 11px;
  }

  .cd-root .m-hero__title { font-size: 88px; line-height: 1; max-width: 1100px; letter-spacing: -2px; }
  .cd-root .m-hero__sub { font-size: 18px; line-height: 1.55; max-width: 820px; }
  .cd-root .sp-pullquote { max-width: 760px; padding: 26px 26px 26px 60px; }
  .cd-root .sp-pullquote p { font-size: 24px; line-height: 1.45; }
  .cd-root .sp-pullquote__mark { font-size: 88px; top: -10px; }
  .cd-root .sp-h2 { font-size: 48px; line-height: 1.1; letter-spacing: -1.2px; max-width: 920px; }
  .cd-root .sp-lead { font-size: 17px; line-height: 1.6; max-width: 820px; }

  .cd-root .sp-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .cd-root .sp-why__card { padding: 28px 26px; }
  .cd-root .sp-why__title { font-size: 19px; }
  .cd-root .sp-why__body { font-size: 14.5px; line-height: 1.6; }

  .cd-root .sp-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .cd-root .sp-type__media { aspect-ratio: 4/3; }
  .cd-root .sp-type__idx { font-size: 44px; }
  .cd-root .sp-type h3 { font-size: 19px; }
  .cd-root .sp-type p { font-size: 14px; line-height: 1.6; }

  .cd-root .sp-process { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .cd-root .sp-price { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .cd-root .sp-faq { max-width: 920px; margin-left: auto; margin-right: auto; }
  .cd-root .sp-faq__q { font-size: 17px; }
  .cd-root .sp-gallery { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .cd-root .sp-gallery__item { aspect-ratio: 4/3; }
  .cd-root .sp-gallery__item span { font-size: 13px; left: 14px; bottom: 14px; }

  .cd-root .sp-spec__row { grid-template-columns: 140px 1fr; padding: 18px 0; }
  .cd-root .sp-spec__k { font-size: 11px; }
  .cd-root .sp-spec__v { font-size: 16px; line-height: 1.55; }

  .cd-root .sp-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .cd-root .m-cta__form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 760px; }
  .cd-root .m-hero__phone-rail { display: none; }

  .sp-theme-toggle { right: 24px; bottom: 24px; width: 52px; height: 52px; }
}

/* Reduced motion — disable shines/pulses/spins */
@media (prefers-reduced-motion: reduce) {
  .cd-root .ral, .cd-root .accent-orange, .cd-root .sp-pullquote p em,
  .cd-root .sp-eyebrow::before, .cd-root .shiny-cta::before {
    animation: none !important;
  }
}

/* ============================================================
   BYDOP PILL CTA — banner button (cream sections)
   coffee/orange brand, clean & solid (no rotating glow)
   ============================================================ */
/* BYDOP coffee/espresso pill — same animated conic-border + dotted texture as hero .shiny-cta, but in kávový tones */
.cd-root .bydop-pill-cta {
  --bydop-gradient-angle: 0deg;
  --coffee-deep:   #6B3416;
  --coffee-mid:    #B8612C;
  --coffee-cream:  #F2C49A;   /* crema foam highlight */
  --coffee-bean:   #1F100A;   /* dark roasted bean inner */

  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 18px 38px;
  font: 700 16px/1.2 var(--font-ui);
  letter-spacing: .015em;
  color: #FFF6EC; text-decoration: none;
  border-radius: 9999px;
  background:
    linear-gradient(var(--coffee-bean), var(--coffee-bean)) padding-box,
    conic-gradient(from var(--bydop-gradient-angle),
      transparent 0%,
      var(--coffee-deep) 5%,
      var(--coffee-cream) 15%,
      var(--coffee-mid) 22%,
      var(--coffee-deep) 30%,
      transparent 40%) border-box;
  border: 2px solid transparent;
  box-shadow:
    inset 0 0 0 1px #2A1810,
    0 10px 26px -10px rgba(74, 35, 12, .55);
  transition: transform .3s ease, box-shadow .3s ease;
  isolation: isolate;
  animation: bydop-spin 8s linear infinite;
  text-shadow: 0 1px 0 rgba(40, 18, 5, .5);
  white-space: nowrap;
  cursor: pointer;
}
.cd-root .bydop-pill-cta::before {
  content: ""; position: absolute; inset: 3px; pointer-events: none;
  background: radial-gradient(circle at 2px 2px, rgba(255, 220, 180, .9) 0.5px, transparent 0) padding-box;
  background-size: 4px 4px;
  border-radius: inherit;
  -webkit-mask-image: conic-gradient(from calc(var(--bydop-gradient-angle) + 45deg), black, transparent 10% 90%, black);
          mask-image: conic-gradient(from calc(var(--bydop-gradient-angle) + 45deg), black, transparent 10% 90%, black);
  opacity: .35;
}
.cd-root .bydop-pill-cta:hover {
  transform: scale(1.03);
  box-shadow:
    inset 0 0 0 1px #2A1810,
    0 14px 36px -10px rgba(184, 97, 44, .55),
    0 0 30px -5px rgba(242, 196, 154, .35);
  color: #FFF6EC;
}
.cd-root .bydop-pill-cta:active {
  transform: scale(1);
  box-shadow:
    inset 0 0 0 1px #2A1810,
    0 6px 16px -6px rgba(74, 35, 12, .5);
}
@media (max-width: 640px) {
  .cd-root .bydop-pill-cta {
    padding: 16px 28px;
    font-size: 15px;
    width: 100%;
    justify-content: center;
  }
}