/* ============================================================
   RESPONSIVE
============================================================ */

/* Large desktop screens: give the hero title more room so
   "I am [icon] Saifullah Khan," stays on one line instead of
   orphaning "Khan," once the title font hits its max clamp size */
@media (min-width: 1400px) {
  .hero__content {
    max-width: 1000px;
  }
}

/* Shorter viewports (MacBook Air 13" and similar) */
@media (max-height: 860px) and (min-width: 1025px) {
  .hero {
    padding: 222px 32px 60px;
  }
  .hero__inner {
    gap: 64px;
  }
  .hero__badge {
    font-size: 12px;
    padding: 6px 10px 6px 14px;
    margin-bottom: 36px;
  }
  .hero__title {
    font-size: clamp(42px, 6vw, 78px);
    margin-bottom: 26px;
  }
  .hero__sub {
    font-size: 18px;
    margin-bottom: 36px;
  }
  .hero__showcase-frame { animation: none; }
}

/* Tablet */
@media (max-width: 1024px) {
  .hero__inner { gap: 48px; }
  .about__grid { grid-template-columns: 1fr; gap: 48px; }
  .exp-item__header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .about__visual { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .about__photo-wrap { max-width: 280px; }

  .hero__showcase-desc { max-width: none; }

  /* No real hover on touch — show the CTA + details by default */
  .hero__showcase-overlay {
    opacity: 1;
    background: linear-gradient(to top, rgba(9,9,11,0.88) 0%, rgba(9,9,11,0.5) 45%, rgba(9,9,11,0.05) 75%, transparent 100%);
  }
  .hero__showcase-view,
  .hero__showcase-overlay-info {
    opacity: 1;
    transform: none;
  }
  .hero__showcase-tag { display: none; }

  .work__grid { grid-template-columns: repeat(2, 1fr); }
  .work-card--large { grid-column: span 1; }
  .work-card__image,
  .work-card--large .work-card__image { height: 260px; }

  .services__grid { grid-template-columns: repeat(2, 1fr); }

  .showcase__content {
    grid-template-columns: 1fr;
    padding: 56px 48px;
    gap: 48px;
    text-align: center;
  }
  .gift-float { display: none; }
  
  .showcase__desc { margin: 0 auto 36px; }
  .showcase__store-btns { justify-content: center; }

  .footer__top { grid-template-columns: 1fr; gap: 48px; }
  .footer__nav { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile */
@media (max-width: 768px) {
  .container { padding: 0 20px; }
  .hero { padding: 148px 20px 60px; }

  .hero__badge { font-size: 12px; padding: 6px 10px 6px 14px; margin-bottom: 20px; }
  .hero__title { font-size: clamp(28px, 9.2vw, 36px); margin-bottom: 18px; }
  .hero__sub { font-size: 15px; margin-bottom: 28px; }

  /* Large blurred blobs repainting every frame + a particle layer +
     a cursor-follower are pure decoration — costly on mobile GPUs and
     invisible next to what they actually cost. Keep the blobs as a
     static gradient, drop the rest (particles.js also skips itself
     here so these nodes are never even created). */
  .hero__blob { animation: none; }
  .particles,
  .cursor-glow { display: none; }

  .hero__showcase-nav {
    top: 14px;
    bottom: auto;
    transform: none;
    width: 34px;
    height: 34px;
  }
  .hero__showcase-nav:active {
    transform: scale(1.06);
  }
  .hero__showcase-nav--prev { left: 14px; right: auto; }
  .hero__showcase-nav--next { left: 56px; right: auto; }
  .hero__showcase-overlay { padding: 16px; }
  .hero__showcase-name { font-size: 18px; }

  /* Arrows, counter, and the outbound link all share the same top offset
     and a fixed 34px height so their centres line up on one row instead
     of drifting per-element padding/font-size differences. */
  .hero__showcase-view {
    top: 14px;
    right: 16px;
    height: 34px;
    padding: 0 16px;
    box-sizing: border-box;
  }

  /* Not enough room next to the prev/next cluster and the outbound
     link on small screens — drop it rather than crowd the top row. */
  .hero__showcase-counter {
    display: none;
  }

  .nav__links { display: none; }
  .nav__actions .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .nav__inner { padding: 16px 20px; }

  .section-header { margin-bottom: 48px; }
  .work, .stats, .services, .showcase, .process, .faq, .cta-section {
    padding: 80px 0;
  }

  .stats__grid { gap: 14px; }
  .stat-bubble { width: calc(50% - 7px); padding: 28px 20px; }
  .stat-bubble__num { font-size: 40px; }

  .testimonial { padding: 32px 24px; }
  .testimonial__text { font-size: 16px; }

  .work__grid { grid-template-columns: 1fr; }
  .work-card__image,
  .work-card--large .work-card__image { height: 280px; }

  .services__grid { grid-template-columns: 1fr; }

  .showcase__sticky { padding: 0 20px; }

  .showcase__content {
    border-radius: 28px;
    padding: 40px 28px;
  }

  .gift-float { display: none; }

  .process__step { padding-left: 60px; }
  .process__line { left: 20px; }
  .process__step-marker { width: 40px; height: 40px; font-size: 11px; }
  .process__step-card { padding: 24px 24px; }

  .faq__question { font-size: 14px; padding: 20px 22px; }
  .faq__answer p { padding: 0 22px 20px; }

  .cta-section__title { font-size: clamp(48px, 12vw, 72px); }
  .cta-section__actions { flex-direction: column; align-items: center; }

  .footer__top { gap: 40px; }
  .footer__bottom { flex-direction: column; gap: 12px; text-align: center; }
}

@media (max-width: 480px) {
  .work-card__image,
  .work-card--large .work-card__image { height: 220px; }
  .work-card__info { padding: 20px; }
  .stat-bubble { width: 100%; }
  .btn--large { padding: 13px 24px; }
}

/* ---- Featured Project Showcase responsive --------------- */
@media (max-width: 1024px) {
  .work-featured { grid-template-columns: 1fr 1fr; min-height: 360px; }
  .work-featured__left { padding: 48px 40px; }
}
@media (max-width: 768px) {
  .work-featured { grid-template-columns: 1fr; }
  .work-featured__right { height: 280px; order: -1; }
  .work-featured__left { padding: 40px 32px; }
  .work-featured__cta { opacity: 1; transform: none; }
  .work-card__cta { opacity: 1; transform: none; }
}
@media (max-width: 480px) {
  .work-featured__left { padding: 32px 24px; }
  .work-featured__right { height: 220px; }
}