/* ═══════════ СПІЛЬНІ ТОКЕНИ ДВОХ ПОСАДКОВИХ СТОРІНОК ═══════════
   Ті самі значення, що в застосунку (notebook_app/src/base.css, дизайн-система
   v6 «Гібрид»). Не «схожі» — саме ті: сайт і застосунок людина бачить підряд,
   і будь-яка розбіжність читається як два різні продукти.
   ⚠️ Шрифт свій, не з Google: адреса людини нікуди не йде, сторінка працює
   офлайн. Так само зроблено в застосунку (рішення 30.07.2026). */
@font-face{font-family:Manrope;font-weight:400;font-display:swap;
  src:url('fonts/manrope-400-cyrillic.woff2') format('woff2')}
@font-face{font-family:Manrope;font-weight:700;font-display:swap;
  src:url('fonts/manrope-700-cyrillic.woff2') format('woff2')}
@font-face{font-family:Manrope;font-weight:800;font-display:swap;
  src:url('fonts/manrope-800-cyrillic.woff2') format('woff2')}

:root{
  --cream:#fdfaf4; --cream2:#f6f1e7; --paper:#fff;
  --ink:#33291f; --muted:#6f6558;
  --action:#c4552d; --action-text:#a8451f;
  --sage:#7d9370; --sage-soft:#eef2ea;
  --line:#eae4d8; --line2:#ded6c6;
  --sans:'Manrope',-apple-system,'Segoe UI',sans-serif;
  --edge:22px;
  --sh:0 10px 30px rgba(51,41,31,.08);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 var(--edge)}
section{padding:72px 0}
h1,h2,h3{letter-spacing:-.02em;line-height:1.1}
h1{font-size:clamp(34px,6vw,58px);font-weight:800}
h2{font-size:clamp(26px,4vw,38px);font-weight:800}
h3{font-size:20px;font-weight:800}
.lead{margin-top:18px;font-size:clamp(17px,2.2vw,21px);color:var(--muted);max-width:36ch}
.kicker{display:inline-block;color:var(--action-text);font-size:13px;font-weight:800;letter-spacing:.06em}

/* кнопки магазинів */
.stores{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 24px;
  border-radius:16px;border:0;font-family:var(--sans);font-size:16px;font-weight:800;
  text-decoration:none;cursor:pointer}
.btn-main{background:var(--action);color:#fff;box-shadow:0 12px 28px rgba(196,85,45,.28)}
.btn-soon{background:var(--paper);color:var(--muted);border:1px solid var(--line2);cursor:default}
.btn-ghost{background:var(--paper);color:var(--ink);border:1px solid var(--line2)}

/* картки */
.grid{display:grid;gap:18px}
.card{background:var(--paper);border-radius:20px;padding:26px;box-shadow:var(--sh)}
.card h3{margin-bottom:8px}
.card p{color:var(--muted);font-size:15.5px}

/* телефон із знімком */
.phone{border-radius:38px;background:var(--ink);padding:7px;box-shadow:0 30px 60px rgba(51,41,31,.22)}
.phone img{border-radius:31px}

.quiet{background:var(--cream2)}
.note{margin-top:14px;color:var(--muted);font-size:14px}

footer{padding:40px 0 56px;border-top:1px solid var(--line);color:var(--muted);font-size:14px}
footer a{color:var(--action-text)}

@media (max-width:760px){
  section{padding:52px 0}
  .lead{max-width:none}
}