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

    body{
      background:#0f172a;
      color:white;
      overflow-x:hidden;
    }

    a{
      text-decoration:none;
      color:inherit;
    }

    /* Navbar */

    header{
      width:100%;
      position:fixed;
      top:0;
      left:0;
      z-index:1000;
      backdrop-filter: blur(10px);
      background:rgba(15,23,42,0.7);
      border-bottom:1px solid rgba(255,255,255,0.1);
    }

    .navbar{
      max-width:1200px;
      margin:auto;
      padding:18px 20px;
      display:flex;
      justify-content:space-between;
      align-items:center;
    }

    .logo{
      font-size: 1.5rem;
    font-weight: 700;
    color: #38bdf8;
    display: flex;
    align-items: center;
    gap: 8px;        /* space between image and text */
    line-height: 1;
    }

    .nav-links{
      display:flex;
      gap:30px;
      list-style:none;
    }

    .nav-links a{
      transition:0.3s;
    }

    .nav-links a:hover{
      color:#38bdf8;
    }

    .menu-btn{
      display:none;
      font-size:28px;
      cursor:pointer;
    }

    /* Hero */

    .hero{
      min-height:100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      padding:120px 20px 60px;
      background:
      radial-gradient(circle at top right,#1e3a8a,transparent 30%),
      radial-gradient(circle at bottom left,#0ea5e9,transparent 30%);
    }

    .hero-content{
      max-width:800px;
    }

    .hero h1{
      font-size:4rem;
      line-height:1.2;
      margin-bottom:20px;
    }

    .hero p{
      color:#cbd5e1;
      font-size:1.1rem;
      margin-bottom:35px;
    }

    .btn{
      display:inline-block;
      padding:14px 30px;
      background:#38bdf8;
      color:#0f172a;
      border-radius:50px;
      font-weight:600;
      transition:0.3s;
    }

    .btn:hover{
      transform:translateY(-3px);
      box-shadow:0 10px 20px rgba(56,189,248,0.4);
    }

    /* Features */

    .section{
      padding:80px 20px;
    }

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

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

    .section-title h2{
      font-size:2.5rem;
      margin-bottom:10px;
    }

    .section-title p{
      color:#94a3b8;
    }

    .features{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
      gap:25px;
    }

    .card{
      background:rgba(255,255,255,0.05);
      border:1px solid rgba(255,255,255,0.1);
      padding:30px;
      border-radius:20px;
      transition:0.3s;
      backdrop-filter:blur(10px);
    }

    .card:hover{
      transform:translateY(-8px);
      border-color:#38bdf8;
    }

    .card h3{
      margin:20px 0 10px;
    }

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

    .icon{
      width:60px;
      height:60px;
      border-radius:15px;
      background:#38bdf8;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:28px;
      color:#0f172a;
    }

    /* About */

    .about{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
      align-items:center;
      gap:50px;
    }

    .about img{
      width:100%;
      border-radius:20px;
    }

    .about-text h2{
      font-size:2.5rem;
      margin-bottom:20px;
    }

    .about-text p{
      color:#cbd5e1;
      line-height:1.8;
      margin-bottom:20px;
    }

    /* CTA */

    .cta{
      text-align:center;
      background:linear-gradient(135deg,#0284c7,#2563eb);
      border-radius:30px;
      padding:70px 20px;
    }

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

    .cta p{
      max-width:700px;
      margin:auto;
      margin-bottom:30px;
      color:#e2e8f0;
    }

    /* Footer */

    footer{
      padding:30px 20px;
      text-align:center;
      color:#94a3b8;
      border-top:1px solid rgba(255,255,255,0.1);
      margin-top:60px;
    }

    /* Mobile */

    @media(max-width:768px){

      .hero h1{
        font-size:2.5rem;
      }

      .nav-links{
        position:absolute;
        top:70px;
        right:-100%;
        width:250px;
        flex-direction:column;
        background:#111827;
        padding:30px;
        transition:0.3s;
      }

      .nav-links.active{
        right:0;
      }

      .menu-btn{
        display:block;
      }
    }