* { 
      margin: 0; 
      padding: 0; 
      box-sizing: border-box; 
      font-family: 'Poppins', 'Segoe UI', sans-serif; 
    }
    
    html { scroll-behavior: smooth; }
    
    body { 
      background: #0f172a; 
      color: #f1f5f9;
      line-height: 1.6;
    }

    nav { 
      display: flex; 
      justify-content: space-between; 
      align-items: center; 
      padding: 20px 8%; 
      background: rgba(15, 23, 42, 0.8); 
      backdrop-filter: blur(10px);
      position: sticky; 
      top: 0; 
      z-index: 100;
      border-bottom: 1px solid #334155;
    }
    
    nav h2 { 
      color: #38bdf8; 
      font-weight: 700;
    }
    
    nav a { 
      color: #cbd5e1; 
      margin-left: 25px; 
      text-decoration: none; 
      font-weight: 500;
      transition: 0.3s;
    }
    
    nav a:hover { 
      color: #38bdf8; 
    }

    .hero { 
      text-align: center; 
      padding: 120px 8% 100px;
      background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    }
    
    .hero h1 { 
      font-size: 3rem; 
      margin-bottom: 20px;
      background: linear-gradient(90deg, #38bdf8, #818cf8);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    
    .hero p { 
      font-size: 1.2rem; 
      color: #94a3b8;
      max-width: 600px;
      margin: 0 auto 30px;
    }
    
    .btn-group {
      display: flex;
      gap: 15px;
      justify-content: center;
      flex-wrap: wrap;
    }
    
    .btn { 
      padding: 14px 32px; 
      border-radius: 8px; 
      text-decoration: none; 
      font-weight: 600;
      transition: 0.3s;
      display: inline-block;
    }
    
    .btn-primary { 
      background: #38bdf8; 
      color: #0f172a; 
    }
    
    .btn-primary:hover { 
      background: #0ea5e9; 
      transform: translateY(-2px);
    }
    
    .btn-outline { 
      border: 2px solid #38bdf8; 
      color: #38bdf8;
      background: transparent;
    }
    
    .btn-outline:hover { 
      background: #38bdf8;
      color: #0f172a;
    }

    section { 
      padding: 80px 8%; 
    }
    
    section h2 { 
      text-align: center; 
      font-size: 2.5rem;
      margin-bottom: 50px;
      color: #f1f5f9;
    }

    .features { 
      display: grid; 
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
      gap: 30px; 
    }
    
    .feature-card { 
      background: #1e293b; 
      padding: 30px; 
      border-radius: 12px; 
      border: 1px solid #334155;
      transition: 0.3s;
    }
    
    .feature-card:hover { 
      border-color: #38bdf8;
      transform: translateY(-5px);
    }
    
    .feature-card h3 { 
      color: #38bdf8; 
      margin-bottom: 15px;
      font-size: 1.5rem;
    }
    
    .feature-card p {
      color: #94a3b8;
    }

    .cta { 
      text-align: center; 
      background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
      border-radius: 20px;
      margin: 0 8%;
      padding: 80px 40px;
    }
    
    .cta h2 {
      margin-bottom: 20px;
    }
    
    .cta p {
      color: #94a3b8;
      margin-bottom: 30px;
    }

    footer { 
      text-align: center; 
      padding: 30px; 
      color: #64748b;
      border-top: 1px solid #334155;
      margin-top: 50px;
    }

    @media (max-width: 768px) {
      .hero h1 { font-size: 2rem; }
      nav { flex-direction: column; gap: 15px; }
      nav a { margin: 0 10px; }
      .hero { padding: 80px 8% 60px; }
    }