:root{
      --bg:#071629;
      --bg-2:#0a1f36;
      --text:#e7eefb;
      --muted:#a7b3c9;
      --accent:#ffd84d;
      --accent-2:#fff2a3;
      --card:#0d2746;
      --ok:#24d17c;
      --danger:#ff6b6b;
      --shadow:0 0 20px rgba(255,216,77,.25), 0 0 55px rgba(255,216,77,.15);
      --wa:#25D366;
      --tg:#229ED9;
      --max:#7C4DFF;
      --header-h: 96px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family:Manrope,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji";
      color:var(--text); background:linear-gradient(180deg, var(--bg) 0%, #0a1f36 100%);
      overflow-x:hidden; padding-top: var(--header-h);
    }
    body.modal-open{overflow:hidden}
    a{color:var(--accent); text-decoration:none}
    a:hover{filter:brightness(1.1)}
    :focus-visible{outline:2px solid var(--accent); outline-offset:2px}

    .wrap{max-width:1200px; margin:0 auto; padding:0 20px}
    header{position:fixed; left:0; right:0; top:0; z-index:9999; backdrop-filter:saturate(1.2) blur(8px); background:rgba(7,22,41,.96); border-bottom:1px solid rgba(255,255,255,.06)}
    .nav{display:grid; grid-template-columns:auto 1fr auto; align-items:center; column-gap:16px; height:64px}
    .brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.3px}
    .brand .logo{width:28px; height:28px; filter:drop-shadow(0 0 6px rgba(255,216,77,.5))}
    header nav{ justify-self:center; display:flex; align-items:center; gap:28px; justify-content:center }
    header nav a{margin:0; font-weight:700; color:#f5f8ff; font-family:'Montserrat', Manrope, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; font-size:clamp(16px, 1.6vw, 20px); letter-spacing:.3px; position:relative; padding:8px 10px; border-radius:12px; transition:color .2s ease, transform .2s ease, background .2s ease}
    header nav a:hover{filter:none; color:#fff; transform:translateY(-1px)}
    header nav a::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:linear-gradient(90deg, transparent, var(--accent), transparent); transform:scaleX(0); transform-origin:center; transition:transform .25s ease, box-shadow .25s ease}
    header nav a:hover::after{transform:scaleX(1); box-shadow:0 0 12px rgba(255,216,77,.6)}
    header nav a.active{color:#fff}
    header nav a.active::after{transform:scaleX(1); box-shadow:0 0 14px rgba(255,216,77,.75)}

    .menu-btn{display:none; background:transparent; border:1px solid rgba(255,255,255,.15); border-radius:12px; padding:10px 12px; color:#d9e6ff; cursor:pointer}
    .menu-btn .menu-icon{display:inline-block; width:20px; height:14px; position:relative}
    .menu-btn .menu-icon:before, .menu-btn .menu-icon:after, .menu-btn .menu-icon span{content:""; position:absolute; left:0; right:0; height:2px; background:#d9e6ff; border-radius:2px}
    .menu-btn .menu-icon:before{top:0}
    .menu-btn .menu-icon span{top:6px}
    .menu-btn .menu-icon:after{bottom:0}
    @media (max-width: 920px){
      /* Mobile: show menu items inline (no dropdown) */
      /* --header-h is set dynamically by JS */
.nav{
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        height: auto;
        padding: 12px 12px 10px;
        row-gap: 10px;
      }
      .brand{width:100%; justify-content:center; text-align:center;}
      /* Tighten top spacing under header on mobile */
      .hero{padding:4px 0 36px !important}
      .hero .badge{margin-top:0}

      header nav{
        display:flex !important;
        grid-row: 2;
        grid-column: 1;
        justify-self: center;
        justify-content: center;
        width: 100%;
        align-items: center;
        gap: 10px;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        padding: 10px 12px 6px;
        margin: 0;
        border-top: 1px solid rgba(255,255,255,.06);
        padding-top: 10px;
      }
      header nav::-webkit-scrollbar{display:none}
      header nav a{
        flex: 0 0 auto;
        font-size: 13px;
        padding: 10px 14px;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,.10);
        background: rgba(255,255,255,.06);
      }
      header nav a:hover{background: rgba(255,255,255,.09)}
      header nav a.active{border-color: rgba(255,216,77,.65); background: rgba(255,216,77,.12)}
      .menu-btn{display:none !important}
      .menu-panel{display:none !important}
    }
    .menu-panel{position:fixed; top:var(--header-h); left:0; right:0; background:rgba(7,22,41,.96); border-bottom:1px solid rgba(255,255,255,.06); backdrop-filter: blur(8px); transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; z-index:9998}
    .menu-panel.open{opacity:1; transform:none; pointer-events:auto}
    .menu-panel .panel-inner{max-width:1200px; margin:0 auto; padding:12px 20px 18px}
    .menu-panel a{display:block; padding:12px 12px; border-radius:12px; background:rgba(255,255,255,.04); color:#f5f8ff; font-weight:700; margin-bottom:8px; font-family:'Montserrat', Manrope, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; letter-spacing:.3px; transition:transform .2s ease, filter .2s ease; position:relative}
    .menu-panel a:hover{transform:translateX(2px); filter:brightness(1.05)}
    .menu-panel a::after{content:""; position:absolute; left:12px; right:12px; bottom:8px; height:2px; background:linear-gradient(90deg, transparent, var(--accent), transparent); transform:scaleX(0); transform-origin:center; transition:transform .25s ease, box-shadow .25s ease}
    .menu-panel a:hover::after, .menu-panel a.active::after{transform:scaleX(1); box-shadow:0 0 10px rgba(255,216,77,.55)}
    .menu-panel a.active{background:rgba(255,255,255,.08); filter:brightness(1.08)}
    .menu-panel a.btn{background:linear-gradient(180deg, var(--accent), #f2c03a); color:#111; text-align:center}

    .btn{display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px; font-weight:700; background:linear-gradient(180deg, var(--accent), #f2c03a); color:#111; box-shadow:var(--shadow); border:1px solid rgba(255,255,255,.12); transition:transform .15s ease, box-shadow .2s ease}
    .btn:hover{transform:translateY(-1px); box-shadow:0 0 28px rgba(255,216,77,.35), 0 0 6px rgba(255,216,77,.6)}
    .btn-outline{background:transparent; color:var(--accent); border:1px solid rgba(255,216,77,.55)}
    .btn-outline.max-link{color:var(--max); border-color:rgba(124,77,255,.55)}
.btn-outline.max-link:hover{box-shadow:0 0 28px rgba(124,77,255,.25), 0 0 6px rgba(124,77,255,.5)}

.btn-outline.wa-link{color:var(--wa); border-color:rgba(37,211,102,.55)}
.btn-outline.wa-link:hover{box-shadow:0 0 28px rgba(37,211,102,.25), 0 0 6px rgba(37,211,102,.5)}
.btn .ico{width:18px; height:18px}
    .btn-call{padding:10px 12px; gap:8px; background:linear-gradient(180deg, var(--accent), #f0c842);}

    .hero{position:relative; padding:72px 0 56px}
    .hero h1{font-size:clamp(28px, 5vw, 58px); line-height:1.08; margin:8px 0 12px; font-weight:800}
    .lead{font-size:clamp(16px, 2.2vw, 20px); color:var(--muted)}
    .badge{display:inline-flex; align-items:center; gap:10px; border:1px solid rgba(255,255,255,.08); padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.04)}
    .badge .dot{width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 14px var(--accent)}
    .hero-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:center}
    @media (max-width:900px){ .hero-grid{grid-template-columns:1fr} }

    .cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
    @media (max-width:1000px){ .cards{grid-template-columns:repeat(2,1fr)} }
    @media (max-width:640px){ .cards{grid-template-columns:1fr} }
    .card{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); border:1px solid rgba(255,255,255,.07); padding:18px; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.25)}
    .card h3{margin:8px 0 6px}
    .card p{margin:0; color:#b7c4db}

    section{padding:60px 0; position:relative; scroll-margin-top: calc(var(--header-h) + 10px)}
    section .title{font-size:clamp(22px,3.6vw,36px); margin:0 0 18px; font-weight:800}
    .muted{color:var(--muted)}
    .tag{
      display:block;
      width:fit-content; max-width:100%;
      margin: 0 auto 14px;
      font-family:'Montserrat', Manrope, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
      font-weight:900;
      font-size: clamp(15px, 1.6vw, 22px);
      padding: 10px 22px;
      letter-spacing: 1.2px;
      text-transform:uppercase;
      color:#101;
      border-radius:999px;
      background:linear-gradient(180deg,#ffe78a,var(--accent));
      border:1px solid rgba(0,0,0,.12);
      box-shadow:0 6px 18px rgba(255,216,77,.28), inset 0 0 0 2px rgba(255,216,77,.12);
    }

    .price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
    @media (max-width:1000px){ .price-grid{grid-template-columns:repeat(2,1fr)} }
    @media (max-width:600px){ .price-grid{grid-template-columns:1fr} }
    .price{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); border:1px solid rgba(255,255,255,.08); padding:18px; border-radius:16px}
    .price h4{margin:0 0 6px}
    .price .rub{font-weight:800; font-size:22px; color:var(--accent)}

    .contact{background: radial-gradient(800px 300px at 40% -10%, rgba(255,216,77,.15), transparent 60%), linear-gradient(180deg, var(--bg-2), var(--bg)); border-top:1px solid rgba(255,255,255,.06)}
    #contact{padding-bottom:92px;}
    .contact .cta{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:18px; margin-bottom:6px}
    @media (max-width:600px){
      #contact{padding-bottom:78px;}
      .contact .cta{gap:10px}
    }


    footer{padding:34px 0 46px; border-top:1px solid rgba(255,255,255,.06); color:#9fb0cc}

    .glow{position:absolute; inset:0; pointer-events:none}
    .glow:before, .glow:after{content:""; position:absolute; border-radius:50%; filter:blur(60px)}
    .glow:before{width:220px; height:220px; background:radial-gradient(circle, rgba(255,216,77,.35), rgba(255,216,77,0)); top:-40px; left:10%}
    .glow:after{width:280px; height:280px; background:radial-gradient(circle, rgba(255,216,77,.25), rgba(255,216,77,0)); bottom:-40px; right:8%}

    .neon{position:relative}
    .neon:after{content:""; position:absolute; left:0; bottom:-4px; width:100%; height:2px; background:linear-gradient(90deg, transparent, var(--accent), transparent); box-shadow:0 0 16px rgba(255,216,77,.7)}

    @keyframes pulseGlow { 0%,100% { text-shadow:0 0 6px rgba(255,216,77,.5), 0 0 14px rgba(255,216,77,.25)} 50% { text-shadow:0 0 10px rgba(255,216,77,.8), 0 0 24px rgba(255,216,77,.4)} }
    .spark{color:var(--accent); animation:pulseGlow 3s ease-in-out infinite}

    .reveal{opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease}
    .reveal.visible{opacity:1; transform:none}

    @media (prefers-reduced-motion: reduce){ .spark{animation:none} .reveal{transition:none} }

    .fab{position:fixed; right:18px; left:auto; bottom:18px; display:flex; flex-direction:column; gap:10px; z-index:60; transition:opacity .25s, transform .25s}
    .fab a, .fab button{width:54px; height:54px; border-radius:16px; display:grid; place-items:center; background:linear-gradient(180deg, var(--accent), #f2c03a); box-shadow:var(--shadow); border:1px solid rgba(255,255,255,.14); cursor:pointer}

    .grid-2{display:grid; grid-template-columns:1.2fr .8fr; gap:24px}
    @media (max-width:900px){ .grid-2{grid-template-columns:1fr} }

    .tel{white-space:nowrap}
    .chip{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; background:rgba(255,255,255,.06); border-radius:12px; border:1px solid rgba(255,255,255,.08)}
    .call-btn{cursor:pointer}
    .ico{display:inline-block; vertical-align:middle}
    .fab.hide{opacity:0; pointer-events:none; transform:translateX(6px)}

    /* Yellow dot for benefit cards */
    #benefits .card{position:relative; overflow:visible}
    #benefits .card h3{position:relative; padding-left:6px}
    #benefits .card h3::before{
      content:""; width:12px; height:12px; border-radius:50%;
      background:var(--accent);
      box-shadow:0 0 12px rgba(255,216,77,.85), 0 0 28px rgba(255,216,77,.25);
      position:absolute; left:-22px; top:0.7em; transform:translateY(-50%);
    }

    @media (max-width: 480px){ .fab a{width:48px; height:48px; border-radius:14px} }
    @media (max-width: 360px){ .fab a{width:44px; height:44px; border-radius:12px} }

    #services, #prices{ background:linear-gradient(180deg, var(--bg), var(--bg)); }
    #benefits{ background:linear-gradient(180deg, var(--bg-2), var(--bg)); }

    /* -------- Lead Modal (active / compact / working) -------- */
    .lead-modal{position:fixed; inset:0; display:grid; place-items:center;
      background:rgba(7,22,41,.55); backdrop-filter:blur(6px);
      opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:10000;}
    .lead-modal.open{opacity:1; pointer-events:auto;}
    .lead-box{width:min(560px, 92vw); padding:20px 18px; border-radius:18px;
      background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.12); box-shadow:0 22px 60px rgba(0,0,0,.55);}
    .lead-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px}
    .lead-title{margin:0; font-size:clamp(22px,3vw,28px)}
    .lead-close{background:transparent; border:1px solid rgba(255,255,255,.14); color:#dbe6ff; border-radius:10px; padding:6px 10px; cursor:pointer}
    .lead-form .fld{margin:10px 0}
    .lead-form label{display:block; margin:0 0 6px; color:#cfdaf0; font-size:14px}
    .lead-form input{width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.15); background:rgba(7,22,41,.6); color:#eaf2ff; font-size:16px}
    .lead-form input::placeholder{color:#aab6cc}
    .lead-form input.invalid{border-color:var(--danger); box-shadow:0 0 0 3px rgba(255,107,107,.16) inset}
    .lead-actions{display:flex; align-items:center; gap:12px; margin-top:6px}
    .ok-note{color:#a7f3c6; font-weight:700}
    .err{color:#ffb4b4; font-size:13px; margin-top:6px}

/* ==== Мобильное меню: чтобы все пункты влезали без скролла ==== */
@media (max-width: 480px) {
  header .wrap nav {
    flex-wrap: wrap;            /* разрешаем перенос строк */
    justify-content: center;    /* красиво центрируем */
    gap: 8px;                   /* чуть меньше расстояние между кнопками */
  }

  header .wrap nav a {
    padding: 8px 14px;          /* уменьшаем «таблетку» */
    font-size: 14px;
  }
}

/* чуть более широкие экраны (например, большие айфоны) */
@media (min-width: 481px) and (max-width: 640px) {
  header .wrap nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  header .wrap nav a {
    padding: 9px 18px;
    font-size: 15px;
  }
}