/* ========================================================
   GeneratePress Quantum Theme Seamless Integration
   ======================================================== */
html, body {
  background-color: #020204 !important;
  color: #ffffff !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}

#page, .site, .site-content, .entry-content, .inside-article, article {
  background: transparent !important;
  color: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
}

#masthead.site-header, 
#site-navigation.main-navigation,
.site-header,
.main-navigation,
.entry-header {
  display: none !important;
}

.site-info {
  display: none !important; /* Replaced by quantum-footer */
}


/* --- QUANTUM CORE B:SKIN --- */

    /* --- QUANTUM CORE V2 --- */
    :root {
      --bg-main: #020204; /* আরও গভীর কালো */
      --text-color: #ffffff;
      --accent-cyan: #00ffe7; /* সাইবারপাঙ্ক সায়ান */
      --accent-purple: #bd00ff; /* ডিপ পার্পল */
      --glass-bg: rgba(255, 255, 255, 0.03); /* একদম স্বচ্ছ গ্লাস */
      --glass-border: rgba(255, 255, 255, 0.09);
      --blur-strength: 25px; /* ব্লার ইফেক্ট বাড়ানো হলো */
    }

    * { margin: 0; padding: 0; box-sizing: border-box; text-decoration: none; list-style: none; }
    
    body { 
      background-color: var(--bg-main); 
      color: var(--text-color); 
      font-family: 'Segoe UI', sans-serif;
      /* padding-top রিমুভ করা হলো যাতে হিরো সেকশন একদম উপরে থাকে */
    }

    /* --- REAL GLASS NAVBAR --- */
    nav.quantum-nav {
      position: fixed;
      top: 0; left: 0; width: 100%; height: 80px;
      display: flex; justify-content: space-between; align-items: center;
      padding: 0 6%;
      /* আসল গ্লাস ইফেক্ট */
      background: var(--glass-bg);
      backdrop-filter: blur(var(--blur-strength)) saturate(150%);
      -webkit-backdrop-filter: blur(var(--blur-strength)) saturate(150%);
      border-bottom: 1px solid var(--glass-border);
      z-index: 1000;
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    }

    .nav-logo {
      font-size: 26px; font-weight: 900; 
      background: linear-gradient(to right, var(--accent-cyan), var(--accent-purple));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      letter-spacing: 2px;
      filter: drop-shadow(0 0 10px rgba(0, 255, 231, 0.3));
    }

    ul.nav-links { display: flex; gap: 30px; }
    ul.nav-links li a {
      color: rgba(255, 255, 255, 0.7); 
      font-size: 14px; font-weight: 600; text-transform: uppercase; transition: 0.3s; letter-spacing: 1px;
    }
    ul.nav-links li a:hover {
      color: var(--accent-cyan);
      text-shadow: 0 0 15px var(--accent-cyan);
    }

    /* --- PRO HERO SECTION (Aurora Effect) --- */
    header.hero-section {
      height: 100vh; width: 100%;
      display: flex; flex-direction: column; justify-content: center; align-items: center;
      text-align: center;
      position: relative;
      overflow: hidden;
      /* নতুন প্রো ব্যাকগ্রাউন্ড */
      background: var(--bg-main);
    }

    /* মুভিং লাইট ইফেক্ট (The Magic) */
    header.hero-section::before {
      content: '';
      position: absolute;
      top: -20%; left: -20%; width: 140%; height: 140%;
      background: radial-gradient(circle at 30% 30%, rgba(0, 255, 231, 0.15), transparent 40%),
                  radial-gradient(circle at 70% 70%, rgba(189, 0, 255, 0.15), transparent 40%);
      filter: blur(60px);
      animation: auroraMove 10s ease-in-out infinite alternate;
      z-index: -1;
    }

    @keyframes auroraMove {
      0% { transform: translate(0, 0) scale(1); }
      100% { transform: translate(-5%, -5%) scale(1.1); }
    }

    .hero-title {
      font-size: 5rem; font-weight: 900;
      color: #fff;
      text-shadow: 0 0 20px rgba(0, 255, 231, 0.5), 0 0 60px rgba(189, 0, 255, 0.3);
      letter-spacing: 3px;
      margin-bottom: 20px;
    }

    .hero-subtitle {
      font-size: 1.3rem; color: rgba(255, 255, 255, 0.8);
      margin-bottom: 50px; letter-spacing: 1.5px; font-weight: 300;
    }

    .hero-btns { display: flex; gap: 25px; }
    
    .glass-btn {
      padding: 15px 45px; font-size: 16px; font-weight: bold; color: #fff;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 100px;
      backdrop-filter: blur(15px);
      cursor: pointer; transition: 0.4s; text-transform: uppercase; letter-spacing: 2px;
      position: relative; overflow: hidden;
    }

    .glass-btn:hover {
      border-color: var(--accent-cyan);
      box-shadow: 0 0 30px rgba(0, 255, 231, 0.4);
      background: rgba(0, 255, 231, 0.1);
    }
    
    /* Responsive */
    @media (max-width: 768px) {
      .hero-title { font-size: 3rem; padding: 0 20px; }
      .hero-subtitle { font-size: 1rem; padding: 0 20px; }
      ul.nav-links { display: none; }
      .hero-btns { flex-direction: column; width: 80%; }
    }.about-section {
      padding: 100px 5%;
      background: #020204;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 2;
    }
    .about-card {
      background: rgba(255, 255, 255, 0.02);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: 30px;
      padding: 60px;
      max-width: 1100px;
      width: 100%;
      display: flex;
      gap: 60px;
      align-items: center;
      box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    }
    .about-img {
      width: 350px;
      height: 350px;
      border-radius: 20px;
      object-fit: cover;
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 0 30px rgba(0, 243, 255, 0.15);
      transition: 0.5s;
    }
    .about-img:hover {
      transform: scale(1.02) rotate(-2deg);
      border-color: var(--accent-cyan);
      box-shadow: 0 0 50px rgba(0, 243, 255, 0.4);
    }
    .about-content { flex: 1; }
    .about-content h2 {
      font-size: 3rem;
      font-weight: 800;
      color: #fff;
      margin-bottom: 20px;
      text-transform: uppercase;
      letter-spacing: -1px;
      background: linear-gradient(90deg, #fff, var(--accent-cyan));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .about-content p {
      font-size: 1.1rem;
      color: #aaa;
      line-height: 1.8;
      margin-bottom: 40px;
      font-weight: 400;
    }
    @media (max-width: 900px) {
      .about-card { flex-direction: column; text-align: center; padding: 40px 20px; }
      .about-img { width: 100%; max-width: 300px; height: 300px; }
      .about-content h2 { font-size: 2.2rem; }
    }
.arsenal-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 30px;
      padding: 80px 5%;
      max-width: 1200px;
      margin: 0 auto;
    }
    .arsenal-card {
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: 20px;
      padding: 40px;
      text-align: center;
      transition: 0.4s;
      backdrop-filter: blur(10px);
    }
    .arsenal-card:hover {
      border-color: var(--accent-cyan);
      transform: translateY(-10px);
      box-shadow: 0 15px 40px rgba(0, 255, 231, 0.1);
    }
    .arsenal-card h3 {
      font-size: 1.8rem;
      color: #fff;
      margin-bottom: 15px;
      text-transform: uppercase;
    }
    .arsenal-card p {
      color: #888;
      font-size: 0.95rem;
      line-height: 1.6;
      margin-bottom: 25px;
    }
    .mini-btn {
      display: inline-block;
      padding: 10px 25px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 50px;
      color: #fff;
      font-size: 13px;
      font-weight: 600;
      transition: 0.3s;
    }
    .mini-btn:hover {
      background: var(--accent-cyan);
      color: #000;
      border-color: var(--accent-cyan);
      box-shadow: 0 0 20px var(--accent-cyan);
    }
/* --- CUSTOM POST GRID --- */
    .latest-section { padding: 50px 5%; }
    .section-header {
      font-size: 2.5rem; color: #fff; text-align: center; margin-bottom: 40px;
      text-transform: uppercase; text-shadow: 0 0 20px rgba(0,255,231,0.3);
    }
    .posts-grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px;
      max-width: 1200px; margin: 0 auto;
    }
    .glass-post-card {
      background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: 20px; overflow: hidden; transition: 0.4s;
      display: flex; flex-direction: column;
    }
    .glass-post-card:hover { transform: translateY(-5px); border-color: var(--accent-cyan); }
    .post-thumb { width: 100%; height: 200px; object-fit: cover; }
    .post-info { padding: 25px; display: flex; flex-direction: column; flex-grow: 1; }
    .post-title a {
      font-size: 1.4rem; color: #fff; font-weight: 700; text-decoration: none;
      display: block; margin-bottom: 10px;
    }
    .post-snippet { color: #aaa; font-size: 0.9rem; line-height: 1.6; margin-bottom: 20px; flex-grow: 1; }
    .read-btn {
      align-self: flex-start; padding: 8px 20px; font-size: 12px;
      border: 1px solid var(--accent-cyan); color: var(--accent-cyan);
      border-radius: 50px; text-transform: uppercase; transition: 0.3s;
    }
    .read-btn:hover { background: var(--accent-cyan); color: #000; box-shadow: 0 0 15px var(--accent-cyan); }
/* --- QUANTUM FOOTER --- */
    .quantum-footer {
      background: #000; border-top: 1px solid rgba(255, 255, 255, 0.1);
      padding: 60px 5% 20px; color: #888; font-size: 0.9rem;
      margin-top: 50px;
    }
    .footer-content {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 40px; max-width: 1200px; margin: 0 auto;
    }
    .footer-col h4 {
      color: #fff; font-size: 1.2rem; margin-bottom: 20px; text-transform: uppercase;
      letter-spacing: 1px; border-left: 3px solid var(--accent-cyan); padding-left: 10px;
    }
    .footer-links li { margin-bottom: 10px; }
    .footer-links a { color: #888; transition: 0.3s; }
    .footer-links a:hover { color: var(--accent-cyan); padding-left: 5px; }
    
    /* --- QUANTUM GLASS SOCIAL ENGINE --- */
    .social-icons {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      margin-top: 30px;
    }
    
    .social-btn {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-top: 1px solid rgba(255, 255, 255, 0.3);
      border-left: 1px solid rgba(255, 255, 255, 0.3);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
      position: relative;
      overflow: hidden;
    }

    .social-btn svg {
      width: 22px;
      height: 22px;
      fill: #ffffff;
      transition: all 0.4s ease;
      filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
    }

    /* 3D Reflection Effect */
    .social-btn::before {
      content: '';
      position: absolute;
      top: 0; left: -100%;
      width: 100%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transition: 0.5s;
      transform: skewX(-25deg);
    }

    /* Hover Action: Spin, Glow, Color */
    .social-btn:hover {
      transform: translateY(-5px) rotate(360deg);
      border-color: var(--accent-cyan);
      background: rgba(0, 243, 255, 0.1);
      box-shadow: 0 0 20px var(--accent-cyan), 
                  0 0 50px rgba(0, 243, 255, 0.4),
                  inset 0 0 10px rgba(0, 243, 255, 0.2);
    }

    .social-btn:hover::before {
      left: 100%;
    }

    .social-btn:hover svg {
      fill: #fff;
      transform: scale(1.1);
      filter: drop-shadow(0 0 8px #fff);
    }
    .copyright {
      text-align: center; margin-top: 50px; padding-top: 20px;
      border-top: 1px solid rgba(255,255,255,0.05);
    }
  

/* --- QUANTUM ENGINES & WIDGETS CSS --- */

        :root {
          --neon-cyan: #00f3ff;
          --neon-purple: #bd00ff;
          --glass-box-bg: rgba(255, 255, 255, 0.03);
          --glass-box-border: rgba(255, 255, 255, 0.08);
          --card-w: 420px; /* Perfect Canvas Size */
          --card-h: 460px; /* Balanced Height */
        }

        .swipe-master-container {
          padding: 100px 5%;
          background: #020204;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          z-index: 5;
          overflow: hidden;
        }

        /* The Glass Revealer - Glowing Orbs Behind */
        .glass-orb {
          position: absolute;
          border-radius: 50%;
          filter: blur(140px);
          opacity: 0.25;
          z-index: -1;
          pointer-events: none;
        }
        .cyan-orb {
          width: 500px; height: 500px;
          background: var(--neon-cyan);
          top: -10%; left: 15%;
        }
        .purple-orb {
          width: 450px; height: 450px;
          background: var(--neon-purple);
          bottom: -10%; right: 15%;
        }

        .glass-box {
          background: var(--glass-box-bg);
          backdrop-filter: blur(40px);
          -webkit-backdrop-filter: blur(40px);
          border: 1px solid var(--glass-box-border);
          border-radius: 40px;
          padding: 70px 60px;
          width: 100%;
          max-width: 1250px;
          display: flex;
          align-items: center;
          gap: 90px;
          box-shadow: 0 40px 80px rgba(0,0,0,0.8), inset 0 0 30px rgba(255,255,255,0.03);
        }

        /* 3D Swipe Deck */
        .stack-deck {
          position: relative;
          width: var(--card-w);
          height: var(--card-h);
          perspective: 1200px;
          flex-shrink: 0;
        }

        .deck-card {
          position: absolute;
          width: 100%;
          height: 100%;
          border-radius: 20px;
          overflow: hidden;
          border: 1px solid rgba(255,255,255,0.1);
          box-shadow: -15px 25px 50px rgba(0,0,0,0.9);
          background: #111;
          transform-origin: center center;
          touch-action: none; /* Prevents scrolling while swiping */
          cursor: grab;
          will-change: transform;
        }

        .deck-card:active {
          cursor: grabbing;
        }

        .deck-card img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          pointer-events: none;
        }

        /* Information Area */
        .glass-info {
          flex: 1;
          color: #fff;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }

        .text-wrap {
          transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
        }
        
        .text-wrap.hide {
          opacity: 0;
          transform: translateY(30px) scale(0.95);
        }

        .text-wrap.show {
          opacity: 1;
          transform: translateY(0) scale(1);
        }

        #deck-title {
          font-size: 3.8rem;
          font-weight: 900;
          line-height: 1.1;
          margin-bottom: 20px;
          background: linear-gradient(135deg, #ffffff, #a8fffc);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          letter-spacing: -1px;
          text-shadow: 0 10px 30px rgba(0, 243, 255, 0.2);
        }

        #deck-desc {
          font-size: 1.15rem;
          color: #c4c4c4;
          line-height: 1.8;
          margin-bottom: 45px;
          font-weight: 400;
        }

        /* Pure Glass Pill Button */
        .deck-btn {
          position: relative;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          padding: 18px 45px;
          color: #fff;
          font-size: 15px;
          font-weight: 700;
          text-transform: uppercase;
          text-decoration: none;
          letter-spacing: 2px;
          border-radius: 100px;
          background: rgba(255,255,255,0.05);
          backdrop-filter: blur(15px);
          -webkit-backdrop-filter: blur(15px);
          border: 1px solid rgba(255,255,255,0.1);
          box-shadow: inset 0 0 20px rgba(255,255,255,0.02), 0 10px 20px rgba(0,0,0,0.3);
          align-self: flex-start;
          transition: all 0.4s ease;
          min-width: 190px;
          min-height: 56px;
        }

        .deck-btn:hover {
          background: rgba(0, 243, 255, 0.1);
          border-color: var(--neon-cyan);
          box-shadow: 0 0 30px rgba(0, 243, 255, 0.3), inset 0 0 15px rgba(0, 243, 255, 0.1);
          transform: translateY(-3px);
        }

        .btn-content {
          position: relative;
          z-index: 2;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
        }

        #btn-text {
          transition: opacity 0.3s;
        }

        /* Loading Dots */
        .loading-dots {
          display: none;
          gap: 6px;
          position: absolute;
        }

        .deck-btn.loading #btn-text {
          opacity: 0;
        }

        .deck-btn.loading .loading-dots {
          display: flex;
        }

        .deck-btn.loading {
          pointer-events: none;
          transform: scale(0.95);
        }

        .dot {
          width: 8px;
          height: 8px;
          background: var(--neon-cyan);
          border-radius: 50%;
          box-shadow: 0 0 10px var(--neon-cyan);
          animation: bounce 1.4s infinite ease-in-out both;
        }

        .dot:nth-child(1) { animation-delay: -0.32s; }
        .dot:nth-child(2) { animation-delay: -0.16s; background: var(--neon-purple); box-shadow: 0 0 10px var(--neon-purple); }
        .dot:nth-child(3) { background: #fff; box-shadow: 0 0 10px #fff; }

        @keyframes bounce {
          0%, 80%, 100% { transform: scale(0); }
          40% { transform: scale(1); }
        }

        /* Responsive */
        @media (max-width: 990px) {
          .glass-box { flex-direction: column; padding: 40px 20px; text-align: center; gap: 40px; }
          .stack-deck { width: 320px; height: 360px; }
          #deck-title { font-size: 2.8rem; }
          .deck-btn { align-self: center; }
        }
      

          /* ====================================================
             ⚙️ SPEED CONTROL — এখানে সংখ্যা পরিবর্তন করুন
             ====================================================
             scrollSpeed   : স্লাইডার স্ক্রোলের গতি (সেকেন্ড)
                             কম সংখ্যা = দ্রুত | বেশি সংখ্যা = ধীর
                             DEFAULT: 60s | RANGE: 20s ~ 120s

             zoomInSpeed   : মাউস নিলে ছবি বড় হওয়ার সময় (সেকেন্ড)
                             DEFAULT: 0.4s | RANGE: 0.1s ~ 1s

             zoomOutSpeed  : মাউস সরলে ছবি ছোট হওয়ার সময় (সেকেন্ড)
                             DEFAULT: 0.5s | RANGE: 0.1s ~ 1s

             ডিফল্টে ফিরতে: উপরের DEFAULT মান দিয়ে দিন।
             ==================================================== */
          :root {
            --qs-scroll-speed : 60s;    /* DEFAULT: 60s  */
            --qs-zoom-in      : 0.4s;   /* DEFAULT: 0.4s */
            --qs-zoom-out     : 0.5s;   /* DEFAULT: 0.5s */
            --qs-card-w       : 200px;
            --qs-card-h       : 280px;
            --qs-gap          : 40px;
            --qs-bg           : #000;
            --qs-accent       : #00f3ff;
          }

          .qs-wrapper {
            position: relative;
            width: 100%;
            height: 400px;
            display: flex;
            align-items: center;
            overflow: hidden;
            background: var(--qs-bg);
            border-top: 1px solid rgba(0, 243, 255, 0.08);
            border-bottom: 1px solid rgba(0, 243, 255, 0.08);
            z-index: 10;
          }

          /* Left and Right fade edges */
          .qs-wrapper::before,
          .qs-wrapper::after {
            content: '';
            position: absolute;
            top: 0;
            width: 180px;
            height: 100%;
            z-index: 20;
            pointer-events: none;
          }
          .qs-wrapper::before { left: 0;  background: linear-gradient(to right, var(--qs-bg), transparent); }
          .qs-wrapper::after  { right: 0; background: linear-gradient(to left,  var(--qs-bg), transparent); }

          /* Scrolling track */
          .qs-track {
            display: flex;
            gap: var(--qs-gap);
            width: max-content;
            will-change: transform;
            animation: qs-scroll var(--qs-scroll-speed) linear infinite;
          }

          /* Slider keeps moving even on hover - no pause */

          /* Each card */
          .qs-card {
            position: relative;
            width: var(--qs-card-w);
            height: var(--qs-card-h);
            border-radius: 16px;
            overflow: hidden;
            flex-shrink: 0;
            border: 1px solid rgba(255,255,255,0.1);
            background: #111;
            cursor: pointer;
            /* Use zoom-out speed for return transition */
            transition:
              transform var(--qs-zoom-out) cubic-bezier(0.25, 0.46, 0.45, 0.94),
              border-color var(--qs-zoom-out) ease,
              box-shadow var(--qs-zoom-out) ease;
          }

          /* Image fills card perfectly — any resolution, no crop distortion */
          .qs-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center top;
            display: block;
            filter: grayscale(30%) brightness(0.75);
            transition: filter var(--qs-zoom-in) ease;
          }

          /* Zig-zag scatter effect */
          .qs-card:nth-child(odd)  { transform: translateY(-28px) rotate(-2deg); }
          .qs-card:nth-child(even) { transform: translateY(28px)  rotate(2deg);  }
          .qs-card:nth-child(3n)   { transform: translateY(0)     scale(1.08); width: calc(var(--qs-card-w) + 30px); }
          .qs-card:nth-child(5n)   { transform: translateY(15px)  scale(0.92); filter: brightness(0.7); }

          /* Hover: pop out — uses zoom-in speed */
          .qs-card:hover {
            transform: scale(1.38) translateY(0) rotate(0deg) !important;
            filter: none !important;
            z-index: 100;
            border-color: var(--qs-accent);
            box-shadow: 0 25px 55px rgba(0,0,0,0.9), 0 0 35px rgba(0,243,255,0.45);
            transition:
              transform var(--qs-zoom-in) cubic-bezier(0.25, 0.46, 0.45, 0.94),
              border-color var(--qs-zoom-in) ease,
              box-shadow var(--qs-zoom-in) ease;
          }
          .qs-card:hover img {
            filter: grayscale(0%) brightness(1.1);
          }

          /* True seamless infinite scroll animation */
          @keyframes qs-scroll {
            0%   { transform: translateX(0); }
            100% { transform: translateX(var(--qs-translate-end, -50%)); }
          }

          /* Mobile */
          @media screen and (max-width: 768px) {
            .qs-wrapper { height: 310px; }
            :root {
              --qs-card-w: 140px;
              --qs-card-h: 200px;
              --qs-gap: 20px;
              --qs-scroll-speed: 40s;
            }
            .qs-card:nth-child(odd)  { transform: translateY(-15px) rotate(-2deg); }
            .qs-card:nth-child(even) { transform: translateY(15px)  rotate(2deg);  }
          }
        

        :root {
          --typing-speed: 0.05s;
          --neon-cyan: #00f3ff;
          --neon-purple: #bd00ff;
          --card-w: 450px;
          --card-h: 300px;
        }

        .stacked-container {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 60px;
          padding: 100px 5%;
          background: #000;
          min-height: 500px;
          overflow: hidden;
        }

        /* 3D Card Stack Area */
        .stack-area {
          position: relative;
          width: var(--card-w);
          height: var(--card-h);
          perspective: 1000px;
          cursor: pointer;
        }

        .stack-card {
          position: absolute;
          width: 100%;
          height: 100%;
          border-radius: 20px;
          overflow: hidden;
          transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
          border: 1px solid rgba(255,255,255,0.1);
          box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        }

        .stack-card img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        /* Text and Button Area */
        .content-area {
          flex: 1;
          max-width: 500px;
          color: #fff;
        }

        #typed-title {
          font-size: 2.5rem;
          font-weight: 800;
          margin-bottom: 15px;
          min-height: 1.2em;
          background: linear-gradient(90deg, #fff, var(--neon-cyan));
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        #typed-desc {
          font-size: 1.1rem;
          color: #aaa;
          line-height: 1.6;
          margin-bottom: 30px;
          min-height: 3em;
        }

        /* Neon Glowing Button */
        .neon-btn {
          position: relative;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          padding: 15px 40px;
          color: #fff;
          font-weight: bold;
          text-transform: uppercase;
          text-decoration: none;
          letter-spacing: 2px;
          border-radius: 50px;
          overflow: hidden;
          background: rgba(255,255,255,0.05);
          transition: 0.3s;
        }

        .neon-btn::before {
          content: '';
          position: absolute;
          width: 150%;
          height: 150%;
          background: conic-gradient(var(--neon-cyan), var(--neon-purple), var(--neon-cyan));
          animation: rotate-border 3s linear infinite;
        }

        .neon-btn::after {
          content: '';
          position: absolute;
          inset: 2px;
          background: #000;
          border-radius: 50px;
          z-index: 1;
        }

        .neon-btn span {
          position: relative;
          z-index: 2;
        }

        @keyframes rotate-border {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }

        /* Responsive */
        @media (max-width: 900px) {
          .stacked-container { flex-direction: column; text-align: center; }
          .stack-area { width: 320px; height: 200px; }
        }
      

      /* Quantum Post Grid CSS */
      .latest-section { padding: 80px 5%; background: #020204; position: relative; z-index: 5; }
      .section-header {
        font-size: 3rem; color: #fff; text-align: center; margin-bottom: 60px;
        text-transform: uppercase; font-weight: 900; letter-spacing: 2px;
        text-shadow: 0 0 20px rgba(0, 243, 255, 0.4);
      }
      .posts-grid {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 40px;
        max-width: 1250px; margin: 0 auto;
      }
      .glass-post-card {
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 24px; overflow: hidden; transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
        display: flex; flex-direction: column;
        backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.6);
        position: relative;
      }
      .glass-post-card:hover {
        transform: translateY(-12px);
        border-color: #00f3ff;
        box-shadow: 0 30px 60px rgba(0,0,0,0.8), 0 0 25px rgba(0, 243, 255, 0.15);
      }
      .post-thumb-wrapper {
        width: 100%; height: 240px; overflow: hidden; position: relative;
      }
      .post-thumb {
        width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease;
      }
      .glass-post-card:hover .post-thumb { transform: scale(1.1); }
      
      .post-thumb-wrapper::after {
        content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%;
        background: linear-gradient(to top, rgba(17,17,17,1) 0%, transparent 100%);
      }

      .post-info { 
        padding: 30px; display: flex; flex-direction: column; flex-grow: 1; 
        z-index: 2; background: #111; margin-top: -5px; 
      }
      .post-title { margin-bottom: 15px; }
      .post-title a {
        font-size: 1.4rem; color: #fff; font-weight: 800; text-decoration: none;
        line-height: 1.4; transition: 0.3s;
      }
      .post-title a:hover { color: #00f3ff; text-shadow: 0 0 10px rgba(0, 243, 255, 0.5); }
      .post-snippet { color: #b3b3b3; font-size: 1rem; line-height: 1.6; margin-bottom: 30px; flex-grow: 1; }
      
      .read-btn {
        align-self: flex-start; padding: 12px 30px; font-size: 13px; font-weight: 800;
        background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
        color: #fff; border-radius: 50px; text-transform: uppercase; letter-spacing: 1.5px; transition: 0.4s;
      }
      .read-btn:hover {
        background: rgba(0, 243, 255, 0.1); color: #00f3ff; border-color: #00f3ff;
        box-shadow: 0 0 20px rgba(0, 243, 255, 0.4), inset 0 0 10px rgba(0, 243, 255, 0.1);
        transform: translateX(5px);
      }
      
      .blog-pager { margin-top: 70px; display: flex; justify-content: center; gap: 25px; }
      .blog-pager a {
        padding: 14px 35px; border-radius: 50px; background: rgba(255,255,255,0.05); 
        border: 1px solid rgba(255,255,255,0.1); color: #fff; text-decoration: none; 
        font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; transition: 0.4s ease;
      }
      .blog-pager a:hover { 
        background: rgba(189, 0, 255, 0.15); border-color: #bd00ff; color: #fff; 
        box-shadow: 0 0 25px rgba(189, 0, 255, 0.4); transform: translateY(-3px);
      }
      .no-posts-msg { text-align: center; color: #888; font-size: 1.2rem; padding: 60px 0; font-weight: 300; }
    

      /* 🚀 THE QUANTUM UI ISOLATION HACK */
      /* এটি পোস্ট পেজে হোমপেজের স্লাইডার, হিরো, এবং এবাউট সেকশন গায়েব করে দেবে */
      header.hero-section, 
      .about-section, 
      .arsenal-grid, 
      .swipe-pro-section,
      .infinity-slider-section {
        display: none !important;
      }

      /* Reading Page Container */
      .single-post-wrapper {
        padding: 120px 5% 80px; 
        max-width: 950px; 
        margin: 0 auto; 
        background: #020204; 
        color: #fff; 
        min-height: 100vh;
      }
      
      /* Back Button */
      .back-to-home {
        display: inline-flex; align-items: center; gap: 8px; margin-bottom: 40px;
        padding: 10px 25px; border-radius: 50px; background: rgba(255,255,255,0.05);
        color: #fff; font-size: 14px; font-weight: 700; text-transform: uppercase;
        letter-spacing: 1px; border: 1px solid rgba(255,255,255,0.1); transition: 0.3s;
      }
      .back-to-home:hover {
        background: rgba(0, 243, 255, 0.1); border-color: #00f3ff;
        color: #00f3ff; box-shadow: 0 0 15px rgba(0,243,255,0.3);
      }
      
      /* Post Title */
      .single-post-title {
        font-size: 3.5rem; font-weight: 900; color: #00f3ff; 
        margin-bottom: 30px; line-height: 1.2; text-shadow: 0 0 20px rgba(0,243,255,0.3);
      }

      /* 🚀 THE QUANTUM CSS OVERRIDE (White Background Destroyer) */
      .single-post-content {
        font-size: 1.15rem; line-height: 1.9; color: #d1d1d1 !important; font-weight: 300;
        background: transparent !important;
      }
      
      /* Force all inner tags (p, div, span) to be dark and transparent */
      .single-post-content * {
        background-color: transparent !important;
        color: #d1d1d1 !important;
        font-family: inherit !important;
      }
      
      /* Images and Links */
      .single-post-content img {
        max-width: 100%; border-radius: 16px; margin: 30px 0;
        border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 15px 30px rgba(0,0,0,0.5);
      }
      .single-post-content h2, .single-post-content h3 {
        color: #fff !important; margin-top: 40px; margin-bottom: 20px; font-weight: 800;
      }
      .single-post-content a {
        color: #00f3ff !important; text-decoration: none; font-weight: bold; border-bottom: 1px dashed #00f3ff; transition: 0.3s;
      }
      .single-post-content a:hover {
        color: #bd00ff !important; border-color: #bd00ff; text-shadow: 0 0 10px rgba(189,0,255,0.5);
      }
      
      @media (max-width: 768px) {
        .single-post-wrapper { padding-top: 100px; }
        .single-post-title { font-size: 2.2rem; }
      }
    

    .post-body a.b-tooltip-container {
      position: relative;
      display: inline-block;
    }

    .post-body a.b-tooltip-container .b-tooltip {
      display: block !important;
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translate(-20%, 1px);
      visibility: hidden;
      opacity: 0;
      z-index: 1;
      transition: opacity 0.2s ease-in-out;
    }

    .post-body a.b-tooltip-container .b-tooltip iframe {
      width: 200px;
      height: 198px;
      max-width: none;
      border: none;
      border-radius: 20px;
      box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.2);
    }

    @media (hover: hover) {
      .post-body a.b-tooltip-container:hover .b-tooltip {
        visibility: visible;
        opacity: 1;
      }
    }