:root{
    --bg:#241333; --bg2:#140d2b; --card:rgba(255,255,255,.05);
    --ink:#f0e9f7; --muted:#b4a3cc; --line:rgba(255,255,255,.1);
    --gold:#f0cf8a; --lilac:#c9a2f0; --rose:#ef8fb3; --teal:#6fd8d0; --radius:22px;
  }
  *{box-sizing:border-box}
  body{margin:0;color:var(--ink);min-height:100vh;overflow-x:hidden;
    background:
      radial-gradient(760px 760px at 50% 32%, rgba(126,72,168,.34) 0%, transparent 64%),
      radial-gradient(1000px 700px at 88% 4%, #4a1f5e 0%, transparent 60%),
      radial-gradient(900px 700px at 4% 82%, #1d2f6b 0%, transparent 60%),
      linear-gradient(165deg, var(--bg) 0%, var(--bg2) 62%, #0f0a20 100%);
    background-attachment:fixed;
    font:16px/1.6 "Georgia","Times New Roman",serif;-webkit-font-smoothing:antialiased}

  /* Все фоновые слои живут внутри обрезающей обёртки: элементы с position:fixed
     не обрезаются overflow-x у body и распирают страницу вбок на узких экранах. */
  .bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
  #sky{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
  /* сеть созвездий: живёт выше звёзд, но ниже содержимого */
  #net{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
    will-change:transform}
  #net g{transition:opacity .4s}
  #sky circle{animation-name:twinkle;animation-iteration-count:infinite;animation-timing-function:ease-in-out}
  @keyframes twinkle{0%,100%{opacity:.15}50%{opacity:1}}

  .wrap{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:44px 20px 80px}

  header{text-align:center;margin-bottom:34px}
  .brand{font-size:13px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold)}
  h1{font-size:40px;font-weight:400;margin:14px 0 10px;letter-spacing:-.01em;
    background:linear-gradient(100deg,#fff 10%,#d9b6ff 55%,#f0cf8a);
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .lead{color:var(--muted);max-width:560px;margin:0 auto;font-size:17px}

  .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
    padding:24px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .form{display:flex;gap:12px;align-items:flex-end;justify-content:center;flex-wrap:wrap;
    max-width:660px;margin:30px auto 0;padding:22px}
  .field{display:flex;flex-direction:column;gap:6px}
  .field label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  select{font:inherit;padding:11px 14px;border:1px solid var(--line);border-radius:11px;
    background:rgba(8,6,22,.55);color:var(--ink);min-width:112px}
  select:focus{outline:2px solid var(--lilac);outline-offset:1px}
  option{background:#241333;color:var(--ink)}
  button{font:inherit;padding:12px 32px;border:0;border-radius:11px;cursor:pointer;letter-spacing:.05em;
    background:linear-gradient(100deg,#a06ae0,#f0cf8a);color:#180f28;
    box-shadow:0 6px 26px rgba(180,120,240,.4);transition:transform .15s,box-shadow .15s}
  button:hover{transform:translateY(-1px);box-shadow:0 12px 34px rgba(180,120,240,.55)}

  .grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:24px;margin-top:32px}
  @media (max-width:900px){.grid{grid-template-columns:minmax(0,1fr)}}
  .card h2{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
    font-weight:400;margin:0 0 18px}

  /* --- сцена с планетами вокруг матрицы --- */
  .o1 i{background:radial-gradient(circle at 32% 30%,#ffe6a8,#d8a24a);box-shadow:0 0 18px rgba(240,200,120,.75)}
  .o2 i{width:10px;height:10px;margin-left:-5px;background:radial-gradient(circle at 32% 30%,#bff2ee,#4aa9a2);
    box-shadow:0 0 16px rgba(110,216,208,.7)}
  .o3 i{width:18px;height:18px;margin-left:-9px;background:radial-gradient(circle at 30% 28%,#e6bcff,#8a52c9);
    box-shadow:0 0 22px rgba(190,130,250,.7)}

  /* кликабельные числа и панель расшифровки */
  .pick{cursor:pointer}
  svg .pick circle{transition:filter .2s}
  svg .pick:hover circle{filter:brightness(1.25)}
  .bead.pick:hover{border-color:var(--gold);color:var(--gold)}
  #detail h3{margin:14px 0 8px;font-size:21px;font-weight:400;color:var(--gold)}
  #detail p{margin:0;color:var(--ink);line-height:1.7}
  #detail .wait{color:var(--muted)}

  .purpose{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  @media (max-width:520px){.purpose{grid-template-columns:1fr}}
  .blk h3{margin:0 0 4px;font-size:19px;font-weight:400;color:var(--lilac)}
  .blk p{margin:0 0 12px;font-size:13px;color:var(--muted);line-height:1.45}
  .pair{display:flex;align-items:center;gap:12px}
  .pair .rows{display:flex;flex-direction:column;gap:7px}
  .pair .r{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--muted)}
  .brace{font-size:44px;color:var(--line);line-height:.8;font-weight:300}
  .bead{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:16px;
    background:rgba(255,255,255,.06);border:1.5px solid var(--lilac);color:#fff}
  .bead.sm{width:32px;height:32px;font-size:14px;border-color:var(--line);color:var(--ink)}
  .bead.gold{border-color:var(--gold);color:var(--gold);border-width:2px;
    box-shadow:0 0 20px rgba(240,207,138,.35);animation:pulse 4.5s ease-in-out infinite}
  @keyframes pulse{0%,100%{box-shadow:0 0 14px rgba(240,207,138,.25)}
                   50%{box-shadow:0 0 26px rgba(240,207,138,.55)}}

  .totals{display:flex;gap:26px;flex-wrap:wrap;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
  .totals .t{display:flex;align-items:center;gap:10px}
  .totals span{font-size:13px;color:var(--muted)}

  table{width:100%;border-collapse:collapse;font-size:14px}
  th,td{padding:9px 8px;text-align:center}
  th{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
    font-weight:400;border-bottom:1px solid var(--line)}
  td:first-child,th:first-child{text-align:left}
  tbody tr+tr td{border-top:1px solid rgba(255,255,255,.055)}
  tbody tr{transition:background .2s}
  tbody tr:hover{background:rgba(255,255,255,.055)}
  tfoot td{border-top:1.5px solid var(--line);color:var(--gold)}
  .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:9px;vertical-align:middle}
  .err{color:var(--rose);text-align:center;margin-top:14px}
  .hint{text-align:center;color:var(--muted);font-size:13px;margin-top:28px}
  .tip{text-align:center;color:var(--muted);font-size:13px;margin:16px 0 0}


  /* --- Млечный Путь --- */
  .milky{position:absolute;left:-25%;right:-25%;bottom:-6%;height:54vh;
    pointer-events:none;transform:rotate(-9deg)}
  .milky .haze{position:absolute;inset:0;filter:blur(40px);opacity:.55;
    background:
      radial-gradient(58% 44% at 50% 50%, rgba(226,214,255,.50) 0%, transparent 70%),
      radial-gradient(40% 30% at 24% 58%, rgba(158,190,255,.42) 0%, transparent 72%),
      radial-gradient(36% 28% at 76% 44%, rgba(255,206,172,.30) 0%, transparent 72%)}
  .milky .rift{position:absolute;inset:0;filter:blur(28px);opacity:.55;
    background:radial-gradient(54% 11% at 46% 55%, rgba(16,8,34,.9) 0%, transparent 74%)}
  .milky svg{position:absolute;inset:0;width:100%;height:100%}
  .milky svg circle{animation-name:twinkle;animation-iteration-count:infinite;
    animation-timing-function:ease-in-out}

  /* --- комета --- */
  .comet{position:fixed;z-index:0;width:150px;height:2px;border-radius:2px;pointer-events:none;
    background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.9));
    filter:drop-shadow(0 0 6px rgba(200,220,255,.85))}
  .comet::after{content:"";position:absolute;right:-2px;top:-2px;width:6px;height:6px;
    border-radius:50%;background:#fff;box-shadow:0 0 12px 3px rgba(200,220,255,.9)}

  /* --- орбиты планет --- */
  .scene{position:relative;aspect-ratio:1;display:grid;place-items:center}
  .orbit{position:absolute;inset:0;margin:auto;border-radius:50%;
    border:1px solid rgba(255,255,255,.075);animation:spin linear infinite}
  .orbit i{position:absolute;top:-7px;left:50%;width:14px;height:14px;
    margin-left:-7px;border-radius:50%;display:block}
  .o1{width:86%;height:86%;animation-duration:58s}
  .o2{width:94%;height:94%;animation-duration:96s;animation-direction:reverse}
  .o3{width:100%;height:100%;animation-duration:148s}
  @keyframes spin{to{transform:rotate(360deg)}}
  svg#chart{position:relative;z-index:2;width:84%;height:auto;display:block}

  @media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* ================= Лендинг ================= */

.hero{position:relative;min-height:82vh;display:grid;align-items:center;
  margin:-44px -20px 0;padding:80px 20px 70px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:url('./img/fon-shapka.jpg') center/cover no-repeat;
  transform:scale(1.04);animation:heroDrift 40s ease-in-out infinite alternate}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg, rgba(20,13,43,.94) 0%, rgba(20,13,43,.72) 42%,
                                     rgba(20,13,43,.32) 70%, rgba(20,13,43,.55) 100%)}
@keyframes heroDrift{to{transform:scale(1.1) translate(-1.5%,-1%)}}
.hero-in{max-width:660px;margin:0 auto 0 max(0px,calc(50% - 590px + 20px))}
.hero h1{font-size:clamp(34px,5.4vw,56px);line-height:1.1;margin:16px 0 18px}
.hero .lead{margin:0 0 30px;font-size:clamp(17px,2vw,20px);max-width:34em}
.cta{display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font:inherit;padding:15px 34px;border-radius:12px;letter-spacing:.04em;
  background:linear-gradient(100deg,#a06ae0,#f0cf8a);color:#180f28;
  box-shadow:0 8px 30px rgba(180,120,240,.45);transition:transform .15s,box-shadow .15s}
.cta:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(180,120,240,.6)}
.hero .under{margin:16px 0 0;font-size:14px;color:var(--muted)}

section.block{margin:78px 0}
section.block > h2{font-size:clamp(25px,3.4vw,34px);font-weight:400;text-align:center;
  margin:0 0 14px;color:var(--ink);letter-spacing:-.01em}
section.block > .sub{text-align:center;color:var(--muted);max-width:620px;margin:0 auto 34px}

.three{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:820px){.three{grid-template-columns:1fr}}
.three .card{padding:28px 24px}
.three h3{margin:0 0 10px;font-size:20px;font-weight:400;color:var(--lilac)}
.three p{margin:0;color:var(--muted);font-size:15px;line-height:1.65}
.num{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--gold);color:var(--gold);font-size:16px;margin-bottom:14px}

.banded{position:relative;margin:78px -20px;padding:74px 20px;overflow:hidden}
.banded::before{content:"";position:absolute;inset:0;z-index:-2;
  background:url('./img/fon-razdel-mlechnyy.jpg') center/cover no-repeat}
.banded::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(20,13,43,.97),rgba(20,13,43,.78) 45%,rgba(20,13,43,.97))}
.banded .inner{max-width:1140px;margin:0 auto}

.locked{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:820px){.locked{grid-template-columns:1fr}}
.locked .card{position:relative;padding:26px 24px}
.locked h3{margin:0 0 8px;font-size:19px;font-weight:400;color:var(--ink)}
.locked p{margin:0;color:var(--muted);font-size:15px}
.locked .lock{position:absolute;top:22px;right:22px;font-size:15px;opacity:.5}
.soon{display:inline-block;margin-top:14px;padding:5px 12px;border-radius:20px;
  border:1px solid var(--line);color:var(--gold);font-size:12px;letter-spacing:.1em;text-transform:uppercase}

.mail{max-width:600px;margin:0 auto;text-align:center;padding:34px 26px}
.mail form{display:flex;gap:10px;margin-top:20px}
.mail form[hidden]{display:none}   /* иначе display:flex выше перебивает скрытие */
@media (max-width:520px){.mail form{flex-direction:column}}
.mail input{flex:1;font:inherit;padding:13px 16px;border-radius:11px;
  border:1px solid var(--line);background:rgba(8,6,22,.55);color:var(--ink)}
.mail input:focus{outline:2px solid var(--lilac);outline-offset:1px}
.mail .note{margin:14px 0 0;font-size:13px;color:var(--muted)}
.mail .done{margin:16px 0 0;color:var(--gold)}
/* галочка согласия: на всю ширину под полем; сброс, иначе .mail input растянет её как поле */
.mail form{flex-wrap:wrap}
.mail .soglasie{flex-basis:100%;display:flex;gap:8px;align-items:flex-start;justify-content:center;
  font-size:13px;line-height:1.5;color:var(--muted);text-align:left;cursor:pointer}
.mail .soglasie input{all:revert;margin:3px 0 0;flex:none;accent-color:#c9a2f0}
.mail .soglasie a{color:var(--gold);text-decoration:none}

/* --- закрытая позиция: переход к оплате разбора --- */
.razbor-forma{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.razbor-forma input{flex:1;min-width:220px;font:inherit;padding:12px 14px;border:1px solid var(--line);
  border-radius:11px;background:rgba(8,6,22,.55);color:var(--ink)}
.razbor-forma input:focus{outline:2px solid var(--lilac);outline-offset:1px}
.razbor-forma button:disabled{opacity:.6;cursor:wait}
.razbor-note{font-size:13px;color:var(--muted);margin:12px 0 0}
.razbor-note a{color:var(--gold);text-decoration:none}
.razbor-otvet{color:var(--rose);margin:12px 0 0}
/* ссылка на открытый разбор: крупно и с кнопкой — писем пока нет */
.ssylka-podpis{margin:18px 0 0}
.ssylka-razbor{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.ssylka-razbor input{flex:1;min-width:220px;font:inherit;font-size:15px;padding:12px 14px;border:1px solid var(--gold);
  border-radius:11px;background:rgba(8,6,22,.55);color:var(--gold)}
@media (max-width:520px){.ssylka-razbor{flex-direction:column}.ssylka-razbor input{min-width:0}}
@media (max-width:520px){.razbor-forma{flex-direction:column}.razbor-forma input{min-width:0}}

footer{text-align:center;color:var(--muted);font-size:13px;padding:60px 0 10px;
  border-top:1px solid var(--line);margin-top:70px}
footer a{color:var(--lilac)}


/* ================= Телефон ================= */
@media (max-width:700px){
  /* Орбиты съедают место, из-за них числа матрицы становятся нечитаемыми */
  .orbit{display:none}
  svg#chart{width:100%}
  .card{padding:20px 16px}
  .wrap{padding:28px 16px 56px}
  .hero{margin:-28px -16px 0;padding:64px 16px 54px;min-height:auto}
  /* На узком экране картинка обрезается, и косое затемнение перестаёт защищать
     текст. Переводим его в вертикальное — тогда светлая часть уходит вниз. */
  .hero::after{background:linear-gradient(180deg,
    rgba(20,13,43,.93) 0%, rgba(20,13,43,.80) 45%, rgba(20,13,43,.92) 100%)}
  .hero::before{animation:none}
  .banded{margin:56px -16px;padding:56px 16px}
  section.block{margin:56px 0}
  /* Дата в одну колонку: три узких выпадающих списка в ряд не помещаются */
  .form{flex-direction:column;align-items:stretch}
  .field select{width:100%}
  .form button{width:100%}
  /* Таблица чакр шире экрана — пусть прокручивается внутри себя, а не тянет страницу */
  .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;min-width:0}
  .card{min-width:0}
  table{min-width:340px}
  th,td{padding:8px 6px}
  th{font-size:10px;letter-spacing:.08em}
  td:first-child,th:first-child{white-space:nowrap}
}

/* ================= Страница «О системе» ================= */

.topnav{display:flex;gap:22px;justify-content:center;align-items:center;
  padding:22px 0 0;font-size:14px;letter-spacing:.06em}
.topnav a{color:var(--muted);text-decoration:none;transition:color .15s}
.topnav a:hover,.topnav a[aria-current]{color:var(--gold)}

.prose{max-width:720px;margin:0 auto}
.prose p{color:var(--ink);line-height:1.75;margin:0 0 18px;font-size:17px}
.prose p.dim{color:var(--muted)}
.prose h3{font-size:22px;font-weight:400;color:var(--lilac);margin:38px 0 12px}
.prose ul{margin:0 0 18px;padding-left:22px;color:var(--ink);line-height:1.75}
.prose li{margin-bottom:8px}
.prose li b{color:var(--gold);font-weight:400}

.steps{counter-reset:s;max-width:720px;margin:0 auto}
.steps .step{position:relative;padding:0 0 26px 58px;border-left:1px solid var(--line);
  margin-left:19px}
.steps .step:last-child{border-left-color:transparent;padding-bottom:0}
.steps .step::before{counter-increment:s;content:counter(s);position:absolute;
  left:-19px;top:-4px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(20,13,43,.95);border:1px solid var(--gold);color:var(--gold);font-size:15px}
.steps h4{margin:2px 0 8px;font-size:18px;font-weight:400;color:var(--ink)}
.steps p{margin:0;color:var(--muted);line-height:1.7}
.steps code{font:15px/1.5 "Consolas",monospace;color:var(--gold);
  background:rgba(255,255,255,.05);padding:2px 7px;border-radius:6px}

.arcana{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px}
.arcana div{display:flex;gap:11px;align-items:baseline;padding:11px 14px;
  border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.035)}
.arcana b{color:var(--gold);font-weight:400;min-width:22px;text-align:right}
.arcana span{color:var(--muted);font-size:15px}

.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{cursor:pointer;font-size:17px;color:var(--ink);list-style:none;
  display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-size:20px;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq p{margin:14px 0 0;color:var(--muted);line-height:1.7}

.honest{border-left:2px solid var(--gold);padding:4px 0 4px 20px;margin:0 auto 22px;max-width:720px}
.honest p{margin:0 0 12px}
.honest p:last-child{margin:0}

/* клетки карты здоровья кликаются так же, как числа матрицы */
td.pick{transition:background .15s, color .15s}
td.pick:hover{background:rgba(255,255,255,.09);color:var(--gold)}

/* ================= Калькулятор Дизайна Человека ================= */
.form-dh{max-width:880px}
/* атрибут hidden иначе перебивается display:flex у .field */
.form-dh .field[hidden]{display:none}
.form-dh input[type=text]{font:inherit;padding:11px 14px;border:1px solid var(--line);border-radius:11px;
  background:rgba(8,6,22,.55);color:var(--ink);min-width:220px}
.form-dh input[type=text]:focus{outline:2px solid var(--lilac);outline-offset:1px}
.form-dh select:disabled{opacity:.45}
.form-dh .check{flex-direction:row;align-items:center;gap:8px;flex-basis:100%;justify-content:center;
  color:var(--muted);font-size:14px;cursor:pointer}
.dh-tip{font-size:clamp(28px,4vw,40px);font-weight:400;margin:0 0 6px;color:var(--gold)}
.dh-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px;margin-top:22px}
.dh-fact .n{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.dh-fact .v{font-size:20px;color:var(--ink);margin:4px 0 2px}
.dh-fact .o{font-size:13px;color:var(--muted)}
.dh-list{list-style:none;margin:0;padding:0}
.dh-list li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid rgba(255,255,255,.055)}
.dh-list li:first-child{border-top:0}
.dh-list .on{color:var(--gold)}
.dh-list .off{color:var(--muted)}
.dh-note{color:var(--muted);font-size:14px;margin:14px 0 0;line-height:1.6}
.dh-warn{color:var(--rose)}
@media (max-width:700px){
  .form-dh input[type=text]{width:100%;min-width:0}
  .form-dh .check{justify-content:flex-start}
}

/* --- бодиграф --- */
.bodigraf{display:block;width:100%;max-width:400px;margin:0 auto}
.bodigraf line{stroke-width:6;stroke-linecap:round}
.bodigraf .bg-fon{stroke:rgba(255,255,255,.09)}
.bodigraf .bg-l{stroke:#f0e9f7}
.bodigraf .bg-d{stroke:#ef6f8f}
.bodigraf .bg-dd{stroke:#ef6f8f;stroke-dasharray:5 5;stroke-linecap:butt}
.bodigraf .centr{fill:#1c1233;stroke:rgba(255,255,255,.32);stroke-width:1.5}
.bodigraf .centr.on{fill:var(--gold);stroke:var(--gold)}
.bodigraf .vr-krug{fill:#f0e9f7}
.bodigraf .vr-d{fill:#ef6f8f}
.bodigraf .vr{font-size:9px;text-anchor:middle;dominant-baseline:central;fill:rgba(255,255,255,.4);pointer-events:none}
.bodigraf .vr.na-zolote{fill:rgba(24,15,40,.55)}
.bodigraf .vr.akt{fill:#180f28;font-weight:600}
.leg{display:inline-block;width:18px;height:6px;border-radius:3px;vertical-align:middle;margin-right:4px}
.leg-l{background:#f0e9f7}
.leg-d{background:#ef6f8f}
.leg-ld{background:repeating-linear-gradient(90deg,#f0e9f7 0 5px,#ef6f8f 5px 10px)}