/* ============================================================
   ORACLE FATE — oraclefate.com
   The Observatory of Fate: luxury-mystical dark cosmic.
   No external requests. Dark only.
   ============================================================ */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('assets/fonts/cormorant.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('assets/fonts/cormorant-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/jost.woff2') format('woff2');
}

:root {
  --bg: #0A0A0F;
  --bg-deep: #060609;
  --surface: #12121D;
  --surface-2: #1A1A2E;
  --border: rgba(168, 150, 232, 0.13);
  --gold: #FFD700;
  --gold-soft: #E8C874;
  --gold-dim: rgba(232, 200, 116, 0.4);
  --gold-faint: rgba(232, 200, 116, 0.14);
  --purple: #6B4EFF;
  --lavender: #B8A8E8;
  --text: #EDEAF6;
  --text-dim: #A29BBD;
  --text-faint: #635D7E;
  --career: #4A9EFF;
  --love: #FF6B9D;
  --money: #4CAF7A;
  --self: #9C6ADE;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Jost', 'Avenir Next', 'Century Gothic', system-ui, sans-serif;
  color-scheme: dark;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: rgba(232, 200, 116, 0.25); color: #fff; }

a { color: var(--lavender); text-decoration: none; transition: color 0.3s; }
a:hover { color: var(--gold-soft); }

img { max-width: 100%; display: block; }

/* ---------- atmosphere layers ---------- */

#stars {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.grain {
  position: fixed;
  inset: -50%;
  z-index: 3;
  pointer-events: none;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

main { position: relative; z-index: 1; }

/* ---------- shared type ---------- */

.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold-dim);
  display: inline-flex;
  align-items: center;
  gap: 1em;
}
.eyebrow::before, .eyebrow::after {
  content: '';
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-faint));
}
.eyebrow::after { background: linear-gradient(90deg, var(--gold-faint), transparent); }

h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.15; }

.display {
  font-size: clamp(2.2rem, 5.4vw, 3.9rem);
  font-weight: 400;
  letter-spacing: 0.01em;
}
.display em { font-style: italic; color: var(--lavender); }

.lede {
  color: var(--text-dim);
  font-size: 1.06rem;
  max-width: 40em;
  margin-inline: auto;
}

.star-glyph { color: var(--gold-soft); }

/* ---------- reveal-on-scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--d, 0s);
}
.reveal.in { opacity: 1; transform: none; }

/* ---------- fixed nav (appears after hero) ---------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px clamp(20px, 4vw, 44px);
  background: rgba(8, 8, 13, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  transform: translateY(-110%);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav.visible { transform: none; }
.nav-brand {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--serif);
  font-size: 1.02rem;
  letter-spacing: 0.32em;
  color: var(--text);
}
.nav-brand img { width: 26px; height: 26px; }
.nav-links { display: flex; gap: clamp(16px, 3vw, 36px); }
.nav-links a {
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.nav-links a:hover { color: var(--gold-soft); }
@media (max-width: 640px) { .nav-links a:nth-child(n+3) { display: none; } }

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px;
  overflow: hidden;
}

.hero-nebula {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  opacity: 0;
  transition: opacity 2.5s ease;
}
.hero-nebula.loaded { opacity: 0.5; }

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: 0;
  transition: opacity 2.5s ease;
}
.hero-video.playing { opacity: 0.5; }

.hero::after {
  /* vignette that seats content into the void */
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 65% at 50% 42%, transparent 30%, var(--bg) 100%),
    linear-gradient(180deg, rgba(10,10,15,0.25), transparent 30%, transparent 70%, var(--bg));
  pointer-events: none;
}

.hero-frame {
  position: absolute;
  inset: clamp(14px, 2.6vw, 34px);
  pointer-events: none;
  z-index: 2;
}
.hero-frame::before, .hero-frame::after,
.hero-frame i::before, .hero-frame i::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  border: 1px solid var(--gold-faint);
}
.hero-frame::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.hero-frame::after { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.hero-frame i::before { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.hero-frame i::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.hero-inner { position: relative; z-index: 2; max-width: 880px; }

.hero-sigil {
  width: clamp(58px, 8vw, 84px);
  margin: 0 auto 30px;
  filter: drop-shadow(0 0 22px rgba(184, 168, 232, 0.35));
  animation: breathe 6s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 18px rgba(184,168,232,0.3)); }
  50% { transform: scale(1.045); filter: drop-shadow(0 0 30px rgba(184,168,232,0.5)); }
}

.hero-eyebrow { margin-bottom: 26px; }

.wordmark {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.3rem, 9.5vw, 6.4rem);
  letter-spacing: clamp(0.08em, 2vw, 0.2em);
  text-indent: clamp(0.08em, 2vw, 0.2em); /* optically recenter letterspaced caps */
  line-height: 1.08;
  background: linear-gradient(160deg, #FFFFFF 20%, var(--lavender) 75%, #8E7BD8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.hero-tagline {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.35rem, 2.9vw, 1.95rem);
  color: var(--text);
  margin: 26px auto 0;
  max-width: 20em;
}
.hero-sub {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(0.92rem, 1.6vw, 1.05rem);
  letter-spacing: 0.03em;
  color: var(--text-dim);
  margin: 16px auto 0;
  max-width: 30em;
}

.hero-cta {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.btn-vision {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold-soft);
  background: transparent;
  border: 1px solid var(--gold-dim);
  border-radius: 999px;
  padding: 17px 42px 16px 46px;
  cursor: pointer;
  position: relative;
  transition: all 0.45s ease;
  animation: ctaglow 4s ease-in-out infinite;
}
.btn-vision:hover {
  border-color: var(--gold-soft);
  color: #FFF3C4;
  box-shadow: 0 0 34px rgba(232, 200, 116, 0.22), inset 0 0 18px rgba(232, 200, 116, 0.08);
}
@keyframes ctaglow {
  0%, 100% { box-shadow: 0 0 14px rgba(232, 200, 116, 0.10); }
  50% { box-shadow: 0 0 28px rgba(232, 200, 116, 0.22); }
}

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--text-faint);
  border: 1px solid rgba(168, 150, 232, 0.14);
  border-radius: 10px;
  padding: 10px 18px;
  transition: all 0.4s;
}
.store-badge svg { width: 15px; height: 18px; fill: currentColor; opacity: 0.8; }
a.store-badge:hover { color: var(--text-dim); border-color: rgba(168, 150, 232, 0.3); }

.scroll-cue {
  position: absolute;
  bottom: 34px;
  left: 50%;
  width: 1px;
  height: 58px;
  background: rgba(168, 150, 232, 0.14);
  z-index: 2;
}
.scroll-cue::after {
  content: '';
  position: absolute;
  left: -1px;
  width: 3px;
  height: 10px;
  border-radius: 2px;
  background: var(--gold-dim);
  animation: cuefall 2.6s ease-in-out infinite;
}
@keyframes cuefall {
  0% { top: -10px; opacity: 0; }
  30% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* ---------- sections shared ---------- */

section { position: relative; padding: clamp(90px, 14vh, 150px) 24px; }
.section-head { text-align: center; max-width: 760px; margin: 0 auto clamp(48px, 7vh, 80px); }
.section-head .eyebrow { margin-bottom: 22px; }
.section-head .lede { margin-top: 20px; }

.hairline {
  width: min(320px, 40%);
  height: 1px;
  margin: 0 auto;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--gold-faint) 30%, var(--gold-faint) 70%, transparent);
}

/* ---------- the vision (centerpiece) ---------- */

.vision-stage {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  min-height: 480px;
  display: grid;
  place-items: center;
}
.vision-stage > .seal-wrap, .vision-stage > .vision-card { grid-area: 1 / 1; }

.seal-wrap {
  position: relative;
  background: none;
  border: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  transition: opacity 0.7s ease, transform 0.7s ease;
  -webkit-tap-highlight-color: transparent;
}
.seal-wrap:focus-visible { outline: 1px solid var(--gold-dim); outline-offset: 12px; border-radius: 50%; }

.seal-halo {
  position: relative;
  width: clamp(200px, 46vw, 280px);
  height: clamp(200px, 46vw, 280px);
  display: grid;
  place-items: center;
}
.seal-halo::before {
  /* slow-turning ray wheel */
  content: '';
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg, rgba(232,200,116,0.07) 8deg, transparent 16deg,
    transparent 60deg, rgba(232,200,116,0.05) 68deg, transparent 76deg,
    transparent 120deg, rgba(232,200,116,0.07) 128deg, transparent 136deg,
    transparent 180deg, rgba(232,200,116,0.05) 188deg, transparent 196deg,
    transparent 240deg, rgba(232,200,116,0.07) 248deg, transparent 256deg,
    transparent 300deg, rgba(232,200,116,0.05) 308deg, transparent 316deg, transparent 360deg
  );
  animation: haloturn 40s linear infinite;
}
.seal-halo::after {
  content: '';
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 1px solid var(--gold-faint);
  animation: sealpulse 3.4s ease-out infinite;
}
@keyframes haloturn { to { transform: rotate(360deg); } }
@keyframes sealpulse {
  0% { transform: scale(0.92); opacity: 0.9; }
  70%, 100% { transform: scale(1.22); opacity: 0; }
}

.seal-img {
  width: 78%;
  height: 78%;
  object-fit: contain;
  border-radius: 50%;
  filter: drop-shadow(0 0 30px rgba(232, 200, 116, 0.25));
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s;
}
.seal-wrap:hover .seal-img {
  transform: scale(1.04);
  filter: drop-shadow(0 0 44px rgba(232, 200, 116, 0.4));
}

.seal-hint {
  font-size: 0.72rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold-dim);
}

.vision-stage.broken .seal-wrap {
  opacity: 0;
  transform: scale(1.25);
  pointer-events: none;
}

/* burst particles (JS positions them via --tx/--ty) */
.burst {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-soft);
  opacity: 0;
  pointer-events: none;
}
.vision-stage.broken .burst {
  animation: burstfly 1.1s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
@keyframes burstfly {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.2); }
}

.vision-card {
  position: relative;
  width: 100%;
  display: none;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: clamp(28px, 5vw, 54px);
  background: linear-gradient(170deg, rgba(26, 26, 46, 0.65), rgba(14, 14, 22, 0.9));
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(232, 200, 116, 0.08);
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.vision-card::before {
  /* pillar accent */
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 2px;
  border-radius: 2px;
  background: var(--pc, var(--gold-soft));
  box-shadow: 0 0 18px var(--pc, var(--gold-soft));
  transition: background 0.6s, box-shadow 0.6s;
}
.vision-stage.broken .vision-card { display: flex; }
.vision-stage.open .vision-card { opacity: 1; transform: none; }

.vision-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--pc, var(--gold-dim));
  margin-bottom: 26px;
  transition: color 0.6s;
}

.vision-text {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.3rem, 3vw, 1.72rem);
  line-height: 1.5;
  color: var(--text);
}
.vision-text .w {
  opacity: 0;
  transition: opacity 0.5s ease;
  transition-delay: var(--wd, 0s);
}
.vision-stage.open .vision-text .w { opacity: 1; }

.vision-sig {
  margin-top: 30px;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  color: var(--text-faint);
}

.btn-another {
  margin: 34px auto 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--gold-faint);
  padding: 4px 2px;
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-dim);
  cursor: pointer;
  transition: all 0.4s;
}
.btn-another:hover { color: var(--gold-soft); border-color: var(--gold-dim); }

/* ---------- values band (the difference) ---------- */

.values { max-width: 1080px; margin: 0 auto; }
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px);
}
@media (max-width: 820px) { .values-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

.value-col { position: relative; padding-top: 30px; }
.value-col::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 46px; height: 1px;
  background: var(--gold-dim);
}
.value-col .vmark {
  font-family: var(--serif);
  font-size: 1.7rem;
  color: var(--gold-soft);
  display: block;
  margin-bottom: 14px;
  opacity: 0.9;
}
.value-col h3 { font-size: 1.5rem; margin-bottom: 12px; }
.value-col p { color: var(--text-dim); font-size: 0.97rem; }

.values-art {
  margin: clamp(50px, 8vh, 84px) auto 0;
  max-width: 460px;
}
.values-art img {
  width: 100%;
  border-radius: 50%;
  opacity: 0.82;
  mask-image: radial-gradient(circle, black 54%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle, black 54%, transparent 72%);
  animation: slowspin 260s linear infinite;
}

/* ---------- editorial split (the Oracle) ---------- */

.split {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(36px, 6vw, 84px);
  align-items: center;
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 44px; } }

.split-body .eyebrow { margin-bottom: 22px; }
.split-body h2 { margin-bottom: 22px; }
.split-points { margin-top: 32px; display: flex; flex-direction: column; gap: 22px; }
.split-point { position: relative; padding-left: 26px; }
.split-point::before {
  content: '✦';
  position: absolute;
  left: 0; top: 2px;
  color: var(--gold-dim);
  font-size: 0.8rem;
}
.split-point h4 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--lavender);
  margin-bottom: 4px;
}
.split-point p { color: var(--text-dim); font-size: 0.95rem; }

/* glass chat panel visual */
.chat-panel {
  position: relative;
  background: linear-gradient(180deg, rgba(26, 26, 46, 0.5), rgba(14, 14, 22, 0.7));
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 26px 24px 30px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}
.chat-panel .panel-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
}
.chat-panel .panel-tabs span {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-faint);
}
.chat-panel .panel-tabs span.on { border-color: var(--self); color: var(--self); }
.bubble {
  max-width: 82%;
  padding: 12px 15px;
  border-radius: 14px;
  font-size: 0.88rem;
  line-height: 1.5;
  margin-bottom: 12px;
}
.bubble.you {
  margin-left: auto;
  background: rgba(156, 106, 222, 0.14);
  border: 1px solid rgba(156, 106, 222, 0.3);
  color: var(--text);
  border-bottom-right-radius: 4px;
}
.bubble.oracle {
  background: rgba(26, 26, 46, 0.7);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-bottom-left-radius: 4px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.98rem;
}
.bubble.oracle b { color: var(--gold-soft); font-style: normal; font-weight: 400; }

/* ---------- extra card ornaments ---------- */

.orn-pillars { display: flex; gap: 16px; align-items: center; }
.orn-pillars i {
  width: 30px; height: 46px;
  border-radius: 40% 40% 8px 8px;
  opacity: 0.85;
}
.orn-pillars i:nth-child(1) { background: linear-gradient(180deg, var(--career), transparent); }
.orn-pillars i:nth-child(2) { background: linear-gradient(180deg, var(--love), transparent); height: 58px; }
.orn-pillars i:nth-child(3) { background: linear-gradient(180deg, var(--money), transparent); }
.orn-pillars i:nth-child(4) { background: linear-gradient(180deg, var(--self), transparent); height: 52px; }

.orn-tribe { display: flex; gap: 20px; font-size: 1.7rem; color: var(--gold-dim); }
.orn-tribe span { animation: breathe 5s ease-in-out infinite; }
.orn-tribe span:nth-child(2) { animation-delay: 1.2s; }
.orn-tribe span:nth-child(3) { animation-delay: 2.4s; }
.orn-tribe span:nth-child(4) { animation-delay: 3.6s; }

.orn-journey { display: flex; align-items: center; gap: 9px; }
.orn-journey i {
  color: var(--gold-soft);
  font-size: 0.9rem;
  opacity: 0.4;
}
.orn-journey i.lit { opacity: 1; text-shadow: 0 0 10px var(--gold-soft); }
.orn-journey i:nth-child(1), .orn-journey i:nth-child(2), .orn-journey i:nth-child(3) { opacity: 1; text-shadow: 0 0 8px var(--gold-soft); }

.orn-widget {
  width: 118px; height: 118px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: linear-gradient(160deg, rgba(26,26,46,0.9), rgba(10,10,15,0.95));
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}
.orn-widget .wline { height: 5px; border-radius: 3px; background: var(--surface-2); }
.orn-widget .wline:nth-child(1) { width: 80%; margin-bottom: 5px; }
.orn-widget .wline:nth-child(2) { width: 60%; }
.orn-widget .wmoon {
  align-self: flex-end;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #EDEAF6, #9B98B0 55%, #2A2A40);
  box-shadow: 0 0 14px rgba(237,234,246,0.25);
}
.orn-widget .wmark { color: var(--gold-dim); font-size: 0.7rem; align-self: flex-start; }

.orn-weather {
  position: relative;
  width: 80px; height: 80px;
  display: grid;
  place-items: center;
}
.orn-weather .moon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 34%, #EDEAF6, #9B98B0 52%, #3A3A54 90%);
  box-shadow: 0 0 24px rgba(237,234,246,0.28);
}
.orn-weather .orbit {
  position: absolute;
  inset: -4px;
  border: 1px solid var(--gold-faint);
  border-radius: 50%;
  animation: haloturn 22s linear infinite;
}
.orn-weather .orbit::after {
  content: '';
  position: absolute;
  top: -3px; left: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold-soft);
  box-shadow: 0 0 10px var(--gold-soft);
}

/* ---------- how the oracle sees ---------- */

.how { max-width: 1080px; margin: 0 auto; }
.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px);
}
@media (max-width: 820px) { .how-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }

.how-step { position: relative; padding-top: 34px; }
.how-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 54px;
  height: 1px;
  background: var(--gold-dim);
}
.how-num {
  position: absolute;
  top: -22px;
  right: 0;
  font-family: var(--serif);
  font-size: 5.4rem;
  font-weight: 300;
  line-height: 1;
  color: rgba(184, 168, 232, 0.07);
  user-select: none;
}
.how-step h3 { font-size: 1.65rem; margin-bottom: 14px; }
.how-step p { color: var(--text-dim); font-size: 0.98rem; }

.how-art {
  margin: clamp(56px, 8vh, 90px) auto 0;
  max-width: 520px;
  position: relative;
}
.how-art img {
  width: 100%;
  border-radius: 50%;
  opacity: 0.85;
  mask-image: radial-gradient(circle, black 55%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle, black 55%, transparent 72%);
  animation: slowspin 240s linear infinite;
}
@keyframes slowspin { to { transform: rotate(360deg); } }

/* ---------- instruments (features) ---------- */

.instruments { max-width: 1160px; margin: 0 auto; }
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
}

.card {
  position: relative;
  background: linear-gradient(180deg, rgba(26, 26, 46, 0.5), rgba(16, 16, 26, 0.7));
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.5s, box-shadow 0.5s;
}
.card:hover {
  transform: translateY(-5px);
  border-color: rgba(232, 200, 116, 0.28);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.card-art { height: 170px; overflow: hidden; position: relative; }
.card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  transition: opacity 0.6s, transform 0.6s ease;
}
.card:hover .card-art img { opacity: 1; transform: scale(1.04); }
.card-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(16, 16, 26, 0.92));
}

/* CSS-drawn art for cards without images */
.card-art.orn { display: grid; place-items: center; background: radial-gradient(circle at 50% 60%, rgba(107, 78, 255, 0.12), transparent 70%); }
.orn-rituals { display: flex; gap: 26px; align-items: center; }
.orn-rituals span {
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--gold-dim);
  animation: breathe 5s ease-in-out infinite;
}
.orn-rituals span:nth-child(2) { animation-delay: 1.6s; font-size: 2.6rem; }
.orn-rituals span:nth-child(3) { animation-delay: 3.2s; }

.orn-chat { display: flex; flex-direction: column; gap: 9px; width: 64%; }
.orn-chat i {
  height: 10px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.orn-chat i:nth-child(1) { width: 72%; border-left: 3px solid var(--career); }
.orn-chat i:nth-child(2) { width: 88%; align-self: flex-end; border-right: 3px solid var(--love); }
.orn-chat i:nth-child(3) { width: 60%; border-left: 3px solid var(--money); }
.orn-chat i:nth-child(4) { width: 78%; align-self: flex-end; border-right: 3px solid var(--self); }

.card-body { padding: 26px 28px 30px; }
.card-body h3 { font-size: 1.5rem; margin-bottom: 10px; }
.card-body p { color: var(--text-dim); font-size: 0.94rem; line-height: 1.65; }

.pillar-dots { display: flex; gap: 7px; margin-top: 16px; }
.pillar-dots i { width: 7px; height: 7px; border-radius: 50%; }
.pillar-dots i:nth-child(1) { background: var(--career); }
.pillar-dots i:nth-child(2) { background: var(--love); }
.pillar-dots i:nth-child(3) { background: var(--money); }
.pillar-dots i:nth-child(4) { background: var(--self); }

/* ---------- closing ---------- */

.closing { text-align: center; padding-bottom: clamp(70px, 10vh, 110px); }
.closing .hero-sigil { width: 52px; margin-bottom: 34px; animation-duration: 8s; }
.closing-line {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.6vw, 3.2rem);
  max-width: 17em;
  margin: 0 auto;
}
.closing-line em { font-style: italic; color: var(--lavender); }
.closing-sub { margin-top: 22px; color: var(--text-dim); }
.closing .store-badge { margin-top: 38px; }

/* ---------- footer ---------- */

footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--border);
  padding: 42px clamp(24px, 5vw, 60px) 48px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  background: rgba(8, 8, 12, 0.6);
}
.foot-brand { display: flex; align-items: center; gap: 12px; }
.foot-brand img { width: 24px; opacity: 0.75; }
.foot-brand span {
  font-family: var(--serif);
  letter-spacing: 0.3em;
  font-size: 0.92rem;
  color: var(--text-dim);
}
.foot-nav { display: flex; gap: 28px; }
.foot-nav a {
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.foot-nav a:hover { color: var(--gold-soft); }
.foot-line {
  width: 100%;
  text-align: center;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  margin-top: 10px;
}
.foot-line .star-glyph { opacity: 0.7; }

/* ---------- ambient sound toggle ---------- */

.sound-toggle {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 11;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--gold-dim);
  background: rgba(10, 10, 15, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color 0.4s, box-shadow 0.4s;
  animation: togglebreathe 4.2s ease-in-out infinite;
}
.sound-toggle::after {
  /* idle beacon: slow expanding ring, same language as the seal pulse */
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid var(--gold-dim);
  pointer-events: none;
  animation: togglepulse 3.6s ease-out infinite;
}
.sound-toggle.on { animation: none; box-shadow: 0 0 14px rgba(232, 200, 116, 0.14); }
.sound-toggle.on::after { animation: none; opacity: 0; }
.sound-toggle:hover {
  border-color: var(--gold-soft);
  box-shadow: 0 0 22px rgba(232, 200, 116, 0.22);
}
@keyframes togglebreathe {
  0%, 100% { box-shadow: 0 0 10px rgba(232, 200, 116, 0.10); }
  50% { box-shadow: 0 0 26px rgba(232, 200, 116, 0.32); }
}
@keyframes togglepulse {
  0% { transform: scale(1); opacity: 0.85; }
  65%, 100% { transform: scale(1.8); opacity: 0; }
}
.sound-toggle .eq {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  height: 14px;
}
.sound-toggle .eq i {
  width: 2px;
  height: 4px;
  background: var(--gold-soft);
  opacity: 0.75;
  border-radius: 1px;
  transition: background 0.4s, opacity 0.4s;
}
.sound-toggle.on .eq i {
  background: var(--gold-soft);
  opacity: 1;
  animation: eqbob 1.7s ease-in-out infinite;
}
.sound-toggle.on .eq i:nth-child(2) { animation-delay: 0.35s; }
.sound-toggle.on .eq i:nth-child(3) { animation-delay: 0.7s; }
@keyframes eqbob {
  0%, 100% { height: 4px; }
  50% { height: 14px; }
}

/* ---------- document pages (privacy / terms / support) ---------- */

.doc-page { background: var(--bg); }
.doc-page::before {
  /* sparse static stars, pure CSS */
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(237, 234, 246, 0.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 9%, rgba(237, 234, 246, 0.35) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 55% 30%, rgba(232, 200, 116, 0.3) 50%, transparent 51%),
    radial-gradient(1px 1px at 32% 64%, rgba(237, 234, 246, 0.3) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 52%, rgba(237, 234, 246, 0.4) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 8% 86%, rgba(184, 168, 232, 0.3) 50%, transparent 51%),
    radial-gradient(1px 1px at 66% 88%, rgba(237, 234, 246, 0.3) 50%, transparent 51%);
}

.doc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px clamp(24px, 5vw, 60px);
  border-bottom: 1px solid var(--border);
}
.doc-header .nav-brand img { width: 28px; height: 28px; }

.doc {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(56px, 9vh, 96px) 24px 110px;
}
.doc-eyebrow { margin-bottom: 20px; }
.doc h1 { font-size: clamp(2.2rem, 5vw, 3.1rem); font-weight: 400; margin-bottom: 14px; }
.doc-updated { font-size: 0.8rem; letter-spacing: 0.14em; color: var(--text-faint); margin-bottom: 52px; }

.doc h2 {
  font-size: 1.55rem;
  font-weight: 500;
  margin: 52px 0 16px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}
.doc h3 { font-size: 1.15rem; font-family: var(--sans); font-weight: 500; letter-spacing: 0.04em; margin: 28px 0 10px; color: var(--lavender); }
.doc p { color: var(--text-dim); margin-bottom: 16px; font-size: 0.98rem; }
.doc ul { margin: 0 0 18px 1.2em; color: var(--text-dim); font-size: 0.98rem; }
.doc li { margin-bottom: 9px; }
.doc li::marker { color: var(--gold-dim); }
.doc strong { color: var(--text); font-weight: 500; }
.doc a { border-bottom: 1px solid var(--gold-faint); }

.doc-note {
  background: rgba(232, 200, 116, 0.05);
  border: 1px solid var(--gold-faint);
  border-radius: 12px;
  padding: 18px 22px;
  font-size: 0.92rem;
  color: var(--text-dim);
  margin: 26px 0;
}

/* support page cards */
.faq { margin-top: 8px; }
.faq details {
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 12px;
  background: rgba(26, 26, 46, 0.35);
  overflow: hidden;
}
.faq summary {
  cursor: pointer;
  padding: 18px 22px;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--text);
  list-style: none;
  position: relative;
  transition: color 0.3s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold-dim);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.2rem;
  transition: transform 0.3s;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq summary:hover { color: var(--gold-soft); }
.faq .faq-a { padding: 0 22px 20px; color: var(--text-dim); font-size: 0.95rem; }

.support-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 20px;
  border: 1px solid var(--gold-dim);
  border-radius: 999px;
  padding: 15px 34px;
  font-size: 0.8rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.support-cta:hover { box-shadow: 0 0 28px rgba(232, 200, 116, 0.18); color: #FFF3C4; }

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .vision-text .w { opacity: 1; }
  .hero-nebula.loaded { opacity: 0.5; }
}