:root {
  --bg-deep: #0a0818;
  --bg-1: #0f0c29;
  --bg-2: #302b63;
  --bg-3: #24243e;
  --glass: rgba(255,255,255,0.04);
  --glass-border: rgba(255,255,255,0.08);
  --glass-hover: rgba(255,255,255,0.08);
  --text: #f0eef6;
  --text-dim: rgba(240,238,246,0.55);
  --accent: #7c6cf0;
  --accent-glow: rgba(124,108,240,0.35);
  --green: #34d399;
  --pink: #f472b6;
  --blue: #60a5fa;
  --radius: 20px;
  --radius-sm: 12px;
  --transition: 350ms cubic-bezier(.4,0,.2,1);
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
  background: var(--bg-deep);
  color: var(--text);
  overflow-x: hidden;
  line-height: 1.6;
}

/* NAV */
nav {
  position: fixed; top:0; left:0; right:0; z-index:100;
  padding: 1.2rem 2rem;
  display: flex; align-items: center; justify-content: space-between;
  transition: background var(--transition), backdrop-filter var(--transition), box-shadow var(--transition);
}
nav.scrolled {
  background: rgba(15,12,41,0.82);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 1px 0 var(--glass-border);
}
.nav-logo {
  font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em;
  background: linear-gradient(135deg, #fff 0%, var(--accent) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  text-decoration: none;
}
.nav-links { display:flex; gap:2rem; list-style:none; }
.nav-links a {
  color: var(--text-dim); text-decoration:none; font-size:.9rem; font-weight:500;
  transition: color var(--transition);
}
.nav-links a:hover { color: var(--text); }
.nav-hamburger { display:none; background:none; border:none; color:var(--text); font-size:1.5rem; cursor:pointer; }

/* HERO */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding: 6rem 2rem 4rem;
  overflow: hidden;
}
.hero-bg {
  position:absolute; inset:0; z-index:0;
  background: linear-gradient(160deg, var(--bg-1) 0%, var(--bg-2) 40%, var(--bg-3) 70%, var(--bg-1) 100%);
  background-size: 300% 300%;
  animation: gradientShift 12s ease infinite;
}
@keyframes gradientShift {
  0%,100%{background-position:0% 50%}50%{background-position:100% 50%}
}
@keyframes shimmer {
  0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}
}
canvas#particles { position:absolute; inset:0; z-index:1; pointer-events:none; }
.hero-content { position:relative; z-index:2; max-width:800px; }
.hero-badge {
  display:inline-flex; align-items:center; gap:.5rem;
  padding: .5rem 1.2rem; border-radius:100px;
  background: var(--glass); border:1px solid var(--glass-border);
  font-size:.8rem; color:var(--text-dim); margin-bottom:2rem;
  backdrop-filter: blur(10px);
}
.hero-badge .dot { width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 2s ease infinite; }
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.hero h1 {
  font-size: clamp(2.8rem,7vw,5.5rem);
  font-weight: 800; letter-spacing: -0.04em;
  line-height: 1.05; margin-bottom: 1.5rem;
  background: linear-gradient(90deg, #ffffff, #c4b5fd, var(--accent), var(--pink), var(--blue), #c4b5fd, #ffffff);
  background-size: 300% 100%;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  animation: shimmer 4s ease-in-out infinite;
}
.hero p {
  font-size: clamp(1.05rem,2vw,1.3rem);
  color: var(--text-dim); max-width:560px; margin:0 auto 2.5rem;
  line-height:1.7;
}
.hero-cta {
  display:inline-flex; align-items:center; gap:.6rem;
  padding: 1rem 2.5rem; border-radius: 100px;
  background: linear-gradient(135deg, var(--accent), #9b8afb);
  color: #fff; font-size:1.1rem; font-weight:700;
  text-decoration:none; border:none; cursor:pointer;
  transition: transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 4px 30px var(--accent-glow);
}
.hero-cta:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 40px var(--accent-glow);
}
.hero-price-note {
  margin-top: 1rem; font-size: .85rem; color: var(--text-dim);
}
.scroll-indicator {
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); z-index:2;
  animation: bob 2s ease infinite;
  color:var(--text-dim); font-size:1.5rem;
}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}}

/* SECTIONS */
section { padding: 6rem 2rem; position:relative; }
.section-container { max-width:1200px; margin:0 auto; }
.section-label {
  font-size:.75rem; text-transform:uppercase; letter-spacing:.15em;
  color:var(--accent); font-weight:600; margin-bottom:.75rem;
}
.section-title {
  font-size: clamp(2rem,4vw,3rem); font-weight:800; letter-spacing:-0.03em;
  margin-bottom:1rem;
}
.section-subtitle { color:var(--text-dim); max-width:560px; margin-bottom:3.5rem; font-size:1.05rem; }

/* REVEAL */
.reveal {
  opacity:0; transform:translateY(40px);
  transition: opacity 0.7s cubic-bezier(.4,0,.2,1), transform 0.7s cubic-bezier(.4,0,.2,1);
}
.reveal.visible { opacity:1; transform:translateY(0); }

/* CARD */
.card {
  position:relative;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 2rem;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
  overflow:hidden;
}
.card::before {
  content:''; position:absolute; inset:-1px; border-radius:var(--radius); z-index:-1;
  background: linear-gradient(135deg, rgba(124,108,240,0.2), rgba(244,114,182,0.1), rgba(96,165,250,0.15));
  opacity:0; transition: opacity var(--transition);
}
.card:hover::before { opacity:1; }
.card:hover {
  transform: translateY(-4px) scale(1.01);
  background: var(--glass-hover);
  box-shadow: 0 20px 60px rgba(124,108,240,0.12), 0 0 0 1px rgba(124,108,240,0.15);
}

/* VALUE PROP */
.value-section {
  background: linear-gradient(180deg, transparent 0%, rgba(124,108,240,0.04) 50%, transparent 100%);
}
.value-grid {
  display:grid; grid-template-columns: repeat(3,1fr); gap:1.5rem; text-align:center;
}
.value-card { padding:2.5rem 2rem; }
.value-icon { font-size:3rem; margin-bottom:1rem; display:block; }
.value-title { font-size:1.3rem; font-weight:700; margin-bottom:.5rem; }
.value-desc { color:var(--text-dim); font-size:.95rem; line-height:1.6; }

/* SAVINGS */
.savings-banner {
  max-width:700px; margin:0 auto 3rem; text-align:center;
  padding:2.5rem;
  background: linear-gradient(135deg, rgba(124,108,240,0.1), rgba(52,211,153,0.08));
  border:1px solid rgba(124,108,240,0.2); border-radius:var(--radius);
  position:relative; overflow:hidden;
}
.savings-banner::after {
  content:''; position:absolute; inset:-50%; z-index:0;
  background: conic-gradient(from 0deg, transparent, rgba(124,108,240,0.08), transparent, rgba(52,211,153,0.06), transparent);
  animation: spin 10s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.savings-banner > * { position:relative; z-index:1; }
.savings-old {
  font-size:1.5rem; color:var(--text-dim); text-decoration:line-through; margin-bottom:.25rem;
}
.savings-new {
  font-size:3rem; font-weight:900;
  background: linear-gradient(135deg, var(--green), var(--blue));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  margin-bottom:.5rem;
}
.savings-label { color:var(--text-dim); font-size:1rem; }
.savings-pct {
  display:inline-block; margin-top:.75rem;
  padding:.4rem 1rem; border-radius:100px;
  background:rgba(52,211,153,0.15); color:var(--green);
  font-weight:700; font-size:.9rem;
}

/* APP GRID */
.app-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;
}
.app-card { padding:1.8rem; display:flex; flex-direction:column; align-items:center; text-align:center; }
.app-card-icon {
  width:80px; height:80px; border-radius:22%; margin-bottom:1rem;
  object-fit:cover;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.app-card-name { font-size:1.15rem; font-weight:700; margin-bottom:.4rem; }
.app-card-desc { color:var(--text-dim); font-size:.88rem; line-height:1.5; margin-bottom:1rem; }

/* APP SCREENSHOTS CAROUSEL */
.app-screenshots {
  position:relative; width:100%; max-width:180px; aspect-ratio:9/19.5;
  overflow:hidden; border-radius:0;
  box-shadow: none;
}
.app-screenshots img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  opacity:0; transition: opacity 0.6s ease;
}
.app-screenshots img.active { opacity:1; }
.app-screenshots-dots {
  display:flex; gap:4px; justify-content:center; margin-top:.5rem;
}
.app-screenshots-dots span {
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,0.2); transition: background 0.3s;
}
.app-screenshots-dots span.active { background:var(--accent); }

/* CTA SECTION */
.cta-section {
  text-align:center;
  background: radial-gradient(ellipse at 50% 50%, rgba(124,108,240,0.1) 0%, transparent 70%);
}
.cta-card {
  max-width:650px; margin:0 auto; padding:3.5rem;
  background: linear-gradient(135deg, rgba(124,108,240,0.1), rgba(244,114,182,0.05));
  border:1px solid rgba(124,108,240,0.25); border-radius:var(--radius);
  position:relative; overflow:hidden;
}
.cta-card::after {
  content:''; position:absolute; inset:-50%; z-index:0;
  background: conic-gradient(from 0deg, transparent, rgba(124,108,240,0.1), transparent, rgba(244,114,182,0.08), transparent);
  animation: spin 8s linear infinite;
}
.cta-card > * { position:relative; z-index:1; }
.cta-price {
  font-size:3.5rem; font-weight:900; margin-bottom:.5rem;
  background: linear-gradient(135deg, var(--accent), var(--pink), var(--blue));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.cta-period { color:var(--text-dim); font-size:1.1rem; margin-bottom:1.5rem; }
.cta-btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding: 1rem 3rem; border-radius: 100px;
  background: linear-gradient(135deg, var(--accent), #9b8afb);
  color: #fff; font-size:1.15rem; font-weight:700;
  text-decoration:none; border:none; cursor:pointer;
  transition: transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 4px 30px var(--accent-glow);
}
.cta-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 40px var(--accent-glow);
}
.cta-note { margin-top:1.2rem; color:var(--text-dim); font-size:.85rem; }

/* FAQ */
.faq-list { max-width:700px; margin:0 auto; }
.faq-item {
  border-bottom: 1px solid var(--glass-border);
  padding: 1.5rem 0;
}
.faq-q {
  font-size:1.1rem; font-weight:600; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center;
  user-select:none;
}
.faq-q::after { content:'+'; font-size:1.5rem; color:var(--accent); transition: transform var(--transition); }
.faq-item.open .faq-q::after { transform:rotate(45deg); }
.faq-a {
  max-height:0; overflow:hidden; transition: max-height 0.4s ease, padding 0.4s ease;
  color:var(--text-dim); font-size:.95rem; line-height:1.7;
}
.faq-item.open .faq-a { max-height:200px; padding-top:1rem; }

/* FOOTER */
footer {
  padding:4rem 2rem 2rem; text-align:center;
  border-top:1px solid var(--glass-border);
}
.footer-links { display:flex; gap:2rem; justify-content:center; flex-wrap:wrap; margin-bottom:2rem; }
.footer-links a { color:var(--text-dim); text-decoration:none; font-size:.9rem; transition:color var(--transition); }
.footer-links a:hover { color:var(--text); }
.footer-copy { color:rgba(255,255,255,0.25); font-size:.8rem; }

/* RESPONSIVE */
@media(max-width:900px) {
  .value-grid { grid-template-columns:1fr; }
  .app-grid { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:600px) {
  .app-grid { grid-template-columns:1fr; }
  .nav-links { display:none; }
  .nav-hamburger { display:block; }
  nav { padding:1rem 1.2rem; }
  section { padding:4rem 1.2rem; }
}

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }