.ride-card {
  flex: 0 0 calc((100% - 2.5 * 24px) / 3.5);

  scroll-snap-align: start;
  position: relative;
  min-width: 220px;
  height: 500px;
  border-radius: 28px;
  overflow: hidden;
  background: var(--ink);
  box-shadow: 0 14px 30px -16px rgba(21, 24, 28, .32);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  display: none;
}
  .ride-card.visible{
    display:block;
    animation:rideCardIn .55s var(--ease) both;
    animation-delay:calc(var(--ci, 0) * .08s);
  }
  @keyframes rideCardIn{from{opacity:0;transform:translateY(18px) scale(.97);}to{opacity:1;transform:translateY(0) scale(1);}}
  .ride-card:hover{transform:translateY(-6px);box-shadow:0 26px 40px -20px rgba(21,24,28,.4);}

  .ride-card-photo{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    transition:transform .7s var(--ease);
  }
  .ride-card:hover .ride-card-photo{transform:scale(1.06);}

  .ride-card-scrim{
    position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(21,24,28,0) 42%, rgba(21,24,28,.85) 100%);
  }

  .ride-card-info{
    position:absolute;left:0;right:0;bottom:0;
    padding:28px;color:var(--white);
  }
  .ride-card-name{
    display:flex;align-items:center;gap:9px;
    font-family:var(--font-display);font-weight:700;font-size:27px;
    letter-spacing:-.01em;margin-bottom:9px;
  }
  .ride-card-name .badge{
    width:21px;height:21px;border-radius:50%;
    background:var(--green);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
  }
  .ride-card-desc{
    font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.72);
    margin-bottom:22px;
  }
  .ride-card-stats{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
  }
  .ride-card-stats .stat-group{display:flex;align-items:center;gap:18px;}
  .ride-card-stats .stat{
    display:flex;align-items:center;gap:7px;
    font-size:14.5px;font-weight:600;color:rgba(255,255,255,.9);
  }
  .ride-card-stats .stat svg{color:rgba(255,255,255,.6);}
  .ride-price{
    font-family:var(--font-display);
    font-size:19px;font-weight:700;color:var(--white);
  }

  /* Hover panel — absolutely positioned, slides up from below the
     card's bottom edge (clipped by .ride-card's overflow:hidden). */
  .ride-card-hover-panel{
    position:absolute;left:0;right:0;bottom:0;
    z-index:6;
    padding:20px 24px;
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    background:linear-gradient(180deg, rgba(19,47,38,0) 0%, var(--green) 45%);
    transform:translateY(100%);
    transition:transform .45s var(--ease);
  }
  .ride-card:hover .ride-card-hover-panel{transform:translateY(0);}

  .ride-card-hover-note{
    display:flex;flex-direction:column;gap:2px;min-width:0;
  }
  .ride-card-hover-note .rating{
    display:flex;align-items:center;gap:5px;
    font-family:var(--font-display);font-weight:700;font-size:14.5px;color:var(--white);
  }
  .ride-card-hover-note .rating svg{color:#ffc857;flex-shrink:0;}
  .ride-card-hover-note .perk{
    font-size:12px;color:rgba(255,255,255,.78);white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;
  }

  .btn-details{
    flex-shrink:0;
    display:flex;align-items:center;gap:7px;
    background:var(--white);color:var(--ink);
    padding:11px 18px;border-radius:999px;
    font-size:13.5px;font-weight:700;
    transition:background .3s ease, transform .3s var(--ease), box-shadow .3s ease;
    box-shadow:0 8px 16px -8px rgba(0,0,0,.35);
  }
  .btn-details svg{transition:transform .3s var(--ease);}
  .btn-details:hover{background:var(--green-soft);transform:translateY(-2px);}
  .btn-details:hover svg{transform:translateX(3px);}






@media (max-width:1500px){
    .ride-card{flex-basis:calc((100% - 2.5 * 24px) / 2);}
  }


@media (max-width:1000px){
    .ride-card{flex-basis:calc((100% - 2.5 * 24px) / 1.8);}
  }
  @media (max-width:900px){
    .fleet{padding:90px 20px 90px;}
    .carousel-wrap{padding:0 20px;}
    .ride-card{flex-basis:calc((100% - 1.5 * 24px) / 1.2);}
  }
  @media (max-width:560px){
    .toggle-btn{padding:12px 22px;font-size:13.5px;}
    .carousel-arrow{width:44px;height:44px;}
    .carousel-wrap{padding:0 16px;gap:10px;}
    .ride-card{flex-basis:calc((100% - 0.4 * 24px) / 1);height:450px;}
    .ride-card-info{padding:20px;}
    .ride-card-name{font-size:21px;}
    .ride-card-desc{font-size:13.5px;margin-bottom:16px;}
    .ride-card-hover-panel{padding:16px 18px;}
    .ride-card-hover-note .perk{display:none;}
  }