/* ===== Floating Cards Wrapper ===== */
.floating-cards{
  position: relative;
  margin-top: -80px;     /* hero overlap */
  z-index: 50;
  padding: 0 18px;
  background: #F3F5F8;
}

.cards-grid{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  align-items: start;
}

/* ===== Flip Card ===== */
.flip-card{
  position: relative;
  height: 240px;
  border-radius: 22px;
  perspective: 1200px;
  -webkit-perspective: 1200px;
  overflow: visible;
}

.flip-inner{
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform .45s ease;
}

/* ✅ Desktop: Hover flip */
.flip-card:hover .flip-inner{
  transform: rotateY(180deg) scale(1.07);
  -webkit-transform: rotateY(180deg) scale(1.07);
}

/* faces */
.flip-face{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 22px;
  padding: 34px 28px 70px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
  overflow: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* FRONT */
.flip-front{
  background: #0f1161;
}
.flip-front::before{
  content:"";
  position:absolute;
  top:0;
  left:22px;
  width:80%;
  height:14px;
  background: linear-gradient(90deg,#ff5f6d,#ffc371,#6ad400);
  clip-path: polygon(0 0,100% 0,95% 100%,5% 100%);
  border-radius: 0 0 10px 10px;
}

/* BACK */
.flip-back{
  transform: rotateY(180deg) translateZ(0);
  -webkit-transform: rotateY(180deg) translateZ(0);
  background: linear-gradient(180deg,#e85a3d 0%, #a7b21e 55%, #6fb000 100%);
  color: #fff;
}

/* icon */
.icon-box{
  width:72px;
  height:72px;
  border-radius:18px;
  background: rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 34px;
  color: rgba(255,255,255,.25);
}

.flip-front h3{
  margin-top: 16px;
  font-size: 20px;
  font-weight: 600;
  color: rgba(255,255,255,.35);
}

.flip-back h3{
  margin-top: 16px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

.flip-back p{
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,.95);
}

/* plus/minus */
.toggle{
  position:absolute;
  right: 18px;
  bottom: 18px;
  width:46px;
  height:46px;
  border-radius:50%;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 22px;
  font-weight: 800;
  color:#0f1161;
  user-select:none;
  pointer-events:none;
}
.flip-back .toggle{ color:#e85a3d; }

/* hover dim */
.cards-grid:hover .flip-card{ opacity: .78; }
.cards-grid:hover .flip-card:hover{ opacity: 1; }

/* ===== Responsive ===== */
@media(max-width:1100px){
  .cards-grid{ grid-template-columns: repeat(2,1fr); }
}

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

  /* ✅ Mobile: hover off */
  .flip-card:hover .flip-inner{
    transform: none;
    -webkit-transform: none;
  }

  /* ✅ Mobile: click open */
  .flip-card.is-open .flip-inner{
    transform: rotateY(180deg) scale(1.03);
    -webkit-transform: rotateY(180deg) scale(1.03);
  }
}