:root{
  --ink:#2B1830;
  --ink-soft:#6B5570;
  --paper:#FBF3F0;
  --surface:#FFFFFF;
  --surface-2:#F6E9EE;
  --magenta:#E62E7B;
  --magenta-ink:#ffffff;
  --blue:#2F6FE0;
  --gold:#B87914;
  --line:#EAD7DD;
  --shadow: 0 20px 50px -25px rgba(43,24,48,.35);
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#F5E9F1;
    --ink-soft:#C9B3C7;
    --paper:#180E22;
    --surface:#241733;
    --surface-2:#2C1A3B;
    --magenta:#FF4F97;
    --magenta-ink:#1A0F26;
    --blue:#5C97FF;
    --gold:#F4B740;
    --line:#3B2749;
    --shadow: 0 20px 60px -20px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --ink:#F5E9F1;
  --ink-soft:#C9B3C7;
  --paper:#180E22;
  --surface:#241733;
  --surface-2:#2C1A3B;
  --magenta:#FF4F97;
  --magenta-ink:#1A0F26;
  --blue:#5C97FF;
  --gold:#F4B740;
  --line:#3B2749;
  --shadow: 0 20px 60px -20px rgba(0,0,0,.6);
  color-scheme: dark;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{
  font-family:"Fraunces",Georgia,"Times New Roman",serif;
  font-weight:650;
  margin:0;
  text-wrap:balance;
  letter-spacing:-0.01em;
}
.mono{font-family:"Space Mono",ui-monospace,Menlo,monospace;}
.container{max-width:1180px;margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem);}
.eyebrow{
  font-family:"Space Mono",monospace;
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--magenta);
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:.6em;
}
.eyebrow::before{
  content:"";
  width:1.4em;height:1px;
  background:currentColor;
  display:inline-block;
}
section{position:relative;}
::selection{background:var(--magenta);color:var(--magenta-ink);}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

/* ---------- header ---------- */
header.site{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem 0;
  gap:1.5rem;
}
.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none;}
.brand-badge{
  width:42px;height:42px;border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 2px var(--paper), 0 0 0 3px var(--line);
  flex:none;
}
.brand-badge img{width:100%;height:100%;object-fit:cover;}
.brand-word{
  font-family:"Fraunces",serif; font-weight:700; font-size:1.32rem;
  color:var(--ink);
}
.brand-word em{color:var(--magenta); font-style:normal;}
nav.links{display:flex; gap:clamp(1rem,2vw,2rem); list-style:none; margin:0; padding:0;}
nav.links a{
  text-decoration:none; font-weight:600; font-size:.92rem; color:var(--ink-soft);
  padding:.3rem .1rem; border-bottom:2px solid transparent;
}
nav.links a:hover{color:var(--ink); border-color:var(--magenta);}
.nav-actions{display:flex; align-items:center; gap:.9rem;}
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:700; font-size:.85rem; text-decoration:none;
  padding:.62rem 1.15rem; border-radius:99px; border:1px solid transparent;
  cursor:pointer; white-space:nowrap;
}
.btn-primary{background:var(--magenta); color:var(--magenta-ink);}
.btn-primary:hover{filter:brightness(1.06);}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--ink);}
.btn-gold{background:var(--gold); color:#241100;}

/* ---------- hero ---------- */
.hero{
  padding:clamp(3rem,7vw,6rem) 0 clamp(2.5rem,6vw,4rem);
  overflow:hidden;
}
.hero-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
.hero h1{font-size:clamp(2.5rem,1.6rem + 3.4vw,4.1rem); line-height:1.03;}
.hero h1 em{font-style:italic; color:var(--magenta);}
.hero p.lead{
  font-size:clamp(1.05rem,.95rem + .4vw,1.2rem); color:var(--ink-soft);
  max-width:46ch; margin:1.1rem 0 1.8rem;
}
.hero-ctas{display:flex; flex-wrap:wrap; gap:.9rem; align-items:center;}
.store-btn{
  display:inline-flex; align-items:center; gap:.65rem;
  background:var(--ink); color:var(--paper);
  padding:.6rem 1.1rem; border-radius:12px; text-decoration:none;
}
.store-btn .play-glyph{
  width:26px;height:26px;border-radius:50%;
  background:linear-gradient(135deg,var(--magenta),var(--blue));
  display:flex;align-items:center;justify-content:center;flex:none;
}
.store-btn .play-glyph svg{width:11px;height:11px;fill:#fff;}
.store-btn .store-text{line-height:1.15;}
.store-btn .store-text small{display:block; font-size:.62rem; letter-spacing:.06em; opacity:.75; text-transform:uppercase;}
.store-btn .store-text strong{font-family:"Fraunces",serif; font-size:1.02rem; font-weight:600;}

/* call mock */
.call-mock{
  position:relative; justify-self:center;
  width:min(320px,80vw); aspect-ratio:9/17.5;
  border-radius:38px; background:var(--ink); color:var(--paper);
  box-shadow:var(--shadow), 0 0 0 8px var(--surface-2);
  padding:1.6rem 1.3rem; overflow:hidden;
}
:root[data-theme="dark"] .call-mock{ box-shadow:var(--shadow), 0 0 0 8px #150a1e; }
.call-mock::before{
  content:""; position:absolute; inset:-40% -40% auto -40%; height:140%;
  background:radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--magenta) 55%, transparent), transparent 60%);
  animation:pulse 4.5s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{transform:scale(.9);opacity:.55;} 50%{transform:scale(1.05);opacity:.9;} }
.call-mock-top{position:relative; text-align:center; font-family:"Space Mono",monospace; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; opacity:.7; margin-bottom:2.1rem;}
.call-avatar{
  position:relative; width:108px; height:108px; margin:0 auto 1rem;
  border-radius:50%; background:linear-gradient(145deg,var(--magenta),var(--blue));
  display:flex; align-items:center; justify-content:center;
  font-family:"Fraunces",serif; font-size:2.4rem; font-weight:700; color:#fff;
}
.call-avatar .ring{position:absolute; inset:-14px; border-radius:50%; border:1px solid color-mix(in srgb, var(--paper) 35%, transparent); animation:ring 3s ease-out infinite;}
.call-avatar .ring.r2{animation-delay:1s;}
@keyframes ring{ 0%{transform:scale(.85); opacity:.9;} 100%{transform:scale(1.5); opacity:0;} }
.call-name{position:relative; text-align:center; font-family:"Fraunces",serif; font-size:1.25rem; font-weight:600;}
.call-sub{position:relative; text-align:center; font-size:.78rem; opacity:.65; margin-top:.2rem;}
.waveform{position:relative; display:flex; align-items:flex-end; justify-content:center; gap:3px; height:34px; margin:1.6rem 0;}
.waveform span{width:3px; border-radius:2px; background:color-mix(in srgb, var(--paper) 70%, transparent); animation:wave 1.2s ease-in-out infinite;}
@keyframes wave{ 0%,100%{transform:scaleY(.35);} 50%{transform:scaleY(1);} }
.call-actions{position:relative; display:flex; justify-content:center; gap:1.4rem; margin-top:auto;}
.call-actions .dot{width:52px;height:52px;border-radius:50%; display:flex; align-items:center; justify-content:center;}
.call-actions .decline{background:#E13B5C;}
.call-actions .accept{background:#33B36B;}
.call-actions svg{width:20px;height:20px;fill:#fff;}

/* ---------- stats ticker ---------- */
.stats{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--surface-2);
}
.stats-row{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; padding:clamp(1.6rem,4vw,2.4rem) 0;}
.stat{text-align:center; padding:0 .5rem;}
.stat .num{font-family:"Space Mono",monospace; font-weight:700; font-size:clamp(1.5rem,1.1rem + 1.6vw,2.3rem); font-variant-numeric:tabular-nums;}
.stat .label{color:var(--ink-soft); font-size:.82rem; margin-top:.3rem;}

/* ---------- generic section rhythm ---------- */
.section{padding:clamp(3.5rem,7vw,6.5rem) 0;}
.section-head{max-width:640px; margin-bottom:clamp(2rem,4vw,3rem);}
.section-head h2{font-size:clamp(1.9rem,1.5rem + 1.6vw,2.6rem); margin-top:.5rem;}
.section-head p{color:var(--ink-soft); font-size:1.05rem; margin-top:.8rem; max-width:58ch;}

/* about */
.about-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4rem); align-items:center;}
.about-visual{
  background:var(--ink); color:var(--paper); border-radius:24px; padding:2rem;
  display:flex; flex-direction:column; gap:1.1rem; box-shadow:var(--shadow);
}
.about-visual .row{display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid color-mix(in srgb, var(--paper) 18%, transparent); padding-bottom:.9rem;}
.about-visual .row:last-child{border-bottom:none; padding-bottom:0;}
.about-visual .row .k{font-size:.82rem; opacity:.7;}
.about-visual .row .v{font-family:"Space Mono",monospace; font-weight:700;}
.about-copy p{font-size:1.05rem; color:var(--ink-soft); margin:0 0 1.1rem;}
.about-copy p:last-child{margin-bottom:0;}

/* how it works */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,2rem);}
.step{
  background:var(--surface); border:1px solid var(--line); border-radius:20px;
  padding:1.8rem 1.6rem;
}
.step .idx{font-family:"Space Mono",monospace; font-size:.78rem; color:var(--magenta); font-weight:700;}
.step h3{font-size:1.2rem; margin:.9rem 0 .5rem;}
.step p{color:var(--ink-soft); font-size:.94rem; margin:0;}

/* features */
.feature-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.25rem,3vw,1.75rem);}
.feature-card{
  border-radius:22px; padding:2rem; background:var(--surface);
  border:1px solid var(--line); position:relative; overflow:hidden;
}
.feature-card.tint{background:linear-gradient(160deg, color-mix(in srgb, var(--magenta) 12%, var(--surface)), var(--surface));}
.feature-card h3{font-size:1.3rem; margin-bottom:.6rem;}
.feature-card p{color:var(--ink-soft); font-size:.96rem;}
.chip-row{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.2rem;}
.chip{
  font-family:"Space Mono",monospace; font-size:.72rem; padding:.35rem .7rem;
  border-radius:8px; background:var(--surface-2); border:1px solid var(--line); color:var(--ink-soft);
}
.mini-wave{display:flex; align-items:flex-end; gap:3px; height:22px; margin-top:1.2rem;}
.mini-wave span{width:4px; border-radius:2px; background:var(--blue); opacity:.75;}

/* pricing */
.price-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.25rem,3vw,1.75rem); max-width:840px;}
.price-card{
  border-radius:24px; padding:2.2rem; background:var(--surface); border:1px solid var(--line);
}
.price-card.hi{border-color:var(--magenta); box-shadow:var(--shadow);}
.price-card .tag{font-family:"Space Mono",monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-soft);}
.price-card .amount{font-family:"Space Mono",monospace; font-weight:700; font-size:2.6rem; margin:.6rem 0 .2rem; font-variant-numeric:tabular-nums;}
.price-card .amount span{font-size:1rem; font-weight:400; color:var(--ink-soft);}
.price-card ul{list-style:none; margin:1.4rem 0 0; padding:0; display:flex; flex-direction:column; gap:.65rem;}
.price-card li{display:flex; gap:.6rem; font-size:.92rem; color:var(--ink-soft); align-items:flex-start;}
.price-card li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--magenta); margin-top:.55em; flex:none;}
.price-card.gift-card{display:flex; flex-direction:column; justify-content:center;}
.gift-head{display:flex; align-items:center; gap:.9rem; margin-top:.6rem;}
.gift-head h3{margin:0; font-size:1.35rem;}
.rose-icon{
  width:44px;height:44px;border-radius:50%; flex:none;
  background:linear-gradient(135deg,var(--magenta),var(--gold));
  display:flex; align-items:center; justify-content:center;
}
.rose-icon svg{width:22px;height:22px; fill:#fff;}

/* faq */
.faq{max-width:760px;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item button{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:1.25rem 0; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  font-family:"Fraunces",serif; font-size:1.08rem; font-weight:600; color:var(--ink);
}
.faq-item .plus{font-family:"Space Mono",monospace; font-size:1.1rem; color:var(--magenta); flex:none; transition:transform .2s ease;}
.faq-item[open] .plus{transform:rotate(45deg);}
.faq-item p{margin:0 0 1.25rem; color:var(--ink-soft); font-size:.96rem; max-width:65ch;}
.faq-item summary{list-style:none;}
.faq-item summary::-webkit-details-marker{display:none;}

/* contact */
.contact-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,4rem);}
.contact-info .row{display:flex; gap:.9rem; margin-bottom:1.3rem;}
.contact-info .ico{
  width:38px;height:38px;border-radius:10px; background:var(--surface-2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.contact-info .ico svg{width:16px;height:16px; fill:var(--magenta);}
.contact-info .k{font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); font-family:"Space Mono",monospace;}
.contact-info .v{font-weight:600; margin-top:.15rem;}
.form-card{background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:2rem;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem;}
.form-row.full{grid-template-columns:1fr;}
.field{display:flex; flex-direction:column; gap:.4rem;}
.field label{font-size:.78rem; color:var(--ink-soft);}
.field input, .field textarea{
  border:1px solid var(--line); border-radius:10px; padding:.65rem .8rem;
  background:var(--paper); color:var(--ink); font-family:inherit; font-size:.94rem;
}
.field input:focus, .field textarea:focus{outline:2px solid var(--magenta); outline-offset:1px;}

/* footer */
footer.site{background:var(--ink); color:var(--paper); margin-top:clamp(3rem,6vw,5rem);}
.footer-top{padding:clamp(3rem,6vw,4.5rem) 0 clamp(2rem,4vw,3rem); display:grid; grid-template-columns:1.3fr repeat(3,.8fr) 1fr; gap:2rem;}
.footer-brand .brand-word{color:var(--paper);}
.footer-brand p{color:color-mix(in srgb, var(--paper) 65%, transparent); font-size:.9rem; margin-top:1rem; max-width:32ch;}
.footer-col h4{font-family:"Space Mono",monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:color-mix(in srgb, var(--paper) 55%, transparent); margin-bottom:1rem; font-weight:700;}
.footer-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem;}
.footer-col a{text-decoration:none; color:color-mix(in srgb, var(--paper) 85%, transparent); font-size:.92rem;}
.footer-col a:hover{color:var(--gold);}
.footer-download p{font-size:.82rem; color:color-mix(in srgb, var(--paper) 65%, transparent); margin:0 0 .8rem;}
.footer-bottom{border-top:1px solid color-mix(in srgb, var(--paper) 14%, transparent); padding:1.4rem 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;}
.footer-bottom p{font-size:.82rem; color:color-mix(in srgb, var(--paper) 55%, transparent); margin:0;}
.socials{display:flex; gap:.7rem;}
.socials a{
  width:36px;height:36px; border-radius:50%; border:1px solid color-mix(in srgb, var(--paper) 22%, transparent);
  display:flex; align-items:center; justify-content:center; text-decoration:none;
}
.socials svg{width:15px;height:15px; fill:color-mix(in srgb, var(--paper) 85%, transparent);}
.socials a:hover{border-color:var(--gold);}
.socials a:hover svg{fill:var(--gold);}

/* legal pages */
.legal-hero{padding:clamp(2.5rem,6vw,4rem) 0 clamp(1.5rem,3vw,2rem);}
.legal-back{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:"Space Mono",monospace; font-size:.78rem; text-decoration:none;
  color:var(--ink-soft); margin-bottom:1.5rem;
}
.legal-back:hover{color:var(--magenta);}
.legal-hero h1{font-size:clamp(2.2rem,1.7rem + 2vw,3.2rem);}
.legal-updated{color:var(--ink-soft); font-size:.9rem; margin-top:.9rem; font-family:"Space Mono",monospace;}
.legal-body{max-width:70ch; padding-bottom:clamp(3rem,6vw,5rem);}
.legal-body h3{
  font-size:1.3rem; margin:2.4rem 0 .9rem;
  padding-top:1.6rem; border-top:1px solid var(--line);
}
.legal-body h3:first-of-type{border-top:none; padding-top:0; margin-top:1.8rem;}
.legal-body > p:first-of-type{font-size:1.08rem; color:var(--ink-soft);}
.legal-body p{margin:0 0 1rem; color:var(--ink-soft); line-height:1.7;}
.legal-body ul{margin:0 0 1rem; padding-left:1.3rem; color:var(--ink-soft); line-height:1.7;}
.legal-body li{margin-bottom:.5rem;}
.legal-body a{color:var(--magenta); text-decoration:underline;}

@media (max-width:920px){
  .hero-grid, .about-grid, .contact-grid{grid-template-columns:1fr;}
  .call-mock{order:-1; margin:0 auto;}
  .stats-row{grid-template-columns:1fr; gap:1.4rem;}
  .steps, .feature-grid, .price-grid{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:repeat(2,1fr);}
  nav.links{display:none;}
  .form-row{grid-template-columns:1fr;}
}