/* Inner Echo — site styles
   Velvet promo palette + Spectral/DM Sans type, shared across pages. */

:root {
  --serif: 'Spectral', 'EB Garamond', Georgia, serif;
  --sans: 'DM Sans', -apple-system, 'SF Pro', system-ui, sans-serif;

  /* velvet */
  --v1: #b88aba; --v2: #8c6fae; --v3: #6b4d8f; --v4: #3e2856;
  --cream: #fdf2f7;
  --cream-soft: rgba(220, 200, 230, 0.65);

  /* player screen palette (mirrors the app) */
  --p-text: #2d2438;
  --p-soft: rgba(45, 36, 56, 0.55);
  --p-trackOn: #5d4a72;
  --p-trackOff: rgba(45, 36, 56, 0.20);

  /* legal page */
  --ink: #2d2438;
  --ink-soft: rgba(45, 36, 56, 0.62);
  --ink-faint: rgba(45, 36, 56, 0.42);
  --paper: #f4ecf2;
  --rule: rgba(45, 36, 56, 0.12);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: #34204a; }
body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--paper); }
a { color: inherit; }
img { max-width: 100%; display: block; }

/* ───────────────────────── HOME / HERO ───────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  display: flex;
  align-items: center;
  color: var(--cream);
  background:
    radial-gradient(ellipse 70% 80% at 80% 35%, #d8a8c8 0%, transparent 55%),
    radial-gradient(ellipse 80% 70% at 30% 60%, #8a5d99 0%, transparent 55%),
    radial-gradient(ellipse 70% 80% at 90% 95%, #5d3a72 0%, transparent 55%),
    linear-gradient(135deg, var(--v1) 0%, var(--v2) 30%, var(--v3) 60%, var(--v4) 100%);
}
.hero::before { /* top-left bloom */
  content: ""; position: absolute; top: -180px; left: -180px;
  width: 700px; height: 700px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245,200,222,0.40) 0%, transparent 65%);
  filter: blur(50px); pointer-events: none;
}

.hero-inner {
  position: relative; z-index: 2;
  width: 100%; max-width: 1240px; margin: 0 auto;
  padding: 64px clamp(24px, 6vw, 120px);
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  align-items: center; gap: clamp(32px, 5vw, 80px);
}

.copy { max-width: 720px; }
.headline {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  color: var(--cream);
  font-size: clamp(44px, 5.5vw, 80px);
  line-height: 1.0; letter-spacing: -0.02em; margin: 0;
}
.headline .dim { opacity: 0.62; }
.sub {
  margin: clamp(24px, 3vw, 44px) 0 0;
  font-size: clamp(15px, 1.2vw, 18px); line-height: 1.55;
  color: var(--cream-soft); max-width: 30em; text-wrap: pretty;
}

.cta { margin-top: clamp(32px, 4vw, 56px); display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.appstore-badge { height: 54px; width: auto; display: block; }
.cta-note { font-family: var(--serif); font-style: italic; font-size: clamp(15px, 1.4vw, 20px); color: rgba(245,232,240,0.72); white-space: nowrap; }

.stage { display: flex; justify-content: center; position: relative; }
.stage::before { /* halo behind phone */
  content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 150%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(245,200,222,0.35) 0%, rgba(184,138,186,0.18) 35%, transparent 65%);
  filter: blur(60px); pointer-events: none;
}

/* ───────────────────────── PHONE (CSS recreation) ───────────────────────── */

.phone {
  --s: 0.82;
  position: relative; z-index: 1;
  width: calc(402px * var(--s)); height: calc(874px * var(--s));
  transform: rotate(-3deg);
}
.phone .frame {
  position: absolute; inset: 0;
  border-radius: calc(56px * var(--s)); overflow: hidden; background: #fff;
  box-shadow:
    0 0 0 calc(10px * var(--s)) #2a1f3a,
    0 0 0 calc(12px * var(--s)) rgba(255,255,255,0.12),
    0 40px 80px rgba(45,36,56,0.30),
    0 20px 40px rgba(45,36,56,0.20);
}
.phone .screen {
  width: 402px; height: 874px;
  transform: scale(var(--s)); transform-origin: top left;
  position: relative; overflow: hidden;
  font-family: var(--sans); color: var(--p-text);
  background: linear-gradient(180deg, #e1cae0 0%, #d2b8de 30%, #c0a4d6 65%, #a98ac4 100%);
}
.screen .island {
  position: absolute; top: 13px; left: 50%; transform: translateX(-50%);
  width: 122px; height: 36px; border-radius: 18px; background: #000;
}
.screen .statusbar {
  position: absolute; top: 16px; left: 28px; right: 28px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 16px; font-weight: 600; color: var(--p-text);
}
.screen .statusbar .sys { display: flex; align-items: center; gap: 7px; }
.screen .statusbar .sys svg { display: block; }
.screen .nav {
  position: absolute; top: 64px; left: 28px; right: 28px;
  display: flex; align-items: center; justify-content: space-between;
}
.screen .nav svg { width: 24px; height: 24px; color: var(--p-text); }

.screen .halo {
  position: absolute; top: 145px; left: 50%; transform: translateX(-50%);
  width: 270px; height: 270px; border-radius: 50%;
  filter: blur(1.1px);
  background: radial-gradient(circle closest-side at 50% 50%,
    rgba(255,255,255,1.000) 0.0%, rgba(255,255,255,0.998) 3.3%, rgba(255,253,254,0.976) 6.7%,
    rgba(253,242,250,0.853) 10.0%, rgba(245,227,242,0.678) 13.3%, rgba(237,213,234,0.504) 16.7%,
    rgba(231,204,229,0.390) 20.0%, rgba(227,198,226,0.315) 23.3%, rgba(224,194,225,0.259) 26.7%,
    rgba(221,190,223,0.209) 30.0%, rgba(218,187,222,0.169) 33.3%, rgba(217,185,222,0.145) 36.7%,
    rgba(217,184,223,0.144) 40.0%, rgba(220,186,226,0.170) 44.5%, rgba(225,190,232,0.233) 49.0%,
    rgba(232,196,239,0.320) 53.5%, rgba(239,202,245,0.405) 58.0%, rgba(242,206,246,0.454) 62.5%,
    rgba(240,205,244,0.439) 67.0%, rgba(235,200,240,0.373) 71.5%, rgba(229,193,236,0.281) 76.0%,
    rgba(222,186,230,0.185) 80.5%, rgba(216,180,224,0.102) 85.0%, rgba(212,177,221,0.049) 89.5%,
    rgba(210,175,218,0.021) 94.0%, rgba(209,174,217,0.008) 98.5%, rgba(208,174,217,0.000) 100%);
}

.screen .meta { position: absolute; top: 506px; left: 0; right: 0; text-align: center; }
.screen .meta .title { font-family: var(--serif); font-size: 26px; line-height: 1.1; letter-spacing: -0.2px; color: var(--p-text); }
.screen .meta .sub2 { margin-top: 6px; font-size: 12px; color: var(--p-soft); letter-spacing: 0.3px; }

.screen .pause { position: absolute; top: 601px; left: 0; right: 0; display: flex; justify-content: center; }
.screen .pause svg { width: 44px; height: 44px; color: var(--p-trackOn); }

.screen .srow { position: absolute; left: 30px; right: 30px; }
.screen .srow.voice { top: 696px; }
.screen .srow.music { top: 781px; }
.screen .srow .lbl { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; color: var(--p-text); }
.screen .srow .lbl svg { width: 16px; height: 16px; }
.screen .srow .lbl .name { font-size: 13px; font-weight: 500; letter-spacing: 2px; }
.screen .srow .lbl .pct { margin-left: auto; font-size: 13px; color: var(--p-soft); font-variant-numeric: tabular-nums; }
.screen .track { height: 3px; background: var(--p-trackOff); border-radius: 2px; position: relative; }
.screen .track .fill { position: absolute; left: 0; top: 0; height: 100%; background: var(--p-trackOn); border-radius: 2px; }
.screen .track .knob { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(45,36,56,0.25); }

/* ───────────────────────── RESPONSIVE HOME ───────────────────────── */

@media (max-width: 860px) {
  .hero { align-items: flex-start; }
  .hero-inner {
    grid-template-columns: 1fr; text-align: center;
    padding: clamp(48px, 12vw, 88px) 24px 64px; gap: clamp(36px, 9vw, 64px);
    justify-items: center;
  }
  .copy { max-width: 100%; order: 1; }
  .sub { margin-left: auto; margin-right: auto; }
  .cta { justify-content: center; flex-direction: column; gap: 18px; }
  .stage { order: 2; }
  .phone { --s: 0.78; transform: rotate(0deg); }
  .stage::before { width: 130%; }
}
@media (max-width: 420px) {
  .phone { --s: 0.62; }
}

/* ───────────────────────── LEGAL PAGES ───────────────────────── */

.site-header {
  position: sticky; top: 0; z-index: 5;
  background: rgba(244, 236, 242, 0.86); backdrop-filter: blur(10px);
  border-bottom: 0.5px solid var(--rule);
}
.site-header .wrap { max-width: 820px; margin: 0 auto; padding: 18px clamp(20px, 5vw, 32px); display: flex; align-items: center; gap: 12px; }
.wordmark { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); }
.wordmark span { font-family: var(--serif); font-style: normal; font-size: 22px; white-space: nowrap; }
.site-header .back { margin-left: auto; font-size: 14px; color: var(--ink-soft); text-decoration: none; }
.site-header .back:hover { color: var(--ink); }

.legal { max-width: 820px; margin: 0 auto; padding: clamp(40px, 7vw, 72px) clamp(20px, 5vw, 32px) 96px; }
.legal h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 6vw, 56px); letter-spacing: -0.02em; margin: 0 0 8px; }
.legal .updated { font-size: 14px; color: var(--ink-faint); margin: 0 0 8px; letter-spacing: 0.02em; }
.legal h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 3vw, 28px); letter-spacing: -0.01em; margin: 48px 0 14px; }
.legal h3 { font-size: 17px; font-weight: 600; margin: 28px 0 10px; color: var(--ink); }
.legal p, .legal li { font-size: 16px; line-height: 1.68; color: var(--ink-soft); }
.legal p { margin: 0 0 16px; }
.legal ul { margin: 0 0 18px; padding-left: 22px; }
.legal li { margin: 0 0 8px; }
.legal li::marker { color: var(--ink-faint); }
.legal strong { color: var(--ink); font-weight: 600; }
.legal a { color: var(--v3); text-decoration: none; border-bottom: 1px solid rgba(107,77,143,0.3); }
.legal a:hover { border-bottom-color: var(--v3); }
.legal hr { border: none; border-top: 0.5px solid var(--rule); margin: 40px 0; }

/* ───────────────────────── FOOTER ───────────────────────── */

.site-footer {
  border-top: 0.5px solid var(--rule);
  background: var(--paper);
}
.site-footer .wrap {
  max-width: 1240px; margin: 0 auto; padding: 26px clamp(20px, 5vw, 32px);
  display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--ink-faint);
}
.site-footer a { text-decoration: none; color: var(--ink-soft); }
.site-footer a:hover { color: var(--ink); }
.site-footer .sep { opacity: 0.4; }
/* dark footer when it sits under the hero (home) */
.hero-page .site-footer { background: #34204a; border-top-color: rgba(255,255,255,0.1); }
.hero-page .site-footer .wrap { color: rgba(253,242,247,0.5); }
.hero-page .site-footer a { color: rgba(253,242,247,0.72); }
.hero-page .site-footer a:hover { color: #fff; }