
:root{--bg:#120f1e;--bg2:#1b1730;--fg:#ece6f5;--muted:#a49cbb;--line:rgba(236,230,245,.12);--card:#1b1730;
--accent:#d8b46a;--accent-fg:#120f1e;--sale:#e3768a;--ok:#8fd1a8;--gold:#d8b46a;--violet:#7c6bc4;
--font-head:"Prata",Georgia,serif;--font-body:"Commissioner",system-ui,sans-serif;--head-weight:400;--head-lh:1.1;
--radius:16px;--btn-radius:999px;--img-radius:14px;--card-ratio:500/866;--img-bg:#1b1730;--ftr-bg:#0c0a15;--ftr-fg:#ece6f5;--shadow:0 30px 70px -25px rgba(0,0,0,.7)}
body{background:radial-gradient(ellipse at 50% -10%,#2a2150 0,transparent 55%),var(--bg);font-weight:300}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background-image:radial-gradient(1px 1px at 20% 30%,#fff8,transparent),radial-gradient(1px 1px at 70% 20%,#fff6,transparent),radial-gradient(1.5px 1.5px at 40% 80%,#fff5,transparent),radial-gradient(1px 1px at 85% 65%,#fff7,transparent),radial-gradient(1px 1px at 10% 85%,#fff5,transparent),radial-gradient(1px 1px at 55% 50%,#fff4,transparent);background-size:600px 600px}
.topbar{background:rgba(216,180,106,.12);color:var(--gold)}
.hdr{background:rgba(18,15,30,.85);border-color:var(--line)}
.logo{color:var(--gold);letter-spacing:.12em;text-transform:uppercase;font-size:22px}
.logo svg{width:28px;height:28px}
.btn{font-weight:500}
.btn.ghost{color:var(--fg);border-color:rgba(236,230,245,.35)}
.eyebrow{color:var(--gold)}
h1 em,h2 em{font-style:normal;color:var(--gold)}
.sec.alt{background:rgba(255,255,255,.025)}
.box{background:var(--bg2);border:1px solid var(--line)}
.fld input,.fld textarea,.fld select{background:#0f0c1a;border-color:var(--line)}
.rvc{background:var(--bg2)}
.ftr .bt{opacity:.55}
.art .ai{border:1px solid var(--line)}
.mdl .mb{background:var(--bg2);border:1px solid var(--line)}
/* обложка */
.ah{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;min-height:min(84vh,780px);padding-top:30px;padding-bottom:60px}
@media (max-width:900px){.ah{grid-template-columns:1fr;min-height:0}}
.ah h1{font-size:clamp(42px,6vw,88px)}
.ah p{font-size:18px;color:var(--muted);max-width:520px;margin:22px 0 32px}
.fan{position:relative;height:min(70vh,560px)}
.fan img{position:absolute;left:50%;top:50%;width:min(36%,210px);border-radius:12px;box-shadow:var(--shadow);border:1px solid rgba(216,180,106,.4);transform-origin:50% 120%}
.fan img:nth-of-type(1){transform:translate(-50%,-50%) rotate(-16deg) translateX(-60%);animation:fl 7s ease-in-out infinite}
.fan img:nth-of-type(2){transform:translate(-50%,-56%);z-index:2;animation:fl2 7s ease-in-out infinite}
.fan img:nth-of-type(3){transform:translate(-50%,-50%) rotate(16deg) translateX(60%);animation:fl3 7s ease-in-out infinite}
@keyframes fl{50%{transform:translate(-50%,-53%) rotate(-18deg) translateX(-62%)}}
@keyframes fl2{50%{transform:translate(-50%,-60%)}}
@keyframes fl3{50%{transform:translate(-50%,-53%) rotate(18deg) translateX(62%)}}
.glow{position:absolute;inset:15%;background:radial-gradient(circle,rgba(124,107,196,.45),transparent 65%);filter:blur(20px)}
/* рубашка карты */
.cb{aspect-ratio:500/866;border-radius:10px;border:1px solid rgba(216,180,106,.55);background:radial-gradient(circle at 50% 50%,#3a2d6e 0,#1d1738 60%),#1d1738;position:relative;overflow:hidden;box-shadow:0 10px 30px -10px rgba(0,0,0,.8)}
.cb::before{content:"";position:absolute;inset:6px;border:1px solid rgba(216,180,106,.35);border-radius:6px;background:repeating-linear-gradient(45deg,transparent 0 8px,rgba(216,180,106,.06) 8px 9px),repeating-linear-gradient(-45deg,transparent 0 8px,rgba(216,180,106,.06) 8px 9px)}
.cb::after{content:"";position:absolute;left:50%;top:50%;width:42%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;box-shadow:inset 8px -6px 0 0 var(--gold);opacity:.85}
/* карта дня */
.cod{display:grid;grid-template-columns:300px 1fr;gap:50px;align-items:center}
@media (max-width:800px){.cod{grid-template-columns:1fr}}
.flip{perspective:1400px;cursor:pointer;max-width:300px}
.flip .in{position:relative;transition:transform 1s cubic-bezier(.3,.7,.2,1);transform-style:preserve-3d}
.flip.on .in{transform:rotateY(180deg)}
.flip .fr,.flip .bk{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip .fr{position:absolute;inset:0;transform:rotateY(180deg)}
.flip .fr img{width:100%;height:100%;border-radius:10px;border:1px solid rgba(216,180,106,.5)}
.flip .fr img.rv,.sp-slot img.rv{transform:rotate(180deg)}
.hint{font-size:14px;color:var(--muted);text-align:center;margin-top:14px}
/* услуги */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){.svc{grid-template-columns:1fr}}
.sv{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;gap:10px;transition:border-color .3s}
.sv:hover{border-color:rgba(216,180,106,.5)}
.sv h3{font-size:22px}
.sv p{color:var(--muted);font-size:15px;margin:0;flex:1}
.sv .pr{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:20px;color:var(--gold);font-family:var(--font-head)}
.sv small{font-family:var(--font-body);font-size:13px;color:var(--muted)}
/* тарологи */
.rd{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:1000px){.rd{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.rd{grid-template-columns:1fr}}
.rdc{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.rdc .rph{position:relative;height:220px;overflow:hidden;background:linear-gradient(160deg,#2c2356,#15112a)}
.rdc .rph img{position:absolute;width:110px;left:50%;top:22px;transform:translateX(-50%) rotate(-4deg);border-radius:8px;border:1px solid rgba(216,180,106,.5);box-shadow:var(--shadow)}
.rdc .rph span{position:absolute;right:14px;bottom:12px;font-family:var(--font-head);font-size:44px;color:rgba(216,180,106,.25)}
.rdc .rb{padding:22px;display:flex;flex-direction:column;gap:8px;flex:1}
.rdc h3{font-size:21px}
.rdc .rs{font-size:13px;color:var(--gold)}
.rdc p{font-size:14.5px;color:var(--muted);margin:0;flex:1}
.rdc .rf{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-size:14px}
/* шаги */
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;counter-reset:h}
@media (max-width:900px){.how{grid-template-columns:1fr}}
.how div{counter-increment:h;border-top:1px solid rgba(216,180,106,.4);padding-top:20px}
.how div::before{content:counter(h,upper-roman);font-family:var(--font-head);color:var(--gold);font-size:30px;display:block;margin-bottom:10px}
.how h3{font-size:22px;margin-bottom:6px}
.how p{color:var(--muted);margin:0;font-size:15px}
/* онлайн-расклад */
.sp-top{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
@media (max-width:900px){.sp-top{grid-template-columns:1fr}}
.sp-types{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sp-types button{text-align:left;padding:18px;border-radius:14px;border:1px solid var(--line);background:var(--bg2);transition:.2s}
.sp-types button b{display:block;font-family:var(--font-head);font-weight:400;font-size:19px;margin-bottom:4px}
.sp-types button small{color:var(--muted);font-size:13px}
.sp-types button.on{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.deckwrap{position:relative;margin:40px 0 10px;min-height:260px}
.deck{display:flex;justify-content:center;padding:20px 0 40px;flex-wrap:wrap;gap:0}
.deck .cb{width:86px;margin:0 -24px;cursor:pointer;transition:transform .25s,opacity .4s,margin .3s;flex:none}
.deck .cb:hover{transform:translateY(-18px)}
.deck .cb.picked{opacity:0;pointer-events:none}
.deck.shuf .cb{animation:sh .6s ease-in-out 2}
@keyframes sh{30%{transform:translateY(-30px) rotate(-6deg)}60%{transform:translateY(10px) rotate(5deg)}}
@media (max-width:700px){.deck .cb{width:60px;margin:0 -20px}}
.slots{display:flex;justify-content:center;gap:clamp(10px,2vw,26px);flex-wrap:wrap;margin:20px 0}
.sp-slot{width:clamp(110px,14vw,170px);text-align:center}
.sp-slot .ph{aspect-ratio:500/866;border:1px dashed rgba(216,180,106,.4);border-radius:10px;display:grid;place-items:center;color:var(--muted);font-size:13px;overflow:hidden}
.sp-slot .flip{max-width:none}
.sp-slot b{display:block;font-family:var(--font-head);font-weight:400;margin-top:10px;font-size:15px;color:var(--gold)}
.sp-slot small{color:var(--muted);font-size:12.5px}
.readings{display:grid;gap:16px;margin-top:30px}
.rdg{display:grid;grid-template-columns:90px 1fr;gap:20px;background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:20px;opacity:0;transform:translateY(14px);transition:.6s}
.rdg.vis{opacity:1;transform:none}
.rdg img{width:90px;border-radius:8px}
.rdg h3{font-size:20px;margin-bottom:4px}
.rdg .kw{font-size:13px;color:var(--gold);margin-bottom:8px}
.rdg p{margin:0;font-size:15px;color:color-mix(in srgb,var(--fg) 85%,transparent)}
.summary{border:1px solid rgba(216,180,106,.5);border-radius:var(--radius);padding:26px;margin-top:20px;background:linear-gradient(135deg,rgba(124,107,196,.18),rgba(216,180,106,.08))}
/* справочник */
.kgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:18px}
.kc{display:flex;flex-direction:column;gap:8px;font-size:14px;text-align:center}
.kc img{border-radius:8px;border:1px solid var(--line);transition:transform .3s,border-color .3s}
.kc:hover img{transform:translateY(-4px);border-color:var(--gold)}
.kd{display:grid;grid-template-columns:320px 1fr;gap:50px;padding:10px 0 80px}
@media (max-width:800px){.kd{grid-template-columns:1fr}.kd>img{max-width:260px}}
.kd>img{border-radius:12px;border:1px solid rgba(216,180,106,.5);box-shadow:var(--shadow);position:sticky;top:90px}
.kd h2{font-size:24px;margin:28px 0 10px}
.kw2{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.kw2 span{padding:5px 12px;border:1px solid var(--line);border-radius:999px;font-size:13px}
.kw2.r span{border-style:dashed;color:var(--muted)}
.disc{font-size:12.5px;color:var(--muted);max-width:760px;margin-top:20px}
