/* Web Development Page */
.service-hero{padding:120px 0 80px;background:linear-gradient(135deg,#f8faff 0%,#e8f4ff 100%);text-align:center}
.hero-badge{display:inline-block;background:#e0f3ff;color:#00AEEF;font-size:13px;font-weight:600;padding:6px 16px;border-radius:20px;letter-spacing:.5px;margin-bottom:20px;text-transform:uppercase}
.service-hero h1{font-size:clamp(2rem,5vw,3.5rem);line-height:1.15;margin-bottom:16px}
.highlight{color:#00AEEF}
.hero-sub{font-size:1.15rem;color:#555;max-width:600px;margin:0 auto 32px}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.services-section{padding:80px 0;background:#fff}
.section-header{text-align:center;margin-bottom:56px}
.section-header h2{font-size:clamp(1.6rem,3vw,2.4rem);margin-bottom:12px}
.section-header p{color:#666;font-size:1.05rem}

.services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
.service-card{background:#f8faff;border:1px solid #e5e7eb;border-radius:12px;padding:28px;transition:transform .2s,box-shadow .2s}
.service-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,174,239,.12)}
.service-icon{font-size:2rem;margin-bottom:16px}
.service-card h3{font-size:1.1rem;margin-bottom:8px}
.service-card p{color:#666;font-size:.93rem;line-height:1.6}

.tech-section{padding:72px 0;background:#0d1117;color:#fff}
.tech-section .section-header h2,.tech-section .section-header p{color:#fff}
.tech-section .section-header p{color:#aaa}
.tech-tabs{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:24px}
.tech-group h4{font-size:.8rem;letter-spacing:1px;text-transform:uppercase;color:#00AEEF;margin-bottom:12px}
.tech-tags{display:flex;flex-wrap:wrap;gap:8px}
.tech-tag{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#ddd;font-size:13px;padding:4px 12px;border-radius:20px}

.process-section{padding:80px 0;background:#f9fafb}
.process-steps{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px}
.process-step{background:#fff;border-radius:12px;padding:28px;border-top:3px solid #00AEEF}
.step-num{font-size:2rem;font-weight:800;color:#00AEEF;opacity:.3;margin-bottom:12px}
.process-step h3{font-size:1rem;margin-bottom:8px}
.process-step p{color:#666;font-size:.9rem;line-height:1.6}

.cta-section{padding:80px 0;background:linear-gradient(135deg,#00AEEF,#0070a8);color:#fff;text-align:center}
.cta-section h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:12px}
.cta-section p{color:rgba(255,255,255,.85);margin-bottom:28px}

.btn-primary-lg{display:inline-block;background:#00AEEF;color:#fff;padding:14px 32px;border-radius:8px;font-weight:600;text-decoration:none;transition:background .2s,transform .2s}
.btn-primary-lg:hover{background:#0090c5;transform:translateY(-2px)}
.btn-outline-lg{display:inline-block;border:2px solid #00AEEF;color:#00AEEF;padding:12px 28px;border-radius:8px;font-weight:600;text-decoration:none;transition:.2s}
.btn-outline-lg:hover{background:#00AEEF;color:#fff}
.cta-section .btn-primary-lg{background:#fff;color:#00AEEF}
.cta-section .btn-primary-lg:hover{background:#e0f3ff}

/* ── Dark Theme ──────────────────────────────────────────────── */
body.dark-page { background: #090e1a; }

/* Shared hero glow */
.svc-hero-glow { position:absolute;border-radius:50%;filter:blur(120px);pointer-events:none; }
.svc-hero-glow--1 { width:600px;height:400px;background:rgba(0,174,239,0.1);top:-80px;left:-100px; }
.svc-hero-glow--2 { width:500px;height:400px;background:rgba(168,85,247,0.07);bottom:-80px;right:-50px; }

body.dark-page .service-hero {
  background: #090e1a !important;
  min-height: 88vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 130px 0 90px;
}
body.dark-page .service-hero h1 { color: #fff; }
body.dark-page .hero-badge {
  background: rgba(0,174,239,0.1);
  color: var(--primary);
  border: 1px solid rgba(0,174,239,0.2);
}
body.dark-page .highlight { color: var(--primary); }
body.dark-page .hero-sub { color: rgba(255,255,255,0.6); }
body.dark-page .btn-outline-lg {
  color: rgba(255,255,255,0.7);
  border-color: rgba(255,255,255,0.2);
}
body.dark-page .btn-outline-lg:hover { background:rgba(255,255,255,0.06);color:#fff; }

/* Hero stats row */
.hero-stats { display:flex;gap:40px;justify-content:center;flex-wrap:wrap;margin-top:48px;padding-top:40px;border-top:1px solid rgba(255,255,255,0.08); }
.hero-stat { text-align:center; }
.hero-stat strong { display:block;font-size:1.6rem;font-weight:800;color:#fff; }
.hero-stat span { font-size:0.78rem;color:rgba(255,255,255,0.45);text-transform:uppercase;letter-spacing:0.08em;margin-top:4px;display:block; }
body.dark-page .hero-stat strong { color:var(--primary); }

/* Section label small */
.section-label-sm { display:inline-block;font-size:0.7rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--primary);margin-bottom:12px; }

/* Services section */
body.dark-page .services-section { background:#0d1117 !important; }
body.dark-page .section-header h2 { color:#fff; }
body.dark-page .section-header p { color:rgba(255,255,255,0.5); }
body.dark-page .service-card {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
  transition: border-color .25s, background .25s, transform .25s;
}
body.dark-page .service-card:hover {
  background: rgba(0,174,239,0.06) !important;
  border-color: rgba(0,174,239,0.25) !important;
  transform: translateY(-4px);
}
body.dark-page .service-card h3 { color:#fff; }
body.dark-page .service-card p { color:rgba(255,255,255,0.55); }

/* Tech section already dark — just tweak */
body.dark-page .tech-section { background:#090e1a !important; }

/* Process section */
body.dark-page .process-section { background:#0d1117 !important; }
body.dark-page .process-step {
  background: rgba(255,255,255,0.04) !important;
  border-top-color: var(--primary);
}
body.dark-page .process-step h3 { color:#fff; }
body.dark-page .process-step p { color:rgba(255,255,255,0.55); }

/* CTA section */
.cta-glow { position:absolute;width:700px;height:300px;background:radial-gradient(ellipse,rgba(0,174,239,0.15) 0%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none; }
body.dark-page .cta-section {
  background: #090e1a !important;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.06);
}
body.dark-page .cta-section h2 { color:#fff; }
body.dark-page .cta-section p { color:rgba(255,255,255,0.55); }

/* Mobile */
@media (max-width: 768px) {
  .hero-stats { gap:24px; }
  .hero-stat strong { font-size:1.3rem; }
  .process-steps { grid-template-columns:1fr !important; }
  .services-grid { grid-template-columns:1fr; }
}