:root{
    --card-w: 100%;
    --card-h: 100px;
    --radius: 18px;
    --bg: #0f1226;
    --fg: #fff4e9;
    --muted: #9aa3c7;
    --accent: 255,115,179; /* rgb */
    --glow: 90,180,255;    /* rgb */
  }
  *{box-sizing:border-box}

  .grid{
    margin: 10px;
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--card-w), 1fr));
    gap: 26px;
    box-shadow:
      0 10px 20px rgba(0,0,0,.35),
      inset 0 0 0 1px rgba(255,255,255,0.04);
  }

  .card{
    position:relative;
    height: var(--card-h);
    border-radius: var(--radius);
    overflow: clip;
    background: rgba(255,255,255,0.02);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow:
      0 10px 20px rgba(0,0,0,.35),
      inset 0 0 0 1px rgba(255,255,255,0.04);
    transform-style: preserve-3d;
    transition:
      transform .35s cubic-bezier(.2,.8,.2,1),
      box-shadow .35s cubic-bezier(.2,.8,.2,1),
      border-color .35s;
    will-change: transform;
  }
  .card:hover{
    box-shadow:
      0 18px 40px rgba(0,0,0,.45),
      0 0 0 1px rgba(255,255,255,0.06),
      0 0 40px rgba(var(--glow), .12);
    border-color: rgba(255,255,255,0.12);
  }

  /* gradient ring that softly appears on hover */
  .card::before{
    content:"";
    position:absolute; inset:-1px;
    border-radius: inherit;
    background:
      radial-gradient(140px 140px at var(--mx,50%) var(--my,50%),
        rgba(var(--glow), .35),
        transparent 60%);
    opacity:0; transition:opacity .35s;
    pointer-events:none;
  }
  .card:hover::before{ opacity:1; }

  /* animated border shine */
  .card::after{
    content:"";
    position:absolute; inset:0; border-radius:inherit;
    background: conic-gradient(from 180deg at 50% 50%,
      rgba(var(--accent),.0) 0deg,
      rgba(var(--accent),.12) 90deg,
      rgba(var(--accent),.0) 180deg,
      rgba(var(--accent),.12) 270deg,
      rgba(var(--accent),.0) 360deg);
    mix-blend-mode: screen;
    opacity:.0; transition: opacity .35s;
    pointer-events: none;
  }
  .card:hover::after{ opacity:.6; }

  .card-media{
    position:absolute; inset:0;
    background-size: cover; background-position: center;
    filter: saturate(1.05) contrast(1.02);
    transform: translateZ(30px) scale(1.02);
    transition: transform .5s ease, filter .5s ease;
  }
  .card:hover .card-media{
    transform: translateZ(30px) scale(1.08);
    filter: saturate(1.15) contrast(1.06);
    cursor: pointer;
  }

  .card-content{
    position:absolute; inset:auto 0 0 0;
    padding:5px 5px 4px;
    background: linear-gradient( to top, rgba(6,8,20,.72), rgba(6,8,20,0) 60%);
    /* transform: translateZ(40px); */
  }
  .title{
    margin:0 0 4px 0; font-weight:400; font-size:14px; letter-spacing:.2px;
  }
  .desc{ margin:0; font-size:13px; color: var(--muted); }

  /* cursor */
  /* .card{ cursor: pointer; } */
  /* respect reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .card, .card * { transition: none !important; animation: none !important; }
  }


.grid-title{
    margin: 10px;
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--card-w), 1fr));
    gap: 26px;
    /* box-shadow:
      0 10px 20px rgba(0,0,0,.35),
      inset 0 0 0 1px rgba(255,255,255,0.04); */
  }
.card-title{
    position:relative;
    height: 40px;
    border-radius: var(--radius);
    overflow: clip;
    background: rgba(255,255,255,0.02);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow:
      0 10px 20px rgba(0,0,0,.35),
      inset 0 0 0 1px rgba(255,255,255,0.04);
    text-align: center;
    align-items: center;
    align-content: center;
  }




  .magnetic {
  padding: 10px 20px;
  border-radius: 30px;
  border: none;
  background: linear-gradient(135deg, #5561ff, #9c2ec8);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transform: translate(0,0);
  transition: transform .2s ease;
}







.icon-box {
  width: 100px;
  height: 100px;
  background: #fff;
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.icon-box i {
  font-size: 60px;
  color: rgb(37, 36, 36);
  text-align: center;
  display: inline;
  align-items: center;
  justify-content: center;

}