:root{
      --bg:#070d2b;
      --bg2:#0d1442;
      --card:#111a4f;
      --card2:#1a2566;
      --accent:#6c3bff;
      --accent2:#2c8cff;
      --green:#9df58a;
      --text:#ffffff;
      --muted:#93a0d8;
      --chip:#28307c;
      --chip-hover:#3b47aa;
      --line:rgba(255,255,255,.1);
      --shadow:0 10px 30px rgba(0,0,0,.35);
      --radius:16px;
    }

    * { box-sizing: border-box; }
    body{
      margin:0;
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color:var(--text);
      background:
        radial-gradient(1000px 500px at 50% -10%, #1d2a8f 0%, transparent 55%),
        linear-gradient(180deg, #0b1240 0%, #060b25 100%);
      min-height:100vh;
    }

    a { color:inherit; text-decoration:none; }

    .container{
      width:min(1280px, 95%);
      margin-inline:auto;
    }

    /* HEADER */
    .topbar{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      padding:14px 0;
    }

    .left-nav, .right-nav{ display:flex; gap:10px; align-items:center; }
    .logo{
      font-weight:900;
      letter-spacing:.08em;
      display:flex;
      align-items:center;
      gap:8px;
      text-transform:uppercase;
      height: 40px;
    }
    .logo-mark{
      width:14px; height:20px;
      background:linear-gradient(180deg,#ff8a00,#ff5500);
      clip-path:polygon(50% 0%,100% 35%,82% 100%,18% 100%,0% 35%);
      display:inline-block;
    }

    .btn, .chip{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border:none;
      cursor:pointer;
      padding:10px 14px;
      border-radius:12px;
      font-weight:700;
      line-height:1;
      transition:.2s ease;
      box-shadow: var(--shadow);
    }
    .btn{
      background:var(--accent);
      color:#fff;
    }
    .btn:hover{ transform:translateY(-1px); filter:brightness(1.1); }
    .btn.secondary{
      background:#131f5f;
      border:1px solid rgba(255,255,255,.2);
    }
    .btn.green{
      background:var(--green);
      color:#0f1d16;
    }

    .chip{
      background:var(--chip);
      color:#dfe5ff;
      font-size:13px;
      padding:9px 12px;
      box-shadow:none;
    }
    .chip:hover{
      background:var(--chip-hover);
    }

    /* HERO */
    .hero{
      margin-top:10px;
      border-radius:20px;
      overflow:hidden;
      background:
        radial-gradient(400px 200px at 15% 20%, rgba(255,170,0,.35), transparent 50%),
        linear-gradient(90deg, #100f17 0%, #2e1f10 45%, #1f2236 100%);
      border:1px solid rgba(255,255,255,.12);
      min-height:220px;
      align-items:stretch;
      position: relative;
      display: grid;
    }
    .hero::before{
      content:"";
      position:absolute;
      inset:0;
      background-image:
        radial-gradient(circle at 10% 20%, rgba(255,209,102,.5) 0 10%, transparent 11%),
        radial-gradient(circle at 90% 15%, rgba(255,209,102,.4) 0 7%, transparent 8%),
        radial-gradient(circle at 83% 78%, rgba(255,209,102,.35) 0 8%, transparent 9%);
      opacity:.5;
      pointer-events:none;
    }
.hero-content {
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 2;
    margin: 0 0 0 auto;
}
    .hero h1{
      margin:0 0 10px;
      text-transform:uppercase;
      font-size:clamp(30px,4.2vw,56px);
      line-height:1.05;
      font-weight:900;
      letter-spacing:.02em;
    }
    .hero .accent{ color:#ff9f2e; }
    .hero p{
      margin:0;
      font-size:clamp(18px,2vw,30px);
      font-weight:900;
      text-transform:uppercase;
      line-height:1.1;
    }
    .hero-visual{
      z-index:1;
      position:relative;
      display:flex;
      align-items:end;
      justify-content:center;
      padding:12px;
    }
    .hero-photo{
      border-radius:12px;
      object-fit:cover;
      width: 100%;
      height: 100%;
      background:#28306f;
      border:1px solid rgba(255,255,255,.15);
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }
    .logo__image-wrapper{
      
    height: 90px;
    width: 66px;
    overflow: hidden;
    position: relative;
    margin-right: -18px;
    transform: scale(.5);
    }
    .logo__image-wrapper img{
      position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    }
    /* FILTERS */
    .filters{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:14px;
      margin-top:16px;
      flex-wrap:wrap;
    }
    .chips-wrap{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
    }
    .right-tools{
      display:flex;
      align-items:center;
      gap:8px;
    }

    /* GAMES */
    .games{
      margin-top:18px;
    }
    .games-head{
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-bottom:12px;
      gap:10px;
    }
    .games-title{
      display:flex;
      align-items:center;
      gap:10px;
      font-weight:900;
      font-size:30px;
      text-transform:uppercase;
    }
    .games-title small{
      display:block;
      color:#ffcf4d;
      font-size:15px;
      margin-top:2px;
      font-weight:800;
      text-transform:none;
    }

    .games-grid{
      display:grid;
      grid-template-columns:repeat(6, minmax(180px,1fr));
      gap:12px;
    }

    .game{
      position:relative;
      border-radius:14px;
      overflow:hidden;
      background:#1a215f;
      border:1px solid rgba(255,255,255,.12);
      min-height:130px;
      transition:.2s ease;
      display:block;
    }
    .game img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      transition:transform .25s ease, filter .25s ease;
    }
    .game:hover img{
      transform:scale(1.03);
      filter:blur(2.2px) brightness(.65);
    }
    .badge-top{
      position:absolute;
      top:8px; left:8px;
      z-index:2;
      background:#abff95;
      color:#10280a;
      font-size:12px;
      font-weight:900;
      border-radius:999px;
      padding:4px 10px;
    }

    .game-name{
      position:absolute;
      left:10px; top:8px;
      font-size:20px;
      font-weight:800;
      text-shadow:0 2px 6px rgba(0,0,0,.55);
      opacity:0;
      transition:.2s ease;
      z-index:2;
    }

    .game-overlay{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      opacity:0;
      transition:.2s ease;
      z-index:2;
    }
    .play-circle{
      width:58px; height:58px;
      border-radius:50%;
      background:#3d66ff;
      display:grid;
      place-items:center;
      box-shadow:0 8px 20px rgba(48,85,255,.4);
    }
    .play-circle::before{
      content:"";
      border-style:solid;
      border-width:9px 0 9px 14px;
      border-color:transparent transparent transparent white;
      margin-left:3px;
    }
    .demo-pill{
      position:absolute;
      right:10px;
      bottom:10px;
      background:#ff5a63;
      color:#fff;
      border-radius:999px;
      padding:4px 10px;
      font-size:12px;
      font-weight:800;
      opacity:0;
      transform:translateY(4px);
      transition:.2s ease;
      z-index:2;
    }

    .game:hover .game-overlay,
    .game:hover .demo-pill,
    .game:hover .game-name{
      opacity:1;
      transform:translateY(0);
    }

    /* FOOTER */
    footer{
      margin-top:38px;
      border-top:1px solid var(--line);
      background:
        radial-gradient(900px 300px at 50% 0%, rgba(75,101,255,.2), transparent 60%),
        linear-gradient(180deg, #0a1034 0%, #070b25 100%);
      padding:28px 0 18px;
    }

    .features{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:14px;
      margin-bottom:22px;
    }
    .feature{
      text-align:center;
      padding:14px 10px;
      border:1px solid var(--line);
      border-radius:14px;
      background:rgba(255,255,255,.02);
    }
    .feature .ico{
      width:60px;height:60px;
      margin:0 auto;
      border-radius:10px;
    }
    .feature .ico img{
      width: 100%;
      height: 100%;
    }
    .feature b{ display:block; font-size:18px; }
    .feature span{ color:var(--muted); font-size:14px; }

    .footer-main{
      display:grid;
      grid-template-columns:2fr 1fr;
      gap:18px;
      border-top:1px solid var(--line);
      border-bottom:1px solid var(--line);
      padding:18px 0;
      margin-bottom:14px;
    }
    .links{
      display:grid;
      grid-template-columns:repeat(3, minmax(120px,1fr));
      gap:10px 18px;
    }
    .links a{
      display:block;
      color:#b8c2f3;
      padding:4px 0;
    }
    .links a:hover{ color:#fff; }

    .support{
      border:1px solid var(--line);
      border-radius:14px;
      padding:14px;
      background:rgba(255,255,255,.02);
    }
    .support h4{ margin:0 0 10px; }
    .support-row{
      display:flex; gap:8px; flex-wrap:wrap;
    }

    .payments{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin:12px 0;
    }
    .pay{
      border:1px solid var(--line);
      color:#9ba8df;
      border-radius:10px;
      padding:7px 11px;
      font-size:13px;
      background:rgba(255,255,255,.015);
    }

    .copy{
      color:#7f8bc1;
      font-size:13px;
      line-height:1.35;
    }

    @media (max-width: 1100px){
      .games-grid{ grid-template-columns:repeat(4,minmax(160px,1fr)); }
      .hero{ grid-template-columns:1fr; }
      .hero-visual{ padding-top:0; }
    }
    @media (max-width: 760px){
      .games-grid{ grid-template-columns:repeat(2,minmax(140px,1fr)); }
      .features{ grid-template-columns:repeat(2,1fr); }
      .footer-main{ grid-template-columns:1fr; }
      .links{ grid-template-columns:repeat(2,1fr); }
      .games-title{ font-size:24px; }
    }
    @media(max-width:528px){
      .hero-photo{
        width: auto;
      }
      .left-nav{
        display: none;
      }
    }