/* [fonts] Подключение кастомных шрифтов */
@font-face {
  font-family: 'Cornerita';
  src: url('../fonts/Cornerita-VF.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

:root{ --red:#c62828; --red-dark:#5e0a0a; --white:#fff; --black:#111; }

/* dock vars (минимально нужные токены под эффект дока) */
:root{ --size-1:4px; --size-2:6px; --size-4:12px; --radius-3:16px; --surface-1:rgba(255,255,255,.6); --text-1:rgba(0,0,0,.2);
  --gradient-1: linear-gradient(135deg,#ff6a6a,#c62828);
  --gradient-2: linear-gradient(135deg,#ff8a65,#ff5252);
}

*{ box-sizing:border-box; }
body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--black); background:var(--white); }
html, body{ height:100%; }
html{ scroll-behavior:smooth; }
.container{ max-width:1200px; margin:0 auto; padding:0 24px; }

.site-header{ 
  position:fixed; 
  top:0; 
  left:0; 
  right:0; 
  z-index:100;
  background:transparent; 
  color:#fff; 
  transition:background .18s ease, box-shadow .18s ease;
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; width:100%; max-width:none; margin:0; padding:20px 40px; position:relative; }
.site-header .brand{ font-weight:700; letter-spacing:.5px; display:flex; align-items:center; }
.site-header .nav{ display:flex; align-items:center; justify-content:center; position:absolute; left:50%; transform:translateX(-50%); }
.site-header .nav a{ color:var(--white); text-decoration:none; padding:6px 10px; font-size:16px; display:flex; align-items:center; }
.site-header .nav a:hover{ text-decoration:underline; }
.share--inline{ order:3; display:flex; align-items:center; }

/* [hero styles] фулл-высота, фон cover, затемнение, центр-контент */
.hero{ padding:0; }
.hero--full{ position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; }
.hero-media{ position:absolute; inset:0; overflow:hidden; }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.hero--full::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.35)); }

.hero-content{ position:relative; z-index:1; text-align:center; color:#fff; display:flex; flex-direction:column; align-items:center; gap:18px; padding:0 24px; max-width:980px; }
.hero-content h1{ margin:0; font-size:clamp(28px,4.8vw,56px); line-height:1.12; text-shadow:0 2px 6px rgba(0,0,0,.35); }
.hero-sub{ margin:0 0 8px; color:#e6e6e6; }
.hero-note{ margin:8px 0 0; color:#d9d9d9; font-size:14px; }

/* баннер-плашка как на референсе */
.hero-banner{ background:rgba(0,0,0,.38); padding:10px 18px; border-radius:6px; backdrop-filter:saturate(1.1) blur(2px); }
.hero-title{ margin:0; letter-spacing:1px; text-transform:uppercase; font-weight:800; font-size:clamp(22px,4.6vw,52px); }

:root{ --accent:#ffd54f; --accent-dark:#d4ab00; }
.btn{ display:inline-block; font-weight:700; text-decoration:none; border-radius:10px; padding:14px 22px; transition:.18s ease; line-height:1; white-space:nowrap; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }
.btn--accent{ background:var(--red); color:#fff; }
.btn--accent:hover{ background:var(--red-dark); color:#fff; }
.btn--outline{ background:transparent; color:#fff; border:2px solid #fff; }
.btn--outline:hover{ background:rgba(255,255,255,.12); }

@media (max-width: 640px){
  .hero--full{ min-height:92vh; }
  .hero-actions{ gap:12px; }
  .btn{ padding:11px 16px; }
}

/* === OS Dock buttons for hero === */
.hero-dock{ display:flex; justify-content:center; }
.blocks{ display:flex; list-style:none; padding:var(--size-2); border-radius:var(--radius-3); gap:var(--size-4); background: hsl(0 0% 100% / 0.3); align-items:center; justify-content:center; backdrop-filter: blur(10px) saturate(1.2); }
.blocks:hover{ --show:1; }
.block{ width:auto; height:48px; display:grid; place-items:center; align-content:center; transition:flex .2s; flex: calc(0.2 + (var(--lerp, 0) * 1.5)); position:relative; text-decoration:none; outline:none; }
.block:after{ content:''; width:5%; aspect-ratio:1; background:var(--text-1); position:absolute; bottom:10%; left:50%; border-radius:var(--radius-3); transform:translate(-50%,-50%); z-index:-1; }
.block:before{ content:''; position:absolute; width:calc(100% + var(--size-4)); bottom:0; aspect-ratio:1/2; left:50%; transition:transform .2s; transform-origin:50% 100%; transform:translateX(-50%) scaleY(var(--show,0)); z-index:-1; }
.block .block__item{ transition:outline .2s; outline:transparent var(--size-1) solid; }
.block:hover .block__item, .block:focus-visible .block__item{ outline:var(--surface-1) var(--size-1) solid; }
.block__item{ display:inline-flex; align-items:center; justify-content:center; padding:12px 18px; border-radius:16px; background: var(--bg), #ffffff; color:#111; font-weight:700; line-height:1; white-space:nowrap; box-shadow:0 6px 18px rgba(0,0,0,.15); transform: translateY(calc(var(--lerp) * -55%)); transition: transform .2s; }

/* соседнее влияние (эффект увеличения рядом с hover) */
:root{ --lerp-0:1; --lerp-1:.5625; --lerp-2:.25; --lerp-3:.0625; --lerp-4:0; }
.blocks:has(.block:hover), .blocks:has(.block:focus-visible){ --show:1; }
.block:hover, .block:focus-visible{ --lerp: var(--lerp-0); z-index:5; }
.block:has(+ :is(.block:hover,.block:focus-visible)), :is(.block:hover,.block:focus-visible) + .block{ --lerp: var(--lerp-1); z-index:4; }
.block:has(+ .block + :is(.block:hover,.block:focus-visible)), :is(.block:hover,.block:focus-visible) + .block + .block{ --lerp: var(--lerp-2); z-index:3; }
.block:has(+ .block + .block + :is(.block:hover,.block:focus-visible)), :is(.block:hover,.block:focus-visible) + .block + .block + .block{ --lerp: var(--lerp-3); z-index:2; }
.block:has(+ .block + .block + .block + :is(.block:hover,.block:focus-visible)), :is(.block:hover,.block:focus-visible) + .block + .block + .block + .block{ --lerp: var(--lerp-4); z-index:1; }

/* [benefits] */
.benefits{ position:relative; padding:72px 0; background:#fafafa; }
.benefits .container{ position:relative; }
.benefits__title{ text-align:center; margin:0 0 28px; font-size:clamp(22px,3.2vw,36px); }
.benefits__grid-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.benefit{ background:#fff; border:1px solid #ececec; border-radius:14px; padding:22px; text-align:left; box-shadow:0 4px 14px rgba(0,0,0,.06); transition:transform .16s ease, box-shadow .16s ease; }
.benefit:hover{ transform:translateY(-2px); box-shadow:0 14px 32px rgba(0,0,0,.10); }
.benefit__icon{ width:56px; height:56px; border-radius:12px; background:linear-gradient(180deg, #ffffff, #f6f6f6); border:1px solid #e9e9e9; color:#6b6b6b; display:flex; align-items:center; justify-content:center; margin-bottom:12px; box-shadow:inset 0 0 0 4px #fff; }
.benefit__icon img{ width:28px; height:28px; display:block; }
.benefit__head{ margin:0 0 8px; font-size:16px; }
.benefit__text{ margin:0; color:#666; font-size:14px; line-height:1.5; }

@media (max-width: 1024px){
  .benefits__grid-cards{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 640px){
  .benefits__grid-cards{ grid-template-columns:1fr; }
}

/* [quick links tiles] */
.quicklinks{ padding:56px 0 80px; }
.tiles{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.tile{ position:relative; display:flex; align-items:center; justify-content:center; padding:28px 12px; border-radius:10px; text-decoration:none; color:#111; background:#fff; border:1px solid #eee; transition:transform .16s ease, box-shadow .16s ease; }
.tile:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.06); }
.tile span{ font-weight:600; }

@media (max-width: 1024px){ .tiles{ grid-template-columns:repeat(3,1fr); } }
@media (max-width: 640px){ .tiles{ grid-template-columns:repeat(2,1fr); } }

/* [footer] Футер "ОБСУДИМ" - компактный горизонтальный дизайн */
.site-footer{ background:var(--white); color:#333; padding:60px 0 40px; position:relative; overflow:hidden; border-top:1px solid #eee; }
.footer-content{ display:flex; justify-content:space-between; align-items:center; margin-bottom:40px; }
.footer-talk{ position:relative; display:flex; align-items:center; gap:20px; }
.footer-title{ 
  font-family:'Cornerita', 'Bebas Neue', sans-serif; 
  font-size:clamp(36px,6vw,80px); 
  font-weight:900; 
  letter-spacing:-1px; 
  line-height:1; 
  margin:0; 
  color:var(--red); 
  text-transform:uppercase;
  background:linear-gradient(135deg, var(--red) 0%, var(--red-dark) 50%, #8b0000 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  text-shadow:2px 2px 4px rgba(0,0,0,0.1);
  position:relative;
  transform:none;
}
.footer-decoration{ display:flex; gap:12px; opacity:0.8; }
.decoration-cross, .decoration-plus{ font-size:24px; color:var(--red); animation:float 3s ease-in-out infinite; }
.decoration-cross:nth-child(1){ animation-delay:0s; }
.decoration-plus:nth-child(2){ animation-delay:0.5s; }
.decoration-cross:nth-child(3){ animation-delay:1s; }
.decoration-plus:nth-child(4){ animation-delay:1.5s; }
.decoration-plus:nth-child(5){ animation-delay:2s; }
.decoration-cross:nth-child(6){ animation-delay:2.5s; }
.decoration-plus:nth-child(7){ animation-delay:0.8s; }
.decoration-plus:nth-child(8){ animation-delay:1.3s; }
.decoration-plus:nth-child(9){ animation-delay:1.8s; }

@keyframes float {
  0%, 100% { transform:translateY(0px) rotate(0deg); opacity:0.7; }
  50% { transform:translateY(-12px) rotate(180deg); opacity:1; filter:drop-shadow(0 4px 8px rgba(94,10,10,0.3)); }
}

.footer-contacts{ display:flex; flex-direction:column; gap:16px; }
.footer-contact{ display:flex; align-items:center; gap:12px; color:#333; text-decoration:none; font-size:clamp(16px,2.5vw,24px); font-weight:600; transition:all 0.3s ease; padding:8px 12px; border-radius:8px; }
.footer-contact:hover{ color:var(--red); transform:translateX(-10px); background:rgba(94,10,10,0.05); padding-left:16px; }
.footer-contact:hover .contact-arrow{ transform:translateX(-8px); color:var(--red); }
.contact-text{ transition:color 0.3s ease; }
.contact-arrow{ font-size:1.2em; transition:all 0.3s ease; color:#999; }
.footer-copyright{ text-align:center; padding-top:40px; border-top:1px solid #eee; }
.footer-copyright p{ margin:0 0 8px; color:#666; font-size:14px; line-height:1.4; }
.footer-copyright p:last-child{ margin-bottom:0; }
.footer-location{ color:#999; font-size:13px; font-weight:500; }

/* Адаптив для футера */
@media (max-width: 768px) {
  .footer-content{ flex-direction:column; gap:30px; text-align:center; }
  .footer-talk{ justify-content:center; }
  .footer-contacts{ align-items:center; }
}
@media (max-width: 480px) {
  .footer-talk{ flex-direction:column; gap:12px; }
  .footer-decoration{ justify-content:center; }
}

/* [share] плавающие кнопки "поделиться" */
.share{ position:fixed; right:18px; bottom:24px; z-index:120; }
.share--inline{ position:relative; display:inline-flex; align-items:center; height:40px; width:40px; transform:translateY(24px); }
.share--inline .share__toggle{ width:40px; height:40px; font-size:18px; background:transparent; box-shadow:none; display:flex; align-items:center; justify-content:center; line-height:1; }
/* Инлайн‑меню: иконки раскрываются вокруг центральной кнопки */
.share--inline .share__menu{ position:absolute; inset:auto; left:50%; top:50%; display:block; opacity:1; pointer-events:none; transform:translate(-50%,-50%); gap:0; }
.share--inline .share__btn{ position:absolute; width:36px; height:36px; transform:translate(-50%,-50%); opacity:0; transition:transform .22s ease, opacity .16s ease; }
.share--inline.is-open .share__btn{ opacity:1; pointer-events:auto; }
/* Позиции как на примере: вверх, вверх‑вправо, вправо */
.share--inline.is-open .share__wa{ transform:translate(-50%,-50%) translate(-65px,24px); }
.share--inline.is-open .share__tg{ transform:translate(-50%,-50%) translate(-45px,-21px); }
.share--inline.is-open .share__menu{ transform:translateY(0); }
.share__toggle{ width:52px; height:52px; border-radius:50%; border:0; cursor:pointer; font-size:22px; line-height:1; background:#fff; color:#111; box-shadow:0 10px 22px rgba(0,0,0,.18); transition:transform .2s ease, box-shadow .2s ease; }
.icon-share{ width:24px; height:24px; }
/* окраска PNG/SVG через фильтр под фирменный красный */
.share--inline .icon-share{ filter: invert(17%) sepia(92%) saturate(3180%) hue-rotate(351deg) brightness(88%) contrast(106%); }
.share__toggle:hover{ transform:translateY(-2px); box-shadow:0 16px 30px rgba(0,0,0,.24); }
.share__menu{ position:absolute; right:56px; bottom:8px; display:flex; gap:10px; opacity:0; pointer-events:none; transform:translateX(10px); transition:opacity .2s ease, transform .2s ease; }
.share.is-open .share__menu{ opacity:1; pointer-events:auto; transform:translateX(0); }
.share__btn{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; color:#fff; text-decoration:none; font-weight:700; box-shadow:0 10px 18px rgba(0,0,0,.16); }
.share__wa{ background:#25d366; }
.share__tg{ background:#0088cc; }

/* [contact-form] Форма обратной связи с новым фоновым изображением */
.contact-form{ padding:80px 0; background-image:url('../img/forms/hero-background.jpg'); background-size:cover; background-position:center; background-repeat:no-repeat; color:var(--white); position:relative; overflow:hidden; min-height:100vh; display:flex; align-items:center; }
.contact-form::before{ content:""; position:absolute; top:0; left:0; right:0; bottom:0; background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.35)); }
.contact-form__content{ display:flex; justify-content:center; align-items:center; position:relative; z-index:2; width:100%; }
.contact-form__wrapper{ max-width:500px; width:100%; text-align:center; }
.contact-form__text{ margin-bottom:32px; }
.contact-form__title{ font-size:clamp(28px,4vw,48px); font-weight:700; margin:0 0 16px; line-height:1.2; }
.contact-form__subtitle{ font-size:18px; opacity:0.9; margin:0; line-height:1.5; }
.contact-form__form{ background:rgba(255,255,255,0.1); backdrop-filter:blur(10px); border-radius:16px; padding:40px; border:1px solid rgba(255,255,255,0.2); text-align:left; }
.form-group{ margin:0 0 24px; }
.form-input, .form-textarea{ width:100%; padding:16px 20px; border:2px solid transparent; border-radius:12px; font-size:16px; background:rgba(255,255,255,0.95); color:#333; transition:all 0.3s ease; font-family:inherit; }
.form-input:focus, .form-textarea:focus{ outline:none; border-color:var(--white); background:var(--white); box-shadow:0 0 0 4px rgba(255,255,255,0.2); }
.form-input::placeholder, .form-textarea::placeholder{ color:#666; }
.form-textarea{ resize:vertical; min-height:100px; }
.form-submit{ width:100%; padding:16px; background:var(--white); color:var(--red); border:0; border-radius:12px; font-size:18px; font-weight:600; cursor:pointer; transition:all 0.3s ease; font-family:inherit; }
.form-submit:hover{ background:#f5f5f5; transform:translateY(-2px); box-shadow:0 8px 25px rgba(0,0,0,0.15); }
.form-submit:active{ transform:translateY(0); }

/* Адаптив для формы */
@media (max-width: 768px) {
  .contact-form{ padding:60px 0; }
  .contact-form__wrapper{ max-width:400px; }
  .contact-form__form{ padding:30px 20px; }
}

/* [about-section] О нас секция в красно-белом стиле как на референсе */
.about-section{ padding:100px 0; background:var(--white); position:relative; overflow:hidden; }
.about-content{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.about-text{ position:relative; z-index:2; }
.about-title{ 
  font-size:clamp(28px,4.5vw,52px); 
  font-weight:900; 
  line-height:1.2; 
  color:var(--black); 
  margin:0 0 25px; 
  text-transform:uppercase;
  letter-spacing:-1px;
}
.about-title strong, .about-title em{ color:var(--red); }
.about-subtitle{ 
  font-size:clamp(18px,2.2vw,24px); 
  font-weight:600; 
  color:var(--red); 
  margin:0 0 20px; 
  line-height:1.4; 
}
.about-description{ 
  font-size:18px; 
  color:#666; 
  margin:0 0 35px; 
  line-height:1.6; 
}
.about-features{ 
  display:grid; 
  gap:12px; 
  margin:0 0 40px; 
}
.feature-item{ 
  font-size:16px; 
  font-weight:600; 
  color:var(--black); 
  padding:12px 0; 
  border-left:4px solid var(--red); 
  padding-left:20px; 
  transition:all .3s ease; 
}
.feature-item:hover{ 
  color:var(--red); 
  transform:translateX(8px); 
}
.about-btn{ 
  display:inline-block; 
  padding:18px 36px; 
  background:linear-gradient(135deg, var(--red), var(--red-dark)); 
  color:white; 
  text-decoration:none; 
  border-radius:12px; 
  font-weight:700; 
  font-size:18px; 
  text-transform:uppercase; 
  letter-spacing:1px; 
  transition:all .3s ease; 
  box-shadow:0 8px 25px rgba(198, 40, 40, 0.3); 
}
.about-btn:hover{ 
  transform:translateY(-4px); 
  box-shadow:0 15px 40px rgba(198, 40, 40, 0.4); 
}
.about-image{ 
  position:relative; 
  border-radius:16px; 
  overflow:hidden; 
  box-shadow:0 20px 60px rgba(0,0,0,0.15); 
}
.about-image img{ 
  width:100%; 
  height:500px; 
  object-fit:cover; 
  transition:transform .3s ease; 
}
.about-image:hover img{ 
  transform:scale(1.05); 
}
.about-decoration{ 
  position:absolute; 
  top:30px; 
  right:30px; 
  width:70px; 
  height:70px; 
  background:linear-gradient(135deg, #ffa726, #ff8f00); 
  color:white; 
  border-radius:50%; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  animation:float-arrow 3s ease-in-out infinite; 
  box-shadow:0 8px 25px rgba(255, 167, 38, 0.4);
}
.about-decoration svg{ 
  filter:drop-shadow(0 2px 4px rgba(0,0,0,0.2)); 
}
@keyframes float-arrow {
  0%, 100% { transform:translateY(0) rotate(0deg); }
  50% { transform:translateY(-10px) rotate(180deg); }
}

/* Адаптивность для about секции */
@media (max-width: 1024px) {
  .about-content{ grid-template-columns:1fr; gap:50px; text-align:center; }
  .about-image{ max-width:600px; margin:0 auto; }
}
@media (max-width: 768px) {
  .about-section{ padding:60px 0; }
  .about-features{ gap:10px; }
  .feature-item{ font-size:15px; padding:10px 0; padding-left:16px; }
  .about-image img{ height:300px; }
}

.brand{ order:1; display:flex; align-items:center; text-decoration:none; margin-left:0; margin-right:16px; }
.nav{ order:2; flex:1; display:flex; justify-content:center; gap:24px; margin-left:0; }
.phone{ order:3; margin-left:auto; font-weight:600; }
.brand-logo{ height:112px; max-height:14vh; width:auto; display:block; filter:drop-shadow(0 1px 1px rgba(0,0,0,.45)); }
@media (max-width: 640px){
  .nav{ gap:12px; }
  .brand-logo{ height:80px; max-height:14vh; }
}

.page{ padding:72px 0 96px; }
.page h1{ margin:0 0 16px; font-size:clamp(28px,4vw,40px); }
.page p{ color:#555; }

/* [sticky header] — фиксированный хедер везде */
/* Убираем padding-top чтобы титульник был максимально вверх */
/* Добавляем отступ только для страниц кроме главной */
body:not(.home-page){
  padding-top:80px;
}

/* Темная навигация для страниц кроме главной */
body:not(.home-page) .site-header{
  background:rgba(0,0,0,0.8);
  backdrop-filter:blur(10px);
}

/* [sticky header] — прозрачная вверху, с фоном/тенью после скролла */
.site-header.is-scrolled{
  background:rgba(20,20,20,.55);
  backdrop-filter:saturate(1.2) blur(6px);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}

/* [burger] — показываем только на мобильных */
.burger{
  display:none; margin-left:12px; background:transparent; border:0; padding:10px; cursor:pointer;
}
.burger__line{
  display:block; width:22px; height:2px; background:#fff; margin:4px 0;
  transition:transform .2s ease, opacity .2s ease;
}

@media (max-width: 992px){
  .site-header .nav{ display:none; }
  .burger{ display:inline-block; }
}

/* [mobile menu] — полноэкранная панель с затемнением */
.mobile-nav{ position:fixed; inset:0; z-index:90; pointer-events:none; }
.mobile-nav__overlay{
  position:absolute; inset:0; background:rgba(0,0,0,.45); opacity:0; transition:opacity .2s ease;
}
.mobile-nav__panel{
  position:absolute; top:0; right:0; height:100%; width:min(320px, 86vw);
  background:rgba(25,25,25,.92); backdrop-filter:blur(6px);
  transform:translateX(100%); transition:transform .22s ease;
  display:flex; flex-direction:column; gap:18px; padding:88px 20px 24px;
}
.mobile-nav__panel a{
  color:#fff; text-decoration:none; font-size:18px; padding:6px 2px;
}
.mobile-nav.is-open{ pointer-events:auto; }
.mobile-nav.is-open .mobile-nav__overlay{ opacity:1; }
.mobile-nav.is-open .mobile-nav__panel{ transform:translateX(0); }

/* === Making-pancake loader (по бокам секции преимуществ) === */
.pl{ position:absolute; top:50%; width:5.4em; height:5.4em; margin-top:-2.7em; pointer-events:none; z-index:1; }
.pl-left{ left: calc((100% - 1200px) / 2 - 360px); }
.pl-right{ right: calc((100% - 1200px) / 2 - 360px); }
.pl-box{ position:absolute; left:0; bottom:-.1em; width:1em; height:1em; background:transparent; border:.25em solid var(--red); border-radius:15%; transform:translate(0,-1em) rotate(-45deg); animation:pl-push 2.5s cubic-bezier(.79,0,.47,.97) infinite; }
.pl-hill{ position:absolute; width:7.1em; height:7.1em; top:1.7em; left:1.7em; background:transparent; border-left:.25em solid var(--red); transform:rotate(45deg); }
.pl-hill:after{ content:''; position:absolute; width:7.1em; height:7.1em; left:0; background:transparent; }
@keyframes pl-push{
  0%{ transform:translate(0,-1em) rotate(-45deg);} 5%{transform:translate(0,-1em) rotate(-50deg);} 20%{transform:translate(1em,-2em) rotate(47deg);} 25%{transform:translate(1em,-2em) rotate(45deg);} 30%{transform:translate(1em,-2em) rotate(40deg);} 45%{transform:translate(2em,-3em) rotate(137deg);} 50%{transform:translate(2em,-3em) rotate(135deg);} 55%{transform:translate(2em,-3em) rotate(130deg);} 70%{transform:translate(3em,-4em) rotate(217deg);} 75%{transform:translate(3em,-4em) rotate(220deg);} 100%{transform:translate(0,-1em) rotate(-225deg);} }

/* Docstring: Страница "Стоимость" с калькуляторами ремонта и мебели */
/* [pricing-hero] Заголовок страницы стоимости */
.pricing-hero{ 
  padding:120px 0 80px; 
  background:linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); 
  text-align:center; 
}
.pricing-hero__title{ 
  margin:0 0 20px; 
  font-size:clamp(32px,4vw,48px); 
  font-weight:700; 
  color:var(--black);
}
.pricing-hero__subtitle{ 
  margin:0; 
  font-size:clamp(16px,2vw,20px); 
  color:#666; 
  max-width:600px; 
  margin:0 auto;
}

/* [furniture-calculator] Калькулятор мебели */
.furniture-calculator{
  padding:80px 0;
  background:var(--white);
}
.furniture-type-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:20px;
}
.material-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

/* Docstring: Калькулятор стоимости ремонта на главной странице */
/* [repair-calculator] Калькулятор стоимости ремонта */
.repair-calculator{
  padding:80px 0;
  background:#f8f9fa;
}
.calculator-content{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:start;
}
.calculator-promo{
  padding:40px 0;
}
.promo-badge{
  display:inline-block;
  background:var(--red);
  color:white;
  padding:8px 16px;
  border-radius:20px;
  font-size:14px;
  font-weight:600;
  margin-bottom:30px;
}
.promo-text{
  margin-right:8px;
}
.calculator-title{
  font-size:clamp(24px,3vw,32px);
  font-weight:700;
  color:var(--black);
  margin:0 0 20px;
  line-height:1.2;
}
.calculator-subtitle{
  font-size:16px;
  color:#666;
  margin:0 0 30px;
  line-height:1.5;
}
.highlight{
  color:var(--red);
  font-weight:700;
}
.quick-consultation{
  display:flex;
  gap:15px;
  align-items:center;
}
.phone-input{
  flex:1;
  padding:15px 20px;
  border:2px solid #ddd;
  border-radius:8px;
  font-size:16px;
  background:white;
}
.consultation-btn{
  padding:15px 25px;
  background:var(--red);
  color:white;
  border:none;
  border-radius:8px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  transition:background .3s ease;
}
.consultation-btn:hover{
  background:var(--red-dark);
}

/* [calculator-form] Форма калькулятора */
.calculator-form{
  position:relative;
}
.form-card{
  background:white;
  padding:40px;
  border-radius:16px;
  box-shadow:0 8px 30px rgba(0,0,0,0.1);
  position:relative;
  z-index:2;
}
.form-title{
  font-size:20px;
  font-weight:700;
  color:var(--red);
  margin:0 0 30px;
  text-align:center;
}
.form-group{
  margin-bottom:25px;
}
.form-label{
  display:block;
  font-weight:600;
  color:var(--black);
  margin-bottom:10px;
  font-size:14px;
}
.repair-type-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.type-btn{
  padding:12px 16px;
  border:2px solid #ddd;
  background:white;
  color:#666;
  border-radius:8px;
  cursor:pointer;
  font-size:14px;
  font-weight:500;
  transition:all .3s ease;
}
.type-btn.active{
  background:var(--red);
  color:white;
  border-color:var(--red);
}
.type-btn:hover:not(.active){
  border-color:var(--red);
  color:var(--red);
}
.area-controls{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:15px;
}
.area-btn{
  width:40px;
  height:40px;
  border:2px solid #ddd;
  background:white;
  border-radius:8px;
  cursor:pointer;
  font-size:18px;
  font-weight:600;
  color:#666;
  transition:all .3s ease;
}
.area-btn:hover{
  border-color:var(--red);
  color:var(--red);
}
.area-input{
  width:80px;
  padding:10px;
  border:2px solid #ddd;
  border-radius:8px;
  text-align:center;
  font-size:16px;
  font-weight:600;
}
.area-slider{
  margin-top:10px;
}
.slider{
  width:100%;
  height:6px;
  border-radius:3px;
  background:#ddd;
  outline:none;
  -webkit-appearance:none;
}
.slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--red);
  cursor:pointer;
}
.slider::-moz-range-thumb{
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--red);
  cursor:pointer;
  border:none;
}
.total-estimate{
  text-align:center;
  padding:20px;
  background:#f8f9fa;
  border-radius:8px;
  margin:20px 0;
}
.total-label{
  font-size:16px;
  color:#666;
  margin-right:10px;
}
.total-price{
  font-size:24px;
  font-weight:700;
  color:var(--red);
}
.phone-input-form{
  width:100%;
  padding:15px 20px;
  border:2px solid #ddd;
  border-radius:8px;
  font-size:16px;
  background:white;
}
.submit-btn{
  width:100%;
  padding:15px;
  background:var(--red);
  color:white;
  border:none;
  border-radius:8px;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  margin-bottom:10px;
  transition:background .3s ease;
}
.submit-btn:hover{
  background:var(--red-dark);
}
.privacy-text{
  font-size:12px;
  color:#999;
  text-align:center;
  margin:0;
  line-height:1.4;
}

/* [benefits-strip] Полоса преимуществ */
.benefits-strip{
  padding:40px 0;
  background:white;
  border-top:1px solid #eee;
}
.benefits-list{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:20px;
}
.benefit-item{
  display:flex;
  align-items:center;
  gap:12px;
  flex:1;
  min-width:200px;
  padding:15px 0;
  border-right:1px solid #eee;
}
.benefit-item:last-child{
  border-right:none;
}
.benefit-icon{
  font-size:24px;
  flex-shrink:0;
}
.benefit-text{
  font-size:14px;
  color:#666;
  line-height:1.4;
  font-weight:500;
}

/* Адаптивность для калькулятора */
@media (max-width: 992px){
  .calculator-content{
    grid-template-columns:1fr;
    gap:40px;
  }
  .quick-consultation{
    flex-direction:column;
    align-items:stretch;
  }
  .consultation-btn{
    text-align:center;
  }
}
@media (max-width: 768px){
  .repair-calculator{
    padding:60px 0;
  }
  .form-card{
    padding:30px 20px;
  }
  .benefits-list{
    flex-direction:column;
    align-items:flex-start;
  }
  .benefit-item{
    border-right:none;
    border-bottom:1px solid #eee;
    width:100%;
  }
  .benefit-item:last-child{
    border-bottom:none;
  }
}

/* Docstring: Стили для страницы "Ремонт под ключ" */
/* [interiors-hero] Заголовок страницы ремонта */
.interiors-hero{ 
  padding:120px 0 80px; 
  background:linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); 
  text-align:center; 
}
.interiors-hero__title{ 
  margin:0 0 20px; 
  font-size:clamp(32px,4vw,48px); 
  font-weight:700; 
  color:var(--black);
}
.interiors-hero__subtitle{ 
  margin:0; 
  font-size:clamp(16px,2vw,20px); 
  color:#666; 
  max-width:600px; 
  margin:0 auto;
}

/* [interiors-stages] Этапы работы */
.interiors-stages{ 
  padding:80px 0; 
  background:var(--white); 
}
.interiors-stages__title{ 
  text-align:center; 
  margin:0 0 60px; 
  font-size:clamp(28px,3.5vw,36px); 
  font-weight:700; 
  color:var(--black);
}
.stages-grid{ 
  display:grid; 
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); 
  gap:30px; 
}
.stage-card{ 
  padding:40px 30px; 
  background:var(--white); 
  border-radius:16px; 
  box-shadow:0 4px 20px rgba(0,0,0,0.08); 
  text-align:center; 
  transition:transform .3s ease, box-shadow .3s ease;
}
.stage-card:hover{ 
  transform:translateY(-8px); 
  box-shadow:0 12px 40px rgba(0,0,0,0.15); 
}
.stage-card__number{ 
  display:inline-block; 
  width:60px; 
  height:60px; 
  background:var(--red); 
  color:white; 
  border-radius:50%; 
  font-size:24px; 
  font-weight:700; 
  line-height:60px; 
  margin-bottom:20px;
}
.stage-card__title{ 
  margin:0 0 15px; 
  font-size:20px; 
  font-weight:600; 
  color:var(--black);
}
.stage-card__description{ 
  margin:0; 
  color:#666; 
  line-height:1.6;
}

/* [interiors-services] Услуги */
.interiors-services{ 
  padding:80px 0; 
  background:#f8f9fa; 
}
.interiors-services__title{ 
  text-align:center; 
  margin:0 0 60px; 
  font-size:clamp(28px,3.5vw,36px); 
  font-weight:700; 
  color:var(--black);
}
.services-grid{ 
  display:grid; 
  grid-template-columns:repeat(auto-fit, minmax(350px, 1fr)); 
  gap:30px; 
}
.service-card{ 
  padding:40px; 
  background:var(--white); 
  border-radius:16px; 
  box-shadow:0 4px 20px rgba(0,0,0,0.08); 
  transition:transform .3s ease, box-shadow .3s ease;
}
.service-card:hover{ 
  transform:translateY(-8px); 
  box-shadow:0 12px 40px rgba(0,0,0,0.15); 
}
.service-card__icon{ 
  font-size:48px; 
  margin-bottom:20px; 
}
.service-card__title{ 
  margin:0 0 15px; 
  font-size:24px; 
  font-weight:600; 
  color:var(--black);
}
.service-card__description{ 
  margin:0 0 20px; 
  color:#666; 
  line-height:1.6;
}
.service-card__list{ 
  margin:0; 
  padding:0; 
  list-style:none;
}
.service-card__list li{ 
  padding:8px 0; 
  color:#666; 
  position:relative; 
  padding-left:20px;
}
.service-card__list li:before{ 
  content:"✓"; 
  position:absolute; 
  left:0; 
  color:var(--red); 
  font-weight:bold;
}

/* [interiors-advantages] Преимущества */
.interiors-advantages{ 
  padding:80px 0; 
  background:var(--white); 
}
.interiors-advantages__title{ 
  text-align:center; 
  margin:0 0 60px; 
  font-size:clamp(28px,3.5vw,36px); 
  font-weight:700; 
  color:var(--black);
}
.advantages-grid{ 
  display:grid; 
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); 
  gap:30px; 
}
.advantage-item{ 
  text-align:center; 
  padding:30px 20px;
}
.advantage-item__icon{ 
  font-size:48px; 
  margin-bottom:20px; 
}
.advantage-item__title{ 
  margin:0 0 15px; 
  font-size:20px; 
  font-weight:600; 
  color:var(--black);
}
.advantage-item__description{ 
  margin:0; 
  color:#666; 
  line-height:1.6;
}

/* [interiors-cta] CTA секция */
.interiors-cta{ 
  padding:80px 0; 
  background:linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%); 
  color:white; 
  text-align:center;
}
.cta-content{ 
  max-width:600px; 
  margin:0 auto;
}
.cta-title{ 
  margin:0 0 20px; 
  font-size:clamp(28px,3.5vw,36px); 
  font-weight:700;
}
.cta-subtitle{ 
  margin:0 0 40px; 
  font-size:18px; 
  opacity:0.9;
}
.cta-buttons{ 
  display:flex; 
  gap:20px; 
  justify-content:center; 
  flex-wrap:wrap;
}
.btn{ 
  padding:16px 32px; 
  border-radius:50px; 
  text-decoration:none; 
  font-weight:600; 
  font-size:16px; 
  transition:all .3s ease; 
  display:inline-block;
}
.btn--primary{ 
  background:white; 
  color:var(--red); 
  border:2px solid white;
}
.btn--primary:hover{ 
  background:transparent; 
  color:white; 
  border-color:white;
}
.btn--secondary{ 
  background:transparent; 
  color:white; 
  border:2px solid white;
}
.btn--secondary:hover{ 
  background:white; 
  color:var(--red);
}

/* Адаптивность для страницы ремонта */
@media (max-width: 768px){
  .interiors-hero{ padding:100px 0 60px; }
  .interiors-stages, .interiors-services, .interiors-advantages, .interiors-cta{ padding:60px 0; }
  .stages-grid, .services-grid{ grid-template-columns:1fr; }
  .advantages-grid{ grid-template-columns:repeat(2, 1fr); }
  .cta-buttons{ flex-direction:column; align-items:center; }
  .btn{ width:100%; max-width:300px; }
}

/* Docstring: Стили для страницы портфолио - hero, фильтры, сетка проектов и модальные окна */
/* [portfolio-header] Убираем специальные стили для портфолио - используем базовые */

/* [portfolio-hero] Заголовок страницы портфолио */
.portfolio-hero{ padding:80px 0 40px; background:#fafafa; text-align:center; }
.portfolio-hero__title{ margin:0 0 12px; font-size:clamp(28px,3.5vw,36px); font-weight:700; }
.portfolio-hero__subtitle{ margin:0; font-size:16px; color:#666; }

/* [portfolio-filters] Фильтры по категориям */
.portfolio-filters{ padding:100px 0 30px; background:var(--white); border-bottom:1px solid #eee; }
.filters{ display:flex; justify-content:center; align-items:center; gap:20px; flex-wrap:wrap; }
.filter-btn{ 
  padding:16px 32px; 
  border:2px solid #ddd; 
  background:transparent; 
  color:#333; 
  border-radius:12px; 
  cursor:pointer; 
  font-weight:600; 
  font-size:16px; 
  transition:all .3s ease; 
  display: flex;
  align-items: center;
  gap: 8px;
}
.filter-btn:hover{ 
  border-color:var(--red); 
  color:var(--red); 
  transform:translateY(-2px); 
  box-shadow:0 8px 25px rgba(220,38,38,0.15); 
}
.filter-btn.active{ 
  background:var(--red); 
  color:white; 
  border-color:var(--red); 
}

/* [portfolio-grid] Карточки 3x2 на всю высоту экрана */
.portfolio-grid{ padding:0; background:var(--white); }
.portfolio-grid .container{ max-width:none; padding:0; margin:0; }

.projects-grid{ 
  display:grid; 
  grid-template-columns:repeat(3, 1fr); 
  grid-template-rows:repeat(2, 1fr); 
  gap:0; 
  width:100%; 
  margin:0; 
  height:calc(100vh - 60px);
}

/* Docstring: Адаптивность сетки проектов для разных экранов */
@media (max-width: 1024px) {
  .projects-grid{ 
    grid-template-columns:repeat(2, 1fr); 
    grid-template-rows:repeat(3, 1fr);
    height:calc(100vh - 60px);
  }
}

@media (max-width: 768px) {
  .projects-grid{ 
    grid-template-columns:1fr; 
    grid-template-rows:repeat(6, 1fr);
    height:calc(100vh - 40px);
  }
  .portfolio-grid .container{ padding:0; }
  .portfolio-hero{ padding:60px 0 30px; }
  .portfolio-filters{ padding:20px 0; }
  .filters{ gap:12px; }
  .filter-btn{ padding:12px 20px; font-size:14px; }
  .project-card{ 
    border-right: none; 
    border-bottom: 1px solid rgba(0,0,0,0.05);
  }
  .project-card:last-child{ border-bottom: none; }
}
@media (max-width: 480px) {
  .projects-grid{ 
    grid-template-columns:1fr; 
    gap:0; 
  }
}

/* Docstring: Стили карточек на всю ширину с разделителями */
.project-card{ 
  position:relative; 
  border-radius:0; 
  overflow:hidden; 
  box-shadow:none; 
  transition:all .3s ease; 
  cursor:pointer;
  background: white;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(0,0,0,0.05);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.project-card:nth-child(3n){ border-right: none; }
.project-card:nth-child(n+4){ border-bottom: none; }
.project-card:hover{ 
  transform:scale(1.02); 
  box-shadow:0 0 0 4px rgba(220, 38, 38, 0.3);
  z-index: 10;
}

.project-card__image{ 
  position:relative; 
  height:100%; 
  overflow:hidden; 
}
.project-card__image img{ 
  width:100%; 
  height:100%; 
  object-fit:cover; 
  transition:transform .3s ease; 
}
.project-card:hover .project-card__image img{ 
  transform:scale(1.05); 
}

/* Текст поверх изображения для полноэкранных карточек */
.project-card__overlay{ 
  position:absolute; 
  inset:0; 
  background:linear-gradient(180deg,transparent 15%,rgba(0,0,0,.85)); 
  display:flex; 
  flex-direction:column; 
  justify-content:flex-end; 
  padding:40px; 
  color:white; 
  opacity:1; 
  transition:opacity .3s ease; 
}
.project-card__title{ 
  margin:0 0 8px; 
  font-size:clamp(24px, 4vw, 40px); 
  font-weight:700; 
  text-transform:uppercase;
  letter-spacing:1px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}
.project-card__details{ 
  margin:0 0 20px; 
  font-size:clamp(16px, 2.5vw, 20px); 
  font-weight:400; 
  opacity:0.95;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}

/* Красивая кнопка "Подробнее" для полноэкранного режима */
.project-card__btn{ 
  padding:12px 24px; 
  background:linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%); 
  color:white; 
  border:0; 
  border-radius:25px; 
  cursor:pointer; 
  font-weight:600; 
  font-size:clamp(12px, 1.8vw, 16px); 
  transition:all .3s ease; 
  text-align: center;
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.project-card__btn:hover{ 
  background:linear-gradient(135deg, var(--red-dark) 0%, #8b0000 100%); 
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(220, 38, 38, 0.4);
}
.project-card__btn:active{ 
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
}


/* [modal] Модальное окно для галереи проекта (полноэкранное) */
.modal{ position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.9); padding:20px; }
.modal__overlay{ position:absolute; inset:0; }
.modal__content{ position:relative; background:white; border-radius:20px; max-width:95vw; width:100%; max-height:95vh; overflow:auto; box-shadow:0 30px 60px rgba(0,0,0,.5); margin:0 auto; display:flex; flex-direction:column; }
.modal__close{ position:absolute; top:15px; right:15px; width:50px; height:50px; background:rgba(0,0,0,.8); color:white; border:0; border-radius:50%; cursor:pointer; font-size:28px; z-index:10; transition:all .3s ease; display:flex; align-items:center; justify-content:center; }
.modal__close:hover{ background:var(--red); transform:scale(1.1); }
.modal__gallery{ position:relative; display:flex; flex-direction:column; }
.gallery-main{ overflow:hidden; background:#000; display:flex; align-items:center; justify-content:center; height:65vh; }
.gallery-main img{ max-width:100%; max-height:100%; object-fit:contain; transition:transform .3s ease; border-radius:8px; }
.gallery-thumbs{ display:flex; gap:15px; padding:25px; overflow-x:auto; background:#fafafa; justify-content:center; }
.gallery-thumb{ width:120px; height:90px; border-radius:10px; overflow:hidden; cursor:pointer; opacity:0.7; transition:all .3s ease; border:3px solid transparent; flex-shrink:0; }
.gallery-thumb:hover{ opacity:1; transform:translateY(-2px); }
.gallery-thumb.active{ opacity:1; border-color:var(--red); }
.gallery-thumb img{ width:100%; height:100%; object-fit:cover; }
.modal__info{ padding:25px 30px; background:#fff; border-top:1px solid #eee; flex-shrink:0; min-height:auto; }
.modal__info h2{ margin:0 0 12px; font-size:26px; font-weight:700; color:var(--black); }
.modal__info p{ margin:0 0 10px; color:#666; line-height:1.6; font-size:16px; }
.modal__info p:last-child{ margin-bottom:0; }
.modal__info p:empty{ display:none; }

/* Docstring: Мобильная адаптивность для модального окна */
@media (max-width: 768px) {
  .modal{ padding:10px; }
  .modal__content{ max-width:98vw; max-height:98vh; border-radius:15px; }
  .gallery-main{ height:50vh; }
  .gallery-thumbs{ padding:15px; gap:10px; }
  .gallery-thumb{ width:80px; height:60px; }
  .modal__info{ padding:20px; }
  .modal__info h2{ font-size:22px; margin-bottom:10px; }
  .modal__info p{ font-size:15px; margin-bottom:8px; }
  .modal__close{ top:10px; right:10px; width:40px; height:40px; font-size:24px; }
  .filter-btn{ padding:10px 20px; font-size:14px; }
}