/* Services Hero */
.services-hero{
  padding:4rem 0 4rem;
  background:linear-gradient(135deg, #667eea20 0%, #764ba220 100%);
  position:relative;
  overflow:hidden;
  text-align:center;
}

.services-hero::before{
  content:'';
  position:absolute;
  top:-20%;
  right:-10%;
  width:600px;
  height:600px;
  background:var(--gradient-1);
  opacity:0.08;
  border-radius:50%;
  filter:blur(100px);
}

.services-hero-content{
  max-width:800px;
  margin:0 auto;
}

.services-hero h1{
  font-size:3rem;
  margin-bottom:1.5rem;
  line-height:1.2;
}

.hero-features{
  display:flex;
  gap:2rem;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:2rem;
}

.feature-item{
  display:flex;
  align-items:center;
  gap:0.5rem;
  color:var(--dark);
  font-weight:500;
}

.feature-item svg{color:var(--primary)}

/* Services Grid */
.services-grid-section{
  padding:5rem 0;
  background:var(--white);
}

.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:2rem;
  margin-top:3rem;
}

.service-card{
  background:var(--white);
  border-radius:20px;
  padding:2.5rem;
  box-shadow:var(--shadow-sm);
  border:2px solid rgba(31,139,241,0.08);
  transition:all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position:relative;
  display:flex;
  flex-direction:column;
}

.service-card.featured{
  border-color:var(--primary);
  transform:scale(1.05);
}

.service-card:hover{
  transform:translateY(-12px) scale(1.02);
  box-shadow:var(--shadow-lg);
}

.popular-badge{
  position:absolute;
  top:-12px;
  right:20px;
  background:var(--gradient-2);
  color:var(--white);
  padding:0.4rem 1rem;
  border-radius:999px;
  font-size:0.8rem;
  font-weight:700;
  box-shadow:0 4px 12px rgba(245,87,108,0.4);
}

.service-icon{
  width:64px;
  height:64px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:1.5rem;
  color:var(--white);
}

.service-card h3{
  font-size:1.5rem;
  margin-bottom:1rem;
  color:var(--dark);
}

.service-card > p{
  color:var(--muted);
  line-height:1.6;
  margin-bottom:1.5rem;
  flex-grow:0;
}

.service-features{
  list-style:none;
  padding:0;
  margin:1.5rem 0;
  flex-grow:1;
}

.service-features li{
  padding:0.6rem 0;
  color:var(--dark);
  position:relative;
  padding-left:1.75rem;
}

.service-features li::before{
  content:'✓';
  position:absolute;
  left:0;
  color:var(--primary);
  font-weight:bold;
}

.service-price{
  margin:1.5rem 0;
  text-align:center;
  padding:1.5rem 0;
  border-top:2px solid rgba(31,139,241,0.1);
  border-bottom:2px solid rgba(31,139,241,0.1);
}

.price-from{
  display:block;
  font-size:0.85rem;
  color:var(--muted);
  margin-bottom:0.25rem;
}

.price-amount{
  font-size:2.5rem;
  font-weight:800;
  background:var(--gradient-3);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.price-period{font-size:1.25rem}

.service-card .btn{
  margin-top:1rem;
  justify-content:center;
  width:100%;
}

/* Process Section */
.process-section{
  padding:5rem 0;
  background:linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.process-timeline{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:2rem;
  margin-top:3rem;
  position:relative;
}

.process-step{
  background:var(--white);
  border-radius:16px;
  padding:2rem;
  text-align:center;
  box-shadow:var(--shadow-sm);
  transition:all 0.3s ease;
  position:relative;
}

.process-step:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-md);
}

.step-number{
  position:absolute;
  top:-15px;
  left:50%;
  transform:translateX(-50%);
  width:40px;
  height:40px;
  background:var(--gradient-3);
  color:var(--white);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:1.125rem;
  box-shadow:0 4px 12px rgba(31,139,241,0.3);
}

.step-icon{
  width:64px;
  height:64px;
  background:linear-gradient(135deg, rgba(102,126,234,0.1) 0%, rgba(118,75,162,0.1) 100%);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:1.5rem auto 1rem;
  color:var(--primary);
}

.process-step h3{
  font-size:1.25rem;
  margin-bottom:0.75rem;
  color:var(--dark);
}

.process-step p{
  color:var(--muted);
  line-height:1.6;
  font-size:0.95rem;
}

/* FAQ Section */
.faq-section{
  padding:5rem 0;
  background:var(--white);
}

.faq-grid{
  max-width:900px;
  margin:3rem auto 0;
}

.faq-item{
  background:var(--bg);
  border-radius:12px;
  margin-bottom:1rem;
  overflow:hidden;
  transition:all 0.3s ease;
}

.faq-item:hover{box-shadow:var(--shadow-sm)}

.faq-question{
  padding:1.5rem;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  user-select:none;
}

.faq-question h3{
  margin:0;
  font-size:1.125rem;
  color:var(--dark);
}

.faq-question svg{
  color:var(--primary);
  transition:transform 0.3s ease;
  flex-shrink:0;
  margin-left:1rem;
}

.faq-item.active .faq-question svg{
  transform:rotate(180deg);
}

.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height 0.3s ease;
}

.faq-item.active .faq-answer{max-height:500px}

.faq-answer p{
  padding:0 1.5rem 1.5rem;
  color:var(--muted);
  line-height:1.7;
  margin:0;
}

/* CTA Services */
.cta-services{
  padding:5rem 0;
  background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color:var(--white);
  text-align:center;
  position:relative;
  overflow:hidden;
}

.cta-services::before{
  content:'';
  position:absolute;
  top:-50%;
  right:-20%;
  width:600px;
  height:600px;
  background:rgba(255,255,255,0.1);
  border-radius:50%;
  filter:blur(100px);
}

.cta-content{
  position:relative;
  z-index:1;
}

.cta-content h2{
  font-size:2.5rem;
  margin-bottom:1rem;
}

.cta-content p{
  font-size:1.25rem;
  margin-bottom:2rem;
  opacity:0.9;
}

.cta-services .btn.ghost{
  border-color:var(--white);
  color:var(--white);
  background:transparent;
}

.cta-services .btn.ghost:hover{
  background:var(--white);
  color:var(--primary);
}

/* Responsive */
@media(max-width:768px){
  .services-hero h1{font-size:2rem}
  .hero-features{flex-direction:column;align-items:center}
  .services-grid{grid-template-columns:1fr}
  .service-card.featured{transform:scale(1)}
  .process-timeline{grid-template-columns:1fr}
  .cta-content h2{font-size:1.75rem}
  .cta-buttons{flex-direction:column;align-items:stretch}
}