/* ===================================================================
   ТвойОтчёт — мобильная раскладка (≤760px). Подключается после landing.css
   =================================================================== */
@media (max-width:760px){

  /* --mq-h — высота бегущей строки под героем: на неё герой не заходит,
     чтобы маркиза замыкала первый экран (как в референсе) */
  :root{--gutter:20px;--mq-big:clamp(46px,15.4vw,70px);--mq-pad:clamp(12px,2.2vh,22px);
        /* 1.04 обрезал выносные элементы («у», «д», «р») — им нужен свой запас */
        --mq-lh:1.18;--mq-safe:clamp(18px,6.5vh,48px);
        /* центр третьей строки заголовка: верхний отступ героя + 1.78 кегля.
           Считается из тех же величин, что задают заголовок, поэтому шар
           держится строки «БИЗНЕСА» на любом экране, а не «примерно там». */
        --hero-pad-top:clamp(78px,12vh,132px);
        --hero-fs:clamp(38px,min(17.6vw,8.4vh),92px);
        --title-line3-cy:calc(var(--hero-pad-top) + 1.78 * var(--hero-fs));
        --mq-h:calc(var(--mq-big) * var(--mq-lh) + var(--mq-pad) * 2 + var(--mq-safe));}

  /* ---------- плавающие контролы: EN + бургер ---------- */
  .nav{padding:16px var(--gutter);align-items:flex-start;}
  .nav.scrolled{padding-top:14px;padding-bottom:14px;}
  .nav-cta{display:none;}
  .nav-right{gap:10px;}
  .nav-lang{display:inline-flex;font:600 15px/1 var(--ui);color:var(--primary);opacity:1;background:rgba(255,255,255,.74);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1.5px solid var(--primary);border-radius:100px;padding:12px 18px;box-shadow:0 12px 30px -14px rgba(60,40,130,.35);}
  .nav-burger{width:48px;height:48px;background:rgba(232,230,240,.86);border-color:transparent;}
  .nav-burger span{width:18px;height:2px;}
  .nav-burger span:nth-child(2){width:12px;}
  .nav-brand{font-size:19px;}

  /* ---------- HERO: всё в поток ---------- */
  /* --hero-pad — боковое поле героя; на нём же считается кегль длинной строки заголовка */
  .hero{--hero-pad:16px;--hero-mar:8px;
        margin:var(--hero-mar);border-radius:26px;
        min-height:calc(100vh - var(--hero-mar) * 2 - var(--mq-h) - 64px);
        min-height:calc(100svh - var(--hero-mar) * 2 - var(--mq-h));
        /* --hero-fit ставит landing.js по visualViewport: единицы vh/svh на части
           мобильных браузеров больше реально видимой области, и лента срезалась */
        min-height:var(--hero-fit, calc(100svh - var(--hero-mar) * 2 - var(--mq-h)));
        display:flex;flex-direction:column;
        padding:var(--hero-pad-top) var(--hero-pad) 16px;}
  .hero-line,.hero-vnav,.scroll-badge{display:none;}
  /* шар остался единственным элементом фона — поднимаем из-под мокапа и делаем заметнее */
  .globe{left:auto;right:-15%;top:calc(var(--title-line3-cy) - 70px);width:140px;height:140px;opacity:.62;}
  .orbit-a{width:225px;height:225px;}
  .orbit-b{width:288px;height:288px;}
  /* на мобиле в фоне оставляем только земной шар и нить-траекторию */
  .blob-2{display:none;}
  /* Нить опущена на --sq-shift (~2 см) и проходит ЗА шаром: вырезаем её кружком
     точно по шару, иначе она просвечивает сквозь полупрозрачную сферу.
     Шар: right:-15%, d=140px → его центр по вертикали — --title-line3-cy.
     Маска считается ДО трансформа, поэтому из её Y вычитаем тот же сдвиг —
     тогда дырка остаётся ровно на шаре. */
  .hero-squiggle{--sq-shift:clamp(70px,14vh,120px);opacity:.5;
    transform:translateY(var(--sq-shift));
    -webkit-mask:radial-gradient(circle 80px at calc(113% - 70px) calc(var(--title-line3-cy) - var(--sq-shift)),transparent 0 70px,#000 80px);
            mask:radial-gradient(circle 80px at calc(113% - 70px) calc(var(--title-line3-cy) - var(--sq-shift)),transparent 0 70px,#000 80px);}

  .hero-content{position:static;transform:none;max-width:100%;pointer-events:auto;margin-bottom:auto;}
  .hero-display{font-size:var(--hero-fs);line-height:.92;}
  .hero-display .hl{margin-bottom:.05em;}
  .hero-display .with-badge{padding-left:0;}
  /* «CRM-КОНСТРУКТОР» — самая длинная строка: подбираем кегль так,
     чтобы она вставала от края до края и не переносилась */
  .hero-display .hl-thin .line-in{
    font-size:min(.66em, calc((100vw - var(--hero-mar) * 2 - var(--hero-pad) * 2 - 6px) / 9.9));
    white-space:nowrap;}

  /* строка «Scroll Down» */
  .hero-scrollrow{display:flex;align-items:center;gap:14px;margin:clamp(13px,2.3vh,24px) 0 clamp(10px,1.8vh,18px);}
  .hs-circle{position:relative;flex:none;width:clamp(52px,7.8vh,72px);height:clamp(52px,7.8vh,72px);border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 18px 40px -16px rgba(70,45,140,.4);animation:hsVibe 1.5s ease-in-out infinite;}
  .hs-circle::before{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid rgba(124,91,255,.55);pointer-events:none;animation:badgePing 1.5s ease-out infinite;}
  .hs-circle svg{width:22px;height:22px;}
  .hs-line{flex:1;height:1px;background:rgba(255,255,255,.7);}
  .hs-lbl{flex:none;font:400 17px/1.25 var(--read);color:#fff;text-align:right;}

  /* рейтинг */
  .hero-rating{position:static;padding:0;gap:12px;align-self:flex-start;max-width:100%;}
  .hero-rating:hover{background:none;box-shadow:none;}
  .hero-rating .rate-text{display:block;font-size:13.5px;color:#fff;overflow:hidden;text-overflow:ellipsis;}

  /* мокап-карточка внизу героя — компактная, прижата к низу героя */
  .hero-showcase{display:block;position:static;width:80%;margin-top:auto;padding-top:clamp(10px,2vh,20px);pointer-events:auto;}
  .show-wrap{transform:none;}
  .show-mock{transform:none;border-radius:14px;box-shadow:0 26px 60px -26px rgba(46,28,110,.5);}
  .show-mock::after{display:none;}
  .show-mock .dash{grid-template-columns:44px 1fr;min-height:0;}
  .browser-bar{padding:clamp(8px,1.35vh,13px) 14px;}
  .browser-bar .url{height:clamp(20px,3.1vh,26px);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;line-height:2.1;}
  .dash-side{padding:12px 0;gap:10px;}
  .dash-side .si{width:24px;height:24px;border-radius:7px;}
  .dash-main{padding:clamp(10px,1.6vh,15px);}
  .dash-head{margin-bottom:clamp(8px,1.5vh,16px);}
  .dash-h-title{font-size:clamp(14px,2.2vh,18px);}
  .dash-stats{gap:7px;margin-bottom:0;}
  .dash-stat{padding:clamp(6px,1.1vh,10px);border-radius:11px;}
  .dash-stat .v{font-size:clamp(16px,2.6vh,21px);margin-top:4px;}
  .dash-kanban{display:none;}
  /* кнопка сидит на правом крае мокапа и наполовину выходит за него */
  .play-btn{width:78px;height:78px;left:100%;top:50%;}
  .play-btn .ring{inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px);}
  .play-btn .ring text{font-size:6.9px;}
  /* места под три плитки стало меньше — убираем боковую панель мокапа */
  .show-mock .dash{grid-template-columns:1fr;}
  .dash-side{display:none;}
  .demo-close{display:none;}

  /* ---------- маркизы ---------- */
  .marquee.big{padding:var(--mq-pad) 0;}
  .marquee.big .mq-item{font-size:var(--mq-big);line-height:var(--mq-lh);}
  .marquee .mq-item{font-size:clamp(26px,7.5vw,34px);gap:20px;padding-right:20px;}
  .logos-track .logo-cell{min-width:148px;min-height:92px;padding:0 22px;}
  .logos-track .lg{font-size:19px;}

  /* ---------- общие секции ---------- */
  .section{padding:64px 0;}
  .sec-label{margin-bottom:18px;font-size:12.5px;}

  /* 01 — возможности */
  .svc-lede{font-size:clamp(23px,6.6vw,29px);line-height:1.2;margin-bottom:26px;}
  .svc-grid{gap:14px;}
  .svc-card{min-height:min(120vw,470px);border-radius:22px;}
  .svc-body{padding:26px 22px;}
  .svc-title{font-size:31px;}
  .svc-desc{font-size:14.5px;min-height:0;padding-top:18px;max-width:none;}
  .svc-tags{flex-wrap:wrap;margin-top:16px;}
  .svc-tags span{font-size:12px;padding:8px 12px;}

  /* 02 — команда + цифры */
  .ab-title{font-size:clamp(28px,8.6vw,38px);}
  .ab-lead{font-size:17px;}
  .ab-numlabel{margin-top:34px;}
  .ab-stats{grid-template-columns:1fr 1fr;gap:10px;}
  .ab-stat{padding:18px 16px;border-radius:18px;}
  .ab-n{font-size:34px;}
  .ab-stat-d{font-size:12.5px;}
  .ab-deco{width:64px;height:64px;}
  .ab-right{display:none;}
  .ab-cta{align-self:flex-start;}

  /* 03 — ниши (тёмная) */
  .estate-sec{padding:64px 0;}
  .estate-eyebrow{font-size:12px;}
  .estate-display{font-size:clamp(36px,11vw,54px);}
  .estate-ast{display:none;}
  .estate-tag{font-size:16px;}
  /* обе кнопки в одну строку: кегль и боковые поля тянутся за шириной экрана,
     чтобы подписи не переносились даже на 320px */
  .estate-actions{flex-direction:row;align-items:stretch;flex-wrap:nowrap;gap:8px;}
  .estate-actions a{flex:1 1 auto;min-width:0;justify-content:center;white-space:nowrap;
                    padding:14px clamp(10px,3.4vw,22px);font-size:clamp(12px,3.6vw,14px);}

  /* 04 — витрина экранов: раскладку задаёт блок @media(max-width:820px) в landing.css */

  /* 05 — задачи */  .extra-sub{font-size:16px;max-width:none;}
  .extra-display{font-size:clamp(30px,9vw,42px);}
  .cmpx-cap{font-size:12px;}
  .cmp-o-list li{font-size:14.5px;}
  .stmt{padding:34px 20px;}
  .stmt-h{font-size:clamp(22px,6.4vw,28px);}
  .svc3-grid{gap:14px;}
  .svc3{aspect-ratio:auto;min-height:min(126vw,560px);border-radius:22px;}
  .svc3-body{position:relative;inset:auto;min-height:min(126vw,560px);}
  .svc3-t{white-space:normal;}
  .svc3-body{padding:26px 22px;}
  .svc3-t{font-size:30px;line-height:1.05;}
  .svc3-desc{font-size:14px;}
  .svc3-tags{flex-wrap:wrap;gap:8px;}
  .svc3-tags span{font-size:12px;padding:8px 12px;}

  /* начинку телефонов не жмём: они рисуются в десктопном размере и уменьшаются масштабом */

  /* CTA */
  .cta{border-radius:24px;}
  .cta-title{font-size:clamp(30px,9vw,40px);}
  .cta-sub{font-size:16.5px;}
  .cta-actions{flex-direction:column;align-items:stretch;gap:10px;}
  .cta-actions .btn{justify-content:center;width:100%;}

  /* футер */
  .foot{grid-template-columns:1fr 1fr;gap:30px 20px;}
  .foot-brand{grid-column:1 / -1;}
  /* правовые ссылки — во всю ширину и в две колонки по три:
     шесть строк вместо двенадцати, подвал становится вдвое короче */
  .foot > .foot-col:last-child{grid-column:1 / -1;display:grid;
                               grid-template-columns:1fr 1fr;column-gap:18px;}
  .foot > .foot-col:last-child h5{grid-column:1 / -1;}
  .foot-col h5{font-size:16px;}
  .foot-col a{font-size:14.5px;padding:5px 0;}
  .foot-legal a{padding:4px 0;display:inline-block;}
  .extra-link{padding:9px 0;}
  .mfoot-mail{display:inline-flex;align-items:center;min-height:34px;}
  .nav-brand{gap:9px;}

  /* полноэкранное меню */
  .menu-link{font-size:clamp(28px,min(9vw,6.4vh),46px);}
  .menu-nav{padding-left:0;}
  .menu-link .ml-dash{display:none;}
  .menu-nav{gap:2px;}
  .mfoot-tag{display:none;}
}

@media (max-width:400px){
  .hs-circle{width:clamp(48px,7.2vh,60px);}
  .hs-lbl{font-size:15px;}
  .svc-title{font-size:27px;}
  .svc3-t{font-size:26px;}
}

/* строка Scroll Down — только мобильная */
@media (min-width:761px){.hero-scrollrow{display:none;}}

@media (max-width:760px){.nq-chips{gap:7px;margin-top:14px;}.nq-chips button{font-size:12.5px;padding:0 15px;min-height:44px;display:inline-flex;align-items:center;}}

/* вибрация мобильного кружка «Листайте вниз» (аналог badgeVibe у .scroll-badge) */
@keyframes hsVibe{
  0%,12%,100%{transform:rotate(0deg);}
  3%{transform:translateX(-1.6px) rotate(-3deg);}
  6%{transform:translateX(1.6px) rotate(3deg);}
  9%{transform:translateX(-1px) rotate(-1.5deg);}
}
@media (prefers-reduced-motion:reduce){
  .hs-circle{animation:none;}
  .hs-circle::before{animation:none;opacity:0;}
}