* { box-sizing: border-box; margin: 0; padding: 0; }
/* Color tokens mirror the mobile app's MuSlihColors (main.dart) exactly,
   so the web theme toggle matches the app's dark/light modes. */
:root {
  --teal: #7EC8C8;
  --purple: #B07ED8;
  --teal-dark: #3A8FA0;
  --purple-dark: #6030A8;
  --bg: #12111F;
  --bg-raised: rgba(30,27,56,0.82);
  --text: #F0EDF8;
  --muted: #8FA0BE;
  --sub: rgba(143,160,190,0.55);
  --border: rgba(255,255,255,0.1);
  --panel-scrim: rgba(18,17,31,0.62);
  --nav-bg: rgba(18,17,31,0.72);
  --dot-inactive: rgba(255,255,255,0.22);
  --btn-ghost-bg: rgba(255,255,255,0.06);
  --btn-ghost-bg-hover: rgba(255,255,255,0.1);
}
html[data-theme="light"] {
  --teal: #2A7888;
  --purple: #6030A8;
  --bg: #F5F2EE;
  --bg-raised: rgba(255,255,255,0.85);
  --text: #1A1030;
  --muted: #6B5F80;
  --sub: rgba(107,95,128,0.5);
  --border: rgba(26,16,48,0.12);
  --panel-scrim: rgba(245,242,238,0.72);
  --nav-bg: rgba(245,242,238,0.78);
  --dot-inactive: rgba(26,16,48,0.18);
  --btn-ghost-bg: rgba(26,16,48,0.04);
  --btn-ghost-bg-hover: rgba(26,16,48,0.08);
}
html, body { height: 100%; overflow: hidden; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  transition: background-color 0.35s ease, color 0.35s ease;
}
a { color: inherit; }
.grad {
  background: linear-gradient(135deg, var(--teal), var(--purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── CONSTANT COSMIC BACKGROUND ── */
.cosmic-bg {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: var(--bg);
}
.orb-shift {
  position: absolute; inset: 0;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.orb { position: absolute; border-radius: 50%; }
.orb-teal {
  width: 520px; height: 720px; top: -140px; left: -120px;
  background: var(--teal); opacity: 0.55; filter: blur(40px);
  animation: driftTeal 12s ease-in-out infinite;
}
.orb-purple {
  width: 480px; height: 680px; bottom: -160px; right: -110px;
  background: var(--purple); opacity: 0.5; filter: blur(40px);
  animation: driftPurple 14s ease-in-out infinite;
}
@keyframes driftTeal {
  0%, 100% { transform: translate(0,0) scale(1) rotate(-14deg); }
  33% { transform: translate(70px, 50px) scale(1.1) rotate(-8deg); }
  66% { transform: translate(-40px, 70px) scale(0.94) rotate(-18deg); }
}
@keyframes driftPurple {
  0%, 100% { transform: translate(0,0) scale(1) rotate(14deg); }
  33% { transform: translate(-60px, -50px) scale(1.06) rotate(8deg); }
  66% { transform: translate(50px, -70px) scale(0.92) rotate(18deg); }
}
@media (max-width: 720px) {
  .orb-teal { width: 200px; height: 290px; top: 26px; left: 4px; }
  .orb-purple { width: 190px; height: 280px; bottom: 36px; right: 4px; }
}

/* ── TOP NAV (fixed overlay) ── */
.fp-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: var(--nav-bg); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}
.nav-inner {
  max-width: 1080px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; cursor: pointer; }
.nav-brand span { font-family: 'Festive', cursive; font-size: 1.5rem; color: var(--text); }
.logo-mark { width: 32px; height: 32px; display: block; }
.logo-mark.logo-light-mark { display: none; }
html[data-theme="light"] .logo-mark.logo-dark-mark { display: none; }
html[data-theme="light"] .logo-mark.logo-light-mark { display: block; }
.nav-links { display: flex; align-items: center; gap: 26px; list-style: none; }
.nav-links a {
  font-size: 0.85rem; color: var(--muted); text-decoration: none; transition: color 0.2s;
  white-space: nowrap; cursor: pointer;
}
.nav-links a:hover, .nav-links a.active { color: var(--text); }
.nav-right { display: flex; align-items: center; gap: 16px; }
.nav-cta {
  background: linear-gradient(135deg, var(--teal-dark), var(--purple-dark));
  color: #fff !important; padding: 9px 18px; border-radius: 10px;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.2px; text-decoration: none;
}

/* ── THEME SWITCH ── */
.theme-switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.theme-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  width: 46px; height: 25px; border-radius: 999px;
  background: rgba(128,128,128,0.16); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 5px; position: relative; transition: background-color 0.3s ease, border-color 0.3s ease;
}
.switch-icon { font-size: 10px; line-height: 1; position: relative; z-index: 1; opacity: 0.8; }
.switch-thumb {
  position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-dark), var(--purple-dark));
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); z-index: 0;
}
.theme-switch input:checked + .switch-track .switch-thumb { transform: translateX(21px); }

/* ── DOT NAVIGATION ── */
.fp-dots {
  position: fixed; right: 26px; top: 50%; transform: translateY(-50%); z-index: 1001;
  display: flex; flex-direction: column; gap: 14px;
}
.fp-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--dot-inactive);
  border: 1px solid var(--border); cursor: pointer; position: relative;
  transition: background 0.2s, transform 0.2s; padding: 0;
}
.fp-dot.active { background: linear-gradient(135deg, var(--teal), var(--purple)); border-color: transparent; transform: scale(1.35); }
.fp-dot .tip {
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  font-size: 0.72rem; white-space: nowrap; color: var(--muted);
  background: var(--nav-bg); border: 1px solid var(--border); padding: 4px 10px;
  border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity 0.15s;
}
.fp-dot:hover .tip { opacity: 1; }

/* ── PANELS (slide-over full screens, cosmic bg shows through) ── */
.panel {
  position: fixed; inset: 0; width: 100%; height: 100%;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  transform: translateY(0);
  transition: transform 0.85s cubic-bezier(0.83,0,0.17,1), background-color 0.35s ease;
  background: var(--panel-scrim);
}
.panel.below { transform: translateY(100%); }
.panel.above { transform: translateY(-100%); }
.panel:nth-of-type(1) { z-index: 10; }
.panel:nth-of-type(2) { z-index: 20; }
.panel:nth-of-type(3) { z-index: 30; }
.panel:nth-of-type(4) { z-index: 40; }
.panel:nth-of-type(5) { z-index: 50; }
.panel:nth-of-type(6) { z-index: 60; }

.panel-inner { max-width: 1080px; margin: 0 auto; padding: 108px 24px 70px; min-height: 100%; display: flex; flex-direction: column; }
.panel-inner.center { justify-content: center; }

/* ── HERO ── */
.hero { text-align: center; }
.eyebrow { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--sub); margin-bottom: 16px; }
h1 { font-size: clamp(2rem, 5.5vw, 3.4rem); font-weight: 700; line-height: 1.15; letter-spacing: -1px; max-width: 760px; margin: 0 auto 20px; }
.hero p.lede { font-size: clamp(0.95rem, 2.2vw, 1.15rem); color: var(--muted); max-width: 540px; margin: 0 auto 36px; line-height: 1.7; }
.hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px; }
/* --- Store badges (app went live on both stores, 2026-08-07) ---
   Both supplied SVGs are the BLACK variants, so on the dark default theme the
   badge's outer edge would vanish into the background. Rather than modify the
   artwork (neither Apple nor Google permit that), the ANCHOR carries a black
   plate plus a 1px light ring via box-shadow — box-shadow follows border-radius
   exactly, so the ring traces the rounded corner cleanly where a border on a
   differently-rounded child could not.
   Equal HEIGHT, auto width, is the rule: the two badges have different aspect
   ratios (Apple 119.66x40 = 2.99:1, Google 239x70.9 = 3.37:1), so matching
   widths would squash one. 50px sits above Apple's 40px minimum. */
.store-badges { display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; }
.store-badge { display: inline-flex; background: #000; border-radius: 8px; line-height: 0; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.store-badge img { height: 50px; width: auto; display: block; border-radius: 8px; }
.store-badge:hover { transform: translateY(-2px); }
html[data-theme="dark"] .store-badge { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28); }
html[data-theme="dark"] .store-badge:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5); }
html[data-theme="light"] .store-badge { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); }
html[data-theme="light"] .store-badge:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26); }
/* In the hero the badges are the primary CTA, so they lead and the ghost
   "See how it works" button sits on its own line beneath them. */
.hero-ctas .store-badges { flex-basis: 100%; margin-bottom: 4px; }

.btn { display: inline-block; padding: 14px 26px; border-radius: 12px; font-size: 0.9rem; font-weight: 700; text-decoration: none; letter-spacing: 0.2px; transition: filter 0.2s, background 0.2s; cursor: pointer; border: none; font-family: inherit; }
.btn-primary { background: linear-gradient(135deg, var(--teal-dark), var(--purple-dark)); color: #fff; }
.btn-primary:hover { filter: brightness(1.15); }
.btn-ghost { background: var(--btn-ghost-bg); border: 1px solid var(--border); color: var(--text); transition: filter 0.2s, background-color 0.2s, border-color 0.35s ease; }
.btn-ghost:hover { background: var(--btn-ghost-bg-hover); }
.trust-strip { font-size: 0.78rem; color: var(--sub); margin-bottom: 40px; }
.scroll-cue {
  display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0 auto;
  background: none; border: none; color: var(--sub); font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 1.5px; cursor: pointer;
}
.scroll-cue .chev { font-size: 1.1rem; animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(6px);} }

/* ── SECTION HEADS ── */
.section-head { text-align: center; max-width: 620px; margin: 0 auto 44px; }
.section-head .eyebrow { margin-bottom: 12px; }
.section-head h2 { font-size: clamp(1.5rem, 3.5vw, 2.2rem); font-weight: 700; letter-spacing: -0.5px; margin-bottom: 14px; }
.section-head p { color: var(--muted); font-size: 0.98rem; line-height: 1.7; }

/* ── GRID / CARDS ── */
.grid { display: grid; gap: 18px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 16px; padding: 24px 22px; backdrop-filter: blur(8px); transition: background-color 0.35s ease, border-color 0.35s ease; }
.card .icon { width: 40px; height: 40px; border-radius: 12px; background: var(--btn-ghost-bg); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; margin-bottom: 14px; transition: background-color 0.35s ease, border-color 0.35s ease; }
.card h3 { font-size: 1.02rem; font-weight: 700; margin-bottom: 8px; }
.card p { color: var(--muted); font-size: 0.88rem; line-height: 1.6; }
.step-num { font-size: 0.7rem; font-weight: 700; color: var(--teal); letter-spacing: 1.5px; margin-bottom: 10px; }

/* ── CTA BANNER ── */
.cta-banner { text-align: center; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 20px; padding: 48px 32px; margin-top: 8px; transition: background-color 0.35s ease, border-color 0.35s ease; }
.cta-banner h2 { font-size: clamp(1.3rem, 3vw, 1.8rem); margin-bottom: 12px; font-weight: 700; }
.cta-banner p { color: var(--muted); margin-bottom: 24px; max-width: 460px; margin-left: auto; margin-right: auto; font-size: 0.92rem; }

/* ── PROSE ── */
.prose { max-width: 720px; margin: 0 auto; }
.prose h2 { font-size: 1.3rem; font-weight: 700; margin: 30px 0 12px; letter-spacing: -0.3px; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--muted); font-size: 0.94rem; line-height: 1.75; margin-bottom: 14px; }
.prose ul { color: var(--muted); font-size: 0.94rem; line-height: 1.75; margin: 0 0 14px 20px; }
.prose strong { color: var(--text); }

/* ── FAQ ACCORDION ── */
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q { width: 100%; text-align: left; background: none; border: none; color: var(--text); font-size: 0.96rem; font-weight: 700; padding: 18px 0; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: inherit; }
.faq-q .plus { color: var(--sub); font-size: 1.2rem; font-weight: 400; transition: transform 0.2s; flex-shrink: 0; }
.faq-item.open .faq-q .plus { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.faq-a p { color: var(--muted); font-size: 0.9rem; line-height: 1.7; padding-bottom: 18px; }

.tiny-footer { text-align: center; font-size: 0.72rem; color: var(--sub); margin-top: 40px; }

/* ── RESPONSIVE ── */
@media (max-width: 860px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .nav-links { display: none; }
  /* Narrow phones: 50px badges + 14px gap need ~332px of row. Below that they
     wrap to one per line, centred, rather than shrinking below Apple's minimum. */
  .store-badges { gap: 12px; }
  .store-badge img { height: 46px; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .panel-inner { padding: 96px 20px 100px; }
  .fp-dots { right: 50%; top: auto; bottom: 16px; transform: translateX(50%); flex-direction: row; gap: 10px; }
  .fp-dot .tip { display: none; }
}

/* --- Reviews --- */
.review-card { display: flex; flex-direction: column; gap: 14px; }
.review-stars { color: #F5B301; font-size: 1rem; letter-spacing: 2px; }
.review-card blockquote { margin: 0; color: var(--text); font-size: 0.98rem; line-height: 1.7; font-style: italic; }
.review-person { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.review-avatar { position: relative; width: 92px; height: 92px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--teal-dark), var(--purple-dark)); border: 3px solid var(--teal); box-shadow: 0 4px 14px rgba(0,0,0,0.28); }
.review-avatar[data-seed="purple"] { background: linear-gradient(135deg, var(--purple-dark), var(--teal-dark)); border-color: var(--purple); }
.review-avatar .avatar-initial { color: #fff; font-weight: 700; font-size: 2rem; }
.review-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.review-meta { display: flex; flex-direction: column; line-height: 1.3; }
.review-meta strong { font-size: 0.95rem; }
.review-meta span { color: var(--muted); font-size: 0.78rem; }