/* ============ АСТЕРИЯ — дизайн-система (светлая / тёмная тема) ============ */
/* Цветовые токены живут в темах ниже. :root = светлая тема (по умолчанию).   */

:root{
  /* --- нецветовые токены (общие) --- */
  --serif:'Playfair Display', Georgia, 'Times New Roman', serif;
  --script:'Cormorant Garamond', Georgia, serif;
  --sans:'Manrope', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --maxw:1160px;
  --r:16px;

  /* --- СВЕТЛАЯ ТЕМА (золотой храм при свете дня) --- */
  color-scheme:light;
  --bg:#f3ead8; --bg-soft:#f7f0e2;
  --panel:#fcf8ef; --panel-2:#f8f1e4; --panel-hi:#f2e9d5;
  --card:rgba(250,244,231,.62); --card-strong:rgba(252,247,238,.85);
  --input-bg:rgba(255,253,247,.9); --input-bg-focus:#fffdf7;
  --loading-bg:rgba(247,240,226,.9);
  --ink:#3a2e18; --ink-soft:#5c4d31; --muted:#9a8a6c;
  --gold:#a97717; --gold-bright:#c99a34; --gold-deep:#855c10;
  --gold-wash:rgba(169,119,23,.10); --gold-wash-2:rgba(169,119,23,.17);
  --line:rgba(169,119,23,.28); --line-soft:rgba(120,90,20,.14);
  --shadow:rgba(120,95,40,.28); --shadow-soft:rgba(120,95,40,.16);
  --sel-bg:rgba(169,119,23,.22); --sel-fg:#3a2e18;
  --red:#b0492f; --blue:#3f6bb0;
  --ghost-bg:rgba(255,255,255,.35); --ghost-hover:rgba(169,119,23,.09);
  --placeholder:#b3a689;
  --body-bg:
    radial-gradient(1100px 640px at 78% -10%, #fbf3df 0%, rgba(251,243,223,0) 62%),
    radial-gradient(900px 700px at 8% 8%, #fdf8ec 0%, rgba(253,248,236,0) 58%),
    radial-gradient(760px 620px at 50% 112%, #f5ebd3 0%, rgba(245,235,211,0) 60%),
    linear-gradient(180deg, #f5eddb 0%, #efe6d0 100%);
  --nebula-bg:
    radial-gradient(620px 520px at 84% 10%, rgba(201,154,52,.16), transparent 70%),
    radial-gradient(680px 560px at 12% 72%, rgba(201,154,52,.10), transparent 70%);
  --alt-bg:linear-gradient(180deg, rgba(237,226,201,.60), rgba(247,239,224,.34));
  --nav-bg:linear-gradient(180deg, rgba(247,240,226,.9), rgba(247,240,226,.48));
  --order-bg:linear-gradient(180deg, rgba(238,227,203,.5), rgba(247,240,226,.22));
  --footer-bg:linear-gradient(180deg, transparent, rgba(237,226,201,.5));
  --hero-img:url('images/opt/hero-light.jpg');
  --hero-veil:radial-gradient(ellipse 92% 74% at 50% 44%, rgba(247,240,226,.74), rgba(247,240,226,.34) 46%, rgba(243,234,216,.06) 78%);
  --hero-text-glow:0 1px 20px rgba(247,240,226,.92), 0 0 3px rgba(247,240,226,.7);
  --how-img:url('images/opt/stair-light.jpg');
  --how-veil:linear-gradient(180deg, rgba(243,234,216,.92) 0%, rgba(243,234,216,.50) 42%, rgba(243,234,216,.93) 100%);
  --appro-img:none;
  --appro-veil:none;
}

/* --- ТЁМНАЯ ТЕМА (золотой храм ночью) --- */
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0a0e1f; --bg-soft:#0c1124;
  --panel:#121834; --panel-2:#161d40; --panel-hi:#1c2550;
  --card:rgba(18,24,52,.42); --card-strong:rgba(20,27,60,.6);
  --input-bg:rgba(6,9,20,.6); --input-bg-focus:rgba(6,9,20,.86);
  --loading-bg:rgba(8,11,24,.86);
  --ink:#f0eadd; --ink-soft:#cfc9b8; --muted:#918c7d;
  --gold:#d9b45b; --gold-bright:#f0d089; --gold-deep:#b18f3c;
  --gold-wash:rgba(217,180,91,.12); --gold-wash-2:rgba(217,180,91,.20);
  --line:rgba(217,180,91,.22); --line-soft:rgba(255,255,255,.08);
  --shadow:rgba(0,0,0,.9); --shadow-soft:rgba(0,0,0,.6);
  --sel-bg:rgba(217,180,91,.3); --sel-fg:#fff;
  --red:#e78b83; --blue:#7ea8ff;
  --ghost-bg:rgba(255,255,255,.02); --ghost-hover:rgba(217,180,91,.07);
  --placeholder:#5f5c52;
  --body-bg:
    radial-gradient(1200px 700px at 78% -8%, #16204a 0%, rgba(22,32,74,0) 60%),
    radial-gradient(900px 700px at 6% 12%, #12183a 0%, rgba(18,24,58,0) 55%),
    linear-gradient(180deg, #0a0e1f 0%, #05070f 100%);
  --nebula-bg:
    radial-gradient(600px 500px at 85% 8%, rgba(217,180,91,.10), transparent 70%),
    radial-gradient(700px 600px at 10% 70%, rgba(126,168,255,.06), transparent 70%);
  --alt-bg:linear-gradient(180deg, rgba(16,22,50,.55), rgba(10,14,34,.25));
  --nav-bg:linear-gradient(180deg, rgba(7,10,22,.82), rgba(7,10,22,.35));
  --order-bg:linear-gradient(180deg, rgba(15,20,48,.4), rgba(8,11,24,.2));
  --footer-bg:linear-gradient(180deg, transparent, rgba(10,14,34,.5));
  --hero-img:url('images/opt/hero-dark.jpg');
  --hero-veil:radial-gradient(ellipse 92% 74% at 50% 44%, rgba(9,13,28,.72), rgba(9,13,28,.44) 46%, rgba(9,13,28,.12) 80%);
  --hero-text-glow:0 1px 22px rgba(9,13,28,.9), 0 0 4px rgba(9,13,28,.8);
  --how-img:url('images/opt/stair-dark.jpg');
  --how-veil:linear-gradient(180deg, rgba(10,14,31,.88) 0%, rgba(10,14,31,.50) 42%, rgba(10,14,31,.9) 100%);
  --appro-img:url('images/opt/cavern-dark.jpg');
  --appro-veil:linear-gradient(180deg, rgba(10,14,31,.82) 0%, rgba(10,14,31,.58) 45%, rgba(10,14,31,.93) 100%);
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth; overflow-x:clip}
body{
  margin:0; font-family:var(--sans); color:var(--ink);
  background:var(--body-bg); background-attachment:fixed;
  -webkit-font-smoothing:antialiased; line-height:1.6; overflow-x:hidden;
  transition:background .5s ease, color .4s ease;
}
#stars{position:fixed; inset:0; width:100%; height:100%; z-index:-2; display:block}
.nebula{position:fixed; inset:0; z-index:-1; pointer-events:none; background:var(--nebula-bg)}
img{max-width:100%}
a{color:inherit; text-decoration:none}
::selection{background:var(--sel-bg); color:var(--sel-fg)}

/* ---------- типографика / утилиты ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px; width:100%}
.narrow{max-width:760px}
.center{text-align:center}
.eyebrow{font-size:12px; letter-spacing:.32em; text-transform:uppercase; color:var(--gold);
  font-weight:600; margin:0 0 14px}
.h2{font-family:var(--serif); font-weight:600; color:var(--ink);
  font-size:clamp(28px,4.4vw,44px); line-height:1.12; margin:0}
.rule{width:64px; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent);
  margin:20px auto 0; position:relative}
.center .rule{margin-left:auto;margin-right:auto}
.rule::after{content:"✦"; position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  color:var(--gold); font-size:12px; background:transparent}
.lede{font-family:var(--script); font-size:clamp(19px,2.4vw,24px); line-height:1.55;
  color:var(--ink-soft); margin:22px auto 0; max-width:640px; font-weight:400}
.section{padding:96px 0; position:relative}
.section.alt{background:var(--alt-bg);
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft)}

/* ---------- кнопки ---------- */
.btn{display:inline-flex; align-items:center; gap:.5em; justify-content:center;
  font-family:var(--sans); font-weight:600; font-size:15px; letter-spacing:.02em;
  padding:14px 28px; border-radius:100px; cursor:pointer; border:1px solid transparent;
  transition:transform .2s ease, box-shadow .3s ease, background .3s; text-align:center}
.btn-gold{background:linear-gradient(135deg,var(--gold-bright),var(--gold) 55%,var(--gold-deep));
  color:#231a06; box-shadow:0 10px 30px -10px var(--gold-wash-2), inset 0 1px 0 rgba(255,255,255,.4)}
.btn-gold:hover{transform:translateY(-2px); box-shadow:0 16px 40px -12px var(--gold-wash-2)}
.btn-ghost{background:var(--ghost-bg); color:var(--ink); border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--gold); background:var(--ghost-hover)}
.btn-big{padding:17px 34px; font-size:16px; width:100%}

/* ---------- шапка ---------- */
.nav{position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px; backdrop-filter:blur(12px); background:var(--nav-bg);
  border-bottom:1px solid var(--line-soft)}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--serif); font-weight:600; font-size:20px}
.brand-mark{color:var(--gold)}
.brand-name{letter-spacing:.22em; font-size:16px; font-family:var(--sans); font-weight:600}
.nav-links{display:flex; align-items:center; gap:28px; font-size:14.5px; font-weight:500; color:var(--ink-soft)}
.nav-links a{transition:color .2s}
.nav-links a:hover{color:var(--gold)}
.nav-cta{padding:9px 20px; border:1px solid var(--line); border-radius:100px; color:var(--gold)!important}
.nav-cta:hover{background:var(--gold-wash)}
.burger{display:none; background:none; border:none; color:var(--gold); font-size:22px; cursor:pointer}
.nav-right{display:flex; align-items:center; gap:12px}
.lang-switch{display:inline-flex; border:1px solid var(--line); border-radius:100px; overflow:hidden}
.lang-btn{background:transparent; border:none; color:var(--muted); font-family:var(--sans); font-weight:600; font-size:12px; letter-spacing:.05em; padding:7px 11px; cursor:pointer; transition:.2s}
.lang-btn:hover{color:var(--gold)}
.lang-btn.active{background:var(--gold-wash-2); color:var(--gold)}
.theme-toggle{display:inline-grid; place-items:center; width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line); background:var(--gold-wash); color:var(--gold); cursor:pointer;
  font-size:17px; line-height:1; transition:.25s; padding:0}
.theme-toggle:hover{background:var(--gold-wash-2); transform:rotate(-12deg)}

/* ---------- герой ---------- */
.hero{position:relative; min-height:94vh; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:80px 24px 60px; overflow:hidden}
/* Фоновое изображение «золотого храма» (меняется вместе с темой) */
.hero::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:var(--hero-img) center 32% / cover no-repeat;}
/* Вуаль для читаемости текста + мягкое растворение в фоне страницы снизу */
.hero::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:var(--hero-veil), linear-gradient(180deg, transparent 58%, var(--bg) 99%);}
.hero-ring,.hero-crescent{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-inner{position:relative; z-index:2; max-width:760px; text-shadow:var(--hero-text-glow)}
.hero-title{font-family:var(--serif); font-weight:600; font-size:clamp(38px,7vw,74px); line-height:1.06;
  margin:6px 0 0; letter-spacing:-.01em}
.hero-title em{font-family:var(--script); font-style:italic; font-weight:500;
  color:transparent; background:linear-gradient(120deg,var(--gold-bright),var(--gold) 60%,var(--gold-deep));
  -webkit-background-clip:text; background-clip:text; display:inline-block}
.hero-sub{font-size:clamp(16px,2vw,19px); color:var(--ink-soft); max-width:620px; margin:26px auto 0}
.hero-cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin:34px 0 20px}
.hero-trust{font-size:13px; color:var(--muted); letter-spacing:.02em}
.scroll-hint{position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  color:var(--gold); font-size:26px; opacity:.7; animation:bob 2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}

/* ---------- секции с фоновым изображением ---------- */
.img-band{position:relative; overflow:hidden}
.img-band::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:var(--sec-img) center/cover no-repeat}
.img-band::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:var(--sec-veil)}
.img-band > *{position:relative; z-index:2}
#how{--sec-img:var(--how-img); --sec-veil:var(--how-veil)}
#approach{--sec-img:var(--appro-img); --sec-veil:var(--appro-veil)}

/* ---------- столпы / шаги ---------- */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:52px}
.pillar{background:linear-gradient(180deg,var(--panel),var(--card)); border:1px solid var(--line-soft);
  border-radius:var(--r); padding:34px 28px; text-align:center; transition:.3s}
.pillar:hover{border-color:var(--line); transform:translateY(-4px); box-shadow:0 24px 60px -30px var(--shadow)}
.pillar-glyph{font-size:38px; color:var(--gold); margin-bottom:12px}
.pillar h3{font-family:var(--serif); font-size:22px; margin:0 0 10px; font-weight:600}
.pillar p{color:var(--muted); font-size:15px; margin:0}

.steps{display:flex; flex-wrap:wrap; justify-content:center; gap:22px; margin:52px auto 40px}
.step{position:relative; flex:0 1 320px; padding:34px 26px 30px; border-radius:var(--r); text-align:center;
  background:var(--card); border:1px solid var(--line-soft)}
.step-num{display:inline-grid; place-items:center; width:46px; height:46px; border-radius:50%;
  font-family:var(--serif); font-size:22px; color:var(--gold); margin-bottom:14px;
  border:1px solid var(--line); background:radial-gradient(circle at 30% 20%,var(--gold-wash-2),transparent)}
.step h3{font-family:var(--serif); font-size:20px; margin:0 0 8px; font-weight:600}
.step p{color:var(--muted); font-size:15px; margin:0}

/* ---------- что входит ---------- */
.includes-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:48px}
.inc{display:flex; gap:16px; align-items:flex-start; padding:24px; border-radius:14px;
  background:var(--card); border:1px solid var(--line-soft); transition:.3s}
.inc:hover{border-color:var(--line)}
.inc-i{font-size:24px; color:var(--gold); min-width:34px}
.inc b{font-family:var(--serif); font-weight:600; font-size:18px; display:block; margin-bottom:4px}
.inc p{color:var(--muted); font-size:14px; margin:0}

/* ---------- знаки зодиака ---------- */
.zodiac-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-top:46px}
.zsign{cursor:pointer; text-align:center; padding:22px 10px; border-radius:14px;
  background:linear-gradient(180deg,var(--panel),var(--card)); border:1px solid var(--line-soft);
  transition:.25s}
.zsign:hover,.zsign.active{border-color:var(--gold); transform:translateY(-3px);
  box-shadow:0 18px 44px -24px var(--shadow)}
.zsign.active{background:linear-gradient(180deg,var(--panel-hi),var(--panel))}
.zsign .glyph{font-size:30px; color:var(--gold); display:block; line-height:1}
.zsign .zn{font-family:var(--serif); font-size:16px; margin-top:8px}
.zsign .zd{font-size:11px; color:var(--muted); margin-top:2px}
.sign-detail{margin-top:22px; border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(135deg,var(--panel-2),var(--panel)); padding:32px; position:relative;
  display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:start}
.sign-detail .sd-glyph{font-size:76px; color:var(--gold); line-height:1;
  text-shadow:0 0 30px var(--gold-wash-2)}
.sign-detail h3{font-family:var(--serif); font-size:28px; margin:0 0 4px; font-weight:600}
.sd-meta{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 14px}
.sd-tag{font-size:12px; padding:5px 12px; border-radius:100px; border:1px solid var(--line);
  color:var(--gold); letter-spacing:.04em}
.sign-detail p{color:var(--ink-soft); margin:0; font-size:15.5px}
.sd-keywords{margin-top:12px; color:var(--muted); font-size:13.5px; font-style:italic; font-family:var(--script)}

/* ---------- планеты ---------- */
.planet-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:46px}
.planet{display:flex; gap:18px; align-items:flex-start; padding:24px 26px; border-radius:14px;
  background:var(--card); border:1px solid var(--line-soft); transition:.3s}
.planet:hover{border-color:var(--line); background:var(--card-strong)}
.planet .pg{font-size:32px; color:var(--gold); min-width:40px; text-align:center}
.planet h3{font-family:var(--serif); font-size:20px; margin:0 0 3px; font-weight:600}
.planet .pgov{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-deep); margin:0 0 8px}
.planet p{color:var(--muted); font-size:14.5px; margin:0}

/* ---------- дома ---------- */
.house-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:46px}
.house{padding:22px 24px; border-radius:14px; background:var(--card); border:1px solid var(--line-soft)}
.house .hn{font-family:var(--serif); color:var(--gold); font-size:15px; letter-spacing:.05em; margin:0 0 6px}
.house b{font-family:var(--serif); font-weight:600; font-size:17px; display:block; margin-bottom:5px}
.house p{color:var(--muted); font-size:14px; margin:0}

/* ---------- форма ---------- */
.order{background:var(--order-bg)}
.form-wrap{max-width:640px; margin:44px auto 0; position:relative}
.natal-form{background:linear-gradient(160deg,var(--panel-2),var(--panel));
  border:1px solid var(--line); border-radius:20px; padding:38px;
  box-shadow:0 40px 100px -50px var(--shadow)}
.field{margin-bottom:20px; position:relative}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.field label{display:block; font-size:13px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--gold); margin-bottom:8px; font-weight:600}
.field input{width:100%; background:var(--input-bg); border:1px solid var(--line-soft); border-radius:12px;
  padding:14px 16px; color:var(--ink); font-family:var(--sans); font-size:15.5px; transition:.2s}
.field input::placeholder{color:var(--placeholder)}
.field input:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-wash);
  background:var(--input-bg-focus)}
.check{display:flex!important; align-items:center; gap:8px; font-size:12.5px!important; text-transform:none!important;
  color:var(--muted)!important; letter-spacing:0!important; margin-top:9px; cursor:pointer; font-weight:400!important}
.check input{width:auto; margin:0; accent-color:var(--gold)}
.field-hint{font-size:12.5px; color:var(--muted); margin:8px 0 0}
.place-field{position:relative}
.geo-dropdown{position:absolute; top:100%; left:0; right:0; z-index:20; margin-top:6px;
  background:var(--panel-hi); border:1px solid var(--line); border-radius:12px; overflow:hidden;
  box-shadow:0 24px 60px -20px var(--shadow)}
.geo-item{padding:12px 16px; cursor:pointer; font-size:14.5px; border-bottom:1px solid var(--line-soft);
  transition:.15s; display:flex; justify-content:space-between; gap:10px}
.geo-item:last-child{border-bottom:none}
.geo-item:hover,.geo-item.hl{background:var(--gold-wash-2)}
.geo-item .gi-sub{color:var(--muted); font-size:12.5px}
.geo-item.gi-empty{color:var(--muted); cursor:default}
.geo-item.gi-empty:hover{background:transparent}
.field.ok input{border-color:rgba(126,200,140,.5)}
.field.err input{border-color:var(--red)}
.form-note{font-size:12px; color:var(--muted); text-align:center; margin:16px 0 0}
.field-error{color:var(--red); font-size:12.5px; margin-top:6px}

/* ---------- согласие (opt-in) ---------- */
.consent-field{margin:4px 0 14px}
.check.consent{align-items:flex-start; font-size:13px!important; line-height:1.5; color:var(--ink-soft)!important; margin-top:0}
.check.consent input{margin-top:2px; flex:0 0 auto}
.check a{color:var(--gold); text-decoration:underline; text-underline-offset:2px}
.check a:hover{color:var(--gold-deep)}
.field.consent-field.err .check.consent{color:var(--red)!important}
.field.consent-field .field-error{margin-top:8px}

/* ---------- юридическая страница ---------- */
.legal-page{max-width:820px; margin:0 auto; padding:118px 24px 90px}
.legal-top{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:26px}
.legal-back{display:inline-flex; align-items:center; gap:7px; color:var(--gold); font-size:14px; font-weight:600}
.legal-back:hover{color:var(--gold-deep)}
.legal-lang{display:inline-flex; border:1px solid var(--line); border-radius:100px; overflow:hidden}
.legal-lang button{background:transparent; border:none; color:var(--muted); font-family:var(--sans); font-weight:600; font-size:12px; letter-spacing:.05em; padding:7px 13px; cursor:pointer; transition:.2s}
.legal-lang button:hover{color:var(--gold)}
.legal-lang button.active{background:var(--gold-wash-2); color:var(--gold-deep)}
.legal h1{font-family:var(--serif); font-weight:600; font-size:clamp(28px,5vw,40px); margin:0 0 8px; color:var(--ink); line-height:1.1}
.legal .legal-updated{color:var(--muted); font-size:13px; margin:0 0 26px}
.legal h2{font-family:var(--serif); font-weight:600; font-size:21px; color:var(--gold-deep); margin:32px 0 10px}
.legal p,.legal li{color:var(--ink-soft); font-size:15.5px; line-height:1.7}
.legal p{margin:0 0 12px}
.legal ul{margin:6px 0 14px; padding-left:22px}
.legal li{margin-bottom:7px}
.legal a{color:var(--gold); text-decoration:underline}
.legal a:hover{color:var(--gold-deep)}
.legal .fill{background:var(--gold-wash-2); border-radius:5px; padding:1px 7px; font-weight:600; color:var(--gold-deep)}
.legal .legal-note{margin-top:40px; padding:18px 22px; border:1px solid var(--line-soft); border-radius:14px;
  background:var(--card); font-size:14px; color:var(--muted)}

/* ---------- загрузка ---------- */
.form-loading{position:absolute; inset:0; display:grid; place-items:center; z-index:30;
  background:var(--loading-bg); border-radius:20px; backdrop-filter:blur(3px)}
.form-loading p{color:var(--gold); font-family:var(--script); font-size:20px; margin-top:16px}
.spinner{width:52px; height:52px; border-radius:50%; border:2px solid var(--gold-wash-2);
  border-top-color:var(--gold); animation:spin 1s linear infinite; margin:0 auto}

/* ---------- результат ---------- */
.result{background:linear-gradient(160deg,var(--panel-2),var(--panel)); border:1px solid var(--line);
  border-radius:20px; padding:38px; box-shadow:0 40px 100px -50px var(--shadow)}
.result-head{text-align:center; margin-bottom:8px}
.result-title{font-family:var(--serif); font-size:30px; margin:0; font-weight:600}
.result-sub{color:var(--muted); font-size:14.5px; margin:8px 0 0}
.result-wheel{display:flex; justify-content:center; margin:24px 0}
.result-wheel canvas{width:100%; max-width:460px; height:auto; border-radius:16px}
.big-three{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:18px 0 26px}
.bt-card{text-align:center; padding:20px 14px; border-radius:14px; background:var(--card);
  border:1px solid var(--line-soft)}
.bt-card .bt-role{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep)}
.bt-card .bt-sign{font-family:var(--serif); font-size:20px; color:var(--gold); margin:6px 0 2px}
.bt-card .bt-glyph{font-size:22px; color:var(--gold)}
.result-actions{display:flex; flex-direction:column; gap:12px; align-items:center}
.result-actions .btn{max-width:420px}
.result-preview{margin-top:30px; border-top:1px solid var(--line-soft); padding-top:26px}
.rp-block{margin-bottom:18px}
.rp-block .rp-head{font-family:var(--serif); color:var(--gold); font-size:17px; margin:0 0 4px; font-weight:600}
.rp-block p{color:var(--ink-soft); font-size:14.5px; margin:0}
.rp-more{color:var(--muted); font-size:13.5px; text-align:center; font-style:italic; font-family:var(--script);
  margin-top:8px}

/* ---------- футер ---------- */
.footer{border-top:1px solid var(--line-soft); padding:54px 0 40px; margin-top:20px;
  background:var(--footer-bg)}
.footer-inner{display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; align-items:center}
.footer-brand{font-family:var(--serif); font-size:20px; font-weight:600}
.footer-brand p{font-family:var(--sans); font-size:13px; color:var(--muted); margin:6px 0 0; font-weight:400}
.footer-links{display:flex; flex-wrap:wrap; gap:14px 22px; font-size:14px; color:var(--ink-soft)}
.footer-links a:hover{color:var(--gold)}
.footer-copy{width:100%; text-align:center; color:var(--muted); font-size:12.5px; margin:22px 0 0;
  border-top:1px solid var(--line-soft); padding-top:22px}

.approach-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:48px}
.appro{padding:24px; border-radius:14px; background:var(--card); border:1px solid var(--line-soft)}
.appro b{font-family:var(--serif); font-weight:600; font-size:17px; display:block; margin-bottom:6px; color:var(--gold)}
.appro p{color:var(--muted); font-size:14px; margin:0}
.disclaimer{margin:40px auto 0; text-align:center}
.disclaimer p{color:var(--muted); font-style:italic; font-family:var(--script); font-size:16px}

/* ---------- FAQ (SEO) ---------- */
.faq{max-width:760px; margin:44px auto 0}
.faq-item{border-top:1px solid var(--line-soft); padding:22px 4px}
.faq-item:last-child{border-bottom:1px solid var(--line-soft)}
.faq-q{font-family:var(--serif); font-size:19px; font-weight:600; color:var(--ink); margin:0 0 8px}
.faq-a{color:var(--ink-soft); font-size:15.5px; line-height:1.65; margin:0}

/* ---------- адаптив ---------- */
@media (max-width:900px){
  .pillars,.steps,.includes-grid,.house-grid,.approach-grid{grid-template-columns:1fr 1fr}
  .planet-grid{grid-template-columns:1fr}
  .zodiac-grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:720px){
  .nav-links{display:none}
  .nav-links.open{display:flex; position:absolute; top:100%; right:0; left:0; flex-direction:column;
    background:var(--bg-soft); padding:18px 24px; gap:16px; border-bottom:1px solid var(--line)}
  .burger{display:block}
  .section{padding:70px 0}
  .field-row{grid-template-columns:1fr}
  .pillars,.steps,.includes-grid,.house-grid,.approach-grid,.big-three{grid-template-columns:1fr}
  .zodiac-grid{grid-template-columns:repeat(3,1fr)}
  .sign-detail{grid-template-columns:1fr; text-align:center; justify-items:center}
  .natal-form,.result{padding:26px 20px}
  .sd-meta{justify-content:center}
}
@media (max-width:420px){
  .zodiac-grid{grid-template-columns:repeat(2,1fr)}
}