:root{
  --bg:#050916;
  --bg2:#081226;
  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.08);
  --stroke: rgba(255,255,255,.10);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);
  --accent:#42d3ff;
  --good:#38e27a;
  --warn:#ffb454;
  --shadow: 0 20px 60px rgba(0,0,0,.55);
  --r: 18px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background: radial-gradient(1200px 600px at 20% 0%, #0b1b3a 0%, var(--bg) 60%, #030512 100%); color:var(--text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; }
a{ color:inherit; }
.wrap{ width:min(1180px, 92vw); margin:0 auto; }

.topbar{
  position:sticky; top:0; z-index:50;
  background: rgba(2,6,18,.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--stroke);
}
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 0; }
.brand{ display:flex; align-items:center; gap:14px; }
.brand-mark{ position:relative; width:44px; height:44px; }
.brand-mark .moon{
  position:absolute; inset:0;
  background: radial-gradient(circle at 30% 30%, #fff 0%, #e9eef7 60%, #cbd5e1 100%);
  border-radius:999px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.08), 0 18px 45px rgba(0,0,0,.35);
}
.brand-mark .spark{
  position:absolute; right:-2px; bottom:6px; width:14px; height:14px;
  background: var(--good); border-radius:4px;
  box-shadow: 0 0 0 2px rgba(0,0,0,.45);
}
.brand-name{ font-weight:800; letter-spacing:.2px; }
.brand-name .accent{ color:var(--accent); }
.brand-tag{ color: var(--warn); font-weight:700; font-size: 13px; margin-top:2px; }
.brand-loc{ color: var(--muted); font-size: 13px; }

.top-cta{ text-align:right; }
.top-cta-label{ color: var(--muted); font-size: 11px; letter-spacing:.22em; }
.top-phone{ display:block; margin-top:4px; font-weight:900; color: #ff8a2a; font-size: 20px; text-decoration:none; }
.top-pill{
  display:inline-block; margin-top:8px; padding:8px 12px;
  border:1px solid var(--stroke); border-radius:999px;
  color: var(--text); text-decoration:none; font-size: 14px;
  background: rgba(255,255,255,.04);
}

.hero{
  position:relative; overflow:hidden;
  min-height: 520px;
  border-bottom: 1px solid var(--stroke);
  background:
    linear-gradient(90deg, rgba(3,8,20,.82) 0%, rgba(3,8,20,.70) 48%, rgba(3,8,20,.45) 100%),
    var(--hero-image);
  background-size: cover;
  background-position: center;
}
.hero-fade{
  position:absolute; inset:auto 0 0 0; height:120px;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(5,9,22,1));
}
.hero-inner{ display:grid; grid-template-columns: 1.15fr .85fr; gap:22px; padding: 64px 0 58px; position:relative; z-index:2; }
.pill{
  display:inline-block; padding: 8px 12px; border-radius:999px;
  background: rgba(0,0,0,.40); border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.88); font-size: 13px;
}
.h1{ margin: 18px 0 10px; font-size: clamp(30px, 4vw, 56px); line-height:1.05; letter-spacing:-.02em; }
.subline{ margin: 0 0 14px; font-size: 18px; color: rgba(255,255,255,.90); display:flex; flex-wrap:wrap; gap:10px; }
.subline .slogan{ font-weight:900; color: var(--warn); }
.subline .nightline{ font-weight:700; opacity:.92; }
.lead{ margin: 0 0 18px; color: rgba(255,255,255,.82); max-width: 56ch; font-size: 16px; line-height:1.6; }

.quick-points{ display:flex; flex-direction:column; gap:8px; margin: 18px 0 20px; }
.qp{ display:flex; gap:10px; align-items:flex-start; color: rgba(255,255,255,.88); }
.dot{ width:8px; height:8px; border-radius:999px; background: var(--good); margin-top:7px; flex:0 0 auto; }

.hero-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 16px; border-radius: 12px;
  text-decoration:none; font-weight:800;
  border: 1px solid rgba(255,255,255,.16);
}
.btn.primary{
  background: linear-gradient(180deg, rgba(56,226,122,1) 0%, rgba(34,192,98,1) 100%);
  color: rgba(0,0,0,.88);
  border-color: rgba(0,0,0,.10);
}
.btn.ghost{
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
}
.fineprint{ margin-top: 12px; color: rgba(255,255,255,.72); font-size: 13px; }

.hero-card{
  background: rgba(3, 8, 22, .72);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  padding: 20px;
  box-shadow: var(--shadow);
}
.card-title{ margin:0 0 10px; font-size: 20px; }
.card-text{ margin:0 0 12px; color: rgba(255,255,255,.80); line-height:1.6; }
.card-highlight{
  padding: 14px 14px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(56,226,122,.25);
  border-radius: 14px;
  color: rgba(255,255,255,.90);
  line-height:1.55;
}
.card-foot{ margin: 12px 0 0; color: rgba(255,255,255,.74); }

.section{ padding: 54px 0; }
.section.alt{ background: rgba(255,255,255,.03); border-top: 1px solid var(--stroke); border-bottom: 1px solid var(--stroke); }
.h2{ margin:0 0 10px; font-size: 28px; letter-spacing:-.01em; }
.section-sub{ margin:0 0 22px; color: var(--muted); line-height:1.6; }
.grid{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
}
.card{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--r);
  padding: 18px;
  box-shadow: 0 12px 35px rgba(0,0,0,.28);
}
.card h3{ margin:0 0 10px; font-size: 17px; }
.card ul{ margin:0; padding-left: 18px; color: rgba(255,255,255,.80); line-height:1.55; }
.card ul li{ margin: 6px 0; }

.steps{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; margin: 18px 0 20px; }
.step{ display:flex; gap:12px; align-items:flex-start; background: var(--card); border:1px solid var(--stroke); border-radius: var(--r); padding: 16px; }
.num{
  width:34px; height:34px; border-radius: 12px;
  background: rgba(66,211,255,.18);
  border:1px solid rgba(66,211,255,.30);
  display:flex; align-items:center; justify-content:center;
  font-weight:900;
}
.cta-row{ display:flex; gap:10px; flex-wrap:wrap; }

.gallery{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
figure{ margin:0; background: var(--card); border:1px solid var(--stroke); border-radius: var(--r); overflow:hidden; }
figure img{ width:100%; height:auto; display:block; }
figcaption{ padding: 12px 14px; color: rgba(255,255,255,.82); font-size: 14px; }

.two-col{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
.about p{ color: rgba(255,255,255,.82); line-height:1.7; }
.badge{
  margin-top: 12px;
  display:inline-block;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,180,84,.10);
  border: 1px solid rgba(255,180,84,.22);
  color: var(--warn);
  font-weight:900;
}
.contact-line{ display:flex; gap:10px; margin: 10px 0; color: rgba(255,255,255,.86); }
.contact-line span{ color: rgba(255,255,255,.62); width:90px; flex:0 0 auto; }
.contact-actions{ display:flex; gap:10px; flex-wrap:wrap; margin: 14px 0 16px; }

.service-area{ margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.10); }
.service-area h3{ margin:0 0 8px; font-size: 16px; }
.service-area p{ margin: 0 0 8px; color: rgba(255,255,255,.80); line-height:1.6; }
.city-list{ color: rgba(255,255,255,.86); }
.maplink a{ color: var(--accent); text-decoration:none; }

.footer{ padding: 22px 0 28px; background: rgba(0,0,0,.25); border-top: 1px solid var(--stroke); }
.footer-inner{ display:flex; justify-content:space-between; gap:14px; align-items:center; flex-wrap:wrap; }
.footer-title{ font-weight:900; }
.footer-sub{ color: rgba(255,255,255,.70); font-size: 13px; margin-top:3px; }
.footer-cta a{ text-decoration:none; font-weight:800; }
.sep{ opacity:.6; margin: 0 8px; }
.footer-small{ margin-top: 10px; color: rgba(255,255,255,.62); font-size: 12px; line-height:1.6; }

.sticky-cta{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: none;
  gap: 8px;
  padding: 10px;
  background: rgba(2,6,18,.78);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,.12);
  z-index: 100;
}
.sticky-btn{
  flex: 1 1 auto;
  display:flex; align-items:center; justify-content:center;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(56,226,122,1) 0%, rgba(34,192,98,1) 100%);
  color: rgba(0,0,0,.88);
  text-decoration:none;
  font-weight: 900;
}
.sticky-btn.secondary{
  flex: 0 0 110px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.14);
}

@media (max-width: 980px){
  .hero-inner{ grid-template-columns: 1fr; padding: 44px 0 44px; }
  .grid{ grid-template-columns: 1fr; }
  .steps{ grid-template-columns: 1fr; }
  .gallery{ grid-template-columns: 1fr; }
  .two-col{ grid-template-columns: 1fr; }
  .top-cta{ display:none; }
}

@media (max-width: 980px){
  .sticky-cta{ display:flex; }
  body{ padding-bottom: 74px; }
}