/*
Theme Name: MAGHUB Dynamic
Author: MAGHUB
Description: Dynamic WordPress theme with categories, posts, thumbnails, quiz support and automatic front page sections.
Version: 2.0
Text Domain: maghub
*/

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Arial,Helvetica,sans-serif;background:#020406;color:#fff;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 18% 20%,rgba(170,255,0,.22),transparent 28%),radial-gradient(circle at 85% 18%,rgba(0,145,255,.22),transparent 30%),linear-gradient(120deg,#020406,#07121d 50%,#020406);z-index:-2}
body:after{content:"";position:fixed;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:42px 42px;opacity:.32;z-index:-1}
a{color:inherit;text-decoration:none}
.navbar{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 38px;background:rgba(0,0,0,.78);border-bottom:1px solid rgba(0,170,255,.35);position:sticky;top:0;z-index:20;backdrop-filter:blur(12px)}
.logo{font-size:36px;font-weight:1000;font-style:italic;letter-spacing:-2px;text-decoration:none;text-shadow:0 0 18px #9dff00}
.logo .mag{color:white}.logo .hub{color:#aaff00}
.menu{display:flex;gap:28px;list-style:none;font-weight:900;text-transform:uppercase;font-size:14px}
.menu a{color:white;text-decoration:none;transition:.25s}.menu a:hover,.menu .current-menu-item a{color:#aaff00;text-shadow:0 0 12px #aaff00}
.hero{min-height:520px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;padding:50px 7% 30px;position:relative;overflow:hidden}
.hero:before{content:"⚡";position:absolute;font-size:360px;color:rgba(170,255,0,.08);left:8%;top:8%;transform:rotate(-15deg)}
.big-brand{position:relative;padding:50px 20px}.mark{width:170px;height:120px;margin-left:120px;clip-path:polygon(10% 100%,25% 0,50% 45%,75% 0,90% 100%,65% 100%,60% 42%,50% 70%,40% 42%,35% 100%);background:linear-gradient(90deg,#aaff00,#00aaff);box-shadow:0 0 30px #00aaff}
.brand-text{font-size:clamp(70px,10vw,155px);font-weight:1000;font-style:italic;letter-spacing:-8px;line-height:.82;text-transform:uppercase;filter:drop-shadow(0 0 25px rgba(170,255,0,.45))}
.brand-text .mag{color:#f3f3f3;text-shadow:8px 8px 0 #111}.brand-text .hub{color:#aaff00;text-shadow:8px 8px 0 #102400}
.paint{position:absolute;inset:auto 0 35px 20px;height:90px;background:linear-gradient(90deg,rgba(170,255,0,.65),rgba(0,170,255,.45),transparent);clip-path:polygon(0 50%,18% 10%,25% 62%,42% 20%,60% 80%,80% 35%,100% 60%,100% 100%,0 100%);opacity:.7;z-index:-1}
.hero-content h1{font-size:clamp(44px,5.4vw,86px);font-style:italic;font-weight:1000;line-height:.94;text-transform:uppercase}.hero-content h1 span{color:#aaff00;text-shadow:0 0 18px #aaff00}
.hero-content h2{margin-top:22px;font-size:34px;font-style:italic;text-transform:uppercase}
.features{display:flex;gap:30px;margin:26px 0;font-weight:900;text-transform:uppercase;flex-wrap:wrap}.features b{color:#aaff00;font-size:24px}
.buttons{display:flex;gap:14px;flex-wrap:wrap}.btn{border:1px solid #00aaff;padding:16px 38px;color:white;text-decoration:none;font-weight:1000;font-style:italic;text-transform:uppercase;border-radius:6px;background:rgba(0,0,0,.55);box-shadow:0 0 15px rgba(0,170,255,.22)}
.btn.primary{background:linear-gradient(135deg,#d6ff00,#8fff00);color:black;border:0;box-shadow:0 0 28px rgba(170,255,0,.55)}
.section{padding:0 7% 42px}.section-title{font-size:30px;font-weight:1000;font-style:italic;margin:16px 0 18px;text-transform:uppercase}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.cards.three{grid-template-columns:repeat(3,1fr)}
.card{min-height:210px;padding:22px;border:1px solid rgba(0,170,255,.45);border-radius:12px;background:radial-gradient(circle at 75% 50%,rgba(0,170,255,.22),transparent 34%),linear-gradient(135deg,rgba(10,18,26,.95),rgba(0,0,0,.88));box-shadow:inset 0 0 20px rgba(0,170,255,.06),0 0 16px rgba(0,170,255,.14);position:relative;overflow:hidden;transition:.25s;display:block}
.card:hover{transform:translateY(-6px);border-color:#aaff00;box-shadow:0 0 24px rgba(170,255,0,.25)}
.card:after{content:attr(data-icon);position:absolute;right:18px;bottom:8px;font-size:78px;opacity:.38;filter:drop-shadow(0 0 15px #00aaff)}
.thumb{width:100%;height:145px;object-fit:cover;border-radius:10px;margin-bottom:14px;border:1px solid rgba(170,255,0,.25)}
.card.has-thumb:after{display:none}
.number{width:34px;height:34px;background:#aaff00;color:#060606;display:grid;place-items:center;font-weight:1000;border-radius:8px;box-shadow:0 0 16px #aaff00;margin-bottom:12px}
.card h3{max-width:88%;font-size:23px;font-weight:1000;font-style:italic;text-transform:uppercase;line-height:1.08;margin-bottom:12px}.card p,.card li{color:#e5e5e5;font-size:15px;line-height:1.45}
.small-btn{display:inline-block;margin-top:12px;padding:9px 18px;border:1px solid rgba(170,255,0,.55);color:white;text-decoration:none;border-radius:5px;font-weight:900;font-size:13px}.small-btn:hover{color:#aaff00}
.category h3{color:#aaff00;font-size:30px;margin-bottom:10px}.category:nth-child(2n) h3,.parent h3{color:#00aaff}.category ul{list-style:none}.category li:before{content:"> ";color:#aaff00;font-weight:bold}
.page-hero{padding:70px 7% 35px}.page-hero h1{font-size:clamp(48px,7vw,100px);font-style:italic;text-transform:uppercase;line-height:.9}.page-hero h1 span{color:#aaff00}.page-hero p{max-width:720px;margin-top:18px;font-size:20px;color:#ddd;line-height:1.5}
.content{padding:20px 7% 60px;max-width:1100px;margin:0 auto;line-height:1.75;font-size:18px}
.content h2,.content h3{color:#aaff00;margin:28px 0 10px;text-transform:uppercase;font-style:italic}
.content ul,.content ol{margin-left:28px;margin-bottom:16px}
.content img{max-width:100%;height:auto;border-radius:14px}
.footer{margin-top:18px;padding:26px 7%;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;border-top:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.65);text-transform:uppercase;font-weight:900}.footer span{color:#aaff00;margin-right:8px}
.category-label{margin:32px 0 18px;color:#aaff00;text-transform:uppercase;font-weight:1000;font-size:22px;border-bottom:3px solid #aaff00;padding-bottom:8px;box-shadow:0 10px 20px rgba(170,255,0,.08)}
.quiz-badge{display:inline-block;padding:8px 14px;border:1px solid #aaff00;border-radius:999px;color:#aaff00;font-weight:900;margin-bottom:12px;text-transform:uppercase}
@media(max-width:1000px){.hero{grid-template-columns:1fr;text-align:center}.mark{margin:0 auto}.features,.buttons{justify-content:center}.cards,.cards.three{grid-template-columns:repeat(2,1fr)}.menu{display:none}}
@media(max-width:620px){.navbar{padding:0 18px}.logo{font-size:28px}.hero{padding:30px 5%}.brand-text{letter-spacing:-4px}.cards,.cards.three,.footer{grid-template-columns:1fr}}