/* ═══════════════════════════════════════
   HERO
═══════════════════════════════════════ */
.hero {
  padding:9rem 0 0;
  position:relative; overflow:hidden;
}
.hero::before {
  content:''; position:absolute; top:-200px; left:50%; transform:translateX(-50%);
  width:900px; height:900px; border-radius:50%;
  background:radial-gradient(circle,rgba(139,92,246,0.12) 0%,transparent 70%);
  pointer-events:none;
}
.hero-inner { text-align:center; }

.hero-badge {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.35rem 1rem; border-radius:50px; font-size:0.8125rem; font-weight:600;
  background:rgba(139,92,246,0.1); color:var(--accent); border:1px solid rgba(139,92,246,0.25);
  margin-bottom:2rem;
}

.hero-title {
  font-size:clamp(2.5rem,6vw,4.5rem); font-weight:800;
  line-height:1.1; letter-spacing:-0.03em;
  margin-bottom:1.5rem;
}

.hero-sub {
  font-size:clamp(1rem,2vw,1.25rem); color:var(--text-muted);
  max-width:640px; margin:0 auto 2.5rem; line-height:1.7;
}
.hero-sub strong { color:var(--text); }

.hero-cta {
  display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;
  margin-bottom:3rem;
}

.hero-stats {
  display:flex; align-items:center; justify-content:center; gap:0; flex-wrap:wrap;
  margin-bottom:4rem; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.25rem 2rem; display:inline-flex;
}
.stat { text-align:center; padding:0 2rem; }
.stat-num { display:block; font-size:1.75rem; font-weight:800; color:var(--accent); }
.stat-label { font-size:0.8125rem; color:var(--text-muted); font-weight:500; }
.stat-divider { width:1px; height:40px; background:var(--border); }

/* Browser mockup */
.hero-visual { margin:0 -1.5rem; }
.browser-mockup {
  border:1px solid var(--border); border-bottom:none;
  border-radius:var(--radius) var(--radius) 0 0;
  overflow:hidden; background:var(--surface-2);
  max-width:860px; margin:0 auto;
  box-shadow:0 -20px 60px rgba(0,0,0,0.4);
}
.browser-bar {
  display:flex; align-items:center; gap:0.5rem; padding:0.75rem 1rem;
  background:var(--surface); border-bottom:1px solid var(--border-dim);
}
.browser-dot { width:12px; height:12px; border-radius:50%; }
.browser-dot.red    { background:#ff5f57; }
.browser-dot.yellow { background:#febc2e; }
.browser-dot.green  { background:#28c840; }
.browser-url {
  margin-left:0.5rem; background:var(--surface-2); border-radius:6px;
  padding:0.25rem 0.75rem; font-size:0.75rem; color:var(--text-muted);
  flex:1; max-width:340px; text-align:center;
}
.browser-content { padding:1.5rem; display:flex; flex-direction:column; gap:0.75rem; position:relative; }

.mock-card {
  display:flex; align-items:center; gap:1rem; padding:0.875rem;
  background:var(--surface-3); border-radius:var(--radius-sm); border:1px solid var(--border-dim);
}
.mock-img { width:72px; height:52px; border-radius:8px; background:linear-gradient(135deg,var(--surface-2),var(--surface)); flex-shrink:0; }
.mock-info { flex:1; }
.mock-title { height:12px; width:65%; background:var(--surface-2); border-radius:4px; margin-bottom:6px; }
.mock-title.short { width:45%; }
.mock-price { height:14px; width:30%; background:rgba(139,92,246,0.3); border-radius:4px; margin-bottom:8px; }
.mock-badge-row { display:flex; gap:0.4rem; }
.mock-tag {
  padding:2px 8px; border-radius:50px; font-size:0.7rem; font-weight:600;
}
.mock-tag.purple { background:rgba(139,92,246,0.2); color:var(--accent); }
.mock-tag.green  { background:rgba(34,197,94,0.2); color:var(--success); }
.mock-save {
  background:none; border:none; color:var(--text-muted); font-size:1.25rem; padding:0.25rem;
  transition:color var(--transition);
}
.mock-save.active { color:#ef4444; }
.mock-notification {
  display:flex; align-items:center; gap:0.6rem; padding:0.6rem 0.875rem;
  background:rgba(139,92,246,0.1); border:1px solid rgba(139,92,246,0.2); border-radius:var(--radius-sm);
  font-size:0.8125rem; color:var(--text); animation:slideIn 0.4s ease 1s both;
}
@keyframes slideIn { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }

/* ═══════════════════════════════════════
   PORTALS BANNER
═══════════════════════════════════════ */
.portals-banner { padding:1.5rem 0; border-top:1px solid var(--border-dim); border-bottom:1px solid var(--border-dim); background:var(--surface); }
.portals-inner { max-width:var(--max-w); margin:0 auto; padding:0 1.5rem; display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; justify-content:center; }
.portals-label { font-size:0.8125rem; color:var(--text-dim); font-weight:500; white-space:nowrap; }
.portals-logos { display:flex; gap:0.75rem; flex-wrap:wrap; }
.portal-chip {
  padding:0.3rem 0.875rem; border-radius:50px; font-size:0.8125rem; font-weight:500;
  background:var(--surface-2); color:var(--text-muted); border:1px solid var(--border-dim);
}

/* ═══════════════════════════════════════
   HOW IT WORKS
═══════════════════════════════════════ */
.how-it-works { padding:6rem 0; background:var(--surface-2); }
.steps-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:2rem;
}
.step-card {
  text-align:center; padding:2.5rem 2rem;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  position:relative; transition:all var(--transition);
}
.step-card:hover { transform:translateY(-6px); border-color:rgba(139,92,246,0.5); }
.step-num {
  position:absolute; top:1.25rem; left:1.5rem;
  font-size:0.75rem; font-weight:700; color:var(--accent); letter-spacing:0.05em;
}
.step-icon-wrap {
  width:64px; height:64px; border-radius:50%; margin:0 auto 1.5rem;
  background:rgba(139,92,246,0.1); border:1px solid rgba(139,92,246,0.2);
  display:flex; align-items:center; justify-content:center; color:var(--accent);
}
.step-card h3 { font-size:1.25rem; font-weight:700; margin-bottom:0.75rem; }
.step-card p  { color:var(--text-muted); line-height:1.65; }

/* ═══════════════════════════════════════
   FEATURES
═══════════════════════════════════════ */
.features { padding:6rem 0; }
.features-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:1.5rem;
}
.feature-card { position:relative; padding:2rem; }
.feature-icon {
  width:48px; height:48px; border-radius:12px; margin-bottom:1.25rem;
  background:rgba(139,92,246,0.1); border:1px solid rgba(139,92,246,0.2);
  display:flex; align-items:center; justify-content:center; color:var(--accent);
}
.feature-card h3 { font-size:1.125rem; font-weight:700; margin-bottom:0.5rem; }
.feature-card p  { color:var(--text-muted); font-size:0.9375rem; line-height:1.65; }
.feature-badge {
  position:absolute; top:1.25rem; right:1.25rem;
  padding:0.2rem 0.6rem; border-radius:50px; font-size:0.7rem; font-weight:700;
  letter-spacing:0.05em; text-transform:uppercase;
}
.feature-badge.pro      { background:rgba(139,92,246,0.2); color:var(--accent); }
.feature-badge.business { background:rgba(59,130,246,0.2); color:var(--accent-2); }

/* ═══════════════════════════════════════
   PRICING
═══════════════════════════════════════ */
.pricing { padding:6rem 0; background:var(--surface-2); }
.pricing-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem;
  align-items:start;
}
@media (max-width:1100px) { .pricing-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px)  { .pricing-grid { grid-template-columns:1fr; } }
.pricing-card {
  padding:2rem; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--border-dim);
  border-radius:var(--radius);
  transition:transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.pricing-card:hover { transform:translateY(-4px); border-color:rgba(139,92,246,0.4); box-shadow:0 12px 40px rgba(0,0,0,0.3); }
.pricing-featured {
  border-color:var(--accent) !important;
  background:linear-gradient(160deg,rgba(139,92,246,0.08) 0%,var(--surface) 60%);
  box-shadow:0 0 40px rgba(139,92,246,0.15);
  transform:scale(1.03);
}
.pricing-featured:hover { transform:scale(1.03) translateY(-4px); }

.plan-badge-top {
  display:inline-block; padding:0.25rem 0.75rem; border-radius:50px;
  font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff;
  margin-bottom:1.25rem; align-self:flex-start;
}
.plan-name { font-size:1.125rem; font-weight:700; margin-bottom:0.5rem; }
.plan-price { margin-bottom:0.5rem; }
.price-num { font-size:2.5rem; font-weight:800; }
.price-period { font-size:1rem; color:var(--text-muted); font-weight:400; margin-left:0.15rem; }
.plan-desc { font-size:0.875rem; color:var(--text-muted); margin-bottom:1.5rem; padding-bottom:1.5rem; border-bottom:1px solid var(--border-dim); }
.plan-features { list-style:none; flex:1; margin-bottom:1.75rem; display:flex; flex-direction:column; gap:0.75rem; }
.plan-features li { display:flex; align-items:center; gap:0.6rem; font-size:0.9375rem; }
.feature-unavail { color:var(--text-dim); }
.pricing-note { text-align:center; margin-top:2rem; }
.pricing-note a { color:var(--accent); font-weight:600; }
.pricing-note a:hover { text-decoration:underline; }

/* ═══════════════════════════════════════
   TESTIMONIALS
═══════════════════════════════════════ */
.testimonials-section { padding:6rem 0; }
.testimonials-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.5rem;
}
.testimonial-card { padding:2rem; }
.stars { color:#f59e0b; font-size:1.125rem; margin-bottom:1rem; letter-spacing:2px; }
.testimonial-card > p { color:var(--text-muted); font-size:1rem; line-height:1.7; margin-bottom:1.5rem; font-style:italic; }
.testimonial-author { display:flex; align-items:center; gap:0.875rem; }
.author-avatar {
  width:40px; height:40px; border-radius:50%; background:rgba(139,92,246,0.2);
  color:var(--accent); font-weight:700; font-size:0.875rem;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.testimonial-author strong { display:block; font-size:0.9375rem; }
.testimonial-author span { font-size:0.8125rem; color:var(--text-muted); }

/* ═══════════════════════════════════════
   FAQ
═══════════════════════════════════════ */
.faq { padding:6rem 0; }
.accordion { max-width:780px; margin:0 auto; }
.accordion-item { border-bottom:1px solid var(--border-dim); }
.accordion-header {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:1.375rem 0; background:none; border:none; color:var(--text);
  font-size:1rem; font-weight:600; text-align:left; gap:1rem;
}
.accordion-header:hover { color:var(--accent); }
.accordion-icon { flex-shrink:0; transition:transform 0.3s ease; color:var(--text-muted); }
.accordion-header[aria-expanded="true"] .accordion-icon { transform:rotate(180deg); color:var(--accent); }
.accordion-body { padding:0 0 1.5rem; }
.accordion-body p { color:var(--text-muted); line-height:1.7; }
.accordion-body a { color:var(--accent); }
.accordion-body a:hover { text-decoration:underline; }

/* ═══════════════════════════════════════
   CTA SECTION
═══════════════════════════════════════ */
.cta-section { padding:6rem 0; }
.cta-card {
  background:linear-gradient(135deg,rgba(139,92,246,0.15) 0%,rgba(59,130,246,0.1) 100%);
  border:1px solid rgba(139,92,246,0.35); border-radius:24px;
  padding:4rem 2rem; text-align:center;
  box-shadow:0 0 60px rgba(139,92,246,0.1);
}
.cta-card h2 { font-size:clamp(1.75rem,4vw,2.75rem); font-weight:800; margin-bottom:1rem; }
.cta-card > p { color:var(--text-muted); font-size:1.0625rem; margin-bottom:2rem; max-width:520px; margin-left:auto; margin-right:auto; }
.cta-note { margin-top:1.25rem; font-size:0.875rem; color:var(--text-dim); }

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media (max-width:768px) {
  .hero { padding:7.5rem 0 0; }
  .hero-title { font-size:2.5rem; }
  .hero-stats { display:flex; flex-direction:column; gap:1rem; width:100%; }
  .stat-divider { width:60px; height:1px; }
  .pricing-featured { transform:none; }
  .pricing-featured:hover { transform:translateY(-4px); }
  .features-grid { grid-template-columns:1fr; }
  .browser-content { padding:1rem; }
  .cta-card { padding:2.5rem 1.25rem; }
}

@media (max-width:480px) {
  .hero-cta { flex-direction:column; align-items:center; }
  .hero-cta .btn { width:100%; max-width:320px; }
  .pricing-grid { grid-template-columns:1fr; }
}