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

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

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

    header{
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:25px 0;
    }

    .logo{
      font-size:32px;
      font-weight:bold;
      color:#fff;
    }

    nav a{
      color:#cfcfcf;
      text-decoration:none;
      margin-left:25px;
      transition:.3s;
    }

    nav a:hover{
      color:#fff;
    }

    .btn{
      background:linear-gradient(45deg,#c7d3e7,#7c3aed);
      padding:14px 28px;
      border-radius:12px;
      color:white;
      text-decoration:none;
      font-weight:bold;
      display:inline-block;
      transition:.3s;
    }

    .btn:hover{
      transform:scale(1.05);
    }

    .hero{
      min-height:90vh;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:50px;
      flex-wrap:wrap;
    }

    .hero-text{
      flex:1;
      min-width:300px;
    }

    .hero-text h1{
      font-size:65px;
      line-height:1.1;
      margin-bottom:25px;
    }

    .gradient{
      background:linear-gradient(45deg,#3b82f6,#9333ea);
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
    }

    .hero-text p{
      color:#bdbdbd;
      font-size:20px;
      line-height:1.6;
      margin-bottom:35px;
    }

    .price-box{
      background:#111;
      border:1px solid #222;
      padding:25px;
      border-radius:20px;
      margin-top:30px;
      width:fit-content;
    }

    .old-price{
      text-decoration:line-through;
      color:#777;
      margin-bottom:10px;
    }

    .new-price{
      font-size:48px;
      font-weight:bold;
      color:#fff;
    }

    .parcel{
      color:#8b8b8b;
      margin-top:10px;
    }

    .domain{
      color:#ffcc70;
      margin-top:10px;
      font-weight:bold;
    }

    .hero-card{
      flex:1;
      min-width:300px;
      background:#111;
      border:1px solid #222;
      border-radius:30px;
      padding:25px;
      box-shadow:0 0 50px rgba(124,58,237,.2);
    }

    .top-card{
      height:250px;
      border-radius:25px;
      background:linear-gradient(45deg,#2563eb,#7c3aed);
      padding:30px;
      display:flex;
      flex-direction:column;
      justify-content:end;
      margin-bottom:25px;
    }

    .top-card h2{
      font-size:38px;
    }

    .mini-cards{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:15px;
    }

    .mini-card{
      background:#181818;
      border:1px solid #2b2b2b;
      border-radius:18px;
      padding:20px;
    }

    .mini-card h3{
      margin:15px 0 10px;
    }

    section{
      padding:100px 0;
    }

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

    .title h2{
      font-size:50px;
      margin-top:10px;
    }

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

    .service{
      background:#111;
      border:1px solid #222;
      border-radius:25px;
      padding:35px;
      transition:.3s;
    }

    .service:hover{
      transform:translateY(-8px);
      border-color:#7c3aed;
    }

    .service span{
      font-size:45px;
    }

    .service h3{
      margin:20px 0;
      font-size:26px;
    }

    .service p{
      color:#bdbdbd;
      line-height:1.6;
    }

    .cta{
      background:linear-gradient(45deg,#2563eb,#7c3aed);
      padding:80px 40px;
      border-radius:40px;
      text-align:center;
    }

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

    .cta p{
      max-width:700px;
      margin:auto;
      line-height:1.7;
      color:#ededed;
      margin-bottom:40px;
      font-size:18px;
    }

    footer{
      text-align:center;
      padding:40px 0;
      color:#777;
      border-top:1px solid #1f1f1f;
      margin-top:80px;
    }

    @media(max-width:768px){

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

      .title h2{
        font-size:38px;
      }

      .cta h2{
        font-size:38px;
      }

      header{
        flex-direction:column;
        gap:20px;
      }

      nav{
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
      }
    }