/* ============================================================
   булочка · bulochka.baby · страница «Скоро открытие»
   Цвета можно менять здесь — всё остальное пересчитается.
   ============================================================ */
:root {
  --ink:   #2E3A59;   /* текст, заголовки, ссылки */
  --btn:   #C08763;   /* акцентные кнопки */
  --block: #C08763;   /* акцент «тёмных» блоков (плашка сверху, рамка) */

  --bg:     #FBF6EC;  /* фон страницы */
  --card:   #FFFEFA;  /* карточки */
  --yellow: #F6ECC9;  /* светло-жёлтая плашка / бейдж */

  /* Стиль блока «Сшито в России» — режим «Контур» */
  --block-bg:     transparent;
  --block-fg:     var(--ink);
  --block-tint:   color-mix(in srgb, var(--block) 8%, transparent);
  --block-border: 1.5px solid color-mix(in srgb, var(--block) 50%, transparent);

  --font-head: 'Comfortaa', 'Nunito', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
}
img { max-width: 100%; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: color-mix(in srgb, var(--ink) 80%, black); text-decoration: underline; }

.page { min-height: 100vh; display: flex; flex-direction: column; }

/* ---------- плашка сверху ---------- */
.ribbon {
  background: var(--block);
  color: #FBF6EC;
  text-align: center;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 10px 20px;
}

/* ---------- hero ---------- */
.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 72px 24px 0;
  text-align: center;
}
.hero__logo { width: min(380px, 70vw); height: auto; }
.hero__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
  margin: 36px 0 0;
  max-width: 640px;
  line-height: 1.25;
}
.hero__lead {
  font-size: 19px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
  max-width: 520px;
  margin: 16px 0 0;
}

/* ---------- соцсети ---------- */
.socials {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 32px;
}
.socials a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 13px;
  min-width: 44px;
  min-height: 44px;
  transition: transform .2s ease;
}
.socials a:hover { text-decoration: none; transform: translateY(-3px); }
.socials img { width: 64px; height: 64px; object-fit: contain; }

/* ---------- контейнеры ---------- */
.wrap { max-width: 1060px; width: 100%; margin: 72px auto 0; padding: 0 24px; }
.wrap--tight { margin-top: 20px; }

/* ---------- карточка анонса ---------- */
.announce {
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 28px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
}
.announce picture { display: block; min-height: 340px; }
.announce__photo {
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
  display: block;
}
.announce__body {
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.badge {
  align-self: flex-start;
  background: var(--yellow);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.announce__title {
  font-family: var(--font-head);
  font-size: 28px;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}
.announce__text {
  margin: 0;
  line-height: 1.65;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}
.announce__note {
  margin: 0;
  font-size: 14px;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}

/* ---------- блок преимуществ (контур) ---------- */
.features {
  background: var(--block-bg);
  color: var(--block-fg);
  border: var(--block-border);
  border-radius: 28px;
  padding: 44px 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.features__title {
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 8px;
}
.features__text {
  line-height: 1.6;
  font-size: 15px;
  color: color-mix(in srgb, var(--block-fg) 78%, transparent);
}

/* ---------- футер ---------- */
.footer {
  text-align: center;
  padding: 48px 24px 36px;
  font-size: 14px;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}

/* ---------- анимации ---------- */
@keyframes bul-rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
.bul-reveal { opacity: 0; }
.bul-reveal.bul-in { animation: bul-rise .7s cubic-bezier(.22,.8,.36,1) forwards; }

@keyframes bul-wave {
  0%, 86%, 100% { transform: rotate(0deg); }
  89% { transform: rotate(-7deg); }
  92% { transform: rotate(6deg); }
  95% { transform: rotate(-4deg); }
  98% { transform: rotate(2deg); }
}
.bul-wave { animation: bul-wave 6s ease-in-out infinite; transform-origin: 60% 90%; }

@keyframes bul-wiggle {
  0%, 100% { transform: rotate(0) translateY(0); }
  25% { transform: rotate(-5deg) translateY(-3px); }
  60% { transform: rotate(4deg) translateY(-2px); }
}
.bul-icon:hover img { animation: bul-wiggle .55s ease-in-out; }

/* Без JS — всё видно сразу */
.no-js .bul-reveal { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .bul-reveal, .bul-wave, .bul-icon img { animation: none !important; opacity: 1 !important; }
  .socials a { transition: none; }
}

/* ---------- мобильная вёрстка ---------- */
@media (max-width: 760px) {
  .m1 { grid-template-columns: 1fr !important; }
  .m2 { grid-template-columns: 1fr 1fr !important; }
  .m5 { flex-wrap: nowrap !important; gap: 8px !important; width: 100%; max-width: 420px; }
  .m5 a { flex: 1 1 0; min-width: 0; font-size: 11px !important; }
  .m5 img { width: 100% !important; max-width: 58px; height: auto !important; aspect-ratio: 1 / 1; }

  .hero { padding-top: 56px; }
  .wrap { margin-top: 56px; }
  .wrap--tight { margin-top: 16px; }
  .announce picture { min-height: 0; }
  .announce__photo { min-height: 0; aspect-ratio: 5 / 4; height: auto; }
  .announce__body { padding: 32px 24px; }
  .features { padding: 32px 24px; gap: 24px; }
}