/* Светлая тема и переключатель темы.
   Тема ставится на <html data-theme="light|dark"> скриптом в <head>:
   по умолчанию — как в настройках устройства, выбор посетителя запоминается. */

/* ---------- переключатель ---------- */
.theme-sw{position:relative;flex:none;display:inline-flex;align-items:center;width:58px;height:30px;padding:0;
  border:1px solid var(--ln);border-radius:30px;background:transparent;cursor:pointer;transition:border-color .3s,background .3s}
.theme-sw:hover{border-color:var(--vs)}
.theme-sw:focus-visible{outline:2px solid var(--vs);outline-offset:3px}
.theme-sw__knob{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--v);
  box-shadow:0 0 10px rgba(93,3,165,.7);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.theme-sw svg{position:absolute;top:50%;width:13px;height:13px;margin-top:-6.5px;fill:none;stroke:var(--mut);stroke-width:2;stroke-linecap:round}
.theme-sw .i-moon{left:8px}
.theme-sw .i-sun{right:8px}
html[data-theme="light"] .theme-sw__knob{transform:translateX(28px)}
@media (max-width:1000px){
  .theme-sw{margin-left:auto}
  .burger{margin-left:0}
}

/* ---------- телефон в контактах на телефонах (обе темы) ---------- */
.contacts .big-tel{white-space:nowrap}
@media (max-width:620px){
  .contacts .big-tel{font-size:clamp(18px,6.2vw,30px)}
  .contacts .big-tel--2{font-size:clamp(16px,4.8vw,22px)}
}

/* ---------- светлая тема ---------- */
html[data-theme="light"]{
  --bg:#f6f4fa;--t:#16101f;--vs:#7b2fd6;--c:#0b7fae;
  --mut:rgba(22,16,31,.64);--ln:rgba(93,3,165,.16);
  color-scheme:light;
}
html[data-theme="dark"]{color-scheme:dark}

html[data-theme="light"] .grid-glow{
  background-image:linear-gradient(rgba(93,3,165,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(93,3,165,.06) 1px,transparent 1px)}
html[data-theme="light"] body::after{background:radial-gradient(ellipse 120% 90% at 50% 50%,transparent 60%,rgba(93,3,165,.07))}

/* шапка */
html[data-theme="light"] .top.scrolled{background:rgba(246,244,250,.82)}
html[data-theme="light"] .logo img{filter:none;mix-blend-mode:multiply}
html[data-theme="light"] .nav a:hover,html[data-theme="light"] .nav a.active{color:var(--t);text-shadow:none}
html[data-theme="light"] .burger i{background:var(--t)}
html[data-theme="light"] .top__tel i{box-shadow:0 0 6px var(--vs)}
@media (max-width:1000px){html[data-theme="light"] .nav{background:rgba(246,244,250,.97)}}

/* рейка и разделители */
html[data-theme="light"] .rail__dot,
html[data-theme="light"] .sec+.sec::after{background:var(--v);box-shadow:0 0 6px rgba(123,47,214,.5)}
html[data-theme="light"] .rail__fill{box-shadow:none}

/* типографика */
html[data-theme="light"] .h1 em,html[data-theme="light"] .h2 em{text-shadow:0 0 18px rgba(123,47,214,.22)}
html[data-theme="light"] .kicker::before{box-shadow:none}
html[data-theme="light"] .lead b,
html[data-theme="light"] .facts b{color:var(--t)}
html[data-theme="light"] .facts li:last-child b{text-shadow:0 0 14px rgba(123,47,214,.3)}

/* чертёж на главной */
html[data-theme="light"] .L-w .tp{stroke:rgba(22,16,31,.8)}
html[data-theme="light"] .L-dim .tp{stroke:rgba(22,16,31,.35)}
html[data-theme="light"] .tdot{fill:var(--v)}
html[data-theme="light"] .lg-w{background:var(--t);box-shadow:none}

/* кнопки */
html[data-theme="light"] .btn{box-shadow:0 6px 18px rgba(93,3,165,.28)}
html[data-theme="light"] .btn:hover{box-shadow:0 8px 26px rgba(93,3,165,.38)}
html[data-theme="light"] .btn--line{color:var(--t);background:transparent;border-color:rgba(22,16,31,.3);box-shadow:none}
html[data-theme="light"] .btn--line:hover{background:rgba(93,3,165,.06);border-color:var(--vs)}

/* услуги и иконки */
html[data-theme="light"] .card:hover{background:radial-gradient(circle at 50% 30%,rgba(93,3,165,.09),transparent 70%)}
html[data-theme="light"] .ico .mv,
html[data-theme="light"] .ico .coil,
html[data-theme="light"] .ico .fold{stroke:var(--t)}

/* преимущества: неоновые цифры */
html[data-theme="light"] .neon{color:var(--v);text-shadow:0 0 14px rgba(123,47,214,.3);animation-name:neonL}
@keyframes neonL{0%,100%{opacity:1}50%{opacity:.6}51%{opacity:.9}53%{opacity:.65}55%{opacity:.95}}

/* прайс */
html[data-theme="light"] .fmt rect.on{fill:rgba(93,3,165,.14)}
html[data-theme="light"] .tabs button:hover{color:var(--t)}
html[data-theme="light"] .tabs button.active{color:#fff;box-shadow:0 4px 14px rgba(93,3,165,.3)}
html[data-theme="light"] .pt tbody tr{
  background:linear-gradient(90deg,var(--vs),rgba(11,127,174,.7),transparent) no-repeat 0 100% / 0 1px,
             linear-gradient(rgba(22,16,31,.08),rgba(22,16,31,.08)) no-repeat 0 100% / 100% 1px}
html[data-theme="light"] .pt tbody tr.lit,html[data-theme="light"] .pt tbody tr:hover{background-size:100% 1px,100% 1px}
html[data-theme="light"] .pt tbody tr:hover td{color:var(--t);text-shadow:none}

/* калькулятор */
html[data-theme="light"] .c-row{border-bottom-color:rgba(22,16,31,.08)}
html[data-theme="light"] .c-n{text-shadow:none}
html[data-theme="light"] .c-del:hover:not(:disabled){color:var(--t);box-shadow:0 0 10px rgba(93,3,165,.25)}
html[data-theme="light"] .c-add:hover{background:rgba(93,3,165,.07);box-shadow:none}
html[data-theme="light"] .calc__result{background:radial-gradient(circle at 50% 0,rgba(93,3,165,.10),transparent 70%)}
html[data-theme="light"] .calc__result output{text-shadow:0 0 18px rgba(123,47,214,.25)}
html[data-theme="light"] .steps b{color:var(--t);box-shadow:0 4px 14px rgba(93,3,165,.18)}

/* поля формы */
html[data-theme="light"] input,html[data-theme="light"] select,html[data-theme="light"] textarea{
  color:var(--t);border-bottom-color:rgba(22,16,31,.25)}
html[data-theme="light"] input:focus,html[data-theme="light"] select:focus,html[data-theme="light"] textarea:focus{border-color:var(--vs)}
html[data-theme="light"] select option{background:#fff;color:var(--t)}
html[data-theme="light"] .drop:hover,html[data-theme="light"] .drop.over{background:rgba(93,3,165,.06);box-shadow:0 0 0 3px rgba(93,3,165,.08)}
html[data-theme="light"] .drop li::before{text-shadow:none}
html[data-theme="light"] .form__status.err{color:#c2185b}

/* контакты и подвал */
html[data-theme="light"] .contacts .big-tel{text-shadow:none}
html[data-theme="light"] .faq summary::after{text-shadow:none}
html[data-theme="light"] .foot{color:rgba(22,16,31,.55)}
html[data-theme="light"] .agree-link:hover,html[data-theme="light"] .foot__legal a:hover{color:var(--t);text-shadow:none}
html[data-theme="light"] .call{box-shadow:0 6px 20px rgba(93,3,165,.4)}

/* подложки под текстом: в светлой теме — светлые */
html[data-theme="light"] .sec{
  background:radial-gradient(ellipse 70% 62% at 50% 52%,
    rgba(246,244,250,var(--veil)) 0%,rgba(246,244,250,var(--veil)) 45%,rgba(246,244,250,0) 78%)}
html[data-theme="light"] .hero{
  background:
    radial-gradient(ellipse 42% 55% at 26% 55%,rgba(246,244,250,var(--veil)) 0%,rgba(246,244,250,var(--veil)) 50%,rgba(246,244,250,0) 85%),
    radial-gradient(ellipse 38% 45% at 74% 52%,rgba(246,244,250,var(--veil)) 0%,rgba(246,244,250,var(--veil)) 50%,rgba(246,244,250,0) 85%)}
html[data-theme="light"] .card,html[data-theme="light"] .adv li,
html[data-theme="light"] .calc__result,html[data-theme="light"] .drop{background-color:rgba(246,244,250,.6)}

/* страница политики */
html[data-theme="light"] .doc-back:hover{color:var(--t);text-shadow:none}
html[data-theme="light"] .doc{background:radial-gradient(ellipse 90% 60% at 50% 30%,rgba(246,244,250,.9),transparent)}
html[data-theme="light"] .doc p,html[data-theme="light"] .doc li{color:rgba(22,16,31,.82)}
html[data-theme="light"] .doc-box{background:rgba(93,3,165,.05)}
html[data-theme="light"] .doc-box b{color:var(--t)}