/* CalCash · страница бота (/bot-kalorii-po-foto, /en/telegram-calorie-bot).
   Только переменные из tokens.css, база и общие классы — в site.css. */

/* ---------- первый экран: образец scripts/design/bot-hero-ref.png ---------- */
.bh {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: center;
  padding: 24px 16px 8px; border-radius: 28px; background: var(--cc-color-surface);
  border: 1px solid var(--cc-color-border); box-shadow: 0 30px 60px -40px rgba(42, 44, 42, .25);
}
.bh-text { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.bh-eyebrow { font: 600 12px/16px var(--cc-font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--cc-color-text-secondary); }
.bh-title { margin: 0; font: 600 clamp(34px, 3.7vw, 52px)/1.06 var(--cc-font-heading); letter-spacing: -.015em; color: var(--cc-color-text); text-wrap: balance; }
.bh-lead { margin: 0; max-width: 440px; font: 400 18px/28px var(--cc-font-ui); color: var(--cc-color-text-secondary); }
.bh-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.bh-btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 999px;
  font: 600 15px/20px var(--cc-font-ui); text-decoration: none;
}
.bh-btn-ghost { border: 1.5px solid var(--cc-color-text); color: var(--cc-color-text); }
.bh-btn-ghost:hover { background: var(--cc-color-surface-hover); }
.bh-btn-dark { background: var(--cc-color-action); color: var(--cc-color-text-on-inverse); }
.bh-btn-dark:hover { background: var(--cc-color-action-hover); }
.bh-btn-dark svg { width: 18px; height: 18px; transform: rotate(90deg); }
.bh-note { margin: 0; font: 400 13px/18px var(--cc-font-ui); color: var(--cc-color-text-tertiary); }

.bh-art { position: relative; min-width: 0; isolation: isolate; }
/* мягкое свечение вокруг круга (в образце — персиковое, у нас зелёное); картинка ложится поверх умножением */
.bh-art::before {
  content: ""; position: absolute; z-index: -1; left: 10%; top: 12%; width: 80%; height: 80%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(47, 107, 74, .42), rgba(47, 107, 74, .22) 60%, rgba(225, 236, 229, 0));
  filter: blur(24px); transform: scale(1.3);
}
.bh-scene { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
/* рисованная петля-стрелка снизу слева у круга и штрихи справа сверху — как в образце */
.bh-loop { position: absolute; z-index: 1; left: 12%; bottom: -6%; width: 26%; color: var(--cc-color-accent); }
.bh-note { display: none; }
.bh-doodle { position: absolute; z-index: 1; right: 26%; top: 1%; width: 11%; color: var(--cc-color-accent); }
.bh-badge {
  position: absolute; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--cc-color-surface); color: var(--cc-color-accent);
  box-shadow: 0 12px 28px -10px rgba(42, 44, 42, .3);
}
.bh-badge svg { width: 24px; height: 24px; }
.bh-badge-a { left: 6%; top: 44%; }
.bh-badge-b { right: 4%; top: 48%; }
.bh-bubble {
  position: absolute; left: 0; top: 12%; max-width: 46%;
  padding: 10px 14px; border-radius: 16px 16px 16px 4px;
  background: rgba(253, 253, 251, .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 14px 30px -12px rgba(42, 44, 42, .3);
  font: 400 13px/18px var(--cc-font-ui); color: var(--cc-color-text);
}
.bh-bubble-from { display: block; margin-bottom: 2px; font: 600 12px/16px var(--cc-font-ui); color: var(--cc-color-accent); }
.bh-stat {
  position: absolute; right: 0; bottom: 24%; display: flex; flex-direction: column; gap: 2px;
  padding: 12px 18px; border-radius: 999px; background: var(--cc-color-surface);
  box-shadow: 0 14px 30px -12px rgba(42, 44, 42, .3);
}
.bh-stat-v { font: 600 20px/24px var(--cc-font-number); color: var(--cc-color-text); }
.bh-stat-v small { font: 500 13px/16px var(--cc-font-ui); color: var(--cc-color-text-tertiary); }
.bh-stat-l { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/16px var(--cc-font-ui); color: var(--cc-color-text-secondary); }
.bh-stat-l svg { width: 16px; height: 16px; color: var(--cc-color-accent); }

@media (max-width: 599px) {
  .bh-badge { width: 40px; height: 40px; }
  .bh-badge-b { top: 30%; }
  .bh-badge svg { width: 18px; height: 18px; }
  .bh-bubble { top: -2%; max-width: 40%; font-size: 11px; line-height: 14px; padding: 6px 9px; border-radius: 12px 12px 12px 4px; }
  .bh-bubble-from { font-size: 11px; line-height: 14px; margin-bottom: 1px; }
  .bh-art { margin-top: 28px; }
  .bh-stat { padding: 6px 12px; gap: 0; }
  .bh-stat-v { font-size: 15px; line-height: 19px; }
  .bh-stat-v small, .bh-stat-l { font-size: 11px; line-height: 14px; }
  .bh-stat-l svg { width: 13px; height: 13px; }
}
@media (min-width: 1024px) {
  /* картинка крупнее и заходит под текст, петля выползает из-под кнопок — как в образце */
  .bh { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 0; padding: 40px 40px 40px 64px; border-radius: 36px; }
  .bh-art { margin-left: -6%; }
  .bh-loop { left: -18%; bottom: 2%; width: 30%; }
  .bh-art { max-width: min(600px, 72vh); justify-self: center; width: 100%; }
  .bh-bubble { left: -4%; top: 16%; max-width: 36%; }
}

.bot-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bot-feature { display: flex; flex-direction: column; gap: 8px; }
.bot-feature-icon { width: 24px; height: 24px; color: var(--cc-color-text-secondary); }
@media (min-width: 768px) {
  .bot-features { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}

.bot-faq-wrap { max-width: 680px; }
.bot-faq-wrap .section-head { max-width: none; }

/* ---------- «Что умеет бот»: бенто по образцу владельца (30.09) ----------
   Тёмная рамка, внутри плитки разного вида в мягком зелёном: кольцо, крупная цифра, голос,
   список напоминаний, фото с тёмными плашками, центральная плитка с человеком и виджетами,
   значок, валюты, широкая «бесплатно» с объёмным предметом. */
.fb { border-radius: 32px; padding: 20px 14px; background: var(--cc-color-surface-inverse); }
.fb-head { display: flex; flex-direction: column; gap: 6px; padding: 8px 6px 18px; }
.fb-h2 { margin: 0; font: 600 clamp(28px, 3vw, 40px)/1.1 var(--cc-font-heading); color: var(--cc-color-text-on-inverse); }
.fb-sub { margin: 0; font: 400 15px/22px var(--cc-font-ui); color: rgba(243, 243, 240, .7); }
.fb-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fb-tile {
  position: relative; min-width: 0; overflow: hidden; border-radius: 22px; padding: 18px;
  background: var(--cc-color-accent-soft); color: var(--cc-color-text);
  display: flex; flex-direction: column; gap: 6px;
}
.fb-t { margin: 0; font: 600 15px/20px var(--cc-font-ui); }
.fb-d { margin: 0; font: 400 13.5px/19px var(--cc-font-ui); color: var(--cc-color-text-secondary); }
.fb-big { margin: 0; font: 700 clamp(32px, 3.4vw, 46px)/1 var(--cc-font-number); letter-spacing: -.02em; }

.fb-ring { align-items: center; text-align: center; }
.fb-donut {
  --p: 50; width: 108px; height: 108px; margin: 6px 0; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--cc-color-carbs) calc(var(--p) * 1%), rgba(160, 114, 90, .18) 0);
}
.fb-donut::before { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: var(--cc-color-accent-soft); }
.fb-donut span { position: relative; font: 700 20px/1 var(--cc-font-number); }

.fb-money { justify-content: space-between; }
.fb-corner { position: absolute; right: 16px; top: 16px; width: 22px; height: 22px; color: var(--cc-color-accent); }

.fb-wave { display: flex; align-items: center; gap: 4px; height: 48px; padding: 0 12px; margin: 4px 0; border-radius: 999px; background: #fff; }
.fb-wave svg { width: 18px; height: 18px; color: var(--cc-color-accent); margin-right: 4px; }
.fb-wave span { width: 4px; border-radius: 2px; background: var(--cc-color-accent); height: 40%; }
.fb-wave span:nth-child(3n) { height: 75%; } .fb-wave span:nth-child(4n) { height: 55%; } .fb-wave span:nth-child(5n) { height: 90%; }
.fb-wave b { margin-left: auto; font: 600 13px/1 var(--cc-font-number); color: var(--cc-color-text-secondary); }

.fb-remind { justify-content: space-between; }
.fb-remind .fb-t { display: flex; align-items: center; gap: 8px; }
.fb-remind .fb-t svg { width: 18px; height: 18px; color: var(--cc-color-accent); }
.fb-rg { margin: 16px 0 6px; font: 600 12px/16px var(--cc-font-ui); color: var(--cc-color-text-tertiary); }
/* лента времени: точка на тонкой линии, время крупно, что напомнить — рядом */
.fb-tl { position: relative; margin: 0; padding: 0 0 0 20px; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.fb-tl::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 2px; border-radius: 1px; background: rgba(47, 107, 74, .25); }
.fb-tl li { position: relative; display: flex; align-items: baseline; gap: 10px; }
.fb-tl li::before { content: ""; position: absolute; left: -20px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--cc-color-accent); box-shadow: 0 0 0 3px var(--cc-color-accent-soft); }
.fb-tl b { min-width: 64px; font: 700 22px/26px var(--cc-font-number); color: var(--cc-color-text); }
.fb-tl span { font: 400 16px/22px var(--cc-font-ui); color: var(--cc-color-text-secondary); }
.fb-tl.is-soon li::before { background: var(--cc-color-surface); border: 2px solid var(--cc-color-accent); box-shadow: none; width: 10px; height: 10px; box-sizing: border-box; }
.fb-food { gap: 8px; }
.fb-label { margin: 0; align-self: flex-start; padding: 6px 12px; border-radius: 8px; background: var(--cc-color-surface-inverse); color: #fff; font: 700 17px/22px var(--cc-font-ui); }
.fb-label.is-sub { margin-top: -6px; font: 500 14px/18px var(--cc-font-ui); }
.fb-pills { display: flex; gap: 10px; margin-top: 10px; flex: 1; min-height: 150px; }
.fb-pills img { flex: 1; min-width: 0; object-fit: cover; border-radius: 999px; }
.fb-pills img:last-child { margin-top: 28px; }
.fb-chip { margin: 0; display: inline-flex; white-space: nowrap; max-width: 100%; align-self: flex-start; align-items: center; gap: 6px; padding: 8px 11px; border-radius: 999px; background: #fff; font: 600 12px/16px var(--cc-font-ui); }
.fb-chip svg { width: 15px; height: 15px; color: var(--cc-color-accent); }

.fb-hero { padding: 0; min-height: 320px; }
.fb-person { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.fb-w { position: absolute; z-index: 1; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, .94); box-shadow: 0 14px 30px -14px rgba(20, 22, 20, .35); font: 400 12px/16px var(--cc-font-ui); color: var(--cc-color-text-secondary); }
.fb-w b { font: 700 15px/20px var(--cc-font-ui); color: var(--cc-color-text); }
.fb-w span { font: 600 11.5px/14px var(--cc-font-ui); color: var(--cc-color-accent); }
.fb-w-a { left: 5%; top: 10%; }
.fb-w-b { right: 5%; top: 14%; }
.fb-w-b b { font: 700 22px/26px var(--cc-font-number); }
.fb-w-c { right: 6%; bottom: 10%; }
.fb-bars { display: flex; align-items: flex-end; gap: 5px; height: 44px; margin-bottom: 4px; }
.fb-bars i { width: 12px; height: calc(var(--h) * 100%); border-radius: 3px; background: var(--cc-color-fat); }
.fb-bars i:nth-child(2) { background: var(--cc-color-protein); } .fb-bars i:nth-child(4) { background: var(--cc-color-carbs); }

.fb-app { align-items: center; justify-content: center; text-align: center; }
.fb-mark { width: 54px; height: 54px; color: var(--cc-color-accent); margin-bottom: 4px; }
.fb-coins { display: flex; margin: 8px 0; }
.fb-coins span { width: 46px; height: 46px; margin-right: -10px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--cc-color-accent-soft); font: 700 18px/1 var(--cc-font-number); color: var(--cc-color-accent); }
.fb-coins span:nth-child(2) { background: var(--cc-color-accent); color: #fff; } .fb-coins span:nth-child(3) { background: var(--cc-color-surface-inverse); color: #fff; }

.fb-free { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.fb-free > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fb-free-t { margin: 0; font: 700 clamp(24px, 2.4vw, 32px)/1.1 var(--cc-font-ui); }
.fb-btn { margin-top: 6px; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; background: var(--cc-color-surface-inverse); color: #fff; font: 600 14px/1 var(--cc-font-ui); text-decoration: none; }
.fb-btn svg { width: 16px; height: 16px; transform: rotate(45deg); }
.fb-obj { width: 220px; height: 220px; margin: -30px -20px -40px 0; flex: none; mix-blend-mode: multiply; -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent 100%); mask-image: radial-gradient(closest-side, #000 70%, transparent 100%); }

@media (max-width: 767px) {
  .fb-food, .fb-hero, .fb-free, .fb-remind, .fb-voice { grid-column: 1 / -1; }
  .fb-obj { width: 96px; height: 96px; }
}
@media (min-width: 1024px) {
  .fb { padding: 28px; border-radius: 40px; }
  .fb-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(150px, auto); gap: 14px;
    grid-template-areas: "ring money voice remind" "food hero hero remind" "food hero hero app" "food cur free free";
  }
  .fb-ring { grid-area: ring; } .fb-money { grid-area: money; } .fb-voice { grid-area: voice; } .fb-remind { grid-area: remind; }
  .fb-food { grid-area: food; } .fb-hero { grid-area: hero; } .fb-app { grid-area: app; } .fb-cur { grid-area: cur; } .fb-free { grid-area: free; }
  .fb-tile { padding: 22px; border-radius: 26px; }
}