/* Живые концепты первого экрана для coffee-1.ru.
   Всё внутри .kh — чтобы стили концептов не смешивались со стилями лендинга. */

.kh { position: relative; }
.kh .hero { position: relative; isolation: isolate; height: clamp(600px, 50vw, 760px); overflow: hidden; text-align: left; }
.kh .bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: right center; }
.kh .shade { position: absolute; inset: 0; z-index: -1; }
.kh .nav { display: flex; align-items: center; gap: 26px; padding: 20px 44px; }
.kh .logo { height: 40px; width: auto; }
.kh .nav ul { display: flex; gap: 24px; list-style: none; margin: 0 auto 0 10px; padding: 0; font-size: 15px; }
.kh .nav ul span { white-space: nowrap; }
.kh .tel { font-weight: 600; white-space: nowrap; }
.kh .call { border-radius: 999px; padding: 10px 18px; font: inherit; font-weight: 600; white-space: nowrap; border: 0; cursor: default; }
.kh .content { padding: 30px 44px 0; max-width: 760px; }
.kh .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.kh .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.kh .btn { border: 0; border-radius: 999px; padding: 16px 26px; font: inherit; font-size: 16px; font-weight: 600; display: inline-flex; align-items: center; gap: 10px; cursor: default; }
.kh .btn.ghost { background: transparent; }
.kh .t { margin: 0; }

/* ============ 1. ОФИС ============ */
.kh .office { --o-bg: #F7F5F1; --o-ink: #191714; --o-muted: #5E5850; --o-accent: #1F6B54; --o-accent-2: #E9F1EC;
  color: var(--o-ink); font-family: "Manrope", system-ui, sans-serif; background: var(--o-bg); }
.kh .office .bg { background-image: url(../img/office.jpg); background-position: 72% center; }
.kh .office .shade { background: linear-gradient(90deg, var(--o-bg) 0%, var(--o-bg) 33%, rgba(247,245,241,.88) 43%, rgba(247,245,241,.35) 55%, rgba(247,245,241,0) 64%); }
.kh .office .call { background: var(--o-ink); color: #fff; }
.kh .office .eyebrow { color: var(--o-accent); background: var(--o-accent-2); padding: 7px 12px; border-radius: 999px; }
.kh .office .t { font: 800 58px/1.02 "Manrope", sans-serif; letter-spacing: -.035em; margin: 20px 0 16px; text-wrap: balance; }
.kh .office .t span { color: var(--o-accent); }
.kh .office .lede { font-size: 18.5px; line-height: 1.5; color: var(--o-muted); margin: 0; max-width: 36ch; }
.kh .office .lede b { color: var(--o-ink); font-weight: 700; }
.kh .office .btn.main { background: var(--o-accent); color: #fff; box-shadow: 0 10px 24px rgba(31, 107, 84, .28); }
.kh .office .btn.ghost { color: var(--o-ink); box-shadow: inset 0 0 0 1.5px rgba(25,23,20,.25); }
.kh .office .facts { display: flex; gap: 26px; margin-top: 30px; font-size: 14px; color: var(--o-muted); }
.kh .office .facts b { display: block; font-size: 17px; color: var(--o-ink); }
.kh .calc { position: absolute; left: 42%; bottom: 40px; width: 330px; padding: 18px 20px; background: rgba(255,255,255,.9);
  backdrop-filter: blur(10px); border-radius: 18px; box-shadow: 0 18px 40px rgba(20,15,10,.18); font-family: "Manrope", sans-serif; color: #191714; }
.kh .calc-q { font-weight: 700; font-size: 16px; margin: 0 0 12px; }
.kh .calc-opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.kh .calc-opts span { text-align: center; font-size: 13.5px; font-weight: 600; padding: 9px 0; border-radius: 10px; background: #F1EEE9; }
.kh .calc-opts span.on { background: #191714; color: #fff; }
.kh .calc-a { margin: 12px 0 0; font-size: 13.5px; color: #5E5850; }
.kh .calc-a b { color: #1F6B54; }

/* ============ 2. ПРЕМИУМ ============ */
.kh .premium { --p-ink: #F4EEE6; --p-muted: #BFB3A6; --p-gold: #D3A975;
  color: var(--p-ink); background: #120D0A; font-family: "Golos Text", system-ui, sans-serif; }
.kh .premium .bg { background-image: url(../img/premium.jpg); background-position: 70% center; }
.kh .premium .shade { background: linear-gradient(90deg, rgba(18,13,10,.97) 0%, rgba(18,13,10,.9) 32%, rgba(18,13,10,.55) 48%, rgba(18,13,10,0) 64%); }
.kh .premium .nav ul { color: var(--p-muted); }
.kh .premium .call { background: transparent; color: var(--p-gold); box-shadow: inset 0 0 0 1.5px var(--p-gold); }
.kh .premium .eyebrow { color: var(--p-gold); }
.kh .premium .eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--p-gold); }
.kh .premium .t { font: 500 54px/1.06 "Playfair Display", Georgia, serif; margin: 20px 0 18px; text-wrap: balance; }
.kh .premium .t em { color: var(--p-gold); }
.kh .premium .lede { font-size: 17.5px; line-height: 1.55; color: var(--p-muted); margin: 0; max-width: 44ch; }
.kh .premium .btn.main { background: var(--p-gold); color: #1B120C; }
.kh .premium .btn.ghost { color: var(--p-ink); }
.kh .premium .btn.ghost::after { content: "→"; }
.kh .premium .nums { display: flex; gap: 36px; margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(211,169,117,.3); }
.kh .premium .nums div { font-size: 13.5px; color: var(--p-muted); max-width: 13ch; }
.kh .premium .nums b { display: block; font: 500 38px/1.05 "Playfair Display", Georgia, serif; color: var(--p-ink); margin-bottom: 6px; white-space: nowrap; }

/* ============ 3. ВЫГОДА В ЦИФРАХ ============ */
.kh .value { --v-ink: #16130F; --v-muted: #6A625A; --v-copper: #B9774A;
  color: var(--v-ink); background: #FAF8F5; font-family: "Golos Text", system-ui, sans-serif; }
.kh .value .bg { display: none; }
.kh .value .call { background: var(--v-ink); color: #fff; }
.kh .value .split { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); height: calc(100% - 82px); }
.kh .value .btn { padding: 14px 20px; font-size: 15px; }
.kh .value .content { padding-top: 34px; }
.kh .value .eyebrow { color: var(--v-copper); }
.kh .value .price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 20px; margin: 16px 0 6px; font-family: "Unbounded", sans-serif; }
.kh .value .old { font-size: 40px; font-weight: 500; color: #A69C92; text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: var(--v-copper); white-space: nowrap; }
.kh .value .arrow { font-size: 32px; color: var(--v-copper); }
.kh .value .new { font-size: 108px; font-weight: 700; line-height: .95; letter-spacing: -.04em; white-space: nowrap; }
.kh .value .price-cap { font-size: 17.5px; color: var(--v-muted); margin: 6px 0 0; max-width: 40ch; }
.kh .value .price-cap b { color: var(--v-ink); }
.kh .value .vtiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 26px; max-width: 600px; }
.kh .value .vtile { background: #fff; border-radius: 14px; padding: 14px 16px; box-shadow: 0 1px 0 rgba(0,0,0,.04); font-size: 13.5px; color: var(--v-muted); }
.kh .value .vtile b { display: block; font: 600 21px/1.15 "Unbounded", sans-serif; color: var(--v-ink); margin-bottom: 4px; white-space: nowrap; }
.kh .value .btn.main { background: var(--v-ink); color: #fff; }
.kh .value .btn.ghost { color: var(--v-ink); box-shadow: inset 0 0 0 1.5px rgba(22,19,15,.22); }
.kh .value .stage { position: relative; display: grid; place-items: center; }
.kh .value .disc { position: absolute; width: min(520px, 86%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #D39A6E, var(--v-copper) 60%, #9B5E36); }
.kh .value .machine { position: relative; width: min(360px, 60%); filter: drop-shadow(0 30px 40px rgba(60,30,10,.35)); }
.kh .value .tag { position: absolute; left: 2%; bottom: 12%; background: #fff; border-radius: 14px; padding: 10px 14px; font-size: 13px; box-shadow: 0 12px 30px rgba(40,20,5,.18); }
.kh .value .tag b { display: block; font-size: 15px; }

/* ============ 4. КОФЕЙНИ ============ */
.kh .cafe { --c-ink: #FFF7EE; --c-muted: #E5D6C6; --c-honey: #F0B451;
  color: var(--c-ink); background: #24170F; font-family: "Onest", system-ui, sans-serif; }
.kh .cafe .bg { background-image: url(../img/cafe.jpg); background-position: 66% center; }
.kh .cafe .shade { background: linear-gradient(90deg, rgba(36,23,15,.95) 0%, rgba(36,23,15,.86) 34%, rgba(36,23,15,.45) 52%, rgba(36,23,15,0) 66%); }
.kh .cafe .nav ul { color: var(--c-muted); }
.kh .cafe .call { background: var(--c-honey); color: #2A1A0C; }
.kh .cafe .eyebrow { color: var(--c-honey); }
.kh .cafe .t { font: 700 46px/1.08 "Onest", sans-serif; letter-spacing: -.025em; margin: 18px 0 16px; text-wrap: balance; }
.kh .cafe .t span { color: var(--c-honey); }
.kh .cafe .lede { font-size: 18px; line-height: 1.5; color: var(--c-muted); margin: 0; max-width: 38ch; }
.kh .cafe .lede b { color: var(--c-ink); }
.kh .cafe .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; max-width: 560px; }
.kh .cafe .chips span { font-size: 14px; padding: 8px 14px; border-radius: 999px; background: rgba(255,247,238,.1); border: 1px solid rgba(255,247,238,.22); }
.kh .cafe .btn.main { background: var(--c-honey); color: #2A1A0C; }
.kh .cafe .btn.ghost { color: var(--c-ink); box-shadow: inset 0 0 0 1.5px rgba(255,247,238,.4); }

/* ---------- Планшет ---------- */
@media (max-width: 1100px) {
  .kh .nav ul { display: none; }
  .kh .office .t, .kh .premium .t { font-size: 48px; }
  .kh .cafe .t { font-size: 40px; }
  .kh .value .new { font-size: 88px; }
  .kh .calc { left: auto; right: 24px; }
}

/* ---------- Телефон: картинка сверху, текст под ней ---------- */
@media (max-width: 760px) {
  .kh .hero { height: auto; display: flex; flex-direction: column; }
  .kh .nav { padding: 14px 18px; gap: 12px; }
  .kh .logo { height: 32px; }
  .kh .tel { display: none; }
  .kh .call { margin-left: auto; padding: 9px 14px; font-size: 14px; }
  .kh .bg { position: relative; inset: auto; height: 280px; order: 1; z-index: 0; }
  .kh .shade { display: none; }
  .kh .content { order: 2; padding: 24px 18px 28px; max-width: none; }
  .kh .eyebrow { font-size: 11.5px; }
  .kh .office .t, .kh .premium .t { font-size: 36px; margin: 14px 0 12px; }
  .kh .cafe .t { font-size: 31px; margin: 14px 0 12px; }
  .kh .office .lede, .kh .premium .lede, .kh .cafe .lede { font-size: 16.5px; }
  .kh .cta-row { flex-direction: column; margin-top: 22px; }
  .kh .btn { justify-content: center; padding: 15px 20px; }
  .kh .office .facts { flex-wrap: wrap; gap: 14px 22px; margin-top: 22px; }
  .kh .calc { position: static; width: auto; order: 3; margin: 0 18px 22px; box-shadow: none; border: 1px solid #E6E1DA; }
  .kh .premium .nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
  .kh .premium .nums b { font-size: 25px; white-space: normal; }
  .kh .value .split { display: flex; flex-direction: column; height: auto; order: 1; }
  .kh .value .stage { order: -1; height: 290px; }
  .kh .value .disc { width: 250px; }
  .kh .value .machine { width: 165px; }
  .kh .value .tag { left: 12px; bottom: 14px; }
  .kh .value .old { font-size: 27px; }
  .kh .value .new { font-size: 70px; }
  .kh .value .price-cap { font-size: 16px; }
  .kh .value .vtiles { grid-template-columns: minmax(0, 1fr); }
}