:root{
      --bg-main:#03040a;
      --bg-elevated:#121321;
      --bg-glass:rgba(10,10,25,0.92);
      --txt-main:#ffffff;
      --txt-muted:#c7c8d5;
      --accent-red:#ff3355;
      --accent-orange:#ff7a1f;
      --accent-green:#2fffa2;
      --accent-purple:#7a5cff;
      --radius-xl:26px;
      --radius-lg:18px;
      --transition-fast:0.18s ease-out;
      --shadow-heavy:0 26px 70px rgba(0,0,0,0.9);
    }

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

    html,body{
      height:100%;
    }

    body{
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
      background:
        radial-gradient(circle at 0 0,#281247 0,transparent 45%),
        radial-gradient(circle at 100% 0,#4a1736 0,transparent 46%),
        radial-gradient(circle at 50% 100%,#13263f 0,transparent 52%),
        #02030a;
      color:var(--txt-main);
      line-height:1.6;
      overflow-x:hidden;
    }

    /* неоновая сетка */
    body::before{
      content:"";
      position:fixed;
      inset:0;
      background:
        linear-gradient(transparent 60%,rgba(0,0,0,0.9)),
        repeating-linear-gradient(
          90deg,
          rgba(255,255,255,0.06) 0,
          rgba(255,255,255,0.02) 1px,
          transparent 1px,
          transparent 70px
        );
      mix-blend-mode:overlay;
      pointer-events:none;
      opacity:.14;
      z-index:-2;
    }

    /* вертикальные огни */
    body::after{
      content:"";
      position:fixed;
      inset:0;
      background:
        repeating-linear-gradient(
          90deg,
          rgba(255,0,76,0.15) 0,
          rgba(255,0,76,0.05) 3px,
          transparent 3px,
          transparent 90px
        );
      mix-blend-mode:screen;
      opacity:.40;
      animation:neonShift 22s linear infinite alternate;
      pointer-events:none;
      z-index:-1;
    }

    @keyframes neonShift{
      0%{transform:translateX(0);}
      100%{transform:translateX(-220px);}
    }

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

    img{max-width:100%;display:block;}

    .page{
      max-width:1180px;
      margin:0 auto;
      padding:0 18px 46px;
    }

    /* HEADER */

    .header{
      position:sticky;
      top:0;
      z-index:20;
      background:linear-gradient(to bottom,rgba(2,3,10,0.98),rgba(2,3,10,0.75));
      backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(255,255,255,0.06);
      box-shadow:0 18px 35px rgba(0,0,0,0.75);
    }

    .header-inner{
      max-width:1180px;
      margin:0 auto;
      padding:14px 18px 12px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
    }

    .logo{
      display:flex;
      flex-direction:column;
      gap:4px;
      align-items:flex-start;
    }

    .logo-link{
      display:inline-flex;
      align-items:center;
      gap:10px;
    }

    .logo-image{
      height:40px;
      width:auto;
      display:block;
    }

    .logo-sub{
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:0.18em;
      color:var(--txt-muted);
      opacity:.75;
    }

    .header-right{
      display:flex;
      align-items:center;
      gap:14px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }

    .header-chip{
      font-size:11px;
      padding:6px 12px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,0.18);
      background:rgba(10,10,25,0.9);
      display:flex;
      align-items:center;
      gap:8px;
      color:var(--txt-muted);
    }
    .header-chip-dot{
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--accent-green);
      box-shadow:0 0 10px rgba(47,255,162,0.9);
    }

    .btn{
      border:none;
      outline:none;
      cursor:pointer;
      font-weight:600;
      font-size:14px;
      border-radius:999px;
      padding:9px 20px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:7px;
      transition:transform var(--transition-fast),box-shadow var(--transition-fast),background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast);
      white-space:nowrap;
    }

    .btn-ghost{
      background:rgba(8,10,25,0.9);
      color:#ffffff;
      border:1px solid rgba(255,255,255,0.35);
    }
    .btn-ghost:hover{
      background:rgba(255,255,255,0.08);
      transform:translateY(-1px);
      box-shadow:0 10px 28px rgba(0,0,0,0.7);
    }

    .btn-primary{
      background:linear-gradient(130deg,#ff3355,#ff7a1f);
      color:#ffffff;
      border:1px solid rgba(255,255,255,0.1);
      box-shadow:0 18px 40px rgba(234,79,70,0.85);
    }
    .btn-primary:hover{
      background:linear-gradient(130deg,#ff7a1f,#ffd15c);
      transform:translateY(-1px) translateZ(0);
      box-shadow:0 20px 45px rgba(255,142,92,0.95);
    }

    .btn-pill-glass{
      background:radial-gradient(circle at 0 0,rgba(255,255,255,0.24),transparent 55%);
      border-radius:999px;
      border:1px solid rgba(255,255,255,0.25);
      padding:2px;
    }

    /* HERO */

    .hero{
      padding:30px 0 18px;
    }

    .hero-grid{
      display:grid;
      grid-template-columns:2.2fr 1.8fr;
      gap:20px;
      align-items:stretch;
    }

    .bonus-stack{
      display:flex;
      flex-direction:column;
      gap:16px;
    }

    .bonus-card{
      position:relative;
      border-radius:var(--radius-xl);
      padding:24px 24px 20px;
      background:var(--bg-glass);
      border:1px solid rgba(255,255,255,0.06);
      overflow:hidden;
      color:#fff;
      box-shadow:var(--shadow-heavy);
      transform-style:preserve-3d;
      transition:transform 0.22s ease-out, box-shadow 0.22s ease-out, border-color 0.22s ease-out;
    }

    .bonus-card::before{
      content:"";
      position:absolute;
      inset:-50%;
      background:
        radial-gradient(circle at 0 0,rgba(255,255,255,0.28) 0,transparent 55%);
      mix-blend-mode:screen;
      opacity:.9;
      pointer-events:none;
    }

    .bonus-card--casino{
      background:
        radial-gradient(circle at 0 0,rgba(255,78,106,0.32) 0,transparent 50%),
        radial-gradient(circle at 100% 100%,rgba(255,122,31,0.22) 0,transparent 52%),
        var(--bg-glass);
      
    }

    .bonus-card--sport{
      background:
        radial-gradient(circle at 100% 0,rgba(47,255,162,0.32) 0,transparent 52%),
        radial-gradient(circle at 0 100%,rgba(122,92,255,0.35) 0,transparent 54%),
        var(--bg-glass);
      
    }

    .bonus-card:hover{
      transform:translateY(-4px);
      box-shadow:0 30px 70px rgba(0,0,0,0.95);
      border-color:rgba(255,255,255,0.3);
    }

    .bonus-header{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:10px;
      margin-bottom:6px;
    }

    .bonus-tag{
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:0.16em;
      opacity:.8;
    }

    .bonus-chip{
      font-size:11px;
      padding:4px 10px;
      border-radius:999px;
      background:rgba(0,0,0,0.35);
      border:1px solid rgba(255,255,255,0.18);
      backdrop-filter:blur(9px);
    }

    .bonus-title{
      font-size:30px;
      font-weight:900;
      letter-spacing:0.16em;
      text-transform:uppercase;
      margin-top:4px;
    }

    .bonus-sub{
      margin-top:4px;
      font-size:14px;
      text-transform:uppercase;
      letter-spacing:0.14em;
      color:var(--txt-muted);
    }

    .bonus-percent{
      margin-top:10px;
      font-size:32px;
      font-weight:800;
      text-shadow:0 0 16px rgba(0,0,0,0.7);
    }

    .bonus-percent span{
      color:#ffe66d;
    }

    .bonus-footer{
      margin-top:16px;
      display:flex;
      align-items:center;
      gap:12px;
      flex-wrap:wrap;
    }

    .bonus-mini{
      font-size:11px;
      color:var(--txt-muted);
      opacity:.9;
    }

    .hero-side{
      border-radius:var(--radius-xl);
      padding:22px 22px 20px;
      background:linear-gradient(145deg,rgba(18,19,33,0.98),rgba(18,19,33,0.92));
      border:1px solid rgba(255,255,255,0.06);
      box-shadow:var(--shadow-heavy);
      position:relative;
      overflow:hidden;
    }

    .hero-side::before{
      content:"";
      position:absolute;
      width:220px;
      height:220px;
      border-radius:50%;
      background:radial-gradient(circle,#7a5cff 0,transparent 60%);
      top:-80px;
      left:-50px;
      opacity:.35;
      filter:blur(2px);
    }

    .hero-side::after{
      content:"";
      position:absolute;
      width:200px;
      height:200px;
      border-radius:50%;
      background:radial-gradient(circle,#2fffa2 0,transparent 60%);
      bottom:-60px;
      right:-40px;
      opacity:.28;
      filter:blur(2px);
    }

    .hero-kz-label{
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:0.18em;
      color:var(--txt-muted);
      margin-bottom:6px;
    }

    .hero-heading{
      font-size:22px;
      font-weight:800;
      margin-bottom:6px;
    }

    .hero-heading span{
      color:#ffe66d;
    }

    .hero-stars{
      display:flex;
      align-items:center;
      gap:5px;
      margin-bottom:10px;
      font-size:12px;
      color:var(--txt-muted);
    }

    .star{
      width:14px;
      height:14px;
      border-radius:4px;
      background:radial-gradient(circle at 30% 20%,#fff7c4 0,#ffd15c 45%,#ff7a1f 100%);
      box-shadow:0 0 12px rgba(255,209,92,0.9);
      clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
    }

    .hero-text{
      font-size:14px;
      color:var(--txt-muted);
      margin-bottom:12px;
    }

    .hero-badges{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-bottom:14px;
    }

    .hero-badge{
      font-size:11px;
      padding:6px 10px;
      border-radius:999px;
      background:rgba(0,0,0,0.35);
      border:1px solid rgba(255,255,255,0.14);
      color:var(--txt-muted);
    }

    .hero-cta-row{
      margin-top:8px;
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      align-items:center;
    }

    .hero-cta-note{
      font-size:12px;
      color:var(--txt-muted);
    }

    .hero-note{
      margin-top:18px;
      font-size:13px;
      color:var(--txt-muted);
      max-width:780px;
    }

    /* CONTENT */

    .section{
      padding:28px 0 6px;
    }

    .section h1,
    .section h2{
      font-weight:800;
      letter-spacing:0.02em;
      margin-bottom:10px;
    }

    .section h1{
      font-size:26px;
    }

    .section h2{
      font-size:22px;
      margin-top:18px;
    }

    .section p{
      font-size:15px;
      color:var(--txt-muted);
      margin-bottom:10px;
    }

    .section ul{
      margin:8px 0 8px 20px;
      font-size:15px;
      color:var(--txt-muted);
    }

    .section li{margin-bottom:6px;}

    .pill{
      display:inline-block;
      padding:5px 12px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,0.2);
      background:rgba(10,10,25,0.82);
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:0.16em;
      color:var(--txt-muted);
      margin-bottom:10px;
    }

    .highlight{color:#ffe66d;font-weight:600;}

    .feature-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:14px;
      margin-top:10px;
    }

    .feature-card{
      background:rgba(7,9,24,0.9);
      border-radius:var(--radius-lg);
      padding:12px 12px 11px;
      border:1px solid rgba(255,255,255,0.06);
      font-size:13px;
      color:var(--txt-muted);
      position:relative;
      overflow:hidden;
    }

    .feature-card::before{
      content:"";
      position:absolute;
      inset:-40%;
      background:radial-gradient(circle at 0 0,rgba(255,255,255,0.12) 0,transparent 55%);
      opacity:.35;
      mix-blend-mode:screen;
    }

    .feature-title{
      font-size:13px;
      font-weight:600;
      margin-bottom:4px;
      color:#ffffff;
    }

    /* FAQ */

    .faq{
      padding:26px 0 14px;
    }

    .faq-list{
      display:flex;
      flex-direction:column;
      gap:10px;
    }

    .faq-item{
      background:rgba(7,9,24,0.94);
      border-radius:var(--radius-lg);
      padding:13px 14px;
      border:1px solid rgba(255,255,255,0.08);
    }

    .faq-q{
      font-weight:600;
      margin-bottom:4px;
      font-size:15px;
    }

    .faq-a{
      font-size:14px;
      color:var(--txt-muted);
    }

    /* Payments */

    .pay-row{
      border-top:1px solid rgba(255,255,255,0.08);
      border-bottom:1px solid rgba(255,255,255,0.08);
      padding:18px 0;
      margin-top:16px;
      display:flex;
      flex-wrap:wrap;
      gap:18px;
      justify-content:center;
      align-items:center;
      opacity:.92;
    }

    .pay-pill{
      padding:7px 13px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,0.22);
      font-size:12px;
      text-transform:uppercase;
      letter-spacing:0.14em;
      color:var(--txt-muted);
      background:rgba(4,6,18,0.95);
    }

    /* CTA bottom */

    .cta-bottom{
      margin-top:22px;
      padding:18px 18px 20px;
      border-radius:var(--radius-xl);
      background:linear-gradient(125deg,#ff3355,#ff7a1f,#ffd15c);
      color:#1b0b0b;
      display:flex;
      flex-wrap:wrap;
      justify-content:space-between;
      align-items:center;
      gap:14px;
      box-shadow:0 26px 70px rgba(0,0,0,0.96);
    }

    .cta-bottom-text{
      font-size:16px;
      font-weight:700;
    }

    .cta-bottom-sub{
      font-size:13px;
      opacity:.8;
    }

    .cta-bottom-actions{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      align-items:center;
    }

    .btn-dark-outline{
      padding:9px 20px;
      border-radius:999px;
      border:1px solid rgba(0,0,0,0.4);
      background:rgba(0,0,0,0.1);
      font-size:14px;
      font-weight:600;
      color:#1b0b0b;
      cursor:pointer;
      transition:background var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);
    }
    .btn-dark-outline:hover{
      background:rgba(0,0,0,0.18);
      transform:translateY(-1px);
      box-shadow:0 10px 24px rgba(0,0,0,0.55);
    }

    .footer{
      margin-top:22px;
      text-align:center;
      font-size:12px;
      color:var(--txt-muted);
      opacity:.8;
    }

    /* TABLET */

    @media (max-width:960px){
      .hero-grid{
        grid-template-columns:1fr;
      }
      .hero-side{
        order:-1;
      }
      .header-inner{
        padding-inline:14px;
      }
    }

    /* MOBILE */

    @media (max-width:640px){
      .page{
        padding-inline:12px;
      }

      /* шапка как в примере: логотип сверху, под ним две кнопки */
      .header-inner{
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:10px;
        padding:10px 12px 14px;
      }
       .logo{
    align-items:center;
    margin-bottom:15px;      /* отступ между логотипом и кнопками */
  }

  .logo-image{
    height:46px;             /* логотип крупнее на мобиле */
  }
      .logo-sub{display:none;}

      .header-chip{
        display:none; /* прячем онлайн на мобилке */
      }

      .header-right{
        width:100%;
        justify-content:center;
        gap:12px;
      }

      .header-right .btn-ghost,
      .header-right .btn-primary{
        flex:1;
        max-width:150px;
        min-width:120px;
        font-size:15px;
        padding:10px 0;
        border-radius:12px;
      }

      .btn-pill-glass{
        padding:0;
        border:none;
        background:none;
      }

      .hero{
        padding-top:22px;
      }
      .bonus-card{
        padding:20px 18px 16px;
      }
      .bonus-title{
        font-size:28px;
      }
      .bonus-percent{
        font-size:28px;
      }
      .feature-grid{
        grid-template-columns:1fr;
      }
      .cta-bottom{
        padding:16px 14px 18px;
      }
    }

.deposit-bonus{
  margin: 12px 0 14px;
  padding: 12px 12px 10px;
  border-radius: 16px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(10px);
}

.deposit-bonus__top{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
  flex-wrap:wrap;
}

.deposit-bonus__title{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color: var(--txt-muted);
  opacity:.9;
}

.deposit-bonus__headline{
  font-size:14px;
  font-weight:800;
  color:#ffe66d;
  text-shadow: 0 0 12px rgba(255,209,92,0.25);
}

.deposit-bonus__list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.deposit-bonus__row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border-radius:12px;
  background: rgba(10,10,25,0.55);
  border: 1px solid rgba(255,255,255,0.08);
}

.deposit-bonus__k{
  font-size:12px;
  font-weight:700;
  color:#fff;
  white-space:nowrap;
}

.deposit-bonus__v{
  font-size:12px;
  color: var(--txt-muted);
  text-align:right;
}

.deposit-bonus__note{
  margin-top:9px;
  font-size:11px;
  color: var(--txt-muted);
  opacity:.85;
}