/* ============ 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{
  content:"";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;
}