:root{
  --bg:#0a0a0a; --text:#f4f4f4; --muted:#b9bcc4;
  --brand:#4ade80; --brand-dark:#22c55e;
  --card:#151515; --line:#232323;
}

*{box-sizing:border-box}

body{
   margin:0;
   font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
   color:var(--text);
   background:var(--bg);
   line-height:1.6;
}

a{
   color:var(--brand);
   text-decoration:none
  }
a:hover{
   text-decoration:underline
}

.container{
   max-width:1100px;
   margin:0 auto;
   padding:0 16px
  }

.site-header{
  border-bottom:1px solid var(--line);
  position:sticky;
   top:0;
    background:rgba(10,10,10,.9);
     backdrop-filter: blur(6px);
}
.site-header .container{
    display:flex; 
   align-items:center;
   justify-content:space-between;
    padding:12px 16px
  }

.brand  {
  font-weight:700; 
  font-size:1.1rem;
   color:#fff
  }

.brand img{height:32px;
   vertical-align:middle
  }
.nav a{
  margin-left:16px
}
.nav .btn{
  background:var(--brand);
   color:#0a0a0a;
    padding:8px 12px;
     border-radius:8px
    }

.nav .btn:hover{
  background:var(--brand-dark);
   text-decoration:none}

.hero{
  padding:64px 0;
   background:linear-gradient(180deg,rgba(74,222,128,.1),transparent)
  }
.hero h1{font-size:2rem;
   margin:0 0 8px
  }

.hero p{
  max-width:720px;
   color:var(--muted)
  }
.btn{display:inline-block;
   padding:10px 16px;
    border-radius:8px;
     background:#2a2a2a;
      color:#fff
    }

.btn-primary{
  background:var(--brand);
   color:#0a0a0a
  }

.btn-primary:hover{background:var(--brand-dark);
   text-decoration:none
  }

.contact-inline{
  margin-top:12px; 
  color:var(--muted)
}

.features{padding:40px 0}
.grid-3{display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(220px,1fr))}
.card{background:var(--card); padding:16px; border:1px solid var(--line); border-radius:12px}

.service{border-top:1px solid var(--line); padding:24px 0}
.price{color:var(--muted)}




/* ===== FORM LAYOUT FIX ===== */

.form {
  display: grid;
  gap: 20px;                 /* BIG improvement */
  max-width: 640px;
  margin-top: 24px;
}

/* Stack label text above inputs */
.form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 500;
}

/* Better input spacing */
.form input,
.form select,
.form textarea {
  padding: 12px;
  border-radius: 10px;
  font-size: 0.95rem;
}

/* Section spacing */
.form fieldset {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 12px;
}

/* Legend spacing */
.form legend {
  margin-bottom: 6px;
  font-weight: 600;
}

/* Checkbox layout */
.form fieldset label {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  font-weight: 400;
}

/* Button spacing */
.form button {
  margin-top: 12px;
  padding: 14px;
  font-size: 1rem;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
}

/* Mobile-friendly */
@media (max-width: 600px) {
  .form {
    gap: 18px;
  }
}

main.container {
  padding-bottom: 60px;
}

.form {
  margin-left: auto;
  margin-right: auto;
}