/* ===== БАЗА ===== */

body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  background: #ffffff;
  color: #111;
}

/* ===== ШАПКА ===== */

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 20px; /* тонкая */
  background: #000;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.logo {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 4px;
  color: #fff;
}

nav a {
  margin: 0 18px;
  text-decoration: none;
  color: #fff;
  font-size: 14px;
  transition: 0.3s;
}

nav a:hover {
  opacity: 0.6;
}

.header-contact {
  display: flex;
  align-items: center;
}

.header-contact a {
  margin-left: 18px;
  text-decoration: none;
  color: #fff;
  font-size: 14px;
  transition: 0.3s;
}

.header-contact a:hover {
  opacity: 0.6;
}

/* ===== HERO ===== */

.hero {
  position: relative;
}

.hero-img {
  width: 100%;
  height: 85vh;

  object-fit: cover;

  /* СМЕЩЕНИЕ КАРТИНКИ ВВЕРХ */
  object-position: center 65%;
  transition: transform 0.2s ease-out;
will-change: transform;
}

.hero-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.hero-text h1 {
  position: relative;

  /* ТАКОЙ ЖЕ РАЗМЕР КАК В МЕНЮ */
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 500;
  letter-spacing: 2px;
  white-space: nowrap; /* всегда в одну строку */

  color: #000;
  display: inline-block;
  z-index: 1;

  /* РАМКА БЛИЖЕ К ТЕКСТУ (в 2 раза меньше отступы) */
  padding: clamp(8px, 0.8vw, 12px) clamp(16px, 1.5vw, 26px);

  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);

  border-radius: 18px; /* меньше закругление */
  border: 1px solid #000;

  box-shadow:
    inset 0 0 25px rgba(255,255,255,0.15),
    0 15px 30px rgba(0,0,0,0.25);
}

.hero-text h1::before {
  content: "";
  position: absolute;
  top: -30%;
  left: -20%;
  width: 140%;
  height: 160%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.25), transparent 60%);
  transform: rotate(12deg);
  pointer-events: none;
}

/* ===== СЕТКА ДИВАНОВ ===== */

.sofa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 50px;
  padding: 100px 80px;
}

.sofa-card {
  cursor: pointer;
  transition: transform 0.25s ease;
}

.sofa-card img {
  width: 100%;
  aspect-ratio: 4 / 3;   /* можешь менять 4/3, 3/2, 1/1 */
  object-fit: cover;
  border-radius: 14px;
}

.sofa-card h3 {
  margin-top: 18px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 2px;
}

.sofa-card:hover {
  transform: translateY(-8px);
}

/* ===== КОНТАКТЫ ===== */

.contacts {
  text-align: center;
  padding: 120px 20px;
}

.contacts h2 {
  font-size: 28px;
  margin-bottom: 20px;
}

.contacts a {
  text-decoration: none;
  color: #000;
  font-size: 18px;
}

.order-btn {
  display: inline-block;   /* чтобы текст был видим */
  margin-top: 25px;
  padding: 14px 30px;
  background: #000;        /* чёрная кнопка */
  color: #fff !important;  /* белый текст, !important заставляет работать */
  border: none;
  cursor: pointer;
  border-radius: 30px;
  font-size: 14px;
  text-align: center;
  text-decoration: none;   /* убираем подчеркивание ссылок */
  transition: 0.3s;
}

.order-btn:hover {
  opacity: 0.7;
}

/* ===== СТРАНИЦА МОДЕЛИ ===== */

.sofa-page {
  display: flex;
  gap: 100px;
  padding: 140px 80px;
  align-items: center;
}

.carousel img {
  width: 650px;
  height: 520px;
  object-fit: cover;
  border-radius: 14px;

  /* ВОТ РАМКА */
  border: 1px solid #e5e5e5;
}

.carousel-controls {
  margin-top: 15px;
  text-align: center;
}

.carousel-controls button {
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
}

.sofa-info h2 {
  font-size: 28px;
  margin-bottom: 15px;
}

.phone {
  display: inline-block;
  margin: 20px 0;
  font-size: 18px;
  text-decoration: none;
  color: #000;
}
/* ===== НИЖНИЙ БЛОК ===== */

.footer {
  display: flex;
  justify-content: space-between;
  padding: 100px 80px;
  background: #ffffff;
  color: #000;
}
.footer-left strong {
  font-size: 20px;
  display: block;
  margin-bottom: 20px;
}
.footer-left ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-left li {
  margin-bottom: 12px;
}

.footer-left a {
  text-decoration: none;
  color: #000;
  font-size: 15px;
}

.footer-left a:hover {
  opacity: 0.6;
}

.footer-right {
  text-align: right;
}

.footer-right h3 {
  margin-bottom: 15px;
}

.footer-right a {
  text-decoration: none;
  color: #000;
  font-size: 18px;
}
/* ===== LEGAL PREMIUM STYLE ===== */

.legal-hero {
  padding: 180px 20px 120px;
  text-align: center;
  background: #ffffff;
}

.legal-hero-inner h1 {
  font-size: 42px;
  font-weight: 600;
  letter-spacing: 1px;
  margin: 0;
}

.legal-line {
  width: 70px;
  height: 2px;
  background: #000;
  margin: 30px auto 0;
}

.legal-wrapper {
  max-width: 900px;
  margin: 0 auto 180px;
  padding: 0 20px;
}

.legal-card {
  background: #ffffff;
  padding: 70px;
  margin-bottom: 60px;
  border-radius: 20px;
  border: 1px solid #f0f0f0;
  transition: all 0.3s ease;
}

.legal-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}

.legal-card p {
  font-size: 17px;
  line-height: 1.9;
  margin-bottom: 22px;
  color: #111;
}

.legal-card h2 {
  font-size: 22px;
  margin-bottom: 35px;
  font-weight: 600;
}

.legal-accent {
  border-left: 5px solid #000;
  padding-left: 60px;
}

.legal-data p {
  margin-bottom: 16px;
}

/* ===== MOBILE ===== */

@media (max-width: 768px) {

  .legal-hero {
    padding: 140px 20px 80px;
  }

  .legal-hero-inner h1 {
    font-size: 30px;
  }

  .legal-card {
    padding: 40px 25px;
  }

  .legal-accent {
    padding-left: 30px;
  }
}
/* ===== HEADER & FOOTER MESSENGERS ===== */

.header-contact a,
.footer-messengers a {
  display: inline-block;
  margin-left: 18px;
  padding: 8px 16px;
  border-radius: 30px;
  background: #000;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  transition: 0.3s;
}

.header-contact a:hover,
.footer-messengers a:hover {
  opacity: 0.7;
}

.footer-messengers {
  margin-top: 10px;
}

.footer-messengers a {
  margin-left: 0; /* первый элемент без отступа */
}

.footer-messengers a + a {
  margin-left: 12px; /* отступ между кнопками */
}
html {
  scroll-behavior: smooth;
}
/* ===== АДАПТИВНАЯ СЕТКА ДИВАНОВ ===== */
.sofa-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 дивана по ширине на ПК */
  gap: 50px;
  padding: 100px 80px;
}

@media (max-width: 1024px) {
  .sofa-grid {
    grid-template-columns: 1fr; /* на планшетах и телефонах по 1 дивану */
    padding: 80px 40px;
    gap: 30px;
  }
}

@media (max-width: 480px) {
  .sofa-grid {
    grid-template-columns: 1fr; /* на телефонах один диван */
    padding: 60px 20px;
    gap: 25px;
  }
}

.header-icon {
  width: 20px;    /* размер по ширине */
  height: auto;   /* сохраняем пропорции */
  display: block; /* убираем лишние отступы */
}

.header-contact a {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 16px;
  padding: 4px;  /* можно убрать, если не нужно */
  text-decoration: none;
  transition: 0.3s;
}

.header-contact a:hover .header-icon {
  opacity: 0.7;
}
/* ============================= */
/* ГАМБУРГЕР */
/* ============================= */

.menu-toggle {
  display: none;
  width: 24px;
  height: 18px;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  margin-left: 15px;
}

.menu-toggle span {
  height: 2px;
  width: 100%;
  background: #fff;
  transition: 0.3s ease;
}

/* анимация крестика */
.menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ============================= */
/* АДАПТИВ 1024px */
/* ============================= */

@media (max-width: 1024px) {
  nav {
    position: absolute;
    top: 100%;
    right: 0;
    background: #000;
    width: 240px;
    flex-direction: column;
    padding: 25px;
    gap: 20px;
    transform: translateY(-20px);
    opacity: 0;
    pointer-events: none;
    transition: 0.3s ease;
  }

  nav a {
    margin: 0;
    font-size: 16px;
  }

  nav.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .menu-toggle {
    display: flex;
  }

  .phone-link {
    display: none;
  }
}
/* ===================================== */
/* ГАМБУРГЕР + ПЕРЕНОС ТЕЛЕФОНА В МЕНЮ */
/* ===================================== */

/* прячем кнопку по умолчанию */
.menu-toggle {
  display: none;
  width: 22px;
  height: 16px;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  margin-left: 15px;
}

.menu-toggle span {
  height: 2px;
  width: 100%;
  background: #fff;
  transition: 0.3s ease;
}

/* анимация крестика */
.menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* адаптив */
@media (max-width: 1024px) {

  /* навигация становится бургер-меню */
  nav {
    position: absolute;
    top: 100%;
    right: 0;
    background: #000;
    width: 260px;
    padding: 30px 25px;
    display: flex;
    flex-direction: column;
    gap: 22px;

    transform: translateY(-20px);
    opacity: 0;
    pointer-events: none;
    transition: 0.3s ease;
  }

  nav.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  nav a {
    margin: 0;
    font-size: 18px;
  }

  /* показываем бургер */
  .menu-toggle {
    display: flex;
  }

  /* скрываем телефон в шапке */
  .phone-link {
    display: none;
  }
}
/* ===================================== */
/* ТЕЛЕФОН В ГАМБУРГЕРЕ */
/* ===================================== */

.burger-phone {
  display: none;
}

/* адаптив */
@media (max-width: 1024px) {

  /* телефон в шапке исчезает */
  .phone-link {
    display: none !important;
  }

  /* телефон появляется в меню */
  .burger-phone {
    display: block;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.2);
    font-size: 14px;
    text-decoration: none;
    color: #fff;
  }

  .burger-phone:hover {
    opacity: 0.6;
  }
}
/* ===== HERO MOBILE ADJUSTMENTS ===== */
@media (max-width: 768px) {
  .hero {
    height: auto; /* можно менять вручную */
    min-height: 50vh; /* минимальная высота hero, меняй цифру по вкусу */
    max-height: 70vh; /* максимальная высота, чтобы не было слишком большого фото */
  }

  .hero-text h1 {
    font-size: calc(14px + 1vw); /* текст масштабируется под ширину экрана */
    padding: calc(10px + 1vw) calc(20px + 1vw); /* рамка масштабируется вместе с текстом */
    white-space: nowrap; /* чтобы текст оставался в одной строке */
    max-width: 90%; /* текст не выйдет за пределы фото */
    overflow: hidden;
    text-overflow: ellipsis; /* если совсем маленький экран, текст обрежется красиво */
  }

  .hero-text {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 0 10px; /* чтобы текст не упирался в края */
    box-sizing: border-box;
  }
}
/* ===== HERO MOBILE PRO ===== */

  .hero-text h1 {

    /* ещё меньше чем на ПК */
    font-size: clamp(10px, 3.2vw, 12px);

    padding: 6px 14px;

    border-radius: 14px;
  }
}
/* ===== FOOTER MOBILE ADJUSTED ===== */
@media (max-width: 768px) {

  .footer {
    display: flex;
    flex-direction: row;            /* горизонтально */
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;                /* чтобы элементы переносились */
    padding: 40px 20px;             /* уменьшенный отступ */
  }

  .footer-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .footer-left strong {
    font-size: 16px;                /* меньше, чем на ПК */
    margin-bottom: 12px;
  }

  .footer-left ul {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .footer-left li {
    margin-bottom: 6px;
  }

  .footer-left a {
    font-size: 12px;
  }

  .footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;          /* выравнивание вправо */
  }

  .footer-right h3 {
    font-size: 14px;
    margin-bottom: 10px;
  }

  .footer-right a {
    font-size: 13px;
  }

  .footer-messengers {
    display: flex !important;       /* горизонтально */
    flex-direction: row !important;
    gap: 10px;
    margin-top: 8px;
  }

  .footer-messengers a {
    font-size: 12px;
    padding: 6px 10px;
  }

}
/* ===================================== */
/* MOBILE TOUCH SCALE */
/* ===================================== */

@media (hover: none) {

.sofa-card {
transition: transform 0.25s ease;
}

.sofa-card.touch-active {
transform: scale(1.08);
}

}
/* ================================= */
/* ARVESSIO PREMIUM LOADING SCREEN */
/* ================================= */

#loader{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#000;
display:flex;
align-items:center;
justify-content:center;
z-index:99999;
overflow:hidden;
}

.loader-logo{
display:flex;
gap:8px;
}

.loader-logo span{
font-size:22px;
font-weight:600;
color:#fff;

opacity:0;
filter:blur(12px);
transform:translateY(40px);

animation:logoReveal 0.8s forwards;
}

.loader-logo span:nth-child(1){animation-delay:0.1s;}
.loader-logo span:nth-child(2){animation-delay:0.2s;}
.loader-logo span:nth-child(3){animation-delay:0.3s;}
.loader-logo span:nth-child(4){animation-delay:0.4s;}
.loader-logo span:nth-child(5){animation-delay:0.5s;}
.loader-logo span:nth-child(6){animation-delay:0.6s;}
.loader-logo span:nth-child(7){animation-delay:0.7s;}
.loader-logo span:nth-child(8){animation-delay:0.8s;}

@keyframes logoReveal{
to{
opacity:1;
filter:blur(0);
transform:translateY(0);
text-shadow:0 0 18px rgba(255,255,255,0.35);
}
}

body.loaded #loader{
animation:loaderFade 0.5s forwards;
}

@keyframes loaderFade{

0%{
opacity:1;
}

60%{
opacity:1;
}

100%{
opacity:0;
visibility:hidden;
}
}

body.loaded .loader-logo{
animation:logoExit 0.5s forwards;
}

@keyframes logoExit{

0%{
transform:translateY(0);
opacity:1;
}

100%{
transform:translateY(-80px);
opacity:0;
}
}
/* =============================== */
/* HERO 2 IMAGES (IDEAL) */
/* =============================== */

/* по умолчанию — ПК версия */
.hero-img{
display:block;
}

.hero-mobile{
display:none;
}

/* мобилка */
@media (max-width:768px){

.hero-img{
display:none;
}

.hero-mobile{
display:block;
width:100%;
height:75vh;
object-fit:cover;

/* ВОТ ЭТО КРУТИШЬ */
object-position:center 50%;
transition: transform 0.2s ease-out;
will-change: transform;
}

}
/* ===== FOOTER MOBILE ADJUSTED ===== */
@media (max-width: 768px) {

  .footer {
    display: flex;
    flex-direction: row;            /* горизонтально */
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;                /* чтобы элементы переносились */
    padding: 40px 20px;             /* уменьшенный отступ */
  }

  .footer-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .footer-left strong {
    font-size: 16px;                /* меньше, чем на ПК */
    margin-bottom: 12px;
  }

  .footer-left ul {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .footer-left li {
    margin-bottom: 6px;
  }

  .footer-left a {
    font-size: 11px;
  }

  .footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;          /* выравнивание вправо */
  }

  .footer-right h3 {
    font-size: 11px;
    margin-bottom: 10px;
  }

  .footer-right a {
    font-size: 11px;
  }

  .footer-messengers {
    display: flex !important;       /* горизонтально */
    flex-direction: row !important;
    gap: 10px;
    margin-top: 8px;
  }

  .footer-messengers a {
    font-size: 11px;
    padding: 6px 10px;
  }

}
.back-btn{
position:fixed;
top:40px;
left:40px;
font-size:22px;
text-decoration:none;
color:#000;
background:rgba(255,255,255,0.85);
padding:8px 14px;
border-radius:8px;
z-index:1000;
transition:0.3s;
}

.back-btn:hover{
opacity:0.6;
}

@media (max-width:768px){
.back-btn{
top:40px;
left:15px;
font-size:18px;
padding:6px 10px;
}
}
@media (max-width:768px){

.sofa-page{
flex-direction:column;
padding:100px 20px;
gap:40px;
}

/* фото */
.carousel img{
width:100%;
height:auto;
}

/* текст */
.sofa-info{
text-align:center;
}

.sofa-info h2{
font-size:22px;
}

.phone{
font-size:16px;
}

}
/* ===== MODEL PAGE PREMIUM ===== */

.model-page{
padding:140px 80px;
display:flex;
flex-direction:column;
gap:120px;
}

.model-block{
display:flex;
align-items:center;
gap:80px;
}

.model-block.reverse{
flex-direction:row-reverse;
}

.model-block img{
width:600px;
height:auto;
object-fit:cover;
border-radius:14px;
}

.model-text{
max-width:500px;
}

.model-text h2{
font-size:32px;
margin-bottom:20px;
}

.model-text h3{
font-size:24px;
margin-bottom:15px;
}

.model-text p{
line-height:1.8;
font-size:15px;
}

/* контакты */
.model-contact{
text-align:center;
margin-top:40px;
}

.model-contact .phone{
display:block;
margin-bottom:20px;
font-size:18px;
text-decoration:none;
color:#000;
}

/* МОБИЛКА */
@media (max-width:768px){

.model-page{
padding:100px 20px;
gap:60px;
}

.model-block{
flex-direction:column;
gap:25px;
}

.model-block.reverse{
flex-direction:column;
}

.model-block img{
width:100%;
}

.model-text{
text-align:center;
}

}
/* ===== PREMIUM DIVIDER ===== */

.premium-divider{
width:100%;
height:1px;
margin:60px auto 40px;

background: linear-gradient(
to right,
transparent,
rgba(0, 0, 0, 0.764),
transparent
);

opacity:1;
}

}