/* ========================= */
/* TYPEWRITER */
/* ========================= */



[data-tw],
[data-tw-fix]{
  position: relative;
}

/* [data-tw]::after,
[data-tw-fix]::after{
  content:"";
  display:inline-block;
  width:0;
  border-right:2px solid rgba(19,191,255,.9);
  height:1em;
  margin-left:4px;
  transform:translateY(2px);
  animation: twBlink .9s steps(1) infinite;
} */
@keyframes twBlink{50%{opacity:0}}

[data-tw]{ will-change: contents; }


h2 .tw-fix,
h1 .tw-fix,
.hero-title .tw-fix{
  display:inline-block;
  font: inherit;
  color: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  word-spacing: inherit;
}

.tw-glitch{
  position:relative;
  display:inline-block;
}

/* RGB split layers */
.tw-glitch::before,
.tw-glitch::after{
  content:attr(data-text);
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  overflow:hidden;
  pointer-events:none;
}

.tw-glitch::before{
  color:#f00;
  transform: translate(2px,0);
  mix-blend-mode: screen;
  opacity:0;
}

.tw-glitch::after{
  color:#00f;
  transform: translate(-2px,0);
  mix-blend-mode: screen;
  opacity:0;
}
.tw-glitch{
  position: relative;
  display: inline-block;
  isolation: isolate;
}

.tw-glitch-layer,
.tw-glitch-line{
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tw-glitch-red,
.tw-glitch-blue{
  opacity: 0;
  mix-blend-mode: screen;
}

.tw-glitch-red{
  color: #ff2a2a;
}

.tw-glitch-blue{
  color: #2a6bff;
}

.tw-glitch-line{
  opacity: 0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0 2px,
      rgba(0,0,0,.95) 2px 3px,
      rgba(0,0,0,0) 3px 6px
    );
  transform: translateX(0);
}

/* entry + random pulse */
.glitch-active .tw-glitch-red{
  opacity: .85;
  animation: glitchRed 220ms steps(2, end);
}

.glitch-active .tw-glitch-blue{
  opacity: .85;
  animation: glitchBlue 220ms steps(2, end);
}

.glitch-active .tw-glitch-line{
  opacity: .9;
  animation: glitchLines 220ms steps(2, end);
}

@keyframes glitchRed{
  0%   { transform: translate(0, 0); clip-path: inset(0 0 70% 0); }
  25%  { transform: translate(3px, -1px); clip-path: inset(15% 0 35% 0); }
  50%  { transform: translate(-2px, 1px); clip-path: inset(55% 0 10% 0); }
  100% { transform: translate(0, 0); clip-path: inset(0 0 0 0); }
}

@keyframes glitchBlue{
  0%   { transform: translate(0, 0); clip-path: inset(65% 0 0 0); }
  25%  { transform: translate(-3px, 1px); clip-path: inset(10% 0 50% 0); }
  50%  { transform: translate(2px, -1px); clip-path: inset(40% 0 20% 0); }
  100% { transform: translate(0, 0); clip-path: inset(0 0 0 0); }
}

@keyframes glitchLines{
  0%   { transform: translateX(0); }
  25%  { transform: translateX(2px); }
  50%  { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}


@keyframes twBlink{
  50%{ opacity:0; }
}



/* ========================= */
/* MAG TEXT */
/* ========================= */

.mag-text{
  display:block;              /* prevent width collapse */
  width:100%;                /* occupy full line */
  text-align:center;         /* keep text centered */
  white-space:pre-wrap;      /* preserve spacing */
  cursor:default;
}

.mag-text span{
  display:inline-block;
  transition: transform .18s ease, color .18s ease;
  transform-origin:center bottom;
}

.mag-text span.focus{
  transform: translateY(-6px) scale(1.25);
  background: linear-gradient(135deg,#ffb36a,#ff7a2f,#f05a1a);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.mag-text span.near{
  transform: translateY(-3px) scale(1.12);
}

/* ========================= */
/* BASE */
/* ========================= */

img{
  max-width:100%;
  height:auto;
}

*{
  box-sizing:border-box;
}

/* ========================= */
/* ✅ UNIVERSAL CURSOR */
/* ========================= */

/* hide default cursor */
html,
body,
a,
button,
input,
textarea,
select,
label {
  cursor: none !important;
}

/* wrapper */
.target-cursor-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 2147483647;
  
  mix-blend-mode: difference;
}

/* center dot */
.target-cursor-dot {
  position: absolute;
  width: 6px;
  height: 6px;
 
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* corners */
.target-cursor-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  box-sizing: border-box;
  transition: transform 0.2s ease;
  box-shadow: 0 0 10px rgba(255,255,255,0.15);
}

/* default floating position */
.corner-tl {
  transform: translate(-150%, -150%)
  border-right: none;
  border-bottom: none;
}

.corner-tr {
 
  border-left: none;
  border-bottom: none;
}

.corner-br {
 
  border-left: none;
  border-top: none;
}

.corner-bl {
  
  border-right: none;
  border-top: none;
}

/* mobile disable */
@media (max-width: 991px), (pointer: coarse) {
  .target-cursor-wrapper {
    display: none !important;
  }

  html,
  body,
  a,
  button,
  input,
  textarea,
  select,
  label {
    cursor: auto !important;
  }
}

/* hide system cursor */
html,body,a,button,input,textarea,select,label{
  cursor:none !important;
}

/* wrapper */
.target-cursor-wrapper{
  position:fixed;
  top:0; left:0;
  pointer-events:none;
  z-index:9999;
}

/* dot (always smooth) */
.target-cursor-dot{
  position:fixed;
  width:6px; height:6px;
  background:#fff;
  border-radius:50%;
  transform:translate(-50%,-50%);
}

/* box (the real target) */
.target-cursor-box{
  position:fixed;
  transform:translate(-50%,-50%);
  width:40px; height:40px;
  transition:
    width .18s cubic-bezier(.22,.61,.36,1),
    height .18s cubic-bezier(.22,.61,.36,1);
}

/* corners */
.corner{
  position:absolute;
  width:14px; height:14px;
  border:2px solid #fff;
}

/* positions */
.corner-tl{top:0;left:0;border-right:none;border-bottom:none;}
.corner-tr{top:0;right:0;border-left:none;border-bottom:none;}
.corner-br{bottom:0;right:0;border-left:none;border-top:none;}
.corner-bl{bottom:0;left:0;border-right:none;border-top:none;}

/* COLORS */
.target-cursor-wrapper.is-button .corner{border-color:#ff7a2f;}
.target-cursor-wrapper.is-link .corner{border-color:#4ea1ff;}
.target-cursor-wrapper.is-image .corner{border-color:#ffffff;}
.target-cursor-wrapper.is-input .corner{border-color:#00cfff;}



/* ========================= */
/* 3D IMAGE EFFECT */
/* ========================= */

.fx-3d,
.cyber-hero__image-wrap,
.cyber-image,
.image-card,
.consult-right,
.transform-image {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  transform-style: preserve-3d;
  perspective: 1200px;
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.fx-3d img,
.cyber-hero__image-wrap img,
.cyber-image img,
.image-card img,
.consult-right img,
.transform-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
  transform: scale(1.02) translateZ(0);
  transition:
    transform 0.45s cubic-bezier(.22,.61,.36,1),
    filter 0.35s ease;
  will-change: transform, filter;
}

/* light follow */
.fx-3d::before,
.cyber-hero__image-wrap::before,
.cyber-image::before,
.image-card::before,
.consult-right::before,
.transform-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  background:
    radial-gradient(
      circle at var(--mx, 50%) var(--my, 50%),
      rgba(255,255,255,0.28) 0%,
      rgba(255,255,255,0.12) 16%,
      rgba(78,161,255,0.10) 32%,
      rgba(255,122,47,0.08) 46%,
      rgba(255,255,255,0) 62%
    );
}

/* gloss */
.fx-3d::after,
.cyber-hero__image-wrap::after,
.cyber-image::after,
.image-card::after,
.consult-right::after,
.transform-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    120deg,
    transparent 20%,
    rgba(255,255,255,.12) 38%,
    transparent 55%
  );
  transform: translateX(-130%);
  transition: transform 0.8s ease;
}

.fx-3d:hover::before,
.cyber-hero__image-wrap:hover::before,
.cyber-image:hover::before,
.image-card:hover::before,
.consult-right:hover::before,
.transform-image:hover::before {
  opacity: 1;
}

.fx-3d:hover::after,
.cyber-hero__image-wrap:hover::after,
.cyber-image:hover::after,
.image-card:hover::after,
.consult-right:hover::after,
.transform-image:hover::after {
  transform: translateX(130%);
}

.fx-3d:hover img,
.cyber-hero__image-wrap:hover img,
.cyber-image:hover img,
.image-card:hover img,
.consult-right:hover img,
.transform-image:hover img {
  filter: brightness(1.08) contrast(1.05) saturate(1.08);
}

.fx-3d:hover,
.cyber-hero__image-wrap:hover,
.cyber-image:hover,
.image-card:hover,
.consult-right:hover,
.transform-image:hover {
  box-shadow:
    0 28px 70px rgba(0,0,0,.28),
    0 0 24px rgba(78,161,255,.08),
    0 0 20px rgba(255,122,47,.06);
}

.target-cursor-corner {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 2px solid #4ea1ff;
  box-sizing: border-box;
  box-shadow: none;
}

/* ========================= */
/* REVEAL */
/* ========================= */

.reveal-word {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(10px);
  display: inline-block;
  will-change: transform, opacity, filter;
}

.target-cursor-corner {
  transition: transform 0.12s cubic-bezier(.22,.61,.36,1);
}

.target-cursor-box{
  border-radius: inherit; /* 🔥 matches button */
}
.target-cursor-wrapper.is-button .target-cursor-box{
  border-radius: 14px; /* match your button */
}
html,
body,
a,
button,
input,
textarea,
select,
label,
[role="button"],
.btn {
  cursor: none !important;
}

.target-cursor-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 2147483647;
}

.target-cursor-dot {
  position: fixed;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff7a2f;
  box-shadow:
    0 0 8px rgba(255,122,47,0.75),
    0 0 16px rgba(78,161,255,0.22);
  transform: translate(-50%, -50%);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.target-cursor-rotator {
  position: fixed;
  width: 36px;
  height: 36px;
  transform: translate(-50%, -50%);
  animation: targetCursorRotate 3.6s linear infinite;
  transition:
    width 0.16s ease,
    height 0.16s ease,
    opacity 0.16s ease;
}

.target-cursor-wrapper.is-locked .target-cursor-rotator {
  animation: none;
}

.target-cursor-corner {
  position: absolute;
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  border: 2px solid #4ea1ff;
  box-shadow:
    0 0 10px rgba(78,161,255,0.22),
    0 0 10px rgba(255,122,47,0.12);
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    width 0.16s ease,
    height 0.16s ease,
    opacity 0.16s ease;
}

.corner-tl {
  top: 0;
  left: 0;
  border-right: none;
  border-bottom: none;
}

.corner-tr {
  top: 0;
  right: 0;
  border-left: none;
  border-bottom: none;
}

.corner-br {
  bottom: 0;
  right: 0;
  border-left: none;
  border-top: none;
}

.corner-bl {
  bottom: 0;
  left: 0;
  border-right: none;
  border-top: none;
}

.target-cursor-wrapper.is-hidden .target-cursor-dot,
.target-cursor-wrapper.is-hidden .target-cursor-rotator {
  opacity: 0;
}

/* FREE STATE = rotating blue/orange cursor */
.target-cursor-wrapper:not(.is-locked) .target-cursor-dot {
  background: #ff7a2f;
  box-shadow:
    0 0 10px rgba(255,122,47,0.8),
    0 0 18px rgba(78,161,255,0.24);
}

.target-cursor-wrapper:not(.is-locked) .target-cursor-corner {
  border-color: #4ea1ff;
  box-shadow:
    0 0 10px rgba(78,161,255,0.28),
    0 0 8px rgba(255,122,47,0.14);
}

/* BUTTON */
.target-cursor-wrapper.is-button .target-cursor-dot {
  background: #ff7a2f;
  box-shadow:
    0 0 12px rgba(255,122,47,0.85),
    0 0 20px rgba(255,122,47,0.25);
}

.target-cursor-wrapper.is-button .target-cursor-corner {
  border-color: #ff7a2f;
  box-shadow: 0 0 14px rgba(255,122,47,0.28);
}

/* LINK */
.target-cursor-wrapper.is-link .target-cursor-dot {
  background: #4ea1ff;
  box-shadow:
    0 0 12px rgba(78,161,255,0.85),
    0 0 20px rgba(78,161,255,0.24);
}

.target-cursor-wrapper.is-link .target-cursor-corner {
  border-color: #4ea1ff;
  box-shadow: 0 0 14px rgba(78,161,255,0.28);
}

/* INPUT */
.target-cursor-wrapper.is-input .target-cursor-dot {
  background: #4ea1ff;
  box-shadow:
    0 0 10px rgba(78,161,255,0.8),
    0 0 16px rgba(255,122,47,0.10);
}

.target-cursor-wrapper.is-input .target-cursor-corner {
  border-color: #4ea1ff;
  box-shadow:
    0 0 12px rgba(78,161,255,0.24),
    0 0 8px rgba(255,122,47,0.10);
}

/* CARD / IMAGE / FAQ */
.target-cursor-wrapper.is-card .target-cursor-dot {
  background: linear-gradient(135deg, #4ea1ff, #ff7a2f);
  box-shadow:
    0 0 10px rgba(78,161,255,0.28),
    0 0 10px rgba(255,122,47,0.22);
}

.target-cursor-wrapper.is-card .target-cursor-corner {
  border-color: #4ea1ff;
  box-shadow:
    0 0 12px rgba(78,161,255,0.24),
    0 0 10px rgba(255,122,47,0.16);
}

/* CLICK */
.target-cursor-wrapper.is-down .target-cursor-dot {
  transform: translate(-50%, -50%) scale(0.72);
}

.target-cursor-wrapper.is-down .target-cursor-corner {
  opacity: 0.82;
}

@keyframes targetCursorRotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@media (max-width: 991px), (pointer: coarse) {
  .target-cursor-wrapper {
    display: none !important;
  }

  html,
  body,
  a,
  button,
  input,
  textarea,
  select,
  label,
  [role="button"],
  .btn {
    cursor: auto !important;
  }
}
.mag-text {
  word-break: normal;
  overflow-wrap: normal;
  text-align: center;        /* ensure centering consistency */
}

.mag-text .word {
  display: inline-block;
  white-space: nowrap; /* prevents word splitting */
}

.mag-text .letter {
  display: inline-block;
}

.mag-text .space {
  display: inline-block;
  width: 0.4em;
}

/* GLTIVH HOVER  */

.hover-glitch{
  position: relative;
  display: inline-block;
}

.hover-glitch-layer,
.hover-glitch-line{
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.hover-glitch-red{
  color: #ff2a2a;
  mix-blend-mode: screen;
}

.hover-glitch-blue{
  color: #2a6bff;
  mix-blend-mode: screen;
}

.hover-glitch-line{
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 2px,
    rgba(0,0,0,.85) 2px 3px
  );
}

.hover-glitch:hover .hover-glitch-red{
  opacity: .9;
  animation: hoverGlitchRed .2s steps(2,end) infinite;
}

.hover-glitch:hover .hover-glitch-blue{
  opacity: .9;
  animation: hoverGlitchBlue .2s steps(2,end) infinite;
}

.hover-glitch:hover .hover-glitch-line{
  opacity: .7;
  animation: hoverGlitchLine .18s steps(2,end) infinite;
}

@keyframes hoverGlitchRed{
  0%{ transform: translate(0,0); }
  50%{ transform: translate(2px,-1px); }
  100%{ transform: translate(0,0); }
}

@keyframes hoverGlitchBlue{
  0%{ transform: translate(0,0); }
  50%{ transform: translate(-2px,1px); }
  100%{ transform: translate(0,0); }
}

@keyframes hoverGlitchLine{
  0%{ transform: translateX(0); }
  50%{ transform: translateX(2px); }
  100%{ transform: translateX(0); }
}

.fx-glitch-hover{
  position: relative;
  display: inline-block;
  isolation: isolate;
}

.fx-glitch-hover__text{
  position: relative;
  z-index: 2;
}

.fx-glitch-hover__red,
.fx-glitch-hover__blue,
.fx-glitch-hover__line{
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.fx-glitch-hover__red{
  color: #ff2a2a;
  mix-blend-mode: screen;
}

.fx-glitch-hover__blue{
  color: #2a6bff;
  mix-blend-mode: screen;
}

.fx-glitch-hover__line{
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 2px,
    rgba(0,0,0,.85) 2px 3px
  );
}

.fx-glitch-hover:hover .fx-glitch-hover__red{
  opacity: .9;
  animation: fxGlitchRed .18s steps(2,end) infinite;
}

.fx-glitch-hover:hover .fx-glitch-hover__blue{
  opacity: .9;
  animation: fxGlitchBlue .18s steps(2,end) infinite;
}

.fx-glitch-hover:hover .fx-glitch-hover__line{
  opacity: .7;
  animation: fxGlitchLine .16s steps(2,end) infinite;
}

@keyframes fxGlitchRed{
  0%{ transform: translate(0,0); clip-path: inset(0 0 70% 0); }
  50%{ transform: translate(2px,-1px); clip-path: inset(20% 0 30% 0); }
  100%{ transform: translate(0,0); clip-path: inset(0 0 0 0); }
}

@keyframes fxGlitchBlue{
  0%{ transform: translate(0,0); clip-path: inset(65% 0 0 0); }
  50%{ transform: translate(-2px,1px); clip-path: inset(10% 0 45% 0); }
  100%{ transform: translate(0,0); clip-path: inset(0 0 0 0); }
}

@keyframes fxGlitchLine{
  0%{ transform: translateX(0); }
  50%{ transform: translateX(2px); }
  100%{ transform: translateX(0); }
}

.hover-glitch{
  position:relative;
  display:inline-block;
}

/* base text */
.hover-glitch{
  color:inherit;
}

/* layers */
.hover-glitch::before,
.hover-glitch::after{
  content: attr(data-text);
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  pointer-events:none;
  opacity:0;
}

/* red layer */
.hover-glitch::before{
  color:#ff2a2a;
  mix-blend-mode:screen;
}

/* blue layer */
.hover-glitch::after{
  color:#2a6bff;
  mix-blend-mode:screen;
}

/* 🔥 HOVER GLITCH */
.hover-glitch:hover::before{
  opacity:.9;
  animation: glitchR .2s infinite steps(2,end);
}

.hover-glitch:hover::after{
  opacity:.9;
  animation: glitchB .2s infinite steps(2,end);
}

/* scan lines */
.hover-glitch:hover{
  animation: glitchMain .2s infinite steps(2,end);
}

@keyframes glitchR{
  0%{ transform:translate(0,0); }
  50%{ transform:translate(2px,-1px); }
  100%{ transform:translate(0,0); }
}

@keyframes glitchB{
  0%{ transform:translate(0,0); }
  50%{ transform:translate(-2px,1px); }
  100%{ transform:translate(0,0); }
}

@keyframes glitchMain{
  0%{ transform:skew(0deg); }
  50%{ transform:skew(2deg); }
  100%{ transform:skew(0deg); }
}


[data-tw-fix],
[data-tw] {
  white-space: normal;
}



.tw-glitch {
  display: inline;
  position: relative;
}
.tw-glitch-layer,
.tw-glitch-line {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}



@keyframes blink {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
}

.tw-line {
  display: inline;
  white-space: normal;
}





.tw-glitch {
  position: relative;
  display: inline;
  isolation: isolate;
  will-change: transform;
}

.tw-glitch-red,
.tw-glitch-blue {
  position: absolute;
  inset: 0;
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
}

.tw-glitch-red {
  color: #ff2a2a;
  filter: blur(0.5px);
}

.tw-glitch-blue {
  color: #2a6bff;
  filter: blur(0.5px);
}

.glitch-active .tw-glitch-red {
  opacity: 0.9;
  animation: glitchRedPro 260ms steps(2,end);
}

.glitch-active .tw-glitch-blue {
  opacity: 0.9;
  animation: glitchBluePro 260ms steps(2,end);
}

.glitch-active {
  animation: glitchSkew 260ms steps(2,end);
}

@keyframes glitchRedPro {
  0%   { transform: translate(0,0); clip-path: inset(0 0 80% 0); }
  20%  { transform: translate(4px,-2px); clip-path: inset(10% 0 40% 0); }
  40%  { transform: translate(-3px,1px); clip-path: inset(60% 0 5% 0); }
  60%  { transform: translate(2px,-1px); clip-path: inset(30% 0 30% 0); }
  100% { transform: translate(0,0); clip-path: inset(0 0 0 0); }
}

@keyframes glitchBluePro {
  0%   { transform: translate(0,0); clip-path: inset(70% 0 0 0); }
  20%  { transform: translate(-4px,2px); clip-path: inset(15% 0 55% 0); }
  40%  { transform: translate(3px,-1px); clip-path: inset(45% 0 15% 0); }
  60%  { transform: translate(-2px,1px); clip-path: inset(20% 0 35% 0); }
  100% { transform: translate(0,0); clip-path: inset(0 0 0 0); }
}

@keyframes glitchSkew {
  0%   { transform: skew(0deg); }
  30%  { transform: skew(2deg); }
  60%  { transform: skew(-2deg); }
  100% { transform: skew(0deg); }
}
.tw-glitch-line {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;

  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 2px,
      rgba(0,0,0,.9) 2px 3px
    );
}

.glitch-active .tw-glitch-line {
  opacity: 0.8;
  animation: glitchNoise 220ms steps(2,end);
}

@keyframes glitchNoise {
  0% { transform: translateX(0); }
  50% { transform: translateX(3px); }
  100% { transform: translateX(0); }
}
.tw-cursor {
  display: inline-block;
  width: 0;
  height: 1em;

  border-left: 2px solid currentColor;

  margin-left: 0.08em;

  position: relative;
  top: 0; /* JS will control this */

  animation: cursorBlinkPro 1.05s ease-in-out infinite;
}

@keyframes cursorBlinkPro {
  0%,100% { opacity: 1; }
  50% { opacity: 0.2; }
}
.tw-cursor {
  height: 0.85em;
}
@keyframes cursorBlinkPro {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}



.section-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.section-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.section-bg span {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.38;
  will-change: transform, opacity;
  mix-blend-mode: screen;
}

/* blob 1 */
.section-bg span:nth-child(1) {
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, #6aa3ff8a 0%, rgba(106, 163, 255, 0.6) 40%, transparent 72%);
  top: 8%;
  left: 8%;
  animation: blobOne 4s ease-in-out infinite;
}

/* blob 2 */
.section-bg span:nth-child(2) {
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, #ff7b2f96 0%, rgba(255,122,47,0.75) 40%, transparent 72%);
  bottom: 8%;
  right: 8%;
  animation: blobTwo 3.2s ease-in-out infinite;
}

/* optional third blob for richer look */
.section-bg span:nth-child(3) {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, #5180ee 0%, rgba(69, 107, 196, 0.55) 45%, transparent 75%);
  top: 42%;
  left: 48%;
  animation: blobThree 2.8s ease-in-out infinite;
}

@keyframes blobOne {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.34;
  }
  25% {
    transform: translate3d(30px, -20px, 0) scale(1.08);
    opacity: 0.48;
  }
  50% {
    transform: translate3d(10px, -42px, 0) scale(0.96);
    opacity: 0.4;
  }
  75% {
    transform: translate3d(-22px, -12px, 0) scale(1.06);
    opacity: 0.5;
  }
}

@keyframes blobTwo {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.3;
  }
  25% {
    transform: translate3d(-26px, 18px, 0) scale(1.07);
    opacity: 0.46;
  }
  50% {
    transform: translate3d(-12px, -30px, 0) scale(0.95);
    opacity: 0.38;
  }
  75% {
    transform: translate3d(18px, 10px, 0) scale(1.08);
    opacity: 0.44;
  }
}

@keyframes blobThree {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.2;


  }
  50% {
    transform: translate3d(0, -24px, 0) scale(1.12);
    opacity: 0.34;
  }
}

.particle-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.particle-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.particle-content {
  position: relative;
  z-index: 1;
}

/* STATS  */

/* SECTION */
.kpi-strip {
  padding: 80px 60px;
  background: #f4f4f4;
}

/* GRID */
.kpi-grid {
  max-width: 1300px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

/* CARD */
.kpi-card {
  position: relative;
  background: #0f2742;
  border-radius: 20px;
  padding: 40px 20px;
  text-align: center;
  overflow: hidden;
  transition: all 0.35s ease;
}

/* LIGHT TOP RIGHT */
.kpi-light {
  position: absolute;
  width: 120px;
  height: 120px;
  top: -40px;
  right: -40px;

  background: radial-gradient(circle,
    rgba(255,255,255,0.12),
    transparent 70%);

  filter: blur(10px);
}

/* NUMBER */
.kpi-number {
  font-size: 46px;
  font-weight: 700;
  color: #a9c1ff;
  margin-bottom: 8px;
}

/* LABEL */
.kpi-card p {
  font-size: 12px;
  letter-spacing: 1.5px;
  color: #7f94b8;
}

/* HIGHLIGHT ORANGE */
.kpi-card.highlight .kpi-number {
  color: #ff7a2f;
}

/* HOVER EFFECT */
.kpi-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 15px 40px rgba(0,0,0,0.3),
    0 0 20px rgba(0,140,255,0.2);
}

/* SUBTLE GLOW ON HOVER */
.kpi-card:hover .kpi-light {
  transform: scale(1.3);
  opacity: 0.8;
}

/* RESPONSIVE */
@media (max-width: 1000px) {
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .kpi-grid {
    grid-template-columns: 1fr;
  }
}