/* ============================================================
   впорядке — главная страница (home.css)
   Общая база (токены, Inter, кнопки, шапка/футер) — в
   assets/base.css. Здесь — только компоненты главной:
   hero, продукты, «о нас», контакты и её ритм секций.
   ============================================================ */

/* на главной ссылки не подчёркиваются (кроме мест, где задано явно) */
a { text-decoration: none; }

/* ---------- логотип-леттеринг «впорядке» в шапке/футере ---------- */
.brand .logo-img { height: 30px; width: auto; }
@media (max-width: 700px) { .brand .logo-img { height: 25px; } }

/* ---------- hero ---------- */
.hero{
  position:relative;
  padding:56px 0 24px;
  border-bottom:1px solid var(--line);
  overflow:hidden;
  /* Фон: небо с цветами (кроп из header.webp) + легкая вуаль под текст */
  background-image:
    linear-gradient(90deg, rgba(245,239,230,0.97) 0%, rgba(245,239,230,0.88) 34%, rgba(245,239,230,0.55) 58%, rgba(245,239,230,0.18) 82%, rgba(245,239,230,0.06) 100%),
    url('assets/img/hero-desktop.webp');
  background-size:cover, cover;
  background-position:center, center right;
  background-repeat:no-repeat, no-repeat;
}
@media(min-width:900px){ .hero{padding:104px 0 88px} }
@media(max-width:768px){
  .hero{
    background-image:
      linear-gradient(180deg, rgba(245,239,230,0.94) 0%, rgba(245,239,230,0.82) 48%, rgba(245,239,230,0.62) 100%),
      url('assets/img/hero-mobile.webp');
    background-position:center, center right;
  }
}
.hero-grid{
  display:grid; gap:32px;
}
/* визуальной колонки нет — текст занимает одну колонку, справа дышит фон с цветами */
.hero-copy{max-width:620px}
@media(min-width:900px){ .hero-grid{grid-template-columns:minmax(0, 1fr)} }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--text-2);
  font-size:12.5px; font-weight:500; letter-spacing:0.01em;
}
.eyebrow-dot{
  width:6px; height:6px; border-radius:50%; background:#C7B7A6; box-shadow:0 0 0 4px rgba(199,183,166,0.18);
}
.h1{
  margin:18px 0 16px;
  font-size:clamp(32px, 5.2vw, 52px);
  line-height:0.98; letter-spacing:-0.04em; font-weight:600;
  color:var(--text);
  max-width:14ch;
}
.lead{
  margin:0; max-width:52ch;
  font-size:clamp(15px, 1.6vw, 17px);
  line-height:1.6; color:var(--text-2);
}
.hero-actions{margin-top:28px; display:flex; flex-wrap:wrap; gap:12px}

/* ---------- секции (ритм главной) ---------- */
.section{padding:56px 0; border-bottom:1px solid var(--line)}
@media(min-width:900px){ .section{padding:80px 0} }
/* Компактные секции (короткий контент, например «Контакты») */
.section-compact{padding:32px 0 40px}
@media(min-width:900px){ .section-compact{padding:40px 0 48px} }
.section-compact .section-head{margin-bottom:0}
.section-head{
  display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:20px; margin-bottom:32px;
}
.h2{
  margin:0; font-size:clamp(26px, 3.2vw, 36px); line-height:1.05; letter-spacing:-0.03em; font-weight:600; max-width:16ch;
}
.h2-line{max-width:none; font-size:clamp(22px, 3.4vw, 36px)}
.h2-sub{
  max-width:42ch; color:var(--text-2); font-size:15px; line-height:1.6; margin:0;
}

/* ---------- продукты ---------- */
.grid{
  display:grid; gap:16px;
  grid-template-columns:minmax(0, 1fr);
}
@media(min-width:700px){ .grid{grid-template-columns:repeat(2, minmax(0, 1fr))} }
/* три продукта в один ряд на десктопе */
@media(min-width:900px){ .grid{grid-template-columns:repeat(3, minmax(0, 1fr))} }

.card{
  min-width:0;
  background:var(--card-2);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-soft);
  padding:20px;
  display:flex; flex-direction:column; min-height:260px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{transform:translateY(-2px); box-shadow:var(--shadow-card); border-color:#CFC2B3}
.card-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px}
/* Знак продукта «такт» */
.card-mark{
  width:36px; height:36px; border-radius:50%;
  flex:0 0 36px; box-shadow:var(--shadow-soft);
}
.card-tags{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px}
.card-tag{
  font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--text-3); background:var(--card); border:1px solid var(--line);
  padding:5px 8px; border-radius:999px; white-space:nowrap;
}
.card h3{margin:0 0 8px; font-size:17px; line-height:1.25; letter-spacing:-0.02em; font-weight:600}
.h3-dots{color:var(--text-3); font-weight:500; letter-spacing:0.18em}
.card p{margin:0; font-size:14px; line-height:1.6; color:var(--text-2)}
.card-foot{margin-top:auto; padding-top:18px; display:flex; align-items:center; gap:10px}
.link{
  font-size:13.5px; font-weight:500; color:var(--text);
  display:inline-flex; align-items:center; gap:6px;
  border-bottom:1px solid var(--line); padding-bottom:1px;
}
.link:hover{border-color:var(--text)}

/* ---------- «о нас» ---------- */
.about-grid{display:grid; gap:24px}
@media(min-width:900px){ .about-grid{grid-template-columns:1.05fr 0.95fr; gap:48px} }
.about-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-card);
  padding:22px; box-shadow:var(--shadow-soft);
}
.check-list{list-style:none; padding:0; margin:16px 0 0; display:grid; gap:10px}
.check-list li{
  display:flex; gap:10px; font-size:14px; color:var(--text-2); line-height:1.5;
}
.check{
  width:20px; height:20px; border-radius:50%; flex:0 0 20px;
  display:grid; place-items:center; background:var(--card-2); border:1px solid var(--line); color:var(--text-2);
  margin-top:1px;
}
.check svg{width:12px; height:12px}
.contact-card{
  background:var(--card-2); border:1px solid var(--line); border-radius:var(--r-card);
  padding:18px; box-shadow:var(--shadow-soft);
}
.contact-card h4{margin:0 0 6px; font-size:14px; font-weight:600; letter-spacing:-0.01em}
.contact-card p{margin:0; font-size:13.5px; color:var(--text-2); line-height:1.5}

/* ---------- контакты: почта вместо формы ---------- */
.mail-link{color:var(--text); border-bottom:1px solid var(--line); padding-bottom:1px;
  font-size:1rem; letter-spacing:0}
.mail-link:hover{border-color:var(--text)}
.mail-note{color:var(--text-3); font-weight:400; font-size:0.5em; letter-spacing:0; white-space:nowrap}