* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Poppins',sans-serif; background:#0a0a1a; color:#eee; line-height:1.6; }
.container { max-width:1240px; margin:auto; padding:0 1rem; }

/* HEADER */
.header { position:fixed; top:0; width:100%; background:rgba(10,10,26,.95); backdrop-filter:blur(12px); z-index:1000; }
.nav { display:flex; justify-content:space-between; align-items:center; padding:.7rem 1rem; }
.nav-brand h1 { font-size:1.4rem; color:#00ff88; display:flex; align-items:center; gap:.4rem; }
.nav-menu { display:flex; gap:1.5rem; list-style:none; }
.nav-link { color:#fff; text-decoration:none; font-weight:500; transition:.3s; }
.nav-link:hover { color:#00ff88; }
.nav-toggle { display:none; flex-direction:column; gap:4px; cursor:pointer; }
.nav-toggle span { width:22px; height:2px; background:#fff; transition:.3s; }

/* HERO */
.hero { text-align:center; padding:130px 0 90px; }
.hero-title { font-size:2.8rem; margin-bottom:.6rem; }
.hero-title span { color:#00ff88; }
.hero p { font-size:1.1rem; max-width:700px; margin:auto auto 1.5rem; }
.cta-btn { background:#00ff88; color:#000; padding:.9rem 2rem; border-radius:50px; font-weight:600; text-decoration:none; transition:.3s; }
.cta-btn:hover { transform:scale(1.05); }

/* SECTION */
.section { padding:80px 0; }
.section-title { font-size:2.2rem; text-align:center; margin-bottom:1.5rem; color:#00ff88; }

/* SECTION BOX */
.section-box {
    background:rgba(255,255,255,.05);
    border-radius:20px;
    padding:2rem;
    backdrop-filter:blur(10px);
    border:1px solid rgba(0,255,136,.2);
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    gap:1.5rem;
    margin-top:1rem;
}

/* TOPIC CARD */
.topic-card {
    background:rgba(0,0,0,.3);
    border-radius:16px;
    padding:1.5rem;
    text-align:center;
    transition:.3s;
    border:1px solid rgba(0,255,136,.15);
}
.topic-card:hover { transform:translateY(-8px); box-shadow:0 10px 25px rgba(0,255,136,.2); }
.topic-card h3 { font-size:1.3rem; color:#00ff88; margin-bottom:.6rem; }
.topic-card p { font-size:.95rem; margin-bottom:1rem; color:#ccc; }
.topic-btn {
    background:#00ff88; color:#000; border:none; padding:.7rem 1.4rem;
    border-radius:50px; font-weight:600; cursor:pointer; transition:.3s;
}
.topic-btn:hover { background:#00cc70; }

/* MODAL */
.modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.8); justify-content:center; align-items:center; z-index:1100; padding:1rem; }
.modal-content { background:#1a1a2e; border-radius:16px; max-width:900px; width:100%; max-height:90vh; overflow-y:auto; padding:2rem; position:relative; box-shadow:0 0 40px rgba(0,255,136,.3); }
.close-btn { position:absolute; top:15px; right:20px; font-size:2rem; color:#fff; cursor:pointer; }
.modal-content h3 { color:#00ff88; text-align:center; margin-bottom:1.2rem; font-size:1.7rem; }
.article p, .article h4 { margin-bottom:1rem; }
.article h4 { color:#00ff88; font-size:1.3rem; margin-top:1.5rem; }

body.no-scroll { overflow:hidden; }

/* FOOTER */
.footer { background:rgba(0,0,0,.9); padding:1.5rem 0; text-align:center; font-size:.9rem; }

/* RESPONSIVE */
@media (max-width:768px) {
    .nav-menu { position:absolute; top:100%; left:0; width:100%; background:rgba(10,10,26,.98); flex-direction:column; padding:1rem 0; display:none; }
    .nav-menu.active { display:flex; }
    .nav-toggle { display:flex; }
    .hero { padding:110px 0 70px; }
    .hero-title { font-size:2.2rem; }
    .section { padding:60px 0; }
    .section-box { grid-template-columns:1fr; padding:1.5rem; }
}
@media (max-width:480px) {
    .hero-title { font-size:1.9rem; }
    .section-title { font-size:1.8rem; }
    .topic-card { padding:1.2rem; }
}