:root{
  --purple:#4E0052;
  --purple-deep:#37003A;
  --yellow:#FFCF31;
  --teal:#20C997;
  --parchment:#FAFAFA;
  --ink:#241226;
  --ink-soft:#6B5A6E;
  --line:#EDE4EE;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --shadow: 0 20px 45px -20px rgba(78,0,82,0.28);
  --shadow-soft: 0 14px 30px -18px rgba(78,0,82,0.18);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Plus Jakarta Sans', sans-serif;
  background:var(--parchment);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;}

.wrap{
  max-width:1120px;
  margin:0 auto;
  padding:0 24px;
}

@media (min-width:900px){
  .wrap{padding:0 48px;}
}

/* ---------- NAV ---------- */
header.nav{
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(250,250,250,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:1120px;
  margin:0 auto;
  padding:18px 24px;
}
@media (min-width:900px){ .nav-inner{padding:18px 48px;} }
.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  font-size:20px;
  letter-spacing:-0.02em;
  color:var(--purple);
  text-decoration:none;
}
.logo .mark{
  width:34px;height:34px;border-radius:12px;
  background:linear-gradient(145deg, var(--yellow), #FFE38C);
  display:flex;align-items:center;justify-content:center;
  box-shadow: inset 0 0 0 2px rgba(78,0,82,0.08);
}
.logo .mark svg{width:18px;height:18px;}
.nav-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--purple);
  color:#fff;
  padding:11px 22px;
  border-radius:999px;
  font-weight:600;
  font-size:14px;
  text-decoration:none;
  box-shadow: var(--shadow-soft);
  transition:transform .18s ease, box-shadow .18s ease;
}
.nav-cta:hover{transform:translateY(-1px); box-shadow: var(--shadow);}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  padding:64px 0 40px;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  top:-160px; right:-180px;
  width:520px; height:520px;
  border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,207,49,0.55), rgba(255,207,49,0) 70%);
  z-index:0;
}
.hero::after{
  content:"";
  position:absolute;
  bottom:-220px; left:-200px;
  width:480px; height:480px;
  border-radius:50%;
  background: radial-gradient(circle at 60% 40%, rgba(32,201,151,0.30), rgba(32,201,151,0) 70%);
  z-index:0;
}
.hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr;
  gap:52px;
  align-items:center;
}
@media (min-width:960px){
  .hero-grid{grid-template-columns:1.05fr 0.95fr; gap:40px;}
}
.pill-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#fff;
  border:1px solid var(--line);
  padding:8px 16px 8px 8px;
  border-radius:999px;
  font-size:13.5px;
  font-weight:600;
  color:var(--purple);
  box-shadow: var(--shadow-soft);
  margin-bottom:22px;
}
.pill-tag .dot{
  width:22px;height:22px;border-radius:50%;
  background:var(--teal);
  display:flex;align-items:center;justify-content:center;
}
.pill-tag .dot span{
  width:7px;height:7px;border-radius:50%;background:#fff;
}
h1{
  font-size:clamp(38px, 5.6vw, 60px);
  line-height:1.04;
  letter-spacing:-0.025em;
  font-weight:800;
  margin:0 0 22px;
  color:var(--purple);
}
.hero p.lede{
  font-size:18px;
  line-height:1.6;
  color:var(--ink-soft);
  max-width:520px;
  margin:0 0 32px;
}

/* waitlist form */
.waitlist-form{
  display:flex;
  flex-direction:column;
  gap:12px;
  max-width:460px;
}
@media (min-width:520px){
  .waitlist-form{flex-direction:row;}
}
.waitlist-form input[type="email"]{
  flex:1;
  padding:16px 22px;
  border-radius:999px;
  border:1.5px solid var(--line);
  background:#fff;
  font-family:inherit;
  font-size:15px;
  color:var(--ink);
  outline:none;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.waitlist-form input[type="email"]:focus{
  border-color:var(--purple);
  box-shadow:0 0 0 4px rgba(78,0,82,0.10);
}
.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:var(--purple);
  color:#fff;
  border:none;
  padding:16px 26px;
  border-radius:999px;
  font-family:inherit;
  font-weight:700;
  font-size:15px;
  cursor:pointer;
  white-space:nowrap;
  box-shadow: var(--shadow-soft);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-primary:hover{transform:translateY(-1px); box-shadow: var(--shadow);}
.btn-primary:active{transform:translateY(0);}
.btn-primary:disabled{opacity:0.6; cursor:not-allowed; transform:none;}
.form-note{
  font-size:13px;
  color:var(--ink-soft);
  margin-top:12px;
}
.form-error{
  display:none;
  font-size:13.5px;
  font-weight:600;
  color:#C0264F;
  margin-top:10px;
}
.form-error.show{display:block;}
.form-success{
  display:none;
  align-items:center;
  gap:10px;
  background:#EFFCF6;
  border:1px solid rgba(32,201,151,0.35);
  color:#0D7A56;
  padding:14px 20px;
  border-radius:18px;
  font-weight:600;
  font-size:14.5px;
  max-width:460px;
}
.form-success.show{display:flex;}
.waitlist-form.hide{display:none;}

.hero-stats{
  display:flex;
  gap:28px;
  margin-top:36px;
  flex-wrap:wrap;
}
.hero-stats div{min-width:120px;}
.hero-stats .num{
  font-size:26px;
  font-weight:800;
  color:var(--purple);
  letter-spacing:-0.02em;
}
.hero-stats .label{
  font-size:13px;
  color:var(--ink-soft);
  margin-top:2px;
}

/* phone mock */
.phone-stage{
  position:relative;
  display:flex;
  justify-content:center;
}
.phone{
  width:290px;
  background:#fff;
  border-radius:44px;
  padding:16px;
  box-shadow: var(--shadow);
  border:1px solid rgba(78,0,82,0.06);
  position:relative;
  z-index:2;
}
.phone-notch{
  width:70px;height:6px;border-radius:99px;
  background:#E7DEE9;
  margin:0 auto 14px;
}
.phone-screen{
  background:var(--parchment);
  border-radius:30px;
  padding:22px 18px 26px;
}
.phone-screen .greet{
  font-size:12.5px;
  color:var(--ink-soft);
  margin-bottom:2px;
}
.phone-screen h3{
  font-size:20px;
  line-height:1.25;
  margin:0 0 18px;
  color:var(--purple);
  font-weight:800;
}
.stock-card{
  background:linear-gradient(135deg, var(--purple), #6A0072);
  border-radius:22px;
  padding:18px;
  color:#fff;
  margin-bottom:16px;
}
.stock-card .row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
}
.stock-badge{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,0.14);
  padding:6px 12px 6px 6px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
}
.stock-badge .chip{
  width:22px;height:22px;border-radius:50%;
  background:var(--teal);
}
.spark-btn{
  width:30px;height:30px;border-radius:50%;
  background:var(--yellow);
  display:flex;align-items:center;justify-content:center;
}
.stock-card .amt{
  font-size:28px;
  font-weight:800;
  letter-spacing:-0.02em;
  margin-bottom:4px;
}
.stock-card .sub{
  font-size:12.5px;
  opacity:0.78;
}
.amount-pills{
  display:flex;
  gap:8px;
  margin-bottom:18px;
}
.amount-pills span{
  flex:1;
  text-align:center;
  padding:9px 0;
  border-radius:999px;
  background:#fff;
  border:1.5px solid var(--line);
  font-size:12.5px;
  font-weight:700;
  color:var(--ink-soft);
}
.amount-pills span.active{
  background:var(--purple);
  color:#fff;
  border-color:var(--purple);
}
.cta-pill{
  display:block;
  text-align:center;
  background:var(--yellow);
  color:var(--purple-deep);
  font-weight:800;
  font-size:14.5px;
  padding:14px 0;
  border-radius:999px;
}
/* Decorative stock tickers floating around the phone mock — kept visually
   quieter than the phone (lower opacity/shadow, z-index behind it, softer
   ink color) and in motion (idle bob + mouse parallax) so they read as
   background atmosphere rather than real app UI. */
.float-badge-wrap{
  position:absolute;
  z-index:0;
  pointer-events:none;
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}
.float-badge-wrap.pos-nvidia{ top:6%; left:-14px; }
.float-badge-wrap.pos-amazon{ top:42%; left:-14px; }
.float-badge-wrap.pos-apple{ top:-8%; left:22%; }
.float-badge-wrap.pos-nike{ top:-8%; right:6%; }
.float-badge-wrap.pos-klarna{ bottom:-8%; left:14%; }
.float-badge-wrap.pos-gift{ bottom:-8%; right:8%; }

.float-badge{
  display:flex;
  align-items:center;
  gap:7px;
  background:rgba(255,255,255,0.85);
  border-radius:16px;
  padding:8px 13px;
  box-shadow: var(--shadow-soft);
  font-size:12px;
  font-weight:700;
  color:var(--ink-soft);
  white-space:nowrap;
  opacity:0.9;
  animation:badgeBob 6s ease-in-out infinite;
  transition:opacity .25s ease;
}
.float-badge .up{ color:var(--teal); }
.float-badge .down{ color:#C0264F; }
.pos-nvidia .float-badge{ animation-duration:6.5s; animation-delay:0s; }
.pos-apple .float-badge{ animation-duration:5.4s; animation-delay:.5s; }
.pos-amazon .float-badge{ animation-duration:7.2s; animation-delay:1.1s; font-size:11.5px; padding:7px 12px; }
.pos-nike .float-badge{ animation-duration:6.1s; animation-delay:.2s; font-size:11.5px; padding:7px 12px; }
.pos-klarna .float-badge{ animation-duration:5.8s; animation-delay:.9s; }
.pos-gift .float-badge{ animation-duration:6.8s; animation-delay:.4s; }

@keyframes badgeBob{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
}

@media (max-width:520px){
  .float-badge-wrap{display:none;}
}
@media (prefers-reduced-motion: reduce){
  .float-badge{ animation:none; }
  .float-badge-wrap{ transition:none; }
}

/* ---------- SECTIONS shared ---------- */
section{ padding:86px 0; }
.section-head{
  max-width:600px;
  margin-bottom:52px;
}
.section-head h2{
  font-size:clamp(28px, 3.6vw, 40px);
  line-height:1.14;
  letter-spacing:-0.02em;
  color:var(--purple);
  font-weight:800;
  margin:0 0 16px;
}
.section-head p{
  font-size:17px;
  line-height:1.6;
  color:var(--ink-soft);
  margin:0;
}

/* ---------- PROBLEM ---------- */
.problem{background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.stat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(210px,1fr));
  gap:20px;
}
.stat-card{
  background:var(--parchment);
  border-radius:var(--radius-lg);
  padding:28px 26px;
  border:1px solid var(--line);
}
.stat-card .big{
  font-size:38px;
  font-weight:800;
  color:var(--purple);
  letter-spacing:-0.02em;
  margin-bottom:10px;
}
.stat-card p{
  font-size:14.5px;
  line-height:1.55;
  color:var(--ink-soft);
  margin:0;
}

/* ---------- HOW IT WORKS ---------- */
.steps{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}
@media (min-width:760px){
  .steps{grid-template-columns:repeat(4,1fr);}
}
.step-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:28px 24px;
  position:relative;
}
.step-num{
  width:38px;height:38px;
  border-radius:12px;
  background:var(--purple);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;
  font-size:15px;
  margin-bottom:20px;
}
.step-card h3{
  font-size:17px;
  margin:0 0 8px;
  color:var(--purple);
  font-weight:700;
}
.step-card p{
  font-size:14px;
  line-height:1.55;
  color:var(--ink-soft);
  margin:0;
}
.step-connector{
  display:none;
}
@media (min-width:760px){
  .steps{position:relative;}
}

/* ---------- VALUE / FEATURES ---------- */
.features{background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.feat-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}
@media (min-width:760px){
  .feat-grid{grid-template-columns:repeat(2,1fr);}
}
.feat-card{
  border-radius:var(--radius-lg);
  padding:32px;
  background:var(--parchment);
  border:1px solid var(--line);
}
.feat-card.teal{ background:#F1FBF8; border-color:#D4F1E8; }
.feat-card.yellow{ background:#FFFAEB; border-color:#FBE9B4; }
.feat-icon{
  width:46px;height:46px;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;
  background:#fff;
  box-shadow: var(--shadow-soft);
}
.feat-card h3{
  font-size:19px;
  color:var(--purple);
  margin:0 0 10px;
  font-weight:700;
}
.feat-card p{
  font-size:14.5px;
  line-height:1.6;
  color:var(--ink-soft);
  margin:0;
}

/* ---------- WAITLIST SECTION ---------- */
.waitlist-section{
  position:relative;
  overflow:hidden;
  background:linear-gradient(160deg, var(--purple) 0%, var(--purple-deep) 100%);
  border-radius:var(--radius-xl);
  padding:64px 32px;
  color:#fff;
}
@media (min-width:900px){
  .waitlist-section{ padding:76px 64px;}
}
.waitlist-section::before{
  content:"";
  position:absolute;
  top:-140px; right:-100px;
  width:360px;height:360px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,207,49,0.30), transparent 70%);
}
.waitlist-inner{
  position:relative;
  z-index:1;
  max-width:620px;
}
.waitlist-inner h2{
  font-size:clamp(28px,3.8vw,42px);
  line-height:1.15;
  letter-spacing:-0.02em;
  font-weight:800;
  margin:0 0 16px;
}
.waitlist-inner p{
  font-size:16.5px;
  line-height:1.6;
  color:rgba(255,255,255,0.82);
  margin:0 0 32px;
  max-width:480px;
}
.waitlist-section .waitlist-form{
  max-width:none;
}
.waitlist-section .waitlist-form input[type="email"]{
  background:rgba(255,255,255,0.98);
}
.waitlist-section .btn-primary{
  background:var(--yellow);
  color:var(--purple-deep);
}
.waitlist-section .form-note{ color:rgba(255,255,255,0.65); }
.waitlist-section .form-error{ color:#FFD1DE; }
.waitlist-section .form-success{
  background:rgba(255,255,255,0.12);
  border-color:rgba(255,255,255,0.25);
  color:#fff;
  max-width:none;
}
.count-row{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:28px;
}
.avatars{
  display:flex;
}
.avatars span{
  width:30px;height:30px;border-radius:50%;
  border:2px solid var(--purple);
  margin-left:-8px;
}
.avatars span:first-child{margin-left:0;}
.count-row p{
  margin:0;
  font-size:13.5px;
  color:rgba(255,255,255,0.75);
}

/* ---------- FOOTER ---------- */
footer{
  padding:56px 0 40px;
}
.footer-inner{
  display:flex;
  flex-direction:column;
  gap:24px;
  align-items:flex-start;
  border-top:1px solid var(--line);
  padding-top:36px;
}
@media (min-width:760px){
  .footer-inner{flex-direction:row; align-items:center; justify-content:space-between;}
}
.footer-note{
  font-size:13px;
  line-height:1.6;
  color:var(--ink-soft);
  max-width:480px;
}
.footer-links{
  display:flex;
  gap:22px;
  font-size:13.5px;
  color:var(--ink-soft);
}