/* ═══════════════════════════════════════════════════════════════════════
   VIRALO — Service Card Visual Identities
   Each of the 9 service cards gets a unique platform-inspired watermark,
   accent bar colour, and icon tint.
   Approach: CSS ::after watermark SVG + ::before accent override + icon colour.
   Zero HTML changes. Zero content changes.
═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────
   Z-INDEX LAYER STACK
   ::before (accent bar)  → z-index 3 (above everything)
   card content (> *)     → z-index 2 (above watermark)
   ::after  (watermark)   → z-index 0 (behind content, above card bg)
───────────────────────────────────────────────────────────────────── */

.svcs-grid .svc-card > * {
  position: relative;
  z-index: 2;
}
.svcs-grid .svc-card::before {
  z-index: 3;
}

/* Shared watermark base — every card ::after inherits these */
.svcs-grid .svc-card::after {
  content: '';
  position: absolute;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 0;
  transition: opacity 0.4s ease;
}

/* ─────────────────────────────────────────────────────────────────────
   CARD 1 — META ADS
   Watermark: Meta infinity loop (two interlocked tilted ellipses)
   Accent:    Facebook blue → Meta purple
   Icon:      Facebook blue
───────────────────────────────────────────────────────────────────── */

/* Accent bar */
.svcs-grid article:nth-child(1)::before {
  background: linear-gradient(90deg, #1877f2 0%, #833ab4 100%);
}

/* Icon tint */
.svcs-grid article:nth-child(1) .svc-icon {
  background: rgba(24, 119, 242, .13);
  border-color: rgba(24, 119, 242, .28);
  color: #1877f2;
}

/* Watermark: Meta infinity/Möbius loop */
.svcs-grid article:nth-child(1)::after {
  width: 300px;
  height: 180px;
  bottom: -30px;
  right: -60px;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 300 160' xmlns='http://www.w3.org/2000/svg' fill='none'><ellipse cx='92' cy='80' rx='74' ry='48' stroke='%231877f2' stroke-width='14' transform='rotate(-15 92 80)'/><ellipse cx='208' cy='80' rx='74' ry='48' stroke='%23833ab4' stroke-width='14' transform='rotate(15 208 80)'/></svg>");
}
.svcs-grid article:nth-child(1):hover::after { opacity: 0.1; }


/* ─────────────────────────────────────────────────────────────────────
   CARD 2 — TIKTOK ADS
   Watermark: Musical note with chromatic cyan/red echo (TikTok signature)
   Accent:    TikTok cyan → hot pink
   Icon:      TikTok cyan
───────────────────────────────────────────────────────────────────── */

.svcs-grid article:nth-child(2)::before {
  background: linear-gradient(90deg, #69c9d0 0%, #ee1d52 100%);
}

.svcs-grid article:nth-child(2) .svc-icon {
  background: rgba(105, 201, 208, .12);
  border-color: rgba(105, 201, 208, .3);
  color: #69c9d0;
}

/* Watermark: TikTok musical note with chromatic offset */
.svcs-grid article:nth-child(2)::after {
  width: 160px;
  height: 230px;
  top: -20px;
  right: -20px;
  opacity: 0.065;
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 160 230' xmlns='http://www.w3.org/2000/svg' fill='none'><line x1='103' y1='22' x2='103' y2='162' stroke='%2300c2cc' stroke-width='13' stroke-linecap='round'/><path d='M103 22 Q160 6 157 64 Q155 92 124 88' stroke='%2300c2cc' stroke-width='13' stroke-linecap='round' fill='none'/><ellipse cx='72' cy='170' rx='38' ry='26' stroke='%2300c2cc' stroke-width='13' transform='rotate(-10 72 170)'/><ellipse cx='75' cy='173' rx='38' ry='26' stroke='%23ee1d52' stroke-width='6' opacity='0.55' transform='rotate(-10 75 173)'/><line x1='106' y1='25' x2='106' y2='165' stroke='%2369c9d0' stroke-width='6' opacity='0.5'/></svg>");
}
.svcs-grid article:nth-child(2):hover::after { opacity: 0.11; }


/* ─────────────────────────────────────────────────────────────────────
   CARD 3 — GOOGLE ADS
   Watermark: 4-segment arc ring (Google multicolour → Viralo blues)
   Accent:    Royal blue → sky blue gradient
   Icon:      Google blue
───────────────────────────────────────────────────────────────────── */

.svcs-grid article:nth-child(3)::before {
  background: linear-gradient(90deg, #0047ab 0%, #00a3ff 50%, #38bdf8 100%);
}

.svcs-grid article:nth-child(3) .svc-icon {
  background: rgba(66, 133, 244, .13);
  border-color: rgba(66, 133, 244, .28);
  color: #4285f4;
}

/* Watermark: 4-arc ring inspired by Google's coloured circle mark */
.svcs-grid article:nth-child(3)::after {
  width: 220px;
  height: 220px;
  bottom: -50px;
  right: -50px;
  opacity: 0.065;
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg' fill='none'><path d='M107 20.3 A80 80 0 0 1 179.7 93' stroke='%230066ff' stroke-width='20' stroke-linecap='round'/><path d='M179.7 107 A80 80 0 0 1 107 179.7' stroke='%2300a3ff' stroke-width='20' stroke-linecap='round'/><path d='M93 179.7 A80 80 0 0 1 20.3 107' stroke='%2338bdf8' stroke-width='20' stroke-linecap='round'/><path d='M20.3 93 A80 80 0 0 1 93 20.3' stroke='%230047ab' stroke-width='20' stroke-linecap='round'/></svg>");
}
.svcs-grid article:nth-child(3):hover::after { opacity: 0.11; }


/* ─────────────────────────────────────────────────────────────────────
   CARD 4 — REELS & VIDÉOS
   Watermark: Smartphone outline with play button (Reels / Stories)
   Accent:    Instagram magenta → purple gradient
   Icon:      Instagram magenta
───────────────────────────────────────────────────────────────────── */

.svcs-grid article:nth-child(4)::before {
  background: linear-gradient(90deg, #f58529 0%, #dd2a7b 38%, #8134af 72%, #515bd4 100%);
}

.svcs-grid article:nth-child(4) .svc-icon {
  background: rgba(193, 53, 132, .12);
  border-color: rgba(193, 53, 132, .28);
  color: #c13584;
}

/* Watermark: phone silhouette with Reels play triangle */
.svcs-grid article:nth-child(4)::after {
  width: 140px;
  height: 240px;
  top: -30px;
  right: -10px;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 120 210' xmlns='http://www.w3.org/2000/svg' fill='none'><rect x='10' y='10' width='100' height='190' rx='20' stroke='%23c13584' stroke-width='10'/><line x1='46' y1='26' x2='74' y2='26' stroke='%23c13584' stroke-width='6' stroke-linecap='round'/><circle cx='85' cy='26' r='5' stroke='%23c13584' stroke-width='4'/><polygon points='42,80 42,142 100,111' stroke='%23c13584' stroke-width='8' stroke-linejoin='round'/><line x1='42' y1='178' x2='78' y2='178' stroke='%23c13584' stroke-width='6' stroke-linecap='round'/></svg>");
}
.svcs-grid article:nth-child(4):hover::after { opacity: 0.1; }


/* ─────────────────────────────────────────────────────────────────────
   CARD 5 — PRODUCTION VIDÉO
   Watermark: Cinema lens (concentric rings + aperture crosshairs)
   Accent:    Cinematic amber → cyan
   Icon:      Cinematic amber/gold
───────────────────────────────────────────────────────────────────── */

.svcs-grid article:nth-child(5)::before {
  background: linear-gradient(90deg, #f59e0b 0%, #00a3ff 100%);
}

.svcs-grid article:nth-child(5) .svc-icon {
  background: rgba(245, 158, 11, .1);
  border-color: rgba(245, 158, 11, .25);
  color: #f59e0b;
}

/* Watermark: concentric circles (camera lens iris) */
.svcs-grid article:nth-child(5)::after {
  width: 240px;
  height: 240px;
  bottom: -60px;
  right: -60px;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg' fill='none'><circle cx='100' cy='100' r='90' stroke='%23f59e0b' stroke-width='8'/><circle cx='100' cy='100' r='72' stroke='%23f59e0b' stroke-width='6'/><circle cx='100' cy='100' r='54' stroke='%23f59e0b' stroke-width='5'/><circle cx='100' cy='100' r='36' stroke='%23f59e0b' stroke-width='4'/><circle cx='100' cy='100' r='18' stroke='%23f59e0b' stroke-width='3'/><line x1='100' y1='10' x2='100' y2='46' stroke='%23f59e0b' stroke-width='2'/><line x1='100' y1='154' x2='100' y2='190' stroke='%23f59e0b' stroke-width='2'/><line x1='10' y1='100' x2='46' y2='100' stroke='%23f59e0b' stroke-width='2'/><line x1='154' y1='100' x2='190' y2='100' stroke='%23f59e0b' stroke-width='2'/><line x1='27' y1='27' x2='52' y2='52' stroke='%23f59e0b' stroke-width='2'/><line x1='148' y1='148' x2='173' y2='173' stroke='%23f59e0b' stroke-width='2'/><line x1='173' y1='27' x2='148' y2='52' stroke='%23f59e0b' stroke-width='2'/><line x1='27' y1='173' x2='52' y2='148' stroke='%23f59e0b' stroke-width='2'/></svg>");
}
.svcs-grid article:nth-child(5):hover::after { opacity: 0.1; }


/* ─────────────────────────────────────────────────────────────────────
   CARD 6 — PODCAST & PERSONAL BRANDING
   Watermark: Condenser microphone with stand + soundwave arcs
   Accent:    Purple → cyan
   Icon:      Premium purple
───────────────────────────────────────────────────────────────────── */

.svcs-grid article:nth-child(6)::before {
  background: linear-gradient(90deg, #a855f7 0%, #00a3ff 100%);
}

.svcs-grid article:nth-child(6) .svc-icon {
  background: rgba(168, 85, 247, .12);
  border-color: rgba(168, 85, 247, .28);
  color: #a855f7;
}

/* Watermark: condenser microphone silhouette */
.svcs-grid article:nth-child(6)::after {
  width: 160px;
  height: 240px;
  bottom: -30px;
  right: -10px;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 140 220' xmlns='http://www.w3.org/2000/svg' fill='none'><rect x='28' y='14' width='84' height='110' rx='42' stroke='%23a855f7' stroke-width='11'/><line x1='28' y1='55' x2='112' y2='55' stroke='%23a855f7' stroke-width='5'/><line x1='28' y1='70' x2='112' y2='70' stroke='%23a855f7' stroke-width='5'/><line x1='28' y1='85' x2='112' y2='85' stroke='%23a855f7' stroke-width='5'/><line x1='28' y1='100' x2='112' y2='100' stroke='%23a855f7' stroke-width='5'/><path d='M12 72 Q5 95 5 112 Q5 129 12 148' stroke='%23a855f7' stroke-width='7' stroke-linecap='round' fill='none'/><path d='M128 72 Q135 95 135 112 Q135 129 128 148' stroke='%23a855f7' stroke-width='7' stroke-linecap='round' fill='none'/><path d='M70 124 Q70 158 50 168 L50 195' stroke='%23a855f7' stroke-width='9' stroke-linecap='round' fill='none'/><line x1='24' y1='195' x2='116' y2='195' stroke='%23a855f7' stroke-width='9' stroke-linecap='round'/></svg>");
}
.svcs-grid article:nth-child(6):hover::after { opacity: 0.11; }


/* ─────────────────────────────────────────────────────────────────────
   CARD 7 — LANDING PAGES & SITES WEB
   Watermark: Browser window with wireframe layout
   Accent:    Web green → cyan
   Icon:      Web green
───────────────────────────────────────────────────────────────────── */

.svcs-grid article:nth-child(7)::before {
  background: linear-gradient(90deg, #22c55e 0%, #00a3ff 100%);
}

.svcs-grid article:nth-child(7) .svc-icon {
  background: rgba(34, 197, 94, .1);
  border-color: rgba(34, 197, 94, .25);
  color: #22c55e;
}

/* Watermark: browser chrome + wireframe content */
.svcs-grid article:nth-child(7)::after {
  width: 260px;
  height: 200px;
  bottom: -40px;
  right: -40px;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 240 180' xmlns='http://www.w3.org/2000/svg' fill='none'><rect x='10' y='10' width='220' height='160' rx='14' stroke='%2322c55e' stroke-width='10'/><line x1='10' y1='50' x2='230' y2='50' stroke='%2322c55e' stroke-width='6'/><circle cx='36' cy='30' r='7' stroke='%2322c55e' stroke-width='5'/><circle cx='58' cy='30' r='7' stroke='%2322c55e' stroke-width='5'/><circle cx='80' cy='30' r='7' stroke='%2322c55e' stroke-width='5'/><rect x='100' y='18' width='118' height='22' rx='11' stroke='%2322c55e' stroke-width='4'/><line x1='30' y1='70' x2='210' y2='70' stroke='%2322c55e' stroke-width='5'/><line x1='30' y1='88' x2='170' y2='88' stroke='%2322c55e' stroke-width='4'/><rect x='30' y='106' width='82' height='46' rx='10' stroke='%2322c55e' stroke-width='4'/><rect x='126' y='106' width='84' height='46' rx='10' stroke='%2322c55e' stroke-width='4'/></svg>");
}
.svcs-grid article:nth-child(7):hover::after { opacity: 0.1; }


/* ─────────────────────────────────────────────────────────────────────
   CARD 8 — GÉNÉRATION DE LEADS & WHATSAPP
   Watermark: Circle speech bubble with phone icon (WhatsApp silhouette)
   Accent:    WhatsApp green pair
   Icon:      WhatsApp green
───────────────────────────────────────────────────────────────────── */

.svcs-grid article:nth-child(8)::before {
  background: linear-gradient(90deg, #25d366 0%, #128c7e 100%);
}

.svcs-grid article:nth-child(8) .svc-icon {
  background: rgba(37, 211, 102, .1);
  border-color: rgba(37, 211, 102, .25);
  color: #25d366;
}

/* Watermark: WhatsApp-style circular bubble with handset icon */
.svcs-grid article:nth-child(8)::after {
  width: 220px;
  height: 220px;
  top: -40px;
  right: -40px;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg' fill='none'><circle cx='100' cy='88' r='76' stroke='%2325d366' stroke-width='10'/><path d='M62 154 L46 192 L90 165' stroke='%2325d366' stroke-width='10' stroke-linejoin='round'/><path d='M74 57 Q72 52 77 47 L89 43 Q94 41 97 45 L105 59 Q107 63 103 66 Q100 68 99 71 Q106 83 118 89 Q121 86 124 84 Q128 82 132 84 L146 91 Q150 94 149 99 L145 111 Q143 115 138 115 Q101 115 74 57 Z' stroke='%2325d366' stroke-width='7' stroke-linejoin='round'/></svg>");
}
.svcs-grid article:nth-child(8):hover::after { opacity: 0.095; }


/* ─────────────────────────────────────────────────────────────────────
   CARD 9 — TRACKING & STRATÉGIE D'ACQUISITION
   Watermark: Ascending line chart with grid + data points
   Accent:    Sky blue → royal blue
   Icon:      Sky blue (data/analytics)
───────────────────────────────────────────────────────────────────── */

.svcs-grid article:nth-child(9)::before {
  background: linear-gradient(90deg, #38bdf8 0%, #0047ab 100%);
}

.svcs-grid article:nth-child(9) .svc-icon {
  background: rgba(56, 189, 248, .12);
  border-color: rgba(56, 189, 248, .28);
  color: #38bdf8;
}

/* Watermark: ascending line chart with grid lines and data point circles */
.svcs-grid article:nth-child(9)::after {
  width: 260px;
  height: 210px;
  bottom: -40px;
  right: -40px;
  opacity: 0.065;
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 240 190' xmlns='http://www.w3.org/2000/svg' fill='none'><line x1='30' y1='160' x2='215' y2='160' stroke='%2338bdf8' stroke-width='6' stroke-linecap='round'/><line x1='30' y1='160' x2='30' y2='15' stroke='%2338bdf8' stroke-width='6' stroke-linecap='round'/><line x1='30' y1='120' x2='215' y2='120' stroke='%2338bdf8' stroke-width='2' stroke-dasharray='8 5'/><line x1='30' y1='80' x2='215' y2='80' stroke='%2338bdf8' stroke-width='2' stroke-dasharray='8 5'/><line x1='30' y1='40' x2='215' y2='40' stroke='%2338bdf8' stroke-width='2' stroke-dasharray='8 5'/><polyline points='42,148 78,120 112,98 146,68 180,50 210,25' stroke='%2338bdf8' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/><circle cx='42' cy='148' r='6' stroke='%2338bdf8' stroke-width='4'/><circle cx='78' cy='120' r='6' stroke='%2338bdf8' stroke-width='4'/><circle cx='112' cy='98' r='6' stroke='%2338bdf8' stroke-width='4'/><circle cx='146' cy='68' r='6' stroke='%2338bdf8' stroke-width='4'/><circle cx='180' cy='50' r='6' stroke='%2338bdf8' stroke-width='4'/><circle cx='210' cy='25' r='6' stroke='%2338bdf8' stroke-width='4'/></svg>");
}
.svcs-grid article:nth-child(9):hover::after { opacity: 0.11; }


/* ─────────────────────────────────────────────────────────────────────
   CARD-SPECIFIC BACKGROUND TINTS
   Subtle corner glow unique to each platform (additional bg layer).
   Stacked after the spotlight layer from premium-effects.css.
───────────────────────────────────────────────────────────────────── */

/* Meta: deep blue + purple corner */
.svcs-grid article:nth-child(1) {
  background-image:
    radial-gradient(260px circle at var(--spot-x, -999px) var(--spot-y, -999px), rgba(0, 163, 255, .11), transparent 70%),
    radial-gradient(ellipse 110% 80% at bottom right, rgba(131, 58, 180, .06), transparent 70%),
    linear-gradient(158deg, rgba(22, 34, 56, .88) 0%, rgba(12, 19, 34, .93) 100%);
}

/* TikTok: cyan edge top-right */
.svcs-grid article:nth-child(2) {
  background-image:
    radial-gradient(260px circle at var(--spot-x, -999px) var(--spot-y, -999px), rgba(0, 163, 255, .11), transparent 70%),
    radial-gradient(ellipse 80% 70% at top right, rgba(105, 201, 208, .07), transparent 70%),
    linear-gradient(158deg, rgba(22, 34, 56, .88) 0%, rgba(12, 19, 34, .93) 100%);
}

/* Google: subtle multi-hue suggestion bottom-right */
.svcs-grid article:nth-child(3) {
  background-image:
    radial-gradient(260px circle at var(--spot-x, -999px) var(--spot-y, -999px), rgba(0, 163, 255, .11), transparent 70%),
    radial-gradient(ellipse 80% 80% at bottom right, rgba(56, 189, 248, .055), transparent 70%),
    linear-gradient(158deg, rgba(22, 34, 56, .88) 0%, rgba(12, 19, 34, .93) 100%);
}

/* Reels: Instagram magenta tint top-right */
.svcs-grid article:nth-child(4) {
  background-image:
    radial-gradient(260px circle at var(--spot-x, -999px) var(--spot-y, -999px), rgba(0, 163, 255, .11), transparent 70%),
    radial-gradient(ellipse 90% 70% at top right, rgba(193, 53, 132, .06), transparent 70%),
    linear-gradient(158deg, rgba(22, 34, 56, .88) 0%, rgba(12, 19, 34, .93) 100%);
}

/* Production: cinematic amber glow bottom */
.svcs-grid article:nth-child(5) {
  background-image:
    radial-gradient(260px circle at var(--spot-x, -999px) var(--spot-y, -999px), rgba(0, 163, 255, .11), transparent 70%),
    radial-gradient(ellipse 100% 80% at bottom right, rgba(245, 158, 11, .055), transparent 70%),
    linear-gradient(158deg, rgba(22, 34, 56, .88) 0%, rgba(12, 19, 34, .93) 100%);
}

/* Podcast: purple glow bottom-right */
.svcs-grid article:nth-child(6) {
  background-image:
    radial-gradient(260px circle at var(--spot-x, -999px) var(--spot-y, -999px), rgba(0, 163, 255, .11), transparent 70%),
    radial-gradient(ellipse 90% 80% at bottom right, rgba(168, 85, 247, .065), transparent 70%),
    linear-gradient(158deg, rgba(22, 34, 56, .88) 0%, rgba(12, 19, 34, .93) 100%);
}

/* Landing Pages: green glow bottom-right */
.svcs-grid article:nth-child(7) {
  background-image:
    radial-gradient(260px circle at var(--spot-x, -999px) var(--spot-y, -999px), rgba(0, 163, 255, .11), transparent 70%),
    radial-gradient(ellipse 90% 80% at bottom right, rgba(34, 197, 94, .055), transparent 70%),
    linear-gradient(158deg, rgba(22, 34, 56, .88) 0%, rgba(12, 19, 34, .93) 100%);
}

/* WhatsApp: WhatsApp green top-right */
.svcs-grid article:nth-child(8) {
  background-image:
    radial-gradient(260px circle at var(--spot-x, -999px) var(--spot-y, -999px), rgba(0, 163, 255, .11), transparent 70%),
    radial-gradient(ellipse 90% 80% at top right, rgba(37, 211, 102, .055), transparent 70%),
    linear-gradient(158deg, rgba(22, 34, 56, .88) 0%, rgba(12, 19, 34, .93) 100%);
}

/* Tracking: sky blue corner glow */
.svcs-grid article:nth-child(9) {
  background-image:
    radial-gradient(260px circle at var(--spot-x, -999px) var(--spot-y, -999px), rgba(0, 163, 255, .11), transparent 70%),
    radial-gradient(ellipse 100% 90% at bottom right, rgba(56, 189, 248, .065), transparent 70%),
    linear-gradient(158deg, rgba(22, 34, 56, .88) 0%, rgba(12, 19, 34, .93) 100%);
}


/* ─────────────────────────────────────────────────────────────────────
   HOVER ICON TINT — preserve platform colour on card hover
   (overrides the generic blue from style.css .svc-card:hover .svc-icon)
───────────────────────────────────────────────────────────────────── */

.svcs-grid article:nth-child(1):hover .svc-icon { background: rgba(24, 119, 242, .22); border-color: rgba(24, 119, 242, .45); }
.svcs-grid article:nth-child(2):hover .svc-icon { background: rgba(105, 201, 208, .22); border-color: rgba(105, 201, 208, .45); }
.svcs-grid article:nth-child(3):hover .svc-icon { background: rgba(66, 133, 244, .22); border-color: rgba(66, 133, 244, .45); }
.svcs-grid article:nth-child(4):hover .svc-icon { background: rgba(193, 53, 132, .22); border-color: rgba(193, 53, 132, .45); }
.svcs-grid article:nth-child(5):hover .svc-icon { background: rgba(245, 158, 11, .18); border-color: rgba(245, 158, 11, .4); }
.svcs-grid article:nth-child(6):hover .svc-icon { background: rgba(168, 85, 247, .22); border-color: rgba(168, 85, 247, .45); }
.svcs-grid article:nth-child(7):hover .svc-icon { background: rgba(34, 197, 94, .18); border-color: rgba(34, 197, 94, .4); }
.svcs-grid article:nth-child(8):hover .svc-icon { background: rgba(37, 211, 102, .18); border-color: rgba(37, 211, 102, .4); }
.svcs-grid article:nth-child(9):hover .svc-icon { background: rgba(56, 189, 248, .22); border-color: rgba(56, 189, 248, .45); }


/* ─────────────────────────────────────────────────────────────────────
   HOVER BORDER TINT — each card's top border glows in its platform colour
───────────────────────────────────────────────────────────────────── */

.svcs-grid article:nth-child(1):hover { border-top-color: rgba(24, 119, 242, .55); }
.svcs-grid article:nth-child(2):hover { border-top-color: rgba(105, 201, 208, .55); }
.svcs-grid article:nth-child(3):hover { border-top-color: rgba(66, 133, 244, .55); }
.svcs-grid article:nth-child(4):hover { border-top-color: rgba(193, 53, 132, .55); }
.svcs-grid article:nth-child(5):hover { border-top-color: rgba(245, 158, 11, .5); }
.svcs-grid article:nth-child(6):hover { border-top-color: rgba(168, 85, 247, .55); }
.svcs-grid article:nth-child(7):hover { border-top-color: rgba(34, 197, 94, .5); }
.svcs-grid article:nth-child(8):hover { border-top-color: rgba(37, 211, 102, .5); }
.svcs-grid article:nth-child(9):hover { border-top-color: rgba(56, 189, 248, .55); }


/* ─────────────────────────────────────────────────────────────────────
   REDUCED MOTION — watermarks still visible, no transition
───────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .svcs-grid .svc-card::after { transition: none; }
}