/* Colours mirror Core/CoreUI/Sources/CoreUI/Colors/Color+Extension.swift */
:root {
  --navy-top: #1c3a78;      /* backgroundGradient top */
  --navy-bottom: #061234;   /* backgroundGradient bottom */
  --gold: #e6b655;          /* accentPrimary */
  --gold-deep: #c89432;     /* accentPrimaryDeep */
  --sky: #5aaeff;           /* accentSecondary (dark) */
  --text: #f5e1c8;          /* primaryTextOnDark */
  --heading: #fbf1e3;
  --muted: #c8c3b9;         /* secondaryTextOnDark */
  --stroke: rgba(255, 255, 255, 0.14); /* surfaceOnGradientStroke */
  --glass: rgba(255, 255, 255, 0.05);
  --radius: 22px;           /* Radius.large */
  /* System fonts on purpose: Google Fonts would send visitors' IPs to Google,
     and the privacy policy says this site talks to no one but ntfy.sh. */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--navy-bottom); scroll-behavior: smooth; }
body { margin: 0; color: var(--text); font: 17px/1.6 var(--font); overflow-x: hidden; }

/* Page backdrop: brand gradient + two soft halos, like .meshBackground().
   A fixed pseudo-element because iOS Safari ignores background-attachment: fixed. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(420px circle at 20% 10%, rgba(230, 182, 85, 0.18), transparent 70%),
    radial-gradient(360px circle at 85% 60%, rgba(90, 174, 255, 0.20), transparent 70%),
    linear-gradient(var(--navy-top), var(--navy-bottom));
}

a { color: var(--gold); }
.muted { color: var(--muted); }

/* ---------- Landing page ---------- */
.page { position: relative; overflow: hidden; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.orb { position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; }
.orb.gold { left: -160px; top: -120px; width: 620px; height: 620px; background: radial-gradient(circle, rgba(230, 182, 85, 0.28), transparent 70%); }
.orb.sky { right: -200px; top: 420px; width: 720px; height: 720px; background: radial-gradient(circle, rgba(90, 174, 255, 0.22), transparent 70%); }

.nav { display: flex; align-items: center; justify-content: space-between; padding-top: 24px; padding-bottom: 24px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; font: 700 22px var(--display); letter-spacing: -0.01em; }
.brand img { width: 40px; height: 40px; border-radius: 10px; }
.nav-links { display: flex; align-items: center; gap: 32px; font-size: 15px; }
.nav-links a { color: var(--muted); text-decoration: none; }
.nav-links a:hover { color: var(--gold); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 28px; border-radius: 999px; border: 0;
  font: 700 17px var(--font); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn.primary { background: linear-gradient(var(--gold), var(--gold-deep)); color: var(--navy-bottom); box-shadow: 0 14px 36px rgba(230, 182, 85, 0.35); }
.btn.ghost { background: rgba(255, 255, 255, 0.06); color: var(--text); border: 1px solid rgba(255, 255, 255, 0.18); font-weight: 500; }
.btn.ghost:hover:enabled, a.btn.ghost:hover { border-color: var(--gold); }
.btn.ghost:disabled { cursor: default; color: var(--gold); border-color: rgba(230, 182, 85, 0.4); }
.btn.small { min-height: 44px; padding: 0 20px; font-size: 15px; }

/* Hero */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 40px; align-items: center; padding-top: 56px; padding-bottom: 80px; }
.hero-copy { display: flex; flex-direction: column; gap: 26px; }
.badge {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 10px;
  padding: 8px 16px 8px 12px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--gold);
  border: 1px solid rgba(230, 182, 85, 0.35); background: rgba(230, 182, 85, 0.08);
}
.badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.hero h1 { margin: 0; font: 800 clamp(48px, 6.4vw, 88px)/0.98 var(--display); letter-spacing: -0.035em; color: var(--heading); }
.hero h1 em { font-style: normal; color: var(--gold); }
.lead { margin: 0; max-width: 520px; font-size: 20px; line-height: 1.55; color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: 14px; }
.proof { display: flex; align-items: center; gap: 14px; font-size: 15px; color: var(--muted); }
.stars { display: flex; gap: 4px; color: var(--gold); }
.stars svg { width: 20px; height: 20px; }

/* Phone mock-up */
.stage { position: relative; height: 700px; display: flex; align-items: center; justify-content: center; }
.ring { position: absolute; border-radius: 50%; }
.ring.inner { width: 460px; height: 460px; border: 1px dashed rgba(230, 182, 85, 0.25); }
.ring.outer { width: 600px; height: 600px; border: 1px solid rgba(255, 255, 255, 0.06); }
.phone {
  position: relative; width: 320px; height: 660px; padding: 12px; border-radius: 52px;
  background: linear-gradient(160deg, #3a4a6e, #121a33);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.screen {
  height: 100%; border-radius: 42px; overflow: hidden; display: flex; flex-direction: column; gap: 18px;
  padding: 56px 22px 22px; background: linear-gradient(var(--navy-top), var(--navy-bottom));
}
.screen .cover { height: 252px; border-radius: 22px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); }
.screen .title { font: 700 22px var(--display); color: var(--heading); }
.screen .artist { font-size: 14px; color: var(--muted); }
.rating { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 20px; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.12); }
.rating-row { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; color: var(--muted); }
.score { font: 800 34px var(--display); color: var(--gold); }
.score small { font-size: 15px; font-weight: 500; color: var(--muted); }
.bar { position: relative; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.bar span { position: absolute; inset: 0 15% 0 0; border-radius: 99px; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); transform-origin: left center; }
.play { display: flex; gap: 8px; margin-top: auto; }
.play .pill { flex-grow: 1; display: flex; align-items: center; justify-content: center; height: 44px; border-radius: 999px; background: var(--gold); color: var(--navy-bottom); font-size: 14px; font-weight: 700; }
.play .heart { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.1); }
.chip {
  position: absolute; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 18px;
  background: rgba(12, 24, 60, 0.72); border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
  font-size: 15px; font-weight: 500; color: var(--heading); white-space: nowrap;
}
.chip svg { width: 18px; height: 18px; flex-shrink: 0; }
.chip.one { left: 10px; top: 150px; font-weight: 700; }
.chip.two { right: 0; top: 300px; }
.chip.three { left: 40px; bottom: 110px; }

/* Album covers: abstract art, not real artwork */
.art1 { background: radial-gradient(circle at 30% 30%, #ffd27a 0 18%, transparent 19%), linear-gradient(135deg, #e2583e, #7a1f4d); }
.art2 { background: conic-gradient(from 200deg at 60% 40%, #5aaeff, #1c3a78, #0b1636, #5aaeff); }
.art3 { background: repeating-linear-gradient(45deg, #f5e1c8 0 14px, #e6b655 14px 28px); }
.art4 { background: radial-gradient(circle at 50% 110%, #ff8a5b 0 40%, transparent 41%), linear-gradient(#2a1650, #0d0a24); }
.art5 { background: radial-gradient(circle at 70% 30%, #9be7c4 0 22%, transparent 23%), linear-gradient(160deg, #0f5a5a, #062a33); }
.art6 { background: linear-gradient(90deg, #141413 0 33%, #e6b655 33% 66%, #f5e1c8 66%); }
.art7 { background: radial-gradient(circle at 40% 45%, transparent 0 26%, #f5e1c8 27% 30%, transparent 31%), linear-gradient(135deg, #6b3fd4, #1b1047); }
.art8 { background: conic-gradient(from 90deg, #ff5f6d, #ffc371, #ff5f6d); }

/* Scrolling album strip */
.strip { padding: 24px 0 110px; }
.eyebrow { margin-bottom: 28px; font-size: 14px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.track { display: flex; gap: 20px; width: max-content; }
.track div { width: 180px; height: 180px; border-radius: 22px; flex-shrink: 0; }

/* Features */
.section { padding-top: 40px; padding-bottom: 120px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 56px; }
.section h2, .cta-card h2 { margin: 0; font: 800 clamp(38px, 4.4vw, 60px)/1.02 var(--display); letter-spacing: -0.03em; color: var(--heading); }
.section-head h2 { max-width: 640px; }
.section-head p { margin: 0; max-width: 380px; font-size: 18px; line-height: 1.55; color: var(--muted); }
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(300px, auto); gap: 24px; }
.tile { display: flex; flex-direction: column; gap: 14px; padding: 34px; border-radius: 32px; background: var(--glass); border: 1px solid rgba(255, 255, 255, 0.12); }
.tile h3 { margin: 0; font: 700 26px var(--display); color: var(--heading); }
.tile p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--muted); }
.icon { width: 48px; height: 48px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: rgba(90, 174, 255, 0.15); color: var(--sky); }
.icon svg { width: 24px; height: 24px; }
.tile.big { grid-row: span 2; justify-content: space-between; padding: 40px; background: linear-gradient(160deg, rgba(230, 182, 85, 0.18), rgba(230, 182, 85, 0.04)); border-color: rgba(230, 182, 85, 0.3); }
.tile.big h3 { font-size: 36px; letter-spacing: -0.02em; }
.tile.big p { font-size: 17px; }
.tile.big .icon { width: 56px; height: 56px; border-radius: 18px; background: var(--gold); color: var(--navy-bottom); }
.tile.big .icon svg { width: 28px; height: 28px; }
.scale { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; align-items: end; height: 150px; }
.scale span { border-radius: 8px; background: var(--gold); }
.scale span:last-child { background: rgba(255, 255, 255, 0.12); }

/* Steps */
.section.center h2 { text-align: center; margin-bottom: 48px; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.step { display: flex; flex-direction: column; gap: 14px; padding: 36px; border-radius: 28px; border: 1px solid rgba(255, 255, 255, 0.1); }
.step b { font: 800 64px/1 var(--display); color: var(--gold); }
.step h3 { margin: 0; font-size: 22px; color: var(--heading); }
.step p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--muted); }

/* Closing call to action */
.cta-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 24px;
  padding: 80px 64px; border-radius: 40px; text-align: center;
  background: linear-gradient(160deg, rgba(28, 58, 120, 0.9), rgba(6, 18, 52, 0.9));
  border: 1px solid rgba(230, 182, 85, 0.3); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}
.cta-card::before { content: ""; position: absolute; left: 50%; top: -260px; width: 520px; height: 520px; margin-left: -260px; border-radius: 50%; background: radial-gradient(circle, rgba(230, 182, 85, 0.28), transparent 70%); pointer-events: none; }
.cta-card > * { position: relative; }
.cta-card img { width: 104px; height: 104px; border-radius: 26px; box-shadow: 0 18px 44px rgba(230, 182, 85, 0.3); }
.cta-card h2 { max-width: 760px; }
.cta-card p { margin: 0; font-size: 19px; color: var(--muted); }
.cta-card .actions { justify-content: center; margin-top: 8px; }

.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 100px; padding-top: 32px; padding-bottom: 48px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 15px; color: var(--muted); }
.site-footer .brand { font-size: 15px; font-weight: 400; color: var(--muted); }
.site-footer .brand img { width: 28px; height: 28px; border-radius: 8px; }
.site-footer nav { display: flex; gap: 28px; }
.site-footer nav a { color: var(--muted); text-decoration: none; }
.site-footer nav a:hover { color: var(--gold); }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .float { animation: float 6s ease-in-out infinite; }
  .chip.one { animation: float 5s ease-in-out infinite 0.4s; }
  .chip.two { animation: float 7s ease-in-out infinite 1.2s; }
  .chip.three { animation: float 5.5s ease-in-out infinite 2s; }
  .orb { animation: drift 14s ease-in-out infinite alternate; }
  .orb.sky { animation-duration: 18s; animation-direction: alternate-reverse; }
  .track { animation: marquee 38s linear infinite; }
  .twinkle { animation: twinkle 2.4s ease-in-out infinite; }
  .badge .dot { animation: pulse 2s ease-out infinite; }
  .rise { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .rise.d1 { animation-delay: 0.15s; }
  .rise.d2 { animation-delay: 0.3s; }
  .bar span { animation: fillbar 2.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.6s both; }
  /* Scroll reveal; only armed once JS is running, so no-JS visitors see everything. */
  .js .reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .js .reveal.seen { opacity: 1; transform: none; }
}
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(60px, -40px) scale(1.15); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.82); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(230, 182, 85, 0.6); } 100% { box-shadow: 0 0 0 12px rgba(230, 182, 85, 0); } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes fillbar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Tablet & phone ---------- */
@media (max-width: 960px) {
  .nav-links a:not(.btn) { display: none; }
  .hero { grid-template-columns: minmax(0, 1fr); padding-top: 32px; padding-bottom: 24px; gap: 8px; }
  .lead { font-size: 18px; }
  .stage { height: 620px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 32px; }
  .bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 16px; }
  .tile.big { grid-row: auto; gap: 14px; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .section { padding-bottom: 72px; }
  .strip { padding-bottom: 64px; }
}
@media (max-width: 560px) {
  .brand { font-size: 20px; }
  .brand img { width: 36px; height: 36px; }
  .actions { flex-direction: column; }
  .actions .btn { width: 100%; }
  .proof { justify-content: center; font-size: 13px; flex-wrap: wrap; }
  .stars svg { width: 16px; height: 16px; }
  .stage { height: 600px; }
  .ring.inner { width: 340px; height: 340px; }
  .ring.outer { display: none; }
  .phone { width: 264px; height: 546px; padding: 10px; border-radius: 44px; }
  .screen { border-radius: 36px; padding: 44px 18px 18px; gap: 14px; }
  .screen .cover { height: 208px; }
  .chip { padding: 10px 14px; font-size: 13px; }
  .chip.one { left: 0; top: 70px; }
  .chip.two { right: 0; top: auto; bottom: 90px; }
  .chip.three { display: none; }
  .eyebrow { font-size: 12px; margin-bottom: 18px; }
  .track { gap: 12px; }
  .track div { width: 120px; height: 120px; border-radius: 16px; }
  .tile, .tile.big { padding: 24px; border-radius: 24px; }
  .tile.big h3 { font-size: 26px; }
  .scale { height: 96px; gap: 5px; }
  .step { padding: 24px; border-radius: 22px; }
  .step b { font-size: 44px; }
  .cta-card { padding: 48px 24px; border-radius: 30px; gap: 18px; }
  .cta-card img { width: 84px; height: 84px; border-radius: 21px; }
  .cta-card p { font-size: 16px; }
  .site-footer { flex-direction: column-reverse; margin-top: 56px; }
}

/* ---------- Legal pages ---------- */
main { max-width: 880px; margin: 0 auto; padding: 32px 16px 48px; }
main h1 { font-size: clamp(2.4rem, 7vw, 3.6rem); line-height: 1.1; margin: 0 0 12px; letter-spacing: -0.02em; }
main h2 { margin: 0 0 8px; font-size: 1.25rem; }
.doc { max-width: 720px; margin: 0 auto; }
.doc h2 { margin-top: 2em; }
.back { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; margin-bottom: 24px; }
.back img { width: 32px; height: 32px; border-radius: 8px; }
main footer { margin-top: 64px; padding-top: 16px; border-top: 1px solid var(--stroke); font-size: 0.9rem; text-align: center; }
main footer a { margin: 0 12px; color: var(--muted); text-decoration: none; }
main footer a:hover { color: var(--gold); }