* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'Segoe UI', 'Roboto', 'Microsoft YaHei', sans-serif;
    background: #020617;
    color: #e2e8f0;
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

:root {
    --brand-blue: #3b82f6;
    --brand-cyan: #67e8f9;
    --moon: #bae6fd;
    --bg-card: rgba(15, 23, 42, 0.78);
    --text-muted: #94a3b8;
}

h1, h2, h3, h4 { color: #fff; font-weight: 700; }

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5%;
    background: rgba(2, 6, 23, 0.88);
    backdrop-filter: blur(2px);
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(103, 232, 249, 0.18);
}
.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 0 14px var(--brand-cyan);
}
.nav-logo svg {
    width: 30px; height: 30px;
    fill: var(--moon);
    filter: drop-shadow(0 0 8px var(--brand-cyan));
}
.nav-links { display: flex; gap: 28px; align-items: center; font-size: 15px; font-weight: 500; }
.nav-links a { color: var(--text-muted); transition: .3s; }
.nav-links a:hover { color: #fff; text-shadow: 0 0 10px var(--brand-cyan); }
.btn-download-nav {
    padding: 8px 22px !important;
    background: linear-gradient(135deg, #2563eb, #22d3ee);
    color: #fff !important;
    border-radius: 50px;
    font-weight: 600;
    box-shadow: 0 0 16px rgba(103, 232, 249, .4);
}
.btn-download-nav:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(103, 232, 249, .55); }

.hero-wrapper {
    position: relative;
    min-height: 110vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 70px 5% 120px;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 20%, rgba(103, 232, 249, .18) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 100%, #0f172a 0%, #020617 65%);
}

.hero-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent),
        radial-gradient(1px 1px at 28% 35%, #bae6fd, transparent),
        radial-gradient(1.5px 1.5px at 48% 12%, #fff, transparent),
        radial-gradient(1px 1px at 66% 28%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 82% 16%, #bae6fd, transparent),
        radial-gradient(1px 1px at 18% 62%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 74% 70%, #fff, transparent);
    opacity: .65;
    pointer-events: none;
    z-index: 0;
}

.moon-stage {
    position: absolute;
    top: 28%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(520px, 88vw);
    height: min(520px, 88vw);
    z-index: 1;
    pointer-events: none;
}

.moon-glow {
    position: absolute;
    inset: -8%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(186, 230, 253, .45), rgba(59, 130, 246, .18), transparent 70%);
    filter: blur(2px);
    animation: moonPulse 6s ease-in-out infinite alternate;
}

.crystal-plane {
    position: absolute;
    inset: 12%;
    width: 76%;
    height: 76%;
    fill: url(#crystalFill);
    filter:
        drop-shadow(0 0 20px rgba(103, 232, 249, .8))
        drop-shadow(0 0 48px rgba(59, 130, 246, .55));
    animation: crystalFloat 7s ease-in-out infinite alternate;
    opacity: .92;
}

.moon-beams {
    position: absolute;
    inset: 0;
    background: conic-gradient(from 0deg, transparent 0deg, rgba(103, 232, 249, .08) 20deg, transparent 40deg, rgba(186, 230, 253, .06) 80deg, transparent 110deg, rgba(103, 232, 249, .07) 180deg, transparent 220deg, rgba(186, 230, 253, .05) 280deg, transparent 320deg);
    border-radius: 50%;
    animation: beamSpin 40s linear infinite;
    opacity: .7;
}

@keyframes moonPulse {
    from { opacity: .55; transform: scale(.96); }
    to { opacity: 1; transform: scale(1.06); }
}
@keyframes crystalFloat {
    from { transform: translateY(6px) rotate(-3deg); }
    to { transform: translateY(-10px) rotate(3deg); }
}
@keyframes beamSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.hero-content {
    z-index: 10;
    max-width: 900px;
    text-align: center;
    position: relative;
    background: rgba(2, 6, 23, .62);
    padding: 48px 56px;
    border-radius: 28px;
    border: 1px solid rgba(103, 232, 249, .28);
    backdrop-filter: blur(2px);
    box-shadow: 0 28px 60px rgba(0,0,0,.85), inset 0 0 40px rgba(103, 232, 249, .08);
    margin-top: 200px;
}
.hero-title {
    font-size: 26px;
    margin-bottom: 18px;
    line-height: 1.3;
    background: linear-gradient(90deg, #fff, #e0f2fe, #67e8f9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero p {
    font-size: 18px;
    color: #cbd5e1;
    margin: 0 auto 32px;
    max-width: 720px;
}
.hero-buttons { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px; }

.btn-primary, .btn-outline, .btn-dl-card, .btn-more {
    display: inline-block;
    padding: 14px 32px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 16px;
    transition: .3s;
}
.btn-primary {
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #22d3ee);
    box-shadow: 0 10px 22px rgba(103, 232, 249, .35);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(103, 232, 249, .5); }
.btn-outline {
    color: #fff;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(103, 232, 249, .4);
}
.btn-outline:hover {
    transform: translateY(-3px);
    background: rgba(103, 232, 249, .12);
    box-shadow: 0 10px 20px rgba(103, 232, 249, .25);
}

.hero-images {
    display: flex;
    justify-content: center;
    gap: 20px;
    align-items: flex-end;
    margin-top: 36px;
    z-index: 20;
}
.hero-images img {
    max-width: 28%;
    border-radius: 16px;
    border: 1px solid rgba(103, 232, 249, .25);
    box-shadow: 0 18px 40px rgba(0,0,0,.8);
    transition: .4s;
}
.hero-images img:nth-child(2) {
    transform: translateY(-20px);
    box-shadow: 0 28px 48px rgba(0,0,0,.9), 0 0 36px rgba(103, 232, 249, .28);
}
.hero-images img:hover {
    transform: translateY(-30px) scale(1.05);
    z-index: 5;
}

.features {
    padding: 110px 5%;
    background: #020617;
    border-top: 1px solid rgba(255,255,255,.05);
}
.section-title {
    text-align: center;
    font-size: 36px;
    margin-bottom: 56px;
}
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}
.feature-card {
    padding: 36px 28px;
    background: var(--bg-card);
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.06);
    transition: .3s;
    position: relative;
    overflow: hidden;
}
.feature-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--brand-cyan), transparent);
    opacity: 0;
    transition: .3s;
}
.feature-card:hover {
    transform: translateY(-5px);
    border-color: rgba(103, 232, 249, .35);
    box-shadow: 0 16px 32px rgba(0,0,0,.7);
}
.feature-card:hover::before { opacity: 1; }
.feature-card h3 { font-size: 22px; margin-bottom: 12px; }
.feature-card p { color: var(--text-muted); font-size: 15px; }

.blog { padding: 100px 5%; background: #f0f9ff; color: #0f172a; }
.blog .section-title { color: #0f172a; }
.blog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 36px;
    max-width: 1100px;
    margin: 0 auto;
}
.blog-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.05);
    box-shadow: 0 10px 28px rgba(0,0,0,.06);
    transition: .3s;
}
.blog-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 36px rgba(103, 232, 249, .15);
}
.blog-card img { width: 100%; height: 250px; object-fit: cover; }
.blog-content { padding: 32px; }
.blog-date { display: inline-block; margin-bottom: 12px; font-size: 13px; color: #0284c7; font-weight: 600; }
.blog-content h3 { font-size: 22px; margin-bottom: 12px; color: #0f172a; }
.blog-content p { color: #64748b; font-size: 15px; }
.btn-more {
    display: block;
    width: 240px;
    margin: 56px auto 0;
    text-align: center;
    color: #0284c7;
    border: 2px solid #0284c7;
    background: #fff;
}
.btn-more:hover { background: #0284c7; color: #fff; }

.faq {
    padding: 90px 5%;
    max-width: 900px;
    margin: 40px auto 80px;
    background: #0f172a;
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,.05);
    box-shadow: 0 20px 48px rgba(0,0,0,.75);
}
.faq-item {
    background: rgba(255,255,255,.02);
    margin-bottom: 14px;
    padding: 24px 28px;
    border-radius: 14px;
    border-left: 4px solid var(--brand-cyan);
}
.faq-item:hover { background: rgba(255,255,255,.05); }
.faq-question { font-size: 18px; font-weight: 600; margin-bottom: 10px; }
.faq-answer { color: var(--text-muted); font-size: 15px; line-height: 1.8; }

.footer {
    background: #01040f;
    padding: 80px 5% 30px;
    color: #94a3b8;
    border-top: 1px solid rgba(255,255,255,.05);
}
.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 36px;
    max-width: 1200px;
    margin: 0 auto 48px;
}
.footer-col h4 { color: #fff; margin-bottom: 22px; font-size: 16px; }
.footer-col ul li { margin-bottom: 14px; }
.footer-col ul li a { color: #64748b; font-size: 14px; }
.footer-col ul li a:hover { color: var(--brand-cyan); }
.footer-bottom {
    text-align: center;
    padding-top: 28px;
    border-top: 1px solid rgba(255,255,255,.05);
    font-size: 13px;
}

.download-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 28px;
    max-width: 1100px;
    margin: 56px auto;
    padding: 0 5%;
}
.download-card {
    padding: 38px 28px;
    text-align: center;
    background: var(--bg-card);
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.06);
    transition: .3s;
}
.download-card:hover {
    transform: translateY(-8px);
    border-color: rgba(103, 232, 249, .4);
    box-shadow: 0 16px 32px rgba(0,0,0,.7), 0 0 28px rgba(103, 232, 249, .15);
}
.download-card h3 { font-size: 22px; margin-bottom: 12px; }
.download-card p { color: var(--text-muted); font-size: 14px; margin-bottom: 26px; }
.btn-dl-card {
    color: #fff;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.2);
}
.btn-dl-card:hover {
    background: linear-gradient(135deg, #2563eb, #22d3ee);
    border-color: transparent;
}

.page-header {
    padding: 100px 5% 80px;
    text-align: center;
    background: #0b1220;
    position: relative;
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(103, 232, 249, .16), transparent 55%);
    pointer-events: none;
}
.page-header-content { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.page-header h1 { font-size: 40px; margin-bottom: 16px; }
.page-header p { font-size: 18px; color: var(--text-muted); }

@media (max-width: 900px) {
    .features-grid, .blog-grid, .footer-grid { grid-template-columns: 1fr; }
    .hero-title { font-size: 22px; }
    .hero-content { margin-top: 140px; padding: 28px 22px; }
    .nav-links { gap: 12px; font-size: 13px; flex-wrap: wrap; justify-content: flex-end; }
}

/* === 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;
    }
}