/* Reset & Base */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; background: #ffb6ff; background: linear-gradient(135deg, #ffb6ff 0%, #b3e5fc 100%); color: #333; line-height: 1.6; min-height: 100vh; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* Vaporwave Theme Variables */
:root {
    --vw-pink: #ff71ce;
    --vw-blue: #01cdfe;
    --vw-purple: #b967ff;
    --vw-green: #05ffa1;
    --vw-yellow: #b9f2ff;
    --dark-bg: #1a1a2e;
    --card-bg: rgba(255, 255, 255, 0.85);
}

/* Navigation */
.navbar { display: flex; justify-content: space-between; align-items: center; padding: 20px 5%; background: rgba(255, 255, 255, 0.7); border-bottom: 2px solid var(--vw-pink); position: sticky; top: 0; z-index: 100; backdrop-filter: blur(2px); box-shadow: 0 4px 15px rgba(255, 113, 206, 0.2); }
.nav-logo { font-size: 26px; font-weight: 900; color: var(--vw-purple); text-shadow: 2px 2px 0px var(--vw-blue); display: flex; align-items: center; gap: 10px; font-style: italic; letter-spacing: 2px; }
.nav-links { display: flex; gap: 30px; align-items: center; font-weight: bold; }
.nav-links a { font-size: 16px; transition: all 0.3s; color: #555; }
.nav-links a:hover { color: var(--vw-pink); text-shadow: 1px 1px 0px var(--vw-blue); }
.btn-download-nav { padding: 8px 25px; background: linear-gradient(45deg, var(--vw-pink), var(--vw-purple)); border-radius: 25px; color: #fff !important; box-shadow: 0 4px 15px rgba(255, 113, 206, 0.4); border: 2px solid #fff; transition: transform 0.3s; }
.btn-download-nav:hover { transform: scale(1.05); text-shadow: none !important; }

/* Hero Section */
.hero { position: relative; padding: 120px 5%; text-align: center; overflow: hidden; min-height: 85vh; display: flex; flex-direction: column; justify-content: center; align-items: center; background: url('data:image/svg+xml;utf8,<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h40v40H0V0zm20 20h20v20H20V20zM0 20h20v20H0V20z" fill="rgba(255,255,255,0.2)" fill-rule="evenodd"/></svg>'); }
.statue-bg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; z-index: -1; opacity: 0.15; background: repeating-linear-gradient(0deg, transparent, transparent 2px, var(--vw-blue) 2px, var(--vw-blue) 4px); }
.hero-content { z-index: 1; max-width: 800px; margin: 0 auto; position: relative; background: rgba(255, 255, 255, 0.6); padding: 50px; border-radius: 20px; border: 3px solid var(--vw-blue); box-shadow: 10px 10px 0px var(--vw-pink); backdrop-filter: blur(2px); }
.hero h1 { font-size: 52px; margin-bottom: 20px; color: var(--vw-purple); text-shadow: 3px 3px 0px var(--vw-blue), -1px -1px 0px var(--vw-pink); font-style: italic; }
.hero p { font-size: 20px; margin-bottom: 40px; color: #444; font-weight: bold; }
.hero-buttons { display: flex; gap: 20px; justify-content: center; margin-bottom: 20px; flex-wrap: wrap; }
.btn-vw { padding: 15px 40px; font-size: 18px; font-weight: 900; border: 3px solid var(--vw-blue); border-radius: 0; color: #fff; background: var(--vw-pink); box-shadow: 5px 5px 0px var(--vw-blue); transition: all 0.2s; text-transform: uppercase; letter-spacing: 1px; }
.btn-vw:hover { transform: translate(3px, 3px); box-shadow: 2px 2px 0px var(--vw-blue); background: var(--vw-purple); }
.btn-pc { background: var(--vw-blue); border-color: var(--vw-pink); box-shadow: 5px 5px 0px var(--vw-pink); }
.btn-pc:hover { box-shadow: 2px 2px 0px var(--vw-pink); background: var(--vw-green); color: #000; }
.hero-images { display: flex; justify-content: center; gap: 30px; margin-top: 60px; z-index: 1; }
.hero-images img { max-width: 28%; border-radius: 0; box-shadow: 8px 8px 0px var(--vw-purple); border: 4px solid #fff; object-fit: cover; filter: sepia(0.2) hue-rotate(-20deg) saturate(1.5); transition: transform 0.3s; }
.hero-images img:hover { transform: scale(1.05); }

/* Features Section */
.features { padding: 100px 5%; background: var(--dark-bg); color: #fff; position: relative; }
.features::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 10px; background: linear-gradient(90deg, var(--vw-pink), var(--vw-blue), var(--vw-purple), var(--vw-green)); }
.section-title { text-align: center; font-size: 42px; margin-bottom: 60px; color: var(--vw-green); text-shadow: 3px 3px 0px var(--vw-purple); font-style: italic; letter-spacing: 2px; }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 1200px; margin: 0 auto; }
.feature-card { background: rgba(255, 255, 255, 0.05); padding: 40px 30px; border: 2px solid var(--vw-pink); transition: all 0.3s; text-align: center; position: relative; overflow: hidden; }
.feature-card::after { content: ''; position: absolute; bottom: 0; right: 0; width: 30px; height: 30px; background: var(--vw-blue); clip-path: polygon(100% 0, 0% 100%, 100% 100%); }
.feature-card:hover { transform: translateY(-10px); background: rgba(255, 255, 255, 0.1); box-shadow: 0 10px 30px rgba(255, 113, 206, 0.3); border-color: var(--vw-blue); }
.feature-card h3 { font-size: 24px; margin-bottom: 15px; color: var(--vw-pink); text-shadow: 1px 1px 0px #000; }
.feature-card p { color: #ddd; font-size: 16px; }

/* Blog Section */
.blog { padding: 100px 5%; background: #f0f8ff; background-image: radial-gradient(var(--vw-pink) 1px, transparent 1px); background-size: 30px 30px; }
.blog .section-title { color: var(--vw-purple); text-shadow: 3px 3px 0px #fff; }
.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 50px; max-width: 1200px; margin: 0 auto; }
.blog-card { background: #fff; border: 3px solid var(--vw-blue); box-shadow: 10px 10px 0px var(--vw-pink); display: flex; flex-direction: column; transition: transform 0.3s; }
.blog-card:hover { transform: translate(-5px, -5px); box-shadow: 15px 15px 0px var(--vw-pink); }
.blog-card img { width: 100%; height: 280px; object-fit: cover; border-bottom: 3px solid var(--vw-blue); filter: contrast(1.2) saturate(1.2); }
.blog-content { padding: 30px; }
.blog-date { display: inline-block; background: var(--vw-yellow); color: #000; padding: 5px 15px; font-weight: bold; font-size: 14px; margin-bottom: 15px; border: 2px solid #000; }
.blog-content h3 { font-size: 22px; margin-bottom: 15px; color: var(--vw-purple); }
.blog-content p { color: #666; margin-bottom: 20px; }
.btn-more { display: block; width: 220px; margin: 60px auto 0; text-align: center; padding: 15px; border: 3px solid var(--vw-purple); background: #fff; color: var(--vw-purple); font-weight: 900; font-size: 18px; box-shadow: 6px 6px 0px var(--vw-blue); transition: all 0.2s; }
.btn-more:hover { background: var(--vw-purple); color: #fff; transform: translate(2px, 2px); box-shadow: 4px 4px 0px var(--vw-blue); }

/* FAQ Section */
.faq { padding: 100px 5%; max-width: 900px; margin: 0 auto; }
.faq-item { background: #fff; margin-bottom: 25px; border: 3px solid var(--vw-purple); box-shadow: 6px 6px 0px var(--vw-blue); padding: 30px; transition: all 0.3s; }
.faq-item:hover { transform: translateX(5px); box-shadow: 8px 8px 0px var(--vw-pink); }
.faq-question { font-size: 20px; font-weight: 900; color: var(--vw-pink); margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
.faq-question::before { content: '▶'; color: var(--vw-blue); }
.faq-answer { color: #555; line-height: 1.8; font-size: 16px; padding-left: 25px; border-left: 3px solid var(--vw-yellow); }

/* Footer */
.footer { background: var(--dark-bg); padding: 80px 5% 30px; color: #fff; border-top: 5px solid var(--vw-pink); position: relative; overflow: hidden; }
.footer::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.03) 10px, rgba(255,255,255,0.03) 20px); pointer-events: none; }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 50px; max-width: 1200px; margin: 0 auto 50px; position: relative; z-index: 1; }
.footer-col h4 { font-size: 20px; color: var(--vw-green); margin-bottom: 25px; text-transform: uppercase; letter-spacing: 1px; text-shadow: 2px 2px 0px #000; }
.footer-col ul li { margin-bottom: 15px; }
.footer-col ul li a { color: #bbb; transition: color 0.3s; font-weight: bold; }
.footer-col ul li a:hover { color: var(--vw-pink); padding-left: 5px; }
.footer-bottom { text-align: center; padding-top: 30px; border-top: 2px dashed rgba(255,255,255,0.2); color: #888; font-size: 14px; position: relative; z-index: 1; font-family: monospace; }

/* Page specific headers */
.page-header { padding: 120px 5% 80px; text-align: center; background: var(--dark-bg); border-bottom: 5px solid var(--vw-blue); position: relative; }
.page-header::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 30px; background: repeating-linear-gradient(-45deg, var(--vw-pink), var(--vw-pink) 10px, var(--vw-purple) 10px, var(--vw-purple) 20px); }
.page-header h1 { font-size: 48px; color: var(--vw-green); margin-bottom: 20px; text-shadow: 3px 3px 0px var(--vw-pink); font-style: italic; }
.page-header p { color: #fff; font-size: 20px; font-weight: bold; }

/* Download Page Grid */
.download-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; max-width: 1100px; margin: 80px auto; padding: 0 5%; }
.download-card { background: #fff; border: 4px solid #000; padding: 50px 30px; text-align: center; transition: all 0.3s; box-shadow: 12px 12px 0px var(--vw-blue); position: relative; }
.download-card::before { content: ''; position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; border: 2px dashed #ccc; pointer-events: none; }
.download-card:hover { transform: translate(-5px, -5px); box-shadow: 17px 17px 0px var(--vw-pink); }
.download-card h3 { color: var(--vw-purple); font-size: 28px; margin-bottom: 20px; font-weight: 900; }
.download-card p { color: #666; margin-bottom: 35px; font-weight: bold; }
.download-card .btn-vw { display: inline-block; padding: 12px 35px; font-size: 16px; }

/* === perf: reduce motion & lower GPU cost === */
.feature-card,
.blog-card,
.hero-content,
.glass-panel,
.pearl-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.navbar {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* perf: limit decorative infinite layers on mid/low-end devices */
@media (max-width: 768px) {
    .bubble:nth-child(n+3),
    .tiny-plane:nth-child(n+3),
    .bg-shard:nth-child(n+4),
    .orb:nth-child(n+2) {
        display: none !important;
    }
}