/* ===== RESET & BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{font-family:'Montserrat',sans-serif;background:#303442;color:#fff;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
button{cursor:pointer;border:none;outline:none;font-family:inherit}
input{font-family:inherit;outline:none}

/* ===== TOKENS ===== */
:root{
  --gold:#C9BA94;
  --dark:#303442;
  --darker:#393D4C;
  --amber:#F8B251;
  --white:#fff;
  --text-light:rgba(255,255,255,.75);
  --blur-panel:rgba(0,0,0,.25);
}

/* ===== PAGE WRAPPER ===== */
.page{width:1920px;margin:0 auto;position:relative}
@media(max-width:1920px){.page{width:100%}}

/* =============================================
   HERO SECTION  (height 1000px)
   ============================================= */
.hero{
  position:relative;
  height:1000px;
  background:url('./assets/ads2.jpg') center top / cover no-repeat;
  overflow:hidden;
}

/* dark overlay left + right frosted panel */
.hero__overlay{
  position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(18,20,28,.55) 0%,
    rgba(18,20,28,.15) 50%,
    transparent 100%);
  pointer-events:none;
}
.hero__panel{
  position:absolute;top:0;right:0;
  width:760px;height:100%;
  background:var(--blur-panel);
  backdrop-filter:blur(7.5px);
}

/* LEFT column */
.hero__left{
  position:absolute;
  left:190px;top:0;
  width:860px;
  height:100%;
  display:flex;flex-direction:column;
  justify-content:center;
  padding-top:24px;
}

/* Logo */
.logo{
  display:flex;align-items:flex-start;gap:32px;
  margin-bottom:60px;
  filter:drop-shadow(0 4px 30px rgba(0,0,0,.8));
}
.logo__mark{
  width:110px;height:110px;flex:0 0 110px;
  border-radius:50%;
  position:relative;
  background:url('./assets/images/logo.png') center/contain no-repeat;
  border:none;
}
.logo__mark::before,.logo__mark::after,.logo__mark i{content:none;display:none}
.logo__text{display:flex;flex-direction:column;gap:6px;padding-top:6px}
.logo__name{
  font-family:Georgia,serif;
  font-size:80px;line-height:.88;
  letter-spacing:3px;text-transform:uppercase;color:var(--white);
}
.logo__sub{font-size:20px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}

/* Heading */
.hero__title{
  font-size:140px;line-height:1.15;font-weight:800;
  text-transform:uppercase;
  text-shadow:0 4px 40px rgba(0,0,0,.95);
  white-space:nowrap;
}

/* Bottom row */
.hero__bottom{
  display:flex;align-items:center;gap:40px;
  margin-top:60px;
}
.hero__caption{
  font-family:Georgia,serif;
  font-size:50px;line-height:1;color:var(--white);
  min-width:490px;
}
.hero__arrow{
  display:flex;align-items:center;gap:0;
  flex:1;
}
.hero__line{height:4px;background:var(--gold);width:292px}
.hero__chevron{
  width:0;height:0;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  border-left:18px solid var(--gold);
}

/* RIGHT column — form */
.hero__right{
  position:absolute;
  left:1240px;top:35px;
  width:381px;
}

.phone{
  display:flex;align-items:center;gap:16px;
  margin-bottom:50px;
}
.phone__icon{
  width:40px;height:40px;flex:0 0 40px;
  border-radius:50%;background:var(--gold);
  display:flex;align-items:center;justify-content:center;
}
.phone__icon svg{width:20px;height:20px;fill:#303442}
.phone__num{font-size:25px;font-weight:700;line-height:30px}

.form__title{
  font-size:28px;font-weight:700;line-height:1.2;
  text-transform:uppercase;
  margin-bottom:30px;
  width:381px;
}
.form__fields{
  display:flex;flex-direction:column;gap:0;
  width:350px;
  margin-bottom:8px;
}
.field{
  height:44px;
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(6.9px);
  border-radius:12px;
  margin-bottom:24px;
  display:flex;align-items:center;
}
.field input{
  width:100%;height:100%;background:none;border:0;
  color:#fff;padding:0 16px 0 34px;
  font-size:14px;font-weight:300;
}
.field input::placeholder{color:#fff;opacity:1}
.form__hint{
  width:350px;font-size:10px;line-height:12px;
  text-align:center;color:#fff;font-weight:300;
  margin-bottom:18px;
}
.form__agree{
  display:flex;align-items:flex-start;gap:16px;
  width:348px;margin-bottom:26px;
}
.checkbox{
  width:16px;height:16px;flex:0 0 16px;
  border:.55px solid #fff;border-radius:6px;
  position:relative;margin-top:1px;
}
.checkbox::after{
  content:'';position:absolute;
  left:4.5px;top:4.5px;
  width:7.5px;height:7.5px;
  background:var(--gold);border-radius:2.75px;
}
.form__agree p{font-size:14px;font-weight:300;line-height:17px;max-width:300px}

.btn-cta{
  width:350px;height:80px;
  border-radius:12px;
  background:var(--gold);
  box-shadow:0 0 27.5px rgba(201,186,148,.25);
  color:#303442;
  font-size:20px;font-weight:600;
  letter-spacing:.01em;text-transform:uppercase;
  display:flex;align-items:center;justify-content:center;
}

.form__messengers{margin-top:50px}
.form__messengers h3{
  font-size:28px;font-weight:700;line-height:1.2;
  margin-bottom:20px;max-width:381px;
}
.messenger{
  display:flex;align-items:center;gap:20px;
  margin-bottom:20px;
}
.messenger__icon{
  width:40px;height:40px;border-radius:50%;
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  flex:0 0 40px;
}
.messenger__icon svg{width:22px;height:22px}
.messenger__icon--chat{background:none;border:none}
.messenger__icon--chat svg path{fill:var(--gold)}
.messenger span{font-size:18px;font-weight:300;line-height:22px}
.messenger--chat span{font-weight:500}

/* =============================================
   WHITE BOX SECTION  (height 834px)
   ============================================= */
.whitebox{
  position:relative;
  height:834px;
  background:#fff;
  color:#303442;
  overflow:hidden;
}

.whitebox__title{
  position:absolute;
  left:50%;transform:translateX(-50%);
  top:86px;
  width:953px;
  font-family:Georgia,serif;
  font-size:56px;line-height:135%;
  letter-spacing:.02em;text-align:center;
  text-transform:uppercase;
  color:#C3B29E;
  white-space:nowrap;
}

.whitebox__desc{
  position:absolute;
  left:320px;top:248px;
  width:800px;
  font-size:18px;line-height:22px;font-weight:400;
  color:#303442;
}

/* Photo slider */
.whitebox__photo{
  position:absolute;
  left:320px;top:334px;
  width:800px;height:400px;
  background:linear-gradient(160deg,#e8e8e8,#d4d4d4);
  overflow:hidden;
}
.whitebox__photo img{
  width:100%;height:100%;object-fit:cover;
}
/* nav arrows */
.slide-nav{
  position:absolute;
  top:511px;
  width:46px;height:46px;
  border-radius:26px;
  background:#fff;
  box-shadow:0 4px 6.3px rgba(0,0,0,.25);
  display:flex;align-items:center;justify-content:center;
  color:#303442;font-size:22px;font-weight:300;
  z-index:2;
}
.slide-nav--left{left:297px}
.slide-nav--right{left:1097px}
.slide-nav--left svg,.slide-nav--right svg{width:20px;height:2px;background:none}

/* dots */
.slide-dots{
  position:absolute;
  left:625px;top:704px;
  display:flex;gap:10px;
}
.slide-dots span{display:block;width:40px;height:4px;background:#fff;opacity:.8;border-radius:2px}
.slide-dots span.active{background:var(--amber);opacity:.8}

/* 3D tour button */
.btn-tour{
  position:absolute;
  left:1180px;top:359px;
  width:420px;height:50px;
  background:var(--amber);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:600;line-height:20px;
  text-transform:uppercase;color:#303442;
}

/* Feature rows */
.feature{
  position:absolute;
  left:1180px;
  width:420px;height:120px;
  background:#F5F5F5;
  display:flex;align-items:center;gap:0;
}
.feature:nth-child(1){top:334px}
.feature:nth-child(2){top:474px}
.feature:nth-child(3){top:614px}
.feature__icon{
  width:60px;height:60px;flex:0 0 60px;
  background:#303442;
  margin:0 22px 0 22px;
  position:relative;
}
/* brick icon approximation */
.feature__icon::before,.feature__icon::after{
  content:'';position:absolute;
  border:2px solid var(--gold);
}
.feature__icon::before{left:10px;top:8px;width:16px;height:20px;border-right:0}
.feature__icon::after{right:10px;top:8px;width:16px;height:20px;border-left:0}
.feature p{font-size:18px;line-height:22px;color:#303442;max-width:258px}

/* =============================================
   PLANS SECTION  (height 952px)
   ============================================= */
.plans{
  position:relative;
  height:952px;
  background:#393D4C;
  overflow:hidden;
}

/* Decorative bg mark */
.plans__bg-mark{
  position:absolute;
  right:-60px;top:50%;transform:translateY(-50%);
  width:480px;height:480px;
  border-radius:50%;border:2px solid rgba(255,255,255,.04);
  opacity:.5;pointer-events:none;
}

.plans__title{
  position:absolute;
  left:190px;top:100px;
  font-family:Georgia,serif;
  font-size:80px;line-height:80px;
  font-weight:400;
  text-transform:uppercase;
  color:#fff;
}

/* Tabs */
.plans__tabs{
  position:absolute;
  left:190px;top:260px;
  display:flex;gap:60px;
}
.plans__pane{display:none;position:relative;height:100%;}
.plans__pane.active{display:block;}
.tab{
  font-size:18px;line-height:22px;font-weight:500;
  color:#fff;cursor:pointer;
  padding-bottom:12px;position:relative;
}
.tab.active{font-weight:700;color:var(--gold)}
.tab.active::after{
  content:'';position:absolute;
  left:0;bottom:0;width:100%;
  border-bottom:2px solid var(--gold);
}

/* Left info col */
.plans__info{
  position:absolute;
  left:190px;top:372px;
  width:337px;
  display:flex;flex-direction:column;gap:0;
}
.plans__apt-type{font-size:40px;line-height:49px;font-weight:400}
.plans__apt-area{font-size:52px;line-height:63px;font-weight:700;margin-bottom:60px}
.plans__apt-desc{
  font-size:18px;line-height:22px;font-weight:400;
  color:#fff;margin-bottom:60px;
  max-width:337px;
}
.btn-apply{
  width:319px;height:58px;
  border-radius:8px;
  background:var(--gold);
  color:#303442;
  font-size:16px;font-weight:600;line-height:20px;
  text-align:center;text-transform:uppercase;
  display:flex;align-items:center;justify-content:center;
}

/* Thumbnails */
.plans__thumbs{
  position:absolute;
  left:839px;top:282px;
  width:110px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.thumb-nav{
  font-size:20px;color:#fff;cursor:pointer;
  width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
}
.thumb{
  width:110px;height:110px;
  background:#fff;border-radius:6px;
  position:relative;overflow:hidden;
}
.thumb:not(.active){opacity:.6}
.thumb.active{outline:2px solid var(--gold);outline-offset:0}
/* floor plan lines inside thumbs */
.thumb::before{
  content:'';position:absolute;
  left:14px;top:10px;right:14px;bottom:10px;
  border:1.5px solid #aaa;
}
.thumb::after{
  content:'';position:absolute;
  left:14px;top:40%;width:55%;height:1.5px;background:#bbb;
}

/* Plan viewer card */
.plans__viewer{
  position:absolute;
  left:989px;top:282px;
  width:600px;height:550px;
  background:#fff;border-radius:20px;
  display:flex;align-items:stretch;
  overflow:hidden;
}
.viewer__nav{
  width:50px;flex:0 0 50px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:#303442;font-size:22px;
}
.viewer__nav--right{background:#E6E3E3}
.viewer__content{
  flex:1;
  padding:25px 15px;
  position:relative;
}

/* Blueprint SVG-style floor plan */
.blueprint{
  width:100%;height:100%;
  position:relative;
  background:#f9f9f9;
  border:1px solid #ccc;
}
/* walls */
.bp-wall{position:absolute;background:#1a1f2e}
/* rooms labels */
.bp-label{
  position:absolute;
  font-size:13px;line-height:1.15;
  color:#5a5a5a;
}
.bp-label strong{display:block;font-size:12px;font-weight:600;color:#444;margin-top:1px}
.bp-dim{
  position:absolute;font-size:10px;color:#999;
  white-space:nowrap;
}

/* =============================================
   RESPONSIVE
   ============================================= */

/* Scale entire 1920 layout proportionally on smaller screens */
@media (max-width:1919px){
  .page{
    width:100%;
    transform-origin:top left;
  }
}

/* 1440px screens — scale down 75% */
@media (max-width:1440px){
  .page{
    width:1920px;
    transform:scale(0.75);
    transform-origin:top left;
    margin-bottom:calc(-25% * 2786px / 100);
  }
  body{overflow-x:hidden}
}

/* 1280px */
@media (max-width:1280px){
  .page{transform:scale(0.666);margin-bottom:calc(-33.4% * 2786px / 100)}
}

/* 1024px */
@media (max-width:1024px){
  .page{transform:scale(0.533);transform-origin:top left;margin-bottom:calc(-47% * 2786px / 100)}
}

/* 768px tablet */
@media (max-width:768px){
  .page{transform:scale(0.4);margin-bottom:calc(-60% * 2786px / 100)}
}

/* 480px mobile */
@media (max-width:480px){
  .page{transform:scale(0.25);margin-bottom:calc(-75% * 2786px / 100)}
}

/* 375px mobile */
@media (max-width:375px){
  .page{transform:scale(0.195);margin-bottom:calc(-80.5% * 2786px / 100)}
}

/* ===== WHITEBOX photo interior drawn in CSS ===== */
.whitebox__photo{
  background:
    linear-gradient(to bottom, #e9e9e9 0%, #d8d8d8 100%);
}
/* Имитируем комнату с окном */
.whitebox__photo::before{
  content:'';position:absolute;
  left:22%;top:14%;width:22%;height:42%;
  border:3px solid #c8c8c8;
  background:linear-gradient(160deg,#f2f2f2,#e5e5e5);
  box-shadow:inset 0 -20px 0 #ebebeb;
}
.whitebox__photo::after{
  content:'';position:absolute;
  left:44%;top:42%;width:8%;height:30%;
  border:3px solid #ccc;
  background:#f5f5f5;
  box-shadow:0 -24px 0 0 #f0f0f0;
}

/* ===== viewer left nav transparent bg ===== */
.viewer__nav--left{background:transparent}

/* ===== body overflow fix ===== */
html,body{overflow-x:hidden}