/* ========= RESET & BASE ========= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:104px;-webkit-text-size-adjust:100%}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;color:#111;background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none}
ul,ol{list-style:none}

:root{
  --yellow:#FFD500;
  --yellow-2:#FFC400;
  --black:#0a0a0a;
  --ink:#111;
  --dark:#15171a;
  --dark-2:#1d2024;
  --line:#2a2d31;
  --muted:#8a8f96;
  --white:#fff;
  --radius:4px;
  --radius-btn:7px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --container:1200px;
}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.header a:focus-visible,.section--yellow a:focus-visible,.sticky-btn--phone:focus-visible{outline-color:var(--black)}

.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--black);color:var(--yellow);padding:12px 20px;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:1.5px;font-size:14px}
.skip-link:focus{left:0}

.ico{width:1em;height:1em;flex-shrink:0;vertical-align:-.12em}

.container{max-width:var(--container);margin:0 auto;padding:0 24px}
.narrow{max-width:880px;margin:0 auto}
.small{font-size:14px}
.muted{color:var(--muted)}

/* ========= TYPO ========= */
h1,h2,h3,h4,.h2{font-family:'Anton','Oswald',sans-serif;font-weight:400;letter-spacing:.5px;line-height:1.05;text-transform:uppercase}
h1{font-size:clamp(40px,7vw,88px)}
.h2{font-size:clamp(32px,4.5vw,56px);margin-bottom:16px}
h3{font-size:22px;letter-spacing:.3px}
.lead{font-size:18px;color:#444;max-width:760px;margin-bottom:32px}
.eyebrow{display:inline-block;font-family:'Oswald',sans-serif;font-weight:600;font-size:13px;letter-spacing:3px;text-transform:uppercase;color:#666;margin-bottom:14px}
.eyebrow--yellow{color:var(--yellow);position:relative;padding-left:36px}
.eyebrow--yellow::before{content:"";position:absolute;left:0;top:50%;width:24px;height:2px;background:var(--yellow);transform:translateY(-50%)}
.eyebrow--black{color:var(--black);padding-left:36px;position:relative}
.eyebrow--black::before{content:"";position:absolute;left:0;top:50%;width:24px;height:2px;background:var(--black);transform:translateY(-50%)}

/* ========= BUTTONS ========= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:16px 30px;font-family:'Oswald',sans-serif;font-weight:600;font-size:16px;letter-spacing:1.5px;text-transform:uppercase;border-radius:var(--radius-btn);transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease),color .2s var(--ease),border-color .25s var(--ease);cursor:pointer;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn .ico{transition:transform .25s var(--ease)}
.btn--primary{background:var(--yellow);color:var(--black);box-shadow:0 4px 14px rgba(255,213,0,.3),0 1px 3px rgba(0,0,0,.18)}
.btn--primary:hover{background:var(--yellow-2);box-shadow:0 10px 26px rgba(255,213,0,.45),0 3px 8px rgba(0,0,0,.22)}
.btn--ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.btn--ghost:hover{background:#fff;color:var(--black);border-color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.25)}
.section:not(.section--dark):not(.section--cta) .btn--ghost{color:var(--black);border-color:rgba(0,0,0,.45)}
.section:not(.section--dark):not(.section--cta) .btn--ghost:hover{background:var(--black);color:#fff;border-color:var(--black)}
.btn--yellow{background:var(--yellow);color:var(--black);box-shadow:0 4px 14px rgba(255,213,0,.3),0 1px 3px rgba(0,0,0,.18)}
.btn--yellow:hover{background:var(--yellow-2);box-shadow:0 10px 26px rgba(255,213,0,.45),0 3px 8px rgba(0,0,0,.22)}
.btn--dark{background:var(--black);color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.28)}
.btn--dark:hover{background:#222;box-shadow:0 10px 26px rgba(0,0,0,.4)}
.btn--outline-dark{background:transparent;color:var(--black);border:1.5px solid rgba(0,0,0,.6)}
.btn--outline-dark:hover{background:var(--black);color:#fff;border-color:var(--black);box-shadow:0 8px 22px rgba(0,0,0,.25)}
.btn--block{width:100%}
.btn--large{padding:20px 42px;font-size:18px}
.btn--phone-sm{background:var(--black);color:var(--yellow);padding:10px 18px;font-size:14px;letter-spacing:1px;border:2px solid var(--black);box-shadow:0 2px 8px rgba(0,0,0,.25)}
.btn--phone-sm:hover{background:#1a1a1a}
/* tlačítka s ikonou telefonu – jemný „zazvonění" náklon ikony na hover (decentní) */
.btn:hover .ico{transform:scale(1.08)}

/* ========= TOPBAR ========= */
.topbar{background:#000;color:#fff;font-size:13px;border-bottom:1px solid #222}
.topbar__inner{display:flex;gap:24px;justify-content:flex-end;align-items:center;padding:10px 24px;flex-wrap:wrap}
.topbar__item{color:#ddd;letter-spacing:.5px}
.topbar__phone strong{color:var(--yellow)}
.topbar__loc{color:#888}

/* ========= HEADER ========= */
.header{background:var(--yellow);position:sticky;top:0;z-index:50;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.header__inner{display:flex;align-items:center;gap:24px;padding:10px 24px;min-height:80px}
.logo img{height:64px;width:auto}
.logo__text{display:flex;flex-direction:column;gap:2px;line-height:1.15;padding-left:14px;white-space:nowrap}
.logo__text strong{font-family:'Oswald',sans-serif;font-weight:700;font-size:17px;letter-spacing:1px;text-transform:uppercase;color:var(--black)}
.logo__text span{display:none;font-family:'Oswald',sans-serif;font-weight:500;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(0,0,0,.65)}
.nav{display:flex;gap:22px;margin-left:auto;font-family:'Oswald',sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:1px;font-size:14px}
.nav a{position:relative;padding:6px 0;color:var(--black);white-space:nowrap}
.nav a:hover{color:#000}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--black);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.nav a:hover::after{transform:scaleX(1)}
.nav-toggle{display:none;flex-direction:column;gap:5px;padding:8px;margin-left:auto}
.nav-toggle span{display:block;width:26px;height:3px;background:#000;border-radius:2px}

/* ========= HERO ========= */
.hero{position:relative;min-height:90vh;display:flex;align-items:center;overflow:hidden;color:#fff;padding:80px 0}
.hero__bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:grayscale(.2) contrast(1.05)}
.hero__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.55) 0%,rgba(10,10,10,.7) 60%,rgba(10,10,10,.85) 100%)}
.hero__ghost{position:absolute;left:-2vw;top:50%;transform:translateY(-50%);font-family:'Anton',sans-serif;font-size:clamp(180px,28vw,400px);color:transparent;-webkit-text-stroke:2px rgba(255,213,0,.55);letter-spacing:8px;line-height:.9;pointer-events:none;user-select:none;z-index:1;white-space:nowrap}
.hero__inner{position:relative;z-index:2;max-width:980px;width:100%;min-width:0;animation:heroUp .7s cubic-bezier(.22,.61,.36,1) both}
@keyframes heroUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.hero .eyebrow{color:var(--yellow);padding-left:36px;position:relative}
.hero .eyebrow::before{content:"";position:absolute;left:0;top:50%;width:24px;height:2px;background:var(--yellow);transform:translateY(-50%)}
.hero h1{color:#fff;margin-bottom:24px;text-shadow:0 4px 30px rgba(0,0,0,.5)}
.hero__mark{background:var(--yellow);color:#000;padding:0 12px;display:inline-block}
.hero__sub{font-size:clamp(16px,1.4vw,19px);color:#e5e5e5;max-width:760px;margin-bottom:36px}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:48px}
.hero__usps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;border-top:1px solid rgba(255,255,255,.15);padding-top:28px}
.hero__usps li{font-size:13px;color:#ccc;text-transform:uppercase;letter-spacing:1px;line-height:1.45}
.hero__usps strong{display:block;font-family:'Anton',sans-serif;font-size:32px;color:var(--yellow);letter-spacing:1px;margin-bottom:6px}
.hero__refs{margin-top:28px;font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:#9aa0a6}

/* ========= STRIP ========= */
.strip{background:#000;color:#fff;padding:18px 0;border-top:4px solid var(--yellow)}
.strip__inner{display:flex;flex-wrap:wrap;gap:32px;justify-content:space-around;align-items:center;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:2px;font-size:14px;color:#ccc}
.strip__inner span{position:relative;padding-left:22px}
.strip__inner span::before{content:"▲";color:var(--yellow);position:absolute;left:0;top:0;font-size:11px}

/* ========= SECTIONS ========= */
.section{padding:100px 0}
.section--dark{background:var(--dark);color:#eaeaea}
.section--dark .lead{color:#b9bdc2}
.section--dark p{color:#c8ccd1}
.section--yellow{background:var(--yellow);color:#000}
.section--yellow .lead,.section--yellow p{color:#1a1a1a}
.h2--black{color:#000}
.section--cta{background:linear-gradient(135deg,#15171a 0%,#0a0a0a 100%);color:#fff}
.section--cta p,.section--cta .lead{color:#cfd2d6}

/* ========= CARDS ========= */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:48px}
.card{background:#1d2024;border:1px solid #2a2d31;border-radius:6px;overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,border-color .25s}
.card:hover{transform:translateY(-6px);border-color:var(--yellow)}
.card--featured{border-color:var(--yellow);position:relative;box-shadow:0 20px 60px rgba(255,213,0,.15)}
.card__badge{position:absolute;top:16px;right:16px;background:var(--yellow);color:#000;font-family:'Oswald',sans-serif;font-weight:700;font-size:12px;letter-spacing:1.5px;padding:6px 12px;text-transform:uppercase;z-index:2;border-radius:2px}
.card__img{height:220px;background-size:cover;background-position:center;border-bottom:3px solid var(--yellow)}
.card__body{padding:28px;display:flex;flex-direction:column;gap:14px;flex:1}
.card__body h3{color:#fff;font-size:28px}
.card .price{font-family:'Oswald',sans-serif}
.card .price strong{font-size:32px;color:var(--yellow);font-weight:700;letter-spacing:1px}
.card .price span{color:#9aa0a6;font-size:14px;text-transform:uppercase;letter-spacing:1.5px;margin-left:6px}
.card__meta{font-family:'Oswald',sans-serif;font-size:12.5px;letter-spacing:1.5px;text-transform:uppercase;color:#9aa0a6;border-top:1px solid #2a2d31;border-bottom:1px solid #2a2d31;padding:10px 0;flex:none !important}
/* opakovací školení – decentně odlišený panel */
.course-repeat{margin-top:24px;display:flex;gap:32px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:30px 32px;background:var(--dark-2);border:1px solid #2a2d31;border-top:3px solid var(--yellow);border-radius:6px;transition:border-color .25s}
.course-repeat:hover{border-color:var(--yellow)}
.course-repeat__info{display:flex;flex-direction:column;gap:10px;flex:1;min-width:min(260px,100%)}
.course-repeat__info h3{color:#fff;font-size:24px}
.course-repeat__info p{color:#b9bdc2;font-size:15px;max-width:560px}
.course-repeat__action{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.course-repeat .price{font-family:'Oswald',sans-serif;white-space:nowrap}
.course-repeat .price strong{font-size:30px;color:var(--yellow);font-weight:700;letter-spacing:1px}
.course-repeat .price span{color:#9aa0a6;font-size:13px;text-transform:uppercase;letter-spacing:1.5px;margin-left:6px}
.card p{color:#b9bdc2;font-size:15px;flex:1}
.card .btn{margin-top:auto}

.callout{margin-top:56px;background:#0a0a0a;border-left:6px solid var(--yellow);padding:32px 36px;display:flex;flex-direction:column;gap:14px;align-items:flex-start;border-radius:4px}
.callout h3{color:var(--yellow);font-size:26px}
.callout p{color:#d5d9de;max-width:720px}

/* ========= SPLIT ========= */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.split__media{min-height:480px;background-size:cover;background-position:center;border-radius:4px;border:3px solid var(--yellow);box-shadow:0 30px 60px rgba(0,0,0,.4)}
.split__media--portrait{aspect-ratio:1086/1184;min-height:0;background-position:center top}
.split__content p:not(:last-child){margin-bottom:14px}
#nv p:not(:last-child){margin-bottom:14px}
.split__content .h2{color:inherit}
.section--dark .split__content .h2{color:#fff}
.checklist{margin:24px 0 32px;display:grid;gap:12px}
.checklist li{position:relative;padding-left:32px;color:#3c4146;font-size:16px}
.section--dark .checklist li{color:#c8ccd1}
.checklist li::before{content:"";position:absolute;left:0;top:8px;width:18px;height:18px;background:var(--yellow);clip-path:polygon(14% 44%,0 65%,40% 100%,100% 16%,86% 0,38% 68%);filter:drop-shadow(.7px 0 0 #0a0a0a) drop-shadow(-.7px 0 0 #0a0a0a) drop-shadow(0 .7px 0 #0a0a0a) drop-shadow(0 -.7px 0 #0a0a0a)}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}
.cta-row--spaced{margin-top:40px}

/* ========= REFERENCE ========= */
.section--refs{background:#101214;border-top:1px solid #232629}
.refs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:48px}
.ref{display:flex;flex-direction:column;gap:8px;padding:28px 26px;background:rgba(255,255,255,.03);border:1px solid #2a2d31;border-top:3px solid var(--yellow);border-radius:4px;transition:background .25s,border-color .25s}
.ref:hover{background:rgba(255,213,0,.06);border-color:var(--yellow)}
.ref__name{font-family:'Oswald',sans-serif;font-weight:600;font-size:19px;letter-spacing:.5px;text-transform:uppercase;color:#fff}
.ref__tag{font-family:'Oswald',sans-serif;font-size:12.5px;letter-spacing:2px;text-transform:uppercase;color:#9aa0a6}

.ai-excerpt{margin-top:28px;padding:18px 22px;background:rgba(255,213,0,.1);border-left:4px solid var(--yellow);font-size:14px;color:#4a4f54 !important;border-radius:2px}
.section--dark .ai-excerpt{background:rgba(255,213,0,.08);color:#b9bdc2 !important}

/* ========= GRID 4 ========= */
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:48px}
.feat{background:rgba(255,255,255,.03);border:1px solid #2a2d31;padding:28px 24px;border-radius:4px;transition:background .25s,border-color .25s}
.feat:hover{background:rgba(255,213,0,.06);border-color:var(--yellow)}
.feat__num{font-family:'Anton',sans-serif;color:var(--yellow);font-size:42px;margin-bottom:8px;letter-spacing:1px}
.feat h3{color:#fff;font-size:20px;margin-bottom:8px}
.feat p{color:#b9bdc2;font-size:14px;line-height:1.55}

/* ========= STEPS ========= */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;margin-top:48px;counter-reset:step}
.steps li{position:relative;padding:28px 22px;background:#fafafa;border-top:4px solid var(--yellow);border-radius:4px}
.steps li span{font-family:'Anton',sans-serif;color:var(--yellow);font-size:48px;display:block;line-height:1;margin-bottom:12px;-webkit-text-stroke:1px #000}
.steps li h3{font-size:18px;margin-bottom:8px}
.steps li p{font-size:14px;color:#555}

/* ========= TERMÍNY ========= */
.terminy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:48px}
.termin{background:#000;color:#fff;padding:32px 28px;border-radius:4px;border-left:6px solid #fff}
.termin h3{color:var(--yellow);font-size:24px;margin-bottom:14px}
.termin p{color:#ddd;font-size:16px}
.termin__tags{display:flex;flex-wrap:wrap;gap:8px}
.termin__tag{display:inline-flex;align-items:center;gap:8px;font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:#e7e7e7;border:1px solid rgba(255,255,255,.25);padding:7px 12px;border-radius:2px}
.termin__tag b{color:#000;background:var(--yellow);font-weight:700;padding:1px 7px;border-radius:2px;letter-spacing:1px}
.termin__tag b.op{background:#fff;color:#000;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}

/* ========= KNOWLEDGE ========= */
.kb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:48px}
.kb article{padding:24px;border:1px solid #eee;border-left:4px solid var(--yellow);background:#fafafa;border-radius:2px}
.kb h3{font-size:18px;margin-bottom:8px;color:#000}
.kb p{font-size:14px;color:#555;line-height:1.6}

/* ========= FORM ========= */
.form{margin-top:32px;display:grid;grid-template-columns:minmax(0,1fr);gap:18px;background:rgba(255,255,255,.04);padding:32px;border-radius:6px;border:1px solid rgba(255,255,255,.1)}
.form__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.form label{display:flex;flex-direction:column;gap:6px;font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--yellow);min-width:0}
.form input,.form select,.form textarea{width:100%;min-width:0;font-family:'Inter',sans-serif;font-size:16px;padding:14px 16px;background:#fff;color:#111;border:2px solid transparent;border-radius:3px;outline:none;letter-spacing:0;text-transform:none;font-weight:400}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--yellow);box-shadow:0 0 0 4px rgba(255,213,0,.2)}
.form .check{flex-direction:row;align-items:center;gap:10px;color:#cfd2d6;font-family:'Inter',sans-serif;font-size:14px;letter-spacing:0;text-transform:none}
.form .check input{width:18px;height:18px;padding:0}

/* ========= FAQ ========= */
.faq{margin-top:40px;display:grid;gap:10px}
.faq details{background:#fafafa;border:1px solid #ececec;border-left:4px solid var(--yellow);border-radius:2px;transition:background .2s}
.faq details[open]{background:#fff;box-shadow:0 4px 20px rgba(0,0,0,.06)}
.faq summary{cursor:pointer;padding:20px 24px;font-family:'Oswald',sans-serif;font-weight:600;font-size:17px;color:#000;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:28px;color:var(--black);font-weight:300;transition:transform .2s;flex-shrink:0}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 24px 22px;color:#444;font-size:15px}

/* ========= CONTACT ========= */
.contact{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:48px}
.contact__card{display:flex;flex-direction:column;gap:8px;padding:32px 28px;background:#0a0a0a;border:1px solid #2a2d31;border-radius:4px;transition:border-color .25s,transform .25s}
.contact__card[href]:hover{border-color:var(--yellow);transform:translateY(-4px)}
.contact__label{font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:#8a8f96}
.contact__value{font-family:'Anton',sans-serif;font-size:28px;color:#fff;letter-spacing:.5px}
.contact__value--email{font-size:21px;word-break:break-word;text-transform:lowercase}
.contact__cta{margin-top:8px;font-family:'Oswald',sans-serif;font-size:14px;letter-spacing:1.5px;text-transform:uppercase;color:var(--yellow)}

/* Firemní / fakturační údaje (kontaktní sekce) */
.bizinfo{margin-top:24px;padding:26px 28px;background:var(--dark-2,#121417);border:1px solid var(--line);border-radius:var(--radius);position:relative;overflow:hidden}
.bizinfo::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--yellow),var(--yellow-2))}
.bizinfo__title{font-family:'Oswald',sans-serif;font-weight:600;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--yellow);margin-bottom:18px}
.bizinfo__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 32px}
.bizinfo__row{display:flex;flex-direction:column;gap:3px;min-width:0}
.bizinfo__row dt{font-family:'Oswald',sans-serif;font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;color:#8a8f96}
.bizinfo__row dd{font-family:'Oswald',sans-serif;font-weight:600;font-size:17px;letter-spacing:.4px;color:#fff;word-break:break-word}
.bizinfo__link{display:inline-flex;align-items:center;gap:9px;margin-top:20px;
  font-family:'Oswald',sans-serif;font-weight:600;font-size:14px;letter-spacing:.6px;
  color:var(--yellow);text-decoration:none;border-bottom:1px solid rgba(255,213,0,.4);padding-bottom:2px;
  transition:color .2s var(--ease),border-color .2s var(--ease)}
.bizinfo__link:hover{color:#ffe27a;border-bottom-color:var(--yellow)}
.bizinfo__link .ico{width:18px;height:18px;flex:none}
@media (max-width:600px){
  .bizinfo{padding:22px 20px}
  .bizinfo__grid{grid-template-columns:minmax(0,1fr);gap:14px}
  .bizinfo__link{font-size:13px}
}

/* ========= FOOTER ========= */
.footer{background:#000;color:#aaa;padding:60px 0 0}
.footer__inner{display:grid;grid-template-columns:2fr minmax(0,1fr) minmax(0,1fr);gap:48px}
.footer h4{color:var(--yellow);font-size:18px;margin-bottom:14px}
.footer ul{display:grid;gap:8px}
.footer a:hover{color:var(--yellow)}
.footer img{margin-bottom:16px}
.footer__logo{width:210px;max-width:62%;height:auto;display:block}
.footer p{color:#aaa;font-size:14px;margin-bottom:10px}
.footer__bottom{margin-top:48px;padding:20px 0;border-top:1px solid #1a1a1a;font-size:13px;color:#666}

/* ========= BAND – INDIVIDUÁLNÍ PŘÍSTUP ========= */
.band{background:var(--black);color:#eaeaea;padding:64px 0;border-top:4px solid var(--yellow)}
.band__inner{text-align:center}
.band .eyebrow--yellow{padding-left:0}
.band .eyebrow--yellow::before{display:none}
.h2--band{font-size:clamp(26px,3.2vw,40px);color:#fff;margin-bottom:14px}
.band p{color:#c8ccd1;max-width:720px;margin:0 auto;font-size:17px}

/* ========= STICKY MOBILNÍ CTA (výměna „Volné termíny" ⇄ telefon) ========= */
.sticky-bar{display:none}
@media (max-width:680px){
  .sticky-bar{
    display:block;position:fixed;left:16px;right:16px;bottom:16px;
    height:56px;z-index:60;
  }
}
.sticky-btn{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Oswald',sans-serif;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;font-size:16px;border-radius:10px;
  opacity:0;transform:translateY(8px) scale(.99);pointer-events:none;
  transition:opacity .4s var(--ease),transform .4s var(--ease),box-shadow .3s var(--ease);
  will-change:opacity,transform;
}
.sticky-btn .ico{font-size:18px;transition:transform .25s var(--ease)}
.sticky-btn:active{transform:translateY(0) scale(.975)}
/* Telefonní – brandová žlutá */
.sticky-btn--phone{background:var(--yellow);color:#0a0a0a;box-shadow:0 8px 24px rgba(0,0,0,.35),0 2px 6px rgba(255,213,0,.25)}
/* Volné termíny – tmavá varianta se žlutým rámem (jasně odlišená, klidná) */
.sticky-btn--inquiry{
  background:#15171a;color:var(--yellow);
  border:2px solid var(--yellow);
  box-shadow:0 8px 24px rgba(0,0,0,.4),0 0 16px rgba(255,213,0,.14);
}
/* Stav: zobrazeny Volné termíny – jemný jednorázový nástup */
.sticky-bar.is-inquiry .sticky-btn--inquiry{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;animation:stickyIn .45s var(--ease)}
.sticky-bar.is-inquiry .sticky-btn--inquiry:active .ico{transform:scale(1.1)}
/* Stav: zobrazen telefon – jemný jednorázový nástup */
.sticky-bar.is-phone .sticky-btn--phone{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;animation:stickyIn .45s var(--ease)}
@keyframes stickyIn{
  0%{opacity:0;transform:translateY(8px) scale(.99)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

/* První „Zavolat nyní" v hero (jen mobil): start tmavý, po prvním zobrazení
   CTA „Volné termíny" jemný přechod na brandovou žlutou */
@media (max-width:680px){
  .hero__cta .btn--primary{
    background:#1d2024;color:#fff;
    box-shadow:0 6px 20px rgba(0,0,0,.4);
    transition:background .55s var(--ease),color .55s var(--ease),box-shadow .55s var(--ease),transform .25s var(--ease);
  }
  .hero__cta .btn--primary.hero-call--activate{
    background:var(--yellow);color:var(--black);
    box-shadow:0 6px 20px rgba(255,213,0,.35),0 2px 6px rgba(0,0,0,.2);
    animation:heroCallPop .55s cubic-bezier(.34,1.4,.5,1);
  }
}
@keyframes heroCallPop{
  0%{transform:scale(1)}
  45%{transform:scale(1.045)}
  100%{transform:scale(1)}
}

/* ========= RESPONSIVE ========= */
@media (max-width:1320px){
  .nav{gap:16px;font-size:13.5px;letter-spacing:.8px}
  .header__inner{gap:16px}
}
@media (max-width:1300px){
  .logo__text{display:none}
}
@media (max-width:1024px){
  .logo__text{display:flex}
  .logo__text span{display:block}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kb{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kb article:last-child{grid-column:1/-1}
  .steps{grid-template-columns:minmax(0,1fr);max-width:680px;margin-left:auto;margin-right:auto;gap:14px}
  .steps li{display:grid;grid-template-columns:64px 1fr;column-gap:20px;align-items:start;border-top:none;border-left:4px solid var(--yellow);padding:22px 24px}
  .steps li span{font-size:40px;margin-bottom:0;grid-row:1/3}
  .steps li h3{margin-bottom:6px}
  .cards{grid-template-columns:minmax(0,1fr);max-width:560px;margin-left:auto;margin-right:auto}
  .terminy,.contact{grid-template-columns:minmax(0,1fr);max-width:560px;margin-left:auto;margin-right:auto}
  .refs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{grid-template-columns:1fr;gap:32px}
  .split__media{min-height:340px}
  .split__media--portrait{aspect-ratio:1086/1184;min-height:0;max-width:430px;margin-left:auto;margin-right:auto;width:100%}
  .footer__inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .footer__inner > div:first-child{grid-column:1/-1}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;
    background:linear-gradient(180deg,rgba(255,205,20,.98) 0%,rgba(255,190,10,.98) 100%);
    -webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);
    flex-direction:column;padding:14px 16px 18px;gap:2px;
    border-top:2px solid #0a0a0a;
    box-shadow:0 28px 54px -20px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.25)}
  .nav.open{display:flex}
  .nav-toggle{display:flex}
  .header{position:relative}
  .btn--phone-sm{display:none}
  .logo__text strong{font-size:15px}
  .logo__text span{font-size:11px}
  html{scroll-padding-top:24px}
}
@media (max-width:680px){
  .section{padding:64px 0}
  .hero{min-height:auto;padding:26px 0 48px}
  .hero h1{margin-bottom:20px}
  .hero__cta{margin-bottom:40px}
  .hero__usps{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px;padding-top:24px}
  .hero__usps li{hyphens:auto;overflow-wrap:break-word}
  .hero__usps strong{font-size:28px}
  .hero__refs{margin-top:24px;font-size:12px;line-height:1.7}
  .kb,.grid-4,.steps,.refs,.footer__inner{grid-template-columns:minmax(0,1fr)}
  .form__row{grid-template-columns:minmax(0,1fr)}
  .strip__inner{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px;font-size:12.5px;letter-spacing:1.5px}
  .feat{display:grid;grid-template-columns:56px 1fr;column-gap:16px;align-items:start;padding:20px}
  .feat__num{font-size:30px;margin-bottom:0;grid-row:1/3;line-height:1.1}
  .feat h3{margin-bottom:4px}
  .feat p{grid-column:2}
  .footer__inner > div:first-child{grid-column:auto}
  .h2{margin-bottom:14px}
  .lead{font-size:17px;margin-bottom:26px}
  .topbar__inner{justify-content:center;font-size:12px;gap:8px 16px;padding:8px 16px}
  .topbar__loc{display:none}
  body{padding-bottom:84px}
  .hero__ghost{font-size:40vw}
  .callout{padding:24px;border-left-width:4px}
  .callout .btn{width:100%}
  .course-repeat{padding:24px 20px;gap:18px}
  .course-repeat__info h3{font-size:22px}
  .course-repeat__action{width:100%;align-items:stretch;gap:12px;padding-top:18px;border-top:1px solid #2a2d31}
  .course-repeat__action .price{display:flex;align-items:baseline;justify-content:space-between}
  .course-repeat__action .btn{width:100%}
  .band{padding:52px 0}
  .band p{font-size:16px}
  .form{padding:22px 18px}
  .btn--large{padding:18px 28px;font-size:16px}
  .steps li{grid-template-columns:52px 1fr;column-gap:16px;padding:20px}
  .steps li span{font-size:34px}
  .contact__value{font-size:24px}
  .contact__value--email{font-size:18px}
  .faq summary{padding:16px 18px;font-size:16px}
  .faq details p{padding:0 18px 18px}
}
@media (max-width:480px){
  .hero__cta .btn{width:100%}
  .header__inner{gap:12px}
  .cta-row .btn{width:100%}
  .logo img{height:52px}
  .logo__text{padding-left:12px}
  .logo__text strong{font-size:13.5px;letter-spacing:.5px}
  .logo__text span{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.card,.feat,.contact__card,.ref,.nav a::after{transition:none}
  .btn:hover,.card:hover,.contact__card[href]:hover{transform:none}
  .btn:hover .ico,.sticky-btn:active .ico{transform:none}
  .sticky-btn{transition:none;animation:none}
  .sticky-bar.is-inquiry .sticky-btn--inquiry,.sticky-bar.is-phone .sticky-btn--phone{animation:none}
  .hero__inner{animation:none}
  .hero__cta .btn--primary{background:var(--yellow);color:var(--black);transition:none}
  .hero__cta .btn--primary.hero-call--activate{animation:none}
}

/* Úprava 2026-06-09: sjednocení pozadí loga s horní lištou */
.logo{display:flex;align-items:center;background:var(--yellow);padding:0;border-radius:0;line-height:0;flex-shrink:0}
.logo img{display:block;background:var(--yellow)}

@media (max-width:360px){
  .logo__text strong{font-size:12px;letter-spacing:.3px}
  .logo img{height:46px}
}
@media (max-width:330px){
  .logo__text{display:none}
}
@media (max-width:340px){
  .h2{font-size:26px;overflow-wrap:break-word}
  h1{font-size:34px}
}

/* ============================================================
   ÚPRAVA 2026-06-14 — modernizace v12.2
   1) Prémiový scroll efekt CTA „Zavolat nyní"
   2) Mobilní „dot" navigace (tři tečky u pravého okraje)
   3) Decentní mikrointerakce
   ============================================================ */

/* ---------- 1) CTA „ZAVOLAT NYNÍ" – prémiový efekt při scrollu ---------- */
/* Decentní lesklý přejezd při vstupu tlačítka do viewportu + jemné
   „dýchání" stínu, dokud je CTA na obrazovce. Nikdy agresivní. */
.btn--call{position:relative;overflow:hidden;isolation:isolate}
.btn--call::after{
  content:"";position:absolute;top:-20%;bottom:-20%;left:-75%;width:55%;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.5) 50%,transparent 100%);
  transform:skewX(-18deg);opacity:0;pointer-events:none;z-index:3;
  mix-blend-mode:soft-light;
}
.btn--call.cta-reveal::after{animation:ctaSheen 1.1s var(--ease) .12s 1}
@keyframes ctaSheen{
  0%{left:-75%;opacity:0}
  12%{opacity:1}
  60%{opacity:1}
  100%{left:135%;opacity:0}
}
/* Jemné, pomalé „dýchání" stínu, jen když je CTA viditelné (nerušivé) */
.btn--call.cta-inview{animation:ctaBreath 3.6s ease-in-out infinite}
.btn--call.cta-inview:hover,.btn--call.cta-inview:focus-visible,
.btn--call.cta-inview:active{animation:none}
@keyframes ctaBreath{
  0%,100%{box-shadow:0 4px 14px rgba(255,213,0,.30),0 1px 3px rgba(0,0,0,.18)}
  50%{box-shadow:0 9px 26px rgba(255,213,0,.46),0 2px 8px rgba(0,0,0,.22)}
}

/* ---------- 3) Mikrointerakce – jemný zoom obrázku karty ---------- */
.card__img{transition:transform .45s var(--ease)}
.card:hover .card__img{transform:scale(1.045)}

/* ---------- 2) MOBILNÍ „DOT" NAVIGACE ---------- */
.dotnav{display:none}
@media (max-width:680px){
  .dotnav{display:block}

  /* Spouštěč – tři nenápadné tečky u pravého okraje, svisle na střed */
  .dotnav__trigger{
    position:fixed;top:88px;right:0;z-index:62;
    transform:translateX(10px);
    width:42px;height:74px;display:flex;align-items:center;justify-content:center;
    background:transparent;border:0;border-radius:16px 0 0 16px;
    opacity:0;pointer-events:none;-webkit-tap-highlight-color:transparent;
    transition:opacity .55s var(--ease),transform .55s var(--ease);
  }
  .dotnav.is-ready .dotnav__trigger{opacity:1;pointer-events:auto;transform:translateX(0)}
  .dotnav__dots{display:flex;flex-direction:column;gap:7px;padding:4px 0}
  .dotnav__dots i{
    width:6px;height:6px;border-radius:50%;background:#0a0a0a;opacity:.30;
    box-shadow:0 0 0 1px rgba(255,255,255,.28);
    transition:opacity .3s var(--ease),transform .35s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
  }
  /* Adaptivní kontrast – nad tmavými sekcemi tečky zežloutnou */
  .dotnav.on-dark .dotnav__dots i{background:var(--yellow);opacity:.42;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
  .dotnav__trigger:hover .dotnav__dots i,
  .dotnav__trigger:focus-visible .dotnav__dots i{opacity:.9}
  .dotnav__trigger:active{transform:translateX(0) scale(.93)}

  /* Otevřený stav – tečky se rozestoupí (náznak „aktivní") */
  .dotnav.is-open .dotnav__dots i{opacity:.95}
  .dotnav.is-open .dotnav__dots i:nth-child(1){transform:translateY(7px)}
  .dotnav.is-open .dotnav__dots i:nth-child(3){transform:translateY(-7px)}

  /* Zatmavení pozadí */
  .dotnav__scrim{
    position:fixed;inset:0;z-index:65;background:rgba(8,9,11,.52);
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .35s var(--ease),visibility .35s var(--ease);
  }
  .dotnav.is-open .dotnav__scrim{opacity:1;visibility:visible;pointer-events:auto}

  /* Vysouvací panel navigace */
  .dotnav__panel{
    position:fixed;top:0;right:0;bottom:0;z-index:70;
    width:min(84vw,322px);
    background:linear-gradient(160deg,#15171a 0%,#0c0d0f 100%);
    border-left:3px solid var(--yellow);
    box-shadow:-22px 0 56px rgba(0,0,0,.5);
    padding:26px 22px calc(22px + env(safe-area-inset-bottom)) 24px;
    display:flex;flex-direction:column;
    transform:translateX(106%);pointer-events:none;
    transition:transform .42s var(--ease);
    overflow-y:auto;overscroll-behavior:contain;
  }
  .dotnav.is-open .dotnav__panel{transform:translateX(0);pointer-events:auto}
  .dotnav__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
  .dotnav__title{
    font-family:'Oswald',sans-serif;font-size:12px;letter-spacing:3px;
    text-transform:uppercase;color:var(--yellow);margin:0;padding-left:2px}
  .dotnav__close{
    flex:0 0 auto;width:40px;height:40px;display:flex;align-items:center;justify-content:center;
    border-radius:50%;background:rgba(255,255,255,.06);color:#e9eaec;
    font-size:26px;line-height:1;border:1px solid rgba(255,255,255,.12);
    -webkit-tap-highlight-color:transparent;
    transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)}
  .dotnav__close span{margin-top:-3px}
  .dotnav__close:hover,.dotnav__close:focus-visible{background:var(--yellow);color:#0a0a0a;border-color:var(--yellow)}
  .dotnav__close:active{transform:scale(.92)}
  .dotnav__close-btn{
    margin-top:12px;width:100%;padding:13px 18px;border-radius:10px;
    background:transparent;color:#cfd2d6;border:1.5px solid rgba(255,255,255,.22);
    font-family:'Oswald',sans-serif;font-weight:600;font-size:14px;letter-spacing:1.5px;text-transform:uppercase;
    -webkit-tap-highlight-color:transparent;
    transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
  .dotnav__close-btn:hover,.dotnav__close-btn:focus-visible{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.4)}
  .dotnav__close-btn:active{background:rgba(255,255,255,.1)}
  .dotnav__list{display:flex;flex-direction:column;gap:2px;margin-bottom:20px}
  .dotnav__list a{
    display:block;padding:13px 14px;border-radius:9px;position:relative;
    font-family:'Oswald',sans-serif;font-weight:500;font-size:17px;letter-spacing:.6px;color:#e9eaec;
    transition:background .2s var(--ease),color .2s var(--ease),padding-left .2s var(--ease)}
  .dotnav__list a::before{
    content:"";position:absolute;left:6px;top:50%;width:3px;height:58%;
    background:var(--yellow);border-radius:2px;
    transform:translateY(-50%) scaleY(0);transform-origin:center;
    transition:transform .22s var(--ease)}
  .dotnav__list a:hover,.dotnav__list a:active{background:rgba(255,255,255,.05);padding-left:20px}
  .dotnav__list a.is-current{color:var(--yellow);background:rgba(255,213,0,.08);padding-left:20px}
  .dotnav__list a.is-current::before{transform:translateY(-50%) scaleY(1)}
  .dotnav__cta{
    margin-top:auto;display:flex;align-items:center;justify-content:center;text-align:center;
    padding:15px 18px;background:var(--yellow);color:#0a0a0a;border-radius:10px;
    font-family:'Oswald',sans-serif;font-weight:700;font-size:14.5px;letter-spacing:1.2px;text-transform:uppercase;
    box-shadow:0 6px 18px rgba(255,213,0,.3);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
  .dotnav__cta:hover{box-shadow:0 9px 24px rgba(255,213,0,.42)}
  .dotnav__cta:active{transform:scale(.98)}

  /* Zámek scrollu + skrytí spodního CTA, ať se nepřekrývají */
  body.dotnav-lock{overflow:hidden}
  body.dotnav-lock .sticky-bar{opacity:0;pointer-events:none;transition:opacity .25s var(--ease)}
}

/* ---------- Respektování prefers-reduced-motion ---------- */
@media (prefers-reduced-motion:reduce){
  .btn--call.cta-reveal::after{animation:none;opacity:0}
  .btn--call.cta-inview{animation:none}
  .card:hover .card__img{transform:none}
  .dotnav__trigger,.dotnav__panel,.dotnav__scrim,.dotnav__dots i{transition:none}
}

/* ============================================================
   ÚPRAVA 2026-06-14 — v15
   • úkol 1: mobilní hero CTA – čistý vertikální stack bez kolizí
   • úkol 2/12: odlišení opakovacího školení (doplňkové)
   ============================================================ */

/* Opakovací školení – kicker, který ho odlišuje od úrovní L1–L3 */
/* Mobilní hero: hlavní CTA „Zavolat nyní" a „Nezávazně poptat" se nesmí
   překrývat ani tlačit – čistý vertikální stack s jasným rozestupem. */
@media (max-width:680px){
  .hero__cta{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:12px;margin-bottom:32px}
  .hero__cta .btn{width:100%}
}

/* ============================================================
   ÚPRAVA 2026-06-14 — v16
   • mini-galerie (slider) u karet školení L1 / L2 / L3
   • tlačítko tří teček – žlutý rámeček + pulz po 1. použití
   • cena opakovacího školení – „od 1 200 Kč“ / „bez DPH“ vlevo
   ============================================================ */

/* ---------- SLIDER U KARET ŠKOLENÍ ---------- */
/* Kontejner dědí pevnou výšku 220px z .card__img → žádný layout shift. */
.vps-slider{position:relative;overflow:hidden}
.vps-slider__track{position:absolute;inset:0}
.vps-slider__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  opacity:0;transform:scale(1);
  transition:opacity .9s var(--ease),transform .45s var(--ease);
  will-change:opacity;
}
/* Fallback bez JS / jediná fotka: zobrazí se první snímek */
.vps-slider__img:first-child{opacity:1}
/* Po startu JS řídí viditelnost přes .is-active */
.vps-slider.is-ready .vps-slider__img{opacity:0}
.vps-slider.is-ready .vps-slider__img.is-active{opacity:1}
/* Jemný zoom aktivní fotky při hoveru (nahrazuje původní zoom kontejneru) */
.card:hover .vps-slider{transform:none}
.card:hover .vps-slider__img.is-active{transform:scale(1.045)}

/* Indikátor – decentní průhledné kroužky, aktivní je žlutý */
.vps-slider__dots{
  position:absolute;left:0;right:0;bottom:11px;z-index:3;
  display:flex;gap:9px;justify-content:center;align-items:center;
}
.vps-slider__dot{
  width:9px;height:9px;border-radius:50%;padding:0;border:0;cursor:pointer;
  background:rgba(255,255,255,.32);
  box-shadow:0 0 0 1px rgba(0,0,0,.35),0 1px 4px rgba(0,0,0,.45);
  -webkit-tap-highlight-color:transparent;
  transition:background .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.vps-slider__dot:hover{background:rgba(255,255,255,.55)}
.vps-slider__dot.is-active{
  background:var(--yellow);transform:scale(1.18);
  box-shadow:0 0 0 1px rgba(0,0,0,.5),0 0 8px rgba(255,213,0,.6);
}

/* ---------- TLAČÍTKO TŘÍ TEČEK – JEMNÝ ADAPTIVNÍ NÁZNAK ---------- */
.dotnav__trigger::after{
  content:"";position:absolute;top:18px;bottom:18px;left:9px;right:9px;
  border-radius:12px;border:1px solid transparent;
  box-shadow:0 0 0 0 rgba(255,213,0,0);
  pointer-events:none;
  transition:border-color .45s var(--ease),box-shadow .45s var(--ease);
}
/* Po prvním použití jen decentní, poloprůhledný náznak – bez výrazného glow,
   barva se přizpůsobuje pozadí (žlutá nad tmavým, jemný tmavý hairline nad světlým) */
.dotnav.is-visited .dotnav__trigger::after{
  border-color:rgba(18,20,23,.20);
  box-shadow:inset 0 0 5px rgba(18,20,23,.06);
}
.dotnav.is-visited.on-dark .dotnav__trigger::after{
  border-color:rgba(255,213,0,.30);
  box-shadow:inset 0 0 6px rgba(255,213,0,.10);
}
/* visited jen lehce zvýrazní tečky, barvu řídí adaptivní logika (on-dark) */
.dotnav.is-visited:not(.on-dark) .dotnav__trigger .dotnav__dots i{opacity:.5}
.dotnav.is-visited.on-dark .dotnav__trigger .dotnav__dots i{opacity:.6}
/* Krátké, jemné pulznutí po otevření/zavření – malý dosah, poloprůhledné */
.dotnav.is-pulse .dotnav__trigger::after{animation:dotnavPulse .7s var(--ease)}
@keyframes dotnavPulse{
  0%{box-shadow:0 0 0 0 rgba(255,213,0,.30)}
  60%{box-shadow:0 0 0 5px rgba(255,213,0,0)}
  100%{box-shadow:0 0 0 0 rgba(255,213,0,0)}
}

/* ---------- CENA OPAKOVACÍHO ŠKOLENÍ – STACK VLEVO ---------- */
.course-repeat__action .price.price--stack{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
  gap:2px;line-height:1.05;text-align:left;
}
.course-repeat .price--stack span{margin-left:0;text-align:left}

/* ---------- prefers-reduced-motion: tlumení pohybu ---------- */
@media (prefers-reduced-motion:reduce){
  .vps-slider__img{transition:opacity .001ms}
  .card:hover .vps-slider__img.is-active{transform:none}
  .vps-slider__dot{transition:none}
  .dotnav.is-pulse .dotnav__trigger::after{animation:none}
  .dotnav__trigger::after{transition:none}
}

/* ============================================================
   ÚPRAVA 2026-06-15 — v17
   • úkol 7: kompaktní header při scrollu (plynulé, s hysterezí)
   • úkol 5: kurzor pointer u prokliknutelného slideru
   ============================================================ */

/* ---------- úkol 7: KOMPAKTNÍ HEADER PŘI SCROLLU ---------- */
.header{transition:box-shadow .3s var(--ease),background-color .3s var(--ease)}
.header__inner{transition:min-height .3s var(--ease),padding-top .3s var(--ease),padding-bottom .3s var(--ease)}
.header .logo img{transition:width .3s var(--ease),height .3s var(--ease)}
.header .logo__text strong,.header .logo__text span{transition:font-size .3s var(--ease),opacity .3s var(--ease)}

.header.header--compact{box-shadow:0 4px 16px rgba(0,0,0,.18)}
.header.header--compact .header__inner{min-height:58px;padding-top:5px;padding-bottom:5px}
.header.header--compact .logo img{width:54px;height:54px}
.header.header--compact .logo__text span{opacity:.78}

@media (prefers-reduced-motion:reduce){
  .header,.header__inner,.header .logo img,
  .header .logo__text strong,.header .logo__text span{transition:none}
}

/* ---------- úkol 5: prokliknutelný / swipovatelný slider ---------- */
.vps-slider--interactive .vps-slider__track{cursor:pointer}

/* ============================================================
   ÚPRAVA 2026-06-15 — v18
   • úkol 1/4: řízení ořezu nových fotek v kartách (object-position)
   ============================================================ */
.vps-slider__img.img-focus-center{object-position:center center}
.vps-slider__img.img-focus-top{object-position:center 22%}
.vps-slider__img.img-focus-bottom{object-position:center 78%}
.vps-slider__img.img-focus-left{object-position:left center}
.vps-slider__img.img-focus-right{object-position:right center}

/* ============================================================
   ÚPRAVA 2026-06-16 — v19
   • animace fotky instruktora po kliknutí (zlatý ripple + glow)
   • dotnav: indikátor pozice na stránce + stav při tažení (drag-scroll)
   ============================================================ */

/* ---------- Fotka instruktora – jemná mikroanimace po kliknutí ---------- */
.instructor-photo{position:relative;cursor:pointer}
.instructor-photo::after{
  content:"";position:absolute;inset:-3px;border-radius:inherit;pointer-events:none;
  opacity:0;box-shadow:0 0 0 0 rgba(255,213,0,0);
}
.instructor-photo--pulse{animation:instrPulse .6s var(--ease)}
.instructor-photo--pulse::after{animation:instrRipple .65s var(--ease)}
@keyframes instrPulse{0%{transform:scale(1)}45%{transform:scale(1.02)}100%{transform:scale(1)}}
@keyframes instrRipple{
  0%{opacity:1;box-shadow:0 0 0 0 rgba(255,213,0,.55),0 0 20px rgba(255,213,0,.40)}
  100%{opacity:0;box-shadow:0 0 0 18px rgba(255,213,0,0),0 0 34px rgba(255,213,0,0)}
}

/* ---------- dotnav – stav při tažení (drag-scroll) ---------- */
.dotnav__trigger{touch-action:none}            /* drag-scroll řídí JS, brání dvojímu scrollu */
/* stav při vědomém tažení po tlačítku */
.dotnav.is-dragging .dotnav__trigger{transform:translateX(0) scale(1.05)}
.dotnav.is-dragging .dotnav__dots i{background:var(--yellow);opacity:.9}
.dotnav.is-dragging .dotnav__trigger::after{
  border-color:rgba(255,213,0,.38);
  box-shadow:inset 0 0 7px rgba(255,213,0,.14);
}

@media (prefers-reduced-motion:reduce){
  .instructor-photo--pulse,.instructor-photo--pulse::after{animation:none}
  .dotnav.is-dragging .dotnav__trigger{transform:translateX(0)}
}

/* ============================================================
   ÚPRAVA 2026-06-16 — v21
   • menu tečky jako pohyblivý jezdec (poloha = pozice na stránce)
   ============================================================ */
/* plynulý posun jezdce při běžném scrollu; při tažení drží přesně pod prstem */
.dotnav__trigger{transition:opacity .55s var(--ease),transform .55s var(--ease),top .12s ease-out}
.dotnav.is-dragging .dotnav__trigger{transition:opacity .55s var(--ease),transform .2s var(--ease),top 0s}
@media (prefers-reduced-motion:reduce){
  .dotnav__trigger{transition:opacity .55s var(--ease),transform .55s var(--ease),top 0s}
}

/* ============================================================
   ÚPRAVA 2026-06-16 — v22
   • štítek návaznosti kurzů v kartách L2 / L3
   ============================================================ */
.card__prereq{
  display:flex;align-items:center;gap:9px;
  font-family:'Oswald',sans-serif;font-size:12px;letter-spacing:1.2px;
  text-transform:uppercase;font-weight:600;color:var(--yellow);
  margin-top:-2px;
}
.card__prereq::before{
  content:"";flex:none;width:16px;height:2px;border-radius:2px;
  background:var(--yellow);box-shadow:0 0 6px rgba(255,213,0,.5);
}

/* ============================================================
   ÚPRAVA 2026-06-16 — v23
   • mobil: skrytí nativního posuvníku (polohu ukazují tři tečky)
   ============================================================ */
@media (max-width:680px){
  html{scrollbar-width:none;-ms-overflow-style:none}
  html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}
}

/* ============================================================
   ÚPRAVA 2026-06-17 — v24
   3) tenká žlutá linie mezi legislativou a poptávkou
   4) štítek „Základní školení" (sdílí .card__prereq – beze změny stylu)
   5) jemné odhalení FAQ položek
   6) autorská FAQ položka + sr-only (skrytá SEO věta)
   2) telefonní CTA na konci stránky – dočasný černý rámeček
   8) skrytí spodního navigačního bloku „Web" na mobilu
   ============================================================ */

/* 3) jemný oddělovač mezi #nv (legislativa) a #poptavka (formulář) */
#poptavka{position:relative}
#poptavka::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(440px,82%);height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(255,213,0,.7),transparent);
  opacity:.9;pointer-events:none;
}

/* 5) FAQ – jemné odhalení (fade-up); bez JS/efektu zůstávají položky viditelné */
.faq details.faq-reveal{opacity:0;transform:translateY(12px)}
.faq details.faq-reveal--in{
  opacity:1;transform:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.faq summary:hover{color:#111}
.faq details:hover{border-left-color:#ffdf3a}

/* 6) sr-only (přístupná, ale vizuálně skrytá SEO věta) */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* autorská FAQ položka – decentní žlutý akcent */
.faq details.faq__item--author{box-shadow:0 0 0 1px rgba(255,213,0,.35)}
.faq details.faq__item--author[open]{box-shadow:0 6px 22px rgba(0,0,0,.07),0 0 0 1px rgba(255,213,0,.5)}

/* 2) telefonní CTA na konci stránky – dočasný prémiový černý rámeček */
.contact__card--phone{transition:box-shadow .4s var(--ease),transform .4s var(--ease)}
.phone-cta--end-highlight{
  box-shadow:0 0 0 2px #0a0a0a,0 0 0 5px rgba(255,213,0,.45),0 14px 30px rgba(0,0,0,.18);
  animation:phoneEndPulse .7s var(--ease);
}
@keyframes phoneEndPulse{
  0%{box-shadow:0 0 0 0 #0a0a0a,0 0 0 0 rgba(255,213,0,0)}
  55%{box-shadow:0 0 0 3px #0a0a0a,0 0 0 8px rgba(255,213,0,.35)}
  100%{box-shadow:0 0 0 2px #0a0a0a,0 0 0 5px rgba(255,213,0,.45),0 14px 30px rgba(0,0,0,.18)}
}

@media (max-width:680px){
  /* 8) skrytí spodního navigačního bloku „Web" na mobilu */
  .footer__col-web{display:none}
}
@media (prefers-reduced-motion:reduce){
  .faq details.faq-reveal{opacity:1;transform:none}
  .contact__card--phone{transition:none}
  .phone-cta--end-highlight{animation:none}
}

/* ============================================================
   ÚPRAVA 2026-06-17 — v25
   IV) zrušení modrého zvýraznění prohlížeče po kliknutí na fotky
   V)  úplné odstranění žlutého rámečku kolem menu tří teček
   ============================================================ */
/* V) žádný rámeček kolem teček (v žádném stavu) – tečky i funkce zůstávají */
.dotnav__trigger::after{display:none!important}

/* IV) klik na fotky bez modrého tap-highlightu / modrého rámečku prohlížeče */
.instructor-photo,.vps-slider,.vps-slider__track,.vps-slider__img,
.split__media,.split__media--portrait{
  -webkit-tap-highlight-color:transparent;
}
.instructor-photo{outline:none;-webkit-user-select:none;user-select:none}
.instructor-photo:focus,.instructor-photo:focus-visible,
.vps-slider__img:focus,.vps-slider__track:focus{outline:none}

/* ============================================================
   ÚPRAVA 2026-06-17 — v26
   VI) tematické ikony + jemné oddělovače v horním menu (desktop)
   ============================================================ */
.nav a{display:inline-flex;align-items:center;gap:7px}
.nav__ico{width:1.22em;height:1.22em;opacity:.92;flex:none;
  transition:opacity .2s var(--ease),transform .25s var(--ease)}
.nav a:hover .nav__ico{opacity:1;transform:translateY(-1px)}
@media (min-width:1025px){
  /* Úkol – prémiovější, lépe čitelná horní lišta:
     větší a sytější písmo (škáluje s šířkou displeje, ale nepřeteče),
     výraznější ikony a decentní „pill" podsvit u aktivní položky. */
  .nav{gap:2px; font-size:clamp(13px, .42vw + 7.4px, 14px); font-weight:600; letter-spacing:.4px}
  .nav a{
    padding:9px 12px; gap:8px; border-radius:8px; color:#0a0a0a;
    transition:background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
  }
  .nav a:hover{background:rgba(0,0,0,.07); transform:translateY(-1px)}
  /* jemné svislé oddělovače – kratší, vystředěné, méně rušivé než plná linka */
  .nav a:not(:first-child){position:relative}
  .nav a:not(:first-child)::before{
    content:""; position:absolute; left:-1px; top:50%; transform:translateY(-50%);
    width:1px; height:18px; background:rgba(0,0,0,.16);
  }
  .nav a:hover::before{opacity:0}
  /* spodní zvýraznění zarovnané s obsahem položky, o něco výraznější */
  .nav a::after{left:12px; right:12px; height:2.5px; bottom:4px}
}
@media (min-width:1025px){
  .header .btn--phone-sm{display:none}  /* telefon je v horní liště – uvolní místo pro 8 položek menu */
}

/* Úkol – horní žlutá lišta: silnější, prémiovější vzhled na PC a větších displejích.
   Vyšší lišta s jemným tmavým spodním lemem a širší vnitřní řádek, aby se větší
   menu pohodlně vešlo i s logo-textem (obsah stránek zůstává v 1200px). */
@media (min-width:1025px){
  .header{box-shadow:0 3px 14px rgba(0,0,0,.12); border-bottom:1px solid rgba(0,0,0,.14)}
  .header__inner{max-width:1360px; min-height:90px; gap:28px}
  .logo img{height:68px}
}

/* Úkol – mobilní rozklikávací menu ve žluté liště: čistší, profesionálnější
   a prémiovější vnitřek. Každá položka je přehledný řádek s ikonou v tmavém
   „chipu", jemným oddělovačem a decentní šipkou cíle. */
@media (max-width:1024px){
  .nav{
    padding:8px 14px 12px;
    gap:0;
    background:linear-gradient(180deg, rgba(255,199,44,.92) 0%, rgba(242,182,28,.92) 100%);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
    border-top:2px solid #0a0a0a;
    box-shadow:0 22px 38px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.28);
  }
  .nav a{
    display:flex; align-items:center; gap:14px; width:100%;
    padding:13px 6px; border-radius:8px;
    font-size:15px; font-weight:600; letter-spacing:.8px; color:#0a0a0a;
    border-bottom:1px solid rgba(0,0,0,.12);
    transition:background .2s var(--ease), padding-left .2s var(--ease);
  }
  .nav a:last-child{border-bottom:none}
  .nav a:active{background:rgba(0,0,0,.07)}
  .nav a:hover{background:rgba(0,0,0,.05); padding-left:12px}
  /* ikona v kontrastním kruhovém chipu – sjednocuje vzhled a působí prémiově */
  .nav .nav__ico{
    width:38px; height:38px; padding:9px; flex:none; opacity:1;
    border-radius:50%; background:#0a0a0a; color:var(--yellow);
    box-shadow:0 3px 8px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12);
    transition:transform .2s var(--ease);
  }
  .nav a:hover .nav__ico{transform:none}
  /* jemná šipka napravo naznačující přechod na sekci */
  .nav a::after{
    content:""; position:static; flex:none; margin-left:auto;
    width:8px; height:8px; background:none; opacity:1;
    border-right:2px solid rgba(0,0,0,.42); border-bottom:2px solid rgba(0,0,0,.42);
    transform:rotate(-45deg); transform-origin:center;
  }
  .nav a:hover::after{transform:rotate(-45deg); border-color:#0a0a0a}
}

/* ============================================================
   ÚPRAVA 2026 — přestavba na firemní web „Výškové práce Anděl"
   Pouze ADITIVNÍ doplňky pro nové sekce (recenze, pásmo působnosti,
   poznámka k nacenění). Sdílí stávající designové tokeny – beze
   změny existujících pravidel, animací a responzivity.
   ============================================================ */

/* --- Recenze zákazníků (sdílí vizuální jazyk .ref / karet) --- */
.reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:40px}
.review{display:flex;flex-direction:column;gap:16px;padding:28px 26px;background:rgba(255,255,255,.03);border:1px solid #2a2d31;border-left:3px solid var(--yellow);border-radius:4px;transition:background .25s,border-color .25s}
.review:hover{background:rgba(255,213,0,.06);border-color:var(--yellow)}
.review__quote{color:#dfe3e7;font-size:16px;line-height:1.6}
.review__quote::before{content:"„";color:var(--yellow);font-family:'Anton',sans-serif;font-size:30px;line-height:0;vertical-align:-10px;margin-right:4px}
.review__meta{margin-top:auto;font-family:'Oswald',sans-serif;font-size:12.5px;letter-spacing:1.5px;text-transform:uppercase;color:#9aa0a6}
.review__meta strong{display:block;color:#fff;font-size:15px;letter-spacing:.6px;text-transform:none;margin-bottom:2px}
@media (max-width:1024px){.reviews{grid-template-columns:minmax(0,1fr);max-width:560px;margin-left:auto;margin-right:auto}}

/* --- Pásmo působnosti / poznámka k nacenění --- */
.note{margin-top:28px;padding:18px 22px;background:rgba(255,213,0,.1);border-left:4px solid var(--yellow);font-size:15px;color:#4a4f54;border-radius:2px}
.section--dark .note{background:rgba(255,213,0,.08);color:#c8ccd1}
.areas{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.areas span{font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:#1a1a1a;background:rgba(0,0,0,.08);border:1px solid rgba(0,0,0,.18);padding:8px 14px;border-radius:3px}
.section--dark .areas span{color:#e7e7e7;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.18)}

/* =====================================================================
   ===  MODERNIZACE 2026  =============================================
   Zachovává industriální identitu (černá + žlutá). Pouze:
   (1) lehké doladění barev → grafit + sytější zlatá
   (2) přepracovaný FORMÁT a ROZLOŽENÍ boxů a prvků
   Vše jako override existujících tříd – HTML i JS beze změny.
   ===================================================================== */

/* (1) ---- LEHKÉ DOLADĚNÍ PALETY (grafit + zlatá), ostřejší geometrie ---- */
:root{
  --yellow:#FFC72C;      /* sytější, o něco teplejší zlatá místo neonové */
  --yellow-2:#F2B61C;
  --black:#0a0c0f;       /* grafitová čerň s chladným nádechem */
  --ink:#0f1216;
  --dark:#13171c;
  --dark-2:#191e25;
  --line:#2b323b;        /* chladnější hairline */
  --muted:#8b929c;
  --radius:2px;          /* ostřejší, techničtější rohy */
  --radius-btn:3px;
}
.hero__ghost{-webkit-text-stroke-color:rgba(255,199,44,.5)}

/* (2) ---- RYTMUS SEKCÍ + NADPISY ---- */
.section{padding:clamp(82px,11vh,128px) 0}
.h2{font-size:clamp(32px,4.6vw,58px);letter-spacing:.3px;line-height:1.0}
.eyebrow{font-size:12px;letter-spacing:3.5px}
.lead{font-size:18px;line-height:1.62}

/* ---- STRIP: segmentovaný pruh ---- */
.strip{padding:0;border-top:none}
.strip__inner{justify-content:stretch;gap:0;padding:0}
.strip__inner span{flex:1;text-align:center;padding:18px 10px;border-left:1px solid #1c1f24;padding-left:10px}
.strip__inner span:first-child{border-left:none}
.strip__inner span::before{position:static;display:inline-block;margin-right:9px;font-size:9px;vertical-align:2px}
@media (max-width:760px){.strip__inner{flex-wrap:wrap}.strip__inner span{flex:1 1 50%;border-top:1px solid #1c1f24}}

/* ---- HERO: segmentované staty ---- */
.hero__usps{gap:0;border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);overflow:hidden}
.hero__usps li{padding:20px 22px;border-left:1px solid rgba(255,255,255,.12)}
.hero__usps li:first-child{border-left:none}
.hero__usps strong{font-size:30px}
@media (max-width:640px){.hero__usps{grid-template-columns:repeat(2,minmax(0,1fr))}.hero__usps li:nth-child(odd){border-left:none}.hero__usps li:nth-child(n+3){border-top:1px solid rgba(255,255,255,.12)}}

/* ---- KARTY SLUŽEB: hairline dlaždice + horní akcentní linka ---- */
.cards{gap:18px;margin-top:52px}
.card{background:var(--dark-2);border:1px solid var(--line);border-radius:var(--radius);position:relative}
.card::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);z-index:3}
.card:hover{transform:translateY(-6px);border-color:#3a424c}
.card:hover::after{transform:scaleX(1)}
.card__img{height:208px;border-bottom:1px solid var(--line)}
.card__body{padding:30px 28px;gap:13px}
.card__body h3{font-size:25px;line-height:1.08}
.card__meta{border:none;border-top:1px solid var(--line);padding:12px 0 0;margin-top:2px;color:#9aa0a6}
/* index dlaždice */
.card__body h3::before{content:counter(svc,decimal-leading-zero);counter-increment:svc;display:block;font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:2px;color:var(--yellow);margin-bottom:10px}
.cards{counter-reset:svc}
.card--featured{box-shadow:0 24px 60px rgba(255,199,44,.12);border-color:var(--yellow)}
.card__badge{top:0;right:0;border-radius:0 0 0 4px;padding:8px 14px}

/* tři rovnocenné silné boxy na desktopu */
@media (min-width:921px){
  .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.card--featured{grid-row:auto;grid-column:auto}

/* ---- COURSE-REPEAT panel ---- */
.course-repeat{border-radius:var(--radius);border:1px solid var(--line);border-top:3px solid var(--yellow);padding:32px 34px}
/* ---- CALLOUT ---- */
.callout{border-radius:var(--radius);border-left-width:4px}

/* ---- DETAILNÍ VÝČET (kb): bento hairline mřížka ---- */
.kb{gap:1px;background:#e6e6e6;border:1px solid #e6e6e6;border-radius:var(--radius);overflow:hidden;margin-top:48px}
.kb article{background:#fff;border:none;border-radius:0;padding:28px 26px;position:relative;transition:background .25s}
.kb article::before{content:"";position:absolute;left:0;top:0;width:0;height:0;border-style:solid;border-width:14px 14px 0 0;border-color:var(--yellow) transparent transparent transparent;opacity:0;transition:opacity .25s}
.kb article:hover{background:#fafafa}
.kb article:hover::before{opacity:1}
.kb h3{font-size:17.5px}

/* ---- HODNOTY (grid-4 / feat): bento hairline + spodní akcent ---- */
.grid-4{gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:48px}
.feat{background:var(--dark);border:none;border-radius:0;padding:34px 28px;position:relative}
.feat::before{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--yellow);transition:width .35s var(--ease)}
.feat:hover{background:rgba(255,199,44,.05)}
.feat:hover::before{width:100%}
.feat__num{font-size:36px;color:var(--yellow);-webkit-text-stroke:0}

/* ---- REFERENCE & PRO KOHO: editorial index řádky ---- */
.refs{display:block;border-top:1px solid var(--line);margin-top:44px;counter-reset:rl}
.ref{display:grid;grid-template-columns:46px minmax(0,1.3fr) minmax(0,1fr);gap:22px;align-items:center;
  padding:22px 4px;border-bottom:1px solid var(--line);counter-increment:rl;position:relative;transition:padding .3s var(--ease),background .3s var(--ease)}
.ref::before{content:counter(rl,decimal-leading-zero);font-family:'Oswald',sans-serif;font-weight:600;font-size:13px;letter-spacing:1.5px;color:var(--muted)}
.ref:hover{padding-left:18px;background:rgba(255,255,255,.02)}
.ref:hover::before{color:var(--yellow)}
.ref__name{font-size:clamp(18px,2vw,25px);letter-spacing:.3px}
.ref__tag{justify-self:end;text-align:right;letter-spacing:1.5px}
@media (max-width:680px){.ref{grid-template-columns:34px 1fr;gap:6px 14px;padding:18px 2px}.ref__tag{grid-column:2;justify-self:start;text-align:left}}

/* ---- RECENZE: ostřejší dlaždice s velkým uvozovákem ---- */
.reviews{gap:18px;margin-top:44px}
.review{background:var(--dark-2);border:1px solid var(--line);border-left:3px solid var(--yellow);border-radius:var(--radius);padding:30px 28px;position:relative}
.review:hover{border-color:#3a424c;border-left-color:var(--yellow);background:rgba(255,199,44,.04)}
.review__quote{font-size:16.5px}

/* ---- STEPS: propojená moderní časová osa ---- */
.steps{gap:14px;margin-top:54px;position:relative}
.steps::before{content:"";position:absolute;top:31px;left:9%;right:9%;height:2px;
  background:repeating-linear-gradient(90deg,var(--yellow) 0 14px,transparent 14px 26px);z-index:0}
.steps li{background:transparent;border:none;border-radius:0;padding:0 12px;text-align:center}
.steps li span{width:64px;height:64px;display:grid;place-items:center;margin:0 auto 18px;
  border:2px solid var(--yellow);border-radius:50%;background:#fff;color:#111;font-size:25px;-webkit-text-stroke:0;position:relative;z-index:1}
.steps li h3{font-size:17px}
@media (max-width:820px){
  .steps{grid-template-columns:1fr;gap:0;max-width:520px;margin-left:auto;margin-right:auto}
  .steps::before{top:0;bottom:0;left:31px;right:auto;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--yellow) 0 14px,transparent 14px 26px)}
  .steps li{display:grid;grid-template-columns:64px 1fr;gap:18px;text-align:left;padding:14px 0;align-items:start}
  .steps li span{margin:0}
}

/* ---- FAQ: plochý editorial akordeon ---- */
.faq{gap:0;margin-top:44px;border-top:1px solid #e6e6e6}
.faq details{background:transparent;border:none;border-bottom:1px solid #e6e6e6;border-radius:0}
.faq details[open]{background:transparent;box-shadow:none}
.faq summary{padding:24px 4px;font-size:clamp(17px,1.7vw,21px)}
.faq summary::after{display:grid;place-items:center;width:34px;height:34px;border:1.5px solid rgba(0,0,0,.25);border-radius:50%;font-size:22px;line-height:0}
.faq details[open] summary::after{border-color:var(--yellow);background:var(--yellow)}
.faq details p{padding:0 4px 26px;font-size:15.5px;max-width:80ch}

/* ---- KONTAKT: dlaždice s horní akcentní linkou ---- */
.contact{gap:18px;margin-top:44px}
.contact__card{background:var(--dark-2);border:1px solid var(--line);border-radius:var(--radius);padding:34px 30px;position:relative;overflow:hidden}
.contact__card::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.contact__card[href]:hover::after{transform:scaleX(1)}
.contact__card[href]:hover{border-color:#3a424c}

/* ---- SPLIT média: tenký rám + rohové „ticky" ---- */
.split__media{border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 30px 70px rgba(0,0,0,.45);position:relative}
.split__media::before,.split__media::after{content:"";position:absolute;width:22px;height:22px;border:3px solid var(--yellow);z-index:2}
.split__media::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.split__media::after{bottom:-1px;right:-1px;border-left:none;border-top:none}

/* ---- FORMULÁŘ: ostřejší, techničtější ---- */
.form{border-radius:var(--radius);padding:clamp(26px,3vw,40px);border-color:rgba(255,255,255,.12)}
.form input,.form select,.form textarea{border-radius:var(--radius);border:1px solid #2f343b;background:#0e1115;color:#fff}
.form input::placeholder,.form textarea::placeholder{color:#6f757d}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--yellow);box-shadow:0 0 0 3px rgba(255,199,44,.18)}
.form select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23FFC72C' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:42px}

/* ---- CENÍK (žlutá sekce): jemné odsazení boxů ---- */
.section--yellow .areas span{border-radius:var(--radius)}
/* Ceník – lepší čitelnost: větší mezery mezi odstavci + zvýraznění klíčových informací */
#cenik p{margin-bottom:22px; line-height:1.8}
#cenik p:last-of-type{margin-bottom:26px}
#cenik p strong{font-weight:700; color:#000}
@media (max-width:600px){ #cenik p{margin-bottom:18px; line-height:1.78} }
/* pomocná třída – skrýt obsah jen na mobilu */
.hide-m{display:inline}
@media (max-width:600px){ .hide-m{display:none} }
/* pomocná třída – zobrazit obsah jen na mobilu (opak .hide-m) */
.only-m{display:none}
@media (max-width:600px){ .only-m{display:inline} }
/* (úkol) bílý text jen na mobilu – lepší čitelnost vybraných vět */
@media (max-width:600px){ .wht-m, .wht-m strong{color:#fff} }

/* ---- BUTTONY: o stupínek ostřejší ---- */
.btn{border-radius:var(--radius-btn);letter-spacing:1.8px}

/* --- Recenze: bodové hodnocení + zákazníci (úkol reference) --- */
.review{position:relative;padding-right:64px}
.review__score{position:absolute;top:24px;right:22px;font-family:'Oswald',sans-serif;font-weight:700;
  font-size:13px;letter-spacing:.5px;color:var(--black);background:var(--yellow);padding:5px 9px;border-radius:3px;line-height:1}
.review__meta{display:flex;flex-direction:column;gap:2px;font-family:'Oswald',sans-serif;font-size:12.5px;
  letter-spacing:1px;text-transform:uppercase;color:#9aa0a6;margin-top:auto}
.review__meta strong{color:#fff;font-size:15px;letter-spacing:.4px;text-transform:none}
@media (min-width:681px) and (max-width:1024px){.reviews{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}}

.clients{margin-top:44px;border-top:1px solid var(--line);padding-top:28px}
.clients__label{display:block;font-family:'Oswald',sans-serif;font-size:12px;letter-spacing:2.5px;
  text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.cl-short{display:none}
@media (max-width:600px){
  .clients__label{font-size:12px;letter-spacing:1.2px;white-space:normal;line-height:1.4}
  .cl-full{display:none}
  .cl-short{display:inline}
}
.clients__list{display:flex;flex-wrap:wrap;gap:10px}
.clients__list li{font-family:'Oswald',sans-serif;font-weight:600;font-size:14px;letter-spacing:.6px;
  color:#e7e7e7;background:rgba(255,255,255,.04);border:1px solid var(--line);padding:10px 16px;border-radius:var(--radius);
  transition:border-color .25s,background .25s}
.clients__list li:hover{border-color:var(--yellow);background:rgba(255,199,44,.06)}

/* =====================================================================
   ===  ÚPRAVY – pořadí služeb, zelený akcent, prémiové recenze  ======
   ===================================================================== */

/* Jednotný tmavě zelený odstín (zaveden a používán konzistentně:
   spojovací proužek v „Bezpečnost a odbornost" + boxy hodnocení). */
:root{
  --green:#15281f;
  --green-2:#1c3528;
  --green-line:#2e4d3b;
}

/* (1) Hlavní služba (.card--featured = 2. v pořadí) vždy vizuálně uprostřed na PC.
   DOM pořadí A,B,C (na mobilu logicky shora dolů). */
@media (min-width:921px){
  .cards .card:nth-child(1){order:1}  /* Rizikové výškové práce → vlevo */
  .cards .card:nth-child(2){order:2}  /* Hlavní služba → uprostřed */
  .cards .card:nth-child(3){order:3}  /* Školení a revize OOPP → vpravo */
}
/* po přeskupení by číslování L→R nedávalo smysl – decentně skryjeme */
.card__body h3::before{content:none}

/* (3) Zelený spojovací proužek přes celou šířku obou sloupců */
.ai-excerpt--full{width:100%;margin-top:34px;border-radius:var(--radius)}
.section--dark .ai-excerpt--full{
  background:var(--green);
  border:1px solid var(--green-line);
  border-left:4px solid var(--yellow);
  color:#cfe3d7 !important;
}
.section--dark .ai-excerpt--full strong{color:#fff}

/* (5)+(6) Prémiové, kompaktní a vyrovnané boxy hodnocení na tmavě zeleném pozadí */
.reviews{gap:16px;margin-top:40px}
.review{
  background:var(--green);
  border:1px solid var(--green-line);
  border-left:1px solid var(--green-line);
  border-radius:var(--radius);
  padding:26px 26px;
  display:flex;flex-direction:column;gap:16px;
  justify-content:flex-start;min-height:236px;position:relative;
  transition:background .25s,border-color .25s,transform .25s}
.review:hover{background:var(--green-2);border-color:#3a6149;transform:translateY(-4px)}
/* hodnocení = jemný zlatý akcent, ne dominantní plocha */
.review__score{position:static;align-self:flex-start;
  font-family:'Oswald',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.5px;
  color:var(--yellow);background:transparent;border:1px solid rgba(255,199,44,.45);
  padding:4px 11px;border-radius:999px;line-height:1}
.review__score::before{content:"★ ";color:var(--yellow);font-size:11px}
/* citace – těžiště boxu, čistá typografie i u krátkých textů */
.review__quote{flex:1;display:flex;align-items:center;margin:0;
  color:#eef3f0;font-size:16.5px;line-height:1.5;letter-spacing:.1px}
.review__quote::before{content:"“";font-family:'Anton',sans-serif;color:var(--yellow);
  opacity:.5;font-size:30px;line-height:0;margin-right:8px;align-self:flex-start;transform:translateY(14px)}
/* patička – jméno + typ zakázky, oddělená jemnou linkou */
.review__meta{margin-top:0;padding-top:16px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-direction:column;gap:3px;
  font-family:'Oswald',sans-serif;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#8fae9c}
.review__meta strong{color:#fff;font-size:15px;letter-spacing:.4px;text-transform:none;font-family:'Inter',sans-serif;font-weight:600}
@media (max-width:560px){.review{min-height:0}}

/* =====================================================================
   ===  MOBILNÍ OPTIMALIZACE  =========================================
   ===================================================================== */

/* (A) Konec vodorovného přetékání – skryté dekorace / redundantní navigace */
@media (max-width:600px){
  .hero__ghost{display:none}            /* na mobilu velkou vrstvu nezobrazujeme – tam je výrazný podpis ANDĚL */
}
@media (max-width:680px){
  .dotnav{display:none}                 /* redundantní s hamburger menu + přetékalo off-canvas */
  .footer{padding-bottom:96px}          /* místo pro plovoucí spodní tlačítko – nezakrývá drobný text */
}

/* (B) Tlačítka se na mobilu nesmí ořezávat – text se zalomí, CTA přes celou šířku */
@media (max-width:560px){
  .btn{white-space:normal;text-align:center;line-height:1.25}
  .btn--large{padding:17px 22px;font-size:15px}
  .hero__cta,.cta-row{flex-direction:column;align-items:stretch}
  .hero__cta .btn,.cta-row .btn{width:100%}
}

/* (C) Kratší stránka, čistší svislý rytmus, sjednocené velikosti */
@media (max-width:560px){
  .section{padding:58px 0}
  .container{padding:0 18px}
  .h2{font-size:clamp(26px,7.5vw,34px)}
  .lead{font-size:16.5px}
  .eyebrow{font-size:11.5px;letter-spacing:2.5px}

  .hero{min-height:auto;padding:30px 0 46px}
  .hero h1{font-size:clamp(34px,10vw,46px)}
  .hero__sub{font-size:16px;margin-bottom:26px}
  .hero__usps{margin-top:28px;padding-top:22px;gap:0}
  .hero__usps strong{font-size:24px}
  .hero__refs{margin-top:22px;font-size:12px}

  .cards{margin-top:30px}
  .card__body{padding:24px 22px;gap:11px}
  .card__body h3{font-size:23px}
  .kb,.grid-4,.values,.reviews,.contact,.refs,.steps,.aud,.pricegrid{margin-top:26px}
  .clients{margin-top:30px}
  .feat{padding:26px 22px}
  .review{padding:22px 22px}
  .section__head,.section .lead{margin-bottom:0}
}

/* (D) Pojistka proti přetečení na úzkých displejích */
@media (max-width:768px){
  html,body{overflow-x:hidden}
  .hero__inner,.container{max-width:100%}
}

/* =====================================================================
   ===  SLIDER HODNOCENÍ (jeden prémiový rámeček)  ====================
   ===================================================================== */
.revslider{margin-top:40px;max-width:900px}
@media (min-width:601px){ .revslider{max-width:none} }   /* PC: box hodnocení na celou šířku sekce */
.revslider__viewport{overflow:hidden;border:1px solid var(--green-line);border-left:3px solid var(--yellow);
  background:linear-gradient(180deg,var(--green-2),var(--green));border-radius:var(--radius);
  box-shadow:0 30px 70px rgba(0,0,0,.42)}
.revslider__track{display:flex;will-change:transform;transition:transform .55s var(--ease)}
.revslide{flex:0 0 100%;min-width:0;box-sizing:border-box;padding:46px 52px;
  display:flex;flex-direction:column;gap:22px;min-height:296px}
.revslide__score{align-self:flex-start;font-family:'Oswald',sans-serif;font-weight:600;font-size:13px;
  letter-spacing:.6px;color:var(--yellow);border:1px solid rgba(255,199,44,.45);padding:5px 13px;border-radius:999px;line-height:1}
.revslide__quote{flex:1;display:flex;align-items:center;margin:0;color:#eef3f0;
  font-size:clamp(18px,2.1vw,23px);line-height:1.5;letter-spacing:.1px;font-weight:500}
.revslide__quote::before{content:"“";color:var(--yellow);opacity:.45;font-family:'Anton',sans-serif;
  font-size:46px;line-height:0;margin-right:10px;vertical-align:-14px}
.revslide__meta{display:flex;flex-direction:column;gap:3px;margin:0;
  font-family:'Oswald',sans-serif;font-size:12.5px;letter-spacing:1px;text-transform:uppercase;color:#8fae9c}
.revslide__meta strong{color:#fff;font-size:17px;letter-spacing:.3px;text-transform:none;font-family:'Inter',sans-serif;font-weight:600}
.revslider__nav{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:24px}
.revslider__arrow{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:transparent;border:1px solid var(--line);color:#cfd3d8;font-size:22px;line-height:1;cursor:pointer;
  transition:border-color .2s,color .2s,background .2s}
.revslider__arrow:hover{border-color:var(--yellow);color:var(--yellow);background:rgba(255,199,44,.07)}
.revslider__dots{display:flex;gap:9px;align-items:center}
.revslider__dots button{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22);border:0;padding:0;cursor:pointer;
  transition:width .3s var(--ease),background .3s,border-radius .3s}
.revslider__dots button.is-on{width:26px;border-radius:6px;background:var(--yellow)}
@media (max-width:560px){
  .revslide{padding:30px 24px;min-height:340px;gap:18px}
  .revslide__quote{font-size:18px}
  .revslider__nav{gap:14px}
}

/* =====================================================================
   ===  OPRAVA: tří-tečkové mobilní menu (viditelné + kontrastní)  ====
   ===================================================================== */
@media (max-width:680px){
  .dotnav{display:block}                 /* znovu zapnuté tří-tečkové menu */
  .nav-toggle{display:none}              /* na telefonu používáme tří-tečkové menu (bez duplicity) */
  .dotnav__trigger{
    background:rgba(18,20,24,.34);
    -webkit-backdrop-filter:saturate(150%) blur(11px);backdrop-filter:saturate(150%) blur(11px);
    border:1px solid rgba(255,255,255,.16);border-right:none;
    box-shadow:0 6px 18px rgba(0,0,0,.18);
    width:46px;height:82px;
  }
  /* Nad tmavými sekcemi sklo decentně potemní (ladí + drží kontrast teček) */
  .dotnav.on-dark .dotnav__trigger{background:rgba(10,12,15,.42);border-color:rgba(255,199,44,.30)}
  .dotnav.is-open .dotnav__trigger{background:rgba(10,12,15,.55)}
  /* Tečky: adaptivní kontrast – na světlém pozadí tmavé s jemnou září,
     nad tmavými sekcemi žluté s tmavým lemem; vždy čitelné a decentní. */
  .dotnav__trigger .dotnav__dots i{
    width:6px;height:6px;border-radius:50%;
    background:#0a0a0a;opacity:.6;box-shadow:0 0 0 1.4px rgba(255,255,255,.6);
  }
  .dotnav.on-dark .dotnav__trigger .dotnav__dots i{
    background:var(--yellow);opacity:.95;box-shadow:0 0 0 1.2px rgba(0,0,0,.45);
  }
}

/* =====================================================================
   ===  ÚPRAVY 2026/06  ================================================
   Doladění desktopu + Affekt zakončení. Pouze aditivní override,
   sdílí stávající tokeny (žlutá/grafit), HTML/JS jádro beze změny.
   ===================================================================== */

/* (C) HERO – na desktopu posunout záběr tak, aby horolezec vyšel
   do volného prostoru vpravo (za textem zůstává konstrukce vlevo). */
@media (min-width:1025px){
  .hero__bg{transform:scale(1.24) translateX(11%);transform-origin:center center}
}
@media (min-width:1500px){
  .hero__bg{transform:scale(1.2) translateX(9%)}
}
@media (prefers-reduced-motion:reduce){
  .hero__bg{transition:none}
}

/* (F1) BEZPEČNOST A ODBORNOST – vyrovnání desktopu:
   fotka se na PC roztáhne na výšku obsahu (žádné prázdné místo vedle). */
@media (min-width:821px){
  #bezpecnost .split{align-items:stretch}
  #bezpecnost .split__media{min-height:380px;height:100%}
}

/* (F2) Decentní oddělovač mezi „Bezpečnost a odbornost" a „Proč Výškové práce Anděl"
   (obě sekce mají tmavé pozadí – potřebují vizuální předěl). */
#bezpecnost{padding-bottom:clamp(58px,6.8vh,88px)}
#proc{padding-top:0}
#proc > .container{position:relative;padding-top:clamp(58px,6.8vh,88px)}
#proc > .container::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:clamp(150px,44%,380px);height:1px;background:var(--line)}
/* středový značkový prvek oddělovače – oválná karabina (SVG v HTML, .sec-link) */
.sec-link{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);
  background:var(--dark);padding:0 12px;line-height:0;color:var(--yellow);z-index:1;pointer-events:none}
.sec-link svg{width:42px;height:29px;display:block;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.sec-link img{width:54px;height:54px;display:block;object-fit:contain;
  filter:drop-shadow(0 2px 7px rgba(0,0,0,.5))}

/* (G) O SPOLEČNOSTI – logo místo velké „portrétové" plochy: zmenšit,
   centrovat a zobrazit celé (contain) na decentním grafitovém poli. */
#o-nas .split__media.instructor-photo{
  aspect-ratio:1/1;min-height:0;max-width:340px;width:100%;
  margin-inline:auto;align-self:center;
  background-size:contain;background-repeat:no-repeat;background-position:center;
  background-color:#0c0e11;
}
@media (max-width:1024px){
  #o-nas .split__media.instructor-photo{max-width:300px}
}

/* (H) REFERENCE – vycentrovat prémiový rámeček, aby na desktopu
   nepůsobil odsazený doleva (vyvážené, konzistentní zobrazení). */
.revslider{margin-left:auto;margin-right:auto}
.revslide{min-height:300px;justify-content:space-between}

/* (K) VYBRANÍ ZÁKAZNÍCI A REALIZACE – responzivní, vyvážené štítky.
   Štítky rovnoměrně vyplní řádek; osamocený štítek na posledním řádku
   se roztáhne na celou šířku místo malého „zbytku". */
.clients__list{gap:10px}
.clients__list li{flex:1 1 200px;text-align:center;display:flex;align-items:center;justify-content:center}
@media (max-width:520px){
  .clients__list li{flex:1 1 100%}
}

/* (A) AFFEKT – decentní, profesionální zakončení webu (ne „nalepená reklama") */
.affekt{border-top:1px solid #1a1a1a;margin-top:48px}
.affekt__inner{display:flex;align-items:center;justify-content:center;gap:16px;
  padding:26px 0 6px;flex-wrap:wrap}
.affekt__label{font-family:'Oswald',sans-serif;font-size:11.5px;letter-spacing:2.5px;
  text-transform:uppercase;color:#5d6168}
.affekt__brand{display:inline-flex;align-items:center;gap:9px;
  padding:9px 16px;border:1px solid #23262b;border-radius:4px;
  background:rgba(255,255,255,.02);color:#e7e7e7;text-decoration:none;
  font-family:'Oswald',sans-serif;line-height:1;
  transition:border-color .25s,color .25s,background .25s,transform .25s}
.affekt__brand:hover{border-color:var(--yellow);color:#fff;background:rgba(255,199,44,.06);transform:translateY(-2px)}
.affekt__mark{display:inline-flex;color:var(--yellow);transition:transform .35s var(--ease)}
.affekt__word{font-weight:700;font-size:18px;letter-spacing:3px;text-transform:uppercase}
.affekt__desc{font-size:11px;letter-spacing:1.2px;text-transform:none;color:#7e848c;
  padding-left:11px;margin-left:3px;border-left:1px solid #2b2f35;max-width:230px;line-height:1.35}
.affekt__brand:hover .affekt__desc{color:#aab0b8}
.affekt__brand:hover .affekt__mark{transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){
  .affekt__brand,.affekt__mark{transition:none}
  .affekt__brand:hover{transform:none}
  .affekt__brand:hover .affekt__mark{transform:none}
}

/* ============================================================
   ===  ÚPRAVY 2026/06 – várka 2  =============================
   ============================================================ */

/* (3) HERO BADGE – badge zůstává čistý; značkový nápis „ANDĚL" je nově
   řešen jako samostatná plovoucí vrstva v hero (.hero__ghost) níže. */
.hero__mark{position:relative}

/* (13) DOTNAV – odstranit rušivý silný žlutý focus ring.
   Tenké ohraničení boxu (1px) i funkce zůstávají; přístupnost zachována
   decentním neutrálním focusem. */
.dotnav__trigger:focus{outline:none}
.dotnav__trigger:focus-visible{outline:1.5px solid rgba(255,255,255,.55);outline-offset:1px}

/* (1) MOBILNÍ HEADER – proporce dvou pruhů + viditelný hamburger v hlavní liště */
@media (max-width:680px){
  /* A) černý utility bar – o něco vyšší a čitelnější */
  .topbar__inner{padding:11px 16px;font-size:12.5px;gap:6px 18px}
  /* B) žlutá hlavní lišta – nižší a kompaktnější (logo zůstává čitelné) */
  .header__inner{min-height:56px;padding:7px 16px;gap:12px}
  .header .logo img{height:44px}
  .logo__text{padding-left:11px}
  .logo__text strong{font-size:14px;letter-spacing:.5px}
  .logo__text span{display:none}            /* podtitulek skryt → kompaktnější lišta */
  /* hamburger zpět do hlavičky – vpravo, dobře klikatelný a čitelný */
  .nav-toggle{display:flex !important;margin-left:auto;padding:9px 6px}
  .nav-toggle span{width:26px;height:3px;background:#000}
}
@media (max-width:380px){
  .header .logo img{height:40px}
  .header .logo__text strong{font-size:12.5px;letter-spacing:.3px}
}

/* =====================================================================
   ===  HERO – plovoucí značková vrstva „ANDĚL"  (várka 3) ============
   Prémiový industriální outline watermark: tři vrstvy (glow → outline →
   světelný sweep), jemné plování, světelný shimmer. Sedí pod hlavním
   obsahem (z-index pod .hero__inner) → „HOROLEZECKOU TECHNIKOU" zůstává
   plně čitelné. Responzivní; respektuje prefers-reduced-motion.
   ===================================================================== */
.hero__ghost{
  left:-3vw; right:auto; top:63%;
  font-family:'Anton',sans-serif;
  font-size:clamp(120px,12vw,210px);
  letter-spacing:8px; line-height:.9; white-space:nowrap;
  color:transparent;
  -webkit-text-stroke:1.6px rgba(255,255,255,.42);
  z-index:1; pointer-events:none; user-select:none;
  transform:translateY(-50%);
  animation:ghostFloat 16s ease-in-out infinite;
  will-change:transform;
}
.hero__ghost::before,
.hero__ghost::after{
  content:attr(data-text);
  position:absolute; left:0; top:0; white-space:nowrap;
  /* font-size / letter-spacing / line-height / font-family se dědí → přesný překryv */
}
/* vrstva 1 – měkký bílý glow (hloubka, napojení na bílý nadpis) */
.hero__ghost::before{
  color:rgba(255,255,255,.26);
  -webkit-text-stroke:0;
  filter:blur(13px);
  z-index:-1;
  animation:ghostGlow 9s ease-in-out infinite;
}
/* vrstva 3 – pomalý světelný přejezd přes outline */
.hero__ghost::after{
  color:transparent;
  -webkit-text-stroke:0;
  background-image:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.8) 50%,transparent 62%);
  -webkit-background-clip:text; background-clip:text;
  background-size:280% 100%; background-repeat:no-repeat;
  background-position:210% 0;
  animation:ghostSheen 9s ease-in-out infinite;
}
@keyframes ghostFloat{
  0%,100%{transform:translateY(-50%)}
  50%{transform:translateY(calc(-50% - 18px))}
}
@keyframes ghostGlow{
  0%,100%{opacity:.5}
  50%{opacity:1}
}
@keyframes ghostSheen{
  0%{background-position:210% 0}
  55%,100%{background-position:-120% 0}
}

/* TABLET – velká vrstva „LUKÁŠ ANDĚL" (menší, aby se vešla) */
@media (min-width:601px) and (max-width:1024px){
  .hero__ghost{left:-3vw; font-size:clamp(72px,10vw,140px); letter-spacing:6px; -webkit-text-stroke-width:1.5px}
}
/* DESKTOP – výraznější a prostorovější */
@media (min-width:1025px){
  .hero__ghost{left:-6vw; font-size:clamp(100px,9.4vw,178px); letter-spacing:9px; -webkit-text-stroke-width:1.7px}
}
/* Navazující „& SPOL." k velké vrstvě „LUKÁŠ ANDĚL" – tablet i desktop.
   Stejný outline styl, velká verzálka, jemně jiný prémiový zlatý odstín. */
.hero__ghost-amp{
  display:none;
  font-family:'Anton',sans-serif; text-transform:uppercase;
  line-height:.9; white-space:nowrap;
  color:transparent;
  -webkit-text-stroke:1.6px rgba(255,206,64,.62);   /* prémiové zlaté, jemně jiný odstín */
  text-shadow:0 0 26px rgba(255,198,40,.20);
  pointer-events:none; user-select:none;
}
/* TABLET – „& spol." citlivě vpravo dole u velké vrstvy (bez přetékání) */
@media (min-width:601px) and (max-width:1024px){
  .hero__ghost-amp{display:block; position:absolute; right:.04em; bottom:-.56em;
    font-size:.5em; letter-spacing:6px; -webkit-text-stroke-width:1.4px}
}
/* DESKTOP – „& SPOL." vedle napravo od „LUKÁŠ ANDĚL" (na stejné lince) */
@media (min-width:1025px){
  .hero__ghost-amp{display:block; position:absolute; left:100%; bottom:.12em; margin-left:.22em;
    font-size:.62em; letter-spacing:8px}
}

/* MOBIL / menší tablet – dekorativní vrstvu „ANDĚL" nezobrazujeme.
   Na úzkém hero by velký watermark zasahoval do nadpisu nebo by při
   zapnutém „omezit pohyb" působil staticky a rušivě. Hero zůstává čisté;
   prémiová plovoucí vrstva je vyhrazena pro desktop. */
@media (max-width:768px){
  .hero__ghost,
  .hero__ghost::before,
  .hero__ghost::after{display:none !important}
}
@media (prefers-reduced-motion:reduce){
  .hero__ghost,.hero__ghost::before,.hero__ghost::after{animation:none}
}

/* =====================================================================
   ===  MOBIL – plovoucí značkový podpis „ANDĚL" u badge  (várka 4) ===
   Ukotvený k pravému dolnímu rohu žlutého badge (do volného místa, kde
   NENÍ hlavní text). Outline s tmavým keylinem (čitelný na žluté i tmavé),
   zlatý glow (hloubka) a pomalý světelný přejezd. Jemné plování.
   Na desktopu se nezobrazuje – tam je velká vrstva .hero__ghost.
   ===================================================================== */
/* =====================================================================
   ===  HERO BRAND SIGNATURE  (várka 6)  ==============================
   Plovoucí značkový podpis ukotvený k pravému dolnímu rohu žlutého badge.
   Responzivně:  mobil = „ANDĚL" · tablet/desktop = „L. ANDĚL".
   Navazující foreground akcent „& spol." (script) tvoří s podpisem
   jeden vrstvený brand-signature celek. Velká vrstva „LUKÁŠ ANDĚL"
   (.hero__ghost) je vyhrazená pro desktop.
   ===================================================================== */
.hero__mark{overflow:visible}
.hero__mark-sig{
  display:none; position:absolute; right:3%; bottom:-.30em;
  font-family:'Anton',sans-serif; line-height:.9; white-space:nowrap;
  color:rgba(255,255,255,.16);
  -webkit-text-stroke:1.5px rgba(255,255,255,.92);
  filter:drop-shadow(0 2px 7px rgba(0,0,0,.55));
  transform:rotate(-3deg);
  pointer-events:none; user-select:none; z-index:3;
  animation:sigReveal 1.1s cubic-bezier(.22,.61,.36,1) both, sigFloat 8.5s ease-in-out 1.1s infinite; will-change:transform,opacity;
}
.hero__mark-sig::before{           /* bílý glow / hloubka */
  content:attr(data-text); position:absolute; left:0; top:0; white-space:nowrap;
  color:rgba(255,255,255,.65); -webkit-text-stroke:0; filter:blur(6px); z-index:-1;
  animation:sigGlow 6.5s ease-in-out infinite;
}
.hero__mark-sig::after{            /* světelný přejezd */
  content:attr(data-text); position:absolute; left:0; top:0; white-space:nowrap;
  color:transparent; -webkit-text-stroke:0;
  background-image:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.85) 50%,transparent 60%);
  -webkit-background-clip:text; background-clip:text;
  background-size:280% 100%; background-repeat:no-repeat; background-position:210% 0;
  animation:sigSheen 7s ease-in-out infinite;
}
/* „& spol." – signaturní akcent (script), navazuje vpravo dole */
.hero__sig-amp{
  position:absolute; right:-.06em; bottom:-.60em;
  font-family:'Caveat',cursive; font-weight:700;
  -webkit-text-stroke:0; color:var(--yellow);
  font-size:.56em; line-height:1; white-space:nowrap;
  transform:rotate(-2deg);
  text-shadow:0 2px 9px rgba(0,0,0,.6), 0 0 16px rgba(255,213,0,.4);
  z-index:4; opacity:0;
  animation:ampIn 1.1s cubic-bezier(.22,.61,.36,1) .8s both, ampFloat 8.5s ease-in-out 2s infinite;
}
/* výběr varianty podle zařízení */
@media (max-width:600px){
  .hero__mark-sig.sig--m{display:block; font-size:clamp(44px,16.5vw,100px); right:max(2%,14px); bottom:-.42em;
    color:#fff;                                       /* plná bílá výplň – navazuje na bílý nadpis VÝŠKOVÉ PRÁCE */
    -webkit-text-stroke:1.3px rgba(10,10,10,.8);      /* decentní jemný obrys */
    text-shadow:0 3px 12px rgba(0,0,0,.6);
    filter:none;
    /* (úkol) animace jen při prvním načtení – nápis jednou vystoupá do nejvyšší
       polohy a tam trvale zůstane (žádné nekonečné plování). */
    animation:sigReveal 1.1s cubic-bezier(.22,.61,.36,1) both,
              sigRiseOnce 1.6s cubic-bezier(.22,.61,.36,1) 1.1s forwards}
  .hero__mark-sig.sig--m::before{display:none}  /* (úkol) bílá záře / glow odebrána – čistší, prémiovější dojem */
  .hero__mark-sig.sig--m::after{display:none}        /* sheen na plné bílé výplni neuplatníme */
  /* (úkol 5) „& spol." – menší, čistší, technický, ve firemní žluté */
  .sig--m .hero__sig-amp{
    font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase;
    letter-spacing:1.5px; font-size:.3em; color:var(--yellow);
    -webkit-text-stroke:0; text-shadow:0 2px 7px rgba(0,0,0,.5);
    right:.02em; bottom:-.46em; transform:none;
    animation:ampInCalm 1s ease .9s both;
  }

  /* (úkol 1) Klidný statický podpis – bez přejezdu / blikání přes písmena, decentní obrys */
  .sig--m .sig-l{color:#fff; -webkit-text-stroke:1.3px rgba(10,10,10,.8)}
}
@keyframes ampInCalm{from{opacity:0; transform:translateY(7px)} to{opacity:1; transform:none}}
@media (min-width:601px){
  .hero__mark-sig.sig--lg{display:none}   /* na tabletu i PC nahrazeno velkou vrstvou LUKÁŠ ANDĚL */
}
/* Na PC (desktop) malý podpis „L. ANDĚL & spol." nezobrazujeme –
   na desktopu zůstává jen velká vrstva „LUKÁŠ ANDĚL" (.hero__ghost). */
@media (min-width:1025px){
  .hero__mark-sig.sig--lg{display:none}
}
@keyframes sigReveal{
  0%{opacity:0; transform:rotate(-3deg) translateY(14px) scale(.965)}
  60%{opacity:1}
  100%{opacity:1; transform:rotate(-3deg) translateY(0) scale(1)}
}
@keyframes sigFloat{
  0%{transform:rotate(-3deg) translateY(0)}
  28%{transform:rotate(-2.4deg) translateY(-5px)}
  58%{transform:rotate(-3.5deg) translateY(-8px)}
  82%{transform:rotate(-2.8deg) translateY(-3px)}
  100%{transform:rotate(-3deg) translateY(0)}
}
/* (úkol) Jednorázový výstup nápisu do nejvyšší polohy – konečný stav zůstává (forwards) */
@keyframes sigRiseOnce{
  0%{transform:rotate(-3deg) translateY(0)}
  62%{transform:rotate(-3.4deg) translateY(-10px)}
  100%{transform:rotate(-3deg) translateY(-8px)}
}
@keyframes sigGlow{0%,100%{opacity:.4}50%{opacity:.85}}
@keyframes sigSheen{0%{background-position:210% 0}55%,100%{background-position:-120% 0}}
@keyframes ampIn{0%{opacity:0;transform:rotate(-2deg) translate(8px,6px) scale(.9)}100%{opacity:1;transform:rotate(-2deg) translate(0,0) scale(1)}}
@keyframes ampFloat{
  0%{transform:rotate(-2deg) translateY(0)}
  50%{transform:rotate(-1.3deg) translateY(-6px)}
  100%{transform:rotate(-2deg) translateY(0)}
}
@media (prefers-reduced-motion:reduce){
  .hero__mark-sig,.hero__mark-sig::before,.hero__mark-sig::after,.hero__sig-amp{animation:none}
  .hero__mark-sig{opacity:1; transform:rotate(-3deg)}
  .hero__sig-amp{opacity:1}
  .sig--m .sig-l{animation:none; color:#fff}
}

/* (várka 5) Hierarchie hero nadpisu – „Tábor" jemně utlumené, aby oko
   vnímalo značku „Výškové práce Anděl" (bílý nadpis + plovoucí bílé ANDĚL). */
.hero__city{opacity:.6; font-weight:inherit}
@media (min-width:1025px){ .hero__city{opacity:1} }  /* PC výjimka: „TÁBOR" bílé */

/* =====================================================================
   ===  SEKČNÍ NAVIGACE nahoru/dolů (jen PC + tablet)  ================
   Prémiová žlutá tlačítka pro skok na předchozí/další hlavní sekci.
   ===================================================================== */
.secnav{position:fixed; right:18px; top:50%; transform:translateY(-50%);
  z-index:55; display:none; flex-direction:column; gap:12px}
@media (min-width:681px){ .secnav{display:flex} }
.secnav__btn{
  width:50px; height:50px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(12,14,17,.55); backdrop-filter:blur(7px) saturate(140%);
  -webkit-backdrop-filter:blur(7px) saturate(140%);
  color:var(--yellow); border:1.5px solid rgba(255,213,0,.7);
  cursor:pointer; box-shadow:0 8px 22px rgba(0,0,0,.4);
  transition:background .22s var(--ease), color .22s var(--ease),
             transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease)}
.secnav__btn svg{width:22px; height:22px; display:block}
.secnav__btn:hover{background:var(--yellow); color:#0a0a0a; border-color:var(--yellow);
  transform:translateY(-2px); box-shadow:0 12px 28px rgba(255,213,0,.28)}
.secnav__btn:active{transform:translateY(0)}
.secnav__btn:focus-visible{outline:2px solid var(--yellow); outline-offset:3px}
@media (min-width:1025px) and (max-width:1200px){ .secnav{right:12px} }
@media (prefers-reduced-motion:reduce){
  .secnav__btn{transition:none}
  .secnav__btn:hover{transform:none}
}

/* =====================================================================
   ===  VÁRKA 8  (úkoly 8–13)  =======================================
   ===================================================================== */

/* (10) Vybraní zákazníci – právní forma žlutě, prémiově zakomponovaná */
.clients__lf{color:inherit; font-weight:inherit; font-size:inherit; letter-spacing:inherit}

/* (9) Hvězdičky v hodnocení – větší, masivnější, prémiové, tenký černý obrys */
.revslide__score{display:flex; align-items:center; gap:.55em; flex-wrap:wrap; margin-bottom:8px}
.revstars{display:inline-block; font-size:1.95em; line-height:1; letter-spacing:2px;
  color:var(--yellow); -webkit-text-stroke:1.3px #0a0a0a;
  text-shadow:0 2px 6px rgba(0,0,0,.4); -webkit-font-smoothing:antialiased}
.revslide__pct{font-family:'Oswald',sans-serif; font-weight:700; letter-spacing:1px; color:#fff; font-size:1.05em}
@media (max-width:600px){ .revstars{font-size:1.5em; letter-spacing:1px} }

/* (8) CTA „Více informací" – na mobilu/tabletu atraktivnější, na desktopu zpět
   do původního stylu (plynule animovaný přechod). */
.btn--skoleni{transition:background .45s var(--ease), background-position .45s var(--ease),
  box-shadow .45s var(--ease), transform .25s var(--ease), color .35s var(--ease)}
@media (max-width:1024px){
  .btn--skoleni{
    background-image:linear-gradient(120deg,#ffd500 0%,#ffe863 50%,#ffd500 100%);
    background-size:220% 100%;
    box-shadow:0 10px 24px rgba(255,213,0,.3), 0 2px 8px rgba(0,0,0,.35);
    animation:skoleniShine 4.6s ease-in-out infinite;
  }
}
@keyframes skoleniShine{0%,100%{background-position:0 0}50%{background-position:100% 0}}

/* (úkol 1) Mobil – tlačítko „Více informací" sjednoceno s ostatními tlačítky u boxů
   (plochá značková žlutá, stejný stín, bez třpytivého gradientu a animace). */
@media (max-width:600px){
  .btn--skoleni{background-image:none; background-color:var(--yellow);
    box-shadow:0 4px 14px rgba(255,213,0,.3),0 1px 3px rgba(0,0,0,.18);
    animation:none}
}

/* (úkol 4) Mobil – „VÝŠKOVÉ PRÁCE" nepatrně větší a v čisté signální bílé,
   aby vedlo pozornost a vizuálně navazovalo na plovoucí bílý nápis ANDĚL.
   „TÁBOR" (.hero__city) ponecháno beze změny. Desktop neovlivněno. */
@media (max-width:600px){
  .hero__lead{font-size:1.06em; color:#fff}
}

/* (11) Mobil – jemný žlutý rámeček kolem fotek ve slideru boxu „Rizikové výškové práce" */
@media (max-width:680px){
  .cards .card:first-child .vps-slider{
    box-shadow:inset 0 0 0 2px rgba(255,213,0,.5), 0 8px 20px rgba(0,0,0,.3);
    border-radius:5px;
  }
}

/* (12) O společnosti – neviditelný rotator dvou obrázků: prémiové prolnutí + jemný zoom */
.onas-rot{position:relative; overflow:hidden; border-radius:8px}
.onas-rot__img{position:absolute; inset:0; background-size:contain; background-repeat:no-repeat;
  background-position:center; background-color:#0c0e11;
  opacity:0; transform:scale(1.05);
  transition:opacity 1.25s var(--ease), transform 7s linear; will-change:opacity,transform}
.onas-rot__img--a{opacity:1; transform:scale(1)}
.onas-rot.is-b .onas-rot__img--a{opacity:0; transform:scale(1.05)}
.onas-rot.is-b .onas-rot__img--b{opacity:1; transform:scale(1)}

/* (13) O společnosti – rohové grafiky kolem střídajících se obrázků odebrány */
#o-nas .instructor-photo::before,
#o-nas .instructor-photo::after{display:none !important}
@media (prefers-reduced-motion:reduce){
  .btn--skoleni{animation:none}
  .onas-rot__img{transition:opacity .6s var(--ease); transform:none !important}
}

/* ============================================================
   (úkol) Mobilní vylepšení – galerie boxů + reference zákazníků
   ============================================================ */

/* Úkol 2 – galerie hlavních boxů: na mobilu/jednosloupcovém zobrazení
   nahrazujeme pevnou výšku poměrem 4:3 (= poměr zdrojových fotografií),
   takže se na širších mobilech neořezávají hlavy a postavy. Desktop (3 sloupce) beze změny. */
@media (max-width:920px){
  .card__img{height:auto; aspect-ratio:4/3}
}

/* Úkol – „Vybraní zákazníci a realizace".
   DESKTOP (>=601px): plnohodnotné referenční karty s detailem (2 sloupce). */
.client > summary{list-style:none; outline:none}
.client > summary::-webkit-details-marker{display:none}
.cn-d{display:none}   /* varianty názvu reference: .cn-d = desktop, .cn-m = mobil */
@media (min-width:601px){
  .clients{margin-top:34px}
  .clients__label{display:flex; align-items:center; gap:12px; font-size:13px; letter-spacing:2.4px; color:#cfd4da; margin-bottom:22px}
  .clients__label::before{content:""; width:28px; height:2px; background:var(--yellow); flex:none}
  .clients__list{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; align-items:start; counter-reset:cl}
  .client{
    position:relative; counter-increment:cl;
    background:linear-gradient(158deg, rgba(255,255,255,.058), rgba(255,255,255,.018));
    border:1px solid rgba(255,255,255,.09);
    border-left:3px solid var(--yellow);
    border-radius:12px; overflow:hidden; padding:22px 24px;
    transition:transform .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease), background .28s var(--ease);
  }
  .client::before{
    content:counter(cl,decimal-leading-zero);
    position:absolute; top:14px; right:20px; pointer-events:none;
    font-family:'Anton',sans-serif; font-size:34px; line-height:1; letter-spacing:1px;
    color:rgba(255,213,0,.14);
  }
  .client:hover{
    transform:translateY(-4px); border-color:rgba(255,213,0,.5);
    box-shadow:0 18px 42px rgba(0,0,0,.42);
    background:linear-gradient(158deg, rgba(255,213,0,.07), rgba(255,255,255,.018));
  }
  .client > summary{
    display:block; cursor:default; position:relative;
    padding:0 58px 13px 0; margin-bottom:13px;
    border-bottom:1px solid rgba(255,255,255,.08);
    font-family:'Oswald',sans-serif; font-weight:600; font-size:18px; letter-spacing:.4px;
    color:#fff; text-align:left; line-height:1.25;
  }
  .client > summary::after{display:none}
  .client__detail{display:block; padding:0}
  .client__detail p{margin:0; color:#d6dbe1; font-size:14px; line-height:1.65}
  .client__detail p.client__spec{
    margin-top:15px; padding-top:14px; border-top:1px solid rgba(255,255,255,.08);
    color:#c3b994; font-size:13px; line-height:1.6;
  }
  .client__spec::before{
    content:"Specifika a bezpečnost"; display:table;
    font-family:'Oswald',sans-serif; font-weight:600; font-size:10px; letter-spacing:1.4px; text-transform:uppercase;
    color:#0a0a0a; background:var(--yellow); padding:3px 9px; border-radius:4px;
    margin-bottom:10px;
  }
  .cn-m{display:none}
  .cn-d{display:inline}
}

/* MOBIL (<=600px): prémiové rozklikávací boxy s detailem zakázky */
@media (max-width:600px){
  .clients__list{display:block; gap:0; counter-reset:cl}
  .client{
    counter-increment:cl;
    position:relative;
    background:linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
    border:1px solid rgba(255,255,255,.085);
    border-left:3px solid var(--yellow);
    border-radius:var(--radius);
    margin-bottom:12px; overflow:hidden;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.045), 0 6px 16px rgba(0,0,0,.22);
    transition:border-color .25s, background .25s, box-shadow .25s, transform .2s var(--ease);
  }
  .client[open]{
    background:linear-gradient(160deg, rgba(255,213,0,.075), rgba(255,255,255,.02));
    border-left-color:var(--yellow);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 14px 30px rgba(0,0,0,.36);
  }
  .client > summary{
    display:flex; align-items:center; justify-content:flex-start; gap:0;
    padding:16px 16px; cursor:pointer;
    font-family:'Oswald',sans-serif; font-weight:600; font-size:15.5px; letter-spacing:.4px;
    color:#eef0f2; text-align:left; line-height:1.28;
  }
  /* Industriální pořadové číslo reference + jemný oddělovač – působí jako datasheet, ne jako prostý seznam */
  .client > summary::before{
    content:counter(cl,decimal-leading-zero);
    flex:none; align-self:center;
    font-family:'Anton',sans-serif; font-weight:400; font-size:15px; line-height:1; letter-spacing:.5px;
    color:rgba(255,213,0,.62);
    margin-right:12px; padding-right:12px;
    border-right:1px solid rgba(255,255,255,.12);
  }
  .client[open] > summary::before{color:var(--yellow)}
  .client > summary .clients__lf{margin-left:.34em; color:#c9ccd1; font-weight:600}   /* právní označení hned vedle názvu */
  .client > summary::after{margin-left:auto}          /* ovládací +/− vždy u pravého okraje */
  .client > summary:hover{color:#fff}
  .client > summary::after{
    content:""; flex-shrink:0; width:26px; height:26px; border-radius:50%;
    border:1.5px solid rgba(255,255,255,.28);
    background-color:rgba(255,255,255,.04);
    background-image:
      linear-gradient(rgba(255,255,255,.82),rgba(255,255,255,.82)),
      linear-gradient(rgba(255,255,255,.82),rgba(255,255,255,.82));
    background-size:11px 1.6px, 1.6px 11px;
    background-position:center, center;
    background-repeat:no-repeat;
    transition:transform .3s var(--ease), border-color .25s, background-color .25s, opacity .25s;
  }
  .client[open] > summary::after{
    transform:rotate(135deg);
    border-color:var(--yellow);
    background-color:rgba(255,213,0,.14);
    background-image:
      linear-gradient(#ffd500,#ffd500),
      linear-gradient(#ffd500,#ffd500);
  }
  .client__detail{padding:2px 17px 16px; overflow:hidden}
  .client__detail p{margin:0; color:#d2d7dd; font-size:14px; line-height:1.62}
  .client__detail p.client__spec{
    margin-top:13px; padding-top:13px;
    border-top:1px solid var(--line);
    color:#b6ad99; font-size:13px;
  }
  .client__spec::before{
    content:"Specifika a bezpečnost"; display:block;
    font-family:'Oswald',sans-serif; font-weight:600; font-size:10px; letter-spacing:2px; text-transform:uppercase;
    color:var(--yellow); margin-bottom:6px; opacity:.9;
  }
}

/* ===== Úkol – Firemniprofil.cz zvýrazněný odkaz pod textem hodnocení ===== */
/* Nenápadné inline odkazy v textu hodnocení (bez tučného zvýraznění) */
.profil-inline,
.ext-records{
  color:#fff; font-weight:inherit; text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.34);
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.profil-inline:hover,
.ext-records:hover{color:var(--yellow); border-bottom-color:rgba(255,213,0,.6)}

/* ===== Úkol 5 – „Zobrazit více realizací": skryté boxy + prémiové tlačítko ===== */
.client--extra{display:none}
.clients.is-expanded .client--extra{display:block; animation:clientReveal .5s var(--ease) both}
@keyframes clientReveal{
  from{opacity:0; transform:translateY(14px)}
  to{opacity:1; transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){
  .clients.is-expanded .client--extra{animation:none}
}

/* MOBIL – reference 9–15 mají jemně odlišný prémiový vizuál, aby po rozkliknutí
   seznam opticky neztěžkl a působil jako kurátorovaný „prémiový" výběr. */
@media (max-width:600px){
  .client--extra{
    border:1px solid rgba(255,213,0,.2);
    border-left:3px solid transparent;
    background:
      linear-gradient(180deg, var(--yellow) 0%, var(--yellow-2) 100%) left/3px 100% no-repeat,
      linear-gradient(160deg, rgba(255,213,0,.07), rgba(255,255,255,.012));
    box-shadow:inset 0 1px 0 rgba(255,213,0,.15), 0 6px 16px rgba(0,0,0,.24);
  }
  .client--extra[open]{
    background:
      linear-gradient(180deg, var(--yellow) 0%, var(--yellow-2) 100%) left/3px 100% no-repeat,
      linear-gradient(160deg, rgba(255,213,0,.11), rgba(255,255,255,.02));
    box-shadow:inset 0 1px 0 rgba(255,213,0,.2), 0 14px 30px rgba(0,0,0,.38);
  }
  /* Číslování 01–15 je vizuálně jednotné – boxy 9–15 používají stejný styl čísla
     jako 1–8 (zlatý text s oddělovačem), liší se jen jemným pozadím a lištou. */
  .client--extra > summary::after{border-color:rgba(255,213,0,.4)}
}

.clients__more{display:flex; justify-content:center; margin-top:26px}
.btn-more{
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; gap:12px;
  padding:15px 30px; cursor:pointer;
  font-family:'Oswald',sans-serif; font-weight:600; font-size:15px; letter-spacing:1.6px; text-transform:uppercase;
  color:#fff; background:linear-gradient(150deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border:1px solid rgba(255,213,0,.32); border-radius:var(--radius-btn);
  box-shadow:0 8px 26px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease), color .25s var(--ease);
}
.btn-more::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(var(--yellow), var(--yellow-2));
}
.btn-more__glow{
  position:absolute; inset:-40% -10%; z-index:-1; pointer-events:none;
  background:radial-gradient(120px 60px at 50% 120%, rgba(255,199,44,.4), transparent 70%);
  opacity:0; transition:opacity .35s var(--ease);
}
.btn-more:hover{
  transform:translateY(-2px); border-color:rgba(255,213,0,.7); color:#fff;
  box-shadow:0 16px 38px rgba(0,0,0,.46), 0 0 0 1px rgba(255,213,0,.18), inset 0 1px 0 rgba(255,255,255,.08);
}
.btn-more:hover .btn-more__glow{opacity:1}
.btn-more:active{transform:translateY(0) scale(.99)}
.btn-more__chev{width:18px; height:18px; flex:none; transition:transform .35s var(--ease)}
.btn-more[aria-expanded="true"] .btn-more__chev{transform:rotate(180deg)}
.btn-more[aria-expanded="true"]{border-color:rgba(255,213,0,.55)}
@media (max-width:600px){
  .btn-more{width:100%; justify-content:center; padding:15px 22px; font-size:13.5px; letter-spacing:1.3px}
  .clients__more{margin-top:18px}
}

/* DESKTOP – nové rozbalené boxy mají odlišnou, prémiovou grafiku ladící s okolím */
@media (min-width:601px){
  .client--extra{
    background:linear-gradient(158deg, rgba(255,213,0,.07), rgba(255,255,255,.012));
    border-color:rgba(255,213,0,.22);
    border-left:3px solid transparent;
    border-image:linear-gradient(180deg, var(--yellow), var(--yellow-2)) 1;
  }
  .client--extra::before{color:rgba(255,213,0,.2)}   /* zvýrazněné pořadové číslo */
  .client--extra:hover{
    border-color:rgba(255,213,0,.6);
    box-shadow:0 18px 44px rgba(0,0,0,.46), 0 0 0 1px rgba(255,213,0,.12);
    background:linear-gradient(158deg, rgba(255,213,0,.11), rgba(255,255,255,.016));
  }

  /* „Skrýt / Zobrazit více realizací" – na PC ve sbaleném stavu přes celou šířku,
     v rozbaleném prémiově vyplní volnou buňku vedle boxu 15. */
  .clients__list .clients__more{grid-column:1 / -1; margin-top:14px}
  .clients.is-expanded .clients__list .clients__more{
    grid-column:auto; align-self:stretch; margin-top:0;
  }
  .clients.is-expanded .clients__list .clients__more .btn-more{
    width:100%; height:100%; min-height:170px;
    flex-direction:column-reverse; justify-content:center; gap:18px;
    padding:30px 26px; border-radius:12px;
    font-size:15px; letter-spacing:1.8px;
    border:1px solid rgba(255,213,0,.34);
    background:linear-gradient(158deg, rgba(255,213,0,.085), rgba(255,255,255,.014));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 16px 38px rgba(0,0,0,.42);
  }
  .clients.is-expanded .clients__list .clients__more .btn-more::before{display:none}
  .clients.is-expanded .clients__list .clients__more .btn-more__chev{
    width:52px; height:52px; padding:14px; border-radius:50%;
    border:1.5px solid rgba(255,213,0,.55);
    background:rgba(255,213,0,.1); color:var(--yellow);
    transition:transform .35s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
  }
  .clients.is-expanded .clients__list .clients__more .btn-more__label{font-size:15px; color:#fff}
  .clients.is-expanded .clients__list .clients__more .btn-more__glow{
    background:radial-gradient(160px 90px at 50% 110%, rgba(255,199,44,.4), transparent 70%);
  }
  .clients.is-expanded .clients__list .clients__more .btn-more:hover{
    transform:translateY(-3px); border-color:rgba(255,213,0,.7);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 24px 50px rgba(0,0,0,.5), 0 0 0 1px rgba(255,213,0,.16);
  }
  .clients.is-expanded .clients__list .clients__more .btn-more:hover .btn-more__chev{
    background:rgba(255,213,0,.2); border-color:var(--yellow); transform:translateY(-2px) rotate(180deg);
  }
}

/* (úkol) Prémiový proklik na sekci „Vybraní zákazníci a realizace" */
.ref-jump{
  display:inline-flex; align-items:center; gap:13px;
  max-width:100%; margin:22px 0 2px; padding:13px 20px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  text-decoration:none;
  transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.ref-jump:hover, .ref-jump:focus-visible{
  border-color:var(--yellow); transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(0,0,0,.32);
  background:linear-gradient(180deg, rgba(255,213,0,.07), rgba(255,255,255,.015));
}
.ref-jump__label{font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:.4px; color:#fff; font-size:15px}
.ref-jump__hint{color:#9aa0a6; font-size:12.5px}
.ref-jump__hint::before{content:"·"; margin-right:9px; color:var(--yellow)}
.ref-jump__chev{width:22px; height:22px; flex-shrink:0; margin-left:6px; color:var(--yellow); animation:refChev 1.8s ease-in-out infinite}
@keyframes refChev{0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)}}
@media (max-width:600px){
  .ref-jump{display:flex; gap:9px; padding:13px 16px}
  .ref-jump__label{font-size:14.5px}
  .ref-jump__hint{margin-left:0}
  .ref-jump__chev{margin-left:auto}
}
@media (prefers-reduced-motion:reduce){ .ref-jump__chev{animation:none} }

/* Úkol – ref-jump v hero: zobrazen na všech zařízeních, grafika přizpůsobená.
   PC/tablet: kompaktní inline odkaz; mobil: prémiový tmavý panel pod „Vybrané reference". */
@media (min-width:601px){
  .ref-jump--hero{
    display:inline-flex; margin:20px 0 2px; padding:13px 24px;
    background:rgba(10,10,10,.30);
    -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
    border:1px solid rgba(255,255,255,.14); border-left:3px solid var(--yellow);
  }
  .ref-jump--hero:hover, .ref-jump--hero:focus-visible{
    background:rgba(10,10,10,.42); border-color:var(--yellow); transform:translateY(-2px);
    box-shadow:0 14px 30px rgba(0,0,0,.30);
  }
}
@media (max-width:600px){
  .ref-jump--hero{
    width:100%; margin:20px 0 6px; padding:15px 17px; gap:11px;
    background:rgba(10,10,10,.44);
    -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
    border:1px solid rgba(255,255,255,.16);
    border-left:3px solid var(--yellow);
    border-radius:12px;
  }
  .ref-jump--hero:hover, .ref-jump--hero:focus-visible{
    background:rgba(10,10,10,.54);
    border-color:var(--yellow);
  }
  .ref-jump--hero .ref-jump__label{font-size:15px}
  .ref-jump--hero .ref-jump__chev{margin-left:auto}
}

/* Blokové zarovnání vybraných odstavců (zadání) */
.is-justify{text-align:justify;text-align-last:left;-webkit-hyphens:none;hyphens:none}

/* Hero podnadpis na mobilu: povolit dělení slov (jazyk cs), aby justify
   netvořil velké mezery – dlouhé slovo se raději rozdělí na konci řádku. */
@media (max-width:600px){
  .hero__sub.is-justify{
    -webkit-hyphens:auto;
    -ms-hyphens:auto;
    hyphens:auto;
  }
  /* Zvýraznění hero textu na mobilu: světlejší barva + jemný stín pro
     čitelnost přes fotku + mírně větší, vyladěné písmo. */
  .hero__sub{
    font-size:17.5px;
    line-height:1.6;
    color:#fff;
    text-shadow:0 1px 2px rgba(0,0,0,.55), 0 2px 14px rgba(0,0,0,.28);
  }
}

/* ==========================================================================
   POPTÁVKOVÝ FORMULÁŘ – honeypot, chybová hláška, prémiový děkovný box
   ========================================================================== */

/* Honeypoty – neviditelné pro uživatele, dostupné pro roboty */
.hp-field{
  position:absolute !important;
  left:-9999px !important;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
}

/* Nenápadná chybová hláška ve formuláři */
.form__error{
  margin:2px 0 0;
  padding:12px 16px;
  border-radius:var(--radius);
  background:rgba(255,80,80,.1);
  border:1px solid rgba(255,120,120,.35);
  color:#ffd9d9;
  font-family:'Inter',sans-serif;
  font-size:14px;
  line-height:1.5;
}
.form__error a{color:var(--yellow);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* Prémiový děkovný box */
.form-success{
  margin-top:32px;
  padding:clamp(30px,4vw,48px);
  text-align:center;
  background:
    radial-gradient(120% 120% at 50% -20%, rgba(255,199,44,.12) 0%, rgba(255,199,44,0) 55%),
    linear-gradient(160deg, #191e25 0%, #0e1115 100%);
  border:1px solid rgba(255,199,44,.28);
  border-radius:var(--radius);
  box-shadow:0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
  animation:formSuccessIn .5s var(--ease) both;
}
.form-success .eyebrow--yellow{margin-bottom:10px;padding-left:0}
.form-success .eyebrow--yellow::before{display:none}

.form-success__icon{
  width:68px;height:68px;
  margin:0 auto 18px;
  display:flex;align-items:center;justify-content:center;
  color:var(--black);
  background:var(--yellow);
  border-radius:50%;
  box-shadow:0 8px 24px rgba(255,199,44,.4), 0 0 0 8px rgba(255,199,44,.12);
  animation:formSuccessPop .55s var(--ease) .08s both;
}
.form-success__icon svg{width:34px;height:34px}

.form-success__title{
  font-family:'Anton','Oswald',sans-serif;
  font-weight:400;
  letter-spacing:.5px;
  line-height:1.06;
  text-transform:uppercase;
  color:#fff;
  font-size:clamp(26px,3.4vw,40px);
  margin:0 0 14px;
}
.form-success__text{
  font-family:'Inter',sans-serif;
  font-size:17px;
  line-height:1.6;
  color:#cfd2d6;
  max-width:520px;
  margin:0 auto 8px;
}
.form-success__text--muted{color:var(--muted);font-size:15px;margin-bottom:0}
.form-success__cta{
  margin-top:26px;
  justify-content:center;
  flex-wrap:wrap;
}
.form-success .btn--ghost{color:#fff;border-color:rgba(255,255,255,.45)}
.form-success .btn--ghost:hover{background:#fff;color:var(--black);border-color:#fff}

@keyframes formSuccessIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes formSuccessPop{
  0%{transform:scale(.4);opacity:0}
  60%{transform:scale(1.08)}
  100%{transform:scale(1);opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .form-success,.form-success__icon{animation:none}
}

/* Hero podnadpis – přepínání desktop/mobil varianty (blokově).
   Desktop: varianta se zarovnáním do bloku. Mobil (≤600px): varianta
   bez blokového zarovnání s vlastním, kratším textem. */
.hero__sub--mob{display:none}
@media (max-width:600px){
  .hero__sub--desk{display:none}
  .hero__sub--mob{display:block}
}


/* ============================================================
   ===  ÚPRAVY 2026/07 – várka 3  =============================
   ============================================================ */

/* (1) HERO H1 – žlutý blok je nyní dvouřádkový („VÝŠKOVÉ PRÁCE /
   HLOUBKOVÉ PRÁCE"). Jako inline-block s více řádky přerůstal svůj
   řádkový box a překrýval bílý první řádek nadpisu. Řešeno blokovým
   boxem (display:table), který se sám zalomí pod první řádek a
   šířkou se smrští na nejdelší slovo. Podpis (.hero__mark-sig) je
   nadále kotven k pravému dolnímu rohu tohoto boxu. */
.hero__mark{
  display:table; width:auto; max-width:100%;
  margin-top:.10em; padding:.02em 12px .09em;
  line-height:1.0;
}
@media (max-width:600px){
  .hero__mark{margin-top:.06em; padding:.02em 10px .08em}
}

/* (2) HORNÍ LIŠTA – prémiovější, výraznější, ale stále žlutá.
   Řešeno: jemný vertikální přechod ve žluté (kov, ne plochý plakát),
   světelná hrana nahoře, pevná černá linka dole jako grafická kotva. */
.header{
  background:linear-gradient(180deg,#FFDF3D 0%,#FFD500 46%,#F0C000 100%);
  border-bottom:3px solid var(--black);
  box-shadow:0 16px 34px -20px rgba(0,0,0,.55);
}
.header::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:rgba(255,255,255,.55); pointer-events:none; z-index:1;
}
.header.header--compact{
  box-shadow:0 18px 30px -22px rgba(0,0,0,.65);
}
.logo__text strong{letter-spacing:1.6px}

@media (min-width:1025px){
  /* Písmo: menší, hustší, techničtější. Menu má působit jako přístrojový
     panel, ne jako řádek odkazů. */
  .nav{gap:3px; font-size:clamp(12.5px,.3vw + 8.6px,13.5px); font-weight:600; letter-spacing:1.15px}

  .nav a{
    padding:10px 14px; gap:9px; border-radius:3px;
    color:var(--black); isolation:isolate;
    transition:color .22s var(--ease), transform .22s var(--ease);
  }

  /* Rušivé šedé „čárky\" mezi položkami pryč – nahrazeny černým čipem,
     který na hover vyjede zespodu. Text i ikona se převrátí do žluté. */
  .nav a::before,
  .nav a:not(:first-child)::before{
    content:""; position:absolute; left:0; right:0; top:0; bottom:0;
    width:auto; height:auto; background:var(--black); border-radius:3px;
    transform:scaleY(0); transform-origin:bottom; opacity:1; z-index:-1;
    box-shadow:0 8px 18px -8px rgba(0,0,0,.7);
    transition:transform .26s cubic-bezier(.22,.61,.36,1);
  }
  .nav a:hover,
  .nav a:focus-visible{background:transparent; color:var(--yellow); transform:translateY(-1px)}
  .nav a:hover::before,
  .nav a:focus-visible::before{transform:scaleY(1); opacity:1}
  .nav a:hover .nav__ico{opacity:1; transform:none}
  .nav a::after{display:none}   /* podtržení nahrazeno čipem */

  /* Ikony: v klidu utlumené, aby nesoupeřily s textem; na hover plné. */
  .nav__ico{width:1.15em; height:1.15em; opacity:.55}

  /* Jemné oddělení menu od loga – tenká svislá linka místo prázdna. */
  .nav::before{
    content:""; align-self:center; width:1px; height:22px;
    background:rgba(0,0,0,.18); margin-right:14px;
  }
}
@media (min-width:681px) and (max-width:1024px){
  .nav__ico{opacity:.6}
  .nav a:hover .nav__ico{opacity:1}
}

/* (3) PLOVOUCÍ VRSTVA – nově „ŠKOLENÍ / REVIZE OOPP".
   Nápis je delší než původní „& SPOL.", proto mírně stáhnutý tracking,
   aby na užším desktopu nepřetékal mimo hero. */
@media (min-width:1025px){
  .hero__ghost-amp{font-size:.5em; letter-spacing:5px; margin-left:.26em}
}
@media (min-width:601px) and (max-width:1024px){
  .hero__ghost-amp{font-size:.42em; letter-spacing:4px}
}
/* Mobil – podpis má 7 písmen místo 5, proto o něco menší kresba. */
@media (max-width:600px){
  .hero__mark-sig.sig--m{font-size:clamp(34px,12.6vw,76px)}
  .sig--m .hero__sig-amp{font-size:.34em; letter-spacing:1.2px}
}

/* (4) LOGO – nápis vedle loga se střídá: „SLUŽBY HOROLEZCŮ" ⇄ „VÝŠKOVÉ PRÁCE ANDĚL".
   Řešeno gridem (obě varianty sdílí jednu buňku), takže šířka lišty je
   dána delším z nápisů a nikdy neposkakuje. Čistě CSS, bez JS. */
.logo__rot{
  display:grid; position:relative;
}
.logo__rot > span{
  grid-area:1 / 1; white-space:nowrap;
  opacity:0; will-change:opacity,transform;
  animation:logoSwapB 11s cubic-bezier(.22,.61,.36,1) infinite;
}
.logo__rot > .logo__rot-a{animation-name:logoSwapA}
@keyframes logoSwapA{
  0%,44%   {opacity:1; transform:translateY(0)}
  49%,95%  {opacity:0; transform:translateY(-5px)}
  100%     {opacity:1; transform:translateY(0)}
}
@keyframes logoSwapB{
  0%,44%   {opacity:0; transform:translateY(5px)}
  49%,95%  {opacity:1; transform:translateY(0)}
  100%     {opacity:0; transform:translateY(5px)}
}
@media (prefers-reduced-motion:reduce){
  .logo__rot > span{animation:none}
  .logo__rot > .logo__rot-a{opacity:1}
  .logo__rot > .logo__rot-b{display:none}
}

/* ============================================================
   ===  ÚPRAVY 2026/07 – várka 4  =============================
   HERO – nová fotografie (Lukáš Anděl ve visu v komíně EDĚ Dětmarovice)
   ============================================================ */

/* Obrázek se nově načítá z CSS (ne z inline stylu), aby šlo pro každé
   zobrazení zvolit jiný výřez i jiné ohnisko. Snímek je radiálně
   komponovaný: světelné ústí šachty ≈ 56 % / 21 %, lezec ≈ 49 % / 70 %.
   Cílem je udržet v záběru obojí, na každém poměru stran jinak. */
.hero__bg{
  background-image:url('../img/lukas-andel-prace-ve-visu-v-komine-elektrarna-detmarovice.webp?v=1');
  background-size:cover;
  background-repeat:no-repeat;
  background-position:55% 34%;
  filter:contrast(1.06) saturate(1.06);   /* žádné odbarvení – snímek je zlatočerný záměrně */
}

/* Ultraširoké monitory – ořez jde do výšky, ohnisko posuneme vzhůru,
   aby světelné ústí nevypadlo z kompozice. */
@media (min-width:1600px){
  .hero__bg{background-position:55% 30%}
}
/* Desktop 1025–1599 px – vyvážený střed mezi ústím a lezcem. */
@media (min-width:1025px) and (max-width:1599px){
  .hero__bg{background-position:55% 36%}
}
/* Tablet – ořez jde do šířky, ohnisko vystředíme vodorovně. */
@media (min-width:681px) and (max-width:1024px){
  .hero__bg{background-position:52% 42%}
}
/* Mobil – vlastní portrétní výřez okolo lezce a ústí komína.
   Panoramatický snímek by se na úzkém displeji oříznul o obě strany
   kompozice a zbyla by prázdná stěna komínového průduchu. */
@media (max-width:680px){
  .hero__bg{
    background-image:url('../img/lukas-andel-prace-ve-visu-v-komine-elektrarna-detmarovice-mobil.webp?v=1');
    background-position:45% 50%;
  }
}

/* PŘEKRYV – původní plošné ztmavení by zlatou kresbu utopilo.
   Nově: silný scrim jen pod textem (vlevo), pravá strana se světelným
   ústím zůstává čitelná; dole klasický přechod do černé kvůli USP liště. */
.hero__overlay{
  background:
    linear-gradient(90deg,
      rgba(10,10,10,.82) 0%,
      rgba(10,10,10,.62) 38%,
      rgba(10,10,10,.20) 68%,
      rgba(10,10,10,.34) 100%),
    linear-gradient(180deg,
      rgba(10,10,10,.28) 0%,
      rgba(10,10,10,.34) 52%,
      rgba(10,10,10,.86) 100%);
}
@media (max-width:1024px){
  /* text je přes celou šířku – vodorovný scrim nahradíme svislým */
  .hero__overlay{
    background:
      linear-gradient(180deg,
        rgba(10,10,10,.42) 0%,
        rgba(10,10,10,.58) 45%,
        rgba(10,10,10,.88) 100%);
  }
}

/* ============================================================
   ===  ÚPRAVY 2026/07 – várka 5  =============================
   ============================================================ */

/* (1) PLOVOUCÍ VRSTVA „ŠKOLENÍ & REVIZE OOPP"
   Původní ukotvení (left:-3vw) záměrně uřezávalo první písmeno značky.
   U slova ŠKOLENÍ to není stylizace, ale chyba – musí být čitelné celé.
   Vrstva se proto posouvá do plochy a písmo se mírně stahuje, aby se
   i s doplněným ampersandem vešla na šířku hero bez ořezu. */
.hero__ghost{left:1.5vw}
@media (min-width:1025px){
  .hero__ghost{font-size:clamp(112px,10.6vw,196px); letter-spacing:6px}
  .hero__ghost-amp{font-size:.48em; letter-spacing:4px; margin-left:.22em}
}
@media (min-width:601px) and (max-width:1024px){
  .hero__ghost{font-size:clamp(78px,10.8vw,118px); letter-spacing:5px}
  .hero__ghost-amp{font-size:.4em; letter-spacing:3px}
}

/* (2) H2 v sekci Služby – na mobilu jen jádro nadpisu, od tabletu celý.
   Dlouhý výčet by na telefonu zabral čtyři řádky a odsunul obsah. */
.h2__tail{display:inline}
@media (max-width:680px){
  .h2__tail{display:none}
}

/* ============================================================
   ===  ÚPRAVY 2026/07 – várka 6  =============================
   ============================================================ */

/* (1) LOGO – zpět na průhledné pozadí.
   Logo mělo natvrdo `background:var(--yellow)`, což dávalo smysl, dokud
   byla lišta plochá. Po nasazení přechodu (várka 2) se z plné žluté stal
   viditelný obdélník, který se s pozadím lišty nesešel v odstínu.
   PNG je průhledné, stačí ho nechat prosvítat. */
.logo,
.logo img,
.header .logo img{background:transparent}

/* (2) STŘÍDAJÍCÍ SE NÁPIS – oprava skrytí.
   Pravidlo `.logo__text span{display:none}` (podtitulek loga) chytalo
   i obě varianty nápisu uvnitř <strong>. Přebíjíme ho adresně a zároveň
   rušíme jeho typografii, aby varianty dědily styl nadpisu. */
.logo__text .logo__rot > span{
  display:block;
  font:inherit; color:inherit;
  letter-spacing:inherit; text-transform:inherit;
}

/* (3) HORNÍ MENU – čitelnější a výraznější.
   Text byl subtilní: 13,5 px / 600. Na sytě žluté ploše se drobné písmo
   ztrácí i při plné černi. Zvětšujeme, přitvrzujeme řez a zesilujeme
   ikony; tracking a padding zároveň stahujeme, aby se 8 položek vešlo. */
@media (min-width:1025px){
  .nav{
    gap:2px;
    font-size:clamp(12.8px, .313vw + 9.59px, 14.6px);
    font-weight:700;
    letter-spacing:.9px;
  }
  .nav a{padding:10px 12px; gap:8px}
  .nav__ico{width:1.32em; height:1.32em; opacity:.8}
  .nav a:hover .nav__ico,
  .nav a:focus-visible .nav__ico{opacity:1}
}
@media (min-width:681px) and (max-width:1024px){
  .nav{font-weight:700; letter-spacing:.6px}
  .nav__ico{opacity:.8}
}

/* (4) AI AUDITOR CEN – prémiový blok v žluté sekci Ceník. */
.aicalc{
  position:relative; overflow:hidden; isolation:isolate;
  display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center;
  margin:34px 0 30px; padding:30px 32px;
  background:linear-gradient(135deg,#101216 0%,#191c22 58%,#101216 100%);
  border:1px solid rgba(255,213,0,.28);
  border-radius:6px;
  box-shadow:0 26px 50px -30px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.06);
  color:#e9e9e9;
}
.aicalc::before{                       /* žlutý akcent na levé hraně */
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--yellow),var(--yellow-2));
}
.aicalc__glow{                          /* měkká záře za textem */
  position:absolute; z-index:-1; left:-8%; top:-60%;
  width:52%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(255,213,0,.16) 0%,transparent 68%);
  pointer-events:none;
}
.aicalc__badge{
  display:inline-flex; align-items:center; gap:7px;
  font-family:'Oswald',sans-serif; font-weight:600; font-size:11.5px;
  letter-spacing:2px; text-transform:uppercase; color:var(--yellow);
  border:1px solid rgba(255,213,0,.38); border-radius:100px;
  padding:5px 12px; margin-bottom:14px;
}
.aicalc__badge .ico{width:1.1em; height:1.1em}
.aicalc h3{font-size:clamp(22px,2vw,30px); color:#fff; margin:0 0 10px}
.aicalc p{margin:0 0 14px; color:#c3c7cc; max-width:62ch; font-size:15.5px}
.aicalc__pts{list-style:none; margin:0; padding:0; display:grid; gap:7px}
.aicalc__pts li{position:relative; padding-left:22px; font-size:14px; color:#d7dade}
.aicalc__pts li::before{
  content:""; position:absolute; left:0; top:7px; width:11px; height:11px;
  background:var(--yellow);
  clip-path:polygon(14% 44%,0 65%,40% 100%,100% 16%,86% 0,38% 68%);
}
.aicalc__cta{display:flex; flex-direction:column; align-items:stretch; gap:10px; text-align:center}
.aicalc__btn{white-space:nowrap}
.aicalc__url{
  font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:.6px;
  color:#7d838b; word-break:break-all;
}
@media (max-width:860px){
  .aicalc{grid-template-columns:1fr; gap:20px; padding:26px 22px}
  .aicalc__cta{align-items:stretch}
  .aicalc__btn{width:100%}
}

/* (5) AI AUDITOR – tenký pruh nad poptávkovým formulářem. */
.aicalc-slim{
  display:flex; align-items:center; gap:14px;
  margin:0 0 30px; padding:14px 18px;
  border:1px solid rgba(255,213,0,.30); border-left:3px solid var(--yellow);
  border-radius:5px; background:rgba(255,213,0,.06);
  color:#e6e6e6; text-decoration:none;
  transition:background .22s var(--ease), transform .22s var(--ease), border-color .22s var(--ease);
}
.aicalc-slim:hover{background:rgba(255,213,0,.12); border-color:rgba(255,213,0,.55); transform:translateY(-1px)}
.aicalc-slim__ico{width:22px; height:22px; color:var(--yellow); flex:none}
.aicalc-slim__txt{font-size:14.5px; line-height:1.45}
.aicalc-slim__txt strong{color:var(--yellow); font-weight:600}
.aicalc-slim__go{margin-left:auto; color:var(--yellow); font-size:20px; line-height:1; flex:none}
@media (max-width:560px){
  .aicalc-slim{align-items:flex-start}
  .aicalc-slim__go{display:none}
}

/* (6) Odkazy uvnitř žluté sekce Ceník – čitelné na žlutém podkladu. */
.section--yellow a:not(.btn){
  color:#0a0a0a; font-weight:600;
  text-decoration:underline; text-decoration-thickness:2px;
  text-underline-offset:3px; text-decoration-color:rgba(10,10,10,.35);
  transition:text-decoration-color .2s var(--ease);
}
.section--yellow a:not(.btn):hover{text-decoration-color:#0a0a0a}

/* (7) Kredit k fotografiím ve spodní liště patičky. */
.footer__credit{
  display:block; margin-top:6px;
  font-size:12px; line-height:1.5; color:rgba(255,255,255,.42);
  max-width:74ch;
}

/* (8) Logo v patičce je odkaz na sesterský web Výškové práce Anděl. */
.footer__logo-link{
  display:inline-block; line-height:0; border-radius:4px;
  transition:opacity .22s var(--ease), transform .22s var(--ease);
}
.footer__logo-link:hover{opacity:.82; transform:translateY(-1px)}
.footer__logo-link:focus-visible{outline:2px solid var(--yellow); outline-offset:4px}

/* (9) AI auditor – pruh na světlé sekci (Konkrétní činnosti).
   Původně stál nad poptávkovým formulářem, kde odváděl už rozhodnuté
   zájemce pryč. Teď sedí na konci výčtu prací, tedy ve fázi, kdy si
   člověk teprve zjišťuje, co potřebuje a co to bude stát. */
.section:not(.section--dark):not(.section--cta) .aicalc-slim{
  margin:34px 0 0;
  background:rgba(10,10,10,.04);
  border-color:rgba(10,10,10,.14);
  border-left-color:var(--yellow);
  color:#2a2d31;
}
.section:not(.section--dark):not(.section--cta) .aicalc-slim:hover{
  background:rgba(255,213,0,.16);
  border-color:rgba(10,10,10,.28);
  border-left-color:var(--yellow);
}
.section:not(.section--dark):not(.section--cta) .aicalc-slim__txt strong{color:#0a0a0a}
.section:not(.section--dark):not(.section--cta) .aicalc-slim__ico,
.section:not(.section--dark):not(.section--cta) .aicalc-slim__go{color:#0a0a0a}

/* ============================================================
   ===  ÚPRAVY 2026/07 – várka 7  =============================
   PLOVOUCÍ REKLAMA – AI auditor cen výškových prací
   ------------------------------------------------------------
   Zásady: jen desktop (≥1280 px, kde je volný okraj), levý dolní
   roh (pravý drží sekční navigace), poloprůhledné sklo, plynulý
   nájezd, zavírací křížek a automatické ustoupení nad poptávkovým
   formulářem i nad velkým blokem v ceníku, aby se nepřekrývaly
   a aby reklama neodváděla rozhodnutého zákazníka.
   ============================================================ */
.adfloat{display:none}

@media (min-width:1280px){
  .adfloat{
    display:block; position:fixed; left:26px; bottom:26px; z-index:58;
    width:344px; padding:22px 22px 20px; border-radius:10px;
    background:linear-gradient(158deg,rgba(18,20,25,.80) 0%,rgba(10,11,14,.90) 100%);
    -webkit-backdrop-filter:blur(16px) saturate(1.25);
    backdrop-filter:blur(16px) saturate(1.25);
    border:1px solid rgba(255,213,0,.22);
    box-shadow:0 30px 60px -28px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.07);
    color:#e7e9ec; overflow:hidden; isolation:isolate;
    opacity:0; transform:translateY(22px) scale(.97);
    pointer-events:none; visibility:hidden;
    transition:opacity .5s var(--ease), transform .55s cubic-bezier(.22,.61,.36,1), visibility .55s;
    will-change:opacity,transform;
  }
  .adfloat.is-in{opacity:1; transform:none; pointer-events:auto; visibility:visible}
  .adfloat:hover{border-color:rgba(255,213,0,.42)}

  .adfloat__accent{
    position:absolute; left:0; right:0; top:0; height:2px;
    background:linear-gradient(90deg,transparent,var(--yellow) 22%,#FFE45C 50%,var(--yellow) 78%,transparent);
    opacity:.85;
  }

  .adfloat__close{
    position:absolute; top:10px; right:10px; width:28px; height:28px;
    display:grid; place-items:center; padding:0; cursor:pointer;
    background:transparent; border:0; border-radius:5px;
    color:rgba(255,255,255,.42); transition:color .2s var(--ease), background .2s var(--ease);
  }
  .adfloat__close svg{width:15px; height:15px}
  .adfloat__close:hover{color:#fff; background:rgba(255,255,255,.08)}
  .adfloat__close:focus-visible{outline:2px solid var(--yellow); outline-offset:1px}

  .adfloat__head{display:flex; align-items:center; gap:14px; margin-bottom:14px}
  .adfloat__logo{position:relative; flex:none; width:52px; height:52px; display:block}
  .adfloat__logo svg{position:relative; z-index:1; width:100%; height:100%; display:block}
  .adfloat__pulse{
    position:absolute; inset:-6px; border-radius:50%; z-index:0;
    background:radial-gradient(circle,rgba(255,213,0,.30) 0%,transparent 66%);
    animation:adPulse 3.4s ease-in-out infinite;
  }
  @keyframes adPulse{0%,100%{opacity:.45; transform:scale(.94)} 50%{opacity:1; transform:scale(1.06)}}

  .adfloat__eyebrow{
    display:block; font-family:'Oswald',sans-serif; font-size:10.5px; font-weight:600;
    letter-spacing:2.4px; text-transform:uppercase; color:var(--yellow); margin-bottom:5px;
  }
  .adfloat__title{
    margin:0; font-family:'Anton',sans-serif; font-weight:400; text-transform:uppercase;
    font-size:19px; line-height:1.08; letter-spacing:.4px; color:#fff;
  }
  .adfloat__text{margin:0 0 16px; font-size:13.5px; line-height:1.55; color:#b9bec4}

  .adfloat__cta{
    display:flex; align-items:center; justify-content:center; gap:9px;
    padding:12px 16px; border-radius:4px;
    font-family:'Oswald',sans-serif; font-weight:600; font-size:13.5px;
    letter-spacing:1.4px; text-transform:uppercase;
    background:var(--yellow); color:#0a0a0a; text-decoration:none;
    transition:background .2s var(--ease), transform .2s var(--ease), box-shadow .25s var(--ease);
  }
  .adfloat__cta span{transition:transform .25s var(--ease)}
  .adfloat__cta:hover{background:#FFE45C; transform:translateY(-1px); box-shadow:0 12px 26px -14px rgba(255,213,0,.9)}
  .adfloat__cta:hover span{transform:translateX(4px)}
  .adfloat__cta:focus-visible{outline:2px solid #fff; outline-offset:2px}
}

/* Uživatel s omezením pohybu: žádný nájezd, žádné pulzování. */
@media (prefers-reduced-motion:reduce){
  .adfloat{transition:opacity .01ms; transform:none}
  .adfloat.is-in{transform:none}
  .adfloat__pulse{animation:none}
  .adfloat__cta span{transition:none}
}

/* ============================================================
   ===  ÚPRAVY 2026/07 – várka 8  =============================
   O NÁS – levý sloupec: z prázdného 340px pole s logem
   na důkazní panel (fotografie + identifikace + tvrdá fakta).
   ============================================================ */

/* Sekce má sloupce srovnat nahoru, ne na střed – jinak vznikne
   nahoře i dole hluchý pás. */
#o-nas .split{align-items:start; gap:56px}

.onas-panel{
  display:grid; gap:14px;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
.onas-panel figure{margin:0; position:relative; overflow:hidden; border-radius:6px;
  border:1px solid var(--line); background:#0c0e11}
.onas-panel img{display:block; width:100%; height:100%; object-fit:cover}

/* --- hlavní fotografie přes celou šířku sloupce --- */
.onas-panel__hero{grid-column:1 / -1; aspect-ratio:16 / 11}
.onas-panel__hero::after{               /* scrim, aby byl popisek čitelný */
  content:""; position:absolute; inset:auto 0 0 0; height:58%;
  background:linear-gradient(180deg,transparent,rgba(6,7,9,.92));
  pointer-events:none;
}
.onas-panel__hero figcaption{
  position:absolute; left:20px; right:20px; bottom:16px; z-index:2;
  display:flex; flex-direction:column; gap:3px;
}
.onas-panel__hero figcaption strong{
  font-family:'Anton',sans-serif; font-weight:400; text-transform:uppercase;
  font-size:21px; letter-spacing:.6px; color:#fff; line-height:1;
}
.onas-panel__hero figcaption span{font-size:12.5px; color:#b3b8be; letter-spacing:.2px}

@media (max-width:1024px){
  .onas-panel{max-width:560px; margin-inline:auto}
  .onas-panel__hero{aspect-ratio:1 / 1}
}


/* ============================================================
   ===  ÚPRAVY 2026/07 – várka 11  ============================
   MOBILNÍ REVIZE – oprava přetečení a doladění drobných rozměrů.
   ============================================================ */

/* (1) OPRAVA: tlačítko „Spustit AI auditor cen" mělo natvrdo nowrap
   a přebíjelo globální pravidlo `.btn{white-space:normal}` (≤560 px).
   Na 320px displeji přetékalo z bloku o ~80 px. Nowrap nyní platí
   jen tam, kde je na jeden řádek dost místa. */
.aicalc__btn{white-space:normal}
@media (min-width:561px){
  .aicalc__btn{white-space:nowrap}
}
@media (max-width:560px){
  .aicalc__btn{padding:15px 18px; font-size:15px; letter-spacing:1.2px; line-height:1.25}
}

/* (2) Adresa nástroje pod tlačítkem – ať se zalomí kdekoli, ale hezky. */
.aicalc__url{word-break:normal; overflow-wrap:anywhere; line-height:1.5}

/* (3) Popisek pod fotografií zakladatelů – na úzkém displeji menší,
   aby scrim nepohltil polovinu snímku. */
@media (max-width:520px){
  .onas-panel__hero figcaption{left:14px; right:14px; bottom:13px}
  .onas-panel__hero figcaption strong{font-size:17px; line-height:1.05}
  .onas-panel__hero figcaption span{font-size:11.5px; line-height:1.4}
  .onas-panel__hero::after{height:66%}
}

/* (4) Pruh AI auditoru – na nejužších displejích kompaktněji. */
@media (max-width:400px){
  .aicalc-slim{padding:13px 14px; gap:11px}
  .aicalc-slim__txt{font-size:13.5px}
  .aicalc-slim__ico{width:20px; height:20px}
}

/* (5) Plovoucí reklama se na mobilu ani nevykresluje – pojistka. */
@media (max-width:1279px){
  .adfloat{display:none !important}
}

/* ============================================================
   ===  ÚPRAVY 2026/07 – várka 12  ============================
   Samostatný blok „VÝŠKOVÉ PRÁCE ANDĚL | …" v sekci Služby.
   Značka je odkazem na sesterský web, v mírně větším stupni
   a ve firemní žluté – čte se jako zdroj následujícího tvrzení.
   ============================================================ */
.brand-note{
  margin-top:20px; padding-left:18px;
  border-left:3px solid rgba(255,213,0,.55);
}
.brand-note p{margin:0}
.brand-note p + p{margin-top:12px}

.brand-note__label{
  font-family:'Oswald',sans-serif; font-weight:600;
  font-size:1.08em; letter-spacing:1.1px; text-transform:uppercase;
  color:var(--yellow); text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .2s var(--ease), border-color .2s var(--ease);
  white-space:nowrap;
}
.brand-note__label:hover{color:#FFE45C; border-bottom-color:currentColor}
.brand-note__label:focus-visible{outline:2px solid var(--yellow); outline-offset:2px}

.brand-note__sep{
  display:inline-block; margin:0 10px 0 9px;
  color:rgba(255,255,255,.28); font-weight:400;
}
@media (max-width:520px){
  .brand-note{padding-left:14px; margin-top:18px}
  .brand-note__sep{margin:0 7px}
}

/* (15) Druhé telefonní tlačítko (Michal Roupec) v sekci Bezpečnost.
   Jen od desktopu – na mobilu jsou tlačítka v cta-row přes celou šířku
   a tři CTA pod sebou by sekci zbytečně natahovala. Obě čísla zůstávají
   dostupná v sekci Kontakt a v horní liště. */
.only-desk{display:none}
@media (min-width:1025px){
  .only-desk{display:inline-flex}
}

/* ============================================================
   ===  ÚPRAVY 2026/07 – várka 12  ============================
   OBNOVA pravidel, která omylem odstranil skript při přestavbě
   medailonku (várka 10), + nová sazba reklamy na AI auditor.
   ============================================================ */

/* --- (a) obnoveno: víceodstavcové bloky --- */
.ai-excerpt > p{margin:0}
.ai-excerpt > p + p{margin-top:11px}
.callout p + p{margin-top:11px}

/* --- (b) obnoveno: responzivní nadpis sekce Ceník --- */
.h2-full{display:inline}
.h2-short{display:none}
@media (max-width:680px){
  .h2-full{display:none}
  .h2-short{display:inline}
}

/* --- (c) obnoveno: zvýrazněná část hero eyebrow --- */
.eyebrow__hl{color:#fff; font-weight:inherit; letter-spacing:inherit}

/* --- (d) obnoveno: dělicí linka před menu --- */
@media (min-width:1025px){
  .nav::before{height:24px; background:rgba(0,0,0,.26)}
}

/* ------------------------------------------------------------
   REKLAMA NA AI AUDITOR – prémiová sazba
   Logo je značka, ne ilustrace: sedí nad tlačítkem v pravém
   sloupci, drží pevný rozměr a tvoří s CTA jeden blok.
   ------------------------------------------------------------ */
.aicalc{gap:36px; padding:34px 36px}
.aicalc__main{min-width:0}
.aicalc__badge{margin-bottom:14px}
.aicalc h3{margin:0 0 12px}

.aicalc__cta{
  display:flex; flex-direction:column; align-items:center; gap:0;
  flex:none; width:250px; text-align:center;
  padding:22px 20px 18px; border-radius:8px;
  background:linear-gradient(180deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.015) 100%);
  border:1px solid rgba(255,255,255,.08);
}
.aicalc__logo{
  position:relative; flex:none; display:block;
  width:78px; height:78px; margin:0 0 18px;
}
.aicalc__logo svg{position:relative; z-index:1; width:100%; height:100%; display:block}
.aicalc__pulse{
  position:absolute; inset:-10px; border-radius:50%; z-index:0;
  background:radial-gradient(circle,rgba(255,213,0,.26) 0%,transparent 66%);
  animation:adPulse 3.4s ease-in-out infinite;
}
.aicalc__btn{width:100%; margin-bottom:10px}
.aicalc__url{font-size:10.5px; letter-spacing:.4px; color:#767c84}

@media (max-width:860px){
  .aicalc{gap:24px; padding:26px 22px}
  /* přebít starší pravidlo `align-items:stretch` z várky 6 */
  .aicalc__cta{width:100%; align-items:center; padding:20px 18px 16px}
  .aicalc__logo{width:66px; height:66px; margin-bottom:15px}
}
@media (max-width:400px){
  .aicalc__logo{width:58px; height:58px; margin-bottom:13px}
}
@media (prefers-reduced-motion:reduce){
  .aicalc__pulse{animation:none}
}

/* ============================================================
   ===  ÚPRAVY 2026/07 – várka 13  ============================
   O NÁS – levý sloupec je nyní jen fotografie zakladatelů.
   Bez medailonku by se snímek přilepil k hornímu okraji, proto
   se svisle centruje vůči textovému sloupci a dostane pevný
   maximální rozměr, aby oba obličeje zůstaly čitelné.
   ============================================================ */
#o-nas .split{align-items:start; gap:56px}
.onas-panel{max-width:520px; margin-inline:auto; width:100%}
.onas-panel__hero{aspect-ratio:1 / 1}

/* (26) O NÁS – krátký medailonek pod fotografií zakladatelů.
   Vyplní prostor, který dřív pod svisle vystředěnou fotkou zůstával
   prázdný. Jen desktop a tablet; na mobilu je fotka široká přes celý
   sloupec a text pokračuje níž bez potřeby zvláštní úpravy. */
/* (26) O NÁS – medailonek pod fotografií, JEN desktop (≥1025 px).
   Levý sloupec (fotka + medailonek) kopíruje výšku pravého sloupce,
   který končí tlačítky. Fotka má pevný poměr, medailonek dostane
   zbývající místo a případný přebytek se ořízne s plynulým doběhem –
   text tak NIKDY nepřeteče pod úroveň tlačítek, ať je okno jakkoli
   široké. Šířka medailonku = šířka fotky (oba v jednom sloupci). */
.onas-founders{display:none}
@media (min-width:1025px){
  #o-nas .split{align-items:stretch}
  .onas-panel{display:flex; flex-direction:column; height:100%; max-width:520px; margin-inline:0}
  .onas-panel__hero{flex:none}

  .onas-founders{
    display:block; position:relative;
    flex:1 1 auto; min-height:0; margin-top:18px; overflow:hidden;
  }
  /* plynulé zeslabení dolního okraje, aby ořez nepůsobil useknutě */
  .onas-founders::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:52px;
    background:linear-gradient(180deg, transparent, var(--dark, #15171a));
    pointer-events:none;
  }
  .onas-founders p{
    margin:0 0 12px; font-size:13.6px; line-height:1.68; color:#aeb3ba;
    text-align:left; text-wrap:pretty;
  }
  .onas-founders__role{
    font-size:15px; line-height:1.5; color:#e7e9ec; text-align:left;
    padding-bottom:14px; margin-bottom:14px;
    border-bottom:1px solid rgba(255,255,255,.10);
  }
  .onas-founders__role strong{color:var(--yellow); font-weight:600}
}

@media (max-width:1024px){
  #o-nas .split{align-items:stretch; gap:32px}
  .onas-panel{max-width:480px}
}
@media (max-width:520px){
  .onas-panel{max-width:100%}
}

/* ============================================================
   ===  ÚPRAVY 2026/07 – várka 14  ============================
   PATIČKA – zakončení webu odkazem na AI auditor cen.
   Přebírá tvarosloví předchozího bloku (label + značka + popis),
   aby působilo jako decentní zakončení, ne nalepený banner.
   ============================================================ */
.ftpromo{border-top:1px solid #1a1a1a; margin-top:48px}
.ftpromo__inner{
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding:26px 0 6px; flex-wrap:wrap;
}
.ftpromo__label{
  font-family:'Oswald',sans-serif; font-size:11.5px; letter-spacing:2.5px;
  text-transform:uppercase; color:#5d6168;
}
.ftpromo__brand{
  display:inline-flex; align-items:center; gap:11px;
  padding:9px 16px; border:1px solid #23262b; border-radius:4px;
  background:rgba(255,255,255,.02); color:#e7e7e7; text-decoration:none;
  font-family:'Oswald',sans-serif; line-height:1;
  transition:border-color .25s var(--ease), color .25s var(--ease),
             background .25s var(--ease), transform .25s var(--ease);
}
.ftpromo__brand:hover{
  border-color:var(--yellow); color:#fff;
  background:rgba(255,213,0,.06); transform:translateY(-1px);
}
.ftpromo__brand:focus-visible{outline:2px solid var(--yellow); outline-offset:2px}
.ftpromo__mark{display:inline-flex; color:#fff; transition:transform .35s var(--ease)}
.ftpromo__mark svg{display:block}
.ftpromo__word{font-weight:700; font-size:18px; letter-spacing:2.6px; text-transform:uppercase}
.ftpromo__desc{
  font-size:11px; letter-spacing:1.1px; text-transform:none; color:#7e848c;
  padding-left:11px; margin-left:3px; border-left:1px solid #2b2f35;
  max-width:250px; line-height:1.35;
}
.ftpromo__brand:hover .ftpromo__desc{color:#aab0b8}
.ftpromo__brand:hover .ftpromo__mark{transform:translateY(-1px)}
@media (max-width:560px){
  .ftpromo__inner{gap:12px; padding:22px 0 4px}
  .ftpromo__brand{gap:9px; padding:10px 14px}
  .ftpromo__word{font-size:16px; letter-spacing:2px}
  .ftpromo__desc{max-width:none; flex-basis:100%; padding-left:0; margin-left:0;
    border-left:none; border-top:1px solid #2b2f35; padding-top:8px; margin-top:2px}
  .ftpromo__brand{flex-wrap:wrap; justify-content:center; text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .ftpromo__brand,.ftpromo__mark{transition:none}
  .ftpromo__brand:hover,.ftpromo__brand:hover .ftpromo__mark{transform:none}
}

/* ============================================================
   ===  ÚPRAVY 2026/07 – várka 15  ============================
   HERO – menší odsazení pod hlavičkou.
   Obsah hero je vyšší než `min-height:90vh`, takže o mezeru
   pod lištou rozhoduje `padding-top` (80px). Stahujeme ho
   na 52px; spodní odsazení zůstává, aby USP lišta „nesedla“
   na spodní hranu. Mobil a tablet mají vlastní hodnoty a
   zůstávají beze změny.
   ============================================================ */
@media (min-width:1025px){
  .hero{padding-top:52px}
}

/* (16) HERO – menší odsazení pod hlavičkou.
   Horní mezera 80 px vznikla ještě u kratšího nadpisu. Po přidání
   druhého řádku ve žlutém bloku působí hero shora zbytečně vysazeně.
   Spodní odsazení zůstává – drží USP lištu nad hranou sekce. */
@media (min-width:681px){
  .hero{padding-top:54px}
}
@media (min-width:1025px){
  .hero{padding-top:52px}
}

/* ============================================================
   ===  ÚPRAVY 2026/07 – várka 15  ============================
   MOBILNÍ REVIZE OBSAHU (≤680 px)
   Zásada: obě varianty textu zůstávají v DOMu (vyhledávač vidí
   plné znění), přepíná se jen zobrazení. Není to cloaking –
   obě verze jsou reálně viditelné, každá na jiném zařízení.
   ============================================================ */

/* --- univerzální přepínač dlouhé/krátké varianty textu --- */
.t-full{display:inline}
.t-short{display:none}
p.t-full{display:block}
p.t-short{display:none}
@media (max-width:680px){
  .t-full{display:none}
  .t-short{display:inline}
  p.t-full{display:none}
  p.t-short{display:block}
}

/* --- (2) eyebrow: na mobilu bez „• celá ČR" --- */
@media (max-width:680px){
  .eyebrow__tail{display:none}
}

/* --- (3) plovoucí podpis „ŠKOLENÍ & REVIZE OOPP" pryč z mobilu --- */
@media (max-width:680px){
  .hero__mark-sig{display:none !important}
}

/* --- (4) černý pás s klíčovými pojmy pryč z mobilu --- */
@media (max-width:680px){
  .strip{display:none}
}

/* --- (6) tlačítka: jeden řádek, žádné zalomení --- */
@media (max-width:680px){
  .btn{
    white-space:nowrap;
    font-size:13.6px; letter-spacing:.6px;
    padding:15px 18px; gap:8px; line-height:1.2;
  }
  .btn--large{padding:16px 20px; font-size:14.4px; letter-spacing:.7px}
  .btn .ico{width:1.15em; height:1.15em; flex:none}
}
@media (max-width:560px){
  /* přebít starší `.btn{white-space:normal}` – popisky jsou už krátké */
  .btn{white-space:nowrap; text-align:center}
  .btn--large{padding:15px 16px; font-size:13.8px}
}
@media (max-width:360px){
  .btn{font-size:12.8px; letter-spacing:.4px; padding:14px 14px}
}

/* --- (8) sekce Konkrétní činnosti: na mobilu 6 dlaždic z 12 --- */
@media (max-width:680px){
  .kb__item--extra{display:none}
  .kb{margin-top:32px; gap:12px}
  .kb article{padding:18px 16px; border-left-width:3px}
  .kb h3{
    font-size:clamp(12.6px, 4vw, 16px);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    margin-bottom:6px;
  }
  .kb p{font-size:13.4px; line-height:1.55}
}

/* ============================================================
   ===  ÚPRAVY 2026/07 – várka 16  ============================
   O NÁS – značka jako uvozující odkaz v perexu.
   Mírně větší, verzálkový řez v Oswaldu; svislá linka odděluje
   značku od textu, aby perex nezačínal odkazem „naslepo".
   ============================================================ */
.brandlead{
  font-family:'Oswald',sans-serif; font-weight:700;
  font-size:1.06em; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--yellow); text-decoration:none; white-space:nowrap;
  border-bottom:1px solid transparent;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.brandlead:hover,
.brandlead:focus-visible{color:#FFE45C; border-bottom-color:currentColor}
.brandlead:focus-visible{outline:none}
.brandlead__sep{
  display:inline-block; margin:0 10px;
  color:rgba(255,255,255,.28); font-weight:400;
}
/* světlé sekce (kdyby se prvek použil i jinde) */
.section:not(.section--dark) .brandlead{color:#0a0a0a}
.section:not(.section--dark) .brandlead__sep{color:rgba(0,0,0,.26)}

@media (max-width:680px){
  .brandlead{font-size:1em; letter-spacing:.9px; white-space:normal}
  .brandlead__sep{margin:0 7px}
}

/* ============================================================
   ===  ÚPRAVY 2026/07 – várka 17  ============================
   AI AUDITOR NA MOBILU – konverzní doladění.
   Na desktopu je blok široký a CTA vidíte hned. Na telefonu se
   sloupec překlopí pod text a tlačítko se ocitne až pod výčtem,
   kde už vypadá jako poznámka. Řešeno rámečkem s pohyblivým
   světlem, výraznějším tlačítkem a mikropopiskem, který odstraní
   poslední pochybnost před klepnutím.
   ============================================================ */

/* Rotující zlatý rám. @property umožní animovat úhel gradientu;
   prohlížeče bez podpory dostanou statický zlatý obrys (viz níže). */
@property --aic-angle{
  syntax:'<angle>'; inherits:false; initial-value:0deg;
}
@keyframes aicSpin{to{--aic-angle:360deg}}
@keyframes aicShine{
  0%{transform:translateX(-120%) skewX(-18deg)}
  60%,100%{transform:translateX(240%) skewX(-18deg)}
}

@media (max-width:860px){
  .aicalc{
    background:
      linear-gradient(158deg,rgba(18,20,25,.97) 0%,rgba(10,11,14,.99) 100%) padding-box,
      conic-gradient(from var(--aic-angle),
        rgba(255,213,0,.15) 0deg, var(--yellow) 70deg, #FFE45C 110deg,
        rgba(255,213,0,.15) 190deg, rgba(255,213,0,.15) 260deg,
        var(--yellow) 320deg, rgba(255,213,0,.15) 360deg) border-box;
    border:2px solid transparent;
    padding:26px 22px;
    animation:aicSpin 7s linear infinite;
    box-shadow:0 22px 44px -26px rgba(0,0,0,.9), 0 0 34px -18px rgba(255,213,0,.55);
  }

  /* CTA blok blíž k textu a výrazněji ohraničený */
  .aicalc__pts{gap:6px; margin-bottom:2px}
  .aicalc__pts li{font-size:13.2px}
  .aicalc__cta{
    background:linear-gradient(180deg,rgba(255,213,0,.09) 0%,rgba(255,213,0,.03) 100%);
    border:1px solid rgba(255,213,0,.30);
    padding:20px 16px 15px;
  }
  .aicalc__logo{width:60px; height:60px; margin-bottom:13px}
}

/* Tlačítko: světelný přejezd + šipka + hmatová odezva */
.aicalc__btn{position:relative; overflow:hidden; isolation:isolate}
.aicalc__btn::after{
  content:""; position:absolute; top:0; bottom:0; left:0; width:38%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-120%) skewX(-18deg);
  pointer-events:none; z-index:1;
}
@media (max-width:860px){
  /* velikost se váže na šířku okna, aby se popisek + ikona + šipka
     vešly na jeden řádek i na 320px displeji */
  .aicalc__btn{
    font-size:clamp(12.6px, 3.7vw, 14.6px);
    letter-spacing:.55px; padding:16px 16px;
    box-shadow:0 12px 26px -14px rgba(255,213,0,.85);
  }
  .aicalc__btn::after{animation:aicShine 3.6s ease-in-out infinite}
  .aicalc__btn:active{transform:scale(.985)}
}
@media (max-width:400px){
  .aicalc{padding:22px 16px}
  .aicalc__cta{padding:18px 12px 13px}
  .aicalc__btn{padding:15px 12px; gap:6px}
  .aicalc__micro{font-size:9.8px; letter-spacing:.8px}
}
.aicalc__arrow{
  margin-left:2px; font-size:1.15em; line-height:1;
  transition:transform .25s var(--ease);
}
.aicalc__btn:hover .aicalc__arrow{transform:translateX(4px)}

/* Mikropopisek pod tlačítkem – jen na mobilu (na desktopu totéž nesou odrážky) */
.aicalc__micro{display:none}
@media (max-width:860px){
.aicalc__micro{
  display:block; margin:9px 0 6px;
  font-family:'Oswald',sans-serif; font-size:10.6px; font-weight:600;
  letter-spacing:1.1px; text-transform:uppercase; color:var(--yellow);
  opacity:.85;
}
}

/* Prohlížeče bez @property: rám zůstane statický, ne rozbitý. */
@supports not (background: conic-gradient(from var(--aic-angle), red, blue)){
  @media (max-width:860px){
    .aicalc{
      background:linear-gradient(158deg,#101216 0%,#0a0b0e 100%);
      border:2px solid rgba(255,213,0,.55);
      animation:none;
    }
  }
}
@media (prefers-reduced-motion:reduce){
  .aicalc{animation:none}
  .aicalc__btn::after{animation:none; display:none}
  .aicalc__arrow{transition:none}
}

/* ============================================================
   ===  ÚPRAVY 2026/07 – várka 18  ============================
   (A) PRUH „Kolik taková práce stojí?" – prémiové provedení
   (B) PLOVOUCÍ PRVEK – postranní kolejnice v prázdném okraji
   ============================================================ */

/* ------------------------------------------------------------
   (A) Pruh v sekci Konkrétní činnosti
   Byl to plochý žlutý obdélník. Nově: bílá karta se zlatou hranou,
   ikona ve zlatém terčíku, nadřazený štítek „Nezávislý AI nástroj"
   a šipka, která na hover popojede. Na hover přejede kartu jemný
   lesk – stejné gesto jako u tlačítka v ceníku, aby to byl jeden
   vizuální jazyk.
   ------------------------------------------------------------ */
.section:not(.section--dark):not(.section--cta) .aicalc-slim{
  position:relative; overflow:hidden; isolation:isolate;
  align-items:center; gap:16px;
  margin:38px 0 0; padding:16px 20px;
  border:1px solid rgba(10,10,10,.10);
  border-left:3px solid var(--yellow);
  border-radius:7px;
  background:linear-gradient(180deg,#ffffff 0%,#fdfbf4 100%);
  box-shadow:0 14px 34px -22px rgba(0,0,0,.42), inset 0 1px 0 #fff;
  color:#2a2d31;
  transition:border-color .28s var(--ease), box-shadow .28s var(--ease),
             transform .28s var(--ease);
}
.section:not(.section--dark):not(.section--cta) .aicalc-slim:hover{
  transform:translateY(-2px);
  border-color:rgba(255,213,0,.75);
  box-shadow:0 22px 44px -24px rgba(0,0,0,.5), 0 0 0 1px rgba(255,213,0,.28), inset 0 1px 0 #fff;
  background:linear-gradient(180deg,#ffffff 0%,#fffaea 100%);
}
/* lesk přeběhne jen při hover – v klidu nic neruší */
.aicalc-slim::after{
  content:""; position:absolute; inset:0 auto 0 0; width:34%;
  background:linear-gradient(90deg,transparent,rgba(255,213,0,.20),transparent);
  transform:translateX(-140%) skewX(-16deg);
  pointer-events:none; z-index:0;
}
.aicalc-slim:hover::after{animation:aicShine 1.15s ease-out}

.aicalc-slim__chip{
  position:relative; z-index:1; flex:none;
  display:grid; place-items:center; width:42px; height:42px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 25%,#FFE45C 0%,var(--yellow) 60%,#E8BE00 100%);
  box-shadow:0 6px 16px -8px rgba(255,213,0,.9), inset 0 1px 0 rgba(255,255,255,.6);
}
.aicalc-slim__chip .ico{width:20px; height:20px; color:#0a0a0a; opacity:1}

.aicalc-slim__txt{position:relative; z-index:1; display:block; min-width:0}
.aicalc-slim__badge{
  display:block; margin-bottom:3px;
  font-family:'Oswald',sans-serif; font-weight:600; font-size:9.6px;
  letter-spacing:2.2px; text-transform:uppercase; color:#9a8100;
}
.aicalc-slim__line{display:block; font-size:14.6px; line-height:1.45; color:#41464c}
.section:not(.section--dark):not(.section--cta) .aicalc-slim__line strong{color:#0a0a0a; font-weight:600}

.aicalc-slim__go{
  position:relative; z-index:1; margin-left:auto; flex:none;
  display:grid; place-items:center; width:34px; height:34px;
  border-radius:50%; color:#0a0a0a;
  border:1px solid rgba(10,10,10,.14); background:rgba(255,213,0,.14);
  transition:transform .28s var(--ease), background .28s var(--ease), border-color .28s var(--ease);
}
.aicalc-slim__go svg{width:16px; height:16px}
.aicalc-slim:hover .aicalc-slim__go{
  transform:translateX(4px); background:var(--yellow); border-color:var(--yellow);
}
@media (max-width:560px){
  .section:not(.section--dark):not(.section--cta) .aicalc-slim{align-items:flex-start; padding:14px 15px; gap:12px}
  .aicalc-slim__chip{width:36px; height:36px}
  .aicalc-slim__chip .ico{width:17px; height:17px}
  .aicalc-slim__line{font-size:13.6px}
  .aicalc-slim__go{display:none}
}
@media (prefers-reduced-motion:reduce){
  .aicalc-slim,.aicalc-slim__go{transition:none}
  .aicalc-slim:hover{transform:none}
  .aicalc-slim:hover::after{animation:none}
}

/* ------------------------------------------------------------
   (B) PLOVOUCÍ PRVEK – dvě podoby podle toho, kolik je místa

   ≥1680 px  postranní kolejnice v levém okraji. Obsah webu končí
             na 1200 px, takže na širokých monitorech zbývá po každé
             straně 240 px a víc. Prvek se do toho prázdna vloží,
             vystředí se v něm a obsahu se ani nedotkne.
   1280–1679 kompaktní karta v levém dolním rohu (původní podoba).
   ≤1279 px  nezobrazuje se vůbec (viz várka 11).

   Chování řídí js/main.js: vyjede až po pročtení dvou sekcí,
   ustoupí nad ceníkovým blokem, formulářem i patičkou.
   ------------------------------------------------------------ */
@media (min-width:1680px){
  .adfloat{
    /* šířka = kolik se vejde do okraje, nejvýš 210 px */
    --rail-w:min(210px, calc((100vw - 1200px) / 2 - 48px));
    width:var(--rail-w);
    left:calc(((100vw - 1200px) / 2 - var(--rail-w)) / 2);
    right:auto; bottom:auto; top:50%;
    padding:20px 18px 18px;
    border-radius:12px;
    transform:translate(-16px,-50%) scale(.98);
    background:linear-gradient(165deg,rgba(22,24,29,.62) 0%,rgba(12,13,17,.74) 100%);
    -webkit-backdrop-filter:blur(20px) saturate(1.4);
    backdrop-filter:blur(20px) saturate(1.4);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:
      0 28px 60px -30px rgba(0,0,0,.85),
      0 0 0 1px rgba(255,213,0,.10),
      inset 0 1px 0 rgba(255,255,255,.10);
  }
  .adfloat.is-in{transform:translate(0,-50%)}

  /* svislé rozvržení – logo nahoře, text pod ním */
  .adfloat__head{flex-direction:column; align-items:flex-start; gap:12px; margin-bottom:11px}
  .adfloat__logo{width:44px; height:44px}
  .adfloat__eyebrow{font-size:9.4px; letter-spacing:1.9px; margin-bottom:4px}
  .adfloat__title{font-size:16px; line-height:1.1}
  .adfloat__text{font-size:12.2px; line-height:1.5; margin-bottom:13px; color:#a9aeb5}
  .adfloat__cta{padding:11px 12px; font-size:12px; letter-spacing:1px; gap:7px}
  .adfloat__close{top:8px; right:8px; width:24px; height:24px}
  .adfloat__close svg{width:13px; height:13px}
  .adfloat__accent{border-radius:12px 12px 0 0}

  /* pomalý světelný přejezd sklem – v klidu, ne při hover */
  .adfloat__sheen{
    position:absolute; inset:-40% -60%; z-index:-1; pointer-events:none;
    background:linear-gradient(115deg,transparent 42%,rgba(255,213,0,.10) 50%,transparent 58%);
    animation:adSheen 9s ease-in-out infinite;
  }
}
@keyframes adSheen{
  0%,100%{transform:translateX(-28%)}
  50%{transform:translateX(28%)}
}

/* karta v rohu (1280–1679) – jen mírně zúžená, ať nekouše do obsahu */
@media (min-width:1280px) and (max-width:1679px){
  .adfloat{width:316px; left:22px; bottom:22px}
  .adfloat__sheen{display:none}
}

@media (prefers-reduced-motion:reduce){
  .adfloat__sheen{animation:none}
}
@media (prefers-reduced-motion:reduce) and (min-width:1680px){
  .adfloat,
  .adfloat.is-in{transform:translate(0,-50%)}
}

/* (19) Odkaz na realizace – od desktopu uvozený značkou.
   Na tabletu a mobilu se značka i oddělovač skrývají; tlačítko
   je tam už tak na hraně šířky a název firmy by ho zalomil. */
.ref-jump__brand,
.ref-jump__sep{display:none}
@media (min-width:1025px){
  .ref-jump__brand{
    display:inline; flex:none; white-space:nowrap;
    font-family:'Oswald',sans-serif; font-weight:700;
    font-size:15px; letter-spacing:1.1px; text-transform:uppercase;
    color:var(--yellow);
  }
  .ref-jump__sep{
    display:inline; flex:none; margin:0 -3px;
    color:rgba(255,255,255,.26); font-weight:400;
  }
}

/* ============================================================
   ===  ÚPRAVY 2026/07 – várka 19  ============================
   (A) H1 na mobilu na jeden řádek
   (B) Náprava tlačítek na mobilu – vrátit dech, popisky už jsou
       krátké, takže se nemusí šetřit každým pixelem.
   ============================================================ */

/* (A) „SLUŽBY HOROLEZCŮ V ČR" se nesmí zalomit.
   Písmo se váže na šířku okna, aby se 21 znaků vešlo i na 320px.
   Nezlomitelná mezera mezi oběma částmi je doplněna v HTML. */
@media (max-width:680px){
  .hero h1{font-size:clamp(26px, 8.3vw, 44px)}
  .hero__lead,
  .hero__city{white-space:nowrap}
}

/* (B) Tlačítka – zpět do normálních proporcí.
   Minulá várka je stlačila na 12,8–13,6 px, protože ještě nesla
   dlouhé popisky. Ty jsou zkrácené, takže se velikost i vnitřní
   odsazení vrací zpět k desktopové kultuře. Nowrap zůstává. */
@media (max-width:680px){
  .btn{
    white-space:nowrap;
    font-size:15px; letter-spacing:1.3px;
    padding:16px 22px; gap:10px; line-height:1.2;
  }
  .btn--large{padding:17px 24px; font-size:15.5px; letter-spacing:1.4px}
  .btn .ico{width:1.2em; height:1.2em}
}
@media (max-width:560px){
  .btn{white-space:nowrap; text-align:center}
  .btn--large{padding:16px 20px; font-size:15px}
}
@media (max-width:400px){
  .btn{font-size:14px; letter-spacing:.9px; padding:15px 16px; gap:8px}
  .btn--large{padding:15px 16px; font-size:14.4px; letter-spacing:1px}
}

/* ============================================================
   ===  ÚPRAVY 2026/07 – várka 20  ============================
   O NÁS – věta o zakladatelích jako samostatný, oddělený odstavec.
   ============================================================ */
.onas-claim{
  margin:0 0 18px; padding:14px 0 16px;
  border-top:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);
  font-size:1.06em; line-height:1.55; color:#e7e9ec;
}
.onas-claim strong{color:#fff; font-weight:600}
@media (max-width:1024px){
  /* na tabletu a mobilu žlutý akcent zleva + výraznější sazba */
  .onas-claim{
    border:0; border-left:3px solid var(--yellow);
    padding:4px 0 4px 16px; margin:4px 0 18px;
    background:linear-gradient(90deg, rgba(255,213,0,.06), transparent 70%);
  }
  .onas-claim strong{color:var(--yellow)}
}

/* (21) Zvýraznění věty jen na mobilu/tabletu (bod 6 zadání).
   Na desktopu zůstává běžný text, do 1024 px ztučntí. */
@media (max-width:1024px){
  .claim-m{font-weight:600; color:#fff}
}

/* (22) Mikropopisek AI auditoru – „orientační cena hned" drží na mobilu
   pohromadě na jednom řádku, ať se neláme uprostřed sousloví. */
.aicalc__micro-nowrap{white-space:nowrap}

/* (23) Názvy realizací v hero pásu se nesmí lámat na dva řádky.
   Zalomit se smí jen mezi položkami (v mezeře kolem „·"). */
.ref-nw{white-space:nowrap}

/* (24) USP „100 % ověřené recenze" – prokliknutelné na profil s hodnoceními. */
.hero__usps-link a{
  display:block; text-decoration:none; color:inherit;
  transition:transform .2s var(--ease);
}
.hero__usps-link a:hover{transform:translateY(-2px)}
.hero__usps-link a:hover strong{color:#FFE45C}
.hero__usps-link span{
  border-bottom:1px solid transparent; transition:border-color .2s var(--ease);
}
.hero__usps-link a:hover span{border-bottom-color:rgba(255,213,0,.5)}
.hero__usps-link a:focus-visible{outline:2px solid var(--yellow); outline-offset:3px; border-radius:2px}

/* (25) OPRAVA: USP dlaždice na mobilu přetékaly vpravo.
   Příčina: repeat(2,1fr) → implicitní min-width:auto neumožnil buňce
   zúžit se pod obsah, velké Anton číslice a dlouhá slova ji roztlačily.
   Kromě minmax(0,1fr) výše ještě povolíme zalomení uvnitř. */
@media (max-width:640px){
  .hero__usps li{min-width:0; padding:18px 16px; overflow-wrap:anywhere}
  .hero__usps strong{overflow-wrap:normal; word-break:keep-all}
  .hero__usps li span{overflow-wrap:break-word; hyphens:auto}
}
@media (max-width:380px){
  .hero__usps strong{font-size:22px; letter-spacing:.5px}
  .hero__usps li{padding:16px 13px}
  .hero__usps li span{font-size:12px; letter-spacing:.6px}
}

/* (27) USP „100 %" – popisek na tři pevné řádky, nikdy nepřetéká.
   ověřené recenze / garance / spokojenosti. Každý řádek je blok
   se zalomením povoleným jen mezi řádky, ne uvnitř slova. */
.hero__usps-link .usp-lines{display:block}
.hero__usps-link .usp-line{display:block; white-space:nowrap}
.hero__usps-link .usp-line + .usp-line{margin-top:1px}

/* (28) O NÁS – na PC (≥1025 px) skrýt v popisku přes fotku JMÉNO
   (je hned pod fotkou v medailonku), ale referenci k zakázce ponechat
   a zvýraznit jako štítek – dodává snímku kontext a doklad, který by
   jinak chyběl. Na mobilu/tabletu medailonek není, popisek zůstává celý. */
@media (min-width:1025px){
  .onas-panel__hero figcaption{
    left:0; right:0; bottom:0; padding:22px 22px 18px;
    flex-direction:row; align-items:stretch; gap:13px;
  }
  .onas-panel__hero figcaption strong{display:none}
  /* na PC ukázat plný popisek, skrýt mobilní */
  .onas-panel__hero figcaption .t-full{display:block; min-width:0}
  .onas-panel__hero figcaption .t-short{display:none}
  /* pevný žlutý akcent jako samostatný sloupec – text vedle něj se
     může volně zalomit a oba řádky zůstanou zarovnané za akcentem */
  .onas-panel__hero figcaption::before{
    content:""; flex:none; width:3px; border-radius:2px;
    background:var(--yellow); align-self:stretch;
    box-shadow:0 0 12px -2px rgba(255,213,0,.6);
  }
  .onas-panel__hero figcaption .t-full{
    font-size:12.8px; line-height:1.55; color:#e7eaed; letter-spacing:.2px;
    text-wrap:pretty;
  }
  /* „Foto z události:" jako zlatý štítek, ne skrytý strong */
  .onas-panel__hero figcaption .cap-lbl{
    display:inline; color:var(--yellow); font-weight:600;
    text-transform:uppercase; font-size:11px; letter-spacing:1px;
  }
}

/* ============================================================
   ===  ÚPRAVY 2026/07 – várka 21  ============================
   AI AUDITOR NA MOBILU – úspora výšky reklamního bloku.
   (1) perex zarovnán do bloku, povoleno dělení slov i pomlčkou
   (2) logo vedle tlačítka (ne nad ním), text tlačítka na 2 řádky
   ============================================================ */
/* Logo uvnitř tlačítka je pouze mobilní prvek (nahrazuje jiskřičky).
   Na desktopu se skryje – tam nese ikonu spark a logo je nad tlačítkem. */
.aicalc__btn-logo{display:none}

/* ctarow je jen mobilní obal. Na desktopu se „rozpustí" (display:contents),
   takže logo a tlačítko zůstávají přímými dětmi sloupcového .aicalc__cta
   přesně jako před zavedením wrapperu. */
.aicalc__ctarow{display:contents}

/* Na PC tlačítko vyplní šířku boxu a text se smí zalomit na dva řádky,
   ať se dlouhé „SPUSTIT NEZÁVISLÝ AUDITOR" nikdy neusekne. */
@media (min-width:861px){
  .aicalc__ctarow .aicalc__btn,
  .aicalc__cta .aicalc__btn{
    width:100%; white-space:normal; line-height:1.2;
    text-align:center; word-break:normal; overflow-wrap:break-word;
  }
}

@media (max-width:860px){
  /* (1) perex – blok + dělení slov, ať zabere méně řádků */
  .aicalc p{
    text-align:justify;
    hyphens:auto; -webkit-hyphens:auto;
    overflow-wrap:break-word; word-break:normal;
  }

  /* (2) logo + tlačítko do jedné řady */
  .aicalc__cta{padding:16px 14px 13px}
  .aicalc__ctarow{
    display:flex; align-items:center; justify-content:center;
    gap:14px; width:100%;
  }
  /* samostatné logo vedle tlačítka na mobilu nepotřebujeme –
     logo je nově uvnitř tlačítka místo jiskřiček */
  .aicalc__ctarow > .aicalc__logo{display:none}
  .aicalc__btn-spark{display:none}
  .aicalc__btn-logo{
    display:inline-flex; flex:none; width:30px; height:30px;
  }
  .aicalc__btn-logo svg{width:100%; height:100%; display:block}
  .aicalc__cta .aicalc__logo{
    margin:0; flex:none; width:52px; height:52px;
  }
  .aicalc__ctarow .aicalc__btn{
    flex:1 1 auto; min-width:0; margin:0;
    display:inline-flex; align-items:center; justify-content:center;
    gap:9px; padding:12px 14px;
    white-space:normal; line-height:1.12; text-align:center;
  }
  /* text tlačítka na dva řádky – kratší verze „Spustit auditor" */
  .aicalc__ctarow .aicalc__btn .t-short{
    display:inline-block; max-width:6em; white-space:normal;
  }
  .aicalc__ctarow .aicalc__btn .ico{flex:none}
  .aicalc__ctarow .aicalc__arrow{display:none}   /* šipka by rozbila 2řádkové centrování */

  .aicalc__micro{margin-top:11px; text-align:center}
}
@media (max-width:400px){
  .aicalc__ctarow{gap:11px}
  .aicalc__cta .aicalc__logo{width:46px; height:46px}
  .aicalc__ctarow .aicalc__btn{padding:11px 12px; font-size:13.5px}
}

/* (29) Hero podtext na mobilu – zvýraznění klíčových frází.
   Bílé tučné, ať vystoupí z šedého textu, ale nekřičí žlutě. */
.hero__sub--mob strong{color:#fff; font-weight:600}

/* (30) Mobilní nadpis nad reklamou na AI auditor – vymezí ji od sekce
   Působnost stejným stylem jako mají ostatní sekce (žlutý eyebrow
   s pomlčkou). Zobrazí se jen na mobilu (nese třídu t-short). */
/* (30) Mobilní nadpis nad reklamou na AI auditor – SEO + vizuální
   vymezení od sekce Působnost. Eyebrow „Ověřte si sami" před pomlčkou,
   pod ním velký nadpis „AI auditor cen". Jen mobil (nese t-short). */
.aicalc__lead{display:none}
@media (max-width:680px){
  .aicalc__lead{display:block; margin:4px 0 16px}
}
.aicalc__lead .aicalc__eyebrow{display:inline-block; margin:0 0 8px; color:#0a0a0a}
.aicalc__lead .aicalc__eyebrow::before{background:#0a0a0a}
.aicalc__h2{
  font-family:'Anton','Oswald',sans-serif; font-weight:400; letter-spacing:.5px;
  font-size:clamp(26px, 8vw, 34px); line-height:1.02; color:#0a0a0a;
  text-transform:uppercase;
}

/* ============================================================
   ===  ÚPRAVY 2026/07 – várka 22  ============================
   PRÉMIOVÉ MOBILNÍ MENU – doladění stávající žluté varianty:
   měkký nájezd panelu, postupné naskočení položek, hamburger→křížek.
   Barvy a rozvržení řádků zůstávají (blok „max-width:1024px" výše).
   ============================================================ */
@media (max-width:1024px){
  .nav{
    opacity:0; transform:translateY(-10px);
    transition:opacity .26s var(--ease), transform .3s var(--ease);
    max-height:calc(100vh - 100%); overflow-y:auto;
  }
  .nav.open{display:flex; opacity:1; transform:none}

  /* postupné naskočení řádků po otevření */
  .nav.open a{animation:navItemIn .32s var(--ease) both}
  .nav.open a:nth-child(1){animation-delay:.03s}
  .nav.open a:nth-child(2){animation-delay:.06s}
  .nav.open a:nth-child(3){animation-delay:.09s}
  .nav.open a:nth-child(4){animation-delay:.12s}
  .nav.open a:nth-child(5){animation-delay:.15s}
  .nav.open a:nth-child(6){animation-delay:.18s}
  .nav.open a:nth-child(7){animation-delay:.21s}
  .nav.open a:nth-child(8){animation-delay:.24s}

  /* jemný „lift" celé položky na dotek – doplňuje stávající posun textu */
  .nav a{box-shadow:0 0 0 0 rgba(0,0,0,0)}
  .nav a:active{transform:scale(.995)}
}
@keyframes navItemIn{
  from{opacity:0; transform:translateX(-12px)}
  to{opacity:1; transform:none}
}

/* hamburger → křížek v otevřeném stavu */
.nav-toggle span{transition:transform .28s var(--ease), opacity .18s var(--ease)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

@media (prefers-reduced-motion:reduce){
  .nav{transition:none}
  .nav.open a{animation:none}
  .nav-toggle span{transition:none}
}

/* (31) Zvýraznění „dřív, než cokoli podepíšete" – bílá tučná. */
.aicalc .hl-w,
.section--yellow .aicalc .hl-w,
.aicalc p .hl-w{color:#fff !important; font-weight:600}