/* LEDchain styles — neon, tight spacing, responsive */
:root {
  --bg-color:#0a0a0a; --primary-glow:#82aaff; --accent-glow:#ff4e8d; --details-glow:#5de4c7;
  --text-light:#ffffff; --text-muted:#d8d8d8; --synth-teal:#5de4c7; --neon-pink:#ff4e8d;
}
body{ background-color:var(--bg-color); color:var(--text-muted); font-family:"Poppins",sans-serif; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
h1,h2,h3,h4,h5,h6{ font-family:"Orbitron","Rajdhani",sans-serif; color:var(--text-light); }
a{ color:var(--primary-glow); transition:color .3s ease; } a:hover,a:focus{ color:var(--accent-glow); outline:none; }
.glow{ text-shadow:0 0 5px var(--primary-glow),0 0 10px var(--primary-glow),0 0 20px var(--primary-glow),0 0 40px var(--primary-glow); }
.glow-accent{ text-shadow:0 0 5px var(--accent-glow),0 0 10px var(--accent-glow),0 0 20px var(--accent-glow),0 0 40px var(--accent-glow); }
.btn-glow{ background:transparent; border:2px solid var(--primary-glow); color:var(--primary-glow); padding:.6rem 1.25rem; border-radius:.75rem; font-weight:700; transition:all .3s ease; box-shadow:0 0 8px var(--primary-glow); }
.btn-glow:hover,.btn-glow:focus{ background:var(--primary-glow); color:var(--bg-color); box-shadow:0 0 10px var(--primary-glow),0 0 20px var(--primary-glow),0 0 30px var(--primary-glow); outline:none; }
.btn-glow-accent{ border-color:var(--accent-glow); color:var(--accent-glow); box-shadow:0 0 8px var(--accent-glow); }
.btn-glow-accent:hover,.btn-glow-accent:focus{ background:var(--accent-glow); color:var(--bg-color); box-shadow:0 0 10px var(--accent-glow),0 0 20px var(--accent-glow),0 0 30px var(--accent-glow); outline:none; }
.card-glow{ background:#121212; border-radius:1rem; box-shadow:0 0 10px var(--primary-glow), inset 0 0 10px var(--primary-glow); padding:1.25rem; color:var(--text-light); overflow:visible; }
.scroll-x{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:var(--primary-glow) transparent; }
#testimonials { padding: 4rem 1rem; } 
#testimonials .t-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } 
@media (min-width: 768px){ #testimonials .t-grid { grid-template-columns: 1fr 1fr; } }
.plan-grid { display:grid; grid-template-columns:1fr; gap:1rem; margin-top:1rem; }
@media (min-width:768px){ .plan-grid { grid-template-columns: repeat(3,1fr); } }
.plan-card { background:#121212; border:1px solid #2a2a2a; border-radius:1rem; padding:1rem; text-align:center; box-shadow:0 0 8px rgba(255,78,141,.15); }
.plan-price { font-family:'Orbitron',sans-serif; font-weight:700; font-size:1.25rem; color: var(--synth-teal); margin-bottom:.5rem; }
.footer-nda { font-size:.8rem; opacity:.9; }


/* --- EXTRAS: 3D LED coin spinner, gas meter, jar animation, visualizer polish --- */
.led-coin{width:42px;height:42px;border-radius:50%;
 background: radial-gradient(circle at 30% 30%, #fff 0%, #82aaff 8%, #0b2a55 50%, #05070c 70%) ,
             radial-gradient(circle at 70% 70%, rgba(255,78,141,.9), rgba(255,78,141,0) 60%);
 box-shadow: 0 0 12px rgba(130,170,255,.9), inset 0 0 10px rgba(93,228,199,.3);
 margin-left:.5rem}
.spin{animation: spinY 5.5s linear infinite}
@keyframes spinY{ from{transform:rotateY(0)} to{transform:rotateY(360deg)} }

/* Gas + Jar */
.gas-meter{ width:160px; background:#121212; border-radius:1rem; box-shadow:0 0 15px var(--accent-glow), inset 0 0 15px var(--accent-glow); padding:1rem; color:var(--accent-glow); font-family:'Rajdhani','Orbitron',sans-serif; text-align:center; }
.gas-meter h4{ font-weight:700; margin-bottom:.25rem; text-shadow:0 0 8px var(--accent-glow); }
.gas-bar{ height:12px; background:linear-gradient(90deg, var(--accent-glow), #b3004a); border-radius:6px; margin-top:.5rem; box-shadow:0 0 8px var(--accent-glow); transition:width .5s ease; }

.jar-container{ position:relative; width:140px; height:180px; margin:0 auto; background:#121212; border-radius:1rem; box-shadow:0 0 15px var(--details-glow), inset 0 0 15px var(--details-glow); overflow:visible; }
.jar-glass{ position:absolute; inset:0; border:3px solid var(--details-glow); border-radius:1rem; box-shadow:0 0 20px var(--details-glow); background:rgba(13,38,38,.3); backdrop-filter:blur(6px); z-index:1; }
.coin-fx{ position:absolute; width:28px; height:28px; border-radius:50%; background:radial-gradient(circle at center, var(--synth-teal), #004d40); box-shadow:0 0 8px var(--synth-teal); animation:floatUp 6s linear infinite; opacity:.9; z-index:2; }
.coin-fx.pink{ background:radial-gradient(circle at center, var(--accent-glow), #b3004a); box-shadow:0 0 8px var(--accent-glow); }
@keyframes floatUp{ 0%{ transform:translateY(150px) rotate(0); opacity:0; } 50%{ opacity:1; } 100%{ transform:translateY(-20px) rotate(360deg); opacity:0; } }