@media (max-width: 768px) {
  .container {
    overflow: hidden;
  }
  .card-stream {
    position: relative;
    width: 100%;
    overflow-x: hidden;
  }
  .card-line {
    gap: 50px;
  }
  #bgfx, #particleCanvas {
    display: none;
  }
  /* Blog section fixes for mobile */
  #blog .wd {
    width: 80%;
  }
  #blog .gap {
    gap: 1rem;
  }
  #blog .p-6 {
    padding: 1rem;
  }
  #blog .text-xl {
    font-size: 1.125rem;
  }
  #blog .text-sm {
    font-size: 0.75rem;
  }
  #blog #blogCarousel {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  #blog .glass-card {
    scroll-snap-align: start;
  }
  /* Blog modal fix for mobile */
  #blogModal {
    z-index: 60 !important; /* higher than menu z-50 */
  }
  #blogModal > div {
    margin-top: 0 !important;
    height: 90vh !important;
    top: 0 !important;
  }
  #closeModal {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,0.7);
    color: white;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 24px;
    cursor: pointer;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #closeModal:hover {
    background: rgba(0,0,0,0.9);
  }

  /* Hide iframe scrollbars for better UX */
  #blogModal iframe {
    border: none;
    overflow: hidden;
  }
}

/* Desktop modal fix */
@media (min-width: 769px) {
  #blogModal > div {
    margin-top: 10vh !important;
    height: 80vh !important;
    top: 0 !important;
  }
}