/* ==========================================================================
   Astrool promo site — shared stylesheet
   Direction: "celestial cartography" — antique star-atlas engraving rather
   than the usual purple-gradient mystic-app look. Gold hairlines, deep
   indigo ground, real constellation geometry.
   Palette is inherited from the Flutter app's own theme (lib/core/theme/
   app_theme.dart) so the promo site -> app handoff does not feel like two
   different products.
   ========================================================================== */

:root {
  /* Ground */
  --void: #0B0918;
  --deep: #151030;
  --raised: #1E1745;
  --line: #2C2456;

  /* Ink */
  --text: #EDEAF7;
  --muted: #A79FC8;
  --dim: #6F678F;

  /* Accents */
  --gold: #E7C46B;
  --gold-dim: #B8975094;
  --violet: #8B6CE0;
  --violet-dim: #7C4DCC;

  /* Type scale — fluid, locked to a 1.25 ratio at both ends */
  --t-hero: clamp(2.6rem, 1.2rem + 5.6vw, 5.6rem);
  --t-h1: clamp(2.1rem, 1.3rem + 3vw, 3.4rem);
  --t-h2: clamp(1.5rem, 1.1rem + 1.5vw, 2.1rem);
  --t-h3: clamp(1.15rem, 1rem + .6vw, 1.4rem);
  --t-body: clamp(1rem, .96rem + .18vw, 1.09rem);
  --t-sm: .92rem;
  --t-xs: .8rem;

  /* Rhythm — deliberately not uniform */
  --gap: 1.25rem;
  --pad-section: clamp(4rem, 3rem + 5vw, 8.5rem);
  --wrap: 1180px;
  --wrap-prose: 720px;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 26px;

  --dur: 260ms;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* The site commits to one visual world — a night sky. A light theme would
   undo the entire premise, so the palette is deliberately single-theme and
   we tell the browser so rather than leaving form controls guessing. */
:root { color-scheme: dark; }

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  background: var(--void);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--t-body);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, .display {
  font-family: 'Cinzel Decorative', Georgia, serif;
  font-weight: 700;
  line-height: 1.12;
  text-wrap: balance;
  letter-spacing: -.01em;
}

a { color: var(--violet); text-decoration: none; }
img, svg, canvas { display: block; max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2rem); }
.prose-wrap { max-width: var(--wrap-prose); }

/* Hidden until focused. The old trick for this — position:absolute with
   left:-9999px — breaks RTL: in a right-to-left block the far-left box
   extends the scrollable area and pushes the entire page out of the
   viewport, rendering it blank. Clipping to a 1px box hides the link in
   both directions without moving it anywhere. */
.skip {
  position: absolute; top: 0; inset-inline-start: 0; z-index: 200;
  width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
  background: var(--gold); color: var(--void);
  padding: .7rem 1.2rem; border-radius: 0 0 var(--r-sm) 0; font-weight: 600;
}
.skip:focus {
  width: auto; height: auto; clip-path: none; overflow: visible;
}

/* ---------- Atmosphere -------------------------------------------------- */
/* The starfield is a canvas so density can scale with viewport area instead
   of shipping a fixed background image that is either too sparse on desktop
   or wasteful on mobile. */
#stars {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
.veil {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 90% 55% at 50% -10%, #2A1F5E55, transparent 70%),
    radial-gradient(ellipse 60% 45% at 88% 12%, #7C4DCC22, transparent 70%);
}
main, header.site, footer.site { position: relative; z-index: 2; }

/* ---------- Nav --------------------------------------------------------- */
header.site {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: #0B0918CC;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
header.site.scrolled { border-bottom-color: var(--line); background: #0B0918EE; }
.nav { display: flex; align-items: center; gap: var(--gap); height: 68px; }
.brand { display: flex; align-items: center; gap: .6rem; font-family: 'Cinzel Decorative', serif; font-size: 1.18rem; color: var(--text); letter-spacing: .06em; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.brand .spark { color: var(--gold); }
.nav-links { display: flex; gap: 1.5rem; margin-left: auto; align-items: center; }
.nav-links a {
  color: var(--muted); font-size: var(--t-sm); font-weight: 500;
  position: relative; padding: .3rem 0; transition: color var(--dur) var(--ease);
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur) var(--ease);
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

/* The CTA is an <a> inside .nav-links, so the plain-link rules above (same
   specificity, later in the cascade) would flatten its padding and colour and
   draw the hover underline across it. Restore the button's own treatment. */
.nav-links a.btn { padding: .7rem 1.35rem; font-weight: 600; }
.nav-links a.btn-gold { color: #1A1204; }
.nav-links a.btn::after { display: none; }

/* Header language picker — collapsed shows only the current flag in a
   circle; opening reveals the full LANGS_BY_SPEAKERS list. */
.lang-pick { position: relative; }
.lang-pick-btn {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--raised); border: 1px solid var(--line);
  cursor: pointer; padding: 0; font-size: 1.35rem; line-height: 1;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.lang-pick-btn:hover, .lang-pick-btn[aria-expanded="true"] { border-color: var(--gold-dim); }
.lang-pick-btn .flag { display: block; border-radius: 50%; overflow: hidden; }
.lang-pick-list {
  position: absolute; top: calc(100% + .6rem); right: 0; z-index: 60;
  display: none; flex-direction: column; gap: .1rem; min-width: 190px;
  background: #171331F5; backdrop-filter: blur(16px);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: .4rem; box-shadow: 0 18px 40px -12px #000A;
}
.lang-pick-list.open { display: flex; }
.lang-pick-list a {
  display: flex; align-items: center; gap: .65rem;
  padding: .5rem .6rem; border-radius: calc(var(--r-sm) - 4px);
  color: var(--muted); font-size: var(--t-sm); font-weight: 500;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.lang-pick-list a .flag { font-size: 1.05rem; }
.lang-pick-list a:hover { color: var(--text); background: #8B6CE014; }
.lang-pick-list a[aria-current="true"] { color: var(--gold); font-weight: 600; }

.nav-toggle {
  display: none; margin-left: auto; background: none; border: 1px solid var(--line);
  color: var(--text); width: 42px; height: 42px; border-radius: var(--r-sm);
  cursor: pointer; align-items: center; justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ''; display: block; width: 17px; height: 1.5px; background: var(--text);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle span::before { transform: translateY(-5.5px); }
.nav-toggle span::after { transform: translateY(4px); }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: rotate(-45deg) translateY(0); }

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #0D0B1AF7; backdrop-filter: blur(16px);
    border-block: 1px solid var(--line);
    padding: .5rem clamp(1.1rem, 4vw, 2rem) 1.2rem;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: .85rem 0; border-bottom: 1px solid #2C245655; font-size: 1rem; }
  .nav-links a::after { display: none; }
  .nav-links .btn { margin-top: .9rem; justify-content: center; }
  .lang-pick { align-self: center; margin-top: .9rem; }
  .lang-pick-list { right: auto; left: 50%; transform: translateX(-50%); }
}

/* ---------- Buttons ----------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .82rem 1.5rem; border-radius: 999px; font-weight: 600;
  font-size: var(--t-sm); letter-spacing: .01em; cursor: pointer;
  border: 1px solid transparent; white-space: nowrap;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn-gold {
  background: linear-gradient(135deg, #F0D584, var(--gold) 55%, #C9A44E);
  color: #1A1204; box-shadow: 0 6px 22px -8px #E7C46B99;
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -8px #E7C46BAA; }
.btn-ghost { border-color: var(--line); color: var(--text); background: #FFFFFF06; }
.btn-ghost:hover { border-color: var(--violet); background: #8B6CE01A; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Store badges — built as real markup, not images, so they stay crisp and
   translatable and never 404 on a missing asset. */
.stores { display: flex; flex-wrap: wrap; gap: .8rem; }
.store {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .68rem 1.25rem; border-radius: 14px;
  border: 1px solid var(--line); background: #FFFFFF08;
  color: var(--text); min-width: 190px;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.store:hover { transform: translateY(-3px); border-color: var(--gold); background: #E7C46B12; }
.store svg { width: 25px; height: 25px; flex: none; fill: currentColor; }
.store b { display: block; font-size: .97rem; font-weight: 600; line-height: 1.25; }
.store small { display: block; font-size: .7rem; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.store.soon { opacity: .62; cursor: default; }
.store.soon:hover { transform: none; border-color: var(--line); background: #FFFFFF08; }

/* ---------- Hero -------------------------------------------------------- */
/* The sticky header already supplies visual clearance, so the hero only needs
   enough top padding to clear it — a large clamped value here left an obvious
   dead band above the headline. */
.hero { padding: clamp(1.25rem, .6rem + 2vw, 2.5rem) 0 clamp(3rem, 2rem + 4vw, 5rem); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); border: 1px solid var(--gold-dim);
  padding: .4rem .9rem; border-radius: 999px; background: #E7C46B0D;
  margin-bottom: 1.5rem;
}
.hero h1 { font-size: var(--t-hero); margin-bottom: 1.3rem; }
.hero h1 em { font-style: normal; color: var(--gold); display: block; }
.hero .lede { font-size: clamp(1.03rem, .98rem + .35vw, 1.22rem); color: var(--muted); max-width: 52ch; margin-bottom: 2.1rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: 2rem; }

.trust { display: flex; flex-wrap: wrap; gap: 1.6rem; padding-top: 1.6rem; }
.trust div strong { display: block; font-family: 'Cinzel Decorative', serif; font-size: 1.5rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.trust div span { font-size: var(--t-xs); color: var(--muted); letter-spacing: .05em; text-transform: uppercase; }

/* Hero entrance. Elements carrying [data-seq] start offset and settle in
   order once <body> gets .loaded; site.js assigns each one its --seq-delay.
   Guarded on .loaded so a JS-blocked page still shows everything. */
.hero [data-seq] {
  opacity: 0; transform: translateY(16px);
  transition: opacity .8s var(--ease) var(--seq-delay, 0ms),
              transform .8s var(--ease) var(--seq-delay, 0ms);
}
body.loaded .hero [data-seq] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hero [data-seq] { opacity: 1; transform: none; }
}

/* The gold headline sweeps its colour in behind the text. */
body.loaded .hero h1 em {
  background: linear-gradient(100deg, var(--gold) 0%, #FFF3D0 45%, var(--gold) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sheen 7s var(--ease) 1.2s infinite;
}
@keyframes sheen {
  0%, 62% { background-position: 130% 0; }
  86%, 100% { background-position: -30% 0; }
}

/* Eyebrow spark keeps a slow pulse so the hero never fully settles. */
.eyebrow [aria-hidden] { animation: twinkle 3.4s ease-in-out infinite; display: inline-block; }
@keyframes twinkle {
  0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
  50% { opacity: .5; transform: scale(.82) rotate(45deg); }
}

/* Buttons get a light sweep on hover instead of only a colour shift. */
.btn { position: relative; overflow: hidden; }
.btn::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, #FFFFFF38 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .65s var(--ease);
  pointer-events: none;
}
.btn:hover::before, .btn:focus-visible::before { transform: translateX(120%); }

/* Hero visual — the constellation disc */
.disc {
  position: relative; aspect-ratio: 1; max-width: 480px; margin-inline: auto; width: 100%;
  align-self: start; margin-block-start: 12px;
  /* transform is written by the pointer-tilt handler in site.js */
  transition: transform .5s var(--ease);
  transform-style: preserve-3d;
  animation: float 9s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -12px; }
}
.disc canvas { width: 100%; height: 100%; border-radius: 50%; }
.disc-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2.5px solid var(--gold-dim); pointer-events: none;
  animation: spin 34s linear infinite;
}
.disc-ring:nth-of-type(2) {
  inset: 9%; border-color: #4A3E8A; border-width: 2px;
  animation-duration: 24s; animation-direction: reverse;
}
.disc-ring:nth-of-type(3) {
  inset: 21%; border-style: dashed; border-color: #8B6CE088; border-width: 2.5px;
  animation-duration: 16s;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ---------- Sections ---------------------------------------------------- */
section { padding-block: var(--pad-section); }
.sec-head { max-width: 640px; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-label {
  font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase;
  color: var(--violet); margin-bottom: .9rem; display: block; font-weight: 600;
}
.sec-head h2 { font-size: var(--t-h2); margin-bottom: .9rem; }
.sec-head p { color: var(--muted); }

/* Bento — deliberately non-uniform so it does not read as a default card grid */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gap); }
.card {
  background: linear-gradient(160deg, #1E1745, #151030 70%);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.4rem, 2.4vw, 2.1rem);
  grid-column: span 2; position: relative; overflow: hidden;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
  display: flex; flex-direction: column; gap: .7rem;
}
.card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), #8B6CE026, transparent 55%);
  opacity: 0; transition: opacity var(--dur) var(--ease); pointer-events: none;
}
.card:hover { transform: translateY(-4px); border-color: #8B6CE066; }
.card:hover::after { opacity: 1; }
.card.wide { grid-column: span 3; }
.card.tall { grid-column: span 3; }
.card.full { grid-column: span 6; }
.card .glyph { font-size: 1.7rem; color: var(--gold); line-height: 1; }
.card h3 { font-size: var(--t-h3); color: var(--text); }
.card p { color: var(--muted); font-size: var(--t-sm); }
.card a.more { color: var(--gold); font-size: var(--t-sm); font-weight: 600; margin-top: auto; }
.card a.more::after { content: ' →'; transition: none; }
@media (max-width: 900px) { .bento { grid-template-columns: repeat(4, 1fr); } .card, .card.wide, .card.tall { grid-column: span 2; } .card.full { grid-column: span 4; } }
@media (max-width: 560px) { .bento { grid-template-columns: 1fr; } .card, .card.wide, .card.tall, .card.full { grid-column: span 1; } }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(1.4rem, 3vw, 2.6rem); counter-reset: step; }
.step { position: relative; padding-top: 2.6rem; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-family: 'Cinzel Decorative', serif; font-size: 1.5rem; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.step::after {
  content: ''; position: absolute; top: 1.05rem; left: 3.1rem; right: -1.4rem; height: 1px;
  background: linear-gradient(90deg, var(--gold-dim), transparent);
}
.step:last-child::after { display: none; }
@media (max-width: 780px) { .step::after { display: none; } }
.step h3 { font-size: var(--t-h3); margin-bottom: .55rem; }
.step p { color: var(--muted); font-size: var(--t-sm); }

/* Signs grid */
.signs { display: grid; grid-template-columns: repeat(6, 1fr); gap: .8rem; }
@media (max-width: 780px) { .signs { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 420px) { .signs { grid-template-columns: repeat(2, 1fr); } }
.sign {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: 1.15rem .6rem; border: 1px solid var(--line); border-radius: var(--r-md);
  background: #FFFFFF05; color: var(--text); text-align: center;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.sign:hover { transform: translateY(-3px); border-color: var(--gold); background: #E7C46B10; }
/* Zodiac and planetary characters have both an emoji and a text presentation.
   Left alone, macOS and Android substitute Apple Color Emoji / Noto Color
   Emoji and the gold engraved look is replaced by a colour sticker. Naming
   monochrome symbol faces ahead of the body font keeps the text form, and
   font-variant-emoji states the intent for browsers that honour it. */
.sign i, .sign-glyph, .card .glyph, .eyebrow [aria-hidden], .brand .spark {
  font-family: 'Apple Symbols', 'Segoe UI Symbol', 'Noto Sans Symbols 2',
               'DejaVu Sans', 'Inter', sans-serif;
  font-variant-emoji: text;
}
.sign i { font-style: normal; font-size: 1.45rem; color: var(--gold); }
.sign b { font-size: .93rem; font-weight: 600; }
.sign small { font-size: .72rem; color: var(--dim); font-variant-numeric: tabular-nums; }

/* FAQ */
.faq { max-width: var(--wrap-prose); margin-inline: auto; }
.faq details {
  border-bottom: 1px solid var(--line); padding: 1.15rem 0;
}
.faq summary {
  cursor: pointer; font-weight: 600; font-size: 1.03rem; list-style: none;
  display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start;
  transition: color var(--dur) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; color: var(--gold); font-size: 1.4rem; line-height: 1; flex: none;
  transition: transform var(--dur) var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--gold); }
.faq details p { color: var(--muted); font-size: var(--t-sm); padding-top: .8rem; }

/* CTA band */
.band {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background:
    radial-gradient(ellipse 70% 130% at 50% 0%, #7C4DCC33, transparent 70%),
    linear-gradient(160deg, #1E1745, #120E2A);
  padding: clamp(2.4rem, 5vw, 4rem) clamp(1.4rem, 4vw, 3rem);
  text-align: center;
}
.band h2 { font-size: var(--t-h2); margin-bottom: .9rem; }
.band p { color: var(--muted); max-width: 50ch; margin: 0 auto 2rem; }
.band .stores { justify-content: center; }

/* ---------- Prose (content/SEO pages) ----------------------------------- */
.page-head { padding: clamp(3rem, 2rem + 5vw, 5.5rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.page-head h1 { font-size: var(--t-h1); margin-bottom: 1rem; }
.page-head p { color: var(--muted); max-width: 62ch; }
.crumbs { font-size: var(--t-xs); color: var(--dim); margin-bottom: 1.1rem; letter-spacing: .04em; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--gold); }

/* ---------- Topic page motifs -------------------------------------------
   One small themed animation per topic family (cards / chart / numbers /
   drift), grouped rather than bespoke per page so 17 topics stay
   maintainable. Purely decorative: aria-hidden, and covered by the global
   reduced-motion kill switch below. */
.topic-head-grid {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem;
}
.topic-head-grid > div:first-child { flex: 1; min-width: 0; }
.topic-motif {
  position: relative; width: 176px; height: 176px; flex: none;
  display: none;
}
@media (min-width: 720px) { .topic-motif { display: block; } }

/* Cards family: three glyphs fanned like a hand of cards, drifting gently. */
.motif-cards { perspective: 600px; }
.motif-card {
  position: absolute; inset: 0; margin: auto; width: 66px; height: 94px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.9rem; color: var(--gold);
  background: linear-gradient(160deg, #1C1638, #14102A);
  border: 1px solid #8B6CE044; border-radius: 10px;
  box-shadow: 0 8px 20px #00000040;
  animation: cardFan 7s ease-in-out infinite;
}
.motif-card.c1 { animation-delay: 0s; }
.motif-card.c2 { animation-delay: -2.3s; }
.motif-card.c3 { animation-delay: -4.6s; }
@keyframes cardFan {
  0%, 100% { transform: translateX(-34px) rotate(-10deg) translateY(0); }
  33% { transform: translateX(0) rotate(0deg) translateY(-12px); }
  66% { transform: translateX(34px) rotate(10deg) translateY(0); }
}

/* Runes family: three rune staves that glow in a slow, staggered pulse,
   evoking casting/reading runes rather than fanning cards. */
.motif-runes { display: flex; align-items: center; justify-content: center; gap: .9rem; }
.motif-rune {
  font-family: 'Cinzel Decorative', serif; font-size: 2.4rem; color: var(--gold);
  opacity: .4; text-shadow: 0 0 0 transparent;
  animation: runeGlow 5s ease-in-out infinite;
}
.motif-rune.r2 { animation-delay: -1.7s; }
.motif-rune.r3 { animation-delay: -3.4s; }
@keyframes runeGlow {
  0%, 100% { opacity: .35; transform: translateY(0); text-shadow: 0 0 0 transparent; }
  50% { opacity: 1; transform: translateY(-8px); text-shadow: 0 0 18px #E7C46Bb0; }
}

/* Chart family: a slow-spinning ring pair with an orbiting point, echoing
   the homepage disc — used for birth-chart/compatibility (planetary). */
.motif-chart { display: flex; align-items: center; justify-content: center; }
.motif-chart .motif-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid #8B6CE055;
}
.motif-chart .r2 { inset: 18%; border-color: #E7C46B44; border-style: dashed; }
.motif-chart .motif-glyph { font-size: 2.2rem; color: var(--gold); z-index: 1; }
.motif-ring.r1 { animation: spin 50s linear infinite; }
.motif-ring.r2 { animation: spin 34s linear infinite reverse; }
.motif-chart .motif-orbit {
  position: absolute; inset: 0; animation: spin 12s linear infinite;
}
.motif-chart .motif-orbit::before {
  content: ''; position: absolute; top: -4px; left: 50%; width: 9px; height: 9px;
  margin-left: -4.5px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 12px #E7C46Bcc;
}

/* Zodiac-cycle family: animal glyphs orbiting a single ring, for the
   Chinese zodiac's 12-year cycle. */
.motif-zodiac-cycle { display: flex; align-items: center; justify-content: center; }
.motif-zodiac-cycle .motif-ring {
  position: absolute; inset: 6%; border-radius: 50%;
  border: 1px dashed #8B6CE055; animation: spin 40s linear infinite;
}
.motif-animal {
  position: absolute; inset: 0; margin: auto; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; animation: zodiacOrbit 9s ease-in-out infinite;
}
.motif-animal.a2 { animation-delay: -3s; }
.motif-animal.a3 { animation-delay: -6s; }
@keyframes zodiacOrbit {
  0% { transform: rotate(0deg) translateX(64px) rotate(0deg); opacity: .5; }
  50% { opacity: 1; }
  100% { transform: rotate(360deg) translateX(64px) rotate(-360deg); opacity: .5; }
}

/* Numbers family: three digits counting past each other. */
.motif-numbers { display: flex; align-items: center; justify-content: center; gap: .6rem; }
.motif-digit {
  font-family: 'Cinzel Decorative', serif; font-size: 2.3rem; color: var(--gold);
  opacity: .35; animation: digitPulse 4.5s ease-in-out infinite;
}
.motif-digit.d2 { animation-delay: -1.5s; }
.motif-digit.d3 { animation-delay: -3s; }
@keyframes digitPulse {
  0%, 100% { opacity: .28; transform: translateY(0) scale(.92); }
  50% { opacity: 1; transform: translateY(-6px) scale(1); }
}

/* Angel family: repeating angel-number sequences (111, 444, 888) fading
   through one another, distinct from numerology's plain counting digits. */
.motif-angel { display: flex; align-items: center; justify-content: center; }
.motif-seq {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel Decorative', serif; font-size: 2.3rem; color: var(--gold);
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
  opacity: 0; animation: angelFade 7.5s ease-in-out infinite;
}
.motif-seq.s2 { animation-delay: -2.5s; }
.motif-seq.s3 { animation-delay: -5s; }
@keyframes angelFade {
  0%, 8% { opacity: 0; transform: scale(.9); text-shadow: 0 0 0 transparent; }
  20%, 33% { opacity: 1; transform: scale(1); text-shadow: 0 0 16px #E7C46Bb0; }
  46%, 100% { opacity: 0; transform: scale(.94); text-shadow: 0 0 0 transparent; }
}

/* AI family: a pulsing core node synthesising three orbiting satellite
   nodes, for the AI astrologer/chat page. */
.motif-ai { display: flex; align-items: center; justify-content: center; }
.motif-node {
  position: absolute; border-radius: 50%; background: var(--gold);
}
.motif-node.core {
  inset: 0; margin: auto; width: 25px; height: 25px;
  box-shadow: 0 0 26px #E7C46Bcc; animation: aiCorePulse 3s ease-in-out infinite;
}
.motif-node.n1, .motif-node.n2, .motif-node.n3 {
  top: 50%; left: 50%; width: 11px; height: 11px; margin: -5.5px;
  box-shadow: 0 0 12px #8B6CE0cc; background: #B9A6F2;
  animation: aiOrbit 6s linear infinite;
}
.motif-node.n2 { animation-duration: 8s; animation-direction: reverse; }
.motif-node.n3 { animation-duration: 10s; }
@keyframes aiCorePulse {
  0%, 100% { transform: scale(.85); opacity: .8; }
  50% { transform: scale(1.15); opacity: 1; }
}
@keyframes aiOrbit {
  0% { transform: rotate(0deg) translateX(58px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(58px) rotate(-360deg); }
}

/* Wheel family: the horoscope hub's zodiac-wheel motif, four cardinal
   glyphs ticking slowly around a double ring. */
.motif-wheel { display: flex; align-items: center; justify-content: center; }
.motif-wheel .motif-ring {
  position: absolute; inset: 0; border-radius: 50%; border: 1px solid #8B6CE055;
}
.motif-wheel .r2 { inset: 16%; border-color: #E7C46B44; border-style: dashed; }
.motif-wheel .motif-tick {
  position: absolute; font-size: 1.6rem; color: var(--gold);
  animation: wheelTick 60s linear infinite;
}
.motif-wheel .t1 { top: 4px; left: 50%; margin-left: -.6em; }
.motif-wheel .t2 { right: 4px; top: 50%; margin-top: -.6em; }
.motif-wheel .t3 { bottom: 4px; left: 50%; margin-left: -.6em; }
.motif-wheel .t4 { left: 4px; top: 50%; margin-top: -.6em; }
@keyframes wheelTick {
  from { transform: rotate(0deg) translateY(0) rotate(0deg); }
  to { transform: rotate(360deg) translateY(0) rotate(-360deg); }
}
.motif-wheel .motif-tick { transform-origin: 88px 88px; }

/* Palm family: an upheld hand with three glowing palm-lines sweeping
   across it in sequence, evoking a palm reader tracing the lines. */
.motif-palm { display: flex; align-items: center; justify-content: center; }
.motif-palm .motif-glyph {
  font-size: 3.4rem; color: var(--gold); display: inline-block;
  animation: palmSway 6s ease-in-out infinite;
}
.motif-palm .motif-line {
  position: absolute; left: 24%; right: 24%; height: 1px;
  background: linear-gradient(90deg, transparent, #E7C46Bcc, transparent);
  opacity: 0; animation: lineSweep 4.5s ease-in-out infinite;
}
.motif-palm .l1 { top: 38%; animation-delay: 0s; }
.motif-palm .l2 { top: 52%; animation-delay: -1.5s; }
.motif-palm .l3 { top: 66%; animation-delay: -3s; }
@keyframes palmSway {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}
@keyframes lineSweep {
  0%, 100% { opacity: 0; transform: scaleX(.6); }
  50% { opacity: 1; transform: scaleX(1); }
}

/* Coffee family: a cup glyph with slow, drifting steam curls rising above
   it, evoking reading the grounds left in the cup. */
.motif-coffee { display: flex; align-items: center; justify-content: center; }
.motif-coffee .motif-glyph {
  font-size: 3.4rem; color: var(--gold); display: inline-block; z-index: 1;
}
.motif-coffee .motif-steam {
  position: absolute; bottom: 58%; width: 3px; height: 28px; border-radius: 3px;
  background: linear-gradient(180deg, transparent, #E7C46B99);
  opacity: 0; animation: steamRise 4s ease-in infinite;
}
.motif-coffee .s1 { left: 42%; animation-delay: 0s; }
.motif-coffee .s2 { left: 50%; animation-delay: -1.3s; }
.motif-coffee .s3 { left: 58%; animation-delay: -2.6s; }
@keyframes steamRise {
  0% { opacity: 0; transform: translateY(0) scaleY(.6) rotate(0deg); }
  30% { opacity: .9; }
  100% { opacity: 0; transform: translateY(-26px) scaleY(1.3) rotate(6deg); }
}

/* Drift family: a single glyph in slow ambient orbit, for everything else. */
.motif-drift { display: flex; align-items: center; justify-content: center; }
.motif-drift .motif-glyph {
  font-size: 3.2rem; color: var(--gold); display: inline-block;
  animation: glyphDrift 8s ease-in-out infinite;
}
@keyframes glyphDrift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: .75; }
  50% { transform: translate(8px, -12px) rotate(8deg); opacity: 1; }
}

.prose h2 { font-size: var(--t-h2); margin: 2.6rem 0 .9rem; color: var(--gold); }
.prose h3 { font-size: var(--t-h3); margin: 1.9rem 0 .6rem; }
.prose p { margin-bottom: 1.1rem; color: #DCD7EE; }
.prose ul, .prose ol { margin: 0 0 1.2rem 1.35rem; color: #DCD7EE; }
.prose li { margin-bottom: .55rem; }
.prose strong { color: #fff; }
.prose a { border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease); }
.prose a:hover { border-bottom-color: var(--violet); }
.prose table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: var(--t-sm); }
.prose th, .prose td { text-align: left; padding: .75rem .9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { color: var(--gold); font-weight: 600; }
.prose td { color: var(--muted); }
.table-scroll { overflow-x: auto; }

.callout {
  border-left: 2px solid var(--gold); background: #E7C46B0D;
  padding: 1.1rem 1.3rem; border-radius: 0 var(--r-sm) var(--r-sm) 0;
  margin: 1.6rem 0; font-size: var(--t-sm); color: var(--muted);
}

/* ---------- Footer ------------------------------------------------------ */
footer.site { border-top: 1px solid var(--line); padding: clamp(2.6rem, 5vw, 4rem) 0 2rem; margin-top: var(--pad-section); }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 2rem; margin-bottom: 2.6rem; }
@media (max-width: 980px) { .foot-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 620px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-brand p { color: var(--muted); font-size: var(--t-sm); max-width: 34ch; margin-top: .9rem; }
.foot-col h4 { font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; font-weight: 600; }
.foot-col a { display: block; color: var(--muted); font-size: var(--t-sm); padding: .32rem 0; transition: color var(--dur) var(--ease); }
.foot-col a:hover { color: var(--text); }
.foot-bot { border-top: 1px solid var(--line); padding-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; font-size: var(--t-xs); color: var(--dim); }
.disclaimer { max-width: 70ch; }

.social-links { display: flex; gap: .7rem; margin-top: 1.1rem; }
.social-links a {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line); color: var(--muted);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.social-links svg { width: 16px; height: 16px; fill: currentColor; }
.social-links a:hover { color: var(--gold); border-color: var(--gold-dim); transform: translateY(-2px); }

/* ---------- Reveal on scroll ------------------------------------------- */
/* --rv-delay is set per element by site.js so siblings cascade rather than
   all landing on the same frame. It defaults to 0 for anything ungrouped. */
.reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity .7s var(--ease) var(--rv-delay, 0ms),
              transform .7s var(--ease) var(--rv-delay, 0ms);
}
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------- Sign pages -------------------------------------------------- */
.sign-hero { display: flex; align-items: center; gap: clamp(1rem, 3vw, 1.8rem); }
.sign-glyph {
  font-size: clamp(3.2rem, 2rem + 5vw, 5.4rem); line-height: 1; color: var(--gold);
  text-shadow: 0 0 34px #E7C46B66; flex: none;
}
.sign-hero h1 { font-size: var(--t-h1); margin-bottom: .3rem; }
.sign-hero p { color: var(--muted); font-size: var(--t-sm); }
.tagline {
  font-family: 'Cinzel Decorative', serif; font-size: clamp(1.1rem, 1rem + .8vw, 1.5rem);
  color: var(--text); margin-top: 1.6rem; padding-left: 1.1rem;
  border-left: 2px solid var(--gold); line-height: 1.45;
}

.prose .traits { list-style: none; margin-left: 0; display: flex; flex-wrap: wrap; gap: .55rem; }
.prose .traits li {
  margin: 0; padding: .42rem 1rem; border: 1px solid var(--line);
  border-radius: 999px; background: #FFFFFF07; font-size: var(--t-sm); color: var(--text);
}
.signs.compact { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); margin: 1rem 0 0; }
.signs.compact .sign { padding: .95rem .5rem; }
.prose .band h2 { margin-top: 0; color: var(--text); }

/* The sign "at a glance" table is a key/value list — its <th> cells are row
   headers inside <tbody> and want a fixed label column. Article tables use
   <thead> column headers and must keep their natural widths, so this is
   scoped to row headers only rather than every th in .prose. */
.prose tbody th { white-space: nowrap; width: 38%; }

/* ---------- Language switcher ------------------------------------------ */
.lang-switch { border-top: 1px solid var(--line); padding-top: 1.6rem; margin-bottom: 1.6rem; }
.lang-switch h4 {
  font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .9rem; font-weight: 600;
}
.lang-list { display: flex; flex-wrap: wrap; gap: .4rem .5rem; }
.lang-list a {
  color: var(--muted); font-size: var(--t-sm); padding: .3rem .75rem;
  border: 1px solid var(--line); border-radius: 999px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.lang-list a:hover { color: var(--text); border-color: var(--violet); background: #8B6CE014; }
.lang-list a[aria-current="true"] { color: var(--void); background: var(--gold); border-color: var(--gold); font-weight: 600; }

/* ---------- RTL --------------------------------------------------------- */
/* Logical properties handle most of it; these are the few places that used
   physical directions for a deliberate visual effect. */
[dir="rtl"] .tagline { padding-left: 0; padding-right: 1.1rem; border-left: 0; border-right: 2px solid var(--gold); }
[dir="rtl"] .callout { border-left: 0; border-right: 2px solid var(--gold); border-radius: var(--r-sm) 0 0 var(--r-sm); }
[dir="rtl"] .nav-links { margin-left: 0; margin-right: auto; }
[dir="rtl"] .nav-toggle { margin-left: 0; margin-right: auto; }
[dir="rtl"] .lang-pick-list { right: auto; left: 0; }
[dir="rtl"] .prose ul, [dir="rtl"] .prose ol { margin-left: 0; margin-right: 1.35rem; }
[dir="rtl"] .step::before { left: auto; right: 0; }
[dir="rtl"] .step::after { left: -1.4rem; right: 3.1rem; background: linear-gradient(270deg, var(--gold-dim), transparent); }
[dir="rtl"] .card a.more::after { content: ' ←'; }
[dir="rtl"] .skip { border-radius: 0 0 0 var(--r-sm); }