:root{
  --bg:#050607;
  --panel: rgba(0,0,0,.55);
  --panel2: rgba(0,0,0,.40);
  --line: rgba(57,255,20,.18);
  --neon: #39ff14;
  --neon2:#8dff7b;
  --warn:#f7b500;
  --red:#ff3b3b;
  --txt: rgba(235,255,235,.92);
  --muted: rgba(140,255,140,.72);
  --shadow: 0 0 24px rgba(57,255,20,.25);
  --shadow2: 0 0 50px rgba(57,255,20,.14);
  --radius: 18px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--txt);
  background:
    radial-gradient(1200px 700px at 15% 10%, rgba(57,255,20,.10), transparent 60%),
    radial-gradient(800px 500px at 85% 20%, rgba(57,255,20,.08), transparent 60%),
    radial-gradient(700px 600px at 65% 85%, rgba(57,255,20,.06), transparent 60%),
    linear-gradient(180deg, #020303 0%, var(--bg) 100%);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  overflow-x:hidden;
}

#starfield{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:-3;
  opacity:.55;
}

.ghosts{
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  overflow:hidden;
}
.ghost{
  position:absolute;
  filter: blur(0.2px);
  opacity:.18;
  mix-blend-mode: screen;
  border: 1px solid rgba(57,255,20,.12);
  box-shadow: var(--shadow2);
  border-radius: 999px;
}
.car{
  width: 420px;
  height: 110px;
  background: radial-gradient(circle at 30% 30%, rgba(57,255,20,.12), transparent 55%),
              radial-gradient(circle at 70% 30%, rgba(57,255,20,.10), transparent 55%),
              linear-gradient(90deg, rgba(57,255,20,.10), rgba(0,0,0,0));
}
.car:before,.car:after{
  content:"";
  position:absolute;
  bottom:-16px;
  width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(57,255,20,.16);
  box-shadow: 0 0 18px rgba(57,255,20,.18);
}
.car:before{ left: 70px; }
.car:after{ right: 70px; }

.car1{ top:18%; left:-500px; animation: drift1 22s linear infinite; }
.car2{ top:55%; left:-520px; animation: drift2 28s linear infinite; transform: scale(.9); }
.car3{ top:78%; left:-540px; animation: drift3 34s linear infinite; transform: scale(.78); opacity:.14; }

@keyframes drift1{ to{ transform: translateX(calc(100vw + 1100px)); } }
@keyframes drift2{ to{ transform: translateX(calc(100vw + 1300px)) scale(.9); } }
@keyframes drift3{ to{ transform: translateX(calc(100vw + 1500px)) scale(.78); } }

.wrap{
  max-width:1200px;
  margin:0 auto;
  padding: 0 18px 40px;
}

.topbar{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(0,0,0,.60), rgba(0,0,0,.25));
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding: 14px 18px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.logoMark{
  width:42px;height:42px;
  position:relative;
  border-radius:14px;
  border:1px solid rgba(57,255,20,.28);
  box-shadow: var(--shadow);
  background: radial-gradient(circle at 30% 30%, rgba(57,255,20,.25), transparent 55%),
              radial-gradient(circle at 70% 70%, rgba(57,255,20,.12), transparent 60%),
              rgba(0,0,0,.35);
}
.logoMark .ring{
  position:absolute; inset:7px;
  border-radius:14px;
  border:1px solid rgba(57,255,20,.30);
  box-shadow: 0 0 24px rgba(57,255,20,.20);
}
.logoMark .ufo{
  position:absolute;
  left:9px; right:9px; top:15px;
  height:12px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(57,255,20,.10), rgba(57,255,20,.35), rgba(57,255,20,.10));
  box-shadow: 0 0 18px rgba(57,255,20,.20);
}
.logoMark .ufo::after{
  content:"";
  position:absolute;
  left:12px; right:12px; top:-6px;
  height:7px;
  border-radius:999px;
  background: rgba(57,255,20,.18);
  border: 1px solid rgba(57,255,20,.20);
}

.brandText .name{
  font-family: Orbitron, Inter, sans-serif;
  font-weight:800;
  letter-spacing:.6px;
  color: var(--neon);
  text-shadow: 0 0 18px rgba(57,255,20,.35);
}
.brandText .tag{
  font-size:12px;
  color: var(--muted);
  margin-top:2px;
}

.nav{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.nav a{
  color: rgba(220,255,220,.88);
  text-decoration:none;
  font-weight:600;
  font-size:13px;
  padding:10px 10px;
  border-radius: 12px;
  border:1px solid transparent;
  transition: .18s ease;
}
.nav a:hover{
  border-color: rgba(57,255,20,.22);
  background: rgba(57,255,20,.06);
  box-shadow: 0 0 22px rgba(57,255,20,.10);
}
.nav .btn{
  border:1px solid rgba(57,255,20,.28);
  background: rgba(57,255,20,.08);
  color: var(--neon);
  box-shadow: var(--shadow);
}

.ticker{
  border-bottom: 1px solid rgba(57,255,20,.14);
  background: rgba(0,0,0,.40);
  overflow:hidden;
}
.ticker__track{
  display:flex;
  gap:30px;
  padding: 10px 0;
  width:max-content;
  animation: scroll 26s linear infinite;
}
.ticker__item{
  color: rgba(220,255,220,.85);
  font-size:13px;
  white-space:nowrap;
}
@keyframes scroll{
  to{ transform: translateX(-50%); }
}

.hero{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:18px;
  padding: 22px 0 8px;
}
@media (max-width: 980px){
  .hero{ grid-template-columns:1fr; }
}

.pill{
  display:inline-block;
  font-size:12px;
  letter-spacing:.8px;
  color: rgba(200,255,200,.9);
  border:1px solid rgba(57,255,20,.18);
  background: rgba(0,0,0,.35);
  padding: 9px 12px;
  border-radius: 999px;
  box-shadow: 0 0 20px rgba(57,255,20,.12);
}

h1{
  font-family: Orbitron, Inter, sans-serif;
  margin:14px 0 10px;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.10;
  color: var(--neon);
  text-shadow: 0 0 22px rgba(57,255,20,.30);
}
h1 .sub{
  display:block;
  margin-top:10px;
  font-size: clamp(14px, 1.35vw, 16px);
  color: rgba(220,255,220,.85);
  font-family: Inter, sans-serif;
  font-weight:600;
  letter-spacing:.2px;
  text-shadow:none;
}

.lead{
  color: rgba(230,255,230,.88);
  max-width: 62ch;
  margin: 0 0 16px;
}

.ctaRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 14px;
  text-decoration:none;
  font-weight:800;
  font-size:13px;
  color: rgba(235,255,235,.92);
  border:1px solid rgba(57,255,20,.18);
  background: rgba(0,0,0,.35);
  box-shadow: 0 0 24px rgba(0,0,0,.35);
  transition:.18s ease;
}
.cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 26px rgba(57,255,20,.16);
  border-color: rgba(57,255,20,.28);
}
.cta.primary{
  color: #061006;
  background: linear-gradient(180deg, rgba(57,255,20,.95), rgba(57,255,20,.60));
  border-color: rgba(57,255,20,.55);
  box-shadow: 0 0 30px rgba(57,255,20,.22);
}
.cta.small{ padding: 10px 12px; font-weight:900; }

.stats{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:10px;
}
@media (max-width: 720px){
  .stats{ grid-template-columns: repeat(2, 1fr); }
}
.stat{
  border:1px solid rgba(57,255,20,.14);
  background: rgba(0,0,0,.35);
  border-radius: var(--radius);
  padding: 12px 12px;
  box-shadow: 0 0 22px rgba(57,255,20,.08);
}
.statNum{
  font-family: Orbitron, Inter, sans-serif;
  color: var(--neon);
  font-weight:800;
  font-size: 20px;
  text-shadow: 0 0 18px rgba(57,255,20,.28);
}
.statLab{
  margin-top:4px;
  font-size:12px;
  color: rgba(200,255,200,.78);
}

.glass{
  border:1px solid rgba(57,255,20,.16);
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35));
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  overflow:hidden;
}
.panel{ padding:14px; }
.panelHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}
.panelTitle{
  font-family: Orbitron, Inter, sans-serif;
  color: rgba(220,255,220,.92);
  font-weight:800;
  letter-spacing:.5px;
}
.panelBadge{
  font-size:11px;
  font-weight:900;
  color: var(--neon);
  border:1px solid rgba(57,255,20,.22);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(57,255,20,.06);
}

.sysGrid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:10px;
}
.sysCard{
  border:1px solid rgba(57,255,20,.12);
  background: rgba(0,0,0,.30);
  border-radius: 16px;
  padding: 10px 10px;
}
.sysName{
  color: rgba(220,255,220,.85);
  font-weight:800;
  font-size:12px;
}
.sysVal{
  margin-top:6px;
  font-family: Orbitron, Inter, sans-serif;
  color: var(--neon);
  font-weight:800;
}
.sysSmall{
  margin-top:6px;
  font-size:12px;
  color: rgba(200,255,200,.70);
}
.dot{
  display:inline-block;
  width:9px;height:9px;border-radius:50%;
  margin-right:8px;
  box-shadow: 0 0 14px rgba(57,255,20,.25);
}
.dot.ok{ background: var(--neon); }
.dot.warn{ background: var(--warn); box-shadow: 0 0 14px rgba(247,181,0,.25); }

.divider{
  height:1px;
  background: rgba(57,255,20,.14);
  margin: 12px 0;
}

.microLog{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height: 140px;
  overflow:auto;
  padding-right:4px;
}
.logLine{
  font-size:12px;
  color: rgba(220,255,220,.82);
  padding: 8px 10px;
  border-radius: 14px;
  border:1px solid rgba(57,255,20,.12);
  background: rgba(0,0,0,.25);
}
.logLine strong{ color: var(--neon); font-family: Orbitron, Inter, sans-serif; }

.treeModule{
  margin-top:12px;
  border:1px solid rgba(57,255,20,.18);
  background: rgba(0,0,0,.35);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  overflow:hidden;
}
.treeTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 14px;
  border-bottom:1px solid rgba(57,255,20,.14);
}
.treeTitle{
  font-family: Orbitron, Inter, sans-serif;
  font-weight:900;
  color: rgba(220,255,220,.92);
}
.treeControls{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.tbtn{
  cursor:pointer;
  border-radius: 12px;
  padding: 9px 10px;
  font-weight:900;
  font-size:12px;
  border:1px solid rgba(57,255,20,.18);
  background: rgba(0,0,0,.30);
  color: rgba(235,255,235,.90);
  transition: .18s ease;
}
.tbtn:hover{ border-color: rgba(57,255,20,.28); box-shadow: 0 0 18px rgba(57,255,20,.12); transform: translateY(-1px); }
.tbtn.active{ color: var(--neon); background: rgba(57,255,20,.06); }
.tbtn.go{ color:#061006; background: linear-gradient(180deg, rgba(57,255,20,.95), rgba(57,255,20,.60)); border-color: rgba(57,255,20,.55); }

.treeBody{
  display:grid;
  grid-template-columns: 1fr 260px;
  gap:12px;
  padding: 14px;
}
@media (max-width: 980px){
  .treeBody{ grid-template-columns:1fr; }
}

.treeStand{
  position:absolute;
}

.treeLights{
  position:relative;
  border-radius: var(--radius);
  border:1px solid rgba(57,255,20,.14);
  background: radial-gradient(circle at 50% 30%, rgba(57,255,20,.10), transparent 55%),
              rgba(0,0,0,.30);
  padding: 18px;
  min-height: 220px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 24px;
  align-content:center;
  justify-items:center;
}

.lamp{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border:1px solid rgba(57,255,20,.16);
  background: rgba(0,0,0,.45);
  box-shadow: inset 0 0 12px rgba(0,0,0,.6);
  position:relative;
}
.lamp::after{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius:50%;
  background: rgba(255,255,255,.04);
  filter: blur(.2px);
}

.lamp.on{
  box-shadow: 0 0 28px rgba(57,255,20,.25), inset 0 0 8px rgba(0,0,0,.35);
  border-color: rgba(57,255,20,.28);
  background: rgba(57,255,20,.12);
}
.lamp.amb.on{ background: rgba(247,181,0,.22); border-color: rgba(247,181,0,.35); box-shadow: 0 0 30px rgba(247,181,0,.22); }
.lamp.green.on{ background: rgba(57,255,20,.26); }
.lamp.red.on{ background: rgba(255,59,59,.22); border-color: rgba(255,59,59,.35); box-shadow: 0 0 30px rgba(255,59,59,.22); }

.treeReadout{
  border-radius: var(--radius);
  border:1px solid rgba(57,255,20,.14);
  background: rgba(0,0,0,.30);
  padding: 12px 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.readLine{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  color: rgba(220,255,220,.85);
  font-size:12px;
}
.readLine strong{
  font-family: Orbitron, Inter, sans-serif;
  color: var(--neon);
  letter-spacing:.3px;
}
.readLine.small em{ color: rgba(200,255,200,.70); }

.section{
  margin-top: 26px;
  padding-top: 10px;
}
.sectionHead{
  margin-bottom: 12px;
}
.sectionHead h2{
  margin: 0 0 6px;
  font-family: Orbitron, Inter, sans-serif;
  color: var(--neon);
  text-shadow: 0 0 18px rgba(57,255,20,.25);
}
.sectionHead p{
  margin:0;
  color: rgba(220,255,220,.80);
}

.cards{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:10px;
}
@media (max-width: 1100px){
  .cards{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .cards{ grid-template-columns: 1fr; }
}
.card{
  border-radius: var(--radius);
  border:1px solid rgba(57,255,20,.14);
  background: rgba(0,0,0,.35);
  padding: 12px 12px;
  box-shadow: 0 0 22px rgba(57,255,20,.08);
}
.cardDate{
  font-size:12px;
  color: rgba(200,255,200,.75);
}
.cardTitle{
  margin-top:6px;
  font-weight:900;
  color: rgba(235,255,235,.92);
}
.cardBody{
  margin-top:6px;
  color: rgba(220,255,220,.80);
  font-size:13px;
}
.cardMeta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}
.chip{
  font-size:11px;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid rgba(57,255,20,.14);
  background: rgba(57,255,20,.05);
  color: rgba(220,255,220,.85);
}

.pricing{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}
@media (max-width: 980px){
  .pricing{ grid-template-columns:1fr; }
}
.priceCard{
  border-radius: var(--radius);
  border:1px solid rgba(57,255,20,.14);
  background: rgba(0,0,0,.35);
  padding: 14px 14px;
  box-shadow: 0 0 22px rgba(57,255,20,.08);
}
.priceCard.featured{
  border-color: rgba(57,255,20,.30);
  box-shadow: 0 0 36px rgba(57,255,20,.14);
}
.priceHead{
  font-weight:900;
  color: rgba(235,255,235,.92);
}
.price{
  margin-top:8px;
  font-family: Orbitron, Inter, sans-serif;
  font-size: 28px;
  color: var(--neon);
}
.priceCard ul{
  margin: 10px 0 12px;
  padding-left: 18px;
  color: rgba(220,255,220,.82);
  font-size:13px;
}
.priceCard li{ margin: 6px 0; }

.contactGrid{
  display:grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap:10px;
}
@media (max-width: 980px){
  .contactGrid{ grid-template-columns:1fr; }
}
.contactCard, .contactForm{
  border-radius: var(--radius);
  border:1px solid rgba(57,255,20,.14);
  background: rgba(0,0,0,.35);
  padding: 14px 14px;
  box-shadow: 0 0 22px rgba(57,255,20,.08);
}
.contactLabel{
  font-size:12px;
  color: rgba(200,255,200,.78);
}
.contactVal{
  margin-top:6px;
  font-weight:900;
  color: rgba(235,255,235,.92);
}
.contactHint{
  margin-top:6px;
  font-size:12px;
  color: rgba(220,255,220,.75);
}

.contactForm .formRow{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom: 10px;
}
label{
  font-size:12px;
  color: rgba(200,255,200,.78);
  font-weight:800;
}
input, textarea{
  background: rgba(0,0,0,.35);
  border:1px solid rgba(57,255,20,.16);
  border-radius: 14px;
  padding: 10px 10px;
  color: rgba(235,255,235,.92);
  outline:none;
}
input:focus, textarea:focus{
  border-color: rgba(57,255,20,.32);
  box-shadow: 0 0 20px rgba(57,255,20,.12);
}
.formTiny{
  margin-top:8px;
  font-size:11px;
  color: rgba(220,255,220,.65);
}

.footer{
  margin-top: 28px;
  border-top: 1px solid rgba(57,255,20,.14);
  padding: 18px 0 10px;
}
.footerInner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.footerName{
  font-family: Orbitron, Inter, sans-serif;
  color: var(--neon);
  font-weight:900;
}
.footerSmall{
  margin-top:6px;
  font-size:12px;
  color: rgba(220,255,220,.72);
}
.footerRight{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.footerRight a{
  color: rgba(220,255,220,.82);
  text-decoration:none;
  font-weight:800;
  font-size:12px;
}
.footerRight a:hover{ color: var(--neon); }
/* ===== Real Drag Tree Layout ===== */
.treeBody--real{
  grid-template-columns: 1fr 260px;
  align-items: center;
}
@media (max-width: 980px){
  .treeBody--real{ grid-template-columns: 1fr; }
}

.treeReal{
  position:relative;
  min-height: 340px;
  border-radius: var(--radius);
  border:1px solid rgba(57,255,20,.14);
  background:
    radial-gradient(circle at 50% 25%, rgba(57,255,20,.10), transparent 55%),
    rgba(0,0,0,.30);
  display:flex;
  justify-content:center;
  padding: 16px 10px;
  overflow:hidden;
}

.treePole{
  position:absolute;
  top:10px;
  bottom:16px;
  width: 26px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.55));
  border:1px solid rgba(57,255,20,.14);
  box-shadow: 0 0 28px rgba(57,255,20,.08);
}

.treeHead, .treeStack{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 12px;
}

.treeHead{
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(0,0,0,.28);
  border:1px solid rgba(57,255,20,.12);
  box-shadow: 0 0 18px rgba(57,255,20,.08);
}

.treeStack{
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(0,0,0,.22);
  border:1px solid rgba(57,255,20,.10);
}

.treeBase{
  position:absolute;
  bottom: 10px;
  width: 120px;
  height: 24px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  border:1px solid rgba(57,255,20,.14);
  box-shadow: 0 0 22px rgba(57,255,20,.10);
}

/* Make the lamps feel more like real housings */
.treeReal .lamp{
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  border:1px solid rgba(57,255,20,.18);
  box-shadow: inset 0 0 14px rgba(0,0,0,.75);
}

.treeReal .lamp::after{
  inset: 12px;
  opacity: .95;
}

/* More “bulb pop” when lit */
.treeReal .lamp.on{
  transform: translateZ(0) scale(1.03);
}

/* Slight different glow tones per color */
.treeReal .lamp.amb.on{
  box-shadow: 0 0 38px rgba(247,181,0,.30), inset 0 0 10px rgba(0,0,0,.35);
}
.treeReal .lamp.green.on{
  box-shadow: 0 0 40px rgba(57,255,20,.28), inset 0 0 10px rgba(0,0,0,.35);
}
.treeReal .lamp.red.on{
  box-shadow: 0 0 40px rgba(255,59,59,.28), inset 0 0 10px rgba(0,0,0,.35);
}
/* ===== Dropdown Menu (Emoji) ===== */
.dropdown{ position:relative; }

.dropBtn{
  cursor:pointer;
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 900;
  font-size: 13px;
  border: 1px solid rgba(57,255,20,.22);
  background: rgba(0,0,0,.35);
  color: rgba(235,255,235,.92);
  box-shadow: 0 0 20px rgba(57,255,20,.10);
  transition: .18s ease;
}
.dropBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(57,255,20,.35);
  box-shadow: 0 0 26px rgba(57,255,20,.18);
}

.dropPanel{
  position:absolute;
  right:0;
  top: calc(100% + 10px);
  min-width: 210px;
  display:none;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(57,255,20,.20);
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 40px rgba(0,0,0,.55);
  z-index: 999;
}

.dropPanel.open{ display:block; }

.dropPanel a{
  display:block;
  padding: 11px 12px;
  text-decoration:none;
  color: rgba(235,255,235,.92);
  font-weight: 900;
  font-size: 13px;
  border-bottom: 1px solid rgba(57,255,20,.12);
}
.dropPanel a:last-child{ border-bottom:0; }

.dropPanel a:hover{
  background: rgba(57,255,20,.08);
  color: var(--neon);
}

/* Mobile: make dropdown easier to tap */
@media (max-width: 720px){
  .dropPanel{ min-width: 230px; }
  .dropPanel a{ padding: 13px 12px; font-size: 14px; }
}
/* ===== Logo Image Replacement ===== */
.logoImgWrap{
  width: 52px;
  height: 52px;
  border-radius: 14px;
  padding: 4px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(57,255,20,.35);
  box-shadow:
    0 0 18px rgba(57,255,20,.45),
    inset 0 0 10px rgba(0,0,0,.6);
  display:flex;
  align-items:center;
  justify-content:center;
}

.logoImg{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border-radius:10px;
  filter:
    drop-shadow(0 0 10px rgba(57,255,20,.55))
    drop-shadow(0 0 22px rgba(57,255,20,.35));
}

.treeBody--hold{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap: 14px;
  align-items: center;
}
@media (max-width: 980px){
  .treeBody--hold{ grid-template-columns: 1fr; }
}

.pedalBtn{
  width:100%;
  margin-top: 12px;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(57,255,20,.25);
  background: rgba(0,0,0,.40);
  color: rgba(235,255,235,.92);
  font-weight: 900;
  letter-spacing: .6px;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(57,255,20,.12);
  user-select:none;
  -webkit-user-select:none;
  touch-action: manipulation;
}
.pedalBtn .pedalHint{
  display:block;
  margin-top: 6px;
  font-weight: 700;
  font-size: 12px;
  opacity: .75;
}
.pedalBtn:active,
.pedalBtn.isDown{
  transform: translateY(1px);
  border-color: rgba(57,255,20,.45);
  box-shadow: 0 0 34px rgba(57,255,20,.22);
}
/* ===== Classic Tree Layout (side prestage/stage) ===== */
.treeReal--classic{ padding: 18px 12px; }

.treeClassic{
  position:relative;
  z-index:2;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap: 16px;
  margin-top: 10px;
}

.sideBulbs{
  display:flex;
  flex-direction:column;
  gap: 12px;
  padding-top: 8px;
}

.mainBulbs{
  display:flex;
  flex-direction:column;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(0,0,0,.22);
  border:1px solid rgba(57,255,20,.10);
}

.sideBulbs .lamp{
  width: 44px;
  height: 44px;
}
/* ===== FIX TREE LAYOUT CLIPPING ===== */
.treeBody--hold{
  grid-template-columns: minmax(280px, 1fr) 320px;
  align-items: center;
}

.treeReal{
  overflow: visible !important;
  display: flex;
  justify-content: center;
}
/* ===== Classic tree alignment fix ===== */
.treeClassic{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.sideBulbs{
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}

.mainBulbs{
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(57,255,20,.18);
}
.treePole{
  z-index: 0;
  opacity: .35;
}

.treeClassic,
.sideBulbs,
.mainBulbs{
  position: relative;
  z-index: 2;
}
/* ===== 2-Lane Tree Layout ===== */
.treeBody--2lane{
  display:grid;
  grid-template-columns: minmax(320px, 1fr) 360px;
  gap: 16px;
  align-items: center;
}
@media (max-width: 980px){
  .treeBody--2lane{ grid-template-columns: 1fr; }
}

.tree2lane{
  position: relative;
  overflow: visible;
  display:flex;
  justify-content:center;
  padding: 18px 10px;
}

.lanes{
  position: relative;
  z-index: 2;
  display:flex;
  gap: 34px;
  align-items:flex-start;
  justify-content:center;
}

.lane{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 14px;
}

.laneTop{
  display:flex;
  flex-direction:column;
  gap: 10px;
  align-items:center;
}

.miniRow{
  display:flex;
  gap: 10px;
}

.miniLamp{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(57,255,20,.18);
  box-shadow: inset 0 0 10px rgba(0,0,0,.7);
  position: relative;
}
.miniLamp.on{
  box-shadow:
    0 0 16px rgba(57,255,20,.35),
    0 0 28px rgba(57,255,20,.20),
    inset 0 0 12px rgba(0,0,0,.35);
}
.miniLamp.pre.on{
  background: rgba(57,255,20,.85);
}
.miniLamp.stg.on{
  background: rgba(57,255,20,.95);
}

.laneStack{
  display:flex;
  flex-direction:column;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(57,255,20,.14);
}

/* keep your existing .lamp styling; this just sizes consistently */
.laneStack .lamp{
  width: 54px;
  height: 54px;
}

/* Pole behind everything */
.treePole{ z-index: 0; opacity: .30; }
.lanes, .laneTop, .laneStack{ position: relative; z-index: 2; }

/* Pedal row */
.pedalRow{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
.pedalBtn span{
  display:block;
  font-size: 12px;
  opacity: .75;
  margin-top: 4px;
}