/* === Reset & Base === */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; color:#2d3748; line-height:1.7; background:#f8fafb; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; height:auto; }
ul { list-style:none; }
.container { max-width:1200px; margin:0 auto; padding:0 20px; }

/* === Header === */
.site-header {
    position:fixed; top:0; left:0; right:0; z-index:1000;
    background:rgba(6,182,212,0.95); backdrop-filter:blur(12px);
    box-shadow:0 2px 20px rgba(6,182,212,0.15);
}
.nav-container { max-width:1200px; margin:0 auto; padding:0 20px; display:flex; align-items:center; justify-content:space-between; height:64px; }
.nav-logo { display:flex; align-items:center; gap:10px; color:#fff; font-size:1.3rem; font-weight:700; }
.nav-logo img { border-radius:8px; }
.nav-menu { display:flex; gap:8px; }
.nav-menu a { color:rgba(255,255,255,0.85); padding:8px 16px; border-radius:8px; font-size:0.95rem; transition:all .3s; }
.nav-menu a:hover, .nav-menu a.active { color:#fff; background:rgba(255,255,255,0.15); }
.nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
.nav-toggle span { display:block; width:24px; height:2px; background:#fff; border-radius:2px; transition:all .3s; }

/* === Hero === */
.hero {
    padding:140px 20px 80px; text-align:center;
    background:linear-gradient(135deg, #0e7490 0%, #06b6d4 40%, #22d3ee 100%);
    color:#fff; position:relative; overflow:hidden;
}
.hero::before {
    content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%;
    background:radial-gradient(circle at 30% 50%, rgba(255,255,255,0.08) 0%, transparent 50%),
               radial-gradient(circle at 70% 30%, rgba(255,255,255,0.05) 0%, transparent 40%);
    animation:heroFloat 20s ease-in-out infinite;
}
@keyframes heroFloat { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-30px,20px)} }
.hero h1 { font-size:clamp(2rem,5vw,3.5rem); font-weight:800; margin-bottom:20px; position:relative; }
.hero h1 span { color:#f0fdfa; }
.hero p { font-size:clamp(1rem,2.5vw,1.25rem); max-width:700px; margin:0 auto 36px; opacity:0.92; position:relative; line-height:1.8; }
.hero-buttons { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; position:relative; }
.btn { display:inline-flex; align-items:center; gap:8px; padding:14px 32px; border-radius:12px; font-size:1rem; font-weight:600; transition:all .3s; border:none; cursor:pointer; }
.btn-primary { background:#fff; color:#0891b2; }
.btn-primary:hover { background:#f0fdfa; transform:translateY(-2px); box-shadow:0 8px 25px rgba(0,0,0,0.15); }
.btn-outline { background:transparent; color:#fff; border:2px solid rgba(255,255,255,0.6); }
.btn-outline:hover { background:rgba(255,255,255,0.15); border-color:#fff; }

/* === Sections === */
.section { padding:80px 20px; }
.section-title { text-align:center; margin-bottom:16px; font-size:clamp(1.5rem,3vw,2.2rem); color:#1e293b; }
.section-subtitle { text-align:center; color:#64748b; max-width:600px; margin:0 auto 48px; font-size:1.05rem; }
.section-alt { background:#fff; }

/* === Cards Grid === */
.cards-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:24px; max-width:1200px; margin:0 auto; }
.card {
    background:#fff; border-radius:16px; padding:28px; transition:all .3s;
    border:1px solid #e2e8f0; position:relative; overflow:hidden;
}
.card:hover { transform:translateY(-4px); box-shadow:0 12px 30px rgba(6,182,212,0.12); border-color:#06b6d4; }
.card-icon { font-size:2.2rem; margin-bottom:16px; display:block; }
.card h3 { font-size:1.15rem; color:#0f172a; margin-bottom:10px; }
.card p { color:#64748b; font-size:0.92rem; line-height:1.7; }

/* === Stats === */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:32px; max-width:900px; margin:0 auto; text-align:center; }
.stat-item h3 { font-size:2.5rem; color:#0891b2; font-weight:800; }
.stat-item p { color:#64748b; font-size:0.95rem; margin-top:4px; }

/* === Category Grid === */
.category-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px; max-width:1200px; margin:0 auto; }
.category-card {
    background:#fff; border-radius:16px; padding:24px; text-align:center;
    border:1px solid #e2e8f0; transition:all .3s; cursor:pointer;
}
.category-card:hover { transform:translateY(-4px); box-shadow:0 12px 30px rgba(6,182,212,0.12); border-color:#06b6d4; }
.category-card .cat-icon { font-size:2rem; margin-bottom:12px; }
.category-card h3 { font-size:1.05rem; color:#0f172a; margin-bottom:8px; }
.category-card p { color:#64748b; font-size:0.85rem; }

/* === CTA Section === */
.cta-section {
    text-align:center; padding:80px 20px;
    background:linear-gradient(135deg, #0e7490, #06b6d4);
    color:#fff;
}
.cta-section h2 { font-size:clamp(1.5rem,3vw,2.2rem); margin-bottom:16px; }
.cta-section p { font-size:1.1rem; opacity:0.9; max-width:600px; margin:0 auto 32px; }

/* === Page Hero === */
.page-hero {
    padding:120px 20px 60px; text-align:center;
    background:linear-gradient(135deg, #0e7490, #06b6d4);
    color:#fff;
}
.page-hero h1 { font-size:clamp(1.8rem,4vw,2.8rem); font-weight:800; margin-bottom:12px; }
.page-hero p { font-size:1.1rem; opacity:0.9; max-width:600px; margin:0 auto; }

/* === About === */
.about-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:32px; max-width:1200px; margin:0 auto; }
.about-card {
    background:#fff; border-radius:16px; padding:32px; text-align:center;
    border:1px solid #e2e8f0;
}
.about-card h3 { font-size:1.1rem; color:#0f172a; margin:16px 0 10px; }
.about-card p { color:#64748b; font-size:0.92rem; }

/* === Value Props === */
.value-list { max-width:800px; margin:0 auto; }
.value-item {
    display:flex; gap:20px; padding:24px 0;
    border-bottom:1px solid #e2e8f0;
}
.value-num {
    width:48px; height:48px; border-radius:12px;
    background:linear-gradient(135deg, #06b6d4, #22d3ee);
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:1.2rem; flex-shrink:0;
}
.value-item h3 { font-size:1.1rem; color:#0f172a; margin-bottom:6px; }
.value-item p { color:#64748b; font-size:0.92rem; }

/* === Review Cards === */
.review-card {
    background:#fff; border-radius:16px; padding:28px; border:1px solid #e2e8f0;
}
.review-card .review-product { color:#0891b2; font-weight:600; margin-bottom:12px; }
.review-card h3 { font-size:1.1rem; color:#0f172a; margin-bottom:12px; }
.review-card p { color:#475569; font-size:0.92rem; margin-bottom:16px; }
.review-score {
    display:inline-flex; align-items:center; gap:6px;
    background:#f0fdfa; color:#0891b2; padding:4px 12px;
    border-radius:20px; font-size:0.85rem; font-weight:700;
}

/* === Coming Soon Cards === */
.coming-card {
    background:#fff; border-radius:16px; padding:28px; border:1px solid #e2e8f0;
    position:relative; overflow:hidden;
}
.coming-card::before {
    content:'即将上架'; position:absolute; top:16px; right:-28px;
    background:linear-gradient(135deg,#f59e0b,#f97316); color:#fff;
    padding:4px 36px; font-size:0.75rem; font-weight:600;
    transform:rotate(45deg);
}
.coming-card h3 { font-size:1.15rem; color:#0f172a; margin-bottom:10px; }
.coming-card p { color:#64748b; font-size:0.92rem; margin-bottom:16px; }
.coming-date { color:#0891b2; font-size:0.85rem; font-weight:600; }

/* === Lab Process === */
.process-steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:24px; max-width:1000px; margin:0 auto; counter-reset:step; }
.process-step { text-align:center; padding:28px; counter-increment:step; }
.process-step::before {
    content:counter(step); display:block; width:56px; height:56px; margin:0 auto 16px;
    border-radius:50%; background:linear-gradient(135deg,#06b6d4,#22d3ee);
    color:#fff; font-size:1.4rem; font-weight:800; line-height:56px;
}
.process-step h3 { font-size:1.05rem; color:#0f172a; margin-bottom:8px; }
.process-step p { color:#64748b; font-size:0.88rem; }

/* === Contact Form === */
.contact-container { display:grid; grid-template-columns:1fr 1fr; gap:48px; max-width:1000px; margin:0 auto; }
.contact-form { display:flex; flex-direction:column; gap:16px; }
.contact-form label { font-size:0.9rem; color:#475569; font-weight:600; }
.contact-form input, .contact-form textarea, .contact-form select {
    padding:12px 16px; border:1px solid #e2e8f0; border-radius:10px;
    font-size:0.95rem; transition:border-color .3s; font-family:inherit;
}
.contact-form input:focus, .contact-form textarea:focus { outline:none; border-color:#06b6d4; box-shadow:0 0 0 3px rgba(6,182,212,0.1); }
.contact-form textarea { min-height:120px; resize:vertical; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.contact-info { display:flex; flex-direction:column; gap:24px; }
.contact-info-card {
    background:#fff; border-radius:16px; padding:24px; border:1px solid #e2e8f0;
}
.contact-info-card h3 { font-size:1.05rem; color:#0f172a; margin-bottom:8px; }
.contact-info-card p { color:#64748b; font-size:0.92rem; }

/* === Alert/Toast === */
.toast {
    position:fixed; top:80px; right:20px; padding:16px 24px;
    border-radius:12px; color:#fff; font-size:0.95rem;
    z-index:9999; transform:translateX(120%); transition:transform .4s;
}
.toast.show { transform:translateX(0); }
.toast.success { background:#10b981; }
.toast.error { background:#ef4444; }

/* === App Market Special === */
.app-hero {
    padding:120px 20px 60px; text-align:center;
    background:linear-gradient(135deg, #0e7490, #06b6d4);
    color:#fff;
}
.app-hero h1 { font-size:clamp(1.8rem,4vw,2.8rem); font-weight:800; margin-bottom:12px; }
.app-hero p { font-size:1.1rem; opacity:0.9; }

.filter-bar {
    display:flex; gap:12px; flex-wrap:wrap; justify-content:center;
    padding:32px 20px; max-width:1200px; margin:0 auto;
}
.filter-btn {
    padding:10px 20px; border-radius:25px; border:1px solid #e2e8f0;
    background:#fff; color:#475569; font-size:0.9rem; cursor:pointer;
    transition:all .3s;
}
.filter-btn:hover, .filter-btn.active { background:#06b6d4; color:#fff; border-color:#06b6d4; }

.product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:24px; padding:0 20px 80px; max-width:1200px; margin:0 auto; }
.product-card {
    background:#fff; border-radius:16px; overflow:hidden; border:1px solid #e2e8f0;
    transition:all .3s;
}
.product-card:hover { transform:translateY(-4px); box-shadow:0 12px 30px rgba(6,182,212,0.12); }
.product-card-body { padding:24px; }
.product-card h3 { font-size:1.1rem; color:#0f172a; margin-bottom:6px; }
.product-card .product-subtitle { color:#64748b; font-size:0.88rem; margin-bottom:12px; }
.product-card .product-desc { color:#475569; font-size:0.88rem; margin-bottom:16px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.product-card .product-meta { display:flex; justify-content:space-between; align-items:center; }
.product-price { color:#0891b2; font-size:1.2rem; font-weight:700; }
.product-price .original { color:#94a3b8; font-size:0.85rem; text-decoration:line-through; margin-left:8px; }
.product-platform { color:#94a3b8; font-size:0.82rem; }
.product-free { background:#f0fdfa; color:#10b981; padding:4px 12px; border-radius:20px; font-size:0.82rem; font-weight:600; }

/* === Responsive === */
@media(max-width:768px) {
    .nav-toggle { display:flex; }
    .nav-menu {
        display:none; position:absolute; top:64px; left:0; right:0;
        background:rgba(6,182,212,0.98); flex-direction:column;
        padding:16px; gap:4px;
    }
    .nav-menu.open { display:flex; }
    .nav-menu a { padding:12px 16px; border-radius:8px; }
    .hero { padding:120px 20px 60px; }
    .section { padding:60px 20px; }
    .cards-grid, .category-grid { grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
    .contact-container { grid-template-columns:1fr; }
    .form-row { grid-template-columns:1fr; }
    .product-grid { grid-template-columns:1fr; }
    .stats { grid-template-columns:repeat(2,1fr); }
}