/* AsaChat landing enhancements v3.5.2 */
.logo-mark {
  overflow: hidden;
  background: transparent !important;
  box-shadow: 0 10px 25px rgba(229, 182, 76, 0.14) !important;
  border: 1px solid rgba(229, 182, 76, 0.22);
}
.logo-mark::before,
.logo-mark::after,
.logo-mark > span {
  display: none !important;
}
.logo-mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: 14px;
  background: transparent !important;
}
.hero-metrics > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 100px;
}
.hero-metrics strong,
.hero-metrics span {
  display: block;
  width: 100%;
  text-align: center;
}
.hero-metrics strong { direction: rtl; }
.trust-items { flex-wrap: wrap; justify-content: center; }
.comparison-table { max-width: 990px; }
.comparison-table > div { min-height: 78px; }
.comparison-table > div > span:first-child { line-height: 1.9; }
.comparison-table .limited { font-size: 12px; }
.comparison-table .no { font-size: 18px; }

.chat-launcher-shell {
  position: fixed;
  z-index: 1200;
  right: 18px;
  bottom: 18px;
}
.chat-launcher {
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible;
}
.chat-launcher::before,
.chat-launcher::after {
  display: none !important;
}
.chat-launcher-logo {
  display: block !important;
  width: 84px;
  height: 84px;
  object-fit: contain;
  background: transparent !important;
  filter: drop-shadow(0 18px 32px rgba(0,0,0,.35));
}
.chat-launcher-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  border-radius: 999px;
  background: #ef3b3b;
  color: white;
  border: 2px solid #121318;
  font-size: 10px;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(0,0,0,.32);
}
.chat-launcher .chat-close-icon {
  width: 24px;
  height: 24px;
  background: rgba(17,18,24,.92);
  border: 1px solid rgba(229,182,76,.22);
  border-radius: 12px;
  padding: 6px;
  box-sizing: content-box;
}
.chat-launcher:not(.active) .chat-close-icon {
  display: none !important;
}
.chat-launcher.active {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: scale(.8) !important;
}
.chat-launcher.active .chat-close-icon,
.chat-launcher.active .chat-launcher-logo,
.chat-launcher.active .chat-pulse {
  display: none !important;
}
.chat-demo {
  right: 18px;
  bottom: 112px;
  width: min(430px, calc(100vw - 26px));
  border-radius: 28px;
}
.chat-demo > header {
  min-height: 90px;
  padding: 16px 18px;
}
.chat-agent { gap: 12px; }
.chat-avatar {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  overflow: hidden;
  background: transparent !important;
}
.chat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent !important;
}
.chat-agent b {
  display: block;
  font-size: 18px;
  line-height: 1.35;
}
.chat-agent small {
  gap: 7px;
  margin-top: 5px;
  font-size: 12px;
}
.chat-demo > header > button {
  width: 40px;
  height: 40px;
  border-radius: 14px;
}
.chat-body {
  height: 420px;
  gap: 14px;
  padding: 20px 16px;
}
.chat-message {
  max-width: 88%;
  padding: 14px 16px 10px;
  border-radius: 18px 18px 8px;
}
.chat-message.user {
  border-radius: 18px 18px 18px 8px;
}
.chat-message p,
.chat-message li {
  font-size: 14px;
  line-height: 2.05;
}
.chat-message ul {
  margin: 10px 0 0;
  padding: 0 20px 0 0;
}
.chat-message time {
  margin-top: 6px;
  font-size: 10px;
}
.typing {
  width: 74px;
  height: 40px;
}
.quick-replies-wrap {
  position: relative;
}
.quick-replies {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}
.quick-replies.dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}
.quick-replies::-webkit-scrollbar { display: none; }
.quick-replies::after,
.quick-replies::before {
  content: '';
  position: sticky;
  top: 0;
  width: 18px;
  flex: 0 0 18px;
  pointer-events: none;
  z-index: 1;
}
.quick-replies::before {
  right: 0;
  margin-right: -14px;
  background: linear-gradient(270deg, rgba(18,19,24,0.98), rgba(18,19,24,0));
}
.quick-replies::after {
  left: 0;
  margin-left: -14px;
  background: linear-gradient(90deg, rgba(18,19,24,0.98), rgba(18,19,24,0));
}
.quick-replies button {
  flex: 0 0 auto;
  min-width: max-content;
  scroll-snap-align: start;
  padding: 9px 13px;
  font-size: 11px;
  line-height: 1.4;
}
.quick-scroll-hint {
  display: block;
  padding: 0 14px 8px;
  font-size: 10px;
  color: #8e8a7d;
  text-align: right;
}
.chat-form {
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  padding: 12px 14px 10px;
}
.chat-form input {
  height: 52px;
  padding: 0 14px;
  font-size: 14px;
  line-height: 1.7;
  order: 2;
}
.chat-form button {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  order: 1;
}
.chat-demo > footer {
  padding: 10px 14px 12px;
  font-size: 10px;
  line-height: 1.8;
}
.chat-message.feature-note {
  border-color: rgba(229, 182, 76, 0.25);
  background: rgba(229, 182, 76, 0.08);
}
@media (max-width: 820px) {
  .chat-demo { width: min(406px, calc(100vw - 16px)); right: 8px; bottom: 100px; }
  .chat-body { height: 380px; }
}
@media (max-width: 480px) {
  .chat-launcher-shell { right: 10px; bottom: 10px; }
  .chat-launcher { width: 76px; height: 76px; }
  .chat-launcher-logo { width: 76px; height: 76px; }
  .chat-demo { right: 6px; bottom: 90px; width: min(392px, calc(100vw - 12px)); }
  .chat-body { height: 360px; padding: 18px 14px; }
  .chat-message p,
  .chat-message li { font-size: 13px; }
}

/* v3.5.0 polish + interactive demo */
.quick-replies-wrap { overflow: hidden; border-top: 1px solid rgba(229,182,76,.08); }
.quick-replies::before,
.quick-replies::after { display: none !important; }
.quick-replies { padding-inline: 12px; margin-inline: 0; }
.chat-demo { overflow: hidden; }
.chat-form {
  grid-template-columns: minmax(0,1fr) 52px !important;
  direction: rtl;
}
.chat-form input { order: 1 !important; }
.chat-form button { order: 2 !important; justify-self: end; }
.demo-copy .demo-number,
.workflow-card .step,
.stats-card .value,
.metric-pill b,
.demo-copy [data-demo-number] { font-feature-settings: "ss01" 1; }

/* interactive live demo stage */
.demo-browser { min-height: 640px; }
.demo-image-wrap, .demo-image-note { display: none !important; }
.demo-browser .browser-bar { margin-bottom: 0; }
.demo-live-stage {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  min-height: 560px;
  background:
    radial-gradient(circle at top right, rgba(229,182,76,.12), transparent 34%),
    linear-gradient(180deg, rgba(17,18,24,.92), rgba(11,12,18,.98));
}
.demo-sidebar {
  border-left: 1px solid rgba(255,255,255,.05);
  padding: 18px 14px;
  background: rgba(10,11,17,.55);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.demo-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(229,182,76,.10);
  color: #e5b64c;
  border: 1px solid rgba(229,182,76,.18);
  font-size: 11px;
}
.demo-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.demo-menu button {
  appearance: none;
  width: 100%;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  color: #f6f1e6;
  border-radius: 16px;
  padding: 12px 14px;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font: inherit;
  cursor: pointer;
  transition: .25s ease;
}
.demo-menu button small { display: block; color: #8d93a4; font-size: 11px; margin-top: 3px; }
.demo-menu button b { display: block; font-size: 13px; }
.demo-menu button span:last-child { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 12px; background: rgba(229,182,76,.08); color: #e5b64c; }
.demo-menu button.active,
.demo-menu button:hover {
  border-color: rgba(229,182,76,.28);
  background: linear-gradient(180deg, rgba(229,182,76,.12), rgba(255,255,255,.02));
  transform: translateX(-2px);
}
.demo-side-note {
  margin-top: auto;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
}
.demo-side-note p { margin: 0; font-size: 12px; line-height: 1.9; color: #b8bcc8; }
.demo-main {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.demo-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
}
.demo-topbar h4 { margin: 0; font-size: 16px; }
.demo-topbar p { margin: 4px 0 0; color: #9aa0af; font-size: 12px; }
.demo-top-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.metric-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: 14px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.05);
}
.metric-pill i { width: 8px; height: 8px; border-radius: 999px; background: #42d392; box-shadow: 0 0 0 5px rgba(66,211,146,.12); }
.metric-pill b { font-size: 13px; }
.metric-pill span { color: #a0a7b8; font-size: 11px; }
.demo-stage-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: 14px;
  min-height: 440px;
}
.demo-panel {
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.demo-card { padding: 16px; }
.demo-panel h5 { margin: 0 0 10px; font-size: 15px; }
.demo-sub { color: #98a0b1; font-size: 12px; line-height: 1.8; }
.stats-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.stats-card {
  padding: 14px; border-radius: 18px; background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
}
.stats-card .label { color: #9aa0af; font-size: 11px; display:block; margin-bottom: 8px; }
.stats-card .value { font-size: 24px; font-weight: 800; color: #f7f0e4; }
.stats-card .trend { color:#42d392; font-size:11px; margin-top: 6px; display:block; }
.conversation-list { display: flex; flex-direction: column; gap: 10px; }
.conversation-item {
  padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(255,255,255,.05);
  background: rgba(255,255,255,.02); cursor:pointer; transition:.2s ease;
}
.conversation-item.active,.conversation-item:hover { border-color: rgba(229,182,76,.22); background: rgba(229,182,76,.06); }
.conversation-item b { display:block; margin-bottom: 4px; }
.conversation-item small { color:#97a0b2; line-height:1.8; }
.conversation-item .meta { display:flex; justify-content:space-between; gap:8px; margin-top:8px; color:#e5b64c; font-size:11px; }
.chat-preview { display:flex; flex-direction:column; gap:12px; }
.msg-bubble {
  max-width: 90%; padding: 12px 14px; border-radius: 18px; line-height: 1.95; font-size: 13px;
}
.msg-bubble.user { align-self:flex-end; background:#e5b64c; color:#16181f; border-bottom-left-radius:8px; }
.msg-bubble.bot { align-self:flex-start; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.05); border-bottom-right-radius:8px; }
.msg-bubble.operator { align-self:flex-start; background: rgba(66,211,146,.08); border:1px solid rgba(66,211,146,.18); border-bottom-right-radius:8px; }
.live-log { display:flex; flex-direction:column; gap:8px; max-height: 280px; overflow:auto; padding-left:4px; }
.field-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.field { display:flex; flex-direction:column; gap: 7px; }
.field label { font-size: 12px; color: #d6d9e0; }
.field input, .field select, .field textarea {
  width:100%; border:1px solid rgba(255,255,255,.08); background: rgba(8,9,14,.85); color:#f4efe4;
  border-radius: 14px; padding: 11px 12px; font: inherit;
}
.field textarea { min-height: 88px; resize: vertical; }
.switch-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding: 12px 14px; border:1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.02); border-radius:16px; }
.switch-row span { font-size:13px; }
.switch-row small { color:#97a0b2; display:block; margin-top:4px; font-size:11px; }
.switch {
  position: relative; width: 50px; height: 28px; border-radius: 999px; background: rgba(255,255,255,.10); cursor:pointer; border:1px solid rgba(255,255,255,.08);
}
.switch::after {
  content:""; position:absolute; top:3px; right:3px; width:20px; height:20px; border-radius:999px; background:#fff; transition:.2s ease;
}
.switch.on { background: rgba(66,211,146,.22); border-color: rgba(66,211,146,.28); }
.switch.on::after { right: 25px; background: #42d392; }
.sources-list, .event-chips, .color-swatches { display:flex; flex-wrap:wrap; gap:8px; }
.tag-chip {
  padding: 8px 10px; border-radius: 999px; border:1px solid rgba(229,182,76,.18); background: rgba(229,182,76,.07); color:#f1ddb0; font-size: 11px; cursor:pointer;
}
.tag-chip.active { background: rgba(229,182,76,.18); color:#11141b; }
.primary-btn, .ghost-btn {
  appearance:none; border:none; border-radius: 14px; padding: 11px 16px; font:inherit; cursor:pointer; transition:.2s ease;
}
.primary-btn { background:#e5b64c; color:#13161d; font-weight:800; }
.ghost-btn { background: rgba(255,255,255,.04); color:#f6f1e7; border:1px solid rgba(255,255,255,.07); }
.result-box {
  padding: 14px; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.05); min-height: 88px; line-height: 2; font-size: 13px; color:#f0f2f7;
}
.channel-list { display:flex; flex-direction:column; gap:10px; }
.channel-item { display:flex; align-items:center; justify-content:space-between; gap: 10px; padding: 12px 14px; border-radius:16px; background: rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.05); }
.channel-name b { display:block; font-size: 13px; }
.channel-name small { display:block; font-size:11px; color:#98a0b1; margin-top:4px; }
.preview-widget {
  min-height: 270px; border-radius: 20px; background: linear-gradient(180deg, rgba(10,11,17,.9), rgba(18,19,27,.98)); border:1px solid rgba(255,255,255,.06); padding: 16px; position:relative; overflow:hidden;
}
.preview-widget .floating-mini {
  position:absolute; left:16px; bottom:16px; display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius: 999px; background: var(--widget-color, linear-gradient(135deg,#e5b64c,#c99328)); color:#13161d; font-weight:800;
}
.preview-widget .mini-bubble {
  margin-top: 18px; margin-right: auto; width:min(78%, 320px); background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.06); padding: 12px 14px; border-radius: 16px 16px 16px 8px; line-height: 2;
}
.quality-bars { display:flex; flex-direction:column; gap: 12px; }
.quality-bar span { display:flex; justify-content:space-between; font-size:12px; margin-bottom:6px; }
.quality-bar i { display:block; height:10px; border-radius:999px; background: rgba(255,255,255,.06); overflow:hidden; }
.quality-bar i b { display:block; height:100%; border-radius:inherit; background: linear-gradient(90deg,#e5b64c,#42d392); width: var(--value,50%); }
.demo-footer-note { color:#98a0b1; font-size:11px; line-height:1.9; }
@media (max-width: 1080px) {
  .demo-live-stage { grid-template-columns: 1fr; }
  .demo-sidebar { border-left:0; border-bottom:1px solid rgba(255,255,255,.05); }
}
@media (max-width: 860px) {
  .demo-browser { min-height: auto; }
  .demo-main { padding: 14px; }
  .stats-grid, .field-grid { grid-template-columns: 1fr; }
  .demo-stage-grid { grid-template-columns: 1fr !important; }
}


/* v3.5.2 responsive chat + purchase CTA */
.nav-actions {
  flex-wrap: wrap;
  gap: 10px;
}
.header-purchase-btn,
.footer-purchase-btn,
.mobile-purchase-btn {
  white-space: nowrap;
}
.footer-brand-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-brand-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.footer-brand-actions span {
  color: #b6bcc9;
  font-size: 13px;
}
.chat-demo {
  left: auto;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 108px);
}
.chat-demo > header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(17,18,24,.98), rgba(17,18,24,.95));
}
.chat-demo > footer {
  position: sticky;
  bottom: 0;
  background: linear-gradient(180deg, rgba(17,18,24,.92), rgba(17,18,24,.98));
}
.chat-form {
  grid-template-columns: 52px minmax(0,1fr) !important;
  align-items: center;
}
.chat-form button {
  order: 1 !important;
  justify-self: start;
}
.chat-form input {
  order: 2 !important;
}
@media (max-width: 1100px) {
  .nav-actions .header-purchase-btn {
    display: none;
  }
}
@media (max-width: 900px) {
  .chat-demo {
    left: 10px;
    right: 10px;
    width: auto;
    max-width: none;
    bottom: 90px;
    border-radius: 24px;
    transform-origin: bottom center;
  }
}
@media (max-width: 640px) {
  .chat-launcher-shell {
    right: 10px;
    bottom: 10px;
  }
  .chat-demo {
    left: 8px;
    right: 8px;
    bottom: 84px;
    width: auto;
    max-height: calc(100vh - 92px);
    border-radius: 22px;
  }
  .chat-body {
    height: min(52vh, 410px);
  }
  .footer-brand-actions {
    align-items: stretch;
  }
  .footer-brand-actions .btn,
  .mobile-purchase-btn {
    width: 100%;
    justify-content: center;
  }
}

/* v3.5.6 full responsive UX patch */
:root {
  --app-vh: 1vh;
}
html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}
body {
  overflow-x: clip;
}
body.menu-open,
body.chat-open,
body.lightbox-open {
  touch-action: manipulation;
}
img,
picture,
video,
canvas,
svg {
  max-width: 100%;
}
.site-header,
main,
.site-footer,
.section,
.container,
.browser-frame,
.demo-browser,
.demo-content,
.demo-live-stage,
.demo-main,
.demo-stage-grid,
.chat-demo {
  min-width: 0;
}
.container {
  width: min(calc(100% - 24px), var(--container)) !important;
}
.hero-grid,
.feature-split,
.faq-layout,
.customize-card,
.cta-card,
.footer-main,
.footer-bottom,
.demo-content,
.demo-live-stage,
.workflow,
.use-case-grid,
.integration-grid,
.feature-grid,
.hero-metrics,
.hero-benefits,
.hero-actions,
.section-heading.split-heading,
.trust-inner {
  min-width: 0;
}
.demo-tabs {
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.demo-tabs::-webkit-scrollbar {
  display: none;
}
.demo-tab {
  flex: 0 0 auto;
  white-space: nowrap;
}
.demo-content,
.demo-copy,
.demo-browser,
.demo-main,
.demo-stage-grid,
.demo-panel,
.preview-widget,
.conversation-list,
.chat-preview,
.live-log,
.stats-grid,
.field-grid,
.use-case-grid article,
.workflow-card,
.comparison-table,
.comparison-table > div,
.comparison-table > div > span,
.integration-grid > div,
.customize-copy,
.customize-visual,
.footer-brand-block,
.footer-main nav,
.footer-brand-actions,
.hero-copy,
.hero-visual,
.hero-browser,
.browser-frame img {
  min-width: 0;
}
.demo-browser {
  min-height: auto !important;
}
.demo-live-stage {
  min-height: 0 !important;
}
.demo-main {
  min-width: 0;
  padding: 16px;
}
.demo-stage-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
}
.demo-stage-grid {
  gap: 12px;
}
.live-log,
.chat-body,
.demo-sidebar {
  overscroll-behavior: contain;
}
.comparison-table {
  overflow: hidden;
}
.chat-demo {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  left: auto;
  right: 18px;
  bottom: 100px;
  width: min(430px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: min(calc(var(--app-vh) * 100 - 104px), 760px);
  border-radius: 24px;
}
.chat-demo > header,
.chat-demo > footer,
.quick-replies-wrap,
.chat-form {
  flex: 0 0 auto;
}
.chat-demo > header {
  position: sticky;
  top: 0;
  z-index: 3;
}
.chat-body {
  flex: 1 1 auto;
  min-height: 0;
  height: auto !important;
}
.quick-replies-wrap {
  border-top: 1px solid rgba(229,182,76,.08);
}
.quick-replies {
  width: 100%;
}
.chat-form {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) !important;
  align-items: center;
  gap: 10px;
}
.chat-form button {
  order: 1 !important;
  justify-self: start;
}
.chat-form input {
  order: 2 !important;
  min-width: 0;
}
.footer-main {
  gap: 18px;
}
.footer-main nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}
@media (max-width: 1180px) {
  .hero-grid,
  .feature-split,
  .feature-split.reverse,
  .faq-layout,
  .customize-card,
  .cta-card,
  .section-heading.split-heading {
    gap: 22px;
  }
  .nav-actions {
    gap: 8px;
  }
}
@media (max-width: 980px) {
  .container {
    width: min(calc(100% - 20px), var(--container)) !important;
  }
  .hero-grid,
  .feature-split,
  .feature-split.reverse,
  .faq-layout,
  .customize-card,
  .cta-card,
  .footer-main,
  .section-heading.split-heading,
  .demo-content {
    grid-template-columns: 1fr !important;
  }
  .hero-copy,
  .hero-visual,
  .split-copy,
  .split-visual,
  .customize-copy,
  .customize-visual,
  .faq-intro,
  .faq-list,
  .demo-copy,
  .demo-browser {
    width: 100%;
    max-width: 100%;
  }
  .hero-copy,
  .hero-copy > p,
  .hero-visual,
  .split-copy,
  .split-visual,
  .faq-intro,
  .section-heading.split-heading,
  .section-heading.split-heading p {
    text-align: center !important;
    margin-inline: auto;
  }
  .hero-actions,
  .hero-benefits,
  .footer-brand-actions,
  .trust-inner {
    justify-content: center;
  }
  .hero-metrics,
  .feature-grid,
  .use-case-grid,
  .integration-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .workflow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .workflow-arrow {
    display: none !important;
  }
  .demo-live-stage {
    grid-template-columns: 1fr !important;
  }
  .demo-sidebar {
    border-left: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.06);
    order: 2;
  }
  .demo-main {
    order: 1;
  }
  .chat-demo {
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    bottom: 92px;
    max-height: calc(var(--app-vh) * 100 - 104px);
    transform-origin: bottom center;
  }
}
@media (max-width: 820px) {
  .hero,
  .problem-section,
  .workflow-section,
  .integrations-section,
  .customize-section,
  .comparison-section,
  .use-cases,
  .faq-section,
  .final-cta {
    overflow: hidden;
  }
  .floating-network,
  .float-card,
  .code-chip {
    display: none !important;
  }
  .hero-visual {
    min-height: auto;
  }
  .ai-emblem {
    width: min(58vw, 260px);
    height: auto;
  }
  .hero-browser,
  .hero-browser img,
  .browser-frame,
  .browser-frame img {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
  }
  .hero-metrics,
  .feature-grid,
  .use-case-grid,
  .integration-grid,
  .stats-grid,
  .field-grid {
    grid-template-columns: 1fr !important;
  }
  .comparison-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 18px;
  }
  .comparison-head,
  .comparison-table > div {
    min-width: 640px;
  }
  .workflow {
    grid-template-columns: 1fr !important;
  }
  .cta-card > img {
    width: min(56vw, 220px);
    height: auto;
  }
}
@media (max-width: 680px) {
  body.chat-open {
    overflow: hidden;
  }
  .nav-actions {
    gap: 8px;
  }
  .nav-actions .btn:not(.header-purchase-btn) {
    display: none;
  }
  .menu-toggle {
    display: inline-flex !important;
  }
  .trust-inner,
  .footer-brand-actions,
  .hero-actions,
  .hero-benefits,
  .demo-stage-head {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-actions .btn,
  .footer-brand-actions .btn,
  .mobile-purchase-btn,
  .demo-stage-head > * {
    width: 100%;
    justify-content: center;
  }
  .section-heading.centered,
  .hero-copy,
  .hero-copy > p,
  .cta-copy,
  .cta-copy p,
  .customize-copy,
  .customize-copy p,
  .faq-intro,
  .faq-intro p {
    text-align: right !important;
  }
  .hero-actions,
  .hero-benefits,
  .footer-brand-actions,
  .trust-inner {
    justify-content: flex-start;
  }
  .hero {
    padding-top: 116px;
  }
  .site-header .container {
    width: min(calc(100% - 16px), var(--container)) !important;
  }
  .chat-launcher-shell {
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
  }
  .chat-demo {
    inset: max(8px, env(safe-area-inset-top)) 8px calc(82px + env(safe-area-inset-bottom)) 8px;
    width: auto;
    max-width: none;
    max-height: none;
    height: auto;
    border-radius: 20px;
    transform-origin: bottom center;
  }
  .chat-demo > header {
    min-height: 78px;
    padding: 12px 14px;
  }
  .chat-agent b {
    font-size: 15px;
  }
  .chat-agent small {
    font-size: 11px;
  }
  .chat-avatar {
    width: 48px;
    height: 48px;
  }
  .chat-body {
    padding: 14px 12px;
  }
  .chat-message {
    max-width: 92%;
    padding: 12px 13px 9px;
  }
  .chat-message p,
  .chat-message li {
    font-size: 13px;
    line-height: 1.95;
  }
  .chat-form {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 8px;
    padding: 10px 12px;
  }
  .chat-form button {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }
  .chat-form input {
    height: 48px;
    font-size: 13px;
    padding-inline: 12px;
  }
  .chat-demo > footer {
    padding: 9px 12px calc(10px + env(safe-area-inset-bottom));
  }
  .quick-replies {
    padding: 10px 12px;
    gap: 7px;
  }
  .quick-replies button {
    font-size: 11px;
    padding: 8px 11px;
  }
  .quick-scroll-hint {
    padding: 0 12px 8px;
  }
  .demo-copy .demo-number {
    font-size: 46px;
    line-height: 1;
  }
  .demo-sidebar,
  .demo-main,
  .demo-card,
  .stats-card,
  .channel-item,
  .switch-row,
  .result-box {
    padding: 12px !important;
  }
  .preview-widget {
    min-height: 220px;
  }
  .footer-main nav {
    gap: 10px 12px;
  }
}
@media (max-width: 480px) {
  .container {
    width: min(calc(100% - 14px), var(--container)) !important;
  }
  .site-header .container {
    width: min(calc(100% - 12px), var(--container)) !important;
  }
  .logo-text small {
    display: none;
  }
  .hero {
    padding-top: 108px;
  }
  .hero h1,
  .faq-intro h2,
  .section-heading h2,
  .cta-copy h2,
  .customize-copy h2,
  .split-copy h2 {
    font-size: clamp(26px, 7.3vw, 34px);
    line-height: 1.3;
  }
  .hero-copy > p,
  .section-heading p,
  .split-copy p,
  .customize-copy p,
  .cta-copy p,
  .faq-intro p {
    font-size: 14px;
    line-height: 2;
  }
  .hero-benefits span,
  .trust-items b,
  .motion-group span,
  .demo-copy li,
  .check-list small,
  .check-list b {
    font-size: 12px;
  }
  .hero-metrics > div,
  .workflow-card,
  .feature-card,
  .use-case-grid article,
  .integration-grid > div,
  .comparison-table,
  .customize-card,
  .cta-card,
  .faq-item,
  .browser-frame,
  .demo-panel {
    border-radius: 18px;
  }
  .hero-metrics strong,
  .workflow-card .step,
  .use-case-grid article span,
  .demo-copy .demo-number {
    font-size: 28px;
  }
  .demo-tabs {
    margin-inline: -2px;
  }
  .demo-tab {
    padding: 10px 12px;
    font-size: 12px;
  }
  .comparison-head,
  .comparison-table > div {
    min-width: 580px;
  }
  .chat-demo {
    border-radius: 18px;
  }
  .chat-message {
    max-width: 96%;
  }
}

/* v3.5.6 targeted mobile bugfix pack */
.menu-toggle {
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
.menu-toggle svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  margin: 0 auto !important;
}
.nav-shell,
.nav-actions,
.logo,
.logo-mark {
  align-items: center;
}
.demo-stage-grid > .demo-panel,
.demo-stage-grid > .preview-widget,
.demo-stage-grid > .demo-card {
  min-width: 0;
}
.conversation-item,
.msg-bubble,
.comparison-table > div > span,
.comparison-head > span,
.feature-card p,
.feature-card h3 {
  overflow-wrap: anywhere;
}

@media (max-width: 820px) {
  .hero-visual {
    min-height: auto !important;
  }
  .ai-emblem {
    display: none !important;
  }
}

@media (max-width: 680px) {
  .site-header .container.nav-shell {
    grid-template-columns: 44px minmax(0, 1fr) auto;
  }
  .logo {
    justify-self: end;
  }
  .logo-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .feature-card {
    min-height: auto !important;
    padding: 24px 18px !important;
    text-align: center !important;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .feature-icon {
    margin: 0 auto 16px !important;
  }
  .feature-card a {
    margin-top: auto;
    align-self: center;
    justify-content: center;
  }
  .demo-main {
    padding: 12px !important;
  }
  .demo-topbar {
    flex-direction: column;
    align-items: stretch;
    text-align: right;
  }
  .demo-top-actions {
    justify-content: flex-start;
  }
  .demo-stage-grid {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }
  .demo-stage-grid > * {
    grid-column: 1 / -1 !important;
  }
  .conversation-item .meta {
    flex-wrap: wrap;
  }
  .live-log {
    max-height: none !important;
  }
  .msg-bubble {
    max-width: 100% !important;
  }
  .preview-widget {
    min-height: 0 !important;
  }
  .switch-row {
    align-items: flex-start;
  }
  .comparison-table {
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .comparison-head,
  .comparison-table > div {
    min-width: 700px !important;
  }
  .comparison-table > div {
    padding-inline: 14px !important;
  }
  .comparison-table > div > span:first-child {
    min-width: 220px;
  }
  .chat-launcher-shell {
    right: 8px !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  }
  .chat-launcher {
    width: 52px !important;
    height: 52px !important;
    border-radius: 16px !important;
  }
  .chat-launcher-logo {
    width: 40px !important;
    height: 40px !important;
  }
  .chat-launcher-badge {
    top: -2px !important;
    right: -2px !important;
  }
  .final-cta .container {
    overflow: visible;
  }
  .cta-card {
    min-height: auto !important;
    padding: 26px 18px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .cta-card > img {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    width: min(42vw, 150px) !important;
    height: auto !important;
    margin: 0 auto 12px !important;
    display: block !important;
    transform: none !important;
    opacity: .92 !important;
  }
  .cta-orbit {
    display: none !important;
  }
  .cta-copy {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
  .cta-copy > div {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .menu-toggle,
  .logo-mark {
    width: 42px !important;
    height: 42px !important;
  }
  .menu-toggle svg {
    width: 17px !important;
    height: 17px !important;
  }
  .mobile-menu {
    inset: var(--header) 8px auto !important;
  }
  .section {
    overflow-x: clip;
  }
  .comparison-head,
  .comparison-table > div {
    min-width: 660px !important;
  }
}

/* v3.5.6 responsive scroll stability patch */
@media (max-width: 680px) {
  .demo-browser,
  .demo-live-stage,
  .demo-sidebar,
  .demo-main,
  .demo-stage-grid,
  .demo-panel,
  .preview-widget,
  .result-box,
  .channel-item,
  .switch-row,
  .stats-card,
  .conversation-item {
    transform: none !important;
    animation: none !important;
    transition: none !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  .demo-browser,
  .demo-live-stage,
  .demo-sidebar,
  .demo-main,
  .demo-stage-grid,
  .demo-panel,
  .preview-widget,
  .live-log,
  .comparison-table,
  .demo-tabs {
    overscroll-behavior: auto !important;
    touch-action: pan-y pinch-zoom;
  }

  .demo-live-stage,
  .demo-main,
  .demo-sidebar,
  .demo-stage-grid,
  .demo-panel,
  .preview-widget,
  .channel-list,
  .field-grid,
  .stats-grid,
  .conversation-list,
  .chat-preview,
  .result-box {
    will-change: auto !important;
  }

  .demo-browser {
    overflow: hidden;
    contain: layout paint;
  }

  .demo-main,
  .demo-sidebar {
    overflow: visible !important;
  }

  .live-log {
    max-height: none !important;
    overflow: visible !important;
    padding-left: 0 !important;
  }

  .demo-tabs,
  .comparison-table {
    scroll-behavior: auto !important;
  }

  .demo-tab,
  .tag-chip,
  .switch,
  .primary-btn,
  .ghost-btn,
  .conversation-item {
    -webkit-tap-highlight-color: transparent;
  }
}

@media (max-width: 480px) {
  .demo-browser {
    border-radius: 18px !important;
  }

  .demo-live-stage {
    min-height: 0 !important;
  }

  .demo-main,
  .demo-sidebar,
  .demo-card,
  .stats-card,
  .channel-item,
  .switch-row,
  .result-box,
  .conversation-item {
    border-radius: 16px !important;
  }
}


/* v3.5.6 desktop header + mobile jitter hotfix */
.menu-toggle {
  display: none !important;
}

@media (max-width: 680px) {
  .menu-toggle {
    display: grid !important;
    place-items: center !important;
  }

  .demo-live-stage,
  .demo-sidebar,
  .demo-main,
  .demo-panel,
  .stats-card,
  .conversation-item,
  .metric-pill,
  .switch-row,
  .channel-item,
  .result-box,
  .demo-topbar {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .demo-menu button.active,
  .demo-menu button:hover,
  .conversation-item.active,
  .conversation-item:hover,
  .primary-btn:hover,
  .ghost-btn:hover,
  .tag-chip:hover {
    transform: none !important;
  }

  .demo-browser,
  .demo-live-stage,
  .demo-sidebar,
  .demo-main,
  .demo-stage-grid,
  .demo-panel,
  .stats-card,
  .conversation-item,
  .metric-pill,
  .switch-row,
  .channel-item,
  .result-box,
  .demo-topbar,
  .live-log {
    background-attachment: initial !important;
  }
}


/* v3.6.0 — Android app + Push notification showcase */
.integration-grid .integration-android {
  border-color: rgba(66,211,146,.2);
  background: linear-gradient(145deg, rgba(66,211,146,.08), rgba(255,255,255,.025));
}
.integration-grid .integration-android > span {
  color: #9df0c2;
  border-color: rgba(66,211,146,.22);
  background: rgba(66,211,146,.08);
  font-size: 10px;
  font-weight: 900;
}
.android-push-section { position: relative; overflow: hidden; }
.android-push-section::before {
  content:""; position:absolute; width:520px; height:520px; border-radius:50%;
  left:-180px; top:40px; background:radial-gradient(circle, rgba(66,211,146,.11), transparent 68%); pointer-events:none;
}
.android-push-shell {
  position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr); gap:64px; align-items:center;
  padding:54px; border-radius:34px; border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  box-shadow:0 30px 90px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04);
}
.android-push-copy h2 { margin:10px 0 16px; max-width:720px; }
.android-push-copy > p { color:#aab0bf; line-height:2.1; max-width:720px; }
.android-push-points { display:grid; gap:12px; margin:24px 0; }
.android-push-points > div {
  display:grid; grid-template-columns:42px 1fr; gap:12px; align-items:start; padding:14px 16px;
  border-radius:18px; border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.022);
}
.android-push-points > div > span {
  width:38px; height:38px; border-radius:13px; display:grid; place-items:center; color:#10151a; background:#42d392; font-weight:900; font-size:11px;
}
.android-push-points p { margin:0; }
.android-push-points b { display:block; color:#f5f0e7; font-size:14px; margin-bottom:4px; }
.android-push-points small { color:#9ca4b4; line-height:1.85; font-size:11px; }
.android-push-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.android-security-note {
  margin:18px 0 0 !important; padding:12px 14px; border-radius:15px; border:1px solid rgba(66,211,146,.13);
  background:rgba(66,211,146,.05); color:#a6d8bc !important; font-size:11px; line-height:1.95 !important;
}
.android-phone-stage { position:relative; min-height:570px; display:grid; place-items:center; isolation:isolate; }
.android-orbit { position:absolute; border:1px solid rgba(66,211,146,.15); border-radius:50%; pointer-events:none; }
.android-orbit-a { width:470px; height:470px; animation:androidOrbit 18s linear infinite; }
.android-orbit-b { width:370px; height:370px; border-style:dashed; animation:androidOrbit 12s linear infinite reverse; }
@keyframes androidOrbit { to { transform:rotate(360deg); } }
.android-phone {
  position:relative; z-index:2; width:290px; height:550px; padding:14px; border-radius:42px;
  border:1px solid rgba(255,255,255,.14); background:linear-gradient(160deg,#171a20,#08090d 60%);
  box-shadow:0 35px 70px rgba(0,0,0,.42), inset 0 0 0 4px #050608, inset 0 0 0 5px rgba(255,255,255,.06);
  overflow:hidden; transform:rotate(-2deg); transition:transform .3s ease, box-shadow .3s ease;
}
.android-phone::before {
  content:""; position:absolute; inset:14px; border-radius:30px; z-index:-1;
  background:radial-gradient(circle at 30% 22%, rgba(229,182,76,.18), transparent 27%), radial-gradient(circle at 70% 70%, rgba(66,211,146,.16), transparent 30%), #0b0d12;
}
.android-phone-speaker { position:absolute; z-index:4; top:20px; left:50%; transform:translateX(-50%); width:86px; height:20px; border-radius:0 0 14px 14px; background:#030405; }
.android-statusbar { display:flex; justify-content:space-between; padding:8px 11px 0; font-size:10px; color:#dce0e7; position:relative; z-index:3; }
.android-wallpaper { min-height:270px; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; z-index:2; }
.android-wallpaper img { filter:drop-shadow(0 10px 22px rgba(229,182,76,.24)); }
.android-wallpaper strong { margin-top:10px; font-size:22px; }
.android-wallpaper small { margin-top:3px; color:#7fe5ad; }
.android-notification {
  position:relative; z-index:5; margin:0 4px; padding:13px; border-radius:20px;
  background:rgba(32,35,43,.94); border:1px solid rgba(255,255,255,.10); box-shadow:0 15px 35px rgba(0,0,0,.35);
  transform:translateY(0); transition:.3s ease;
}
.android-notification-head { display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:9px; margin-bottom:10px; }
.android-notification-head img { border-radius:10px; background:rgba(229,182,76,.08); padding:3px; }
.android-notification-head b, .android-notification-head small { display:block; }
.android-notification-head b { font-size:11px; }
.android-notification-head small { color:#8e95a4; font-size:9px; margin-top:2px; }
.android-notification > strong { display:block; font-size:13px; margin-bottom:5px; }
.android-notification > p { margin:0; color:#a8afbd; font-size:10px; line-height:1.7; }
.android-notification.is-live { border-color:rgba(66,211,146,.28); box-shadow:0 15px 38px rgba(0,0,0,.38), 0 0 0 1px rgba(66,211,146,.08); }
.android-lock-hint { position:absolute; bottom:30px; left:0; right:0; text-align:center; color:#666f7f; font-size:9px; z-index:2; }
.android-phone.push-arrived { animation:androidPushRing .52s ease-in-out 2; box-shadow:0 35px 75px rgba(0,0,0,.45), 0 0 55px rgba(66,211,146,.16), inset 0 0 0 4px #050608; }
.android-phone.push-arrived .android-notification { animation:androidNoticeIn .55s cubic-bezier(.2,.85,.25,1); }
@keyframes androidPushRing { 0%,100%{transform:rotate(-2deg) translateX(0)} 25%{transform:rotate(-1deg) translateX(4px)} 75%{transform:rotate(-3deg) translateX(-4px)} }
@keyframes androidNoticeIn { from{opacity:.2; transform:translateY(-34px) scale(.97)} to{opacity:1; transform:translateY(0) scale(1)} }
.android-floating-status {
  position:absolute; z-index:4; display:flex; align-items:center; gap:10px; min-width:180px; padding:11px 13px;
  border-radius:16px; background:rgba(15,17,22,.92); border:1px solid rgba(255,255,255,.07); box-shadow:0 18px 34px rgba(0,0,0,.25); backdrop-filter:blur(12px);
}
.android-floating-status b,.android-floating-status small { display:block; }
.android-floating-status b { font-size:11px; }
.android-floating-status small { color:#8f97a6; font-size:9px; margin-top:3px; }
.android-floating-status i { width:9px; height:9px; border-radius:50%; background:#42d392; box-shadow:0 0 0 5px rgba(66,211,146,.1); }
.android-status-online { right:0; top:100px; }
.android-status-closed { left:0; bottom:90px; }
.android-status-closed > span:first-child { width:27px; height:27px; display:grid; place-items:center; border-radius:10px; background:rgba(229,182,76,.09); color:#e5b64c; }

/* Android Push inside the interactive panel demo */
.channel-item-push { border-color:rgba(66,211,146,.16); background:rgba(66,211,146,.045); }
.channel-name b { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.push-live-dot { padding:2px 6px; border-radius:999px; font-size:8px; letter-spacing:.06em; color:#8cebb7; background:rgba(66,211,146,.08); border:1px solid rgba(66,211,146,.14); }
.demo-push-security { display:grid; grid-template-columns:32px 1fr; gap:10px; align-items:start; margin-top:14px; padding:12px; border-radius:14px; border:1px solid rgba(66,211,146,.12); background:rgba(66,211,146,.04); }
.demo-push-security > span { width:30px; height:30px; display:grid; place-items:center; border-radius:10px; background:rgba(66,211,146,.08); }
.demo-push-security p { margin:0; }
.demo-push-security b { display:block; font-size:11px; color:#dff8e9; }
.demo-push-security small { display:block; font-size:10px; color:#91aa9c; margin-top:3px; line-height:1.7; }
.demo-android-strip { display:grid; grid-template-columns:200px 1fr; gap:20px; align-items:center; overflow:hidden; }
.demo-android-device { width:190px; min-height:210px; border-radius:25px; padding:12px; background:linear-gradient(155deg,#171b22,#080a0e); border:1px solid rgba(255,255,255,.09); box-shadow:inset 0 0 0 3px #050608; }
.demo-android-device-top { display:flex; justify-content:space-between; color:#8e96a6; font-size:8px; margin-bottom:18px; }
.demo-android-brand { display:flex; align-items:center; gap:9px; margin-bottom:14px; }
.demo-android-brand img { border-radius:11px; }
.demo-android-brand b,.demo-android-brand small { display:block; }
.demo-android-brand b { font-size:12px; }
.demo-android-brand small { color:#8cebb7; font-size:9px; margin-top:2px; }
.demo-android-notice { padding:12px; border-radius:15px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.07); }
.demo-android-notice b,.demo-android-notice small { display:block; }
.demo-android-notice b { font-size:10px; }
.demo-android-notice small { margin-top:4px; color:#969eac; font-size:9px; line-height:1.6; }
.demo-android-device.push-arrived { animation:demoPhoneRing .45s ease-in-out 2; }
.demo-android-device.push-arrived .demo-android-notice { border-color:rgba(66,211,146,.25); background:rgba(66,211,146,.07); animation:androidNoticeIn .5s ease; }
@keyframes demoPhoneRing { 0%,100%{transform:translateX(0)} 30%{transform:translateX(4px)} 70%{transform:translateX(-4px)} }
.demo-android-info h5 { margin:10px 0 8px; font-size:16px; }
.demo-android-info p { color:#9da4b3; font-size:11px; line-height:1.9; margin:0 0 12px; }
.demo-android-chips { display:flex; gap:7px; flex-wrap:wrap; }
.demo-android-chips span { padding:6px 9px; border-radius:999px; border:1px solid rgba(229,182,76,.14); background:rgba(229,182,76,.055); color:#d9c184; font-size:9px; }

@media (max-width: 980px) {
  .android-push-shell { grid-template-columns:1fr; gap:28px; padding:30px; }
  .android-phone-stage { min-height:520px; }
  .android-status-online { right:5%; }
  .android-status-closed { left:5%; }
}
@media (max-width: 640px) {
  .android-push-shell { padding:22px 16px; border-radius:26px; }
  .android-push-actions .btn { width:100%; justify-content:center; }
  .android-phone-stage { min-height:500px; overflow:hidden; }
  .android-phone { width:258px; height:500px; }
  .android-orbit-a { width:400px; height:400px; }
  .android-orbit-b { width:320px; height:320px; }
  .android-floating-status { min-width:145px; padding:9px 10px; }
  .android-status-online { right:-10px; top:92px; }
  .android-status-closed { left:-12px; bottom:60px; }
  .android-floating-status b { font-size:9px; }
  .android-floating-status small { font-size:8px; }
  .demo-android-strip { grid-template-columns:1fr; }
  .demo-android-device { width:100%; min-height:180px; }
}