:root {
  color-scheme: dark;
  --bg: #050204;
  --panel: rgba(18, 8, 13, 0.78);
  --panel-strong: rgba(27, 9, 15, 0.92);
  --line: rgba(255, 56, 76, 0.22);
  --line-strong: rgba(255, 56, 76, 0.58);
  --text: #fff4f5;
  --muted: #b99aa1;
  --red: #ff1731;
  --red-2: #9b0718;
  --wine: #4b0714;
  --blue: #16b9ff;
  --gold: #ffd15a;
  --green: #91ff61;
  --shadow-red: 0 0 32px rgba(255, 23, 49, 0.38);
  --mx: 50%;
  --my: 20%;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
  scroll-behavior: smooth;
}

body {
  min-height: 100%;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255, 23, 49, 0.18), transparent 22rem),
    radial-gradient(circle at 82% 12%, rgba(22, 185, 255, 0.12), transparent 25rem),
    radial-gradient(circle at 14% 10%, rgba(128, 0, 22, 0.32), transparent 34rem),
    linear-gradient(180deg, #070205 0%, #12050a 46%, #050204 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -5;
  background:
    linear-gradient(112deg, transparent 0 47%, rgba(255, 23, 49, 0.16) 48%, transparent 51%),
    linear-gradient(118deg, transparent 0 61%, rgba(255, 23, 49, 0.12) 62%, transparent 64%);
  animation: kh-bg-drift 13s linear infinite;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  color: inherit;
  font: inherit;
}

.kh-noise {
  position: fixed;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  opacity: 0.22;
  background-image:
    radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 3px 3px;
  mask-image: linear-gradient(180deg, black 0%, transparent 88%);
}

.kh-cursor-glow {
  position: fixed;
  left: var(--mx);
  top: var(--my);
  z-index: -3;
  width: 38rem;
  height: 38rem;
  pointer-events: none;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 23, 49, 0.2), rgba(22, 185, 255, 0.07) 34%, transparent 70%);
  filter: blur(16px);
  transition: left 0.1s linear, top 0.1s linear;
}

.kh-road-lines {
  position: fixed;
  inset: auto -8vw 13vh -8vw;
  z-index: -2;
  height: 240px;
  pointer-events: none;
  transform: skewY(-8deg);
  opacity: 0.76;
}

.kh-road-lines span {
  position: absolute;
  right: -20%;
  width: 70%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 23, 49, 0.95), rgba(255,255,255,0.75), transparent);
  box-shadow: 0 0 26px rgba(255, 23, 49, 0.65);
  animation: kh-road 3.7s linear infinite;
}

.kh-road-lines span:nth-child(1) { top: 42px; animation-delay: -0.8s; }
.kh-road-lines span:nth-child(2) { top: 114px; animation-delay: -1.8s; opacity: 0.65; }
.kh-road-lines span:nth-child(3) { top: 184px; animation-delay: -2.7s; opacity: 0.48; }

.kh-site-shell {
  width: min(1240px, calc(100% - 32px));
  margin: 0 auto;
}

.kh-topbar {
  position: sticky;
  top: 14px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 14px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 56, 76, 0.18);
  border-radius: 24px;
  background: rgba(8, 3, 7, 0.72);
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(18px);
}

.kh-topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 176px;
}

.kh-topbar__brand img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(255,23,49,0.34));
}

.kh-topbar__brand span {
  display: grid;
  line-height: 1.02;
}

.kh-topbar__brand strong {
  color: #fdf7f8;
  font-size: 18px;
  letter-spacing: -0.04em;
}

.kh-topbar__brand small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.kh-topbar__nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.kh-topbar__nav a {
  position: relative;
  padding: 12px 13px;
  border-radius: 16px;
  color: var(--muted);
  font-size: 14px;
  transition: color .22s ease, background .22s ease, transform .22s ease;
}

.kh-topbar__nav a::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 6px;
  left: 14px;
  height: 2px;
  border-radius: 999px;
  background: var(--red);
  box-shadow: var(--shadow-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}

.kh-topbar__nav a:hover,
.kh-topbar__nav a.is-active {
  color: var(--text);
  background: rgba(255,255,255,0.045);
  transform: translateY(-1px);
}

.kh-topbar__nav a:hover::after,
.kh-topbar__nav a.is-active::after {
  transform: scaleX(1);
}

.kh-topbar__cta,
.kh-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  font-weight: 850;
  letter-spacing: -0.02em;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.kh-topbar__cta,
.kh-button--primary {
  color: white;
  background:
    linear-gradient(135deg, #ff263d 0%, #b00618 58%, #5a0610 100%);
  box-shadow: 0 16px 40px rgba(255, 23, 49, 0.25), inset 0 1px 0 rgba(255,255,255,0.26);
}

.kh-button--glass {
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text);
  background: rgba(14, 15, 23, 0.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.kh-topbar__cta:hover,
.kh-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 60px rgba(255, 23, 49, 0.34), inset 0 1px 0 rgba(255,255,255,0.32);
}

.kh-button__shine {
  position: absolute;
  inset: 0;
  transform: translateX(-120%);
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.32), transparent);
  animation: kh-shine 3.2s ease-in-out infinite;
}

.kh-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.83fr) minmax(340px, 0.72fr) minmax(390px, 0.85fr);
  gap: 28px;
  align-items: center;
  min-height: 720px;
  padding: 72px 0 42px;
}

.kh-hero__city {
  position: absolute;
  left: -9vw;
  bottom: 46px;
  z-index: -1;
  width: 38vw;
  min-width: 360px;
  height: 270px;
  opacity: 0.38;
  background:
    linear-gradient(to top, rgba(255,255,255,0.12), transparent 56%),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,255,255,0.08) 19px 22px, transparent 23px 35px);
  clip-path: polygon(0 100%, 0 62%, 8% 62%, 8% 46%, 13% 46%, 13% 74%, 19% 74%, 19% 34%, 24% 34%, 24% 74%, 31% 74%, 31% 56%, 38% 56%, 38% 18%, 45% 18%, 45% 74%, 52% 74%, 52% 45%, 60% 45%, 60% 70%, 68% 70%, 68% 52%, 74% 52%, 74% 76%, 82% 76%, 82% 64%, 90% 64%, 90% 100%);
  filter: drop-shadow(0 0 30px rgba(255,23,49,0.4));
}

.kh-hero__map {
  position: absolute;
  top: 110px;
  left: 45%;
  z-index: -1;
  width: 360px;
  height: 230px;
  opacity: 0.45;
  transform: rotate(-4deg);
  border: 1px solid rgba(255, 23, 49, 0.35);
  border-radius: 48% 52% 46% 54% / 38% 36% 64% 62%;
  box-shadow: inset 0 0 42px rgba(255,23,49,0.12), 0 0 60px rgba(255,23,49,0.18);
}

.kh-map-dot {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--red);
  box-shadow: 0 0 20px var(--red);
  animation: kh-dot 1.8s ease-in-out infinite;
}

.kh-map-dot--one { left: 28%; top: 36%; }
.kh-map-dot--two { left: 53%; top: 24%; animation-delay: -0.4s; }
.kh-map-dot--three { left: 68%; top: 51%; animation-delay: -0.9s; }
.kh-map-dot--four { left: 42%; top: 67%; animation-delay: -1.2s; }

.kh-kicker {
  display: inline-flex;
  width: fit-content;
  padding: 7px 11px;
  border: 1px solid rgba(255, 56, 76, 0.26);
  border-radius: 999px;
  color: #ffbcc3;
  background: rgba(255, 23, 49, 0.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.kh-hero__copy h1 {
  max-width: 660px;
  margin: 20px 0 18px;
  font-size: clamp(46px, 6.6vw, 82px);
  line-height: 0.9;
  letter-spacing: -0.08em;
  text-transform: uppercase;
}

.kh-hero__copy p {
  max-width: 570px;
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.62;
}

.kh-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

/* [SITE-HERO-CTA-HINT-08] Clarify WebApp and Telegram Mini App actions */
/* [SITE-HERO-CTA-HINT-57-LIGHT-COMPACT] Make the browser/Mini App note lighter and smaller. */
.kh-hero__action-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 540px;
  margin: 8px 0 0;
  padding: 5px 9px;
  border: 1px solid rgba(255,255,255,0.055);
  border-radius: 999px;
  color: rgba(255,244,245,0.54);
  background: rgba(255,255,255,0.022);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.028);
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.28;
}

.kh-hero__action-hint::before {
  content: "↯";
  color: rgba(255, 194, 72, 0.76);
  font-size: 10px;
  font-weight: 800;
}

.kh-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 22px;
}

.kh-hero__badges span {
  padding: 9px 11px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  color: #dbc8cc;
  background: rgba(255,255,255,0.04);
  font-size: 12px;
}

.kh-brand-stage {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: clamp(360px, 52vw, 620px);
  overflow: visible;
  transform: translateY(-8px);
}

.kh-brand-stage__halo {
  position: absolute;
  inset: 8% 0 8%;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(255, 23, 49, 0.36), transparent 62%),
    radial-gradient(circle at 66% 38%, rgba(22,185,255,0.18), transparent 45%);
  filter: blur(22px);
  animation: kh-float 5s ease-in-out infinite;
}

/* [SITE-HERO-LOGO-52-VISIBLE-SCALE-FIX] Keep the same logo image; use independent scale so grid constraints cannot hide the owner-approved 1.7x visual size. */
.kh-brand-stage__logo {
  position: relative;
  z-index: 1;
  width: min(450px, 54vw);
  max-width: none;
  scale: 1.7;
  transform-origin: center;
  filter: drop-shadow(0 22px 38px rgba(0,0,0,0.5)) drop-shadow(0 0 28px rgba(255,23,49,0.22));
  animation: kh-logo-breathe 4.8s ease-in-out infinite;
}


.kh-live {
  position: relative;
  border: 1px solid rgba(255, 56, 76, 0.38);
  border-radius: 28px;
  padding: 20px;
  background:
    linear-gradient(180deg, rgba(27, 9, 15, 0.84), rgba(6, 4, 8, 0.86)),
    rgba(12, 7, 12, 0.88);
  box-shadow: 0 30px 90px rgba(0,0,0,0.38), 0 0 38px rgba(255,23,49,0.14);
  backdrop-filter: blur(18px);
  overflow: hidden;
}

.kh-live::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(130deg, rgba(255,23,49,0.55), transparent 28%, rgba(22,185,255,0.32) 68%, transparent);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  padding: 1px;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: kh-border-sweep 5.5s linear infinite;
}

.kh-live__head,
.kh-section__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.kh-live__eyebrow {
  color: #ffd0d4;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.kh-live h2 {
  margin: 6px 0 0;
  font-size: 24px;
  letter-spacing: -0.04em;
}

.kh-live__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #ffb7bd;
  font-size: 12px;
  font-weight: 900;
}

.kh-live__status i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--red);
  box-shadow: 0 0 22px var(--red);
  animation: kh-dot 1.4s ease-in-out infinite;
}

.kh-live__tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-top: 18px;
  padding: 5px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  background: rgba(255,255,255,0.035);
}

.kh-live__tabs button {
  min-height: 36px;
  border: 0;
  border-radius: 12px;
  color: #d7c5c9;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}

.kh-live__tabs button:hover,
.kh-live__tabs button.is-active {
  color: white;
  background: linear-gradient(135deg, rgba(255,23,49,0.9), rgba(95,5,15,0.92));
  box-shadow: 0 0 24px rgba(255,23,49,0.26), inset 0 1px 0 rgba(255,255,255,0.22);
  transform: translateY(-1px);
}

.kh-live__list {
  display: grid;
  gap: 11px;
  margin-top: 15px;
}

.kh-live-row {
  position: relative;
  display: grid;
  grid-template-columns: 58px 1fr auto;
  gap: 12px;
  align-items: center;
  min-height: 76px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  background:
    radial-gradient(circle at 90% 50%, rgba(255,23,49,0.12), transparent 48%),
    rgba(255,255,255,0.045);
  overflow: hidden;
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease, background .24s ease;
}

.kh-live-row::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-130%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  transition: transform .55s ease;
}

.kh-live-row:hover,
.kh-live-row.is-hot {
  border-color: rgba(255,56,76,0.55);
  background:
    radial-gradient(circle at 88% 45%, rgba(255,23,49,0.2), transparent 48%),
    rgba(255,255,255,0.065);
  box-shadow: 0 20px 44px rgba(255,23,49,0.14);
  transform: translateY(-2px) translateX(2px);
}

.kh-live-row:hover::before,
.kh-live-row.is-hot::before {
  transform: translateX(130%);
}

.kh-live-row__media {
  display: grid;
  width: 58px;
  height: 52px;
  place-items: center;
  border-radius: 16px;
  background: rgba(0,0,0,0.28);
  font-size: 28px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.kh-live-row__body {
  min-width: 0;
}

.kh-live-row__chip {
  display: inline-flex;
  margin-bottom: 5px;
  padding: 4px 7px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, rgba(255,23,49,0.95), rgba(104,4,14,0.9));
  font-size: 10px;
  font-weight: 950;
}

.kh-live-row__line {
  overflow: hidden;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kh-live-row__meta {
  margin-top: 4px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kh-live-row__side {
  display: grid;
  justify-items: end;
  gap: 6px;
}

.kh-live-row__time {
  color: #c6aeb3;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.kh-live-row__price {
  color: var(--gold);
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -0.04em;
}

.kh-live-row__wave {
  width: 84px;
  height: 16px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(255,23,49,0.9) 9% 11%, transparent 12% 18%, rgba(255,23,49,0.65) 19% 21%, transparent 22% 30%, rgba(255,255,255,0.4) 31% 32%, transparent 33% 44%, rgba(22,185,255,0.9) 45% 47%, transparent 48% 58%, rgba(255,23,49,0.8) 59% 62%, transparent 63%);
  background-size: 190% 100%;
  animation: kh-wave 1.7s linear infinite;
  opacity: 0.9;
}

.kh-live-row--skeleton {
  min-height: 76px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.11), rgba(255,255,255,0.04));
  background-size: 220% 100%;
  animation: kh-shimmer 1.2s linear infinite;
}

.kh-live__more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 46px;
  margin-top: 14px;
  border: 1px solid rgba(255,56,76,0.24);
  border-radius: 15px;
  background: rgba(255,23,49,0.08);
  font-weight: 850;
  transition: background .22s ease, box-shadow .22s ease, transform .22s ease;
}

.kh-live__more:hover {
  background: rgba(255,23,49,0.18);
  box-shadow: var(--shadow-red);
  transform: translateY(-1px);
}

.kh-feature-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.kh-feature {
  min-height: 144px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;
  background: rgba(255,255,255,0.043);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}

.kh-feature:hover,
.kh-feature.is-hot {
  border-color: rgba(255,56,76,0.5);
  box-shadow: 0 24px 50px rgba(255,23,49,0.13), inset 0 1px 0 rgba(255,255,255,0.12);
  transform: translateY(-5px);
}

.kh-feature b {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 16px;
  background: rgba(255,23,49,0.12);
  font-size: 22px;
}

.kh-feature h3 {
  margin: 14px 0 6px;
  font-size: 17px;
  letter-spacing: -0.04em;
}

.kh-feature p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.kh-section {
  padding: 70px 0 24px;
}

.kh-section__head {
  margin-bottom: 20px;
}

.kh-section h2,
.kh-telegram h2 {
  margin: 10px 0 0;
  font-size: clamp(31px, 4vw, 50px);
  line-height: 0.98;
  letter-spacing: -0.07em;
}

.kh-section__link {
  align-self: end;
  padding: 12px 15px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 16px;
  color: #dcc7cc;
  background: rgba(255,255,255,0.045);
  font-weight: 800;
}

.kh-category-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.kh-category {
  position: relative;
  min-height: 176px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  overflow: hidden;
  background: rgba(255,255,255,0.042);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}

.kh-category::before {
  content: "";
  position: absolute;
  inset: auto -20% -45% -20%;
  height: 120px;
  border-radius: 50%;
  background: var(--category-glow, rgba(255,23,49,0.22));
  filter: blur(28px);
  opacity: 0.8;
}

.kh-category:hover {
  border-color: rgba(255,56,76,0.48);
  box-shadow: 0 30px 58px rgba(0,0,0,0.28), 0 0 28px rgba(255,23,49,0.14);
  transform: translateY(-6px) rotateX(2deg);
}

.kh-category__label {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 19px;
  font-weight: 950;
}

.kh-category strong {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 13px;
}

.kh-category em {
  position: absolute;
  right: 20px;
  bottom: 18px;
  font-size: 56px;
  font-style: normal;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,0.34));
}

.kh-category b {
  position: absolute;
  right: 15px;
  top: 15px;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
}

.kh-category--taxi { --category-glow: rgba(255, 186, 38, 0.34); }
.kh-category--cargo { --category-glow: rgba(22, 185, 255, 0.3); }
.kh-category--tow { --category-glow: rgba(255, 23, 49, 0.36); }
.kh-category--special { --category-glow: rgba(163, 79, 255, 0.3); }
.kh-category--market { --category-glow: rgba(39, 255, 163, 0.22); }

.kh-bottom-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 18px;
  align-items: stretch;
  padding: 30px 0 54px;
}

.kh-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 26px;
  overflow: hidden;
  background: rgba(255,255,255,0.045);
}

.kh-stats div {
  padding: 24px;
  background: rgba(0,0,0,0.2);
}

.kh-stats b {
  display: block;
  color: white;
  font-size: 28px;
  letter-spacing: -0.05em;
}

.kh-stats span {
  color: var(--muted);
  font-size: 13px;
}

.kh-telegram {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 210px;
  gap: 18px;
  min-height: 276px;
  padding: 26px;
  border: 1px solid rgba(255,56,76,0.38);
  border-radius: 28px;
  background:
    radial-gradient(circle at 85% 40%, rgba(22,185,255,0.2), transparent 26%),
    linear-gradient(135deg, rgba(38,8,16,0.9), rgba(7,5,9,0.92));
  box-shadow: 0 26px 72px rgba(0,0,0,0.35), 0 0 36px rgba(255,23,49,0.13);
  overflow: hidden;
}

.kh-telegram p {
  max-width: 520px;
  color: var(--muted);
  line-height: 1.58;
}

/* [SITE-TELEGRAM-CTA-SPLIT-04] Telegram Mini App and bot CTA split */
.kh-telegram__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.kh-telegram__actions .kh-button {
  min-width: 168px;
}

.kh-phone {
  position: relative;
  display: grid;
  place-items: center;
  perspective: 900px;
}

.kh-phone__screen {
  width: 150px;
  height: 250px;
  padding: 18px 14px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 28px;
  background: linear-gradient(180deg, #10141d, #050507);
  box-shadow: 0 30px 70px rgba(0,0,0,0.45), 0 0 24px rgba(22,185,255,0.14);
  transform: rotate(-9deg) rotateY(-14deg);
  animation: kh-phone 5s ease-in-out infinite;
}

.kh-phone__screen img {
  display: block;
  width: 96px;
  margin: 4px auto 12px;
}

.kh-phone__screen span {
  display: block;
  margin-bottom: 14px;
  color: #fff;
  font-weight: 900;
  text-align: center;
}

.kh-phone__screen i {
  display: block;
  height: 12px;
  margin: 10px 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(22,185,255,0.55), rgba(255,23,49,0.36));
}

/* [SITE-TELEGRAM-PHONE-HOLOGRAM-58] 16-second demo hologram: Kazakhstan map, route network and KölikHub logo. */
.kh-phone--hologram {
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
  isolation: isolate;
}

.kh-phone--hologram:focus-visible {
  outline: 2px solid rgba(105,240,255,0.75);
  outline-offset: 8px;
  border-radius: 30px;
}

.kh-phone--hologram .kh-phone__screen {
  position: relative;
  z-index: 2;
  transition: transform .32s ease, box-shadow .32s ease, border-color .32s ease;
}

.kh-phone--hologram:hover .kh-phone__screen,
.kh-phone--hologram.is-hologram-playing .kh-phone__screen {
  border-color: rgba(105,240,255,0.42);
  box-shadow: 0 34px 80px rgba(0,0,0,0.52), 0 0 34px rgba(22,185,255,0.24), 0 0 42px rgba(255,23,49,0.14);
}

.kh-telegram.is-hologram-playing {
  overflow: visible;
  z-index: 3;
}

.kh-phone__hologram {
  position: absolute;
  right: 98px;
  top: -106px;
  z-index: 1;
  width: min(520px, 58vw);
  aspect-ratio: 1.55;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(34px, 68px, 0) rotateX(62deg) rotateZ(-5deg) scale(.52);
  transform-origin: 88% 78%;
}

.kh-phone.is-hologram-playing .kh-phone__hologram {
  animation: kh-holo-58-cycle 16s cubic-bezier(.2,.7,.18,1) both;
}

.kh-phone.is-hologram-playing .kh-phone__screen {
  animation: kh-phone-holo-58-cycle 16s ease-in-out both;
}

.kh-holo__beam {
  position: absolute;
  right: -2px;
  bottom: 16px;
  width: 42%;
  height: 52%;
  background: radial-gradient(ellipse at 100% 100%, rgba(105,240,255,.32), transparent 64%);
  filter: blur(6px);
  opacity: 0;
  transform: skewX(-18deg) rotate(-8deg);
}

.kh-phone.is-hologram-playing .kh-holo__beam {
  animation: kh-holo-beam-58 16s ease-in-out both;
}

.kh-holo__panel {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(105,240,255,0.26);
  border-radius: 28px;
  background:
    linear-gradient(rgba(105,240,255,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(105,240,255,0.05) 1px, transparent 1px),
    radial-gradient(circle at 22% 18%, rgba(105,240,255,0.17), transparent 26%),
    radial-gradient(circle at 72% 72%, rgba(255,23,49,0.12), transparent 28%),
    rgba(1,9,15,0.26);
  background-size: 22px 22px, 22px 22px, auto, auto, auto;
  box-shadow: 0 0 42px rgba(105,240,255,0.16), inset 0 0 34px rgba(105,240,255,0.08);
  overflow: hidden;
}

.kh-holo__panel::before,
.kh-holo__panel::after {
  content: "";
  position: absolute;
  inset: -20%;
  opacity: 0;
  pointer-events: none;
}

.kh-holo__panel::before {
  background: linear-gradient(120deg, transparent 36%, rgba(105,240,255,0.24), transparent 58%);
  transform: translateX(-60%);
}

.kh-holo__panel::after {
  background: radial-gradient(circle at 50% 50%, rgba(255,23,49,0.16), transparent 45%);
  filter: blur(10px);
}

.kh-phone.is-hologram-playing .kh-holo__panel::before {
  animation: kh-holo-scan-58 16s linear both;
}

.kh-phone.is-hologram-playing .kh-holo__panel::after {
  animation: kh-holo-glow-58 16s ease-in-out both;
}

.kh-holo__map {
  position: absolute;
  inset: 9% 5% 8%;
  width: 90%;
  height: 82%;
}

.kh-holo__outline {
  fill: rgba(53,214,255,0.045);
  stroke: rgba(105,240,255,0.7);
  stroke-width: 1.8;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 12px rgba(105,240,255,0.3));
}

.kh-phone.is-hologram-playing .kh-holo__outline {
  animation: kh-holo-map-outline-58 16s ease-in-out both;
}

.kh-holo__cities circle {
  fill: #ff1731;
  opacity: 0;
}

.kh-holo__cities text {
  fill: rgba(232,250,255,0.84);
  font-size: 8px;
  font-weight: 800;
  opacity: 0;
  text-shadow: 0 0 8px rgba(105,240,255,0.45);
}

.kh-phone.is-hologram-playing .kh-holo__cities circle,
.kh-phone.is-hologram-playing .kh-holo__cities text {
  animation: kh-holo-city-58 16s ease-in-out both;
}

.kh-holo__primary-route,
.kh-holo__network path {
  fill: none;
  stroke: url(#khHoloRoute58);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
}

.kh-holo__primary-route {
  stroke-width: 3.2;
  filter: drop-shadow(0 0 12px rgba(105,240,255,0.6));
}

.kh-phone.is-hologram-playing .kh-holo__primary-route {
  animation: kh-holo-primary-route-58 16s ease-in-out both;
}

.kh-holo__network path {
  stroke-width: 1.65;
  filter: drop-shadow(0 0 8px rgba(105,240,255,0.34));
}

.kh-phone.is-hologram-playing .kh-holo__network path {
  animation: kh-holo-network-route-58 16s ease-in-out both;
  animation-delay: calc(4s + var(--d, 0ms));
}

.kh-holo__caption {
  position: absolute;
  left: 22px;
  bottom: 18px;
  padding: 5px 9px;
  border: 1px solid rgba(105,240,255,0.2);
  border-radius: 999px;
  color: rgba(225,248,255,0.78);
  background: rgba(2,12,18,0.46);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: 0;
}

.kh-phone.is-hologram-playing .kh-holo__caption {
  animation: kh-holo-caption-58 16s ease-in-out both;
}

.kh-holo__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 116px;
  height: 116px;
  margin: -58px 0 0 -58px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(105,240,255,0.18), rgba(255,23,49,0.08) 54%, transparent 72%);
  opacity: 0;
  filter: drop-shadow(0 0 24px rgba(105,240,255,0.34)) drop-shadow(0 0 22px rgba(255,23,49,0.22));
}

.kh-holo__logo img {
  width: 86px;
  height: 86px;
  object-fit: contain;
}

.kh-phone.is-hologram-playing .kh-holo__logo {
  animation: kh-holo-logo-58 16s ease-in-out both;
}

.kh-holo__spark {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(105,240,255,0.85);
  box-shadow: 0 0 14px rgba(105,240,255,0.7);
  opacity: 0;
}

.kh-holo__spark--one { left: 22%; top: 30%; }
.kh-holo__spark--two { left: 72%; top: 38%; background: rgba(255,23,49,0.84); }
.kh-holo__spark--three { left: 58%; top: 72%; }

.kh-phone.is-hologram-playing .kh-holo__spark {
  animation: kh-holo-spark-58 16s ease-in-out both;
}

.kh-phone.is-hologram-playing .kh-holo__spark--two { animation-delay: .22s; }
.kh-phone.is-hologram-playing .kh-holo__spark--three { animation-delay: .42s; }

.kh-hologram-cta-lit {
  animation: kh-holo-cta-lit-58 2.3s ease-in-out both;
}

@keyframes kh-phone-holo-58-cycle {
  0%, 100% { transform: rotate(-9deg) rotateY(-14deg); }
  8%, 84% { transform: rotate(-4deg) rotateY(-6deg) translateY(-7px) scale(1.035); }
  90% { transform: rotate(-9deg) rotateY(-14deg) translateY(0) scale(1); }
}

@keyframes kh-holo-58-cycle {
  0% { opacity: 0; transform: translate3d(34px, 68px, 0) rotateX(62deg) rotateZ(-5deg) scale(.52); }
  12.5% { opacity: 1; transform: translate3d(-8px, 2px, 0) rotateX(50deg) rotateZ(-6deg) scale(1); }
  87.5% { opacity: 1; transform: translate3d(-8px, 2px, 0) rotateX(50deg) rotateZ(-6deg) scale(1); }
  100% { opacity: 0; transform: translate3d(34px, 68px, 0) rotateX(64deg) rotateZ(-5deg) scale(.48); }
}

@keyframes kh-holo-beam-58 {
  0%, 88%, 100% { opacity: 0; }
  8%, 84% { opacity: 1; }
}

@keyframes kh-holo-map-outline-58 {
  0%, 4% { opacity: 0; stroke-dashoffset: 1; }
  12.5%, 87.5% { opacity: 1; stroke-dashoffset: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; }
}

@keyframes kh-holo-primary-route-58 {
  0%, 12.5% { opacity: 0; stroke-dashoffset: 1; }
  25%, 87.5% { opacity: 1; stroke-dashoffset: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; }
}

@keyframes kh-holo-network-route-58 {
  0% { opacity: 0; stroke-dashoffset: 1; }
  38% { opacity: 1; stroke-dashoffset: 0; }
  83% { opacity: 1; stroke-dashoffset: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; }
}

@keyframes kh-holo-city-58 {
  0%, 12% { opacity: 0; transform: translateY(3px); }
  24%, 87% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-2px); }
}

@keyframes kh-holo-logo-58 {
  0%, 43.75% { opacity: 0; transform: scale(.52) rotate(-6deg); }
  56.25%, 87.5% { opacity: 1; transform: scale(1) rotate(0deg); }
  100% { opacity: 0; transform: scale(.58) rotate(5deg); }
}

@keyframes kh-holo-caption-58 {
  0%, 24% { opacity: 0; transform: translateY(6px); }
  32%, 87% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-4px); }
}

@keyframes kh-holo-scan-58 {
  0%, 9% { opacity: 0; transform: translateX(-60%); }
  14%, 80% { opacity: .85; transform: translateX(68%); }
  100% { opacity: 0; transform: translateX(90%); }
}

@keyframes kh-holo-glow-58 {
  0%, 7%, 100% { opacity: 0; }
  18%, 85% { opacity: .85; }
}

@keyframes kh-holo-spark-58 {
  0%, 52%, 100% { opacity: 0; transform: translate3d(0, 10px, 0) scale(.7); }
  60%, 86% { opacity: 1; transform: translate3d(0, -12px, 0) scale(1); }
}

@keyframes kh-holo-cta-lit-58 {
  0%, 100% { box-shadow: none; }
  35%, 74% { box-shadow: 0 0 0 1px rgba(105,240,255,0.22), 0 0 26px rgba(105,240,255,0.18), 0 16px 36px rgba(255,23,49,0.22); }
}


/* [SITE-TELEGRAM-PHONE-HOLOGRAM-DENSE-59] Denser nationwide route web and faster post-primary route activation. */
.kh-phone.is-hologram-playing .kh-holo__network path {
  animation: kh-holo-network-route-59 12.6s ease-in-out both;
  animation-delay: calc(3.35s + var(--d, 0ms));
}

.kh-phone.is-hologram-playing .kh-holo__cities circle,
.kh-phone.is-hologram-playing .kh-holo__cities text {
  animation: kh-holo-city-59 16s ease-in-out both;
}

@keyframes kh-holo-network-route-59 {
  0% { opacity: 0; stroke-dashoffset: 1; }
  24% { opacity: 1; stroke-dashoffset: 0; }
  83% { opacity: 1; stroke-dashoffset: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; }
}

@keyframes kh-holo-city-59 {
  0%, 12% { opacity: 0; transform: translateY(3px); }
  18%, 87% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-2px); }
}


/* [SITE-TELEGRAM-PHONE-HOLOGRAM-REALMAP-60] Quieter panel, stronger hologram and growing transparent logo watermark. */
.kh-holo__panel {
  background:
    linear-gradient(rgba(105,240,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(105,240,255,0.018) 1px, transparent 1px),
    radial-gradient(circle at 22% 18%, rgba(105,240,255,0.095), transparent 28%),
    radial-gradient(circle at 72% 72%, rgba(255,23,49,0.07), transparent 30%),
    rgba(1,9,15,0.14);
  box-shadow: 0 0 34px rgba(105,240,255,0.11), inset 0 0 24px rgba(105,240,255,0.04);
}

.kh-holo__panel::before {
  background: linear-gradient(120deg, transparent 38%, rgba(105,240,255,0.13), transparent 58%);
}

.kh-holo__panel::after {
  background: radial-gradient(circle at 50% 50%, rgba(255,23,49,0.085), transparent 48%);
}

.kh-holo__map {
  filter: drop-shadow(0 0 10px rgba(105,240,255,0.18));
}

.kh-holo__outline {
  fill: rgba(53,214,255,0.02);
  stroke: rgba(125,245,255,0.92);
  stroke-width: 2.15;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 0 15px rgba(105,240,255,0.46));
}

.kh-holo__primary-route {
  stroke-width: 3.75;
  filter: drop-shadow(0 0 15px rgba(105,240,255,0.72)) drop-shadow(0 0 8px rgba(255,23,49,0.32));
}

.kh-holo__network path {
  stroke-width: 1.95;
  filter: drop-shadow(0 0 9px rgba(105,240,255,0.48));
}

.kh-holo__cities circle {
  filter: drop-shadow(0 0 8px rgba(255,23,49,0.7)) drop-shadow(0 0 6px rgba(105,240,255,0.42));
}

.kh-holo__logo {
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 30px;
  background: radial-gradient(ellipse at center, rgba(105,240,255,0.055), rgba(255,23,49,0.035) 42%, transparent 68%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.18) rotate(-4deg);
  filter: drop-shadow(0 0 28px rgba(105,240,255,0.3)) drop-shadow(0 0 24px rgba(255,23,49,0.22));
}

.kh-holo__logo img {
  width: min(78%, 330px);
  height: auto;
  opacity: .46;
  object-fit: contain;
}

.kh-phone.is-hologram-playing .kh-holo__logo {
  animation: kh-holo-logo-60 16s ease-in-out both;
}

@keyframes kh-holo-logo-60 {
  0%, 43.75% { opacity: 0; transform: translate(-50%, -50%) scale(.18) rotate(-4deg); }
  56.25% { opacity: .42; transform: translate(-50%, -50%) scale(.42) rotate(0deg); }
  72% { opacity: .38; transform: translate(-50%, -50%) scale(.72) rotate(.8deg); }
  87.5% { opacity: .32; transform: translate(-50%, -50%) scale(1.06) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.16) rotate(2deg); }
}


/* [SITE-TELEGRAM-PHONE-HOLOGRAM-LOGO-VISIBLE-61] Stronger transparent growing logo watermark over the hologram map. */
.kh-holo__logo {
  z-index: 4;
  width: 116%;
  height: 116%;
  margin: 0;
  border-radius: 36px;
  background:
    radial-gradient(ellipse at center, rgba(105,240,255,0.12), rgba(255,23,49,0.07) 42%, transparent 70%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.16) rotate(-4deg);
  filter:
    drop-shadow(0 0 34px rgba(105,240,255,0.44))
    drop-shadow(0 0 28px rgba(255,23,49,0.28));
}

.kh-holo__logo img {
  width: min(96%, 430px);
  height: auto;
  opacity: .72;
  object-fit: contain;
  filter:
    drop-shadow(0 0 22px rgba(105,240,255,0.32))
    drop-shadow(0 0 16px rgba(255,23,49,0.24));
}

.kh-phone.is-hologram-playing .kh-holo__logo {
  animation: kh-holo-logo-61 16s ease-in-out both;
}

.kh-phone.is-hologram-playing .kh-holo__logo img {
  animation: kh-holo-logo-image-61 16s ease-in-out both;
}

@keyframes kh-holo-logo-61 {
  0%, 43.75% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.16) rotate(-4deg);
  }
  56.25% {
    opacity: .62;
    transform: translate(-50%, -50%) scale(.52) rotate(0deg);
  }
  72% {
    opacity: .58;
    transform: translate(-50%, -50%) scale(.82) rotate(.4deg);
  }
  87.5% {
    opacity: .50;
    transform: translate(-50%, -50%) scale(1.14) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.28) rotate(1.4deg);
  }
}

@keyframes kh-holo-logo-image-61 {
  0%, 43.75% {
    opacity: 0;
  }
  56.25% {
    opacity: .82;
  }
  72% {
    opacity: .74;
  }
  87.5% {
    opacity: .64;
  }
  100% {
    opacity: 0;
  }
}

@media (max-width: 920px) {
  .kh-phone__hologram {
    right: 52px;
    top: -84px;
    width: min(430px, 78vw);
  }
}

@media (max-width: 680px) {
  .kh-telegram.is-hologram-playing {
    overflow: hidden;
  }

  .kh-phone__hologram {
    right: -8px;
    top: -76px;
    width: min(330px, 92vw);
  }

  .kh-holo__cities text {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kh-phone.is-hologram-playing .kh-phone__screen,
  .kh-phone.is-hologram-playing .kh-phone__hologram,
  .kh-phone.is-hologram-playing .kh-holo__beam,
  .kh-phone.is-hologram-playing .kh-holo__outline,
  .kh-phone.is-hologram-playing .kh-holo__primary-route,
  .kh-phone.is-hologram-playing .kh-holo__network path,
  .kh-phone.is-hologram-playing .kh-holo__logo,
  .kh-phone.is-hologram-playing .kh-holo__caption,
  .kh-phone.is-hologram-playing .kh-holo__spark,
  .kh-hologram-cta-lit {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* ======================================================================================
   [SITE-FOOTER-ABOUT-COLLAB-01] Discreet footer About/Cooperation block
   ====================================================================================== */
.kh-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.82fr);
  gap: 18px;
  align-items: stretch;
  margin: 0 0 38px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 28px;
  background:
    radial-gradient(circle at 85% 16%, rgba(255,23,49,0.14), transparent 32%),
    rgba(255,255,255,0.035);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.kh-footer__brand,
.kh-footer__about {
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 22px;
  background: rgba(0,0,0,0.16);
}

.kh-footer__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 86px;
  padding: 18px;
}

.kh-footer__brand img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(255,23,49,0.25));
}

.kh-footer__brand span {
  display: grid;
  gap: 3px;
}

.kh-footer__brand strong {
  color: #fff;
  font-size: 18px;
  letter-spacing: -0.04em;
}

.kh-footer__brand small {
  color: var(--muted);
  font-size: 12px;
}

.kh-footer__about {
  overflow: hidden;
}

.kh-footer__about summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 86px;
  padding: 18px;
  cursor: pointer;
  list-style: none;
  color: #fff;
  font-weight: 900;
}

.kh-footer__about summary::-webkit-details-marker {
  display: none;
}

.kh-footer__about summary b {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 999px;
  color: #ffc7cc;
  background: rgba(255,23,49,0.11);
  transition: transform .2s ease, background .2s ease;
}

.kh-footer__about[open] summary b {
  transform: rotate(45deg);
  background: rgba(255,23,49,0.2);
}

.kh-footer__about-body {
  display: grid;
  gap: 12px;
  padding: 0 18px 18px;
}

.kh-footer__about-body p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.58;
}

.kh-footer__collab {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(255,56,76,0.26);
  border-radius: 14px;
  color: #fff;
  background: rgba(255,23,49,0.1);
  font-weight: 850;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.kh-footer__collab:hover {
  border-color: rgba(255,56,76,0.54);
  background: rgba(255,23,49,0.16);
  transform: translateY(-1px);
}

.kh-footer__hint {
  color: rgba(255,244,245,0.62);
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 820px) {
  .kh-footer {
    grid-template-columns: 1fr;
    margin-bottom: 24px;
    padding: 12px;
  }

  .kh-footer__brand,
  .kh-footer__about summary {
    min-height: 74px;
  }
}


/* ======================================================================================
   [SITE-FREE-STO-DONATE-01-REPAIR] Footer support donation block
   ====================================================================================== */
.kh-footer__support {
  grid-column: 1 / -1;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 22px;
  background:
    radial-gradient(circle at 88% 20%, rgba(22,185,255,0.1), transparent 34%),
    rgba(0,0,0,0.16);
}

.kh-footer__support summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 70px;
  padding: 18px;
  cursor: pointer;
  list-style: none;
  color: #fff;
  font-weight: 900;
}

.kh-footer__support summary::-webkit-details-marker {
  display: none;
}

.kh-footer__support summary b {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 999px;
  color: #cceeff;
  background: rgba(22,185,255,0.11);
  transition: transform .2s ease, background .2s ease;
}

.kh-footer__support[open] summary b {
  transform: rotate(45deg);
  background: rgba(22,185,255,0.18);
}

.kh-footer__support-body {
  display: grid;
  gap: 13px;
  padding: 0 18px 18px;
}

.kh-footer__support-body p {
  max-width: 980px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.58;
}

.kh-footer__donate-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.kh-footer__donate-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 52px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.kh-footer__donate-card strong {
  color: #fff;
  font-size: 13px;
}

.kh-footer__donate-card span {
  overflow: hidden;
  color: #ffe9ec;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kh-footer__donate-card button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(255,56,76,0.22);
  border-radius: 11px;
  color: #fff;
  background: rgba(255,23,49,0.1);
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.kh-footer__donate-card button:hover {
  border-color: rgba(255,56,76,0.48);
  background: rgba(255,23,49,0.16);
  transform: translateY(-1px);
}

.kh-footer__support-hint {
  color: rgba(255,244,245,0.62);
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 820px) {
  .kh-footer__donate-grid {
    grid-template-columns: 1fr;
  }

  .kh-footer__donate-card {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .kh-footer__donate-card button {
    width: fit-content;
  }
}


/* ======================================================================================
   [SITE-FOOTER-LIGHT-TELEGRAM-GAP-01] Classic light footer and Telegram CTA spacing
   ====================================================================================== */
.kh-footer {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 30px;
  padding: 12px;
  border-color: rgba(255,255,255,0.065);
  border-radius: 22px;
  background:
    radial-gradient(circle at 82% 18%, rgba(255,23,49,0.08), transparent 34%),
    rgba(255,255,255,0.022);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
}

.kh-footer__brand {
  display: none;
}

.kh-footer__about,
.kh-footer__support {
  min-width: 0;
  border-color: rgba(255,255,255,0.065);
  border-radius: 18px;
  background: rgba(0,0,0,0.12);
}

.kh-footer__support {
  grid-column: auto;
}

.kh-footer__about summary,
.kh-footer__support summary {
  min-height: 58px;
  padding: 14px 16px;
}

.kh-footer__about-body,
.kh-footer__support-body {
  padding: 0 16px 16px;
}

.kh-footer__meta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 4px 4px 0;
  color: rgba(255,244,245,0.58);
  font-size: 12px;
}

.kh-footer__meta img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(255,23,49,0.18));
}

.kh-telegram__trust + .kh-button {
  margin-top: 18px;
}

@media (max-width: 820px) {
  .kh-footer {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px;
  }

  .kh-footer__about summary,
  .kh-footer__support summary {
    min-height: 56px;
  }
}


/* [SITE-MINIAPP-QR-05] Real Telegram Mini App QR block */
.kh-miniapp-qr {
  display: grid;
  justify-items: center;
  gap: 12px;
  align-content: center;
}

.kh-miniapp-qr__code {
  display: grid;
  width: 150px;
  height: 150px;
  place-items: center;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(0,0,0,0.32), 0 0 28px rgba(22,185,255,0.16);
}

.kh-miniapp-qr__code img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 14px;
}

.kh-miniapp-qr span {
  max-width: 220px;
  color: rgba(255,244,245,0.72);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  word-break: break-word;
}

/* [SITE-MINIAPP-QR-HINT-06-REPAIR] Human-readable Mini App QR scan hint */
.kh-miniapp-qr small {
  display: block;
  max-width: 190px;
  margin: 8px auto 0;
  color: rgba(255,244,245,0.66);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.38;
  text-align: center;
}

@keyframes kh-bg-drift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 140px 0, -120px 0; }
}

@keyframes kh-road {
  from { transform: translateX(20%); opacity: 0; }
  12% { opacity: 1; }
  to { transform: translateX(-150%); opacity: 0; }
}

@keyframes kh-shine {
  0%, 38% { transform: translateX(-120%); }
  62%, 100% { transform: translateX(120%); }
}

@keyframes kh-dot {
  0%, 100% { transform: scale(1); opacity: 0.75; }
  50% { transform: scale(1.45); opacity: 1; }
}

@keyframes kh-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-12px) scale(1.04); }
}

@keyframes kh-logo-breathe {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-8px) rotate(1deg); }
}

@keyframes kh-border-sweep {
  from { filter: hue-rotate(0deg); opacity: .82; }
  to { filter: hue-rotate(360deg); opacity: .82; }
}

@keyframes kh-wave {
  to { background-position: -190% 0; }
}

@keyframes kh-shimmer {
  to { background-position: -220% 0; }
}

@keyframes kh-phone {
  0%, 100% { transform: rotate(-9deg) rotateY(-14deg) translateY(0); }
  50% { transform: rotate(-6deg) rotateY(-8deg) translateY(-10px); }
}

@media (max-width: 1180px) {
  .kh-hero {
    grid-template-columns: 1fr 0.82fr;
  }

  .kh-brand-stage {
    order: -1;
    grid-column: 1 / 3;
  }

  .kh-brand-stage__logo {
    width: min(420px, 56vw);
    scale: 1.7;
  }

  .kh-feature-strip,
  .kh-category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .kh-site-shell {
    width: min(100% - 20px, 1240px);
  }

  .kh-topbar {
    position: relative;
    top: auto;
    flex-wrap: wrap;
  }

  .kh-topbar__nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
  }

  .kh-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 38px;
  }

  .kh-brand-stage {
    grid-column: auto;
  }

  .kh-hero__copy h1 {
    font-size: clamp(40px, 14vw, 62px);
  }

  .kh-live__tabs {
    grid-template-columns: repeat(2, 1fr);
  }

  .kh-feature-strip,
  .kh-category-grid,
  .kh-bottom-grid,
  .kh-stats,
  .kh-telegram {
    grid-template-columns: 1fr;
  }

  .kh-phone {
    display: none;
  }

  .kh-live-row {
    grid-template-columns: 48px 1fr;
  }

  .kh-live-row__side {
    grid-column: 1 / 3;
    justify-items: start;
    grid-template-columns: auto auto auto;
    align-items: center;
  }

  .kh-live-row__wave {
    width: 120px;
  }
}

/* ======================================================================================
   [SITE-I18N-01] QZ/EN/RU language switcher
   ====================================================================================== */
.kh-lang-switcher{display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid rgba(255,56,76,.18);border-radius:16px;background:rgba(255,255,255,.045);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.kh-lang-switcher__item{display:inline-flex;align-items:center;justify-content:center;min-width:38px;min-height:34px;padding:0 10px;border-radius:12px;color:var(--muted);font-size:12px;font-weight:950;letter-spacing:.08em;transition:transform .2s ease,color .2s ease,background .2s ease,box-shadow .2s ease}
.kh-lang-switcher__item:hover,.kh-lang-switcher__item.is-active{color:#fff;background:linear-gradient(135deg,rgba(255,38,61,.96),rgba(93,6,16,.96));box-shadow:0 12px 28px rgba(255,23,49,.22),inset 0 1px 0 rgba(255,255,255,.22);transform:translateY(-1px)}
@media (max-width:820px){.kh-lang-switcher{margin-left:auto}.kh-lang-switcher__item{min-width:34px;min-height:32px;padding:0 8px}}

/* ======================================================================================
   [SITE-INTERACTIONS-01] Premium hover text animation and motion system
   ====================================================================================== */
html {
  --kh-hero-x-px: 0px;
  --kh-hero-y-px: 0px;
  --kh-hero-x-px-neg: 0px;
  --kh-hero-y-px-neg: 0px;
  --kh-hero-rot-x: 0deg;
  --kh-hero-rot-y: 0deg;
  --kh-hero-rot-x-neg: 0deg;
  --kh-hero-rot-y-neg: 0deg;
}

.kh-hero {
  isolation: isolate;
  perspective: 1100px;
}

.kh-hero::before {
  content: "";
  position: absolute;
  top: 42px;
  right: 24%;
  z-index: -1;
  width: 230px;
  height: 230px;
  border: 1px solid rgba(255, 23, 49, 0.23);
  border-radius: 999px;
  background:
    conic-gradient(from 0deg, transparent, rgba(255, 23, 49, 0.24), transparent 38%, rgba(22, 185, 255, 0.12), transparent),
    radial-gradient(circle, rgba(255, 23, 49, 0.08), transparent 62%);
  filter: blur(0.2px);
  opacity: 0.7;
  transform: translate3d(var(--kh-hero-x-px), var(--kh-hero-y-px), 0) rotate(var(--kh-hero-rot-y));
  animation: kh-site-orbit-spin 15s linear infinite;
  pointer-events: none;
}

.kh-hero::after {
  content: "";
  position: absolute;
  left: -110px;
  bottom: 68px;
  z-index: -1;
  width: 360px;
  height: 140px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 23, 49, 0.21), rgba(255, 255, 255, 0.07), transparent);
  filter: blur(20px);
  transform: translate3d(var(--kh-hero-x-px-neg), var(--kh-hero-y-px-neg), 0) rotate(-12deg);
  pointer-events: none;
}

@keyframes kh-site-orbit-spin {
  to {
    rotate: 360deg;
  }
}

.kh-kinetic-title {
  transform-style: preserve-3d;
}

.kh-hero-word {
  display: inline-block;
  transform: translate3d(0, 0, 0);
  will-change: transform, filter, text-shadow;
  transition:
    transform 0.48s cubic-bezier(.2,.8,.2,1),
    filter 0.48s ease,
    color 0.48s ease,
    text-shadow 0.48s ease,
    letter-spacing 0.48s ease;
}

.kh-hero-word:nth-child(3n + 1) {
  color: #fff6f7;
}

.kh-hero-word:nth-child(3n + 2) {
  color: #ffd8dc;
}

.kh-hero-word:nth-child(3n) {
  color: var(--red);
  text-shadow: 0 16px 44px rgba(255, 23, 49, 0.22);
}

.kh-hero:hover .kh-hero-word:nth-child(odd) {
  transform: translate3d(var(--kh-hero-x-px), var(--kh-hero-y-px), 28px) rotateY(var(--kh-hero-rot-y));
  filter: drop-shadow(0 20px 36px rgba(255, 23, 49, 0.18));
  letter-spacing: -0.095em;
}

.kh-hero:hover .kh-hero-word:nth-child(even) {
  transform: translate3d(var(--kh-hero-x-px-neg), var(--kh-hero-y-px), 18px) rotateY(var(--kh-hero-rot-y-neg));
  filter: drop-shadow(0 18px 34px rgba(22, 185, 255, 0.13));
  letter-spacing: -0.095em;
}

.kh-kicker {
  animation: kh-site-float-badge 4.8s ease-in-out infinite;
}

@keyframes kh-site-float-badge {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

.kh-button,
.kh-topbar__cta {
  will-change: transform;
}

.kh-topbar__cta::after,
.kh-button--primary::after {
  content: "";
  position: absolute;
  inset: -46% auto -46% -62%;
  width: 46%;
  pointer-events: none;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.46), transparent);
  transition: left 0.56s ease;
}

.kh-topbar__cta:hover::after,
.kh-button--primary:hover::after {
  left: 124%;
}

.kh-brand-stage,
.kh-live,
.kh-telegram,
.kh-feature,
.kh-category,
.kh-stats {
  will-change: transform;
}

.kh-brand-stage:hover .kh-brand-stage__logo {
  filter:
    drop-shadow(0 28px 46px rgba(0,0,0,0.62))
    drop-shadow(0 0 40px rgba(255,23,49,0.38));
}

.kh-route-signal {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #fff;
  box-shadow:
    0 0 20px rgba(255,255,255,0.92),
    0 0 34px rgba(255,23,49,0.72);
  transform: translate(-50%, -50%);
  animation: kh-route-signal 3.15s cubic-bezier(.45,.05,.2,1) infinite;
}

.kh-hero__map::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 16%;
  top: 52%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--red), rgba(255,255,255,0.5), var(--blue));
  box-shadow: 0 0 26px rgba(255,23,49,0.42);
  transform: rotate(10deg);
}

@keyframes kh-route-signal {
  0% {
    left: 14%;
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  82% {
    opacity: 1;
  }
  100% {
    left: 86%;
    opacity: 0;
  }
}

.kh-feature,
.kh-category,
.kh-telegram,
.kh-stats div {
  position: relative;
  overflow: hidden;
}

.kh-feature::after,
.kh-category::after,
.kh-telegram::after,
.kh-stats div::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at var(--kh-card-x, 50%) var(--kh-card-y, 50%), rgba(255, 23, 49, 0.17), transparent 42%);
  transition: opacity 0.24s ease;
}

.kh-feature:hover::after,
.kh-category:hover::after,
.kh-telegram:hover::after,
.kh-stats div:hover::after {
  opacity: 1;
}

.kh-feature b,
.kh-category em,
.kh-phone__screen img {
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1), filter 0.3s ease;
}

.kh-feature:hover b {
  transform: translateY(-3px) scale(1.12) rotate(-3deg);
}

.kh-category:hover em {
  transform: translateY(-7px) scale(1.13) rotate(-4deg);
  filter: drop-shadow(0 18px 25px rgba(255, 23, 49, 0.25));
}

.kh-phone__screen:hover img {
  transform: translateY(-4px) scale(1.06);
  filter: drop-shadow(0 0 22px rgba(255, 23, 49, 0.5));
}

.kh-reveal {
  opacity: 0;
  transform: translateY(22px);
}

.kh-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.62s ease,
    transform 0.62s cubic-bezier(.2,.8,.2,1);
}

.kh-live-row {
  transform-style: preserve-3d;
}

.kh-live-row:hover .kh-live-row__media,
.kh-live-row.is-hot .kh-live-row__media {
  transform: translateZ(18px) scale(1.05);
}

.kh-live-row__media {
  transition: transform 0.25s cubic-bezier(.2,.8,.2,1), filter 0.25s ease;
}

.kh-live-row:hover .kh-live-row__price,
.kh-live-row.is-hot .kh-live-row__price {
  text-shadow: 0 0 18px rgba(255, 209, 90, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .kh-hero::before,
  .kh-route-signal,
  .kh-kicker,
  .kh-hero-word,
  .kh-reveal,
  .kh-topbar__cta::after,
  .kh-button--primary::after {
    animation: none !important;
    transition: none !important;
  }

  .kh-reveal {
    opacity: 1;
    transform: none;
  }
}

/* ======================================================================================
   [SITE-HOVER-STABILITY-02] Preserve motion, remove hover-edge jitter
   ====================================================================================== */
.kh-feature.kh-hover-locked,
.kh-feature:hover,
.kh-feature.is-hot {
  border-color: rgba(255,56,76,0.5);
  box-shadow: 0 24px 50px rgba(255,23,49,0.13), inset 0 1px 0 rgba(255,255,255,0.12);
  transform: translateY(-5px);
}

.kh-feature.kh-hover-locked::after,
.kh-feature:hover::after {
  opacity: 1;
}

.kh-feature.kh-hover-locked b,
.kh-feature:hover b {
  transform: translateY(-3px) scale(1.12) rotate(-3deg);
}

.kh-category.kh-hover-locked,
.kh-category:hover {
  border-color: rgba(255,56,76,0.48);
  box-shadow: 0 30px 58px rgba(0,0,0,0.28), 0 0 28px rgba(255,23,49,0.14);
  transform: translateY(-6px) rotateX(2deg);
}

.kh-category.kh-hover-locked::after,
.kh-category:hover::after {
  opacity: 1;
}

.kh-category.kh-hover-locked em,
.kh-category:hover em {
  transform: translateY(-7px) scale(1.13) rotate(-4deg);
  filter: drop-shadow(0 18px 25px rgba(255, 23, 49, 0.25));
}

.kh-live-row.kh-hover-locked,
.kh-live-row:hover,
.kh-live-row.is-hot {
  border-color: rgba(255,56,76,0.55);
  background:
    radial-gradient(circle at 88% 45%, rgba(255,23,49,0.2), transparent 48%),
    rgba(255,255,255,0.065);
  box-shadow: 0 20px 44px rgba(255,23,49,0.14);
  transform: translateY(-2px) translateX(2px);
}

.kh-live-row.kh-hover-locked::before,
.kh-live-row:hover::before,
.kh-live-row.is-hot::before {
  transform: translateX(130%);
}

.kh-live-row.kh-hover-locked .kh-live-row__media,
.kh-live-row:hover .kh-live-row__media,
.kh-live-row.is-hot .kh-live-row__media {
  transform: translateZ(18px) scale(1.05);
}

.kh-live-row.kh-hover-locked .kh-live-row__price,
.kh-live-row:hover .kh-live-row__price,
.kh-live-row.is-hot .kh-live-row__price {
  text-shadow: 0 0 18px rgba(255, 209, 90, 0.35);
}

.kh-hover-locked {
  will-change: transform, box-shadow, border-color;
}

/* ======================================================================================
   [SITE-HOVER-STABILITY-03] Stable frames, animated content
   --------------------------------------------------------------------------------------
   The frame itself must not move on hover. Moving the parent frame changes the browser
   hit-test area and can create hover on/off jitter near borders. Motion is preserved
   by animating inner content, glows, borders, icons and text.
   ====================================================================================== */
.kh-feature,
.kh-category,
.kh-live-row,
.kh-live,
.kh-brand-stage {
  backface-visibility: hidden;
  transform-style: flat;
}

.kh-feature:hover,
.kh-feature.is-hot,
.kh-feature.kh-hover-locked,
.kh-category:hover,
.kh-category.kh-hover-locked,
.kh-live-row:hover,
.kh-live-row.is-hot,
.kh-live-row.kh-hover-locked,
.kh-live:hover {
  transform: translate3d(0, 0, 0) !important;
}

.kh-brand-stage,
.kh-brand-stage:hover {
  transform: translateY(-8px) translate3d(0, 0, 0) !important;
}

.kh-feature:hover,
.kh-feature.is-hot,
.kh-feature.kh-hover-locked {
  border-color: rgba(255, 56, 76, 0.58);
  box-shadow:
    0 26px 58px rgba(255, 23, 49, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.13);
}

.kh-category:hover,
.kh-category.kh-hover-locked {
  border-color: rgba(255, 56, 76, 0.54);
  box-shadow:
    0 30px 64px rgba(0,0,0,0.3),
    0 0 34px rgba(255,23,49,0.2),
    inset 0 1px 0 rgba(255,255,255,0.11);
}

.kh-live-row:hover,
.kh-live-row.is-hot,
.kh-live-row.kh-hover-locked {
  border-color: rgba(255,56,76,0.58);
  background:
    radial-gradient(circle at 88% 45%, rgba(255,23,49,0.2), transparent 48%),
    rgba(255,255,255,0.065);
  box-shadow: 0 20px 44px rgba(255,23,49,0.14);
}

.kh-live:hover {
  border-color: rgba(255, 56, 76, 0.52);
  box-shadow:
    0 34px 96px rgba(0,0,0,0.42),
    0 0 44px rgba(255,23,49,0.19);
}

.kh-feature h3,
.kh-category__label,
.kh-category strong,
.kh-live-row__body,
.kh-live-row__side,
.kh-brand-stage__logo {
  transition:
    transform 0.28s cubic-bezier(.2,.8,.2,1),
    color 0.28s ease,
    filter 0.28s ease,
    text-shadow 0.28s ease;
}

.kh-feature:hover h3,
.kh-feature.kh-hover-locked h3 {
  transform: translateX(4px);
  color: #ffffff;
  text-shadow: 0 0 18px rgba(255, 23, 49, 0.22);
}

.kh-feature:hover p,
.kh-feature.kh-hover-locked p {
  color: #e7d6da;
}

.kh-feature:hover b,
.kh-feature.kh-hover-locked b {
  transform: translateY(-4px) scale(1.14) rotate(-3deg);
  filter: drop-shadow(0 12px 18px rgba(255, 23, 49, 0.28));
}

.kh-category:hover .kh-category__label,
.kh-category.kh-hover-locked .kh-category__label {
  transform: translateY(-3px);
  text-shadow: 0 0 20px rgba(255, 23, 49, 0.24);
}

.kh-category:hover strong,
.kh-category.kh-hover-locked strong {
  transform: translateY(-1px);
  color: #ead7dc;
}

.kh-category:hover em,
.kh-category.kh-hover-locked em {
  transform: translateY(-9px) scale(1.14) rotate(-4deg);
  filter: drop-shadow(0 18px 25px rgba(255, 23, 49, 0.25));
}

.kh-category:hover b,
.kh-category.kh-hover-locked b {
  transform: scale(1.1);
  background: rgba(255, 23, 49, 0.18);
}

.kh-live-row:hover .kh-live-row__media,
.kh-live-row.is-hot .kh-live-row__media,
.kh-live-row.kh-hover-locked .kh-live-row__media {
  transform: translateY(-2px) scale(1.07);
  filter: drop-shadow(0 12px 18px rgba(255, 23, 49, 0.22));
}

.kh-live-row:hover .kh-live-row__body,
.kh-live-row.kh-hover-locked .kh-live-row__body {
  transform: translateX(4px);
}

.kh-live-row:hover .kh-live-row__price,
.kh-live-row.is-hot .kh-live-row__price,
.kh-live-row.kh-hover-locked .kh-live-row__price {
  text-shadow: 0 0 18px rgba(255, 209, 90, 0.35);
}

.kh-live-row:hover::before,
.kh-live-row.is-hot::before,
.kh-live-row.kh-hover-locked::before {
  transform: translateX(130%);
}

.kh-live:hover .kh-live__head,
.kh-live:hover .kh-live__tabs,
.kh-live:hover .kh-live__list,
.kh-live:hover .kh-live__more {
  transform: translateZ(0);
}

.kh-brand-stage:hover .kh-brand-stage__logo {
  transform: translateY(-7px) scale(1.035);
  filter:
    drop-shadow(0 28px 46px rgba(0,0,0,0.62))
    drop-shadow(0 0 40px rgba(255,23,49,0.38));
}

.kh-feature::after,
.kh-category::after,
.kh-telegram::after,
.kh-stats div::after {
  transition: opacity 0.24s ease;
}

.kh-feature:hover::after,
.kh-feature.kh-hover-locked::after,
.kh-category:hover::after,
.kh-category.kh-hover-locked::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .kh-feature:hover,
  .kh-feature.is-hot,
  .kh-feature.kh-hover-locked,
  .kh-category:hover,
  .kh-category.kh-hover-locked,
  .kh-live-row:hover,
  .kh-live-row.is-hot,
  .kh-live-row.kh-hover-locked,
  .kh-live:hover,
  .kh-brand-stage,
  .kh-brand-stage:hover,
  .kh-feature:hover b,
  .kh-category:hover em,
  .kh-live-row:hover .kh-live-row__media,
  .kh-live-row:hover .kh-live-row__body,
  .kh-brand-stage:hover .kh-brand-stage__logo {
    transform: none !important;
  }
}

/* ======================================================================================
   [SITE-HOVER-STABILITY-04] Final anti-jitter override: layout-safe motion only
   --------------------------------------------------------------------------------------
   Keep premium motion on inner content, but forbid hover transforms on hit-test frames,
   CTA wrappers and language/tab buttons. Also forbid layout-affecting letter-spacing
   changes in the hero title.
   ====================================================================================== */
.kh-feature,
.kh-feature:hover,
.kh-feature.is-hot,
.kh-feature.kh-hover-locked,
.kh-category,
.kh-category:hover,
.kh-category.kh-hover-locked,
.kh-live-row,
.kh-live-row:hover,
.kh-live-row.is-hot,
.kh-live-row.kh-hover-locked,
.kh-live,
.kh-live:hover,
.kh-brand-stage,
.kh-brand-stage:hover,
.kh-button,
.kh-button:hover,
.kh-topbar__cta,
.kh-topbar__cta:hover,
.kh-lang-switcher__item,
.kh-lang-switcher__item:hover,
.kh-lang-switcher__item.is-active,
.kh-live__tabs button,
.kh-live__tabs button:hover,
.kh-live__tabs button.is-active {
  transform: translate3d(0, 0, 0) !important;
}

.kh-feature,
.kh-category,
.kh-live-row,
.kh-live,
.kh-brand-stage,
.kh-button,
.kh-topbar__cta,
.kh-lang-switcher__item,
.kh-live__tabs button {
  transition-property:
    color,
    background,
    border-color,
    box-shadow,
    opacity,
    filter,
    text-shadow !important;
}

.kh-hero-word,
.kh-hero:hover .kh-hero-word,
.kh-hero:hover .kh-hero-word:nth-child(odd),
.kh-hero:hover .kh-hero-word:nth-child(even) {
  letter-spacing: inherit !important;
}

.kh-hero-word {
  transition-property:
    transform,
    filter,
    color,
    text-shadow !important;
}

.kh-button:hover,
.kh-topbar__cta:hover {
  box-shadow:
    0 20px 46px rgba(255,23,49,0.28),
    inset 0 1px 0 rgba(255,255,255,0.26);
}

.kh-lang-switcher__item:hover,
.kh-lang-switcher__item.is-active,
.kh-live__tabs button:hover,
.kh-live__tabs button.is-active {
  box-shadow:
    0 12px 28px rgba(255,23,49,.22),
    inset 0 1px 0 rgba(255,255,255,.22);
}

.kh-button:hover b,
.kh-topbar__cta:hover b {
  transform: translateX(3px) scale(1.08);
}

.kh-topbar__cta b,
.kh-button b {
  transition: transform 0.22s cubic-bezier(.2,.8,.2,1), filter 0.22s ease;
}

.kh-feature:hover,
.kh-feature.is-hot,
.kh-feature.kh-hover-locked {
  border-color: rgba(255, 56, 76, 0.58);
  box-shadow:
    0 26px 58px rgba(255, 23, 49, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.13);
}

.kh-category:hover,
.kh-category.kh-hover-locked {
  border-color: rgba(255, 56, 76, 0.54);
  box-shadow:
    0 30px 64px rgba(0,0,0,0.3),
    0 0 34px rgba(255,23,49,0.2),
    inset 0 1px 0 rgba(255,255,255,0.11);
}

.kh-live-row:hover,
.kh-live-row.is-hot,
.kh-live-row.kh-hover-locked {
  border-color: rgba(255,56,76,0.58);
  box-shadow: 0 20px 44px rgba(255,23,49,0.14);
}

.kh-live:hover {
  border-color: rgba(255, 56, 76, 0.52);
  box-shadow:
    0 34px 96px rgba(0,0,0,0.42),
    0 0 44px rgba(255,23,49,0.19);
}

/* ======================================================================================
   [SITE-HOVER-FRAME-MOTION-05] Visual frame motion without hit-test jitter
   --------------------------------------------------------------------------------------
   The real card stays stable. A pointer-events:none ghost frame moves above it, so the
   user sees premium frame motion while the browser hit-test rectangle does not move.
   ====================================================================================== */
.kh-feature,
.kh-category,
.kh-live-row,
.kh-live {
  position: relative;
}

.kh-feature::before,
.kh-category::before,
.kh-live::after,
.kh-live-row::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
  transform: translate3d(0, 0, 0) scale(0.992);
  transition:
    opacity 0.22s ease,
    transform 0.34s cubic-bezier(.2,.8,.2,1),
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    filter 0.22s ease;
}

.kh-feature::before,
.kh-category::before {
  inset: 1px;
  z-index: 1;
  border: 1px solid rgba(255, 70, 88, 0.22);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 0 0 rgba(255, 23, 49, 0);
}

.kh-live::after {
  inset: 2px;
  z-index: 1;
  border: 1px solid rgba(255, 70, 88, 0.24);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.025) inset,
    0 0 0 rgba(255, 23, 49, 0);
}

.kh-live-row::after {
  inset: 1px;
  z-index: 4;
  border: 1px solid rgba(255, 70, 88, 0.22);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.025) inset,
    0 0 0 rgba(255, 23, 49, 0);
}

.kh-feature > *,
.kh-category > *,
.kh-live > *,
.kh-live-row > * {
  position: relative;
}

.kh-feature > *,
.kh-category > *,
.kh-live > * {
  z-index: 2;
}

.kh-live-row > * {
  z-index: 5;
}

.kh-feature:hover::before,
.kh-feature.is-hot::before,
.kh-feature.kh-hover-locked::before {
  opacity: 1;
  transform: translate3d(0, -4px, 0) scale(1.012);
  border-color: rgba(255, 70, 88, 0.72);
  box-shadow:
    0 18px 42px rgba(255, 23, 49, 0.18),
    0 0 34px rgba(255, 23, 49, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  filter: saturate(1.14);
}

.kh-category:hover::before,
.kh-category.kh-hover-locked::before {
  opacity: 1;
  transform: translate3d(0, -5px, 0) scale(1.014);
  border-color: rgba(255, 70, 88, 0.7);
  box-shadow:
    0 20px 48px rgba(255, 23, 49, 0.18),
    0 0 38px rgba(255, 23, 49, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  filter: saturate(1.14);
}

.kh-live:hover::after {
  opacity: 1;
  transform: translate3d(0, -4px, 0) scale(1.006);
  border-color: rgba(255, 70, 88, 0.62);
  box-shadow:
    0 24px 56px rgba(255, 23, 49, 0.13),
    0 0 44px rgba(255, 23, 49, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

.kh-live-row:hover::after,
.kh-live-row.is-hot::after,
.kh-live-row.kh-hover-locked::after {
  opacity: 1;
  transform: translate3d(2px, -3px, 0) scale(1.008);
  border-color: rgba(255, 70, 88, 0.68);
  box-shadow:
    0 14px 34px rgba(255, 23, 49, 0.17),
    0 0 24px rgba(255, 23, 49, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.kh-feature::after,
.kh-category::after {
  z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
  .kh-feature::before,
  .kh-category::before,
  .kh-live::after,
  .kh-live-row::after {
    transition: none !important;
    transform: none !important;
  }
}

/* ======================================================================================
   [SITE-POLISH-02] Useful landing blocks: how it works, audience, Mini App CTA
   ====================================================================================== */
.kh-polish-flow,
.kh-polish-audience,
.kh-miniapp-cta {
  position: relative;
  margin-top: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 30px;
  overflow: hidden;
  box-shadow:
    0 26px 72px rgba(0,0,0,0.34),
    inset 0 1px 0 rgba(255,255,255,0.07);
}

.kh-polish-flow::after,
.kh-polish-audience::after,
.kh-miniapp-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(112deg, transparent 0 52%, rgba(255, 23, 49, 0.12) 53%, transparent 58%),
    radial-gradient(circle at 82% 14%, rgba(22, 185, 255, 0.11), transparent 32%);
  opacity: 0.9;
}

.kh-polish-flow > *,
.kh-polish-audience > *,
.kh-miniapp-cta > * {
  position: relative;
  z-index: 2;
}

.kh-polish-flow {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
  gap: 18px;
  padding: 28px;
  background:
    radial-gradient(circle at 10% 20%, rgba(255, 23, 49, 0.22), transparent 34%),
    linear-gradient(135deg, rgba(18, 8, 13, 0.84), rgba(5, 7, 14, 0.9));
}

.kh-polish-flow__intro h2,
.kh-polish-audience__copy h2,
.kh-miniapp-cta h2 {
  margin: 12px 0 0;
  color: #fff8f9;
  font-size: clamp(28px, 3.8vw, 48px);
  line-height: 0.98;
  letter-spacing: -0.065em;
}

.kh-polish-flow__intro p,
.kh-miniapp-cta p {
  max-width: 560px;
  margin: 16px 0 0;
  color: var(--muted);
  line-height: 1.62;
}

.kh-flow-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.kh-flow-step,
.kh-audience-card {
  position: relative;
  min-height: 188px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 18%, rgba(255, 23, 49, 0.16), transparent 34%),
    rgba(255,255,255,0.045);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  transition:
    border-color 0.24s ease,
    box-shadow 0.24s ease,
    background 0.24s ease,
    filter 0.24s ease;
}

.kh-flow-step::before,
.kh-audience-card::before {
  content: "";
  position: absolute;
  inset: auto -20% -34% -20%;
  height: 112px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 23, 49, 0.34), transparent 66%);
  filter: blur(24px);
  opacity: 0.72;
  transition: opacity 0.24s ease, filter 0.24s ease;
}

.kh-flow-step > *,
.kh-audience-card > * {
  position: relative;
  z-index: 2;
}

.kh-flow-step span {
  display: inline-flex;
  min-width: 48px;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 56, 76, 0.32);
  border-radius: 999px;
  color: #ffd8dc;
  background: rgba(255, 23, 49, 0.13);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.kh-flow-step h3,
.kh-audience-card h3 {
  margin: 16px 0 8px;
  color: #fff;
  font-size: 19px;
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.kh-flow-step p,
.kh-audience-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.kh-flow-step:hover,
.kh-audience-card:hover {
  border-color: rgba(255, 56, 76, 0.54);
  background:
    radial-gradient(circle at 90% 14%, rgba(255, 23, 49, 0.21), transparent 38%),
    rgba(255,255,255,0.06);
  box-shadow:
    0 22px 50px rgba(255, 23, 49, 0.13),
    inset 0 1px 0 rgba(255,255,255,0.12);
}

.kh-flow-step:hover::before,
.kh-audience-card:hover::before {
  opacity: 1;
  filter: blur(20px);
}

.kh-polish-audience {
  padding: 28px;
  background:
    radial-gradient(circle at 92% 8%, rgba(22, 185, 255, 0.18), transparent 30%),
    radial-gradient(circle at 12% 78%, rgba(255, 23, 49, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(9, 7, 14, 0.9), rgba(38, 8, 16, 0.86));
}

.kh-polish-audience__copy {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.kh-polish-audience__copy h2 {
  max-width: 760px;
}

.kh-audience-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.kh-audience-card b {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 18px;
  background:
    radial-gradient(circle at 38% 30%, rgba(255,255,255,0.22), transparent 34%),
    rgba(255, 23, 49, 0.13);
  font-size: 25px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.kh-miniapp-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  align-items: center;
  gap: 24px;
  padding: 30px;
  background:
    radial-gradient(circle at 80% 42%, rgba(22, 185, 255, 0.22), transparent 29%),
    radial-gradient(circle at 12% 16%, rgba(255, 23, 49, 0.22), transparent 34%),
    linear-gradient(135deg, rgba(38, 8, 16, 0.92), rgba(5, 7, 14, 0.94));
}

.kh-miniapp-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.kh-miniapp-qr {
  justify-self: end;
  width: min(100%, 240px);
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 26px;
  background: rgba(255,255,255,0.06);
  box-shadow:
    0 24px 58px rgba(0,0,0,0.36),
    inset 0 1px 0 rgba(255,255,255,0.1);
  text-align: center;
}

.kh-miniapp-qr__code {
  position: relative;
  width: 168px;
  height: 168px;
  margin: 0 auto 12px;
  border: 10px solid #fff;
  border-radius: 18px;
  background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%0A%3Csvg width=%2233mm%22 height=%2233mm%22 version=%221.1%22 viewBox=%220 0 33 33%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M2,2H3V3H2zM3,2H4V3H3zM4,2H5V3H4zM5,2H6V3H5zM6,2H7V3H6zM7,2H8V3H7zM8,2H9V3H8zM15,2H16V3H15zM18,2H19V3H18zM20,2H21V3H20zM21,2H22V3H21zM24,2H25V3H24zM25,2H26V3H25zM26,2H27V3H26zM27,2H28V3H27zM28,2H29V3H28zM29,2H30V3H29zM30,2H31V3H30zM2,3H3V4H2zM8,3H9V4H8zM10,3H11V4H10zM11,3H12V4H11zM12,3H13V4H12zM13,3H14V4H13zM16,3H17V4H16zM17,3H18V4H17zM18,3H19V4H18zM21,3H22V4H21zM22,3H23V4H22zM24,3H25V4H24zM30,3H31V4H30zM2,4H3V5H2zM4,4H5V5H4zM5,4H6V5H5zM6,4H7V5H6zM8,4H9V5H8zM12,4H13V5H12zM14,4H15V5H14zM15,4H16V5H15zM16,4H17V5H16zM18,4H19V5H18zM20,4H21V5H20zM21,4H22V5H21zM24,4H25V5H24zM26,4H27V5H26zM27,4H28V5H27zM28,4H29V5H28zM30,4H31V5H30zM2,5H3V6H2zM4,5H5V6H4zM5,5H6V6H5zM6,5H7V6H6zM8,5H9V6H8zM11,5H12V6H11zM12,5H13V6H12zM14,5H15V6H14zM15,5H16V6H15zM16,5H17V6H16zM17,5H18V6H17zM20,5H21V6H20zM22,5H23V6H22zM24,5H25V6H24zM26,5H27V6H26zM27,5H28V6H27zM28,5H29V6H28zM30,5H31V6H30zM2,6H3V7H2zM4,6H5V7H4zM5,6H6V7H5zM6,6H7V7H6zM8,6H9V7H8zM10,6H11V7H10zM11,6H12V7H11zM16,6H17V7H16zM19,6H20V7H19zM20,6H21V7H20zM24,6H25V7H24zM26,6H27V7H26zM27,6H28V7H27zM28,6H29V7H28zM30,6H31V7H30zM2,7H3V8H2zM8,7H9V8H8zM11,7H12V8H11zM12,7H13V8H12zM15,7H16V8H15zM20,7H21V8H20zM21,7H22V8H21zM24,7H25V8H24zM30,7H31V8H30zM2,8H3V9H2zM3,8H4V9H3zM4,8H5V9H4zM5,8H6V9H5zM6,8H7V9H6zM7,8H8V9H7zM8,8H9V9H8zM10,8H11V9H10zM12,8H13V9H12zM14,8H15V9H14zM16,8H17V9H16zM18,8H19V9H18zM20,8H21V9H20zM22,8H23V9H22zM24,8H25V9H24zM25,8H26V9H25zM26,8H27V9H26zM27,8H28V9H27zM28,8H29V9H28zM29,8H30V9H29zM30,8H31V9H30zM14,9H15V10H14zM15,9H16V10H15zM16,9H17V10H16zM18,9H19V10H18zM19,9H20V10H19zM20,9H21V10H20zM2,10H3V11H2zM4,10H5V11H4zM6,10H7V11H6zM8,10H9V11H8zM11,10H12V11H11zM13,10H14V11H13zM16,10H17V11H16zM17,10H18V11H17zM18,10H19V11H18zM19,10H20V11H19zM22,10H23V11H22zM26,10H27V11H26zM29,10H30V11H29zM5,11H6V12H5zM6,11H7V12H6zM9,11H10V12H9zM10,11H11V12H10zM13,11H14V12H13zM14,11H15V12H14zM16,11H17V12H16zM17,11H18V12H17zM19,11H20V12H19zM20,11H21V12H20zM22,11H23V12H22zM23,11H24V12H23zM24,11H25V12H24zM25,11H26V12H25zM27,11H28V12H27zM30,11H31V12H30zM2,12H3V13H2zM3,12H4V13H3zM4,12H5V13H4zM5,12H6V13H5zM7,12H8V13H7zM8,12H9V13H8zM9,12H10V13H9zM10,12H11V13H10zM13,12H14V13H13zM15,12H16V13H15zM18,12H19V13H18zM23,12H24V13H23zM25,12H26V13H25zM26,12H27V13H26zM28,12H29V13H28zM29,12H30V13H29zM30,12H31V13H30zM5,13H6V14H5zM6,13H7V14H6zM9,13H10V14H9zM11,13H12V14H11zM13,13H14V14H13zM14,13H15V14H14zM17,13H18V14H17zM19,13H20V14H19zM21,13H22V14H21zM22,13H23V14H22zM24,13H25V14H24zM29,13H30V14H29zM2,14H3V15H2zM3,14H4V15H3zM5,14H6V15H5zM8,14H9V15H8zM11,14H12V15H11zM12,14H13V15H12zM14,14H15V15H14zM19,14H20V15H19zM20,14H21V15H20zM23,14H24V15H23zM24,14H25V15H24zM27,14H28V15H27zM29,14H30V15H29zM30,14H31V15H30zM3,15H4V16H3zM5,15H6V16H5zM6,15H7V16H6zM7,15H8V16H7zM9,15H10V16H9zM11,15H12V16H11zM12,15H13V16H12zM14,15H15V16H14zM15,15H16V16H15zM18,15H19V16H18zM20,15H21V16H20zM22,15H23V16H22zM23,15H24V16H23zM27,15H28V16H27zM30,15H31V16H30zM3,16H4V17H3zM5,16H6V17H5zM8,16H9V17H8zM9,16H10V17H9zM12,16H13V17H12zM16,16H17V17H16zM18,16H19V17H18zM19,16H20V17H19zM22,16H23V17H22zM25,16H26V17H25zM26,16H27V17H26zM27,16H28V17H27zM29,16H30V17H29zM30,16H31V17H30zM2,17H3V18H2zM3,17H4V18H3zM4,17H5V18H4zM5,17H6V18H5zM6,17H7V18H6zM9,17H10V18H9zM10,17H11V18H10zM11,17H12V18H11zM13,17H14V18H13zM15,17H16V18H15zM16,17H17V18H16zM17,17H18V18H17zM19,17H20V18H19zM20,17H21V18H20zM21,17H22V18H21zM24,17H25V18H24zM26,17H27V18H26zM27,17H28V18H27zM29,17H30V18H29zM2,18H3V19H2zM3,18H4V19H3zM4,18H5V19H4zM5,18H6V19H5zM8,18H9V19H8zM10,18H11V19H10zM13,18H14V19H13zM16,18H17V19H16zM19,18H20V19H19zM21,18H22V19H21zM22,18H23V19H22zM23,18H24V19H23zM24,18H25V19H24zM27,18H28V19H27zM29,18H30V19H29zM30,18H31V19H30zM3,19H4V20H3zM4,19H5V20H4zM7,19H8V20H7zM9,19H10V20H9zM13,19H14V20H13zM14,19H15V20H14zM16,19H17V20H16zM18,19H19V20H18zM19,19H20V20H19zM20,19H21V20H20zM21,19H22V20H21zM22,19H23V20H22zM23,19H24V20H23zM24,19H25V20H24zM27,19H28V20H27zM28,19H29V20H28zM30,19H31V20H30zM2,20H3V21H2zM4,20H5V21H4zM8,20H9V21H8zM11,20H12V21H11zM12,20H13V21H12zM15,20H16V21H15zM19,20H20V21H19zM20,20H21V21H20zM23,20H24V21H23zM29,20H30V21H29zM30,20H31V21H30zM3,21H4V22H3zM5,21H6V22H5zM9,21H10V22H9zM10,21H11V22H10zM12,21H13V22H12zM13,21H14V22H13zM17,21H18V22H17zM19,21H20V22H19zM20,21H21V22H20zM24,21H25V22H24zM26,21H27V22H26zM27,21H28V22H27zM29,21H30V22H29zM2,22H3V23H2zM4,22H5V23H4zM5,22H6V23H5zM6,22H7V23H6zM8,22H9V23H8zM9,22H10V23H9zM10,22H11V23H10zM12,22H13V23H12zM14,22H15V23H14zM18,22H19V23H18zM19,22H20V23H19zM21,22H22V23H21zM22,22H23V23H22zM23,22H24V23H23zM24,22H25V23H24zM25,22H26V23H25zM26,22H27V23H26zM10,23H11V24H10zM12,23H13V24H12zM14,23H15V24H14zM15,23H16V24H15zM18,23H19V24H18zM19,23H20V24H19zM20,23H21V24H20zM21,23H22V24H21zM22,23H23V24H22zM26,23H27V24H26zM28,23H29V24H28zM29,23H30V24H29zM30,23H31V24H30zM2,24H3V25H2zM3,24H4V25H3zM4,24H5V25H4zM5,24H6V25H5zM6,24H7V25H6zM7,24H8V25H7zM8,24H9V25H8zM16,24H17V25H16zM18,24H19V25H18zM21,24H22V25H21zM22,24H23V25H22zM24,24H25V25H24zM26,24H27V25H26zM27,24H28V25H27zM29,24H30V25H29zM30,24H31V25H30zM2,25H3V26H2zM8,25H9V26H8zM11,25H12V26H11zM12,25H13V26H12zM15,25H16V26H15zM16,25H17V26H16zM17,25H18V26H17zM18,25H19V26H18zM19,25H20V26H19zM22,25H23V26H22zM26,25H27V26H26zM27,25H28V26H27zM29,25H30V26H29zM30,25H31V26H30zM2,26H3V27H2zM4,26H5V27H4zM5,26H6V27H5zM6,26H7V27H6zM8,26H9V27H8zM10,26H11V27H10zM12,26H13V27H12zM13,26H14V27H13zM16,26H17V27H16zM19,26H20V27H19zM22,26H23V27H22zM23,26H24V27H23zM24,26H25V27H24zM25,26H26V27H25zM26,26H27V27H26zM30,26H31V27H30zM2,27H3V28H2zM4,27H5V28H4zM5,27H6V28H5zM6,27H7V28H6zM8,27H9V28H8zM12,27H13V28H12zM13,27H14V28H13zM14,27H15V28H14zM16,27H17V28H16zM18,27H19V28H18zM19,27H20V28H19zM25,27H26V28H25zM26,27H27V28H26zM28,27H29V28H28zM29,27H30V28H29zM30,27H31V28H30zM2,28H3V29H2zM4,28H5V29H4zM5,28H6V29H5zM6,28H7V29H6zM8,28H9V29H8zM10,28H11V29H10zM14,28H15V29H14zM15,28H16V29H15zM18,28H19V29H18zM20,28H21V29H20zM26,28H27V29H26zM27,28H28V29H27zM30,28H31V29H30zM2,29H3V30H2zM8,29H9V30H8zM13,29H14V30H13zM16,29H17V30H16zM19,29H20V30H19zM20,29H21V30H20zM21,29H22V30H21zM22,29H23V30H22zM24,29H25V30H24zM25,29H26V30H25zM29,29H30V30H29zM2,30H3V31H2zM3,30H4V31H3zM4,30H5V31H4zM5,30H6V31H5zM6,30H7V31H6zM7,30H8V31H7zM8,30H9V31H8zM10,30H11V31H10zM15,30H16V31H15zM19,30H20V31H19zM21,30H22V31H21zM22,30H23V31H22zM24,30H25V31H24zM25,30H26V31H25zM26,30H27V31H26zM27,30H28V31H27zM29,30H30V31H29zM30,30H31V31H30z%22 id=%22qr-path%22 fill=%22#000000%22 fill-opacity=%221%22 fill-rule=%22nonzero%22 stroke=%22none%22/%3E%3C/svg%3E") center / calc(100% - 18px) calc(100% - 18px) no-repeat #fff;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.1),
    0 18px 40px rgba(0,0,0,0.32);
}

.kh-miniapp-qr__code i {
  display: none;
}

.kh-miniapp-qr span {
  display: block;
  color: #f7d7dc;
  font-size: 12px;
  font-weight: 850;
  overflow-wrap: anywhere;
}

@media (max-width: 1180px) {
  .kh-polish-flow {
    grid-template-columns: 1fr;
  }

  .kh-audience-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kh-miniapp-cta {
    grid-template-columns: minmax(0, 1fr) 220px;
  }
}

@media (max-width: 820px) {
  .kh-polish-flow,
  .kh-polish-audience,
  .kh-miniapp-cta {
    padding: 22px;
    border-radius: 24px;
  }

  .kh-flow-steps,
  .kh-audience-grid,
  .kh-miniapp-cta {
    grid-template-columns: 1fr;
  }

  .kh-polish-audience__copy {
    display: block;
  }

  .kh-miniapp-qr {
    justify-self: stretch;
    width: 100%;
  }

  .kh-miniapp-qr__code {
    width: 150px;
    height: 150px;
  }
}

/* ======================================================================================
   [SITE-PERF-STABILITY-01] Device-aware paint, motion and image stability guards
   --------------------------------------------------------------------------------------
   Normal premium visuals stay enabled. These rules reduce unnecessary work only when the
   browser can safely defer off-screen paint or the user/device asks for less motion.
   ====================================================================================== */
.kh-topbar__brand img,
.kh-brand-stage__logo,
.kh-phone__screen img {
  aspect-ratio: 1 / 1;
}

@supports (content-visibility: auto) {
  .kh-feature-strip,
  .kh-polish-flow,
  .kh-polish-audience,
  .kh-miniapp-cta,
  .kh-section,
  .kh-bottom-grid {
    content-visibility: auto;
    contain-intrinsic-size: 1px 520px;
  }

  .kh-bottom-grid {
    contain-intrinsic-size: 1px 360px;
  }
}

@media (max-width: 520px), (hover: none) and (pointer: coarse) {
  body::before {
    opacity: 0.68;
    animation-duration: 20s;
  }

  .kh-cursor-glow {
    width: 26rem;
    height: 26rem;
    filter: blur(12px);
  }

  .kh-road-lines {
    height: 170px;
    opacity: 0.48;
  }

  .kh-road-lines span {
    animation-duration: 5.6s;
  }

  .kh-hero::before {
    opacity: 0.5;
  }

  .kh-brand-stage__halo {
    filter: blur(18px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  body::before,
  .kh-road-lines span,
  .kh-map-dot,
  .kh-live__status i,
  .kh-brand-stage__halo,
  .kh-brand-stage__logo,
  .kh-button__shine,
  .kh-live::before,
  .kh-live-row--skeleton,
  .kh-phone__screen,
  .kh-route-signal,
  .kh-kicker,
  .kh-hero::before {
    animation: none !important;
  }

  .kh-cursor-glow {
    transition: none !important;
  }

  .kh-feature::before,
  .kh-category::before,
  .kh-live::after,
  .kh-live-row::after,
  .kh-feature::after,
  .kh-category::after,
  .kh-telegram::after,
  .kh-stats div::after {
    transition: none !important;
  }
}

/* ======================================================================================
   [SITE-PRODUCT-CTA-01] Fast scenario CTA block
   ====================================================================================== */
.kh-product-cta {
  position: relative;
  margin-top: 18px;
  padding: 28px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 30px;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 22%, rgba(255, 23, 49, 0.2), transparent 34%),
    radial-gradient(circle at 88% 18%, rgba(22, 185, 255, 0.17), transparent 30%),
    linear-gradient(135deg, rgba(13, 8, 14, 0.92), rgba(36, 8, 16, 0.88));
  box-shadow:
    0 26px 72px rgba(0,0,0,0.34),
    inset 0 1px 0 rgba(255,255,255,0.07);
}

.kh-product-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(112deg, transparent 0 46%, rgba(255, 23, 49, 0.12) 47%, transparent 52%),
    radial-gradient(circle at 72% 72%, rgba(255, 209, 90, 0.1), transparent 34%);
}

.kh-product-cta > * {
  position: relative;
  z-index: 2;
}

.kh-product-cta__head {
  display: grid;
  max-width: 860px;
  gap: 14px;
}

.kh-product-cta__head h2 {
  margin: 0;
  color: #fff8f9;
  font-size: clamp(28px, 3.8vw, 48px);
  line-height: 0.98;
  letter-spacing: -0.065em;
}

.kh-product-cta__head p {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  line-height: 1.62;
}

.kh-product-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.kh-product-card {
  position: relative;
  display: grid;
  min-height: 176px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 14%, rgba(255, 23, 49, 0.16), transparent 34%),
    rgba(255,255,255,0.045);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  transition:
    border-color 0.24s ease,
    box-shadow 0.24s ease,
    background 0.24s ease,
    filter 0.24s ease;
}

.kh-product-card::before {
  content: "";
  position: absolute;
  inset: auto -18% -38% -18%;
  height: 112px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 23, 49, 0.32), transparent 66%);
  filter: blur(24px);
  opacity: 0.68;
  transition: opacity 0.24s ease, filter 0.24s ease;
}

.kh-product-card > * {
  position: relative;
  z-index: 2;
}

.kh-product-card b {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 17px;
  background: rgba(255, 23, 49, 0.13);
  font-size: 23px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  transition: transform 0.26s cubic-bezier(.2,.8,.2,1), filter 0.26s ease;
}

.kh-product-card span {
  margin-top: 14px;
  color: #fff;
  font-size: 17px;
  font-weight: 950;
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.kh-product-card small {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.42;
}

.kh-product-card i {
  position: absolute;
  right: 16px;
  bottom: 14px;
  color: #ffd8dc;
  font-style: normal;
  font-weight: 950;
}

.kh-product-card:hover {
  border-color: rgba(255, 56, 76, 0.54);
  background:
    radial-gradient(circle at 90% 14%, rgba(255, 23, 49, 0.21), transparent 38%),
    rgba(255,255,255,0.06);
  box-shadow:
    0 22px 50px rgba(255, 23, 49, 0.13),
    inset 0 1px 0 rgba(255,255,255,0.12);
}

.kh-product-card:hover::before {
  opacity: 1;
  filter: blur(20px);
}

.kh-product-card:hover b {
  transform: translateY(-3px) scale(1.1);
  filter: drop-shadow(0 12px 18px rgba(255, 23, 49, 0.24));
}

.kh-product-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

@media (max-width: 1180px) {
  .kh-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .kh-product-cta {
    padding: 22px;
  }

  .kh-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .kh-product-grid {
    grid-template-columns: 1fr;
  }

  .kh-product-card {
    min-height: 142px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kh-product-card,
  .kh-product-card::before,
  .kh-product-card b {
    transition: none !important;
  }

  .kh-product-card:hover b {
    transform: none !important;
  }
}

/* ======================================================================================
   [SITE-DESKTOP-WIDE-RESTORE-01] Restore wide 16:9 landing composition
   --------------------------------------------------------------------------------------
   Keeps all current visual effects, 3D, language bindings and product CTA blocks.
   This layer only restores the desktop canvas width and hero balance for 16:9 monitors.
   Mobile/tablet rules remain controlled by the existing responsive blocks above.
   ====================================================================================== */
@media (min-width: 1280px) {
  .kh-site-shell {
    width: min(1480px, calc(100% - 56px));
  }

  .kh-hero {
    grid-template-columns: minmax(420px, 1.08fr) minmax(360px, 0.84fr) minmax(430px, 0.98fr);
    gap: clamp(32px, 3vw, 56px);
  }

  .kh-hero__copy h1 {
    max-width: 760px;
    font-size: clamp(56px, 5.7vw, 96px);
  }

  .kh-hero__copy p {
    max-width: 640px;
  }

  .kh-brand-stage__logo {
    width: min(100%, 520px);
  }

  .kh-live {
    justify-self: end;
    width: min(100%, 440px);
  }
}

@media (min-width: 1600px) {
  .kh-site-shell {
    width: min(1560px, calc(100% - 72px));
  }

  .kh-hero {
    grid-template-columns: minmax(500px, 1.16fr) minmax(430px, 0.96fr) minmax(460px, 1.02fr);
    gap: clamp(40px, 3.2vw, 72px);
    min-height: 740px;
  }

  .kh-hero__copy h1 {
    max-width: 860px;
    font-size: clamp(66px, 5vw, 104px);
  }

  .kh-brand-stage__logo {
    width: min(100%, 520px);
  }

  .kh-live {
    width: min(100%, 460px);
  }
}

@media (min-width: 1280px) and (max-height: 820px) {
  .kh-hero {
    min-height: 660px;
    padding-top: 54px;
  }
}

/* ======================================================================================
   [SITE-DESKTOP-WIDE-RESTORE-03] 16:9 desktop width + mobile logo ratio hotfix
   --------------------------------------------------------------------------------------
   Regression fix only:
   - restores a wider 16:9 desktop canvas;
   - fixes mobile logo stretching caused by generic image stability aspect-ratio guard;
   - keeps current animations, 3D glow, i18n, product CTA and route/deeplink smoke guards.
   ====================================================================================== */
.kh-brand-stage__logo {
  aspect-ratio: auto !important;
  height: auto !important;
  object-fit: contain;
}

@media (min-width: 1280px) {
  .kh-site-shell {
    width: min(1720px, calc(100% - 36px));
  }

  .kh-hero {
    grid-template-columns: minmax(500px, 1.16fr) minmax(450px, 0.96fr) minmax(460px, 1fr);
    gap: clamp(36px, 3.4vw, 72px);
  }

  .kh-hero__copy h1 {
    max-width: 860px;
    font-size: clamp(58px, 5.9vw, 102px);
  }

  .kh-hero__copy p {
    max-width: 660px;
  }

  .kh-brand-stage__logo {
    width: min(100%, 560px);
  }

  .kh-live {
    justify-self: end;
    width: min(100%, 520px);
  }
}

@media (min-width: 1600px) {
  .kh-site-shell {
    width: min(1920px, calc(100% - 56px));
  }

  .kh-hero {
    grid-template-columns: minmax(600px, 1.24fr) minmax(520px, 1fr) minmax(520px, 1fr);
    gap: clamp(48px, 4vw, 86px);
    min-height: 750px;
  }

  .kh-hero__copy h1 {
    max-width: 940px;
    font-size: clamp(72px, 5.2vw, 112px);
  }

  .kh-brand-stage__logo {
    width: min(100%, 610px);
  }

  .kh-live {
    width: min(100%, 520px);
  }
}

@media (min-width: 1280px) and (max-height: 840px) {
  .kh-hero {
    min-height: 680px;
    padding-top: 54px;
  }
}

@media (max-width: 760px) {
  .kh-brand-stage {
    width: 100%;
    justify-self: center;
    transform: none;
  }

  .kh-brand-stage__halo {
    inset: 6% 2% 7%;
  }

  .kh-brand-stage__logo {
    display: block;
    width: min(86vw, 390px) !important;
    max-width: 100%;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain;
  }


}

/* =========================================================
   [SITE-HERO-CLARITY-RAIL-01] First-screen clarity rail
   Additive only: keeps existing background, road lines, glow, 3D logo,
   hover stability and reduced-motion guards.
   ========================================================= */
.kh-hero__quickline {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  max-width: 760px;
  padding: 8px;
  border: 1px solid rgba(255, 56, 76, 0.2);
  border-radius: 22px;
  background:
    radial-gradient(circle at 12% 50%, rgba(255, 23, 49, 0.13), transparent 38%),
    linear-gradient(135deg, rgba(255,255,255,0.075), rgba(255,255,255,0.028));
  box-shadow:
    0 18px 48px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(14px);
  overflow: hidden;
}

.kh-hero__quickline::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: linear-gradient(105deg, transparent 0 18%, rgba(255,255,255,0.08) 28%, transparent 44% 100%);
  opacity: 0.7;
  pointer-events: none;
}

.kh-hero__quickline span {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  color: rgba(255,255,255,0.86);
  background: rgba(7, 4, 8, 0.46);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.01em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  transition:
    color 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease,
    text-shadow 0.22s ease;
}

.kh-hero__quickline span:hover {
  color: #fff;
  border-color: rgba(255, 56, 76, 0.32);
  background: rgba(255, 23, 49, 0.12);
  box-shadow:
    0 10px 24px rgba(255,23,49,0.12),
    inset 0 1px 0 rgba(255,255,255,0.1);
  text-shadow: 0 0 16px rgba(255, 23, 49, 0.22);
}

@media (max-width: 720px) {
  .kh-hero__quickline {
    margin-top: 14px;
    padding: 7px;
    border-radius: 18px;
  }

  .kh-hero__quickline span {
    flex: 1 1 calc(50% - 8px);
    justify-content: center;
    min-height: 38px;
    padding: 8px 9px;
    font-size: 12px;
    text-align: center;
  }
}

@media (max-width: 390px) {
  .kh-hero__quickline span {
    flex-basis: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kh-hero__quickline span {
    transition: none !important;
  }
}

/*
   [SITE-LIVE-DISPATCH-CLARITY-01] Live Dispatch clarity rail

   Additive-only polish for the public landing page:
   - explains what the live dispatch preview shows;
   - keeps existing live list rendering, hover stability, shimmer and reduced-motion guards;
   - does not move the parent live frame on hover.
*/
.kh-live__signal {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  background:
    radial-gradient(circle at 92% 24%, rgba(22,185,255,0.12), transparent 42%),
    linear-gradient(135deg, rgba(255,255,255,0.055), rgba(255,23,49,0.045));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  overflow: hidden;
}

.kh-live__signal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.11), transparent);
  transform: translateX(-120%);
  transition: transform 0.62s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}

.kh-live:hover .kh-live__signal::before {
  transform: translateX(120%);
}

.kh-live__signal span {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 7px 8px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  color: #f2e8ea;
  background: rgba(0,0,0,0.18);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: -0.015em;
  text-align: center;
  white-space: nowrap;
  transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, color 0.22s ease;
}

.kh-live__signal span:hover {
  color: #fff;
  border-color: rgba(255,56,76,0.42);
  background: rgba(255,23,49,0.13);
  box-shadow: 0 10px 24px rgba(255,23,49,0.12), inset 0 1px 0 rgba(255,255,255,0.1);
}

@media (max-width: 720px) {
  .kh-live__signal {
    grid-template-columns: 1fr;
  }

  .kh-live__signal span {
    justify-content: flex-start;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kh-live__signal::before {
    transition: none !important;
    transform: none !important;
  }
}

/*
   [SITE-CATEGORIES-CTA-CLARITY-01] Product CTA role rail and category helper
   Additive-only: keeps current product-card/category animations, hover effects,
   frame-motion guards and reduced-motion behavior.
*/
.kh-product-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.kh-product-roles span {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 56, 76, 0.18);
  border-radius: 999px;
  color: #ffe7ea;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 23, 49, 0.16), transparent 38%),
    rgba(255,255,255,0.055);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  transition:
    border-color 0.24s ease,
    background 0.24s ease,
    box-shadow 0.24s ease,
    filter 0.24s ease;
}

.kh-product-roles span::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-135%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16), transparent);
  transition: transform 0.58s ease;
}

.kh-product-roles span:hover {
  border-color: rgba(255, 56, 76, 0.52);
  background:
    radial-gradient(circle at 14% 20%, rgba(255, 23, 49, 0.24), transparent 42%),
    rgba(255,255,255,0.075);
  box-shadow: 0 14px 28px rgba(255,23,49,0.12), inset 0 1px 0 rgba(255,255,255,0.1);
  filter: saturate(1.08);
}

.kh-product-roles span:hover::after {
  transform: translateX(135%);
}

.kh-category-helper {
  max-width: 720px;
  margin: 12px 0 18px;
  color: #d9bdc2;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.55;
}

@media (max-width: 720px) {
  .kh-product-roles {
    gap: 7px;
  }

  .kh-product-roles span {
    flex: 1 1 calc(50% - 7px);
    justify-content: center;
    min-width: 132px;
  }

  .kh-category-helper {
    margin-top: 10px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kh-product-roles span,
  .kh-product-roles span::after {
    transition: none !important;
  }

  .kh-product-roles span::after {
    display: none;
  }
}


/* ======================================================================================
   [SITE-TELEGRAM-TRUST-RAIL-01] Telegram CTA trust rail
   --------------------------------------------------------------------------------------
   Additive-only polish layer. Keeps existing Telegram CTA, phone mockup, QR visual,
   footer feedback link, gradients, hover effects and reduced-motion behavior.
   ====================================================================================== */
.kh-telegram__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.kh-telegram__trust span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: #ffe6e9;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.1), transparent 42%),
    rgba(255, 255, 255, 0.055);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 24px rgba(0, 0, 0, 0.16);
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  transition:
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s ease,
    background 0.22s ease;
}

.kh-telegram__trust span:hover {
  border-color: rgba(255, 56, 76, 0.45);
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.14), transparent 42%),
    rgba(255, 23, 49, 0.11);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 14px 30px rgba(255, 23, 49, 0.13);
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .kh-telegram__trust {
    gap: 7px;
  }

  .kh-telegram__trust span {
    min-height: 30px;
    padding: 7px 9px;
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kh-telegram__trust span {
    transition: none !important;
  }

  .kh-telegram__trust span:hover {
    transform: none !important;
  }
}

/* ======================================================================================
   [SITE-FOOTER-COOPERATION-CLARITY-01] Footer cooperation topics
   --------------------------------------------------------------------------------------
   Adds a compact cooperation topic rail inside the existing footer details block.
   The canonical contact path remains the Mini App feedback link.
   ====================================================================================== */
.kh-footer__topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 12px;
}

.kh-footer__topics span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  color: #ffecef;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,0.12), transparent 32%),
    rgba(255,255,255,0.055);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 12px 24px rgba(0,0,0,0.14);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.18;
  white-space: nowrap;
  transition:
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    background 0.22s ease,
    filter 0.22s ease;
}

.kh-footer__topics span:hover {
  border-color: rgba(255, 56, 76, 0.42);
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,0.14), transparent 32%),
    rgba(255,23,49,0.11);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 14px 30px rgba(255,23,49,0.12);
  filter: saturate(1.08);
}

@media (max-width: 620px) {
  .kh-footer__topics {
    gap: 7px;
  }

  .kh-footer__topics span {
    min-height: 32px;
    padding: 7px 9px;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kh-footer__topics span {
    transition: none !important;
  }
}

/* SITE-LIVE-ACTIVITY-48-RESTORE-CURRENT-WORK */
/* Restores current live activity work after canonical 2026-06-17 design restore. */

/* SITE-LIVE-ACTIVITY-26-DEMO-MODE */

/* SITE-LIVE-ACTIVITY-26-QA-FIX */
.kh-live__mode-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 16px;
  padding: 5px;
  border: 1px solid rgba(255, 209, 90, 0.15);
  border-radius: 16px;
  background: rgba(255, 209, 90, 0.035);
}

.kh-live__mode-tabs button {
  min-height: 34px;
  border: 0;
  border-radius: 12px;
  color: #ddcfd2;
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.03em;
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease, color .2s ease;
}

.kh-live__mode-tabs button:hover,
.kh-live__mode-tabs button.is-active {
  color: #160507;
  background: linear-gradient(135deg, #ffd15a 0%, #ff9e2d 100%);
  box-shadow: 0 0 24px rgba(255, 209, 90, 0.28), inset 0 1px 0 rgba(255,255,255,0.36);
  transform: translateY(-1px);
}

.kh-live[data-kh-live-mode="demo"] .kh-live__status {
  color: var(--gold);
}

.kh-live[data-kh-live-mode="demo"] .kh-live__status i {
  background: var(--gold);
  box-shadow: 0 0 22px var(--gold);
}

.kh-live-row {
  grid-template-columns: 58px minmax(0, 1fr) minmax(96px, 112px);
}

.kh-live-row__side {
  min-width: 96px;
  max-width: 112px;
}

.kh-live-row__time,
.kh-live-row__price {
  max-width: 112px;
  text-align: right;
}

.kh-live-row__price {
  overflow: hidden;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .kh-live-row {
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: start;
  }

  .kh-live-row__side {
    grid-column: 2;
    justify-items: start;
    min-width: 0;
    max-width: 100%;
  }

  .kh-live-row__time,
  .kh-live-row__price {
    max-width: 100%;
    text-align: left;
  }
}

/* SITE-LIVE-ACTIVITY-27-RESPONSIVE-LAYOUT-FIX */
.kh-hero,
.kh-hero__copy,
.kh-brand-stage,
.kh-live {
  min-width: 0;
}

.kh-live {
  width: 100%;
  max-width: 100%;
}

.kh-live__head {
  min-width: 0;
}

.kh-live__head > div {
  min-width: 0;
}

.kh-live h2 {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.kh-live__status {
  flex: 0 0 auto;
  justify-content: flex-end;
  max-width: 132px;
  text-align: right;
  white-space: normal;
}

.kh-live__mode-tabs,
.kh-live__tabs {
  min-width: 0;
  overflow: hidden;
}

.kh-live__mode-tabs button,
.kh-live__tabs button {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kh-live-row,
.kh-live-row__body,
.kh-live-row__side {
  min-width: 0;
}

.kh-live-row {
  grid-template-columns: 52px minmax(0, 1fr) minmax(88px, 106px);
  gap: 10px;
}

.kh-live-row__media {
  width: 52px;
  height: 50px;
}

.kh-live-row__side {
  min-width: 0;
  max-width: 106px;
}

.kh-live-row__time,
.kh-live-row__price {
  max-width: 106px;
}

.kh-live-row__line,
.kh-live-row__meta {
  min-width: 0;
}

.kh-live-row__price {
  font-size: 15px;
  line-height: 1.05;
}

.kh-live-row__wave {
  width: 78px;
}

@media (max-width: 1360px) {
  .kh-hero {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    min-height: auto;
    padding-top: 56px;
  }

  .kh-hero__copy,
  .kh-brand-stage,
  .kh-live {
    justify-self: stretch;
  }

  .kh-brand-stage {
    order: 0;
    grid-column: auto;
    margin-top: 10px;
  }

  .kh-brand-stage__logo {
    width: min(390px, 70vw);
  }

  .kh-live {
    width: min(100%, 760px);
    margin: 16px auto 0;
  }
}

@media (max-width: 860px) {
  .kh-live {
    width: 100%;
    padding: 16px;
    border-radius: 24px;
  }

  .kh-live__head {
    align-items: flex-start;
    gap: 12px;
  }

  .kh-live__status {
    max-width: 112px;
    font-size: 11px;
  }

  .kh-live__mode-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .kh-live-row {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .kh-live-row__media {
    width: 48px;
    height: 48px;
  }

  .kh-live-row__side {
    grid-column: 2;
    justify-items: start;
    grid-template-columns: auto auto auto;
    align-items: center;
    max-width: 100%;
  }

  .kh-live-row__time,
  .kh-live-row__price {
    max-width: 100%;
    text-align: left;
  }

  .kh-live-row__wave {
    width: 96px;
  }
}

@media (max-width: 520px) {
  .kh-live__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .kh-live__status {
    justify-content: flex-start;
    max-width: 100%;
    text-align: left;
  }

  .kh-live__mode-tabs button,
  .kh-live__tabs button {
    font-size: 10px;
  }
}

/* SITE-LIVE-ACTIVITY-28-HERO-BELOW-AND-RENDER-FIX2 */
.kh-hero {
  align-items: start;
}

.kh-hero .kh-live {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(100%, 920px);
  margin: 30px auto 0;
  z-index: 3;
}

.kh-live[data-kh-live-mode="demo"] .kh-live-row__chip {
  background: linear-gradient(135deg, rgba(255, 209, 90, 0.95), rgba(255, 23, 49, 0.72));
  color: #1c0508;
}

.kh-live__mode-tabs {
  position: relative;
  z-index: 2;
}

.kh-live__list[data-kh-static-demo="28"] .kh-live-row {
  cursor: pointer;
}

@media (min-width: 1361px) {
  .kh-hero .kh-live {
    width: min(100%, 980px);
  }
}

@media (max-width: 980px) {
  /* SITE-LIVE-ACTIVITY-28-FIX2 */
.kh-hero .kh-live {
    width: 100%;
    margin-top: 22px;
  }
}

/* SITE-LIVE-ACTIVITY-29-SIDEBAR-COMPACT-RESTORE */
@media (min-width: 1181px) {
  .kh-hero {
    grid-template-columns: minmax(0, 0.83fr) minmax(340px, 0.72fr) minmax(390px, 0.85fr);
    gap: 28px;
    align-items: center;
    min-height: 720px;
    padding: 72px 0 42px;
  }

  .kh-hero__copy,
  .kh-brand-stage,
  .kh-hero .kh-live {
    grid-column: auto;
  }

  .kh-brand-stage {
    order: 0;
    justify-self: center;
    margin-top: 0;
  }

  .kh-brand-stage__logo {
    width: min(100%, 450px);
  }

  .kh-hero .kh-live {
    align-self: center;
    justify-self: stretch;
    width: 100%;
    max-width: 420px;
    margin: 0;
    padding: 16px;
    border-radius: 24px;
  }

  .kh-live__head {
    gap: 10px;
  }

  .kh-live__eyebrow {
    font-size: 10px;
  }

  .kh-live h2 {
    margin-top: 4px;
    font-size: 20px;
    line-height: 1.08;
  }

  .kh-live__status {
    max-width: 96px;
    font-size: 10px;
    white-space: nowrap;
  }

  .kh-live__mode-tabs {
    margin-top: 12px;
    gap: 4px;
    padding: 4px;
    border-radius: 14px;
  }

  .kh-live__mode-tabs button {
    min-height: 28px;
    border-radius: 10px;
    font-size: 9px;
    letter-spacing: 0;
  }

  .kh-live__tabs {
    margin-top: 10px;
    gap: 4px;
    padding: 4px;
    border-radius: 14px;
  }

  .kh-live__tabs button {
    min-height: 30px;
    border-radius: 10px;
    font-size: 10px;
  }

  .kh-live__signal {
    margin-top: 10px;
    gap: 4px;
  }

  .kh-live__signal span {
    min-height: 28px;
    padding: 6px 7px;
    border-radius: 10px;
    font-size: 9px;
    white-space: nowrap;
  }

  .kh-live__list {
    gap: 8px;
    margin-top: 10px;
  }

  .kh-live-row {
    grid-template-columns: 42px minmax(0, 1fr) minmax(70px, 82px);
    gap: 8px;
    min-height: 60px;
    padding: 8px;
    border-radius: 14px;
  }

  .kh-live-row__media {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    font-size: 18px;
  }

  .kh-live-row__body {
    gap: 4px;
  }

  .kh-live-row__chip {
    max-width: 100%;
    padding: 3px 5px;
    font-size: 8px;
    line-height: 1.1;
  }

  .kh-live-row__line {
    font-size: 11px;
    line-height: 1.15;
  }

  .kh-live-row__meta {
    font-size: 9px;
    line-height: 1.25;
  }

  .kh-live-row__side {
    min-width: 0;
    max-width: 82px;
    gap: 4px;
  }

  .kh-live-row__time,
  .kh-live-row__price {
    max-width: 82px;
    text-align: right;
  }

  .kh-live-row__time {
    font-size: 8px;
    line-height: 1.05;
  }

  .kh-live-row__price {
    font-size: 12px;
    line-height: 1.05;
  }

  .kh-live-row__wave {
    width: 54px;
    height: 2px;
  }

  .kh-live__more {
    min-height: 36px;
    margin-top: 10px;
    border-radius: 13px;
    font-size: 11px;
  }
}

@media (min-width: 1181px) and (max-width: 1360px) {
  .kh-hero {
    grid-template-columns: minmax(0, 0.88fr) minmax(300px, 0.62fr) minmax(350px, 0.78fr);
    gap: 18px;
  }

  .kh-brand-stage__logo {
    width: min(100%, 360px);
  }

  .kh-hero .kh-live {
    max-width: 390px;
    padding: 14px;
  }

  .kh-live h2 {
    font-size: 19px;
  }

  .kh-live-row {
    grid-template-columns: 40px minmax(0, 1fr) minmax(66px, 76px);
    min-height: 58px;
    padding: 7px;
  }

  .kh-live-row__media {
    width: 40px;
    height: 40px;
  }

  .kh-live-row__side,
  .kh-live-row__time,
  .kh-live-row__price {
    max-width: 76px;
  }

  .kh-live-row__price {
    font-size: 11px;
  }
}

/* SITE-LIVE-ACTIVITY-30-SIDEBAR-READABILITY */
@media (min-width: 1181px) {
  .kh-hero {
    grid-template-columns: minmax(0, 0.8fr) minmax(320px, 0.64fr) minmax(460px, 0.9fr);
    gap: 30px;
  }

  .kh-hero .kh-live {
    max-width: 500px;
    padding: 20px;
    border-radius: 28px;
  }

  .kh-live__head {
    gap: 14px;
  }

  .kh-live__eyebrow {
    font-size: 12px;
  }

  .kh-live h2 {
    margin-top: 6px;
    font-size: 24px;
    line-height: 1.1;
  }

  .kh-live__status {
    max-width: 118px;
    font-size: 12px;
  }

  .kh-live__mode-tabs {
    margin-top: 16px;
    gap: 6px;
    padding: 5px;
    border-radius: 16px;
  }

  .kh-live__mode-tabs button {
    min-height: 34px;
    border-radius: 12px;
    font-size: 11px;
    letter-spacing: 0.02em;
  }

  .kh-live__tabs {
    margin-top: 14px;
    gap: 6px;
    padding: 5px;
    border-radius: 16px;
  }

  .kh-live__tabs button {
    min-height: 36px;
    border-radius: 12px;
    font-size: 12px;
  }

  .kh-live__signal {
    margin-top: 13px;
    gap: 6px;
  }

  .kh-live__signal span {
    min-height: 32px;
    padding: 7px 9px;
    border-radius: 12px;
    font-size: 10px;
  }

  .kh-live__list {
    gap: 10px;
    margin-top: 14px;
  }

  .kh-live-row {
    grid-template-columns: 52px minmax(0, 1fr) minmax(88px, 104px);
    gap: 10px;
    min-height: 72px;
    padding: 10px;
    border-radius: 17px;
  }

  .kh-live-row__media {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    font-size: 22px;
  }

  .kh-live-row__body {
    gap: 5px;
  }

  .kh-live-row__chip {
    max-width: 100%;
    padding: 4px 7px;
    font-size: 9px;
    line-height: 1.12;
  }

  .kh-live-row__line {
    font-size: 13px;
    line-height: 1.18;
  }

  .kh-live-row__meta {
    font-size: 10px;
    line-height: 1.3;
  }

  .kh-live-row__side {
    min-width: 0;
    max-width: 104px;
    gap: 5px;
  }

  .kh-live-row__time,
  .kh-live-row__price {
    max-width: 104px;
    text-align: right;
  }

  .kh-live-row__time {
    font-size: 9px;
    line-height: 1.08;
  }

  .kh-live-row__price {
    font-size: 15px;
    line-height: 1.05;
  }

  .kh-live-row__wave {
    width: 72px;
    height: 3px;
  }

  .kh-live__more {
    min-height: 42px;
    margin-top: 12px;
    border-radius: 15px;
    font-size: 13px;
  }
}

@media (min-width: 1181px) and (max-width: 1360px) {
  .kh-hero {
    grid-template-columns: minmax(0, 0.78fr) minmax(290px, 0.56fr) minmax(420px, 0.82fr);
    gap: 20px;
  }

  .kh-brand-stage__logo {
    width: min(100%, 350px);
  }

  .kh-hero .kh-live {
    max-width: 440px;
    padding: 18px;
  }

  .kh-live h2 {
    font-size: 22px;
  }

  .kh-live__mode-tabs button {
    min-height: 32px;
    font-size: 10px;
  }

  .kh-live__tabs button {
    min-height: 34px;
    font-size: 11px;
  }

  .kh-live-row {
    grid-template-columns: 48px minmax(0, 1fr) minmax(82px, 96px);
    min-height: 68px;
    padding: 9px;
  }

  .kh-live-row__media {
    width: 48px;
    height: 48px;
    font-size: 21px;
  }

  .kh-live-row__line {
    font-size: 12px;
  }

  .kh-live-row__meta {
    font-size: 9px;
  }

  .kh-live-row__side,
  .kh-live-row__time,
  .kh-live-row__price {
    max-width: 96px;
  }

  .kh-live-row__price {
    font-size: 14px;
  }
}

/* SITE-LIVE-ACTIVITY-31-FONT-MODE-CLICK-FIX */
@media (min-width: 1181px) {
  .kh-live__eyebrow {
    font-size: 13.8px;
  }

  .kh-live h2 {
    font-size: 27.6px;
  }

  .kh-live__status {
    font-size: 13.8px;
  }

  .kh-live__mode-tabs button {
    font-size: 12.65px;
  }

  .kh-live__tabs button {
    font-size: 13.8px;
  }

  .kh-live__signal span {
    font-size: 11.5px;
  }

  .kh-live-row__chip {
    font-size: 10.35px;
  }

  .kh-live-row__line {
    font-size: 14.95px;
  }

  .kh-live-row__meta {
    font-size: 11.5px;
  }

  .kh-live-row__time {
    font-size: 10.35px;
  }

  .kh-live-row__price {
    font-size: 17.25px;
  }

  .kh-live__more {
    font-size: 14.95px;
  }
}

/* SITE-LIVE-ACTIVITY-32-HERO-GRID-CENTER */
@media (min-width: 1181px) {
  .kh-hero {
    width: 100%;
    max-width: 1480px;
    margin-right: auto;
    margin-left: auto;
    grid-template-columns: minmax(0, 1.18fr) minmax(300px, 0.78fr) minmax(500px, 1fr);
    gap: clamp(24px, 2.2vw, 34px);
    justify-content: center;
  }

  .kh-hero__copy {
    justify-self: stretch;
  }

  .kh-brand-stage {
    justify-self: center;
  }

  .kh-hero .kh-live {
    justify-self: stretch;
    width: 100%;
    max-width: 500px;
  }
}

@media (min-width: 1181px) and (max-width: 1360px) {
  .kh-hero {
    max-width: 1180px;
    grid-template-columns: minmax(0, 1.06fr) minmax(280px, 0.72fr) minmax(440px, 0.92fr);
    gap: 20px;
  }

  .kh-hero .kh-live {
    max-width: 440px;
  }
}

/* SITE-LIVE-ACTIVITY-33-HERO-SPAN-ALIGN */
@media (min-width: 1181px) {
  .kh-hero {
    width: 100%;
    max-width: 1480px;
    margin-right: auto;
    margin-left: auto;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 320px) 420px;
    column-gap: clamp(56px, 5vw, 96px);
    row-gap: 24px;
    align-items: start;
    justify-content: stretch;
  }

  .kh-hero__copy {
    justify-self: stretch;
    min-width: 0;
  }

  .kh-brand-stage {
    justify-self: center;
    align-self: start;
    width: 100%;
    max-width: 320px;
  }

  .kh-hero .kh-live {
    justify-self: end;
    align-self: start;
    width: 100%;
    max-width: 420px;
  }
}

@media (min-width: 1181px) and (max-width: 1360px) {
  .kh-hero {
    max-width: 1320px;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px) 400px;
    column-gap: 40px;
    row-gap: 20px;
  }

  .kh-brand-stage {
    max-width: 280px;
  }

  .kh-hero .kh-live {
    max-width: 400px;
  }
}

/* SITE-LIVE-ACTIVITY-34-TRACK-ALIGN-MODE-DELEGATE */
@media (min-width: 1181px) {
  .kh-hero {
    width: 100%;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 24px;
    align-items: center;
    justify-content: stretch;
  }

  .kh-hero__copy {
    grid-column: 1 / span 2;
    justify-self: stretch;
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .kh-brand-stage {
    grid-column: 3 / span 1;
    justify-self: center;
    align-self: center;
    width: 100%;
    max-width: 100%;
  }

  .kh-brand-stage__logo {
    width: min(100%, 320px);
  }

  .kh-hero .kh-live {
    grid-column: 4 / span 2;
    justify-self: end;
    align-self: center;
    width: min(100%, 500px);
    max-width: 500px;
  }
}

@media (min-width: 1181px) and (max-width: 1360px) {
  .kh-hero {
    max-width: none;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 12px;
  }

  .kh-brand-stage__logo {
    width: min(100%, 280px);
  }

  .kh-hero .kh-live {
    width: min(100%, 440px);
    max-width: 440px;
  }
}

/* SITE-LIVE-ACTIVITY-35-ROW-NO-OVERLAP */
@media (min-width: 1181px) {
  .kh-live-row {
    align-items: center;
  }

  .kh-live-row__body {
    display: grid;
    grid-template-rows: auto auto auto;
    align-content: center;
    min-width: 0;
    max-width: 100%;
    row-gap: 4px;
    overflow: hidden;
  }

  .kh-live-row__chip {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .kh-live-row__line,
  .kh-live-row__meta {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .kh-live-row__line {
    line-height: 1.16;
  }

  .kh-live-row__meta {
    margin-top: 0;
    line-height: 1.24;
  }

  .kh-live-row__side {
    align-self: center;
    justify-self: end;
    min-width: 0;
    overflow: hidden;
  }

  .kh-live-row__time,
  .kh-live-row__price {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (min-width: 1181px) and (max-width: 1360px) {
  .kh-live-row__body {
    row-gap: 3px;
  }

  .kh-live-row__line {
    line-height: 1.12;
  }

  .kh-live-row__meta {
    line-height: 1.18;
  }
}

/* SITE-LIVE-ACTIVITY-46-DEMO-SEQUENCE */
.kh-live-row.is-demo-sequence-hot {
  border-color: rgba(255, 56, 76, 0.74);
  background:
    radial-gradient(circle at 88% 45%, rgba(255,23,49,0.26), transparent 48%),
    linear-gradient(90deg, rgba(255,23,49,0.13), rgba(255,255,255,0.07));
  box-shadow:
    0 24px 56px rgba(255,23,49,0.18),
    0 0 34px rgba(255,23,49,0.16);
}

.kh-live-row.is-demo-sequence-hot::before {
  transform: translateX(130%);
}

.kh-live-row.is-demo-sequence-hot .kh-live-row__media {
  transform: translateY(-2px) scale(1.1);
  filter: drop-shadow(0 14px 22px rgba(255, 23, 49, 0.3));
}

.kh-live-row.is-demo-sequence-hot .kh-live-row__body {
  transform: translateX(5px);
}

.kh-live-row.is-demo-sequence-hot .kh-live-row__chip {
  color: #ffd15a;
  text-shadow: 0 0 18px rgba(255, 209, 90, 0.36);
}

.kh-live-row.is-demo-sequence-hot .kh-live-row__price {
  text-shadow: 0 0 18px rgba(255, 209, 90, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .kh-hero .hero-line,
  .kh-hero:hover .line-one,
  .kh-hero:hover .line-two,
  .kh-hero:hover .line-three,
  .kh-hero:hover .line-four {
    transform: none !important;
    transition: none;
  }

  .kh-hero .hero-accent {
    animation: none;
  }
}