*{
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family:'Poppins',sans-serif;
    }

    body{
      overflow-x:hidden;
      background:#f8fbff;
    }

    /* Navbar */
    .navbar{
      padding:20px 0;
      background:transparent;
      position:absolute;
      width:100%;
      z-index:1000;
    }

    .navbar-brand{
      font-size:30px;
      font-weight:700;
      color:#fff !important;
    }

    .nav-link{
      color:#fff !important;
      margin-left:20px;
      font-weight:500;
      transition:0.3s;
    }

    .nav-link:hover{
      color:#ffd369 !important;
    }

    /* Hero */
    .hero{
      height:100vh;
      background:linear-gradient(135deg,#4f46e5,#7c3aed);
      position:relative;
      display:flex;
      align-items:center;
      color:#fff;
    }

    .hero::before{
      content:'';
      position:absolute;
      width:500px;
      height:500px;
      background:rgba(255,255,255,0.08);
      border-radius:50%;
      top:-100px;
      right:-100px;
    }

    .hero::after{
      content:'';
      position:absolute;
      width:300px;
      height:300px;
      background:rgba(255,255,255,0.06);
      border-radius:50%;
      bottom:-100px;
      left:-100px;
    }

    .hero h1{
      font-size:60px;
      font-weight:700;
      line-height:1.2;
    }

    .hero p{
      font-size:18px;
      margin:25px 0;
      color:#e5e7eb;
    }

    .btn-custom{
      background:#ffd369;
      color:#000;
      padding:14px 35px;
      border-radius:50px;
      font-weight:600;
      border:none;
      transition:0.3s;
    }

    .btn-custom:hover{
      background:#fff;
      transform:translateY(-3px);
    }

    .hero-img{
      width:100%;
      animation:float 4s ease-in-out infinite;
    }

    @keyframes float{
      0%{
        transform:translateY(0px);
      }
      50%{
        transform:translateY(-20px);
      }
      100%{
        transform:translateY(0px);
      }
    }

    /* Features */
    .features{
      padding:100px 0;
    }

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

    .section-title h2{
      font-size:42px;
      font-weight:700;
      color:#111827;
    }

    .feature-box{
      background:#fff;
      padding:40px 30px;
      border-radius:20px;
      text-align:center;
      transition:0.4s;
      box-shadow:0 10px 30px rgba(0,0,0,0.05);
      height:100%;
    }

    .feature-box:hover{
      transform:translateY(-10px);
      box-shadow:0 20px 40px rgba(0,0,0,0.1);
    }

    .feature-icon{
      width:80px;
      height:80px;
      background:linear-gradient(135deg,#6366f1,#8b5cf6);
      color:#fff;
      margin:auto;
      border-radius:20px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:35px;
      margin-bottom:25px;
    }

    /* About */
    .about{
      padding:100px 0;
      background:#eef2ff;
    }

    .about img{
      width:50%;
      border-radius:25px;
    }

    .about h2{
      font-size:45px;
      font-weight:700;
      margin-bottom:20px;
    }

    .about p{
      color:#555;
      line-height:1.8;
    }

    /* CTA */
    .cta{
      padding:100px 0;
      background:linear-gradient(135deg,#4338ca,#7e22ce);
      text-align:center;
      color:#fff;
    }

    .cta h2{
      font-size:50px;
      font-weight:700;
    }

    .cta p{
      max-width:700px;
      margin:20px auto;
      color:#ddd;
    }

    /* Footer */
    footer{
      background:#9fa1a5;
      color:#fff;
      padding:30px 0;
      text-align:center;
    }

    @media(max-width:768px){

      .hero{
        text-align:center;
        padding-top:120px;
        height:auto;
        padding-bottom:80px;
      }

      .hero h1{
        font-size:42px;
      }

      .hero-img{
        margin-top:50px;
      }

      .about{
        text-align:center;
      }

      .about img{
        margin-bottom:30px;
      }
    }