/* ===============================
1️⃣ GENERAL */
body, html{margin:0;padding:0;font-family:'Inter',sans-serif;background:#0b0b0f;color:#e0e0e0;}
a{text-decoration:none;color:#00f0ff;}
h1,h2,h3,h4,h5,h6{font-family:'Orbitron',sans-serif;margin:0;}
p{margin:20px 0;line-height:1.8;}

/* ===============================
2️⃣ HEADER & NAVIGATION */
.header{width:100%;position:sticky;top:0;z-index:1000;background:#0b0b0f;}
.nav{display:flex;justify-content:space-between;align-items:center;padding:15px 10%;}
.nav .logo{font-size:24px;font-weight:700;color:#00f0ff;}
.nav .nav-menu{list-style:none;display:flex;gap:25px;}
.nav .nav-menu li a{color:#e0e0e0;transition:.3s;}
.nav .nav-menu li a:hover{color:#00f0ff;}
.menu-toggle{display:none;font-size:26px;cursor:pointer;}

/* ===============================
3️⃣ HERO */
.hero, .blog-hero{height:60vh;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.hero img, .blog-hero img{position:absolute;width:100%;height:100%;object-fit:cover;opacity:.35;}
.hero-overlay, .blog-hero-overlay{position:absolute;width:100%;height:100%;background:radial-gradient(circle,#00f0ff22,transparent);}
.hero-content, .blog-hero-text{text-align:center;z-index:2;}
.hero-content h1, .blog-hero-text h1{font-size:52px;color:#00f0ff;}
.hero-content p, .blog-hero-text p{color:#9ca0aa;}

/* ===============================
4️⃣ SECTIONS */
.section{padding:80px 10%;text-align:center;}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;}
.grid img{width:100%;border-radius:8px;object-fit:cover;}

/* ===============================
5️⃣ LINK CARDS / BLOG LINKS */
.link-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px;margin-top:40px;}
.link-card{position:relative;overflow:hidden;transition:transform 0.4s, box-shadow 0.4s;cursor:pointer;border-radius:8px;}
.link-card::before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,#00f0ff,#ff00f0,#00ff90,#ffcc00);background-size:400% 400%;filter:blur(30px);opacity:0;transition:opacity 0.5s;z-index:0;}
.link-card:hover::before{opacity:0.35;animation:gradientShift 4s ease infinite;}
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.link-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;position:relative;z-index:1;}
.card-content{position:relative;z-index:2;padding:20px;}
.link-card:hover{transform:translateY(-6px) rotateX(1deg) rotateY(1deg);box-shadow:0 12px 30px rgba(0,240,255,.3);}
.btn-card{margin-top:15px;padding:10px 20px;border:1px solid #00f0ff;color:#00f0ff;transition:.3s;display:inline-block;}
.btn-card:hover{background:#00f0ff;color:black;}

/* ===============================
6️⃣ BLOG CONTENT */
.blog-container{max-width:900px;margin:auto;padding:120px 20px;}
.blog-content{font-size:18px;line-height:1.8;}
.blog-content h2{margin-top:50px;}
.blog-content p{margin:20px 0;}
.blog-content ul{margin:20px 0 20px 20px;}
.blog-content li{margin:8px 0;}
.blog-image{width:100%;margin:40px 0;border-radius:8px;object-fit:cover;}
blockquote{margin:40px 0;padding:20px;border-left:4px solid #00f0ff;background:#14141b;font-style:italic;}
.intro{font-size:22px;color:#00f0ff;}

/* ===============================
7️⃣ SCROLL REVEAL */
.scroll-reveal{opacity:0;transform:translateY(40px);transition:all .8s ease-out;}

/* ===============================
8️⃣ READING PROGRESS */
.reading-progress{position:fixed;top:0;left:0;height:4px;width:0%;background:#00f0ff;z-index:2000;transition:width .1s;}

/* ===============================
9️⃣ STICKY SHARE BAR */
.share-bar{position:sticky;top:120px;display:flex;gap:15px;margin-bottom:40px;}
.share-bar a{color:#00f0ff;border:1px solid #00f0ff;padding:6px 12px;font-size:14px;transition:.3s;}
.share-bar a:hover{background:#00f0ff;color:black;}

/* ===============================
10️⃣ NEXT ARTICLE */
.next-article{position:relative;height:60vh;overflow:hidden;margin-top:80px;}
.next-article img{width:100%;height:100%;object-fit:cover;opacity:.4;}
.next-article-overlay{position:absolute;width:100%;height:100%;background:radial-gradient(circle,#00f0ff33,transparent);}
.next-article-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:2;}
.next-article-text p{color:#9ca0aa;}
.next-article-text h2{font-family:Orbitron;font-size:42px;}
.next-article a{color:white;}

/* ===============================
11️⃣ MEDIA QUERIES */
@media(max-width:768px){
  .nav .nav-menu{display:none;}
  .menu-toggle{display:block;}
  .link-grid, .grid{grid-template-columns:1fr;}
  .card-content{padding:15px;}
  .blog-container{padding:80px 20px;}
  .section{padding:60px 5%;}
}