/* ══════════════════════════════════════════
   TOKENS
══════════════════════════════════════════ */
:root {
  --deep:        #100d0f;
  --surface:     #181318;
  --surface2:    #211820;
  --surface3:    #2a1f28;
  --border:      #2e2530;
  --divider:     #231b22;
  --text:        #ede0e8;
  --muted-text:  #8a7a86;
  --faint-text:  #3d3039;
  --rose:        #c9748a;
  --rose-light:  #e8a0b0;
  --rose-dim:    #2a1520;
  --gold:        #c9a04a;
  --gold-dim:    #2a2010;
  --purple:      #9b72cf;
  --purple-dim:  #1e1530;
  --cream:       #f0e4ec;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  --r-sm: 0.375rem;
  --r-md: 0.625rem;
  --r-lg: 1rem;
  --r-xl: 1.5rem;
  --r-full: 9999px;
  --max: 1080px;
  --trans: 200ms cubic-bezier(0.16,1,0.3,1);
}

/* ══════════════════════════════════════════
   RESET
══════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth;}
body{background:var(--deep);color:var(--text);font-family:var(--font-body);font-size:1rem;line-height:1.65;overflow-x:hidden;}
h1,h2,h3{font-family:var(--font-display);text-wrap:balance;line-height:1.1;}
p{text-wrap:pretty;max-width:58ch;}
a{color:var(--rose-light);text-decoration:none;transition:opacity var(--trans);}
a:hover{opacity:0.7;}
button,input{font-family:inherit;font-size:inherit;}
ul{list-style:none;}
img,svg{display:block;}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
@media(prefers-reduced-motion:reduce){*{transition-duration:0.01ms!important;animation-duration:0.01ms!important;}}

/* ══════════════════════════════════════════
   NAV
══════════════════════════════════════════ */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(16,13,15,0.85);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  max-width:var(--max);margin:0 auto;
  padding:0.875rem 1.5rem;
  display:flex;align-items:center;justify-content:space-between;
}
.logo{display:flex;align-items:center;gap:0.5rem;}
.logo-wordmark{font-family:var(--font-display);font-weight:400;font-size:1.375rem;color:var(--cream);letter-spacing:0.04em;}
.nav-cta{
  background:var(--rose);color:#fff;
  font-weight:600;font-size:0.875rem;
  padding:0.5rem 1.25rem;border-radius:var(--r-full);
  transition:opacity var(--trans),transform var(--trans);
}
.nav-cta:hover{opacity:0.85;transform:translateY(-1px);}

/* ══════════════════════════════════════════
   HERO
══════════════════════════════════════════ */
.hero{
  position:relative;overflow:hidden;
  min-height:92svh;display:flex;align-items:center;
  padding:clamp(3rem,8vw,6rem) 1.5rem;
}
.hero-bg{position:absolute;inset:0;pointer-events:none;}
.petal-bg{width:100%;height:100%;position:absolute;inset:0;}
.hero-inner{
  position:relative;max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem,6vw,6rem);align-items:center;width:100%;
}

/* Eyebrow */
.eyebrow{
  display:inline-flex;align-items:center;gap:0.5rem;
  font-size:0.75rem;font-weight:500;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--rose-light);
  margin-bottom:1.25rem;
}
.eyebrow-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--rose);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.5;transform:scale(1.3);}}

/* Title */
.hero-title{
  font-size:clamp(2.5rem,5.5vw,4.25rem);
  font-weight:300;color:var(--cream);
  margin-bottom:1.25rem;letter-spacing:-0.01em;
}
.hero-title em{font-style:italic;color:var(--rose-light);font-weight:300;}

/* Body */
.hero-body{
  font-size:1.0625rem;color:var(--muted-text);
  line-height:1.75;margin-bottom:2rem;
}

/* Form */
.waitlist-form{margin-bottom:1.5rem;}
.form-label{display:block;font-size:0.8125rem;color:var(--muted-text);margin-bottom:0.625rem;}
.form-row{
  display:flex;gap:0.375rem;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:var(--r-full);
  padding:0.3rem 0.3rem 0.3rem 1.125rem;
  transition:border-color var(--trans),box-shadow var(--trans);
}
.form-row:focus-within{
  border-color:var(--rose);
  box-shadow:0 0 0 3px rgba(201,116,138,0.15);
}
.form-input{
  flex:1;background:none;border:none;outline:none;
  color:var(--text);font-size:0.9375rem;min-width:0;
}
.form-input::placeholder{color:var(--muted-text);}
.form-btn{
  background:var(--rose);color:#fff;
  border:none;border-radius:var(--r-full);
  padding:0.625rem 1.125rem;
  font-weight:600;font-size:0.875rem;
  cursor:pointer;white-space:nowrap;
  display:flex;align-items:center;gap:0.375rem;
  transition:opacity var(--trans),transform var(--trans);
  flex-shrink:0;
}
.form-btn:hover{opacity:0.88;transform:translateY(-1px);}
.form-sub{
  display:flex;align-items:center;gap:0.375rem;
  font-size:0.75rem;color:var(--muted-text);
  margin-top:0.625rem;
}
.form-success{
  display:none;align-items:center;gap:0.5rem;
  font-size:0.875rem;color:var(--gold);
  margin-top:0.75rem;font-weight:500;
}
.form-success.visible{display:flex;}

/* Social proof */
.social-proof{
  display:flex;align-items:center;gap:0.75rem;
  margin-top:1.25rem;
}
.avatars{display:flex;}
.av{
  width:30px;height:30px;border-radius:50%;
  border:2px solid var(--deep);margin-left:-8px;
}
.av:first-child{margin-left:0;}
.av1{background:linear-gradient(135deg,#c9a04a,#7a5a20);}
.av2{background:linear-gradient(135deg,#c9748a,#8a3050);}
.av3{background:linear-gradient(135deg,#9b72cf,#5c3090);}
.av4{background:linear-gradient(135deg,#c98a4a,#7a4a20);}
.av5{background:linear-gradient(135deg,#8ab0cf,#3060a0);}
.social-proof p{font-size:0.875rem;color:var(--muted-text);}
.social-proof strong{color:var(--text);}

/* ══════════════════════════════════════════
   PHONE MOCKUP
══════════════════════════════════════════ */
.hero-visual{
  display:flex;justify-content:center;align-items:center;
  position:relative;
}
.phone{
  width:252px;height:508px;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:38px;
  overflow:hidden;
  box-shadow:
    0 50px 100px rgba(0,0,0,0.6),
    0 0 0 1px rgba(255,255,255,0.04) inset,
    inset 0 1px 0 rgba(255,255,255,0.06);
  position:relative;
}
.phone-inner{
  display:flex;flex-direction:column;height:100%;
  background:linear-gradient(180deg,var(--surface2) 0%,var(--surface) 100%);
}
.status-bar{
  display:flex;justify-content:space-between;align-items:center;
  padding:0.625rem 1rem 0.25rem;color:var(--text);
}
.status-time{font-size:0.7rem;font-weight:600;letter-spacing:0.02em;}
.status-icons{display:flex;align-items:center;gap:0.375rem;}
.app-header{
  display:flex;align-items:center;gap:0.375rem;
  padding:0.375rem 1rem 0.625rem;
}
.app-logo-sm{flex-shrink:0;}
.app-name-sm{font-family:var(--font-display);font-size:0.9rem;color:var(--cream);letter-spacing:0.04em;}
.app-header-actions{flex:1;display:flex;justify-content:flex-end;}
.notif-dot{width:8px;height:8px;border-radius:50%;background:var(--rose);}
.profile-card{
  flex:1;margin:0 0.75rem;border-radius:20px;overflow:hidden;
  position:relative;background:var(--surface3);
  display:flex;flex-direction:column;
}
.profile-img{flex:1;position:relative;overflow:hidden;}
.profile-overlay{
  position:absolute;bottom:0;left:0;right:0;
  padding:1rem;
  background:linear-gradient(0deg,rgba(16,10,14,0.92) 0%,transparent 100%);
}
.profile-verified{
  display:inline-flex;align-items:center;gap:0.3rem;
  font-size:0.6rem;font-weight:600;color:var(--gold);
  text-transform:uppercase;letter-spacing:0.06em;
  margin-bottom:0.3rem;
}
.profile-name{font-family:var(--font-display);font-size:1.1rem;color:var(--cream);margin-bottom:0.2rem;}
.profile-meta{font-size:0.65rem;color:var(--muted-text);margin-bottom:0.5rem;}
.profile-chips{display:flex;flex-wrap:wrap;gap:0.25rem;}
.chip{
  font-size:0.55rem;font-weight:600;letter-spacing:0.06em;
  text-transform:uppercase;
  padding:2px 7px;border-radius:var(--r-full);
  background:rgba(201,160,74,0.12);color:var(--gold);
  border:1px solid rgba(201,160,74,0.2);
}
.card-actions{
  display:flex;justify-content:center;gap:1.25rem;
  padding:0.75rem;
}
.action-btn{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:none;cursor:pointer;
}
.pass-btn{background:rgba(180,60,60,0.12);color:#c06060;}
.super-btn{background:rgba(201,160,74,0.12);color:var(--gold);}
.like-btn{background:rgba(201,116,138,0.12);color:var(--rose);}
.bottom-nav{
  display:flex;justify-content:space-around;align-items:center;
  padding:0.625rem 1rem 1rem;border-top:1px solid var(--border);
}
.bn-item{
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  color:var(--faint-text);border-radius:var(--r-md);
}
.bn-item.active{color:var(--rose);}

/* Floating badges */
.float-badge{
  position:absolute;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--r-full);
  padding:0.375rem 0.75rem;
  font-size:0.7rem;font-weight:600;color:var(--text);
  display:flex;align-items:center;gap:0.375rem;
  white-space:nowrap;
  box-shadow:0 4px 20px rgba(0,0,0,0.35);
  animation:floatY 4s ease-in-out infinite;
}
.fb1{top:12%;right:-3rem;animation-delay:0s;}
.fb2{top:46%;right:-4rem;animation-delay:1.4s;}
.fb3{bottom:18%;right:-2.5rem;animation-delay:2.8s;}
@keyframes floatY{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}

/* ══════════════════════════════════════════
   PROBLEM SECTION
══════════════════════════════════════════ */
.problem{
  padding:clamp(4rem,8vw,8rem) 1.5rem;
  background:var(--surface);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.section-inner{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,5rem);align-items:center;
}
.section-eyebrow{
  font-size:0.75rem;font-weight:600;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--rose);
  margin-bottom:1rem;
}
.problem-text h2{
  font-size:clamp(1.75rem,3.5vw,2.75rem);
  font-weight:300;color:var(--cream);
  margin-bottom:1.25rem;
}
.problem-text p{
  font-size:1rem;color:var(--muted-text);
  line-height:1.75;margin-bottom:1rem;
}
.problem-list{display:flex;flex-direction:column;gap:0.75rem;}
.problem-item{
  display:flex;align-items:center;gap:0.75rem;
  font-size:0.9375rem;color:var(--muted-text);
  padding:0.75rem 1rem;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--r-lg);
}
.problem-item.good{color:var(--text);border-color:rgba(201,160,74,0.2);}
.problem-item.good strong{color:var(--cream);}

/* ══════════════════════════════════════════
   PRICING
══════════════════════════════════════════ */
.pricing{
  padding:clamp(4rem,8vw,8rem) 1.5rem;
  background:var(--deep);
}
.pricing-inner{display:block!important;}
.center-eyebrow{text-align:center;}
.center-h2{
  font-size:clamp(1.75rem,3.5vw,2.75rem);
  font-weight:300;color:var(--cream);
  text-align:center;margin-bottom:0.75rem;
}
.center-sub{
  font-size:1rem;color:var(--muted-text);
  text-align:center;margin:0 auto 3rem;max-width:52ch;
}
.pricing-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.25rem;max-width:var(--max);margin:0 auto;
}
.price-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:1.75rem;
  display:flex;flex-direction:column;gap:0.75rem;
  position:relative;
  transition:border-color var(--trans),transform var(--trans);
}
.price-card:hover{transform:translateY(-2px);}
.pc-featured{
  border-color:var(--rose);
  background:linear-gradient(160deg,var(--rose-dim) 0%,var(--surface) 100%);
}
.pc-best-tag{
  position:absolute;top:-0.875rem;left:50%;transform:translateX(-50%);
  background:var(--rose);color:#fff;
  font-size:0.625rem;font-weight:700;letter-spacing:0.08em;
  text-transform:uppercase;padding:0.2rem 0.875rem;
  border-radius:var(--r-full);white-space:nowrap;
}
.pc-label{font-size:0.75rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;}
.pc-price-wrap{display:flex;flex-direction:column;gap:0.15rem;}
.pc-founding-strike{
  font-size:0.875rem;color:var(--muted-text);
  text-decoration:line-through;
}
.pc-amount{
  font-family:var(--font-display);
  font-size:2.5rem;font-weight:400;color:var(--cream);line-height:1;
}
.pc-mo{font-size:1rem;color:var(--muted-text);font-weight:300;}
.pc-founding-note{
  font-size:0.75rem;color:var(--gold);font-weight:500;
}
.pc-features{display:flex;flex-direction:column;gap:0.5rem;flex:1;}
.pc-features li{
  font-size:0.875rem;color:var(--muted-text);
  padding-left:1.125rem;position:relative;
}
.pc-features li::before{
  content:"—";position:absolute;left:0;
  color:var(--faint-text);
}
.pc-why{
  font-size:0.8125rem;color:var(--muted-text);
  border-top:1px solid var(--border);
  padding-top:0.75rem;line-height:1.6;
  font-style:italic;
}
.pricing-note{
  text-align:center;font-size:0.8125rem;
  color:var(--muted-text);margin-top:2rem;
  max-width:var(--max);margin-left:auto;margin-right:auto;
}

/* ══════════════════════════════════════════
   BOTTOM CTA
══════════════════════════════════════════ */
.bottom-cta{
  padding:clamp(4rem,8vw,8rem) 1.5rem;
  background:var(--surface);
  border-top:1px solid var(--border);
  text-align:center;
}
.bottom-inner{
  max-width:520px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;gap:1.25rem;
}
.bloom-deco{width:120px;height:120px;opacity:0.7;}
.bloom-deco svg{width:100%;height:100%;}
.bottom-cta h2{
  font-size:clamp(1.75rem,3.5vw,2.75rem);
  font-weight:300;color:var(--cream);
}
.bottom-cta h2 em{font-style:italic;color:var(--rose-light);}
.bottom-cta p{font-size:1rem;color:var(--muted-text);}
.bottom-waitlist{width:100%;}
.bottom-waitlist .form-row{max-width:420px;margin:0 auto;}
.center-sub-text{justify-content:center;}

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
.footer{
  padding:2rem 1.5rem;
  border-top:1px solid var(--border);
  background:var(--deep);
}
.footer-inner{
  max-width:var(--max);margin:0 auto;
  display:flex;flex-direction:column;align-items:center;
  gap:0.4rem;text-align:center;
}
.footer-tag{font-size:0.8125rem;color:var(--faint-text);}
.footer-links{font-size:0.75rem;color:var(--faint-text);}
.footer-links a{color:var(--muted-text);}
.footer-copy{font-size:0.7rem;color:var(--faint-text);}

/* ══════════════════════════════════════════
   MOBILE
══════════════════════════════════════════ */
@media(max-width:768px){
  .hero-inner{grid-template-columns:1fr;}
  .hero-visual{
    order:-1;
    transform:scale(0.8);transform-origin:top center;
    margin-bottom:-3rem;
  }
  .fb1,.fb2,.fb3{display:none;}
  .form-row{
    flex-direction:column;border-radius:var(--r-xl);
    padding:0.75rem;
  }
  .form-input{padding:0.375rem 0.25rem;}
  .form-btn{border-radius:var(--r-lg);justify-content:center;padding:0.75rem;}
  .section-inner{grid-template-columns:1fr;}
  .pricing-grid{grid-template-columns:1fr;}
  .problem-list{margin-top:1.5rem;}
}
@media(max-width:480px){
  .hero-visual{display:none;}
  .hero-title{font-size:2.25rem;}
}

/* ── Scroll-reveal ── */
.will-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.will-reveal.revealed {
  opacity: 1;
  transform: none;
}
.price-card.will-reveal { transition-delay: calc(var(--i, 0) * 80ms); }
.price-card:nth-child(1) { --i: 0; }
.price-card:nth-child(2) { --i: 1; }
.price-card:nth-child(3) { --i: 2; }

/* ── Nav scroll shadow ── */
.nav-scrolled {
  box-shadow: 0 2px 24px rgba(0,0,0,0.35);
}

/* ── Input error state ── */
.form-input.error {
  border-color: #c05050 !important;
  box-shadow: 0 0 0 3px rgba(192,80,80,0.2);
}

/* ── Success message visible ── */
.form-success.visible {
  display: flex !important;
}

/* ── Community Quality Section ── */
.quality {
  padding: 96px 24px;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(201,160,74,0.03) 50%, var(--bg) 100%);
}

.quality-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 56px;
}

@media (max-width: 900px) {
  .quality-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
  .quality-grid { grid-template-columns: 1fr; }
}

.quality-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(201,160,74,0.1);
  border-radius: 16px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.25s, background 0.25s;
}

.quality-card:hover {
  border-color: rgba(201,160,74,0.25);
  background: rgba(255,255,255,0.04);
}

.qc-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(201,160,74,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}

.quality-card h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
  margin: 0;
}

.quality-card p {
  font-size: 0.875rem;
  color: var(--muted-text);
  line-height: 1.65;
  margin: 0;
  flex: 1;
}

.qc-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(201,160,74,0.1);
  border-radius: 20px;
  padding: 3px 10px;
  width: fit-content;
}