/* «Ночь» — общие стили Арканеи. Токены и компоненты по DESIGN.md (02.10.2026) */
:root{--noch:#050404;--ugol:#110f0f;--sazha:#1c1919;--kromka:#221e1e;--tekst:#cfc9c1;--svet2:#f1ece4;--dym:#8b847c;--alyj:#b5121b;--alyj2:#7d0d14;--svet:#ebe6dd;--svecha:rgba(255,190,120,.18)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--noch);color:var(--tekst);font:16px/1.55 'Jost',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.caps{font-family:'Forum',serif;text-transform:uppercase;letter-spacing:.06em;font-weight:400}
.nad{font:500 12px/1.3 'Jost';letter-spacing:.2em;text-transform:uppercase;color:var(--dym)}
.kr{color:var(--alyj)}
.ob{max-width:1344px;margin:0 auto;padding:0 48px}
h1,h2,h3{font-family:'Forum',serif;font-weight:400;text-transform:uppercase;color:var(--svet2)}
h1{font-size:66px;line-height:1.02;letter-spacing:.04em;text-wrap:balance}
h2{font-size:40px;line-height:1.05;letter-spacing:.05em}
h3{font-size:22px;line-height:1.15;letter-spacing:.06em}
p{max-width:640px}
section{padding:72px 0}
.cherta{border-top:1px solid var(--alyj2)}
.sh{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:34px;flex-wrap:wrap}
.sh .nad{margin-bottom:10px}
.sh p{color:var(--dym);max-width:460px;font-size:15px}
/* шапка магазина */
.polosa{text-align:center;font:500 11px/26px 'Jost';letter-spacing:.16em;text-transform:uppercase;color:var(--alyj);border-bottom:1px solid #161313}
.polosa b{font-weight:500;color:var(--tekst)}
.logo{display:flex;justify-content:center;align-items:center;gap:12px;padding:16px 0 10px;font:400 30px/1 'Forum';letter-spacing:.14em;color:var(--alyj);text-transform:uppercase}
.logo svg{width:30px;height:30px}
.menyu{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 48px 14px;font:400 13px/1 'Jost';letter-spacing:.14em;text-transform:uppercase;color:var(--tekst)}
.menyu nav{display:flex;gap:34px}.menyu nav a:after{content:' ⌄';opacity:.6}.menyu nav a.bez:after{content:''}
.menyu nav a:hover{color:var(--svet2)}
.menyu .pr{justify-self:end;display:flex;gap:22px;align-items:center}
.menyu svg{width:18px;height:18px;stroke:var(--tekst);fill:none;stroke-width:1.5;stroke-linecap:round}
.burger{display:none}
/* хлебные крошки */
.kroshki{font:400 12px/1 'Jost';letter-spacing:.12em;text-transform:uppercase;color:var(--dym);padding:14px 48px 0}
.kroshki a:hover{color:var(--tekst)}.kroshki i{font-style:normal;color:var(--alyj2);margin:0 10px}
/* первый экран */
.hero{position:relative;min-height:640px;overflow:hidden;isolation:isolate;display:flex;align-items:flex-end}
.hero .foto{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center 60%;filter:brightness(1.15) contrast(1.05) saturate(.6) sepia(.3)}
.hero .foto:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,4,4,.75),rgba(5,4,4,.3) 32%,transparent 52%),linear-gradient(180deg,rgba(5,4,4,.5) 0,rgba(5,4,4,0) 28%,rgba(5,4,4,0) 58%,rgba(5,4,4,.9) 86%,var(--noch) 100%)}
.hero .svet{position:absolute;z-index:-1;width:520px;height:520px;right:14%;top:35%;border-radius:50%;transform:translate(0,-50%);background:radial-gradient(circle,var(--svecha),rgba(255,190,120,.05) 45%,transparent 70%);filter:blur(12px);pointer-events:none}
.hero .zag{position:relative;z-index:3;padding:120px 48px 56px;max-width:720px}
.hero .nad{margin-bottom:14px}
.hero .pod{font:300 18px/1.45 'Jost';color:var(--tekst);margin:16px 0 24px;max-width:480px}
/* форма даты */
form{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.data{display:flex;align-items:center;height:48px;padding:0 6px 0 16px;border:1px solid rgba(207,201,193,.35);background:rgba(5,4,4,.55);backdrop-filter:blur(6px);font:400 20px/1 'Jost';color:var(--svet2)}
.data label{font:400 11px/1 'Jost';letter-spacing:.14em;text-transform:uppercase;color:var(--dym);margin-right:12px;white-space:nowrap}
.data input,.data select{background:none;border:0;outline:0;color:var(--svet2);font:400 22px/1 'Jost';text-align:center;caret-color:var(--alyj);-moz-appearance:textfield;appearance:none}
.data input{width:2.3ch}.data input[data-y],.data input.god{width:4.4ch}.data input.shir{width:9ch;text-align:left;font-size:18px}
.data input::-webkit-outer-spin-button,.data input::-webkit-inner-spin-button{-webkit-appearance:none}
.data i{color:var(--dym);font-style:normal;padding:0 2px}
.kn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 26px;background:var(--svet);color:var(--alyj);border:0;cursor:pointer;font:500 12px/1 'Jost';letter-spacing:.18em;text-transform:uppercase;transition:all .25s;white-space:nowrap}
.kn:hover{background:var(--alyj);color:var(--svet)}
.kn.vtor{background:none;color:var(--tekst);border:1px solid rgba(207,201,193,.35)}.kn.vtor:hover{border-color:var(--alyj);color:var(--svet2);background:none}
.kn.bolsh{height:56px;padding:0 34px;font-size:13px}
/* плитки чисел */
.karty{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.k{perspective:900px}
.k .lico{position:relative;height:112px;background:var(--ugol);border:1px solid var(--kromka);display:grid;place-items:center;transform-style:preserve-3d;transition:border-color .3s}
.k:hover .lico{border-color:var(--alyj2)}
.k .lico svg{position:absolute;inset:0;width:100%;height:100%}
.k .ch{position:relative;font:400 46px/1 'Forum';color:var(--svet2);text-shadow:0 0 20px rgba(181,18,27,.35)}
.k .pod2{margin-top:10px;text-align:center}
.k .rol{font:400 12px/1.3 'Jost';letter-spacing:.14em;text-transform:uppercase;color:var(--tekst)}
.k .ark{font:400 12px/1.5 'Jost';color:var(--alyj);letter-spacing:.04em}
/* пилюли */
.pilyuli{display:flex;gap:14px;flex-wrap:wrap}
.pilyuli a{display:inline-block;padding:11px 22px;background:var(--svet);color:var(--alyj);font:500 11px/1 'Jost';letter-spacing:.18em;text-transform:uppercase;transition:all .25s}
.pilyuli a:hover,.pilyuli a.ak{background:var(--alyj);color:var(--svet)}
/* карточка-товар (разделы, тарифы) */
.tovary{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.tv .f{position:relative;aspect-ratio:4/5;background:var(--ugol) center/cover;border:1px solid var(--kromka);overflow:hidden;filter:sepia(.3) saturate(.6)}
.tv .f:after{content:'';position:absolute;inset:0;box-shadow:inset 0 -60px 60px -30px rgba(5,4,4,.9);transition:box-shadow .3s}
.tv:hover .f{border-color:var(--alyj2)}
.tv .t{margin-top:12px;text-align:center;font:400 12px/1.4 'Jost';letter-spacing:.14em;text-transform:uppercase;color:var(--svet2)}
.tv .c{text-align:center;font:400 13px/1.5 'Jost';color:var(--alyj)}
/* FAQ */
.faq{max-width:860px}
.faq details{border-top:1px solid var(--kromka)}
.faq details:last-child{border-bottom:1px solid var(--kromka)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font:400 20px/1.25 'Forum';text-transform:uppercase;letter-spacing:.04em;color:var(--svet2)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:'+';color:var(--alyj);font:300 30px/1 'Jost';transition:transform .3s}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq details p{padding:0 0 22px;max-width:720px;color:var(--tekst)}
/* таблица арканов */
.arkany{columns:2;column-gap:48px;max-width:1100px}
.arkany a{display:flex;align-items:baseline;gap:14px;padding:9px 0;border-bottom:1px solid var(--kromka);break-inside:avoid;transition:color .2s}
.arkany a:hover{color:var(--svet2)}
.arkany b{font:400 20px/1 'Forum';color:var(--alyj);width:44px;flex:none}
.arkany span{font:400 15px/1.3 'Jost';color:var(--svet2);width:150px;flex:none}
.arkany small{font:300 14px/1.3 'Jost';color:var(--dym)}
/* замок */
.zamok{position:relative;overflow:hidden}
.zamok p{max-height:3.1em;overflow:hidden;-webkit-mask:linear-gradient(180deg,#000 30%,transparent);mask:linear-gradient(180deg,#000 30%,transparent)}
.zamok .otk{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font:500 11px/1 'Jost';letter-spacing:.18em;text-transform:uppercase;color:var(--alyj)}
.zamok .otk svg{width:12px;height:12px;stroke:var(--alyj);fill:none;stroke-width:1.5}
/* баннер-фото */
.banner{position:relative;isolation:isolate;min-height:520px;overflow:hidden;display:flex;align-items:flex-end;padding:0}
.banner .f{position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center;filter:brightness(1.05) sepia(.25) saturate(.5)}
.banner .f:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,var(--noch),transparent 30%,transparent 60%,rgba(5,4,4,.9)),linear-gradient(90deg,rgba(5,4,4,.6),transparent 50%)}
.banner .t{padding:0 48px 56px}
.banner h2{font-size:56px;max-width:640px}
/* подвал */
footer{border-top:1px solid #161313;padding:48px 48px 32px;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px;font:400 12px/1.7 'Jost';letter-spacing:.12em;text-transform:uppercase;color:var(--dym)}
footer .im{font:400 22px/1 'Forum';letter-spacing:.14em;color:var(--alyj);margin-bottom:12px}
footer .pr{text-transform:none;letter-spacing:0;font-size:13px;max-width:380px;color:var(--dym)}
footer a:hover{color:var(--tekst)}
footer .niz{grid-column:1/-1;border-top:1px solid #161313;padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:11px}
/* сетка двух колонок */
.dve{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.lipko{position:sticky;top:24px}
/* схема матрицы */
.shema{width:100%;max-width:560px;aspect-ratio:1;display:block;margin:0 auto}
.shema .lin{stroke:#2e2929;stroke-width:1;fill:none}
.shema .lin.os{stroke:#3a3434}
.shema .krug{stroke:#241f1f;stroke-width:1;fill:none;stroke-dasharray:2 5}
.shema .uz{cursor:pointer}
.shema .uz .f{fill:var(--ugol);stroke:#4a4343;stroke-width:1.2;transition:all .25s}
.shema .uz.gl .f{stroke:var(--alyj);stroke-width:1.6}
.shema .uz text{font-family:'Forum',serif;fill:var(--svet2);text-anchor:middle;dominant-baseline:central;font-size:20px;pointer-events:none}
.shema .uz.gl text{font-size:26px}
.shema .uz.mal text{font-size:14px;fill:var(--tekst)}
.shema .uz.ak .f,.shema .uz:hover .f{fill:var(--alyj);stroke:var(--alyj)}
.shema .uz.ak text,.shema .uz:hover text{fill:var(--svet)}
.shema .pod{font:11px 'Jost';fill:var(--dym);text-anchor:middle;letter-spacing:.12em;text-transform:uppercase}
.tochki{list-style:none}
.tochki li{display:grid;grid-template-columns:52px 1fr;gap:16px;padding:16px 0;border-top:1px solid var(--kromka);cursor:default;transition:background .2s}
.tochki li:last-child{border-bottom:1px solid var(--kromka)}
.tochki li.ak{background:linear-gradient(90deg,rgba(181,18,27,.12),transparent)}
.tochki b{font:400 34px/1 'Forum';color:var(--alyj)}
.tochki li.ak b{color:var(--svet2)}
.tochki h3{margin-bottom:4px;font-size:18px}
.tochki p{font-size:15px;color:var(--dym);max-width:none}
/* мелочи */
.mini{font-size:13px;color:var(--dym)}
.strok{display:flex;gap:28px;flex-wrap:wrap;font:400 12px/1 'Jost';letter-spacing:.14em;text-transform:uppercase}
.strok a{color:var(--tekst);border-bottom:1px solid var(--alyj2);padding-bottom:4px}.strok a:hover{color:var(--svet2);border-color:var(--alyj)}
@media (max-width:1100px){h1{font-size:54px}h2{font-size:34px}.tovary{grid-template-columns:repeat(3,1fr)}.dve{grid-template-columns:1fr}.lipko{position:static}}
@media (max-width:640px){
 .ob{padding:0 16px}section{padding:44px 0}
 h1{font-size:40px}h2{font-size:28px}h3{font-size:18px}
 .polosa .m{display:none}.logo{font-size:24px}
 .menyu{padding:0 16px 12px}.menyu nav{display:none}.burger{display:block}
 .kroshki{padding:12px 16px 0;white-space:nowrap;overflow-x:auto}
 .hero{min-height:0;display:block}
 .hero .foto{position:relative;height:360px;inset:auto}
 .hero .foto:after{background:linear-gradient(180deg,rgba(5,4,4,.4),transparent 30%,transparent 60%,var(--noch))}
 .hero .zag{padding:8px 16px 40px;max-width:none}
 .hero .pod{font-size:16px}
 .data{flex:1}.kn{width:100%}
 .karty{display:flex;overflow-x:auto;gap:12px;padding-right:16px;scrollbar-width:none;margin-right:-16px}
 .ryad .karty{margin-right:0}.k{flex:0 0 136px}.k .lico{height:104px}.k .ch{font-size:38px}
 .tovary{display:flex;overflow-x:auto;gap:12px;margin-right:-16px;padding-right:16px;scrollbar-width:none}.tv{flex:0 0 150px}
 .arkany{columns:1}.arkany span{width:120px}
 .banner{min-height:420px}.banner .t{padding:0 16px 40px}.banner h2{font-size:34px}
 footer{grid-template-columns:1fr;padding:36px 16px 24px;gap:24px}
 .faq summary{font-size:17px}
 .shema{max-width:100%}
 .tochki li{grid-template-columns:40px 1fr}.tochki b{font-size:26px}
}