/* Animated tech marks for short .s-sec blocks (right column fillers) */
.s-why-2col:has(.s-tech-mark){
  align-items:center;
}
.s-tech-mark{
  justify-self:center;
  width:min(100%,280px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.1rem;
  pointer-events:none;
  user-select:none;
  padding:1.25rem 1rem;
}
.s-tech-mark__stage{
  position:relative;
  width:9.5rem;
  height:9.5rem;
  display:grid;
  place-items:center;
}
.s-tech-mark__glow{
  position:absolute;
  inset:12%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(200,168,75,.22),transparent 68%);
  filter:blur(10px);
  animation:sTechGlow 3.4s ease-in-out infinite;
}
.s-tech-mark__orbit{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid rgba(200,168,75,.18);
  animation:sTechSpin 14s linear infinite;
}
.s-tech-mark__orbit--a{
  inset:8%;
  border-style:dashed;
  border-color:rgba(200,168,75,.28);
}
.s-tech-mark__orbit--b{
  inset:-4%;
  border-color:rgba(154,173,196,.14);
  animation-duration:22s;
  animation-direction:reverse;
}
.s-tech-mark__orbit--a::before,
.s-tech-mark__orbit--b::before{
  content:"";
  position:absolute;
  top:50%;
  left:0;
  width:.42rem;
  height:.42rem;
  border-radius:50%;
  background:var(--gold-l,#e2c97a);
  box-shadow:0 0 10px rgba(200,168,75,.55);
  transform:translate(-50%,-50%);
}
.s-tech-mark__orbit--b::before{
  left:auto;
  right:0;
  transform:translate(50%,-50%);
  background:var(--cro,#34d399);
  box-shadow:0 0 10px rgba(52,211,153,.45);
  width:.34rem;
  height:.34rem;
}
.s-tech-mark__pulse{
  position:absolute;
  inset:22%;
  border-radius:50%;
  border:1px solid rgba(200,168,75,.22);
  animation:sTechPulse 2.8s ease-out infinite;
}
.s-tech-mark__glyph{
  position:relative;
  z-index:1;
  width:4.6rem;
  height:4.6rem;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,rgba(30,42,66,.96),rgba(15,24,44,.92));
  border:1px solid rgba(200,168,75,.28);
  box-shadow:
    0 12px 28px rgba(8,14,28,.35),
    inset 0 1px 0 rgba(255,255,255,.04);
  overflow:visible;
}
.s-tech-mark__icon{
  display:grid;
  place-items:center;
  width:2.85rem;
  height:2.85rem;
  animation:sTechFloat 3s ease-in-out infinite;
}
.s-tech-mark__icon svg{
  width:100%;
  height:100%;
  display:block;
  overflow:visible;
}
.s-tech-mark__meta{
  text-align:center;
}
.s-tech-mark__name{
  display:block;
  font-family:Cormorant,serif;
  font-size:1.35rem;
  font-weight:700;
  color:var(--white,#edf0f7);
  letter-spacing:.02em;
  line-height:1.1;
}
.s-tech-mark__sub{
  display:block;
  margin-top:.28rem;
  font-family:Outfit,sans-serif;
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted,#6b7f99);
}

/* Brand / topic circle tints */
.s-tech-mark--wordpress .s-tech-mark__glyph{
  background:radial-gradient(circle at 35% 30%,#3d8fc4,#21759b 55%,#135e86);
  border-color:rgba(96,175,223,.35);
}
.s-tech-mark--react .s-tech-mark__glyph{
  background:radial-gradient(circle at 35% 30%,#1b3a4a,#0f182c);
  border-color:rgba(97,218,251,.35);
}
.s-tech-mark--react .s-tech-mark__icon{width:2.85rem;height:2.85rem}
.s-tech-mark--react .s-tech-mark__orbit--a{border-color:rgba(97,218,251,.28)}
.s-tech-mark--shopify .s-tech-mark__glyph{
  background:radial-gradient(circle at 35% 30%,#6fd3a0,#2e9e64 60%,#1f7a4c);
  border-color:rgba(149,224,186,.35);
}
.s-tech-mark--woocommerce .s-tech-mark__glyph{
  background:radial-gradient(circle at 35% 30%,#c48ad8,#9b5c8f 55%,#7a3f72);
  border-color:rgba(214,170,230,.35);
}
.s-tech-mark--python .s-tech-mark__glyph{
  background:radial-gradient(circle at 30% 25%,#4b8bbe,#306998 50%,#1e4d73);
  border-color:rgba(255,212,59,.28);
}
.s-tech-mark--nodejs .s-tech-mark__glyph{
  background:radial-gradient(circle at 35% 30%,#4f9e4f,#3c873a 55%,#2f6b2f);
  border-color:rgba(140,200,140,.35);
  border-radius:18%;
  clip-path:polygon(50% 4%,93% 27%,93% 73%,50% 96%,7% 73%,7% 27%);
}
.s-tech-mark--php .s-tech-mark__glyph{
  width:5.4rem;
  border-radius:999px;
  background:radial-gradient(circle at 35% 30%,#8892bf,#6c7eb7 55%,#4f5b93);
  border-color:rgba(170,180,220,.35);
}
.s-tech-mark--laravel .s-tech-mark__glyph{
  background:radial-gradient(circle at 35% 30%,#f57a6a,#ff2d20 55%,#c41e14);
  border-color:rgba(255,140,130,.35);
}
.s-tech-mark--wix .s-tech-mark__glyph{
  background:radial-gradient(circle at 35% 30%,#2a2a2a,#0f0f0f);
  border-color:rgba(255,255,255,.22);
}
.s-tech-mark--squarespace .s-tech-mark__glyph{
  background:radial-gradient(circle at 35% 30%,#3a3a3a,#111);
  border-color:rgba(255,255,255,.2);
}
.s-tech-mark--mobile .s-tech-mark__glyph{
  background:radial-gradient(circle at 35% 30%,#3d6bb5,#1e3a6e 60%,#132748);
  border-color:rgba(120,170,255,.35);
  border-radius:1.1rem;
}
.s-tech-mark--android .s-tech-mark__glyph{
  background:radial-gradient(circle at 35% 30%,#7cbc4a,#3d8c3a 55%,#2a6428);
  border-color:rgba(164,218,120,.35);
}
.s-tech-mark--ios .s-tech-mark__glyph{
  background:radial-gradient(circle at 35% 30%,#6a6f7a,#2c2f36 55%,#1a1c21);
  border-color:rgba(220,220,230,.28);
}
.s-tech-mark--secure .s-tech-mark__glyph,
.s-tech-mark--qa .s-tech-mark__glyph{border-color:rgba(52,211,153,.3)}
.s-tech-mark--keywords .s-tech-mark__glyph{
  background:radial-gradient(circle at 35% 30%,#5b7fd1,#3554a8 55%,#243a78);
  border-color:rgba(140,175,255,.35);
}
.s-tech-mark--display .s-tech-mark__glyph{
  background:radial-gradient(circle at 35% 30%,#c47a4a,#9a4f28 55%,#6e3518);
  border-color:rgba(240,180,130,.35);
}
.s-tech-mark--strategy .s-tech-mark__glyph{
  background:radial-gradient(circle at 35% 30%,#8b6bc4,#5a3f96 55%,#3d2a6a);
  border-color:rgba(190,160,240,.35);
}
.s-tech-mark--social .s-tech-mark__glyph{
  background:radial-gradient(circle at 35% 30%,#4aa0d8,#2678b0 55%,#18557f);
  border-color:rgba(130,200,245,.35);
}
.s-tech-mark--local .s-tech-mark__glyph{
  background:radial-gradient(circle at 35% 30%,#d46a6a,#a83d3d 55%,#742828);
  border-color:rgba(240,150,150,.35);
}
.s-tech-mark--national .s-tech-mark__glyph{
  background:radial-gradient(circle at 35% 30%,#4a6fd4,#2a48a0 55%,#1c3270);
  border-color:rgba(140,170,245,.35);
}
.s-tech-mark--content .s-tech-mark__glyph{
  background:radial-gradient(circle at 35% 30%,#6a8f5a,#3f6a35 55%,#2a4a24);
  border-color:rgba(160,210,140,.35);
}
.s-tech-mark--data .s-tech-mark__glyph{
  background:radial-gradient(circle at 35% 30%,#4a9a9a,#2d6e6e 55%,#1e4a4a);
  border-color:rgba(120,210,210,.35);
}
.s-tech-mark--industries .s-tech-mark__glyph{
  background:radial-gradient(circle at 35% 30%,#8a7a55,#5c4f35 55%,#3d3424);
  border-color:rgba(200,168,75,.35);
}
.s-tech-mark--ecommerce .s-tech-mark__glyph{
  background:radial-gradient(circle at 35% 30%,#c48a4a,#9a5f28 55%,#6e4218);
  border-color:rgba(240,190,130,.35);
}
.s-tech-mark--software .s-tech-mark__glyph{
  background:radial-gradient(circle at 35% 30%,#5a6a8f,#3a4568 55%,#262f48);
  border-color:rgba(160,180,220,.35);
}
.s-tech-mark--ads .s-tech-mark__glyph{
  background:radial-gradient(circle at 35% 30%,#4a8ad4,#2a5fa0 55%,#1c4270);
  border-color:rgba(130,185,245,.35);
}
.s-tech-mark--technical .s-tech-mark__glyph{
  background:radial-gradient(circle at 35% 30%,#6a7a8f,#3f4a5c 55%,#2a323e);
  border-color:rgba(170,190,210,.3);
}
.s-tech-mark--audit .s-tech-mark__glyph,
.s-tech-mark--cta .s-tech-mark__glyph{
  border-color:rgba(200,168,75,.4);
}

@keyframes sTechSpin{to{transform:rotate(360deg)}}
@keyframes sTechGlow{
  0%,100%{opacity:.55;transform:scale(1)}
  50%{opacity:1;transform:scale(1.08)}
}
@keyframes sTechPulse{
  0%{transform:scale(.85);opacity:.55}
  70%{transform:scale(1.2);opacity:0}
  100%{transform:scale(1.25);opacity:0}
}
@keyframes sTechFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}

@media (max-width:992px){
  .s-tech-mark{
    width:100%;
    max-width:240px;
    margin-inline:auto;
    padding:.5rem 0 0;
  }
  .s-tech-mark__stage{width:7.5rem;height:7.5rem}
  .s-tech-mark__glyph{width:3.6rem;height:3.6rem}
  .s-tech-mark--php .s-tech-mark__glyph{width:4.5rem}
  .s-tech-mark__icon{width:2.35rem;height:2.35rem}
  .s-tech-mark--react .s-tech-mark__icon{width:2.55rem;height:2.55rem}
}

@media (prefers-reduced-motion:reduce){
  .s-tech-mark__glow,
  .s-tech-mark__orbit,
  .s-tech-mark__pulse,
  .s-tech-mark__icon{animation:none!important}
}