/* ========================================
   无限PAY模板-一只小白菜
   QQ：2694199949 - 首页样式
   ======================================== */

/* --- Hero Section --- */
.hero-section {
  position: relative; min-height: 100vh; display: flex; align-items: center;
  overflow: hidden; background: var(--background);
}
.hero-bg-blur-1 {
  position: absolute; top: -160px; right: -160px;
  width: 800px; height: 800px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(249,86,31,0.08) 0%, transparent 70%);
  filter: blur(64px);
}
.hero-bg-blur-2 {
  position: absolute; bottom: -160px; left: -160px;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(249,86,31,0.08) 0%, transparent 70%);
  filter: blur(64px); opacity: 0.5;
}
.hero-content {
  position: relative; max-width: 1280px; margin: 0 auto;
  padding: 128px 16px 80px;
}
@media (min-width: 1024px) {
  .hero-content { padding-top: 160px; padding-bottom: 128px; }
}
.hero-grid {
  display: grid; align-items: center; gap: 48px;
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr 1fr; gap: 80px; }
}
.hero-title {
  font-size: 36px; font-weight: 700; letter-spacing: -0.025em;
  line-height: 1.1; color: var(--foreground);
}
@media (min-width: 640px) { .hero-title { font-size: 48px; } }
@media (min-width: 1024px) { .hero-title { font-size: 60px; } }
.hero-desc {
  font-size: 18px; color: var(--muted); line-height: 1.75;
  max-width: 576px; margin-top: 24px;
}
@media (min-width: 1024px) { .hero-desc { font-size: 20px; } }
.hero-actions {
  display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px;
}
.hero-code-wrap {
  position: relative;
}
.hero-code-glow {
  position: absolute; inset: -16px; border-radius: 16px;
  background: radial-gradient(ellipse, rgba(249,86,31,0.08) 0%, transparent 70%);
  filter: blur(40px); opacity: 0.6;
}

/* --- Stats Section --- */
.stats-section {
  position: relative; padding: 80px 0; overflow: hidden;
  background: rgba(249,86,31,0.04);
}
@media (min-width: 1024px) { .stats-section { padding: 96px 0; } }

/* --- Solutions Section --- */
.solutions-section {
  position: relative; padding: 96px 0; overflow: hidden;
  background: rgba(241,245,249,0.5);
}
@media (max-width: 1023px) { .solutions-section { padding: 80px 0; } }
.solution-card {
  display: block; position: relative; border-radius: 16px; overflow: hidden;
  transition: all 0.5s; padding: 32px; text-align: center;
}
.solution-card:hover {
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.1);
  transform: translateY(-8px);
  border-color: rgba(249,86,31,0.2);
}

/* --- Developer Section --- */
.dev-section {
  position: relative; padding: 96px 0; overflow: hidden;
}
@media (max-width: 1023px) { .dev-section { padding: 80px 0; } }
.dev-grid {
  display: grid; align-items: center; gap: 32px;
}
@media (min-width: 1024px) {
  .dev-grid { grid-template-columns: 1fr 1fr; gap: 48px; }
}
.dev-features {
  background: rgba(255,255,255,0.7); backdrop-filter: blur(12px);
  border: 1px solid rgba(226,232,240,0.5); border-radius: 16px;
  padding: 32px;
}
@media (min-width: 1024px) { .dev-features { padding: 40px; } }
.tab-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

/* --- CTA Section --- */
.cta-section {
  position: relative; padding: 96px 0; overflow: hidden;
}
@media (max-width: 1023px) { .cta-section { padding: 80px 0; } }

/* --- Product icons (color variants) --- */
.icon-grad-pink-red { background: linear-gradient(135deg, #ec4899, #ef4444); }
.icon-grad-red-orange { background: linear-gradient(135deg, #ef4444, #f97316); }
.icon-grad-orange-amber { background: linear-gradient(135deg, #f97316, #f59e0b); }
.icon-grad-amber-yellow { background: linear-gradient(135deg, #f59e0b, #eab308); }
.icon-grad-blue-cyan { background: linear-gradient(135deg, #3b82f6, #06b6d4); }
.icon-grad-purple-pink { background: linear-gradient(135deg, #8b5cf6, #ec4899); }
.icon-grad-indigo-violet { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.icon-grad-rose-red { background: linear-gradient(135deg, #f43f5e, #ef4444); }
.icon-grad-teal-emerald { background: linear-gradient(135deg, #14b8a6, #10b981); }

/* Product card overlay colors */
.overlay-pink-red { background: linear-gradient(135deg, #ec4899, #ef4444); }
.overlay-red-orange { background: linear-gradient(135deg, #ef4444, #f97316); }
.overlay-orange-amber { background: linear-gradient(135deg, #f97316, #f59e0b); }
.overlay-amber-yellow { background: linear-gradient(135deg, #f59e0b, #eab308); }
.overlay-blue-cyan { background: linear-gradient(135deg, #3b82f6, #06b6d4); }
.overlay-purple-pink { background: linear-gradient(135deg, #8b5cf6, #ec4899); }
.overlay-indigo-violet { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.overlay-rose-red { background: linear-gradient(135deg, #f43f5e, #ef4444); }
.overlay-teal-emerald { background: linear-gradient(135deg, #14b8a6, #10b981); }

/* --- Responsive --- */
@media (max-width: 767px) {
  .hero-title { font-size: 30px; }
  .hero-actions { flex-direction: column; align-items: center; }
  .hero-actions .btn { width: 100%; }
  .section-title { font-size: 30px; }
}

/* --- Responsive Grids --- */
.product-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
}
@media (min-width: 1024px) {
  .product-grid { grid-template-columns: repeat(4, 1fr); gap: 32px; }
}
@media (max-width: 639px) {
  .product-grid { grid-template-columns: 1fr; }
}

.solution-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
}
@media (min-width: 1024px) {
  .solution-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}
@media (max-width: 639px) {
  .solution-grid { grid-template-columns: 1fr; }
}

.security-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
}
@media (min-width: 1024px) {
  .security-grid { grid-template-columns: repeat(4, 1fr); gap: 32px; }
}
@media (max-width: 639px) {
  .security-grid { grid-template-columns: 1fr; }
}

@media (max-width: 639px) {
  .hero-actions { flex-direction: column !important; }
  .hero-actions .btn { width: 100% !important; }
  .cta-actions { flex-direction: column !important; }
  .cta-actions .btn { width: 100% !important; }
}