/* v2: плавающая шапка, мобильное меню, анимированный фон */

/* ================= фон ================= */
.bg-fx{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:strict}
.bg-grid{position:absolute;inset:-32px;background-image:radial-gradient(color-mix(in srgb,var(--ink) 13%,transparent) 1px,transparent 1.5px);background-size:32px 32px;
  mask-image:radial-gradient(ellipse 85% 70% at 50% 30%,#000 10%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 85% 70% at 50% 30%,#000 10%,transparent 75%);opacity:.55}
.blob{position:absolute;border-radius:50%;will-change:transform}
.blob.b1{width:56vmax;height:56vmax;left:-18vmax;top:-20vmax;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 16%,transparent),transparent 72%)}
.blob.b2{width:48vmax;height:48vmax;right:-16vmax;top:22vh;background:radial-gradient(closest-side,rgb(64 178 186 / .13),transparent 72%)}
.blob.b3{width:42vmax;height:42vmax;left:22vw;bottom:-22vmax;background:radial-gradient(closest-side,color-mix(in srgb,var(--panel-accent) 14%,transparent),transparent 72%)}
.ring{position:absolute;border-radius:50%;border:1px solid color-mix(in srgb,var(--accent) 16%,transparent)}
.ring::after{content:"";position:absolute;top:-4px;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 12%,transparent)}
.ring.r1{width:780px;height:780px;right:-300px;top:-260px}
.ring.r2{width:560px;height:560px;left:-280px;bottom:-200px;border-style:dashed;border-color:color-mix(in srgb,var(--accent) 13%,transparent)}
.ring.r2::after{background:color-mix(in srgb,rgb(64 178 186) 60%,transparent)}
@media (max-width:760px){.ring.r1{width:460px;height:460px;right:-230px;top:-120px}.ring.r2{display:none}.bg-grid{opacity:.4}}
@media (prefers-reduced-motion:no-preference){
  .bg-grid{animation:gridPan 40s linear infinite}
  @keyframes gridPan{to{transform:translate(32px,32px)}}
  .blob.b1{animation:drift1 34s ease-in-out infinite alternate}
  .blob.b2{animation:drift2 42s ease-in-out infinite alternate}
  .blob.b3{animation:drift3 38s ease-in-out infinite alternate}
  @keyframes drift1{to{transform:translate(12vw,10vh) scale(1.12)}}
  @keyframes drift2{to{transform:translate(-10vw,14vh) scale(.9)}}
  @keyframes drift3{to{transform:translate(8vw,-12vh) scale(1.15)}}
  .ring.r1{animation:spin 90s linear infinite}
  .ring.r2{animation:spin 120s linear infinite reverse}
}
/* блоки со своим фоном остаются сплошными; секции прозрачные */
.v2 .hero-glow{display:none}

/* ================= плавающая шапка ================= */
.hx{position:sticky;top:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;padding-top:12px}
.hx.is-scrolled{border:0}
.hx-bar{display:flex;align-items:center;gap:18px;height:64px;padding:0 10px 0 16px;border-radius:20px;border:1px solid transparent;transition:background .4s var(--ease),border-color .4s,box-shadow .4s,height .4s var(--ease)}
.hx.is-scrolled .hx-bar{height:60px;background:color-mix(in srgb,var(--surface) 78%,transparent);backdrop-filter:saturate(170%) blur(16px);-webkit-backdrop-filter:saturate(170%) blur(16px);border-color:color-mix(in srgb,var(--line) 85%,transparent);box-shadow:0 10px 30px -18px rgb(14 40 28 / .28)}
@media (prefers-reduced-transparency:reduce){.hx.is-scrolled .hx-bar{background:var(--surface)}}
.hx .logo{font-size:16.5px;letter-spacing:-.025em}
.hx .logo-mark{width:38px;height:38px;border-radius:12px;box-shadow:inset 0 1px 0 rgb(255 255 255 / .08),0 6px 14px -6px rgb(15 29 24 / .5)}
.hx .logo small{font-size:11px;letter-spacing:.01em}

.hx-nav{position:relative;display:flex;align-items:center;gap:0;margin-left:auto;padding:4px;border-radius:14px}
.hx-nav>a{position:relative;z-index:1;font:500 14.5px/1 var(--f-body);letter-spacing:-.005em;color:var(--ink-2);text-decoration:none;padding:11px 14px;border-radius:10px;background:none!important;transition:color .25s}
.hx-nav>a:hover,.hx-nav>a.is-active{color:var(--ink)}
.hx-ind{position:absolute;z-index:0;top:4px;bottom:4px;left:0;width:0;border-radius:10px;background:var(--surface);box-shadow:0 1px 2px rgb(14 40 28 / .08),0 0 0 1px color-mix(in srgb,var(--line) 80%,transparent);opacity:0;transition:transform .45s var(--ease),width .45s var(--ease),opacity .25s}
.hx.is-scrolled .hx-ind{background:var(--bg-2);box-shadow:none}
.hx-nav.has-ind .hx-ind{opacity:1}

/* кнопка */
.hx-cta{position:relative;display:inline-flex;align-items:center;gap:12px;flex:none;padding:6px 6px 6px 20px;height:46px;border-radius:999px;background:var(--panel);color:var(--panel-ink);text-decoration:none;font:600 14.5px/1 var(--f-body);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;isolation:isolate;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .1),0 8px 20px -10px rgb(15 29 24 / .6);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.hx-cta::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgb(255 255 255 / .16) 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s var(--ease)}
.hx-cta:hover{color:var(--panel-ink);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgb(255 255 255 / .12),0 14px 28px -12px rgb(15 29 24 / .65)}
.hx-cta:hover::before{transform:translateX(120%)}
.hx-cta:active{transform:translateY(0) scale(.98)}
.hx-cta-ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--panel-accent);color:#03140B;font-size:17px;overflow:hidden;position:relative}
.hx-cta-ic .ph{transition:transform .45s var(--ease)}
.hx-cta-ic .ph-2{position:absolute;inset:0;display:grid;place-items:center;transform:translate(-120%,120%)}
.hx-cta:hover .hx-cta-ic .ph{transform:translate(120%,-120%)}
.hx-cta:hover .hx-cta-ic .ph-2{transform:none}
.hx-cta:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* бургер */
.hx-burger{display:none;margin-left:auto;width:46px;height:46px;border-radius:14px;border:1px solid var(--line);background:var(--surface);cursor:pointer;position:relative;flex:none;box-shadow:0 1px 2px rgb(14 40 28 / .06)}
.hx-burger span{position:absolute;left:13px;right:13px;height:2px;border-radius:2px;background:var(--ink);transition:transform .45s var(--ease),top .45s var(--ease)}
.hx-burger span:nth-child(1){top:18px}
.hx-burger span:nth-child(2){top:26px}
.hx-burger[aria-expanded="true"] span:nth-child(1){top:22px;transform:rotate(45deg)}
.hx-burger[aria-expanded="true"] span:nth-child(2){top:22px;transform:rotate(-45deg)}
@media (max-width:1080px){.hx-nav,.hx-bar>.hx-cta{display:none}.hx-burger{display:block}}

/* мобильное меню */
.hx-mnav{position:fixed;inset:0;z-index:45;padding:96px 16px 24px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);display:block;overflow:auto;
  opacity:0;visibility:hidden;transform:none;transition:opacity .35s var(--ease),visibility 0s .35s}
.hx-mnav.is-open{opacity:1;visibility:visible;transition-delay:0s}
.hx-mnav-in{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.hx-mlinks{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:6px;box-shadow:var(--shadow)}
.hx-mnav a.hx-mlink{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 16px;border-radius:16px;border:0;font:600 clamp(20px,5.4vw,24px)/1.1 var(--f-display);letter-spacing:-.025em;color:var(--ink);text-decoration:none}
.hx-mnav a.hx-mlink+a.hx-mlink{box-shadow:inset 0 1px 0 var(--line)}
.hx-mnav a.hx-mlink .ph{font-size:20px;color:var(--accent-ink);transition:transform .35s var(--ease)}
.hx-mnav a.hx-mlink:active{background:var(--bg)}
.hx-mnav a.hx-mlink:hover .ph{transform:translate(3px,-3px)}
.hx-mnav .hx-cta-lg{height:58px;padding-left:24px;font-size:16px;justify-content:space-between;margin:0;border:0;color:var(--panel-ink)}
.hx-mnav .hx-cta-lg .hx-cta-ic{width:46px;height:46px;font-size:20px}
.hx-mcontacts{display:flex;flex-wrap:wrap;gap:8px}
.hx-mcontacts a{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font:500 14.5px var(--f-body);color:var(--ink-2);text-decoration:none}
.hx-mcontacts .ph{color:var(--accent-ink)}
@media (prefers-reduced-motion:no-preference){
  .hx-mnav .hx-mlink,.hx-mnav .hx-cta-lg,.hx-mcontacts{opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
  .hx-mnav.is-open .hx-mlink,.hx-mnav.is-open .hx-cta-lg,.hx-mnav.is-open .hx-mcontacts{opacity:1;transform:none;transition-delay:calc(var(--i) * 60ms + 80ms)}
  .hx-mnav .hx-mlinks{transform:translateY(-8px) scale(.98);transition:transform .5s var(--ease)}
  .hx-mnav.is-open .hx-mlinks{transform:none}
}

/* правки после просмотра */
.hx.is-scrolled .hx-bar{background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:saturate(180%) blur(22px);-webkit-backdrop-filter:saturate(180%) blur(22px)}
.hx-mnav a.hx-mlink+a.hx-mlink{box-shadow:none;position:relative}
.hx-mnav a.hx-mlink+a.hx-mlink::before{content:"";position:absolute;left:16px;right:16px;top:0;height:1px;background:var(--line)}
.hx-mnav a.hx-mlink{border-radius:14px}
.hx-mnav .hx-cta-lg{display:flex;width:100%}