/* ==========================================================================
   1. Core Styles & Reset
   ========================================================================== */
 @import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&display=swap');

    /* --- Global Styles & Scrollbar --- */
    * { 
      font-family: 'Inter', system-ui, -apple-system, sans-serif; 
      box-sizing: border-box;
    }

    body { 
      background-color: #03050b;
      background-image: radial-gradient(ellipse at 50% 100%, rgba(79, 70, 229, 0.28) 0%, rgba(2, 6, 23, 0.95) 70%);
      min-height: 100vh;
      scroll-behavior: smooth; 
    }

    ::-webkit-scrollbar { width: 8px; }
    ::-webkit-scrollbar-track { background: #111; }
    ::-webkit-scrollbar-thumb { background: #2c2c2c; border-radius: 10px; }
    ::-webkit-scrollbar-thumb:hover { background: #3B82F6; }

    /* --- Torch Light Visual Effects --- */
    .torch-glow {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
      background: radial-gradient(ellipse at 50% 100%, 
                  rgba(99, 102, 241, 0.35) 0%, 
                  rgba(79, 70, 229, 0.22) 25%,
                  rgba(0, 0, 0, 0.65) 70%);
      mask-image: linear-gradient(to top, black 20%, transparent 90%);
      -webkit-mask-image: linear-gradient(to top, black 20%, transparent 90%);
    }

    .torch-core {
      position: fixed;
      bottom: -8%;
      left: 50%;
      transform: translateX(-50%);
      width: 180%;
      max-width: 1200px;
      height: 480px;
      background: radial-gradient(ellipse at center, 
                  rgba(139, 92, 246, 0.55) 0%, 
                  rgba(59, 130, 246, 0.3) 35%,
                  transparent 75%);
      filter: blur(32px);
      border-radius: 100%;
      pointer-events: none;
      z-index: 0;
      opacity: 0.9;
      animation: torchPulse 3.5s infinite alternate ease-in-out;
    }

    .light-dust {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: radial-gradient(circle at 50% 95%, rgba(165, 180, 252, 0.15) 1px, transparent 1px);
      background-size: 48px 48px;
      pointer-events: none;
      z-index: 0;
    }

    .relative-z-above {
      position: relative;
      z-index: 10;
    }

    .glow-text-shadow {
      text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
    }

    /* --- UI Component Utilities --- */
    .glass-card {
      background: rgba(255, 255, 255, 0.02);
      backdrop-filter: blur(2px);
      border: 1px solid rgba(255,255,255,0.05);
      transition: all 0.25s ease;
    }

    .glass-card:hover {
      background: rgba(255, 255, 255, 0.04);
      border-color: rgba(59,130,246,0.3);
      transform: translateY(-2px);
    }

    .hover-scale:hover { transform: translateY(-4px); }

    .tech-tags { display: flex; flex-wrap: wrap; gap: 0.65rem; margin: 1rem 0 0.5rem; }

    .tag {
      background: rgba(59, 130, 246, 0.12);
      border: 1px solid rgba(59, 130, 246, 0.3);
      padding: 0.3rem 1rem;
      border-radius: 40px;
      font-size: 0.75rem;
      font-weight: 500;
      color: #93c5fd;
    }

    .product-price { font-size: 1.8rem; font-weight: 800; color: #facc15; letter-spacing: -0.02em; }

    .feature-chip {
      background: #1e293b; padding: 0.25rem 0.9rem; border-radius: 30px; font-size: 0.7rem;
      font-weight: 500; color: #cbd5e6; display: inline-flex; align-items: center; gap: 0.3rem;
    }

    /* --- Accordions & Form Inputs --- */
    .faq-accordion summary::-webkit-details-marker { display: none; }
    .faq-accordion summary { list-style: none; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
    .faq-accordion[open] summary .chevron { transform: rotate(180deg); }

    .input-custom {
      background: #1a1a20;
      border: 1px solid #2a2a35;
      border-radius: 1rem;
      padding: 0.75rem 1rem;
      color: white;
      width: 100%;
      transition: all 0.2s;
    }
    .input-custom:focus {
      outline: none;
      border-color: #3b82f6;
      box-shadow: 0 0 0 2px rgba(59,130,246,0.2);
    }

    /* --- Interactive Buttons --- */
    .action-buttons { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.5rem 0 0.5rem; }

    .btn-outline, .btn-primary {
      display: inline-flex; align-items: center; gap: 0.5rem;
      padding: 0.6rem 1.4rem; border-radius: 2rem; font-weight: 600; font-size: 0.85rem;
      transition: all 0.2s; text-decoration: none; cursor: pointer;
    }
    .btn-outline { background: transparent; border: 1px solid rgba(255,255,255,0.2); color: #e5e7eb; }
    .btn-primary { background: #3b82f6; border-color: #3b82f6; color: white; box-shadow: 0 4px 12px rgba(59,130,246,0.3); }

    .btn-primary:hover { background: #2563eb; transform: translateY(-2px); }
    .btn-outline:hover { background: rgba(255,255,255,0.05); border-color: #3b82f6; }

    .bkash-btn {
      background: linear-gradient(135deg, #E2136E, #C2105A);
      box-shadow: 0 8px 20px rgba(226,19,110,0.3);
    }

    /* --- Modals & Overlay States --- */
    .modal-overlay {
      position: fixed;
      top: 0; left: 0; width: 100%; height: 100%;
      background: rgba(0,0,0,0.85);
      backdrop-filter: blur(8px);
      z-index: 1000;
      display: flex; align-items: center; justify-content: center;
      opacity: 0; visibility: hidden;
      transition: all 0.3s ease;
    }
    .modal-overlay.active { opacity: 1; visibility: visible; }

    .payment-modal {
      background: linear-gradient(145deg, #111115, #0a0a0c);
      border: 1px solid rgba(59,130,246,0.3);
      border-radius: 2rem;
      max-width: 500px; width: 90%; padding: 2rem;
      box-shadow: 0 30px 50px rgba(0,0,0,0.6);
      transform: scale(0.95);
      transition: transform 0.2s ease;
    }
    .modal-overlay.active .payment-modal { transform: scale(1); }

    #paymentModal {
    z-index: 9999 !important;
    position: fixed !important;
    }

    #productDetailsModal {
        z-index: 1000;
    }

    .menu-card{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 16px;
    border-radius:16px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.06);
    transition:all .3s ease;
    }

    .menu-card:hover{
        background:rgba(255,255,255,.06);
        border-color:rgba(59,130,246,.35);
        transform:translateY(-2px);
    }

    .menu-card span{
        color:#e5e7eb;
        font-size:14px;
        font-weight:500;
    }

    /* --- Keyframe Animations --- */
    @keyframes float { 
      0%, 100% { transform: translateY(0px); } 
      50% { transform: translateY(-12px); } 
    }
    .floating-mock { animation: float 6s ease-in-out infinite; }

    @keyframes torchPulse {
      0% { opacity: 0.7; filter: blur(36px); transform: translateX(-50%) scale(1); }
      100% { opacity: 1; filter: blur(44px); transform: translateX(-50%) scale(1.08); }
    }

      /* Additional hero-specific animations */
  @keyframes subtlePulse {
    0% { opacity: 0.6; transform: scale(1); }
    100% { opacity: 1; transform: scale(1.05); }
  }
  
  .animate-subtle-pulse {
    animation: subtlePulse 3s infinite alternate ease-in-out;
  }
  
  /* Smooth hover transitions */
  .hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  
  .hover-lift:hover {
    transform: translateY(-2px);
  }


   #paymentModal {
        z-index: 99999 !important;
        transition: opacity 0.25s ease;
    }
    
    #paymentModal > div {
        z-index: 100000 !important;
        transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
        transform: scale(0.95);
    }
    
    #paymentModal:not(.hidden) > div {
        transform: scale(1);
    }
    
    #paymentModal:not(.hidden) {
        display: flex !important;
    }
    
    #productDetailsModal {
        z-index: 9998 !important;
    }

    /* Tech Tag Styles */
    .tech-tag {
      padding: 0.35rem 0.85rem;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 40px;
      font-size: 0.7rem;
      font-weight: 500;
      color: #d1d5db;
      transition: all 0.25s ease;
      cursor: default;
      letter-spacing: 0.02em;
    }

    .tech-tag:hover {
      background: rgba(59, 130, 246, 0.12);
      border-color: rgba(59, 130, 246, 0.3);
      color: #93c5fd;
      transform: translateY(-1px);
    }

    /* Glass card hover enhancement */
    .glass-card {
      background: rgba(255, 255, 255, 0.02);
      backdrop-filter: blur(2px);
      border: 1px solid rgba(255,255,255,0.05);
      transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    }

    .glass-card:hover {
      background: rgba(255, 255, 255, 0.04);
      border-color: rgba(59,130,246,0.3);
      transform: translateY(-4px);
    }