/* ── Snap Hero ────────────────────────────────────────────────── */

.snap-hero {
  position: relative;
  padding: 160px 0 100px;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.snap-hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    600px circle at var(--glow-x, 50%) var(--glow-y, 50%),
    rgba(155,126,200,0.12) 0%,
    rgba(99,102,241,0.06) 30%,
    transparent 70%
  );
  transition: opacity 0.3s;
  opacity: 0;
}

.snap-hero:hover .snap-hero-glow {
  opacity: 1;
}

.snap-hero .container {
  position: relative;
  z-index: 1;
}

.snap-hero-content {
  max-width: 620px;
}

.snap-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px 6px 6px;
  border-radius: 100px;
  background: rgba(155,126,200,0.08);
  border: 1px solid rgba(155,126,200,0.15);
  margin-bottom: 28px;
}

.snap-hero-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.snap-hero-badge span {
  font-size: 14px;
  font-weight: 600;
  color: var(--brand);
}

.snap-hero-title {
  font-size: 44px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -1.5px;
  margin-bottom: 20px;
}

.snap-hero-sub {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255,255,255,0.55);
  margin-bottom: 32px;
}

.snap-hero-sub strong {
  color: var(--brand);
  font-weight: 600;
}

.snap-hero-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.snap-store-note {
  font-size: 13px;
  color: var(--text-muted);
}


/* ── Features ─────────────────────────────────────────────────── */

.snap-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.snap-feature {
  padding: 32px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color 0.3s, background 0.3s;
}

.snap-feature:hover {
  border-color: rgba(155,126,200,0.15);
  background: var(--surface-2);
}

.snap-feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(155,126,200,0.08);
  border: 1px solid rgba(155,126,200,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  margin-bottom: 20px;
}

.snap-feature-icon.pro {
  background: rgba(232,134,27,0.08);
  border-color: rgba(232,134,27,0.15);
  color: var(--warm);
}

.snap-feature h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: -0.3px;
}

.snap-feature p {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255,255,255,0.5);
}

.pro-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--warm);
  background: rgba(232,134,27,0.1);
  padding: 2px 8px;
  border-radius: 6px;
  vertical-align: middle;
  margin-left: 4px;
}


/* ── How it works ─────────────────────────────────────────────── */

.snap-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.snap-step {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
}

.snap-step:last-child {
  border-bottom: none;
}

.snap-step-num {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(155,126,200,0.08);
  border: 1px solid rgba(155,126,200,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--brand);
  flex-shrink: 0;
}

.snap-step h3 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 4px;
}

.snap-step p {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  line-height: 1.55;
}


/* ── Pro card ─────────────────────────────────────────────────── */

.snap-pro-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}

.snap-pro-inner {
  padding: 48px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(155,126,200,0.06) 0%, rgba(232,134,27,0.04) 100%);
  border: 1px solid rgba(155,126,200,0.12);
}

.snap-pro-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--warm);
  margin-bottom: 20px;
}

.snap-pro-title {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -1.5px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #fff 30%, var(--brand) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.snap-pro-desc {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255,255,255,0.55);
  max-width: 560px;
}


/* ── Supported sites ──────────────────────────────────────────── */

.snap-sites {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.snap-site {
  padding: 10px 22px;
  border-radius: 100px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.65);
  transition: border-color 0.2s, color 0.2s;
}

.snap-site:hover {
  border-color: rgba(155,126,200,0.2);
  color: #fff;
}


/* ── Responsive ───────────────────────────────────────────────── */

@media (max-width: 768px) {
  .snap-hero { padding: 120px 0 80px; }
  .snap-hero-title { font-size: 32px; }
  .snap-features { grid-template-columns: 1fr; }
  .snap-pro-inner { padding: 32px; }
  .snap-pro-title { font-size: 28px; }
}

@media (max-width: 480px) {
  .snap-hero-title { font-size: 28px; }
  .snap-hero-actions { flex-direction: column; align-items: flex-start; }
}