html { scroll-behavior: smooth; }
body { 
  font-family: Inter, Arial, sans-serif; 
  font-size: 16px;
  line-height: 1.6;
}
* { box-sizing: border-box; }

.hero-bg {
  background:
    linear-gradient(90deg, rgba(3, 41, 77, .96) 0%, rgba(3, 54, 103, .90) 43%, rgba(4, 56, 107, .72) 100%),
    url("https://images.unsplash.com/photo-1514565131-fce0801e5785?auto=format&fit=crop&w=1800&q=85") center/cover;
  min-height: 600px;
}

.network-bg {
  background:
    linear-gradient(90deg, rgba(2, 43, 81, .97), rgba(2, 53, 101, .92)),
    url("https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=1800&q=55") center/cover;
}

.field {
  width: 100%;
  border: 1px solid #d6e0eb;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 15px;
  outline: none;
  transition: .2s;
  background: white;
}
.field:focus { border-color: #1680ef; box-shadow: 0 0 0 3px rgba(22,128,239,.10); }

.primary-btn {
  border: 0;
  border-radius: 8px;
  background: #0878ef;
  color: white;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 700;
  transition: .2s;
  cursor: pointer;
  display: inline-block;
}
.primary-btn:hover { background: #0568d3; transform: translateY(-2px); }

.outline-btn {
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 8px;
  color: white;
  padding: 13px 28px;
  font-size: 15px;
  font-weight: 600;
  transition: .2s;
  display: inline-block;
}
.outline-btn:hover { background: rgba(255,255,255,.1); }

.section-title { 
  color: #082f59; 
  font-size: clamp(28px, 3vw, 36px); 
  font-weight: 800; 
  line-height: 1.2;
}

.card-line { 
  border: 1px solid #dce6f1; 
}

.step-active { 
  background: linear-gradient(90deg,#0878ef,#126ce2); 
  color: white; 
}

.estimate-grid { 
  box-shadow: 0 5px 24px rgba(22, 63, 105, .10); 
}

.contact-pattern {
  background:
    linear-gradient(90deg, rgba(2,42,80,.98), rgba(4,50,92,.93)),
    url("https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=1800&q=55") center/cover;
  padding: 40px 0;
}

@media (max-width: 768px) {
  .hero-bg { 
    background-position: 63% center;
    min-height: auto;
    padding: 40px 0;
  }
  .hero-title br, .hero-copy br { display: none; }
  .primary-btn, .outline-btn {
    padding: 12px 24px;
    font-size: 14px;
    width: 100%;
    text-align: center;
  }
}