/* APX iPhone/mobile performance + menu v3 */
@media (max-width:1050px){
  .site-header{z-index:5000!important}
  .menu-toggle{
    display:flex!important; align-items:center!important; justify-content:center!important;
    width:44px!important; height:44px!important; padding:0!important;
    border:1px solid rgba(255,255,255,.38)!important; background:#071a13!important;
    position:relative!important; z-index:5002!important; cursor:pointer!important;
    touch-action:manipulation!important; -webkit-tap-highlight-color:transparent!important;
  }
  .menu-icon,.menu-icon:before,.menu-icon:after{
    display:block!important; width:20px!important; height:2px!important; border-radius:2px!important;
    background:#fff!important; content:""; position:absolute!important; left:50%!important;
    transform:translateX(-50%)!important; transition:transform .18s ease,opacity .12s ease!important;
  }
  .menu-icon{top:50%!important; margin-top:-1px!important}
  .menu-icon:before{top:-7px!important}
  .menu-icon:after{top:7px!important}
  .site-header.menu-open .menu-icon{background:transparent!important}
  .site-header.menu-open .menu-icon:before{top:0!important;transform:translateX(-50%) rotate(45deg)!important}
  .site-header.menu-open .menu-icon:after{top:0!important;transform:translateX(-50%) rotate(-45deg)!important}
  .site-header.menu-open>.main-nav{
    display:flex!important; position:fixed!important; z-index:5001!important;
    top:76px!important; left:0!important; right:0!important; bottom:0!important;
    width:auto!important; height:auto!important; margin:0!important;
    padding:12px 24px calc(24px + env(safe-area-inset-bottom))!important;
    background:#06140f!important; flex-direction:column!important; justify-content:flex-start!important;
    align-items:stretch!important; gap:0!important; overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important; overscroll-behavior:contain!important;
  }
  .site-header.menu-open>.main-nav>a{
    display:flex!important; align-items:center!important; width:100%!important; min-height:58px!important;
    padding:14px 0!important; margin:0!important; border-bottom:1px solid rgba(255,255,255,.13)!important;
    color:#fff!important; font-size:15px!important; line-height:1.2!important; letter-spacing:.1em!important;
    text-transform:uppercase!important; touch-action:manipulation!important;
  }
  .site-header.menu-open>.main-nav>a:after{display:none!important}
  body.menu-lock{overflow:hidden!important; overscroll-behavior:none!important}
}

@media (max-width:760px){
  html{scroll-behavior:auto!important}
  body{overflow-x:hidden!important}
  .topline{display:none!important}
  .site-header{
    height:76px!important; padding:0 18px!important; top:0!important;
    background:#06140f!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important;
    transform:none!important; will-change:auto!important;
  }
  .brand{gap:10px!important}
  .brand-emblem{width:44px!important;height:48px!important}
  .brand-wordmark{width:82px!important;height:auto!important}
  .main-nav,.header-cta{display:none!important}
  .site-header.menu-open>.main-nav{display:flex!important}

  /* Keep Safari out of expensive compositing paths. */
  .hero:after{filter:none!important}
  .hero:before,.hero:after,.hero-content,.hero-finale,.hero-finale-emblem,
  .equipment-visual--photo img,.equipment-card>button{
    transition:none!important; animation:none!important; will-change:auto!important;
  }
  .hero{
    height:100svh!important; min-height:640px!important; max-height:none!important;
    background-position:58% top!important;
  }
  .hero-video{
    top:76px!important; height:calc(100% - 76px)!important; object-position:58% top!important;
    transform:none!important; will-change:auto!important; -webkit-transform:none!important;
  }
  .hero-video-status i:after{animation-duration:1.6s!important}
  .hero-finale{
    left:14px!important; right:14px!important; width:auto!important; top:88px!important; bottom:14px!important;
    max-height:none!important; padding:22px 18px!important; transform:none!important; overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important;
    box-shadow:0 12px 30px rgba(0,0,0,.22)!important;
  }
  .hero.story-ended .hero-finale{transform:none!important}
  .hero-finale h2{font-size:clamp(31px,9.4vw,42px)!important;line-height:.96!important}
  .hero-finale>p{margin-bottom:12px!important}
  .hero-finale>span{margin:10px 0 12px!important;font-size:11px!important;line-height:1.45!important}
  .hero-form-grid{grid-template-columns:1fr!important;gap:7px!important;margin-bottom:12px!important}
  .hero-form-grid label:last-child{grid-column:auto!important}
  .hero-form-grid input,.hero-form-grid select{height:34px!important;margin-top:2px!important;padding:4px 0!important;font-size:12px!important}
  .hero-finale .button{min-height:44px!important;padding:0 12px!important;font-size:8px!important}
  .hero-finale-emblem{display:none!important}

  /* Native touch: remove desktop hover/compositing effects. */
  .equipment-card:hover .equipment-visual--photo img{transform:none!important}
  .equipment-modal{align-items:end!important;padding:0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(1,11,7,.92)!important}
  .equipment-dialog{grid-template-columns:1fr!important;max-height:94svh!important;box-shadow:none!important}
  .equipment-dialog-head{min-height:360px!important;padding:220px 24px 26px!important}
  .equipment-dialog-product{height:180px!important;top:18px!important;left:18px!important;right:18px!important}
  .equipment-order-emblem{height:86px!important;margin-top:12px!important}
  .equipment-order-form{padding:30px 22px 26px!important}
  .equipment-order-grid{grid-template-columns:1fr!important;gap:0!important}

  .section-pad{padding-left:18px!important;padding-right:18px!important}
  .button,a,button{touch-action:manipulation}
}

/* Extra iOS-only reductions. This class is set by apx-lite.js. */
html.ios .site-header,html.ios .hero-finale,html.ios .equipment-modal{
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important
}
html.ios .hero:after{filter:none!important}
html.ios .hero-video{will-change:auto!important}
html.ios body{-webkit-font-smoothing:antialiased}

@media (max-width:390px){
  .site-header{padding:0 14px!important}
  .brand-wordmark{width:78px!important}
  .site-header.menu-open>.main-nav{padding-left:20px!important;padding-right:20px!important}
  .site-header.menu-open>.main-nav>a{min-height:54px!important;font-size:14px!important}
  .hero-finale{left:10px!important;right:10px!important;padding:18px 15px!important}
  .hero-finale h2{font-size:30px!important}
}

/* APX mobile finale v4 — static embossed background + transparent form.
   Header/menu rules above are intentionally left unchanged. */
@media (max-width:760px){
  .hero.story-ended{
    height:100svh!important;
    min-height:820px!important;
    max-height:none!important;
    background-color:#03130e!important;
    background-image:url('/apx-mobile-finale-bg-v2.webp')!important;
    background-repeat:no-repeat!important;
    background-size:100% auto!important;
    background-position:center 76px!important;
    overflow:hidden!important;
  }

  /* Once the intro ends, show the supplied APX image itself — no stretching,
     blur or extra emblem layer. */
  .hero.story-ended .hero-video,
  .hero.story-ended .hero-video-status{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
  .hero.story-ended:before,
  .hero.story-ended:after{
    display:none!important;
    content:none!important;
  }
  .hero.story-ended .hero-finale-emblem{display:none!important}

  /* Place the existing form over the lower part of the image. The form panel
     itself is transparent; only the fields/text/button remain visible. */
  .hero.story-ended .hero-finale{
    display:block!important;
    opacity:1!important;
    pointer-events:auto!important;
    position:absolute!important;
    top:max(360px,49svh)!important;
    left:20px!important;
    right:20px!important;
    bottom:auto!important;
    width:auto!important;
    max-height:none!important;
    overflow:visible!important;
    padding:0!important;
    margin:0!important;
    transform:none!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }

  .hero.story-ended .hero-finale>p{margin:0 0 14px!important}
  .hero.story-ended .hero-finale h2{
    margin:0!important;
    font-size:clamp(38px,11.4vw,48px)!important;
    line-height:.94!important;
    letter-spacing:-.045em!important;
    text-shadow:0 1px 2px rgba(0,0,0,.22)!important;
  }
  .hero.story-ended .hero-finale>span{
    margin:14px 0 16px!important;
    font-size:12px!important;
    line-height:1.55!important;
    color:rgba(255,255,255,.66)!important;
  }
  .hero.story-ended .hero-form-grid{
    grid-template-columns:1fr!important;
    gap:9px!important;
    margin-bottom:16px!important;
  }
  .hero.story-ended .hero-form-grid label:last-child{grid-column:auto!important}
  .hero.story-ended .hero-form-grid input,
  .hero.story-ended .hero-form-grid select{
    height:42px!important;
    margin-top:3px!important;
    padding:7px 0!important;
    font-size:13px!important;
    background:transparent!important;
  }
  .hero.story-ended .hero-finale .button{
    min-height:54px!important;
    padding:0 16px!important;
    font-size:8px!important;
  }
}

@media (max-width:390px){
  .hero.story-ended{min-height:790px!important}
  .hero.story-ended .hero-finale{
    top:max(345px,48svh)!important;
    left:18px!important;
    right:18px!important;
  }
  .hero.story-ended .hero-finale h2{font-size:36px!important}
  .hero.story-ended .hero-finale>span{font-size:11px!important}
}

/* APX mobile finale v6 — cinematic crossfade from intro video to the static
   finale background. Opacity + translate only: smooth on iPhone, no blur. */
@media (max-width:760px){
  .hero{
    position:relative!important;
    isolation:isolate!important;
  }

  /* The finale image is present before the video ends, but invisible. This
     makes the switch a real crossfade instead of a background-image jump. */
  .hero.finale-prep:before,
  .hero.finale-transition:before,
  .hero.story-ended:before{
    display:block!important;
    content:""!important;
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
    pointer-events:none!important;
    background-color:#03130e!important;
    background-image:url('/apx-mobile-finale-bg-v2.webp')!important;
    background-repeat:no-repeat!important;
    background-size:100% auto!important;
    background-position:center 76px!important;
    opacity:0!important;
    visibility:visible!important;
    filter:none!important;
    transform:none!important;
    transition:opacity 1.15s cubic-bezier(.22,.61,.36,1)!important;
    animation:none!important;
    will-change:opacity!important;
  }
  .hero.finale-prep:before{opacity:.24!important}
  .hero.finale-transition:before,
  .hero.story-ended:before{opacity:1!important}

  /* Let the moving frame dissolve away instead of disappearing on 'ended'. */
  .hero .hero-video{
    opacity:1!important;
    visibility:visible!important;
    transition:opacity 1.05s cubic-bezier(.22,.61,.36,1)!important;
  }
  .hero.finale-prep .hero-video{opacity:.82!important}
  .hero.finale-transition .hero-video,
  .hero.story-ended .hero-video{opacity:0!important}
  .hero.story-ended .hero-video{
    visibility:hidden!important;
    pointer-events:none!important;
  }

  /* Any intro copy fades out a little before the finale form arrives. */
  .hero .hero-content,
  .hero .hero-caption{
    transition:opacity .55s ease,transform .55s cubic-bezier(.22,.61,.36,1)!important;
  }
  .hero.finale-prep .hero-content,
  .hero.finale-prep .hero-caption,
  .hero.finale-transition .hero-content,
  .hero.finale-transition .hero-caption{
    opacity:0!important;
    transform:translateY(-6px)!important;
  }

  /* Keep the form out while the backgrounds are crossfading. */
  .hero.finale-transition .hero-finale,
  .hero.story-ended .hero-finale{
    z-index:3!important;
    transition:opacity .72s cubic-bezier(.22,.61,.36,1),transform .72s cubic-bezier(.22,.61,.36,1)!important;
    will-change:opacity,transform!important;
  }
  .hero.finale-transition .hero-finale,
  .hero.story-ended:not(.finale-form-in) .hero-finale{
    opacity:0!important;
    transform:translateY(22px)!important;
    pointer-events:none!important;
  }
  .hero.story-ended.finale-form-in .hero-finale{
    opacity:1!important;
    transform:translateY(0)!important;
    pointer-events:auto!important;
  }

  /* A tiny delayed lift for the CTA makes the block settle organically. */
  .hero.story-ended .hero-finale .button{
    transition:opacity .55s ease .12s,transform .55s cubic-bezier(.22,.61,.36,1) .12s!important;
  }
  .hero.story-ended:not(.finale-form-in) .hero-finale .button{
    opacity:0!important;
    transform:translateY(8px)!important;
  }
  .hero.story-ended.finale-form-in .hero-finale .button{
    opacity:1!important;
    transform:translateY(0)!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .hero:before,.hero-video,.hero-content,.hero-caption,.hero-finale,.hero-finale .button{
    transition:none!important;
  }
}


/* APX mobile finale v7 — compact first-screen finale + masked cinematic handoff.
   Header/menu are intentionally untouched. */
@media (max-width:760px){
  /* The final screen is exactly one mobile viewport. The old 790/820px floor
     was the reason the CTA block could not fit without scrolling. */
  .hero.story-ended{
    height:100svh!important;
    min-height:100svh!important;
    max-height:100svh!important;
    background-image:none!important;
    overflow:hidden!important;
  }

  /* The supplied embossed APX image lives in its own layer for the entire handoff. */
  .hero.finale-transition:before,
  .hero.finale-bg-in:before,
  .hero.story-ended:before{
    display:block!important;
    content:""!important;
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
    pointer-events:none!important;
    background:#03130e url('/apx-mobile-finale-bg-v2.webp') center 76px/100% auto no-repeat!important;
    visibility:visible!important;
    opacity:0!important;
    filter:none!important;
    transform:none!important;
    transition:opacity .72s cubic-bezier(.22,.61,.36,1)!important;
    will-change:opacity!important;
  }
  .hero.finale-bg-in:before,
  .hero.story-ended:before{opacity:1!important}

  /* A short dark-green veil hides the visual mismatch between the last movie
     frame and the embossed still. No blur, so this remains cheap on iPhone. */
  .hero.finale-transition:after,
  .hero.story-ended:after{
    display:block!important;
    content:""!important;
    position:absolute!important;
    inset:0!important;
    z-index:2!important;
    pointer-events:none!important;
    background:rgba(2,16,11,.72)!important;
    visibility:visible!important;
    opacity:0!important;
    filter:none!important;
    transform:none!important;
    transition:opacity .28s ease-out!important;
    will-change:opacity!important;
  }
  .hero.finale-veil-in:after{opacity:.62!important}
  .hero.finale-bg-in:after{opacity:.38!important}
  .hero.story-ended:after{
    opacity:0!important;
    transition:opacity .68s cubic-bezier(.22,.61,.36,1)!important;
  }

  /* Keep the final video frame visible until the veil is already in place,
     then dissolve it under the veil. */
  .hero .hero-video{
    opacity:1!important;
    visibility:visible!important;
    transition:opacity .62s cubic-bezier(.22,.61,.36,1)!important;
  }
  .hero.finale-bg-in .hero-video,
  .hero.story-ended .hero-video{opacity:0!important}
  .hero.story-ended .hero-video{visibility:hidden!important;pointer-events:none!important}

  /* Finale copy appears only after the new background is established. */
  .hero.finale-transition .hero-finale,
  .hero.story-ended .hero-finale{
    z-index:3!important;
    opacity:0!important;
    pointer-events:none!important;
    transition:opacity .58s cubic-bezier(.22,.61,.36,1),transform .58s cubic-bezier(.22,.61,.36,1)!important;
    transform:translateY(14px)!important;
    will-change:opacity,transform!important;
  }
  .hero.story-ended.finale-form-in .hero-finale{
    opacity:1!important;
    pointer-events:auto!important;
    transform:translateY(0)!important;
  }

  /* Move the entire block up and tighten it enough to fit on 667px-class
     screens while retaining the same visual hierarchy. */
  .hero.story-ended .hero-finale{
    top:clamp(276px,39svh,318px)!important;
    left:18px!important;
    right:18px!important;
    bottom:auto!important;
    padding:0!important;
    overflow:visible!important;
  }
  .hero.story-ended .hero-finale>p{
    margin:0 0 8px!important;
    font-size:8px!important;
    line-height:1.2!important;
  }
  .hero.story-ended .hero-finale h2{
    margin:0!important;
    font-size:clamp(33px,9.8vw,41px)!important;
    line-height:.94!important;
    letter-spacing:-.045em!important;
  }
  .hero.story-ended .hero-finale>span{
    margin:9px 0 10px!important;
    font-size:10.5px!important;
    line-height:1.4!important;
  }
  .hero.story-ended .hero-form-grid{
    gap:4px!important;
    margin-bottom:9px!important;
  }
  .hero.story-ended .hero-form-grid label{
    font-size:7px!important;
    line-height:1.15!important;
  }
  .hero.story-ended .hero-form-grid input,
  .hero.story-ended .hero-form-grid select{
    height:35px!important;
    margin-top:1px!important;
    padding:4px 0!important;
    font-size:12px!important;
  }
  .hero.story-ended .hero-finale .button{
    min-height:48px!important;
    padding:0 14px!important;
    font-size:7.5px!important;
    transition:opacity .48s ease .08s,transform .48s cubic-bezier(.22,.61,.36,1) .08s!important;
  }
  .hero.story-ended:not(.finale-form-in) .hero-finale .button{opacity:0!important;transform:translateY(6px)!important}
  .hero.story-ended.finale-form-in .hero-finale .button{opacity:1!important;transform:none!important}

  /* This caption is redundant on the final mobile screen and was consuming
     the few remaining pixels at the bottom. */
  .hero.story-ended .hero-caption{display:none!important}

  /* The new mobile file is already portrait-cropped, so Safari no longer has
     to scale a 16:9 movie into a portrait cover every frame. */
  .hero-video{
    object-fit:cover!important;
    object-position:center top!important;
  }
}

@media (max-width:390px){
  .hero.story-ended{min-height:100svh!important;max-height:100svh!important}
  .hero.story-ended .hero-finale{top:clamp(262px,38svh,300px)!important;left:16px!important;right:16px!important}
  .hero.story-ended .hero-finale h2{font-size:32px!important}
  .hero.story-ended .hero-finale>span{font-size:10px!important}
  .hero.story-ended .hero-form-grid input,
  .hero.story-ended .hero-form-grid select{height:33px!important}
  .hero.story-ended .hero-finale .button{min-height:46px!important;font-size:7px!important}
}

@media (prefers-reduced-motion:reduce){
  .hero.finale-transition:before,.hero.finale-transition:after,.hero-video,.hero-finale,.hero-finale .button{transition:none!important}
}

/* APX v9 — organic mobile handoff: long crossfade + staggered form reveal.
   Header/menu are untouched. No blur/filter animations, only opacity/translate. */
@media (max-width:760px){
  /* Preloadable final image sits behind the movie from the start, but is invisible. */
  .hero:before{
    display:block!important;
    content:""!important;
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
    pointer-events:none!important;
    background:#03130e url('/apx-mobile-finale-bg-v2.webp') center 76px/100% auto no-repeat!important;
    opacity:0!important;
    visibility:visible!important;
    filter:none!important;
    transform:none!important;
    transition:opacity 1.35s cubic-bezier(.22,.61,.36,1)!important;
    will-change:opacity!important;
  }

  /* Do not use the old dark veil in v9 — direct overlapping crossfade looks more natural. */
  .hero:after{display:none!important}

  .hero .hero-video{
    opacity:1!important;
    visibility:visible!important;
    transition:opacity 1.25s cubic-bezier(.22,.61,.36,1)!important;
    will-change:opacity!important;
  }

  .hero.handoff-crossfade:before,
  .hero.story-ended:before,
  .hero.handoff-complete:before{opacity:1!important}

  .hero.handoff-crossfade .hero-video,
  .hero.story-ended .hero-video,
  .hero.handoff-complete .hero-video{opacity:0!important}

  /* Keep the video layer alive until the crossfade is actually finished. */
  .hero.story-ended .hero-video{visibility:visible!important}
  .hero.handoff-complete .hero-video{visibility:hidden!important;pointer-events:none!important}

  /* Intro copy leaves before the form arrives, with a tiny upward drift. */
  .hero .hero-content,
  .hero .hero-caption{
    transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1)!important;
  }
  .hero.handoff-crossfade .hero-content,
  .hero.handoff-crossfade .hero-caption,
  .hero.story-ended .hero-content,
  .hero.story-ended .hero-caption{
    opacity:0!important;
    transform:translateY(-8px)!important;
  }

  /* Container motion is intentionally slow enough to feel placed, not spawned. */
  .hero.story-ended .hero-finale{
    opacity:0!important;
    transform:translateY(18px)!important;
    pointer-events:none!important;
    transition:opacity .95s cubic-bezier(.22,.61,.36,1),transform .95s cubic-bezier(.22,.61,.36,1)!important;
    will-change:opacity,transform!important;
  }
  .hero.story-ended.finale-form-in .hero-finale{
    opacity:1!important;
    transform:translateY(0)!important;
    pointer-events:auto!important;
  }

  /* Stagger the content inside the form. This is subtle, but removes the "whole block pops in" feel. */
  .hero.story-ended .hero-finale>p,
  .hero.story-ended .hero-finale h2,
  .hero.story-ended .hero-finale>span,
  .hero.story-ended .hero-form-grid,
  .hero.story-ended .hero-finale .button{
    opacity:0!important;
    transform:translateY(8px)!important;
    transition-property:opacity,transform!important;
    transition-duration:.72s!important;
    transition-timing-function:cubic-bezier(.22,.61,.36,1)!important;
  }
  .hero.story-ended.finale-form-in .hero-finale>p,
  .hero.story-ended.finale-form-in .hero-finale h2,
  .hero.story-ended.finale-form-in .hero-finale>span,
  .hero.story-ended.finale-form-in .hero-form-grid,
  .hero.story-ended.finale-form-in .hero-finale .button{
    opacity:1!important;
    transform:translateY(0)!important;
  }
  .hero.story-ended .hero-finale>p{transition-delay:.04s!important}
  .hero.story-ended .hero-finale h2{transition-delay:.10s!important}
  .hero.story-ended .hero-finale>span{transition-delay:.18s!important}
  .hero.story-ended .hero-form-grid{transition-delay:.26s!important}
  .hero.story-ended .hero-finale .button{transition-delay:.36s!important}
}

@media (prefers-reduced-motion:reduce){
  .hero:before,.hero-video,.hero-content,.hero-caption,.hero-finale,
  .hero-finale>p,.hero-finale h2,.hero-finale>span,.hero-form-grid,.hero-finale .button{
    transition:none!important;
  }
}


/* =========================================================
   APX v9 LIVE SMOOTH HANDOFF
   Видео начинает растворяться в финальном фоне ДО окончания.
   Шапку не затрагивает.
   ========================================================= */

@media (max-width:760px){

  .hero:before{
    transition:
      opacity 1.65s cubic-bezier(.22,.61,.36,1) !important;
  }

  .hero .hero-video{
    transition:
      opacity 1.55s cubic-bezier(.22,.61,.36,1) !important;
  }

  /* Реальный crossfade: оба слоя одновременно видимы */
  .hero.handoff-crossfade:before{
    opacity:1 !important;
  }

  .hero.handoff-crossfade .hero-video{
    opacity:0 !important;
  }

  /* Форма сначала полностью спрятана */
  .hero .hero-finale{
    opacity:0 !important;
    transform:translateY(26px) !important;
  }

  /* Контейнер появляется медленно и мягко */
  .hero.story-ended .hero-finale{
    transition:
      opacity 1.05s cubic-bezier(.22,.61,.36,1),
      transform 1.05s cubic-bezier(.22,.61,.36,1) !important;
  }

  .hero.story-ended.finale-form-in .hero-finale{
    opacity:1 !important;
    transform:translateY(0) !important;
  }

  /* Внутренние элементы не появляются одной пачкой */
  .hero.story-ended .hero-finale > p,
  .hero.story-ended .hero-finale h2,
  .hero.story-ended .hero-finale > span,
  .hero.story-ended .hero-form-grid,
  .hero.story-ended .hero-finale .button{
    opacity:0 !important;
    transform:translateY(10px) !important;
    transition:
      opacity .8s cubic-bezier(.22,.61,.36,1),
      transform .8s cubic-bezier(.22,.61,.36,1) !important;
  }

  .hero.story-ended.finale-form-in .hero-finale > p,
  .hero.story-ended.finale-form-in .hero-finale h2,
  .hero.story-ended.finale-form-in .hero-finale > span,
  .hero.story-ended.finale-form-in .hero-form-grid,
  .hero.story-ended.finale-form-in .hero-finale .button{
    opacity:1 !important;
    transform:translateY(0) !important;
  }

  .hero.story-ended .hero-finale > p{
    transition-delay:.05s !important;
  }

  .hero.story-ended .hero-finale h2{
    transition-delay:.13s !important;
  }

  .hero.story-ended .hero-finale > span{
    transition-delay:.22s !important;
  }

  .hero.story-ended .hero-form-grid{
    transition-delay:.31s !important;
  }

  .hero.story-ended .hero-finale .button{
    transition-delay:.42s !important;
  }
}


/* =========================================================
   APX V9 — REAL ANIMATION LAYERS
   ========================================================= */

@media (max-width:760px) {

  /*
   Старые pseudo-layer переходы больше не используем.
   Теперь фон является настоящим DOM-элементом.
  */
  .hero:before,
  .hero:after {
    display:none !important;
  }

  .hero {
    isolation:isolate !important;
  }

  /*
   Настоящий финальный фон.
   Он существует всё время, но изначально прозрачный.
  */
  .apx-final-bg-layer {
    position:absolute;
    inset:0;

    z-index:1;

    pointer-events:none;

    opacity:0;

    background:
      #03130e
      url('/apx-mobile-finale-bg-v2.webp')
      center 76px /
      100% auto
      no-repeat;

    transform:translateZ(0);
    will-change:opacity;
  }

  .hero-video {
    z-index:0 !important;

    transform:translateZ(0);

    will-change:opacity;
  }

  /*
   Обёртка существует специально для подъёма формы.
   Старый CSS формы больше не может отменить эту анимацию.
  */
  .apx-finale-motion-wrap {
    position:absolute;
    inset:0;

    z-index:4;

    pointer-events:none;

    opacity:1;

    transform:translateZ(0);

    will-change:
      opacity,
      transform;
  }

  .apx-finale-motion-wrap .hero-finale {
    z-index:1 !important;
  }
}


/* =========================================================
   APX v9 IOS FIX
   1) Возвращаем видеофон
   2) Уменьшаем заголовок, чтобы 'ФУТБОЛИСТОВ' вмещалось
   ========================================================= */

@media (max-width:760px){

  /* Видеофон должен реально отображаться */
  .hero{
    overflow:hidden !important;
  }

  .hero-video{
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    z-index:0 !important;
    object-fit:cover !important;
    object-position:center center !important;
    background:#04130f !important;
  }

  /* На первом экране не даём финальному слою случайно перекрыть видео */
  .hero:not(.story-ended) .apx-final-bg-layer,
  .hero:not(.story-ended) .hero-finale,
  .hero:not(.story-ended) .apx-finale-motion-wrap{
    opacity:0 !important;
    pointer-events:none !important;
  }

  /* Чиним заголовок на iPhone */
  .hero-content h1{
    width:100% !important;
    max-width:calc(100vw - 48px) !important;
    font-size:clamp(54px, 12.6vw, 74px) !important;
    line-height:.90 !important;
    letter-spacing:-0.03em !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
    hyphens:none !important;
    text-wrap:balance !important;
  }

  .hero-content{
    width:100% !important;
    max-width:calc(100vw - 48px) !important;
  }

  .hero-copy{
    max-width:calc(100vw - 48px) !important;
  }
}


/* =========================================================
   APX v9 — iOS ONLY
   Android/Desktop не затрагиваем.
   ========================================================= */

@media (max-width:760px) {

  html.ios .hero {
    height:100svh !important;
    min-height:640px !important;
    overflow:hidden !important;
  }

  /* Видео только для iOS */
  html.ios .hero-video {
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    top:76px !important;
    left:0 !important;

    width:100% !important;
    height:calc(100% - 76px) !important;

    object-fit:cover !important;
    object-position:center top !important;

    transform:none !important;
    -webkit-transform:none !important;

    z-index:0 !important;
  }

  /*
   Заголовок на iPhone.
   Размер уменьшаем только здесь.
  */
  html.ios .hero-content {
    left:28px !important;
    right:20px !important;
    width:auto !important;
    max-width:none !important;
  }

  html.ios .hero-content h1 {
    width:100% !important;
    max-width:100% !important;

    font-size:clamp(47px, 12.3vw, 64px) !important;
    line-height:.91 !important;
    letter-spacing:-.045em !important;

    word-break:normal !important;
    overflow-wrap:normal !important;
    hyphens:none !important;
  }

  /* Пока видео идёт, финальный фон не перекрывает его */
  html.ios .hero:not(.story-ended) .apx-final-bg-layer {
    opacity:0 !important;
    pointer-events:none !important;
  }

  html.ios .hero:not(.story-ended) .hero-finale {
    opacity:0 !important;
    pointer-events:none !important;
  }
}


/* Маленькие iPhone */
@media (max-width:390px) {

  html.ios .hero-content {
    left:22px !important;
    right:16px !important;
  }

  html.ios .hero-content h1 {
    font-size:clamp(43px, 12vw, 54px) !important;
    line-height:.92 !important;
  }
}


/* =========================================================
   APX v9 — iOS FIXED FINALE POSITION
   Форма больше не зависит от высоты панели Safari.
   ========================================================= */

@media (max-width:760px){

  html.ios .hero.story-ended .hero-finale,
  html.ios .hero.story-ended .apx-finale-motion-wrap .hero-finale{
    top:300px !important;
    bottom:auto !important;

    left:24px !important;
    right:24px !important;

    transform:none !important;
  }

  /*
   Обёртка больше не двигает форму после появления.
   Оставляем возможность только менять прозрачность.
  */
  html.ios .hero.story-ended .apx-finale-motion-wrap{
    transform:none !important;
  }

  html.ios .hero.story-ended.finale-form-in .hero-finale{
    transform:none !important;
  }
}


/* Маленькие iPhone */
@media (max-width:390px){

  html.ios .hero.story-ended .hero-finale,
  html.ios .hero.story-ended .apx-finale-motion-wrap .hero-finale{
    top:285px !important;

    left:20px !important;
    right:20px !important;
  }
}


/* =========================================================
   APX v9 — iOS CENTER BACKGROUND EMBLEM
   Центруем эмблему на фоне
   ========================================================= */

@media (max-width:760px){

  html.ios .apx-final-bg-layer{
    background-position:center 78px !important;
    background-size:92% auto !important;
  }

  /* если фон ещё виден через video/background hero */
  html.ios .hero-video{
    object-position:center top !important;
  }
}

/* Маленькие iPhone */
@media (max-width:390px){

  html.ios .apx-final-bg-layer{
    background-position:center 82px !important;
    background-size:94% auto !important;
  }
}