body { font-family: 'Segoe UI', sans-serif; background: #f8f9fa; }

    /* Hero Section */
    .hero {
      position: relative;
      height: 80vh;
      background: url('https://play-lh.googleusercontent.com/_fbii9BXzUQACCUmmOftidOpzqP6qrF5QwX_JKin-R47wyrCLhElG1BMCd-e3FZd584=w832-h470-rw') center/cover no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: white;
      overflow: hidden;
    }
    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(79,172,254,0.7), rgba(0,242,254,0.7));
      z-index: 1;
      animation: gradientShift 10s ease infinite alternate;
    }
    @keyframes gradientShift {
      0% { background: linear-gradient(135deg, rgba(79,172,254,0.7), rgba(0,242,254,0.7)); }
      50% { background: linear-gradient(135deg, rgba(0,242,254,0.7), rgba(79,172,254,0.7)); }
      100% { background: linear-gradient(135deg, rgba(79,172,254,0.7), rgba(0,242,254,0.7)); }
    }
    .hero-content {
      position: relative;
      z-index: 2;
      max-width: 800px;
      animation: fadeIn 2s ease forwards;
    }
    @keyframes fadeIn {
      0% { opacity: 0; transform: translateY(20px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    .hero h1 { font-size: 3rem; font-weight: 700; text-shadow: 0 3px 10px rgba(0,0,0,0.4); }
    .hero p { font-size: 1.25rem; margin-bottom: 1.5rem; text-shadow: 0 2px 8px rgba(0,0,0,0.3); }
    .hero .btn-light {
      padding: 0.75rem 2rem;
      font-weight: 600;
      border-radius: 50px;
      transition: all 0.3s ease;
    }
    .hero .btn-light:hover {
      transform: scale(1.05);
      background: #ffffffaa;
    }

    /* App Card */
    .app-card {
      border-radius: 15px;
      background: #fff;
      box-shadow: 0 8px 20px rgba(0,0,0,0.15);
      text-align: center;
      padding: 20px;
      transition: transform 0.4s, box-shadow 0.4s;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .app-card:hover {
      transform: translateY(-10px) scale(1.05);
      box-shadow: 0 15px 30px rgba(0,0,0,0.25);
    }
    .app-card img {
      max-height: 150px;
      object-fit: contain;
      margin-bottom: 15px;
      border-radius: 10px;
    }

    /* Footer */
    footer { background: #222; color: #ddd; padding: 30px 0; }
    footer a { color: #4facfe; text-decoration: none; }

    /* Swiper Overrides */
    .swiper {
      padding: 50px 0;
    }
    .swiper-slide {
      display: flex;
      justify-content: center;
      height: auto !important;
    }