:root{
--gold:#cca656; --gold-dark:#ba8923; --gold-light:#fbd890;
--main-font-size:0.520833vw; --wrapper-offset:8rem;
}
@media(min-width:1921px){:root{--main-font-size:62.5%;}}
@media(max-width:1440px){:root{--main-font-size:0.572917vw;--wrapper-offset:6rem;}}
@media(max-width:1120px){:root{--main-font-size:0.625vw;--wrapper-offset:4rem;}}
@media(max-width:980px){:root{--main-font-size:50%;--wrapper-offset:2rem;}}
@media(max-width:580px){:root{--main-font-size:62.5%;--wrapper-offset:1.6rem;}}
@media(max-width:440px){:root{--main-font-size:2.6667vw;}}
*,*::before,*::after{box-sizing:border-box;}
.bg-shell {
margin:0;padding:0;font-family:'Manrope',sans-serif;
font-size:1.8rem;line-height:1.3;letter-spacing:-0.02em;
color:#f4f1e6;background:#0d1029;
-webkit-font-smoothing:antialiased;
}
@media(max-width:1120px){.bg-shell {font-size:1.6rem;}}
@media(max-width:580px){.bg-shell {font-size:1.4rem;}}
.bg-shell img{max-width:100%;display:block;}
.bg-shell a{text-decoration:none;color:inherit;}
.bg-shell button{font-family:inherit;cursor:pointer;}
h1,h2,h3,h4{margin:0;}
.h1{font-family:'Forum',serif;font-weight:400;font-size:9.2rem;line-height:0.85;letter-spacing:-0.015em;}
.h2{font-family:'Forum',serif;font-weight:400;font-size:7.6rem;line-height:0.9;letter-spacing:-0.015em;}
.h3{font-family:'Forum',serif;font-weight:400;font-size:3.2rem;line-height:1.1;}
@media(max-width:1120px){.h1{font-size:6.8rem;}.h2{font-size:5.6rem;}.h3{font-size:2.6rem;}}
@media(max-width:580px){.h1{font-size:4.4rem;line-height:0.82;}.h2{font-size:4rem;line-height:0.82;}.h3{font-size:2.1rem;}}
.bg-shell .wrap{width:100%;max-width:calc(144rem + 2*var(--wrapper-offset));margin:0 auto;padding:0 var(--wrapper-offset);}
/* ── PAGE BG ── */
.bg-shell{
position:relative;overflow:clip;min-height:100vh;
background:
radial-gradient(ellipse at 28% 18%,rgba(79,114,93,0.16) 0%,transparent 45%),
radial-gradient(ellipse at 78% 78%,rgba(204,166,86,0.13) 0%,transparent 50%),
linear-gradient(180deg,#0d1029 0%,#15193a 50%,#1d2148 100%);
background-color:#0d1029;
background-attachment:fixed;
}
.bg-shell::before{
content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
background:
radial-gradient(1px 1px at 8% 14%,#fff 50%,transparent),
radial-gradient(1px 1px at 22% 32%,#fff 50%,transparent),
radial-gradient(1.5px 1.5px at 38% 18%,transparent 0%,transparent),
radial-gradient(1px 1px at 55% 24%,#fff 50%,transparent),
radial-gradient(1px 1px at 72% 14%,#fff 50%,transparent),
radial-gradient(1.5px 1.5px at 88% 28%,var(--gold) 50%,transparent),
radial-gradient(1.5px 1.5px at 14% 52%,var(--gold) 50%,transparent),
radial-gradient(1px 1px at 32% 64%,#fff 50%,transparent),
radial-gradient(1px 1px at 48% 78%,#fff 50%,transparent),
radial-gradient(2px 2px at 64% 56%,var(--gold-light) 50%,transparent),
radial-gradient(1px 1px at 80% 72%,#fff 50%,transparent),
radial-gradient(1.5px 1.5px at 92% 90%,var(--gold) 50%,transparent),
radial-gradient(1px 1px at 6% 88%,#fff 50%,transparent),
radial-gradient(1.5px 1.5px at 28% 92%,var(--gold-light) 50%,transparent);
background-size:
1100px 750px,950px 680px,850px 720px,1050px 800px,
920px 640px,1180px 760px,980px 700px,1020px 740px,
880px 660px,1100px 820px,940px 680px,1060px 770px,
870px 700px,990px 730px;
opacity:0.8;
}
.bg-glyphs{
position:fixed;inset:0;pointer-events:none;z-index:0;opacity:0.9;
background-repeat:repeat-y;
background-image:
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,");
background-size:220px 850px,220px 1100px,220px 950px,220px 1200px,220px 1400px,220px 1500px;
background-position:left 80px,left 480px,right 60px,right 540px,left 1100px,right 980px;
}
/* ── BREADCRUMBS (matching designs-3.html) ── */
.bg-shell .crumbs.wrap{
position:relative;z-index:5;
display:flex;align-items:center;gap:8px;
padding-top:40px; padding-bottom:40px;
font-size:1.55rem;letter-spacing:0.04em;
color:#9a96a6;
}
.crumbs a{
color:#c4c2cc;text-decoration:none;
transition:color .2s;
}
.crumbs a:hover{color:var(--gold);}
.crumbs .sep{color:rgba(204,166,86,0.45);}
.crumbs .here{color:var(--gold);}
@media(max-width:580px){.crumbs{font-size:1.45rem;padding-top:16px;}}
/* ── HERO ── */
.bg-shell .hero.wrap{
position:relative;z-index:1;
padding-top:100px;padding-bottom:88px;
display:grid;
grid-template-columns:1fr 440px;
gap:72px;align-items:center;
}
@media(max-width:1120px){.hero{grid-template-columns:1fr 360px;gap:48px;}}
@media(max-width:820px){.hero{grid-template-columns:1fr;gap:52px;padding-top:36px;padding-bottom:64px;}}
.hero-text .eyebrow{
font-size:1.3rem;text-transform:uppercase;letter-spacing:0.38em;
color:var(--gold);margin-bottom:22px;
}
.hero-text .h1 em{font-style:italic;color:var(--gold);}
.hero-text .lede{
font-size:1.8rem;line-height:1.55;color:#c4c2cc;
max-width:520px;margin:24px 0 40px;
}
@media(max-width:580px){.hero-text .lede{font-size:1.6rem;}}
/* Question form */
.question-form{display:flex;flex-direction:column;gap:16px;max-width:580px;}
.question-field{position:relative;}
.question-input{
width:100%;
background:rgba(255,255,255,0.03);
border:1.5px solid rgba(204,166,86,0.42);
border-radius:16px;
padding:20px 56px 20px 24px;
font-family:'Forum',serif;font-size:2.4rem;line-height:1.45;
color:#f4f1e6;
resize:none;height:118px;
transition:border-color .2s,box-shadow .2s,background .2s;
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
letter-spacing:-0.01em;
}
.question-input:focus{
outline:none;
border-color:var(--gold);
background:rgba(204,166,86,0.04);
box-shadow:0 0 0 3px rgba(204,166,86,0.14),0 8px 32px rgba(0,0,0,0.28);
}
.question-input::placeholder{color:#5e5c74;font-size:2.3rem;}
/* Quick question chips above input */
.quick-chips{
display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px;
}
.quick-chip{
display:inline-flex;align-items:center;gap:8px;
background:rgba(255,255,255,0.035);
border:1px solid rgba(204,166,86,0.28);
color:#dadbe0;
padding:11px 18px;border-radius:999px;
font-family:'Manrope',sans-serif;font-size:1.8rem;font-weight:500;
cursor:pointer;letter-spacing:-0.01em;line-height:1.1;
transition:background .18s,border-color .18s,color .18s,transform .12s;
}
.quick-chip::before{
content:"";display:inline-block;width:6px;height:6px;
border-radius:50%;background:var(--gold);opacity:0.7;flex-shrink:0;
}
.quick-chip:hover{
background:rgba(204,166,86,0.1);
border-color:var(--gold);
color:#fbf8ec;transform:translateY(-1px);
}
@media(max-width:580px){.quick-chip{font-size:1.6rem;padding:9px 14px;}}
.question-input.has-error{border-color:rgba(232,138,118,0.9);animation:shake .35s ease;}
@keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-6px);}75%{transform:translateX(6px);}}
/* Сообщение об ошибке валидации вопроса */
.q-error{
margin-top:-4px;
padding:14px 18px;
background:linear-gradient(135deg,rgba(232,138,118,0.10),rgba(232,138,118,0.04));
border:1px solid rgba(232,138,118,0.45);
border-radius:12px;
color:#f4d4c5;
font-size:1.5rem;line-height:1.45;
display:flex;align-items:flex-start;gap:10px;
opacity:0;transform:translateY(-4px);
transition:opacity .25s ease, transform .25s ease;
}
.q-error::before{
content:"!";
flex-shrink:0;
width:22px;height:22px;border-radius:50%;
background:rgba(232,138,118,0.25);
color:#ffb89e;
font-family:'Forum',serif;font-weight:400;font-size:1.6rem;
display:inline-flex;align-items:center;justify-content:center;
margin-top:1px;
}
.q-error[hidden]{display:none;}
.q-error.q-error--show{opacity:1;transform:translateY(0);}
@media(max-width:580px){
.q-error{font-size:1.4rem;padding:12px 14px;}
}
.q-char{
position:absolute;bottom:12px;right:16px;
font-size:1.1rem;color:#5e5c74;pointer-events:none;letter-spacing:0;
transition:color .2s;
}
.q-char.warn{color:rgba(204,166,86,0.7);}
.form-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.form-row--secondary{gap:14px;margin-top:4px;}
.btn-primary{
background:linear-gradient(135deg,var(--gold) 0%,var(--gold-dark) 100%);
color:#1a1518;border:none;
padding:17px 42px;border-radius:999px;
font-size:1.6rem;font-weight:700;
box-shadow:0 12px 32px rgba(204,166,86,0.35);
transition:transform .15s,box-shadow .15s;
white-space:nowrap;
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 18px 40px rgba(204,166,86,0.44);}
.btn-primary--lg{
align-self:flex-start;
padding:20px 52px;
font-size:1.8rem;letter-spacing:0.01em;
}
@media(max-width:580px){
.btn-primary--lg{width:100%;text-align:center;padding:18px 24px;font-size:1.7rem;}
}
.btn-ghost{
background:transparent;color:var(--gold);
border:1px solid rgba(204,166,86,0.38);
padding:14px 22px;border-radius:999px;
font-size:1.4rem;font-weight:500;
display:inline-flex;align-items:center;gap:8px;
transition:all .15s;
}
.btn-ghost:hover{background:rgba(204,166,86,0.1);border-color:var(--gold);}
.btn-ghost svg{width:14px;height:14px;flex-shrink:0;}
@media(max-width:580px){
.btn-ghost{font-size:1.3rem;padding:12px 18px;}
}
/* Переключатель типа расклада */
.spread-picker{
display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px;
}
.spread-picker .sp-opt{
flex:1 1 auto;min-width:0;
display:flex;flex-direction:column;align-items:flex-start;gap:4px;
background:rgba(255,255,255,0.03);
border:1px solid rgba(204,166,86,0.32);
color:#dadbe0;
padding:13px 18px;border-radius:14px;
cursor:pointer;text-align:left;
font-family:'Manrope',sans-serif;
transition:background .18s,border-color .18s,color .18s,transform .12s;
}
.spread-picker .sp-opt:hover{background:rgba(204,166,86,0.07);border-color:var(--gold);color:#fbf8ec;transform:translateY(-1px);}
.spread-picker .sp-opt.is-active{
background:linear-gradient(135deg,rgba(204,166,86,0.22),rgba(204,166,86,0.10));
border-color:var(--gold);color:#fbf8ec;
box-shadow:0 0 0 1px rgba(204,166,86,0.4) inset, 0 6px 18px rgba(204,166,86,0.18);
}
.spread-picker .sp-num{
font-family:'Forum',serif;font-size:2rem;line-height:1.05;
color:var(--gold);letter-spacing:0.01em;
}
.spread-picker .sp-opt.is-active .sp-num{color:var(--gold-light);}
.spread-picker .sp-name{
font-size:1.35rem;color:#9a96a6;letter-spacing:0.01em;line-height:1.25;
}
.spread-picker .sp-opt.is-active .sp-name{color:#dadbe0;}
@media(max-width:580px){
.spread-picker{gap:8px;}
.spread-picker .sp-opt{padding:10px 14px;}
.spread-picker .sp-num{font-size:1.7rem;}
.spread-picker .sp-name{font-size:1.2rem;}
}
/* ── HERO · "?" QUESTION FAN ANIMATION ── */
.qfan-stage{
position:relative;
width:100%; height:750px;
display:flex; align-items:center; justify-content:center;
overflow:visible;
transform: translateX(-28px); /* shift slightly left */
}
.qfan-wrap{
position:relative;
width:157px; height:252px;
}
.qfan-card{
position:absolute; top:0; left:0;
width:157px; height:252px;
border-radius:15px;
background:linear-gradient(170deg,#141e4e 0%,#0a1030 100%);
border:1.5px solid rgba(204,166,86,0.65);
box-shadow: 0 3px 10px rgba(0,0,0,0.11), 0 1px 3px rgba(0,0,0,0.07);
transform-style:preserve-3d;
animation: qfan-question 7s cubic-bezier(.4,.05,.4,1) infinite;
animation-delay: var(--d,0s);
}
.qfan-back,.qfan-face{
position:absolute; inset:0;
border-radius:inherit;
overflow:hidden;
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
}
.qfan-back svg{ width:100%; height:100%; display:block; }
.qfan-face{
transform:rotateY(180deg);
background:#f0e8d5;
}
.qfan-face img{ width:100%; height:100%; display:block; object-fit:cover; }
.qfan-card:nth-child(1) { --sx:-114px; --sy:-157px; --sr:-50deg; --d:0s; z-index:1; }
.qfan-card:nth-child(2) { --sx:-77px; --sy:-206px; --sr:-30deg; --d:0.05s; z-index:2; }
.qfan-card:nth-child(3) { --sx:-24px; --sy:-230px; --sr:-12deg; --d:0.10s; z-index:3; }
.qfan-card:nth-child(4) { --sx:32px; --sy:-228px; --sr:18deg; --d:0.15s; z-index:4; }
.qfan-card:nth-child(5) { --sx:80px; --sy:-199px; --sr:38deg; --d:0.20s; z-index:5; }
.qfan-card:nth-child(6) { --sx:114px; --sy:-151px; --sr:62deg; --d:0.25s; z-index:6; }
.qfan-card:nth-child(7) { --sx:119px; --sy:-87px; --sr:90deg; --d:0.30s; z-index:7; }
.qfan-card:nth-child(8) { --sx:95px; --sy:-32px; --sr:122deg; --d:0.35s; z-index:8; }
.qfan-card:nth-child(9) { --sx:53px; --sy:8px; --sr:155deg; --d:0.40s; z-index:9; }
.qfan-card:nth-child(10) { --sx:10px; --sy:39px; --sr:182deg; --d:0.45s; z-index:10; }
.qfan-card:nth-child(11) { --sx:0px; --sy:129px; --sr:0deg; --d:0.58s; z-index:11; }
@keyframes qfan-question{
0%, 4% { transform: translate(0,0) rotate(0deg); }
18%, 64% { transform: translate(var(--sx),var(--sy)) rotate(var(--sr)); }
82%, 100% { transform: translate(0,0) rotate(0deg); }
}
/* Glow behind the ? mark (hero right column) */
.qfan-stage::before{
content:"";
position:absolute;
width:360px; height:280px;
left:50%; top:52%;
transform:translate(-50%,-50%);
border-radius:50%;
background: radial-gradient(ellipse at 38% 50%,
rgba(204,166,86,0.20) 0%,
rgba(150,90,235,0.16) 30%,
rgba(232,90,150,0.12) 55%,
transparent 70%
);
filter:blur(55px);
pointer-events:none;
z-index:0;
animation: qglow-pulse 5s ease-in-out infinite;
}
@keyframes qglow-pulse{
0%,100%{ opacity:0.7; transform:translate(-50%,-50%) scale(1); }
50% { opacity:1; transform:translate(-50%,-50%) scale(1.18); }
}
.qfan-wrap{ z-index:1; position:relative; }
/* Collapse: triggered by JS when user clicks "Сделать расклад" */
.qfan-wrap.collapsing .qfan-card{
animation: qfan-collapse 0.5s cubic-bezier(.4,.05,.4,1) both !important;
}
.qfan-wrap.collapsing .qfan-card:nth-child(1) {animation-delay:0.26s !important;}
.qfan-wrap.collapsing .qfan-card:nth-child(2) {animation-delay:0.23s !important;}
.qfan-wrap.collapsing .qfan-card:nth-child(3) {animation-delay:0.20s !important;}
.qfan-wrap.collapsing .qfan-card:nth-child(4) {animation-delay:0.17s !important;}
.qfan-wrap.collapsing .qfan-card:nth-child(5) {animation-delay:0.14s !important;}
.qfan-wrap.collapsing .qfan-card:nth-child(6) {animation-delay:0.11s !important;}
.qfan-wrap.collapsing .qfan-card:nth-child(7) {animation-delay:0.08s !important;}
.qfan-wrap.collapsing .qfan-card:nth-child(8) {animation-delay:0.05s !important;}
.qfan-wrap.collapsing .qfan-card:nth-child(9) {animation-delay:0.03s !important;}
.qfan-wrap.collapsing .qfan-card:nth-child(10){animation-delay:0.01s !important;}
.qfan-wrap.collapsing .qfan-card:nth-child(11){animation-delay:0s !important;}
@keyframes qfan-collapse{
to{ transform:translate(0,0) rotate(0deg); }
}
/* After collapse: only one card stays */
.qfan-wrap.collapsed .qfan-card:not(:last-child){
opacity:0;
transition:opacity 0.22s ease;
}
.qfan-wrap.collapsed .qfan-card:last-child{
animation: qfan-pick 1.5s cubic-bezier(.15,.9,.4,1) both !important;
box-shadow: 0 20px 60px rgba(0,0,0,0.42), 0 6px 18px rgba(204,166,86,0.22) !important;
}
@keyframes qfan-pick{
0% { transform: translate(0,0) rotate(0deg) scale(1) rotateY(0deg); }
32% { transform: translate(0,-36px) rotate(-4deg) scale(1.1) rotateY(0deg); }
52% { transform: translate(0,-36px) rotate(-4deg) scale(1.1) rotateY(90deg); }
78% { transform: translate(0,-24px) rotate(-3deg) scale(2.0) rotateY(180deg); }
100% { transform: translate(0,-20px) rotate(-2deg) scale(2.1) rotateY(180deg); }
}
/* Shuffle animation before collapse */
.qfan-wrap.shuffling .qfan-card{
animation: qfan-shuffle 0.52s ease both !important;
}
.qfan-wrap.shuffling .qfan-card:nth-child(odd) { animation-delay:0s !important; }
.qfan-wrap.shuffling .qfan-card:nth-child(even) { animation-delay:0.06s !important; }
.qfan-wrap.shuffling .qfan-card:nth-child(3n) { animation-delay:0.12s !important; }
@keyframes qfan-shuffle{
0% { transform: translate(0,0) rotate(0deg); }
18% { transform: translate(-32px,-22px) rotate(-20deg) scale(0.96); }
38% { transform: translate(28px,-20px) rotate(22deg) scale(1.04); }
58% { transform: translate(-16px,-12px) rotate(-10deg) scale(0.98); }
78% { transform: translate(12px,-8px) rotate(11deg) scale(1.02); }
100% { transform: translate(0,0) rotate(0deg); }
}
@media(max-width:1120px){
.qfan-stage{ height:638px; transform:translateX(-22px); }
.qfan-wrap{ width:136px; height:218px; }
.qfan-card{ width:136px; height:218px; border-radius:13px; }
}
@media(max-width:820px){
.qfan-stage{ height:506px; transform:none; }
.qfan-wrap{ width:114px; height:183px; }
.qfan-card{ width:114px; height:183px; border-radius:11px; }
}
/* ── Финальный веер выпавших карт справа (вместо одной коллапс-карты) ── */
.qfan-wrap.final-spread{
/* Карты разъезжаются по горизонтали — обёртка не должна обрезать */
width:auto; height:auto;
--qf-w:157px; --qf-h:252px;
--fx-scale:1;
}
.qfan-wrap.final-spread .qfan-card{
left:50%; top:50%;
margin-left:calc(var(--qf-w) / -2);
margin-top:calc(var(--qf-h) / -2);
width:var(--qf-w);
height:var(--qf-h);
background:#f0e8d5;
transform-style:flat;
transform: translate(calc(var(--fx, 0px) * var(--fx-scale)), 0) rotate(var(--fr, 0deg));
transform-origin:50% 90%;
box-shadow:0 18px 38px rgba(0,0,0,0.45), 0 4px 12px rgba(204,166,86,0.18);
opacity:0;
animation: qfan-final-fade 0.55s ease forwards !important;
animation-delay: calc(var(--i, 0) * 0.08s);
}
.qfan-wrap.final-spread .qfan-card .qfan-face{
transform:none;
position:absolute; inset:0;
border-radius:inherit;
overflow:hidden;
}
.qfan-wrap.final-spread .qfan-card .qfan-face img{
width:100%; height:100%; display:block; object-fit:cover;
}
@keyframes qfan-final-fade{
from{ opacity:0; }
to { opacity:1; }
}
@media(max-width:1120px){
.qfan-wrap.final-spread{ --qf-w:136px; --qf-h:218px; --fx-scale:0.85; }
}
@media(max-width:820px){
.qfan-wrap.final-spread{ --qf-w:114px; --qf-h:183px; --fx-scale:0.7; }
}
@media(max-width:580px){
.qfan-wrap.final-spread{ --qf-w:96px; --qf-h:154px; --fx-scale:0.55; }
}
/* ═══ SPREAD RESULT (Q5 on-page) ═══ */
.qspread-result{
position:relative;z-index:1;
padding:80px 0 100px;
border-top:1px solid rgba(204,166,86,0.15);
opacity:0;
transition:opacity .55s ease;
pointer-events:none;
display:none;
}
.qspread-result.show{
opacity:1;pointer-events:auto;
}
.qsr-header{ margin-bottom:52px; }
.qsr-eyebrow{
font-size:1.3rem;letter-spacing:0.22em;text-transform:uppercase;
color:var(--gold);font-weight:600;margin-bottom:14px;
}
.qsr-q{
font-family:'Forum',serif;font-size:3.8rem;line-height:1.2;
color:#fbf8ec;max-width:780px;font-style:italic;
}
@media(max-width:580px){.qsr-q{font-size:2.6rem;}}
.qsr-subtitle{
font-size:1.4rem;letter-spacing:0.12em;text-transform:uppercase;
color:rgba(204,166,86,0.6);margin-top:10px;
}
/* 5-cards grid (Q5) — clone of designs-3 .cells/.cell */
.qsr-cards{
display:grid;grid-template-columns:1fr 1fr;
gap:80px 32px;margin:60px 0 32px;
}
.qsr-cards--5 .qsr-card:last-child{ grid-column:1 / -1; }
.qsr-cards--3{ grid-template-columns:1fr 1fr 1fr; }
.qsr-cards--3 .qsr-card{ padding:36px 28px 32px 28px; min-height:0; text-align:left; }
.qsr-cards--3 .qsr-card-img{
position:relative; left:auto; top:auto;
width:100%; max-width:220px; height:auto; aspect-ratio:200/340;
margin:-90px auto 22px;
transform:perspective(1200px) rotateY(0deg);
}
.qsr-cards--3 .qsr-card:hover .qsr-card-img{
transform:perspective(1200px) rotateY(0deg) translateY(-8px);
}
@media (max-width:980px){
.qsr-cards--3{ grid-template-columns:1fr 1fr; }
.qsr-cards--3 .qsr-card:last-child{ grid-column:1 / -1; }
}
@media (max-width:580px){
.qsr-cards--3{ grid-template-columns:1fr; }
}
.qsr-card{
position:relative;
background:rgba(255,255,255,0.04);
border:1px solid rgba(204,166,86,0.2);
border-radius:18px;
padding:36px 36px 36px 268px;
min-height:420px;
text-align:left;
}
.qsr-card-img{
position:absolute;left:36px;top:-50px;
width:200px;height:340px;
border-radius:12px;
overflow:hidden;
box-shadow:0 30px 80px rgba(15,18,40,0.6),inset 0 0 0 1px rgba(204,166,86,0.4);
transform:perspective(1200px) rotateY(8deg);
transition:transform 1s cubic-bezier(.2,.7,.25,1),box-shadow .8s ease;
z-index:2;
}
.qsr-card-img img{ width:100%;height:100%;display:block;object-fit:cover; }
.qsr-card:hover .qsr-card-img{
transform:perspective(1200px) rotateY(0deg) translateY(-12px);
box-shadow:0 50px 120px rgba(204,166,86,0.35),inset 0 0 0 1px rgba(204,166,86,0.6);
}
.qsr-num{
position:absolute;right:24px;top:18px;
font-family:'Forum',serif;font-size:6.4rem;line-height:0.78;
color:rgba(204,166,86,0.55);
pointer-events:none;user-select:none;
}
.qsr-pos{
font-size:1.4rem;text-transform:uppercase;letter-spacing:0.22em;
color:var(--gold);font-weight:600;display:inline-block;
}
.qsr-name{
font-family:'Forum',serif;font-size:4.4rem;line-height:1.05;color:#fbf8ec;
margin:6px 0 16px;
}
.qsr-key{
font-size:1.8rem;line-height:1.65;color:#dadbe0;margin:0 0 18px;
}
.qsr-pos-desc{
margin-top:18px;padding-top:18px;
border-top:1px dashed rgba(204,166,86,0.25);
font-size:1.5rem;line-height:1.65;color:#bdbfc7;
}
.qsr-pos-desc .lbl{
display:block;
font-size:1.05rem;letter-spacing:0.22em;text-transform:uppercase;
color:var(--gold);margin-bottom:8px;font-weight:600;
}
@media (max-width:1280px){
.qsr-card{ padding:32px 32px 32px 248px; }
.qsr-card-img{ width:180px;height:306px;left:32px; }
}
@media (max-width:980px){
.qsr-cards{ grid-template-columns:1fr;gap:80px; }
.qsr-card{ padding:28px 28px 28px 220px; }
.qsr-card-img{ width:170px;height:289px;left:28px;top:-40px; }
}
@media (max-width:580px){
.qsr-cards{ gap:120px;margin-top:120px; }
.qsr-card{ padding:200px 24px 24px;min-height:0;text-align:left; }
.qsr-card-img{ left:50%;top:-150px;width:140px;height:238px;transform:translateX(-50%) perspective(1200px) rotateY(0deg); }
.qsr-card:hover .qsr-card-img{ transform:translateX(-50%) perspective(1200px) rotateY(0deg) translateY(-8px); }
.qsr-num{ font-size:4.4rem;right:18px;top:14px; }
.qsr-name{ font-size:3.4rem; }
}
/* Result summary block (общий итог) */
.qsr-summary{
position:relative;
margin-top:32px;
background:linear-gradient(135deg,#181c34 0%,#1a1f3a 55%,#1d2148 100%);
border:1px solid rgba(204,166,86,0.5);
border-radius:20px;
padding:60px 56px;
isolation:isolate;
animation:qsrGlow 5s ease-in-out infinite alternate;
overflow:hidden;
}
@keyframes qsrGlow{
from{ box-shadow:0 40px 100px rgba(15,18,40,0.55),0 0 40px rgba(204,166,86,0.1); }
to { box-shadow:0 40px 110px rgba(15,18,40,0.55),0 0 90px rgba(204,166,86,0.22); }
}
.qsr-summary::before{
content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
background:
radial-gradient(ellipse at 18% 30%,rgba(251,216,144,0.18) 0%,transparent 45%),
radial-gradient(ellipse at 82% 75%,rgba(168,128,228,0.18) 0%,transparent 45%);
filter:blur(40px);
transform:translateZ(0);
}
.qsr-summary > *{ position:relative;z-index:1; }
.qsr-summary-title{
font-family:'Forum',serif;font-size:3.6rem;line-height:1.05;color:#fbf8ec;
margin:0 0 18px;
}
.qsr-summary-pair{
display:flex;align-items:center;gap:14px;flex-wrap:wrap;
font-family:'Forum',serif;font-size:2.2rem;color:#fbd890;
margin-bottom:28px;
}
.qsr-summary-pair .ornament{ color:rgba(204,166,86,0.65); display:inline-flex; }
.qsr-summary-pair .ornament svg{ width:80px;height:20px; }
.qsr-summary-body p{
font-size:1.7rem;line-height:1.65;color:#dadbe0;margin:0 0 16px;
}
.qsr-summary-body p:last-child{ margin-bottom:0; }
.qsr-summary-body b{ color:#fbf8ec; font-weight:600; }
@media (max-width:760px){
.qsr-summary{ padding:48px 32px; }
.qsr-summary-title{ font-size:2.8rem; }
.qsr-summary-pair{ font-size:1.8rem; }
}
@media (max-width:580px){
.qsr-summary{ padding:36px 22px; }
.qsr-summary-body p{ font-size:1.55rem; }
}
.qsr-cta{
margin-top:52px;
padding:52px 56px;
background:linear-gradient(135deg,#181c34 0%,#1a1f3a 55%,#1d2148 100%);
border:1px solid rgba(204,166,86,0.42);
border-radius:20px;
display:flex;flex-direction:column;align-items:center;
text-align:center;gap:22px;
}
.qsr-cta-text{
font-size:1.9rem;line-height:1.55;color:#dadbe0;
max-width:540px;margin:0;
}
.qsr-cta-btns{
display:flex;gap:14px;flex-wrap:wrap;justify-content:center;
}
.qsr-new{
background:transparent;color:rgba(204,166,86,0.8);
border:1px solid rgba(204,166,86,0.32);
padding:14px 28px;border-radius:999px;
font-family:inherit;font-size:1.6rem;font-weight:500;
letter-spacing:0.02em;cursor:pointer;transition:all .2s;
}
.qsr-new:hover{background:rgba(204,166,86,0.1);border-color:var(--gold);color:var(--gold);}
@media(max-width:760px){.qsr-cta{padding:36px 24px;}.qsr-cta-text{font-size:1.7rem;}}
@media(max-width:580px){.qsr-cta{padding:28px 18px;}.qsr-cta-btns{flex-direction:column;align-items:stretch;}.qsr-new{text-align:center;}}
/* ── SECTIONS ── */
.bg-shell .section{
padding:100px 0;position:relative;z-index:1;
border-top:1px solid rgba(204,166,86,0.1);
}
@media(max-width:580px){.section{padding:72px 0;}}
.section .sub{
font-size:1.8rem;color:#aeacb8;line-height:1.55;
max-width:580px;margin:14px 0 44px;
}
@media(max-width:580px){.section .sub{font-size:1.6rem;margin-bottom:32px;}}
/* ── QUESTION TAGS (lyubov.html style with ✦ and pink border) ── */
.tag-cloud{display:flex;flex-wrap:wrap;gap:10px;}
.qtag{
display:inline-flex;align-items:center;gap:8px;
background:rgba(255,255,255,0.07);
border:1px solid rgba(245,168,200,0.32);
color:#e8e6f2;
padding:11px 20px;border-radius:999px;
font-size:1.5rem;font-weight:500;
transition:background .15s,border-color .15s,color .15s;
letter-spacing:-0.01em;cursor:pointer;
}
.qtag::before{
content:"✦";color:#e88aae;font-size:1rem;opacity:0.75;
transition:color .15s;
}
.qtag:hover{
background:rgba(245,168,200,0.12);
border-color:#e88aae;
color:#fff;
}
.qtag:hover::before{color:#f5a8c8;}
.qtag.active{
background:rgba(245,168,200,0.18);color:#fff;
border-color:#f5a8c8;font-weight:600;
}
.qtag.active::before{color:#f5a8c8;opacity:1;}
@media(max-width:580px){.qtag{font-size:1.3rem;padding:9px 16px;}}
/* ── THEME BLOCKS (with data-theme; blur leaks OUTSIDE onto page bg) ── */
.theme-blocks{display:flex;flex-direction:column;gap:48px;position:relative;}
.theme-block{
position:relative;
border:1px solid rgba(204,166,86,0.14);
border-radius:20px;
padding:40px 40px 36px;
background:rgba(20,22,52,0.45);
transition:border-color .25s;
contain:layout style;
}
.theme-block::before{
content:"";position:absolute;
inset:-160px;pointer-events:none;
z-index:-1;opacity:1;
filter:blur(65px);
transform:translateZ(0);
will-change:opacity;
}
.theme-block[data-theme="love"]::before{
background:radial-gradient(ellipse at 8% 50%,rgba(245,168,200,0.42) 0%,rgba(245,168,200,0.14) 30%,transparent 60%);
}
.theme-block[data-theme="career"]::before{
background:radial-gradient(ellipse at 92% 50%,rgba(204,166,86,0.38) 0%,rgba(204,166,86,0.12) 30%,transparent 60%);
}
.theme-block[data-theme="self"]::before{
background:radial-gradient(ellipse at 10% 50%,rgba(168,168,232,0.38) 0%,rgba(168,168,232,0.12) 30%,transparent 60%);
}
.theme-block:hover{border-color:rgba(204,166,86,0.26);}
@media(max-width:580px){.theme-block{padding:28px 20px 24px;}}
.theme-head{
display:flex;align-items:center;gap:16px;margin-bottom:26px;
position:relative;z-index:1;
}
.theme-ico{
width:46px;height:46px;border-radius:13px;
background:rgba(204,166,86,0.1);border:1px solid rgba(204,166,86,0.22);
display:flex;align-items:center;justify-content:center;
flex-shrink:0;font-size:2rem;color:var(--gold);
}
.theme-block[data-theme="love"] .theme-ico{
background:rgba(245,168,200,0.1);border-color:rgba(245,168,200,0.22);color:#f5a8c8;
}
.theme-block[data-theme="self"] .theme-ico{
background:rgba(168,168,232,0.1);border-color:rgba(168,168,232,0.22);color:#a8a8e8;
}
.theme-title{
font-family:'Forum',serif;font-size:3.2rem;font-weight:400;color:#fbf8ec;
}
@media(max-width:580px){.theme-title{font-size:2.6rem;}}
.theme-block .tag-cloud{position:relative;z-index:1;}
/* ── TIME-SLIDER (Все расклады, matching designs-3.html) ── */
.time-section-head{
display:flex;align-items:flex-start;justify-content:space-between;gap:32px;
margin-bottom:24px;
}
.time-section-head .head-text{flex:1;}
.time-section-head .h2{margin-bottom:0;}
.time-section-head .sub{margin-top:8px;margin-bottom:0;}
.time-slider-nav{
display:flex;gap:12px;flex-shrink:0;padding-top:18px;
}
@media(max-width:760px){
.time-section-head{flex-direction:column;gap:16px;}
.time-slider-nav{padding-top:0;align-self:flex-end;}
}
.time-slider{position:relative;}
.time-slider-viewport{overflow:visible;}
.time-slider-track{
display:flex;gap:32px;
transition:transform .6s cubic-bezier(.4,0,.2,1);
will-change:transform;
}
.time-slider-track > .theme-card--time{
flex:0 0 calc((100% - 64px) / 3);
min-width:0;
}
@media(max-width:980px){
.time-slider-track > .theme-card--time{flex-basis:calc((100% - 32px) / 2);}
.time-slider-track{gap:32px;}
}
@media(max-width:760px){
.time-slider-track > .theme-card--time{flex-basis:100%;}
}
.time-slider-btn{
width:48px;height:48px;border-radius:50%;
background:rgba(15,18,40,0.85);border:1px solid rgba(204,166,86,0.5);
color:var(--gold);font-family:'Forum',serif;font-size:30px;line-height:1;
cursor:pointer;padding:0 0 4px;
display:flex;align-items:center;justify-content:center;
transition:background .2s,border-color .2s,opacity .2s;
}
.time-slider-btn:hover:not(:disabled){background:rgba(204,166,86,0.2);border-color:var(--gold);}
.time-slider-btn:disabled{opacity:0.25;cursor:default;}
@media(max-width:760px){
.time-slider-btn{width:40px;height:40px;font-size:24px;}
}
.theme-card--time{
position:relative;padding:32px 28px 28px;
background:linear-gradient(160deg,rgba(36,28,72,0.55),rgba(15,18,40,0.6)) !important;
border:1px solid rgba(204,166,86,0.25) !important;
border-radius:18px;
-webkit-backdrop-filter:none;backdrop-filter:none;
display:flex;flex-direction:column;
min-height:380px;
transition:transform .35s cubic-bezier(.2,.7,.25,1),border-color .35s,box-shadow .35s,background .4s ease;
text-decoration:none;color:inherit;
}
.theme-card--time.s7:hover{
background:
radial-gradient(ellipse at 50% 0%,rgba(245,168,168,0.18) 0%,transparent 60%),
linear-gradient(160deg,#4a1820 0%,#2a0e16 50%,#150408 100%) !important;
border-color:rgba(218,82,138,0.6) !important;
}
.theme-card--time.s30:hover{
background:
radial-gradient(ellipse at 50% 0%,rgba(168,200,232,0.16) 0%,transparent 60%),
linear-gradient(160deg,#1a3458 0%,#0e1e36 50%,#040a18 100%) !important;
border-color:rgba(78,128,210,0.6) !important;
}
.theme-card--time.s365:hover{
background:
radial-gradient(ellipse at 50% 0%,rgba(200,168,232,0.18) 0%,transparent 60%),
linear-gradient(160deg,#2a1248 0%,#1a0a30 50%,#080418 100%) !important;
border-color:rgba(140,80,220,0.6) !important;
}
.theme-card--time.s1:hover{
background:
radial-gradient(ellipse at 50% 0%,rgba(122,220,220,0.18) 0%,transparent 60%),
linear-gradient(160deg,#0c4858 0%,#062028 50%,#020e14 100%) !important;
border-color:rgba(80,180,200,0.6) !important;
}
.theme-card--time.s4:hover{
background:
radial-gradient(ellipse at 50% 0%,rgba(168,232,200,0.18) 0%,transparent 60%),
linear-gradient(160deg,#14402c 0%,#08241a 50%,#021008 100%) !important;
border-color:rgba(86,200,140,0.6) !important;
}
.theme-card--time.s5:hover{
background:
radial-gradient(ellipse at 50% 0%,rgba(200,168,232,0.18) 0%,transparent 60%),
linear-gradient(160deg,#241248 0%,#120828 50%,#060218 100%) !important;
border-color:rgba(120,80,200,0.6) !important;
}
.theme-card--time.s10:hover{
background:
radial-gradient(ellipse at 50% 0%,rgba(168,184,200,0.16) 0%,transparent 60%),
linear-gradient(160deg,#2e3848 0%,#181c28 50%,#08080c 100%) !important;
border-color:rgba(140,160,190,0.6) !important;
}
.theme-card--time.s12:hover{
background:
radial-gradient(ellipse at 50% 0%,rgba(168,168,232,0.18) 0%,transparent 60%),
linear-gradient(160deg,#1e2058 0%,#0e1030 50%,#04061a 100%) !important;
border-color:rgba(120,120,210,0.6) !important;
}
.theme-card--time:hover{
transform:translateY(-2px) !important;
box-shadow:0 30px 60px -28px rgba(0,0,0,0.7),0 0 36px rgba(204,166,86,0.12);
}
.theme-card--time .deck{
position:relative;height:180px;margin:0 -28px 24px;pointer-events:none;
perspective:800px;
}
.theme-card--time .deck::after{
content:"";position:absolute;left:50%;bottom:-14px;
width:170px;height:26px;transform:translateX(-50%);
background:radial-gradient(ellipse at center,rgba(0,0,0,0.45) 0%,rgba(0,0,0,0.18) 40%,rgba(0,0,0,0) 75%);
filter:blur(10px);
pointer-events:none;z-index:11;
transition:opacity .35s ease;
}
.theme-card--time:hover .deck::after{opacity:0;}
.theme-card--time .mini{
position:absolute;bottom:0;aspect-ratio:2/3;height:170px;left:50%;
border-radius:7px;overflow:hidden;
border:1px solid rgba(204,166,86,0.45);
box-shadow:none;
transform-origin:50% 100%;
transition:transform 1.15s cubic-bezier(.2,.85,.25,1.05),box-shadow .35s ease;
}
.theme-card--time:hover .mini{
box-shadow:0 14px 30px -10px rgba(0,0,0,0.6);
}
.theme-card--time .mini svg{width:100%;height:100%;display:block;}
.theme-card--time .meta{font-size:1.4rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;font-weight:500;}
.theme-card--time .ttl{font-family:'Forum',serif;font-size:3.2rem;color:#fbf8ec;margin-bottom:12px;}
.theme-card--time p{font-size:1.8rem;color:#dadbe0;line-height:1.55;margin:0;flex:1;}
.theme-card--time .card-cta{margin-top:20px;font-size:1.7rem;color:var(--gold);display:inline-flex;gap:8px;align-items:center;transition:gap .25s;}
.theme-card--time:hover .card-cta{gap:14px;}
@media(max-width:580px){
.theme-card--time p{font-size:1.6rem;}
.theme-card--time .card-cta{font-size:1.5rem;}
.theme-card--time .ttl{font-size:2.6rem;}
}
/* Deck stacks: initial positions */
/* s1 */
.theme-card--time.s1 .mini:nth-child(1){transform:translateX(-50%) rotate(0deg) translateY(-2px);z-index:1;}
.theme-card--time.s1:hover .mini:nth-child(1){transform:translateX(-50%) rotate(0deg) translateY(-18px) scale(1.06);}
/* s4 */
.theme-card--time.s4 .mini:nth-child(1){transform:translateX(-50%) rotate(-3deg) translateY(0);z-index:4;}
.theme-card--time.s4 .mini:nth-child(2){transform:translateX(-50%) rotate(-1deg) translateY(-2px);z-index:3;}
.theme-card--time.s4 .mini:nth-child(3){transform:translateX(-50%) rotate(1deg) translateY(-4px);z-index:2;}
.theme-card--time.s4 .mini:nth-child(4){transform:translateX(-50%) rotate(3deg) translateY(-6px);z-index:1;}
.theme-card--time.s4:hover .mini:nth-child(1){transform:translateX(calc(-50% - 78px)) rotate(-18deg) translateY(-8px);}
.theme-card--time.s4:hover .mini:nth-child(2){transform:translateX(calc(-50% - 26px)) rotate(-6deg) translateY(-22px);}
.theme-card--time.s4:hover .mini:nth-child(3){transform:translateX(calc(-50% + 26px)) rotate(6deg) translateY(-22px);}
.theme-card--time.s4:hover .mini:nth-child(4){transform:translateX(calc(-50% + 78px)) rotate(18deg) translateY(-8px);}
/* s5 */
.theme-card--time.s5 .mini:nth-child(1){transform:translateX(-50%) rotate(-3deg) translateY(0);z-index:5;}
.theme-card--time.s5 .mini:nth-child(2){transform:translateX(-50%) rotate(-1.5deg) translateY(-2px);z-index:4;}
.theme-card--time.s5 .mini:nth-child(3){transform:translateX(-50%) rotate(0deg) translateY(-4px);z-index:3;}
.theme-card--time.s5 .mini:nth-child(4){transform:translateX(-50%) rotate(1.5deg) translateY(-6px);z-index:2;}
.theme-card--time.s5 .mini:nth-child(5){transform:translateX(-50%) rotate(3deg) translateY(-8px);z-index:1;}
.theme-card--time.s5:hover .mini:nth-child(1){transform:translateX(calc(-50% - 88px)) rotate(-20deg) translateY(-6px);}
.theme-card--time.s5:hover .mini:nth-child(2){transform:translateX(calc(-50% - 44px)) rotate(-10deg) translateY(-20px);}
.theme-card--time.s5:hover .mini:nth-child(3){transform:translateX(-50%) rotate(0deg) translateY(-24px);}
.theme-card--time.s5:hover .mini:nth-child(4){transform:translateX(calc(-50% + 44px)) rotate(10deg) translateY(-20px);}
.theme-card--time.s5:hover .mini:nth-child(5){transform:translateX(calc(-50% + 88px)) rotate(20deg) translateY(-6px);}
/* s7 */
.theme-card--time.s7 .mini:nth-child(1){transform:translateX(-50%) rotate(-2deg) translateY(0);z-index:3;}
.theme-card--time.s7 .mini:nth-child(2){transform:translateX(-50%) rotate(0deg) translateY(-2px);z-index:2;}
.theme-card--time.s7 .mini:nth-child(3){transform:translateX(-50%) rotate(2deg) translateY(-4px);z-index:1;}
.theme-card--time.s7:hover .mini:nth-child(1){transform:translateX(calc(-50% - 60px)) rotate(-14deg) translateY(-10px);}
.theme-card--time.s7:hover .mini:nth-child(2){transform:translateX(-50%) rotate(0deg) translateY(-22px);}
.theme-card--time.s7:hover .mini:nth-child(3){transform:translateX(calc(-50% + 60px)) rotate(14deg) translateY(-10px);}
/* s10 */
.theme-card--time.s10 .mini:nth-child(1){transform:translateX(-50%) rotate(-5deg) translateY(0);z-index:10;}
.theme-card--time.s10 .mini:nth-child(2){transform:translateX(-50%) rotate(-3deg) translateY(-2px);z-index:9;}
.theme-card--time.s10 .mini:nth-child(3){transform:translateX(-50%) rotate(-1deg) translateY(-4px);z-index:8;}
.theme-card--time.s10 .mini:nth-child(4){transform:translateX(-50%) rotate(1deg) translateY(-6px);z-index:7;}
.theme-card--time.s10 .mini:nth-child(5){transform:translateX(-50%) rotate(3deg) translateY(-8px);z-index:6;}
.theme-card--time.s10 .mini:nth-child(6){transform:translateX(-50%) rotate(5deg) translateY(-10px);z-index:5;}
.theme-card--time.s10 .mini:nth-child(7){transform:translateX(-50%) rotate(7deg) translateY(-12px);z-index:4;}
.theme-card--time.s10 .mini:nth-child(8){transform:translateX(-50%) rotate(9deg) translateY(-14px);z-index:3;}
.theme-card--time.s10 .mini:nth-child(9){transform:translateX(-50%) rotate(11deg) translateY(-16px);z-index:2;}
.theme-card--time.s10 .mini:nth-child(10){transform:translateX(-50%) rotate(13deg) translateY(-18px);z-index:1;}
.theme-card--time.s10:hover .mini:nth-child(1){transform:translateX(calc(-50% - 130px)) rotate(-32deg) translateY(2px);}
.theme-card--time.s10:hover .mini:nth-child(2){transform:translateX(calc(-50% - 100px)) rotate(-24deg) translateY(-6px);}
.theme-card--time.s10:hover .mini:nth-child(3){transform:translateX(calc(-50% - 70px)) rotate(-16deg) translateY(-14px);}
.theme-card--time.s10:hover .mini:nth-child(4){transform:translateX(calc(-50% - 40px)) rotate(-8deg) translateY(-20px);}
.theme-card--time.s10:hover .mini:nth-child(5){transform:translateX(calc(-50% - 14px)) rotate(-2deg) translateY(-24px);}
.theme-card--time.s10:hover .mini:nth-child(6){transform:translateX(calc(-50% + 14px)) rotate(2deg) translateY(-24px);}
.theme-card--time.s10:hover .mini:nth-child(7){transform:translateX(calc(-50% + 40px)) rotate(8deg) translateY(-20px);}
.theme-card--time.s10:hover .mini:nth-child(8){transform:translateX(calc(-50% + 70px)) rotate(16deg) translateY(-14px);}
.theme-card--time.s10:hover .mini:nth-child(9){transform:translateX(calc(-50% + 100px)) rotate(24deg) translateY(-6px);}
.theme-card--time.s10:hover .mini:nth-child(10){transform:translateX(calc(-50% + 130px)) rotate(32deg) translateY(2px);}
/* s12 */
.theme-card--time.s12 .mini:nth-child(1){transform:translateX(-50%) rotate(-6deg) translateY(0);z-index:12;}
.theme-card--time.s12 .mini:nth-child(2){transform:translateX(-50%) rotate(-4deg) translateY(-2px);z-index:11;}
.theme-card--time.s12 .mini:nth-child(3){transform:translateX(-50%) rotate(-2deg) translateY(-4px);z-index:10;}
.theme-card--time.s12 .mini:nth-child(4){transform:translateX(-50%) rotate(0deg) translateY(-6px);z-index:9;}
.theme-card--time.s12 .mini:nth-child(5){transform:translateX(-50%) rotate(2deg) translateY(-8px);z-index:8;}
.theme-card--time.s12 .mini:nth-child(6){transform:translateX(-50%) rotate(4deg) translateY(-10px);z-index:7;}
.theme-card--time.s12 .mini:nth-child(7){transform:translateX(-50%) rotate(6deg) translateY(-12px);z-index:6;}
.theme-card--time.s12 .mini:nth-child(8){transform:translateX(-50%) rotate(8deg) translateY(-14px);z-index:5;}
.theme-card--time.s12 .mini:nth-child(9){transform:translateX(-50%) rotate(10deg) translateY(-16px);z-index:4;}
.theme-card--time.s12 .mini:nth-child(10){transform:translateX(-50%) rotate(12deg) translateY(-18px);z-index:3;}
.theme-card--time.s12 .mini:nth-child(11){transform:translateX(-50%) rotate(14deg) translateY(-20px);z-index:2;}
.theme-card--time.s12 .mini:nth-child(12){transform:translateX(-50%) rotate(16deg) translateY(-22px);z-index:1;}
.theme-card--time.s12:hover .mini:nth-child(1){transform:translateX(calc(-50% - 145px)) rotate(-36deg) translateY(8px);}
.theme-card--time.s12:hover .mini:nth-child(2){transform:translateX(calc(-50% - 118px)) rotate(-29deg) translateY(0);}
.theme-card--time.s12:hover .mini:nth-child(3){transform:translateX(calc(-50% - 92px)) rotate(-22deg) translateY(-8px);}
.theme-card--time.s12:hover .mini:nth-child(4){transform:translateX(calc(-50% - 66px)) rotate(-15deg) translateY(-15px);}
.theme-card--time.s12:hover .mini:nth-child(5){transform:translateX(calc(-50% - 40px)) rotate(-9deg) translateY(-20px);}
.theme-card--time.s12:hover .mini:nth-child(6){transform:translateX(calc(-50% - 13px)) rotate(-3deg) translateY(-24px);}
.theme-card--time.s12:hover .mini:nth-child(7){transform:translateX(calc(-50% + 13px)) rotate(3deg) translateY(-24px);}
.theme-card--time.s12:hover .mini:nth-child(8){transform:translateX(calc(-50% + 40px)) rotate(9deg) translateY(-20px);}
.theme-card--time.s12:hover .mini:nth-child(9){transform:translateX(calc(-50% + 66px)) rotate(15deg) translateY(-15px);}
.theme-card--time.s12:hover .mini:nth-child(10){transform:translateX(calc(-50% + 92px)) rotate(22deg) translateY(-8px);}
.theme-card--time.s12:hover .mini:nth-child(11){transform:translateX(calc(-50% + 118px)) rotate(29deg) translateY(0);}
.theme-card--time.s12:hover .mini:nth-child(12){transform:translateX(calc(-50% + 145px)) rotate(36deg) translateY(8px);}
/* s30 */
.theme-card--time.s30 .mini:nth-child(1){transform:translateX(-50%) rotate(-3deg) translateY(0);z-index:5;}
.theme-card--time.s30 .mini:nth-child(2){transform:translateX(-50%) rotate(-1deg) translateY(-2px);z-index:4;}
.theme-card--time.s30 .mini:nth-child(3){transform:translateX(-50%) rotate(1deg) translateY(-4px);z-index:3;}
.theme-card--time.s30 .mini:nth-child(4){transform:translateX(-50%) rotate(3deg) translateY(-6px);z-index:2;}
.theme-card--time.s30 .mini:nth-child(5){transform:translateX(-50%) rotate(5deg) translateY(-8px);z-index:1;}
.theme-card--time.s30:hover .mini:nth-child(1){transform:translateX(calc(-50% - 100px)) rotate(-22deg) translateY(-8px);}
.theme-card--time.s30:hover .mini:nth-child(2){transform:translateX(calc(-50% - 50px)) rotate(-11deg) translateY(-18px);}
.theme-card--time.s30:hover .mini:nth-child(3){transform:translateX(-50%) rotate(0deg) translateY(-22px);}
.theme-card--time.s30:hover .mini:nth-child(4){transform:translateX(calc(-50% + 50px)) rotate(11deg) translateY(-18px);}
.theme-card--time.s30:hover .mini:nth-child(5){transform:translateX(calc(-50% + 100px)) rotate(22deg) translateY(-8px);}
/* ── SEO ── */
.seo-block{ position:relative; z-index:1; padding-top:60px; padding-bottom:60px; border-top:1px solid rgba(204,166,86,0.1); }
.seo-row{
display:grid; grid-template-columns:1fr 360px; gap:80px; align-items:center;
padding:64px 0; border-top:1px solid rgba(204,166,86,0.1);
}
.seo-row:first-child{ border-top:none; padding-top:20px; }
@media (max-width:980px){
.seo-row{ grid-template-columns:1fr; gap:32px; padding:40px 0; }
.seo-illust{ max-width:360px; margin:0 auto; }
}
.seo-section{ padding:0; border-top:none; }
.seo-section h2, .seo-section .h2{ color:#fbf8ec; margin-bottom:18px; }
.seo-section p{ line-height:1.6; color:#dadbe0; margin-bottom:18px; max-width:646px; font-size:1.8rem; }
.seo-section p:last-child{ margin-bottom:0; }
@media (max-width:580px){ .seo-section p{ font-size:1.6rem; } }
.seo-illust{
position:relative; width:100%; aspect-ratio:3/4;
background:transparent; border:none; border-radius:0; box-shadow:none;
display:flex; align-items:center; justify-content:center;
}
.seo-illust svg{ width:100%; height:100%; display:block; overflow:visible; }
/* SEO SVG animations */
@keyframes seoTwinkle{0%,100%{opacity:0.3;transform:scale(0.82);}50%{opacity:1;transform:scale(1.1);}}
@keyframes seoSpin{to{transform:rotate(360deg);}}
@keyframes seoSpinRev{to{transform:rotate(-360deg);}}
@keyframes seoPulse{0%,100%{opacity:0.6;r:3;}50%{opacity:1;r:4.5;}}
.seo-spin{transform-origin:center;transform-box:fill-box;animation:seoSpin 80s linear infinite;}
.seo-spin-rev{transform-origin:center;transform-box:fill-box;animation:seoSpinRev 60s linear infinite;}
.seo-twinkle{transform-origin:center;transform-box:fill-box;animation:seoTwinkle 3.2s ease-in-out infinite;}
.seo-twinkle.t2{animation-delay:-.9s;}.seo-twinkle.t3{animation-delay:-1.7s;}.seo-twinkle.t4{animation-delay:-2.5s;}
.seo-pulse{transform-origin:center;transform-box:fill-box;animation:seoPulse 2.8s ease-in-out infinite;}
/* ── FAQ (grid-template-rows accordion matching designs-3.html) ── */
.faq-section{padding:100px 0;border-top:1px solid rgba(204,166,86,0.1);z-index:1;position:relative;}
@media(max-width:580px){.faq-section{padding:72px 0;}}
.faq-list{margin-top:44px;display:flex;flex-direction:column;gap:10px;contain:layout style paint;}
.faq-item{
background:#181c40;
border:1px solid rgba(204,166,86,0.2);
border-radius:14px;overflow:hidden;
transition:border-color .15s ease,background-color .15s ease;
contain:layout style;
}
.faq-item:hover{background:#21204a;border-color:rgba(204,166,86,0.4);}
.faq-item.open{background:#272249;border-color:rgba(204,166,86,0.55);}
.faq-q{
width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
padding:25px 28px;cursor:pointer;text-align:left;
background:transparent;border:0;
color:#fbf8ec;font-family:inherit;font-size:1.8rem;
line-height:1.4;font-weight:500;
transition:color .15s ease;
}
.faq-item:hover .faq-q{color:#fff2cc;}
.faq-q::after{
content:"+";flex-shrink:0;
font-family:'Forum',serif;font-size:2.8rem;line-height:1;
color:var(--gold);transition:transform .3s cubic-bezier(0.4,0,0.2,1),color .15s ease;
}
.faq-item:hover .faq-q::after{color:#fbd890;}
.faq-item.open .faq-q::after{transform:rotate(135deg);}
.faq-a-wrap{
display:grid;
grid-template-rows:0fr;
overflow:hidden;
transition:grid-template-rows .32s cubic-bezier(0.25,0.46,0.45,0.94);
}
.faq-item.open .faq-a-wrap{grid-template-rows:1fr;}
.faq-a{
min-height:0;
overflow:hidden;
padding:0 28px;
line-height:1.7;color:#dadbe0;
font-size:1.8rem;
opacity:0;
transform:translateY(-8px);
transition:
opacity .18s cubic-bezier(0.25,0.46,0.45,0.94),
transform .18s cubic-bezier(0.25,0.46,0.45,0.94);
}
.faq-item.open .faq-a{
opacity:0.9;
transform:translateY(0);
transition:
opacity .22s cubic-bezier(0.25,0.46,0.45,0.94) .08s,
transform .22s cubic-bezier(0.25,0.46,0.45,0.94) .08s;
}
.faq-a p{margin-bottom:14px;}
.faq-a p:last-child{margin-bottom:24px;}
@media(max-width:580px){
.faq-q{font-size:1.6rem;padding:18px 20px;}
.faq-a{font-size:1.6rem;padding:0 20px;}
}
/* ── ARCANA SECTION (Справочник, matching designs-3.html) ── */
.arcana-section{position:relative;padding:100px 0;border-top:1px solid rgba(204,166,86,0.1);z-index:1;}
@media(max-width:580px){.arcana-section{padding:72px 0;}}
.arcana-box{
position:relative;
border-radius:24px;
padding:60px 56px 30px;
background:linear-gradient(140deg,#1c1a40,#11142d);
box-shadow:inset 0 0 0 1px rgba(204,166,86,0.18);
overflow:visible;
isolation:isolate;
clip-path:inset(0 0 -360px 0 round 24px);
}
.arcana-box::before{
content:"";position:absolute;inset:0;
background:
radial-gradient(1px 1px at 12% 18%,rgba(204,166,86,0.4) 50%,transparent),
radial-gradient(1px 1px at 84% 28%,rgba(204,166,86,0.4) 50%,transparent),
radial-gradient(1.2px 1.2px at 22% 76%,rgba(204,166,86,0.4) 50%,transparent),
radial-gradient(1px 1px at 92% 82%,rgba(204,166,86,0.4) 50%,transparent),
radial-gradient(0.8px 0.8px at 60% 12%,rgba(204,166,86,0.3) 50%,transparent);
pointer-events:none;z-index:0;
}
@media(max-width:760px){
.arcana-box{padding:40px 24px 30px;}
}
.arcana-section .ar-head{
position:relative;z-index:6;
display:flex;align-items:flex-end;justify-content:space-between;gap:32px;
margin-bottom:18px;flex-wrap:wrap;
}
.arcana-section .ar-head .left{flex:1 1 380px;max-width:680px;}
.arcana-section .ar-head .left .sub{margin-bottom:0;}
.arcana-section .ar-head .right{
flex-shrink:0;padding-bottom:0;
display:flex;align-items:center;gap:10px;
}
.arcana-section .ar-head .sub{font-size:1.8rem;}
@media(max-width:580px){.arcana-section .ar-head .sub{font-size:1.6rem;}}
.arcana-section .ar-pill{
display:inline-flex;align-items:center;gap:8px;
padding:6px 14px;border-radius:999px;
background:rgba(204,166,86,0.12);color:var(--gold);
font-size:1.3rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
margin-bottom:14px;
}
.arcana-section .ar-cta{
display:inline-flex;gap:10px;align-items:center;
height:46px;padding:0 24px;
background:transparent;color:var(--gold);
border:1px solid var(--gold);border-radius:10px;
font-family:'Forum',serif;font-size:18px;
text-decoration:none;
transition:background .25s,color .25s,transform .15s;
}
.arcana-section .ar-cta:hover{background:var(--gold);color:#1a1518;transform:translateY(-1px);}
.arcana-section .ar-cta::after{content:"→";transition:transform .25s;}
.arcana-section .ar-cta:hover::after{transform:translateX(4px);}
@media(max-width:760px){
.arcana-section .ar-head .right{flex-wrap:wrap;}
.arcana-section .ar-cta{font-size:16px;height:40px;padding:0 18px;}
}
/* Scroll buttons */
.sprav-scroll-btn{
flex-shrink:0;width:42px;height:42px;border-radius:50%;
background:rgba(204,166,86,0.1);border:1px solid rgba(204,166,86,0.3);
color:var(--gold);font-size:1.9rem;cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:all .18s;line-height:1;
}
.sprav-scroll-btn:hover{background:rgba(204,166,86,0.2);border-color:var(--gold);}
.sprav-scroll-btn:disabled{opacity:0.28;cursor:default;}
@media(max-width:580px){.sprav-scroll-btn{width:36px;height:36px;font-size:1.6rem;}}
/* Horizontal card scroll */
.sprav-cards-scroll{
display:flex;gap:14px;
overflow-x:auto;padding:24px 0 16px;
scrollbar-width:thin;scrollbar-color:rgba(204,166,86,0.25) transparent;
position:relative;z-index:2;
}
.sprav-cards-scroll::-webkit-scrollbar{height:3px;}
.sprav-cards-scroll::-webkit-scrollbar-thumb{background:rgba(204,166,86,0.3);border-radius:2px;}
.sprav-card-thumb{
flex-shrink:0;width:120px;cursor:pointer;
display:flex;flex-direction:column;gap:10px;align-items:center;
text-align:center;text-decoration:none;color:inherit;
}
.sprav-card-thumb .sct-img{
width:100%;aspect-ratio:2/3.5;
background:linear-gradient(160deg,#1f2450 0%,#2a2b41 100%);
border:1px solid rgba(204,166,86,0.2);border-radius:10px;
overflow:hidden;position:relative;
transition:transform .2s,border-color .2s;
}
.sprav-card-thumb:hover .sct-img{transform:translateY(-6px);border-color:rgba(204,166,86,0.55);}
.sprav-card-thumb .sct-num{
position:absolute;top:6px;right:7px;
font-family:'Forum',serif;font-size:1.2rem;color:rgba(204,166,86,0.75);
background:rgba(8,9,22,0.72);padding:1px 6px;border-radius:4px;
}
.sprav-card-thumb .sct-name{font-size:1.35rem;color:#c4c2cc;line-height:1.3;}
/* Arcana nav: tabs + grids */
.sprav-arcana-nav{margin-top:28px;position:relative;z-index:2;}
.sprav-arc-tabs{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap;}
.sprav-arc-tab{
padding:12px 26px;border-radius:999px;cursor:pointer;
font-family:'Manrope',sans-serif;font-size:1.6rem;font-weight:500;
background:transparent;border:1px solid rgba(204,166,86,0.3);color:#9a96b0;
transition:all .18s;
}
.sprav-arc-tab.active{background:rgba(204,166,86,0.15);border-color:var(--gold);color:#f4f1e6;}
.sprav-arc-tab:hover:not(.active){border-color:rgba(204,166,86,0.5);color:#f4f1e6;}
@media(max-width:580px){.sprav-arc-tab{font-size:1.4rem;padding:10px 18px;}}
.sprav-arc-pane.hidden{display:none;}
.sprav-elder-grid{
display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;
}
@media(max-width:580px){.sprav-elder-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));}}
.sprav-elder-item{
display:flex;align-items:center;gap:12px;
padding:12px 16px;border-radius:12px;
background:rgba(255,255,255,0.03);border:1px solid rgba(204,166,86,0.1);
cursor:pointer;text-decoration:none;color:inherit;transition:all .15s;
}
.sprav-elder-item:hover{background:rgba(204,166,86,0.08);border-color:rgba(204,166,86,0.28);}
.sprav-elder-item .sei-num{
font-family:'Forum',serif;font-size:1.9rem;color:rgba(204,166,86,0.6);
flex-shrink:0;min-width:30px;text-align:center;
}
.sprav-elder-item .sei-name{font-size:1.5rem;color:#d8d5e6;line-height:1.3;}
.sprav-elder-cta-cell{
display:flex;align-items:center;justify-content:center;
padding:12px 16px;border-radius:12px;
background:rgba(204,166,86,0.1);border:1px solid rgba(204,166,86,0.35);
text-decoration:none;color:var(--gold);
font-family:'Forum',serif;font-size:1.7rem;
transition:all .15s;text-align:center;
}
.sprav-elder-cta-cell:hover{background:rgba(204,166,86,0.18);border-color:var(--gold);color:var(--gold-light);}
.sprav-suits-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
}
@media(max-width:760px){.sprav-suits-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:440px){.sprav-suits-grid{grid-template-columns:1fr;}}
.sprav-suit-block{
padding:24px 22px;border-radius:16px;
background:rgba(255,255,255,0.03);border:1px solid rgba(204,166,86,0.12);
text-decoration:none;color:inherit;transition:all .15s;
display:flex;flex-direction:column;
}
.sprav-suit-block:hover{background:rgba(204,166,86,0.07);border-color:rgba(204,166,86,0.3);}
.sprav-suit-block .ssb-ico{font-size:3rem;margin-bottom:12px;}
.sprav-suit-block .ssb-name{font-family:'Forum',serif;font-size:2.2rem;color:#fbf8ec;display:block;margin-bottom:8px;}
.sprav-suit-block .ssb-desc{font-size:1.5rem;color:#8a879a;line-height:1.5;}
.sprav-pane-cta{margin-top:20px;}
.bg-shell .sprav-all-btn{
display:inline-flex;align-items:center;gap:10px;
padding:15px 30px;border-radius:999px;
background:#f4f1e6;color:#1a1518;
font-family:'Manrope',sans-serif;font-size:1.6rem;font-weight:600;
text-decoration:none;transition:all .18s;
}
.bg-shell .sprav-all-btn:hover{background:#ffffff;}
/* ── FOOTER ── */
.page-footer{
padding:36px 0 56px;position:relative;z-index:1;
border-top:1px solid rgba(204,166,86,0.07);
text-align:center;font-size:1.35rem;color:#6a6880;
}
.page-footer a{color:#8a88a0;transition:color .15s;}
.page-footer a:hover{color:var(--gold);}
/* ============ «Расклад по темам» · Polaroid · фото-карточки (из designs-3) ============ */
.grid-themes{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width:980px){ .grid-themes{ grid-template-columns:repeat(2,1fr); } }
.theme-card{
background:rgba(255,255,255,0.04);
-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
border:1px solid rgba(204,166,86,0.2); border-radius:18px;
padding:32px; transition:all .25s; cursor:pointer;
}
.theme-card:hover{ background:rgba(204,166,86,0.08); border-color:var(--gold); transform:translateY(-3px); }
.theme-card .icon{ width:48px; height:48px; margin-bottom:18px; color:var(--gold); }
.theme-card h3{ color:#fbf8ec; margin-bottom:8px; }
.theme-card p{ color:#aeacb8; line-height:1.5; }
.grid-themes--photo{ gap:32px; padding-top:8px; }
@media (max-width:580px){ .grid-themes--photo{ gap:36px; } }
.theme-card--photo{
position:relative; z-index:1;
background:transparent !important; -webkit-backdrop-filter:none; backdrop-filter:none;
border:none !important; border-radius:0; padding:0;
text-align:center; transition:transform .35s ease;
}
.theme-card--photo:hover{ transform:translateY(-4px); background:transparent; z-index:10; }
.grid-themes--photo:hover > .theme-card--photo:not(:hover){ z-index:1; }
.theme-card--photo .vd-photo{
position:relative; aspect-ratio:4/5;
margin-bottom:44px;
transform:rotate(-2deg);
transition:transform .4s ease;
isolation:isolate;
}
.theme-card--photo .vd-photo::before{
content:""; position:absolute; inset:-70px;
border-radius:50%;
filter:blur(70px);
z-index:-1;
opacity:0.2;
pointer-events:none;
transition:opacity .55s ease, transform .55s ease;
}
.theme-card--photo:hover .vd-photo::before{ opacity:1; transform:scale(1.15); }
.theme-card--love .vd-photo::before{ background:radial-gradient(ellipse at center, rgba(232,90,150,1) 0%, rgba(232,90,150,0.5) 35%, transparent 70%); }
.theme-card--self .vd-photo::before{ background:radial-gradient(ellipse at center, rgba(150,90,235,0.95) 0%, rgba(150,90,235,0.45) 35%, transparent 70%); }
.theme-card--career .vd-photo::before{ background:radial-gradient(ellipse at center, rgba(251,216,144,0.95) 0%, rgba(204,166,86,0.5) 35%, transparent 70%); }
.theme-card--question .vd-photo::before{ background:radial-gradient(ellipse at center, rgba(86,144,228,0.95) 0%, rgba(86,144,228,0.45) 35%, transparent 70%); }
.theme-card--photo:nth-child(2n) .vd-photo{ transform:rotate(2deg); }
.theme-card--photo:nth-child(3n) .vd-photo{ transform:rotate(-1.2deg); }
.theme-card--photo:hover .vd-photo{ transform:rotate(0deg); }
.theme-card--photo .emit{
position:absolute; left:50%; top:50%;
width:0; height:0;
pointer-events:none; z-index:6;
}
.theme-card--photo .emit .bit{
position:absolute; left:0; top:0;
width:24px; height:24px;
margin-left:-12px; margin-top:-12px;
opacity:0;
}
.theme-card--photo .emit .bit svg{
width:100%; height:100%; display:block;
filter:drop-shadow(0 0 6px currentColor) drop-shadow(0 0 12px currentColor);
}
.theme-card--love .emit .bit{ color:#f5a8c8; }
.theme-card--self .emit .bit{ color:#c8a8e8; }
.theme-card--career .emit .bit{ color:#fbd890; }
.theme-card--question .emit .bit{ color:#a8c8e8; }
.theme-card--photo:hover .emit .bit{
animation:emit-rise 2.4s ease-out var(--d, 0s) infinite;
}
@keyframes emit-rise{
0% { opacity:0; transform:translate(0,0) scale(0.4) rotate(-12deg); }
15% { opacity:1; transform:translate(calc(var(--x) * 0.3), -40px) scale(1) rotate(0); }
85% { opacity:0.85; transform:translate(calc(var(--x) * 0.85), -160px) scale(1.05) rotate(8deg); }
100% { opacity:0; transform:translate(var(--x), -210px) scale(0.6) rotate(14deg); }
}
.theme-card--photo .vd-cap{
position:absolute; bottom:10px; left:0; right:0; text-align:center;
font-family:'Forum',serif; font-size:1.4rem; letter-spacing:.4em;
color:rgba(251,216,144,0.9); text-transform:uppercase;
text-shadow:0 1px 4px rgba(0,0,0,0.7);
z-index:5; pointer-events:none;
}
.theme-card--photo h3{ margin-bottom:8px; }
.theme-card--photo p{ max-width:26ch; margin:0 auto; }
.theme-card--photo .card-layer{
position:absolute; inset:0;
border-radius:20px;
clip-path:inset(0 round 20px);
background:#0a0c20;
will-change:transform;
}
.theme-card--photo .card-layer svg{ width:100%; height:100%; display:block; }
.theme-card--photo .card-layer.back { z-index:1; }
.theme-card--photo .card-layer.mid { z-index:2; }
.theme-card--photo .card-layer.front{
z-index:3;
box-shadow:
0 22px 50px -22px rgba(0,0,0,0.7),
0 6px 18px -8px rgba(0,0,0,0.5);
}
.theme-card--photo:hover .card-layer{
animation:tema-sway 4s ease-in-out infinite;
}
.theme-card--photo:hover .card-layer.front{ animation-delay:0s; }
.theme-card--photo:hover .card-layer.mid { animation-delay:0.4s; }
.theme-card--photo:hover .card-layer.back { animation-delay:0.8s; }
@keyframes tema-sway{
0% { transform:translateX(-26px) rotate(-7deg); }
25% { transform:translateX(0) rotate(0deg); }
50% { transform:translateX(26px) rotate(7deg); }
75% { transform:translateX(0) rotate(0deg); }
100% { transform:translateX(-26px) rotate(-7deg); }
}
.theme-card--photo:hover .card-layer.front svg{
filter:drop-shadow(0 0 8px rgba(204,166,86,0.45)) drop-shadow(0 0 16px rgba(251,216,144,0.25));
transition:filter .35s ease;
}
.grid-themes.grid-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:980px){ .grid-themes.grid-3{ grid-template-columns:1fr; } }
/* ============ Контент из WP-страницы (MD → HTML) — единая типографика ============ */
.seo-block#seo-block-wp { padding-top:60px; padding-bottom:80px; }
.seo-block#seo-block-wp .wrap { max-width:780px; }
.seo-block#seo-block-wp h1 { display:none; }
.seo-block#seo-block-wp h2 { color:#fbf8ec; font-family:'Forum',Georgia,serif; font-weight:400; font-size:3rem; line-height:1.2; margin:56px 0 20px; }
.seo-block#seo-block-wp h2:first-child,
.seo-block#seo-block-wp > .wrap > h2:first-child { margin-top:0; }
.seo-block#seo-block-wp h3 { color:#fbf8ec; font-family:'Forum',Georgia,serif; font-weight:400; font-size:2.2rem; line-height:1.3; margin:36px 0 14px; }
.seo-block#seo-block-wp h4 { color:#fbf8ec; font-size:1.9rem; font-weight:600; margin:28px 0 12px; }
.seo-block#seo-block-wp p { color:#dadbe0; font-size:1.7rem; line-height:1.65; margin:0 0 20px; }
.seo-block#seo-block-wp ul,
.seo-block#seo-block-wp ol { color:#dadbe0; font-size:1.7rem; line-height:1.7; margin:0 0 24px; padding-left:24px; }
.seo-block#seo-block-wp li { margin-bottom:8px; }
.seo-block#seo-block-wp li::marker { color:#cca656; }
.seo-block#seo-block-wp strong { color:#fbf8ec; font-weight:600; }
.seo-block#seo-block-wp em { color:#fbf8ec; font-style:italic; }
.seo-block#seo-block-wp a { color:#cca656; border-bottom:1px solid rgba(204,166,86,0.3); transition:color .2s,border-color .2s; }
.seo-block#seo-block-wp a:hover { color:#fbf8ec; border-bottom-color:#fbf8ec; }
.seo-block#seo-block-wp blockquote { padding:18px 24px; border-left:3px solid rgba(204,166,86,0.7); background:rgba(204,166,86,0.04); color:#dadbe0; margin:0 0 24px; font-style:italic; font-size:1.7rem; line-height:1.6; }
.seo-block#seo-block-wp hr { border:none; border-top:1px solid rgba(204,166,86,0.15); margin:40px 0; }
.seo-block#seo-block-wp table { width:100%; border-collapse:collapse; margin:0 0 24px; }
.seo-block#seo-block-wp th,
.seo-block#seo-block-wp td { padding:12px 16px; text-align:left; border-bottom:1px solid rgba(204,166,86,0.12); color:#dadbe0; font-size:1.6rem; }
.seo-block#seo-block-wp th { color:#fbf8ec; font-weight:600; background:rgba(204,166,86,0.04); }
@media (max-width:820px) {
.seo-block#seo-block-wp h2 { font-size:2.4rem; margin-top:40px; }
.seo-block#seo-block-wp h3 { font-size:1.8rem; }
.seo-block#seo-block-wp p,
.seo-block#seo-block-wp ul,
.seo-block#seo-block-wp ol { font-size:1.5rem; }
}
/* Убираем декоративные
из MD-контента */
.seo-block hr,
.seo-row hr,
.combo-2cards-row hr,
.card-meaning-block hr,
.card-spheres hr { display:none; }
/* Убрать 8rem зазор между .bg-shell и глобальным .footer темы */
.bg-shell ~ .footer{ margin-top:0 !important; }
/* ════════ Карточные обложки (back) с переключением по выбранной колоде ════════ */
.card .face, .card .back{
position:absolute; inset:0; border-radius:10px;
-webkit-backface-visibility:hidden; backface-visibility:hidden;
}
.card .back{
background:url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAwIDM0MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZGVmcz4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iYmciIHgxPSIwIiB5MT0iMCIgeDI9IjAiIHkyPSIxIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzIzMjc0YiIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzFhMWYzYSIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwZjEyMjgiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8cmFkaWFsR3JhZGllbnQgaWQ9Imdsb3ciIGN4PSI1MCUiIGN5PSI1MCUiIHI9IjUwJSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNjY2E2NTYiIHN0b3Atb3BhY2l0eT0iMC4xOCIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjYwJSIgc3RvcC1jb2xvcj0iI2NjYTY1NiIgc3RvcC1vcGFjaXR5PSIwLjA1Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2NjYTY1NiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8L3JhZGlhbEdyYWRpZW50PgogICAgPHBhdHRlcm4gaWQ9ImRvdHMiIHg9IjAiIHk9IjAiIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgIDxjaXJjbGUgY3g9IjciIGN5PSI3IiByPSIwLjUiIGZpbGw9IiNjY2E2NTYiIGZpbGwtb3BhY2l0eT0iMC4yNSIvPgogICAgPC9wYXR0ZXJuPgogIDwvZGVmcz4KCiAgPHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIzNDAiIGZpbGw9InVybCgjYmcpIiByeD0iMTAiLz4KICA8cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjM0MCIgZmlsbD0idXJsKCNkb3RzKSIgcng9IjEwIi8+CiAgPHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIzNDAiIGZpbGw9InVybCgjZ2xvdykiIHJ4PSIxMCIvPgoKICA8cmVjdCB4PSI2IiB5PSI2IiB3aWR0aD0iMTg4IiBoZWlnaHQ9IjMyOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjY2NhNjU2IiBzdHJva2Utd2lkdGg9IjAuOCIgc3Ryb2tlLW9wYWNpdHk9IjAuNyIgcng9IjYiLz4KICA8cmVjdCB4PSIxMSIgeT0iMTEiIHdpZHRoPSIxNzgiIGhlaWdodD0iMzE4IiBmaWxsPSJub25lIiBzdHJva2U9IiNjY2E2NTYiIHN0cm9rZS13aWR0aD0iMC41IiBzdHJva2Utb3BhY2l0eT0iMC40NSIgcng9IjQiLz4KCiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAwLDE3MCkiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2NjYTY1NiI+CiAgICA8Y2lyY2xlIHI9IjQ0IiBzdHJva2Utd2lkdGg9IjAuNyIgc3Ryb2tlLW9wYWNpdHk9IjAuNyIvPgogICAgPGNpcmNsZSByPSIzNiIgc3Ryb2tlLXdpZHRoPSIwLjUiIHN0cm9rZS1vcGFjaXR5PSIwLjUiLz4KICAgIDxjaXJjbGUgcj0iMjgiIHN0cm9rZS13aWR0aD0iMC40IiBzdHJva2Utb3BhY2l0eT0iMC40NSIvPgoKICAgIDxnIHN0cm9rZS13aWR0aD0iMC43IiBzdHJva2Utb3BhY2l0eT0iMC44NSI+CiAgICAgIDxwYXRoIGQ9Ik0gMCwtNTAgTCA4LC04IEwgNTAsMCBMIDgsOCBMIDAsNTAgTCAtOCw4IEwgLTUwLDAgTCAtOCwtOCBaIi8+CiAgICAgIDxwYXRoIGQ9Ik0gMCwtNTAgTCA4LC04IEwgNTAsMCBMIDgsOCBMIDAsNTAgTCAtOCw4IEwgLTUwLDAgTCAtOCwtOCBaIiB0cmFuc2Zvcm09InJvdGF0ZSgyMi41KSIgc3Ryb2tlLW9wYWNpdHk9IjAuNiIvPgogICAgPC9nPgoKICAgIDxnIHN0cm9rZS13aWR0aD0iMC42IiBzdHJva2Utb3BhY2l0eT0iMC44Ij4KICAgICAgPHBhdGggZD0iTSAwLC0yMiBMIDUsLTUgTCAyMiwwIEwgNSw1IEwgMCwyMiBMIC01LDUgTCAtMjIsMCBMIC01LC01IFoiIHRyYW5zZm9ybT0icm90YXRlKDQ1KSIvPgogICAgPC9nPgoKICAgIDxjaXJjbGUgcj0iMy41IiBmaWxsPSIjY2NhNjU2IiBzdHJva2U9Im5vbmUiLz4KICAgIDxjaXJjbGUgcj0iNiIgc3Ryb2tlLXdpZHRoPSIwLjQiIHN0cm9rZS1vcGFjaXR5PSIwLjYiLz4KICA8L2c+CgogIDxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2NjYTY1NiIgc3Ryb2tlLXdpZHRoPSIwLjciIHN0cm9rZS1vcGFjaXR5PSIwLjYiPgogICAgPHBhdGggZD0iTSAyMiwyMiBMIDQyLDIyIEwgNDIsMzAgTSAyMiwyMiBMIDIyLDQyIEwgMzAsNDIgTSAyMiwyMiBMIDMwLDMwIi8+CiAgICA8cGF0aCBkPSJNIDE3OCwyMiBMIDE1OCwyMiBMIDE1OCwzMCBNIDE3OCwyMiBMIDE3OCw0MiBMIDE3MCw0MiBNIDE3OCwyMiBMIDE3MCwzMCIvPgogICAgPHBhdGggZD0iTSAyMiwzMTggTCA0MiwzMTggTCA0MiwzMTAgTSAyMiwzMTggTCAyMiwyOTggTCAzMCwyOTggTSAyMiwzMTggTCAzMCwzMTAiLz4KICAgIDxwYXRoIGQ9Ik0gMTc4LDMxOCBMIDE1OCwzMTggTCAxNTgsMzEwIE0gMTc4LDMxOCBMIDE3OCwyOTggTCAxNzAsMjk4IE0gMTc4LDMxOCBMIDE3MCwzMTAiLz4KICA8L2c+CgogIDxnIGZpbGw9IiNjY2E2NTYiIGZpbGwtb3BhY2l0eT0iMC42Ij4KICAgIDxjaXJjbGUgY3g9IjEwMCIgY3k9IjU4IiByPSIxLjIiLz4KICAgIDxjaXJjbGUgY3g9IjEwMCIgY3k9IjI4MiIgcj0iMS4yIi8+CiAgICA8Y2lyY2xlIGN4PSI4MCIgY3k9IjY4IiByPSIwLjgiIGZpbGwtb3BhY2l0eT0iMC40Ii8+CiAgICA8Y2lyY2xlIGN4PSIxMjAiIGN5PSI2OCIgcj0iMC44IiBmaWxsLW9wYWNpdHk9IjAuNCIvPgogICAgPGNpcmNsZSBjeD0iODAiIGN5PSIyNzIiIHI9IjAuOCIgZmlsbC1vcGFjaXR5PSIwLjQiLz4KICAgIDxjaXJjbGUgY3g9IjEyMCIgY3k9IjI3MiIgcj0iMC44IiBmaWxsLW9wYWNpdHk9IjAuNCIvPgogIDwvZz4KCiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAwLDkwKSIgZmlsbD0iI2NjYTY1NiIgZmlsbC1vcGFjaXR5PSIwLjciIGZvbnQtZmFtaWx5PSJHZW9yZ2lhLCBzZXJpZiI+CiAgICA8dGV4dCB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LXNpemU9IjkiIGxldHRlci1zcGFjaW5nPSIzIj7QmNCg0JjQndCQINCT0KDQmNCiPC90ZXh0PgogIDwvZz4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMDAsMjYwKSIgZmlsbD0iI2NjYTY1NiIgZmlsbC1vcGFjaXR5PSIwLjciIGZvbnQtZmFtaWx5PSJHZW9yZ2lhLCBzZXJpZiI+CiAgICA8dGV4dCB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LXNpemU9IjkiIGxldHRlci1zcGFjaW5nPSIzIj5UQVJPVDwvdGV4dD4KICA8L2c+Cjwvc3ZnPgo=") center/cover;
box-shadow:inset 0 0 0 1.5px rgba(204,166,86,0.85);
}
.deck[data-deck="classic"] .card .back{
background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMzAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBzbGljZSI+CiAgPGRlZnM+CiAgICA8cmFkaWFsR3JhZGllbnQgaWQ9IndiZyIgY3g9IjUwJSIgY3k9IjQ4JSIgcj0iNjIlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzI2MzQ2YSIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzEwMWUzZSIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwNDA4MWMiLz4KICAgIDwvcmFkaWFsR3JhZGllbnQ+CiAgICA8cmFkaWFsR3JhZGllbnQgaWQ9IndzdW4iIGN4PSI1MCUiIGN5PSI1MCUiIHI9IjUwJSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmYmY4ZWMiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjU1JSIgc3RvcC1jb2xvcj0iI2ZiZjhlYyIgc3RvcC1vcGFjaXR5PSIwLjU1Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZiZjhlYyIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8L3JhZGlhbEdyYWRpZW50PgogIDwvZGVmcz4KCiAgPHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9InVybCgjd2JnKSIvPgogIDxyZWN0IHg9IjUiIHk9IjUiIHdpZHRoPSIxOTAiIGhlaWdodD0iMjkwIiByeD0iMyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmJmOGVjIiBzdHJva2Utd2lkdGg9IjEuMiIgc3Ryb2tlLW9wYWNpdHk9IjAuODUiLz4KICA8cmVjdCB4PSIxMSIgeT0iMTEiIHdpZHRoPSIxNzgiIGhlaWdodD0iMjc4IiByeD0iMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmJmOGVjIiBzdHJva2Utd2lkdGg9IjAuNSIgc3Ryb2tlLW9wYWNpdHk9IjAuNDUiLz4KCiAgPCEtLSBnbG93IGhhbG8gYmVoaW5kIHN1biBkaXNjIC0tPgogIDxjaXJjbGUgY3g9IjEwMCIgY3k9IjE1MCIgcj0iNjIiIGZpbGw9InVybCgjd3N1bikiIG9wYWNpdHk9IjAuNjUiLz4KCiAgPCEtLSAxNiByYWRpYXRpbmcgcmF5cyAoNCBncm91cHMsIHJvdGF0ZWQpIC0tPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwMCwxNTApIiBzdHJva2U9IiNmYmY4ZWMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+CiAgICA8ZyBzdHJva2Utd2lkdGg9IjEuMiIgc3Ryb2tlLW9wYWNpdHk9IjAuOTUiPgogICAgICA8bGluZSB4MT0iMCIgeTE9Ii00NCIgeDI9IjAiIHkyPSItNzIiLz4KICAgICAgPGxpbmUgeDE9IjAiIHkxPSI0NCIgeDI9IjAiIHkyPSI3MiIvPgogICAgICA8bGluZSB4MT0iLTQ0IiB5MT0iMCIgeDI9Ii03MiIgeTI9IjAiLz4KICAgICAgPGxpbmUgeDE9IjQ0IiB5MT0iMCIgeDI9IjcyIiB5Mj0iMCIvPgogICAgPC9nPgogICAgPGcgc3Ryb2tlLXdpZHRoPSIwLjkiIHN0cm9rZS1vcGFjaXR5PSIwLjg1IiB0cmFuc2Zvcm09InJvdGF0ZSgyMi41KSI+CiAgICAgIDxsaW5lIHgxPSIwIiB5MT0iLTQ0IiB4Mj0iMCIgeTI9Ii02NiIvPgogICAgICA8bGluZSB4MT0iMCIgeTE9IjQ0IiB4Mj0iMCIgeTI9IjY2Ii8+CiAgICAgIDxsaW5lIHgxPSItNDQiIHkxPSIwIiB4Mj0iLTY2IiB5Mj0iMCIvPgogICAgICA8bGluZSB4MT0iNDQiIHkxPSIwIiB4Mj0iNjYiIHkyPSIwIi8+CiAgICA8L2c+CiAgICA8ZyBzdHJva2Utd2lkdGg9IjAuNyIgc3Ryb2tlLW9wYWNpdHk9IjAuNzUiIHRyYW5zZm9ybT0icm90YXRlKDQ1KSI+CiAgICAgIDxsaW5lIHgxPSIwIiB5MT0iLTQ0IiB4Mj0iMCIgeTI9Ii02MiIvPgogICAgICA8bGluZSB4MT0iMCIgeTE9IjQ0IiB4Mj0iMCIgeTI9IjYyIi8+CiAgICAgIDxsaW5lIHgxPSItNDQiIHkxPSIwIiB4Mj0iLTYyIiB5Mj0iMCIvPgogICAgICA8bGluZSB4MT0iNDQiIHkxPSIwIiB4Mj0iNjIiIHkyPSIwIi8+CiAgICA8L2c+CiAgICA8ZyBzdHJva2Utd2lkdGg9IjAuNSIgc3Ryb2tlLW9wYWNpdHk9IjAuNjUiIHRyYW5zZm9ybT0icm90YXRlKDY3LjUpIj4KICAgICAgPGxpbmUgeDE9IjAiIHkxPSItNDQiIHgyPSIwIiB5Mj0iLTU4Ii8+CiAgICAgIDxsaW5lIHgxPSIwIiB5MT0iNDQiIHgyPSIwIiB5Mj0iNTgiLz4KICAgICAgPGxpbmUgeDE9Ii00NCIgeTE9IjAiIHgyPSItNTgiIHkyPSIwIi8+CiAgICAgIDxsaW5lIHgxPSI0NCIgeTE9IjAiIHgyPSI1OCIgeTI9IjAiLz4KICAgIDwvZz4KICA8L2c+CgogIDwhLS0gY2VudHJhbCBjcmVhbSBtZWRhbGxpb24gd2l0aCBuYXZ5IGNvbXBhc3Mgc3RhciAtLT4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMDAsMTUwKSI+CiAgICA8Y2lyY2xlIHI9IjM4IiBmaWxsPSIjZmJmOGVjIiBmaWxsLW9wYWNpdHk9IjAuOTIiIHN0cm9rZT0iIzBmMWY0MiIgc3Ryb2tlLXdpZHRoPSIwLjUiLz4KICAgIDxjaXJjbGUgcj0iMzIiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzBmMWY0MiIgc3Ryb2tlLXdpZHRoPSIwLjYiIHN0cm9rZS1vcGFjaXR5PSIwLjU1Ii8+CiAgICA8cGF0aCBkPSJNIDAgLTIyIEwgNCAtNCBMIDIyIDAgTCA0IDQgTCAwIDIyIEwgLTQgNCBMIC0yMiAwIEwgLTQgLTQgWiIgZmlsbD0iIzBmMWY0MiIvPgogICAgPHBhdGggZD0iTSAwIC0xNCBMIDMgLTMgTCAxNCAwIEwgMyAzIEwgMCAxNCBMIC0zIDMgTCAtMTQgMCBMIC0zIC0zIFoiIGZpbGw9IiNmYmY4ZWMiLz4KICAgIDxjaXJjbGUgcj0iMyIgZmlsbD0iIzBmMWY0MiIvPgogICAgPGNpcmNsZSByPSIwLjgiIGZpbGw9IiNmYmY4ZWMiLz4KICAgIDxnIGZpbGw9IiMwZjFmNDIiPgogICAgICA8Y2lyY2xlIGN4PSIwIiBjeT0iLTMwIiByPSIxIi8+CiAgICAgIDxjaXJjbGUgY3g9IjAiIGN5PSIzMCIgcj0iMSIvPgogICAgICA8Y2lyY2xlIGN4PSItMzAiIGN5PSIwIiByPSIxIi8+CiAgICAgIDxjaXJjbGUgY3g9IjMwIiBjeT0iMCIgcj0iMSIvPgogICAgICA8Y2lyY2xlIGN4PSItMjEiIGN5PSItMjEiIHI9IjAuNyIvPgogICAgICA8Y2lyY2xlIGN4PSIyMSIgY3k9Ii0yMSIgcj0iMC43Ii8+CiAgICAgIDxjaXJjbGUgY3g9Ii0yMSIgY3k9IjIxIiByPSIwLjciLz4KICAgICAgPGNpcmNsZSBjeD0iMjEiIGN5PSIyMSIgcj0iMC43Ii8+CiAgICA8L2c+CiAgPC9nPgoKICA8IS0tIHRvcCBhcmNoIHdpdGggZG90cyBhbmQgdHdpbmtsZSBzdGFyIC0tPgogIDxwYXRoIGQ9Ik0gNTAgNjAgUSAxMDAgMzggMTUwIDYwIiBmaWxsPSJub25lIiBzdHJva2U9IiNmYmY4ZWMiIHN0cm9rZS13aWR0aD0iMC44IiBzdHJva2Utb3BhY2l0eT0iMC44Ii8+CiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI2MCIgcj0iMiIgZmlsbD0iI2ZiZjhlYyIvPgogIDxjaXJjbGUgY3g9IjE1MCIgY3k9IjYwIiByPSIyIiBmaWxsPSIjZmJmOGVjIi8+CiAgPGNpcmNsZSBjeD0iMTAwIiBjeT0iNDIiIHI9IjIiIGZpbGw9IiNmYmY4ZWMiLz4KICA8cGF0aCBkPSJNIDEwMCAyOCBMIDEwMSAzMSBMIDEwNCAzMiBMIDEwMSAzMyBMIDEwMCAzNiBMIDk5IDMzIEwgOTYgMzIgTCA5OSAzMSBaIiBmaWxsPSIjZmJmOGVjIi8+CgogIDwhLS0gYm90dG9tIGFyY2ggd2l0aCBkb3RzIGFuZCBjcmVzY2VudCBtb29uIC0tPgogIDxwYXRoIGQ9Ik0gNTAgMjQwIFEgMTAwIDI2MiAxNTAgMjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNmYmY4ZWMiIHN0cm9rZS13aWR0aD0iMC44IiBzdHJva2Utb3BhY2l0eT0iMC44Ii8+CiAgPGNpcmNsZSBjeD0iNTAiIGN5PSIyNDAiIHI9IjIiIGZpbGw9IiNmYmY4ZWMiLz4KICA8Y2lyY2xlIGN4PSIxNTAiIGN5PSIyNDAiIHI9IjIiIGZpbGw9IiNmYmY4ZWMiLz4KICA8Y2lyY2xlIGN4PSIxMDAiIGN5PSIyNTgiIHI9IjIiIGZpbGw9IiNmYmY4ZWMiLz4KICA8cGF0aCBkPSJNIDk0IDI3MiBBIDYgNiAwIDEgMCAxMDYgMjcyIEEgNC41IDQuNSAwIDEgMSA5NCAyNzIgWiIgZmlsbD0iI2ZiZjhlYyIgZmlsbC1vcGFjaXR5PSIwLjkiLz4KCiAgPCEtLSBjb3JuZXIgYnJhY2tldHMg4pSM4pSQ4pSU4pSYIC0tPgogIDxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZiZjhlYyIgc3Ryb2tlLXdpZHRoPSIwLjkiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW9wYWNpdHk9IjAuODUiPgogICAgPHBhdGggZD0iTSAyMCAzMCBMIDIwIDIwIEwgMzAgMjAgTSAyNSAyMCBMIDI1IDI1IEwgMjAgMjUiLz4KICAgIDxwYXRoIGQ9Ik0gMTgwIDIwIEwgMTcwIDIwIEwgMTcwIDMwIE0gMTc1IDI1IEwgMTgwIDI1IEwgMTgwIDIwIi8+CiAgICA8cGF0aCBkPSJNIDIwIDI3MCBMIDIwIDI4MCBMIDMwIDI4MCBNIDIwIDI3NSBMIDI1IDI3NSBMIDI1IDI4MCIvPgogICAgPHBhdGggZD0iTSAxODAgMjgwIEwgMTcwIDI4MCBMIDE3MCAyNzAgTSAxNzUgMjc1IEwgMTgwIDI3NSBMIDE4MCAyODAiLz4KICA8L2c+CgogIDwhLS0gc2NhdHRlcmVkIHRpbnkgc3RhcnMgLS0+CiAgPGcgZmlsbD0iI2ZiZjhlYyIgb3BhY2l0eT0iMC43Ij4KICAgIDxjaXJjbGUgY3g9IjQwIiBjeT0iMTAwIiByPSIwLjYiLz4KICAgIDxjaXJjbGUgY3g9IjE2MCIgY3k9IjEwMCIgcj0iMC42Ii8+CiAgICA8Y2lyY2xlIGN4PSI0MCIgY3k9IjIwMCIgcj0iMC42Ii8+CiAgICA8Y2lyY2xlIGN4PSIxNjAiIGN5PSIyMDAiIHI9IjAuNiIvPgogICAgPGNpcmNsZSBjeD0iMzUiIGN5PSIxNTAiIHI9IjAuNSIvPgogICAgPGNpcmNsZSBjeD0iMTY1IiBjeT0iMTUwIiByPSIwLjUiLz4KICAgIDxjaXJjbGUgY3g9IjcwIiBjeT0iNzAiIHI9IjAuNCIvPgogICAgPGNpcmNsZSBjeD0iMTMwIiBjeT0iNzAiIHI9IjAuNCIvPgogICAgPGNpcmNsZSBjeD0iNzAiIGN5PSIyMzAiIHI9IjAuNCIvPgogICAgPGNpcmNsZSBjeD0iMTMwIiBjeT0iMjMwIiByPSIwLjQiLz4KICA8L2c+Cjwvc3ZnPgo=") center/cover;
box-shadow:inset 0 0 0 1.5px rgba(255,250,240,0.55);
}
/* ============ MOBILE OVERRIDES — taro hero h1 + descriptions ============
Эталон H1 — главная irinagrit.ru (.h1 mobile = 4.6rem).
Описания (lede/sub/абзацы) сведены к 16px на ≤580px по требованию
заказчика (был разнобой 17-20px по разным селекторам).
FAQ-ответы оставлены 18px (см. правило про "+2px на мобиле для FAQ"). */
@media (max-width:1120px){
.hero h1{ font-size:7.3rem; }
}
@media (max-width:580px){
/* HERO H1 — единый размер для всех вариантов селекторов hero */
.hero h1,
.hero-text .h1,
.wk-hero-title{ font-size:4.6rem; line-height:0.85; }
/* HERO lede / описание под H1 */
.hero .lede,
.hero-text .lede,
.wk-hero-lede{ font-size:1.6rem; line-height:1.5; }
/* Подписи под секционным H2 (.sub) */
.bg-shell .section .sub,
.section .sub,
.arc-section .sub,
.arcana-section .ar-head .sub,
.qask-content .sub,
.card-section .sub,
[class*="-head"] .sub{ font-size:1.6rem; line-height:1.5; }
/* Описания на странице карты (page-taro-karta) и в любых .body-text/.lead */
.card-meaning-block p,
.card-symbol .d,
.card-attrs .row .v,
.card-attrs .row .k,
.body-text,
.cell .body-text,
.bk-panel .bk-lead,
.theme-card--time p,
.arc-slide-info .nm,
.arcana-card .ar-name,
.lb-info .pos{ font-size:1.6rem; line-height:1.5; }
}
/* ════════ Birth-Promo + Book-Promo (книга «Звёздный компас» по дате рождения) ════════
Скопировано из taro-home.css — используется внутри .qspread-result */
.birth-promo{
position:relative; margin-top:24px;
border-radius:24px; padding:60px 56px;
background:
radial-gradient(ellipse at 0% 0%, rgba(138,79,175,0.18) 0%, transparent 55%),
radial-gradient(ellipse at 100% 100%, rgba(218,128,158,0.16) 0%, transparent 55%),
linear-gradient(140deg, rgba(36,28,72,0.65), rgba(15,18,40,0.9));
border:1px solid rgba(204,166,86,0.3);
overflow:hidden;
text-align:left;
}
.birth-promo::before{
content:""; position:absolute; inset:0; pointer-events:none;
background:
radial-gradient(1.2px 1.2px at 14% 22%, rgba(251,216,144,0.5) 50%, transparent),
radial-gradient(1px 1px at 86% 30%, rgba(251,216,144,0.45) 50%, transparent),
radial-gradient(1.2px 1.2px at 30% 82%, rgba(251,216,144,0.5) 50%, transparent),
radial-gradient(1px 1px at 88% 78%, rgba(251,216,144,0.45) 50%, transparent),
radial-gradient(0.8px 0.8px at 55% 15%, rgba(204,166,86,0.4) 50%, transparent);
animation:cosmic-twinkle 6s ease-in-out infinite alternate;
}
@keyframes cosmic-twinkle{ from{ opacity:0.5; } to{ opacity:0.9; } }
.birth-promo > *{ position:relative; z-index:1; }
.birth-promo .bp-title{
font-family:'Forum',serif; font-size:5rem; line-height:1.1; color:#fbf8ec;
max-width:78rem; margin:0 0 18px;
font-weight:400; letter-spacing:0; text-align:left;
}
.birth-promo .bp-title em{ font-style:italic; color:#fbf8ec; font-weight:400; }
.birth-promo .bp-lead{
font-size:1.8rem; color:#dadbe0; line-height:1.6;
max-width:62rem; margin:0 0 36px;
}
.birth-promo .tag-grid{
display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
gap:10px; margin:0 0 40px;
}
.birth-promo .tag-plate{
display:flex; align-items:center; gap:14px;
background:rgba(204,166,86,0.08);
border-radius:12px; padding:16px 20px;
transition:background .25s, transform .25s;
}
.birth-promo .tag-plate:hover{ background:rgba(204,166,86,0.16); transform:translateY(-2px); }
.birth-promo .tag-plate .ico{
flex-shrink:0; position:relative;
width:36px; height:36px;
border-radius:8px;
background:rgba(204,166,86,0.18);
display:flex; align-items:center; justify-content:center;
animation:bp-ico-pulse 4s ease-in-out infinite;
}
.birth-promo .tag-plate .ico svg{
width:22px; height:22px; fill:var(--gold-light);
animation:bp-ico-shimmer 4s ease-in-out infinite;
}
.birth-promo .tag-plate .txt{ font-size:1.8rem; color:#fbf8ec; line-height:1.2; letter-spacing:.02em; }
@keyframes bp-ico-pulse{
0%,100%{ box-shadow:0 0 0 rgba(251,216,144,0); }
50% { box-shadow:0 0 14px rgba(251,216,144,0.35), 0 0 22px rgba(228,168,200,0.18); }
}
@keyframes bp-ico-shimmer{
0%,100%{ fill:var(--gold-light); filter:drop-shadow(0 0 0 transparent); }
50% { fill:#ffe6b0; filter:drop-shadow(0 0 4px rgba(251,216,144,0.6)); }
}
.birth-promo .tag-plate .ico::before,
.birth-promo .tag-plate .ico::after{
content:"✦"; position:absolute;
color:var(--gold-light); font-size:9px; line-height:1;
opacity:0; pointer-events:none;
text-shadow:0 0 4px rgba(251,216,144,0.6), 0 0 8px rgba(228,168,200,0.3);
animation:bp-ico-spark 5s ease-in-out infinite;
}
.birth-promo .tag-plate .ico::before{ top:-5px; right:-6px; animation-delay:0s; }
.birth-promo .tag-plate .ico::after{
bottom:-4px; left:-5px; animation-delay:2.4s; font-size:7px;
color:#ffd9e0; text-shadow:0 0 4px rgba(228,168,200,0.7);
}
@keyframes bp-ico-spark{
0%,100% { opacity:0; transform:scale(0.3) rotate(0deg); }
45%,55% { opacity:1; transform:scale(1) rotate(20deg); }
70% { opacity:0; transform:scale(0.6) rotate(40deg); }
}
.birth-promo .tag-plate:nth-child(1) .ico{ animation-delay:0s; }
.birth-promo .tag-plate:nth-child(2) .ico{ animation-delay:0.7s; }
.birth-promo .tag-plate:nth-child(3) .ico{ animation-delay:1.4s; }
.birth-promo .tag-plate:nth-child(4) .ico{ animation-delay:0.4s; }
.birth-promo .tag-plate:nth-child(5) .ico{ animation-delay:2.1s; }
.birth-promo .tag-plate:nth-child(6) .ico{ animation-delay:1.1s; }
.birth-promo .tag-plate:nth-child(7) .ico{ animation-delay:1.8s; }
.birth-promo .cta-text{
font-family:'Forum',serif; font-size:3.2rem; color:#fbf8ec; line-height:1.2;
margin:0 0 24px; max-width:64rem; font-weight:400;
}
.birth-promo .cta-text em{ color:#fbf8ec; font-style:normal; }
.birth-promo .form-grid{
display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; align-items:end;
}
.birth-promo .bp-field{
display:flex; flex-direction:column; gap:8px;
background:transparent; border:0; padding:0;
}
.birth-promo .bp-field label{
font-size:1.15rem; text-transform:uppercase; letter-spacing:.22em;
color:var(--gold); font-weight:500; margin:0;
}
.birth-promo .bp-select{
height:62px; width:100%;
background:rgba(15,18,40,0.4);
border:1px solid rgba(204,166,86,0.45);
border-radius:10px;
color:#fbf8ec; padding:0 42px 0 18px;
font-family:inherit; font-size:1.7rem;
cursor:pointer; appearance:none; -webkit-appearance:none; -moz-appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 18px center;
transition:border-color .25s, background-color .25s;
outline:none;
}
.birth-promo .bp-select:focus, .birth-promo .bp-select:hover{
border-color:var(--gold);
background-color:rgba(15,18,40,0.6);
}
.birth-promo .bp-select.is-placeholder{ color:rgba(251,248,236,0.55); }
.birth-promo .bp-select option{ background:#1a1f3a; color:#fbf8ec; }
.birth-promo .bp-select option[disabled]{ color:rgba(251,248,236,0.55); }
.birth-promo .bp-btn,
.bk-panel .bk-btn{
height:62px; padding:0 32px;
background:var(--gold); color:#1a1518;
border:0; border-radius:10px;
font-family:'Forum',serif; font-size:2.1rem; font-weight:400;
cursor:pointer; white-space:nowrap; letter-spacing:.02em;
transition:transform .15s, background .25s, box-shadow .25s;
display:inline-flex; align-items:center; justify-content:center; gap:8px;
box-shadow:none;
}
.birth-promo .bp-btn:hover,
.bk-panel .bk-btn:hover{
background:var(--gold-light); transform:translateY(-1px);
box-shadow:0 12px 28px -8px rgba(204,166,86,0.4);
}
.birth-promo .bp-btn:active,
.bk-panel .bk-btn:active{ transform:scale(0.98); }
.birth-promo .bp-btn .arr,
.bk-panel .bk-btn .arr{ display:inline-block; transition:transform .2s; }
.birth-promo .bp-btn:hover .arr,
.bk-panel .bk-btn:hover .arr{ transform:translateX(3px); }
@media (max-width:980px){ .birth-promo{ padding:48px 32px; } .birth-promo .bp-title{ font-size:4rem; } .birth-promo .cta-text{ font-size:2.4rem; } }
@media (max-width:760px){
.birth-promo .form-grid{ grid-template-columns:1fr 1fr; }
.birth-promo .form-grid .bp-btn{ grid-column:1/-1; }
}
@media (max-width:580px){ .birth-promo{ padding:36px 22px; } .birth-promo .bp-title{ font-size:3.2rem; } }
/* Book-Promo */
.book-promo{
position:relative; margin-top:32px;
border:1px solid rgba(204,166,86,0.45); border-radius:24px; padding:48px 60px; overflow:hidden;
background:
radial-gradient(ellipse at 50% -20%, rgba(251,216,144,0.18) 0%, transparent 55%),
radial-gradient(ellipse at 100% 110%, rgba(204,166,86,0.12) 0%, transparent 50%),
linear-gradient(160deg, rgba(35,39,75,0.7) 0%, rgba(15,18,40,0.88) 100%);
display:grid; grid-template-columns: minmax(380px, 1fr) 1.1fr; gap:60px; align-items:center;
}
.book-promo[hidden]{ display:none; }
.book-promo .corner{ position:absolute; width:48px; height:48px; pointer-events:none; opacity:0; transition:opacity .8s ease .9s; }
.book-promo.show .corner{ opacity:1; }
.book-promo .corner.tl{ top:18px; left:18px; border-top:1.5px solid var(--gold); border-left:1.5px solid var(--gold); border-radius:14px 0 0 0; }
.book-promo .corner.tr{ top:18px; right:18px; border-top:1.5px solid var(--gold); border-right:1.5px solid var(--gold); border-radius:0 14px 0 0; }
.book-promo .corner.bl{ bottom:18px; left:18px; border-bottom:1.5px solid var(--gold); border-left:1.5px solid var(--gold); border-radius:0 0 0 14px; }
.book-promo .corner.br{ bottom:18px; right:18px; border-bottom:1.5px solid var(--gold); border-right:1.5px solid var(--gold); border-radius:0 0 14px 0; }
.bk-stage{ position:relative; height:460px; display:flex; align-items:center; justify-content:center; perspective:1500px; }
.bk-halo{ position:absolute; width:420px; height:420px; border-radius:50%; pointer-events:none;
background:radial-gradient(circle, rgba(251,216,144,0.45) 0%, rgba(204,166,86,0.16) 38%, transparent 66%);
filter:blur(14px); opacity:0; transition:opacity 1.2s ease 0.3s; }
.book-promo.show .bk-halo{ opacity:1; animation:bkHaloPulse 4.5s ease-in-out 1.6s infinite; }
@keyframes bkHaloPulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.1); opacity:0.85; } }
.bk-orbit{ position:absolute; width:520px; height:520px; pointer-events:none; opacity:0; transition:opacity 1.5s ease 0.5s; }
.book-promo.show .bk-orbit{ opacity:0.7; animation:bkOrbitSpin 70s linear 1.5s infinite; }
@keyframes bkOrbitSpin{ to{ transform:rotate(360deg); } }
.bk-const{ position:absolute; width:520px; height:520px; pointer-events:none; opacity:0; transition:opacity 1.5s ease 0.7s; }
.book-promo.show .bk-const{ opacity:0.55; animation:bkConstSpin 110s linear 2s infinite; }
@keyframes bkConstSpin{ to{ transform:rotate(-360deg); } }
.bk-const .line{ stroke:var(--gold-light); stroke-width:0.9; fill:none; stroke-dasharray:700; stroke-dashoffset:700; }
.book-promo.show .bk-const .line{ animation:bkDrawLine 2s ease forwards 0.8s; }
@keyframes bkDrawLine{ to{ stroke-dashoffset:0; } }
.bk-const .star{ fill:var(--gold-light); opacity:0; }
.book-promo.show .bk-const .star{ animation:bkStarFade 0.6s ease forwards 1.5s; }
@keyframes bkStarFade{ to{ opacity:1; } }
.bk-book{ position:relative; width:260px; height:380px; transform-style:preserve-3d;
opacity:0; transform: rotateY(180deg) rotateX(2deg) scale(0.82);
transition: opacity .8s ease, transform 1.5s cubic-bezier(.34,1.55,.64,1);
}
.book-promo.show .bk-book{ opacity:1; transform: rotateY(12deg) rotateX(2deg) scale(1); animation:bkFloat 6.5s ease-in-out 2s infinite; }
@keyframes bkFloat{
0%,100%{ transform: rotateY(12deg) rotateX(2deg) translateY(0); }
50% { transform: rotateY(10deg) rotateX(2deg) translateY(-12px); }
}
.bk-spine{ position:absolute; right:-14px; top:7px; bottom:7px; width:16px;
background: linear-gradient(-90deg, #0a0d1f 0%, #1a1f3a 60%, #2a2f5a 100%);
border-right:1px solid var(--gold); border-radius:0 4px 4px 0;
transform: rotateY(90deg); transform-origin:left center;
box-shadow: inset 2px 0 6px rgba(0,0,0,0.6);
}
.bk-spine::before{ content:""; position:absolute; left:2px; right:2px; top:18%; bottom:18%;
border-top:1px solid rgba(204,166,86,0.4); border-bottom:1px solid rgba(204,166,86,0.4); }
.bk-cover{
position:absolute; inset:0; border-radius:8px;
background:
radial-gradient(ellipse at 50% 38%, rgba(251,216,144,0.22) 0%, transparent 55%),
linear-gradient(180deg, #2a2f5a 0%, #1a1f3a 50%, #0f1228 100%);
border:2px solid var(--gold);
box-shadow:
0 50px 100px rgba(0,0,0,0.6),
0 22px 44px rgba(204,166,86,0.28),
inset 0 0 0 1px rgba(204,166,86,0.25);
overflow:hidden;
}
.bk-cover-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
display:block; pointer-events:none; z-index:0; }
.bk-cover-img:not([src]){ display:none; }
.bk-sheen{ position:absolute; left:0; right:0; top:-100%; height:200%;
background:linear-gradient(180deg, transparent 0%, rgba(251,216,144,0.16) 50%, transparent 100%);
pointer-events:none; z-index:0; }
.book-promo.show .bk-sheen{ animation:bkSheen 4s ease-in-out 2.4s infinite; }
@keyframes bkSheen{ 0%{ transform:translateY(0); } 60%,100%{ transform:translateY(60%); } }
.bk-dust{ position:absolute; inset:0; pointer-events:none; }
.bk-dust .p{ position:absolute; width:2px; height:2px; border-radius:50%; background:var(--gold-light);
opacity:0; animation:bkDustRise var(--d,8s) linear infinite; animation-delay:var(--dl,0s);
box-shadow:0 0 6px var(--gold-light);
}
@keyframes bkDustRise{
0%{ transform:translate(0,0) scale(0.6); opacity:0; }
10%{ opacity:1; }
90%{ opacity:0.8; }
100%{ transform:translate(var(--dx,30px), -280px) scale(1); opacity:0; }
}
.bk-panel{ position:relative; padding-right:8px; text-align:left;
opacity:0; transform:translateX(40px); transition:opacity 1s ease 0.7s, transform 1s cubic-bezier(.2,.7,.25,1) 0.7s;
}
.book-promo.show .bk-panel{ opacity:1; transform:translateX(0); }
.bk-panel h3{ font-family:'Forum',serif; font-size:5rem; line-height:1.02; color:#fbf8ec; margin:0 0 22px; font-weight:400; text-align:left; }
.bk-panel h3 em{ color:var(--gold); font-style:italic; }
.bk-panel .bk-lead{ font-size:1.8rem; line-height:1.55; color:#dadbe0; margin:0 0 32px; text-align:left; }
.bk-panel .bk-lead strong{ color:#fbf8ec; font-weight:500; }
.bk-panel .bk-cta{ display:flex; gap:24px; align-items:center; flex-wrap:wrap; justify-content:flex-start; }
.bk-panel .bk-price{ display:inline-flex; align-items:baseline; gap:10px; font-family:'Forum',serif; font-size:1.8rem; }
.bk-panel .bk-price-now{ color:var(--gold-light); font-size:2.2rem; font-style:normal; letter-spacing:.01em; }
.bk-panel .bk-price-old{ color:#8a8474; font-size:2.2rem; text-decoration:line-through; text-decoration-color:rgba(204,166,86,0.7); text-decoration-thickness:1.5px; font-style:italic; }
@media (max-width:1120px){
.book-promo{ grid-template-columns:1fr; padding:40px 28px; gap:24px; }
.bk-stage{ height:420px; }
.bk-panel h3{ font-size:3.8rem; }
}
@media (max-width:580px){
.book-promo{ padding:36px 18px; border-radius:16px; }
.bk-stage{ height:400px; }
.bk-book{ width:220px; height:330px; }
.bk-orbit, .bk-const{ width:380px; height:380px; }
.bk-halo{ width:320px; height:320px; }
.bk-panel h3{ font-size:3.2rem; }
.bk-panel .bk-btn{ width:100%; }
}
/* ═══════════════════════════════════════════════════════════════════
PATCH 2026-05-19: новое количество карт в слайдере раскладов.
На неделю (s7) теперь 7 карт (было 3), На квартал (s30) теперь 3
(было 5), На полгода (s365) теперь 6 (было 7), На будущее (s3) — 3.
Переписываем nth-child transforms и hover-фоны.
═══════════════════════════════════════════════════════════════════ */
/* s3 — На будущее (3 карты, фон амбра) */
.theme-card--time.s3:hover{
background:
radial-gradient(ellipse at 50% 0%, rgba(251,216,144,0.22) 0%, transparent 60%),
linear-gradient(160deg, #6a5018 0%, #3a2c0a 50%, #1a1404 100%) !important;
border-color:rgba(251,216,144,0.65) !important;
}
.theme-card--time.s3 .mini:nth-child(1){ transform:translateX(-50%) rotate(-2deg) translateY(0); z-index:3; }
.theme-card--time.s3 .mini:nth-child(2){ transform:translateX(-50%) rotate(0deg) translateY(-2px); z-index:2; }
.theme-card--time.s3 .mini:nth-child(3){ transform:translateX(-50%) rotate(2deg) translateY(-4px); z-index:1; }
.theme-card--time.s3:hover .mini:nth-child(1){ transform:translateX(calc(-50% - 60px)) rotate(-14deg) translateY(-10px); }
.theme-card--time.s3:hover .mini:nth-child(2){ transform:translateX(-50%) rotate(0deg) translateY(-22px); }
.theme-card--time.s3:hover .mini:nth-child(3){ transform:translateX(calc(-50% + 60px)) rotate(14deg) translateY(-10px); }
/* s7 — На неделю теперь 7 карт (анимация прежней s365) */
.theme-card--time.s7 .mini:nth-child(1){ transform:translateX(-50%) rotate(-4deg) translateY(0); z-index:7; }
.theme-card--time.s7 .mini:nth-child(2){ transform:translateX(-50%) rotate(-2deg) translateY(-2px); z-index:6; }
.theme-card--time.s7 .mini:nth-child(3){ transform:translateX(-50%) rotate(0deg) translateY(-4px); z-index:5; }
.theme-card--time.s7 .mini:nth-child(4){ transform:translateX(-50%) rotate(2deg) translateY(-6px); z-index:4; }
.theme-card--time.s7 .mini:nth-child(5){ transform:translateX(-50%) rotate(4deg) translateY(-8px); z-index:3; }
.theme-card--time.s7 .mini:nth-child(6){ transform:translateX(-50%) rotate(6deg) translateY(-10px); z-index:2; }
.theme-card--time.s7 .mini:nth-child(7){ transform:translateX(-50%) rotate(8deg) translateY(-12px); z-index:1; }
.theme-card--time.s7:hover .mini:nth-child(1){ transform:translateX(calc(-50% - 130px)) rotate(-30deg) translateY(0); }
.theme-card--time.s7:hover .mini:nth-child(2){ transform:translateX(calc(-50% - 90px)) rotate(-20deg) translateY(-10px); }
.theme-card--time.s7:hover .mini:nth-child(3){ transform:translateX(calc(-50% - 45px)) rotate(-10deg) translateY(-18px); }
.theme-card--time.s7:hover .mini:nth-child(4){ transform:translateX(-50%) rotate(0deg) translateY(-22px); }
.theme-card--time.s7:hover .mini:nth-child(5){ transform:translateX(calc(-50% + 45px)) rotate(10deg) translateY(-18px); }
.theme-card--time.s7:hover .mini:nth-child(6){ transform:translateX(calc(-50% + 90px)) rotate(20deg) translateY(-10px); }
.theme-card--time.s7:hover .mini:nth-child(7){ transform:translateX(calc(-50% + 130px)) rotate(30deg) translateY(0); }
/* s30 — На квартал теперь 3 карты (анимация прежней s7) */
.theme-card--time.s30 .mini:nth-child(1){ transform:translateX(-50%) rotate(-2deg) translateY(0); z-index:3; }
.theme-card--time.s30 .mini:nth-child(2){ transform:translateX(-50%) rotate(0deg) translateY(-2px); z-index:2; }
.theme-card--time.s30 .mini:nth-child(3){ transform:translateX(-50%) rotate(2deg) translateY(-4px); z-index:1; }
.theme-card--time.s30 .mini:nth-child(4),
.theme-card--time.s30 .mini:nth-child(5){ display:none; }
.theme-card--time.s30:hover .mini:nth-child(1){ transform:translateX(calc(-50% - 60px)) rotate(-14deg) translateY(-10px); }
.theme-card--time.s30:hover .mini:nth-child(2){ transform:translateX(-50%) rotate(0deg) translateY(-22px); }
.theme-card--time.s30:hover .mini:nth-child(3){ transform:translateX(calc(-50% + 60px)) rotate(14deg) translateY(-10px); }
/* s365 — На полгода теперь 6 карт (6-card fan) */
.theme-card--time.s365 .mini:nth-child(1){ transform:translateX(-50%) rotate(-4deg) translateY(0); z-index:6; }
.theme-card--time.s365 .mini:nth-child(2){ transform:translateX(-50%) rotate(-2deg) translateY(-2px); z-index:5; }
.theme-card--time.s365 .mini:nth-child(3){ transform:translateX(-50%) rotate(-0.5deg) translateY(-4px); z-index:4; }
.theme-card--time.s365 .mini:nth-child(4){ transform:translateX(-50%) rotate(1deg) translateY(-6px); z-index:3; }
.theme-card--time.s365 .mini:nth-child(5){ transform:translateX(-50%) rotate(3deg) translateY(-8px); z-index:2; }
.theme-card--time.s365 .mini:nth-child(6){ transform:translateX(-50%) rotate(5deg) translateY(-10px); z-index:1; }
.theme-card--time.s365 .mini:nth-child(7){ display:none; }
.theme-card--time.s365:hover .mini:nth-child(1){ transform:translateX(calc(-50% - 110px)) rotate(-26deg) translateY(-4px); }
.theme-card--time.s365:hover .mini:nth-child(2){ transform:translateX(calc(-50% - 70px)) rotate(-15deg) translateY(-14px); }
.theme-card--time.s365:hover .mini:nth-child(3){ transform:translateX(calc(-50% - 25px)) rotate(-5deg) translateY(-22px); }
.theme-card--time.s365:hover .mini:nth-child(4){ transform:translateX(calc(-50% + 25px)) rotate(5deg) translateY(-22px); }
.theme-card--time.s365:hover .mini:nth-child(5){ transform:translateX(calc(-50% + 70px)) rotate(15deg) translateY(-14px); }
.theme-card--time.s365:hover .mini:nth-child(6){ transform:translateX(calc(-50% + 110px)) rotate(26deg) translateY(-4px); }
/* ============ Хлебные крошки + отступ до hero — ближе к эталону ============ */
.bg-shell .crumbs.wrap{
padding-top:12px !important;
padding-bottom:0 !important;
}
.bg-shell .hero{ padding-top:36px !important; }
@media (max-width:580px){
.bg-shell .crumbs.wrap{
padding-top:10px !important;
padding-bottom:0 !important;
font-size:1.4rem !important;
}
.bg-shell .hero{ padding-top:22px !important; }
}
/* ============ Меньше пустоты между hero ↔ section и между section'ами ============ */
.bg-shell .hero{ padding-bottom:24px !important; }
.bg-shell .section{
padding-top:64px !important;
padding-bottom:64px !important;
}
.bg-shell .seo-block{ padding-top:8px !important; padding-bottom:48px !important; }
@media (max-width:580px){
.bg-shell .hero{ padding-bottom:16px !important; }
.bg-shell .section{
padding-top:40px !important;
padding-bottom:40px !important;
}
.bg-shell .seo-block{ padding-top:0 !important; padding-bottom:32px !important; }
}
/* footer.scss задаёт .footer{margin-top:8rem}. На taro-страницах bg-shell заканчивается ровно по обрезке карт, поэтому отступ перед футером не нужен. */
/* ============ MOBILE HERO ORDER (vopros) ============
На мобиле порядок блоков такой:
eyebrow → h1 → lede → spread-picker → qfan-stage → quick-chips → textarea → q-error → CTA → form-row.
Реализовано через display:contents на .hero-text и .question-form,
чтобы их leaf-дочки попали прямо в .hero (flex column) и встали по order.
=============================================================== */
@media (max-width:820px){
.bg-shell .hero{
display:flex !important;
flex-direction:column;
gap:0;
grid-template-columns:none;
padding-top:32px !important;
padding-bottom:24px !important;
}
.bg-shell .hero .hero-text,
.bg-shell .hero .hero-text .question-form{ display:contents; }
.bg-shell .hero .hero-text .eyebrow{ order:1; margin-bottom:14px; }
.bg-shell .hero .hero-text .h1{ order:2; margin:0; }
.bg-shell .hero .hero-text .lede{ order:3; margin:18px 0 24px; max-width:none; }
.bg-shell .hero .question-form .spread-picker{ order:4; margin-bottom:0; }
.bg-shell .hero .qfan-stage{ order:5; margin:6px auto 10px; transform:none; height:520px; }
.bg-shell .hero .question-form .quick-chips{ order:6; margin:6px 0 4px; }
.bg-shell .hero .question-form .question-field{ order:7; margin-top:10px; }
.bg-shell .hero .question-form .q-error{ order:8; margin-top:10px; }
.bg-shell .hero .question-form .btn-primary,
.bg-shell .hero .question-form #do-spread{ order:9; margin-top:14px; }
.bg-shell .hero .question-form .form-row{ order:10; margin-top:12px; }
/* Растягиваем контент на всю ширину */
.bg-shell .hero .question-form{ max-width:none; }
/* Уменьшаем глоу под веером */
.bg-shell .hero .qfan-stage::before{ width:280px; height:220px; }
}
@media (max-width:580px){
.bg-shell .hero{ padding-top:24px !important; padding-bottom:16px !important; }
.bg-shell .hero .qfan-stage{ height:440px; }
.bg-shell .hero .qfan-wrap{ transform:scale(0.92); transform-origin:center; }
.bg-shell .hero .qfan-stage::before{ width:240px; height:190px; }
}
/* ── Textarea вопроса = ширина CTA-кнопки. И на десктопе, и на мобиле. ── */
.bg-shell .hero .question-form .question-field{
align-self:flex-start;
width:320px;
max-width:100%;
}
.bg-shell .hero .question-form .question-input{
width:100%;
}
.bg-shell .hero .question-form .btn-primary--lg{
width:320px;
max-width:100%;
align-self:flex-start;
text-align:center;
}
@media (max-width:440px){
.bg-shell .hero .qfan-stage{ height:400px; }
.bg-shell .hero .qfan-wrap{ transform:scale(0.82); }
}
.bg-shell ~ .footer{ margin-top:0 !important; }