/* =============================================
   ООО «ЛЮВиК» — Стили лендинга
   Файл: css/styles.css
   =============================================
   Для правок: ищите по названию секции
   - HEADER: стили шапки
   - HERO: первый экран
   - PAINS: боли и решения
   - TARIFFS: тарифные пакеты
   - CALCULATOR: калькулятор
   - INFOGRAPHIC: пирог фасада
   - PORTFOLIO: портфолио до/после
   - VIDEO: видео секция
   - STEPS: этапы работ
   - LEADER: руководитель
   - GUARANTEES: гарантии
   - TESTIMONIALS: благодарственные письма
   - FAQ: вопросы-ответы
   - FOOTER: подвал
   - RESPONSIVE: адаптивность
   ============================================= */

/* ===== RESET & BASE ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:90px; }
body { font-family:'Inter',sans-serif; color:#2C3E50; line-height:1.6; background:#fff; }
img { max-width:100%; height:auto; display:block; }
a { text-decoration:none; color:inherit; }

/* ===== VARIABLES ===== */
:root {
  --orange: #E67E22;
  --orange-dark: #d35400;
  --dark: #2C3E50;
  --dark-deep: #1A252F;
  --light-bg: #F8F9FA;
  --text-muted: #7f8c8d;
  --border: #e0e0e0;
  --radius: 12px;
  --shadow: 0 4px 24px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.12);
}

h1,h2,h3,h4,h5 { font-family:'Montserrat',sans-serif; line-height:1.25; }
.container { max-width:1200px; margin:0 auto; padding:0 20px; }
.section-title { font-size:clamp(24px,4vw,36px); font-weight:800; color:var(--dark); text-align:center; margin-bottom:12px; }
.section-subtitle { font-size:clamp(15px,2vw,18px); color:var(--text-muted); text-align:center; margin-bottom:48px; }
.btn-orange { display:inline-block; background:var(--orange); color:#fff; padding:16px 36px; border-radius:10px; font-family:'Montserrat',sans-serif; font-weight:700; font-size:17px; border:none; cursor:pointer; transition:all 0.3s; text-align:center; }
.btn-orange:hover { background:var(--orange-dark); transform:translateY(-2px); box-shadow:0 6px 20px rgba(230,126,34,0.4); }
.btn-dark { display:inline-block; background:var(--dark); color:#fff; padding:16px 36px; border-radius:10px; font-family:'Montserrat',sans-serif; font-weight:700; font-size:17px; border:none; cursor:pointer; transition:all 0.3s; text-align:center; }
.btn-dark:hover { background:#34495e; transform:translateY(-2px); }

/* ===== БЛОК 1: ШАПКА ===== */
.header {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(255,255,255,0.97); backdrop-filter:blur(10px);
  box-shadow:0 2px 20px rgba(0,0,0,0.08);
  transition:all 0.3s;
}
.header-inner {
  display:flex; align-items:center; justify-content:space-between;
  max-width:1200px; margin:0 auto; padding:12px 20px;
  gap:20px;
}
.header-logo { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.header-logo img { height:56px; width:auto; }
.header-logo-text { font-size:12px; color:var(--text-muted); }
.header-slogan {
  font-family:'Montserrat',sans-serif; font-weight:700;
  font-size:clamp(12px,1.3vw,16px); color:var(--dark);
  text-align:center; flex:1; line-height:1.3;
}
.header-contacts { display:flex; align-items:center; gap:16px; flex-shrink:0; }
.header-phones { font-size:13px; line-height:1.6; }
.header-phones a { color:var(--dark); font-weight:600; display:block; }
.header-phones a:hover { color:var(--orange); }
.header-info { font-size:12px; color:var(--text-muted); }
.header-cta { padding:10px 20px; font-size:14px; white-space:nowrap; }
.burger { display:none; background:none; border:none; cursor:pointer; padding:8px; }
.burger span { display:block; width:24px; height:2px; background:var(--dark); margin:5px 0; transition:0.3s; }
.mobile-nav { display:none; }

/* ===== БЛОК 2: HERO ===== */
.hero {
  margin-top:80px; position:relative; min-height:85vh;
  display:flex; align-items:center;
  overflow:hidden;
  /* фон hero через <img> в HTML */
}
.hero::before {
  content:''; position:absolute; inset:0;
  background:rgba(0,0,0,0.5);
}
.hero-content { position:relative; z-index:2; max-width:800px; padding:60px 20px; margin:0 auto; }
.hero h1 { color:#fff; font-size:clamp(28px,5vw,48px); font-weight:900; margin-bottom:16px; }
.hero h2 { color:var(--orange); font-size:clamp(20px,3vw,28px); font-weight:700; margin-bottom:20px; }
.hero-text { color:rgba(255,255,255,0.9); font-size:clamp(15px,1.5vw,18px); margin-bottom:32px; line-height:1.7; }
.hero-badges { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:36px; }
.hero-badge {
  background:rgba(255,255,255,0.95); border-radius:10px; padding:14px 20px;
  display:flex; align-items:center; gap:10px;
  font-size:14px; font-weight:600; color:var(--dark);
  box-shadow:0 4px 16px rgba(0,0,0,0.15);
}
.hero-badge-icon { font-size:22px; }
.hero-note { color:rgba(255,255,255,0.7); font-size:13px; margin-top:16px; line-height:1.6; }

/* ===== БЛОК 3: БОЛИ И РЕШЕНИЯ ===== */
.pains { background:var(--light-bg); padding:80px 0; }
.pains-grid { display:grid; grid-template-columns:1fr 1fr; gap:0; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.pains-header { padding:16px 24px; font-family:'Montserrat',sans-serif; font-weight:700; font-size:15px; }
.pains-header-worry { background:#fde8e8; color:#c0392b; }
.pains-header-answer { background:#d5f5e3; color:#1e8449; }
.pain-row { display:contents; }
.pain-cell { padding:20px 24px; font-size:15px; line-height:1.6; border-bottom:1px solid #f0f0f0; background:#fff; }
.pain-cell:nth-child(odd) { border-right:1px solid #f0f0f0; }
.pain-worry { color:#555; }
.pain-answer { color:var(--dark); }

/* ===== БЛОК 4: ТАРИФЫ ===== */
.tariffs { padding:80px 0; }
.tariffs-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:36px; }
.tariff-card {
  background:#fff; border:2px solid var(--border); border-radius:16px;
  padding:36px 28px; text-align:center; position:relative;
  transition:all 0.3s; overflow:hidden;
}
.tariff-card:hover { border-color:var(--orange); transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.tariff-card.featured { border-color:var(--orange); box-shadow:var(--shadow-lg); }
.tariff-card.featured::before {
  content:'Популярный'; position:absolute; top:16px; right:-32px;
  background:var(--orange); color:#fff; font-size:11px; font-weight:700;
  padding:4px 40px; transform:rotate(45deg);
  font-family:'Montserrat',sans-serif;
}
.tariff-emoji { font-size:40px; margin-bottom:12px; }
.tariff-name { font-family:'Montserrat',sans-serif; font-weight:800; font-size:22px; color:var(--dark); margin-bottom:8px; }
.tariff-price { font-family:'Montserrat',sans-serif; font-weight:700; font-size:28px; color:var(--orange); margin-bottom:20px; }
.tariff-price span { font-size:16px; font-weight:500; color:var(--text-muted); }
.tariff-features { list-style:none; text-align:left; }
.tariff-features li { padding:8px 0; font-size:14px; color:#555; border-bottom:1px solid #f5f5f5; display:flex; gap:8px; align-items:flex-start; }
.tariff-features li::before { content:'✓'; color:var(--orange); font-weight:700; flex-shrink:0; }
.tariff-tip {
  background:linear-gradient(135deg,#fef9f4,#fff3e0); border:1px solid #f5d5a0;
  border-radius:var(--radius); padding:24px 32px; text-align:center;
  font-size:15px; color:var(--dark);
}
.tariff-tip a { color:var(--orange); font-weight:700; }

/* ===== БЛОК 5: КАЛЬКУЛЯТОР ===== */
/* Стили калькулятора встроены inline, + дополнительные */
#calculator { background:var(--light-bg); padding:60px 20px; }
#luvikPerim::-webkit-slider-thumb, #luvikHeight::-webkit-slider-thumb {
  -webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background:var(--orange); cursor:pointer; box-shadow:0 2px 6px rgba(230,126,34,0.4);
}
#luvikPerim::-moz-range-thumb, #luvikHeight::-moz-range-thumb {
  width:22px; height:22px; border-radius:50%; background:var(--orange);
  cursor:pointer; border:none;
}

/* ===== БЛОК 6: ИНФОГРАФИКА ===== */
.infographic { padding:80px 0; }
.infographic-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-bottom:36px; }
.infographic-card {
  background:#fff; border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow); text-align:center;
}
.infographic-card img { width:100%; }
.infographic-card-label {
  padding:16px; font-family:'Montserrat',sans-serif;
  font-weight:700; font-size:16px; color:var(--dark);
}
.infographic-note {
  background:var(--light-bg); border-left:4px solid var(--orange);
  border-radius:8px; padding:24px 28px; display:flex; align-items:flex-start; gap:16px;
}
.infographic-note-icon { font-size:28px; flex-shrink:0; }
.infographic-note-text { font-size:15px; color:#555; line-height:1.6; }
.infographic-note-text strong { color:var(--dark); }
.infographic-note-text a { color:var(--orange); font-weight:600; }

/* ===== БЛОК 7: ПОРТФОЛИО ===== */
.portfolio { background:var(--light-bg); padding:80px 0; }
.portfolio-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(350px,1fr)); gap:28px; margin-bottom:36px; }
.portfolio-card {
  background:#fff; border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow); position:relative; transition:0.3s;
}
.portfolio-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.portfolio-card.featured { border:3px solid var(--orange); }
.portfolio-badge {
  position:absolute; top:16px; left:16px; z-index:5;
  background:var(--orange); color:#fff; padding:6px 14px;
  border-radius:20px; font-size:12px; font-weight:700;
  font-family:'Montserrat',sans-serif;
}
.portfolio-slider {
  position:relative; width:100%; aspect-ratio:16/10; overflow:hidden; cursor:col-resize;
}
.portfolio-slider img {
  position:absolute; top:0; left:0; width:100%; height:100%;
  object-fit:cover;
}
.portfolio-slider .img-after { clip-path:inset(0 50% 0 0); transition:clip-path 0.05s; }
.portfolio-slider-handle {
  position:absolute; top:0; bottom:0; left:50%; width:4px;
  background:var(--orange); z-index:3; transform:translateX(-50%);
  pointer-events:none; transition:left 0.05s;
}
.portfolio-slider-handle::before {
  content:'◀ ▶'; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%); background:var(--orange);
  color:#fff; width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; letter-spacing:2px;
}
.portfolio-label-before, .portfolio-label-after {
  position:absolute; top:12px; z-index:4; padding:4px 12px;
  border-radius:16px; font-size:12px; font-weight:700;
  font-family:'Montserrat',sans-serif;
}
.portfolio-label-before { left:12px; background:rgba(192,57,43,0.85); color:#fff; }
.portfolio-label-after { right:12px; background:rgba(39,174,96,0.85); color:#fff; }
.portfolio-info { padding:16px 20px; }
.portfolio-info h4 { font-size:16px; font-weight:700; margin-bottom:4px; }
.portfolio-info p { font-size:13px; color:var(--text-muted); }
.portfolio-card.placeholder .portfolio-slider {
  background:linear-gradient(135deg,#ecf0f1,#dfe6e9);
  display:flex; align-items:center; justify-content:center;
}
.portfolio-card.placeholder .portfolio-slider span {
  color:var(--text-muted); font-size:48px;
}

/* ===== БЛОК 7а: ВИДЕО ===== */
.video-section { background:var(--dark); padding:80px 0; }
.video-section .section-title { color:#fff; }
.video-section .section-subtitle { color:rgba(255,255,255,0.65); }
.video-wrapper {
  max-width:800px; margin:0 auto; border-radius:16px; overflow:hidden;
  box-shadow:0 8px 40px rgba(0,0,0,0.3); aspect-ratio:16/9;
}
.video-wrapper iframe { width:100%; height:100%; border:none; }

/* ===== БЛОК 8: ЭТАПЫ ===== */
.steps { padding:80px 0; }
.steps-timeline { max-width:800px; margin:0 auto 36px; }
.step-item {
  display:flex; gap:24px; margin-bottom:36px; position:relative;
}
.step-number {
  flex-shrink:0; width:56px; height:56px; border-radius:50%;
  background:var(--orange); color:#fff; display:flex; align-items:center;
  justify-content:center; font-family:'Montserrat',sans-serif;
  font-weight:800; font-size:20px; position:relative; z-index:2;
}
.step-item:not(:last-child)::before {
  content:''; position:absolute; left:27px; top:56px; bottom:-36px;
  width:2px; background:#f0e6d8; z-index:1;
}
.step-content h4 { font-family:'Montserrat',sans-serif; font-weight:700; font-size:18px; color:var(--dark); margin-bottom:6px; }
.step-content p { font-size:15px; color:#555; line-height:1.6; }
.step-payment {
  max-width:800px; margin:0 auto;
  background:linear-gradient(135deg,var(--orange),var(--orange-dark));
  border-radius:var(--radius); padding:24px 32px; text-align:center;
  color:#fff; font-size:17px; font-weight:600;
  font-family:'Montserrat',sans-serif;
}

/* ===== БЛОК 9: РУКОВОДИТЕЛЬ ===== */
.leader { background:var(--light-bg); padding:80px 0; }
.leader-grid { display:grid; grid-template-columns:350px 1fr; gap:40px; align-items:start; }
.leader-photo { border-radius:16px; overflow:hidden; box-shadow:var(--shadow-lg); }
.leader-photo img { width:100%; aspect-ratio:3/4; object-fit:cover; }
.leader-name { font-family:'Montserrat',sans-serif; font-weight:800; font-size:28px; color:var(--dark); margin-bottom:4px; }
.leader-role { font-size:15px; color:var(--text-muted); margin-bottom:24px; }
.leader-quote {
  font-style:italic; font-size:15px; color:#555; line-height:1.8;
  border-left:4px solid var(--orange); padding-left:20px;
}
.leader-quote p { margin-bottom:16px; }

/* ===== БЛОК 10: ГАРАНТИИ ===== */
.guarantees { padding:80px 0; }
.guarantees-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:20px; margin-bottom:48px; }
.guarantee-card {
  background:#fff; border:1px solid #f0f0f0; border-radius:16px; padding:28px 24px;
  text-align:center; transition:0.3s;
}
.guarantee-card:hover { border-color:var(--orange); transform:translateY(-4px); box-shadow:var(--shadow); }
.guarantee-icon { font-size:36px; margin-bottom:12px; }
.guarantee-card h4 { font-family:'Montserrat',sans-serif; font-weight:700; font-size:16px; color:var(--dark); margin-bottom:8px; }
.guarantee-card p { font-size:14px; color:#666; line-height:1.5; }
.partners { text-align:center; }
.partners h3 { font-family:'Montserrat',sans-serif; font-weight:700; font-size:20px; color:var(--dark); margin-bottom:20px; }
.partners-list { display:flex; justify-content:center; gap:32px; flex-wrap:wrap; }
.partner-link {
  font-size:15px; font-weight:600; color:var(--dark); padding:12px 24px;
  border:1px solid var(--border); border-radius:8px; transition:0.3s;
}
.partner-link:hover { border-color:var(--orange); color:var(--orange); }

/* ===== БЛОК 11: БЛАГОДАРСТВЕННЫЕ ПИСЬМА ===== */
.testimonials { background:var(--light-bg); padding:80px 0; }
.testimonials-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:16px; margin-bottom:32px;
}
.testimonial-thumb {
  border-radius:12px; overflow:hidden; cursor:pointer;
  box-shadow:var(--shadow); transition:0.3s; aspect-ratio:3/4;
}
.testimonial-thumb:hover { transform:scale(1.03); box-shadow:var(--shadow-lg); }
.testimonial-thumb img { width:100%; height:100%; object-fit:cover; }
.testimonials-note { font-size:14px; color:var(--text-muted); text-align:center; margin-bottom:24px; font-style:italic; }

/* Lightbox */
.lightbox {
  display:none; position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,0.9); align-items:center; justify-content:center;
  padding:20px; cursor:zoom-out;
}
.lightbox.active { display:flex; }
.lightbox img { max-width:90vw; max-height:90vh; border-radius:8px; object-fit:contain; }
.lightbox-close {
  position:absolute; top:20px; right:28px; color:#fff;
  font-size:36px; cursor:pointer; z-index:10000;
  width:48px; height:48px; display:flex; align-items:center; justify-content:center;
}

/* ===== БЛОК 13: FAQ ===== */
.faq { padding:80px 0; }
.faq-list { max-width:800px; margin:0 auto; }
.faq-item { border-bottom:1px solid #f0f0f0; }
.faq-question {
  width:100%; background:none; border:none; padding:20px 0;
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:16px;
  color:var(--dark); text-align:left; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq-question:hover { color:var(--orange); }
.faq-arrow { font-size:20px; transition:transform 0.3s; flex-shrink:0; color:var(--orange); }
.faq-item.open .faq-arrow { transform:rotate(180deg); }
.faq-answer { max-height:0; overflow:hidden; transition:max-height 0.4s ease; }
.faq-answer-inner { padding:0 0 20px; font-size:15px; color:#555; line-height:1.7; }

/* ===== БЛОК 14: ФОРМА CTA ===== */
/* inline стили из ТЗ */

/* ===== БЛОК 15: ФУТЕР ===== */
.footer { background:var(--dark-deep); padding:48px 0 24px; color:rgba(255,255,255,0.7); }
.footer-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-bottom:36px; }
.footer-col h4 { font-family:'Montserrat',sans-serif; font-weight:700; font-size:15px; color:#fff; margin-bottom:16px; }
.footer-col p, .footer-col a { font-size:14px; color:rgba(255,255,255,0.6); line-height:1.8; display:block; }
.footer-col a:hover { color:var(--orange); }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,0.1); padding-top:20px;
  font-size:12px; color:rgba(255,255,255,0.4); text-align:center;
}

/* ===== КНОПКА НАВЕРХ ===== */
.scroll-top {
  position:fixed; bottom:28px; right:28px; z-index:900;
  width:50px; height:50px; border-radius:50%;
  background:var(--orange); color:#fff; border:none; cursor:pointer;
  font-size:22px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(230,126,34,0.4);
  opacity:0; transform:translateY(20px); transition:all 0.3s;
  pointer-events:none;
}
.scroll-top.visible { opacity:1; transform:translateY(0); pointer-events:auto; }
.scroll-top:hover { background:var(--orange-dark); transform:translateY(-2px); }

/* ===== RESPONSIVE ===== */
@media(max-width:1024px) {
  .header-slogan { display:none; }
  .leader-grid { grid-template-columns:1fr; }
  .leader-photo { max-width:350px; }
}
@media(max-width:768px) {
  .header-contacts .header-phones,
  .header-contacts .header-info,
  .header-contacts .header-cta { display:none; }
  .burger { display:block; }
  .mobile-nav.open {
    display:flex; flex-direction:column; position:absolute;
    top:100%; left:0; right:0; background:#fff;
    box-shadow:0 8px 24px rgba(0,0,0,0.12); padding:20px;
    gap:12px;
  }
  .mobile-nav a { font-size:15px; font-weight:600; color:var(--dark); padding:10px 0; border-bottom:1px solid #f0f0f0; }
  .mobile-nav .mob-phones a { color:var(--orange); font-size:18px; font-weight:700; border:none; }
  .hero { min-height:70vh; }
  .pains-grid { grid-template-columns:1fr; }
  .pains-header-worry { display:none; }
  .pains-header-answer { display:none; }
  .pain-cell { border-right:none !important; }
  .tariffs-grid { grid-template-columns:1fr; }
  .infographic-grid { grid-template-columns:1fr; }
  .portfolio-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:24px; }
  .hero-badges { flex-direction:column; }
}
@media(max-width:500px) {
  #pkgRow { flex-direction:column !important; }
  #luvikResultSum { font-size:32px !important; }
  .section-title { font-size:22px; }
}