:root{
  --bg1: #071025;
  --bg2: #081833;
  --neon-blue: #00d2ff;
  --neon-magenta: #ff6bd6;
  --neon-green: #6effc5;
  --muted: #9fb3c7;
  --glass: rgba(255,255,255,0.04);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Poppins', system-ui, -apple-system,Segoe UI, Roboto, Arial;
  background: linear-gradient(135deg,var(--bg1),var(--bg2));
  color:#e7f7ff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* layout */
.container{max-width:1150px;margin:0 auto;padding:20px}
.topbar{padding:18px 0;border-bottom:1px solid rgba(255,255,255,0.03)}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:52px;height:52px;object-fit:cover;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,0.5)}
.brand-text h1{margin:0;color:var(--neon-blue);text-shadow:0 6px 18px rgba(0,210,255,0.06)}
.brand-text .tag{color:var(--muted);font-size:.9rem;margin-top:4px}

/* nav */
.nav{display:flex;gap:12px;align-items:center;float:right}
.nav a{color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:6px;font-weight:600}
.nav a.active{color:#fff;background:linear-gradient(90deg, rgba(0,210,255,0.06), rgba(255,107,214,0.03))}
.nav a:hover{color:var(--neon-blue)}

/* main area */
.main-area{display:grid;grid-template-columns:1fr 380px;gap:24px;margin-top:26px;padding-bottom:40px}
@media(max-width:980px){.main-area{grid-template-columns:1fr;}}
.card{border-radius:12px;padding:18px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.03)}
.glass{backdrop-filter: blur(6px);border:1px solid rgba(255,255,255,0.04)}

/* hero left */
.title{font-size:1.9rem;margin:0 0 6px;color:#fff}
.lead{color:var(--muted);margin:0 0 16px}

/* cable svg */
.cable-wrap{position:relative;margin:12px 0 20px}
#cableSVG{width:100%;height:120px;display:block}
#cablePath{stroke: url(#unused); stroke-linecap:round; filter: drop-shadow(0 6px 12px rgba(0,0,0,0.6));}
#plug rect{fill:var(--neon-blue)}
#jack{fill:var(--neon-magenta)}
#jackGlow{stroke:var(--neon-magenta);opacity:0}

/* status */
.cable-status{margin-top:8px;color:var(--muted);font-weight:700}
#statusText{color:var(--neon-blue);margin-left:6px}

/* stats */
.stats{display:flex;gap:12px;margin-top:14px}
.stat{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));padding:12px;border-radius:10px;min-width:110px;text-align:center;border:1px solid rgba(255,255,255,0.02)}
.stat-num{font-size:1.4rem;font-weight:800;color:var(--neon-magenta);text-shadow:0 4px 22px rgba(255,107,214,0.06)}
.stat-label{color:var(--muted);font-size:.85rem;margin-top:6px}

/* packages panel */
.packages-list{display:flex;flex-direction:column;gap:12px;max-height:520px;overflow:auto;padding-right:6px}
.pkg{padding:12px;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));border:1px solid rgba(255,255,255,0.03)}
.pkg.featured{border:1px solid rgba(0,210,255,0.18);box-shadow:0 12px 36px rgba(0,210,255,0.04);transform:translateY(-2px)}
.pkg-top{display:flex;justify-content:space-between;align-items:center}
.pkg-price{color:var(--neon-green);font-weight:900;font-size:1.05rem}
.pkg-img{width:100%;height:110px;object-fit:cover;border-radius:8px;margin:10px 0}
.pkg-features{list-style:none;padding:0;margin:0;color:var(--muted)}
.pkg-features li{display:flex;gap:10px;align-items:center;padding:6px 0}
.feat.yes{color:var(--neon-green);font-weight:800}
.feat.no{color:#ff6b6b;font-weight:800}

/* buttons */
.btn{display:inline-block;padding:8px 12px;border-radius:10px;text-decoration:none;font-weight:800;border:1px solid transparent}
.btn.neon{background:linear-gradient(90deg, rgba(0,210,255,0.08), rgba(255,107,214,0.06));color:#fff;border:1px solid rgba(0,210,255,0.12);box-shadow:0 10px 30px rgba(0,210,255,0.04)}
.btn.ghost{background:transparent;color:var(--muted);border:1px solid rgba(255,255,255,0.03)}

/* login */
.form{display:flex;flex-direction:column;gap:12px}
.form label{display:flex;flex-direction:column;color:var(--muted);font-weight:700}
.form input{padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:#eafeff}

/* footer */
.footer{padding:18px 0;border-top:1px solid rgba(255,255,255,0.02);color:var(--muted);margin-top:18px}

/* small screens */
@media(max-width:520px){
  .nav{display:none}
  .stats{flex-direction:column}
  .packages-list{max-height:unset}
}

/* subtle animations */
@keyframes jackPulse {
  0%{transform:scale(0.96);opacity:0.08}
  50%{transform:scale(1);opacity:0.22}
  100%{transform:scale(0.96);opacity:0.08}
}
#jack{animation: jackPulse 1800ms infinite}

/* Cable drawing initial state (stroke-dash) controlled by JS */