/* ==========================================================================
   Посадочная страница Sayntez.
   Палитра продолжает интерфейс (хвойный акцент), но композиция своя:
   разворот вместо блоков-карточек, слэб-серифная антиква в заголовках
   и кириллическая гротеска в тексте.
   ========================================================================== */
.home{
  --h-paper:#f4f5f2;
  --h-ink:#131a17;
  --h-ink-2:#4d5a55;
  --h-ink-3:#7d8a85;
  --h-line:#dfe3dd;
  --h-accent:#2c6a58;
  --h-accent-deep:#1e4c3e;
  --h-wash:#e3efe8;
  --h-bronze:#8a5a17;
  --h-dark:#141a18;
  --h-dark-ink:#e6ebe7;
  --h-dark-line:#2a3330;

  background:var(--h-paper); color:var(--h-ink);
  font-family:"Golos Text","Segoe UI",system-ui,sans-serif;
  font-size:17px; line-height:1.6;
}
.home *{box-sizing:border-box}
.home h1,.home h2,.home h3{
  font-family:Bitter,Georgia,"Times New Roman",serif;
  font-weight:600; line-height:1.12; letter-spacing:-.015em;
  margin:0; text-wrap:balance;
}
.home p{margin:0}
.home a{color:var(--h-accent)}
.hsec{padding:clamp(56px,8vw,104px) 24px}
.hin{max-width:1120px; margin:0 auto}
.eyebrow{
  font-family:"Golos Text",system-ui,sans-serif;
  font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--h-bronze); margin-bottom:14px;
}

/* ------------------------------------------------------------------ герой */
.hero{padding-top:clamp(84px,11vw,132px)}
.hero .hin{display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(38px,5vw,64px); align-items:center}
@media(min-width:940px){ .hero .hin{grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr)} }
.hero h1{font-size:clamp(36px,5.6vw,60px); max-width:13ch}
.hero h1 em{font-style:normal; color:var(--h-accent); }
.hero .lead{margin-top:22px; font-size:clamp(17px,2vw,20px); line-height:1.5; color:var(--h-ink-2); max-width:44ch}
.hero .cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; align-items:center}
.hbtn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 26px; border-radius:10px; font-size:16px; font-weight:600;
  text-decoration:none; border:1px solid transparent; min-height:52px;
  transition:background .15s,border-color .15s,transform .15s;
}
/* Специфичность важна: .home a задаёт акцентный цвет всем ссылкам и без
   уточнения перебивает цвет кнопки — надпись становится зелёной на зелёном. */
.home .hbtn-main{background:var(--h-accent); color:#fff}
.home .hbtn-main:hover{background:var(--h-accent-deep)}
.home .hbtn-ghost{border-color:var(--h-line); color:var(--h-ink); background:#fff}
.home .hbtn-ghost:hover{border-color:var(--h-ink-3)}
.hbtn:focus-visible{outline:2px solid var(--h-accent); outline-offset:3px}
.hero .under{margin-top:16px; font-size:14.5px; color:var(--h-ink-3)}

/* ---------------------------------------------- разворот: запрос → сайт */
.turn{display:grid; gap:16px}
.ask{
  background:#fff; border:1px solid var(--h-line); border-radius:14px;
  padding:20px 22px; box-shadow:0 1px 2px rgba(19,26,23,.04), 0 18px 40px -30px rgba(19,26,23,.5);
  position:relative;
}
.ask .who{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--h-ink-3); margin-bottom:9px}
.ask .said{font-size:17.5px; line-height:1.5}
.ask .caret{
  display:inline-block; width:2px; height:1.05em; background:var(--h-accent);
  vertical-align:-2px; margin-left:2px; animation:blink 1.15s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}
.turn .arrow{display:flex; align-items:center; gap:10px; color:var(--h-ink-3); font-size:13.5px; padding-left:4px}
.turn .arrow svg{flex:none}

/* мини-браузер с готовым сайтом */
.win{
  border:1px solid var(--h-line); border-radius:14px; overflow:hidden; background:#fff;
  box-shadow:0 2px 4px rgba(19,26,23,.05), 0 30px 60px -34px rgba(19,26,23,.55);
}
.win .bar{display:flex; align-items:center; gap:7px; padding:11px 14px; background:#eceee9; border-bottom:1px solid var(--h-line)}
.win .bar i{width:9px; height:9px; border-radius:50%; background:#cfd4cd; display:block}
.win .bar .url{
  margin-left:8px; flex:1; background:#fff; border-radius:5px; padding:4px 10px;
  font-size:11.5px; color:var(--h-ink-3); font-family:ui-monospace,Menlo,monospace;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Внутренности — настоящий макет сайта пекарни, собранный на CSS */
.shop{--s-bg:#fbf7f1; --s-ink:#2a2018; --s-accent:#a5541c; background:var(--s-bg); color:var(--s-ink); padding:20px}
.shop .nav{display:flex; align-items:center; gap:14px; font-size:11.5px; color:#6b5a49; margin-bottom:18px}
.shop .nav b{font-family:Bitter,Georgia,serif; font-size:15px; color:var(--s-ink); margin-right:auto; letter-spacing:-.01em}
.shop .hero2{display:grid; grid-template-columns:1.15fr .85fr; gap:16px; align-items:center; margin-bottom:18px}
.shop h4{font-family:Bitter,Georgia,serif; font-size:clamp(19px,2.4vw,25px); line-height:1.12; margin:0 0 8px; font-weight:600}
.shop .sub{font-size:12.5px; color:#6b5a49; line-height:1.45; margin-bottom:12px}
.shop .btn2{display:inline-block; background:var(--s-accent); color:#fff; font-size:12px; font-weight:600; padding:9px 15px; border-radius:7px}
/* Фотографии подключены фоном намеренно: если файла нет, остаётся бежевая
   плашка и страница выглядит целой — вместо значка битой картинки. */
.shop .ph{
  border-radius:10px; overflow:hidden; aspect-ratio:4/5;
  background:#efe2d2 url('/img/home/bakery-hero.jpg') center/cover no-repeat;
}
.shop .cards{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.shop .card{background:#fff; border-radius:9px; overflow:hidden; border:1px solid #efe4d6}
.shop .card .im{height:52px; background:#f0e3d3 center/cover no-repeat}
.shop .card:nth-child(1) .im{background-image:url('/img/home/bread-1.jpg')}
.shop .card:nth-child(2) .im{background-image:url('/img/home/bread-2.jpg')}
.shop .card:nth-child(3) .im{background-image:url('/img/home/bread-3.jpg')}
.shop .card .tx{padding:8px 9px}
.shop .card .nm{font-size:11.5px; font-weight:600; line-height:1.25}
.shop .card .pr{font-size:11.5px; color:var(--s-accent); font-weight:600; margin-top:3px; font-variant-numeric:tabular-nums}
@media(max-width:520px){ .shop .hero2{grid-template-columns:1fr} .shop .ph{aspect-ratio:16/9} .shop .cards{grid-template-columns:1fr 1fr} }

/* ------------------------------------------------------- тёмная полоса */
.band{background:var(--h-dark); color:var(--h-dark-ink)}
.band h2{font-size:clamp(26px,3.6vw,38px); max-width:18ch}
.band .eyebrow{color:#b9a06a}
.band .lead{color:#9dada7; margin-top:16px; max-width:52ch; font-size:17px}
/* Нумерация у шагов своя («Шаг 01»), маркеры списка её дублировали. */
.steps{
  display:grid; grid-template-columns:minmax(0,1fr); gap:0; margin-top:44px;
  border-top:1px solid var(--h-dark-line); list-style:none; padding:0;
}
@media(min-width:800px){ .steps{grid-template-columns:repeat(3,1fr)} }
.step{padding:26px 0; border-bottom:1px solid var(--h-dark-line)}
@media(min-width:800px){
  .step{padding:28px 28px 30px 0; border-bottom:0; border-right:1px solid var(--h-dark-line)}
  .step:last-child{border-right:0; padding-right:0}
  .step + .step{padding-left:28px}
}
.step .n{
  font-family:Bitter,Georgia,serif; font-size:13px; font-weight:600; color:#b9a06a;
  letter-spacing:.1em; display:block; margin-bottom:12px; font-variant-numeric:tabular-nums;
}
.step h3{font-size:19px; margin-bottom:8px; color:#fff}
.step p{color:#9dada7; font-size:15.5px; line-height:1.55}

/* --------------------------------------------------------------- выгоды */
.gains{display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(30px,4vw,52px)}
@media(min-width:880px){ .gains{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)} }
.gains h2{font-size:clamp(26px,3.4vw,36px); max-width:14ch}
.gains .note{margin-top:16px; color:var(--h-ink-2); max-width:38ch}
.glist{display:grid; gap:2px; background:var(--h-line); border:1px solid var(--h-line); border-radius:12px; overflow:hidden}
@media(min-width:600px){ .glist{grid-template-columns:1fr 1fr} }
.gain{background:#fff; padding:22px}
.gain h3{font-size:17px; margin-bottom:7px}
.gain p{font-size:15px; color:var(--h-ink-2); line-height:1.5}

/* ----------------------------------------------------------- для кого */
.forwho{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}
.chip{
  border:1px solid var(--h-line); background:#fff; border-radius:24px;
  padding:9px 17px; font-size:15px; color:var(--h-ink-2);
}
.chip b{color:var(--h-ink); font-weight:600}

/* ------------------------------------------------------------ вопросы */
.faq{display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(26px,4vw,52px)}
@media(min-width:880px){ .faq{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)} }
.qa{border-top:1px solid var(--h-line)}
.qa details{border-bottom:1px solid var(--h-line)}
.qa summary{
  cursor:pointer; list-style:none; padding:19px 40px 19px 0; position:relative;
  font-size:17.5px; font-weight:600; font-family:Bitter,Georgia,serif; letter-spacing:-.01em;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:""; position:absolute; right:6px; top:26px; width:11px; height:11px;
  border-right:2px solid var(--h-ink-3); border-bottom:2px solid var(--h-ink-3);
  transform:rotate(45deg); transition:transform .18s;
}
.qa details[open] summary::after{transform:rotate(-135deg); top:30px}
.qa summary:focus-visible{outline:2px solid var(--h-accent); outline-offset:2px; border-radius:4px}
.qa .ans{padding:0 0 20px; color:var(--h-ink-2); max-width:60ch; font-size:16px}

/* ------------------------------------------------------------- финал */
.final{background:var(--h-wash)}
.final .hin{text-align:center}
.final h2{font-size:clamp(28px,4vw,42px); max-width:21ch; margin:0 auto}
.final p{margin:18px auto 0; color:var(--h-ink-2); max-width:46ch}
.final .cta{justify-content:center; display:flex; gap:12px; flex-wrap:wrap; margin-top:30px}

/* ------------------------------------------------------------ подвал */
.hfoot{border-top:1px solid var(--h-line); padding:34px 24px; font-size:14.5px; color:var(--h-ink-3)}
.hfoot .hin{display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center}
.hfoot .sp{flex:1}

@media (prefers-reduced-motion:reduce){
  .home *{animation-duration:.01ms !important; transition-duration:.01ms !important}
  .ask .caret{animation:none}
}

/* ---------- обещание срока ---------- */
.promise{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:18px;
  padding:8px 16px 8px 13px; border-radius:24px;
  background:var(--h-wash); border:1px solid #c9e0d5; color:var(--h-accent-deep);
  font-size:15px; font-weight:600; letter-spacing:-.005em;
}
.promise .pdot{
  width:8px; height:8px; border-radius:50%; background:var(--h-accent); flex:none;
  box-shadow:0 0 0 4px rgba(44,106,88,.15);
}
.band .step p b{color:#fff; font-weight:600}
.final p b{color:var(--h-accent-deep)}

/* ---------- цена ---------- */
.price{display:grid; grid-template-columns:minmax(0,1fr); gap:14px; margin-top:26px; max-width:760px}
@media(min-width:680px){ .price{grid-template-columns:1fr 1fr} }
.pcard{background:#fff; border:1px solid var(--h-line); border-radius:14px; padding:24px 26px}
/* Бесплатный месяц — то, ради чего человек нажмёт кнопку: выделяем его одного. */
.pcard-free{border-color:var(--h-accent); background:var(--h-wash)}
.plabel{font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--h-ink-3); margin-bottom:12px}
.pcard-free .plabel{color:var(--h-accent-deep)}
.pnum{
  font-family:Bitter,Georgia,serif; font-size:clamp(30px,3.6vw,40px); font-weight:600;
  line-height:1; letter-spacing:-.02em; margin-bottom:12px; font-variant-numeric:tabular-nums;
}
.pcard-free .pnum{color:var(--h-accent-deep)}
.pnum span{font-family:"Golos Text",system-ui,sans-serif; font-size:16px; font-weight:500; color:var(--h-ink-3); letter-spacing:0}
.pnote{font-size:15px; line-height:1.5; color:var(--h-ink-2)}
.hero .under b{color:var(--h-accent-deep); font-weight:600}