/* ============ CYBERPUNK THEME ============ */
:root{
  --neon-cyan:#00f0ff;
  --neon-pink:#ff2bd6;
  --neon-purple:#a020f0;
  --neon-green:#39ff14;
  --neon-yellow:#f7ff00;
  --bg-0:#05030f;
  --bg-1:#0a0820;
  --bg-2:#11102a;
  --ink:#e6f1ff;
  --muted:#7d89b0;
  --line:rgba(0,240,255,.18);
  --bs-primary:#00f0ff;
  --bs-primary-rgb:0,240,255;
}

*{scroll-behavior:smooth}
html,body{background:var(--bg-0);color:var(--ink)}
body{
  font-family:'Rajdhani','Inter',system-ui,sans-serif;
  padding-top:80px;
  overflow-x:hidden;
  position:relative;
  letter-spacing:.3px;
}
h1,h2,h3,h4,h5,h6,.navbar-brand,.display-4{
  font-family:'Orbitron','Rajdhani',sans-serif;
  letter-spacing:.04em;
  text-transform:uppercase;
}

/* Animated grid + scanline background */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(160,32,240,.25), transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(0,240,255,.18), transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(255,43,214,.10), transparent 60%),
    var(--bg-0);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(0,240,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,240,255,.06) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(ellipse at center, #000 30%, transparent 80%);
  animation:gridMove 20s linear infinite;
}
@keyframes gridMove{from{background-position:0 0,0 0}to{background-position:42px 42px,42px 42px}}

.scanlines{position:fixed;inset:0;pointer-events:none;z-index:1000;
  background:repeating-linear-gradient(to bottom, transparent 0 2px, rgba(255,255,255,.025) 2px 3px);
  mix-blend-mode:overlay;
}

/* Text colors */
.text-primary,.text-cyan{color:var(--neon-cyan)!important;text-shadow:0 0 12px rgba(0,240,255,.6)}
.text-pink{color:var(--neon-pink)!important;text-shadow:0 0 12px rgba(255,43,214,.6)}
.text-muted{color:var(--muted)!important}
.bg-light{background:linear-gradient(180deg,var(--bg-1),var(--bg-2))!important}
.bg-primary-soft{background:rgba(0,240,255,.08)!important;border:1px solid var(--line);color:var(--neon-cyan)!important}

/* Buttons */
.btn{font-family:'Orbitron',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.1em;border-radius:2px;padding:.7rem 1.4rem;position:relative;transition:all .25s;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.btn-primary,.bg-primary{
  background:linear-gradient(135deg,var(--neon-cyan),var(--neon-purple))!important;
  border:none!important;color:#05030f!important;font-weight:700;
  box-shadow:0 0 20px rgba(0,240,255,.5),0 0 40px rgba(160,32,240,.3);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 30px var(--neon-cyan),0 0 60px var(--neon-purple);color:#000!important}
.btn-outline-primary{background:transparent;border:1px solid var(--neon-cyan)!important;color:var(--neon-cyan)!important;box-shadow:inset 0 0 12px rgba(0,240,255,.15)}
.btn-outline-primary:hover{background:rgba(0,240,255,.12);color:var(--neon-cyan)!important;box-shadow:0 0 20px rgba(0,240,255,.5),inset 0 0 12px rgba(0,240,255,.3)}
.btn-light{background:var(--neon-yellow)!important;color:#000!important;border:none}

/* Navbar */
.navbar-custom{
  background:rgba(5,3,15,.75)!important;
  backdrop-filter:blur(14px);
  /* border-bottom:1px solid var(--line); */
  box-shadow:0 0 30px rgba(0,240,255,.08);
}
.navbar-custom .navbar-brand{font-size:1.5rem;color:#fff}
.navbar-custom .nav-link{color:#b8c4e0!important;font-weight:500;padding:.5rem 1rem!important;position:relative;text-transform:uppercase;font-size:.9rem;letter-spacing:.08em}
.navbar-custom .nav-link::after{content:"";position:absolute;left:1rem;right:1rem;bottom:.3rem;height:1px;background:var(--neon-cyan);transform:scaleX(0);transition:.3s;box-shadow:0 0 8px var(--neon-cyan)}
.navbar-custom .nav-link:hover,.navbar-custom .nav-link.active{color:var(--neon-cyan)!important}
.navbar-custom .nav-link:hover::after,.navbar-custom .nav-link.active::after{transform:scaleX(1)}
.navbar-toggler{border:1px solid var(--line)}
.navbar-toggler-icon{filter:invert(1) hue-rotate(160deg)}
#cartBadge{background:var(--neon-pink)!important;color:#000;font-family:'Orbitron',sans-serif;box-shadow:0 0 12px var(--neon-pink)}

/* Hero */
.hero{padding:6rem 0 5rem;position:relative;overflow:hidden}
.hero h1{font-size:3.4rem;line-height:1.05;color:#fff;font-weight:800}
.hero h1 .text-primary{display:inline-block;animation:glitch 4s infinite}
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;overflow:hidden}
.glitch::before{color:var(--neon-pink);clip:rect(0,900px,0,0);animation:glitchTop 3s infinite linear alternate-reverse}
.glitch::after{color:var(--neon-cyan);clip:rect(0,900px,0,0);animation:glitchBot 2s infinite linear alternate-reverse}
@keyframes glitchTop{
  0%{clip:rect(0,9999px,0,0)}10%{clip:rect(12px,9999px,18px,0);transform:translate(-2px)}
  20%{clip:rect(40px,9999px,46px,0);transform:translate(2px)}30%{clip:rect(0,9999px,0,0)}
  100%{clip:rect(0,9999px,0,0)}
}
@keyframes glitchBot{
  0%{clip:rect(0,9999px,0,0)}15%{clip:rect(60px,9999px,72px,0);transform:translate(2px)}
  35%{clip:rect(20px,9999px,30px,0);transform:translate(-2px)}50%{clip:rect(0,9999px,0,0)}
  100%{clip:rect(0,9999px,0,0)}
}
@keyframes glitch{
  0%,90%,100%{text-shadow:0 0 12px rgba(0,240,255,.6)}
  92%{text-shadow:2px 0 var(--neon-pink),-2px 0 var(--neon-cyan)}
  94%{text-shadow:-2px 0 var(--neon-pink),2px 0 var(--neon-cyan)}
}

.badge.bg-primary-soft{font-family:'Orbitron',sans-serif;font-size:.7rem;letter-spacing:.15em}

.hero-visual{position:relative;height:460px;display:flex;align-items:center;justify-content:center}
.shield-glow{
  width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--neon-cyan), var(--neon-purple) 60%, #1a0033);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:8rem;
  box-shadow:0 0 60px var(--neon-cyan),0 0 120px var(--neon-purple),inset 0 0 60px rgba(0,0,0,.4);
  animation:pulseGlow 3s ease-in-out infinite;
  position:relative;
}
.shield-glow::before,.shield-glow::after{
  content:"";position:absolute;inset:-20px;border-radius:50%;
  border:1px solid var(--neon-cyan);opacity:.5;animation:ringPulse 3s ease-out infinite;
}
.shield-glow::after{border-color:var(--neon-pink);animation-delay:1.5s}
@keyframes pulseGlow{0%,100%{transform:scale(1)}50%{transform:scale(1.04);box-shadow:0 0 80px var(--neon-cyan),0 0 160px var(--neon-purple)}}
@keyframes ringPulse{0%{transform:scale(.95);opacity:.7}100%{transform:scale(1.4);opacity:0}}

.floating-card{
  position:absolute;background:rgba(10,8,32,.85);backdrop-filter:blur(10px);
  padding:.7rem 1.1rem;border:1px solid var(--neon-cyan);
  border-radius:0;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  font-size:.8rem;font-weight:600;display:flex;align-items:center;gap:.5rem;
  box-shadow:0 0 20px rgba(0,240,255,.4);font-family:'Orbitron',sans-serif;text-transform:uppercase;letter-spacing:.05em;color:#fff;
  animation:float 4s ease-in-out infinite;
}
.floating-card i{font-size:1.2rem}
.card-1{top:10%;left:0;border-color:var(--neon-pink);box-shadow:0 0 20px rgba(255,43,214,.5);animation-delay:0s}
.card-2{top:45%;right:0;animation-delay:1s}
.card-3{bottom:10%;left:10%;border-color:var(--neon-green);box-shadow:0 0 20px rgba(57,255,20,.5);animation-delay:2s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

.section{padding:6rem 0;position:relative}
.section h2{color:#fff;font-size:2.4rem}
.text-uppercase.small{font-family:'Orbitron',sans-serif;letter-spacing:.2em;font-size:.75rem!important}

/* Stats */
.stat-num{font-family:'Orbitron',sans-serif;font-size:2.6rem;background:linear-gradient(135deg,var(--neon-cyan),var(--neon-pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* About */
.about-visual{background:linear-gradient(135deg,rgba(0,240,255,.08),rgba(160,32,240,.12));border:1px solid var(--line);border-radius:0;padding:2rem;clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.about-tile{background:rgba(5,3,15,.7);border:1px solid var(--line);padding:1.5rem;text-align:center;transition:.3s;color:#fff}
.about-tile:hover{transform:translateY(-4px);border-color:var(--neon-cyan);box-shadow:0 0 24px rgba(0,240,255,.3)}
.about-tile i{font-size:2rem;display:block;margin-bottom:.5rem;color:var(--neon-cyan)}
.about-tile span{font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em}

/* Service / Why / Pricing cards (cyber panels) */
.cyber-card,.service-card,.why-card,.pricing-card,.contact-info,.cart-box,.summary-box,.contact-form{
  background:linear-gradient(180deg,rgba(17,16,42,.75),rgba(10,8,32,.85));
  border:1px solid var(--line);
  padding:2rem;height:100%;
  position:relative;transition:all .3s;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  color:#e6f1ff;
}
.service-card h5,.why-card h6,.pricing-card h5,.contact-info h6,.cart-box h5,.summary-box h5{color:#fff}
.service-card::before,.pricing-card::before{
 position:absolute;inset:0;border:1px solid transparent;
  background:linear-gradient(135deg,var(--neon-cyan),var(--neon-pink)) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:.3s;
  clip-path:inherit;
}
.service-card:hover,.pricing-card:hover,.why-card:hover,.contact-info:hover{transform:translateY(-6px);box-shadow:0 0 30px rgba(0,240,255,.25)}
.service-card:hover::before,.pricing-card:hover::before{opacity:1}
.service-icon{width:60px;height:60px;background:linear-gradient(135deg,rgba(0,240,255,.15),rgba(160,32,240,.15));color:var(--neon-cyan);display:flex;align-items:center;justify-content:center;font-size:1.7rem;margin-bottom:1rem;border:1px solid var(--line);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.why-card{text-align:center}
.why-card i{font-size:2.6rem;color:var(--neon-cyan);text-shadow:0 0 18px var(--neon-cyan)}

/* Pricing */
.pricing-card.popular{border:1px solid var(--neon-pink);box-shadow:0 0 30px rgba(255,43,214,.3);transform:scale(1.04)}
.pricing-card.popular:hover{transform:scale(1.04) translateY(-6px)}
.popular-badge{position:absolute;top:-1px;right:14px;background:var(--neon-pink);color:#000;padding:.3rem .9rem;font-size:.7rem;font-weight:700;font-family:'Orbitron',sans-serif;letter-spacing:.1em;box-shadow:0 0 16px var(--neon-pink)}
.pricing-card h2{font-family:'Orbitron',sans-serif;color:#fff}

/* FAQ */
.accordion-item{background:rgba(17,16,42,.6)!important;border:1px solid var(--line)!important;margin-bottom:.6rem}
.accordion-button{background:transparent!important;color:#fff!important;font-family:'Orbitron',sans-serif;text-transform:uppercase;font-size:.95rem;letter-spacing:.05em}
.accordion-button:not(.collapsed){background:rgba(0,240,255,.08)!important;color:var(--neon-cyan)!important;box-shadow:inset 0 -1px 0 var(--line)}
.accordion-button::after{filter:invert(1) hue-rotate(160deg) brightness(1.5)}
.accordion-body{color:var(--muted)}
.accordion-button:focus{box-shadow:none;border-color:var(--neon-cyan)}

/* CTA */
.cta-section{padding:5rem 0;background:linear-gradient(135deg,rgba(160,32,240,.3),rgba(0,240,255,.2));border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.cta-section::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent 0 20px,rgba(0,240,255,.04) 20px 21px)}
.cta-section h2{color:#fff;font-size:2.6rem}

/* Footer */
.footer{background:#03020a;color:var(--muted);padding:3rem 0 1.5rem;/* border-top:1px solid var(--line); */}
.footer h5,.footer h6{color:#fff;font-family:'Orbitron',sans-serif;text-transform:uppercase;font-size:.9rem;letter-spacing:.08em}
.footer a{color:var(--muted);text-decoration:none;transition:.2s}
.footer a:hover{color:var(--neon-cyan);text-shadow:0 0 8px var(--neon-cyan)}
.footer .form-control{background:rgba(0,240,255,.05);border:1px solid var(--line);color:#fff}

/* Page header */
.page-header{padding: 5rem 0 2rem;/* border-bottom:1px solid var(--line); */}
.page-header h1{font-size:2.8rem;color:#fff;letter-spacing:.04em}

/* Cart */
.cart-item{display:flex;align-items:center;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.cart-item:last-child{border-bottom:none}
.cart-item-icon{width:60px;height:60px;background:linear-gradient(135deg,rgba(0,240,255,.15),rgba(160,32,240,.15));color:var(--neon-cyan);display:flex;align-items:center;justify-content:center;font-size:1.6rem;border:1px solid var(--line);flex-shrink:0;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.cart-item-info{flex:1;min-width:0}
.cart-item-info h6{margin:0;font-weight:600;color:#fff;text-transform:uppercase;font-family:'Orbitron',sans-serif;font-size:.9rem}
.cart-item-info small{color:var(--muted)}
.qty-controls{display:flex;align-items:center;gap:.5rem}
.qty-controls button{width:32px;height:32px;border:1px solid var(--line);background:transparent;color:var(--neon-cyan);cursor:pointer;font-weight:700;transition:.2s}
.qty-controls button:hover{border-color:var(--neon-cyan);background:rgba(0,240,255,.1);box-shadow:0 0 12px rgba(0,240,255,.4)}
.qty-controls span{color:#fff;min-width:20px;text-align:center}
.cart-item-price{font-family:'Orbitron',sans-serif;color:var(--neon-cyan);min-width:80px;text-align:right;font-weight:700}
.remove-btn{color:var(--neon-pink);background:none;border:none;font-size:1.1rem;cursor:pointer;transition:.2s}
.remove-btn:hover{text-shadow:0 0 12px var(--neon-pink)}

/* Contact */
.contact-info{text-align:center}
.contact-icon{width:64px;height:64px;background:linear-gradient(135deg,rgba(0,240,255,.2),rgba(160,32,240,.2));color:var(--neon-cyan);display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin:0 auto;border:1px solid var(--neon-cyan);box-shadow:0 0 20px rgba(0,240,255,.3);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.form-control,.form-control:focus{background:rgba(5,3,15,.6);border:1px solid var(--line);color:#fff;border-radius:0;padding:.75rem 1rem}
.form-control:focus{border-color:var(--neon-cyan);box-shadow:0 0 0 .2rem rgba(0,240,255,.15);background:rgba(5,3,15,.8)}
.form-control::placeholder{color:#4a5680}
.form-label{font-family:'Orbitron',sans-serif;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:#b8c4e0}

/* Toast */
.toast{background:rgba(10,8,32,.95)!important;border:1px solid var(--neon-cyan)!important;color:#fff!important;box-shadow:0 0 24px rgba(0,240,255,.4);font-family:'Orbitron',sans-serif;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(30px);transition:all .8s cubic-bezier(.2,.7,.2,1)}
.reveal.visible{opacity:1;transform:none}

/* Matrix canvas */
#matrixCanvas{position:fixed;inset:0;z-index:-1;opacity:.18;pointer-events:none}

/* Hex check + success in cyber green */
.text-success{color:var(--neon-green)!important}

/* Responsive */
@media (max-width:991px){
  .hero{padding:3rem 0}
  .hero h1{font-size:2.4rem}
  .shield-glow{width:220px;height:220px;font-size:6rem}
  .hero-visual{height:360px;margin-top:2rem}
  .pricing-card.popular{transform:none}
  .pricing-card.popular:hover{transform:translateY(-6px)}
  .page-header h1{font-size:2rem}
  .section{padding:4rem 0}
  .section h2{font-size:1.8rem}
}
@media (max-width:575px){
  .hero h1{font-size:1.9rem}
  .cart-item{flex-wrap:wrap}
  body{padding-top:70px}
}


.prod_total {
    display: flex;
    justify-content: space-between;
}

section.cart-sec h1 {
    font-size: 22px;
    margin: 14px 0;
    color: #00f0ff;
}

.prod_bx h4 {
    font-size: 15px;
}

.total_sec h2 {
    text-align: right;
    font-size: 20px;
    margin: 10px 0;
}

section.cart-sec .container {
    padding: 20px 0;
    border-bottom: 1px solid #dddddd4a;
}

.chk-content h3 {
    font-size: 16px;
    color: #00f0ff;
}

.chk-form h4 {
    font-size: 16px;
    color: #00f0ff;
}

.card-accept label {
    font-size: 20px;
    font-weight: 700;
}

.card-accept img {
    width: auto;
    height: 31px;
    margin: 4px 0;
}

.cvv-question a {
    color: #fff;
    display: block;
    padding: 10px 0;
}

.agree-bx {
    display: flex;
    gap: 11px;
    align-items: start;
}

.agree-bx input {
    margin-top: 5px;
}

.navbar-brand img {
    width: auto;
    height: 43px;
}




    /* PREMIUM PRICING SECTION - Most Attractive Cyber Design */
    .premium-pricing-section {
      background: linear-gradient(145deg, #070b16 0%, #0a1020 50%, #050811 100%);
      position: relative;
      padding: 5rem 0;
      font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
      overflow: hidden;
      border-top: 1px solid rgba(0, 230, 255, 0.25);
      border-bottom: 1px solid rgba(0, 230, 255, 0.2);
    }

    /* Animated background elements */
    .premium-pricing-section::before {
      content: "";
      position: absolute;
      top: -30%;
      left: -10%;
      width: 120%;
      height: 160%;
      background: radial-gradient(ellipse at 30% 40%, rgba(0, 180, 255, 0.05), transparent 60%);
      pointer-events: none;
      animation: floatPulse 12s infinite alternate;
    }

    .premium-pricing-section::after {
      content: "";
      position: absolute;
      bottom: -20%;
      right: -10%;
      width: 100%;
      height: 100%;
      background: radial-gradient(ellipse at 80% 70%, rgba(100, 80, 255, 0.04), transparent 70%);
      pointer-events: none;
    }

    @keyframes floatPulse {
      0% { opacity: 0.3; transform: scale(1) translate(0, 0);}
      100% { opacity: 0.7; transform: scale(1.05) translate(2%, 1%);}
    }

    .premium-pricing-container {
      max-width: 1300px;
      margin: 0 auto;
      padding: 0 2rem;
      position: relative;
      z-index: 5;
    }

    /* Header styling */
    .pricing-header {
      text-align: center;
      margin-bottom: 3.5rem;
    }

    .price-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      background: rgba(0, 210, 255, 0.1);
      backdrop-filter: blur(6px);
      padding: 0.4rem 1.3rem;
      border-radius: 60px;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: #5ad0ff;
      border: 1px solid rgba(0, 200, 255, 0.35);
      margin-bottom: 1.2rem;
    }

    .price-badge i {
      font-size: 0.75rem;
    }

    .pricing-main-title {
      font-size: 2.8rem;
      font-weight: 800;
      margin-bottom: 0.8rem;
      letter-spacing: -0.02em;
      color: #ffffff;
    }

    .gradient-text {
      background: linear-gradient(125deg, #4ac7ff, #7a6eff);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .pricing-subtitle {
      color: #9eb0cf;
      font-size: 1rem;
      max-width: 500px;
      margin: 0 auto;
    }

    /* Pricing Grid */
    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
      margin: 2rem 0 2rem;
      align-items: stretch;
    }

    /* Premium Card Design */
    .premium-card {
      background: rgba(12, 22, 40, 0.65);
      backdrop-filter: blur(16px);
      border-radius: 40px;
      padding: 2rem 1.5rem 1.8rem;
      position: relative;
      transition: all 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.2);
      border: 1px solid rgba(0, 200, 255, 0.2);
      overflow: hidden;
      cursor: default;
      display: flex;
      flex-direction: column;
    }

    .premium-card:hover {
      transform: translateY(-10px) scale(1.01);
      border-color: rgba(0, 220, 255, 0.6);
      background: rgba(18, 32, 55, 0.8);
      box-shadow: 0 30px 45px -20px rgba(0, 200, 255, 0.4);
    }

    /* Animated border glow on hover */
    .card-border-glow {
      position: absolute;
      inset: 0;
      border-radius: 40px;
      padding: 1px;
      background: linear-gradient(125deg, rgba(0, 200, 255, 0), rgba(0, 200, 255, 0.4), rgba(0, 200, 255, 0));
      opacity: 0;
      transition: opacity 0.4s;
      pointer-events: none;
    }

    .premium-card:hover .card-border-glow {
      opacity: 1;
    }

    /* Popular badge */
    .popular-badge {
      position: absolute;
      top: 16px;
      right: 20px;
      background: linear-gradient(95deg, #0066ff, #00ccff);
      padding: 0.2rem 0.9rem;
      border-radius: 60px;
      font-size: 0.7rem;
      font-weight: 700;
      color: white;
      display: flex;
      align-items: center;
      gap: 0.3rem;
      box-shadow: 0 2px 10px rgba(0, 102, 255, 0.4);
    }

    .popular-badge i {
      font-size: 0.6rem;
    }

    .card-header-premium {
      text-align: center;
      margin-bottom: 1.5rem;
    }

    .plan-name {
      font-size: 1.7rem;
      font-weight: 800;
      background: linear-gradient(135deg, #fff, #b3defa);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      margin-bottom: 0.3rem;
    }

    .device-info {
      font-size: 0.8rem;
      color: #7c93b5;
      letter-spacing: 0.3px;
    }

    /* Circular price display - Unique */
    .price-circle {
      display: flex;
      justify-content: center;
      margin: 0.8rem 0 1.5rem;
    }

    .price-inner {
      background: linear-gradient(145deg, #0a1425, #060c18);
      padding: 1.2rem 1rem;
      border-radius: 80px;
      min-width: 160px;
      text-align: center;
      border: 1px solid rgba(0, 200, 255, 0.35);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255,255,255,0.05);
    }

    .currency-symbol {
      font-size: 1.2rem;
      font-weight: 600;
      color: #6bc8ff;
      vertical-align: super;
    }

    .price-number {
      font-size: 3.2rem;
      font-weight: 800;
      background: linear-gradient(135deg, #ffffff, #aad8ff);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      margin: 0 0.1rem;
    }

    .price-period {
      font-size: 0.85rem;
      color: #8ba0c2;
      font-weight: 500;
    }

    /* Features List - clean styling */
    .features-list {
      flex-grow: 1;
      margin-bottom: 1.8rem;
    }

    .feature-items {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .feature-items li {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      margin-bottom: 0.75rem;
      font-size: 0.85rem;
      color: #c8d9f0;
      padding: 0.2rem 0;
    }

    .feature-items li i {
      color: #2bc9ff;
      font-size: 0.9rem;
      flex-shrink: 0;
    }

    .feature-items li span {
      line-height: 1.4;
    }

    /* CTA Button */
    .cta-wrapper {
      margin: 0.5rem 0 1rem;
    }

    .premium-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.7rem;
      width: 100%;
      padding: 0.9rem 1rem;
      background: linear-gradient(95deg, rgba(0, 150, 255, 0.12), rgba(0, 100, 255, 0.08));
      border: 1.5px solid rgba(0, 180, 255, 0.5);
      border-radius: 60px;
      font-weight: 700;
      font-size: 0.9rem;
      color: #c2e6ff;
      text-decoration: none;
      transition: all 0.3s ease;
      cursor: pointer;
    }

    .premium-btn span {
      transition: transform 0.2s;
    }

    .premium-btn i {
      font-size: 0.8rem;
      transition: transform 0.2s;
    }

    .premium-btn:hover {
      background: linear-gradient(95deg, #0066ff, #00bbff);
      border-color: transparent;
      color: white;
      box-shadow: 0 8px 20px rgba(0, 150, 255, 0.4);
      gap: 1rem;
    }

    .premium-btn:hover i {
      transform: translateX(4px);
    }

    /* Card footer note */
    .card-footer-note {
      text-align: center;
      font-size: 0.7rem;
      color: #6e88aa;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
      margin-top: 0.5rem;
    }

    .card-footer-note i {
      font-size: 0.65rem;
    }

    /* Trust row at bottom */
    .pricing-trust-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 1.8rem;
      margin-top: 3rem;
      padding-top: 1.5rem;
      border-top: 1px solid rgba(0, 180, 255, 0.2);
    }

    .trust-badge-item {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      font-size: 0.8rem;
      color: #9ab1d4;
    }

    .trust-badge-item i {
      color: #3cc5ff;
      font-size: 0.9rem;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .premium-pricing-container {
        padding: 0 1.2rem;
      }
      .pricing-main-title {
        font-size: 1.9rem;
      }
      .pricing-grid {
        gap: 1.2rem;
      }
      .premium-card {
        padding: 1.5rem 1.2rem;
      }
      .price-number {
        font-size: 2.6rem;
      }
      .plan-name {
        font-size: 1.4rem;
      }
    }

    @media (max-width: 480px) {
      .pricing-main-title {
        font-size: 1.5rem;
      }
      .price-inner {
        min-width: 130px;
        padding: 0.8rem 0.8rem;
      }
    }


    /* Cookie Popup - Premium Cyber Design */
#cookiePopup {
  position: fixed;
  bottom: 40px;
  transform: translateX(-50%);
  bottom: 30px;
  left: 50%;
  width: auto;
  min-width: 320px;
  /* max-width: 90%; */
  display: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(8, 15, 28, 0.98), rgba(3, 8, 18, 0.98));
  backdrop-filter: blur(12px);
  padding: 20px 28px;
  z-index: 999999;
  /* border-radius: 24px; */
  /* border: 1px solid rgba(0, 200, 255, 0.35); */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 200, 255, 0.1);
  gap: 16px;
}

#cookiePopup h4 {
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  background: linear-gradient(135deg, #ffffff, #7acfff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.3px;
}

#cookiePopup p {
  font-size: 13px;
  color: #c0d4f0;
  margin: 0;
  letter-spacing: 0.3px;
  line-height: 1.5;
  max-width: 650px;
  flex: 1;
}

#cookiePopup p a {
  color: #4ac7ff;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}

#cookiePopup p a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.cookieBtns {
  display: inline-flex;
  gap: 12px;
  align-items: center;
}

#cookiePopup .sec-btn {
  cursor: pointer;
  margin: 0;
  padding: 8px 24px;
  border-radius: 40px;
  font-weight: 600;
  font-size: 19px;
  transition: all 0.3s ease;
  border: none;
  background: linear-gradient(95deg, #0066ff, #00bbff);
  color: #fff!important;
}

#acceptCookie {
  background: linear-gradient(95deg, #0066ff, #00bbff);
  color: white;
  box-shadow: 0 2px 8px rgba(0, 102, 255, 0.3);
}

#acceptCookie:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 102, 255, 0.4);
  background: linear-gradient(95deg, #1a77ff, #33ccff);
}

#declineCookie {
  background: rgba(255, 255, 255, 0.08);
  color: #aac9ff;
  border: 1px solid rgba(0, 200, 255, 0.3);
}

#declineCookie:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border-color: rgba(0, 200, 255, 0.6);
}

/* Responsive Design */
@media (max-width: 900px) {
  #cookiePopup {
    flex-direction: column;
    text-align: center;
    padding: 18px 22px;
    bottom: 20px;
    width: calc(100% - 40px);
    max-width: calc(100% - 40px);
    left: 50%;
    transform: translateX(-50%);
  }
  
  #cookiePopup p {
    max-width: 100%;
  }
  
  .cookieBtns {
    margin-top: 8px;
  }
}

@media (max-width: 480px) {
  #cookiePopup {
    padding: 16px 18px;
    border-radius: 20px;
  }
  
  #cookiePopup h4 {
    font-size: 18px;
  }
  
  #cookiePopup p {
    font-size: 12px;
  }
  
  #cookiePopup .sec-btn {
    padding: 6px 18px;
    font-size: 12px;
  }
}

/* Animation for popup appearance */
@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

#cookiePopup[style*="display: flex"] {
  animation: slideUpFade 0.4s ease-out;
}

  <!-- Font Awesome 6 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">