:root{
  
    --panel:#111214;
    --text:#eaeaea;
    --muted:#b6b6b6;
    --ring: #2a2a2a;
    --radius: 26px;
    --shadow: 0 20px 60px rgba(0,0,0,.55);
  }

  *{box-sizing:border-box}
  html,body{
    height:100%;
    background: var(--bg);
    color: var(--text);
    font: 16px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    margin:0;
  }

  .wrap{
    max-width: 1200px;
    margin: 56px auto;
    padding: 0 20px;
  }


.grid{
    display: grid;
    gap: 44px 40px;
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
}

/* Card */
.card{
    display: block;
    text-decoration: none;
    color: inherit;
}

  /* Media “slab” (the big rounded screenshot) */
  .card-media{
    position:relative;
    border-radius: var(--radius);
    overflow:hidden;
    background: #0f0f11;
    box-shadow: var(--shadow);
    isolation:isolate;
  }
  .card-media img{
    width:100%;
    height: clamp(180px, 28vw, 340px);
    object-fit: cover;
    display:block;
    filter: saturate(.98);
  }
  /* Subtle glassy highlight around corners */
  .card-media::before{
    content:"";
    position:absolute; inset:-1px;
    border-radius: calc(var(--radius) + 2px);
    background:
      radial-gradient(120% 80% at 10% 0%, rgba(255,255,255,.08), transparent 60%),
      radial-gradient(110% 70% at 100% 20%, rgba(140,180,255,.12), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 40%);
    pointer-events:none;
    mix-blend-mode: screen;
  }
  .card-media::after{
    /* faint inner ring like a premium UI */
    content:"";
    position:absolute; inset:0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--ring);
    pointer-events:none;
  }

  .card-body{
    margin-top: 14px;
    max-width: 62ch;
  }
  .card-title{
    font-weight: 700;
    letter-spacing: .2px;
    margin: 0 0 6px;
    font-size: clamp(1rem, 1.1rem + .3vw, 1.35rem);
    color: black;
  }
.card a {
    color: white;
    text-decoration: none;
}

  .card-desc{
    color: var(--muted);
    margin:0;
    /* multi-line ellipsis like the screenshot */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

.visit-site {
    background: #373737;
    padding: 10px;
    border-radius: 15px;
    font-size: 0.8rem;
}


  /* Hover lift for desktop */
  @media (hover:hover){
    .card:hover .card-media{
      transform: translateY(-3px);
      transition: transform .25s ease, box-shadow .25s ease;
      box-shadow: 0 28px 70px rgba(0,0,0,.6);
    }
  }

  /* Optional light card variant (like the bottom-right in your image) */
  .card--light .card-media{
    background:#e9ebee;
  }
  .card--light .card-media::before{
    background:
      radial-gradient(120% 80% at 15% 0%, rgba(255,255,255,.55), transparent 60%),
      radial-gradient(110% 70% at 100% 10%, rgba(140,180,255,.22), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0) 40%);
    mix-blend-mode: normal;
  }
  .card--light .card-body .card-desc{ color:#60646b; }

   /* Responsiveness */
  @media (max-width: 520px){
.card-media {
      width: 10.5rem;
}
.grid {
      gap: 20px 6px;
}

.backend-des{
  display: block !important;
}

.badge {
  display: inline-block;
  margin: 0.5rem 0;
}

 :root{
  --bg: white
 }

  }