﻿ .download-hero-section {
 background: linear-gradient(135deg, #f1f5f9 0%, #ffffff 100%);
 color: #111827;
 padding: 6vw 0;
 text-align: center;
 position: relative;
 overflow: hidden;
 margin-bottom: 4vw;
 border-bottom: 1px solid #e5e7eb;
 }
 
 .download-hero-section::before {
 content: '';
 position: absolute;
 top: -20%;
 left: -10%;
 width: 60vw;
 height: 60vw;
 background: radial-gradient(closest-side, rgba(14,165,233,.12), transparent);
 filter: blur(12px);
 pointer-events: none;
 }
 
 .download-hero-section > * {
 position: relative;
 z-index: 1;
 }
 
 .download-hero-section .hero-title {
 font-size: max(32px, 3vw);
 margin-bottom: 1.2vw;
 font-weight: 800;
 letter-spacing: -0.5px;
 color: #0f172a;
 }
 
 .download-hero-section .hero-desc {
 font-size: max(18px, 1.2vw);
 opacity: 0.9;
 max-width: 800px;
 margin: 0 auto 2.2vw;
 line-height: 1.7;
 color: #334155;
 }
 
 .download-hero-section .hero-btn-wrapper {
 margin-top: 2vw;
 }
 
 .download-hero-section .hero-download-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 padding: 1.2vw 3.5vw;
 background: linear-gradient(135deg, #ff6b35, #ff8c42);
 color: white;
 border: none;
 border-radius: 50px;
 font-size: max(18px, 1.3vw);
 font-weight: 700;
 text-decoration: none;
 transition: all 0.3s ease;
 cursor: pointer;
 box-shadow: 0 8px 32px rgba(255, 107, 53, 0.4);
 position: relative;
 overflow: hidden;
 }
 
 .download-hero-section .hero-download-btn::before {
 content: '';
 position: absolute;
 top: 0;
 left: -100%;
 width: 100%;
 height: 100%;
 background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
 transition: left 0.6s ease;
 }
 
 .download-hero-section .hero-download-btn:hover::before {
 left: 100%;
 }
 
 .download-hero-section .hero-download-btn:hover {
 background: linear-gradient(135deg, #ff5722, #ff7043);
 transform: translateY(-3px) scale(1.05);
 box-shadow: 0 12px 48px rgba(255, 107, 53, 0.6);
 }
 
 .download-platforms-section {
 padding: 2vw 0 6vw;
 }
 
 .platforms-grid {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 24px;
 margin-top: 2.5vw;
 align-items: stretch;
 }
 
 .platform-card {
 background: linear-gradient(180deg, #ffffff, #fafafa);
 border-radius: 16px;
 padding: 1.75vw;
 box-shadow: 0 6px 18px rgba(15, 23, 42, .05);
 transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
 border: 1px solid #e7e5e4; /* stone-200 */
 border-left: 6px solid #f59e0b; /* amber-500 accent */
 position: relative;
 overflow: hidden;
 display: flex;
 flex-direction: column;
 height: 100%;
 min-width: 0;
 }
 
 .platform-card::before { display: none; }
 
 .platform-card:hover {
 transform: translateY(-4px);
 box-shadow: 0 14px 32px rgba(15, 23, 42, 0.10);
 border-color: #e2e8f0; /* slate-200 */
 border-left-color: #f97316; /* amber-600 */
 }
 
 .platform-card:hover::before {
 transform: scaleX(1);
 }
 
 .platform-icon {
 width: 72px;
 height: 72px;
 background: radial-gradient(closest-side, #fde68a, #fef3c7);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 margin: 0 auto 1.25vw;
 border: 1px solid rgba(245, 158, 11, .25);
 box-shadow: 0 6px 18px rgba(245, 158, 11, 0.20);
 transition: transform 0.25s ease, box-shadow 0.25s ease;
 position: relative;
 overflow: hidden;
 color: #b45309; /* amber-700 for icon glyph */
 }
 
 .platform-icon::after {
 content: '';
 position: absolute;
 top: 50%;
 left: 50%;
 width: 0;
 height: 0;
 border-radius: 50%;
 background: rgba(255, 255, 255, 0.2);
 transform: translate(-50%, -50%);
 transition: width 0.6s, height 0.6s;
 }
 
 .platform-card:hover .platform-icon {
 transform: translateY(-2px);
 box-shadow: 0 10px 26px rgba(245, 158, 11, 0.25);
 }
 
 .platform-card:hover .platform-icon::after {
 width: 200px;
 height: 200px;
 }
 
 .platform-icon svg {
 width: 50px;
 height: 50px;
 filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
 transition: all 0.3s ease;
 position: relative;
 z-index: 1;
 }
 
 /* 平台图标配色 · 统一中性方案（避免蓝/绿失衡） */
 .platform--win .platform-icon,
 .platform--mac .platform-icon,
 .platform--ios .platform-icon,
 .platform--android .platform-icon {
 background: #f5f5f5;
 color: #374151; /* 深灰图标色，统一风格 */
 border-color: #e5e7eb; /* 统一浅灰边 */
 box-shadow: 0 4px 12px rgba(15,23,42,.08);
 }
 
 .platform-card:hover .platform-icon svg {
 transform: scale(1.1);
 filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
 }
 
 .platform-card .card-title {
 font-size: max(22px, 1.6vw);
 margin-bottom: 1vw;
 color: #111827;
 font-weight: 600;
 text-align: center;
 }
 
 .platform-card .version-badge {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 background: #fff7ed; /* orange-50 */
 color: #9a3412; /* orange-800 */
 padding: 0.35vw 1vw;
 border-radius: 14px;
 font-size: max(12px, 0.85vw);
 margin: 0 auto 1vw;
 font-weight: 700;
 width: fit-content;
 border: 1px solid #fed7aa; /* orange-200 */
 }
 
 .platform-card .platform-desc {
 color: #6b7280;
 font-size: max(14px, 0.95vw);
 margin-bottom: 1.2vw;
 line-height: 1.6;
 text-align: center;
 }
 
 .platform-card .feature-list {
 list-style: none;
 padding: 0;
 margin: 0.6vw 0 1vw;
 display: flex;
 flex-wrap: wrap;
 gap: 8px 12px;
 align-content: flex-start;
 text-align: left;
 flex: 1 1 auto;
 }
 
 .platform-card .feature-list .feature-item {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 6px 12px;
 border: 1px solid #e5e7eb;
 border-radius: 9999px;
 color: #374151;
 font-size: max(12px, 0.92vw);
 line-height: 1.2;
 background: #f9fafb;
 font-weight: 500;
 letter-spacing: .2px;
 box-shadow: 0 1px 0 rgba(17,24,39,.03);
 transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
 }
 
 .platform-card .feature-list .feature-item:hover {
 background-color: #ecfdf5;
 border-color: #a7f3d0;
 color: #065f46;
 box-shadow: 0 2px 6px rgba(17,24,39,.08);
 }
 
 .platform-card .feature-list .feature-item:before {
 content: "✓";
 display: inline-block;
 color: #10b981; /* emerald-500 */
 font-weight: 700;
 margin-right: 2px;
 font-size: .95em;
 flex-shrink: 0;
 }
 
 .platform-card .card-btn-wrapper {
 margin-top: auto;
 }
 
 .platform-card .platform-download-btn {
 width: 100%;
 padding: 1.3vw 2vw;
 background: linear-gradient(135deg, #ff6b35, #ff8c42);
 color: white;
 border: none;
 border-radius: 12px;
 font-size: max(16px, 1.1vw);
 font-weight: 600;
 cursor: pointer;
 transition: all 0.3s ease;
 text-decoration: none;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 position: relative;
 overflow: hidden;
 box-shadow: 0 8px 32px rgba(255, 107, 53, 0.4);
 }
 
 .platform-card .platform-download-btn::before {
 content: '';
 position: absolute;
 top: 0;
 left: -100%;
 width: 100%;
 height: 100%;
 background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
 transition: left 0.6s ease;
 }
 
 .platform-card .platform-download-btn:hover::before {
 left: 100%;
 }
 
 .platform-card .platform-download-btn:hover {
 transform: translateY(-2px);
 box-shadow: 0 12px 48px rgba(255, 107, 53, 0.6);
 background: linear-gradient(135deg, #ff5722, #ff7043);
 }
 
 .platform-card .platform-download-btn span {
 position: relative;
 z-index: 1;
 }
 
 .platform-card .file-details {
 margin-top: 1.5vw;
 padding-top: 1.5vw;
 border-top: 1px solid #e5e7eb;
 font-size: max(12px, 0.8vw);
 color: #6b7280;
 text-align: center;
 line-height: 1.6;
 }
 
 .requirements-section {
 background: linear-gradient(180deg, rgba(17,24,39,.02), rgba(17,24,39,0));
 padding: 4vw;
 border-radius: 1.125vw;
 margin-top: 4vw;
 border: 1px solid #e5e7eb;
 box-shadow: 0 8px 30px rgba(0,0,0,.06);
 }
 
 .requirements-section .section-title {
 font-size: max(22px, 1.6vw);
 margin-bottom: 2.5vw;
 color: #111827;
 font-weight: 600;
 text-align: center;
 }
 
 .requirements-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(280px, 1fr));
 gap: 2vw;
 }
 
 .requirement-card {
 background: white;
 padding: 2vw;
 border-radius: 12px;
 border-left: 4px solid #ff6b35;
 box-shadow: 0 4px 20px rgba(0,0,0,0.06);
 transition: all 0.3s ease;
 }
 
 .requirement-card:hover {
 transform: translateY(-4px);
 box-shadow: 0 8px 30px rgba(0,0,0,0.1);
 }
 
 .requirement-card .card-heading {
 font-size: max(16px, 1.1vw);
 margin-bottom: 1vw;
 color: #111827;
 font-weight: 600;
 }
 
 .requirement-card .card-text {
 font-size: max(14px, 0.9vw);
 color: #6b7280;
 line-height: 1.7;
 margin: 0;
 }

 /* Prevent awkward 3/1 split by stepping down columns responsively */
 @media (max-width: 1280px) {
 .platforms-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
 }
 @media (max-width: 1024px) {
 .platforms-grid { grid-template-columns: repeat(2, 1fr); }
 }
 
 @media (max-width: 768px) {
 .download-hero-section {
 padding: 10vw 4vw;
 }
 
 .platforms-grid {
 grid-template-columns: 1fr;
 gap: 4vw;
 }
 
 .platform-card {
 padding: 5vw;
 }
 
 .platform-icon {
 width: 80px;
 height: 80px;
 margin-bottom: 4vw;
 }
 
 .platform-icon svg {
 width: 45px;
 height: 45px;
 }
 
 .hero-download-btn {
 padding: 4vw 8vw;
 font-size: max(16px, 1.2vw);
 }
 
 .platform-card .platform-download-btn {
 padding: 4vw;
 }
 
 .platform-card .feature-list .feature-item {
 padding: 2vw 0;
 }
 
 .requirements-section {
 padding: 6vw 4vw;
 }
 
 .requirements-grid {
 grid-template-columns: 1fr;
 gap: 3vw;
 }
 
 .requirement-card {
 padding: 4vw;
 }
 }
*** End Patch



