/* ============================================================
   Akdeniz — телефон. Отдельный слой поверх десктопных стилей:
   на узком экране половина механик мешает, а не помогает.
   Полноценный мобильный дизайн будет отдельно.
   ============================================================ */

@media (max-width:900px){

  /* ---------- 1. Никаких сцен и появлений ---------- */
  /* карточки видны сразу: на телефоне ждать «сборку» никто не станет */
  .js .stage .payload,
  .js .stage .payload .card,
  .js .stage--code .card,
  .js .stage--wire .steps li,
  .js .stage .gains,
  .js .stage .gains li,
  .js .stage--blur .case__body{ opacity:1 !important; animation:none !important; }
  .js .stage--blur .case__shot{ filter:none !important; transform:none !important; animation:none !important; }
  .card--svc,.steps li,.gains li{ animation:none !important; }
  /* служебные слои механик не нужны совсем */
  .code,.diff,.caret{ display:none !important; }
  /* значок повтора нечего повторять */
  .restage{ display:none; }
  /* бегущая кайма и стекло — лишняя работа для телефона */
  .card::before,.steps li::before,.gains li::before,
  .stage::before,.contact__row::before,.status::before,
  .cgrid > div::before,.cmetrics div::before{ animation:none !important; }

  /* сцена перестаёт быть «сценой» и становится просто контейнером */
  .stage{ padding:0; border:0; background:none; box-shadow:none; backdrop-filter:none; }

  /* ---------- 2. Глубиномер ---------- */
  .rail{ display:none; }
  .section,.foot{ padding-right:clamp(20px,5vw,40px); }
  /* без троса секции никто не «зажигает» */
  .section.dim{ opacity:1 !important; transform:none !important; }

  /* ---------- 3. Терминал ---------- */
  .term{ display:none; }
  .stage--term .contact{ margin-top:0; }

  /* ---------- 6. Кот ---------- */
  .cat{ display:none; }
  #hooked{ padding-bottom:clamp(70px,10vh,110px) !important; }

  /* ---------- 5. Карточки услуг компактнее ---------- */
  .cards{ gap:12px; }
  .card--svc{ border-radius:16px 28px 16px 16px; }
  .card--svc h3{ margin:18px 0 6px; padding:0 16px; font-size:19px; }
  .card--svc .svc__sub{ margin:0 0 12px; padding:0 16px; font-size:12px; }
  .card--svc .svc__text{
    margin:0 0 16px; padding:0 16px; font-size:13.5px; line-height:1.5;
    text-align:left;
  }
  .card--svc h3,
  .card--svc .svc__sub{ text-align:left; }
  .svc__top{ padding:14px 16px 0; }

  /* 5.1 полка: цена слева, кнопка справа и обе в пределах карточки */
  .svc__foot{
    display:grid; grid-template-columns:1fr auto; align-items:center;
    gap:10px; padding:11px 14px 11px 16px;
  }
  .svc__meta{ min-width:0; }
  .svc__price{ font-size:13.5px; }
  .svc__term{ font-size:11.5px; }
  .card--svc .svc__go{
    padding:9px 14px; font-size:12.5px; white-space:nowrap;
    justify-self:end;
  }

  /* ---------- 7. Четыре шага — вертикальная лента ---------- */
  .stage--wire .steps{
    display:block; padding:0 0 0 26px; position:relative;
  }
  /* одна линия сверху вниз вместо провода поперёк */
  .stage--wire .steps::before{
    content:""; position:absolute; left:5px; top:6px; bottom:6px; right:auto;
    width:2px; height:auto;
    background:linear-gradient(180deg,
      var(--accent) 0%, rgba(53,224,200,.35) 60%, rgba(53,224,200,0) 100%);
  }
  .stage--wire .steps::after{ display:none; }
  .stage--wire .steps li{
    background:none; box-shadow:none; border-radius:0;
    padding:0 0 22px; margin:0;
  }
  .stage--wire .steps li::before{ display:none; }   /* кайма ни к чему */
  .stage--wire .steps li:last-child{ padding-bottom:0; }
  .node{
    position:absolute; left:-26px; top:5px;
    width:12px; height:12px; margin:0;
    background:var(--deep); border:2px solid var(--accent); border-radius:50%;
  }
  .steps li:nth-child(n) .node{ border-color:var(--svc); }
  .steps b{ font-size:11px; letter-spacing:.1em; }
  .steps h3{ margin:2px 0 5px; font-size:17px; }
  .steps p{ font-size:14px; line-height:1.5; }
  /* на телефоне – короткая формулировка вместо полной */
  .steps__long{ display:none; }
  .steps__short{ display:block; }

  /* ---------- 4. Строка «на связи» ---------- */
  .status{
    display:grid; grid-template-columns:auto 1fr; align-items:center;
    gap:6px 10px; width:100%; padding:14px 16px; border-radius:16px;
  }
  .status__dot{ grid-row:1; }
  .status__text{ grid-row:1; font-size:14px; color:var(--foam); font-weight:600; }
  .status__clock{
    grid-column:1 / -1; grid-row:2;
    display:flex; gap:4px; align-items:baseline; font-size:13px;
  }
  .status__clock--msk{ grid-row:3; }
  .status__clock em{ margin-left:6px; }
}