/* ASTRAVEDA — фирменный слой поверх site.css: глубокий космический синий, фиолетовый и золото.
   Переопределяет переменные палитры, поэтому старые страницы автоматически получают новый стиль. */
:root {
  --ink: #050817; --night: #0a1030; --deep: #111a45; --violet: #1c2160; --violet2: #2b2a7a; --plum: #6a4fd6;
  --gold: #e2bb5f; --gold2: #f6dd95; --gold3: #a5843a; --text: #eef0fb; --dim: #b3b8dc; --mute: #8389b5;
  --accent: #8f6bff; --money: #6fd3a1; --love: #f08fb3; --male: #8fc7e8; --female: #e7a3e0;
  --card: rgba(19, 26, 74, .72); --line: rgba(226, 187, 95, .22); --radius: 20px;
}
body {
  background-color: var(--ink);
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 64% 78%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 38% 64%, rgba(246,221,149,.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 12%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(ellipse 70% 50% at 80% -10%, rgba(143,107,255,.28), transparent 70%),
    radial-gradient(ellipse 60% 40% at 0% 30%, rgba(46,74,190,.25), transparent 70%),
    linear-gradient(180deg, #0a1030 0%, #050817 60%, #04060f 100%);
  background-size: 240px 240px, 330px 330px, 410px 410px, 290px 290px, 100% 100%, 100% 100%, 100% 100%;
  background-attachment: fixed;
}
header.site { background: rgba(5, 8, 23, .78); border-bottom: 1px solid var(--line); }
.brand { gap: 10px; letter-spacing: .22em; font-size: 18px; }
.brand .logo { width: 34px; height: 34px; flex: none; }
.brand small { display: block; font: 11px/1.2 system-ui, sans-serif; letter-spacing: .08em; text-transform: none; color: var(--dim); }
nav.top a.cta { background: linear-gradient(135deg, var(--gold2), var(--gold)); }

/* ---------- кнопки ---------- */
.btn { border-radius: 999px; background: linear-gradient(135deg, var(--gold2), var(--gold)); color: #1a1530;
  box-shadow: 0 6px 24px rgba(226,187,95,.25); min-height: 48px; }
.btn.violet { background: linear-gradient(135deg, #9d7bff, #5b3fd0); color: #fff; box-shadow: 0 6px 24px rgba(143,107,255,.3); }
.btn.ghost { background: transparent; color: var(--gold2); box-shadow: inset 0 0 0 1px var(--gold3); }

/* ---------- главная ---------- */
.av-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding: 56px 0 24px; }
.av-hero h1 { font-size: clamp(34px, 5vw, 58px); line-height: 1.08; }
.av-hero h1 em { font-style: normal; background: linear-gradient(90deg, var(--gold2), var(--gold), #c9a8ff);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.av-hero .lead { color: var(--dim); font-size: 19px; max-width: 560px; margin: 18px 0 26px; }
.av-hero .row { gap: 12px; flex-wrap: wrap; }
.av-orbit { position: relative; aspect-ratio: 1; max-width: 460px; width: 100%; justify-self: center; }
.av-orbit svg { width: 100%; height: 100%; }
.av-orbit .ring { fill: none; stroke: rgba(226,187,95,.35); stroke-width: .6; }
.av-orbit .ring2 { fill: none; stroke: rgba(143,107,255,.35); stroke-width: .6; stroke-dasharray: 2 4; }
.av-orbit .spin { transform-origin: 50% 50%; animation: av-spin 120s linear infinite; }
.av-orbit .spin.rev { animation-duration: 180s; animation-direction: reverse; }
@keyframes av-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .av-orbit .spin { animation: none; } }
.av-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.av-badges span { font-size: 13px; color: var(--dim); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; }

.av-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.av-grid.four { grid-template-columns: repeat(4, 1fr); }
.av-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line); text-decoration: none; color: var(--text);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
a.av-card:hover, a.av-card:focus-visible { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 14px 40px rgba(10, 6, 40, .6); }
.av-card h3 { font-size: 21px; color: var(--gold2); }
.av-card p { margin: 0; color: var(--dim); font-size: 15.5px; }
.av-card .ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 24px;
  background: radial-gradient(circle at 30% 30%, #3a2f99, #141a52); border: 1px solid var(--line); color: var(--gold2); }
.av-card .more { margin-top: auto; color: var(--gold2); font-size: 15px; }
.av-card .price-tag { position: absolute; top: 18px; right: 18px; font-size: 14px; color: #1a1530; background: var(--gold2);
  border-radius: 999px; padding: 3px 11px; font-weight: 600; }
.av-card .price-tag.free { background: rgba(111,211,161,.18); color: var(--money); }
.av-card.feature { background: linear-gradient(150deg, rgba(91,63,208,.45), rgba(19,26,74,.8)); border-color: rgba(143,107,255,.5); }
.av-section { padding: 46px 0 10px; }
.av-section > h2 { font-size: clamp(26px, 3.4vw, 38px); margin-bottom: 8px; }
.av-section > .sub { color: var(--dim); margin: 0 0 24px; max-width: 720px; }
.av-split { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
.av-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.av-list li { padding-left: 28px; position: relative; color: var(--dim); }
.av-list li::before { content: "✦"; position: absolute; left: 4px; color: var(--gold); }
.av-quote { border-left: 3px solid var(--gold); padding: 6px 0 6px 18px; color: var(--dim); font-style: italic; }
.av-anastasia { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; padding: 26px;
  border-radius: var(--radius); background: linear-gradient(120deg, rgba(91,63,208,.35), rgba(13,20,60,.85)); border: 1px solid rgba(143,107,255,.45); }
.av-anastasia .avatar { width: 108px; height: 108px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #7c5cff, #1b1d5c 70%);
  display: grid; place-items: center; font-size: 46px; box-shadow: 0 0 0 2px var(--gold3), 0 0 40px rgba(143,107,255,.45); }
.av-steps { counter-reset: s; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.av-steps > div { counter-increment: s; padding: 22px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.av-steps > div::before { content: "0" counter(s); display: block; font-family: var(--serif); color: var(--gold); font-size: 28px; margin-bottom: 6px; }
.av-faq details { border-bottom: 1px solid var(--line); padding: 14px 0; }
.av-faq summary { cursor: pointer; font-size: 18px; color: var(--text); }
.av-faq details p { color: var(--dim); }
.crumbs { font-size: 14px; color: var(--mute); padding-top: 20px; }
.crumbs a { color: var(--dim); text-decoration: none; }

/* ---------- калькулятор матрицы ---------- */
.mx-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; padding: 20px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line); }
.mx-form label { display: grid; gap: 6px; font-size: 14px; color: var(--dim); }
.mx-form input { font: inherit; font-size: 18px; color: var(--text); background: #0b1236; border: 1px solid #333c80;
  border-radius: 12px; padding: 11px 14px; min-height: 48px; width: 190px; }
.mx-form input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.mx-form .hint { flex-basis: 100%; margin: 0; font-size: 13.5px; color: var(--mute); }
.mx-error { color: var(--bad); min-height: 1.4em; margin: 8px 2px; }
.mx-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 24px; margin-top: 22px; }
.mx-layout[hidden] { display: none; }
.mx-svg-wrap { border-radius: var(--radius); background: radial-gradient(circle at 50% 45%, rgba(91,63,208,.28), rgba(10,16,48,.9) 70%);
  border: 1px solid var(--line); padding: 10px; }
.mx-svg { width: 100%; height: auto; display: block; touch-action: manipulation; }
.mx-svg .sq { fill: none; stroke: var(--gold); stroke-width: 1.2; }
.mx-svg .sq2 { fill: none; stroke: #6b6fd0; stroke-width: 1; }
.mx-svg .ax { stroke: #3c4392; stroke-width: .8; }
.mx-svg .male { stroke: var(--male); stroke-width: 1; }
.mx-svg .female { stroke: var(--female); stroke-width: 1; }
.mx-svg .money { stroke: var(--money); stroke-width: 2.2; }
.mx-svg .love { stroke: var(--love); stroke-width: 2.2; }
.mx-svg .per { fill: none; stroke: #2a3270; stroke-width: .7; }
.mx-svg .pt circle { fill: #141c56; stroke: #6b6fd0; stroke-width: 1; transition: stroke .15s, fill .15s; }
.mx-svg .pt.anchor circle { stroke: var(--gold); stroke-width: 1.4; fill: #1c2470; }
.mx-svg .pt.center circle { fill: #5b3fd0; stroke: var(--gold); stroke-width: 1.6; }
.mx-svg .pt.money circle { stroke: var(--money); }
.mx-svg .pt.love circle { stroke: var(--love); }
.mx-svg .pt text { fill: var(--text); font: 600 13px system-ui, sans-serif; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.mx-svg .pt.anchor text, .mx-svg .pt.center text { font-size: 17px; }
.mx-svg .pt { cursor: pointer; outline: none; }
.mx-svg .pt:hover circle, .mx-svg .pt:focus circle, .mx-svg .pt.on circle { stroke: var(--gold2); stroke-width: 2.4; fill: #2c2a8a; }
.mx-svg .age text { fill: var(--mute); font: 9.5px system-ui, sans-serif; text-anchor: middle; dominant-baseline: central; }
.mx-svg .age { cursor: pointer; }
.mx-svg .age.on text, .mx-svg .age:hover text { fill: var(--gold2); font-weight: 700; }
.mx-svg .age.now circle { fill: rgba(226,187,95,.25); stroke: var(--gold); }
.mx-svg .age circle { fill: transparent; stroke: none; }
.mx-svg .yr { fill: var(--gold); font: 600 11px system-ui, sans-serif; text-anchor: middle; dominant-baseline: central; }
.mx-svg.dim .pt:not(.hl) { opacity: .35; }
.mx-side { display: grid; gap: 14px; align-content: start; }
.mx-detail { padding: 20px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); min-height: 160px; }
.mx-detail h3 { color: var(--gold2); font-size: 20px; margin-bottom: 6px; }
.mx-detail .kw { color: var(--accent); font-size: 14px; margin: 0 0 8px; }
.mx-detail p { margin: 6px 0; color: var(--dim); }
.mx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mx-chips button { font: inherit; font-size: 14px; color: var(--text); background: #121a52; border: 1px solid #333c80;
  border-radius: 999px; padding: 8px 14px; cursor: pointer; min-height: 40px; }
.mx-chips button[aria-pressed="true"] { border-color: var(--gold); color: var(--gold2); background: #1d2470; }
.mx-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mx-summary div { padding: 12px 14px; border-radius: 14px; background: #0d1440; border: 1px solid #262e70; }
.mx-summary b { display: block; font-family: var(--serif); font-size: 22px; color: var(--gold2); }
.mx-summary small { color: var(--mute); font-size: 13px; }
.mx-ages { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; font-size: 13px; }
.mx-ages div { text-align: center; padding: 6px 2px; border-radius: 8px; background: #0d1440; color: var(--dim); cursor: pointer; }
.mx-ages div.now { background: #3a2f99; color: var(--gold2); font-weight: 700; }
.mx-ages div.head { background: none; color: var(--mute); cursor: default; font-size: 11px; }
.mx-cta { padding: 20px; border-radius: var(--radius); background: linear-gradient(120deg, rgba(226,187,95,.16), rgba(91,63,208,.28)); border: 1px solid var(--gold3); }
.mx-cta h3 { color: var(--gold2); }
.mx-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--dim); padding: 6px 8px 2px; }
.mx-legend i { display: inline-block; width: 18px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
.mx-legend .m { background: var(--money); } .mx-legend .l { background: var(--love); }
.mx-legend .f { background: var(--male); } .mx-legend .w { background: var(--female); }
.arc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.arc-grid a { display: grid; gap: 4px; padding: 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); text-decoration: none; color: var(--text); }
.arc-grid a b { font-family: var(--serif); font-size: 26px; color: var(--gold2); }
.arc-grid a:hover { border-color: var(--gold); }
.selftest { font-family: ui-monospace, Consolas, monospace; white-space: pre-wrap; }

@media (max-width: 980px) {
  .av-hero, .av-split, .mx-layout { grid-template-columns: 1fr; }
  .av-hero { padding-top: 32px; }
  .av-orbit { max-width: 340px; order: -1; }
  .av-grid, .av-grid.four { grid-template-columns: repeat(2, 1fr); }
  .av-steps { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .av-grid, .av-grid.four { grid-template-columns: 1fr; }
  .av-anastasia { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .mx-form input { width: 100%; }
  .mx-form label { flex: 1 1 100%; }
  .mx-form .btn { width: 100%; }
  .mx-ages { grid-template-columns: repeat(4, 1fr); }
  .mx-svg .pt text { font-size: 15px; }
  .mx-svg .age text { font-size: 15px; }
  .mx-svg .yr { font-size: 16px; }
  .av-orbit { max-width: 260px; }
}