/* =============================================
   SERVICES PAGE — services.css
   ============================================= */

/* Reuse page-hero from about.css pattern */
.page-hero {
  background: linear-gradient(135deg, #0f3460 0%, #16213e 50%, #1a1a2e 100%);
  padding: 120px 0 80px; text-align: center; position: relative; overflow: hidden;
}
.page-hero::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(circle at 70% 40%, rgba(26,115,232,0.2) 0%, transparent 55%),
              radial-gradient(circle at 20% 60%, rgba(46,204,113,0.12) 0%, transparent 50%);
}
.page-hero-content { position:relative; z-index:1; }
.page-hero .section-tag { background:rgba(255,255,255,0.12); color:#fff; border-color:rgba(255,255,255,0.2); }
.page-hero h1 { font-family:var(--font-display); font-size:clamp(2rem,5vw,3.2rem); font-weight:800; color:#fff; margin:14px 0 12px; }
.page-hero p  { color:rgba(255,255,255,0.75); font-size:1.1rem; }
.hero-wave { line-height:0; }
.hero-wave svg { display:block; width:100%; height:60px; }

/* MAIN SERVICES */
.main-services { background: #f0f4ff; }
.srv-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; }

.srv-card {
  background: #fff; border-radius: var(--radius);
  padding: 32px 28px; box-shadow: var(--card-shadow);
  transition: all 0.35s; position: relative; overflow: hidden;
  border-top: 5px solid;
}
.srv-card[data-color="blue"]   { border-top-color: var(--primary); }
.srv-card[data-color="green"]  { border-top-color: var(--green);   }
.srv-card[data-color="orange"] { border-top-color: var(--secondary);}
.srv-card[data-color="purple"] { border-top-color: var(--purple);  }
.srv-card[data-color="red"]    { border-top-color: var(--red);     }
.srv-card[data-color="teal"]   { border-top-color: var(--teal);    }
.srv-card:hover { transform: translateY(-8px); box-shadow: 0 18px 48px rgba(26,115,232,0.16); }

.srv-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:16px; }
.srv-icon   { font-size: 3rem; }
.srv-num    {
  font-family: var(--font-display); font-size: 3.5rem; font-weight: 800;
  color: var(--primary); opacity: 0.08; line-height: 1;
}
.srv-card h3 { font-family:var(--font-display); font-size:1.35rem; font-weight:800; margin-bottom:10px; color:var(--text); }
.srv-card p  { color:var(--text-light); font-size:0.95rem; margin-bottom:16px; line-height:1.8; }
.srv-list    { list-style:none; margin-bottom:20px; }
.srv-list li { color:var(--text-light); font-size:0.92rem; padding:4px 0; font-weight:600; }
.srv-footer  { border-top:2px solid #f0f4ff; padding-top:14px; }
.srv-tag {
  display:inline-block; background:#e8f0fe; color:var(--primary);
  border-radius:50px; padding:5px 14px; font-size:0.82rem; font-weight:700;
}

/* REPAIR PROCESS */
.repair-process { background: #fff; }
.steps-row {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 0;
  position: relative;
}
.step { text-align:center; padding: 0 20px; position:relative; }
.step-circle {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg,var(--primary),#4285f4);
  color: #fff; font-family:var(--font-display); font-size:1.4rem; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto 20px; box-shadow: 0 6px 20px rgba(26,115,232,0.35);
  position:relative; z-index:2;
}
.step-line {
  position:absolute; top:28px; left:calc(50% + 28px); right:0;
  height:3px; background:linear-gradient(90deg,var(--primary),#90caf9);
  z-index:1;
}
.step-line.last { display:none; }
.step-icon { font-size:2.8rem; margin-bottom:14px; }
.step h4 { font-family:var(--font-display); font-size:1.05rem; font-weight:800; margin-bottom:8px; color:var(--text); }
.step p  { color:var(--text-light); font-size:0.9rem; }

/* CTA */
.srv-cta { background:linear-gradient(135deg,var(--green),#27ae60); padding:80px 0; }
.cta-box { text-align:center; }
.cta-box h2 { font-family:var(--font-display); font-size:2rem; font-weight:800; color:#fff; margin-bottom:12px; }
.cta-box p  { color:rgba(255,255,255,0.85); font-size:1.05rem; }

/* RESPONSIVE */
@media (max-width:900px) {
  .srv-grid  { grid-template-columns:1fr 1fr; }
  .steps-row { grid-template-columns:1fr 1fr; gap:30px; }
  .step-line { display:none; }
}
@media (max-width:600px) {
  .srv-grid  { grid-template-columns:1fr; }
  .steps-row { grid-template-columns:1fr; }
}