:root{
  --lime:#B7FF00;
  --yellow:#FFF400;
  --white:#FFFFFF;
  --black:#050505;
  --panel:#0d0f0d;
  --muted:#aeb6ae;
  --line:#293229;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--black);color:var(--white);
  font-family:Arial,Helvetica,sans-serif;line-height:1.55
}
a{color:inherit;text-decoration:none}
.wrap{width:min(1180px,92%);margin:auto}
.topbar{
  background:var(--lime);color:#000;text-align:center;font-weight:1000;
  padding:8px 12px;letter-spacing:.05em
}
header{
  position:sticky;top:0;z-index:50;background:rgba(5,5,5,.96);
  border-bottom:1px solid #222;backdrop-filter:blur(10px)
}
nav{
  min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:18px
}
.brand{
  display:flex;align-items:center;gap:10px;font-weight:1000;letter-spacing:.07em;
  font-size:1.2rem;font-style:italic
}
.brand-mark{
  width:42px;height:42px;border:3px solid var(--lime);border-radius:50%;
  display:grid;place-items:center;color:var(--lime);font-weight:1000;
  box-shadow:0 0 18px rgba(183,255,0,.35)
}
.brand span{color:var(--lime)}
.navlinks{display:flex;gap:18px;align-items:center;flex-wrap:wrap;font-weight:900;font-size:.9rem}
.navlinks a{padding:8px 3px;border-bottom:2px solid transparent}
.navlinks a:hover,.navlinks a.active{color:var(--lime);border-color:var(--lime)}
.callbtn{
  border:2px solid var(--lime);padding:11px 15px;font-weight:1000;color:var(--lime)
}
.callbtn:hover{background:var(--lime);color:#000}
.hero{
  position:relative;min-height:620px;display:flex;align-items:center;overflow:hidden;
  background:#080808 center/cover no-repeat
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.94),rgba(0,0,0,.70) 48%,rgba(0,0,0,.22))
}
.hero .content{position:relative;z-index:2;padding:72px 0;max-width:760px}
.kicker{color:var(--lime);font-weight:1000;text-transform:uppercase;letter-spacing:.16em}
h1{
  font-size:clamp(3.3rem,8vw,7rem);line-height:.88;margin:14px 0 24px;
  text-transform:uppercase;letter-spacing:-.055em
}
h1 em{font-style:normal;color:var(--lime);text-shadow:0 0 26px rgba(183,255,0,.34)}
.lead{font-size:1.16rem;color:#d7ddd7;max-width:700px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--lime);
  padding:13px 18px;text-transform:uppercase;font-weight:1000;letter-spacing:.04em
}
.btn.fill{background:var(--lime);color:#000}
section{padding:70px 0}
.section-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:28px}
h2{font-size:clamp(2.2rem,5vw,4rem);line-height:.95;margin:6px 0;text-transform:uppercase}
.sub{color:var(--muted);max-width:690px}
.grid3,.grid4{display:grid;gap:16px}
.grid3{grid-template-columns:repeat(3,1fr)}
.grid4{grid-template-columns:repeat(4,1fr)}
.card{
  background:linear-gradient(145deg,#141814,#090a09);border:1px solid var(--line);
  padding:24px;min-height:200px
}
.card h3{margin:10px 0;text-transform:uppercase}
.card p{color:var(--muted);margin:0}
.icon{font-size:1.8rem;color:var(--lime)}
.banner{
  background:var(--lime);color:#000;text-align:center;font-weight:1000;
  text-transform:uppercase;letter-spacing:.06em;padding:22px
}
.page-hero{padding:86px 0 56px;border-bottom:1px solid #222;background:#090909}
.page-hero h1{font-size:clamp(3rem,7vw,6rem);margin-bottom:12px}
.preview-img{
  width:100%;display:block;border:1px solid #242824;background:#0b0b0b
}
.service-badge{
  display:inline-flex;align-items:center;gap:10px;background:#080808;border:2px solid var(--lime);
  padding:10px 14px;font-weight:1000;text-transform:uppercase;letter-spacing:.04em;
  box-shadow:0 0 20px rgba(183,255,0,.20)
}
.service-badge .badge-icon{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--lime);color:#000;font-size:1.2rem
}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.contact-box{background:#0d0f0d;border:1px solid var(--line);padding:24px}
input,textarea{
  width:100%;padding:13px;background:#070807;color:#fff;border:1px solid #384038;
  margin:6px 0 14px;font:inherit
}
textarea{min-height:130px}
.map-box{
  min-height:330px;border:2px solid var(--lime);background:
  linear-gradient(135deg,rgba(183,255,0,.12),transparent 50%),#111;
  position:relative;display:grid;place-items:center;text-align:center;padding:24px
}
.map-pin{font-size:3rem;color:var(--lime)}
footer{border-top:1px solid #222;padding:30px 0;color:#b2bbb2}
footer strong{color:var(--lime)}
/* 3-second lightning intro */
#lightningIntro{
  position:fixed;inset:0;z-index:9999;pointer-events:none;overflow:hidden;
  background:rgba(0,0,0,.08);animation:introFade 3s forwards
}
.bolt{
  position:absolute;top:-12vh;width:7px;height:125vh;
  filter:drop-shadow(0 0 12px currentColor);
  opacity:0;transform:rotate(18deg);
  animation:flashBolt .56s ease-in-out infinite
}
.bolt::before,.bolt::after{
  content:"";position:absolute;width:100%;height:100%;background:currentColor;
  clip-path:polygon(45% 0,68% 0,51% 42%,78% 42%,28% 100%,43% 56%,18% 56%)
}
.b1{left:18%;color:var(--lime);animation-delay:.05s}
.b2{left:49%;color:var(--yellow);animation-delay:.22s}
.b3{left:76%;color:var(--white);animation-delay:.38s}
@keyframes flashBolt{
  0%,100%{opacity:0}
  10%{opacity:.95}
  18%{opacity:.12}
  30%{opacity:.88}
  38%{opacity:0}
}
@keyframes introFade{
  0%,82%{opacity:1}
  100%{opacity:0;visibility:hidden}
}
@media(max-width:850px){
  .navlinks{display:none}
  .grid3,.grid4,.contact-grid{grid-template-columns:1fr}
  .hero{min-height:560px}
}