/* ===== Фирменные токены (палитра ГдеРабота.ру + золото Таро) ===== */
:root{
  --brand:#304ac1;
  --brand-2:#5c74e2;
  --accent:#e8b04b;
  --ink:#1a2128;
  --bg:#f4f6fc;
  --surface:#ffffff;
  --surface-2:#eef1fb;
  --text:#1a2128;
  --muted:#5b6577;
  --border:#e2e7f4;
  --grad:linear-gradient(135deg,#304ac1,#5c74e2 55%,#7087f2);
  --grad-gold:linear-gradient(135deg,#e8b04b,#d99630);
  --radius-1:10px; --radius-2:18px; --radius-3:30px; --radius-pill:9999px;
  --shadow-1:0 4px 14px rgba(48,74,193,.08);
  --shadow-2:0 18px 40px -12px rgba(48,74,193,.28);
  --shadow-3:0 30px 70px -20px rgba(26,33,40,.45);
  --font-sans:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --container:1140px;
  --ease-out:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{line-height:1.12;margin:0;letter-spacing:-.02em;font-weight:800}
p{margin:0}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 22px}
.container.narrow{max-width:760px}
.muted{color:var(--muted)}

/* ===== Кнопки ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  background:var(--grad);color:#fff;border:none;cursor:pointer;
  font:inherit;font-weight:700;padding:.85em 1.6em;border-radius:var(--radius-pill);
  box-shadow:var(--shadow-2);transition:transform .18s var(--ease-out),box-shadow .18s var(--ease-out),filter .18s;
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 22px 46px -12px rgba(48,74,193,.4)}
.btn:active{transform:translateY(0)}
.btn-lg{padding:1.05em 2.4em;font-size:1.08rem}
.btn-sm{padding:.55em 1.1em;font-size:.92rem;box-shadow:none}
.btn-ghost{background:transparent;color:var(--brand);border:1.5px solid var(--border);box-shadow:none}
.btn-ghost:hover{background:var(--surface-2);color:var(--brand);filter:none;box-shadow:none}

.tag{display:inline-flex;align-items:center;padding:.4em 1em;border-radius:var(--radius-pill);font-size:.82rem;font-weight:700;background:var(--surface-2);color:var(--brand)}
.tag-gold{background:color-mix(in srgb,var(--accent) 22%,#fff);color:#8a611a}

.surface{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-3);box-shadow:var(--shadow-1)}

/* ===== Шапка ===== */
.site-head{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.head-inner{display:flex;align-items:center;justify-content:space-between;height:70px;gap:20px}
.brand{display:inline-flex;align-items:center;gap:.6em;font-size:1.15rem}
.brand-mark{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:var(--grad);color:#fff;padding:6px;box-shadow:var(--shadow-1)}
.brand-mark svg{width:100%;height:100%}
.brand-text{font-weight:600;color:var(--text)}
.brand-text b{font-weight:800}
.head-nav{display:flex;align-items:center;gap:26px;font-weight:600;font-size:.96rem}
.head-nav a{color:var(--muted);transition:color .15s}
.head-nav a:hover{color:var(--brand)}
.head-nav .btn-ghost{color:var(--brand)}

/* ===== Hero ===== */
.hero{position:relative;overflow:hidden;background:var(--grad);color:#fff;padding:clamp(56px,9vw,110px) 0 clamp(64px,10vw,120px)}
.hero-glow{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 55% at 82% 10%,rgba(232,176,75,.32),transparent 60%),
    radial-gradient(50% 60% at 10% 90%,rgba(112,135,242,.5),transparent 60%),
    radial-gradient(40% 50% at 60% 120%,rgba(255,255,255,.14),transparent 60%);
}
.hero::after{content:"";position:absolute;inset:0;opacity:.06;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.9) 1px,transparent 1px);background-size:4px 4px}
.hero-inner{position:relative;max-width:820px}
.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.76rem;font-weight:700;color:rgba(255,255,255,.8);margin-bottom:18px}
.hero h1{font-size:clamp(2.3rem,5.4vw,4rem);margin-bottom:18px}
.lead{font-size:clamp(1.05rem,1.8vw,1.28rem);color:rgba(255,255,255,.9);max-width:640px;margin-bottom:34px}

/* Выбор периода */
.roll-form{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.period-picker{display:flex;flex-wrap:wrap;gap:8px;background:rgba(255,255,255,.12);padding:7px;border-radius:var(--radius-pill);border:1px solid rgba(255,255,255,.22)}
.period-opt{position:relative;cursor:pointer}
.period-opt input{position:absolute;opacity:0;pointer-events:none}
.period-opt span{display:block;padding:.6em 1.25em;border-radius:var(--radius-pill);font-weight:700;color:rgba(255,255,255,.85);transition:.18s var(--ease-out)}
.period-opt:hover span{color:#fff}
.period-opt.is-active span,.period-opt input:checked+span{background:#fff;color:var(--brand);box-shadow:var(--shadow-1)}
.roll-btn{background:var(--grad-gold);color:#3a2a08;box-shadow:0 16px 38px -12px rgba(232,176,75,.6)}
.roll-btn:hover{box-shadow:0 22px 48px -12px rgba(232,176,75,.7)}

/* ===== Результат ===== */
.result{padding:clamp(48px,7vw,90px) 0;background:
  radial-gradient(60% 40% at 80% 0,color-mix(in srgb,var(--accent) 12%,transparent),transparent 60%),
  radial-gradient(50% 40% at 0 20%,color-mix(in srgb,var(--brand-2) 14%,transparent),transparent 60%),var(--bg)}
.result-head{text-align:center;max-width:640px;margin:0 auto 42px}
.result-head h2{font-size:clamp(1.8rem,3.5vw,2.6rem);margin:16px 0 12px}

.cards-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,3vw,32px);max-width:820px;margin:0 auto 48px}
.tcard-wrap{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px}
.tcard-pos{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:center;min-height:2.4em;display:flex;align-items:center}
.tcard{
  position:relative;width:100%;aspect-ratio:5/8;border-radius:16px;
  background:linear-gradient(160deg,#1f2a63,#2d3f9e 60%,#42308a);
  border:2px solid var(--accent);
  box-shadow:var(--shadow-3);
  color:var(--accent);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:18px 14px;overflow:hidden;text-align:center;
}
.tcard::before{content:"";position:absolute;inset:7px;border:1px solid rgba(232,176,75,.4);border-radius:10px;pointer-events:none}
.tcard::after{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:radial-gradient(70% 50% at 50% 12%,rgba(255,255,255,.14),transparent 60%),
  radial-gradient(60% 40% at 50% 100%,rgba(232,176,75,.16),transparent 60%)}
.tcard-corner{position:absolute;font-size:.72rem;font-weight:800;color:rgba(232,176,75,.85);letter-spacing:.04em}
.tcard-corner.tl{top:12px;left:14px}
.tcard-corner.br{bottom:12px;right:14px;transform:rotate(180deg)}
.tcard-sym{width:clamp(56px,40%,84px);color:var(--accent);margin-bottom:12px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}
.tcard-sym svg{width:100%;height:auto}
.tcard-name{color:#fff;font-weight:800;font-size:clamp(.95rem,1.4vw,1.15rem);line-height:1.15;letter-spacing:-.01em}
.tcard-kw{color:rgba(255,255,255,.72);font-size:.74rem;line-height:1.35;margin-top:8px;font-weight:500}

/* Расшифровка */
.reading{max-width:820px;margin:0 auto;padding:clamp(24px,4vw,42px)}
.reading-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.reading-head h3{font-size:1.5rem}
.player{display:flex;align-items:center;gap:12px}
.player-btn{background:var(--surface-2);color:var(--brand);border:1.5px solid var(--border)}
.player-btn:hover{background:color-mix(in srgb,var(--brand) 10%,#fff);color:var(--brand);filter:none;box-shadow:none;transform:none}
.player-btn.is-playing{background:var(--grad);color:#fff;border-color:transparent}
.player-btn .ic-pause{display:none}
.player-btn.is-playing .ic-play{display:none}
.player-btn.is-playing .ic-pause{display:inline}
.player-note{font-size:.82rem;color:var(--muted)}

.reading-intro{color:var(--muted);border-left:3px solid var(--accent);padding-left:16px;margin-bottom:26px}
.reading-item{display:flex;gap:16px;padding:18px 0;border-top:1px solid var(--border)}
.reading-item:first-of-type{border-top:none}
.reading-badge{flex:none;width:44px;height:44px;border-radius:12px;background:linear-gradient(160deg,#1f2a63,#42308a);color:var(--accent);display:grid;place-items:center;font-weight:800;font-size:.85rem;box-shadow:var(--shadow-1)}
.reading-item h4{font-size:1.06rem;margin-bottom:6px}
.reading-item .rn{color:var(--brand)}
.reading-item p{color:var(--muted)}

/* Поделиться */
.share{margin-top:30px;padding-top:26px;border-top:1px dashed var(--border)}
.share-title{display:block;font-weight:700;margin-bottom:14px}
.share-btns{display:flex;flex-wrap:wrap;gap:10px}
.share-btn{display:inline-flex;align-items:center;gap:.5em;padding:.7em 1.2em;border-radius:var(--radius-pill);font-weight:700;font-size:.92rem;color:#fff;transition:transform .16s var(--ease-out),box-shadow .16s;box-shadow:var(--shadow-1)}
.share-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.share-btn.tg{background:#2aabee}
.share-btn.vk{background:#0077ff}
.share-btn.ok{background:#ee8208}
.share-btn.mail{background:#5b6577}
.again{margin-top:26px;text-align:center}

/* ===== Секции ===== */
.section{padding:clamp(56px,9vw,110px) 0}
.sec-title{font-size:clamp(1.7rem,3.4vw,2.5rem);text-align:center;margin-bottom:44px}
.how{background:var(--surface)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step{padding:26px 24px;position:relative}
.step-n{font-size:.9rem;font-weight:800;color:var(--accent);letter-spacing:.08em}
.step h3{font-size:1.15rem;margin:14px 0 8px}
.step p{color:var(--muted);font-size:.95rem}

.faq{background:var(--bg)}
.qa{padding:0 24px;margin-bottom:14px}
.qa summary{cursor:pointer;list-style:none;padding:20px 0;font-weight:700;font-size:1.08rem;display:flex;justify-content:space-between;align-items:center;gap:16px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font-size:1.5rem;color:var(--brand);font-weight:400;transition:transform .2s}
.qa[open] summary::after{transform:rotate(45deg)}
.qa p{color:var(--muted);padding:0 0 22px}

/* ===== Футер ===== */
.site-footer{background:#141a2e;color:#c8cfe0;padding:56px 0 28px;margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:32px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.1)}
.brand-foot{color:#fff}
.brand-foot .brand-text{color:#fff}
.footer-col h4{font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;color:#8a93ad;margin-bottom:16px}
.footer-col p{margin-top:16px;color:#8a93ad;font-size:.92rem;max-width:340px}
.footer-col a{display:block;color:#c8cfe0;padding:6px 0;font-size:.95rem;transition:color .15s}
.footer-col a:hover{color:var(--accent)}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding-top:24px;font-size:.86rem;color:#8a93ad}

/* ===== Reveal (безопасно: скрываем только при html.js) ===== */
html.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);transition-delay:var(--d,0ms)}
html.js .reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .btn,.share-btn,.tcard{transition:none}
}

/* ===== Адаптив ===== */
@media (max-width:900px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .head-nav a:not(.btn){display:none}
  .hero h1{font-size:clamp(2rem,8vw,2.6rem)}
  .roll-form{flex-direction:column;align-items:stretch}
  .period-picker{justify-content:center}
  .roll-btn{width:100%}
  .cards-row{grid-template-columns:repeat(3,1fr);gap:8px}
  .tcard{padding:12px 6px}
  .tcard-corner,.tcard-kw{display:none}
  .tcard-name{font-size:.72rem}
  .reading-head{flex-direction:column;align-items:flex-start}
  .footer-grid{grid-template-columns:1fr}
}