/* ===== HERO ===== */
.hero{position:relative;min-height:886px;height:100vh;max-height:886px;color:#fff;display:flex;align-items:center;padding-top:114px;overflow:hidden}
.hero .bg{position:absolute;inset:0;background:url('../img/hero.jpg') center/cover no-repeat}
.hero .grad{position:absolute;inset:0;background:rgba(0,0,0,.42)}
/* Figma 4304:337 — star grid masking a diagonal white gradient, not a flat 10% wash */
.hero .pattern{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero .pattern::before{content:"";position:absolute;width:1600px;height:1232px;left:calc(50% - 47px);top:calc(50% + 111px);transform:translate(-50%,-50%);background:linear-gradient(121.015deg,rgba(255,255,255,0) 35.438%,#fff 109.04%);-webkit-mask:url('../img/pattern.svg') 148.462px 267.461px/1695.019px 1257.001px no-repeat;mask:url('../img/pattern.svg') 148.462px 267.461px/1695.019px 1257.001px no-repeat}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:40px;max-width:915px}
.hero .btn-cream{padding:24px;line-height:17px;font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.84px}
.hero-title{font-size:clamp(56px,8.9vw,142px);line-height:151px;text-transform:uppercase;font-weight:400;letter-spacing:-2.84px;margin:0}
.hero-sub{max-width:658px;margin:0;font-size:22px;line-height:28px;color:var(--cream)}
.video-card{position:absolute;right:clamp(20px,6vw,100px);bottom:64px;z-index:2;width:min(455px,40vw);background:var(--green);padding:24px;display:flex;flex-direction:column;gap:24px;cursor:pointer;border:0;text-align:left}
.video-card .thumb{position:relative;height:225px;overflow:hidden;display:grid;place-content:center}
.video-card .thumb img,.video-card .thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.video-card .play{position:relative;width:95px;height:95px;border-radius:800px;border:1px solid rgba(224,225,221,.2);display:grid;place-content:center;transition:background .25s}
.video-card:hover .play{background:rgba(224,225,221,.12)}
.video-card .play .m{width:26px;height:26px;color:var(--cream)}
.video-card p{margin:0;color:var(--cream);font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:0;text-transform:uppercase}
/* video modal */
.vmodal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;background:rgba(9,40,30,.94);padding:clamp(16px,4vw,60px)}
.vmodal.open{display:flex}
.vmodal .box{position:relative;width:min(1100px,100%);aspect-ratio:16/9;background:#000}
.vmodal iframe,.vmodal video{width:100%;height:100%;border:0;display:block}
.vmodal .x{position:absolute;top:-52px;right:0;background:none;border:0;color:var(--cream);font-size:40px;line-height:1;cursor:pointer}
.vmodal .x:hover{color:var(--sand)}
@media(max-width:820px){.video-card{display:none}}

/* ===== ABOUT ===== */
.about{background:var(--green);color:var(--cream);padding-top:120px;padding-bottom:120px}
.about .intro{text-align:center;max-width:1400px;margin:0 auto;min-height:491px;display:flex;flex-direction:column;align-items:center;gap:40px}
.about .intro h2{font-size:clamp(46px,8vw,122px);line-height:1.0;text-transform:uppercase;color:#fff;letter-spacing:-.02em}
.about .intro p{max-width:924px;margin:0;color:rgba(236,237,234,.82);font-size:22px;line-height:28px}

/* ===== centered horizontal drift — About photo band (Figma 4304:327)
   item 400x470, gap 40, even items offset +80px (band 550 tall) ===== */
.hscroll{position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-top:120px}
.hscroll-pin{overflow:hidden}
.hscroll-track{display:flex;align-items:flex-start;gap:40px;padding-bottom:80px;will-change:transform}
.hscroll-track figure{flex:0 0 400px;height:470px;overflow:hidden}
.hscroll-track figure:nth-child(even){transform:translateY(80px)}
.hscroll-track img{width:100%;height:100%;object-fit:cover}
@media(max-width:1500px){
  .hscroll-track{gap:34px;padding-bottom:68px}
  .hscroll-track figure{flex-basis:340px;height:400px}
  .hscroll-track figure:nth-child(even){transform:translateY(68px)}
}
@media(max-width:1200px){
  .hscroll-track{gap:28px;padding-bottom:56px}
  .hscroll-track figure{flex-basis:300px;height:353px}
  .hscroll-track figure:nth-child(even){transform:translateY(56px)}
}
@media(max-width:1000px){
  .hscroll-track{gap:20px;padding-bottom:40px}
  .hscroll-track figure{flex-basis:60vw;height:70vw}
  .hscroll-track figure:nth-child(even){transform:translateY(40px)}
}
@media(max-width:600px){
  .hscroll-track{gap:14px;padding-bottom:28px}
  .hscroll-track figure{flex-basis:70vw;height:82vw}
  .hscroll-track figure:nth-child(even){transform:translateY(28px)}
}
@media(prefers-reduced-motion:reduce){
  .hscroll-pin{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scrollbar-width:none}
  .hscroll-pin::-webkit-scrollbar{display:none}
  .hscroll-track{transform:none!important}
  .hscroll-track figure{scroll-snap-align:center}
}

.features{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:120px;min-height:408px}
.feature{display:flex;flex-direction:column;align-items:center;gap:48px;padding:80px 40px;text-align:center;border:1px solid rgba(224,225,221,.2)}
.feature .ico{width:60px;height:72px;display:flex;align-items:center;justify-content:center}
.feature .ico .m{color:var(--sand)}
.feature .ftxt{display:flex;flex-direction:column;gap:24px;width:100%}
.feature h3{font-family:var(--display);font-weight:600;font-size:24px;letter-spacing:0;text-transform:uppercase;color:var(--cream);line-height:normal;margin:0}
.feature p{color:var(--cream);opacity:.6;font-size:18px;line-height:25px;margin:0}
@media(max-width:1300px){.feature{padding:56px 20px;gap:32px}.feature h3{font-size:19px}.feature p{font-size:15px;line-height:22px}}
@media(max-width:860px){.features{grid-template-columns:repeat(2,1fr)}}

/* ===== CTA_small banner (Dohodnite si stretnutie) ===== */
.meet{position:relative;margin-top:120px;min-height:249px;display:flex;align-items:center;overflow:hidden;color:#fff}
.meet .bg{position:absolute;inset:0;background:url('../img/banner_meet.jpg') center/cover no-repeat}
.meet .grad{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.10) 100%)}
.meet .meet-in{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:40px;width:100%;padding:0 64px}
.meet .meet-in > div{flex:1 1 auto;min-width:0;display:block}
.meet .meet-in .btn{flex:0 0 auto;width:max-content;align-self:center;padding:24px;line-height:17px;font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.84px}
.meet h3{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:.2em;text-transform:uppercase;margin:0 0 12px;line-height:normal}
.meet p{font-size:24px;line-height:34px;color:var(--cream);max-width:760px;margin:0}
@media(max-width:1200px){.meet{min-height:0}.meet .meet-in{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:28px;padding:48px 40px}.meet .meet-in > div{width:100%}.meet h3{font-size:19px}.meet p{font-size:18px;line-height:26px;max-width:640px;margin-inline:auto}}
@media(max-width:760px){.meet .meet-in{gap:24px;padding:36px 24px}.meet p{max-width:none}}

/* ===== APARTMANS promo (homepage) ===== */
.apx{background:var(--green);color:var(--cream)}
.apx .head{text-align:center;padding-top:80px;padding-bottom:70px;min-height:643px}
.apx .head h2{font-family:var(--display);font-weight:300;font-size:clamp(38px,5.4vw,76px);line-height:1.08;text-transform:uppercase;color:#fff;margin-top:26px;max-width:1180px;margin-inline:auto}
/* Figma 4606:2250 — Body Base: Calibri 22/28, #ECEDEA @60% */
.apx .head p{max-width:843px;margin:26px auto 0;color:var(--cream);opacity:.6;font-size:22px;line-height:28px}
/* shown at its own aspect ratio: the clickable floor overlay is positioned in
   the image's coordinate space and cannot line up with a cropped picture */

/* section-level buttons */
.sec-btn{display:flex;justify-content:center;margin-top:80px}
.sec-btn .btn{min-height:65px}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{background:var(--green-d)}

/* ===== STATS ===== */
.stats{background:var(--green);color:var(--cream);padding-block:120px}
.stats .head{text-align:center;max-width:1000px;margin:0 auto 40px;min-height:264px}
.stats .head h2{font-size:clamp(40px,6vw,80px);line-height:1.05;text-transform:uppercase;color:#fff;margin-top:26px;letter-spacing:-.01em}
.stat-row{display:flex;align-items:center;justify-content:space-between;gap:20px;height:238px;border-top:1px solid var(--line-green)}
.stat-row:last-child{border-bottom:1px solid var(--line-green)}
.stat-row .label{font-family:var(--display);font-weight:400;font-size:clamp(20px,2.3vw,32px);letter-spacing:.08em;text-transform:uppercase}
.stat-row .num{font-family:var(--display);font-weight:300;font-size:clamp(72px,11vw,158px);line-height:.78;color:var(--sand)}

/* ===== MODELS ===== */
.models{background:var(--cream);padding-block:120px}
.models h2{font-family:var(--display);font-weight:300;text-align:center;font-size:clamp(36px,5.2vw,72px);line-height:1.08;text-transform:uppercase;max-width:843px;margin:0 auto 80px;min-height:309px;display:flex;align-items:center;justify-content:center;letter-spacing:-.01em}
.model-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;min-height:480px}
.model{display:flex;flex-direction:column;align-items:center;gap:40px;text-align:center;padding:80px 40px;border-bottom:1px solid var(--sand)}
.model .big{font-family:var(--display);font-weight:400;font-size:132px;line-height:1.4318;letter-spacing:-2.64px;text-transform:uppercase;white-space:nowrap;color:var(--sand)}
.model .mtxt{display:flex;flex-direction:column;gap:12px;width:100%}
.model h3{font-family:var(--display);font-weight:600;font-size:24px;letter-spacing:0;text-transform:uppercase;color:var(--green);margin:0;line-height:normal}
/* Figma pads the short copy to a 2-line block so all three baselines align */
.model p{color:#403b38;opacity:.6;font-size:18px;line-height:25px;margin:0;max-width:none;min-height:50px}
@media(max-width:1200px){.model{padding:48px 20px;gap:24px}.model .big{font-size:84px}.model p{min-height:0}}
@media(max-width:760px){.model-grid{grid-template-columns:1fr;gap:52px}.model{border-right:0;border-bottom:1px solid var(--line-cream);padding-bottom:52px}.model:last-child{border-bottom:0}}

/* ===== VR band ===== */
.vr{position:relative;min-height:748px;display:grid;place-items:center;overflow:hidden}
.vr .bg{position:absolute;inset:0;background:url('../img/vr_int.jpg') center/cover no-repeat}
.vr-card{position:relative;z-index:2;width:min(460px,86vw);background:var(--green);text-align:center;padding:64px 40px 56px;overflow:hidden}
.vr-card::before{content:"";position:absolute;top:0;left:0;right:0;height:70%;background:url('../img/shining_benefits.png') top center/100% auto no-repeat;pointer-events:none}
.vr-card .m{position:relative;width:98px;height:50px;color:var(--sand);margin:0 auto 30px}
.vr-card h3{position:relative;font-family:var(--display);font-weight:400;font-size:26px;letter-spacing:.05em;text-transform:uppercase;color:#fff;line-height:1.25;margin-bottom:30px}
.vr-card .btn{position:relative}

/* ===== MAP ===== */
.map{background:var(--cream);padding-top:120px}
.map .head{text-align:center;max-width:843px;margin:0 auto;min-height:415px}
.map .head h2{font-family:var(--display);font-weight:300;font-size:clamp(36px,5.2vw,72px);line-height:1.06;text-transform:uppercase;letter-spacing:-.01em}
.map .head p{margin-top:28px;color:#736862;font-size:16px}
.legend{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 32px;margin:46px 0 34px}
.legend span{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.04em;color:#736862}
.legend i{width:28px;height:3px;border-radius:2px;flex:none}
.legend i.dot{width:12px;height:12px;border-radius:50%}
/* Figma: the map runs the full 1600 frame, so break it out of .wrap's padding */
.map-img{margin-top:64px;width:100vw;margin-left:calc(50% - 50vw)}
.map-img img{width:100%;display:block}

/* ===== BENEFITS ===== */
.benefits{background:var(--green);color:var(--cream);padding-block:120px}
.benefits .head{text-align:center;max-width:1000px;margin:0 auto 80px;min-height:301px}
.benefits .head h2{font-size:clamp(34px,5vw,64px);line-height:1.1;text-transform:uppercase;color:#fff;margin-top:26px;letter-spacing:-.01em}
.ben-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;min-height:308px}
.benefit{display:flex;flex-direction:column;gap:40px;height:308px;padding:0 0 80px;border-bottom:1px solid rgba(224,225,221,.2)}
.benefit .ico{width:60px;height:72px;display:flex;align-items:center}
.benefit .ico .m{width:60px;height:72px;color:var(--sand)}
.benefit .txt{display:flex;flex-direction:column;gap:24px}
.benefit h3{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:0;text-transform:uppercase;color:var(--cream);line-height:normal;margin:0}
.benefit p{color:var(--cream);opacity:.6;font-size:18px;line-height:25px}
@media(max-width:900px){.ben-grid{grid-template-columns:repeat(2,1fr);gap:46px 24px}.benefit{height:auto;padding-bottom:48px}}

/* ===== CTA band ===== */
.cta{position:relative;min-height:734px;display:flex;align-items:center;color:#fff;overflow:hidden}
.cta .bg{position:absolute;inset:0;background:url('../img/cta_rest.jpg') center/cover no-repeat}
.cta .grad{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.70) 0%,rgba(0,0,0,.55) 32%,rgba(0,0,0,.18) 68%,rgba(0,0,0,0) 92%)}
.cta .wrap{position:relative;z-index:2;width:100%}
.cta h2{font-family:var(--display);font-weight:300;font-size:clamp(40px,6vw,72px);line-height:1.05;text-transform:uppercase;letter-spacing:-.01em;max-width:640px}
.cta .btn{margin-top:40px}

/* shining (Figma layer) */
.shine{background:url('../img/shining_about.png') top center/100% auto no-repeat,var(--green) !important}
.shine-b{background:url('../img/shining_benefits.png') top center/100% auto no-repeat,var(--green) !important}
.amenity-head{text-align:center;font-weight:700;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--sand);margin:64px 0 22px}
/* Figma 4432:6724 — chip row: 61px sand circle (16px pad, 29px icon), 16px gap to the label, 56px between chips */
.amenities{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:18px 56px;min-height:76px;margin-bottom:0}
.amenities span{display:flex;align-items:center;gap:16px;font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.84px;text-transform:uppercase;color:var(--green);line-height:normal}
.amenities i{width:61px;height:61px;border-radius:80px;background:var(--sand);display:grid;place-content:center;flex:none}
.amenities .m{width:29px;height:29px;background:#ECEDEA;-webkit-mask:var(--u) center/contain no-repeat;mask:var(--u) center/contain no-repeat}
/* ===== FOOTER ===== */
.footer{background:var(--green);color:var(--cream);padding-top:74px}
.footer-top{display:grid;grid-template-columns:1fr auto;gap:40px;position:relative;min-height:254px}
.footer .kontakt .eyebrow{margin-bottom:28px;color:var(--cream)}
.footer .kontakt .mail,.footer .kontakt .tel{font-family:var(--display);font-weight:300;font-size:clamp(28px,3.1vw,42px);color:var(--sand);letter-spacing:.02em;display:block}
.footer .kontakt .tel{margin-top:18px}
.footer-menu{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:column;grid-template-rows:auto repeat(4,auto);gap:16px 60px;min-width:360px}
.footer-menu .eyebrow{grid-column:1/-1;grid-row:1;color:var(--cream);margin-bottom:6px}
.footer-menu a{font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#97A99E;padding:6px 0;transition:.2s}
.footer-menu a:hover{color:#fff}
.footer-star{position:absolute;top:-74px;left:calc(50% - 370px);width:660px;height:340px;pointer-events:none;background:url('../img/footer_star_v4.png') top center/contain no-repeat}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center;margin-top:80px;min-height:177px;padding-block:0;border-top:1px solid rgba(163,137,122,.2);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.footer-bottom .copy{font-weight:700}
.footer-bottom .legal{display:flex;flex-wrap:wrap;gap:12px 36px;color:rgba(196,176,162,.65)}
@media(max-width:760px){
  .footer-top{grid-template-columns:1fr;justify-items:center;text-align:center}
  .footer-star{display:none}
  .footer-menu{min-width:0;justify-items:center;justify-content:center}
  .footer-bottom{justify-content:center;text-align:center}
  .footer-bottom .legal{justify-content:center;text-align:center}
}

.overlay{position:fixed;inset:0;background:rgba(9,40,30,.97);z-index:100;display:none;flex-direction:column;align-items:center;justify-content:center;gap:26px}
.overlay.open{display:flex}
.overlay a{color:var(--cream);font-family:var(--display);font-weight:400;font-size:clamp(30px,3.4vw,52px);line-height:normal;letter-spacing:0;text-transform:uppercase}
.overlay a:hover{color:var(--sand)}
.overlay .close{position:absolute;top:26px;right:clamp(20px,6vw,100px);font-size:42px;color:var(--cream);background:none;border:0;cursor:pointer;line-height:1}

/* ===== mobile / tablet: relax the desktop-exact Figma metrics ===== */
@media(max-width:1200px){
  .hero{display:block;min-height:0;height:auto;max-height:none;padding:140px 0 72px}
  .hero .wrap{position:relative;z-index:2}
  .hero-copy{gap:24px;max-width:none;width:100%;align-items:center;text-align:center}
  .hero-title{font-size:clamp(46px,12.4vw,104px);line-height:1.05;letter-spacing:-.02em}
  .hero-sub{font-size:17px;line-height:26px;max-width:none;width:100%}
  .video-card{display:flex;position:relative;inset:auto;z-index:2;box-sizing:border-box;width:calc(100% - 2*clamp(20px,6.25vw,100px));max-width:340px;margin:32px auto 0;padding:16px;gap:16px}
  .video-card .thumb{height:auto;aspect-ratio:407/225}
  .video-card p{font-size:15px}
  .video-card .play{width:64px;height:64px}
  .video-card .play .m{width:20px;height:20px}
  .about{padding-top:72px;padding-bottom:72px}
  .about .intro{min-height:0;gap:24px;width:100%}
  .about .intro h2{font-size:clamp(30px,7vw,56px)}
  .about .intro p{font-size:17px;line-height:26px;max-width:none;width:100%}
  .hscroll{margin-top:56px}
  .features{margin-top:56px;min-height:0}
  .meet{margin-top:56px}
  .apx .head{min-height:0;padding:64px 0 40px}
  .apx .head h2{font-size:clamp(28px,6.4vw,52px)}
  .apx .head p{font-size:18px;line-height:25px;max-width:none;width:100%}
  .stats{padding-block:72px}
  .stats .head{min-height:0;margin-bottom:32px}
  .stats .head h2{font-size:clamp(28px,6.4vw,52px)}
  .stat-row{height:auto;padding:22px 0}
  .stat-row .num{font-size:clamp(44px,12vw,72px)}
  .stat-row .label{font-size:13px}
  .models{padding-block:72px}
  .models h2{min-height:0;margin-bottom:40px;font-size:clamp(28px,6.4vw,52px)}
  .model-grid{min-height:0;gap:0}
  .map{padding-top:72px}
  .map .head{min-height:0}
  .map .head h2{font-size:clamp(28px,6.4vw,52px)}
  .benefits{padding-block:72px}
  .benefits .head{min-height:0;margin-bottom:40px}
  .benefits .head h2{font-size:clamp(26px,6vw,48px)}
  .ben-grid{min-height:0}
  .cta{min-height:0;padding-block:96px}
  .cta h2{font-size:clamp(30px,7vw,56px)}
  .footer-top{min-height:0}
  .footer-bottom{min-height:0;margin-top:48px;padding-block:24px}
  .sec-btn{margin-top:40px}
}