/* =============================================================================
   Mobile compact layout — must override bundled desktop CSS.
   Desktop: only hides .m-only / chrome actions / dock.
   ============================================================================= */

.m-only {
  display: none !important;
}

.chrome__actions,
.m-dock,
.m-bg {
  display: none !important;
}

@media (max-width: 767px) {
  :root {
    --m-dock-h: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    --section-y: 28px !important;
    --chrome-bar: 52px !important;
    --sp-9: 28px !important;
    --sp-8: 24px !important;
    --sp-7: 20px !important;
  }

  .m-only {
    display: revert !important;
  }

  span.m-only,
  i.m-only {
    display: inline !important;
  }

  p.m-only,
  div.m-only,
  ul.m-only,
  section.m-only {
    display: block !important;
  }

  .d-only,
  .m-hide,
  #problem,
  #team,
  .svc-block,
  .trust-marquee,
  .trust,
  #compare .compare,
  #compare .section__cta,
  #faq .section__cta,
  #services .section__cta,
  #segments .card .t-body-s,
  .node-grid .t-body-s,
  #trust .quote + .quote {
    display: none !important;
  }

  html {
    scroll-padding-top: calc(var(--chrome-h) + 8px) !important;
    scroll-padding-bottom: calc(var(--m-dock-h) + 8px) !important;
  }

  body {
    padding-bottom: var(--m-dock-h) !important;
    background: #04121c !important;
  }

  /* Шёлк на всю страницу — лёгкий, без blur */
  .m-bg {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    background: #04121c !important;
  }

  .m-bg__wash {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(120% 70% at 50% -10%, rgba(2, 219, 220, 0.18), transparent 55%),
      radial-gradient(90% 55% at 100% 80%, rgba(4, 179, 180, 0.1), transparent 50%),
      radial-gradient(70% 45% at 0% 100%, rgba(53, 230, 231, 0.07), transparent 48%);
  }

  .m-bg__aurora {
    position: absolute;
    inset: -20%;
    background:
      radial-gradient(circle at 30% 40%, rgba(2, 219, 220, 0.16), transparent 42%),
      radial-gradient(circle at 70% 60%, rgba(53, 230, 231, 0.1), transparent 40%);
    animation: m-bg-silk 20s ease-in-out infinite alternate;
    will-change: transform;
  }

  .m-bg__streaks {
    position: absolute;
    inset: 0;
    opacity: 0.4;
    background: repeating-linear-gradient(
      105deg,
      transparent 0,
      transparent 44px,
      rgba(2, 219, 220, 0.04) 44px,
      rgba(232, 238, 240, 0.03) 46px,
      transparent 48px
    );
    animation: m-bg-sheen 18s linear infinite;
    will-change: transform;
  }

  @keyframes m-bg-silk {
    from {
      transform: translate3d(-3%, -1%, 0) scale(1);
    }
    to {
      transform: translate3d(4%, 2%, 0) scale(1.07);
    }
  }

  @keyframes m-bg-sheen {
    from {
      transform: translate3d(-10%, 0, 0);
    }
    to {
      transform: translate3d(10%, 0, 0);
    }
  }

  /* 3D / болид / гараж — полностью выкл на мобилке */
  .stage,
  .stage:before,
  .stage:after,
  .stage__overlay,
  .stage canvas,
  .hero__stage,
  .hero__scrim,
  .hero__still {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  main,
  .foot,
  .to-top {
    position: relative;
    z-index: 2;
  }

  /* ——— Chrome: fixed + бренд по центру экрана ——— */
  .chrome,
  .chrome.chrome--mark {
    position: fixed !important;
    inset: 0 0 auto !important;
    z-index: 40 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: var(--chrome-h) !important;
    min-height: var(--chrome-h) !important;
    width: 100% !important;
    padding-inline: max(12px, env(safe-area-inset-left), env(safe-area-inset-right)) !important;
    background: rgba(7, 28, 42, 0.96) !important;
    border-bottom: 1px solid rgba(232, 238, 240, 0.1) !important;
    box-sizing: border-box !important;
  }

  .chrome__cluster {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 40px !important;
    gap: 0 !important;
  }

  .chrome__mark {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    text-transform: none !important;
    letter-spacing: -0.02em !important;
    font-size: 0.82rem !important;
    max-width: calc(100% - 96px) !important;
    width: max-content !important;
    padding-inline: 0 !important;
    margin: 0 !important;
    pointer-events: auto;
  }

  .chrome__nav {
    display: none !important;
  }

  .chrome__actions {
    display: flex !important;
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
    z-index: 2;
  }

  .chrome__icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(232, 238, 240, 0.22);
    background: rgba(17, 50, 66, 0.65);
    color: var(--text-primary);
    text-decoration: none;
  }

  .chrome__icon--accent {
    background: var(--action-bg) !important;
    border-color: var(--action-bg) !important;
    color: var(--action-fg) !important;
  }

  .m-dock {
    z-index: 80 !important;
  }

  /* Полупрозрачные секции — шёлк виден */
  main > section.section,
  main > section.section--ambient,
  html.no-3d main > section.section,
  html.no-3d main > section.section--ambient {
    background: rgba(7, 28, 42, 0.55) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  main > section.hero,
  main > section.final,
  html.no-3d main > section.hero,
  html.no-3d main > section.final {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* ——— Short page order ——— */
  main {
    display: flex !important;
    flex-direction: column !important;
  }

  #top { order: 1 !important; }
  #segments { order: 2 !important; }
  #services { order: 3 !important; }
  #calc { order: 4 !important; }
  #compare { order: 5 !important; }
  #trust { order: 6 !important; }
  #final { order: 7 !important; }
  #faq { order: 8 !important; }

  #calc,
  #final,
  #segments,
  #services {
    scroll-margin-top: calc(var(--chrome-h) + 8px) !important;
  }

  .section,
  .section.section--ambient,
  .final.section,
  section.section {
    padding-block: 28px !important;
  }

  .section__ambient {
    display: none !important;
  }

  .section__head {
    margin-bottom: 14px !important;
    gap: 6px !important;
  }

  .section__head .t-d2 {
    font-size: clamp(1.25rem, 5.2vw, 1.55rem) !important;
    line-height: 1.15 !important;
  }

  .section__head .t-lede,
  .section__head .t-lede.m-only {
    margin: 0 !important;
    font-size: 0.86rem !important;
    color: var(--text-secondary) !important;
  }

  .shell {
    width: calc(100% - 1.5rem) !important;
    max-width: 480px !important;
  }

  /* Hero: только копирайт над шёлком */
  .hero {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: auto !important;
    align-items: stretch !important;
    padding-top: calc(var(--chrome-h) + 8px) !important;
    padding-bottom: 12px !important;
    background: transparent !important;
  }

  .hero__inner {
    position: relative !important;
    z-index: 2 !important;
    order: 1 !important;
    width: 100% !important;
    padding-block: 8px 4px !important;
    text-align: center !important;
  }

  .hero__copy {
    text-align: center !important;
    align-items: center !important;
  }

  .hero__eyebrow {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 auto 8px !important;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-accent);
  }

  .hero__eyebrow::before {
    content: "";
    width: 14px;
    height: 2px;
    background: var(--text-accent);
  }

  .hero__copy .t-d1,
  .hero__copy .t-lede,
  .hero__proof {
    text-align: center !important;
  }

  .hero__copy .t-d1 {
    font-size: clamp(1.45rem, 6.5vw, 1.85rem) !important;
    margin-bottom: 8px !important;
  }

  .hero__copy .t-lede {
    margin-bottom: 12px !important;
    font-size: 0.9rem !important;
  }

  .hero__proof {
    font-size: 0.68rem !important;
    line-height: 1.4 !important;
    margin-top: 10px !important;
  }

  /* Кнопки Рассчитать/Заявка на мобилке — скрыты жёстко */
  .hero__actions,
  .hero__actions.d-only {
    display: none !important;
  }

  /* ——— Segments 2×2 ——— */
  #segments .cols-4 {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  #segments .card {
    min-height: 0 !important;
    padding: 12px !important;
    gap: 4px !important;
  }

  #segments .card .t-h5 {
    font-size: 0.84rem !important;
    line-height: 1.25 !important;
  }

  #segments .card .t-mono {
    font-size: 0.62rem !important;
  }

  /* ——— System: 4 pills only ——— */
  .act-static {
    margin: 0 !important;
  }

  .node-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    border-top: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .node-grid > li {
    padding: 12px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(232, 238, 240, 0.12) !important;
    background: rgba(17, 50, 66, 0.55) !important;
    margin: 0 !important;
  }

  .node-grid .t-h5 {
    font-size: 0.8rem !important;
    line-height: 1.25 !important;
  }

  /* ——— Compact compare (m-compare) ——— */
  .m-compare.m-only {
    display: grid !important;
    gap: 10px;
  }

  .m-compare__head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 0 4px 2px;
  }

  .m-compare__col {
    text-align: center;
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-secondary);
  }

  .m-compare__col--plus {
    color: var(--text-accent);
  }

  .m-compare__row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 28px 10px 12px;
    border-radius: 12px;
    background: rgba(12, 38, 52, 0.65);
    border: 1px solid rgba(232, 238, 240, 0.1);
  }

  .m-compare__label {
    position: absolute;
    left: 50%;
    top: 8px;
    transform: translateX(-50%);
    z-index: 1;
    max-width: calc(100% - 24px);
    padding: 0 8px;
    background: rgba(12, 38, 52, 0.95);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    color: var(--text-accent);
    white-space: nowrap;
  }

  .m-compare__cell {
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--text-secondary);
    text-align: center;
    padding: 0 8px;
  }

  .m-compare__cell--plus {
    color: var(--text-primary);
    border-left: 2px solid var(--text-accent);
    padding-left: 10px;
  }

  /* ——— Mobile calculator (свой интерфейс) ——— */
  #calc .section__head {
    margin-bottom: 10px !important;
    gap: 4px !important;
    text-align: center !important;
  }

  #calc .section__head .t-d2 {
    font-size: 1.2rem !important;
  }

  #calc-embed,
  .calc-shell > .result {
    display: none !important;
  }

  .m-calc.m-only {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
  }

  .m-calc__progress {
    display: grid;
    gap: 6px;
  }

  .m-calc__progress span {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-accent);
  }

  .m-calc__bar {
    height: 3px;
    border-radius: 99px;
    background: rgba(232, 238, 240, 0.12);
    overflow: hidden;
  }

  .m-calc__bar i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--text-accent);
    transition: width 0.25s ease;
  }

  .m-calc__title {
    margin: 0 0 10px;
    font-size: 1.15rem;
    line-height: 1.2;
    font-weight: 600;
    color: var(--text-primary);
  }

  .m-calc__choices {
    display: grid;
    gap: 8px;
  }

  .m-calc__choices--2 {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .m-calc__choice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 56px;
    padding: 12px 12px;
    border-radius: 12px;
    border: 1px solid rgba(232, 238, 240, 0.16);
    background: rgba(17, 50, 66, 0.55);
    color: inherit;
    text-align: left;
    cursor: pointer;
  }

  .m-calc__choices--2 .m-calc__choice {
    min-height: 64px;
    padding: 10px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
  }

  .m-calc__choices--2 .m-calc__choice-mark {
    align-self: flex-end;
  }

  .m-calc__choice-text {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .m-calc__choice-text strong {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
  }

  .m-calc__choice-text small {
    font-size: 0.72rem;
    line-height: 1.25;
    color: var(--text-secondary);
  }

  .m-calc__choice-mark {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid rgba(232, 238, 240, 0.35);
    box-sizing: border-box;
  }

  .m-calc__choice.is-on {
    border-color: var(--text-accent);
    background: rgba(2, 219, 220, 0.08);
  }

  .m-calc__choice.is-on .m-calc__choice-mark {
    border-color: var(--text-accent);
    background: var(--text-accent);
    box-shadow: inset 0 0 0 3px rgba(12, 38, 52, 0.95);
  }

  .m-calc__extra {
    display: grid;
    gap: 6px;
    margin-top: 10px;
    font-size: 0.8rem;
    color: var(--text-secondary);
  }

  .m-calc__extra .input {
    max-width: 120px;
  }

  .m-calc__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    min-height: 40px;
  }

  .m-calc__nav .btn {
    min-height: 40px;
  }

  .m-calc__nav [data-m-calc-next] {
    margin-left: auto;
  }

  .m-calc__quote {
    display: grid;
    gap: 6px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid rgba(2, 219, 220, 0.28);
    background: rgba(7, 28, 42, 0.88);
  }

  .m-calc__quote-label {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-accent);
  }

  .m-calc__quote-price {
    margin: 0;
    font-size: clamp(1.25rem, 5.5vw, 1.55rem);
    font-weight: 600;
    line-height: 1.15;
    color: var(--text-accent);
  }

  .m-calc__quote-wait,
  .m-calc__quote-desc {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--text-secondary);
  }

  .m-calc__periods {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 4px;
  }

  .m-calc__period {
    min-height: 36px;
    padding: 6px 4px;
    border-radius: 10px;
    border: 1px solid rgba(232, 238, 240, 0.16);
    background: rgba(17, 50, 66, 0.45);
    color: var(--text-secondary);
    font-size: 0.68rem;
    cursor: pointer;
  }

  .m-calc__period.is-on {
    border-color: var(--text-accent);
    color: var(--text-primary);
    background: rgba(2, 219, 220, 0.1);
  }

  .m-calc__cta {
    margin-top: 6px;
    min-height: 44px;
  }

  /* ——— Trust: one short quote ——— */
  #trust .cols-2 {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin-bottom: 0 !important;
  }

  .quote {
    padding: 14px !important;
    margin: 0 !important;
  }

  .quote__text {
    font-size: 0.84rem !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ——— Final ——— */
  .final {
    padding-block: 28px !important;
  }

  .final__grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  .final__copy {
    order: -1 !important;
  }

  .final__meta li:nth-child(n + 3) {
    display: none !important;
  }

  #lead-form.is-m-pulse {
    outline: 1px solid var(--action-bg);
    box-shadow: 0 0 0 4px rgba(2, 219, 220, 0.18);
    border-radius: 16px;
  }

  /* ——— FAQ: лишние скрыты классом .m-hide в HTML ——— */
  #faq .section__cta {
    display: none !important;
  }
  .m-dock {
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 80 !important;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    background: rgba(4, 18, 28, 0.96) !important;
    border-top: 1px solid rgba(232, 238, 240, 0.12) !important;
  }

  .m-dock__inner {
    display: grid !important;
    grid-template-columns: 1fr 1.2fr !important;
    gap: 8px !important;
    max-width: 480px !important;
    margin: 0 auto !important;
  }

  .m-dock .btn {
    min-height: 44px !important;
    padding: 8px 6px !important;
    font-size: 0.76rem !important;
    border-radius: 12px !important;
  }

  .m-dock .btn[aria-current],
  .m-dock .btn[aria-current="true"] {
    border-color: unset !important;
    color: unset !important;
    background: unset !important;
  }

  .m-dock .btn--ghost[aria-current="true"] {
    border-color: rgba(232, 238, 240, 0.22) !important;
    color: var(--text-primary) !important;
    background: transparent !important;
  }

  .m-dock .btn--primary[aria-current="true"] {
    border-color: var(--action-bg, #02dbdc) !important;
    background: var(--action-bg, #02dbdc) !important;
    color: var(--action-fg, #04121c) !important;
  }

  .to-top {
    display: none !important;
    visibility: hidden !important;
  }

  .foot {
    padding-block: 16px 12px !important;
  }

  .foot .chrome__mark {
    display: none !important;
  }

  .foot__legal {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 8px !important;
  }

  .foot__meta {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 6px 10px !important;
    text-align: left !important;
    width: 100% !important;
  }

  .foot__meta a,
  .foot__copy {
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
    margin: 0 !important;
  }

  .final {
    background: transparent !important;
  }
}

@media (max-width: 479px) {
  #segments .card .t-h5 {
    font-size: 0.78rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .m-dock {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .m-bg__aurora,
  .m-bg__streaks {
    animation: none !important;
  }
}