:root {
    --neon-cyan: #00c2ff;
    --neon-green: #00ff94;
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
}

body { background: #06090f; color: #fff; font-family: 'Outfit', sans-serif; line-height: 1.8; margin: 0; }

.article-header { padding: 40px 5%; border-bottom: 1px solid var(--glass-border); display: flex; justify-content: space-between; align-items: center; }
.logo-box { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; font-weight: 800; }

.article-container { max-width: 800px; margin: 0 auto; padding: 60px 20px; }

.hero-container { width: 100%; max-height: 450px; border-radius: 32px; overflow: hidden; margin-bottom: 50px; border: 1px solid var(--glass-border); box-shadow: 0 20px 40px rgba(0,0,0,0.5); }
.hero-img { width: 100%; height: 100%; object-fit: cover; }

h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.1; margin-bottom: 30px; background: linear-gradient(to right, #fff, var(--neon-cyan)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
h2 { font-size: 1.8rem; margin-top: 50px; margin-bottom: 20px; color: var(--neon-cyan); font-weight: 800; }
p { margin-bottom: 25px; color: rgba(255,255,255,0.8); font-size: 1.15rem; font-weight: 300; }

.highlight-box { background: linear-gradient(135deg, rgba(0,194,255,0.1), rgba(0,255,148,0.1)); border: 1px solid var(--glass-border); padding: 35px; border-radius: 24px; margin: 50px 0; }
.highlight-box strong { color: var(--neon-green); display: block; margin-bottom: 10px; font-size: 1.2rem; }

.data-table { width: 100%; border-collapse: collapse; margin: 40px 0; background: var(--glass-bg); border-radius: 20px; overflow: hidden; border: 1px solid var(--glass-border); }
.data-table th, .data-table td { padding: 20px; text-align: left; border-bottom: 1px solid var(--glass-border); }
.data-table th { background: rgba(0, 194, 255, 0.1); color: var(--neon-cyan); font-weight: 800; }

.faq-section { margin-top: 80px; padding-top: 50px; border-top: 1px solid var(--glass-border); }
.faq-item { margin-bottom: 35px; background: var(--glass-bg); padding: 25px; border-radius: 20px; border: 1px solid var(--glass-border); }
.faq-question { font-weight: 800; color: var(--neon-green); margin-bottom: 12px; font-size: 1.2rem; }

.cta-card { text-align: center; background: linear-gradient(to bottom, var(--glass-bg), transparent); padding: 60px 40px; border-radius: 40px; border: 1px solid var(--glass-border); margin-top: 80px; }
.btn-premium { display: inline-block; padding: 18px 45px; background: var(--neon-cyan); color: #000; text-decoration: none; border-radius: 50px; font-weight: 800; font-size: 1.1rem; transition: 0.3s; box-shadow: 0 10px 30px rgba(0, 194, 255, 0.3); }
.btn-premium:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0, 194, 255, 0.5); }

.back-link { color: rgba(255,255,255,0.5); text-decoration: none; display: flex; align-items: center; gap: 8px; font-size: 0.9rem; margin-bottom: 30px; transition: 0.3s; }
.back-link:hover { color: var(--neon-cyan); }

@media (max-width: 600px) {
    .article-container { padding: 40px 20px; }
    h1 { font-size: 2.2rem; }
    .hero-container { max-height: 250px; }
}