/* ================================================================
   LARIANS Web Studio — Mobile Enhancement Layer
   Target: @media (max-width: 767px)
   Does NOT affect desktop. Pure additive overrides.
   ================================================================ */

/* ── Premium keyframes (used inside @media below) ──────────────── */
@keyframes mobBlobFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-14px) scale(1.04); }
}
@keyframes mobHeroFloat {
  0%, 100% { transform: scale(1.06) translateY(0); }
  50%       { transform: scale(1.06) translateY(-10px); }
}
@keyframes mobFadeSlideUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes mobCardIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ── Utility: hide mobile-only elements on desktop ────────────── */
.mob-swipe-hint,
.mob-sticky-cta,
.mob-sheet-overlay,
.mob-pkg-tabs,
.mob-bot-pkg-tabs,
.mob-included-wrap,
.mob-subnav { display: none; }

@media (max-width: 767px) {

/* ─────────────────────────────────────────────────────────────── */
/* GLOBALS                                                          */
/* ─────────────────────────────────────────────────────────────── */

body {
  overflow-x: hidden;
}

body.mob-cta-visible {
  padding-bottom: 74px !important;
}

/* Force GSAP-animated elements visible on mobile
   (ScrollTrigger doesn't fire reliably without Lenis on mobile) */
.who-grid .who-card,
.examples-grid .example-card,
.packages-grid .package-card,
.hero__sub,
.hero__btns,
.hero__badge,
.hero__trust,
.section-title,
.section-sub,
.section-header {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* Hero title uses GSAP word-split: each word is wrapped in
   .gsap-word (overflow:hidden) + .gsap-word__inner (translateY 108%).
   Force the inner spans back to natural position. */
.hero__title .gsap-word { overflow: visible !important; }
.hero__title .gsap-word__inner { transform: none !important; }

/* Section-title word-split (same GSAP pattern) */
.section-title .gsap-word { overflow: visible !important; }
.section-title .gsap-word__inner { transform: none !important; }

/* mob-fadein-target.mob-is-visible must beat GSAP inline opacity */
.mob-fadein-target.mob-is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.section        { padding: 36px 0 !important; }
.section--tinted{ padding: 36px 0 !important; }
.section-header { margin-bottom: 18px; }
.section-title  { font-size: clamp(20px, 6vw, 28px); line-height: 1.2; }
.section-sub    { font-size: 14px; margin-top: 8px; line-height: 1.6; }

/* Subnav horizontal scroll */
.page-subnav {
  display: block !important;
}

.page-subnav__inner {
  overflow-x: auto !important;
  flex-wrap: nowrap !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch;
  gap: 4px !important;
}
.page-subnav__inner::-webkit-scrollbar { display: none; }
.page-snav-link { flex-shrink: 0 !important; white-space: nowrap !important; font-size: 12px !important; }

/* ── Mobile section subnav ──────────────────────────────────────── */
.mob-subnav {
  display: none !important;
  position: sticky;
  top: 60px;
  z-index: 89;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  gap: 6px;
  padding: 7px 14px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(109, 40, 217, 0.10);
  -webkit-overflow-scrolling: touch;
}
.mob-subnav::-webkit-scrollbar { display: none; }

.mob-subnav__link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  background: transparent;
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  min-height: 32px;
  font-family: 'Manrope', sans-serif;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.mob-subnav__link--active {
  background: rgba(109, 40, 217, 0.09) !important;
  color: #6D28D9 !important;
  border-color: rgba(109, 40, 217, 0.18) !important;
}

/* Adjust scroll-margin-top for sticky header + subnav */
section[id],
#addons {
  scroll-margin-top: 120px !important;
}

/* ─────────────────────────────────────────────────────────────── */
/* 1. HERO — premium feel with ghost visual + blobs               */
/* ─────────────────────────────────────────────────────────────── */

.hero {
  min-height: 0 !important;
  padding-top: 68px !important;
  padding-bottom: 40px !important;
  position: relative;
  overflow: hidden;
}

/* Lavender gradient blobs for ambient depth */
.hero::before {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168,85,247,0.18) 0%, transparent 68%);
  top: -20px;
  right: -60px;
  pointer-events: none;
  z-index: 0;
  animation: mobBlobFloat 9s ease-in-out infinite;
}

.hero::after {
  content: '';
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(109,40,217,0.12) 0%, transparent 68%);
  bottom: 80px;
  left: -50px;
  pointer-events: none;
  z-index: 0;
  animation: mobBlobFloat 11s ease-in-out 1.5s infinite reverse;
}

/* Hero visual on mobile: flows below the text, GSAP controls opacity */
.hero__visual {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 28px !important;
  pointer-events: none !important;
  z-index: 1 !important;
  animation: none !important;
  overflow: visible !important;
  /* No opacity rule here — GSAP animates 0 → 1 */
}

.hero__content {
  position: relative;
  z-index: 2;
  min-width: 0;
  max-width: 100%;
}

.hero__title {
  font-size: clamp(20px, 5.5vw, 24px) !important;
  line-height: 1.18 !important;
  margin-bottom: 12px !important;
}

.hero__sub {
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  margin-bottom: 20px !important;
}

/* Trust chips — horizontal wrapping row */
.hero__trust {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: flex-start !important;
  margin-top: 16px !important;
}

.hero__trust-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: rgba(109, 40, 217, 0.09) !important;
  border: 1px solid rgba(109, 40, 217, 0.17) !important;
  border-radius: 999px !important;
  padding: 5px 12px !important;
  font-size: 11px !important;
  white-space: nowrap !important;
}

/* ─────────────────────────────────────────────────────────────── */
/* 2. WHO — compact 2-col chip grid (not carousel)                 */
/* ─────────────────────────────────────────────────────────────── */

.who-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  overflow-x: visible !important;
  scroll-snap-type: none !important;
  padding: 0 !important;
}

.who-card {
  flex: none !important;
  scroll-snap-align: none !important;
  min-height: 0 !important;
  padding: 14px 12px !important;
  border-radius: 18px !important;
  gap: 6px !important;
  background: rgba(255,255,255,0.78) !important;
  border: 1px solid rgba(109,40,217,0.10) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.9) !important;
}

.who-card__icon {
  width: 34px !important;
  height: 34px !important;
  margin-bottom: 2px !important;
}

.who-card__icon svg { width: 20px !important; height: 20px !important; }

.who-card h3 {
  font-size: 13px !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

.who-card p {
  font-size: 11.5px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}
.who-card__detail { display: none !important; }
.who-card__chips  { display: none !important; }
.who-cta {
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 24px !important;
  padding-top: 20px !important;
  text-align: center !important;
}
.who-cta__text { font-size: 13.5px !important; }
.who-cta__btn  { width: 100% !important; justify-content: center !important; }

/* ─────────────────────────────────────────────────────────────── */
/* 3. FORMAT — pills + single active card (JS rebuilds)            */
/* ─────────────────────────────────────────────────────────────── */

/* Hide the desktop carousel grid — JS inserts tabs + card above */
.format-grid { display: none !important; }

.format-note {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-top: 14px !important;
  padding: 14px 16px !important;
}
.format-note__mark { width: 30px !important; height: 30px !important; flex-basis: 30px !important; }
.format-note p { font-size: 13px !important; line-height: 1.55 !important; }

/* Format pill tabs */
.mob-format-tabs {
  display: flex;
  flex-wrap: wrap;
  overflow-x: visible;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  gap: 8px;
  margin-bottom: 14px;
}
.mob-format-tabs::-webkit-scrollbar { display: none; }

.mob-format-tab-btn {
  flex: 1 1 calc(33.333% - 8px);
  min-width: 94px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  font-family: 'Manrope', sans-serif;
}

.mob-format-tab-btn.is-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(109,40,217,.28), 0 0 0 3px rgba(109,40,217,.1);
  transform: scale(1.02);
}

/* ── Format 2-col grid (replaces tabs + single card) ── */
.mob-format-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 0;
}

.mob-format-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(255,255,255,0.80);
  border: 1px solid rgba(109,40,217,0.10);
  border-radius: 16px;
  padding: 13px 13px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.9);
}

.mob-format-item__num {
  font-size: 10px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.06em;
  opacity: 0.7;
  margin-bottom: 2px;
}

.mob-format-item__title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}

.mob-format-item__desc {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
}

/* Single active format card */
.mob-format-content { margin-bottom: 0; }

.mob-format-card {
  background: var(--bg-card);
  border: 1px solid rgba(109,40,217,0.1);
  border-radius: 20px;
  padding: 20px 18px;
  box-shadow: 0 4px 20px rgba(109,40,217,0.08);
  animation: mobCardIn 0.22s ease;
}

.mob-format-card__num {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.mob-format-card__title {
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.2;
}

.mob-format-card__desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────── */
/* 4. INCLUDED — accordion (JS rebuilds DOM)                       */
/* ─────────────────────────────────────────────────────────────── */

.included-grid { display: none !important; }

/* Injected by mobile.js */
.mob-included-wrap {
  display: block;
  border-top: 1px solid var(--border);
  margin-top: 0;
}

.mob-acc-item {
  border-bottom: 1px solid var(--border);
}

.mob-acc-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 15px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: 12px;
  font-family: inherit;
}

.mob-acc-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.25s ease, background 0.2s;
}

.mob-acc-item.is-open .mob-acc-icon {
  transform: rotate(45deg);
  background: var(--accent);
  color: #fff;
}

.mob-acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.mob-acc-item.is-open .mob-acc-body {
  max-height: 280px;
}

.mob-acc-body__inner {
  padding: 0 0 14px 2px;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* ─────────────────────────────────────────────────────────────── */
/* 5. EXAMPLES — horizontal swipe carousel                         */
/* ─────────────────────────────────────────────────────────────── */

/* Hide decorative chips and nav arrows on mobile */
.examples-chips { display: none !important; }
.examples-carousel-btn { display: none !important; }

/* Swipe hint line above carousel */
.mob-swipe-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 10px 16px;
  padding: 5px 12px;
  background: rgba(109,40,217,0.07);
  border: 1px solid rgba(109,40,217,0.16);
  border-radius: 999px;
  letter-spacing: 0.01em;
}
.mob-swipe-hint__arrow--right {
  animation: mobSwipePulse 1.4s ease-in-out infinite;
}
@keyframes mobSwipePulse {
  0%,100% { transform: translateX(0); }
  50%      { transform: translateX(3px); }
}

/* Carousel wrapper — right fade shows more content exists */
.examples-carousel-wrapper {
  position: relative;
}
.examples-carousel-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 48px;
  background: linear-gradient(to left, rgba(245,242,255,0.85), transparent);
  pointer-events: none;
  z-index: 2;
}

/* Carousel container — pad sides so first card doesn't sit flush */
.examples-carousel {
  padding: 4px 16px 16px !important;
  gap: 14px !important;
  scroll-padding-left: 16px !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Legacy class kept in case old HTML is still cached */
.examples-grid {
  display: flex !important;
  grid-template-columns: unset !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  gap: 14px !important;
  padding: 4px 16px 18px !important;
  scroll-padding-left: 16px !important;
}
.examples-grid::-webkit-scrollbar { display: none; }

/* Cards: ~85 vw wide so next card peeks on the right */
.example-card,
.examples-carousel .example-card {
  flex: 0 0 82vw !important;
  width: 82vw !important;
  max-width: 285px !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
  min-width: 0 !important;
}

.example-card__visual { height: 180px !important; }
.examples__ip-note { font-size: 11px; text-align: center; margin-top: 10px; }

/* Swipe hint — pill style */
.mob-swipe-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.02em;
  margin: 0 0 10px;
  padding: 6px 14px;
  background: rgba(109,40,217,0.07);
  border: 1px solid rgba(109,40,217,0.18);
  border-radius: 999px;
  transition: opacity 0.4s;
}
.mob-swipe-hint__arrow {
  flex-shrink: 0;
  opacity: 0.7;
}
@keyframes mobSwipePulse {
  0%, 100% { transform: translateX(0); opacity: 0.7; }
  50%       { transform: translateX(3px); opacity: 1; }
}
.mob-swipe-hint__arrow--right {
  animation: mobSwipePulse 1.4s ease-in-out infinite;
}

/* ── Clean card shadow (no purple glow) ────────────────────────── */
.who-card,
.example-card {
  box-shadow: 0 1px 6px rgba(0,0,0,0.07) !important;
  border: 1px solid rgba(109,40,217,0.09) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

/* ─────────────────────────────────────────────────────────────── */
/* 6. QUIZ — compact single-column stepper                         */
/* ─────────────────────────────────────────────────────────────── */

.quiz-card {
  display: block !important;
  padding: 20px 16px 24px !important;
  border-radius: 20px !important;
}

.quiz-side {
  display: none !important;
  border-top: 1px solid var(--border);
  padding-top: 20px;
  margin-top: 20px;
}

.quiz-card.quiz-result-shown .quiz-side {
  display: block !important;
}

.quiz-q {
  font-size: 17px !important;
  margin-bottom: 12px !important;
  line-height: 1.35 !important;
}

.quiz-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Chip-style options — short items become pills */
.quiz-opt {
  padding: 9px 16px !important;
  font-size: 13px !important;
  min-height: 40px !important;
  border-radius: 999px !important;
  text-align: center !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* Long options fall back to full-width */
.quiz-opt:not([data-short]) {
  flex: 1 1 calc(50% - 4px) !important;
  white-space: normal !important;
  text-align: left !important;
  border-radius: 12px !important;
}

.quiz-progress { margin-bottom: 16px; }
.quiz-progress__label { font-size: 12px; }

.quiz-nav {
  margin-top: 16px !important;
  gap: 10px !important;
}

.quiz-nav .btn--sm {
  flex: 1;
  min-height: 44px !important;
  font-size: 14px !important;
}

/* ─────────────────────────────────────────────────────────────── */
/* 7. BEFORE / AFTER — vertical compact                            */
/* ─────────────────────────────────────────────────────────────── */

.ba-scene {
  flex-direction: column !important;
  gap: 0 !important;
}

.ba-card {
  min-height: 0 !important;
  padding: 15px 16px !important;
}

.ba-before { border-radius: 16px 16px 0 0 !important; }
.ba-after  { border-radius: 0 0 16px 16px !important; }

.ba-messages { display: none !important; }

.ba-flow {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 16px !important;
  gap: 12px !important;
  background: rgba(109,40,217,.04);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}

.ba-flow__line { display: none !important; }
.ba-flow__label { font-size: 11px !important; text-align: center; white-space: nowrap; }
.ba-flow__badge { font-size: 10px !important; margin: 0 !important; }
.ba-flow__arrow { display: none !important; }

.ba-dashboard { transform: scale(0.88); transform-origin: top left; }
.ba-points li { font-size: 13px; }
.ba-card__text { font-size: 13px; margin-top: 12px; }

.ba-result {
  font-size: 13.5px !important;
  padding: 16px !important;
  margin-top: 16px !important;
  text-align: center;
  border-radius: 12px !important;
}

.ba-cta {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
  margin-top: 20px !important;
}

.ba-cta .btn--lg {
  width: 100% !important;
  min-height: 50px !important;
  font-size: 15px !important;
}

/* ─────────────────────────────────────────────────────────────── */
/* 8. PACKAGES — tab switcher (JS injects .mob-pkg-tabs)           */
/* ─────────────────────────────────────────────────────────────── */

.mob-pkg-tabs {
  display: flex !important;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 2px;
}

.mob-pkg-tabs::-webkit-scrollbar { display: none; }

.mob-pkg-tab-btn {
  flex-shrink: 0;
  padding: 9px 22px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  font-family: 'Manrope', sans-serif;
}

.mob-pkg-tab-btn.is-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 4px 18px rgba(109,40,217,.32), 0 0 0 3px rgba(109,40,217,.12);
  transform: scale(1.03);
}

.packages-grid { display: block !important; }
.packages-grid .package-card { display: none !important; }
.packages-grid .package-card.mob-pkg-active {
  display: block !important;
  animation: mobCardIn 0.22s ease;
}

@keyframes mobCardIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ─────────────────────────────────────────────────────────────── */
/* 9. ADDONS — 2-column compact + bottom sheet                     */
/* ─────────────────────────────────────────────────────────────── */

.services-showcase,
.services-builder {
  display: block !important;
  grid-template-columns: unset !important;
}

.services-grid {
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

.service-card {
  min-height: 0 !important;
  padding: 12px !important;
  gap: 6px !important;
  border-radius: 16px !important;
}

.service-card__top { gap: 4px; }
.service-card__badge { padding: 3px 8px !important; font-size: 10px !important; }
.service-card__module { display: none !important; }
.service-card__info .service-card__title { font-size: 13px !important; line-height: 1.3 !important; }
.service-card__info p { display: none !important; }
.service-card__price { font-size: 12px !important; margin-top: auto; }

.service-card__actions {
  flex-direction: column !important;
  gap: 5px !important;
}

.service-card .btn--add {
  width: 100% !important;
  min-width: 0 !important;
  font-size: 12px !important;
  padding: 7px 8px !important;
  min-height: 34px !important;
}

.service-card__more {
  width: 100% !important;
  text-align: center !important;
  font-size: 11px !important;
  padding: 5px !important;
  border-radius: 8px !important;
}

/* Bottom sheet overlay — deep blur backdrop */
.mob-sheet-overlay {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(10, 4, 22, 0.55);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.mob-sheet-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Service detail card as premium bottom sheet */
.service-detail-card {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  z-index: 1001 !important;
  border-radius: 24px 24px 0 0 !important;
  padding: 32px 20px 48px !important;
  max-height: 82vh !important;
  overflow-y: auto !important;
  transform: translateY(110%) !important;
  transition: transform 0.36s cubic-bezier(0.32, 0.72, 0, 1) !important;
  box-shadow: 0 -8px 48px rgba(109, 40, 217, 0.16), 0 -2px 12px rgba(0,0,0,0.12) !important;
  min-height: 0 !important;
  width: 100% !important;
  /* Glass-morphism surface */
  background: linear-gradient(160deg, rgba(253,252,255,0.99) 0%, rgba(245,243,255,0.99) 100%) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
  border-top: 1px solid rgba(109,40,217,0.12) !important;
  padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)) !important;
  will-change: transform;
}

/* Premium drag handle */
.service-detail-card::before {
  content: '';
  display: block;
  width: 44px;
  height: 5px;
  border-radius: 3px;
  background: rgba(109, 40, 217, 0.25);
  margin: -14px auto 22px;
}

.service-detail-card.mob-sheet-open {
  transform: translateY(0) !important;
}

.service-detail-card__close {
  top: 24px !important;
  right: 16px !important;
}

/* ─────────────────────────────────────────────────────────────── */
/* 10. STICKY MOBILE CTA BAR                                       */
/* ─────────────────────────────────────────────────────────────── */

.mob-sticky-cta {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 890;
  padding: 10px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(252, 251, 255, 0.96);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid transparent;
  /* Gradient border-top effect */
  background-clip: padding-box;
  box-shadow:
    0 -1px 0 0 rgba(109,40,217,0.18),
    0 -8px 32px rgba(109, 40, 217, 0.12),
    0 -2px 8px rgba(0,0,0,0.04);
  align-items: center;
  gap: 12px;
}

.mob-sticky-cta__total {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex-shrink: 0;
}

.mob-sticky-cta__total:empty { display: none; }

.mob-sticky-cta__label {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mob-sticky-cta__price {
  font-size: 15px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}

.mob-sticky-cta__btn {
  flex: 1;
  min-height: 48px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 14px !important;
  letter-spacing: 0.01em !important;
  box-shadow: 0 4px 20px rgba(109,40,217,0.32) !important;
}

/* ─────────────────────────────────────────────────────────────── */
/* 11. SECTION FADE-IN ENTRANCE (applied via JS IntersectionObs)  */
/* ─────────────────────────────────────────────────────────────── */

.mob-fadein-target {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.mob-fadein-target.mob-is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger siblings inside a visible parent */
.mob-fadein-target.mob-is-visible:nth-child(2) { transition-delay: 0.06s; }
.mob-fadein-target.mob-is-visible:nth-child(3) { transition-delay: 0.12s; }
.mob-fadein-target.mob-is-visible:nth-child(4) { transition-delay: 0.18s; }

} /* end @media (max-width: 767px) */


/* ================================================================
   BOTS PAGE — Mobile
   ================================================================ */

@media (max-width: 767px) {

/* Bot intelligence panel */
.bot-intelligence { padding: 60px 0 32px !important; }

.bot-intelligence__panel {
  grid-template-columns: 1fr !important;
  padding: 28px 20px !important;
  border-radius: 20px !important;
  min-height: 0 !important;
  gap: 0 !important;
}

.bot-intelligence__visual { display: none !important; }

.bot-int-title { font-size: clamp(20px, 6vw, 26px) !important; }
.bot-int-sub   { font-size: 13.5px !important; }

.bot-int-features { gap: 8px !important; }

.bot-int-feature {
  padding: 10px 12px !important;
  gap: 10px !important;
}

.bot-int-feature__title { font-size: 14px !important; }
.bot-int-feature__text  { font-size: 12.5px !important; }

/* Bot capabilities — compact 2-col */
.bots-caps-grid {
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

.bots-cap-card {
  padding: 14px 12px !important;
  gap: 6px !important;
}

.bots-cap-card__text { font-size: 12.5px !important; }

/* Bot scenarios */
.bot-scenario-grid { grid-template-columns: 1fr !important; }

.bot-scenario-flow {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.bot-scenario-flow::-webkit-scrollbar { display: none; }

.bot-scenario-info { padding: 16px !important; }

/* Bot packages tab switcher */
.mob-bot-pkg-tabs {
  display: flex !important;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 2px;
}

.mob-bot-pkg-tabs::-webkit-scrollbar { display: none; }

.mob-bot-pkg-tab-btn {
  flex-shrink: 0;
  padding: 9px 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: transparent;
  color: rgba(196,181,253,.7);
  border: 1.5px solid rgba(168,85,247,.25);
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
  font-family: 'Manrope', sans-serif;
}

.mob-bot-pkg-tab-btn.is-active {
  background: rgba(109,40,217,.88);
  color: #fff;
  border-color: rgba(109,40,217,.95);
  box-shadow: 0 4px 18px rgba(109,40,217,.38), 0 0 0 3px rgba(168,85,247,.15);
  transform: scale(1.03);
}

.bot-pkg-grid { display: block !important; }
.bot-pkg-grid .bot-pkg-card { display: none !important; }
.bot-pkg-grid .bot-pkg-card.mob-pkg-active {
  display: flex !important;
  animation: mobCardIn 0.22s ease;
}

/* Bot logic section */
.bot-logic-section .container {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* Bot channels — 3-col compact */
.bots-channels-grid,
.bot-channels-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
}

/* FAQ items (already accordion, just spacing) */
.faq-q {
  padding: 14px 16px !important;
  font-size: 13.5px !important;
}

.faq-a__inner {
  font-size: 13px !important;
  padding: 0 16px !important;
}
.faq-item--open .faq-a__inner { padding-bottom: 14px !important; }

} /* end bots @media */


/* ================================================================
   MOBILE HERO SCENE — glass cubes (index.html only)
   ================================================================ */

/* Hide on desktop */
.mob-hero-scene { display: none; }

@keyframes mobCubeFloat1 {
  0%, 100% { transform: rotate(18deg) translateY(0) scale(1); }
  50%       { transform: rotate(22deg) translateY(-18px) scale(1.05); }
}
@keyframes mobCubeFloat2 {
  0%, 100% { transform: rotate(-12deg) translateY(0); }
  50%       { transform: rotate(-8deg) translateY(-12px); }
}
@keyframes mobCubeFloat3 {
  0%, 100% { transform: rotate(32deg) translateY(0) scale(1); }
  50%       { transform: rotate(28deg) translateY(-9px) scale(0.96); }
}
@keyframes mobLariFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}

@media (max-width: 767px) {

.mob-hero-scene {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.mob-cube {
  position: absolute;
  border-radius: 18px;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.13) 0%,
    rgba(168,85,247,0.07) 100%);
  border: 1px solid rgba(168,85,247,0.22);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow:
    0 8px 32px rgba(109,40,217,0.12),
    inset 0 1px 0 rgba(255,255,255,0.25);
  will-change: transform;
}

.mob-cube--one {
  width: 72px; height: 72px;
  top: 18%; right: 6%;
  animation: mobCubeFloat1 8s ease-in-out infinite;
}
.mob-cube--two {
  width: 46px; height: 46px;
  top: 52%; right: 10%;
  opacity: 0.72;
  animation: mobCubeFloat2 11s ease-in-out 0.9s infinite;
}
.mob-cube--three {
  width: 32px; height: 32px;
  top: 30%; right: 24%;
  opacity: 0.48;
  animation: mobCubeFloat3 9s ease-in-out 1.7s infinite;
}

.mob-grid-glow {
  position: absolute;
  top: -5%; right: -25%;
  width: 72vw; height: 72vw;
  max-width: 320px; max-height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(109,40,217,0.11) 0%,
    transparent 65%);
  filter: blur(22px);
  animation: mobBlobFloat 13s ease-in-out 0.4s infinite;
}

/* prefers-reduced-motion: freeze all cube animations */
@media (prefers-reduced-motion: reduce) {
  .mob-cube, .mob-grid-glow { animation: none !important; }
}

} /* end mob-hero-scene @media */


/* ================================================================
   MOBILE LARI — floating assistant button + compact panel
   ================================================================ */

.mob-lari-btn,
.mob-lari-panel { display: none; }

@media (max-width: 767px) {

.mob-lari-btn {
  display: flex;
  position: fixed;
  right: 16px;
  bottom: 20px;
  width: 52px; height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, #6D28D9, #A855F7);
  border: none;
  cursor: pointer;
  z-index: 888;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: 'Unbounded', sans-serif;
  font-size: 17px;
  font-weight: 900;
  box-shadow:
    0 4px 20px rgba(109,40,217,0.42),
    0 0 0 2px rgba(255,255,255,0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-radius 0.25s ease;
  animation: mobLariFloat 4s ease-in-out infinite;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}

.mob-lari-btn:active {
  transform: scale(0.94);
  box-shadow: 0 2px 12px rgba(109,40,217,0.35);
  animation: none;
}

/* Shift up when sticky CTA is visible */
body.mob-cta-visible .mob-lari-btn {
  bottom: calc(72px + 14px + env(safe-area-inset-bottom, 0px));
}

/* Hide when bottom sheet is open */
body.mob-sheet-active .mob-lari-btn { display: none !important; }

.mob-lari-btn.is-open {
  border-radius: 14px;
  animation: none;
  box-shadow: 0 2px 14px rgba(109,40,217,0.3);
}

/* × indicator when open */
.mob-lari-btn.is-open::after {
  content: '×';
  font-size: 22px;
  font-family: sans-serif;
  font-weight: 300;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.mob-lari-btn.is-open .mob-lari-letter { display: none; }

/* Panel */
.mob-lari-panel {
  position: fixed;
  right: 16px;
  bottom: 84px;
  width: min(290px, calc(100vw - 32px));
  z-index: 889;
  background: rgba(252,251,255,0.98);
  border: 1px solid rgba(109,40,217,0.13);
  border-radius: 20px;
  padding: 16px 14px 14px;
  box-shadow:
    0 -4px 40px rgba(109,40,217,0.14),
    0 8px 32px rgba(0,0,0,0.08);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

body.mob-cta-visible .mob-lari-panel {
  bottom: calc(72px + 14px + 84px + env(safe-area-inset-bottom, 0px));
}

.mob-lari-panel.is-open { display: block; }

.mob-lari-panel__head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 13px;
}

.mob-lari-panel__badge {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, #6D28D9, #A855F7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  font-family: 'Unbounded', sans-serif;
}

.mob-lari-panel__title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
}

.mob-lari-panel__btns {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mob-lari-panel__btn {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 13px;
  border-radius: 11px;
  border: 1.5px solid rgba(109,40,217,0.11);
  background: rgba(109,40,217,0.04);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  font-family: 'Manrope', sans-serif;
  cursor: pointer;
  text-align: left;
  transition: background 0.16s, border-color 0.16s;
  -webkit-tap-highlight-color: transparent;
}

.mob-lari-panel__btn:active {
  background: rgba(109,40,217,0.09);
  border-color: rgba(109,40,217,0.22);
}

.mob-lari-panel__btn-icon {
  font-size: 14px;
  flex-shrink: 0;
  color: var(--accent);
}

} /* end mob-lari @media */


/* ================================================================
   ADDON CATEGORY PILLS — filters for .services-grid
   ================================================================ */

.mob-addon-cats  { display: none; }

@media (max-width: 767px) {

.mob-addon-cats {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 6px;
}
.mob-addon-cats::-webkit-scrollbar { display: none; }

.mob-addon-cat-btn {
  flex: 0 0 auto;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1.5px solid var(--border);
  cursor: pointer;
  white-space: nowrap;
  font-family: 'Manrope', sans-serif;
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
  -webkit-tap-highlight-color: transparent;
}

.mob-addon-cat-btn.is-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(109,40,217,0.28), 0 0 0 2px rgba(109,40,217,0.1);
}

.service-card.mob-cat-hidden {
  display: none !important;
}

/* Ensure service-detail-card is visible (display override) */
.service-detail-card {
  display: block !important;
}

} /* end addon cats @media */


/* ================================================================
   PREMIUM MOBILE PASS — compact product funnel
   Safe overrides below the previous mobile layer.
   ================================================================ */

@keyframes premiumCubeDriftA {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(15deg); opacity: .78; }
  50% { transform: translate3d(-8px, -18px, 0) rotate(21deg); opacity: .96; }
}

@keyframes premiumCubeDriftB {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-14deg); opacity: .62; }
  50% { transform: translate3d(10px, -12px, 0) rotate(-7deg); opacity: .86; }
}

@keyframes premiumLariPulse {
  0%, 100% { box-shadow: 0 16px 34px rgba(109,40,217,.25), 0 0 0 0 rgba(109,40,217,.16); }
  50% { box-shadow: 0 16px 34px rgba(109,40,217,.28), 0 0 0 8px rgba(109,40,217,0); }
}

@media (max-width: 767px) {

  :root {
    --mob-pad-x: 16px;
    --mob-section-y: 56px;
    --mob-card-radius: 20px;
    --mob-card-pad: 16px;
    --mob-purple: #6D28D9;
    --mob-purple-2: #A855F7;
    --mob-ink: #17111F;
    --mob-muted: rgba(23,17,31,.66);
    --mob-glass: rgba(255,255,255,.84);
    --mob-line: rgba(109,40,217,.13);
  }

  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  body {
    background: #FAF8FF;
    color: var(--mob-ink);
  }

  .container {
    width: min(100% - 32px, 1160px) !important;
  }

  .section,
  .section--tinted {
    padding: var(--mob-section-y) 0 !important;
  }

  .section-header {
    margin-bottom: 18px !important;
  }

  .section-title {
    font-size: clamp(26px, 8vw, 34px) !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
  }

  .section-sub {
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    max-width: 34rem;
  }

  .hero {
    isolation: isolate;
    min-height: 0 !important;
    padding-top: 72px !important;
    padding-bottom: 40px !important;
    background:
      radial-gradient(circle at 88% 12%, rgba(168,85,247,.24), transparent 34%),
      radial-gradient(circle at 12% 82%, rgba(109,40,217,.14), transparent 35%),
      linear-gradient(145deg, #fff 0%, #fbf8ff 44%, #f1ebff 100%) !important;
  }

  .hero__video,
  .hero__video-overlay,
  .hero__visual {
    display: none !important;
  }

  /* Hide the desktop perspective grid + blob container on mobile —
     it read as a dirty "page behind the page". Clean lavender +
     the mob-hero-scene glass cubes carry the hero instead. */
  .hero__bg {
    display: none !important;
  }

  .hero::before,
  .hero::after {
    display: none !important;
  }

  .hero__blob {
    display: none !important;
  }

  .mobile-hero-scene,
  .mob-hero-scene {
    display: block !important;
    z-index: 1 !important;
    opacity: 1;
    overflow: hidden !important;
  }

  /* The repeating-grid glass panel read as a "page behind the page".
     Removed — clean glass cubes + soft glow carry the hero. */
  .mobile-hero-scene::before {
    display: none !important;
  }

  .mob-cube {
    border-radius: 18px !important;
    background:
      linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,.18)),
      linear-gradient(145deg, rgba(109,40,217,.13), rgba(168,85,247,.05)) !important;
    border: 1px solid rgba(109,40,217,.18) !important;
    -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
    backdrop-filter: blur(16px) saturate(150%) !important;
    box-shadow:
      0 20px 54px rgba(74,39,138,.15),
      inset 0 1px 0 rgba(255,255,255,.55) !important;
  }

  .mob-cube--one {
    width: 92px !important;
    height: 92px !important;
    top: 17% !important;
    right: 10px !important;
    animation: premiumCubeDriftA 11s ease-in-out infinite !important;
  }

  .mob-cube--two {
    width: 58px !important;
    height: 58px !important;
    top: 56% !important;
    right: 18px !important;
    animation: premiumCubeDriftB 13s ease-in-out .7s infinite !important;
  }

  .mob-cube--three {
    width: 36px !important;
    height: 36px !important;
    top: 34% !important;
    right: 30% !important;
    animation: premiumCubeDriftA 12s ease-in-out 1.6s infinite reverse !important;
  }

  .mob-cube--four {
    width: 68px;
    height: 42px;
    top: 71%;
    left: 10px;
    border-radius: 20px !important;
    animation: premiumCubeDriftB 14s ease-in-out .3s infinite reverse;
  }

  .mob-cube--five {
    width: 42px;
    height: 42px;
    top: 12%;
    left: 12px;
    opacity: .54;
    animation: premiumCubeDriftA 10s ease-in-out 1.1s infinite;
  }

  .mob-grid-glow {
    top: 2% !important;
    right: 0 !important;
    width: 72vw !important;
    height: 72vw !important;
    background:
      radial-gradient(circle, rgba(168,85,247,.18), transparent 58%),
      radial-gradient(circle at 65% 42%, rgba(255,255,255,.72), transparent 36%) !important;
    filter: blur(18px) !important;
  }

  .hero__content {
    z-index: 3 !important;
    max-width: 100%;
  }

  .hero__badge {
    width: fit-content;
    padding: 7px 12px !important;
    background: rgba(255,255,255,.72) !important;
    border: 1px solid rgba(109,40,217,.16) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }

  .hero__title {
    font-size: clamp(20px, 5.5vw, 24px) !important;
    line-height: 1.18 !important;
    max-width: 100%;
  }

  .hero__sub {
    max-width: 31rem;
    font-size: 14.5px !important;
    line-height: 1.55 !important;
  }

  .hero__btns {
    gap: 10px !important;
  }

  .hero__btns .btn {
    min-height: 50px !important;
    border-radius: 16px !important;
    padding-inline: 16px !important;
  }

  .hero__trust {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .hero__trust-item {
    min-height: 38px;
    justify-content: flex-start;
    white-space: normal !important;
    line-height: 1.25 !important;
    background: rgba(255,255,255,.72) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .mob-proof-strip {
    position: relative;
    z-index: 1;
    padding: 18px 0 8px !important;
  }

  .mob-proof-strip__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .mob-proof-strip__inner span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 58px;
    padding: 11px 12px;
    border-radius: 18px;
    background: rgba(255,255,255,.76);
    border: 1px solid rgba(109,40,217,.13);
    box-shadow: 0 14px 34px rgba(61,38,105,.07);
  }

  .mob-proof-strip__inner strong {
    font-size: 12.5px;
    line-height: 1.15;
    color: var(--mob-ink);
  }

  .mob-proof-strip__inner small {
    font-size: 11px;
    line-height: 1.2;
    color: var(--mob-muted);
  }

  .who-grid {
    gap: 10px !important;
  }

  .who-card {
    min-height: 118px !important;
    padding: 14px !important;
    background: rgba(255,255,255,.78) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .who-card p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .mob-format-card,
  .package-card,
  .quiz-card,
  .cart-panel,
  .contact-card,
  .contacts-form-wrap {
    border-radius: var(--mob-card-radius) !important;
    background: rgba(255,255,255,.82) !important;
    border: 1px solid var(--mob-line) !important;
    box-shadow: 0 20px 50px rgba(61,38,105,.08) !important;
  }

  .mob-format-card {
    padding: 18px !important;
  }

  .mob-format-card__cta {
    min-height: 42px;
    margin-top: 14px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: rgba(109,40,217,.1);
    color: var(--mob-purple);
    font-weight: 800;
    font-family: 'Manrope', sans-serif;
  }

  .mob-format-tabs,
  .mob-addon-cats,
  .mob-pkg-tabs,
  .mob-bot-pkg-tabs {
    gap: 8px !important;
    padding: 2px 0 8px !important;
  }

  .mob-format-tab-btn,
  .mob-addon-cat-btn,
  .mob-pkg-tab-btn,
  .mob-bot-pkg-tab-btn {
    min-height: 38px !important;
    padding: 8px 15px !important;
    background: rgba(255,255,255,.72) !important;
    border-color: rgba(109,40,217,.14) !important;
  }

  .mob-format-tab-btn.is-active,
  .mob-addon-cat-btn.is-active,
  .mob-pkg-tab-btn.is-active,
  .mob-bot-pkg-tab-btn.is-active {
    background: var(--mob-purple) !important;
    color: #fff !important;
    border-color: var(--mob-purple) !important;
  }

  .mob-examples-swiper,
  .mob-addon-bundles__swiper {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding-bottom: 30px !important;
  }

  .mob-examples-swiper .examples-grid {
    overflow: visible !important;
    padding: 4px 0 0 !important;
    gap: 0 !important;
  }

  .mob-examples-swiper .example-card {
    flex: none !important;
    max-width: none !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .swiper-pagination {
    bottom: 0 !important;
  }

  .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    background: rgba(109,40,217,.28);
    opacity: 1;
  }

  .swiper-pagination-bullet-active {
    width: 18px;
    border-radius: 999px;
    background: var(--mob-purple);
  }

  .example-card {
    border-radius: 22px !important;
    overflow: hidden;
    contain: paint;
  }

  .example-card--live-beauty { --demo-accent: rgba(244,114,182,.2); --demo-line: rgba(244,114,182,.3); }
  .example-card--live-security { --demo-accent: rgba(96,165,250,.18); --demo-line: rgba(96,165,250,.28); }
  .example-card--live-event,
  .example-card--live-cafe { --demo-accent: rgba(245,158,11,.18); --demo-line: rgba(245,158,11,.28); }
  .example-card--live-auto { --demo-accent: rgba(59,130,246,.16); --demo-line: rgba(59,130,246,.28); }
  .example-card--live-repair { --demo-accent: rgba(180,143,92,.16); --demo-line: rgba(180,143,92,.26); }
  .example-card--live-school { --demo-accent: rgba(14,165,233,.15); --demo-line: rgba(14,165,233,.26); }
  .example-card--live-expert { --demo-accent: rgba(109,40,217,.16); --demo-line: rgba(109,40,217,.26); }

  .example-card {
    background:
      radial-gradient(circle at 90% 4%, var(--demo-accent, rgba(109,40,217,.12)), transparent 36%),
      rgba(255,255,255,.86) !important;
    border-color: var(--demo-line, rgba(109,40,217,.13)) !important;
  }

  .example-card__visual {
    height: 168px !important;
    border-bottom: 1px solid rgba(109,40,217,.08);
    overflow: hidden !important;
  }

  .example-card__visual > *,
  .example-card__visual [class*="mockup"],
  .example-card__visual [class*="browser"],
  .example-card__visual [class*="content"],
  .example-card__visual [class*="body"],
  .example-card__visual [class*="hero"],
  .example-card__visual [class*="nav"],
  .example-card__visual [class*="services"],
  .example-card__visual [class*="grid"],
  .example-card__visual [class*="bar"] {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .example-card__body {
    padding: 16px !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .example-card__body h3 {
    font-size: 18px !important;
  }

  .example-card__body p {
    font-size: 13px !important;
    line-height: 1.45 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .example-card__actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .example-card__actions .btn {
    width: 100% !important;
    min-height: 42px !important;
    border-radius: 999px !important;
  }

  .example-card__actions button.btn--ghost {
    order: -1;
    background: var(--mob-purple) !important;
    color: #fff !important;
    border-color: var(--mob-purple) !important;
    box-shadow: 0 12px 28px rgba(109,40,217,.24);
  }

  .example-card__actions a.btn--primary {
    background: rgba(109,40,217,.07) !important;
    color: var(--mob-purple) !important;
    border: 1px solid rgba(109,40,217,.16) !important;
    box-shadow: none !important;
  }

  .mob-addon-bundles {
    margin: 4px 0 16px;
  }

  .mob-bot-upsell {
    margin: 8px 0 18px;
    padding: 18px;
    border-radius: 24px;
    background:
      radial-gradient(circle at 92% 10%, rgba(14,165,233,.18), transparent 36%),
      radial-gradient(circle at 0% 100%, rgba(109,40,217,.13), transparent 44%),
      rgba(255,255,255,.86);
    border: 1px solid rgba(109,40,217,.14);
    box-shadow: 0 22px 58px rgba(46,24,91,.11);
  }

  .mob-bot-upsell__badge {
    width: fit-content;
    margin-bottom: 10px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(14,165,233,.12);
    color: #0369a1;
    font-size: 11px;
    font-weight: 900;
  }

  .mob-bot-upsell h3 {
    margin: 0 0 8px;
    font-size: 22px;
    line-height: 1.08;
    color: var(--mob-ink);
  }

  .mob-bot-upsell p {
    margin: 0;
    color: var(--mob-muted);
    font-size: 13.5px;
    line-height: 1.48;
  }

  .mob-bot-upsell__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 14px 0;
  }

  .mob-bot-upsell__chips span {
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(109,40,217,.07);
    color: var(--mob-purple);
    font-size: 11.5px;
    font-weight: 800;
  }

  .mob-bot-upsell__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .mob-bot-upsell__add,
  .mob-bot-upsell__more {
    min-height: 42px;
    border-radius: 999px;
    font-family: 'Manrope', sans-serif;
    font-weight: 900;
    font-size: 12.5px;
  }

  .mob-bot-upsell__add {
    border: 0;
    color: #fff;
    background: var(--mob-purple);
  }

  .mob-bot-upsell__add.is-added {
    background: rgba(22,163,74,.12);
    color: #15803d;
  }

  .mob-bot-upsell__more {
    border: 1px solid rgba(109,40,217,.16);
    color: var(--mob-purple);
    background: rgba(109,40,217,.06);
  }

  .mob-bot-upsell__link {
    display: inline-flex;
    margin-top: 12px;
    color: var(--mob-purple);
    font-size: 12.5px;
    font-weight: 900;
    text-decoration: none;
  }

  .mob-addon-bundles__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
  }

  .mob-addon-bundles__head span {
    font-size: 14px;
    font-weight: 900;
    color: var(--mob-ink);
  }

  .mob-addon-bundles__head small {
    font-size: 11px;
    color: var(--mob-muted);
    text-align: right;
  }

  .mob-bundle-card {
    min-height: 176px;
    padding: 18px;
    border-radius: 22px;
    background:
      radial-gradient(circle at 90% 0%, rgba(168,85,247,.15), transparent 38%),
      rgba(255,255,255,.84);
    border: 1px solid rgba(109,40,217,.14);
    box-shadow: 0 18px 44px rgba(61,38,105,.1);
  }

  .mob-bundle-card--1 {
    background:
      radial-gradient(circle at 90% 0%, rgba(14,165,233,.14), transparent 38%),
      rgba(255,255,255,.84);
  }

  .mob-bundle-card--2 {
    background:
      radial-gradient(circle at 90% 0%, rgba(244,114,182,.14), transparent 38%),
      rgba(255,255,255,.84);
  }

  .mob-bundle-card__tag {
    width: fit-content;
    margin-bottom: 10px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(109,40,217,.08);
    color: var(--mob-purple);
    font-size: 11px;
    font-weight: 900;
  }

  .mob-bundle-card h4 {
    margin: 0 0 7px;
    font-size: 18px;
    line-height: 1.1;
  }

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

  .mob-bundle-card__btn {
    min-height: 40px;
    margin-top: 14px;
    padding: 0 15px;
    border: 0;
    border-radius: 999px;
    background: var(--mob-purple);
    color: #fff;
    font-weight: 900;
    font-family: 'Manrope', sans-serif;
  }

  .mob-bundle-card__btn.is-added {
    background: rgba(22,163,74,.12);
    color: #15803d;
  }

  .services-grid {
    gap: 12px !important;
  }

  .service-card {
    min-height: 166px !important;
    padding: 15px !important;
    border-radius: 22px !important;
    background:
      radial-gradient(circle at 100% 0%, rgba(109,40,217,.09), transparent 42%),
      rgba(255,255,255,.84) !important;
    border: 1px solid rgba(109,40,217,.13) !important;
    box-shadow: 0 18px 44px rgba(61,38,105,.08) !important;
  }

  .service-card[data-mob-accent="auto"] {
    background:
      radial-gradient(circle at 100% 0%, rgba(14,165,233,.12), transparent 42%),
      rgba(255,255,255,.84) !important;
  }

  .service-card[data-mob-accent="structure"] {
    background:
      radial-gradient(circle at 100% 0%, rgba(245,158,11,.12), transparent 42%),
      rgba(255,255,255,.84) !important;
  }

  .service-card[data-mob-accent="wow"] {
    background:
      radial-gradient(circle at 100% 0%, rgba(244,114,182,.12), transparent 42%),
      rgba(255,255,255,.84) !important;
  }

  .service-card::before {
    content: '';
    width: 36px;
    height: 36px;
    border-radius: 13px;
    order: -2;
    background:
      linear-gradient(135deg, rgba(255,255,255,.76), rgba(255,255,255,.2)),
      linear-gradient(135deg, rgba(109,40,217,.16), rgba(168,85,247,.08));
    border: 1px solid rgba(109,40,217,.13);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  }

  .service-card__top {
    order: -1;
    margin-top: -40px;
    margin-left: 44px;
    min-height: 36px;
    align-items: center;
  }

  .service-card__badge {
    background: rgba(255,255,255,.7) !important;
    border: 1px solid rgba(109,40,217,.12) !important;
    color: var(--mob-purple) !important;
  }

  .service-card__info .service-card__title {
    min-height: 34px;
    font-size: 14px !important;
    line-height: 1.2 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .service-card__info p {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 34px;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    color: var(--mob-muted) !important;
  }

  .service-card__price {
    font-size: 13px !important;
    color: var(--mob-purple) !important;
  }

  .service-card__actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
  }

  .service-card .btn--add,
  .service-card__more {
    min-height: 38px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
  }

  .service-card__more {
    border: 1px solid rgba(109,40,217,.16) !important;
    background: rgba(109,40,217,.06) !important;
    color: var(--mob-purple) !important;
  }

  .service-card.is-added {
    border-color: rgba(109,40,217,.35) !important;
    box-shadow: 0 18px 48px rgba(109,40,217,.15) !important;
    transform: translateY(-1px);
  }

  .mob-sheet-overlay {
    background: rgba(23,17,31,.36) !important;
    -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
    backdrop-filter: blur(14px) saturate(120%) !important;
  }

  .service-detail-card {
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    width: auto !important;
    max-height: min(82svh, 720px) !important;
    padding: 24px 18px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 28px !important;
    background: rgba(255,255,255,.92) !important;
    border: 1px solid rgba(109,40,217,.16) !important;
    box-shadow: 0 -24px 80px rgba(46,24,91,.24) !important;
  }

  .service-detail-card::before {
    width: 46px !important;
    height: 5px !important;
    margin: -8px auto 18px !important;
    background: rgba(109,40,217,.22) !important;
  }

  .service-detail-card__close {
    top: 18px !important;
    right: 16px !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: rgba(109,40,217,.08) !important;
    color: var(--mob-purple) !important;
  }

  .service-detail-card h3 {
    max-width: calc(100% - 42px);
    font-size: 23px !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
  }

  .service-detail-card__text,
  .service-detail-card__note {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  .service-detail-row {
    padding: 12px 0 !important;
  }

  .service-detail-row h4 {
    font-size: 10.5px !important;
    letter-spacing: .08em !important;
  }

  .service-detail-card__footer {
    position: sticky;
    bottom: -20px;
    margin: 8px -18px calc(-20px - env(safe-area-inset-bottom, 0px));
    padding: 14px 18px calc(16px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.96) 34%);
    border-top: 1px solid rgba(109,40,217,.08);
  }

  .service-detail-card__footer .btn {
    min-height: 48px !important;
    border-radius: 16px !important;
  }

  .mob-lari-btn {
    width: 56px !important;
    height: 56px !important;
    right: 14px !important;
    bottom: 16px !important;
    border-radius: 18px !important;
    background:
      linear-gradient(135deg, rgba(255,255,255,.24), rgba(255,255,255,0)),
      linear-gradient(135deg, #6D28D9, #A855F7) !important;
    border: 1px solid rgba(255,255,255,.36) !important;
    animation: premiumLariPulse 3.8s ease-in-out infinite !important;
    z-index: 940 !important;
  }

  .mob-lari-panel {
    right: 12px !important;
    bottom: 84px !important;
    width: min(318px, calc(100vw - 24px)) !important;
    padding: 16px !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.9) !important;
    border-color: rgba(109,40,217,.15) !important;
    box-shadow: 0 24px 70px rgba(46,24,91,.18) !important;
    z-index: 941 !important;
  }

  body.mob-cta-visible .mob-lari-btn {
    bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.mob-cta-visible .mob-lari-panel {
    bottom: calc(158px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.mob-sheet-active .mob-lari-panel {
    display: none !important;
  }

  .mob-lari-panel__btn {
    min-height: 42px;
    border-radius: 14px !important;
  }

  #cart,
  #cart .container,
  #cart .cart-layout,
  #cart .cart-panel,
  #cart .cart-form-panel,
  #cart .cart-items,
  #cart .cart-item,
  #cart .cart-item__info,
  #cart .cart-item__right,
  #cart .cart-form,
  #cart .form-row,
  #cart .form-actions {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #cart {
    overflow-x: clip;
  }

  #cart .cart-layout,
  #cart .form-row {
    grid-template-columns: 1fr !important;
  }

  #cart .cart-panel,
  #cart .cart-form-panel {
    width: 100% !important;
    padding: 16px !important;
  }

  /* Compact form title on mobile */
  #cart .cart-form-panel h3 {
    font-size: 21px !important;
    margin-bottom: 2px !important;
  }

  /* Subtitle injected by mobile.js */
  .mob-form-sub {
    font-size: 13px !important;
    color: var(--text-secondary) !important;
    margin: 0 0 12px !important;
    line-height: 1.4 !important;
  }

  /* Tighter field spacing */
  #cart .cart-form {
    gap: 8px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #cart .form-group {
    gap: 2px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Visually compact labels — stay in DOM for accessibility */
  #cart .form-group label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
    margin: 0 !important;
  }

  #cart .cart-form input,
  #cart .cart-form select {
    height: 46px !important;
    font-size: 15px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
  }

  #cart .cart-form textarea {
    height: 76px !important;
    font-size: 15px !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    resize: none !important;
  }

  #cart .form-consent { margin-top: 2px !important; }
  #cart .form-consent__row { gap: 8px !important; align-items: flex-start !important; }
  #cart .form-consent__label {
    font-size: 11px !important;
    line-height: 1.45 !important;
  }

  #cart .form-actions {
    gap: 8px !important;
    margin-top: 6px !important;
  }
  #cart .form-actions .btn {
    height: 48px !important;
    font-size: 15px !important;
  }

  #cart .cart-form__note {
    font-size: 11px !important;
    margin-top: 4px !important;
    line-height: 1.4 !important;
  }

  #cart .cart-item {
    gap: 10px !important;
    align-items: flex-start !important;
  }

  #cart .cart-item__name,
  #cart .cart-item__tag,
  #cart .cart-form__note,
  #cart .form-consent__label {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  #cart .cart-item__right {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .cta-section {
    overflow-x: clip !important;
  }

  .cta-section__blob--1 {
    width: 280px !important;
    height: 280px !important;
    top: -58px !important;
    left: 0 !important;
  }

  .cta-section__blob--2 {
    width: 240px !important;
    height: 240px !important;
    right: 0 !important;
    bottom: -44px !important;
  }

  .cookie-banner {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    border-radius: 18px !important;
  }

  body.mob-cta-visible .cookie-banner {
    bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.cookie-visible:not(.mob-cta-visible) .mob-lari-btn {
    bottom: calc(var(--cookie-banner-height, 150px) + 22px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.cookie-visible:not(.mob-cta-visible) .mob-lari-panel {
    bottom: calc(var(--cookie-banner-height, 150px) + 86px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.cookie-visible.mob-cta-visible .mob-lari-btn {
    bottom: calc(var(--cookie-banner-height, 150px) + 104px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.cookie-visible.mob-cta-visible .mob-lari-panel {
    bottom: calc(var(--cookie-banner-height, 150px) + 168px + env(safe-area-inset-bottom, 0px)) !important;
  }

  @media (prefers-reduced-motion: reduce) {
    .mob-cube,
    .mob-grid-glow,
    .mob-lari-btn {
      animation: none !important;
    }
  }
}

@media (max-width: 430px) {
  .services-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .service-card {
    min-height: 154px !important;
    padding: 13px !important;
  }
}

@media (max-width: 374px) {
  .services-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ================================================================
   BOTS PAGE — premium mobile containment
   ================================================================ */

@media (max-width: 767px) {
  .bot-page,
  .bot-page body,
  .bot-intelligence,
  .bots-page,
  .bot-scenario-showcase,
  .scenario-demo,
  .bot-demo-layout {
    max-width: 100%;
    overflow-x: clip;
  }

  .bot-intelligence {
    padding: 72px 0 44px !important;
    background:
      radial-gradient(circle at 86% 8%, rgba(168,85,247,.2), transparent 32%),
      radial-gradient(circle at 10% 82%, rgba(14,165,233,.12), transparent 34%),
      #FAF8FF !important;
  }

  /* Keep the panel DARK on mobile — its title/feature text is light
     (#F3F0FF) by design. A white bg made the text invisible. */
  .bot-intelligence__panel {
    padding: 24px 18px !important;
    border-radius: 24px !important;
    background:
      radial-gradient(circle at 15% 18%, rgba(109,40,217,.30), transparent 42%),
      radial-gradient(circle at 88% 40%, rgba(56,189,248,.16), transparent 40%),
      linear-gradient(150deg, #0A0618 0%, #150A28 50%, #080512 100%) !important;
    border: 1px solid rgba(168,85,247,.28) !important;
    box-shadow: 0 30px 80px rgba(24,10,55,.4) !important;
  }

  .bot-int-title {
    font-size: clamp(28px, 8.4vw, 38px) !important;
    line-height: 1.04 !important;
  }

  .bot-int-sub {
    font-size: 14px !important;
    line-height: 1.52 !important;
  }

  .mob-bots-bridge {
    padding: 0 0 44px !important;
    background: #FAF8FF;
  }

  .mob-bots-bridge__card {
    padding: 18px;
    border-radius: 24px;
    background:
      radial-gradient(circle at 88% 0%, rgba(14,165,233,.17), transparent 34%),
      rgba(255,255,255,.86);
    border: 1px solid rgba(109,40,217,.14);
    box-shadow: 0 20px 54px rgba(46,24,91,.1);
  }

  .mob-bots-bridge__card span {
    display: inline-flex;
    margin-bottom: 10px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(109,40,217,.08);
    color: var(--mob-purple);
    font-size: 10.5px;
    font-weight: 900;
  }

  .mob-bots-bridge__card h2 {
    margin: 0 0 8px;
    font-size: 23px;
    line-height: 1.08;
    color: var(--mob-ink);
  }

  .mob-bots-bridge__card p {
    margin: 0;
    color: var(--mob-muted);
    font-size: 13.5px;
    line-height: 1.48;
  }

  .mob-bots-bridge__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 14px;
  }

  .mob-bots-bridge__actions button,
  .mob-bots-bridge__actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 900;
    font-family: 'Manrope', sans-serif;
    text-decoration: none;
  }

  .mob-bots-bridge__actions button {
    border: 0;
    color: #fff;
    background: var(--mob-purple);
  }

  .mob-bots-bridge__actions a {
    border: 1px solid rgba(109,40,217,.16);
    color: var(--mob-purple);
    background: rgba(109,40,217,.06);
  }

  .bot-int-features,
  .bots-ownership-grid,
  .bot-factors-grid,
  .bot-steps-grid {
    grid-template-columns: 1fr !important;
  }

  .bot-int-feature,
  .bots-cap-card,
  .bots-own-card,
  .bots-channel-card,
  .bot-factor-card,
  .bot-step {
    border-radius: 18px !important;
    max-width: 100%;
  }

  .bots-caps-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }

  .mob-bot-tabs-swiper {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    margin-bottom: 14px;
  }

  .mob-bot-tabs-swiper .bot-tabs,
  .mob-bot-tabs-swiper .scenario-tabs {
    gap: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  .mob-bot-tabs-swiper .swiper-slide {
    width: auto !important;
  }

  .bot-tab-btn,
  .scenario-tab-btn {
    min-height: 40px !important;
    width: auto !important;
    white-space: nowrap !important;
    border-radius: 999px !important;
    font-size: 12.5px !important;
    padding: 8px 13px !important;
  }

  /* .bot-demo-layout panes (#bot-examples) are tab-switched — do NOT
     force display here, or every niche pane shows stacked. Let
     bots.html's .bot-scenario-pane / .is-active control visibility;
     only normalise to a single column on mobile. */
  .bot-demo-layout {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 0 !important;
  }

  /* .scenario-demo (#bot-scenarios) is a single always-visible demo */
  .scenario-demo {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 0 !important;
  }

  /* Step cards full-width & uniform (were ragged, sized to text) */
  .bot-demo-stepmap {
    align-items: stretch !important;
    width: 100% !important;
    gap: 8px !important;
  }
  .bot-demo-step {
    width: 100% !important;
  }

  .bot-scenario-showcase.has-mob-scenario-swiper .scenario-tabs {
    display: none !important;
  }

  .mob-scenario-swiper {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    margin: -4px 0 18px !important;
    padding: 2px 0 30px !important;
  }

  .mob-scenario-swiper .swiper-wrapper {
    align-items: stretch;
  }

  .mob-scenario-card {
    height: auto !important;
    min-height: 198px;
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    padding: 17px;
    border-radius: 24px;
    background:
      radial-gradient(circle at 92% 0%, rgba(14,165,233,.14), transparent 38%),
      rgba(255,255,255,.88);
    border: 1px solid rgba(109,40,217,.14);
    box-shadow: 0 18px 48px rgba(46,24,91,.1);
  }

  .mob-scenario-card__tag {
    width: fit-content;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(109,40,217,.08);
    color: var(--mob-purple);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .mob-scenario-card h3 {
    margin: 10px 0 7px;
    font-size: 17px;
    line-height: 1.14;
    color: var(--mob-ink);
  }

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

  .mob-scenario-card__flow {
    margin-top: 12px;
    padding: 9px 10px;
    border-radius: 14px;
    background: rgba(109,40,217,.055);
    color: rgba(23,17,31,.72);
    font-size: 11.5px;
    font-weight: 800;
  }

  .mob-scenario-card button {
    min-height: 40px;
    margin-top: 12px;
    border-radius: 999px;
    background: var(--mob-purple);
    color: #fff;
    font-size: 12.5px;
    font-weight: 900;
    font-family: 'Manrope', sans-serif;
  }

  .bot-demo-left,
  .scenario-path,
  .scenario-result,
  .scenario-phone,
  .bot-demo-phone {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .bot-demo-stepmap,
  .scenario-route,
  .scenario-pricing-chips {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;
  }

  .bot-demo-stepmap::-webkit-scrollbar,
  .scenario-route::-webkit-scrollbar,
  .scenario-pricing-chips::-webkit-scrollbar {
    display: none;
  }

  .bot-demo-step {
    min-width: 112px !important;
    flex: 0 0 auto !important;
    padding: 10px !important;
    border: 1px solid rgba(109,40,217,.12);
    background: rgba(255,255,255,.76);
  }

  .bot-demo-step-line {
    display: none !important;
  }

  .bot-demo-phone,
  .scenario-phone__wrap {
    border-radius: 24px !important;
    transform: none !important;
  }

  .bot-demo-chat,
  .scenario-phone__messages {
    max-height: 330px !important;
  }

  .bots-channels-grid,
  .bot-channels-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .bots-channel-card__desc {
    font-size: 12.5px !important;
    line-height: 1.42 !important;
  }

  .bot-pkg-card {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 24px !important;
  }

  .bots-cta {
    overflow: clip !important;
  }

  .bots-cta::before {
    width: min(320px, calc(100vw - 32px)) !important;
    height: 220px !important;
    top: -58px !important;
    left: 50% !important;
  }
}

@media (max-width: 390px) {
  .hero__trust,
  .bots-caps-grid,
  .bots-channels-grid,
  .bot-channels-grid {
    grid-template-columns: 1fr !important;
  }

  .hero__title {
    max-width: 13ch;
  }
}


/* ================================================================
   BOTS PAGE — final compact mobile app pass
   ================================================================ */

@media (max-width: 767px) {
  .mob-bot-cap-content {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .mob-bot-cap-content .bots-cap-card {
    min-height: 86px !important;
    padding: 12px !important;
    gap: 7px !important;
    border-radius: 18px !important;
  }

  .mob-bot-cap-content .bots-cap-card__icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 12px !important;
  }

  .mob-bot-cap-content .bots-cap-card__text {
    font-size: 12px !important;
    line-height: 1.28 !important;
  }

  .bot-scenario-showcase {
    padding: 48px 0 54px !important;
  }

  .bot-scenario-showcase .section-header {
    margin-bottom: 14px !important;
  }

  .bot-scenario-showcase .section-title {
    font-size: clamp(24px, 7.4vw, 31px) !important;
  }

  .bot-scenario-showcase .section-sub {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
  }

  .mob-scenario-swiper {
    margin: 0 0 12px !important;
    padding: 2px 0 24px !important;
  }

  .mob-scenario-card {
    min-height: 168px !important;
    padding: 14px !important;
    border-radius: 20px !important;
  }

  .mob-scenario-card h3 {
    margin: 8px 0 6px !important;
    font-size: 16px !important;
  }

  .mob-scenario-card p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12.5px !important;
    line-height: 1.38 !important;
  }

  .mob-scenario-card__flow {
    margin-top: 10px !important;
    padding: 8px 9px !important;
    font-size: 11px !important;
  }

  .mob-scenario-card button {
    min-height: 38px !important;
    margin-top: 10px !important;
  }

  .scenario-demo {
    gap: 10px !important;
    padding: 12px !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.82) !important;
    box-shadow: 0 18px 46px rgba(46,24,91,.09) !important;
  }

  .scenario-path__label {
    margin-bottom: 8px !important;
    font-size: 9.5px !important;
  }

  .scenario-route {
    padding-bottom: 3px !important;
  }

  .scenario-step {
    min-width: 118px !important;
    flex: 0 0 auto !important;
    padding: 9px !important;
    gap: 8px !important;
    border-radius: 16px !important;
    background: rgba(109,40,217,.055) !important;
    border: 1px solid rgba(109,40,217,.12) !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .scenario-step-line,
  .scenario-step-sub {
    display: none !important;
  }

  .scenario-step-dot {
    width: 24px !important;
    height: 24px !important;
    border-width: 1px !important;
    font-size: 10px !important;
    box-shadow: none !important;
  }

  .scenario-step-content {
    padding-top: 0 !important;
    min-width: 0 !important;
  }

  .scenario-step-title {
    font-size: 11px !important;
    line-height: 1.18 !important;
  }

  .scenario-phone__bar {
    padding: 10px 12px 8px !important;
  }

  .scenario-phone__avatar {
    width: 28px !important;
    height: 28px !important;
  }

  .scenario-phone__messages {
    min-height: 170px !important;
    max-height: 220px !important;
    padding: 12px !important;
    gap: 7px !important;
  }

  .smsg {
    max-width: 88% !important;
  }

  .smsg__sender {
    display: none !important;
  }

  .smsg__bubble {
    padding: 8px 10px !important;
    border-radius: 14px !important;
    font-size: 12px !important;
    line-height: 1.42 !important;
  }

  .scenario-result__card {
    padding: 12px !important;
    border-radius: 18px !important;
  }

  .scenario-result__head {
    margin-bottom: 8px !important;
  }

  .scenario-result__icon {
    width: 30px !important;
    height: 30px !important;
    border-radius: 10px !important;
  }

  .scenario-result__rows {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 6px !important;
    margin-bottom: 8px !important;
  }

  .scenario-result__row {
    display: block !important;
    padding: 7px 8px !important;
    border-radius: 12px !important;
    background: rgba(109,40,217,.055);
    font-size: 11.5px !important;
  }

  .scenario-result__val {
    display: block;
    max-width: 100%;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .scenario-result__note {
    display: none !important;
  }

  .scenario-pricing-note {
    margin-top: 12px !important;
    padding: 12px !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 32px rgba(46,24,91,.07) !important;
  }

  .scenario-pricing-note__title {
    margin-bottom: 8px !important;
    font-size: 11px !important;
  }

  .scenario-pricing-note__text {
    display: none !important;
  }

  .scenario-pricing-chip {
    min-width: max-content;
    padding: 7px 10px !important;
    font-size: 11.5px !important;
  }
}

@media (max-width: 390px) {
  .mob-scenario-card {
    min-height: 158px !important;
  }

  .scenario-phone__messages {
    max-height: 205px !important;
  }
}


/* ================================================================
   ADD-ONS — clean full-width app list (authoritative, overrides
   all earlier 2-column grid definitions above)
   ================================================================ */
@media (max-width: 767px) {

  /* Single column at every mobile width */
  .services-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Each card = horizontal app-row: [icon] [title/price] [add] */
  .service-card {
    display: grid !important;
    grid-template-columns: 46px 1fr auto !important;
    grid-auto-rows: min-content !important;
    align-items: center !important;
    column-gap: 13px !important;
    row-gap: 2px !important;
    min-height: 0 !important;
    padding: 14px 15px !important;
    border-radius: 18px !important;
    background:
      radial-gradient(circle at 100% 0%, rgba(109,40,217,.07), transparent 46%),
      rgba(255,255,255,.92) !important;
    border: 1px solid rgba(109,40,217,.12) !important;
    box-shadow: 0 10px 28px rgba(61,38,105,.07) !important;
    transform: none !important;
  }

  .service-card[data-mob-accent="auto"]      { background: radial-gradient(circle at 100% 0%, rgba(14,165,233,.10), transparent 46%), rgba(255,255,255,.92) !important; }
  .service-card[data-mob-accent="structure"] { background: radial-gradient(circle at 100% 0%, rgba(245,158,11,.10), transparent 46%), rgba(255,255,255,.92) !important; }
  .service-card[data-mob-accent="wow"]       { background: radial-gradient(circle at 100% 0%, rgba(244,114,182,.10), transparent 46%), rgba(255,255,255,.92) !important; }

  /* Icon badge — left column, vertically centred */
  .service-card::before {
    content: '' !important;
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    align-self: center !important;
    width: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    border-radius: 14px !important;
    order: 0 !important;
    background:
      linear-gradient(135deg, rgba(255,255,255,.8), rgba(255,255,255,.25)),
      linear-gradient(135deg, rgba(109,40,217,.18), rgba(168,85,247,.08)) !important;
    border: 1px solid rgba(109,40,217,.14) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7) !important;
  }

  /* Badge chip — small, above title */
  .service-card__top {
    grid-column: 2 !important;
    grid-row: 1 !important;
    order: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
  }
  .service-card__badge {
    padding: 2px 9px !important;
    font-size: 10px !important;
    background: rgba(109,40,217,.07) !important;
    border: 1px solid rgba(109,40,217,.12) !important;
    color: var(--mob-purple, #6D28D9) !important;
  }
  .service-card__module { display: none !important; }

  /* Title — full row width, up to 2 lines, no cramped clipping */
  .service-card__info {
    grid-column: 2 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
  }
  .service-card__info .service-card__title {
    margin: 0 !important;
    min-height: 0 !important;
    font-size: 14.5px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    -webkit-line-clamp: 2 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  /* one short line of benefit */
  .service-card__info p {
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin: 2px 0 0 !important;
    min-height: 0 !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    color: var(--mob-muted, #6B6478) !important;
  }

  .service-card__price {
    grid-column: 2 !important;
    grid-row: 3 !important;
    margin: 3px 0 0 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: var(--mob-purple, #6D28D9) !important;
  }

  /* Actions — right column, stacked, full card height */
  .service-card__actions {
    grid-column: 3 !important;
    grid-row: 1 / span 3 !important;
    align-self: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    width: 84px !important;
  }
  .service-card .btn--add {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 0 10px !important;
    border-radius: 12px !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
  }
  .service-card__more {
    width: 100% !important;
    min-height: 0 !important;
    padding: 4px !important;
    border: 0 !important;
    background: none !important;
    text-align: center !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: var(--mob-purple, #6D28D9) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
  }

  .service-card.is-added {
    border-color: rgba(109,40,217,.32) !important;
    box-shadow: 0 12px 32px rgba(109,40,217,.14) !important;
  }
}

/* Keep single column even on the narrowest / mid widths */
@media (max-width: 430px) {
  .services-grid { grid-template-columns: 1fr !important; }
  .service-card  { min-height: 0 !important; }
}

/* ===== FOUNDER TRUST NOTE — mobile ===== */
@media (max-width: 767px) {
  .founder-note__card {
    flex-direction: column !important;
    gap: 16px !important;
    padding: 20px 18px 24px !important;
    border-radius: 20px !important;
  }

  .founder-note__photo-col {
    width: 100% !important;
  }

  .founder-note__photo-wrap {
    width: min(100%, 230px) !important;
    height: clamp(128px, 35vw, 144px) !important;
    display: block !important;
  }

  .founder-note__photo {
    width: clamp(104px, 29vw, 118px) !important;
    height: clamp(128px, 35vw, 144px) !important;
    border-radius: 14px !important;
    flex-shrink: 0 !important;
  }

  .founder-note__photo-badge {
    position: absolute !important;
    left: calc(clamp(104px, 29vw, 118px) - 24px) !important;
    bottom: 10px !important;
    transform: none !important;
    padding: 6px 12px !important;
    box-shadow: 0 3px 8px rgba(55, 24, 102, .18);
  }

  .founder-note__title {
    width: 100% !important;
    margin: 0 0 6px !important;
    font-size: clamp(18px, 4.6vw, 21px) !important;
    line-height: 1.25 !important;
    letter-spacing: -.015em;
    text-wrap: balance;
  }

  .founder-note__title br {
    display: block !important;
  }

  .founder-note__title .mob-key-idea {
    color: #5b21b6 !important;
    background: none !important;
    text-shadow: none !important;
  }

  .founder-note__title .mob-key-idea::before {
    content: none !important;
  }

  .founder-note__role {
    margin: 0 0 14px !important;
    color: var(--text-secondary) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
  }

  .founder-note__text {
    font-size: 14px !important;
    line-height: 1.55 !important;
    max-width: 58ch;
    margin-bottom: 14px !important;
  }

  .founder-note__quote {
    margin-bottom: 12px !important;
    padding: 10px 12px !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    font-style: italic;
    background: rgba(109, 40, 217, .055) !important;
  }

  .founder-note__chips {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 0 !important;
  }

  .founder-chip {
    height: 42px;
    padding: 6px 8px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px !important;
    line-height: 1.25;
    text-align: center;
  }

  .founder-note__btn {
    width: 100% !important;
    margin-top: 18px !important;
    justify-content: center !important;
    min-height: 50px !important;
  }
}

@media (max-width: 340px) {
  .founder-note__card {
    padding-inline: 16px !important;
  }

  .founder-note__title {
    font-size: 17.5px !important;
  }
}

/* While the cart/form section is on screen, never overlap the submit
   button: hide the floating Lari and the redundant sticky CTA. */
@media (max-width: 767px) {
  body.mob-at-cart .mob-lari-btn,
  body.mob-at-cart .mob-lari-panel,
  body.mob-at-cart .mob-sticky-cta {
    display: none !important;
  }
  body.mob-at-cart.mob-cta-visible {
    padding-bottom: 0 !important;
  }
}

/* 768px относится к tablet для секции форматов. */
@media (min-width: 768px) {
  #format .format-grid { display: grid !important; }
  #format .mob-format-list,
  #format .mob-format-tabs { display: none !important; }
}

/* ================================================================
   HERO — centred mobile composition (desktop remains unchanged)
   ================================================================ */
@media (max-width: 767px) {
  .hero__content {
    width: 100%;
    max-width: 22.5rem !important;
    margin-inline: auto;
    text-align: center;
  }

  .hero__badge {
    justify-content: center;
    margin-inline: auto;
  }

  .hero__title {
    max-width: min(100%, 15ch) !important;
    margin-inline: auto;
    text-align: center;
    text-wrap: balance;
  }

  .hero__accent {
    display: inline-block;
    white-space: nowrap;
  }

  .hero__sub {
    max-width: 38ch;
    margin-inline: auto;
    text-align: center;
    text-wrap: pretty;
  }

  .hero__btns {
    width: 100%;
    margin-inline: auto;
    align-items: stretch;
    justify-content: center;
  }

  .hero__btns .btn {
    width: 100%;
  }

  #examples .examples-top .section-title {
    font-size: clamp(24px, 7.2vw, 30px) !important;
  }

  #who .section-title {
    width: calc(100% + 32px);
    max-width: none;
    margin-inline: -16px;
    text-wrap: balance;
  }

  #format .section-title {
    width: calc(100% + 32px);
    max-width: none;
    margin-inline: -16px;
    font-size: clamp(25px, 7vw, 30px) !important;
    white-space: nowrap;
  }

  #faq .faq-list {
    gap: 12px;
  }

  #faq .faq-item,
  #faq .faq-item--featured {
    background: rgba(255, 255, 255, .97);
    border-color: rgba(109, 40, 217, .22);
  }

  #faq .faq-item--open {
    background: #fff;
    border-color: rgba(109, 40, 217, .62);
    box-shadow: 0 3px 8px rgba(109, 40, 217, .06);
  }

  #faq .faq-arrow {
    background: rgba(109, 40, 217, .10);
    border: 1px solid rgba(109, 40, 217, .14);
    color: var(--accent);
  }

  #faq .faq-item--open .faq-arrow {
    transform: rotate(180deg);
    background: rgba(109, 40, 217, .16);
    border-color: rgba(109, 40, 217, .26);
    color: var(--accent);
  }

  /* Main mobile chapters: quiet labels, breathing room and local light. */
  #who,
  #format,
  #services,
  #process,
  #faq {
    position: relative;
    isolation: isolate;
  }

  #who,
  #services,
  #process,
  #faq {
    padding-top: 64px !important;
  }

  #format {
    padding-top: 60px !important;
  }

  #who::before,
  #format::before,
  #services::before,
  #process::before,
  #faq::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    left: 0;
    height: 132px;
    pointer-events: none;
    background: radial-gradient(ellipse 72% 92% at var(--mob-chapter-glow-x, 18%) 0%, rgba(168, 85, 247, .11), rgba(109, 40, 217, .035) 48%, transparent 76%);
  }

  #format,
  #process {
    --mob-chapter-glow-x: 82%;
  }

  #who > .container,
  #format > .container,
  #services > .container,
  #process > .container,
  #faq > .container {
    position: relative;
    z-index: 1;
  }

  .mob-section-label {
    display: block;
    margin-bottom: 10px;
    color: var(--mob-purple);
    font-family: 'Manrope', sans-serif;
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  #services .services-kicker {
    display: none !important;
  }

  .mob-chapter-head.mob-fadein-target {
    opacity: 0 !important;
    transform: translateY(12px) !important;
    transition: opacity .48s cubic-bezier(.2, 0, 0, 1), transform .48s cubic-bezier(.2, 0, 0, 1) !important;
  }

  .mob-chapter-head.mob-fadein-target.mob-is-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  /* Four selling headlines: wider composition and restrained emphasis. */
  .mob-key-idea {
    color: var(--mob-purple) !important;
    text-shadow: 0 0 18px rgba(168, 85, 247, .20);
    background: linear-gradient(180deg, transparent 73%, rgba(168, 85, 247, .13) 73%, rgba(168, 85, 247, .13) 88%, transparent 88%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  .brand-film-plaque__title {
    width: calc(100% + 32px);
    max-width: none;
    margin-inline: -16px;
    font-size: clamp(19px, 5vw, 22px) !important;
    line-height: 1.18 !important;
  }

  #before-after .ba-title {
    width: calc(100% + 32px);
    max-width: none;
    margin-inline: -16px;
    font-size: clamp(22px, 6vw, 26px) !important;
    line-height: 1.12 !important;
  }

  #before-after .ba-phase {
    display: inline !important;
  }

  .cta-section h2 {
    width: calc(100% + 32px);
    max-width: none;
    margin-inline: -16px;
    font-size: clamp(22px, 6vw, 25px) !important;
    line-height: 1.18 !important;
    color: #fff !important;
    text-shadow: none !important;
  }

  .cta-section h2 br {
    display: block !important;
  }

  .cta-section h2 .mob-key-idea {
    color: #f2eaff !important;
    background: none !important;
    text-shadow: none !important;
  }

  .cta-section h2 .mob-key-idea::before {
    content: none !important;
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .mob-chapter-head.mob-fadein-target,
  .mob-chapter-head.mob-fadein-target.mob-is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Узкие экраны (≤360px): точечное устранение переполнений.
   Причина у всех семи одна — одиночные длинные русские слова
   («Автосервисы», «Улучшенная», «геолокация») шире своей колонки.
   Размер шрифта НЕ трогаем: место добираем из отступов и иконки,
   а остаток решает перенос по слогам.
   Desktop и tablet не затронуты — блок живёт только до 360px.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 360px) {

  /* ── 1–2. Карточки «Кому делаем»: h3 «Автосервисы», «Частные специалисты» ── */
  .who-card {
    padding: 11px !important;          /* 14 → 11: +6px ширины под текст */
  }
  .who-card h3 {
    -webkit-hyphens: auto;
    hyphens: auto;                     /* перенос по слогам, lang="ru" задан */
    overflow-wrap: break-word;         /* запасной вариант, если словаря нет */
    word-break: normal;
  }

  /* ── 3–7. Карточки услуг: колонка заголовка была всего 68px ──
     Возвращаем ей ширину, ужимая иконку, гэпы и внутренние отступы. */
  .service-card {
    grid-template-columns: 36px minmax(0, 1fr) auto !important;
    column-gap: 8px !important;        /* 13 → 8: +10px */
    padding: 13px 11px !important;     /* 15 → 11 по бокам: +8px */
  }
  .service-card::before {
    width: 36px !important;            /* 46 → 36: +10px */
    height: 36px !important;
    border-radius: 11px !important;
  }
  .service-card__info .service-card__title {
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
    -webkit-line-clamp: 3 !important;  /* перенос может дать третью строку */
  }
}

/* ═══════════════════════════════════════════════════════════════
   «Под каждый бизнес — своя структура сайта»: premium glass и на mobile.
   Перекрывает компактный app-скин: стекло, читаемый текст, без обрезки.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .who-grid { gap: 12px !important; }

  .who-card {
    min-height: 0 !important;
    padding: 16px 16px 15px !important;
    border-radius: 20px !important;
    gap: 0 !important;
    background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(255,255,255,.62)) !important;
    border: 1px solid rgba(93,63,134,.12) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 12px 30px rgba(76,45,110,.10) !important;
    -webkit-backdrop-filter: blur(18px) !important;
            backdrop-filter: blur(18px) !important;
  }
  /* акцентная рамка при tap слегка усиливается */
  .who-card:active {
    transform: scale(.985) !important;
    border-color: color-mix(in srgb, var(--who-accent) 34%, transparent) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 12px 30px rgba(76,45,110,.10), 0 0 24px var(--who-glow) !important;
  }

  .who-card__icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 13px !important;
    margin-bottom: 13px !important;
  }
  .who-card__icon svg { width: 22px !important; height: 22px !important; }

  .who-card h3 {
    font-size: 16.5px !important;
    line-height: 1.25 !important;
    margin: 0 0 5px !important;
    color: var(--text-primary) !important;
    -webkit-hyphens: auto;
            hyphens: auto;                 /* длинные слова переносятся, lang="ru" */
    overflow-wrap: break-word !important;
  }
  /* описание читаемое и НЕ обрезается */
  .who-card p {
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    display: block !important;
    -webkit-line-clamp: none !important;
    overflow: visible !important;
  }
}

/* очень узкие экраны: одна колонка (по ТЗ ниже 340px) */
@media (max-width: 339px) {
  .who-grid { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM GLASS на mobile: «Форматы», «Процесс», «Обсудим ваш проект».
   Перекрывает компактный app-скин (грузится раньше в этом же файле).
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── ФОРМАТЫ: единые glass-карточки вместо компактного mob-списка.
     Прячем JS-построенный .mob-format-list, показываем .format-grid. ── */
  #format .mob-format-list,
  #format .mob-format-tabs { display: none !important; }
  #format .format-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    grid-auto-rows: 1fr !important;
  }
  .format-card {
    padding: 15px 14px 14px !important;
    border-radius: 18px !important;
    min-height: 0 !important;
  }
  .format-card__top { margin-bottom: 12px !important; }
  .format-card__ico { width: 34px !important; height: 34px !important; border-radius: 11px !important; }
  .format-card__num { font-size: 14px !important; }
  .format-card h3 {
    font-size: 15px !important; margin-bottom: 5px !important; line-height: 1.25 !important;
    -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word;
  }
  .format-card p { font-size: 13.5px !important; line-height: 1.45 !important; }
  .format-card:hover { transform: none !important; }

  .format-note { padding: 14px 16px !important; gap: 12px !important; }

  /* ── ПРОЦЕСС: вертикальная timeline ── */
  .process-list {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    position: relative !important;
  }
  .process-list::before {
    content: ''; position: absolute; left: 30px; top: 12px; bottom: 12px; width: 2px;
    background: linear-gradient(#f2b866, #a855f7, #6366f1); opacity: .35; border-radius: 2px;
  }
  .process-step {
    display: grid !important;
    grid-template-columns: 44px 1fr !important;
    align-items: start !important;
    column-gap: 14px !important;
    padding: 18px 20px !important;
    margin-left: 8px !important;
  }
  .process-step__num {
    grid-row: 1 / span 2;
    width: 44px !important; height: 44px !important;
    border-radius: 13px !important;
    background: linear-gradient(135deg, rgba(242,184,102,.18), rgba(168,85,247,.16)) !important;
    border: 1px solid rgba(168,85,247,.3);
    font-size: 20px !important; font-weight: 800; margin-bottom: 0 !important;
    box-shadow: 0 6px 16px rgba(124,58,237,.18);
    /* номер — сплошной видимый цвет внутри плашки (не клип к её фону) */
    -webkit-background-clip: border-box !important; background-clip: border-box !important;
    -webkit-text-fill-color: #7C3AED !important; color: #7C3AED !important;
  }
  .process-step__body h3 { font-size: 15.5px !important; }
  .process-step__body p {
    font-size: 13.5px !important; line-height: 1.5 !important;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .process-step:not(:last-child)::after { content: none !important; }

  /* ── ОБСУДИМ ВАШ ПРОЕКТ: стекло + фикс бело-на-белом ── */
  .contacts-form-wrap {
    padding: 22px 18px !important;
    border-radius: 24px !important;
    background: linear-gradient(145deg, rgba(255,255,255,.86), rgba(245,238,255,.72)) !important;
    border: 1px solid rgba(124,58,237,.20) !important;
    -webkit-backdrop-filter: blur(20px) !important; backdrop-filter: blur(20px) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 20px 56px rgba(84,45,125,.14) !important;
  }
  .contact-card {
    min-height: 64px !important;
    padding: 13px 15px !important;
    border-radius: 16px !important;
    background: linear-gradient(145deg, rgba(255,255,255,.84), rgba(255,255,255,.62)) !important;
    border: 1px solid color-mix(in srgb, var(--pg-accent) 16%, transparent) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9) !important;
  }
  .contact-card:hover { transform: none !important; }
  .contact-card__body b { color: var(--text-primary) !important; font-size: 14.5px !important; }
  .contact-card__body i { color: var(--text-secondary) !important; font-size: 12.5px !important; }
  /* Instagram-плашка сохраняет градиент и на мобиле */
  .contact-card--insta .contact-card__icon { color: #fff !important; }
}

@media (max-width: 339px) {
  #format .format-grid { grid-template-columns: 1fr !important; }
}