img{
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;

  pointer-events: none;

  -webkit-touch-callout: none;
}


    *{
      margin:0;
      padding:0;
      box-sizing:border-box;
    }

    body{
      font-family:'Inter',sans-serif;
      background:
      radial-gradient(circle at top left,#1f1f3d 0%,transparent 30%),
      radial-gradient(circle at bottom right,#1d3b2d 0%,transparent 30%),
      #090909;

      color:white;
      min-height:100vh;
      overflow-x:hidden;
    }

    body::before{
      content:'';
      position:fixed;
      inset:0;
      background-image:
      linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);

      background-size:40px 40px;
      pointer-events:none;
      z-index:-1;
    }

    header{
      width:100%;
      position:sticky;
      top:0;
      z-index:999;
      backdrop-filter:blur(14px);
      background:rgba(10,10,10,0.65);
      border-bottom:1px solid rgba(255,255,255,0.08);
    }

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

    /* LOGO */

    .logo{
      display:flex;
      align-items:center;
      gap:14px;
    }

    .logo img{
      height:58px;
      object-fit:contain;
    }

    /* SEARCH */

    .search-box{
      flex:1;
      max-width:420px;
      position:relative;
    }

    .search-box input{
      width:100%;
      height:54px;
      border:none;
      outline:none;
      border-radius:18px;

      background:rgba(255,255,255,0.06);
      border:1px solid rgba(255,255,255,0.08);

      color:white;
      padding:0 20px;

      font-size:15px;

      transition:.25s;
    }

    .search-box input:focus{
      border-color:#7b61ff;
      box-shadow:0 0 25px rgba(123,97,255,.35);
    }

    /* HERO */

    .hero{
      max-width:1450px;
      margin:auto;
      padding:70px 20px 30px;
    }

    .hero-box{
      position:relative;
      overflow:hidden;

      border-radius:34px;

      background:
      linear-gradient(
      135deg,
      rgba(123,97,255,.25),
      rgba(0,212,255,.10)
      );

      border:1px solid rgba(255,255,255,.08);

      padding:60px;
    }

    .hero-box::before{
      content:'';
      position:absolute;
      width:450px;
      height:450px;
      border-radius:50%;
      background:#7b61ff;
      filter:blur(160px);
      opacity:.25;
      top:-180px;
      right:-100px;
    }

    .hero h1{
      font-size:64px;
      line-height:1;
      font-weight:800;
      margin-bottom:18px;
      max-width:700px;
    }

    .hero p{
      font-size:18px;
      color:#c7c7c7;
      max-width:700px;
      line-height:1.7;
    }

    .games-section{
      max-width:1450px;
      margin:auto;
      padding:30px 20px 80px;
    }

    .section-title{
      font-size:30px;
      margin-bottom:30px;
      font-weight:800;
    }

    /* GRID */

    .games-grid{
      display:grid;
      grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
      gap:28px;
    }

    /* CARD */

    .game-card{
      position:relative;
      overflow:hidden;

      border-radius:28px;

      background:rgba(255,255,255,.04);

      border:1px solid rgba(255,255,255,.08);

      text-decoration:none;
      color:white;

      transition:.3s;
    }

    .game-card:hover{
      transform:translateY(-10px) scale(1.02);
      border-color:rgba(123,97,255,.55);

      box-shadow:
      0 10px 40px rgba(123,97,255,.25);
    }

    .game-banner{
      width:100%;
      height:220px;
      object-fit:cover;
      display:block;
    }

    .card-content{
      padding:24px;
    }

    .game-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      margin-bottom:14px;
    }

    .badge{
      padding:8px 14px;
      border-radius:999px;

      background:rgba(123,97,255,.15);
      border:1px solid rgba(123,97,255,.25);

      color:#b9a8ff;
      font-size:12px;
      font-weight:700;
    }

    .game-title{
      font-size:24px;
      font-weight:800;
      margin-bottom:12px;
    }

    .game-description{
      color:#bdbdbd;
      line-height:1.7;
      margin-bottom:24px;
      font-size:14px;
    }

    .play-btn{
      width:100%;
      height:52px;

      border:none;
      border-radius:16px;

      font-size:15px;
      font-weight:700;

      background:
      linear-gradient(
      135deg,
      #7b61ff,
      #5f7cff
      );

      color:white;

      cursor:pointer;

      transition:.25s;
    }

    .play-btn:hover{
      transform:scale(1.02);
      box-shadow:
      0 10px 30px rgba(123,97,255,.4);
    }

    footer{
      padding:35px;
      text-align:center;
      border-top:1px solid rgba(255,255,255,.08);
      color:#8d8d8d;
      font-size:14px;
    }

    @media(max-width:768px){

      .hero-box{
        padding:35px;
      }

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

      .hero p{
        font-size:16px;
      }

      .logo img{
        height:46px;
      }

    }