:root{
  --bg:#0c0f12;
  --panel:#12161b;
  --text:#e8edf2;
  --muted:#b7c1cc;
  --brand:#2bdc72;     /* neon green */
  --brand-2:#1fb6ff;   /* cool accent */
  --card:#141a20;
  --ring:#2bdc72;
  --shadow:0 10px 24px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Inter,Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#0a0d10, #0f1419 45%, #0a0d10);
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:16px;
  padding:10px 18px; background:#0d1217; border-bottom:1px solid #202830;
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text); font-weight:700}
.brand img{height:40px; width:auto}
.site-nav{margin-left:auto; display:flex; gap:10px}
.site-nav a{
  color:var(--muted); text-decoration:none; padding:10px 14px; border-radius:10px;
}
.site-nav a:hover,.site-nav a.active{color:var(--text); background:#172028}

/* Mobile nav */
#nav-toggle{display:none}
.burger{display:none}
@media (max-width:860px){
  .burger{display:grid; place-items:center; width:44px; height:44px; cursor:pointer}
  .burger span,.burger span:before,.burger span:after{
    content:""; display:block; height:2px; width:22px; background:var(--text); position:relative
  }
  .burger span:before{position:absolute; transform:translateY(-6px)}
  .burger span:after{position:absolute; transform:translateY(6px)}
  .site-nav{position:absolute; right:12px; top:62px; background:#0d1217; border:1px solid #202830; border-radius:12px; padding:8px; display:none; flex-direction:column; width:220px}
  #nav-toggle:checked ~ .site-nav{display:flex}
}

/* Hero */
.hero{
  display:grid; grid-template-columns:1.2fr 1fr; gap:28px; padding:48px 20px; max-width:1100px; margin:0 auto;
}
.hero-copy h1{font-size:clamp(28px,4.4vw,42px); margin:0 0 6px}
.hero-copy p{color:var(--muted); font-size:18px}
.cta-row{display:flex; gap:12px; margin:18px 0}
.btn{
  display:inline-block; padding:12px 16px; border-radius:12px; text-decoration:none; color:var(--text); background:#1a222b; border:1px solid #26313b; box-shadow:var(--shadow)
}
.btn.primary{background:linear-gradient(135deg,var(--brand),#76ffb5); color:#04110a; font-weight:700; border:none}
.btn.primary:focus{outline:3px solid #83ffc5; outline-offset:2px}
.tiny{color:#97a6b2; font-size:12px}
.hero-art img{width:100%; height:auto; border-radius:16px; border:1px solid #202830; box-shadow:var(--shadow)}
@media (max-width:920px){ .hero{grid-template-columns:1fr; padding-top:28px} }

/* Trust bullets */
.trust{max-width:1100px; margin:10px auto 0; padding:0 20px}
.bullets{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; list-style:none; padding:0; margin:0}
.bullets li{background:#11161c; border:1px solid #1e2730; padding:12px 14px; border-radius:12px; text-align:center}
@media (max-width:860px){ .bullets{grid-template-columns:repeat(2,1fr)} }

/* Feature cards */
.cards{max-width:1100px; margin:26px auto; padding:0 20px; display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.card{background:var(--card); border:1px solid #1d262f; border-radius:16px; padding:18px}
.card h3{margin-top:4px}
@media (max-width:1024px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .cards{grid-template-columns:1fr} }

/* Page hero (Services) */
.page-hero{max-width:900px; margin:26px auto 0; padding:0 20px}
.page-hero h1{margin:0 0 8px}

/* Pricing */
.price-grid{max-width:1100px; margin:18px auto; padding:0 20px; display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.price-card{background:var(--card); border:1px solid #1d262f; border-radius:16px; padding:18px}
.price{font-size:30px; color:var(--brand); margin:.25rem 0 .75rem}
@media (max-width:1024px){ .price-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .price-grid{grid-template-columns:1fr} }

/* Services list and callout */
.services-list{max-width:1100px; margin:14px auto 40px; padding:0 20px; display:grid; grid-template-columns:2fr 1fr; gap:20px}
.callout{background:linear-gradient(135deg,#0f1b14,#0e2416); border:1px solid #233b2b; border-radius:16px; padding:18px}
.callout .btn{width:100%; text-align:center; margin-top:8px}
@media (max-width:920px){ .services-list{grid-template-columns:1fr} }

/* Contact */
.contact{max-width:1100px; margin:24px auto 40px; padding:0 20px}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.contact-form{display:grid; gap:10px}
.contact-form input,.contact-form textarea{
  width:100%; padding:12px; border-radius:10px; border:1px solid #24303b; background:#12171e; color:var(--text)
}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--ring); outline-offset:2px}

/* Footer */
.site-footer{border-top:1px solid #202830; padding:18px 20px; display:grid; gap:8px; justify-items:center; text-align:center; color:#a7b4c0}
.foot-links{display:flex; gap:12px}
.mark{height:18px; vertical-align:middle; margin-right:6px}
.about {
  max-width: 1000px;
  margin: 28px auto;
  padding: 0 20px;
}
.about-inner {
  background: var(--card);
  border: 1px solid #1d262f;
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow);
}
.about h2 { margin-top: 0; }
.about p { color: var(--muted); line-height: 1.6; }
.grid-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 860px) {
  .grid-two {
    grid-template-columns: 1fr;
  }
}
.about-inner {
  background: var(--card);
  border: 1px solid #1d262f;
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow);
  max-width: 1000px;
  margin: 0 auto 30px;
}
.about-inner h2 {
  margin-top: 0;
}
.about-inner p {
  color: var(--muted);
  line-height: 1.6;
}