/* кнопка темы в навигации */
.thm{width:32px;height:32px;border-radius:50%;border:0;background:transparent;color:inherit;display:grid;place-items:center;cursor:pointer;transition:background .2s,color .2s,transform .3s}
.thm:hover{background:rgba(127,127,127,.14)}.thm:active{transform:rotate(30deg) scale(.92)}
.thm:focus-visible{outline:2px solid #ff3651;outline-offset:2px}
html{transition:background-color .35s}

/* ===== тёмная тема ===== */
[data-theme=dark]{color-scheme:dark}
[data-theme=dark] html,html[data-theme=dark]{background:#0c0c0e}
[data-theme=dark] body{color:#f4f4f5}
/* чертёж */
[data-theme=dark] .bp .dots{background:radial-gradient(circle,rgba(255,255,255,.1) 1px,transparent 1.5px) 0 0/22px 22px}
[data-theme=dark] .bp .grid{background:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px) 0 0/110px 110px,linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px) 0 0/110px 110px}
[data-theme=dark] .bp line,[data-theme=dark] .bp rect,[data-theme=dark] .bp circle,[data-theme=dark] .bp path{stroke:rgba(255,255,255,.17)}
[data-theme=dark] .bp .lt{stroke:rgba(255,255,255,.09)}
[data-theme=dark] .bp text{fill:rgba(255,255,255,.36)}
/* общие плиты и навигация */
[data-theme=dark]{--card:#17171a;--edge:rgba(255,255,255,.08);--lift:0 1px 0 rgba(255,255,255,.05) inset,0 1px 2px rgba(0,0,0,.4),0 28px 60px -30px rgba(0,0,0,.9)}
[data-theme=dark] .nav,[data-theme=dark] body.lt .nav{background:rgba(24,24,27,.82);border-color:rgba(255,255,255,.09);color:#a1a1aa;box-shadow:0 10px 30px -18px rgba(0,0,0,.8)}
[data-theme=dark] .nav b,[data-theme=dark] body.lt .nav b{color:#fff}
[data-theme=dark] .nav a:hover{background:rgba(255,255,255,.07);color:#fff}[data-theme=dark] .nav a.on{color:#fff;background:rgba(255,255,255,.09)}
[data-theme=dark] .nav .go,[data-theme=dark] body.lt .nav .go{background:#f4f4f5;color:#0b0b0c!important}
[data-theme=dark] .eyebrow{color:#a1a1aa}[data-theme=dark] .lead{color:#b4b4bc}
[data-theme=dark] .btn-b{background:#f4f4f5;color:#0b0b0c}[data-theme=dark] .btn-b:hover{background:#fff}
[data-theme=dark] .btn-l{background:#26262a;color:#f4f4f5}[data-theme=dark] .btn-l:hover{background:#303035}
[data-theme=dark] footer{border-color:rgba(255,255,255,.08);color:#a1a1aa}
/* иконка TikTok чёрная — на тёмном фоне переворачиваем */
[data-theme=dark] .flt img[src*="tiktok"],[data-theme=dark] .key img[src*="tiktok"]{filter:invert(1)}

/* главная */
[data-theme=dark] .hero>div:before{background:radial-gradient(closest-side,rgba(12,12,14,.92),rgba(12,12,14,.6) 60%,transparent)}
[data-theme=dark] body.lt{--ext:#2a2a2f;--g:linear-gradient(180deg,#fff 30%,#c9c9d1)}
[data-theme=dark] body.lt h1{text-shadow:0 4px 40px rgba(0,0,0,.6)}
[data-theme=dark] body.lt .box{background:rgba(24,24,27,.78);border-color:rgba(255,255,255,.1);box-shadow:0 30px 80px -30px rgba(0,0,0,.9)}
[data-theme=dark] body.lt .box .ph,[data-theme=dark] body.lt .box .row{color:#a1a1aa}
[data-theme=dark] body.lt .send{background:#f4f4f5;color:#0b0b0c}
[data-theme=dark] .steps span{color:#71717a}[data-theme=dark] .steps span.on{color:#fff}[data-theme=dark] .steps span.done{color:#a1a1aa}
[data-theme=dark] #pz{background:rgba(24,24,27,.88);border-color:rgba(255,255,255,.1);color:#e4e4e7}[data-theme=dark] #pz:hover{background:#202024}
[data-theme=dark] #pz i{border-color:#e4e4e7}[data-theme=dark] #pz.off i{border-color:transparent;border-left-color:#e4e4e7}
[data-theme=dark] .nav a:hover{color:#fff}

/* примеры */
[data-theme=dark] .flt button{background:#17171a;color:#e4e4e7;box-shadow:0 6px 16px -12px rgba(0,0,0,.8)}
[data-theme=dark] .flt button.on{background:#f4f4f5;color:#0b0b0c;border-color:#f4f4f5}
[data-theme=dark] .flt button.on img[src*="tiktok"]{filter:none}
[data-theme=dark] .frame{border-color:#26262b;box-shadow:0 40px 70px -40px rgba(0,0,0,.95)}
[data-theme=dark] .meta p{color:#a1a1aa}
[data-theme=dark] .cta{background:#f4f4f5;color:#0b0b0c}[data-theme=dark] .cta .btn-b{background:#0b0b0c;color:#fff}

/* как работает */
[data-theme=dark] .num{color:#a1a1aa}[data-theme=dark] .num:before{background:#a1a1aa}
[data-theme=dark] .st p{color:#b4b4bc}
[data-theme=dark] .vis{background:radial-gradient(circle,rgba(255,255,255,.08) 1px,transparent 1.4px) 0 0/18px 18px,linear-gradient(#1d1d21,#141417);box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
[data-theme=dark] .trk{background:rgba(40,40,45,.96);box-shadow:0 0 0 1px rgba(255,255,255,.07),0 30px 40px -20px rgba(0,0,0,.9)}
[data-theme=dark] .trk:before{color:#a1a1aa}[data-theme=dark] .trk span{background:#4a4a52}
[data-theme=dark] .trk.a span{background:linear-gradient(#d4d4d8,#a1a1aa)}
[data-theme=dark] .bub.u{background:#f4f4f5;color:#0b0b0c;box-shadow:0 3px 0 #a1a1aa,0 24px 30px -14px rgba(0,0,0,.8)}
[data-theme=dark] .bub.a{background:#2a2a2f;color:#f4f4f5;box-shadow:0 1px 0 #34343a,0 3px 0 #1c1c20,0 24px 30px -14px rgba(0,0,0,.8)}
[data-theme=dark] .key{background:linear-gradient(#2e2e33,#232327);box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 2px 0 #1b1b1f,0 4px 0 #18181b,0 6px 0 #141417,0 8px 0 #111113,0 30px 34px -14px rgba(0,0,0,.9)}
[data-theme=dark] .tagline{color:#a1a1aa}

/* тарифы */
[data-theme=dark] .pl .d,[data-theme=dark] .price small,[data-theme=dark] .free p{color:#a1a1aa}
[data-theme=dark] .min{color:#f4f4f5;background:#26262a}
[data-theme=dark] .pl:hover{box-shadow:0 40px 70px -40px rgba(0,0,0,.95)}
[data-theme=dark] .pl.hot{background:#f4f4f5;color:#0b0b0c;border-color:#f4f4f5}
[data-theme=dark] .pl.hot .d,[data-theme=dark] .pl.hot .price small{color:#52525b}
[data-theme=dark] .pl.hot .min{color:#0b0b0c;background:rgba(0,0,0,.07)}
[data-theme=dark] .pl.hot .btn{background:#0b0b0c;color:#fff}
[data-theme=dark] details{border-color:rgba(255,255,255,.1)}[data-theme=dark] summary:after{color:#a1a1aa}[data-theme=dark] details p{color:#b4b4bc}