body {
     font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     margin: 0;
     background: #f8fafc;
     color: #0f172a;
     line-height: 1.6;
   }

   .container {
     max-width: 1100px;
     margin: auto;
     padding: 40px 20px;
   }

   .hero {
     display: grid;
     grid-template-columns: 1fr;
     gap: 30px;
     text-align: center;
     padding: 60px 20px;
   }

   .hero h1 {
     font-size: clamp(2rem, 5vw, 3rem);
     font-weight: 700;
   }

   .hero p {
     font-size: 1.1rem;
     color: #475569;
     max-width: 700px;
     margin: auto;
   }

   .cta {
     margin-top: 30px;
   }

   .btn-primary {
     background: #2563eb;
     color: white;
     padding: 14px 28px;
     border-radius: 8px;
     text-decoration: none;
     font-weight: 600;
     display: inline-block;
   }

   .section {
     margin-top: 80px;
   }

   .section h2 {
     font-size: 2rem;
     margin-bottom: 20px;
     text-align: center;
   }

   .grid-3 {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
     gap: 30px;
   }

   .card {
     background: white;
     border-radius: 12px;
     padding: 24px;
     box-shadow: 0 10px 30px rgba(0,0,0,.05);
   }

   .card h3 {
     margin-bottom: 10px;
   }

   ul {
     padding-left: 18px;
   }

   .pricing {
     background: #0f172a;
     color: white;
     padding: 80px 20px;
     margin-top: 80px;
   }

   .pricing .card {
     background: #020617;
     color: white;
     border: 1px solid #1e293b;
   }

   .price {
     font-size: 2rem;
     font-weight: 700;
     margin: 10px 0;
   }

   .muted {
     color: #94a3b8;
     font-size: 0.95rem;
   }

   .footer {
     text-align: center;
     padding: 40px 20px;
     color: #64748b;
     font-size: 0.9rem;
   }
   
  <!-- new css-->
  
  .btn-check:checked + .btn {
    border: 2px solid #7c5cff !important;
    background-color: #677eb8 !important;
    box-shadow: 0 6px 18px rgba(124, 92, 255, 0.15);
  }