/* ═══════════════════════════════════════════════════════════ */
/* GETMONDAI.COM — SACRED DESIGN SYSTEM                       */
/* Version: 1.0 · March 2026                                  */
/* Stack: Static HTML/CSS/JS · Hosted on Vercel               */
/* ═══════════════════════════════════════════════════════════ */

/* ── ROOT VARIABLES ─────────────────────────────────────── */
:root {
  /* Core */
  --dark: #0F1011;
  --surface: #181919;
  --card: #1E2021;
  --card-hover: #232526;
  --deep: #18191A;

  /* Gold Spectrum */
  --gold: #D9C2A3;
  --gold-warm: #C9A84C;
  --gold-light: #E8C97A;
  --gold-dim: rgba(217,194,163,0.18);
  --gold-faint: rgba(217,194,163,0.06);
  --gold-border: rgba(217,194,163,0.14);
  --gold-glow: rgba(217,194,163,0.08);

  /* Ivory */
  --ivory: #F6F3EC;
  --ivory-mid: rgba(246,243,236,0.70);
  --ivory-dim: rgba(246,243,236,0.35);
  --ivory-whisper: rgba(246,243,236,0.18);

  /* Chamber Palette */
  --ch-i: #C49898;
  --ch-ii: #D9C2A3;
  --ch-iii: #C4BC78;
  --ch-iv: #A8C5A3;
  --ch-v: #88ADC4;
  --ch-vi: #A898C4;

  /* Signals */
  --threshold: #E85D75;
  --complete: #A8C5A3;

  /* Typography */
  --sacred: 'Cinzel', Georgia, serif;
  --serif: 'Crimson Pro', Georgia, serif;
  --sans: 'DM Sans', 'Helvetica Neue', sans-serif;
  --heading: 'Sora', sans-serif;
}

/* ── RESET & BASE ───────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  background: var(--dark);
  color: var(--ivory);
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ── STARFIELD BACKGROUND ───────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 10% 15%, rgba(217,194,163,0.25) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 45%, rgba(246,243,236,0.1) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 40% 10%, rgba(217,194,163,0.15) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 70%, rgba(246,243,236,0.08) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 30%, rgba(217,194,163,0.12) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 55%, rgba(246,243,236,0.1) 0%, transparent 100%),
    radial-gradient(1px 1px at 92% 20%, rgba(217,194,163,0.18) 0%, transparent 100%),
    radial-gradient(1px 1px at 48% 88%, rgba(217,194,163,0.08) 0%, transparent 100%);
}

/* ── KEYFRAME ANIMATIONS ────────────────────────────────── */
@keyframes borderBreathe {
  0%, 100% { border-color: rgba(217,194,163,0.10); }
  50% { border-color: rgba(217,194,163,0.30); }
}
@keyframes pulseDot {
  0%, 100% { opacity: 0.4; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}
@keyframes textShimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes radialBreathe {
  0%, 100% { opacity: 0.05; transform: scale(0.97); }
  50% { opacity: 0.12; transform: scale(1.03); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slowSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes orbFloat {
  0%, 100% { opacity: 0; }
  10% { opacity: 0.7; }
  90% { opacity: 0.7; }
  100% { opacity: 0; }
}
@keyframes glowPulse {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(217,194,163,0.15)); }
  50% { filter: drop-shadow(0 0 20px rgba(217,194,163,0.35)); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── SECTION SYSTEM ─────────────────────────────────────── */
.section {
  position: relative;
  z-index: 1;
  padding: 100px 40px;
  overflow: hidden;
}
.section + .section {
  margin-top: -20px;
  border-radius: 24px 24px 0 0;
}
.section:nth-child(2) { z-index: 2; }
.section:nth-child(3) { z-index: 3; }
.section:nth-child(4) { z-index: 4; }
.section:nth-child(5) { z-index: 5; }
.section:nth-child(6) { z-index: 6; }
.section:nth-child(7) { z-index: 7; }
.section:nth-child(8) { z-index: 8; }
.section:nth-child(9) { z-index: 9; }
.section:nth-child(10) { z-index: 10; }
.section:nth-child(11) { z-index: 11; }
.section:nth-child(12) { z-index: 12; }
.section:nth-child(13) { z-index: 13; }
.section:nth-child(14) { z-index: 14; }
.section:nth-child(15) { z-index: 15; }
.section:nth-child(16) { z-index: 16; }
.section:nth-child(17) { z-index: 17; }
.section:nth-child(18) { z-index: 18; }
.section:nth-child(19) { z-index: 19; }
.section:nth-child(20) { z-index: 20; }

.section-dark { background: var(--dark); }

/* ═══════════════════════════════════════════════════════════ */
/* HERO                                                        */
/* ═══════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--dark);
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 40px;
  max-width: 800px;
  animation: fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
.hero-rosette {
  width: 160px;
  height: 160px;
  margin: 0 auto 40px;
  animation: glowPulse 6s ease-in-out infinite;
}
.hero h1 {
  font-family: var(--sacred);
  font-size: clamp(30px, 5.5vw, 52px);
  font-weight: 400;
  color: var(--ivory);
  letter-spacing: 2px;
  line-height: 1.15;
  margin-bottom: 8px;
}
.hero h1 em {
  font-style: normal;
  color: var(--gold);
  display: block;
}
.hero .hero-sub {
  font-family: var(--serif);
  font-size: clamp(16px, 2.5vw, 20px);
  font-weight: 300;
  font-style: italic;
  color: var(--ivory-mid);
  max-width: 560px;
  margin: 20px auto 32px;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════ */
/* RESPONSIVE                                                  */
/* ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .section { padding: 72px 24px; }
  .section + .section {
    margin-top: 0;
    border-radius: 0;
  }

  .hero { min-height: 90vh; }
  .hero-rosette { width: 100px; height: 100px; margin-bottom: 28px; }
  .hero h1 { font-size: clamp(24px, 7vw, 36px); }
}

@media (max-width: 767px) {
  .section { padding: 60px 20px; }
}

/* ═══════════════════════════════════════════════════════════ */
/* PHASE 1 ADDITIONS — ROTATING WORD + ALMA                   */
/* ═══════════════════════════════════════════════════════════ */

.rotating-word {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.rotating-word.active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
}
.rotating-word.exiting {
  opacity: 0;
  transform: translateY(-100%);
}

.alma-card {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 32px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(0,212,255,0.2);
  box-shadow: 0 4px 24px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,212,255,0.06);
  position: relative;
  overflow: hidden;
}
.alma-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(135deg, #00d4ff, #2D6FE8);
}
.alma-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #047857;
  background: rgba(16,185,129,0.08);
  border: 1px solid rgba(16,185,129,0.2);
  margin-bottom: 8px;
}

/* ═══════════════════════════════════════════════════════════ */
/* PRE-BUILT SECTION: TESTIMONIALS                             */
/* ═══════════════════════════════════════════════════════════ */

.testimonials-wrapper {
    font-family: 'DM Sans', sans-serif;
    background: transparent;
    padding: clamp(4rem,8vw,6rem) 0 clamp(3rem,6vw,5rem);
    color: #e8edf5;
    position: relative;
    --blue: #D9C2A3;
    --blue-mid: #C9A84C;
    --blue-dim: rgba(217,194,163,0.08);
    --blue-border: rgba(217,194,163,0.18);
    --tl-white: #e8edf5;
    --tl-white-dim: rgba(232,237,245,0.82);
    --tl-border: rgba(255,255,255,0.07);
    --tl-card-bg: rgba(255,255,255,0.04);
}
.tl-header { text-align: center; padding: 0 24px; margin-bottom: clamp(2.5rem,5vw,4rem); }
.tl-eyebrow { font-family: 'Sora', sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--blue); margin-bottom: 0.9rem; }
.tl-title { font-family: 'Sora', sans-serif; font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 300; color: var(--tl-white); line-height: 1.15; letter-spacing: -0.03em; margin-bottom: 0.6rem; }
.tl-title strong { font-weight: 600; }
.tl-rule { width: 36px; height: 2px; background: linear-gradient(90deg, var(--blue), var(--blue-mid)); border-radius: 2px; margin: 0.8rem auto 0; }

.track-outer { position: relative; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%); }
@media (max-width: 480px) {
  .track-outer { -webkit-mask-image: linear-gradient(to right, transparent 0px, black 20px, black calc(100% - 20px), transparent 100%); mask-image: linear-gradient(to right, transparent 0px, black 20px, black calc(100% - 20px), transparent 100%); }
}
.testimonials-scroll-track { display: flex; gap: 16px; overflow-x: auto; padding: 12px clamp(28px, 5vw, 60px) 20px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.testimonials-scroll-track::-webkit-scrollbar { display: none; }

.testimonial-card { flex: 0 0 clamp(280px, 32vw, 360px); scroll-snap-align: start; background: var(--tl-card-bg); border: 1px solid var(--tl-border); border-radius: 20px; padding: clamp(1.4rem, 2.5vw, 1.8rem); position: relative; overflow: hidden; transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.testimonial-card::before { content: none; }
.testimonial-card::after { content: none; }
.testimonial-card:hover { transform: translateY(-5px); border-color: var(--blue-border); box-shadow: 0 16px 48px rgba(217,194,163,0.08), 0 4px 16px rgba(0,0,0,0.3); }
.testimonials-wrapper .stars { color: #f59e0b; font-size: 13px; letter-spacing: 2px; margin-bottom: 1rem; }
.quote-mark { font-family: 'Sora', sans-serif; font-size: 3rem; font-weight: 700; color: var(--blue); opacity: 0.15; line-height: 1; margin-bottom: -0.8rem; display: block; }
.testimonial-text { font-size: 0.88rem; line-height: 1.78; color: var(--tl-white-dim); margin-bottom: 1.2rem; font-weight: 400; }
.card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 1rem; border-top: 1px solid var(--tl-border); }
.testimonial-badge { display: inline-flex; align-items: center; background: var(--blue-dim); border: 1px solid var(--blue-border); padding: 0.28rem 0.75rem; border-radius: 999px; font-family: 'Sora', sans-serif; font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--blue); }

.scroll-dots { display: flex; justify-content: center; gap: 8px; padding-top: 8px; }
.scroll-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.12); transition: background 0.3s, transform 0.3s, width 0.3s; cursor: pointer; }
.scroll-dot.active { background: var(--blue); transform: scale(1.25); width: 18px; border-radius: 3px; }

@media (max-width: 600px) {
    .testimonial-card { flex: 0 0 84vw; }
    .testimonials-scroll-track { padding: 12px 20px 20px; }
}