/* ============================================================
   Ourthem — shared design system
   used by: index.html, intake.html, ritual.html,
            report.html, journey.html
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&display=swap');

:root {
  --bg-primary: #070713;
  --bg-secondary: #10091D;
  --bg-plum: #1A0D28;

  --panel-glass: rgba(31,18,44,0.58);
  --panel-strong: rgba(45,25,62,0.78);

  --text-primary: #F8F4ED;
  --text-secondary: #D7CCD7;
  --text-muted: #BFB0BF;

  --rose: #E78A90;
  --rose-strong: #D46B70;
  --rose-dark: #B24E59;
  --rose-deep: #7E364A;

  --gold: #C59B74;
  --gold-soft: #F1BD91;

  --border-soft: rgba(213,136,126,0.24);

  --ink:        var(--text-primary);
  --ink-dim:    var(--text-secondary);
  --ink-faint:  var(--text-muted);
  --paper:      var(--bg-primary);
  --paper-deep: var(--bg-primary);
  --paper-mid:  var(--bg-plum);
  --warm:       var(--rose);
  --warm-soft:  var(--gold-soft);
  --rule:       var(--border-soft);
  --rule-soft:  rgba(213,136,126,0.11);

  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-cjk:     "Inter", system-ui, sans-serif;
  --font-mono:    "Inter", ui-monospace, "SFMono-Regular", "Courier New", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  /* Extend each radial well past the previous "transparent N%" so the
     three rose/violet/plum glows overlap continuously instead of
     leaving a hard cut where one ends and the next has not yet started.
     The mid-stop with reduced alpha gives a smooth taper rather than
     a sharp edge. */
  background:
    radial-gradient(circle at 20% 20%, rgba(126,54,74,.22) 0%, rgba(126,54,74,.10) 35%, transparent 65%),
    radial-gradient(circle at 80% 0%,  rgba(88,42,150,.20) 0%, rgba(88,42,150,.08) 40%, transparent 70%),
    radial-gradient(circle at 50% 100%, rgba(41,22,72,.72) 0%, rgba(41,22,72,.35) 45%, transparent 80%),
    linear-gradient(180deg,#070713 0%,#10091D 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.12;
  background-image:
    radial-gradient(circle at 50% 50%, transparent 0 58%, rgba(0,0,0,.55) 100%),
    radial-gradient(circle at 30% 20%, rgba(248,244,237,.45) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 60%, rgba(241,189,145,.42) 0 1px, transparent 1.5px),
    radial-gradient(circle at 20% 80%, rgba(231,138,144,.34) 0 1px, transparent 1.5px);
  background-size: 100% 100%, 220px 220px, 290px 290px, 340px 340px;
  mix-blend-mode: screen;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  /* Diagonal 115° streak removed — it spanned 36-58% of the viewport
     and read as a horizontal rose band that didn't track scroll, so
     it looked like a colored stripe pinned to the page. Keep only the
     soft top-right glow. */
  background:
    radial-gradient(circle at 58% 18%, rgba(231,138,144,.10), transparent 32%);
}
::selection { background: rgba(231,138,144,.55); color: var(--text-primary); }

/* Restore a visible focus indicator anywhere the page-local CSS strips
   outline (intake/report/journey/horoscope inputs and buttons). Uses
   :focus-visible so it only appears for keyboard nav, not mouse clicks. */
input:focus-visible,
textarea:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
a:focus-visible {
  outline: 2px solid rgba(231, 138, 144, 0.68);
  outline-offset: 2px;
}

.mono {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-soft);
}

/* ---- bg orbs ---- */
.bg-orbs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  mix-blend-mode: screen;
  opacity: 0.5;
}
.bg-orb.coral  { width: 420px; height: 420px; background: #7E364A; top: 6%;  left: -10%; opacity: 0.44; }
.bg-orb.indigo { width: 500px; height: 500px; background: #2b1648; top: 26%; right: -12%; opacity: 0.48; }
.bg-orb.violet { width: 390px; height: 390px; background: #4d245d; top: 58%; left: 34%; opacity: 0.34; }
.bg-orb.amber  { width: 300px; height: 300px; background: #C59B74; top: 86%; left: -5%; opacity: 0.22; }

/* ---- glass ribbons ---- */
.glass-ribbons { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.glass-ribbons .ribbon {
  position: absolute;
  width: 170vw;
  height: 40vh;
  left: -35vw;
  opacity: 0.7;
  mix-blend-mode: screen;
  filter: blur(16px) saturate(1.05);
  will-change: transform, filter;
}
.glass-ribbons .ribbon.r1 {
  top: 10%;
  animation:
    ribbon-drift-a 21s cubic-bezier(.65,.05,.35,.95) infinite,
    ribbon-shimmer 10.1s ease-in-out infinite alternate;
}
.glass-ribbons .ribbon.r2 {
  top: 46%; opacity: 0.6;
  animation:
    ribbon-drift-b 27s cubic-bezier(.55,.1,.45,.9) infinite,
    ribbon-shimmer 15.8s ease-in-out infinite alternate-reverse;
}
.glass-ribbons .ribbon.r3 {
  top: 72%; opacity: 0.5;
  animation:
    ribbon-drift-c 33s cubic-bezier(.7,.0,.3,1) infinite,
    ribbon-shimmer 18.7s ease-in-out infinite alternate;
}
@keyframes ribbon-drift-a {
  0%   { transform: translate3d(-10%, -20px, 0) rotate(-9deg) scaleY(1) skewX(0deg); }
  18%  { transform: translate3d( 4%,  30px, 0) rotate(-2deg) scaleY(1.08) skewX(-3deg); }
  37%  { transform: translate3d(12%, -12px, 0) rotate(-14deg) scaleY(.92) skewX(2deg); }
  58%  { transform: translate3d(-6%,  44px, 0) rotate(-1deg) scaleY(1.12) skewX(-5deg); }
  79%  { transform: translate3d( 8%, -32px, 0) rotate(-11deg) scaleY(.95) skewX(3deg); }
  100% { transform: translate3d(-10%, -20px, 0) rotate(-9deg) scaleY(1) skewX(0deg); }
}
@keyframes ribbon-drift-b {
  0%   { transform: translate3d( 8%,  10px, 0) rotate( 7deg) scaleY(1) skewX(0deg); }
  22%  { transform: translate3d(-6%, -36px, 0) rotate( 2deg) scaleY(1.14) skewX(4deg); }
  45%  { transform: translate3d(14%,  28px, 0) rotate(11deg) scaleY(.88) skewX(-2deg); }
  68%  { transform: translate3d(-12%,-22px, 0) rotate( 3deg) scaleY(1.06) skewX(5deg); }
  86%  { transform: translate3d( 0%,  40px, 0) rotate( 9deg) scaleY(.94) skewX(-3deg); }
  100% { transform: translate3d( 8%,  10px, 0) rotate( 7deg) scaleY(1) skewX(0deg); }
}
@keyframes ribbon-drift-c {
  0%   { transform: translate3d( 0%,   0px, 0) rotate(-3deg) scaleY(1) skewX(0deg); }
  25%  { transform: translate3d( 10%,-48px, 0) rotate( 6deg) scaleY(.86) skewX(-4deg); }
  50%  { transform: translate3d(-8%,  36px, 0) rotate(-8deg) scaleY(1.18) skewX(3deg); }
  75%  { transform: translate3d( 14%, 10px, 0) rotate( 4deg) scaleY(.92) skewX(-2deg); }
  100% { transform: translate3d( 0%,   0px, 0) rotate(-3deg) scaleY(1) skewX(0deg); }
}
@keyframes ribbon-shimmer {
  0%   { filter: blur(16px) saturate(1.05) brightness(.9); }
  50%  { filter: blur(20px) saturate(1.15) brightness(1.08); }
  100% { filter: blur(16px) saturate(1.05) brightness(.95); }
}

/* ---- scroll progress + dust ---- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--rose-deep), var(--rose), var(--gold-soft));
  z-index: 200;
  pointer-events: none;
  transition: width 80ms linear;
  box-shadow: 0 0 18px rgba(212,107,112,0.5);
}
.dust-field { position: fixed; inset: 0; pointer-events: none; z-index: 1; }
.dust {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0;
  animation: dust-rise var(--dur, 22s) linear infinite;
  animation-delay: var(--delay, 0s);
}
.dust.warm { background: var(--warm); opacity: 0.4; }
@keyframes dust-rise {
  0%   { transform: translate3d(0, 100vh, 0) scale(.4); opacity: 0; }
  8%   { opacity: var(--max-op, 0.6); }
  88%  { opacity: var(--max-op, 0.6); }
  100% { transform: translate3d(var(--drift, 40px), -10vh, 0) scale(1.2); opacity: 0; }
}

/* ---- twinkling stars ---- */
.star-field {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 4;
}
.star {
  position: absolute;
  width: var(--s, 12px);
  height: var(--s, 12px);
  margin-left: calc(var(--s, 12px) / -2);
  margin-top:  calc(var(--s, 12px) / -2);
  opacity: 0.3;
  animation: star-twinkle var(--dur, 5s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  filter: drop-shadow(0 0 8px rgba(255,232,180,0.9));
}
.star svg { width: 100%; height: 100%; display: block; }
.star.warm svg { color: #ffd6a0; }
.star.cool svg { color: #D7CCD7; }
.star.cream svg { color: #fff3c2; }
@keyframes star-twinkle {
  0%   { opacity: 0.2; transform: scale(0.5) rotate(0deg); }
  30%  { opacity: 1;   transform: scale(1.15) rotate(45deg); }
  55%  { opacity: 0.7; transform: scale(0.95) rotate(90deg); }
  80%  { opacity: 1;   transform: scale(1.2) rotate(160deg); }
  100% { opacity: 0.2; transform: scale(0.5) rotate(180deg); }
}

/* ---- NAV ---- */
/* ====================================================== */
/*  LIQUID GLASS NAV (floating pill)                      */
/* ====================================================== */
.nav {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1340px, calc(100vw - 44px));
  height: 60px;
  padding: 0 16px 0 34px;
  border-radius: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  z-index: 60;
  overflow: visible;
  /* liquid glass body */
  background: linear-gradient(180deg, rgba(58,40,58,0.46), rgba(16,11,24,0.42));
  -webkit-backdrop-filter: blur(26px) saturate(1.6) brightness(1.05);
  backdrop-filter: blur(26px) saturate(1.6) brightness(1.05);
  border: 1px solid rgba(255,228,205,0.12);
  box-shadow:
    0 28px 70px -18px rgba(0,0,0,0.62),
    0 8px 24px -12px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.28),
    inset 0 0 40px rgba(255,210,170,0.04);
  transition: box-shadow .5s ease, background .5s ease, border-color .5s ease;
}
/* golden specular mirror line riding the top inner edge */
.nav::before {
  content: "";
  position: absolute;
  top: 0; left: 7%; right: 7%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,224,180,0.0) 6%,
    rgba(255,228,188,0.55) 26%,
    rgba(255,247,232,0.98) 50%,
    rgba(255,228,188,0.5) 74%,
    transparent 96%);
  box-shadow: 0 0 16px rgba(255,219,170,0.6), 0 1px 10px rgba(255,205,150,0.4);
  pointer-events: none;
}
/* soft inner top sheen */
.nav::after {
  content: "";
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 46%;
  border-radius: 44px 44px 60px 60px;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0));
  pointer-events: none;
}
/* the bright center glint / spark on the rim */
.nav-glass-glint {
  position: absolute;
  top: -4px; left: 78px;
  width: 90px; height: 12px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255,250,238,0.95), rgba(255,224,180,0.35) 45%, transparent 75%);
  filter: blur(0.5px);
  pointer-events: none;
  z-index: 2;
}
.nav-glass-glint::before {
  content: "\2726";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  font-size: 11px;
  color: rgba(255,248,235,0.95);
  text-shadow: 0 0 8px rgba(255,224,180,0.9);
}

/* —— logo —— */
.nav-logo {
  display: flex; align-items: baseline; gap: 10px;
  text-decoration: none;
  flex: 0 0 auto;
}
.nav-logo .mark {
  font-family: var(--font-display);
  font-size: 27px; line-height: 1;
  color: #f6efe6;
  letter-spacing: -.01em;
}
.nav-logo .mark em { font-style: italic; color: #f3d9c4; }
.nav-logo .tag { color: var(--ink-faint); }

/* —— centered links —— */
.nav-center {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 44px;
}
.nav-center a {
  position: relative;
  font-family: var(--font-body);
  font-size: 16px;
  letter-spacing: .005em;
  text-transform: none;
  color: rgba(244,236,228,0.74);
  text-decoration: none;
  padding: 6px 0;
  transition: color .25s ease;
}
.nav-center a:hover { color: #fff; }
.nav-center a.active { color: #fbf4ec; }
/* underline on the active link */
.nav-center a.active::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -6px;
  transform: translateX(-50%);
  width: 38px; height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,228,190,0.95), transparent);
  box-shadow: 0 0 10px rgba(255,219,170,0.55);
}
/* sparkle above the active link */
.nav-center a.active::before {
  content: "\2726";
  position: absolute;
  left: 50%; top: -16px;
  transform: translateX(-50%);
  font-size: 9px;
  color: rgba(255,236,206,0.9);
  text-shadow: 0 0 7px rgba(255,219,170,0.8);
}

/* —— right actions —— */
.nav-right { flex: 0 0 auto; display: flex; gap: 10px; align-items: center; }
.nav-right .nav-icon-btn,
.nav-right .nav-audio {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(244,236,228,0.82);
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}
.nav-right .nav-icon-btn:hover,
.nav-right .nav-audio:hover {
  background: rgba(255,255,255,0.07);
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(255,228,205,0.16);
  text-shadow: none;
}
.nav-right .nav-icon-btn svg,
.nav-right .nav-audio .audio-icon { width: 19px; height: 19px; }
/* the avatar button keeps no circular hover bg of its own */
.nav-right .nav-icon-btn#navUser { width: auto; height: auto; }
.nav-right .nav-icon-btn#navUser:hover { background: none; box-shadow: none; }
/* dropdowns hang from the pill */
.nav-right .nav-dropdown { top: calc(100% + 16px); }
.nav-audio {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background: none;
  border: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  cursor: pointer;
  color: var(--ink-dim);
  font: inherit;
  transition: color .25s;
}
.nav-audio:hover { color: var(--ink); }
.nav-audio[data-state="on"] {
  color: var(--rose);
}
.nav-audio .audio-icon {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-audio .wave { opacity: 1; transition: opacity .2s; }
.nav-audio .slash { opacity: 0; transition: opacity .2s; }
.nav-audio[data-state="off"] .wave { opacity: 0; }
.nav-audio[data-state="off"] .slash { opacity: 1; }
.nav-audio .dot {
  display: none;
}
.nav-icon-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink-faint);
  font: inherit;
  font-size: 14px;
  transition: color .25s;
}
.nav-icon-btn:hover {
  color: var(--gold-soft) !important;
  text-shadow: 0 0 18px rgba(231,138,144,.45);
}
.nav-icon-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .35s cubic-bezier(.2,1,.3,1), filter .35s;
}
.nav-icon-btn:hover svg {
  transform: scale(1.12);
  filter: drop-shadow(0 0 6px rgba(200,165,120,.55));
}
.nav-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rose);
  border: 1.5px solid var(--paper);
  box-shadow: 0 0 14px rgba(231,138,144,.42);
  animation: badge-pulse 2.4s ease-in-out infinite;
}
.nav-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  min-width: 220px;
  padding: 8px 0;
  background: linear-gradient(135deg, rgba(34,18,50,.88), rgba(12,8,25,.82));
  border: 1px solid rgba(213,136,126,.18);
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0,0,0,.42);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .22s ease, transform .22s cubic-bezier(.2,1,.3,1);
  z-index: 999;
}
.nav-icon-btn:focus-within .nav-dropdown,
.nav-icon-btn:hover .nav-dropdown,
.nav-dropdown.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.nav-dropdown-header {
  padding: 12px 16px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(200,165,120,.1);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-family: var(--font-cjk);
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.nav-dropdown-item:hover {
  background: rgba(200,165,120,.08);
  color: var(--ink);
}
.nav-dropdown-muted {
  font-size: 14px;
  opacity: .5;
  letter-spacing: .05em;
}
.nav-dropdown-signout {
  color: rgba(200,120,100,.8);
}
.nav-dropdown-item .item-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--warm);
  flex-shrink: 0;
  opacity: .6;
}
.nav-dropdown-item .item-dot.unread {
  opacity: 1;
  background: var(--rose);
  box-shadow: 0 0 14px rgba(231,138,144,.42);
}
.nav-dropdown-divider {
  height: 1px;
  margin: 4px 0;
  background: rgba(200,165,120,.1);
}
.nav-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,228,205,0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 30%, #b8636a, #8a3f4a);
  color: #fdeee9;
  font-family: var(--font-display);
  font-size: 15px;
  font-style: italic;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.25), 0 2px 8px rgba(0,0,0,0.35);
  transition: border-color .25s, box-shadow .25s;
}
.nav-icon-btn:hover .nav-user-avatar {
  border-color: rgba(255,228,205,0.6);
  box-shadow: 0 0 16px rgba(231,138,144,0.4), inset 0 1px 2px rgba(255,255,255,0.3);
}
@keyframes badge-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .6; transform: scale(.85); }
}
@keyframes nav-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

/* ---- generic content z-index above orbs/ribbons ---- */
main, section, footer { position: relative; z-index: 2; }

/* ---- CTA button ---- */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 20px 34px;
  background:
    linear-gradient(
      180deg,
      rgba(231,191,194,.24) 0%,
      transparent 40%
    ),
    linear-gradient(
      90deg,
      #7E364A 0%,
      #B24E59 48%,
      #D46B70 100%
    );
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid rgba(241,189,145,.28);
  border-radius: 999px;
  cursor: pointer;
  transition: transform .5s cubic-bezier(.2,1,.3,1), box-shadow .5s ease, border-color .5s ease;
  backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 12px 32px rgba(178,78,89,.35),
    0 0 22px rgba(212,107,112,.22);
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform: translateX(-120%) skewX(-18deg);
  transition: transform .9s cubic-bezier(.2,1,.3,1);
  z-index: 0;
}
.cta:hover::before { transform: translateX(120%) skewX(-18deg); }
.cta > * { position: relative; z-index: 1; }
.cta:hover {
  transform: translateY(-4px);
  border-color: rgba(241,189,145,.48);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 18px 44px rgba(178,78,89,.42),
    0 0 34px rgba(212,107,112,.32);
}
.cta-arrow { display: inline-block; transition: transform .45s cubic-bezier(.2,1,.3,1); }
.cta:hover .cta-arrow { transform: translateX(6px); }

/* ---- glass card utility ---- */
.glass-card {
  background:
    linear-gradient(135deg, rgba(34,18,50,.74), rgba(12,8,25,.68));
  backdrop-filter: blur(18px) saturate(1.18);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
  border: 1px solid rgba(213,136,126,.18);
  border-radius: 24px;
  box-shadow: 0 24px 80px rgba(0,0,0,.42);
}

/* ---- reveal observer ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 1.1s cubic-bezier(.2,1,.3,1), transform 1.1s cubic-bezier(.2,1,.3,1);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="rise"] { transform: translateY(60px); }
.is-revealed[data-reveal] { opacity: 1; transform: none; }

@media (max-width: 1040px) {
  .nav-center { gap: 30px; }
  .nav-center a { font-size: 15px; }
}
@media (max-width: 860px) {
  .nav {
    width: calc(100vw - 28px);
    top: 14px;
    height: 56px;
    padding: 0 12px 0 22px;
    gap: 12px;
  }
  .nav-center { display: none; }
  .nav-logo .tag { display: none; }
  .nav-logo .mark { font-size: 23px; }
  .nav-right {
    flex: 1 1 auto;
    justify-content: flex-end;
    overflow: visible;
    max-width: none;
  }
  .nav-right .nav-icon-btn,
  .nav-right .nav-audio { width: 38px; height: 38px; }
}