/* svc-web.css — Web Development · Dark slate #0F172A + cyan */
.hero-web {
  background: linear-gradient(140deg, #0B1426 0%, #0F1E38 50%, #0B1426 100%);
}
.hero-web .svc-hero__bg::before {
  content:''; position:absolute; inset:0;
  background-image: radial-gradient(rgba(56,189,248,.08) 1px, transparent 1px);
  background-size:36px 36px; pointer-events:none;
}
.hero-web .svc-hero__bg::after {
  content:''; position:absolute;
  width:500px; height:500px; border-radius:50%;
  background:radial-gradient(circle, rgba(37,99,235,.14) 0%, transparent 70%);
  top:-80px; right:-60px; pointer-events:none;
}
.hero-web .svc-h1   { color:#fff; }
.hero-web .svc-sub  { color:#94A3B8; }
.hero-web .hero-tag { color:#38BDF8; background:rgba(56,189,248,.1); border:1px solid rgba(56,189,248,.22); }
.hero-web .svc-bc   { color:rgba(255,255,255,.45); }
.hero-web .svc-bc a { color:rgba(255,255,255,.45); }
.hero-web .svc-bc a:hover { color:#fff; }
.hero-web .svc-bc i { color:rgba(255,255,255,.22); }
.hero-web .svc-proof-item { color:rgba(255,255,255,.65); }
.hero-web .svc-proof-item i { color:#38BDF8; }

/* Code window */
.code-win {
  background:#1A2744; border:1px solid rgba(255,255,255,.08);
  border-radius:14px; overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  font-family:var(--font-mono);
  animation:float 7s ease-in-out infinite;
}
.code-win__bar {
  display:flex; align-items:center; gap:6px;
  padding:10px 14px; background:rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.cw-dot { width:10px; height:10px; border-radius:50%; }
.cw-dot-r{background:#FF5F57}.cw-dot-a{background:#FFBD2E}.cw-dot-g{background:#28CA41}
.cw-file { font-size:.7rem; color:rgba(255,255,255,.28); margin-left:8px; }
.code-body { padding:16px 18px; font-size:.76rem; line-height:1.9; }
.cl { display:flex; gap:10px; }
.ln  { color:rgba(255,255,255,.12); min-width:16px; text-align:right; user-select:none; }
.kw  { color:#C084FC; }.fn  { color:#38BDF8; }.str { color:#34D399; }
.op  { color:#F472B6; }.cm  { color:rgba(255,255,255,.22); font-style:italic; }
.vr  { color:#F8FAFC; }.nm  { color:#FB923C; }
.cursor {
  display:inline-block; width:2px; height:.9em;
  background:#38BDF8; margin-left:2px; vertical-align:text-bottom;
  animation:blink 1s step-end infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* Lighthouse score bars */
.lh-bars {
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
  border-radius:var(--r-lg); padding:14px 16px; margin-top:10px;
}
.lh-row { display:flex; align-items:center; gap:10px; margin-bottom:7px; }
.lh-row:last-child { margin-bottom:0; }
.lh-lbl { font-size:.68rem; color:rgba(255,255,255,.4); width:88px; flex-shrink:0; }
.lh-track { flex:1; height:5px; background:rgba(255,255,255,.06); border-radius:var(--r-full); overflow:hidden; }
.lh-fill {
  height:100%; border-radius:var(--r-full);
  background:linear-gradient(90deg,#2563EB,#06B6D4);
  transform-origin:left; transform:scaleX(0);
  animation:fillBar 1.4s cubic-bezier(.4,0,.2,1) forwards;
}
.lh-score { font-size:.7rem; font-weight:700; color:#34D399; width:26px; text-align:right; }
@keyframes fillBar { to{transform:scaleX(1)} }

.cta-web { background:linear-gradient(135deg,#0B1426 0%,#0f2341 100%); }
.cta-web h2 { color:#fff; }
.cta-web .svc-cta-sub  { color:#94A3B8; }
.cta-web .svc-cta-trust { color:rgba(255,255,255,.5); }
.cta-web .svc-cta-trust i { color:#38BDF8; }

/* site-card accent for web */
.site-card--static .site-card__icon { background:rgba(56,189,248,.1); color:#38BDF8; }
.site-card--dynamic .site-card__icon { background:rgba(37,99,235,.12); color:var(--blue); }
.site-card--ecom .site-card__icon { background:rgba(52,211,153,.1); color:#34D399; }