:root{
    --cyan:#2dd9c4;
    --amber:#ffb454;
    --text-dark:#0b1830;
    --muted-dark:#4a5670;
    --faint-dark:#8a93a8;
    --line-dark: rgba(7,61,130,0.14);
  }

  *{box-sizing:border-box; margin:0; padding:0;}

  @keyframes bg-flow{
    0%{ background-position:0% 50%; }
    50%{ background-position:100% 50%; }
    100%{ background-position:0% 50%; }
  }
  body::before{
    content:"";
    position:fixed; inset:-10%;
    background-image:
      radial-gradient(2.5px 2.5px at 10% 20%, rgba(7,93,204,0.45), transparent),
      radial-gradient(2.5px 2.5px at 80% 10%, rgba(45,217,196,0.5), transparent),
      radial-gradient(2px 2px at 60% 70%, rgba(255,180,84,0.45), transparent),
      radial-gradient(2.5px 2.5px at 30% 85%, rgba(7,93,204,0.4), transparent),
      radial-gradient(2px 2px at 92% 55%, rgba(45,217,196,0.4), transparent),
      radial-gradient(2px 2px at 45% 40%, rgba(255,180,84,0.35), transparent),
      radial-gradient(2px 2px at 20% 55%, rgba(7,93,204,0.3), transparent),
      radial-gradient(2px 2px at 70% 30%, rgba(45,217,196,0.3), transparent);
    background-repeat:no-repeat;
    animation: drift 12s ease-in-out infinite alternate;
    pointer-events:none;
    z-index:0;
  }
  @keyframes drift{
    0%{ transform:translate(0,0) scale(1); opacity:.6; }
    100%{ transform:translate(-3%,3%) scale(1.08); opacity:1; }
  }

  .wrap{ max-width:1180px; margin:0 auto; position:relative; z-index:1; }


  /* ===================== CARDS — static, no self-running animation ===================== */
  .grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:22px;
  }
  @media (max-width:920px){ .grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:640px){ .grid{ grid-template-columns:1fr; } }

  .card{
    background: linear-gradient(125deg, #061f4f 0%, #073b82 38%, #075dcc 70%, #0879df 100%);
    border:1px solid rgba(7,61,130,0.25);
    border-radius:14px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    transition: transform .3s ease, border-color .3s ease, background .45s ease, box-shadow .3s ease;
    position:relative;
    box-shadow:0 14px 34px -18px rgba(7,61,130,0.4);
  }
  .card:hover{
    transform:translateY(-4px);
    box-shadow:0 22px 44px -20px rgba(7,61,130,0.35), 0 0 0 1px rgba(255,255,255,0.15);
  }

  /* each card gets its own hover identity */
  .card-1:hover{
    border-color:#2dd9c4;
    background: linear-gradient(125deg, #06304f 0%, #0a5a6e 38%, #0aa88f 70%, #2dd9c4 100%);
  }
  .card-2:hover{
    border-color:#ffb454;
    background: linear-gradient(125deg, #4a2c06 0%, #7a4b0a 38%, #c07f12 70%, #ffb454 100%);
  }

  .card-3:hover {
    border-color: #ff3b30;
    background: linear-gradient(
        125deg,
        #3d0808 0%,
        #7a1010 38%,
        #c51f1f 70%,
        #ff3b30 100%
    );
}
.card-4:hover{
    border-color:#ff5c8a;
    background: linear-gradient(125deg, #4a0a1f 0%, #82163d 38%, #cc2360 70%, #ff5c8a 100%);
}
.card-5:hover{
    border-color:#2ddf8c;
    background: linear-gradient(125deg, #06301f 0%, #0a5a3d 38%, #0aa863 70%, #2ddf8c 100%);
}

.card-6:hover{
    border-color:#a86bff;
    background: linear-gradient(125deg, #1f0a4a 0%, #3d1682 38%, #6b23cc 70%, #a86bff 100%);
}

.body{
    padding:28px 24px 26px;
    display:flex;
    flex-direction:column;
    gap:14px;
    flex:1;
}

.rule{
    width:32px; height:2px;
    background:var(--cyan);
    border-radius:2px;
    transition:background .4s ease;
}
  .card-1:hover .rule{ background:#2dd9c4; }
  .card-2:hover .rule{ background:#ffb454; }
  .card-3:hover .rule{ background:#a86bff; }
  .card-4:hover .rule{ background:#ff5c8a; }
  .card-5:hover .rule{ background:#2ddf8c; }
  .card-6:hover .rule{ background:#6d6dff; }

  .card h2{
    font-family:'Space Grotesk', sans-serif;
    font-size:17px;
    font-weight:700;
    line-height:1.34;
    letter-spacing:-0.01em;
    color:#ffffff;
  }

  .foot{
    margin-top:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:12px;
    color:rgba(233,237,243,0.5);
    padding-top:14px;
    border-top:1px solid rgba(255,255,255,0.14);
  }

  .read{
    font-size: 16px;
    font-weight: 700;
    color:#ffffff;
    display:flex;
    align-items:center;
    gap:6px;
    transition:gap .25s, color .4s ease;
  }
  .card:hover .read{ gap:10px; color:#ffffff}
  .read svg{ width:13px; height:13px; }

  @media (prefers-reduced-motion: reduce){
    body, body::before{ animation:none !important; }
    .card{ transition:none !important; }
  }