/* ═══════════════════════════════════════════════
   SERVICES PAGE — Pixel-perfect match
   ═══════════════════════════════════════════════ */

/* ── FULL-SCREEN CANVAS ── */
#three-bg {
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 0; pointer-events: none;
  display: block;
}

body { background: #060c1a; }

/* ── SERVICES SECTION ── */
.svc-section {
  background: transparent;
  padding: 3rem 3% 5rem;
  position: relative; z-index: 1;
}

/* ── SERVICE LIST ── */
.svc-list {
  max-width: 1300px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 2rem;
}

/* ══════════════════════════════════
   SERVICE BLOCK
══════════════════════════════════ */
.svc-block {
  display: grid;
  grid-template-columns: 260px 1fr auto;
  align-items: center;
  gap: 0;
  border-radius: 20px;
  padding: 0;
  position: relative; overflow: hidden;
  border: 1.5px solid transparent;
  transition: transform 0.5s cubic-bezier(.22,.68,0,.98),
              box-shadow 0.4s ease;
}

/* Reverse: icon on RIGHT */
.svc-block-reverse {
  grid-template-columns: 1fr auto 260px;
}
.svc-block-reverse .svc-visual { order: 3; }
.svc-block-reverse .svc-info   { order: 1; }
.svc-block-reverse .svc-cta-col{ order: 2; }

/* ── CARD 1,4 — BLUE ── */
.svc-block:nth-child(1),
.svc-block:nth-child(4) {
  background: linear-gradient(135deg, #071628 0%, #0a2040 55%, #081830 100%);
  border-color: rgba(34,211,238,0.35);
  box-shadow: 0 0 0 1px rgba(34,211,238,0.06),
              0 20px 60px rgba(0,0,0,0.55);
}
.svc-block:nth-child(1):hover,
.svc-block:nth-child(4):hover {
  box-shadow: 0 0 0 1px rgba(34,211,238,0.22),
              0 28px 80px rgba(0,0,0,0.65),
              0 0 60px rgba(34,211,238,0.10);
  transform: translateY(-3px);
}

/* ── CARD 2,5 — PURPLE ── */
.svc-block:nth-child(2),
.svc-block:nth-child(5) {
  background: linear-gradient(135deg, #130a28 0%, #1e0d40 55%, #160a30 100%);
  border-color: rgba(192,80,255,0.40);
  box-shadow: 0 0 0 1px rgba(168,85,247,0.08),
              0 20px 60px rgba(0,0,0,0.55);
}
.svc-block:nth-child(2):hover,
.svc-block:nth-child(5):hover {
  box-shadow: 0 0 0 1px rgba(192,80,255,0.28),
              0 28px 80px rgba(0,0,0,0.65),
              0 0 60px rgba(168,85,247,0.12);
  transform: translateY(-3px);
}

/* ── CARD 3,6 — PINK ── */
.svc-block:nth-child(3),
.svc-block:nth-child(6) {
  background: linear-gradient(135deg, #180a20 0%, #2a0e35 55%, #1e0a28 100%);
  border-color: rgba(236,72,153,0.35);
  box-shadow: 0 0 0 1px rgba(236,72,153,0.06),
              0 20px 60px rgba(0,0,0,0.55);
}
.svc-block:nth-child(3):hover,
.svc-block:nth-child(6):hover {
  box-shadow: 0 0 0 1px rgba(236,72,153,0.24),
              0 28px 80px rgba(0,0,0,0.65),
              0 0 60px rgba(236,72,153,0.10);
  transform: translateY(-3px);
}

/* top-edge glow line on hover */
.svc-block::before {
  content: ''; position: absolute;
  top: 0; left: 8%; right: 8%; height: 1px;
  opacity: 0; transition: opacity 0.4s;
}
.svc-block:nth-child(1)::before,
.svc-block:nth-child(4)::before {
  background: linear-gradient(90deg,transparent,rgba(34,211,238,0.7),transparent);
}
.svc-block:nth-child(2)::before,
.svc-block:nth-child(5)::before {
  background: linear-gradient(90deg,transparent,rgba(192,80,255,0.7),transparent);
}
.svc-block:nth-child(3)::before,
.svc-block:nth-child(6)::before {
  background: linear-gradient(90deg,transparent,rgba(236,72,153,0.7),transparent);
}
.svc-block:hover::before { opacity: 1; }

/* ══════════════════════════════════
   ICON / VISUAL COLUMN
══════════════════════════════════ */
.svc-visual {
  width: 260px; height: 260px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform 0.5s cubic-bezier(.22,.68,0,.98);
}
.svc-block:hover .svc-visual { transform: scale(1.05); }

/* SOLID GLOWING CIRCLE (main icon bg — matches screenshot exactly) */
.svc-icon-circle {
  width: 180px; height: 180px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 3;
  font-size: 5rem;
  /* Blue version */
  background: radial-gradient(circle at 35% 35%, #1ad4f5 0%, #0ea5c9 30%, #0c6fbb 60%, #0a4a8c 100%);
  box-shadow: 0 0 40px rgba(34,211,238,0.50),
              0 0 80px rgba(34,211,238,0.20),
              inset 0 2px 8px rgba(255,255,255,0.15);
}

/* Purple circle override */
.svc-visual.purple .svc-icon-circle {
  background: radial-gradient(circle at 35% 35%, #c84bf7 0%, #9333ea 35%, #6d28d9 65%, #4c1d95 100%);
  box-shadow: 0 0 40px rgba(168,85,247,0.55),
              0 0 80px rgba(168,85,247,0.22),
              inset 0 2px 8px rgba(255,255,255,0.15);
}

/* Pink circle override */
.svc-visual.pink .svc-icon-circle {
  background: radial-gradient(circle at 35% 35%, #f472b6 0%, #ec4899 35%, #be185d 65%, #831843 100%);
  box-shadow: 0 0 40px rgba(236,72,153,0.55),
              0 0 80px rgba(236,72,153,0.22),
              inset 0 2px 8px rgba(255,255,255,0.15);
}

/* SPINNING OUTER RING */
.svc-ring-outer {
  position: absolute; inset: 20px; border-radius: 50%;
  border: 1.5px solid transparent;
  border-top-color: rgba(34,211,238,0.80);
  border-right-color: rgba(34,211,238,0.40);
  animation: spinRing 3s linear infinite;
  z-index: 4;
}
.svc-visual.purple .svc-ring-outer {
  border-top-color: rgba(192,80,255,0.85);
  border-right-color: rgba(192,80,255,0.40);
}
.svc-visual.pink .svc-ring-outer {
  border-top-color: rgba(236,72,153,0.85);
  border-right-color: rgba(236,72,153,0.40);
}

/* SECOND RING (counter-spin) */
.svc-ring-outer2 {
  position: absolute; inset: 30px; border-radius: 50%;
  border: 1px solid transparent;
  border-bottom-color: rgba(34,211,238,0.50);
  border-left-color: rgba(34,211,238,0.25);
  animation: spinRing 5s linear infinite reverse;
  z-index: 4;
}
.svc-visual.purple .svc-ring-outer2 {
  border-bottom-color: rgba(192,80,255,0.55);
  border-left-color: rgba(192,80,255,0.28);
}
.svc-visual.pink .svc-ring-outer2 {
  border-bottom-color: rgba(236,72,153,0.55);
  border-left-color: rgba(236,72,153,0.28);
}

/* AMBIENT GLOW BEHIND ICON */
.svc-icon-glow {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(34,211,238,0.18) 0%, transparent 70%);
  z-index: 1;
  animation: pulseGlow 2.5s ease-in-out infinite;
}
.svc-visual.purple .svc-icon-glow {
  background: radial-gradient(circle, rgba(168,85,247,0.20) 0%, transparent 70%);
}
.svc-visual.pink .svc-icon-glow {
  background: radial-gradient(circle, rgba(236,72,153,0.20) 0%, transparent 70%);
}

/* particles/sparkles on icon */
.svc-sparkle {
  position: absolute; width: 4px; height: 4px;
  border-radius: 50%; background: #22d3ee;
  box-shadow: 0 0 6px #22d3ee;
  z-index: 5;
  animation: sparklePulse 2s ease-in-out infinite;
}
.svc-sparkle:nth-child(1) { top: 22%; left: 14%; animation-delay: 0s; }
.svc-sparkle:nth-child(2) { top: 12%; right: 22%; animation-delay: 0.5s; }
.svc-sparkle:nth-child(3) { bottom: 20%; right: 14%; animation-delay: 1s; }
.svc-sparkle:nth-child(4) { bottom: 14%; left: 20%; animation-delay: 1.5s; }
.svc-visual.purple .svc-sparkle { background: #c084fc; box-shadow: 0 0 6px #c084fc; }
.svc-visual.pink   .svc-sparkle { background: #f472b6; box-shadow: 0 0 6px #f472b6; }

@keyframes spinRing    { to { transform: rotate(360deg); } }
@keyframes pulseGlow   { 0%,100%{opacity:.6} 50%{opacity:1} }
@keyframes sparklePulse{ 0%,100%{opacity:0;transform:scale(0.5)} 50%{opacity:1;transform:scale(1.2)} }

/* ══════════════════════════════════
   INFO COLUMN
══════════════════════════════════ */
.svc-info {
  padding: 2.8rem 2rem 2.8rem 2.5rem;
  flex: 1;
}
.svc-block-reverse .svc-info {
  padding: 2.8rem 2.5rem 2.8rem 2rem;
}

.svc-num {
  font-family: 'Poppins', sans-serif;
  font-size: 0.68rem; font-weight: 700;
  color: #22d3ee; letter-spacing: 3px;
  text-transform: uppercase;
  display: block; margin-bottom: 0.35rem;
}
.svc-block:nth-child(2) .svc-num,
.svc-block:nth-child(5) .svc-num { color: #a855f7; }
.svc-block:nth-child(3) .svc-num,
.svc-block:nth-child(6) .svc-num { color: #ec4899; }

.svc-popular-tag {
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(135deg, #9333ea, #7c3aed);
  color: #fff; font-size: 0.72rem; font-weight: 700;
  padding: 0.28rem 0.9rem; border-radius: 100px;
  font-family: 'Poppins', sans-serif;
  margin-bottom: 0.5rem;
  box-shadow: 0 0 20px rgba(147,51,234,0.5);
  letter-spacing: 0.3px;
}

.svc-info h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.75rem; font-weight: 800;
  color: #fff; margin-bottom: 0.7rem;
  letter-spacing: -0.5px; line-height: 1.2;
}

.svc-desc {
  color: rgba(255,255,255,0.58);
  font-size: 0.90rem; line-height: 1.85;
  margin-bottom: 1.2rem; max-width: 500px;
}

.svc-features {
  list-style: none; padding: 0; margin: 0 0 0;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0.45rem 1.5rem;
}
.svc-features li {
  font-size: 0.83rem; color: rgba(255,255,255,0.62);
  padding-left: 1.3rem; position: relative; line-height: 1.55;
}
.svc-features li::before {
  content: '✓'; position: absolute; left: 0;
  color: #22d3ee; font-weight: 700; font-size: 0.78rem;
}
.svc-block:nth-child(2) .svc-features li::before,
.svc-block:nth-child(5) .svc-features li::before { color: #a855f7; }
.svc-block:nth-child(3) .svc-features li::before,
.svc-block:nth-child(6) .svc-features li::before { color: #ec4899; }

/* ══════════════════════════════════
   PRICE + CTA COLUMN (right side)
══════════════════════════════════ */
.svc-cta-col {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 2.8rem 3rem 2.8rem 2rem;
  min-width: 260px; gap: 1.2rem;
  border-left: 1px solid rgba(255,255,255,0.05);
}
.svc-block-reverse .svc-cta-col {
  padding: 2.8rem 2rem 2.8rem 3rem;
  border-left: none;
  border-right: 1px solid rgba(255,255,255,0.05);
}

.svc-price {
  font-family: 'Poppins', sans-serif;
  font-size: 1.45rem; font-weight: 800;
  color: #fff; text-align: center;
  white-space: nowrap;
}
.svc-price span {
  font-size: 0.95rem; font-weight: 500;
  color: rgba(255,255,255,0.50);
}

.svc-badge {
  display: inline-block; text-align: center;
  background: rgba(34,211,238,0.08);
  color: #22d3ee;
  border: 1px solid rgba(34,211,238,0.30);
  border-radius: 100px; padding: 0.22rem 0.9rem;
  font-size: 0.70rem; font-weight: 600;
  font-family: 'Poppins', sans-serif;
  white-space: nowrap;
}
.svc-badge-pop {
  background: rgba(168,85,247,0.10);
  border-color: rgba(168,85,247,0.35); color: #c084fc;
}

/* CTA BUTTON */
.svc-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg, #22d3ee, #3B82F6);
  color: #fff; padding: 0.75rem 2rem;
  border-radius: 10px; text-decoration: none;
  font-family: 'Poppins', sans-serif;
  font-weight: 600; font-size: 0.92rem;
  transition: all 0.3s;
  box-shadow: 0 4px 20px rgba(34,211,238,0.28);
  width: 100%; text-align: center;
  letter-spacing: 0.2px;
}
.svc-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 35px rgba(34,211,238,0.45);
}
.svc-block:nth-child(2) .svc-cta {
  background: linear-gradient(135deg, #a855f7, #ec4899);
  box-shadow: 0 4px 20px rgba(168,85,247,0.32);
}
.svc-block:nth-child(2) .svc-cta:hover {
  box-shadow: 0 8px 35px rgba(168,85,247,0.52);
}

/* ══════════════════════════════════
   SCROLL REVEAL
══════════════════════════════════ */
.svc-reveal {
  opacity: 0;
  transform: perspective(1200px) translateZ(-120px) scale(0.88);
}
.svc-reveal[data-dir="left"]  {
  transform: perspective(1200px) translateZ(-120px) translateX(-70px) rotateY(6deg) scale(0.88);
}
.svc-reveal[data-dir="right"] {
  transform: perspective(1200px) translateZ(-120px) translateX(70px) rotateY(-6deg) scale(0.88);
}

/* ══════════════════════════════════
   RESPONSIVE
══════════════════════════════════ */
@media (max-width: 900px) {
  .svc-block,
  .svc-block-reverse {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .svc-block-reverse .svc-visual,
  .svc-block-reverse .svc-info,
  .svc-block-reverse .svc-cta-col { order: unset; }
  .svc-visual { width: 100%; height: 200px; }
  .svc-icon-circle { width: 140px; height: 140px; font-size: 3.5rem; }
  .svc-info { padding: 1.5rem 1.5rem 0; }
  .svc-features { grid-template-columns: 1fr; text-align: left; }
  .svc-cta-col {
    border-left: none; border-top: 1px solid rgba(255,255,255,0.05);
    padding: 1.5rem; min-width: unset; width: 100%;
  }
  .svc-block-reverse .svc-cta-col { border-right: none; border-top: 1px solid rgba(255,255,255,0.05); }
}
@media (max-width: 600px) {
  .svc-section { padding: 2rem 4% 4rem; }
  .svc-info h2 { font-size: 1.4rem; }
}