:root{
  --bg:#07090a;
  --cyan:#51FBFD;
  --cyan-soft:#a6fdfe;
  --cyan-dim:rgba(81,251,253,0.12);
  --card-border:rgba(81,251,253,0.16);
  --white:#f5f7f7;
  --muted:#9aa3a3;
  --muted2:#6c7676;
}

.services{position:relative; padding:clamp(70px, 10vw, 120px) 0; overflow:hidden;}
.services .glow{position:absolute; width:460px; height:460px; background:var(--cyan); opacity:0.06; filter:blur(120px); bottom:0; right:-160px; pointer-events:none;}

.tag{display:inline-flex; align-items:center; gap:8px; padding:8px 18px; border:1px solid var(--card-border); border-radius:30px; background:var(--cyan-dim); margin-bottom:20px;}
.tag .dot{width:6px; height:6px; background:var(--cyan); border-radius:50%; box-shadow:0 0 8px var(--cyan); flex-shrink:0;}
.tag span{font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--cyan);}

.services-head{max-width:620px; margin-bottom:40px; position:relative; z-index:1;}
.services-head h2{font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:clamp(28px, 4vw, 42px); line-height:1.18; letter-spacing:-0.02em; color:var(--white);}

.grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(2, 1fr); gap:20px;
}

.card{
  position:relative; border:1px solid rgba(255,255,255,0.08); border-radius:18px;
  background:rgba(255,255,255,0.015); padding:24px; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between; min-height:230px;
  transition:border-color .35s ease, transform .35s cubic-bezier(.22,.8,.3,1), background .35s ease;
}
.card:hover{
  border-color:var(--card-border); transform:translateY(-4px);
  background:rgba(81,251,253,0.03);
}
.card::after{
  content:''; position:absolute; inset:0; border-radius:18px; padding:1px;
  background:linear-gradient(135deg, rgba(81,251,253,0.25), transparent 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .35s ease; pointer-events:none;
}
.card:hover::after{opacity:1;}

.card-top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px;}
.card-num{font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--muted2);}
.card-arrow{
  width:30px; height:30px; border-radius:8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,0.1); color:var(--muted);
  text-decoration:none; cursor:pointer;
  transform:rotate(-45deg); transition:transform .35s cubic-bezier(.22,.8,.3,1), color .3s ease, border-color .3s ease, background .3s ease;
}
.card-arrow:focus-visible{outline:2px solid var(--cyan); outline-offset:2px;}
.card-arrow svg{width:14px; height:14px;}
.card:hover .card-arrow{ transform:rotate(0deg); color:var(--cyan); border-color:var(--cyan); background:var(--cyan-dim); }

.card-info h3{font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:19px; margin-bottom:6px; color:var(--white);}
.card-info p{color:var(--muted); font-size:13.5px; line-height:1.55; max-width:320px;}

/* ============ 1. Social ============ */
.viz-social{height:64px; display:flex; align-items:center; gap:14px;}
.post-badge{position:relative; width:44px; height:44px; border-radius:12px; flex-shrink:0; overflow:hidden; box-shadow:0 6px 16px rgba(0,0,0,0.4);}
.post-badge-face{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; animation:swapCycle_0ce41f8b 6s ease-in-out infinite;}
.post-badge-face svg{width:20px; height:20px;}
.post-badge-face.pf-ig{background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af); animation-delay:0s;}
.post-badge-face.pf-fb{background:#1877F2; animation-delay:1.5s;}
.post-badge-face.pf-tt{background:#000; animation-delay:3s;}
.post-badge-face.pf-x{background:#000; animation-delay:4.5s;}
.post-badge-face.pf-li{background:#0A66C2; animation-delay:6s;}
.post-badge-face.pf-yt{background:#FF0000; animation-delay:7.5s;}
.post-badge-face.pf-pin{background:#E60023; animation-delay:9s;}
.post-badge-face.pf-sc{background:#FFFC00; animation-delay:10.5s;}
.post-badge-face{animation-duration:12s;}
@keyframes swapCycle_0ce41f8b{
  0%,2%{opacity:0; transform:translateY(4px);}
  5%,11%{opacity:1; transform:translateY(0);}
  14%,100%{opacity:0; transform:translateY(-4px);}
}
.post-label{display:flex; flex-direction:column; gap:5px; font-family:'JetBrains Mono', monospace;}
.post-label-top{display:flex; align-items:center; gap:6px; font-size:10.5px; color:var(--muted2); letter-spacing:.03em;}
.post-label-top .live-dot{width:6px; height:6px; border-radius:50%; background:#3ddc84; box-shadow:0 0 6px rgba(61,220,132,0.7); flex-shrink:0; animation:liveBlink_0ce41f8b 1.6s ease-in-out infinite;}
@keyframes liveBlink_0ce41f8b{0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.55; transform:scale(.85);}}
.post-label-name{position:relative; height:19px; min-width:88px;}
.post-label-name span{position:absolute; left:0; top:0; font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:15px; color:var(--cyan); white-space:nowrap; opacity:0; animation:swapCycle_0ce41f8b 12s ease-in-out infinite;}
.post-label-name span:nth-child(1){animation-delay:0s;}
.post-label-name span:nth-child(2){animation-delay:1.5s;}
.post-label-name span:nth-child(3){animation-delay:3s;}
.post-label-name span:nth-child(4){animation-delay:4.5s;}
.post-label-name span:nth-child(5){animation-delay:6s;}
.post-label-name span:nth-child(6){animation-delay:7.5s;}
.post-label-name span:nth-child(7){animation-delay:9s;}
.post-label-name span:nth-child(8){animation-delay:10.5s;}

/* ============ 2. Web Dev ============ */
.viz-pipeline{
  height:64px; display:flex; flex-direction:column; justify-content:center; gap:8px;
  --dur:4s;
}
.pipeline-track{position:relative; height:26px; display:flex; align-items:center; justify-content:space-between;}
.pipeline-track::before{
  content:''; position:absolute; left:13px; right:13px; top:50%; height:2px;
  background:rgba(255,255,255,0.08); transform:translateY(-50%);
}
.pipeline-fill{
  position:absolute; left:13px; top:50%; height:2px; width:0; transform:translateY(-50%);
  background:linear-gradient(90deg, var(--cyan), rgba(81,251,253,0.15));
  box-shadow:0 0 8px rgba(81,251,253,0.6);
  animation:fillTrack_0ce41f8b var(--dur) linear infinite;
}
@keyframes fillTrack_0ce41f8b{0%,4%{width:0;} 92%,100%{width:calc(100% - 26px);}}
.pipeline-node{
  position:relative; z-index:2; width:26px; height:26px; border-radius:50%; flex-shrink:0;
  background:var(--bg); border:1.5px solid rgba(255,255,255,0.12); color:var(--muted);
  display:flex; align-items:center; justify-content:center;
  animation:nodeActivate_0ce41f8b var(--dur) linear infinite;
}
.pipeline-node svg{width:12px; height:12px;}
.pipeline-node.pn-1{animation-delay:calc(var(--dur) * 0.04);}
.pipeline-node.pn-2{animation-delay:calc(var(--dur) * 0.3333);}
.pipeline-node.pn-3{animation-delay:calc(var(--dur) * 0.6267);}
.pipeline-node.pn-4{animation-delay:calc(var(--dur) * 0.92);}
@keyframes nodeActivate_0ce41f8b{
  0%{color:var(--muted); border-color:rgba(255,255,255,0.12); box-shadow:none; transform:scale(1);}
  3%,11%{color:var(--cyan); border-color:var(--cyan); box-shadow:0 0 10px rgba(81,251,253,0.45); transform:scale(1.14);}
  22%,100%{color:var(--muted); border-color:rgba(255,255,255,0.12); box-shadow:none; transform:scale(1);}
}
.pipeline-labels{display:flex; justify-content:space-between; font-family:'JetBrains Mono', monospace; font-size:8.5px; color:var(--muted2); text-transform:uppercase; letter-spacing:.05em; padding:0 1px;}

/* ============ 3. Brand ============ */
.viz-palette{height:64px; display:flex; align-items:center; gap:8px;}
.swatch{width:34px; height:34px; border-radius:10px; animation:hueShift_0ce41f8b 6s ease-in-out infinite; border:1px solid rgba(255,255,255,0.08);}
.swatch:nth-child(1){animation-delay:0s;}
.swatch:nth-child(2){animation-delay:.5s;}
.swatch:nth-child(3){animation-delay:1s;}
.swatch:nth-child(4){animation-delay:1.5s;}
@keyframes hueShift_0ce41f8b{
  0%,100%{background:var(--cyan);} 33%{background:#c9a3ff;} 66%{background:#9df0a0;}
}

/* ============ 4. Marketing ============ */
.viz-chart{height:64px; display:flex; align-items:flex-end; gap:6px;}
.bar{width:12px; border-radius:4px 4px 0 0; background:linear-gradient(180deg, var(--cyan), rgba(81,251,253,0.25)); animation:barRise_0ce41f8b 2.6s ease-in-out infinite;}
.bar:nth-child(1){height:22px; animation-delay:0s;}
.bar:nth-child(2){height:38px; animation-delay:.15s;}
.bar:nth-child(3){height:28px; animation-delay:.3s;}
.bar:nth-child(4){height:50px; animation-delay:.45s;}
.bar:nth-child(5){height:34px; animation-delay:.6s;}
@keyframes barRise_0ce41f8b{0%,100%{transform:scaleY(.7); opacity:.7;} 50%{transform:scaleY(1); opacity:1;}}

.card:hover .post-badge-face,
.card:hover .post-label-name span{animation-duration:5s;}
.card:hover .viz-pipeline{--dur:2.2s;}
.card:hover .bar{animation-duration:1.4s;}
.card:hover .swatch{animation-duration:3s;}

@media(max-width:760px){
  .grid{grid-template-columns:1fr;}
  .card{min-height:auto;}
}

@media(prefers-reduced-motion:reduce){
  .post-badge-face, .post-label-name span, .live-dot, .pipeline-fill, .pipeline-node, .swatch, .bar{animation:none;}
  .card{transition:none;}
}