@import url('https://fonts.googleapis.com/css2?family=Parisienne&family=Italianno&display=swap');

:root{
  --ink:        #0F0D14;
  --ink-card:   #1A1A1A;
  --brand:      #7A33F2;
  --brand-dark: #591FC7;
  --gold:       #DAAD53;

  --text:       #FFFFFF;
  --text-2:     rgba(255,255,255,.70);
  --text-3:     rgba(255,255,255,.45);

  --radius-card:  20px;
  --radius-panel: 28px;
  --radius-cta:   28px;

  --max: 1120px;
  --measure: min(68ch, 720px);
}

*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  font-size:16px;
  line-height:1.55;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,p,ul,figure{ margin:0; }
.container{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:24px;
}
.measure{ max-width:var(--measure); margin-inline:auto; }

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- Typography voices ---------- */
.wordmark{
  font-family:"Parisienne", cursive;
  color:var(--gold);
  text-shadow:0 0 14px rgba(218,173,83,.35), 0 0 30px rgba(218,173,83,.18);
  line-height:1;
}
.emotional{
  font-family:"Parisienne", cursive;
  color:var(--gold);
  text-shadow:0 0 14px rgba(218,173,83,.30), 0 0 28px rgba(218,173,83,.14);
  line-height:1.2;
}
.figure{
  font-family:Georgia, "Times New Roman", Times, serif;
  font-weight:700;
  color:var(--gold);
}
.label{
  text-transform:uppercase;
  letter-spacing:1.8px;
  font-size:12px;
  color:var(--text-3);
}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:1.8px;
  font-size:13px;
  color:var(--gold);
  font-weight:600;
}

/* ---------- Gold rule / ornament ---------- */
.gold-rule{
  height:1px;
  width:100%;
  background:linear-gradient(90deg, transparent, rgba(218,173,83,.55), transparent);
  border:0;
}
.ornament{
  width:min(220px, 60%);
  height:34px;
  margin-inline:auto;
  position:relative;
}
.ornament::before{
  content:"";
  position:absolute; inset:50% 0 auto 0;
  height:1px;
  transform:translateY(-50%);
  background:linear-gradient(90deg, transparent, rgba(218,173,83,.55) 45%, rgba(218,173,83,.55) 55%, transparent);
}
.ornament::after{
  content:"\2766";
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  color:var(--gold);
  font-size:15px;
  background:var(--ink);
  padding:0 10px;
}

/* ---------- Surfaces (from the app's PlanCard / CTA) ---------- */
.card{
  border-radius:var(--radius-card);
  background:linear-gradient(180deg, rgba(122,51,242,.18), rgba(89,31,199,.06));
  border:.9px solid rgba(218,173,83,.32);
  box-shadow:0 4px 8px rgba(122,51,242,.18);
  padding:28px 24px;
}
.card--featured{
  background:linear-gradient(180deg, rgba(122,51,242,.34), rgba(89,31,199,.12));
  border-color:rgba(218,173,83,.60);
}
.card h3{
  font-size:17px;
  margin-bottom:8px;
}
.card p{
  color:var(--text-2);
  font-size:14.5px;
}

.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:56px;
  padding-inline:28px;
  border-radius:var(--radius-cta);
  color:#fff;
  font-size:16px;
  font-weight:600;
  text-decoration:none;
  border:none;
  cursor:pointer;
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), transparent 50%),
    linear-gradient(135deg, rgba(218,173,83,.92), var(--brand), var(--brand-dark));
  box-shadow:0 7px 18px rgba(122,51,242,.42), 0 2px 26px rgba(218,173,83,.16);
  transition:transform .16s ease-out, filter .16s ease-out;
  min-height:44px;
}
.cta:active{ transform:scale(.975); filter:brightness(.96); }
.cta[aria-disabled="true"]{
  cursor:not-allowed;
  filter:grayscale(.35) brightness(.85);
}
.cta[aria-disabled="true"]:active{ transform:none; filter:grayscale(.35) brightness(.85); }
.cta-note{
  display:block;
  margin-top:10px;
  font-size:12.5px;
  color:var(--text-3);
}

/* ---------- Hero backdrop (ReviveBackdrop + AtmosphereLayer) ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  padding-block:120px 64px;
  isolation:isolate;
}
.hero-bg{
  position:absolute; inset:0;
  z-index:-2;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(122,51,242,.30), transparent 60%),
    var(--ink);
}
.hero-vignette{
  position:absolute; inset:0;
  z-index:-1;
  background:radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(15,13,20,.75) 100%);
  pointer-events:none;
}
.atmosphere{ position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.atmosphere .glow{
  position:absolute;
  width:46vmax; height:46vmax;
  border-radius:50%;
  filter:blur(42px);
  opacity:.7;
}
.atmosphere .glow--gold{
  top:8%; left:-8%;
  background:radial-gradient(circle, rgba(218,173,83,.16), transparent 70%);
}
.atmosphere .glow--brand{
  bottom:-10%; right:-12%;
  background:radial-gradient(circle, rgba(122,51,242,.22), transparent 70%);
}
.atmosphere .mote{
  position:absolute;
  width:3px; height:3px;
  border-radius:50%;
  background:var(--gold);
  opacity:.5;
}

@media (prefers-reduced-motion: no-preference){
  .atmosphere .glow--gold{ animation:breathe-a 19s ease-in-out infinite; }
  .atmosphere .glow--brand{ animation:breathe-b 23s ease-in-out infinite; }
  .atmosphere .mote{ animation:drift 14s ease-in-out infinite; }
}
@keyframes breathe-a{
  0%,100%{ opacity:.35; transform:scale(1); }
  50%{ opacity:.75; transform:scale(1.12); }
}
@keyframes breathe-b{
  0%,100%{ opacity:.7; transform:scale(1.1); }
  50%{ opacity:.3; transform:scale(1); }
}
@keyframes drift{
  0%,100%{ transform:translateY(0); opacity:.35; }
  50%{ transform:translateY(-14px); opacity:.7; }
}

.hero-grid{
  position:relative;
  display:grid;
  gap:48px;
  align-items:center;
}
.hero-copy{ text-align:center; }
.hero-copy .wordmark{ font-size:54px; }
.hero-copy h1{
  font-size:clamp(28px, 5vw, 40px);
  font-weight:600;
  margin-top:20px;
  letter-spacing:-.01em;
}
.hero-copy .sub{
  color:var(--text-2);
  font-size:17px;
  max-width:46ch;
  margin:16px auto 0;
}
.hero-copy .ornament{ margin-block:24px; }
.hero-copy .cta{ margin-top:28px; }

/* iPhone mockup, CSS-drawn frame with an image slot */
.phone{
  position:relative;
  width:min(78vw, 300px);
  aspect-ratio:9/19.5;
  margin-inline:auto;
  border-radius:44px;
  padding:12px;
  background:linear-gradient(160deg, #2a2a2a, #0c0c0c);
  box-shadow:0 30px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(218,173,83,.25), 0 0 60px rgba(122,51,242,.25);
}
.phone-screen{
  position:relative;
  width:100%; height:100%;
  border-radius:32px;
  overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(122,51,242,.35), transparent 60%),
    linear-gradient(180deg, #1c1a22, var(--ink));
}
.phone-screen img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.phone-screen .fallback{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:16px;
  color:var(--text-3);
  font-size:12px;
  letter-spacing:.5px;
}
.phone-notch{
  position:absolute; top:12px; left:50%; transform:translateX(-50%);
  width:38%; height:22px;
  background:#0c0c0c;
  border-radius:12px;
  z-index:2;
}

/* ---------- How it works ---------- */
.steps{ padding-block:96px; }
.steps-grid{
  display:grid;
  gap:40px;
  position:relative;
}
.step{ text-align:center; position:relative; }
.step .figure{ font-size:40px; display:block; }
.step h3{ font-size:18px; margin-top:12px; }
.step p{ color:var(--text-2); font-size:14.5px; margin-top:8px; }
.steps-line{
  display:none;
}

/* ---------- Features ---------- */
.features{ padding-block:96px; }
.features-grid{
  display:grid;
  gap:20px;
}

/* ---------- Emotional break ---------- */
.emotional-section{
  padding-block:160px;
  text-align:center;
}
.emotional-section .emotional{
  font-size:clamp(34px, 6vw, 56px);
}
.emotional-section .ornament{ margin-block:32px; }

/* ---------- Final CTA ---------- */
.final-cta{
  position:relative;
  padding-block:120px;
  text-align:center;
  overflow:hidden;
}
.final-cta .album-glow{
  width:min(70vw, 260px);
  aspect-ratio:3/4;
  margin:0 auto 32px;
  border-radius:12px;
  background:
    radial-gradient(120% 80% at 50% 30%, rgba(122,51,242,.35), transparent 65%),
    linear-gradient(155deg, #2a1f12, #1a1420);
  border:1px solid rgba(218,173,83,.4);
  box-shadow:0 0 60px rgba(122,51,242,.35), 0 20px 50px rgba(0,0,0,.5);
  position:relative;
  overflow:hidden;
}
.final-cta .album-glow img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}

/* ---------- Footer ---------- */
footer{
  padding-block:48px;
  border-top:1px solid rgba(218,173,83,.18);
}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:16px 28px;
  justify-content:center;
  list-style:none;
  padding:0;
  font-size:13.5px;
}
.footer-links a{ text-decoration:none; color:var(--text-2); }
.footer-links a:hover{ color:var(--gold); }
.footer-copy{
  text-align:center;
  margin-top:20px;
  font-size:12.5px;
  color:var(--text-3);
}

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease-out, transform .6s ease-out; }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- Legal pages ---------- */
.legal-topbar{
  padding-block:20px;
  border-bottom:1px solid rgba(218,173,83,.18);
}
.legal-topbar .container{ display:flex; align-items:center; }
.legal-topbar .wordmark{ font-size:28px; text-decoration:none; }
.legal-header{ padding-block:56px 24px; }
.legal-header h1{ font-size:clamp(28px,5vw,38px); }
.legal-header .label{ margin-bottom:12px; }
.legal-body{ padding-block:24px 96px; }
.legal-body h2{
  font-size:20px;
  color:var(--gold);
  margin-top:40px;
  margin-bottom:12px;
}
.legal-body h2:first-child{ margin-top:0; }
.legal-body h3{ font-size:16px; margin-top:24px; margin-bottom:8px; }
.legal-body p{ color:var(--text-2); margin-bottom:14px; }
.legal-body ul{ color:var(--text-2); padding-left:20px; margin-bottom:14px; }
.legal-body li{ margin-bottom:8px; }
.legal-body a{ color:var(--gold); }
.legal-updated{ color:var(--text-3); font-size:13px; margin-bottom:8px; }
.contact-block{
  margin-top:40px;
  padding:24px;
}
.contact-block a.cta{ margin-top:16px; height:48px; padding-inline:22px; font-size:14.5px; }

/* ---------- Desktop ---------- */
@media (min-width:900px){
  .container{ padding-inline:40px; }
  .hero-grid{ grid-template-columns:1.1fr .9fr; text-align:left; }
  .hero-copy{ text-align:left; }
  .hero-copy .sub{ margin-inline:0; }
  .hero-copy .ornament{ margin-inline:0; }
  .atmosphere .glow{ width:36vmax; height:36vmax; }
  .steps-grid{ grid-template-columns:repeat(3,1fr); }
  .steps-line{
    display:block;
    position:absolute;
    top:24px; left:16.6%; right:16.6%;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(218,173,83,.5) 20%, rgba(218,173,83,.5) 80%, transparent);
  }
  .features-grid{ grid-template-columns:repeat(3,1fr); }
}