/* Вырез сверху (под камеру) */
body::before {
  content: "";
  position: fixed;
  z-index: 9999;
  top: 0; left: 0; right: 0;
  height: env(safe-area-inset-top);
  background-color: rgba(6, 4, 34, 0.6) !important;
  pointer-events: none;
}

/* Если нужен цвет и снизу (область home-indicator) */
body::after {
  content: "";
  position: fixed;
  z-index: 9999;
  left: 0; right: 0; bottom: 0;
  height: env(safe-area-inset-bottom);
  background-color: rgba(6, 4, 34, 0.6) !important;
  pointer-events: none;
}

/* Чтобы контент не уехал под чёлку/полку */
:root {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
    /* базовые background-color:#060422!important*/
    .bg-dark{background-color: #040316 !important;}
    .navbar{border-bottom:1px solid rgb(255 255 255 / 10%); }
    .bg-secondary{border-top:1px solid rgb(255 255 255 / 10%)}

    /* липкое меню + прозрачность */
    .navbar.bg-dark {
      background-color: rgba(6, 4, 34, 0.6) !important; /* 0.9 как просили */
      backdrop-filter: blur(6px);
    }

    /* заголовки */
    h2{
      text-align:center;
      text-transform:uppercase;
      font-weight:800;
      letter-spacing:.06em;
      /* плавный размер на разных экранах */
      font-size:clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem);
    }

    /* карточки услуг */
    @media (max-width:768px){
        #services .row>* {
        flex-shrink: 0;
        width: 49.999999%;
        }
        #services .card-img-top {
        height: 120px;
        }
        #services .card-text {
        font-size: 14px;
        }
        #services .mb-4 {
            margin-bottom: 0.6rem !important;
        }
        #services .row>* {
            padding-right: calc(var(--bs-gutter-x) * .2);
            padding-left: calc(var(--bs-gutter-x) * .2);
        }
        .card .card-body{padding-top:0.6rem;}
        .p-3 {padding: 0.6rem !important;}

    }
    .card{
      background:rgb(255 255 255 / 4%);
      color:#fff;
      border:1px solid rgb(255 255 255 / 8%);
      border-radius:14px;
      transition:transform .2s ease, box-shadow .2s ease;
      box-shadow:0 8px 24px rgb(0 0 0 / 15%);
    }
    .card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgb(0 0 0 / 35%)}
    .card .card-body{display:flex;align-items:center;justify-content:center;padding-bottom:0;padding-left:0;padding-right:0;}
    .card-img-top{width:100%;height:200px;object-fit:cover;object-position:center}
    .card-text{font-size:18px}

    /* фичи */
    .feature-box{
      background-color:rgb(0 0 0 / 41%);
      border-radius:16px;
      padding:25px;
      text-align:center;
      margin-bottom:20px;
      border:10px inset #7c3aed8c;
    }
    .feature-box2{
      background:rgb(255 255 255 / 4%); color:#fff;
      border:1px solid rgb(255 255 255 / 8%);
      border-radius:16px;
      padding:25px 25px 15px;
      text-align:center;
      margin-bottom:20px;
      transition:transform .2s ease, box-shadow .2s ease;
      box-shadow:0 8px 24px rgb(0 0 0 / 15%);
    }
    .feature-box h3{margin-top:10px}

    /* логотип */
    :root{--size:48px;--ring:3px;--bg:#060422}
    .ds-ring {
        inline-size: 70px;
        block-size: 70px;
        border-radius: 50%;
        border: var(--ring) solid transparent;
        background: linear-gradient(var(--bg), var(--bg)) padding-box, conic-gradient(from 0turn, #7125ff, #7c3aed, #22d3ee, #0d6efd, #0d6efd, #452187, #7226fe) border-box;
        background-clip: padding-box, border-box;
        display: grid;
        place-items: center;
        animation: spin 8s linear infinite;
    }
    .ds-text{
      font-family:"Montserrat",sans-serif; font-weight:800;
      font-size:calc(var(--size)*0.45); color:#fff; user-select:none;
      animation:spin 8s linear infinite reverse;
    }
.ds-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: "Montserrat", sans-serif;
    font-weight: 800;
    color: #fff;
    user-select: none;
    animation: spin 8s linear infinite reverse;
}

.ds-line.ds-main {
    font-size: calc(var(--size) * 0.61);
    line-height: 1;
}

.ds-line.ds-sub {
    font-size: calc(var(--size) * 0.21);
    font-weight: normal !important;
    margin-top: 0px;
    line-height: 1;
}

    @keyframes spin{to{transform:rotate(1turn)}}
    .brand-name{font-family:"Montserrat",sans-serif;font-weight:700;font-size:1.5rem;color:#fff;margin-left:.6rem}

    /* фоны секций */
    .about-section{background:url("about-bg.jpg") no-repeat center/cover; color:#fff; position:relative; z-index:1}
    @media (max-width:768px){.rating-widget{text-align: center;}.about-section{background:url("about-bg-mobile.jpg") no-repeat center/cover}}
    .about-section::before{content:"";position:absolute;inset:0;background:rgba(6,4,34,.5);z-index:-1}

    .about-section2{background:url("about-bg2.jpg") no-repeat center/cover; color:#fff; position:relative; z-index:1}
    .about-section2::before{content:"";position:absolute;inset:0;background:rgba(19,4,45,.4);z-index:-1}

    /* «Наши работы» */
    .works-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
    .works-scroll img{height:320px;border-radius:8px!important;flex-shrink:0}
    .works-scroll a { display: block; flex: 0 0 auto; }            /* плитка не схлопывается */
    .works-masonry{column-count:3;column-gap:1rem}
    .works-masonry .masonry-item{break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:1rem}
    /* .works-masonry img{width:100%;display:block;border-radius:16px!important;} */
    @media (min-width:1200px){.works-masonry{column-count:4}}
    .works-masonry {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    }

    .works-masonry img {
    width: 100%;
    height: 280px;  /* фиксированная высота */
    object-fit: cover;
    border-radius: 16px !important;
    display: block;
    }
    /* отзывы + форма */
    .panel{
      background: rgba(255, 255, 255, 0.05); /* стеклянный эффект */
      border-radius: 16px;
      padding: 20px;
      border: 1px solid rgb(255 255 255 / 8%);
      backdrop-filter: blur(10px);   /* размывает фон */
      -webkit-backdrop-filter: blur(10px); /* для Safari */
      box-shadow: 0 8px 24px rgb(0 0 0 / 15%);
    }

    .reviews-frame{width:100%;height:670px;overflow:hidden;position:relative}
    .sticky-lg{position:static}
    @media (min-width:992px){.sticky-lg{position:sticky;top:7rem}}

    /* сниженная анимация */
    @media (prefers-reduced-motion:reduce){
      .ds-ring,.ds-text{animation:none!important}
      .card{transition:none!important}
      html:focus-within{scroll-behavior:auto}
    }
.header-fixed {
  position: fixed; top: 0; left: 0; right: 0;
  padding-top: env(safe-area-inset-top);
  background: #2e0d4e;
}
.container {
margin-top: 8px;
}
.navbar-nav .nav-link {
  font-size: 1.3rem;
  font-weight: 700;
  padding-left: 1rem;
  padding-right: 1rem;
}
.navbar-nav .nav-item {
  margin-left: 1.8rem;   /* расстояние слева */
  margin-right: 1.8rem;  /* расстояние справа */
}

.navbar-nav .nav-link {
  font-weight: 600;
  color: #FFF;
}
/* service cards: подсветка + ripple */
.service-card{position:relative; overflow:hidden; cursor:pointer;}
.service-card.is-active{
  box-shadow:0 0 0 2px rgba(124,58,237,.6), 0 12px 28px rgba(0,0,0,.35)!important;
  transform:translateY(-2px);
}
.service-card .ripple{
  position:absolute; border-radius:50%; transform:scale(0);
  pointer-events:none; opacity:.6;
  background: radial-gradient(circle, rgba(124,58,237,.55) 0%, rgba(34,211,238,.45) 40%, rgba(124,58,237,0) 70%);
  animation:ripple-expand .6s ease-out forwards;
}
@keyframes ripple-expand{to{transform:scale(12); opacity:0;}}
.form-select{
  background-color: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgb(255 255 255 / 12%);
}

.form-select:focus{
  background-color: rgba(255,255,255,.1);
  color: #fff;
  border-color: #7c3aed;
  box-shadow: 0 0 0 .2rem rgba(124,58,237,.2);
}

.form-select option{
  background: #060422;
  color: #fff;
}