/* ============================================================
   STHINXY :: REDESIGN OVERLAY
   - new name gate scene (white / black space)
   - cleaner contact cards (lucide-style svg + red pixel accent)
   - animated snake cursor surface
   ============================================================ */

:root{
  --gate-ink: var(--fg);
  --gate-paper: var(--bg);
  --gate-line: var(--fg);
  --gate-muted: color-mix(in srgb, var(--fg) 55%, var(--bg));
  --gate-soft: color-mix(in srgb, var(--fg) 18%, var(--bg));
  --gate-red: #e23a2e;
}
[data-mode="black"]:root,
html[data-mode="black"]{
  --gate-red: #ff3b34;
}

/* ---------- NAME GATE : full scene ---------- */
.name-gate{
  background: var(--gate-paper) !important;
  padding: 0 !important;
  overflow: hidden;
  isolation: isolate;
  animation: none !important;
}
/* grid */
.name-gate::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    linear-gradient(to right,  color-mix(in srgb, var(--gate-ink) 9%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--gate-ink) 9%, transparent) 1px, transparent 1px);
  background-size: 38px 38px;
  opacity:.55;
  pointer-events:none;
  animation:none;
  mask-image: radial-gradient(ellipse at 50% 45%, #000 55%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 55%, transparent 90%);
}
/* paper grain / scanline */
.name-gate::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 2px, color-mix(in srgb, var(--gate-ink) 4%, transparent) 2px 3px);
  mix-blend-mode: multiply;
  opacity:.5;
  pointer-events:none;
  left:auto; top:auto; transform:none; font-size:0;
  animation:none;
}
[data-mode="black"] .name-gate::after{ mix-blend-mode: screen; opacity:.25; }

/* top + bottom labels */
.gate-top-label,
.gate-bottom-label{
  position:absolute;
  left:50%; transform:translateX(-50%);
  font-family: var(--font-display, 'Silkscreen', monospace);
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--gate-muted);
  z-index: 3;
  white-space:nowrap;
}
.gate-top-label{ top: 28px; }
.gate-bottom-label{ bottom: 18px; color: var(--gate-ink); }
.gate-bottom-label .gb-bracket{ color: var(--gate-muted); margin: 0 6px; }
.gate-bottom-label .gb-dot{
  display:inline-block; width:5px; height:5px; background:var(--gate-red);
  margin: 0 8px 1px 4px; vertical-align: middle;
}
.gate-bottom-label{
  animation:gateBottomGlitch 2.8s steps(2,end) infinite;
}
@keyframes gateBottomGlitch{
  0%, 88%, 100%{ transform:translateX(-50%); text-shadow:none; }
  90%{ transform:translateX(calc(-50% - 1px)); text-shadow:2px 0 var(--gate-red), -2px 0 color-mix(in srgb, var(--gate-ink) 45%, transparent); }
  92%{ transform:translateX(calc(-50% + 2px)); text-shadow:-1px 0 var(--gate-red), 1px 0 var(--gate-ink); }
  94%{ transform:translateX(-50%); text-shadow:1px 0 var(--gate-red); }
}

/* corner registration marks */
.gate-mark{
  position:absolute; width:18px; height:18px;
  border:1px solid var(--gate-ink);
  opacity:.85;
  z-index:3;
}
.gate-mark.tl{ top:18px; left:18px; border-right:0; border-bottom:0; }
.gate-mark.tr{ top:18px; right:18px; border-left:0; border-bottom:0; }
.gate-mark.bl{ bottom:46px; left:18px; border-right:0; border-top:0; }
.gate-mark.br{ bottom:46px; right:18px; border-left:0; border-top:0; }
.gate-mark.dot{ width:6px; height:6px; border:0; background:var(--gate-ink); }
.gate-mark.dot.tl-d{ top:24px; left:46px; }
.gate-mark.dot.tr-d{ top:24px; right:46px; }

/* central frame brackets around the card */
.gate-frame{
  position:relative;
  width: min(820px, 92vw);
  margin: auto;
  padding: 18px;
  z-index: 2;
}
.gate-frame::before,
.gate-frame::after,
.gate-frame > .gf-b1,
.gate-frame > .gf-b2{
  content:"";
  position:absolute; width:22px; height:22px;
  border:1px solid var(--gate-ink);
}
.gate-frame::before{ top:0;    left:0;    border-right:0; border-bottom:0; }
.gate-frame::after { top:0;    right:0;   border-left:0;  border-bottom:0; }
.gate-frame > .gf-b1{ bottom:0; left:0;  border-right:0; border-top:0; }
.gate-frame > .gf-b2{ bottom:0; right:0; border-left:0;  border-top:0; }

/* a thin header bar above the card */
.gate-frame-tag{
  position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  background: var(--gate-paper);
  padding: 0 12px;
  font-family: var(--font-display, monospace);
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--gate-muted);
  z-index:3;
}

/* ---------- NAME BOX (the card) ---------- */
.name-gate .name-box{
  width:100% !important;
  max-width: 760px;
  margin: 0 auto;
  background: var(--gate-paper) !important;
  border: 1px solid var(--gate-ink) !important;
  box-shadow: none !important;
  padding: 44px 36px 36px !important;
  animation: none !important;
  text-align:center;
  position:relative;
  overflow: visible;
}
.name-gate .name-box::before{
  content:"";
  position:absolute;
  left:14px; right:14px; top:14px;
  height: 1px;
  background: var(--gate-soft);
  border:0; width:auto; transform:none; clip-path:none;
  animation:none;
}
.name-gate .name-box::after{
  content:""; position:absolute;
  top:10px; right:14px;
  width:6px; height:6px; background:var(--gate-red);
  border:0;
  animation:gateBlink 1.2s steps(2,end) infinite !important;
}
@keyframes gateBlink{ 50%{ opacity:.2 } }

.name-gate .name-label{
  font-family: var(--font-display, monospace);
  font-size: 11px;
  letter-spacing: 5px;
  color: var(--gate-ink);
  margin: 0 0 22px;
}
.name-gate .name-label::before{ content:"◆ "; color: var(--gate-ink); }

.name-gate .name-title{
  font-family: 'Silkscreen','VT323', var(--font-display, monospace);
  font-size: clamp(22px, 3.6vw, 38px);
  line-height: 1.15;
  letter-spacing: 1px;
  color: var(--gate-ink);
  text-shadow: none !important;
  min-height: clamp(56px, 7vw, 96px) !important;
  margin: 0 0 18px;
}
.name-gate .name-description{
  font-family: 'Special Elite', var(--font-body, serif);
  font-size: clamp(14px, 1.5vw, 17px);
  color: var(--gate-muted);
  margin: 0 0 26px;
}

/* input + button */
.name-gate .name-form{
  display:flex; gap:10px; justify-content:center; align-items:stretch;
  max-width: 560px; margin: 0 auto;
}
.name-gate .name-form input{
  flex:1; min-width:0;
  background: var(--gate-paper) !important;
  color: var(--gate-ink);
  border:1px solid var(--gate-ink) !important;
  padding: 14px 16px;
  font-family: 'Special Elite', monospace;
  font-size: 15px;
  letter-spacing: 1px;
  outline:none;
  box-shadow:none !important;
  transition: box-shadow .15s, transform .15s;
}
.name-gate .name-form input::placeholder{ color: var(--gate-muted); }
.name-gate .name-form input:focus{
  box-shadow: 3px 3px 0 var(--gate-ink) !important;
  transform: translate(-2px,-2px);
}
.name-gate .name-form button{
  background: var(--gate-ink) !important;
  color: var(--gate-paper) !important;
  border: 1px solid var(--gate-ink) !important;
  padding: 0 22px;
  font-family: var(--font-display, monospace);
  font-size: 12px;
  letter-spacing: 3px;
  display:inline-flex; align-items:center; gap:8px;
  transition: transform .15s, box-shadow .15s, background .2s, color .2s;
}
.name-gate .name-form button::after{ display:none !important; }
.name-gate .name-form button:hover{
  transform: translate(-2px,-2px);
  box-shadow: 3px 3px 0 var(--gate-red);
  background: var(--gate-ink) !important;
  color: var(--gate-paper) !important;
}
.name-gate .name-form button .arr{
  display:inline-block; color: var(--gate-red);
}

/* controls row: language + theme + hint */
.gate-controls{
  display:flex; align-items:center; justify-content:center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 22px;
}
.gate-controls .sep{
  width:1px; height:18px; background: var(--gate-soft);
}
.gate-toggle{
  display:inline-flex;
  border:1px solid var(--gate-ink);
  background: var(--gate-paper);
  padding: 0;
  overflow: hidden;
}
.gate-toggle button{
  background: transparent;
  color: var(--gate-ink);
  border: 0;
  padding: 7px 12px;
  font-family: var(--font-display, monospace);
  font-size: 10px;
  letter-spacing: 2px;
  cursor: none;
  transition: background .15s, color .15s;
}
.gate-toggle button.active{
  background: var(--gate-ink);
  color: var(--gate-paper);
}
.gate-toggle button:not(.active):hover{
  background: color-mix(in srgb, var(--gate-ink) 10%, transparent);
}

.name-gate .name-hint{
  display:block;
  margin-top: 18px;
  font-family: var(--font-display, monospace);
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--gate-muted);
}

/* hide the old PT/EN buttons (we render new ones in gate-controls) */
.name-gate .gate-language{ display:none !important; }

/* ---------- SCENE (bottom landscape) ---------- */
.gate-scene{
  position:absolute;
  left:0; right:0; bottom:0;
  height: 38vh;
  min-height: 220px;
  pointer-events:none;
  z-index: 1;
  overflow:hidden;
}
.gate-scene svg{
  position:absolute; left:50%; bottom:0;
  transform: translateX(-50%);
  width: min(1600px, 130vw);
  height: 100%;
  color: var(--gate-ink);
  opacity: .85;
}
[data-mode="black"] .gate-scene svg{ opacity:.55; }

/* reflective floor */
.gate-floor{
  position:absolute; left:0; right:0; bottom:0;
  height: 16vh;
  background:
    linear-gradient(to bottom, transparent, color-mix(in srgb, var(--gate-ink) 5%, transparent));
  mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
  pointer-events:none; z-index:1;
}

/* the decorative escaping S-snake (canvas) */
#snakeCanvas{
  position:fixed; inset:0; pointer-events:none; z-index: 13000;
}
/* hide built-in cursor segments — canvas owns it now */
.cursor{
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  width: 0 !important; height: 0 !important;
  mix-blend-mode: normal !important;
}
.cursor::after, .cursor .snake-seg, .cursor .cursor-prey{ display:none !important; }
.cursor-trail{ display:none !important; }
body{ cursor: none; }
@media (hover:none){ body{ cursor: auto; } }

.dialog{
  z-index: 14000 !important;
}

/* ---------- CONTACT CARDS : clean icon system ---------- */
.contact-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.contact-card{
  position:relative;
  background: var(--gate-paper) !important;
  color: var(--gate-ink) !important;
  border: 1px solid var(--gate-ink) !important;
  box-shadow: none !important;
  padding: 22px 20px 20px !important;
  display:flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 14px !important;
  transition: transform .18s ease, box-shadow .18s ease, background .2s, color .2s;
  text-decoration:none;
  overflow: hidden;
  isolation: isolate;
}
.contact-card .cc-ico,
.cc-ico{
  width: 36px !important; height: 36px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  color: var(--gate-ink);
  position: relative;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 0 !important;
  overflow: visible;
  line-height: 0;
  animation: none !important;
}
.contact-card:hover .cc-ico{
  color: var(--gate-ink) !important;
  border: 0 !important;
  box-shadow: none !important;
  animation: none !important;
}
.contact-card .cc-ico svg{
  width: 30px !important; height: 30px !important;
  display: block !important;
  stroke: currentColor;
  stroke-width: 1.7;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
/* neutralize the old red diamond ::after on .cc-ico (we render our own red pixel) */
.contact-whatsapp .cc-ico::after,
.contact-e-mail   .cc-ico::after,
.contact-behance  .cc-ico::after,
.contact-github   .cc-ico::after,
.contact-instagram .cc-ico::after,
.contact-discord .cc-ico::after{
  content: "" !important;
  position: absolute !important;
  right: -6px !important; bottom: -2px !important;
  top: auto !important; left: auto !important;
  width: 6px !important; height: 6px !important;
  background: var(--gate-red) !important;
  box-shadow: none !important;
  transform: none !important;
}
.contact-card .cc-ico::after{
  content:"";
  position:absolute;
  right:-6px; bottom:-2px;
  width:6px; height:6px;
  background: var(--gate-red);
}
.contact-card .cc-l{
  font-family: var(--font-display, monospace);
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--gate-ink) !important;
}
.contact-card .cc-s{
  font-family: 'Special Elite', monospace;
  font-size: 13px;
  color: color-mix(in srgb, var(--gate-ink) 75%, transparent) !important;
  word-break: break-word;
}
.contact-card .cc-arrow{
  position:absolute;
  right:14px; bottom:12px;
  width:16px; height:16px;
  color: var(--gate-ink);
  opacity:.85;
  transition: transform .18s ease;
}
.contact-card .cc-arrow svg{ width:100%; height:100%; stroke: currentColor; stroke-width:1.6; fill:none; }
.contact-card:hover{
  transform: translate(-3px,-3px);
  box-shadow: 4px 4px 0 var(--gate-ink) !important;
  background: var(--gate-paper) !important;
  color: var(--gate-ink) !important;
  border-color: var(--gate-ink) !important;
}
.contact-card:hover .cc-l,
.contact-card:hover .cc-s{ color: var(--gate-ink) !important; }
.contact-card:hover .cc-arrow{ transform: translate(2px,-2px); color: var(--gate-red); }

/* ---------- responsive ---------- */
@media (max-width: 640px){
  .gate-frame{ padding: 12px; }
  .name-gate .name-box{ padding: 36px 18px 24px !important; }
  .name-gate .name-form{ flex-direction: column; }
  .name-gate .name-form button{ width:100%; padding:14px; justify-content:center; }
  .gate-scene{ height: 28vh; min-height: 160px; }
  .gate-mark{ width:12px; height:12px; }
  .gate-bottom-label{ font-size:9px; letter-spacing:3px; bottom:10px; }
  .gate-top-label{ top:16px; font-size:9px; letter-spacing:3px; }
  .contact-card .cc-s{ font-size:12px; }
  .gate-bottom-label .gb-dot{ margin-right:7px; margin-left:4px; }
  .gate-controls{ gap:10px; }
  .gate-toggle button{ padding:8px 10px; }
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  #snakeCanvas{ display:none; }
  .name-gate .name-box::after{ animation:none !important; }
  body{ cursor:auto; }
}

/* ---------- final fixes: project gallery, Discord icon, footer tag ---------- */
.proj-grid{
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 360px)) !important;
  justify-content: start;
  align-items: stretch;
}
.proj{
  width: 100%;
  max-width: 360px;
}
.projects-empty{
  grid-column: 1 / -1;
  border: 1px dashed var(--gate-ink);
  background: color-mix(in srgb, var(--gate-paper) 92%, var(--gate-ink));
  color: var(--gate-muted);
  font-family: 'Special Elite', monospace;
  font-size: clamp(16px, 2vw, 21px);
  line-height: 1.5;
  padding: 22px;
}
.contact-discord .cc-ico svg path:first-child{
  fill: currentColor !important;
  stroke: none !important;
}
.gate-bottom-label{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 5px;
  border: 1px solid color-mix(in srgb, var(--gate-ink) 45%, transparent);
  background: color-mix(in srgb, var(--gate-paper) 86%, transparent);
  backdrop-filter: blur(4px);
  letter-spacing: 3px;
}
.gate-bottom-label .gb-bracket{
  margin: 0;
  opacity: .72;
}
.gate-bottom-label .gb-dot{
  width: 6px;
  height: 6px;
  margin: 0 10px !important;
  box-shadow: 0 0 0 1px var(--gate-paper), 0 0 10px color-mix(in srgb, var(--gate-red) 55%, transparent);
}

@media (max-width: 760px){
  .proj-grid{
    grid-template-columns: 1fr !important;
  }
  .proj{
    max-width: none;
  }
}

.foot{
  background: color-mix(in srgb, var(--gate-paper) 96%, var(--gate-ink)) !important;
  border-top: 1px solid var(--gate-ink) !important;
}
.foot::before{
  height: 1px !important;
  opacity: .42;
  animation: none !important;
}
.foot p:first-child{
  color: var(--gate-ink) !important;
  text-shadow: none !important;
  animation: none !important;
}
.foot p:first-child::after{
  content: "" !important;
}
.foot .muted{
  animation: none !important;
}

/* ---------- Bia final pass ---------- */
.gate-bottom-label{
  display: none !important;
}

@media (hover:hover) and (pointer:fine){
  html, body, body *{
    cursor: none !important;
  }
}

.services-grid{
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
}
.service-card{
  min-height: 210px;
  padding: 24px 20px 22px !important;
  border: 2px solid var(--gate-ink) !important;
  background:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--gate-paper) 96%, transparent) 0 3px, color-mix(in srgb, var(--gate-ink) 5%, var(--gate-paper)) 3px 4px),
    var(--gate-paper) !important;
  color: var(--gate-ink) !important;
  box-shadow: 4px 4px 0 var(--gate-ink) !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
  contain: layout paint;
}
.service-card::before{
  display: none !important;
}
.service-card::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gate-red) 10%, transparent), transparent);
  transform: translateX(-130%) skewX(-14deg);
  opacity: 0;
}
.service-card:hover::after{
  animation: serviceCardScan .7s steps(6,end) both;
}
.service-card:hover{
  transform: translate(-3px,-3px) !important;
  box-shadow: 7px 7px 0 var(--gate-ink) !important;
  border-color: var(--gate-ink) !important;
}
.service-tag{
  color: var(--gate-muted) !important;
  font-size: 9px !important;
  letter-spacing: 3px !important;
  margin: 0 0 4px !important;
}
.service-name{
  color: var(--gate-ink) !important;
  font-size: clamp(15px, 1.25vw, 20px) !important;
  letter-spacing: 3px !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  max-width: 86%;
}
.service-desc{
  color: color-mix(in srgb, var(--gate-ink) 68%, transparent) !important;
  font-size: 18px !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}
.service-ico{
  position: absolute !important;
  top: 22px;
  right: 22px;
  float: none !important;
  color: var(--gate-ink) !important;
  font-size: 18px !important;
  line-height: 1;
  opacity: .82;
  animation: serviceIconWake 2.6s steps(4,end) infinite;
}
.service-card:hover .service-ico{
  color: var(--gate-red) !important;
  animation-duration: .55s;
}
@keyframes serviceCardScan{
  0%{ opacity: .35; transform: translateX(-130%) skewX(-14deg); }
  100%{ opacity: 0; transform: translateX(130%) skewX(-14deg); }
}
@keyframes serviceIconWake{
  50%{ transform: translate(2px,-2px) rotate(8deg); opacity: 1; }
}

.hero-status{
  position: relative;
  width: fit-content;
  padding: 6px 10px 7px;
  overflow: hidden;
  animation: statusReadoutDrift 3.8s steps(6,end) infinite;
}
.hero-status::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--gate-red), transparent);
  transform-origin: left;
  animation: statusReadoutLine 1.8s steps(7,end) infinite;
}
.hero-status::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gate-red) 12%, transparent), transparent);
  transform: translateX(-120%);
  animation: statusReadoutScan 2.9s steps(8,end) infinite;
}
.hero-status .status-dot{
  box-shadow: 0 0 0 0 rgba(50, 190, 82, .45), 0 0 10px rgba(50, 190, 82, .7);
  animation: statusDotHardPulse 1.15s steps(3,end) infinite;
}
.hero-status em{
  color: var(--gate-ink);
  text-shadow: 1px 0 0 color-mix(in srgb, var(--gate-red) 28%, transparent);
}
@keyframes statusReadoutDrift{
  50%{ transform: translateX(2px); }
}
@keyframes statusReadoutLine{
  0%{ transform: scaleX(.08); opacity: .8; }
  70%,100%{ transform: scaleX(1); opacity: .18; }
}
@keyframes statusReadoutScan{
  35%{ transform: translateX(120%); }
  36%,100%{ transform: translateX(120%); }
}
@keyframes statusDotHardPulse{
  50%{ transform: scale(1.45); box-shadow: 0 0 0 7px rgba(50, 190, 82, 0), 0 0 14px rgba(50, 190, 82, .9); }
}

.foot{
  position: relative;
  overflow: hidden;
  background:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--gate-paper) 96%, transparent) 0 3px, color-mix(in srgb, var(--gate-ink) 5%, transparent) 3px 4px),
    var(--gate-paper) !important;
}
.foot::before{
  height: 1px !important;
  opacity: .55 !important;
  animation: footSealLoad 2.4s steps(8,end) infinite !important;
}
.foot::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gate-red) 10%, transparent), transparent);
  transform: translateX(-120%);
  animation: footSoftScan 4.2s steps(10,end) infinite;
}
.foot p:first-child{
  font-family: var(--font-display);
  letter-spacing: 4px;
  animation: footTitleGlitch 2.6s steps(3,end) infinite !important;
}
.foot .muted{
  animation: footHintFlicker 3.3s steps(5,end) infinite !important;
}
@keyframes footSealLoad{
  0%{ clip-path: inset(0 100% 0 0); opacity: .7; }
  70%,100%{ clip-path: inset(0 0 0 0); opacity: .2; }
}
@keyframes footSoftScan{
  38%{ transform: translateX(120%); }
  39%,100%{ transform: translateX(120%); }
}
@keyframes footTitleGlitch{
  0%,88%,100%{ transform: translateX(0); text-shadow: none; }
  91%{ transform: translateX(-2px); text-shadow: 2px 0 0 var(--gate-red); }
  94%{ transform: translateX(2px); text-shadow: -2px 0 0 var(--gate-muted); }
}
@keyframes footHintFlicker{
  50%{ opacity: .72; transform: translateX(2px); }
}

.section, .service-card, .proj, .contact-card, .skill, .about-card{
  contain: layout paint;
}
.nav-links a,.btn,.service-card,.proj,.about-card,.skill,.contact-card,.cta-box,.save-card,.open-channel input,.open-channel textarea{
  will-change: auto !important;
}

@media (max-width: 1120px){
  .services-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px){
  .services-grid{
    grid-template-columns: 1fr !important;
  }
  .service-card{
    min-height: 190px;
  }
}

@media (prefers-reduced-motion: reduce){
  .service-card::after,.service-ico,.hero-status,.hero-status::before,.hero-status::after,.hero-status .status-dot,.foot::before,.foot::after,.foot p:first-child,.foot .muted{
    animation: none !important;
  }
}