html { scroll-behavior: smooth; }
    body { margin: 0; font-family: sans-serif; }
    header {
      background: white;
      border-bottom: 1px solid #e5e7eb;
      position: sticky; top: 0; z-index: 50;
    }
    .container {
      max-width: 1200px; margin: 0 auto; padding: 1rem;
      display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
    }
    .logo {
      display: flex; align-items: center; gap: 0.75rem;
      text-decoration: none; color: #111827;
    }
    .logo img { height: 40px; width: auto; }
    nav { display: none; }
    nav a {
      text-decoration: none; color: #4b5563;
      margin-left: 2rem; font-weight: 500; transition: color 0.3s;
    }
    nav a:hover { color: #111827; }
    .button-calc {
      display: none; background-color: #111827; color: white;
      padding: 0.75rem 1.5rem; border: none; border-radius: 0.25rem;
      font-weight: 500; cursor: pointer; white-space: nowrap;
    }
    .button-calc:hover { background-color: #1f2937; }
    .menu-icon {
      display: block; font-size: 1.5rem; cursor: pointer;
      border: none; background: none;
    }
    .mobile-menu {
      display: none; flex-direction: column;
      padding-top: 1rem; padding-bottom: 1rem;
      border-top: 1px solid #e5e7eb;
    }
    .mobile-menu a, .mobile-menu button {
      margin: 0.5rem 0; font-weight: 500;
      color: #4b5563; text-decoration: none; transition: color 0.3s;
    }
    .mobile-menu a:hover { color: #111827; }
    .mobile-menu button {
      background-color: #111827; color: white;
      padding: 0.75rem 1.5rem; border: none; border-radius: 0.25rem;
      font-weight: 500; cursor: pointer; white-space: nowrap;
    }
    .mobile-menu button:hover { background-color: #1f2937; }э
    .mobile-menu.flex { display: flex; }
    @media (min-width: 768px) {
      nav { display: flex; align-items: center; }
      .button-calc { display: inline-block; }
      .menu-icon { display: none; }
      .mobile-menu { display: none !important; }
      
    }

    @keyframes lfGradientShift {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 0%; }
}
/* Чуть контрастнее и “дальше” едет */
.lf-animated-bg{
  background-image: linear-gradient(
    120deg,
    #eef2f7 0%,
    #ffffff 35%,
    #eef2f7 70%,
    #ffffff 100%
  );
  background-size: 300% 300%;
  animation: lfGradientShift 6s ease-in-out infinite; /* на время проверки */
  will-change: background-position;
}
@media (prefers-reduced-motion: reduce){ .lf-animated-bg{ animation: none; } }

/* --- Рамка (shimmer) --- */
@keyframes btnShimmer {
  0% { background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}
.btn-wrap{ position:relative; display:inline-block; border-radius:.6rem; }
.btn-wrap::before{
  content:""; position:absolute; inset:-2px; border-radius:.7rem; padding:2px;
  background: linear-gradient(120deg,#e5e7eb,#cbd5e1,#e5e7eb);
  background-size:300% 300%;
  opacity:0; /* по умолчанию тихо */
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.btn-wrap.shimmer-once::before{ 
  animation: btnShimmer 2.4s ease-in-out 1 forwards; 
  opacity:1;
}

/* --- Shine по кнопке --- */
@keyframes btnShine {
  0%   { transform: translateX(-120%); opacity:0; }
  10%  { opacity:.25; }
  100% { transform: translateX(120%); opacity:0; }
}
.btn-shine{
  position:absolute; inset:0; border-radius:.5rem; overflow:hidden; pointer-events:none;
}
.btn-shine::after{
  content:""; position:absolute; top:0; bottom:0; width:60%;
  transform: translateX(-120%);
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%,
                                       rgba(255,255,255,.35) 50%,
                                       rgba(255,255,255,0) 100%);
  filter: blur(6px);
}
.btn-shine.run::after{ animation: btnShine 900ms ease-out 1; }

/* --- Кнопка и микро-анимации --- */
.cta-btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.875rem 2rem; border-radius:.5rem;
  background:#111827; color:#fff; font-weight:600; font-size:1.125rem;
  transition: transform .2s ease, box-shadow .25s ease, background-color .2s ease;
}
.cta-btn:hover{ background:#0f1623; transform: translateY(-1px); box-shadow:0 12px 24px rgba(0,0,0,.12); }
.cta-btn:active{ transform: translateY(0); box-shadow:none; }
.cta-btn:focus-visible{ outline:2px solid #111827; outline-offset:3px; }

/* Стрелка «дышит» только на hover */
@keyframes arrowNudge { 0%,100%{transform:translateX(0)} 50%{transform:translateX(4px)} }
.cta-btn:hover .cta-arrow{ animation: arrowNudge .8s ease-in-out infinite; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn-wrap.shimmer-once::before,
  .btn-shine.run::after,
  .cta-btn, .cta-btn:hover .cta-arrow{ animation:none !important; transition:none !important; }
}