/* ============================================================
   DLUGO reality 2026 — hlavný stylesheet
   Dizajn z témy HotelWP: písma Playfair Display + Poppins,
   farby modrá #118acb / vínová #72305f / zlatá #ffb606,
   modernizované pre rok 2026 (jemné zaoblenia, mäkké tiene, glass).
   ============================================================ */
/* Fonty + ikony sa načítavajú neblokujúco cez js/app.js (loadAssets) — kvôli výkonu (FCP/LCP). */

:root{
  --primary:#f39100;          /* DLUGO oranžová (pôvodný web) */
  --primary-dark:#d97e00;
  --primary-soft:#fff3e1;
  --secondary:#2e3e49;        /* antracitová bridlica */
  --secondary-soft:#eef1f3;
  --gold:#ffa827;             /* jasná oranžová – akcent / hviezdy */
  --accent:#00aeff;           /* modrý akcent (pôvodný web) */
  --title:#2e3e49;            /* nadpisy – antracit */
  --body:#697580;             /* text */
  --muted:#a1a7a8;
  --line:#e4e8ea;
  --bg:#ffffff;
  --bg-soft:#f6f8f9;
  --footer-bg:#222e36;        /* tmavá pätička (antracit) */
  --footer-text:#9aa6ad;
  --shadow-sm:0 6px 20px -10px rgba(46,62,73,.22);
  --shadow:0 24px 50px -28px rgba(46,62,73,.4);
  --shadow-lg:0 40px 80px -40px rgba(46,62,73,.5);
  --radius:14px;
  --radius-sm:10px;
  --head:'Playfair Display', Georgia, serif;
  --font:'Poppins', system-ui, -apple-system, sans-serif;
  --container:1200px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font); font-size:16px; line-height:1.7;
  color:var(--body); background:var(--bg); -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{font-family:var(--head); color:var(--title); font-weight:700; line-height:1.18; margin:0 0 .5em}
a{color:var(--primary); text-decoration:none; transition:all .35s}
a:hover{color:var(--primary-dark)}
img{max-width:100%; height:auto; display:block}
p{margin:0 0 1em}
ul{margin:0; padding:0; list-style:none}
section{position:relative}

.container{max-width:var(--container); margin:0 auto; padding:0 22px}
.section{padding:100px 0; position:relative}
.section--soft{background:var(--bg-soft)}
.section--tight{padding:70px 0}
.text-center{text-align:center}
.empty-space{height:60px}

/* ---------- Tlačidlá ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-family:var(--font); font-weight:600; font-size:14px; letter-spacing:.06em;
  text-transform:uppercase; padding:0 32px; height:52px; line-height:52px;
  border:0; border-radius:50px; transition:all .4s; white-space:nowrap;
}
.btn--primary{background:var(--primary); color:#fff; box-shadow:0 16px 30px -14px rgba(243,145,0,.7)}
.btn--primary:hover{background:var(--primary-dark); color:#fff; transform:translateY(-2px)}
.btn--gold{background:var(--gold); color:#3a2a00}
.btn--gold:hover{background:#e6a200; color:#3a2a00; transform:translateY(-2px)}
.btn--secondary{background:var(--secondary); color:#fff}
.btn--secondary:hover{background:#1e2930; color:#fff; transform:translateY(-2px)}
.btn--outline{background:transparent; color:#fff; border:2px solid rgba(255,255,255,.6); line-height:48px}
.btn--outline:hover{background:#fff; color:var(--title); border-color:#fff}
.btn--ghost{background:transparent; color:var(--primary); border:2px solid var(--line); line-height:48px}
.btn--ghost:hover{border-color:var(--primary); background:var(--primary); color:#fff}
.btn--sm{height:42px; line-height:42px; padding:0 22px; font-size:12.5px}
.more-info{display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:13px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--primary)}
.more-info i{transition:transform .35s}
.more-info:hover i{transform:translateX(5px)}

/* ---------- Sekčné nadpisy ---------- */
.sc-heading{margin-bottom:50px}
.sc-heading .first-title{
  display:inline-block; font-family:var(--font); font-weight:600; font-size:13px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--primary); margin:0 0 14px;
  position:relative;
}
.sc-heading.text-center .first-title:after{content:""; display:block; width:50px; height:2px;
  background:var(--gold); margin:12px auto 0}
.sc-heading .title,.sc-heading .second-title{font-size:42px; margin:0; color:var(--title)}
.sc-heading .description{margin-top:18px; max-width:640px; font-size:16px}
.sc-heading.text-center .description{margin-left:auto; margin-right:auto}
.sc-heading.light .title,.sc-heading.light .second-title{color:#fff}
.sc-heading.light .description{color:rgba(255,255,255,.82)}

/* ============================================================
   HLAVIČKA
   ============================================================ */
.top-toolbar{background:var(--secondary); color:rgba(255,255,255,.85); font-size:13px}
.top-toolbar .container{display:flex; align-items:center; justify-content:space-between; height:42px}
.top-toolbar a{color:rgba(255,255,255,.85)}
.top-toolbar a:hover{color:#fff}
.toolbar-info{display:flex; gap:22px; align-items:center}
.toolbar-info i{color:var(--gold); margin-right:6px}
.toolbar-social{display:flex; gap:14px; align-items:center}
.toolbar-social a{font-size:14px}

.site-header{position:sticky; top:0; z-index:900; background:rgba(255,255,255,.96);
  backdrop-filter:saturate(160%) blur(10px); box-shadow:0 4px 24px -16px rgba(46,62,73,.5)}
.site-header .bar{display:flex; align-items:center; gap:24px; height:84px}
.brand{display:flex; align-items:center; gap:12px; flex:0 0 auto}
.brand .logo-txt{font-family:var(--head); font-weight:900; font-size:25px; color:var(--title); letter-spacing:.01em; line-height:1}
.brand .logo-txt b{color:var(--primary)}
.brand .logo-sub{display:block; font-family:var(--font); font-weight:500; font-size:10.5px;
  letter-spacing:.34em; text-transform:uppercase; color:var(--muted); margin-top:3px}

.main-menu{display:flex; align-items:center; gap:4px; margin-left:auto}
.main-menu>li{position:relative}
.main-menu>li>a{display:block; padding:12px 15px; font-weight:600; font-size:14.5px; color:var(--title)}
.main-menu>li>a:hover,.main-menu>li.current>a{color:var(--primary)}
.main-menu .has-children>a:after{content:"\f3d0"; font-family:"Ionicons"; font-size:11px; margin-left:6px; opacity:.6; vertical-align:1px}
.sub-menu{position:absolute; top:calc(100% + 8px); left:0; min-width:240px; background:#fff;
  border-radius:var(--radius-sm); box-shadow:var(--shadow); padding:10px; opacity:0; visibility:hidden;
  transform:translateY(10px); transition:all .3s; border:1px solid var(--line)}
.main-menu li:hover>.sub-menu{opacity:1; visibility:visible; transform:translateY(0)}
.sub-menu li>a{display:block; padding:9px 14px; border-radius:8px; font-size:14px; font-weight:500; color:var(--title)}
.sub-menu li>a:hover{background:var(--primary-soft); color:var(--primary)}
.sub-menu .has-children>.sub-menu{top:-11px; left:calc(100% + 6px)}

.header-actions{display:flex; align-items:center; gap:12px; flex:0 0 auto}
.burger{display:none; width:46px; height:46px; border:0; background:var(--bg-soft); border-radius:12px;
  cursor:pointer; color:var(--title); font-size:22px; align-items:center; justify-content:center}

/* mobilné menu */
.mobile-panel{position:fixed; inset:0 0 0 auto; width:min(360px,86vw); background:#fff; z-index:1000;
  transform:translateX(100%); transition:transform .4s; overflow-y:auto; box-shadow:var(--shadow-lg); padding:24px}
.mobile-panel.open{transform:translateX(0)}
.mobile-backdrop{position:fixed; inset:0; background:rgba(30,41,48,.5); opacity:0; visibility:hidden;
  transition:all .4s; z-index:999}
.mobile-backdrop.open{opacity:1; visibility:visible}
.mobile-panel .m-close{margin-left:auto; display:flex; width:42px; height:42px; align-items:center; justify-content:center;
  border:0; background:var(--bg-soft); border-radius:10px; font-size:22px; cursor:pointer; color:var(--title)}
.mobile-menu{margin-top:14px}
.mobile-menu a{display:block; padding:13px 8px; font-weight:600; color:var(--title); border-bottom:1px solid var(--line)}
.mobile-menu .sub a{padding-left:24px; font-weight:500; font-size:14px; color:var(--body)}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative; min-height:88vh; display:flex; align-items:center; overflow:hidden}
.hero-slides{position:absolute; inset:0}
.hero-slides .slide{position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transform:scale(1.08); transition:opacity 1.4s ease, transform 7s ease}
.hero-slides .slide.on{opacity:1; transform:scale(1)}
.hero:after{content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(30,41,48,.82) 0%, rgba(30,41,48,.55) 45%, rgba(30,41,48,.15) 100%)}
.hero .container{position:relative; z-index:3; width:100%}
.hero-inner{max-width:680px; padding:60px 0; color:#fff}
.hero-sub{display:inline-block; font-weight:600; font-size:13px; letter-spacing:.24em; text-transform:uppercase;
  color:#fff; background:rgba(243,145,0,.85); padding:8px 18px; border-radius:50px; margin-bottom:22px}
.hero-title{font-size:clamp(38px,5.4vw,68px); color:#fff; line-height:1.08; margin:0 0 22px}
.hero-title em{color:var(--gold); font-style:italic}
.hero-text{font-size:18px; color:rgba(255,255,255,.9); max-width:560px; margin-bottom:34px}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap}
.hero-dots{position:absolute; left:0; right:0; bottom:30px; z-index:4; display:flex; gap:10px; justify-content:center}
.hero-dots button{width:11px; height:11px; border-radius:50%; border:2px solid rgba(255,255,255,.7);
  background:transparent; cursor:pointer; padding:0; transition:all .3s}
.hero-dots button.on{background:var(--gold); border-color:var(--gold); width:30px; border-radius:50px}
.hero-arrow{position:absolute; z-index:4; top:50%; transform:translateY(-50%); width:54px; height:54px;
  border-radius:50%; border:0; background:rgba(255,255,255,.14); color:#fff; font-size:24px; cursor:pointer;
  backdrop-filter:blur(4px); transition:all .3s; display:flex; align-items:center; justify-content:center}
.hero-arrow:hover{background:var(--primary)}
.hero-arrow.prev{left:24px}
.hero-arrow.next{right:24px}

/* vyhľadávací panel nehnuteľností */
.search-bar{position:relative; z-index:5; margin-top:-46px}
.search-card{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:22px;
  display:grid; grid-template-columns:repeat(4,1fr) auto; gap:14px; align-items:end}
.search-card .field{display:flex; flex-direction:column; gap:7px}
.search-card label{font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
.search-card select,.search-card input{height:50px; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:0 16px; font-family:var(--font); font-size:15px; color:var(--title); background:#fff; width:100%}
.search-card .btn{height:50px; line-height:50px}

/* ============================================================
   KARTY / KOMPONENTY
   ============================================================ */
.grid{display:grid; gap:30px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* service / feature box */
.box-item{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:38px 30px;
  transition:all .4s; height:100%}
.box-item:hover{box-shadow:var(--shadow); transform:translateY(-6px); border-color:transparent}
.box-item .box-icon{width:70px; height:70px; border-radius:18px; background:var(--primary-soft); color:var(--primary);
  display:flex; align-items:center; justify-content:center; font-size:34px; margin-bottom:22px; transition:all .4s}
.box-item:hover .box-icon{background:var(--primary); color:#fff; transform:rotate(-6deg)}
.box-item .box-title{font-size:21px; margin-bottom:12px}
.box-item .description{font-size:15px; margin-bottom:16px}

/* property card */
.property-card{background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm);
  transition:all .4s; height:100%; display:flex; flex-direction:column}
.property-card:hover{box-shadow:var(--shadow); transform:translateY(-6px)}
.property-card .media{position:relative; aspect-ratio:4/3; overflow:hidden}
.property-card .media img{width:100%; height:100%; object-fit:cover; transition:transform 1s}
.property-card:hover .media img{transform:scale(1.08)}
.property-card .tag{position:absolute; top:14px; left:14px; background:var(--secondary); color:#fff;
  font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:6px 13px; border-radius:50px}
.property-card .price{position:absolute; bottom:14px; right:14px; background:rgba(30,41,48,.85); color:#fff;
  font-family:var(--head); font-weight:700; font-size:17px; padding:7px 15px; border-radius:50px}
.property-card .body{padding:22px 22px 24px; display:flex; flex-direction:column; flex:1}
.property-card .ptitle{font-size:20px; margin-bottom:7px}
.property-card .ptitle a{color:var(--title)}
.property-card .ptitle a:hover{color:var(--primary)}
.property-card .loc{font-size:13.5px; color:var(--muted); display:flex; align-items:center; gap:6px; margin-bottom:16px}
.property-card .loc i{color:var(--primary)}
.property-card .meta{display:flex; gap:18px; padding-top:16px; margin-top:auto; border-top:1px solid var(--line);
  font-size:13.5px; color:var(--body)}
.property-card .meta span{display:flex; align-items:center; gap:6px}
.property-card .meta i{color:var(--primary); font-size:16px}

/* counter / štatistiky */
.counter-box{background-size:cover; background-position:center; position:relative; border-radius:var(--radius); overflow:hidden}
.counter-box:after{content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(243,145,0,.94),rgba(46,62,73,.9))}
.counter-grid{position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding:64px 40px; text-align:center}
.counter-box .number{font-family:var(--head); font-weight:800; font-size:50px; color:#fff; line-height:1}
.counter-box .text{color:rgba(255,255,255,.88); font-weight:500; margin-top:8px; letter-spacing:.04em}
.counter-box .plus{color:var(--gold)}

/* kroky / proces */
.steps{counter-reset:st; display:grid; grid-template-columns:repeat(4,1fr); gap:26px}
.step{position:relative; padding:36px 26px; background:#fff; border-radius:var(--radius); border:1px solid var(--line); text-align:center; transition:all .4s}
.step:hover{box-shadow:var(--shadow); transform:translateY(-5px)}
.step:before{counter-increment:st; content:counter(st,decimal-leading-zero); display:block; font-family:var(--head);
  font-weight:800; font-size:34px; color:var(--primary); opacity:.32; margin-bottom:10px}
.step .step-icon{font-size:30px; color:var(--secondary); margin-bottom:12px}
.step h4{font-size:18px; margin-bottom:8px}
.step p{font-size:14px; margin:0}

/* zoznam výhod */
.check-list li{display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; font-size:15.5px}
.check-list i{color:var(--primary); font-size:20px; flex:0 0 auto; margin-top:2px}

/* CTA banner */
.cta-banner{background-size:cover; background-position:center; position:relative; border-radius:var(--radius); overflow:hidden}
.cta-banner:after{content:""; position:absolute; inset:0; background:linear-gradient(100deg,rgba(30,41,48,.9),rgba(46,62,73,.7))}
.cta-inner{position:relative; z-index:2; padding:70px 50px; text-align:center; color:#fff}
.cta-inner h3{color:#fff; font-size:38px; margin-bottom:14px}
.cta-inner p{color:rgba(255,255,255,.88); max-width:600px; margin:0 auto 28px; font-size:17px}

/* testimonials */
.testimonial{background:#fff; border-radius:var(--radius); padding:36px 32px; box-shadow:var(--shadow-sm); height:100%}
.testimonial .stars{color:var(--gold); font-size:16px; margin-bottom:16px}
.testimonial .quote{font-size:16px; color:var(--title); font-style:italic; margin-bottom:22px}
.testimonial .who{display:flex; align-items:center; gap:14px}
.testimonial .who img{width:54px; height:54px; border-radius:50%; object-fit:cover}
.testimonial .who .name{font-family:var(--head); font-weight:700; color:var(--title); font-size:17px}
.testimonial .who .role{font-size:13px; color:var(--muted)}

/* agent / tím */
.agent-card{background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); transition:all .4s; text-align:center}
.agent-card:hover{box-shadow:var(--shadow); transform:translateY(-6px)}
.agent-card .media{aspect-ratio:1/1; overflow:hidden}
.agent-card .media img{width:100%; height:100%; object-fit:cover; transition:transform 1s}
.agent-card:hover .media img{transform:scale(1.07)}
.agent-card .body{padding:24px 20px}
.agent-card .name{font-size:20px; margin-bottom:4px}
.agent-card .role{color:var(--primary); font-weight:600; font-size:13px; letter-spacing:.04em; text-transform:uppercase}
.agent-card .socials{display:flex; gap:10px; justify-content:center; margin-top:14px}
.agent-card .socials a{width:38px; height:38px; border-radius:50%; background:var(--bg-soft); color:var(--secondary);
  display:flex; align-items:center; justify-content:center; font-size:16px}
.agent-card .socials a:hover{background:var(--primary); color:#fff}

/* blog / post card */
.post-card{background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); transition:all .4s; height:100%; display:flex; flex-direction:column}
.post-card:hover{box-shadow:var(--shadow); transform:translateY(-6px)}
.post-card .media{aspect-ratio:16/10; overflow:hidden}
.post-card .media img{width:100%; height:100%; object-fit:cover; transition:transform 1s}
.post-card:hover .media img{transform:scale(1.07)}
.post-card .body{padding:24px; display:flex; flex-direction:column; flex:1}
.post-card .date{font-size:12.5px; color:var(--muted); letter-spacing:.04em; text-transform:uppercase; margin-bottom:10px}
.post-card .date i{color:var(--primary); margin-right:6px}
.post-card .ptitle{font-size:21px; margin-bottom:12px; line-height:1.3}
.post-card .ptitle a{color:var(--title)}
.post-card .ptitle a:hover{color:var(--primary)}
.post-card .excerpt{font-size:14.5px; margin-bottom:16px}
.post-card .more-info{margin-top:auto}

/* regióny */
.region-card{position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; display:flex; align-items:flex-end}
.region-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1s}
.region-card:hover img{transform:scale(1.08)}
.region-card:after{content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(30,41,48,.85),transparent 70%)}
.region-card .rc-body{position:relative; z-index:2; padding:24px; color:#fff}
.region-card .rc-body h4{color:#fff; font-size:22px; margin:0 0 4px}
.region-card .rc-body span{font-size:13px; color:rgba(255,255,255,.8)}

/* FAQ akordeón */
.faq-item{background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:14px; overflow:hidden}
.faq-q{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; cursor:pointer;
  font-family:var(--head); font-weight:700; color:var(--title); font-size:18px}
.faq-q i{color:var(--primary); transition:transform .35s; flex:0 0 auto}
.faq-item.open .faq-q i{transform:rotate(45deg)}
.faq-a{max-height:0; overflow:hidden; transition:max-height .4s ease; padding:0 24px}
.faq-item.open .faq-a{max-height:400px; padding-bottom:22px}

/* ============================================================
   PAGE TITLE (vnútorné stránky)
   ============================================================ */
.page-title{position:relative; padding:120px 0 70px; background-size:cover; background-position:center; overflow:hidden}
.page-title:after{content:""; position:absolute; inset:0; background:linear-gradient(100deg,rgba(30,41,48,.86),rgba(46,62,73,.6))}
.page-title .container{position:relative; z-index:2}
.heading-primary{color:#fff; font-size:clamp(32px,4.4vw,52px); margin:0 0 14px}
.breadcrumbs{display:flex; gap:10px; align-items:center; font-size:14px; color:rgba(255,255,255,.85)}
.breadcrumbs a{color:rgba(255,255,255,.85)}
.breadcrumbs a:hover{color:var(--gold)}
.breadcrumbs .sep{width:5px; height:5px; border-radius:50%; background:var(--gold)}
.breadcrumbs .active{color:var(--gold)}

/* ============================================================
   FORMULÁRE
   ============================================================ */
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.field-group{margin-bottom:18px}
.field-group label{display:block; font-size:13px; font-weight:600; color:var(--title); margin-bottom:8px}
input,select,textarea{font-family:var(--font); font-size:15px; color:var(--title)}
.form input,.form select,.form textarea,
.contact-form input,.contact-form select,.contact-form textarea{
  width:100%; border:1px solid var(--line); border-radius:var(--radius-sm); padding:0 18px; height:54px; background:#fff; transition:border-color .3s}
.contact-form textarea,.form textarea{height:150px; padding:16px 18px; line-height:1.6}
.form input:focus,.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus,.form textarea:focus{
  outline:0; border-color:var(--primary)}
.form-note{font-size:13px; color:var(--muted)}

/* info box (kontakt) */
.info-item{display:flex; gap:18px; align-items:flex-start; margin-bottom:26px}
.info-item .ic{width:56px; height:56px; border-radius:16px; background:var(--primary-soft); color:var(--primary);
  display:flex; align-items:center; justify-content:center; font-size:24px; flex:0 0 auto}
.info-item h5{font-size:17px; margin:0 0 4px}
.info-item p,.info-item a{margin:0; font-size:15px; color:var(--body)}

/* ============================================================
   PÄTIČKA
   ============================================================ */
.footer-cta{background:linear-gradient(100deg,var(--primary),var(--secondary)); }
.footer-cta .container{display:flex; align-items:center; justify-content:space-between; gap:30px; padding:46px 22px; flex-wrap:wrap}
.footer-cta h3{color:#fff; font-size:30px; margin:0}
.footer-cta p{color:rgba(255,255,255,.85); margin:6px 0 0}

.site-footer{background:var(--footer-bg); color:var(--footer-text); padding-top:96px}
.footer-main{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px; padding-top:10px; padding-bottom:50px}
.site-footer h4{color:#fff; font-size:18px; margin-bottom:22px}
.footer-brand .logo-txt{font-family:var(--head); font-weight:900; font-size:26px; color:#fff}
.footer-brand .logo-txt b{color:var(--gold)}
.footer-brand p{margin:16px 0 20px; font-size:14.5px; color:var(--footer-text)}
.footer-info li{display:flex; gap:12px; align-items:flex-start; margin-bottom:13px; font-size:14.5px}
.footer-info i{color:var(--gold); font-size:18px; margin-top:2px}
.footer-info a{color:var(--footer-text)}
.footer-info a:hover{color:#fff}
.footer-menu li{margin-bottom:11px}
.footer-menu a{color:var(--footer-text); font-size:14.5px}
.footer-menu a:hover{color:var(--gold); padding-left:5px}
.footer-social{display:flex; gap:12px; margin-top:18px}
.footer-social a{width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.08); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:17px}
.footer-social a:hover{background:var(--primary)}
.newsletter-form{display:flex; gap:10px; margin-top:8px}
.newsletter-form input{flex:1; height:50px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05);
  border-radius:50px; padding:0 20px; color:#fff}
.newsletter-form input::placeholder{color:rgba(255,255,255,.5)}
.newsletter-form .btn{height:50px; line-height:50px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08); padding:24px 0; font-size:13.5px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
.footer-bottom a{color:var(--footer-text)} .footer-bottom a:hover{color:#fff}

/* ============================================================
   ANIMÁCIE (scroll reveal — z témy WOW efekt)
   ============================================================ */
.reveal{opacity:0; transform:translateY(40px); transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.12s} .reveal.d2{transition-delay:.24s} .reveal.d3{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .hero-slides .slide{transition:opacity .6s}
}

/* späť hore */
.to-top{position:fixed; left:24px; bottom:24px; width:50px; height:50px; border-radius:50%; border:0;
  background:var(--primary); color:#fff; font-size:22px; cursor:pointer; opacity:0; visibility:hidden;
  transform:translateY(14px); transition:all .35s; z-index:800; box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center}
.to-top.show{opacity:1; visibility:visible; transform:none}

/* utilita */
.media-split{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center}
.media-split img{border-radius:var(--radius); box-shadow:var(--shadow); width:100%}
.lead{font-size:18px; color:var(--title)}
.divider{height:1px; background:var(--line); margin:0}
.badge-soft{display:inline-block; background:var(--primary-soft); color:var(--primary); font-weight:600; font-size:12.5px;
  letter-spacing:.06em; text-transform:uppercase; padding:6px 14px; border-radius:50px}

/* ============================================================
   RESPONZIVITA
   ============================================================ */
@media (max-width:1024px){
  .section{padding:78px 0}
  .footer-main{grid-template-columns:1fr 1fr; gap:34px}
  .counter-grid{grid-template-columns:repeat(2,1fr); padding:48px 30px}
  .steps{grid-template-columns:repeat(2,1fr)}
  .search-card{grid-template-columns:repeat(2,1fr)}
  .search-card .btn{grid-column:1 / -1}
}
@media (max-width:980px){
  .main-menu,.top-toolbar .toolbar-info .hide-sm{display:none}
  .burger{display:flex}
  .main-menu{display:none}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .media-split{grid-template-columns:1fr; gap:30px}
  .sc-heading .title,.sc-heading .second-title{font-size:34px}
}
@media (max-width:760px){
  .header-actions .btn-book{display:none}
  .site-header .bar{height:72px}
  .hero{min-height:80vh}
  .hero-text{font-size:16px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .counter-grid{grid-template-columns:1fr 1fr; padding:40px 20px}
  .footer-main{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column; text-align:center}
  .cta-inner h3{font-size:28px}
  .section{padding:60px 0}
  .top-toolbar .container{justify-content:center}
  .toolbar-social{display:none}
  .hero-arrow{display:none}
}
@media (max-width:420px){
  .brand .logo-txt{font-size:21px}
  .counter-grid{grid-template-columns:1fr}
}

/* ============================================================
   PRÉMIOVÉ KOMPONENTY + ROZŠÍRENÉ ANIMÁCIE  (DLUGO 2026)
   ============================================================ */
/* logo v hlavičke/pätičke */
.brand img{height:46px; width:auto; display:block}
.footer-brand img{height:48px; width:auto; margin-bottom:16px}
@media(max-width:760px){ .brand img{height:38px} }

/* ---------- HERO 2 (vycentrovaný text + showcase panel 80%) ---------- */
.hero2{position:relative; padding:74px 0 0; text-align:center; overflow:hidden;
  background:radial-gradient(1200px 520px at 50% -10%, #fff6e9 0%, var(--bg) 60%)}
.hero2:before{content:""; position:absolute; top:-120px; left:-120px; width:380px; height:380px; border-radius:50%;
  background:radial-gradient(circle,rgba(243,145,0,.16),transparent 70%); animation:floaty 9s ease-in-out infinite}
.hero2:after{content:""; position:absolute; top:40px; right:-100px; width:320px; height:320px; border-radius:50%;
  background:radial-gradient(circle,rgba(0,174,255,.12),transparent 70%); animation:floaty 11s ease-in-out infinite reverse}
.hero2 .container{position:relative; z-index:3}
.hero2 .hero-text{max-width:860px; margin:0 auto}
.hero2 .hero-sub{display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:13px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--primary-dark); background:var(--primary-soft); padding:9px 18px; border-radius:50px; margin-bottom:22px}
.hero2 .hero-sub .dot{width:8px; height:8px; border-radius:50%; background:var(--primary); animation:pulse 1.8s infinite}
.hero2 .hero-title{font-size:clamp(36px,5.2vw,64px); color:var(--title); line-height:1.07; margin:0 0 20px}
.hero2 .hero-title em{color:var(--primary); font-style:italic; position:relative; white-space:nowrap}
.hero2 .hero-title em:after{content:""; position:absolute; left:0; right:0; bottom:4px; height:10px;
  background:rgba(255,168,39,.32); border-radius:6px; z-index:-1}
.hero2 .hero-text p{font-size:18px; color:var(--body); max-width:620px; margin:0 auto 30px}
.hero2 .hero-cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

.hero-showcase{position:relative; width:90%; max-width:1080px; margin:58px auto 0; aspect-ratio:16/9;
  border-radius:22px; overflow:hidden; box-shadow:var(--shadow-lg)}
.hs-track{display:flex; height:100%; transition:transform .9s cubic-bezier(.65,0,.2,1)}
.hs-slide{flex:0 0 100%; height:100%; background-size:cover; background-position:center; position:relative}
.hs-slide:after{content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(46,62,73,.55),transparent 45%)}
.hs-slide.active{animation:kenburns 7s ease-out forwards}
.hs-caption{position:absolute; left:24px; bottom:22px; z-index:3; color:#fff; text-align:left}
.hs-caption .k-tag{display:inline-block; background:var(--primary); color:#fff; font-size:11px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; padding:5px 12px; border-radius:50px; margin-bottom:8px}
.hs-caption h4{color:#fff; font-size:22px; margin:0}
.hs-counter{position:absolute; bottom:22px; right:24px; z-index:3; color:#fff; font-family:var(--head); font-weight:700;
  font-size:17px; background:rgba(46,62,73,.45); backdrop-filter:blur(6px); padding:8px 16px; border-radius:50px}
.hs-counter b{color:var(--gold)}
.hs-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:48px; height:48px; border-radius:50%;
  border:0; background:rgba(255,255,255,.22); color:#fff; font-size:22px; cursor:pointer; backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; transition:all .3s}
.hs-arrow:hover{background:var(--primary)}
.hs-arrow.prev{left:18px} .hs-arrow.next{right:18px}
.hs-dots{position:absolute; bottom:24px; left:50%; transform:translateX(-50%); z-index:4; display:flex; gap:8px}
.hs-dots button{width:9px; height:9px; border-radius:50%; border:0; background:rgba(255,255,255,.5); cursor:pointer; transition:all .3s; padding:0}
.hs-dots button.on{background:var(--gold); width:26px; border-radius:50px}
@media(max-width:760px){ .hero-showcase{width:94%} .hs-caption h4{font-size:17px} }

/* ---------- USP záruky band ---------- */
.usp-band{background:var(--secondary); position:relative; overflow:hidden}
.usp-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0}
.usp{padding:34px 26px; text-align:center; color:#fff; border-right:1px solid rgba(255,255,255,.09); transition:background .4s}
.usp:last-child{border-right:0}
.usp:hover{background:rgba(255,255,255,.04)}
.usp .usp-ic{font-size:36px; color:var(--gold); margin-bottom:12px; display:inline-block; transition:transform .5s}
.usp:hover .usp-ic{transform:translateY(-6px) scale(1.12)}
.usp h4{color:#fff; font-size:18px; margin:0 0 5px}
.usp p{color:rgba(255,255,255,.66); font-size:13.5px; margin:0}
@media(max-width:760px){ .usp-grid{grid-template-columns:1fr 1fr} .usp:nth-child(2){border-right:0} }

/* ---------- interaktívna kalkulačka odhadu ---------- */
.calc{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:40px; border:1px solid var(--line)}
.calc .calc-field{margin-bottom:26px}
.calc label{display:flex; justify-content:space-between; font-weight:600; color:var(--title); margin-bottom:12px; font-size:15px}
.calc label b{color:var(--primary); font-family:var(--head)}
.calc select{width:100%; height:52px; border:1px solid var(--line); border-radius:var(--radius-sm); padding:0 16px; font-size:15px; color:var(--title)}
.calc input[type=range]{-webkit-appearance:none; width:100%; height:8px; border-radius:50px; background:var(--secondary-soft); outline:none}
.calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:26px; height:26px; border-radius:50%;
  background:var(--primary); cursor:pointer; box-shadow:0 4px 12px -3px rgba(243,145,0,.8); border:3px solid #fff}
.calc input[type=range]::-moz-range-thumb{width:26px; height:26px; border-radius:50%; background:var(--primary); cursor:pointer; border:3px solid #fff}
.calc-result{background:linear-gradient(120deg,var(--primary),var(--gold)); border-radius:var(--radius-sm); padding:24px; text-align:center; color:#fff; margin-top:6px}
.calc-result .cr-label{font-size:13px; letter-spacing:.08em; text-transform:uppercase; opacity:.9}
.calc-result .cr-value{font-family:var(--head); font-weight:800; font-size:34px; line-height:1.1; margin:6px 0}
.calc-result small{opacity:.85; font-size:12px}

/* ---------- marquee portálov ---------- */
.marquee{overflow:hidden; position:relative; -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex; gap:60px; width:max-content; animation:scrollx 26s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee .m-item{font-family:var(--head); font-weight:700; font-size:24px; color:var(--muted); white-space:nowrap; display:flex; align-items:center; gap:10px}
.marquee .m-item i{color:var(--primary); font-size:18px}

/* ---------- prémiové „prečo my" s číslom + ikonou ---------- */
.feature-lg{display:flex; gap:20px; align-items:flex-start; padding:26px; border-radius:var(--radius); transition:all .4s; background:#fff; border:1px solid transparent}
.feature-lg:hover{box-shadow:var(--shadow); border-color:var(--line); transform:translateY(-4px)}
.feature-lg .fl-num{font-family:var(--head); font-weight:800; font-size:30px; color:var(--primary); opacity:.4; flex:0 0 auto; line-height:1}
.feature-lg .fl-ic{width:58px; height:58px; flex:0 0 auto; border-radius:16px; background:var(--primary-soft); color:var(--primary);
  display:flex; align-items:center; justify-content:center; font-size:28px}
.feature-lg h4{font-size:19px; margin:0 0 6px}
.feature-lg p{margin:0; font-size:14.5px}

/* ---------- sekčný štítok / dekor ---------- */
.kicker-line{display:flex; align-items:center; gap:14px; justify-content:center; margin-bottom:14px}
.kicker-line span{height:2px; width:38px; background:var(--gold)}
.kicker-line b{color:var(--primary); font-weight:600; font-size:13px; letter-spacing:.2em; text-transform:uppercase}

/* ---------- glass info chip na hero/sekciách ---------- */
.glass-chip{display:inline-flex; align-items:center; gap:10px; background:rgba(255,255,255,.7); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.6); padding:10px 18px; border-radius:50px; font-weight:600; color:var(--title); box-shadow:var(--shadow-sm)}
.glass-chip i{color:var(--primary)}

/* ---------- rozšírené reveal varianty ---------- */
.reveal-l{opacity:0; transform:translateX(-44px); transition:opacity .8s, transform .8s}
.reveal-r{opacity:0; transform:translateX(44px); transition:opacity .8s, transform .8s}
.reveal-zoom{opacity:0; transform:scale(.9); transition:opacity .8s, transform .8s}
.reveal-l.in,.reveal-r.in,.reveal-zoom.in{opacity:1; transform:none}

/* ---------- animovaná linka v nadpise ---------- */
.fancy-link{position:relative}
.fancy-link:after{content:""; position:absolute; left:0; bottom:-3px; width:0; height:2px; background:var(--primary); transition:width .35s}
.fancy-link:hover:after{width:100%}

/* ---------- keyframes ---------- */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(26px)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(243,145,0,.6)}70%{box-shadow:0 0 0 10px rgba(243,145,0,0)}100%{box-shadow:0 0 0 0 rgba(243,145,0,0)}}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.09)}}
@keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.bob{animation:bob 3s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  .hero2:before,.hero2:after,.hs-slide.active,.marquee-track,.bob{animation:none}
  .reveal-l,.reveal-r,.reveal-zoom{opacity:1; transform:none; transition:none}
}

/* ---------- YouTube lite-embed facade ---------- */
.yt-lite{position:absolute; inset:0; background-size:cover; background-position:center; cursor:pointer; outline:none}
.yt-lite:after{content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(46,62,73,.45),rgba(46,62,73,.12)); transition:background .4s}
.yt-lite:hover:after{background:linear-gradient(0deg,rgba(46,62,73,.35),rgba(46,62,73,.05))}
.yt-lite .yt-play{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:3;
  width:88px; height:88px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:34px; box-shadow:0 16px 40px -10px rgba(243,145,0,.8); transition:transform .35s}
.yt-lite .yt-play:before{content:""; position:absolute; inset:-12px; border-radius:50%; border:2px solid rgba(255,255,255,.55); animation:pulse2 2.2s infinite}
.yt-lite:hover .yt-play{transform:translate(-50%,-50%) scale(1.08)}
.yt-lite .yt-play i{margin-left:5px}
.yt-lite.played{cursor:default}
.yt-lite.played:after,.yt-lite.played .yt-play,.yt-lite.played .hs-caption{display:none}
@keyframes pulse2{0%{transform:scale(1);opacity:.9}70%{transform:scale(1.25);opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){ .yt-lite .yt-play:before{animation:none} }

/* ---------- hero autoplay video ---------- */
.hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero-showcase .hero-video + .sold-stamp{z-index:4}
.hero-showcase:has(.hero-video):after,.hero-showcase .hs-caption{z-index:3}
.hero-showcase .hero-video ~ .hs-caption{position:absolute; left:24px; top:22px; bottom:auto}
.hero-showcase .hero-video ~ .hs-caption,.hero-showcase .hero-video{}
.hero-showcase .hero-video::-webkit-media-controls{display:none!important}
.hero-showcase:before{content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(0deg,rgba(46,62,73,.5),transparent 50%)}
.sold-stamp{position:absolute; top:30px; right:34px; z-index:4; font-family:var(--head); font-weight:800;
  font-size:36px; letter-spacing:.03em; text-transform:uppercase; color:#e8463a; border:5px solid #e8463a;
  padding:10px 28px; border-radius:12px; transform:rotate(-11deg); background:rgba(255,255,255,.86);
  box-shadow:0 16px 34px -12px rgba(0,0,0,.45); animation:stampin .7s cubic-bezier(.2,1.3,.4,1) .6s both}
@keyframes stampin{from{opacity:0; transform:rotate(-11deg) scale(2)}to{opacity:1; transform:rotate(-11deg) scale(1)}}
@media (prefers-reduced-motion:reduce){ .sold-stamp{animation:none} }

/* ============================================================
   DOMI — realitný chatbot
   ============================================================ */
#domi{position:fixed; right:22px; bottom:22px; z-index:1200}
.domi-fab{width:64px; height:64px; border-radius:50%; border:0; cursor:pointer; position:relative;
  background:linear-gradient(135deg,var(--primary),var(--gold)); color:#fff; font-size:30px;
  box-shadow:0 18px 40px -12px rgba(243,145,0,.7); transition:transform .3s, opacity .3s; display:flex; align-items:center; justify-content:center}
.domi-fab:hover{transform:scale(1.08)}
.domi-fab.hidden{opacity:0; visibility:hidden; transform:scale(.6)}
.domi-fab-dot{position:absolute; top:12px; right:12px; width:12px; height:12px; border-radius:50%; background:#3ad07a; border:2px solid #fff; animation:pulse 1.8s infinite}
.domi-panel{position:absolute; right:0; bottom:0; width:min(380px,calc(100vw - 32px)); height:min(580px,calc(100vh - 110px));
  background:#fff; border-radius:20px; box-shadow:var(--shadow-lg); display:flex; flex-direction:column; overflow:hidden;
  opacity:0; visibility:hidden; transform:translateY(24px) scale(.96); transform-origin:bottom right; transition:all .35s cubic-bezier(.2,1,.3,1)}
.domi-panel.open{opacity:1; visibility:visible; transform:none}
.domi-head{display:flex; align-items:center; gap:12px; padding:16px 18px; background:linear-gradient(135deg,var(--secondary),#1c2730); color:#fff}
.domi-ava{width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--gold)); display:flex; align-items:center; justify-content:center; font-size:22px; color:#fff; flex:0 0 auto}
.domi-h-txt{display:flex; flex-direction:column; line-height:1.2; flex:1}
.domi-h-txt b{font-family:var(--head); font-size:17px}
.domi-h-txt span{font-size:11.5px; color:rgba(255,255,255,.65)}
.domi-x{margin-left:auto; background:rgba(255,255,255,.12); border:0; width:34px; height:34px; border-radius:50%; color:#fff; cursor:pointer; font-size:18px; display:flex; align-items:center; justify-content:center}
.domi-x:hover{background:rgba(255,255,255,.25)}
.domi-body{flex:1; overflow-y:auto; padding:18px; background:var(--bg-soft); display:flex; flex-direction:column; gap:10px}
.domi-msg{max-width:84%; padding:11px 15px; border-radius:16px; font-size:14px; line-height:1.5; animation:domiIn .3s ease}
.domi-msg.bot{background:#fff; color:var(--title); border:1px solid var(--line); border-bottom-left-radius:5px; align-self:flex-start}
.domi-msg.user{background:var(--primary); color:#fff; border-bottom-right-radius:5px; align-self:flex-end}
.domi-msg a:not(.domi-cta){color:var(--primary); font-weight:600; text-decoration:underline}
.domi-msg.user a{color:#fff}
.domi-cta{display:inline-block; margin-top:8px; background:var(--secondary); color:#fff!important; font-weight:600; font-size:13px;
  padding:8px 14px; border-radius:50px; text-decoration:none!important; transition:background .3s}
.domi-cta:hover{background:var(--primary)}
.domi-typing{display:flex; gap:4px; align-items:center}
.domi-typing span{width:7px; height:7px; border-radius:50%; background:var(--muted); animation:domiBlink 1s infinite}
.domi-typing span:nth-child(2){animation-delay:.2s} .domi-typing span:nth-child(3){animation-delay:.4s}
.domi-quick{display:flex; gap:7px; padding:10px 14px 0; flex-wrap:wrap; background:var(--bg-soft)}
.domi-quick button{background:#fff; border:1px solid var(--line); color:var(--primary); font-size:12.5px; font-weight:500;
  padding:7px 12px; border-radius:50px; cursor:pointer; transition:all .25s; font-family:var(--font)}
.domi-quick button:hover{background:var(--primary); color:#fff; border-color:var(--primary)}
.domi-input{display:flex; gap:8px; padding:14px; background:var(--bg-soft)}
.domi-input input{flex:1; height:46px; border:1px solid var(--line); border-radius:50px; padding:0 18px; font-family:var(--font); font-size:14px; color:var(--title); background:#fff}
.domi-input input:focus{outline:0; border-color:var(--primary)}
.domi-input button{width:46px; height:46px; flex:0 0 auto; border:0; border-radius:50%; background:var(--primary); color:#fff; font-size:20px; cursor:pointer; transition:background .3s}
.domi-input button:hover{background:var(--primary-dark)}
@keyframes domiIn{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
@keyframes domiBlink{0%,100%{opacity:.3}50%{opacity:1}}
@media(max-width:520px){ #domi{right:14px; bottom:14px} .domi-panel{height:min(560px,calc(100vh - 90px))} }

/* ---------- hero YouTube autoplay pozadie ---------- */
.hero-yt{position:absolute; inset:0; width:100%; height:100%; border:0; z-index:1; pointer-events:none}
.hero-showcase:has(.hero-yt):before{content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(0deg,rgba(46,62,73,.45),transparent 55%)}

/* ============================================================
   HERO — celoplošné video + text navrchu
   ============================================================ */
.hero-v{position:relative; min-height:69vh; display:flex; align-items:center; overflow:hidden; text-align:center}
.hero-v-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.hero-v:after{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(46,62,73,.72),rgba(46,62,73,.5) 45%,rgba(30,41,48,.82))}
.hero-v .sold-stamp{z-index:3}
.hero-v-inner{position:relative; z-index:2; width:100%; padding:90px 22px}
.hero-v .hero-sub{display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:13px; letter-spacing:.16em;
  text-transform:uppercase; color:#fff; background:rgba(243,145,0,.92); padding:9px 18px; border-radius:50px; margin-bottom:22px}
.hero-v .hero-sub .dot{width:8px; height:8px; border-radius:50%; background:#fff; animation:pulse 1.8s infinite}
.hero-v .hero-title{color:#fff; font-size:clamp(38px,5.4vw,66px); line-height:1.07; margin:0 0 22px}
.hero-v .hero-title em{color:var(--gold); font-style:italic; position:relative; white-space:nowrap}
.hero-v .hero-title em:after{content:""; position:absolute; left:0; right:0; bottom:4px; height:10px; background:rgba(255,168,39,.32); border-radius:6px; z-index:-1}
.hero-v p{color:rgba(255,255,255,.92); font-size:18px; max-width:660px; margin:0 auto 30px}
.hero-v .hero-cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.search-wrap{position:relative; z-index:6; margin-top:-46px; margin-bottom:8px}
@media(max-width:760px){ .hero-v{min-height:58vh} .hero-v p{font-size:16px} .search-wrap{margin-top:22px} }

/* mobilná pečiatka */
@media(max-width:760px){ .sold-stamp{font-size:30px; padding:8px 22px; border-width:4px; top:16px; right:16px} }

/* ============================================================
   OBĽÚBENÉ (shortlist) + HYPOTEKÁRNA KALKULAČKA
   ============================================================ */
.fav-btn{position:relative; width:46px; height:46px; border:0; background:var(--bg-soft); border-radius:12px; cursor:pointer; color:var(--secondary); font-size:21px; display:flex; align-items:center; justify-content:center; transition:color .25s}
.fav-btn:hover{color:var(--primary)}
.fav-count{position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 5px; border-radius:50px; background:var(--primary); color:#fff; font-family:var(--font); font-size:11px; font-weight:700; display:none; align-items:center; justify-content:center}
.fav-heart{position:absolute; top:12px; right:12px; z-index:5; width:40px; height:40px; border:0; border-radius:50%; background:rgba(255,255,255,.92); color:var(--muted); font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .25s; box-shadow:var(--shadow-sm)}
.fav-heart:hover{transform:scale(1.12); color:var(--primary)}
.fav-heart.on{background:var(--primary); color:#fff; animation:favpop .35s}
@keyframes favpop{0%{transform:scale(1)}50%{transform:scale(1.32)}100%{transform:scale(1)}}
.fav-panel-wrap{position:fixed; inset:0; background:rgba(30,41,48,.5); z-index:1300; display:flex; align-items:flex-start; justify-content:flex-end; padding:88px 24px}
.fav-panel{background:#fff; width:min(380px,90vw); border-radius:16px; box-shadow:var(--shadow-lg); padding:20px; animation:domiIn .3s}
.fav-p-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.fav-p-head b{font-family:var(--head); font-size:18px; color:var(--title)}
.fav-p-x{border:0; background:var(--bg-soft); width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:18px; color:var(--title)}
.fav-list li{display:flex; gap:10px; align-items:flex-start; padding:11px 0; border-bottom:1px solid var(--line); font-size:14.5px; color:var(--title)}
.fav-list li i{color:var(--primary); margin-top:3px}
.fav-list li.empty{color:var(--muted); border:0; display:block}
.mort-out{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:6px}
.mort-out .calc-result{margin-top:0}
.mort-out .calc-result.sec{background:linear-gradient(120deg,var(--secondary),#1c2730)}
.mort-out .cr-value{font-size:25px}
@media(max-width:520px){ .mort-out{grid-template-columns:1fr} }

/* ============================================================
   REZERVÁCIA OBHLIADKY + POROVNANIE NEHNUTEĽNOSTÍ
   ============================================================ */
.booking{display:grid; grid-template-columns:.9fr 1.1fr; gap:44px; align-items:start; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:44px}
.slot-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.slot-grid.two{grid-template-columns:repeat(2,1fr)}
.slot{position:relative; display:block}
.slot input{position:absolute; opacity:0; inset:0; width:100%; height:100%; cursor:pointer; margin:0}
.slot span{display:flex; align-items:center; justify-content:center; gap:7px; height:46px; border:1px solid var(--line); border-radius:var(--radius-sm); cursor:pointer; font-weight:600; color:var(--title); transition:all .25s}
.slot span:hover{border-color:var(--primary)}
.slot input:checked + span{background:var(--primary); color:#fff; border-color:var(--primary)}
@media(max-width:860px){ .booking{grid-template-columns:1fr; padding:26px} }

.cmp-btn{position:absolute; top:12px; left:12px; z-index:5; border:0; border-radius:50px; background:rgba(255,255,255,.92);
  color:var(--secondary); font-family:var(--font); font-size:12px; font-weight:600; padding:7px 12px; cursor:pointer;
  display:flex; align-items:center; gap:6px; box-shadow:var(--shadow-sm); transition:all .25s}
.cmp-btn:hover{color:var(--primary)}
.cmp-btn.on{background:var(--secondary); color:#fff}
.cmp-bar{position:fixed; left:0; right:0; bottom:-140px; z-index:1150; background:#fff; box-shadow:0 -10px 40px -16px rgba(46,62,73,.4);  border-top:1px solid var(--line); display:flex; align-items:center; justify-content:flex-start; gap:18px; padding:14px 24px; transition:bottom .4s}
.cmp-bar.show{bottom:0}
.cmp-items{display:flex; gap:10px; overflow-x:auto}
.cmp-thumb{position:relative; width:62px; height:48px; border-radius:8px; overflow:hidden; flex:0 0 auto; box-shadow:var(--shadow-sm)}
.cmp-thumb img{width:100%; height:100%; object-fit:cover}
.cmp-thumb .rm{position:absolute; top:1px; right:1px; width:18px; height:18px; border:0; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; font-size:11px; cursor:pointer; line-height:18px; padding:0}
.cmp-actions{display:flex; gap:10px; align-items:center; flex:0 0 auto}
.cmp-modal{position:fixed; inset:0; background:rgba(30,41,48,.6); z-index:1400; display:flex; align-items:center; justify-content:center; padding:24px; overflow:auto}
.cmp-card{background:#fff; border-radius:16px; max-width:980px; width:100%; max-height:90vh; overflow:auto; box-shadow:var(--shadow-lg); animation:domiIn .3s}
.cmp-head{display:flex; align-items:center; justify-content:space-between; padding:18px 24px; border-bottom:1px solid var(--line); position:sticky; top:0; background:#fff; z-index:2}
.cmp-head b{font-family:var(--head); font-size:19px; color:var(--title)}
.cmp-x{border:0; background:var(--bg-soft); width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:18px; color:var(--title)}
.cmp-table{width:100%; border-collapse:collapse}
.cmp-table th,.cmp-table td{padding:13px 16px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; font-size:14px; color:var(--body)}
.cmp-table th{background:var(--bg-soft); font-weight:600; color:var(--title); width:120px; white-space:nowrap}
.cmp-table td{font-weight:500; color:var(--title)}
.cmp-table img{width:100%; height:110px; object-fit:cover; border-radius:8px}
.cmp-table .cprice{font-family:var(--head); font-weight:800; color:var(--primary); font-size:18px}
@media(max-width:760px){ .cmp-bar{flex-direction:column; gap:10px; padding:12px} .cmp-table th{width:90px} }

/* ============================================================
   CENOVÁ MAPA REGIÓNOV + E-MAILOVÉ UPOZORNENIA
   ============================================================ */
.pm-tabs{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:26px}
.pm-tabs button{padding:10px 18px; border:1px solid var(--line); background:#fff; border-radius:50px; cursor:pointer; font-weight:600; color:var(--title); font-family:var(--font); font-size:14px; transition:all .25s}
.pm-tabs button:hover{border-color:var(--primary)}
.pm-tabs button.on{background:var(--primary); color:#fff; border-color:var(--primary)}
.pm-panel{max-width:620px; margin:0 auto; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:34px; text-align:center}
.pm-region{font-family:var(--head); font-weight:800; font-size:26px; color:var(--title)}
.pm-price{font-size:17px; color:var(--body); margin:6px 0 18px}
.pm-price b{font-family:var(--head); font-weight:800; font-size:40px; color:var(--primary)}
.pm-bar{height:12px; background:var(--secondary-soft); border-radius:50px; overflow:hidden; margin-bottom:18px}
.pm-bar span{display:block; height:100%; background:linear-gradient(90deg,var(--gold),var(--primary)); border-radius:50px; width:0; transition:width .8s cubic-bezier(.4,0,.2,1)}
.pm-note{color:var(--body); margin-bottom:20px; font-size:15px}

.alert-band{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; background:linear-gradient(120deg,var(--secondary),#1c2730); border-radius:var(--radius); padding:48px; color:#fff; position:relative; overflow:hidden}
.alert-band:before{content:""; position:absolute; top:-80px; right:-60px; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle,rgba(243,145,0,.25),transparent 70%)}
.alert-band .a-info{position:relative; z-index:2}
.alert-band h2{color:#fff; font-size:32px; margin:6px 0 12px}
.alert-band p{color:rgba(255,255,255,.82); margin:0}
.alert-band .kicker-line{justify-content:flex-start} .alert-band .kicker-line b{color:var(--gold)}
.alert-band .form{position:relative; z-index:2}
.alert-band .form input,.alert-band .form select{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:#fff}
.alert-band .form input::placeholder{color:rgba(255,255,255,.55)}
.alert-band .form select option{color:#222}
@media(max-width:860px){ .alert-band{grid-template-columns:1fr; padding:30px} }

/* ---------- Naposledy predané (sociálny dôkaz) ---------- */
.sold-card{background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); transition:all .4s; position:relative}
.sold-card:hover{box-shadow:var(--shadow); transform:translateY(-6px)}
.sold-card .media{position:relative; aspect-ratio:4/3; overflow:hidden}
.sold-card .media img{width:100%; height:100%; object-fit:cover; transition:transform 1s}
.sold-card:hover .media img{transform:scale(1.07)}
.sold-card .media:after{content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(46,62,73,.4),transparent 55%)}
.sold-badge{position:absolute; top:12px; left:12px; z-index:2; background:#1b7a3f; color:#fff; font-size:11.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; padding:6px 13px; border-radius:50px; display:inline-flex; gap:5px; align-items:center}
.sold-card .body{padding:18px 20px}
.sold-card .ptitle{font-size:17px; margin:0 0 5px; color:var(--title); font-family:var(--head); font-weight:700}
.sold-card .loc{font-size:13px; color:var(--muted); display:flex; gap:6px; align-items:center; margin-bottom:12px}
.sold-card .loc i{color:var(--primary)}
.sold-card .sold-days{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:#1b7a3f; background:#e6f7ec; padding:6px 12px; border-radius:50px}

/* lazy mapa placeholder */
.lazy-map{position:relative; border-radius:var(--radius); overflow:hidden; background:var(--secondary-soft); display:flex; align-items:center; justify-content:center}
.lazy-map span{color:var(--muted); font-weight:600; display:flex; gap:9px; align-items:center; font-size:15px}
.lazy-map span i{color:var(--primary); font-size:20px}

/* ============================================================
   PREPÍNAČ TÉMY (tmavá téma)
   ============================================================ */
.theme-btn{width:46px; height:46px; border:0; background:var(--bg-soft); border-radius:12px; cursor:pointer; color:var(--secondary); font-size:21px; display:flex; align-items:center; justify-content:center; transition:color .25s}
.theme-btn:hover{color:var(--primary)}
html[data-theme="dark"] .theme-btn{color:var(--gold)}

html[data-theme="dark"]{
  --primary-soft:#33291a; --secondary-soft:#222a35;
  --title:#eef2f6; --body:#aeb7c2; --muted:#7f8a99;
  --line:#2b333f; --bg:#13181f; --bg-soft:#1a212b; --footer-bg:#0d1117;
  --shadow-sm:0 6px 20px -10px rgba(0,0,0,.55); --shadow:0 24px 50px -28px rgba(0,0,0,.65); --shadow-lg:0 40px 80px -40px rgba(0,0,0,.75);
}
html[data-theme="dark"] body{background:var(--bg)}
html[data-theme="dark"] .box-item,html[data-theme="dark"] .property-card,html[data-theme="dark"] .testimonial,
html[data-theme="dark"] .calc,html[data-theme="dark"] .post-card,html[data-theme="dark"] .agent-card,
html[data-theme="dark"] .faq-item,html[data-theme="dark"] .sub-menu,html[data-theme="dark"] .search-card,
html[data-theme="dark"] .booking,html[data-theme="dark"] .pm-panel,html[data-theme="dark"] .sold-card,
html[data-theme="dark"] .fav-panel,html[data-theme="dark"] .cmp-card,html[data-theme="dark"] .cmp-bar,
html[data-theme="dark"] .step,html[data-theme="dark"] .feature-lg,html[data-theme="dark"] .pm-tabs button{background:#1e2630}
html[data-theme="dark"] .site-header{background:rgba(19,24,31,.96)}
html[data-theme="dark"] .domi-body{background:#13181f}
html[data-theme="dark"] .domi-msg.bot{background:#1e2630; border-color:#2b333f}
html[data-theme="dark"] .domi-quick,html[data-theme="dark"] .domi-input{background:#13181f}
html[data-theme="dark"] .domi-quick button{background:#1e2630}
html[data-theme="dark"] .calc select,html[data-theme="dark"] .form input,html[data-theme="dark"] .form select,
html[data-theme="dark"] .form textarea,html[data-theme="dark"] .contact-form input,html[data-theme="dark"] .contact-form textarea,
html[data-theme="dark"] .contact-form select,html[data-theme="dark"] .search-card select,html[data-theme="dark"] .search-card input,
html[data-theme="dark"] .domi-input input{background:#13181f; color:var(--title); border-color:#2b333f}
html[data-theme="dark"] .fav-heart,html[data-theme="dark"] .cmp-btn{background:rgba(30,38,48,.92)}
html[data-theme="dark"] .burger,html[data-theme="dark"] .fav-btn{background:#1e2630}
html[data-theme="dark"] .mobile-panel{background:#13181f}
html[data-theme="dark"] .marquee .m-item{color:#6f7a89}
html[data-theme="dark"] .lazy-map{background:#1e2630}
html[data-theme="dark"] .sold-card .media img{filter:none}

/* sprievodca na stiahnutie */
.guide-band{display:flex; align-items:center; gap:26px; background:var(--primary-soft); border:1px solid #f3dcb8; border-radius:var(--radius); padding:30px 34px; flex-wrap:wrap}
html[data-theme="dark"] .guide-band{background:#221a0f; border-color:#3a2c14}
.guide-band .guide-ic{width:64px; height:64px; flex:0 0 auto; border-radius:16px; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:30px}
.guide-band .guide-txt{flex:1; min-width:220px}
.guide-band .guide-txt h3{font-size:21px; margin:0 0 5px}
.guide-band .guide-txt p{margin:0; font-size:14.5px}

/* ============================================================
   NEUROMARKETING prvky (trust cues, value-stack, gaze/scroll cue)
   ============================================================ */
.cta-trust{display:flex; gap:22px; flex-wrap:wrap; margin-top:18px; font-size:13.5px; font-weight:500; color:var(--body)}
.cta-trust span{display:inline-flex; align-items:center; gap:7px}
.cta-trust i{color:#2bb673}
.hero-v .cta-trust{justify-content:center; color:rgba(255,255,255,.92)}
.hero-v .cta-trust i{color:var(--gold)}
.cta-inner .cta-trust{justify-content:center; color:rgba(255,255,255,.9); margin-top:20px}
.cta-inner .cta-trust i{color:var(--gold)}
.scroll-cue{position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:3; color:#fff; font-size:30px; opacity:.8; animation:bob 2s ease-in-out infinite; pointer-events:none}
.value-stack{background:var(--secondary); border-radius:var(--radius); padding:36px 42px; color:#fff; display:flex; align-items:center; gap:34px; flex-wrap:wrap; box-shadow:var(--shadow)}
.value-stack .vs-head{flex:1; min-width:240px}
.value-stack .vs-head .badge-soft{background:rgba(255,168,39,.16); color:var(--gold); margin-bottom:10px}
.value-stack h3{color:#fff; font-size:25px; margin:0 0 6px}
.value-stack p{color:rgba(255,255,255,.72); margin:0; font-size:14px}
.value-stack ul{display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; flex:1.5; min-width:300px; margin:0}
.value-stack li{display:flex; gap:9px; align-items:center; font-size:14px; color:rgba(255,255,255,.95)}
.value-stack li i{color:var(--gold); font-size:17px; flex:0 0 auto}
@media(max-width:760px){ .value-stack{padding:28px} .value-stack ul{grid-template-columns:1fr} }

/* ============================================================
   KONSOLIDOVANÁ RESPONZIVITA 2026 — tablet + mobil
   (pripojené na koniec; prepisuje vyššie pravidlá poradím zdroja.
    Nemení desktop vzhľad ani farby — len <=1024 / <=768 / <=560 / <=400.)
   Breakpoints:  1024 (tablet) · 768 (malý tablet/veľký mobil) · 560 (mobil) · 400 (úzky mobil)
   ============================================================ */

/* ---------- GLOBAL: žiadny horizontálny pretok ---------- */
@media (max-width:1024px){
  html,body{max-width:100%; overflow-x:hidden}
  img,video,iframe{max-width:100%}
  /* tabuľky a širší obsah nech sa dajú scrollovať, nie pretekať */
  .cmp-card{max-width:calc(100vw - 32px)}
}

/* ============================================================
   TABLET  (max-width:1024)
   ============================================================ */
@media (max-width:1024px){
  .section{padding:72px 0}
  .section--tight{padding:56px 0}
  .container{padding:0 20px}

  /* nadpisy o niečo menšie */
  .sc-heading .title,.sc-heading .second-title{font-size:38px}
  .sc-heading{margin-bottom:42px}

  /* mriežky */
  .grid{gap:26px}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .usp-grid{grid-template-columns:repeat(2,1fr)}
  .usp:nth-child(2){border-right:0}
  .usp{border-bottom:1px solid rgba(255,255,255,.09)}
  .usp:nth-last-child(-n+2){border-bottom:0}
  .counter-grid{grid-template-columns:repeat(2,1fr); padding:48px 30px}
  .steps{grid-template-columns:repeat(2,1fr)}

  /* booking + alert na 1 stĺpec už pri tablete pre pohodlie */
  .booking{grid-template-columns:1fr; gap:32px; padding:34px}
  .alert-band{grid-template-columns:1fr; gap:32px; padding:38px}

  /* media split */
  .media-split{grid-template-columns:1fr; gap:34px}
  .media-split img{max-height:480px; object-fit:cover}

  /* search */
  .search-card{grid-template-columns:repeat(2,1fr)}
  .search-card .btn{grid-column:1 / -1}

  /* hero showcase trochu nižší */
  .hero-showcase{width:92%}
}

/* ============================================================
   MALÝ TABLET / VEĽKÝ MOBIL  (max-width:768)
   ============================================================ */
@media (max-width:768px){
  .section{padding:60px 0}
  .section--tight{padding:48px 0}
  .empty-space{height:40px}

  /* TYPOGRAFIA — čitateľnosť, nič pod ~14px v tele */
  body{font-size:15.5px}
  .sc-heading .title,.sc-heading .second-title{font-size:30px}
  .sc-heading .description{font-size:15px}
  .lead{font-size:16.5px}
  .cta-inner h3{font-size:28px}
  .cta-inner p{font-size:16px}

  /* HLAVIČKA — všetko sa zmestí, ikony tappable 44px+ */
  .site-header .bar{height:68px; gap:12px}
  .header-actions{gap:8px}
  .burger,.fav-btn,.theme-btn{width:44px; height:44px; font-size:20px}
  .brand img{height:36px}
  .brand .logo-txt{font-size:22px}
  /* CHCEM PREDAŤ ostáva viditeľné na veľkom mobile, kompaktnejšie */
  .header-actions .btn-book{padding:0 16px; height:44px; line-height:44px; font-size:11.5px; letter-spacing:.03em}

  /* TOP TOOLBAR — nechaj len telefón, zvyšok skry; bez pretoku */
  .top-toolbar .container{justify-content:center; height:auto; padding-top:6px; padding-bottom:6px}
  .toolbar-info{gap:0; flex-wrap:wrap; justify-content:center}
  .toolbar-info .hide-sm{display:none}
  .toolbar-info .hide-sm:first-child{display:inline-flex; align-items:center} /* telefón ostáva */
  .toolbar-social{display:none}

  /* HERO video */
  .hero-v{min-height:auto}
  .hero-v-inner{padding:64px 18px}
  .hero-v .hero-title{font-size:clamp(28px,8vw,40px)}
  .hero-v p{font-size:15.5px}
  .hero-v .hero-cta{gap:10px}
  .hero-v .hero-cta .btn{width:100%; justify-content:center}
  .hero .hero-inner{padding:48px 0}
  .hero-cta .btn{width:100%; justify-content:center}
  .hero2{padding:56px 0 0}
  .hero2 .hero-title{font-size:clamp(28px,8vw,42px)}

  /* sold-stamp menší */
  .sold-stamp{font-size:24px; padding:6px 16px; border-width:4px; top:14px; right:14px}

  /* SEARCH — 1 stĺpec, tlačidlo full width */
  .search-wrap{margin-top:18px}
  .search-card{grid-template-columns:1fr; padding:18px; gap:12px}
  .search-card .btn{grid-column:auto; width:100%; justify-content:center}

  /* MRIEŽKY → 1 stĺpec */
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}

  /* USP → 2 stĺpce stále, ale tappable */
  .usp-grid{grid-template-columns:1fr 1fr}
  .usp{padding:26px 16px}
  .usp h4{font-size:16px}

  /* COUNTER → 2 stĺpce */
  .counter-grid{grid-template-columns:1fr 1fr; padding:40px 20px; gap:18px}
  .counter-box .number{font-size:40px}

  /* KALKULAČKY — full width, výsledky pod sebou */
  .calc{padding:26px}
  .mort-out{grid-template-columns:1fr}
  .calc-result .cr-value{font-size:30px}
  .mort-out .cr-value{font-size:24px}
  /* slider thumb väčší pre dotyk */
  .calc input[type=range]{height:10px}
  .calc input[type=range]::-webkit-slider-thumb{width:30px; height:30px}
  .calc input[type=range]::-moz-range-thumb{width:30px; height:30px}

  /* CENOVÁ MAPA */
  .pm-tabs{gap:8px; margin-bottom:20px}
  .pm-tabs button{padding:9px 14px; font-size:13px}
  .pm-panel{padding:24px 20px}
  .pm-price b{font-size:34px}

  /* BOOKING */
  .booking{padding:24px; gap:26px}
  .slot-grid{grid-template-columns:repeat(3,1fr)}
  .slot span{height:48px}
  .booking-form input[type=date],.form input[type=date]{width:100%}

  /* ALERT BAND */
  .alert-band{padding:28px}
  .alert-band h2{font-size:26px}

  /* VALUE STACK */
  .value-stack{padding:26px 22px; gap:20px}
  .value-stack ul{grid-template-columns:1fr; min-width:0}
  .value-stack .vs-head{min-width:0}

  /* GUIDE BAND — zalomí sa, tlačidlo full width */
  .guide-band{padding:24px; gap:18px; text-align:center; justify-content:center}
  .guide-band .guide-txt{min-width:0; flex:1 1 100%}
  .guide-band .btn{width:100%; justify-content:center}

  /* FEATURE LG, FAQ, KARTY pohodlnejšie */
  .feature-lg{padding:22px}
  .faq-q{font-size:16px; padding:16px 18px}
  .faq-a{padding:0 18px}
  .box-item{padding:30px 24px}
  .testimonial{padding:28px 24px}

  /* FOOTER → 2 stĺpce */
  .footer-cta .container{padding:36px 20px; text-align:center; justify-content:center}
  .footer-cta h3{font-size:26px}
  .site-footer{padding-top:64px}
  .footer-main{grid-template-columns:1fr 1fr; gap:32px 28px}
  .footer-bottom{flex-direction:column; text-align:center; gap:10px}
  .newsletter-form{flex-direction:column}
  .newsletter-form .btn{width:100%}

  /* PAGE TITLE menší */
  .page-title{padding:96px 0 56px}

  /* MARQUEE — položky menšie, žiadny vplyv na šírku viewportu */
  .marquee-track{gap:40px}
  .marquee .m-item{font-size:20px}

  /* COMPARE BAR — akcie + náhľady stohuj, náhľady scrollovateľné */
  .cmp-bar{flex-direction:column; align-items:stretch; gap:10px; padding:12px 14px}
  .cmp-items{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px}
  .cmp-actions{justify-content:space-between; width:100%}
  .cmp-actions .btn{flex:1; justify-content:center}
  /* porovnávacia tabuľka — povoliť horizontálny scroll, neprelievať */
  .cmp-card{max-width:calc(100vw - 24px)}
  .cmp-table{display:block; overflow-x:auto; white-space:nowrap}
  .cmp-table th{width:auto}

  /* MODÁLY / PANELY — zmestia sa do viewportu, scroll */
  .domi-panel{width:calc(100vw - 24px); height:min(72vh,560px)}
  .fav-panel-wrap{padding:72px 16px}
  .fav-panel{width:calc(100vw - 32px); max-height:calc(100vh - 110px); overflow-y:auto}
  .cmp-modal{padding:16px}
  .cmp-card{max-height:88vh}

  /* späť hore / domi fab nech neprekrývajú obsah zbytočne */
  .to-top{left:16px; bottom:16px; width:46px; height:46px}
}

/* ============================================================
   MOBIL  (max-width:560)
   ============================================================ */
@media (max-width:560px){
  .container{padding:0 16px}
  .section{padding:52px 0}

  .sc-heading .title,.sc-heading .second-title{font-size:26px}

  /* HLAVIČKA — na úzkom mobile skry CHCEM PREDAŤ, nechaj ikony + burger */
  .header-actions .btn-book{display:none}
  .site-header .bar{height:62px; gap:8px}
  .brand img{height:32px}
  .brand .logo-txt{font-size:20px}
  .brand .logo-sub{font-size:9px; letter-spacing:.26em}

  /* HERO */
  .hero-v-inner{padding:52px 16px}
  .hero-v .hero-sub,.hero2 .hero-sub{font-size:11.5px; padding:8px 14px}
  .sold-stamp{font-size:20px; padding:5px 14px; border-width:3px; top:12px; right:12px}

  /* USP → 1-2 stĺpce; necháme 2 pre kompaktnosť, ale ikony menšie */
  .usp-grid{grid-template-columns:1fr 1fr}
  .usp .usp-ic{font-size:30px}

  /* COUNTER stále 2 stĺpce */
  .counter-grid{grid-template-columns:1fr 1fr}

  /* SLOT GRID — 2 stĺpce, dobre tappable */
  .slot-grid,.slot-grid.two{grid-template-columns:1fr 1fr}

  /* CTA */
  .cta-inner{padding:48px 24px}
  .cta-inner h3{font-size:24px}

  /* FOOTER → 1 stĺpec */
  .footer-main{grid-template-columns:1fr; gap:30px}
  .footer-cta h3{font-size:23px}

  /* TLAČIDLÁ — pohodlná výška, žiadny pretok */
  .btn{padding:0 24px}
  .hero-v .hero-cta .btn,.hero-cta .btn,.hero2 .hero-cta .btn{width:100%}

  /* TABUĽKA POROVNANIA */
  .cmp-card{max-width:calc(100vw - 20px)}
}

/* ============================================================
   ÚZKY MOBIL  (max-width:400)
   ============================================================ */
@media (max-width:400px){
  .sc-heading .title,.sc-heading .second-title{font-size:23px}
  .hero-v .hero-title{font-size:clamp(24px,9vw,32px)}
  .counter-grid{grid-template-columns:1fr}
  .counter-box .number{font-size:38px}
  /* USP na 1 stĺpec na veľmi úzkych */
  .usp-grid{grid-template-columns:1fr}
  .usp{border-right:0; border-bottom:1px solid rgba(255,255,255,.09)}
  .usp:last-child{border-bottom:0}
  .pm-price b{font-size:30px}
  .brand .logo-sub{display:none}
  .calc-result .cr-value{font-size:26px}
}

/* CLS: rezervuj výšku hlavičky (injektuje sa cez JS) */
#site-header{min-height:126px; display:block}
@media(max-width:760px){ #site-header{min-height:114px} }

/* hero: poster ako pozadie (LCP) + doložené video */
.hero-v-bg{background-size:cover; background-position:center}
.hero-v-vid{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}