style(dnfs): 首页进一步美化，光晕氛围与卡片细节

static/public/css/index.css

@@ -25,8 +25,8 @@ body {
     transition: opacity 0.15s, transform 0.1s, background 0.15s, border-color 0.15s;
 }
 .btn:active { transform: scale(0.96); }
-.btn-primary { background: var(--accent); color: #fff; }
-.btn-primary:hover { background: var(--accent-dark); opacity: 1; }
+.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(232, 133, 58, 0.28); }
+.btn-primary:hover { background: var(--accent-dark); opacity: 1; box-shadow: 0 4px 14px rgba(232, 133, 58, 0.36); }
 .btn-ghost { background: var(--accent-soft); color: var(--accent-dark); }
 .btn-ghost:hover { border-color: var(--accent); opacity: 1; }
 .btn-lg { padding: 0.7rem 1.9rem; font-size: 1rem; border-radius: var(--radius-md); }
@@ -99,7 +99,7 @@ body {
 .hero {
     position: relative;
     text-align: center;
-    padding: 5.5rem 1rem 4.5rem;
+    padding: 6rem 1rem 5rem;
 }
 .hero::before {
     content: "";
@@ -108,7 +108,19 @@ body {
     background: radial-gradient(ellipse 60% 50% at 50% 30%, var(--accent-glow), transparent 70%);
     pointer-events: none;
 }
-.hero > * { position: relative; }
+.hero::after {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 52%;
+    width: 640px;
+    height: 640px;
+    transform: translate(-50%, -50%);
+    background: radial-gradient(circle, var(--accent-glow), transparent 62%);
+    opacity: 0.5;
+    pointer-events: none;
+}
+.hero > * { position: relative; z-index: 1; }
 .hero-title {
     font-size: clamp(2rem, 6vw, 3rem);
     font-weight: 800;
@@ -164,27 +176,41 @@ body {
     margin: 1.75rem auto 0;
 }
 .feature-card {
+    position: relative;
     background: var(--card);
     border: 1px solid var(--border-light);
     border-radius: var(--radius-md);
-    padding: 1.6rem 1.35rem;
+    padding: 1.7rem 1.4rem;
     box-shadow: var(--shadow-sm);
+    overflow: hidden;
     transition: transform 0.18s, box-shadow 0.2s, border-color 0.2s;
 }
+.feature-card::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: linear-gradient(90deg, var(--accent), var(--accent-dark));
+    opacity: 0;
+    transition: opacity 0.2s;
+}
 .feature-card:hover {
     transform: translateY(-4px);
     border-color: var(--accent);
     box-shadow: var(--shadow-md);
 }
+.feature-card:hover::before { opacity: 0.9; }
 .feature-icon {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 42px;
-    height: 42px;
-    margin-bottom: 0.85rem;
+    width: 44px;
+    height: 44px;
+    margin-bottom: 0.9rem;
     border-radius: var(--radius-sm);
-    background: var(--accent-soft);
+    background: linear-gradient(135deg, var(--accent-soft), rgba(232, 133, 58, 0.16));
     color: var(--accent-dark);
 }
 .feature-icon svg { width: 22px; height: 22px; }