:root{
  --bg: #12101c;
  --bg-alt: #1a1730;
  --card: #1e1a35;
  --gold: #c9a24b;
  --gold-soft: #e8d29c;
  --ivory: #efe7d8;
  --ivory-dim: #b8b0a8;
  --violet: #8b7fc0;
  --line: rgba(201,162,75,0.22);
  --locked: #5b1f2e;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background: radial-gradient(ellipse at 50% -10%, #211c3d 0%, var(--bg) 55%);
  color: var(--ivory);
  font-family: 'Manrope', sans-serif;
  line-height: 1.6;
  min-height: 100vh;
}
h1,h2,h3, .display{
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.wrap{ max-width: 980px; margin: 0 auto; padding: 0 24px; }

/* header */
header{ padding: 28px 0 12px; display:flex; align-items:center; justify-content:space-between; }
.mark{ display:flex; align-items:center; gap:10px; font-family:'Cormorant Garamond',serif; font-size:20px; letter-spacing:0.08em; color: var(--gold-soft); text-transform:uppercase;}
.mark svg{ width:22px; height:22px; }
nav a{ color: var(--ivory-dim); text-decoration:none; font-size:14px; margin-left:22px;}

/* hero */
.hero{ padding: 40px 0 20px; text-align:center; }
.eyebrow{ color: var(--gold); letter-spacing:0.22em; font-size:12px; text-transform:uppercase; margin-bottom:18px;}
.hero h1{ font-size: clamp(36px, 5.6vw, 58px); color: var(--gold-soft); font-weight:600; margin-bottom: 18px;}
.hero p.lede{ max-width: 520px; margin: 0 auto; color: var(--ivory-dim); font-size:17px; line-height:1.6;}

/* ambient octagram behind hero */
.ambient{ display:flex; justify-content:center; margin: 30px 0 10px; opacity:0.9;}

/* form */
.formcard{
  background: linear-gradient(180deg, var(--card), var(--bg-alt));
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 36px;
  max-width: 560px;
  margin: 30px auto 60px;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6);
}
.formcard label{ display:block; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color: var(--gold); margin-bottom:8px; margin-top:18px;}
.formcard label:first-of-type{ margin-top:0;}
.formcard input{
  width:100%; background: var(--bg); border: 1px solid var(--line); color: var(--ivory);
  padding: 12px 14px; border-radius:3px; font-family:'Manrope',sans-serif; font-size:15px;
}
.formcard input:focus{ outline: none; border-color: var(--gold); }
.date-field{ position:relative; }
.date-field::after{
  content:'';
  position:absolute; right:14px; top:50%; width:16px; height:16px;
  transform:translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e9d9ae' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 9h18'/%3E%3C/svg%3E") center/contain no-repeat;
  pointer-events:none;
}
.date-input{
  appearance:none;
  -webkit-appearance:none;
  padding-right:42px;
}
.date-input::-webkit-calendar-picker-indicator{ opacity:0; }
.btn{
  position:relative; overflow:hidden;
  margin-top: 28px; width:100%; padding: 14px;
  background: linear-gradient(135deg, #e9d9ae, #d4b972);
  color: #2b2412; border:none;
  font-family:'Cormorant Garamond', serif; font-size:18px; font-weight:600; letter-spacing:0.03em;
  border-radius:3px; cursor:pointer; transition: transform .15s ease, filter .15s ease;
}
.btn:hover{ filter: brightness(1.08); }
.btn:active{ transform: scale(0.98); }
.err{ color:#e08a8a; font-size:13px; margin-top:10px; display:none;}

/* results */
#results{ display:none; padding-bottom: 100px;}
.result-hero{ text-align:center; margin-bottom: 24px;}
.result-hero .name{ color: var(--gold-soft); font-size:22px;}
.matrix-panel{
  max-width:920px; margin: 0 auto 20px; border:1px solid var(--line);
  border-radius:6px; background:rgba(30,26,53,0.42); padding: 18px;
}
.octagram-wrap{ display:flex; justify-content:center; margin: 0; }
.octagram-wrap svg{ max-width:100%; height:auto; display:block; }

/* Панель быстрых действий с матрицей */
.matrix-actions{
  display:flex; justify-content:center; gap:14px; margin: 16px 0 42px; flex-wrap:wrap;
}
.action-btn{
  display:inline-flex; align-items:center; gap:8px;
  background: rgba(30,26,53,0.85); border:1px solid var(--line); color: var(--ivory);
  padding: 10px 18px; border-radius:4px; font-size:13.5px; font-family:'Manrope',sans-serif;
  cursor:pointer; transition: all .2s ease;
}
.action-btn:hover{
  border-color: var(--gold); color: var(--gold-soft); background: rgba(201,162,75,0.12);
  transform: translateY(-1px);
}
.action-btn svg{ width:16px; height:16px; flex-shrink:0; }

/* Интерактивные точки октаграммы */
.matrix-node{
  cursor: pointer;
  outline: none;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.matrix-node:hover .node-bg{
  stroke: var(--gold-soft);
  stroke-width: 2.2px;
  filter: drop-shadow(0 0 8px rgba(232, 210, 156, 0.7));
}
.matrix-node:focus-visible .node-bg,
.matrix-node.active-node .node-bg{
  stroke: #ffffff;
  stroke-width: 2.4px;
  filter: drop-shadow(0 0 12px rgba(232, 210, 156, 0.95));
}

/* Анимация подсветки карточки при переходе */
.card-highlight{
  animation: highlightPulse 1.6s ease;
}
@keyframes highlightPulse{
  0% {
    box-shadow: 0 0 0 0 rgba(201, 162, 75, 0.85);
    border-color: var(--gold-soft);
  }
  50% {
    box-shadow: 0 0 24px 6px rgba(201, 162, 75, 0.45);
    border-color: var(--gold-soft);
  }
  100% {
    box-shadow: none;
  }
}

@media (max-width: 640px){
  .matrix-panel{ padding: 8px; margin-bottom: 20px; }
  .hero{ padding: 24px 0 12px; }
  header{ align-items:flex-start; gap:16px; flex-direction:column; }
  nav a{ margin-left:0; margin-right:16px; }
  .formcard{ padding:26px 22px; }
}

.section-label{
  display:flex; align-items:center; gap:14px;
  font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color: var(--gold);
  text-align:center; margin: 46px 0 18px;
}
.section-label::before,
.section-label::after{ content:''; flex:1; height:1px; }
.section-label::before{ background:linear-gradient(90deg, transparent, rgba(201,162,75,0.4)); }
.section-label::after{ background:linear-gradient(90deg, rgba(201,162,75,0.4), transparent); }
.content-layout{ display:flex; gap:24px; align-items:flex-start; margin-bottom:60px; }
.main-panel{ flex:1; min-width:0; display:flex; flex-direction:column; gap:20px; }
.section-block{ scroll-margin-top: 20px; padding: 30px 34px; }
.main-panel h3{ font-size:26px; margin-bottom:4px; }
.section-nav{
  width:270px; flex-shrink:0; position:sticky; top:20px;
  background: var(--card); border:1px solid var(--line); border-radius:6px; padding:22px 20px;
}
.nav-title{ font-family:'Cormorant Garamond',serif; font-size:15.5px; color:var(--gold-soft); margin-bottom:14px; }
#navLinks button,
#compatNavLinks button{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  background:none; border:none; border-bottom:1px solid var(--line); color: var(--ivory-dim);
  text-align:left; padding:10px 0; font-size:13.5px; cursor:pointer; font-family:'Manrope',sans-serif;
}
#navLinks button:last-child,
#compatNavLinks button:last-child{ border-bottom:none; }
#navLinks button:hover,
#compatNavLinks button:hover{ color: var(--ivory); }
#navLinks button.active,
#compatNavLinks button.active{ color: var(--gold-soft); font-weight:600; }
#navLinks button .lock-icon,
#compatNavLinks button .lock-icon{
  width:15px; height:15px; margin-left:8px; flex:0 0 auto; color:var(--gold-soft);
}
#navLinks button .lock-icon svg,
#compatNavLinks button .lock-icon svg{
  display:block; width:100%; height:100%;
}
#navLinks button .lock-icon path,
#compatNavLinks button .lock-icon path{
  stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round;
}
#navLinks button .lock-icon rect,
#compatNavLinks button .lock-icon rect{
  stroke:currentColor; stroke-width:1.5; fill:none;
}
@media (max-width: 860px){
  .content-layout{ flex-direction:column; }
  .section-nav{ position:static; width:100%; order:-1; }
  .main-panel{ order:0; }
}

.grid{
  display:grid; gap:18px; align-items:start;
}
.free-grid{ grid-template-columns: repeat(3, 1fr); margin-bottom: 40px; }
.paid-grid{ grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); }
.paid-grid #card-godovoy-prognoz{ grid-column: span 2; }
@media (max-width: 900px){
  .free-grid{ grid-template-columns: 1fr; }
  .paid-grid #card-godovoy-prognoz{ grid-column: span 1; }
}
.pos-card{
  background: var(--card); border:1px solid var(--line); border-radius:4px; padding:22px; position:relative; overflow:hidden;
  display:flex; flex-direction:column;
}
.pos-card .tag{ font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color: var(--gold);}
.pos-card h3{ font-size:24px; margin: 6px 0 4px; color: var(--ivory);}
.pos-card .arcanum{ font-size:13px; color: var(--violet); font-style:italic; margin-bottom:12px;}
.pos-card p{ font-size:14.5px; color: var(--ivory-dim); line-height:1.75;}
.pos-card p strong{ color: var(--gold-soft); font-weight:600; }
.pos-card.locked{ border-color: rgba(91,31,46,0.6);}
.pos-card.locked p.teaser{ flex-grow:1; }
.pos-card.free{
  border-color: rgba(201,162,75,0.45);
  background: linear-gradient(160deg, var(--card), var(--bg-alt));
  padding: 28px 30px;
}
.pos-card.free h3{ font-size: 24px; }
.pos-card.free p{ font-size: 14.5px; color: var(--ivory); line-height:1.7; flex-grow:1;}
.pos-card .hook{
  margin-top:16px; padding-top:14px; border-top:1px dashed var(--line);
  font-size:13px; color: var(--gold-soft); font-style:italic;
}
.reading-frame{ display:flex; flex-direction:column; gap:14px; margin-top:14px; }
.reading-base{
  color:var(--ivory); font-size:14.5px; line-height:1.8;
}
.reading-base strong{ color: var(--gold-soft); font-weight:600; }

.lockbar{
  margin-top:auto; display:flex; align-items:center; justify-content:space-between;
  border-top: 1px solid var(--line); padding-top: 14px;
}
.unlock-btn{
  background: transparent; border:1px solid var(--gold); color: var(--gold-soft); font-size:12px;
  padding: 8px 14px; border-radius:20px; cursor:pointer; font-family:'Manrope',sans-serif; letter-spacing:0.03em;
}
.unlock-btn:hover{ background: var(--gold); color:#14121f;}
.locked-teaser{ font-size:13px; color:var(--ivory-dim); line-height:1.65; }

.infosection{
  max-width: 640px; margin: 70px auto; padding-top: 6px;
}
/* Совместимости нужна ширина под две колонки: карточки + боковая навигация */
#compat.infosection{
  max-width: 980px;
}
/* Орнаментальный разделитель: тонкая линия со звездой */
.infosection::before{
  content:'';
  display:block; height:22px; margin-bottom:30px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M6 0L7.4 4.6L12 6L7.4 7.4L6 12L4.6 7.4L0 6L4.6 4.6Z' fill='%23c9a24b'/></svg>") center / 11px 11px no-repeat,
    linear-gradient(90deg, rgba(201,162,75,0) 0%, rgba(201,162,75,0.35) 50%, rgba(201,162,75,0) 100%) center / 100% 1px no-repeat;
}
#pricing.infosection{
  max-width: 860px;
}
.infosection h2{ font-size: 28px; color: var(--gold-soft); margin-bottom: 16px;}
.infosection p{ font-size: 15px; color: var(--ivory-dim); line-height:1.8; margin-bottom: 18px;}
.infosection p:last-child{ margin-bottom: 0; }
.infosection.legal-mini{ max-width:640px; margin:28px auto; padding:14px 18px; background:rgba(30,26,53,0.22); border:1px solid rgba(201,162,75,0.10); border-radius:6px; }
.infosection.legal-mini::before{ display:none; }
.infosection.legal-mini h2{ font-size:14px; margin-bottom:8px; color:var(--gold); letter-spacing:0.08em; text-transform:uppercase; font-family:'Manrope',sans-serif; }
.infosection.legal-mini p{ font-size:11px; line-height:1.55; margin-bottom:6px; color:rgba(232,231,240,0.72); }

.tariff-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:20px; margin-top:28px; }
.tariff-card{
  background: linear-gradient(180deg, var(--card), var(--bg-alt));
  border: 1px solid var(--line); border-radius: 6px; padding: 26px 24px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.tariff-card:hover{
  border-color: rgba(201,162,75,0.45);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -10px rgba(0,0,0,0.5);
}
.tariff-card.featured{
  border: 1px solid rgba(201,162,75,0.7);
  background: linear-gradient(180deg, rgba(201,162,75,0.12), var(--card));
  box-shadow: 0 16px 36px -12px rgba(201,162,75,0.28);
}
.tariff-badge{
  display: inline-flex; align-items: center; align-self: flex-start;
  margin-bottom: 12px; padding: 4px 10px; border-radius: 20px;
  background: rgba(201,162,75,0.12); border: 1px solid rgba(201,162,75,0.35);
  color: var(--gold-soft); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
}
.tariff-badge.combo{
  background: linear-gradient(135deg, rgba(232,210,156,0.25), rgba(201,162,75,0.35));
  border-color: var(--gold);
  color: #fff;
  box-shadow: 0 2px 10px rgba(201,162,75,0.2);
}
.tariff-card .tariff-name{
  font-family: 'Cormorant Garamond', serif; font-size: 23px; color: var(--gold-soft);
  font-weight: 600; margin-bottom: 6px; line-height: 1.2;
}
.tariff-card .tariff-desc{
  font-size: 13px; color: var(--ivory-dim); line-height: 1.55; margin-bottom: 14px;
}
.tariff-price-wrap{
  display: flex; align-items: baseline; gap: 10px; margin-top: auto; padding-top: 10px;
}
.tariff-note{
  display: inline-block; padding: 2.5px 11px;
  border: 1px solid rgba(201,162,75,0.3); border-radius: 20px;
  font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ivory-dim); white-space: nowrap;
}
.tariff-grid .tariff-card.wide{ grid-column: span 2; }
@media (max-width: 760px){
  .tariff-grid .tariff-card.wide{ grid-column: span 1; }
}
.tariff-price{ font-size: 28px; color: var(--gold-soft); font-family: 'Cormorant Garamond', serif; font-weight: 600; }
.old-price{ font-size: 15px; color: var(--ivory-dim); text-decoration: line-through; opacity: 0.6; font-family: 'Manrope', sans-serif; }
.trial-sub-text{ font-size: 11.5px; color: var(--gold-soft); margin-top: 4px; opacity: 0.9; }
.tariff-features{
  list-style: none; margin: 14px 0 16px; padding-top: 12px; border-top: 1px dashed var(--line);
  font-size: 12.5px; color: var(--ivory-dim); display: flex; flex-direction: column; gap: 6px;
}
.tariff-features li{ display: flex; align-items: center; gap: 7px; line-height: 1.4; }
.tariff-features li::before{ content: '✓'; color: var(--gold); font-weight: bold; font-size: 13px; }
.tariff-cta-btn{
  width: 100%; padding: 11px 14px; border-radius: 4px; font-family: 'Manrope', sans-serif;
  font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all 0.2s ease;
  background: transparent; border: 1px solid var(--gold); color: var(--gold-soft);
}
.tariff-cta-btn:hover{
  background: var(--gold); color: #14121f;
}
.tariff-card.featured .tariff-cta-btn{
  background: linear-gradient(135deg, #e9d9ae, #d4b972);
  color: #2b2412; border: none; font-family: 'Cormorant Garamond', serif; font-size: 16.5px; font-weight: 700;
}
.tariff-card.featured .tariff-cta-btn:hover{
  filter: brightness(1.08); transform: translateY(-1px);
}
.faq-list{ display:flex; flex-direction:column; gap:10px; margin-top:20px; }
.faq-list details{ border:1px solid var(--line); border-radius:6px; background:rgba(30,26,53,0.5); padding:15px 17px; }
.faq-list summary{ cursor:pointer; color:var(--gold-soft); font-family:'Cormorant Garamond',serif; font-size:19px; }
.faq-list p{ margin-top:10px; }
@media (max-width: 760px){
  .tariff-grid{ grid-template-columns:1fr; }
}
footer{ text-align:center; padding: 30px 0; color: var(--ivory-dim); font-size:12px; border-top:1px solid var(--line);}

/* модальное окно оплаты */
.modal-overlay{
  display:none; position:fixed; inset:0; background: rgba(8,7,14,0.75);
  align-items:center; justify-content:center; z-index:100; padding:20px;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.modal-box{
  background: linear-gradient(180deg, var(--card), var(--bg-alt));
  border: 1px solid var(--line); border-radius:6px; padding: 34px;
  max-width: 490px; width:100%; position:relative;
  margin:auto; /* при переполнении экрана окно прижимается к верху и прокручивается, а не обрезается */
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.7);
}
@media (max-width:560px){
  .modal-box{ padding:26px 18px; }
}
.modal-close{
  position:absolute; top:16px; right:16px; background:none; border:none;
  color: var(--ivory-dim); font-size:24px; cursor:pointer; line-height:1;
}
.modal-close:hover{ color: var(--ivory); }
.tariff-option{
  border:1px solid var(--gold); border-radius:4px; padding:16px 18px; margin-bottom:16px;
  background: rgba(201,162,75,0.08);
}
.tariff-option.selectable{
  border-color: var(--line); background: transparent; cursor:pointer;
  transition: border-color .15s ease, background .15s ease;
}
.tariff-option.selectable:hover{ border-color: rgba(201,162,75,0.5); }
.tariff-option.selectable.selected{ border-color: var(--gold); background: rgba(201,162,75,0.1); }
.tariff-name{ font-family:'Cormorant Garamond',serif; font-size:20px; color: var(--gold-soft); margin-bottom:4px; font-weight: 600;}
.tariff-desc{ font-size:13px; color: var(--ivory-dim); margin-bottom:6px; line-height: 1.5;}
.trial-sub-text{ font-size:11.5px; color: var(--gold-soft); margin-top:4px; opacity: 0.9; }
.modal-field{
  margin: 16px 0 12px;
}
.modal-field label{
  display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--gold); margin-bottom: 6px;
}
.modal-field input{
  width: 100%; background: var(--bg); border: 1px solid var(--line); color: var(--ivory);
  padding: 11px 14px; border-radius: 3px; font-family: 'Manrope', sans-serif; font-size: 14px;
}
.modal-field input:focus{ outline: none; border-color: var(--gold); }
.modal-checkbox{
  display: flex; align-items: flex-start; gap: 8px; font-size: 11px; color: var(--ivory-dim);
  line-height: 1.4; margin: 12px 0 16px; cursor: pointer;
}
.modal-checkbox input{ margin-top: 2px; accent-color: var(--gold); }
.modal-note{ font-size:11.5px; color: var(--ivory-dim); margin-top:14px; text-align:center; font-style:italic;}
.footer-links{
  display: flex; justify-content: center; gap: 20px; margin-top: 10px; flex-wrap: wrap;
}
.footer-links a{
  color: var(--ivory-dim); font-size: 12px; text-decoration: underline; text-underline-offset: 3px;
  transition: color 0.15s ease;
}
.footer-links a:hover{ color: var(--gold-soft); }

@media (prefers-reduced-motion: no-preference){
  .draw{ stroke-dasharray: 900; stroke-dashoffset: 900; animation: draw 2.2s ease forwards; }
  @keyframes draw{ to{ stroke-dashoffset: 0; } }
  .pt{ opacity:0; animation: fadein .6s ease forwards; }
  @keyframes fadein{ to{opacity:1;} }
}

/* Стили для чистой печати и экспорта в PDF */
@media print {
  body {
    background: #ffffff !important;
    color: #111111 !important;
  }
  header, .hero, .formcard, #compat, #pricing, #questions, footer, .modal-overlay, .section-nav, .matrix-actions, .unlock-btn, .lockbar {
    display: none !important;
  }
  #results {
    display: block !important;
    padding: 0 !important;
  }
  .result-hero .eyebrow {
    color: #666666 !important;
  }
  .result-hero .name {
    color: #111111 !important;
    font-size: 26px !important;
  }
  .matrix-panel {
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: none !important;
    margin-bottom: 24px !important;
    page-break-after: always;
  }
  .content-layout {
    display: block !important;
  }
  .pos-card {
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    color: #111111 !important;
    margin-bottom: 18px !important;
    page-break-inside: avoid;
    box-shadow: none !important;
  }
  .pos-card h3 {
    color: #111111 !important;
  }
  .pos-card .arcanum {
    color: #555555 !important;
  }
  .reading-base, .pos-card p {
    color: #222222 !important;
  }
  .pos-card.locked {
    display: none !important;
  }
}

/* ============================= */
/* Тёмный мистицизм: атмосфера   */
/* ============================= */

#starfield{ position:fixed; inset:0; z-index:-2; pointer-events:none; display:block; }
.nebula{ position:fixed; border-radius:50%; pointer-events:none; z-index:-3; filter:blur(80px); }
.nebula.n1{ width:64vw; height:64vw; top:-24vw; left:-18vw; background:radial-gradient(circle, rgba(105,78,190,0.32) 0%, rgba(105,78,190,0) 70%); }
.nebula.n2{ width:56vw; height:56vw; bottom:-20vw; right:-16vw; background:radial-gradient(circle, rgba(201,162,75,0.18) 0%, rgba(201,162,75,0) 70%); }
.nebula.n3{ width:44vw; height:44vw; top:38%; left:58%; background:radial-gradient(circle, rgba(76,64,150,0.24) 0%, rgba(76,64,150,0) 70%); }

.matrix-panel{
  position:relative;
}

/* Золотой градиентный заголовок с медленным переливом */
.hero h1{
  background:linear-gradient(105deg, #e8d29c 0%, #c9a24b 28%, #f4e6bd 50%, #c9a24b 72%, #e8d29c 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:#e8d29c;
  filter:drop-shadow(0 2px 20px rgba(201,162,75,0.20));
}
.hero .eyebrow{ display:inline-block; }
.hero .eyebrow::before,
.hero .eyebrow::after{ content:'✦'; font-size:9px; color:var(--gold); opacity:0.75; margin:0 12px; vertical-align:3px; }

nav a{ transition:color .2s ease; }
nav a:hover{ color:var(--gold-soft); }

/* Аккаунт в шапке */
.header-right{ display:flex; align-items:center; gap:24px; }
.auth-area{ display:flex; align-items:center; gap:10px; }
.login-pill{
  background:transparent; border:1px solid var(--gold); color:var(--gold-soft);
  padding:7px 18px; border-radius:20px; font-size:13px; cursor:pointer;
  font-family:'Manrope',sans-serif; letter-spacing:.03em; transition:all .2s ease;
}
.login-pill:hover{ background:var(--gold); color:#14121f; }
.login-email{
  font-size:12.5px; color:var(--ivory-dim); max-width:180px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.login-logout{
  background:none; border:none; color:var(--gold); font-size:12px; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; font-family:'Manrope',sans-serif;
}
.login-logout:hover{ color:var(--gold-soft); }
.linklike{
  display:block; margin:12px auto 0; background:none; border:none;
  color:var(--ivory-dim); font-size:12.5px; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; font-family:'Manrope',sans-serif;
}
.linklike:hover{ color:var(--gold-soft); }
.auth-note{ font-size:13px; color:var(--ivory-dim); line-height:1.6; margin-bottom:16px; }
.dev-code-hint{
  font-size:12px; color:var(--gold-soft);
  border:1px dashed rgba(201,162,75,0.4); border-radius:4px;
  padding:8px 12px; margin-bottom:14px;
}
@media (max-width:640px){
  .header-right{ flex-wrap:wrap; gap:12px; }
}

/* Форма-алтарь */
.formcard{
  box-shadow:0 30px 60px -30px rgba(0,0,0,0.6), 0 0 70px -30px rgba(139,127,192,0.4);
  transition:border-color .3s ease;
}
.formcard:focus-within{ border-color:rgba(201,162,75,0.45); }

/* Выбор даты: три колонки */
.date-wheel{ display:grid; grid-template-columns:0.9fr 1.5fr 1.1fr; gap:10px; }
.date-wheel select{
  appearance:none; -webkit-appearance:none;
  background:var(--bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%23c9a24b' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") right 12px center / 11px no-repeat;
  border:1px solid var(--line); color:var(--ivory);
  padding:12px 32px 12px 14px; border-radius:3px;
  font-family:'Manrope',sans-serif; font-size:14.5px; cursor:pointer;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.date-wheel select:hover{ border-color:rgba(201,162,75,0.45); }
.date-wheel select:focus{
  outline:none; border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,162,75,0.12), 0 0 22px rgba(201,162,75,0.10);
}
.date-wheel select option{ background:#1a1730; color:var(--ivory); }
.date-wheel.compact select{ padding:9px 30px 9px 12px; font-size:13.5px; }

.compat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:24px; }
.compat-grid input[type="text"]{
  width:100%; margin-bottom:10px; background:var(--bg); border:1px solid var(--line); color:var(--ivory);
  padding:10px 12px; border-radius:3px; font-family:'Manrope',sans-serif; font-size:14.5px;
  transition:border-color .2s ease;
}
.compat-grid input[type="text"]:focus{ outline:none; border-color:var(--gold); }
@media (max-width:560px){
  .compat-grid{ grid-template-columns:1fr; }
  .date-wheel{ grid-template-columns:0.8fr 1.4fr 1.1fr; gap:8px; }
}

/* Орнаментальные углы на карточках и золотой фольговый блик */
.pos-card.free::before,
.tariff-card::before,
.formcard::before{
  content:''; position:absolute; inset:7px; pointer-events:none; border-radius:3px;
  border:1px solid rgba(201,162,75,0.14);
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><path d='M2 20V8Q2 2 8 2H20' fill='none' stroke='%23c9a24b' stroke-width='1' opacity='0.55'/></svg>") top left / 22px 22px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><path d='M2 20V8Q2 2 8 2H20' fill='none' stroke='%23c9a24b' stroke-width='1' opacity='0.55' transform='rotate(90 11 11)'/></svg>") top right / 22px 22px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><path d='M2 20V8Q2 2 8 2H20' fill='none' stroke='%23c9a24b' stroke-width='1' opacity='0.55' transform='rotate(180 11 11)'/></svg>") bottom right / 22px 22px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><path d='M2 20V8Q2 2 8 2H20' fill='none' stroke='%23c9a24b' stroke-width='1' opacity='0.55' transform='rotate(270 11 11)'/></svg>") bottom left / 22px 22px no-repeat;
}
.tariff-card{ overflow:hidden; }
.formcard{ overflow:hidden; }
.pos-card.free::after,
.tariff-card::after,
.formcard::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(115deg, transparent 30%, rgba(232,210,156,0.07) 45%, rgba(232,210,156,0.14) 50%, rgba(232,210,156,0.07) 55%, transparent 70%);
  transform:translateX(-70%);
  transition:transform .8s ease, opacity .3s ease;
}
.pos-card.free:hover::after,
.tariff-card:hover::after,
.formcard:hover::after{ opacity:1; transform:translateX(70%); }

/* Заблокированные карточки — «запечатанные» */
.pos-card.locked{ background:linear-gradient(180deg, rgba(30,26,53,0.6), rgba(26,23,48,0.6)); }
.pos-card.locked::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(45deg, rgba(139,127,192,0.05) 0 7px, transparent 7px 14px);
}
.pos-card.locked::after{
  content:''; position:absolute; right:14px; bottom:54px; width:60px; height:60px;
  pointer-events:none; opacity:0.13;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b7fc0' stroke-width='1.4'><rect x='5' y='10' width='14' height='10' rx='2'/><path d='M8 10V7a4 4 0 1 1 8 0v3'/></svg>") center/contain no-repeat;
}

/* Градиентное золото на ценах */
.tariff-price{
  background:linear-gradient(120deg, #e8d29c 0%, #c9a24b 60%, #e8d29c 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* Октаграмма: свечение схемы и виньетка панели */
.matrix-panel{
  background:radial-gradient(circle at 50% 44%, rgba(139,127,192,0.10) 0%, rgba(30,26,53,0.42) 62%);
}
.matrix-octagram-svg{ filter:drop-shadow(0 0 34px rgba(139,127,192,0.14)); }
.matrix-node .node-bg{ filter:drop-shadow(0 0 6px rgba(201,162,75,0.15)); }

/* Кольцо-ripple при клике на точку */
.ripple-ring{
  transform-box:fill-box; transform-origin:center;
  fill:none; stroke:var(--gold-soft); stroke-width:1.6; pointer-events:none;
  animation:ripple 0.9s ease-out forwards;
}
@keyframes ripple{
  from{ opacity:0.9; transform:scale(1); }
  to{ opacity:0; transform:scale(2.8); }
}

/* Модальные окна: размытие фона */
.modal-overlay{ backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); }

/* Плавное появление при прокрутке */
@media (prefers-reduced-motion: no-preference){
  .reveal{
    opacity:0; transform:translateY(22px);
    transition:opacity 0.7s ease, transform 0.7s cubic-bezier(0.19,0.7,0.28,1);
  }
  .reveal.reveal-visible{ opacity:1; transform:none; }
}

/* Анимации атмосферы (отключаются при prefers-reduced-motion) */
@media (prefers-reduced-motion: no-preference){
  @keyframes rotate{ to{ transform:rotate(360deg); } }
  .mark svg{ animation:rotate 60s linear infinite; }

  .btn::after{
    content:''; position:absolute; top:0; left:-80%; width:50%; height:100%;
    background:linear-gradient(105deg, transparent, rgba(255,255,255,0.5), transparent);
    transform:skewX(-20deg);
    animation:shimmer 3.4s ease-in-out infinite;
  }
  @keyframes shimmer{ 0%{ left:-80%; } 60%{ left:130%; } 100%{ left:130%; } }

  .hero h1{ animation:sheenText 9s ease-in-out infinite; }
  @keyframes sheenText{ 0%,100%{ background-position:0% 0; } 50%{ background-position:100% 0; } }

  .matrix-octagram-svg .limb{
    transform-box:view-box; transform-origin:320px 320px;
    animation:rotate 180s linear infinite;
  }
  .matrix-octagram-svg .zodiac-ring{
    transform-box:view-box; transform-origin:320px 320px;
    animation:rotateBack 300s linear infinite;
  }
  @keyframes rotateBack{ to{ transform:rotate(-360deg); } }
  .center-aura{
    transform-box:fill-box; transform-origin:center;
    animation:auraPulse 4s ease-in-out infinite;
  }
  .center-aura-outer{ animation-duration:6.5s; animation-delay:-2s; }
  @keyframes auraPulse{
    0%,100%{ opacity:0.22; transform:scale(1); }
    50%{ opacity:0.5; transform:scale(1.1); }
  }

  #results{ animation:unveil 0.9s cubic-bezier(0.19,0.7,0.28,1) both; }
  @keyframes unveil{
    from{ opacity:0; transform:translateY(26px) scale(0.99); }
  }

  .unlock-btn{ animation:unlockGlow 3.2s ease-in-out infinite; }
  @keyframes unlockGlow{
    0%,100%{ box-shadow:0 0 0 0 rgba(201,162,75,0); }
    50%{ box-shadow:0 0 16px 0 rgba(201,162,75,0.25); }
  }
}

@media print{
  #starfield, .nebula, .zodiac-holder{ display:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* PDF: белый фон печати — принудительно тёмный текст (белый на белом был невидим) */
@media print {
  html, body { background:#fff !important; color:#111 !important; -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
  #results, #results .main-panel, #results .content-layout, #results .section-block,
  #results .pos-card, #results .pos-card.free, #results .matrix-panel {
    background:#fff !important; color:#111 !important; border-color:#ddd !important; box-shadow:none !important;
  }
  #results h3, #results .display, #results .result-hero .name { color:#111 !important; }
  #results .tag { color:#666 !important; }
  #results .arcanum { color:#555 !important; }
  #results .pos-card p, #results .reading-base, #results .locked-teaser, #results .pos-card.free p,
  #results .hook, #results .pos-card .hook { color:#222 !important; }
  #results .hero h1 { background:none !important; -webkit-text-fill-color:#111 !important; color:#111 !important; filter:none !important; }
  #results .pos-card.free::before, #results .pos-card.free::after { display:none !important; }
  #results .matrix-panel svg text { fill:#111 !important; }
}
@media print {
  .matrix-octagram-svg line[stroke="var(--gold)"] { stroke:#7a5a12 !important; opacity:1 !important; }
  .matrix-octagram-svg line[stroke="var(--violet)"] { stroke:#3b3270 !important; opacity:1 !important; }
  .matrix-octagram-svg line[stroke="var(--line)"] { stroke:#999 !important; opacity:1 !important; }
  .matrix-octagram-svg circle[stroke="var(--line)"] { stroke:#bbb !important; }
  .matrix-octagram-svg .node-bg { fill:#fff !important; stroke:#1a1730 !important; stroke-width:1.2 !important; }
  .matrix-octagram-svg text[fill="var(--gold-soft)"] { fill:#111 !important; font-weight:700 !important; }
  .matrix-octagram-svg text[fill="var(--violet)"] { fill:#222 !important; }
  .matrix-octagram-svg text[fill="var(--gold)"] { fill:#5a4a0a !important; }
  .matrix-panel { border:1.5px solid #1a1730 !important; }
}
@media print {
  @page { margin:14mm 12mm 16mm 12mm; }
  .result-hero { padding-top:10px !important; margin-bottom:10px !important; }
  .matrix-panel { min-height:62vh !important; display:flex !important; align-items:center !important; justify-content:center !important; margin:8px auto 0 !important; padding:12px !important; page-break-after:always !important; }
  .matrix-panel .octagram-wrap { width:100% !important; display:flex !important; justify-content:center !important; }
  .matrix-octagram-svg { max-height:64vh !important; width:auto !important; height:auto !important; }
  .pos-card { margin:10px 0 14px !important; padding:16px 20px !important; }
  .content-layout { gap:12px !important; }
}