/* =========================
   NOYTRIX MOBILE OVERRIDES
   only mobile / desktop untouched
   ========================= */

@media (max-width: 980px) {
  html, body {
    overflow-x: hidden !important;
  }

  .container {
    width: min(calc(100% - 28px), 1240px) !important;
  }

  .header {
    background: rgba(5, 7, 13, 0.92) !important;
    backdrop-filter: blur(18px) !important;
  }

  .nav {
    min-height: 74px !important;
    gap: 12px !important;
  }

  .brand {
    min-width: 0 !important;
    max-width: calc(100% - 58px) !important;
    gap: 10px !important;
  }

  .brand-text {
    font-size: 15px !important;
    line-height: 1 !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .nav-toggle {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    flex: 0 0 42px !important;
  }

  .mobile-nav {
    padding: 14px 16px 18px !important;
    gap: 12px !important;
  }

  .mobile-nav a {
    color: #eef2ff !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
  }

  .mobile-nav .mobile-lang-switcher {
    display: flex !important;
    gap: 8px !important;
    padding-top: 4px !important;
    margin-bottom: 2px !important;
  }

  .mobile-nav .mobile-lang-switcher .lang-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 46px !important;
    height: 40px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    background: rgba(255,255,255,0.04) !important;
    color: #c8d2ea !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0.03em !important;
  }

  .mobile-nav .mobile-lang-switcher .lang-btn.active,
  .mobile-nav .mobile-lang-switcher a[style*="#ffb020"] {
    color: #11151d !important;
    background: linear-gradient(135deg, #ffbf47, #ff9c1f) !important;
    border-color: transparent !important;
    box-shadow: 0 10px 24px rgba(255,176,32,.22) !important;
  }

  .hero {
    padding-top: 28px !important;
    padding-bottom: 34px !important;
    overflow: hidden !important;
  }

  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    align-items: start !important;
  }

  .hero-copy,
  .hero-content,
  .hero-text,
  .hero-left,
  .hero-main-copy {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    justify-self: stretch !important;
    transform: none !important;
  }

  .hero-copy h1,
  .hero-content h1,
  .hero-text h1,
  .hero-left h1,
  .hero-main-copy h1,
  .hero-heading {
    max-width: 100% !important;
    margin: 0 0 14px !important;
    text-align: left !important;
    font-size: clamp(34px, 9.5vw, 48px) !important;
    line-height: 0.96 !important;
    letter-spacing: -0.05em !important;
  }

  .hero-copy p,
  .hero-content p,
  .hero-text p,
  .hero-left p,
  .hero-main-copy p,
  .hero-text {
    max-width: 100% !important;
    margin: 0 0 18px !important;
    text-align: left !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  .eyebrow {
    margin-bottom: 14px !important;
    padding: 7px 12px !important;
    font-size: 10px !important;
    letter-spacing: 0.14em !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 0 18px !important;
    justify-content: stretch !important;
  }

  .hero-actions > * {
    width: 100% !important;
    min-width: 0 !important;
  }

  .hero-actions .btn,
  .hero-actions .store-btn {
    width: 100% !important;
    min-height: 54px !important;
    justify-content: center !important;
  }

  .hero-visual {
    min-height: auto !important;
    display: block !important;
  }

  .hero-shot-wrap {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 auto !important;
    overflow: visible !important;
  }

  .hero-desktop-shot {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    border-radius: 22px !important;
  }

  .hero-mobile-shot {
    position: absolute !important;
    width: clamp(110px, 28vw, 150px) !important;
    right: 6px !important;
    bottom: -12px !important;
    top: auto !important;
    margin: 0 !important;
    filter: drop-shadow(0 16px 34px rgba(0,0,0,.55)) !important;
    z-index: 2 !important;
  }

  .trusted-strip {
    overflow: hidden !important;
  }

  .trusted-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    justify-content: stretch !important;
  }

  .trusted-row span {
    width: 100% !important;
  }

  #mobile-experience {
    padding: 34px 0 24px !important;
  }

  #mobile-experience .mx-wrap {
    padding: 0 14px !important;
  }

  #mobile-experience .mx-head {
    margin: 0 auto 18px !important;
  }

  #mobile-experience .mx-head h2 {
    font-size: clamp(26px, 8vw, 36px) !important;
    line-height: 1.02 !important;
  }

  #mobile-experience .mx-head p {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  #mobile-experience .mx-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 18px !important;
  }

  #mobile-experience .mx-shot {
    border-radius: 20px !important;
  }

  .desktop-copy h2,
  .api-copy h2,
  .section-heading h2,
  .showcase-copy h2,
  .form-copy h2,
  .sales-copy h2 {
    font-size: clamp(28px, 8vw, 40px) !important;
    line-height: 1.02 !important;
  }

  .desktop-copy p,
  .api-copy p,
  .section-heading p,
  .showcase-copy p,
  .form-copy p,
  .sales-copy p {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  .desktop-panel-image,
  .desktop-image-shell,
  .desktop-panel-shell {
    border-radius: 22px !important;
  }

  .contact-sales-card {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 18px !important;
    padding: 24px 16px !important;
  }

  .contact-sales-copy {
    max-width: 100% !important;
  }

  .contact-sales-copy h2 {
    font-size: clamp(28px, 8vw, 40px) !important;
    line-height: 1 !important;
  }

  .contact-sales-copy p {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  .contact-sales-actions {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: stretch !important;
  }

  .contact-sales-actions .btn {
    width: 100% !important;
  }
}

@media (max-width: 640px) {
  .container {
    width: min(calc(100% - 22px), 1240px) !important;
  }

  .brand-text {
    font-size: 14px !important;
  }

  .hero {
    padding-top: 24px !important;
    padding-bottom: 28px !important;
  }

  .hero-heading,
  .hero-copy h1 {
    font-size: clamp(30px, 10vw, 42px) !important;
  }

  .hero-mobile-shot {
    width: 108px !important;
    right: 2px !important;
    bottom: -8px !important;
  }

  .hero-desktop-shot {
    border-radius: 18px !important;
  }

  .mobile-nav {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .mobile-nav a {
    font-size: 14px !important;
    padding: 9px 11px !important;
  }
}

/* ===== MOBILE PREMIUM HERO V2 ===== */
@media (max-width: 980px) {
  .header{
    background: rgba(4,7,14,.94) !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
  }

  .nav{
    min-height: 72px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  .brand-logo-icon{
    width: 24px !important;
    height: 24px !important;
    margin-right: 0 !important;
  }

  .brand-text{
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
  }

  .nav-toggle{
    width: 44px !important;
    height: 44px !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.03) !important;
  }

  .hero{
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    background:
      radial-gradient(circle at 15% 15%, rgba(255,176,32,.10), transparent 34%),
      radial-gradient(circle at 85% 10%, rgba(38,83,255,.14), transparent 32%) !important;
  }

  .hero-grid{
    gap: 18px !important;
  }

  .hero-copy{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .eyebrow{
    margin-bottom: 10px !important;
    padding: 8px 12px !important;
    font-size: 10px !important;
    letter-spacing: .16em !important;
    border-color: rgba(255,176,32,.24) !important;
    background: rgba(255,176,32,.06) !important;
  }

  .hero-copy h1,
  .hero-heading{
    margin: 0 0 12px !important;
    font-size: clamp(24px, 10.2vw, 44px) !important;
    line-height: .93 !important;
    letter-spacing: -.06em !important;
    text-wrap: balance !important;
  }

  .hero-heading-accent{
    display: block !important;
    color: #ffb020 !important;
  }

  .hero-heading-main{
    display: block !important;
    color: #eef2ff !important;
  }

  .hero-text{
    margin: 0 0 16px !important;
    max-width: 92% !important;
    font-size: 15px !important;
    line-height: 1.52 !important;
    color: #b7c1da !important;
  }

  .hero-actions{
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 0 12px !important;
  }

  .hero-actions .store-btn,
  .hero-actions .btn{
    width: 100% !important;
    min-height: 58px !important;
    border-radius: 22px !important;
    padding: 14px 18px !important;
    justify-content: flex-start !important;
  }

  .store-btn-kicker{
    font-size: 11px !important;
    letter-spacing: .18em !important;
    opacity: .78 !important;
  }

  .store-btn-title{
    font-size: 15px !important;
    line-height: 1.1 !important;
  }

  .hero-visual{
    margin-top: 4px !important;
  }

  .hero-shot-wrap{
    position: relative !important;
    width: 100% !important;
    border-radius: 26px !important;
    overflow: hidden !important;
    padding: 10px !important;
    background:
      linear-gradient(180deg, rgba(13,18,31,.95), rgba(8,11,22,.98)) !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.36) !important;
  }

  .hero-desktop-shot{
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 18px !important;
    opacity: .98 !important;
  }

  .hero-mobile-shot{
    width: 92px !important;
    right: 8px !important;
    bottom: 8px !important;
    top: auto !important;
    border-radius: 18px !important;
    filter: drop-shadow(0 10px 24px rgba(0,0,0,.45)) !important;
  }
}

@media (max-width: 640px) {
  .hero-copy h1,
  .hero-heading{
    font-size: clamp(22px, 9.8vw, 38px) !important;
  }

  .hero-text{
    max-width: 100% !important;
    font-size: 14px !important;
  }

  .hero-mobile-shot{
    width: 84px !important;
    right: 6px !important;
    bottom: 6px !important;
  }
}

/* ===== BURGER FIX + PREMIUM MOBILE MENU ===== */
@media (max-width: 980px){
  .header{
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
  }

  .nav{
    position: relative !important;
    z-index: 10001 !important;
  }

  .nav-toggle{
    display: inline-flex !important;
    position: relative !important;
    z-index: 10003 !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .mobile-nav{
    display: none !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 12px !important;
    right: 12px !important;
    z-index: 10002 !important;
    padding: 14px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    background:
      linear-gradient(180deg, rgba(10,14,24,.98), rgba(6,9,18,.99)) !important;
    box-shadow: 0 22px 70px rgba(0,0,0,.45) !important;
    backdrop-filter: blur(18px) !important;
  }

  .mobile-nav.open{
    display: flex !important;
  }

  .mobile-nav a{
    display: block !important;
    width: 100% !important;
  }
}

/* ===== BURGER FIX + PREMIUM MOBILE MENU ===== */
@media (max-width: 980px){
  .header{
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
  }

  .nav{
    position: relative !important;
    z-index: 10001 !important;
  }

  .nav-toggle{
    display: inline-flex !important;
    position: relative !important;
    z-index: 10003 !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .mobile-nav{
    display: none !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 12px !important;
    right: 12px !important;
    z-index: 10002 !important;
    padding: 14px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    background:
      linear-gradient(180deg, rgba(10,14,24,.98), rgba(6,9,18,.99)) !important;
    box-shadow: 0 22px 70px rgba(0,0,0,.45) !important;
    backdrop-filter: blur(18px) !important;
  }

  .mobile-nav.open{
    display: flex !important;
  }

  .mobile-nav a{
    display: block !important;
    width: 100% !important;
  }
}

/* ===== PREMIUM CARDS SYSTEM ===== */
@media (max-width: 980px){

  .card,
  .feature,
  .stat,
  .box,
  .pricing-card,
  .faq-item{
    border-radius: 20px !important;
    padding: 18px !important;
    background:
      linear-gradient(180deg, rgba(20,24,40,.9), rgba(10,12,22,.95)) !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    box-shadow:
      0 10px 30px rgba(0,0,0,.35),
      inset 0 1px 0 rgba(255,255,255,.04) !important;
    backdrop-filter: blur(14px) !important;
    margin-bottom: 14px !important;
  }

  /* убираем "плоскость" */
  section{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ===== STATS PREMIUM ===== */
  .stat strong,
  .stat .value{
    font-size: 28px !important;
    font-weight: 800 !important;
    background: linear-gradient(90deg,#ffb020,#ffd080) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
  }

  .stat p{
    font-size: 13px !important;
    color: #A8B4CF !important;
    margin-top: 6px !important;
  }

  /* ===== TEXT CLEAN ===== */
  h2{
    font-size: 22px !important;
    line-height: 1.2 !important;
    margin-bottom: 10px !important;
  }

  p{
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  /* ===== FAQ PREMIUM ===== */
  .faq-item{
    padding: 16px !important;
  }

  .faq-item h3{
    font-size: 15px !important;
    font-weight: 600 !important;
  }

  /* ===== BUTTON DEPTH ===== */
  a.button,
  button{
    border-radius: 16px !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.3) !important;
  }

}

/* ===== REMOVE HERO SCREEN + CENTER EVERYTHING ===== */
@media (max-width: 980px){

  /* УБРАТЬ СКРИНЫ */
  .hero img,
  .hero video,
  .hero .image,
  .hero .mockup{
    display: none !important;
  }

  /* ЦЕНТР ВСЕГО HERO */
  .hero{
    text-align: center !important;
    align-items: center !important;
  }

  .hero h1,
  .hero p{
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero .cta{
    align-items: center !important;
  }

  /* СПИСОК ПОД HERO */
  .hero ul,
  .hero li{
    text-align: center !important;
  }

  /* ВСЕ СЕКЦИИ В ЦЕНТР */
  section,
  .card,
  .feature,
  .box{
    text-align: center !important;
  }

  /* УБРАТЬ ЛЕВЫЕ ОТСТУПЫ */
  ul{
    padding-left: 0 !important;
    list-style: none !important;
  }

}

/* ===== HERO CLEAN PREMIUM ===== */
@media (max-width: 980px){

  /* УБРАТЬ СИНЮЮ ПОЛОСКУ */
  .hero::after,
  .hero::before,
  .hero .line,
  .hero .divider{
    display: none !important;
  }

  /* УБРАТЬ НИЖНИЙ ТЕКСТ */
  .hero ul,
  .hero li,
  .hero .features,
  .hero .list{
    display: none !important;
  }

  /* СКРИН ТОЛЬКО ТЕЛЕФОН */
  .hero img,
  .hero video{
    display: block !important;
    max-width: 220px !important;
    margin: 0 auto 16px auto !important;
    border-radius: 22px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.6) !important;
  }

  /* ПОДНЯТЬ СКРИН ВВЕРХ */
  .hero img{
    order: -1 !important;
  }

  /* КНОПКИ НИЖЕ */
  .hero .cta{
    margin-top: 10px !important;
  }

}