:root{
      --bg:#07080b;
      --bg2:#05060a;
      --panelA: rgba(255,255,255,.09);
      --panelB: rgba(255,255,255,.06);
      --stroke: rgba(255,255,255,.12);
      --stroke2: rgba(255,212,0,.22);
      --text: rgba(255,255,255,.92);
      --muted: rgba(255,255,255,.70);
      --yellow:#ffd400;
      --yellow2:#ffea55;
      --shadow: 0 26px 70px rgba(0,0,0,.60);
      --shadow2: 0 18px 45px rgba(0,0,0,.45);
    }

    html,body{height:100%;}
    html{ scroll-behavior: smooth; } /* native smooth scrolling (no jQuery jank) */

    body{
      background: var(--bg);
      color: var(--text);
      overflow-x:hidden;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    /* ======= MONOLITHIC BACKGROUND (single continuous layer) ======= */
    .bg-stage{
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        radial-gradient(1200px 700px at 70% 20%, rgba(255,212,0,.10), transparent 55%),
        radial-gradient(900px 600px at 15% 85%, rgba(255,255,255,.06), transparent 60%),
        linear-gradient(180deg, var(--bg), var(--bg2));
    }
    /* soft moving highlight — transform only (GPU friendly) */
    .bg-stage::before{
      content:"";
      position:absolute;
      inset:-30%;
      background:
        radial-gradient(700px 420px at 30% 30%, rgba(255,212,0,.14), transparent 60%),
        radial-gradient(620px 380px at 70% 60%, rgba(255,255,255,.08), transparent 62%);
      opacity:.85;
      transform: translate3d(0,0,0);
      animation: drift 14s ease-in-out infinite;
      will-change: transform;
    }
    @keyframes drift{
      0%,100%{ transform: translate3d(-1.5%, -1.0%, 0); }
      50%{ transform: translate3d(1.8%, 1.2%, 0); }
    }
    /* subtle grain (very light) */
    .bg-stage::after{
      content:"";
      position:absolute;
      inset:0;
      opacity:.05;
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
      mix-blend-mode: overlay;
      pointer-events:none;
    }

    /* ======= CURSOR RULE: keep arrow on static text ======= */
    /* By default browser shows I-beam on text; force arrow on non-input elements */
    body, p, span, div, small, strong, em, b, i, h1, h2, h3, h4, h5, h6, li, label {
      cursor: default;
    }
    a, button, .btn, [role="button"] { cursor: pointer; }
    input, textarea { cursor: text; }
    select { cursor: pointer; }

    /* ======= Glass panels ======= */
    .glass{
      background: linear-gradient(180deg, var(--panelA), var(--panelB));
      border: 1px solid var(--stroke);
      box-shadow: var(--shadow);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-radius: 22px;
      position: relative;
    }
    .glass::before{
      content:"";
      position:absolute;
      inset:-1px;
      border-radius: 22px;
      background:
        radial-gradient(520px 170px at 20% 0%, rgba(255,212,0,.16), transparent 62%),
        radial-gradient(480px 170px at 90% 25%, rgba(255,255,255,.10), transparent 64%);
      opacity:.32;
      pointer-events:none;
      z-index:-1;
    }

    .muted{ color: var(--muted); }
    section{ position:relative; z-index: 1; }
    .section-pad{ padding: 78px 0; }

    /* ======= Navbar ======= */
    .navbar{
      background: rgba(7,8,11,.45);
      border-bottom: 1px solid rgba(255,255,255,.08);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }
    .brand-mark{
      width: 38px; height: 38px;
      border-radius: 12px;
      background: radial-gradient(circle at 30% 30%, var(--yellow2), var(--yellow));
      box-shadow: 0 14px 34px rgba(255,212,0,.18);
      position: relative;
      overflow: hidden;
      flex: 0 0 auto;
    }
    .brand-mark::after{
      content:"";
      position:absolute;
      inset:-40%;
      background: linear-gradient(120deg, transparent, rgba(0,0,0,.26), transparent);
      transform: rotate(25deg) translateX(-35%);
      animation: shine 3.2s ease-in-out infinite;
      will-change: transform;
    }
    @keyframes shine{
      0%{ transform: rotate(25deg) translateX(-55%); opacity:0; }
      35%{ opacity:.55; }
      70%{ transform: rotate(25deg) translateX(70%); opacity:0; }
      100%{ opacity:0; }
    }

    /* ======= Buttons ======= */
    .btn-yellow{
      --bs-btn-bg: var(--yellow);
      --bs-btn-border-color: var(--yellow);
      --bs-btn-hover-bg: #ffe04a;
      --bs-btn-hover-border-color: #ffe04a;
      --bs-btn-color: #101014;
      --bs-btn-hover-color: #101014;
      box-shadow: 0 14px 34px rgba(255,212,0,.16);
      transform: translateZ(0);
    }
    .btn-ghost{
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.06);
      color: var(--text);
      backdrop-filter: blur(10px);
    }
    .btn-ghost:hover{
      border-color: rgba(255,212,0,.35);
      background: rgba(255,212,0,.08);
      color: var(--text);
    }

    /* ======= Hero ======= */
    .hero{
      padding-top: 118px;
      padding-bottom: 66px;
      z-index: 1;
      position: relative;
    }
    .hero-title{
      letter-spacing: -0.6px;
      line-height: 1.03;
    }
    .badge-soft{
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.88);
      border-radius: 999px;
      padding: .35rem .65rem;
      font-weight: 600;
      font-size: .9rem;
    }

    /* ======= Clean “static” hero element (lighter than previous) ======= */
    .hero-card{
      border-radius: 26px;
      border: 1px solid rgba(255,255,255,.10);
      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
      box-shadow: var(--shadow2);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      overflow: hidden;
      position: relative;
    }
    .hero-card::before{
      content:"";
      position:absolute;
      inset:-10%;
      background: conic-gradient(from 0deg,
        rgba(255,212,0,.60),
        rgba(255,212,0,0),
        rgba(255,255,255,.18),
        rgba(255,212,0,0),
        rgba(255,212,0,.60));
      opacity:.55;
      animation: spin 10s linear infinite;
      will-change: transform;
    }
 
    @keyframes spin{ to{ transform: rotate(360deg); } }
    .hero-card > .inner{
      position: relative;
      z-index: 2;
      padding: 18px;
      min-height: 420px;
      display:flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;
    }

    .stat-pill{
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border-radius: 999px;
    padding: .45rem .7rem;
    background: rgb(30 31 36);
    border: 1px solid rgba(255, 255, 255, .12);
    width: fit-content;
    }
    .stat-pill i{ color: var(--yellow); }

    .accent-line{
      height: 2px;
      width: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,212,0,.9), transparent);
      opacity:.85;
    }

    /* ======= Feature hover (transform only) ======= */
    .feature{
      transition: transform .22s ease, border-color .22s ease, background .22s ease;
      will-change: transform;
    }
    .feature:hover{
      transform: translateY(-6px);
      border-color: rgba(255,212,0,.35);
      background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.06));
    }

    .icon-chip{
      width: 44px; height: 44px;
      border-radius: 14px;
      display:flex;
      align-items:center;
      justify-content:center;
      background: rgba(255,212,0,.12);
      border: 1px solid rgba(255,212,0,.24);
      box-shadow: 0 16px 34px rgba(255,212,0,.09);
      flex: 0 0 auto;
    }
    .icon-chip i{ color: var(--yellow); font-size: 1.25rem; }

    /* Portfolio placeholder */
    .shot{
      overflow:hidden;
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
      box-shadow: var(--shadow2);
    }
    .shot .ph{
      height: 220px;
      background:
        radial-gradient(circle at 30% 35%, rgba(255,212,0,.16), transparent 55%),
        linear-gradient(120deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
      position:relative;
    }
    /*.shot .ph::after{
      content:"до / после";
      position:absolute; left: 16px; bottom: 14px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      font-size: .78rem;
      color: rgba(255,255,255,.78);
      background: rgba(0,0,0,.25);
      border: 1px solid rgba(255,255,255,.10);
      padding: .25rem .55rem;
      border-radius: 999px;
      backdrop-filter: blur(10px);
    }*/

    /* Process line */
    .step{ position:relative; padding-left: 54px; }
    .step::before{
      content:"";
      position:absolute;
      left: 18px; top: 6px;
      width: 18px; height: 18px;
      border-radius: 999px;
      background: var(--yellow);
      box-shadow: 0 16px 32px rgba(255,212,0,.16);
    }
    .step::after{
      content:"";
      position:absolute;
      left: 26px; top: 26px;
      width: 2px;
      height: calc(100% - 8px);
      background: linear-gradient(180deg, rgba(255,212,0,.55), rgba(255,212,0,0));
    }
    .step:last-child::after{ display:none; }

    .stars i{ color: var(--yellow); }

    /* Reveal (lightweight) */
    .reveal{ opacity:0; transform: translateY(14px); transition: opacity .65s ease, transform .65s ease; }
    .reveal.show{ opacity:1; transform: translateY(0); }

    /* Sticky CTA */
    .cta-bar{
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      bottom: 18px;
      z-index: 999;
      width: min(980px, calc(100% - 28px));
      padding: 10px;
      border-radius: 18px;
      background: rgba(7,8,11,.52);
      border: 1px solid rgba(255,255,255,.10);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      box-shadow: var(--shadow);
      display:flex;
      gap: 10px;
      align-items:center;
      justify-content: space-between;
    }
    .cta-bar small{ color: var(--muted); }

    /* Ripple */
    .ripple{ position: relative; overflow: hidden; }
    .ripple span.rip{
      position:absolute;
      border-radius: 999px;
      transform: scale(0);
      animation: rip .55s ease-out;
      background: rgba(255,255,255,.34);
      pointer-events:none;
      mix-blend-mode: overlay;
    } 
    @keyframes rip{ to{ transform: scale(3.2); opacity:0; } }
 
    /* Form */
    .form-control, .form-select{
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.12);
      color: var(--text);
    }
    .form-control:focus, .form-select:focus{
      background: rgba(255,255,255,.06);
      border-color: rgba(255,212,0,.35);
      box-shadow: 0 0 0 .25rem rgba(255,212,0,.12);
      color: var(--text);
    }
    .form-control::placeholder{ color: rgba(255,255,255,.45); }

    footer{
      border-top: 1px solid rgba(255,255,255,.08);
      background: rgba(7,8,11,.45);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      position: relative;
      z-index: 1;
    }

    /* Reduce motion */
    @media (prefers-reduced-motion: reduce){
      html{ scroll-behavior: auto !important; }
      *{ animation: none !important; transition: none !important; }
    }


   /* Глобальные правки для мобильной версии */
@media (max-width: 991px) {
  /* Уменьшаем паддинги секций */
  .section-pad {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

/*  .services a.works{
  margin-left: 0px important;
}*/
  
  /* Герой-секция */
  .hero {
    padding-top: 100px !important;
    padding-bottom: 40px !important;
  }
  
  /* Заголовки меньше на мобилках */
  h1, .h1, .display-4 {
    font-size: 2rem !important;
  }
  
  h2, .h2 {
    font-size: 1.75rem !important;
  }
  
  /* Кнопки на всю ширину на мобилках */
  .btn {
    margin-left: 0 !important;
    width: 100%;
    margin-bottom: 8px;
    text-align: center;
  }
  
  /* Отменяем ширину для inline-кнопок */
  .btn-group .btn,
  .d-flex .btn {
    width: auto;
  }
  
  /* Навигация */
  .navbar .container {
    padding-left: 15px;
    padding-right: 15px;
  }
  
  /* Карточки */
  .glass {
    padding: 1rem !important;
  }
  
  /* Герой-карточка */
  .hero-card .inner {
    padding: 1rem !important;
  }
  
  
  /* Отступы между элементами */
  .gap-2 {
    gap: 0.5rem !important;
  }
  
  /* Акцентная линия */
  .accent-line {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  
  /* Форма */
  .form-control, .form-select {
    font-size: 16px !important; /* Предотвращаем зум на iOS */
  }
  
  /* Карта */
  .glass.p-0.overflow-hidden {
    height: 250px !important;
  }
}

/* Планшеты */
@media (min-width: 768px) and (max-width: 991px) {
  .section-pad {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  
  .hero {
    padding-top: 120px;
    padding-bottom: 60px;
  }
}

/* Утилиты для мобильных */
@media (max-width: 575px) {
  .w-sm-100 { width: 100% !important; }
  .text-sm-center { text-align: center !important; }
  .mt-sm-3 { margin-top: 1rem !important; }
  .mb-sm-3 { margin-bottom: 1rem !important; }

  .cta-bar .phone{
    display: none !important;
  }

  .yandex-reviews-widget iframe{
    min-height: 600px;
  }

}

/* Фикс для кнопок в строке */
@media (max-width: 767px) {

  
  .d-flex.flex-wrap.gap-2 .btn {
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Особый случай для блока с соцсетями */
  .d-flex.gap-2.mt-3 {
    flex-direction: column;
  }
  
  .d-flex.gap-2.mt-3 .btn {
    width: 100%;
  }
}

/* Убираем дублирующиеся индикаторы если они есть */
.carousel-indicators {
  margin-bottom: 0.5rem;
}

@media (max-width: 767px) {
  .carousel-indicators {
    position: static;
    margin-top: 1rem;
  }
}