/* ===== HERO ===== */
.hero{
  position:relative;min-height:100vh;display:flex;align-items:center;
  padding:120px 0 80px;overflow:hidden;
}
.hero-bg-glow{
  position:absolute;top:-200px;right:-200px;width:700px;height:700px;
  background:radial-gradient(circle,rgba(168,85,247,.12) 0%,rgba(99,102,241,.06) 40%,transparent 70%);
  pointer-events:none;animation:pulseGlow 6s ease-in-out infinite;
}
@keyframes pulseGlow{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}

.hero-content{
  max-width:1200px;margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(168,85,247,.1);border:1px solid rgba(168,85,247,.2);
  padding:8px 16px;border-radius:var(--radius-full);
  font-size:.8rem;font-weight:500;color:var(--accent-purple);
  margin-bottom:24px;
}
.badge-dot{width:6px;height:6px;border-radius:50%;background:var(--accent-purple);animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

.hero-title{
  font-family:var(--font-display);font-size:clamp(2.5rem,5.5vw,4.2rem);
  font-weight:800;line-height:1.1;letter-spacing:-.03em;margin-bottom:20px;
}
.gradient-text{
  background:var(--gradient-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero-subtitle{font-size:1.1rem;color:var(--text-secondary);line-height:1.7;margin-bottom:32px;max-width:480px}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:40px}

.hero-stats{display:flex;align-items:center;gap:24px}
.stat{display:flex;flex-direction:column}
.stat-number{font-family:var(--font-display);font-size:1.3rem;font-weight:700}
.stat-label{font-size:.78rem;color:var(--text-muted);margin-top:2px}
.stat-divider{width:1px;height:36px;background:rgba(168,85,247,.2)}

/* DESKTOP FRAME */
.hero-mockup{position:relative;display:flex;justify-content:center;align-items:center}
.mockup-glow{
  position:absolute;width:500px;height:400px;
  background:radial-gradient(circle,rgba(168,85,247,.2),transparent 70%);
  pointer-events:none;animation:pulseGlow 4s ease-in-out infinite;
}
.desktop-frame{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid rgba(168,85,247,.15);
  box-shadow:0 20px 60px rgba(0,0,0,.5), 0 0 40px rgba(168,85,247,.12);
  background:var(--bg-secondary);
  animation:float 6s ease-in-out infinite;
}
.desktop-frame-bar{
  display:flex;gap:6px;padding:10px 14px;
  background:rgba(22,22,31,.95);border-bottom:1px solid rgba(168,85,247,.08);
}
.frame-dot{
  width:10px;height:10px;border-radius:50%;
}
.frame-dot:nth-child(1){background:#ff5f57}
.frame-dot:nth-child(2){background:#febc2e}
.frame-dot:nth-child(3){background:#28c840}
.mockup-img{
  width:100%;max-width:580px;height:auto;display:block;
}
.mockup-video {
  width:100%;max-width:580px;aspect-ratio:16/9;display:block;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}

/* ===== CATEGORIES ===== */
.categories{padding:60px 0 20px}
.category-pills{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 22px;border-radius:var(--radius-full);
  background:var(--bg-card);border:1px solid rgba(168,85,247,.1);
  color:var(--text-secondary);font-size:.9rem;font-weight:500;
  cursor:pointer;transition:var(--transition);font-family:var(--font-main);
}
.pill:hover,.pill.active{
  background:rgba(168,85,247,.12);color:var(--text-primary);
  border-color:rgba(168,85,247,.35);box-shadow:var(--shadow-glow);
}
.pill.active{color:var(--accent-purple)}
.pill-icon{font-size:1.05rem}

/* ===== GALLERY ===== */
.gallery{padding:40px 0 100px}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.gallery-card{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  aspect-ratio:3/4;cursor:pointer;
  border:1px solid rgba(168,85,247,.06);
  transition:var(--transition);
}
.gallery-card img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
}
.gallery-card:hover img{transform:scale(1.08)}
.gallery-card:hover{
  border-color:rgba(168,85,247,.25);
  box-shadow:var(--shadow-glow-lg);
}
.card-overlay{
  position:absolute;bottom:0;left:0;right:0;
  padding:20px;display:flex;justify-content:space-between;align-items:flex-end;
  background:linear-gradient(transparent,rgba(0,0,0,.75));
  opacity:0;transition:var(--transition);
}
.gallery-card:hover .card-overlay{opacity:1}
.card-tag{
  font-size:.8rem;font-weight:600;
  background:rgba(168,85,247,.2);backdrop-filter:blur(8px);
  padding:4px 12px;border-radius:var(--radius-full);
  border:1px solid rgba(168,85,247,.25);
}
.card-res{
  font-size:.7rem;font-weight:700;text-transform:uppercase;
  background:var(--gradient-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;letter-spacing:.08em;
}
.card-glow{
  position:absolute;inset:0;opacity:0;transition:var(--transition);
  background:radial-gradient(circle at 50% 100%,rgba(168,85,247,.15),transparent 60%);
  pointer-events:none;
}
.gallery-card:hover .card-glow{opacity:1}
.gallery-cta{text-align:center;margin-top:48px}

/* ===== FEATURES ===== */
.features{padding:100px 0}
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.feature-card{
  padding:32px 24px;border-radius:var(--radius-lg);
  background:var(--gradient-card);border:1px solid rgba(168,85,247,.08);
  transition:var(--transition);
}
.feature-card:hover{
  border-color:rgba(168,85,247,.25);
  transform:translateY(-6px);
  box-shadow:var(--shadow-glow);
  background:rgba(168,85,247,.06);
}
.feature-icon{
  width:52px;height:52px;border-radius:var(--radius-md);
  background:rgba(168,85,247,.1);border:1px solid rgba(168,85,247,.15);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;color:var(--accent-purple);
}
.feature-card h3{
  font-family:var(--font-display);font-size:1.15rem;font-weight:700;
  margin-bottom:8px;
}
.feature-card p{font-size:.88rem;color:var(--text-secondary);line-height:1.6}

/* ===== REVIEWS ===== */
.reviews{padding:100px 0}
.reviews-stats{
  display:flex;justify-content:center;gap:48px;margin-bottom:56px;flex-wrap:wrap;
}
.review-stat{
  text-align:center;padding:24px 32px;border-radius:var(--radius-lg);
  background:var(--gradient-card);border:1px solid rgba(168,85,247,.08);
  min-width:160px;
}
.big-number{
  font-family:var(--font-display);font-size:2.4rem;font-weight:800;
  background:var(--gradient-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;display:block;
}
.stars,.stat-icon{font-size:1.1rem;margin:4px 0}
.stat-desc{font-size:.82rem;color:var(--text-muted)}

.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.testimonial-card{
  padding:28px;border-radius:var(--radius-lg);
  background:var(--bg-card);border:1px solid rgba(168,85,247,.06);
  transition:var(--transition);
}
.testimonial-card:hover{
  border-color:rgba(168,85,247,.2);
  box-shadow:var(--shadow-glow);
  transform:translateY(-4px);
}
.testimonial-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.avatar{
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.9rem;color:#fff;flex-shrink:0;
}
.reviewer-name{font-weight:600;font-size:.9rem;display:block}
.reviewer-tag{font-size:.78rem;color:var(--text-muted)}
.testimonial-card p{font-size:.92rem;color:var(--text-secondary);line-height:1.65;margin-bottom:12px}
.testimonial-stars{font-size:.85rem}

/* ===== DOWNLOAD SECTION ===== */
.download-section{padding:100px 0;position:relative}
.download-content{
  position:relative;text-align:center;
  padding:64px 40px;border-radius:var(--radius-xl);
  background:var(--bg-secondary);
  border:1px solid rgba(168,85,247,.1);
  overflow:hidden;
}
.download-glow{
  position:absolute;top:-100px;left:50%;transform:translateX(-50%);
  width:500px;height:400px;
  background:radial-gradient(ellipse,rgba(168,85,247,.15),transparent 70%);
  pointer-events:none;
}
.download-content h2{
  font-family:var(--font-display);font-size:clamp(2rem,4vw,2.8rem);
  font-weight:800;margin:12px 0 16px;letter-spacing:-.02em;
}
.download-content p{
  font-size:1.05rem;color:var(--text-secondary);max-width:460px;margin:0 auto 32px;line-height:1.7;
}
.store-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}
.store-btn{
  display:flex;align-items:center;gap:12px;
  padding:12px 24px;border-radius:var(--radius-md);
  background:var(--bg-primary);border:1px solid rgba(168,85,247,.15);
  color:var(--text-primary);transition:var(--transition);
  min-width:180px;
}
.store-btn:hover{
  border-color:rgba(168,85,247,.4);
  box-shadow:var(--shadow-glow);
  transform:translateY(-2px);
}
.store-btn svg{flex-shrink:0}
.store-btn small{font-size:.65rem;color:var(--text-muted);display:block;text-align:left}
.store-btn span{font-weight:600;font-size:.95rem;display:block;text-align:left}
.download-note{font-size:.8rem;color:var(--text-muted)}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
  .hero-content{grid-template-columns:1fr;text-align:center;gap:40px}
  .hero-subtitle{margin:0 auto 32px}
  .hero-ctas{justify-content:center}
  .hero-stats{justify-content:center}
  .hero-mockup{order:-1}
  .mockup-img{max-height:420px}
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .testimonials-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .hero{padding:100px 0 60px;min-height:auto}
  .hero-title{font-size:2.2rem}
  .mockup-img{max-height:340px}
  .gallery-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .features-grid{grid-template-columns:1fr;gap:16px}
  .testimonials-grid{grid-template-columns:1fr}
  .reviews-stats{gap:16px}
  .review-stat{min-width:120px;padding:20px}
  .download-content{padding:48px 24px}
  .store-buttons{flex-direction:column;align-items:center}
  .store-btn{width:100%;max-width:280px;justify-content:center}
}
@media(max-width:480px){
  .hero-title{font-size:1.85rem}
  .hero-ctas{flex-direction:column;align-items:center}
  .hero-stats{flex-direction:column;gap:16px}
  .stat-divider{width:40px;height:1px}
  .gallery-grid{grid-template-columns:1fr 1fr;gap:8px}
  .category-pills{gap:8px}
  .pill{padding:8px 16px;font-size:.82rem}
}