/* ===== Общая дизайн-система сайта — та же, что в calculator.html ===== */
:root{
  --soil:      #2B2118;
  --soil-70:   #4A3B2C;
  --cream:     #FAF6EE;
  --cream-dim: #F0E9D8;
  --paper:     #FFFFFF;
  --moss:      #4F6B3F;
  --moss-dim:  #E5EBDF;
  --clay:      #C1121C;
  --clay-dim:  #F6DCDA;
  --line:      #E1D6C0;
  --radius: 14px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--soil);
  font-family:'Inter',sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
.wrap{max-width:980px;margin:0 auto;padding:0 24px;}

/* --- Header / nav --- */
.site-header{
  border-bottom:1px solid var(--line);
  padding:18px 0;
  position:sticky; top:0; background:rgba(250,246,238,.92);
  backdrop-filter:blur(6px);
  z-index:10;
}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px;}
.logo{
  font-family:'Fraunces',serif; font-weight:600; font-size:26px;
  text-decoration:none; color:var(--soil); letter-spacing:-0.01em;
  display:flex; align-items:center; gap:10px;
}
.logo svg{width:44px; height:44px; flex-shrink:0;}
nav.main-nav{display:flex; gap:26px;}
nav.main-nav a{
  text-decoration:none; font-size:16px; font-weight:500; color:var(--soil-70);
  padding:4px 0; border-bottom:2px solid transparent;
}
nav.main-nav a:hover, nav.main-nav a.active{color:var(--soil); border-color:var(--moss);}
.nav-cta{
  font-size:15px; font-weight:600; padding:11px 20px; border-radius:999px;
  background:var(--soil); color:var(--cream); text-decoration:none; white-space:nowrap;
}
.nav-cta:hover{background:var(--moss);}
@media(max-width:700px){
  .site-header .wrap{flex-wrap:wrap; row-gap:10px;}
  nav.main-nav{
    order:3; width:100%; display:flex;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    gap:20px; padding-bottom:2px;
  }
  nav.main-nav a{white-space:nowrap;}
}

/* --- Typography --- */
.eyebrow{
  font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--moss); display:flex; align-items:center; gap:8px;
  margin-bottom:10px;
}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--moss);display:inline-block;}
h1{font-family:'Fraunces',serif; font-weight:500; font-size:clamp(30px,4.5vw,44px); margin:0 0 14px; letter-spacing:-0.01em; line-height:1.1;}
h2{font-family:'Fraunces',serif; font-weight:500; font-size:clamp(22px,3vw,28px); margin:0 0 10px; letter-spacing:-0.01em;}
h3{font-family:'Fraunces',serif; font-weight:500; font-size:19px; margin:0 0 6px;}
.lede{font-size:17px; color:var(--soil-70); max-width:60ch;}
.mono{font-family:'JetBrains Mono',monospace;}

/* --- Sections --- */
section{padding:56px 0;}
section.tight{padding:36px 0;}
section + section{border-top:1px solid var(--line);}
.hero{padding:64px 0 48px;}
.hero.hero-photo{
  background-size:cover;
  background-position:center;
  background-blend-mode:normal;
}
.hero.hero-photo::before{content:none;}
.hero-photo-index{background-image:linear-gradient(rgba(250,246,238,.90),rgba(250,246,238,.97)), url('images/bg-index.jpg');}
.hero-photo-opt{background-image:linear-gradient(rgba(250,246,238,.90),rgba(250,246,238,.97)), url('images/bg-opt.jpg');}
.hero-photo-dostavka{background-image:linear-gradient(rgba(250,246,238,.90),rgba(250,246,238,.97)), url('images/bg-dostavka.jpg');}
.hero-photo-reviews{background-image:linear-gradient(rgba(250,246,238,.90),rgba(250,246,238,.97)), url('images/bg-reviews.jpg');}
.hero-photo-contacts{background-image:linear-gradient(rgba(250,246,238,.90),rgba(250,246,238,.97)), url('images/bg-contacts.jpg');}

/* --- Cards / grid --- */
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px;
}
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media(max-width:760px){.card-grid{grid-template-columns:1fr;}}
.card-grid.two{grid-template-columns:1fr 1fr;}
@media(max-width:620px){.card-grid.two{grid-template-columns:1fr;}}

/* --- Buttons --- */
.btn{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-family:'Inter',sans-serif; font-weight:600; font-size:15px;
  padding:13px 22px; border-radius:10px; border:1px solid transparent; cursor:pointer;
}
.btn-primary{background:var(--soil); color:var(--cream);}
.btn-primary:hover{background:var(--moss);}
.btn-outline{background:transparent; color:var(--soil); border-color:var(--soil);}
.btn-outline:hover{border-color:var(--moss); color:var(--moss);}
.btn-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px;}

/* --- Tables --- */
table.price{width:100%; border-collapse:collapse; font-size:14px;}
table.price th, table.price td{padding:11px 14px; text-align:left; border-bottom:1px solid var(--line);}
table.price th{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--soil-70); font-weight:600;}
table.price td.num{font-family:'JetBrains Mono',monospace; text-align:right; white-space:nowrap;}
table.price tr:last-child td{border-bottom:none;}

/* --- Steps --- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:24px;}
@media(max-width:760px){.steps{grid-template-columns:1fr;}}
.step .num{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--clay); margin-bottom:8px;}

/* --- Note / callout --- */
.note{
  font-size:13.5px; color:var(--soil-70); margin-top:18px;
  padding:14px 16px; background:var(--cream-dim); border-radius:10px;
  border-left:3px solid var(--clay);
}
.note b{color:var(--soil);}

/* --- Forms --- */
.field{margin-bottom:16px;}
.field label{display:block; font-size:13px; font-weight:600; margin-bottom:6px;}
.field input, .field textarea{
  width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:10px;
  background:var(--paper); font-family:'Inter',sans-serif; font-size:15px; color:var(--soil);
}
.field input:focus, .field textarea:focus{outline:2px solid var(--moss); outline-offset:-1px;}
.field textarea{resize:vertical; min-height:90px;}
/* Телефон с фиксированным префиксом +7: пользователь вводит только 10 цифр,
   код страны нельзя случайно стереть или испортить */
.phone-input{
  display:flex; align-items:stretch; border:1px solid var(--line); border-radius:10px;
  background:var(--paper); overflow:hidden;
}
.phone-input:focus-within{outline:2px solid var(--moss); outline-offset:-1px;}
.phone-input .phone-prefix{
  display:flex; align-items:center; padding:0 4px 0 13px;
  font-family:'JetBrains Mono',monospace; font-size:15px; color:var(--soil-70);
  background:var(--cream); border-right:1px solid var(--line); user-select:none;
}
.phone-input input{
  flex:1; min-width:0; border:none; background:transparent; padding:11px 13px 11px 6px;
  font-family:'Inter',sans-serif; font-size:15px; color:var(--soil);
}
.phone-input input:focus{outline:none;}
.form-status{font-size:13.5px; margin-top:12px; min-height:18px;}
.form-status.ok{color:var(--moss);}
.form-status.error{color:var(--clay);}

/* --- Footer --- */
footer.site-footer{border-top:1px solid var(--line); padding:36px 0; margin-top:20px;}
footer.site-footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; font-size:13px; color:var(--soil-70);}
footer.site-footer a{text-decoration:none; color:var(--soil-70);}
footer.site-footer a:hover{color:var(--moss);}

/* --- Utility --- */
.badge{
  display:inline-block; font-family:'JetBrains Mono',monospace; font-size:11px;
  letter-spacing:.04em; text-transform:uppercase; padding:3px 9px; border-radius:6px;
  background:var(--moss-dim); color:var(--moss);
}

/* --- Mobile safety net for price tables --- */
@media(max-width:480px){
  table.price{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;}
}

/* --- Reviews --- */
.review-card{margin-bottom:16px;}
.review-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:8px; flex-wrap:wrap;}
.review-name{font-family:'Fraunces',serif; font-weight:600; font-size:16px;}
.review-date{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--soil-70);}
.review-stars{color:var(--clay); letter-spacing:2px; font-size:14px; margin-bottom:10px;}
.review-text{font-size:15px; color:var(--soil); line-height:1.6;}
.review-link{display:inline-block; margin-top:10px; font-size:12.5px;}
.review-reply{
  margin-top:14px; padding:12px 14px; background:var(--cream-dim); border-radius:10px;
  border-left:3px solid var(--moss); font-size:13.5px; color:var(--soil-70);
}
.review-reply b{color:var(--soil);}
.review-summary{display:flex; align-items:center; gap:14px; margin-bottom:28px;}
.review-summary .big-rating{font-family:'Fraunces',serif; font-size:40px; font-weight:500; line-height:1;}
/* --- Video slots: placeholders for VK Video embeds (vertical 9:16) --- */
.review-summary .stars-big{color:var(--clay); font-size:20px; letter-spacing:2px;}
.video-slot{
  aspect-ratio: 9/16;
  max-width: 320px;
  margin: 0 auto;
  border:1px dashed var(--line);
  border-radius:var(--radius);
  background:var(--cream-dim);
  display:flex; align-items:center; justify-content:center;
  color:var(--soil-70); font-size:13px; text-align:center; padding:20px;
  line-height:1.5;
}
.video-slot b{display:block; color:var(--soil); font-size:13px; margin-bottom:4px; font-family:'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.04em;}
/* Когда будет ссылка с VK Video: заменить .video-slot на <iframe> с embed-кодом (VK: «Поделиться» → «Код для вставки») */
iframe.vk-video{width:100%; max-width:320px; aspect-ratio:9/16; border:0; border-radius:var(--radius); display:block; margin:0 auto;}

/* --- Photo slots: placeholders until real photos are provided --- */
.photo-slot{
  aspect-ratio: 16/9;
  border:1px dashed var(--line);
  border-radius:var(--radius);
  background:var(--cream-dim);
  display:flex; align-items:center; justify-content:center;
  color:var(--soil-70); font-size:13px; text-align:center; padding:24px;
  line-height:1.5;
}
.photo-slot.square{aspect-ratio:1/1;}
.photo-slot.wide{aspect-ratio:21/9;}
.photo-slot b{display:block; color:var(--soil); font-size:13px; margin-bottom:4px; font-family:'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.04em;}
/* Когда появится реальное фото: заменить .photo-slot на <img class="photo" src="..." alt="..." loading="lazy"> */
img.photo{width:100%; height:100%; object-fit:cover; border-radius:var(--radius); display:block;}