/* Стекло PROSTOTANCHES: общий слой для стартовой и всех ответвлений.
   Палитры, сцена со сферами, стеклянные панели, переключатель цвета, кнопки.
   Раскладка каждой страницы - в самой странице. */
/* ── палитры: data-pal на html ── */
:root,[data-pal="noch"]{
  --b0:#150c44;--b1:#080726;--b2:#030310;
  --p0a:#c25bff;--p0b:#8f3dff;--p0c:#4a24c9;--p0d:#170f5c;--p0g:#b04dff;
  --p1a:#3159f5;--p1b:#1a34bd;--p1c:#0b1664;--p1d:#050822;--p1s:#0a0a30;
  --p2a:#2a4ff0;--p2b:#1630b0;--p2c:#0a145c;--p2d:#04061c;--p2s:#03030f;
  --r0a:#ffd2f6;--r0b:#ff7ae0;--r1a:#e2ecff;--r1b:#7c9bff;--r1c:#4060ff;--r2a:#d8f3ff;--r2b:#5cc8ff;--r2c:#3a7bff;
  --acc1:#d39bff;--acc2:#5fd8ff;--glow:150,120,255;
  --cta:linear-gradient(135deg,#c3a0ff,#9aa6ff 55%,#7fdcff);--ctaInk:#120d38;
  --ava:linear-gradient(140deg,#ffc29a,#ff6aa8 60%,#c44dff);--bgc:#060518}
[data-pal="avrora"]{
  --b0:#062a2a;--b1:#031615;--b2:#020909;
  --p0a:#6dffd0;--p0b:#22d3a8;--p0c:#0b807a;--p0d:#052f3a;--p0g:#2fe0b0;
  --p1a:#1ba8a2;--p1b:#0e7079;--p1c:#073a48;--p1d:#021418;--p1s:#021414;
  --p2a:#16b59c;--p2b:#0a7a72;--p2c:#053c40;--p2d:#021212;--p2s:#010808;
  --r0a:#eafff7;--r0b:#7dffd6;--r1a:#e0fcff;--r1b:#6fe9ff;--r1c:#2fb8d8;--r2a:#e2fff4;--r2b:#59f0c0;--r2c:#1fb890;
  --acc1:#8affd2;--acc2:#4fc8ff;--glow:60,220,190;--tint:56%;
  --cta:linear-gradient(135deg,#62ecbe,#45cfd8 55%,#7fb4ff);--ctaInk:#032220;
  --ava:linear-gradient(140deg,#c8ffe9,#3fe0b5 55%,#1a9fd0);--bgc:#031615}
[data-pal="zakat"]{
  --b0:#2e0e22;--b1:#170813;--b2:#080307;
  --p0a:#ffb36b;--p0b:#ff6f61;--p0c:#c2337a;--p0d:#4a1240;--p0g:#ff7a59;
  --p1a:#c63c6d;--p1b:#8a1f55;--p1c:#4a0f33;--p1d:#1a0613;--p1s:#1a0610;
  --p2a:#ff7a4d;--p2b:#c23a52;--p2c:#5c1636;--p2d:#1a0510;--p2s:#0a0206;
  --r0a:#fff2dc;--r0b:#ffc27a;--r1a:#ffe3ec;--r1b:#ff86b0;--r1c:#d2457a;--r2a:#fff2e2;--r2b:#ffab70;--r2c:#e0603a;
  --acc1:#ffc27a;--acc2:#ff6fa8;--glow:255,120,110;
  --cta:linear-gradient(135deg,#ffb37f,#ff8ea0 55%,#e08fff);--ctaInk:#2a0a1e;
  --ava:linear-gradient(140deg,#ffe0a8,#ff8a6a 55%,#d8457e);--bgc:#170813}
[data-pal="grafit"]{
  --b0:#18181b;--b1:#0b0b0d;--b2:#050506;
  --p0a:#9a9aa3;--p0b:#55555e;--p0c:#2a2a31;--p0d:#121215;--p0g:#76767f;
  --p1a:#62626c;--p1b:#383840;--p1c:#1c1c21;--p1d:#0a0a0c;--p1s:#050506;
  --p2a:#56565f;--p2b:#2f2f36;--p2c:#18181c;--p2d:#070708;--p2s:#030304;
  --r0a:#ffffff;--r0b:#dcdce4;--r1a:#ffffff;--r1b:#c8c8d4;--r1c:#8a8a96;--r2a:#ffffff;--r2b:#bcbcc8;--r2c:#80808c;
  --acc1:#ffffff;--acc2:#a6a6b2;--glow:255,255,255;
  --cta:linear-gradient(180deg,#ffffff,#dedee4);--ctaInk:#0A0A0C;
  --ava:linear-gradient(140deg,#f2f2f4,#9c9ca6 60%,#55555e);--bgc:#0b0b0d}
[data-pal="utro"]{
  --b0:#e9ecff;--b1:#f5eef8;--b2:#fff3ea;
  --p0a:#e3d9ff;--p0b:#c4b4ff;--p0c:#a597ff;--p0d:#8f86f0;--p0g:#c9b8ff;
  --p1a:#f2f6ff;--p1b:#cfe0ff;--p1c:#a9c6ff;--p1d:#8fb2fb;--p1s:#ffffff;
  --p2a:#fff6f1;--p2b:#ffdccc;--p2c:#ffc2aa;--p2d:#f5a98e;--p2s:#ffffff;
  --r0a:#ffffff;--r0b:#ffffff;--r1a:#ffffff;--r1b:#ffffff;--r1c:#e8f0ff;--r2a:#ffffff;--r2b:#ffffff;--r2c:#ffeee6;
  --acc1:#8a6bff;--acc2:#3fa8ff;--glow:120,100,255;
  --cta:linear-gradient(135deg,#a996ff,#8aacff 55%,#72ccff);--ctaInk:#15123a;
  --ava:linear-gradient(140deg,#ffc29a,#ff7aa8 60%,#a86bff);--bgc:#f3f0fb;
  --ink:#1b1838;--dim:rgba(27,24,56,.76);--faint:rgba(27,24,56,.66)}

/* токены текста и линий: темные палитры по умолчанию, «Утро» светлая */
:root{
  --ink:#F4F2FF;--dim:rgba(244,242,255,.74);--faint:rgba(244,242,255,.58);
  --line:rgba(255,255,255,.1);--fill:rgba(255,255,255,.06);--fill2:rgba(255,255,255,.12);--edge:rgba(255,255,255,.14);
  --shade:rgba(2,2,22,.6);--onacc:#16123a;
  --ui:Onest,system-ui,-apple-system,sans-serif;--mark:Manrope,"Avenir Next",sans-serif}
[data-pal="utro"]{--ink:#1b1838;--dim:rgba(27,24,56,.76);--faint:rgba(27,24,56,.66);--line:rgba(27,24,56,.1);--fill:rgba(255,255,255,.5);--fill2:rgba(255,255,255,.78);--edge:rgba(27,24,56,.09);--shade:rgba(70,60,140,.28)}

body{background:var(--bgc);color:var(--ink);transition:background-color .7s ease}
::selection{background:var(--acc1);color:#000}

/* ── сцена ── */
/* z-index -1: сцена под всем содержимым, но над фоном страницы */
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
#bg stop{transition:stop-color .7s ease}
#bg circle{transition:fill .7s ease}

/* ── стекло ── */
.glass{position:relative;border-radius:26px;
  /* нижний слой - цвет фона палитры: гасит яркие пятна сфер под мелким текстом (аудит 21.10) */
  background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.04) 42%,rgba(255,255,255,.065)),color-mix(in srgb,var(--bgc) var(--tint,40%),transparent);
  -webkit-backdrop-filter:blur(26px) saturate(165%);backdrop-filter:blur(26px) saturate(165%);
  box-shadow:0 34px 70px -22px var(--shade),inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 0 1px rgba(255,255,255,.06)}
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(155deg,rgba(255,255,255,.55),rgba(255,255,255,.1) 30%,rgba(255,255,255,.03) 62%,rgba(255,255,255,.26));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:rgba(24,20,62,.86)}[data-pal="utro"] .glass{background:rgba(250,248,255,.92)}}
[data-pal="utro"] .glass{background:linear-gradient(160deg,rgba(255,255,255,.62),rgba(255,255,255,.34) 42%,rgba(255,255,255,.44));
  box-shadow:0 30px 60px -26px var(--shade),inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.5)}
[data-pal="utro"] .glass::after{background:linear-gradient(155deg,#fff,rgba(255,255,255,.4) 30%,rgba(120,110,200,.12) 62%,rgba(255,255,255,.8))}

/* вложенная плашка внутри стекла */
.gtile{border-radius:18px;background:var(--fill);box-shadow:inset 0 0 0 1px var(--edge),inset 0 1px 0 rgba(255,255,255,.14)}
[data-pal="utro"] .gtile{box-shadow:inset 0 0 0 1px var(--edge),inset 0 1px 0 #fff}

/* ── кнопки ── */
.gbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 15px;border-radius:11px;
  font:600 12.5px/1 var(--ui);letter-spacing:.02em;color:var(--ink);background:var(--fill);box-shadow:inset 0 0 0 1px var(--edge),inset 0 1px 0 rgba(255,255,255,.18);cursor:pointer;transition:background .2s}
.gbtn:hover{background:var(--fill2)}
.cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 19px;border-radius:12px;
  font:600 13.5px/1 var(--ui);color:var(--ctaInk);background:var(--cta);cursor:pointer;
  box-shadow:0 10px 26px -10px rgba(var(--glow),1),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .2s,box-shadow .2s}
.cta:hover{transform:translateY(-1px);box-shadow:0 14px 30px -10px rgba(var(--glow),1),inset 0 1px 0 rgba(255,255,255,.35)}
.wbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 17px;border-radius:12px;
  font:600 13.5px/1 var(--ui);color:var(--onacc);background:rgba(255,255,255,.94);box-shadow:0 8px 20px -8px rgba(var(--glow),.9);transition:transform .2s,box-shadow .2s}
.wbtn:hover{transform:translateY(-1px);box-shadow:0 12px 26px -8px rgba(var(--glow),1)}
[data-pal="utro"] .wbtn{background:#1b1838;color:#fff}

/* ── переключатель цвета: кружки собирает glass.js в любой .palsw ── */
.palsw{display:inline-flex;gap:6px;padding:5px;border-radius:11px;background:var(--fill);box-shadow:inset 0 0 0 1px var(--edge)}
.palsw button{width:20px;height:20px;padding:0;border:0;border-radius:50%;cursor:pointer;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);transition:transform .2s,box-shadow .2s}
.palsw button:hover{transform:scale(1.15)}
.palsw button[aria-pressed="true"]{box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 0 0 2px var(--bgc),0 0 0 3.5px var(--ink)}
.palsw button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
[data-pal="utro"] .palsw button{box-shadow:inset 0 0 0 1px rgba(27,24,56,.15)}
[data-pal="utro"] .palsw button[aria-pressed="true"]{box-shadow:inset 0 0 0 1px rgba(27,24,56,.15),0 0 0 2px #fff,0 0 0 3.5px var(--ink)}

/* ── шапка: плотнее стекло, чтобы меню читалось над белыми демо и светлыми кадрами (аудит 21.10) ── */
.top.glass,.ptnav.glass,.mtop.glass{background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.04)),color-mix(in srgb,var(--bgc) 74%,transparent)}
[data-pal="utro"] .top.glass,[data-pal="utro"] .ptnav.glass,[data-pal="utro"] .mtop.glass{background:linear-gradient(160deg,rgba(255,255,255,.7),rgba(255,255,255,.5)),color-mix(in srgb,#fff 60%,transparent)}

/* ── общее меню всех страниц: ссылки в шапке собирает glass.js в .ptlinks ── */
.ptlinks{display:contents}
.ptlinks a{color:inherit;transition:color .2s}
.ptlinks a:hover,.ptlinks a.on{color:var(--ink)}
.ptmenu-btn{display:none}
.ptmenu-btn svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
/* шторка меню на телефоне */
.ptmenu{position:fixed;left:8px;right:8px;z-index:61;max-height:calc(100svh - var(--pttop,70px) - 10px);overflow-y:auto;overscroll-behavior:contain;
  top:var(--pttop,70px);padding:10px;border-radius:22px;
  background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.04)),color-mix(in srgb,var(--bgc) 90%,transparent);
  -webkit-backdrop-filter:blur(26px) saturate(165%);backdrop-filter:blur(26px) saturate(165%);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.1)}
.ptmenu[hidden]{display:none}
[data-pal="utro"] .ptmenu{background:linear-gradient(160deg,rgba(255,255,255,.8),rgba(255,255,255,.6)),color-mix(in srgb,#fff 80%,transparent);box-shadow:0 30px 70px -24px rgba(70,60,140,.45),inset 0 0 0 1px rgba(27,24,56,.08)}
.ptscrim{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.35)}
.ptscrim[hidden]{display:none}
.ptm-cap{display:block;padding:8px 12px 6px;font:600 11px/1.2 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.ptm-item{display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:baseline;padding:13px 12px;border-radius:14px;color:var(--ink);font-family:var(--ui)}
.ptm-item+.ptm-item{box-shadow:inset 0 1px 0 var(--line)}
.ptm-item b{font-size:16px;font-weight:600;line-height:1.25}
.ptm-item span{font-size:13.5px;font-weight:600;white-space:nowrap}
.ptm-item small{grid-column:1/3;margin-top:3px;font-size:13px;line-height:1.4;color:var(--dim)}
.ptm-item.on{background:var(--fill2);box-shadow:none}
.ptm-item.on+.ptm-item{box-shadow:none}
.ptm-item.on b::after{content:" · " attr(data-here);font-weight:500;font-size:12px;color:var(--dim)}
.ptm-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;padding:10px 12px;border-radius:14px;background:var(--fill);box-shadow:inset 0 0 0 1px var(--edge)}
.ptm-row .ptm-cap{padding:0}
.ptmenu .palsw{gap:9px;padding:0;background:none;box-shadow:none}
.ptmenu .palsw button{width:30px;height:30px}
.ptm-acts{display:flex;gap:8px;margin-top:10px}
.ptm-acts .wbtn{flex:1;height:48px;font-size:15px}
.ptm-acts .gbtn{height:48px;padding:0 16px;font-size:13px}
/* ссылки в шапке - от 1101px; уже - кнопка «Меню» (на 920-1100 пять ссылок, кружки и «Связаться» не помещались) */
@media (max-width:1100px){
  .ptlinks,.top nav>.palsw,.ptnav nav>.palsw{display:none!important}
  .ptmenu-btn{display:inline-flex;height:36px;padding:0 13px;font-size:13px;gap:7px}
}
@media (min-width:601px){.ptmenu{left:auto;right:16px;width:420px}}

/* ── кнопки и поля на телефоне: шрифт полей не меньше 16px, иначе Safari приближает страницу ── */
@media (max-width:900px){
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px!important}
}

/* ── кто попросил меньше движения в настройках - без анимаций ── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
/* на телефоне цвет переключают в шторке меню - кружки над заголовком не нужны */
@media (max-width:1100px){.m-only.palsw{display:none!important}}
/* при открытой шторке шапка над затемнением: видно «Закрыть» и «Связаться» */
.ptmenu-open .top,.ptmenu-open .ptnav{z-index:62}
/* узкие телефоны: логотип, «Меню» и «Связаться» помещаются в одну строку */
@media (max-width:900px){.top nav,.ptnav nav{gap:8px!important}}
@media (max-width:420px){
  .top__brand,.ptnav__brand,.top .wm,.mtop b{font-size:11px!important;letter-spacing:.18em!important}
  .ptmenu-btn{padding:0 11px;gap:6px}
  .top .wbtn,.ptnav .wbtn,.mtop .wbtn{padding:0 12px}
}