/* Quiet, service-specific infographic layers: visual context without making cards noisy. */
.service-grid article{position:relative;isolation:isolate;overflow:hidden;background:var(--panel)}
.service-grid article>*{position:relative;z-index:1}
.service-grid article:before,.service-grid article:after{content:"";position:absolute;z-index:0;pointer-events:none;opacity:.42;transition:opacity .25s ease,transform .25s ease}
.service-grid article:hover:before,.service-grid article:hover:after{opacity:.68}

/* 01 Brand: palette, rings and identity mark */
.service-grid article:nth-child(1):before{width:178px;height:178px;right:-34px;top:-42px;border-radius:50%;background:radial-gradient(circle at 50% 50%,transparent 0 21%,#1769e0 22% 23%,transparent 24% 39%,#a76009 40% 41%,transparent 42% 58%,#1769e0 59% 60%,transparent 61%)}
.service-grid article:nth-child(1):after{width:118px;height:12px;right:27px;bottom:31px;background:linear-gradient(90deg,#1769e0 0 30%,transparent 30% 35%,#a76009 35% 65%,transparent 65% 70%,#41966d 70%);box-shadow:0 22px 0 #1769e080,0 44px 0 #a7600966}

/* 02 Content: stacked media frames */
.service-grid article:nth-child(2):before{width:177px;height:126px;right:-18px;top:22px;border:1px solid #1769e0;border-radius:10px;background:linear-gradient(145deg,#1769e023 0 49%,transparent 49% 51%,#a7600920 51%),linear-gradient(90deg,transparent 0 17%,#1769e055 17% 18%,transparent 18% 81%,#1769e055 81% 82%,transparent 82%),linear-gradient(transparent 0 23%,#1769e055 23% 24%,transparent 24% 76%,#1769e055 76% 77%,transparent 77%)}
.service-grid article:nth-child(2):after{width:108px;height:72px;right:39px;top:59px;border:1px solid #a76009;border-radius:7px;transform:rotate(7deg);box-shadow:11px -11px 0 -1px var(--panel),11px -11px 0 0 #1769e0}

/* 03 Website: browser wireframe with interface bars */
.service-grid article:nth-child(3):before{width:193px;height:132px;right:-18px;top:20px;border:1px solid #1769e0;border-radius:9px;background:linear-gradient(#1769e0,#1769e0) 14px 14px/6px 6px no-repeat,linear-gradient(#a76009,#a76009) 26px 14px/6px 6px no-repeat,linear-gradient(#1769e0,#1769e0) 38px 14px/6px 6px no-repeat,linear-gradient(#1769e050,#1769e050) 14px 36px/56px 64px no-repeat,linear-gradient(#a760094d,#a760094d) 82px 36px/93px 11px no-repeat,linear-gradient(#1769e050,#1769e050) 82px 58px/69px 7px no-repeat,linear-gradient(#1769e050,#1769e050) 82px 74px/82px 7px no-repeat,linear-gradient(#1769e050,#1769e050) 82px 90px/48px 7px no-repeat}
.service-grid article:nth-child(3):after{width:86px;height:3px;right:34px;top:164px;background:#1769e0;box-shadow:19px 9px 0 6px #1769e04d}

/* 04 Growth: rising data line and chart blocks */
.service-grid article:nth-child(4):before{width:186px;height:125px;right:-8px;top:15px;background:linear-gradient(90deg,transparent 0 6%,#1769e055 6% 7%,transparent 7% 27%,#1769e055 27% 28%,transparent 28% 48%,#1769e055 48% 49%,transparent 49% 69%,#1769e055 69% 70%,transparent 70% 90%,#1769e055 90% 91%,transparent 91%),linear-gradient(transparent 0 18%,#1769e055 18% 19%,transparent 19% 45%,#1769e055 45% 46%,transparent 46% 72%,#1769e055 72% 73%,transparent 73%);clip-path:polygon(0 100%,0 63%,19% 72%,35% 48%,52% 59%,68% 31%,84% 41%,100% 8%,100% 100%)}
.service-grid article:nth-child(4):after{width:170px;height:104px;right:1px;top:13px;border-top:3px solid #a76009;transform:skewY(-27deg);transform-origin:top right}

/* 05 Ongoing support: refresh ring and calendar marks */
.service-grid article:nth-child(5):before{width:156px;height:156px;right:-26px;top:-29px;border-radius:50%;background:conic-gradient(from 25deg,#1769e0 0 24%,transparent 24% 31%,#a76009 31% 54%,transparent 54% 61%,#1769e0 61% 84%,transparent 84%)}
.service-grid article:nth-child(5):after{width:98px;height:74px;right:29px;bottom:27px;border:1px solid #1769e0;border-radius:7px;background:linear-gradient(#1769e0,#1769e0) 0 16px/100% 1px no-repeat,radial-gradient(circle,#a76009 0 3px,transparent 4px) 19px 37px/26px 23px repeat}

/* 06 Systems: connected-node workflow diagram */
.service-grid article:nth-child(6):before{width:184px;height:130px;right:-9px;top:17px;background:linear-gradient(33deg,transparent 48%,#1769e066 49% 50%,transparent 51%),linear-gradient(-31deg,transparent 49%,#a7600966 50% 51%,transparent 52%),linear-gradient(90deg,transparent 49%,#1769e066 50% 51%,transparent 52%)}
.service-grid article:nth-child(6):after{width:18px;height:18px;right:29px;top:32px;border-radius:50%;background:#1769e0;box-shadow:-64px 42px 0 #a76009,-4px 82px 0 #41966d,-122px 58px 0 #1769e0,0 0 0 6px #1769e025,-64px 42px 0 6px #a7600925,-4px 82px 0 6px #41966d25,-122px 58px 0 6px #1769e025}

html[data-mode=dark] .service-grid article{background:#10283e}
html[data-mode=dark] .service-grid article:before,html[data-mode=dark] .service-grid article:after{opacity:.3}
html[data-mode=dark] .service-grid article:hover:before,html[data-mode=dark] .service-grid article:hover:after{opacity:.52}
@media(max-width:650px){.service-grid article:before,.service-grid article:after{opacity:.25;transform:scale(.83);transform-origin:top right}.service-grid article:hover:before,.service-grid article:hover:after{opacity:.38}}

/* Always-visible background infographics. These sit in the actual card paint layer,
   so they remain clear on touch devices where hover/pseudo effects are subtle. */
.service-grid article:nth-child(1){background:radial-gradient(circle at 85% 17%,transparent 0 19px,#2e8cff 20px 22px,transparent 23px 38px,#e3a02b 39px 41px,transparent 42px 57px,#2e8cff 58px 60px,transparent 61px),linear-gradient(135deg,transparent 64%,#2e8cff18 64% 65%,transparent 65%),var(--panel)}
.service-grid article:nth-child(2){background:linear-gradient(145deg,transparent 0 61%,#2e8cff15 61% 62%,transparent 62%),repeating-linear-gradient(0deg,transparent 0 25px,#2e8cff12 25px 26px),var(--panel)}
.service-grid article:nth-child(3){background:linear-gradient(#2e8cff42,#2e8cff42) 79% 21%/12px 12px no-repeat,linear-gradient(#e3a02b55,#e3a02b55) 84% 21%/12px 12px no-repeat,linear-gradient(#2e8cff35,#2e8cff35) 74% 30%/22% 2px no-repeat,linear-gradient(90deg,transparent 0 74%,#2e8cff15 74% 75%,transparent 75%),var(--panel)}
.service-grid article:nth-child(4){background:linear-gradient(145deg,transparent 0 64%,#2e8cff28 64% 65%,transparent 65%),linear-gradient(30deg,transparent 0 72%,#e3a02b28 72% 73%,transparent 73%),repeating-linear-gradient(90deg,transparent 0 36px,#2e8cff10 36px 37px),var(--panel)}
.service-grid article:nth-child(5){background:conic-gradient(from 22deg at 86% 17%,#2e8cff42 0 20%,transparent 20% 30%,#e3a02b4a 30% 50%,transparent 50% 60%,#2e8cff42 60% 80%,transparent 80%),var(--panel)}
.service-grid article:nth-child(6){background:radial-gradient(circle at 83% 19%,#2e8cff88 0 6px,transparent 7px),radial-gradient(circle at 70% 30%,#e3a02b88 0 6px,transparent 7px),radial-gradient(circle at 88% 39%,#4eb98288 0 6px,transparent 7px),linear-gradient(145deg,transparent 0 64%,#2e8cff2c 64% 65%,transparent 65%),var(--panel)}
html[data-mode=dark] .service-grid article:nth-child(1){background:radial-gradient(circle at 85% 17%,transparent 0 19px,#62adff 20px 22px,transparent 23px 38px,#f2ba54 39px 41px,transparent 42px 57px,#62adff 58px 60px,transparent 61px),linear-gradient(135deg,transparent 64%,#62adff25 64% 65%,transparent 65%),#10283e}
html[data-mode=dark] .service-grid article:nth-child(2),html[data-mode=dark] .service-grid article:nth-child(4){background-color:#10283e}
html[data-mode=dark] .service-grid article:nth-child(3),html[data-mode=dark] .service-grid article:nth-child(5),html[data-mode=dark] .service-grid article:nth-child(6){background-color:#10283e}

/* Full-card artwork: each pillar is now a complete visual panel, not a small corner accent. */
.services .service-grid article{
  padding:30px!important;
  min-height:350px;
  border:1px solid transparent!important;
  border-radius:18px!important;
  overflow:hidden;
  box-shadow:0 14px 32px rgba(16,44,73,.08)!important;
}
.services .service-grid article:after{display:block!important;content:""!important;inset:auto!important;width:230px!important;height:230px!important;right:-92px!important;bottom:-118px!important;border:1px solid rgba(18,75,130,.14)!important;border-radius:50%!important;background:transparent!important;transform:none!important}
.services .service-grid article:before{display:block!important;content:""!important;inset:auto!important;width:180px!important;height:180px!important;right:-75px!important;top:-83px!important;border-radius:50%!important;opacity:1!important;transform:none!important}
.services .service-grid article>*{position:relative;z-index:2}
.services .service-grid article h3{color:#123559!important;max-width:80%}
.services .service-grid article p{color:#345775!important;max-width:88%}
.services .service-grid article ul{border-color:rgba(18,75,130,.22)!important;color:#254b6a!important}
.services .service-grid article .service-icon{background:rgba(255,255,255,.7)!important;border-color:rgba(18,75,130,.28)!important;color:#1666bd!important}
.services .service-grid article:nth-child(1){background:radial-gradient(circle at 108% -10%,#fff 0 7%,transparent 7.5%),linear-gradient(135deg,#e7f4ff 0%,#cfe7ff 52%,#f8fbff 100%)!important;border-color:#b8d8f3!important}
.services .service-grid article:nth-child(1):before{background:repeating-radial-gradient(circle at center,#1769e0 0 2px,transparent 3px 18px)!important}
.services .service-grid article:nth-child(2){background:linear-gradient(130deg,#e9fbf7 0%,#cdf2e8 57%,#f8fffd 100%)!important;border-color:#b7e4d8!important}
.services .service-grid article:nth-child(2):before{background:linear-gradient(135deg,transparent 0 32%,#0f9273 32% 34%,transparent 34% 48%,#1cae8b 48% 50%,transparent 50%)!important;border:10px solid rgba(15,146,115,.20)!important;border-radius:14px!important;transform:rotate(-13deg)!important}
.services .service-grid article:nth-child(3){background:linear-gradient(135deg,#eef2ff 0%,#dbe5ff 56%,#fbfcff 100%)!important;border-color:#c4d0f4!important}
.services .service-grid article:nth-child(3):before{background:linear-gradient(#206fd0,#206fd0) 18px 18px/8px 8px no-repeat,linear-gradient(#e99c2d,#e99c2d) 35px 18px/8px 8px no-repeat,linear-gradient(#206fd055,#206fd055) 18px 42px/55px 85px no-repeat,linear-gradient(#206fd055,#206fd055) 90px 44px/75px 12px no-repeat,linear-gradient(#206fd055,#206fd055) 90px 68px/56px 9px no-repeat,linear-gradient(#206fd055,#206fd055) 90px 88px/67px 9px no-repeat!important;border:2px solid rgba(32,111,208,.45)!important;border-radius:16px!important}
.services .service-grid article:nth-child(4){background:linear-gradient(135deg,#fff6e9 0%,#ffe5b9 56%,#fffdf9 100%)!important;border-color:#f1d39b!important}
.services .service-grid article:nth-child(4):before{background:linear-gradient(145deg,transparent 0 34%,#d98813 34% 37%,transparent 37% 50%,#d98813 50% 53%,transparent 53% 67%,#d98813 67% 70%,transparent 70%)!important;border-left:2px solid rgba(185,107,5,.48)!important;border-bottom:2px solid rgba(185,107,5,.48)!important;border-radius:0!important;transform:rotate(-11deg)!important}
.services .service-grid article:nth-child(5){background:linear-gradient(135deg,#f6edff 0%,#e6d4fb 55%,#fffaff 100%)!important;border-color:#d8bfed!important}
.services .service-grid article:nth-child(5):before{background:conic-gradient(from 18deg,#7c43ba 0 22%,transparent 22% 32%,#b96de6 32% 55%,transparent 55% 65%,#7c43ba 65% 88%,transparent 88%)!important}
.services .service-grid article:nth-child(6){background:linear-gradient(135deg,#e8f7f4 0%,#c7ebe7 55%,#f8fffe 100%)!important;border-color:#b6ddd8!important}
.services .service-grid article:nth-child(6):before{background:radial-gradient(circle at 28% 28%,#087c79 0 7px,transparent 8px),radial-gradient(circle at 75% 31%,#2795d8 0 7px,transparent 8px),radial-gradient(circle at 48% 72%,#e99c2d 0 7px,transparent 8px),linear-gradient(32deg,transparent 48%,#087c7988 49% 51%,transparent 52%),linear-gradient(-30deg,transparent 48%,#2795d888 49% 51%,transparent 52%)!important}
html[data-mode=dark] .services .service-grid article{box-shadow:0 14px 32px rgba(0,0,0,.25)!important}
html[data-mode=dark] .services .service-grid article h3{color:#f3f8ff!important}html[data-mode=dark] .services .service-grid article p{color:#d0e0ed!important}html[data-mode=dark] .services .service-grid article ul{color:#d8e5ee!important;border-color:rgba(229,241,255,.23)!important}html[data-mode=dark] .services .service-grid article .service-icon{background:rgba(255,255,255,.08)!important;color:#9bd0ff!important;border-color:rgba(210,232,255,.28)!important}
html[data-mode=dark] .services .service-grid article:nth-child(1){background:linear-gradient(135deg,#133f6a 0%,#0d2e51 100%)!important;border-color:#315f8d!important}html[data-mode=dark] .services .service-grid article:nth-child(2){background:linear-gradient(135deg,#0c504d 0%,#0d343f 100%)!important;border-color:#277772!important}html[data-mode=dark] .services .service-grid article:nth-child(3){background:linear-gradient(135deg,#253d7c 0%,#172858 100%)!important;border-color:#526eae!important}html[data-mode=dark] .services .service-grid article:nth-child(4){background:linear-gradient(135deg,#704715 0%,#38270f 100%)!important;border-color:#976823!important}html[data-mode=dark] .services .service-grid article:nth-child(5){background:linear-gradient(135deg,#512b72 0%,#2f1d4a 100%)!important;border-color:#784aa2!important}html[data-mode=dark] .services .service-grid article:nth-child(6){background:linear-gradient(135deg,#0f545b 0%,#0c303b 100%)!important;border-color:#32818a!important}
/* One coherent dark card family, inspired by the VynForge logo's blue/cyan steel. */
html[data-mode=dark] .services .service-grid article:nth-child(1){background:linear-gradient(135deg,#123f73,#092944)!important;border-color:#2d76ae!important}
html[data-mode=dark] .services .service-grid article:nth-child(2){background:linear-gradient(135deg,#10486a,#092b46)!important;border-color:#287fa8!important}
html[data-mode=dark] .services .service-grid article:nth-child(3){background:linear-gradient(135deg,#174d88,#0b294d)!important;border-color:#3d89c8!important}
html[data-mode=dark] .services .service-grid article:nth-child(4){background:linear-gradient(135deg,#0e4168,#082844)!important;border-color:#347fae!important}
html[data-mode=dark] .services .service-grid article:nth-child(5){background:linear-gradient(135deg,#135276,#092a48)!important;border-color:#3d8cb8!important}
html[data-mode=dark] .services .service-grid article:nth-child(6){background:linear-gradient(135deg,#0c4a67,#08283e)!important;border-color:#2d87a9!important}
@media(max-width:650px){.services .service-grid article{min-height:0;padding:30px 27px!important}.services .service-grid article:before{width:160px!important;height:160px!important;right:-60px!important;top:-70px!important}.services .service-grid article:after{width:190px!important;height:190px!important;right:-82px!important;bottom:-108px!important}.services .service-grid article h3{max-width:82%}.services .service-grid article p{max-width:86%}}

/* Recognisable service illustrations, placed behind the content in every card. */
.services .service-grid article:before{
  width:205px!important;height:185px!important;right:-24px!important;top:26px!important;
  border:0!important;border-radius:0!important;transform:none!important;background-position:center!important;
  background-size:contain!important;background-repeat:no-repeat!important;opacity:.9!important;
}
.services .service-grid article:nth-child(1):before{background-image:url('assets/service-infographics/brand-presence.svg')!important}
.services .service-grid article:nth-child(2):before{background-image:url('assets/service-infographics/content-product.svg')!important}
.services .service-grid article:nth-child(3):before{background-image:url('assets/service-infographics/website.svg')!important}
.services .service-grid article:nth-child(4):before{background-image:url('assets/service-infographics/growth.svg')!important}
.services .service-grid article:nth-child(5):before{background-image:url('assets/service-infographics/ongoing-support.svg')!important}
.services .service-grid article:nth-child(6):before{background-image:url('assets/service-infographics/systems.svg')!important}
/* Light service cards stay in the same ice-blue VynForge family. */
html:not([data-mode=dark]) .services .service-grid article:nth-child(1){background:linear-gradient(135deg,#eaf5ff,#d8ecfb)!important;border-color:#b9d9f0!important}
html:not([data-mode=dark]) .services .service-grid article:nth-child(2){background:linear-gradient(135deg,#e8fbfc,#d7f2f6)!important;border-color:#bae3e9!important}
html:not([data-mode=dark]) .services .service-grid article:nth-child(3){background:linear-gradient(135deg,#edf4ff,#dce9fb)!important;border-color:#c4d8f3!important}
html:not([data-mode=dark]) .services .service-grid article:nth-child(4){background:linear-gradient(135deg,#eaf7ff,#d8edf9)!important;border-color:#bddbea!important}
html:not([data-mode=dark]) .services .service-grid article:nth-child(5){background:linear-gradient(135deg,#eefbff,#d9f1f8)!important;border-color:#c2e1ec!important}
html:not([data-mode=dark]) .services .service-grid article:nth-child(6){background:linear-gradient(135deg,#e7f8fb,#d3edf3)!important;border-color:#b4dfe6!important}
html[data-mode=dark] .services .service-grid article:before{opacity:.72!important;filter:brightness(1.2) saturate(.9)}
@media(max-width:650px){.services .service-grid article:before{width:178px!important;height:162px!important;right:-18px!important;top:20px!important;opacity:.84!important}.services .service-grid article h3,.services .service-grid article p,.services .service-grid article ul{position:relative;z-index:3}.services .service-grid article h3{padding-right:88px}}