* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Rajdhani',sans-serif; background:#000; color:#e0e0ff; overflow-x:hidden; }
.poster-container { width:100%; min-height:100vh; margin:0 auto; position:relative; overflow:hidden; display:flex; flex-direction:column; }
.grid-overlay { position:absolute; top:0; left:0; width:100%; height:100%; background-image:linear-gradient(rgba(0,255,255,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,255,0.05) 1px,transparent 1px); background-size:40px 40px; z-index:2; }
.glow-circle { position:absolute; border-radius:50%; filter:blur(60px); z-index:3; }
.glow-1 { top:10%; left:20%; width:300px; height:300px; background:radial-gradient(circle,rgba(138,43,226,0.4) 0%,transparent 70%); }
.glow-2 { top:50%; right:15%; width:250px; height:250px; background:radial-gradient(circle,rgba(0,191,255,0.4) 0%,transparent 70%); }
.glow-3 { bottom:20%; left:30%; width:200px; height:200px; background:radial-gradient(circle,rgba(255,20,147,0.4) 0%,transparent 70%); }
.content { position:relative; z-index:10; padding:2rem; display:flex; flex-direction:column; height:100%; flex-grow:1; }
.title { font-family:'Orbitron',sans-serif; font-size:clamp(1.5rem,5vw,2.625rem); font-weight:900; text-align:center; margin-bottom:0.8rem; text-transform:uppercase; letter-spacing:2px; background:linear-gradient(90deg,#00ffff,#ff00ff); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 15px rgba(0,255,255,0.5); }
.subtitle-container { display:flex; align-items:center; justify-content:center; gap:1.2rem; margin-bottom:2rem; flex-wrap:wrap; }
.subtitle { font-size:clamp(0.875rem,2vw,1.125rem); color:#a0a0ff; font-weight:500; }
.about-link { color:#a0a0ff; font-family:'Orbitron',sans-serif; font-size:1rem; cursor:pointer; transition:color 0.3s; }
.about-link:hover { color:#00ffff; text-shadow:0 0 8px #00ffff; }
.section-label { font-family:'Orbitron',sans-serif; font-size:clamp(1rem,3vw,1.25rem); font-weight:700; text-align:center; margin:1rem 0; color:#00ffff; text-transform:uppercase; }
.topics-container { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1.25rem; margin-bottom:1.5rem; max-width:800px; margin-left:auto; margin-right:auto; }
.topic-card { background:rgba(20,20,40,0.7); border:1px solid rgba(100,100,255,0.3); border-radius:0.625rem; padding:0.9375rem; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; overflow:hidden; transition:all 0.3s ease; backdrop-filter:blur(5px); cursor:pointer; text-decoration:none; aspect-ratio:1/1; min-height:120px; opacity:1; }
.topic-card:hover { transform:translateY(-5px); box-shadow:0 10px 20px rgba(0,0,0,0.3); border-color:rgba(100,100,255,0.8); }
.topic-card::before { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(45deg,transparent,rgba(255,255,255,0.1),transparent); transform:translateX(-100%); transition:transform 0.6s; }
.topic-card:hover::before { transform:translateX(100%); }
.topic-icon { font-size:clamp(1.5rem,4vw,2.25rem); margin-bottom:0.625rem; }
.topic-title { font-family:'Orbitron',sans-serif; font-size:clamp(0.75rem,2vw,0.875rem); font-weight:700; text-align:center; text-transform:uppercase; line-height:1.2; }
.topic-code { font-size:clamp(0.625rem,1.5vw,0.625rem); margin-top:0.3125rem; }
.a1,.a2,.a3,.a4,.b1,.b2,.b3,.b4 { border-color:rgba(100,100,255,0.3); box-shadow:0 0 15px rgba(100,100,255,0.3); }
.a1 .topic-icon,.a1 .topic-code { color:#00ffff; }
.a2 .topic-icon,.a2 .topic-code { color:#ff00ff; }
.a3 .topic-icon,.a3 .topic-code { color:#ff69b4; }
.a4 .topic-icon,.a4 .topic-code { color:#00bfff; }
.b1 .topic-icon,.b1 .topic-code { color:#32cd32; }
.b2 .topic-icon,.b2 .topic-code { color:#ffa500; }
.b3 .topic-icon,.b3 .topic-code { color:#ffd700; }
.b4 .topic-icon,.b4 .topic-code { color:#dc143c; }
.connections { position:absolute; top:0; left:0; width:100%; height:100%; z-index:5; pointer-events:none; }
.connection-line { position:absolute; background:linear-gradient(90deg,transparent,rgba(0,255,255,0.7),transparent); height:2px; transform-origin:left center; z-index:5; }
.footer { margin-top:auto; text-align:center; font-size:clamp(0.75rem,2vw,0.875rem); color:#8080ff; padding:1.25rem 0; }
.highlight { font-weight:700; }
.circuit-lines { position:absolute; top:0; left:0; width:100%; height:100%; z-index:4; pointer-events:none; opacity:0.3; }
.circuit-line { position:absolute; height:1px; }
.circuit-dot { position:absolute; width:3px; height:3px; border-radius:50%; }
.glitch { position:relative; }
.glitch::before,.glitch::after { content:attr(data-text); position:absolute; top:0; left:0; width:100%; height:100%; }
.glitch::before { animation:glitch-anim 2s infinite linear alternate-reverse; color:#00ffff; z-index:-1; }
.glitch::after { animation:glitch-anim2 1s infinite linear alternate-reverse; color:#ff00ff; z-index:-2; }
@keyframes glitch-anim { 0%{clip:rect(42px,9999px,44px,0)} 5%{clip:rect(12px,9999px,59px,0)} 10%{clip:rect(48px,9999px,29px,0)} 15%{clip:rect(42px,9999px,73px,0)} 20%{clip:rect(63px,9999px,27px,0)} 25%{clip:rect(34px,9999px,55px,0)} 30%{clip:rect(86px,9999px,73px,0)} 35%{clip:rect(20px,9999px,20px,0)} 40%{clip:rect(26px,9999px,60px,0)} 45%{clip:rect(25px,9999px,66px,0)} 50%{clip:rect(57px,9999px,98px,0)} 55%{clip:rect(5px,9999px,46px,0)} 60%{clip:rect(82px,9999px,31px,0)} 65%{clip:rect(54px,9999px,27px,0)} 70%{clip:rect(28px,9999px,99px,0)} 75%{clip:rect(45px,9999px,69px,0)} 80%{clip:rect(23px,9999px,85px,0)} 85%{clip:rect(54px,9999px,84px,0)} 90%{clip:rect(45px,9999px,82px,0)} 95%{clip:rect(31px,9999px,63px,0)} 100%{clip:rect(91px,9999px,91px,0)} }
@keyframes glitch-anim2 { 0%{clip:rect(65px,9999px,100px,0)} 25%{clip:rect(20px,9999px,66px,0)} 50%{clip:rect(79px,9999px,42px,0)} 75%{clip:rect(92px,9999px,23px,0)} 100%{clip:rect(3px,9999px,10px,0)} }

.modal-overlay { position:fixed; inset:0; background:transparent; display:none; align-items:center; justify-content:center; z-index:30; pointer-events:none; }
.modal-content { background:rgba(15,15,35,0.92); border:1px solid rgba(0,255,255,0.4); border-radius:12px; padding:2rem; max-width:420px; width:90%; text-align:center; box-shadow:0 0 40px rgba(0,255,255,0.25); transform:scale(0.5); opacity:0; transition:all 0.8s cubic-bezier(0.25,0.46,0.45,0.94); pointer-events:auto; }
.modal-content.show { transform:scale(1); opacity:1; }
.close-btn { position:absolute; top:0.8rem; right:1.2rem; font-size:1.6rem; color:#a0a0ff; cursor:pointer; transition:all 0.3s; }
.close-btn:hover { color:#ff3366; transform:rotate(90deg); }
.email-link { color:#00ffff; text-decoration:underline; }
.email-link:hover { color:#ff69b4; }

.final-exams-link { position:fixed; bottom:2rem; left:50%; transform:translateX(-50%); font-family:'Orbitron',sans-serif; font-size:clamp(0.9rem,2vw,1.1rem); font-weight:700; text-transform:uppercase; letter-spacing:2px; background:linear-gradient(90deg,#00ffff,#ff00ff,#00ffff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; text-shadow:0 0 12px #00ffff,0 0 24px #ff00ff; padding:0.8rem 1.6rem; border:none; border-radius:9999px; backdrop-filter:blur(6px); box-shadow:0 0 30px rgba(0,255,255,0.4); z-index:25; cursor:pointer; transition:all 0.4s ease; text-align:center; white-space:nowrap; }
.final-exams-link:hover { transform:translateX(-50%) scale(1.08); box-shadow:0 0 50px rgba(0,255,255,0.6); }
.final-exams-link.glitch { position:relative; }
.final-exams-link.glitch::before, .final-exams-link.glitch::after { content:"I Need The Current Syllabus - Final Exams 2026"; position:absolute; top:0; left:0; width:100%; height:100%; background:transparent; pointer-events:none; }
.final-exams-link.glitch::before { animation:glitch-anim 2.5s infinite linear alternate-reverse; color:#00ffff; z-index:-1; }
.final-exams-link.glitch::after { animation:glitch-anim2 1.8s infinite linear alternate-reverse; color:#ff00ff; z-index:-2; }

@media (max-width:768px) { .content { padding:1rem; } .title { margin-bottom:1rem; } .subtitle-container { flex-direction:column; gap:0.75rem; } .about-link { font-size:0.95rem; } }
@media (max-width:480px) { .topics-container { grid-template-columns:repeat(2,1fr); gap:0.75rem; } .topic-card { min-height:90px; padding:0.5rem; } .topic-icon { font-size:1.5rem; margin-bottom:0.25rem; } .topic-title { font-size:0.7rem; } .topic-code { font-size:0.6rem; } }