* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }

    body {
      background-color: #000;
      color: #fff;
      line-height: 1.6;
    }

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

    /* Header Styles */
  header {
            background: rgba(20,20,20,0.40);
            -webkit-backdrop-filter: blur(10px) saturate(120%);
            backdrop-filter: blur(10px) saturate(120%);
            position: fixed;
            width: 100%;
            z-index: 1000;
            padding: 14px 0;
            border-bottom: 1px solid rgba(255,255,255,0.04);
            box-shadow: 0 6px 30px rgba(0,0,0,0.6);
            transition: background-color 0.25s ease, box-shadow 0.25s ease;
        }

        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .header-container .logo-img{
            width: 50px;
            margin-right: 20px;
        }
     .logo-container{
            display: flex;
            align-items: center;
        }

        .logo {
            font-size: 24px;
            font-weight: 700;
            color: #fff;
            text-decoration: none;
        }

        .logo span {
            color: #8C2131;
        }

        /* Top-level navigation (keeps nested dropdown ULs unaffected) */
        nav > ul {
            display: flex;
            list-style: none;
            align-items: center;
        }

        nav > ul > li {
            margin-left: 30px;
        }

        nav > ul > li a {
            color: #fff;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.22s ease, transform 0.15s ease;
            font-size: 16px;
        }

        nav ul li a:hover {
            color: #8C2131;
            transform: translateY(-1px);
        }

        /* Dropdown for Programs - smooth glass panel, positioned directly under Programs */
        nav ul li.has-dropdown {
            position: relative;
        }

        /* dropdown ul (vertical) */
        nav ul li .dropdown {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
            -webkit-backdrop-filter: blur(8px) saturate(120%);
            backdrop-filter: blur(8px) saturate(120%);
            border: 1px solid rgba(255,255,255,0.04);
            border-radius: 10px;
            min-width: 220px;
            list-style: none;
            padding: 6px 6px;
            box-shadow: 0 12px 30px rgba(0,0,0,0.6);
            z-index: 2000;
            opacity: 0;
            transform: translateY(6px);
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
        }

        /* show on hover / keyboard focus */
        nav ul li.has-dropdown:hover .dropdown,
        nav ul li.has-dropdown:focus-within .dropdown,
        nav ul li.has-dropdown.open .dropdown {
            opacity: 1;
            transform: translateY(0);
            visibility: visible;
            pointer-events: auto;
        }

        nav ul li .dropdown li a {
            display: block;
            padding: 10px 14px;
            color: #e9eef5;
            text-decoration: none;
            font-size: 14px;
            border-radius: 6px;
            transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
        }

        nav ul li .dropdown li a:hover {
            background: rgba(140,33,49,0.07);
            color: #fff;
            transform: translateX(4px);
        }

        /* Mobile: collapse dropdowns inside mobile menu until tapped */
        @media (max-width: 768px) {
            nav ul li .dropdown {
                position: static;
                max-height: 0;
                overflow: hidden;
                padding: 0 0 0 18px;
                transition: max-height 0.28s ease, padding 0.22s ease;
            }
            nav ul li .dropdown li a {
                padding: 10px 0 10px 6px;
            }
            /* when the dropdown parent is toggled open on mobile */
            nav ul li.has-dropdown.open .dropdown {
                max-height: 480px; /* plenty for list items */
                padding: 10px 0 10px 18px;
            }
        }

        .mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            color: #fff;
            font-size: 24px;
            cursor: pointer;
        }


            .btn-login {
                background-color:#8C2131;
                color: #fff;
                padding: 10px 25px;
                border-radius: 25px;
                text-decoration: none;
                font-weight: 600;
                font-size: 14px;
                transition: all 0.3s;
                border: 2px solid #8C2131;
            }

            .btn-login:hover {
                background-color: transparent;
                color: #8C2131;
            }


    /* App Mockups */
    .app-mockups {
      position: relative;
      height: 600px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .mockup {
      position: absolute;
      border-radius: 30px;
      overflow: hidden;
      box-shadow: 0 20px 40px rgba(255, 45, 45, 0.2);
      transition: transform 0.3s;
    }

    .mockup-1 {
      width: 250px;
      height: 500px;
      background: #8C2131;
      z-index: 3;
      transform: rotate(-5deg) translateX(-50px);
    }

    .mockup-2 {
      width: 250px;
      height: 500px;
      background: #fff;
      z-index: 2;
      transform: rotate(5deg) translateX(50px);
    }

    /* Sections */
    section {
      padding: 100px 0;
    }

    .section-title {
      text-align: center;
      margin-bottom: 60px;
    }

    .section-title h2 {
      font-size: 2.5rem;
      font-weight: 700;
      margin-bottom: 15px;
      color: #8C2131;
    }

    .section-title p {
      color: #ccc;
      max-width: 600px;
      margin: 0 auto;
    }

    /* Features Grid */
    .features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 30px;
    }

    .feature-card {
      background-color: #111;
      border-radius: 15px;
      padding: 40px 30px;
      text-align: center;
      transition: transform 0.3s;
      border: 1px solid #333;
    }

    .feature-card:hover {
      transform: translateY(-10px);
      border-color: #8C2131;
    }

    .feature-icon {
      font-size: 48px;
      color: #8C2131;
      margin-bottom: 20px;
    }

    .feature-card h3 {
      font-size: 1.5rem;
      margin-bottom: 15px;
      color: #fff;
    }

    .feature-card p {
      color: #ccc;
      line-height: 1.6;
    }

    /* CTA Section */
    .cta {
      text-align: center;
      background: #111;
      border-radius: 20px;
      padding: 80px 40px;
      margin: 0 auto;
      max-width: 800px;
    }

    .cta h2 {
      font-size: 2.5rem;
      margin-bottom: 20px;
      color: #fff;
    }

    .cta p {
      font-size: 1.2rem;
      margin-bottom: 40px;
      color: #ccc;
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
    }

    .btn {
      display: inline-block;
      background-color: #8C2131;
      color: #fff;
      padding: 15px 40px;
      border-radius: 30px;
      text-decoration: none;
      font-weight: 600;
      transition: all 0.3s;
      border: 2px solid #8C2131;
      font-size: 1.1rem;
    }

    .btn:hover {
      background-color: transparent;
      color: #8C2131;
    }

    /* Footer */
    footer {
      background-color: #111;
      padding: 60px 0 30px;
      border-top: 1px solid #333;
    }

    .footer-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 40px;
      margin-bottom: 40px;
    }

    .footer-col h3 {
      font-size: 1.2rem;
      margin-bottom: 20px;
      color: #8C2131;
    }

    .footer-col ul {
      list-style: none;
    }

    .footer-col ul li {
      margin-bottom: 10px;
    }

    .footer-col ul li a {
      color: #ccc;
      text-decoration: none;
      transition: color 0.3s;
    }

    .footer-col ul li a:hover {
      color: #8C2131;
    }

    .social-links {
      display: flex;
      gap: 15px;
    }

    .social-links a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      background-color: #222;
      border-radius: 50%;
      color: #fff;
      transition: all 0.3s;
    }

    .social-links a:hover {
      background-color: #8C2131;
      transform: translateY(-5px);
    }

    .copyright {
      text-align: center;
      padding-top: 30px;
      border-top: 1px solid #333;
      color: #ccc;
      font-size: 14px;
    }

    /* Responsive Design */
    @media (max-width: 768px) {
      .mobile-menu-btn {
        display: block;
      }

      nav ul {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        /* glassmorphism mobile nav */
        background: rgba(10,10,10,0.55);
        -webkit-backdrop-filter: blur(8px) saturate(120%);
        backdrop-filter: blur(8px) saturate(120%);
        border-top: 1px solid rgba(255,255,255,0.04);
        box-shadow: 0 12px 30px rgba(0,0,0,0.6);
        flex-direction: column;
        padding: 20px 0;
        transform: translateY(-8px);
        opacity: 0;
        transition: transform 0.28s cubic-bezier(.2,.9,.2,1), opacity 0.22s ease;
        overflow: hidden;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
      }

      nav ul.show {
        transform: translateY(0);
        opacity: 1;
      }

      nav ul.show {
        display: flex;
      }

      nav ul li {
        margin: 0;
        text-align: center;
        padding: 10px 0;
      }

      .app-container {
        grid-template-columns: 1fr;
        text-align: center;
      }

      .app-text h1 {
        font-size: 2.5rem;
      }

      .app-text h2 {
        font-size: 1.2rem;
      }

      .app-store-buttons {
        justify-content: center;
        flex-wrap: wrap;
      }

      .app-mockups {
        height: 400px;
      }

      .mockup-1, .mockup-2 {
        width: 180px;
        height: 350px;
      }

      .section-title h2 {
        font-size: 2rem;
      }

      .cta {
        padding: 60px 20px;
      }

      .cta h2 {
        font-size: 2rem;
      }
    }

    /* Animation */
    .app-text h1,
    .app-text h2,
    .app-text p,
    .app-store-buttons {
      opacity: 0;
      transform: translateY(30px);
      animation: fadeInUp 0.8s ease forwards;
    }

    .app-text h1 { animation-delay: 0.3s; }
    .app-text h2 { animation-delay: 0.5s; }
    .app-text p { animation-delay: 0.7s; }
    .app-store-buttons { animation-delay: 0.9s; }

    .mockup-1 { animation: float 3s ease-in-out infinite; }
    .mockup-2 { animation: float 3s ease-in-out infinite 1.5s; }

    @keyframes fadeInUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes float {
      0%, 100% { transform: rotate(-5deg) translateX(-50px) translateY(0); }
      50% { transform: rotate(-5deg) translateX(-50px) translateY(-20px); }
    }