/* ============================================================
   Глубина. Накладывается поверх боевых стилей, ничего в них
   не меняя. Три состояния переключаются атрибутом на <html>:
     off — как сейчас
     on  — свет за страницей
     max — свет + разделы-панели + полоса со слоганом
   ============================================================ */

/* ---------- УРОВЕНЬ 1: свет, который не скроллится ----------
   Задник закреплён на экране, а страница едет над ним. Отсюда
   и берётся ощущение слоёв: раньше всё двигалось одним куском. */
html[data-depth="on"],
html[data-depth="max"]{background:#061220}
html[data-depth="on"] body,
html[data-depth="max"] body{background:transparent}
html[data-depth="on"] body::before,
html[data-depth="max"] body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(68% 48% at 16% 8%,  rgba(var(--accent-rgb),.22) 0%, transparent 62%),
    radial-gradient(55% 42% at 88% 26%, rgba(var(--gold-rgb),.08)  0%, transparent 62%),
    radial-gradient(75% 52% at 50% 94%, rgba(var(--accent-rgb),.16) 0%, transparent 62%),
    #061220;
}

/* разделы становятся полупрозрачными — сквозь них проступает свет */
html[data-depth="on"] .section-services{
  background:rgba(16,38,61,.72);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
}
html[data-depth="on"] footer{
  background:rgba(7,20,38,.82);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
}
/* тонкая световая кромка сверху — классический признак «панели» */
html[data-depth="on"] .section-about,
html[data-depth="on"] .section-team,
html[data-depth="on"] .section-services,
html[data-depth="on"] #contact{box-shadow:inset 0 1px 0 rgba(var(--text-rgb),.05)}

/* ---------- УРОВЕНЬ 2: разделы как отдельные панели ---------- */
html[data-depth="max"] .section-about,
html[data-depth="max"] .section-team,
html[data-depth="max"] .section-services,
html[data-depth="max"] #contact{
  max-width:1420px;margin:0 auto 20px;border-radius:24px;
  border:1px solid rgba(var(--text-rgb),.08);
  border-top-color:rgba(var(--text-rgb),.12);
  background:rgba(12,29,49,.68);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  box-shadow:0 34px 80px -46px rgba(0,0,0,.95),inset 0 1px 0 rgba(var(--text-rgb),.06);
}
html[data-depth="max"] .section-services{background:rgba(17,40,65,.72)}
html[data-depth="max"] footer{
  max-width:1420px;margin:0 auto;border-radius:24px 24px 0 0;
  background:rgba(7,20,38,.82);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
}
/* поля по бокам, чтобы панели не упирались в край экрана */
html[data-depth="max"] body{padding:0 18px}
html[data-depth="max"] #navbar{left:0;right:0}

/* ---------- объём у карточек: без теней они кажутся наклейками ---------- */
html[data-depth="on"] .team-card,
html[data-depth="max"] .team-card,
html[data-depth="on"] .service-why,
html[data-depth="max"] .service-why{
  box-shadow:0 22px 54px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(var(--text-rgb),.05);
}
html[data-depth="max"] .acc-item,
html[data-depth="max"] .svc-acc-item{
  border:1px solid rgba(var(--text-rgb),.07);border-radius:14px;
  background:rgba(var(--text-rgb),.022);margin-bottom:9px;padding:0 18px;
  box-shadow:0 12px 30px -24px rgba(0,0,0,.9);
}
html[data-depth="max"] .svc-accordion{padding-left:28px}

/* ---------- полоса со слоганом ---------- */
.depth-band{display:none}
html[data-depth="max"] .depth-band{
  display:grid;grid-template-columns:1.05fr .95fr;align-items:center;
  max-width:1420px;margin:0 auto 20px;border-radius:24px;overflow:hidden;
  border:1px solid rgba(var(--text-rgb),.08);
  background:#071526;min-height:380px;
  box-shadow:0 34px 80px -46px rgba(0,0,0,.95);
}
.depth-band-img{position:relative;height:100%;min-height:380px;
  background:url('/kadr.jpg') center/cover no-repeat}
.depth-band-img::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 38%,rgba(7,21,38,.96) 100%)}
.depth-band-txt{padding:48px 46px 48px 8px}
.depth-band-txt .q{font-family:var(--f-display);font-weight:700;
  font-size:clamp(24px,3vw,40px);line-height:1.1;letter-spacing:-.02em;
  text-transform:uppercase;margin-bottom:18px}
.depth-band-txt .q em{font-style:normal;color:var(--accent)}
.depth-band-txt p{color:rgba(var(--text-rgb),.62);font-size:15.5px;max-width:48ch;line-height:1.7}

/* ---------- переключатель: это инструмент показа, не часть сайта ---------- */
.depth-ui{position:fixed;left:16px;bottom:16px;z-index:600;
  display:flex;flex-direction:column;gap:7px;padding:12px;border-radius:14px;
  background:rgba(4,12,22,.92);border:1px solid rgba(var(--text-rgb),.14);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 20px 50px -24px rgba(0,0,0,.9);font-family:var(--f-body)}
.depth-ui b{font-family:var(--f-display);font-weight:700;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(var(--text-rgb),.4);margin-bottom:2px}
.depth-ui button{display:block;width:100%;text-align:left;cursor:pointer;
  padding:9px 13px;border-radius:9px;border:1px solid rgba(var(--text-rgb),.12);
  background:none;color:rgba(var(--text-rgb),.72);font:inherit;font-size:13px;
  transition:background .2s,border-color .2s,color .2s}
.depth-ui button:hover{color:var(--text);border-color:rgba(var(--text-rgb),.3)}
.depth-ui button.on{background:rgba(var(--accent-rgb),.18);border-color:var(--accent);color:var(--accent-hi)}

@media (max-width:900px){
  html[data-depth="max"] .depth-band{grid-template-columns:1fr}
  .depth-band-img{min-height:210px}
  .depth-band-img::after{background:linear-gradient(180deg,transparent 28%,rgba(7,21,38,.96) 100%)}
  .depth-band-txt{padding:28px 22px 34px}
  html[data-depth="max"] body{padding:0 10px}
  html[data-depth="max"] .section-about,
  html[data-depth="max"] .section-team,
  html[data-depth="max"] .section-services,
  html[data-depth="max"] #contact{border-radius:18px;margin-bottom:12px}
  .depth-ui{left:10px;bottom:10px;padding:9px}
  .depth-ui button{font-size:12px;padding:8px 10px}
}