/* StarPath — Design System
 * Two themes: Obsidian (default) + Aurum (light)
 */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500&display=swap');

:root {
  /* OBSIDIAN — Default theme */
  --bg-base: #0a0816;
  --bg-raised: #14102a;
  --bg-elevated: #1c1736;
  --bg-glass: rgba(20, 16, 42, 0.65);

  --line: #2a2342;
  --line-soft: #1f1a36;
  --line-strong: #3d3458;

  --ink-primary: #f4ede0;
  --ink-secondary: #c2b8a8;
  --ink-muted: #8b82a8;
  --ink-faint: #5a5478;

  --gold: #d4a574;
  --gold-dim: #9a7a55;
  --gold-glow: rgba(212, 165, 116, 0.18);

  --rose: #c47a8a;
  --celest: #7a8fc4;
  --sage: #8aa896;
  --signal: #d97757;

  --shadow-soft: 0 1px 0 rgba(255,255,255,0.04) inset, 0 20px 60px -20px rgba(0,0,0,0.6);
  --shadow-card: 0 1px 0 rgba(255,255,255,0.03) inset, 0 30px 80px -30px rgba(0,0,0,0.8);

  --noise-opacity: 0.06;

  --font-display: 'Instrument Serif', 'Times New Roman', serif;
  --font-ui: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
}

[data-theme="aurum"] {
  --bg-base: #ede5d3;
  --bg-raised: #f5efe1;
  --bg-elevated: #faf5e9;
  --bg-glass: rgba(245, 239, 225, 0.72);

  --line: #c9bea2;
  --line-soft: #d9cfb5;
  --line-strong: #a39473;

  --ink-primary: #1a1410;
  --ink-secondary: #3d3225;
  --ink-muted: #6b5d48;
  --ink-faint: #8d7f68;

  --gold: #8a5a2a;
  --gold-dim: #6e4720;
  --gold-glow: rgba(138, 90, 42, 0.14);

  --rose: #a44a3f;
  --celest: #1e2845;
  --sage: #4a6450;
  --signal: #a44a3f;

  --shadow-soft: 0 1px 0 rgba(255,255,255,0.5) inset, 0 14px 36px -22px rgba(60,40,20,0.25);
  --shadow-card: 0 1px 0 rgba(255,255,255,0.5) inset, 0 24px 60px -32px rgba(60,40,20,0.3);

  --noise-opacity: 0.04;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* Form elements должны наследовать цвет/шрифт от родителя,
   иначе UA-дефолт (ButtonText/чёрный) рендерится поверх тёмного фона
   в кликабельных карточках вроде <button class="card">. */
button, input, select, textarea {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

body {
  background: var(--bg-base);
  color: var(--ink-primary);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
  letter-spacing: -0.005em;
}

/* Subtle film grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.7'/></svg>");
  opacity: var(--noise-opacity);
  mix-blend-mode: overlay;
}

/* ——— TYPOGRAPHY ——— */
.display, .display-xl, .display-lg, .display-md {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.95;
}
.display-xl { font-size: clamp(44px, 6.6vw, 96px); }
.display-lg { font-size: clamp(48px, 6vw, 92px); }
.display-md { font-size: clamp(32px, 4vw, 56px); }

.italic { font-style: italic; }

.mono {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum', 'zero';
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 400;
}

.label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 400;
}

h1,h2,h3,h4 { font-weight: 400; margin: 0; }
p { margin: 0; text-wrap: pretty; }

/* ——— BUTTONS ——— */
.btn {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  background: transparent;
  color: var(--ink-primary);
  transition: all 160ms ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary {
  background: var(--ink-primary);
  color: var(--bg-base);
  border-color: var(--ink-primary);
}
.btn-primary:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--bg-base);
}
.btn-ghost {
  border-color: var(--line);
  color: var(--ink-primary);
}
.btn-ghost:hover { border-color: var(--ink-primary); }
.btn-gold {
  background: var(--gold);
  color: var(--bg-base);
  border-color: var(--gold);
}
.btn-gold:hover { filter: brightness(1.08); }
.btn-sm { padding: 8px 14px; font-size: 13px; }

.btn-icon {
  width: 36px; height: 36px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line);
}
.btn-icon:hover { border-color: var(--ink-primary); }

/* ——— CARDS / SURFACES ——— */
.card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
}
.card-glass {
  background: var(--bg-glass);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.hairline { border-top: 1px solid var(--line); }
.hairline-v { border-left: 1px solid var(--line); }

/* ——— APP CHROME ——— */
.app-frame {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Top role-switcher (prototype helper) */
.role-bar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px;
  background: var(--bg-glass);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  border-bottom: 1px solid var(--line-soft);
}
.role-bar-left { display: flex; align-items: center; gap: 28px; }
.role-pill-row { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-raised); }
.role-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--ink-muted);
  border: none;
  background: transparent;
  transition: all 160ms ease;
}
.role-pill.active { background: var(--ink-primary); color: var(--bg-base); }
.role-pill:not(.active):hover { color: var(--ink-primary); }

.subnav {
  display: flex; align-items: center; gap: 24px;
  padding: 10px 28px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
  overflow-x: auto;
}
.subnav-link {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: all 160ms ease;
  white-space: nowrap;
  background: none; border: none; border-bottom: 1px solid transparent;
}
.subnav-link.active { color: var(--ink-primary); border-bottom-color: var(--gold); }
.subnav-link:hover { color: var(--ink-primary); }

/* ——— LOGO ——— */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 22px;
  font-style: italic;
  letter-spacing: -0.02em;
  color: var(--ink-primary);
  text-decoration: none;
}
.logo-mark {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ——— INPUTS ——— */
.input, .textarea, .select {
  width: 100%;
  background: var(--bg-base);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--ink-primary);
  transition: border-color 160ms ease;
}
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--gold);
}
.input-bare {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 10px 0;
}
.input-bare:focus { outline: none; border-bottom-color: var(--gold); }

label.field { display: block; }
label.field > .label { display: block; margin-bottom: 6px; }

/* ——— BADGES / CHIPS ——— */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  color: var(--ink-secondary);
}
.chip-gold {
  background: var(--gold-glow);
  border-color: var(--gold-dim);
  color: var(--gold);
}
.chip-rose { color: var(--rose); border-color: color-mix(in oklab, var(--rose) 50%, transparent); background: color-mix(in oklab, var(--rose) 10%, transparent); }
.chip-sage { color: var(--sage); border-color: color-mix(in oklab, var(--sage) 50%, transparent); background: color-mix(in oklab, var(--sage) 10%, transparent); }

.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-muted); display: inline-block; }
.dot-gold { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.dot-rose { background: var(--rose); }
.dot-sage { background: var(--sage); }

/* ——— SCROLLBARS ——— */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--line-strong); }

/* ——— UTILITY ——— */
.section { padding: 96px 56px; position: relative; }
.section-sm { padding: 56px 56px; }
.section-lg { padding: 140px 56px; }
.row { display: flex; }
.col { display: flex; flex-direction: column; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-5 { gap: 20px; } .gap-6 { gap: 24px; } .gap-8 { gap: 32px; } .gap-10 { gap: 40px; } .gap-12 { gap: 48px; }
.center { display: flex; align-items: center; justify-content: center; }
.between { display: flex; align-items: center; justify-content: space-between; }
.muted { color: var(--ink-muted); }
.secondary { color: var(--ink-secondary); }
.gold { color: var(--gold); }
.rose { color: var(--rose); }
.sage { color: var(--sage); }
.celest { color: var(--celest); }

.grid { display: grid; }
.relative { position: relative; }
.absolute { position: absolute; }
.full { width: 100%; }

.divider { height: 1px; background: var(--line); width: 100%; }
.divider-v { width: 1px; background: var(--line); height: 100%; align-self: stretch; }

/* keyframes for natal chart */
@keyframes orbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
/* Бегущая строка (контент утроён → сдвиг на 1/3 = один набор, бесшовный цикл). */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-33.333%); }
}
@keyframes twinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}
@keyframes pulse-glow {
  0%, 100% { filter: drop-shadow(0 0 4px var(--gold-glow)); }
  50% { filter: drop-shadow(0 0 16px var(--gold)); }
}
@keyframes drift {
  0% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in { animation: fadeIn 600ms ease both; }

/* ——— responsive ——— */
/* Натальное колесо в hero масштабируется по ширине колонки (а не фикс. 520px). */
.hero-chart { position: relative; width: 100%; max-width: 520px; margin: 0 auto; }
.hero-chart > svg { width: 100%; height: auto; display: block; }

/* Оболочка мастера заказа: десктопный паддинг + мобильный. */
.wizard-shell { padding: 40px 56px 80px; }

@media (max-width: 900px) {
  .section { padding: 56px 24px; }
  .section-sm { padding: 32px 24px; }
  .section-lg { padding: 72px 24px; }
  .role-bar { padding: 12px 16px; }
  .subnav { padding: 8px 16px; }

  /* Любой многоколоночный grid сворачивается в одну колонку. */
  .rgrid { grid-template-columns: 1fr !important; }
  /* Сетки из карточек: 2 колонки на планшете. */
  .rgrid-2 { grid-template-columns: repeat(2, 1fr) !important; }

  /* Hero: копи сверху, колесо снизу. */
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    padding: 32px 24px 56px !important;
    min-height: auto !important;
  }
  .hero-copy { max-width: 100% !important; }

  /* Шапки секций «заголовок + подпись» стекаются. */
  .between-stack { flex-direction: column; align-items: flex-start !important; gap: 16px; }

  /* «Как это работает»: вертикальные разделители → горизонтальные. */
  .howit-grid > div { border-right: none !important; border-bottom: 1px solid var(--line); }
  .howit-grid > div:last-child { border-bottom: none; }

  /* FAQ: левая колонка перестаёт «липнуть». */
  .faq-aside { position: static !important; top: auto !important; }

  /* Навигация лендинга: прячем центральные ссылки, оставляем лого + кнопки. */
  .landing-nav { grid-template-columns: 1fr auto !important; gap: 16px !important; padding: 14px 20px !important; }
  .landing-nav-links { display: none !important; }

  /* Футер. */
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
  .site-footer { padding: 48px 24px 32px !important; }

  /* Мастер заказа. */
  .wizard-shell { padding: 32px 20px 64px; }
}

@media (max-width: 560px) {
  .rgrid-2 { grid-template-columns: 1fr !important; }
  .footer-grid { grid-template-columns: 1fr !important; }
  /* Ряды из инпутов/селектов/кнопок (форма персоны, билдер совместимости)
     складываются в столбец, чтобы не переполнять узкий экран. */
  .row-stack { flex-direction: column; align-items: stretch; gap: 12px !important; }
  .row-stack > * { width: 100%; }
  /* Плавающие подписи у колеса встают в поток под ним. */
  .hero-chart .card-glass {
    position: static !important;
    max-width: 100% !important;
    margin: 12px 0 0 !important;
  }
}