.ec-tst{
  --ec-grad: linear-gradient(90deg,#ff8a00 0%,#ff5f00 100%);
  --ec-neon1: rgba(255,138,0,.95);
  --ec-neon2: rgba(255,95,0,.85);
  width:100%;
  padding:30px 0;
  background:transparent;
  text-align:center;
}

.ec-tst__h{
  margin-bottom:30px;
  font-size:28px;
  font-weight:900;
}

.ec-tst__grid{
  display:flex;
  gap:22px;
  transition:opacity var(--transition) ease;
}

.ec-card{
  flex:1;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding:24px 20px;
  position:relative;
  backdrop-filter:blur(12px);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  transition:transform .35s ease, box-shadow .35s ease;
  overflow:hidden;
  isolation:isolate;
}

/* Top accent bar */
.ec-card::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:4px;
  background:var(--ec-grad);
  border-radius:20px 20px 0 0;
  z-index:1;
}

/* Animated "edge runner" neon border */
.ec-card::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:22px;
  background:
    conic-gradient(
      from var(--ec-angle),
      transparent 0deg,
      var(--ec-neon1) 35deg,
      transparent 80deg,
      transparent 170deg,
      var(--ec-neon2) 215deg,
      transparent 260deg,
      transparent 360deg
    );
  filter: blur(2px);
  opacity:.55;
  z-index:0;

  /* keep only border ring */
  -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding:2px;
  animation: ecSpin 3.8s linear infinite;
}

/* Extra soft glow */
.ec-card .ec-glow{
  position:absolute;
  inset:-40px;
  background: radial-gradient(circle at 50% 30%, rgba(255,138,0,.18), transparent 60%);
  pointer-events:none;
  z-index:0;
}

.ec-card:hover{
  transform:scale(1.05);
  box-shadow:
    0 0 18px rgba(255,138,0,.35),
    0 0 50px rgba(255,95,0,.25),
    0 18px 55px rgba(0,0,0,.45);
}

.ec-card:hover::after{
  opacity:.85;
  filter: blur(1.5px);
  animation-duration: 2.8s;
}

.ec-card.fade-out{
  opacity:0;
  transform:translateY(12px);
}

.ec-card img{
  width:80px;
  height:80px;
  border-radius:50%;
  object-fit:cover;
  margin-bottom:14px;
  border:3px solid rgba(255,255,255,.15);
  position:relative;
  z-index:2;
}

.ec-card h4{
  margin:6px 0 4px;
  font-weight:800;
  position:relative;
  z-index:2;
}

.ec-country{
  font-size:13px;
  opacity:.72;
  margin-bottom:12px;
  position:relative;
  z-index:2;
}

.ec-review{
  font-size:14px;
  line-height:1.8;
  opacity:.9;
  margin-bottom:14px;
  position:relative;
  z-index:2;
}

.ec-stars{
  display:flex;
  justify-content:center;
  gap:5px;
  position:relative;
  z-index:2;
}

.ec-star{
  color:#ff8a00;
  font-size:18px;
  text-shadow:
    0 0 6px rgba(255,138,0,.9),
    0 0 12px rgba(255,95,0,.7);
}

@keyframes ecSpin{
  to { --ec-angle: 360deg; }
}

/* needed for animating custom property in some browsers */
@property --ec-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@media(max-width:1200px){
  .ec-tst__grid{flex-wrap:wrap}
  .ec-card{flex:0 0 48%}
}
@media(max-width:768px){
  .ec-card{flex:0 0 100%}
}