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

    body{
      background-color:#f9f9f9;
      color:#0c1c3a;
      display:flex;
      flex-direction:column;
      align-items:center;
      min-height:100vh;
    }

    /* Navbar */
    nav{
      width:100%;
      display:flex;
      justify-content:flex-end;
      align-items:center;
      padding:25px 70px;
      font-size:16px;
      background:#fff;
      box-shadow:0 2px 10px rgba(0,0,0,0.05);
      position:sticky;
      top:0;
      z-index:10;
    }
    nav a{
      text-decoration:none;
      color:#0c1c3a;
      margin-left:45px;
      transition:opacity .3s;
    }
    nav a:hover{opacity:.6;}

    /* Hero */
    .hero{
      text-align:center;
      margin-top:20px;
      margin-bottom:60px;
    }
    .hero img{
      width:520px;
      height:520px;
      margin-bottom:10px;
    }
    .hero h1{
      font-size:100px;
      font-weight:700;
      margin-top: -100px;
      margin-bottom:28px;

    }
    .hero p{
      font-size:18px;
      color:#42506b;
      margin-bottom: 40px;
    }

    /* Section titles */
    h2.section-title{
      text-align:center;
      font-size:32px;
      font-weight:700;
      margin-bottom:50px;
      color:#0c1c3a;
    }

    /* Apps Section */
    .apps{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
      gap:50px;
      max-width:1150px;
      margin:0 auto 100px;
      padding:0 40px;
    }

    /* iPhone Frame */
    .iphone{
      width:230px;height:480px;
      border:12px solid #000;
      border-radius:45px;
      background:white;
      position:relative;
      box-shadow:0 8px 30px rgba(0,0,0,0.1);
      overflow:hidden;
      margin:0 auto;
      display:flex;
      flex-direction:column;
    }
    .notch{
      width:100px;height:22px;background:#000;
      border-radius:10px;
      position:absolute;top:8px;left:50%;
      transform:translateX(-50%);
      z-index:2;
    }
    .screen{
      width:100%;height:100%;
      padding:80px 25px 30px;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:space-between;
      text-align:center;
    }
    .content{display:flex;flex-direction:column;align-items:center;}
    .screen img{width:70px;height:70px;border-radius:20px;margin-bottom:30px;}
    .screen h3{font-size:20px;margin-bottom:10px;color:#0c1c3a;}
    .screen p{font-size:14px;color:#4e5c74;line-height:1.4;margin-bottom:25px;}

    /* Download Button */
    .download-btn{
      background:linear-gradient(135deg,#2563eb,#1e40af);
      color:#fff;
      font-size:14px;font-weight:600;
      border:none;
      padding:10px 24px;
      border-radius:25px;
      cursor:pointer;
      transition:all .3s ease;
      box-shadow:0 3px 10px rgba(0,0,0,0.15);
    }
    .download-btn:hover{
      transform:translateY(-2px);
      box-shadow:0 5px 14px rgba(0,0,0,0.25);
      background:linear-gradient(135deg,#1e3a8a,#1d4ed8);
    }

    /* Screen Backgrounds */
    .task-bg{background:linear-gradient(180deg,#ebfdf5,#dffcf1);}
    .weather-bg{background:linear-gradient(180deg,#e6f5ff,#d5ebff);}
    .finance-bg{background:linear-gradient(180deg,#e8e8ff,#dcdcff);}
    .music-bg{background:linear-gradient(180deg,#fbe8ff,#f3dbff);}

    /* About */
    .about{
      max-width:900px;
      margin:100px auto;
      text-align:center;
      padding:0 40px;
    }
    .about p{
      font-size:16px;
      color:#4b5563;
      line-height:1.7;
      margin-top:15px;
    }

    /* Contact */
    .contact{
      background:#f1f5f9;
      width:100%;
      padding:80px 20px;
      text-align:center;
    }
    .contact form{
      max-width:600px;
      margin:0 auto;
      display:flex;
      flex-direction:column;
      gap:15px;
    }
    .contact input,.contact textarea{
      padding:12px 15px;
      border-radius:8px;
      border:1px solid #cbd5e1;
      font-size:15px;
      width:100%;
    }
    .contact button{
      background:linear-gradient(135deg,#2563eb,#1e40af);
      color:#fff;
      font-size:15px;
      font-weight:600;
      border:none;
      padding:12px 25px;
      border-radius:25px;
      cursor:pointer;
      transition:all .3s ease;
    }
    .contact button:hover{
      background:linear-gradient(135deg,#1e3a8a,#1d4ed8);
      transform:translateY(-2px);
    }

    /* Footer */
    footer{
      background:#0c1c3a;
      color:#fff;
      width:100%;
      text-align:center;
      padding:20px 10px;
      font-size:14px;
    }

    @media(max-width:768px){
      .hero h1{font-size:32px;}
      .hero p{font-size:16px;}
      .iphone{width:200px;height:440px;}
      h2.section-title{font-size:26px;}
    }