:root{
      /* Pin-Up vibe: graphite + red + turquoise */
      --bg:#1f2023;
      --bgTop:#2a2b2f;
      --panel:#24252a;
      --panel2:#1f2024;

      --text:#f2f2f2;
      --muted:rgba(242,242,242,.78);

      --red:#d51f18;
      --red2:#ff3b30;
      --green:#2cc6b0;
      --green2:#23a894;

      --stroke:rgba(255,255,255,.10);
      --shadow:0 18px 55px rgba(0,0,0,.55);

      --r12:12px;
      --r16:16px;
      --r20:20px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color:var(--text);
      /* IMPORTANT: one solid background, no "section transitions" */
      background: radial-gradient(1200px 500px at 50% -80px, rgba(255,255,255,.08), transparent 60%),
                  linear-gradient(180deg, #2b2c30 0%, #1f2023 55%, #1b1c1f 100%);
      background-attachment: fixed;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none}

    /* Full-width top bar background (no side stripes on scroll) */
    .topbar{
      background: linear-gradient(180deg, #4a4b50 0%, #2f3033 55%, #27282b 100%);
      border-bottom:1px solid rgba(0,0,0,.35);
      box-shadow: 0 10px 28px rgba(0,0,0,.35);
      position:sticky; top:0; z-index:50;
    }
    .wrap{max-width:1180px;margin:0 auto;padding:0 18px}
    .topbarInner{
      display:flex; align-items:center; justify-content:space-between;
      gap:14px; padding:12px 0;
    }

    /* Logo */
    .brand{display:flex; align-items:center; gap:12px; min-width:240px}
    .logoMark{display:flex; flex-direction:column; line-height:1}
    .logoMark .pinup{
      font-weight:900; font-size:40px; letter-spacing:-1px;
      color:var(--red2); text-transform:lowercase;
    }
    .logoMark .casino{
      margin-top:4px;
      display:inline-block;
      background: linear-gradient(90deg, var(--green), var(--green2));
      color:#101112;
      font-weight:900;
      letter-spacing:6px;
      padding:3px 10px;
      border-radius:4px;
      width:fit-content;
      font-size:14px;
      text-transform:uppercase;
      box-shadow:0 12px 22px rgba(0,0,0,.25);
    }

    /* MENU — убрали лишние пункты, как просил */
    .menu{
      flex:1;
      display:flex;
      justify-content:center;
      align-items:center;
    }
    .menuGrid{
      display:grid;
      grid-template-columns: repeat(3, auto);
      gap:16px 34px;
      align-items:center;
      justify-items:center;
    }
    .menuGrid a{
      color: rgba(255,255,255,.72);
      font-weight:650;
      font-size:17px;
      padding:6px 10px;
      border-radius:10px;
      transition: .15s ease;
    }
    .menuGrid a:hover{
      color: rgba(255,255,255,.92);
      background: rgba(255,255,255,.06);
    }

    /* Auth area */
    .auth{
      display:flex; align-items:center; gap:10px;
      justify-content:flex-end;
      min-width:360px;
    }
    .auth input{
      width:150px; height:36px;
      border-radius:6px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.92);
      color:#222;
      padding:0 10px;
      outline:none;
      font-size:14px;
    }
    .auth input::placeholder{color:#777}
    .q{
      width:26px;height:26px;border-radius:50%;
      display:grid;place-items:center;
      background: rgba(255,255,255,.14);
      border:1px solid rgba(255,255,255,.18);
      color: rgba(255,255,255,.85);
      font-weight:900;
      font-size:14px;
    }
    .btn{
      height:36px; padding:0 14px;
      border-radius:6px;
      border:1px solid rgba(0,0,0,.35);
      font-weight:900;
      display:inline-flex; align-items:center; justify-content:center;
      box-shadow:0 10px 18px rgba(0,0,0,.22);
      white-space:nowrap;
    }
    .btnLogin{background: linear-gradient(180deg, var(--green), var(--green2)); color:#0f0f10;}
    .btnReg{background: linear-gradient(180deg, var(--red2), var(--red)); color:#fff; border-color: rgba(0,0,0,.45);}

    /* Main panels */
    main{padding:22px 0 24px;}
    .panel{
      background: rgba(34,35,38,.92);
      border:1px solid rgba(255,255,255,.07);
      border-radius: var(--r20);
      box-shadow: var(--shadow);
      padding:18px;
    }
    .section{margin-top:16px}

    .tag{
      display:inline-flex; align-items:center; gap:10px;
      background: rgba(0,0,0,.22);
      border:1px solid rgba(255,255,255,.10);
      padding:8px 12px;
      border-radius:999px;
      color: rgba(255,255,255,.78);
      font-size:12px;
      text-transform:uppercase;
      letter-spacing:.8px;
    }
    .tag i{
      width:10px;height:10px;border-radius:50%;
      background: var(--red2);
      box-shadow: 0 0 18px rgba(255,59,48,.45);
      display:inline-block;
    }

    h1{margin:14px 0 10px; font-size:34px; letter-spacing:-.4px}
    h2{margin:0 0 10px; font-size:26px; letter-spacing:-.25px}
    h3{margin:18px 0 8px; font-size:18px; letter-spacing:-.15px}
    h4{margin:14px 0 6px; font-size:15px}

    .p{margin:0 0 10px; color:var(--muted); line-height:1.7; font-size:15px}

    .cards3{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:12px;
      margin-top:12px;
    }
    .card{
      background: linear-gradient(180deg, rgba(55,56,60,.55), rgba(30,31,34,.55));
      border:1px solid rgba(255,255,255,.08);
      border-radius: var(--r16);
      padding:14px;
      box-shadow: 0 12px 24px rgba(0,0,0,.25);
    }
    .cardTitle{
      margin:0 0 6px;
      font-weight:900;
      font-size:14px;
      display:flex;
      align-items:center;
      gap:10px;
    }
    .ico{
      width:34px; height:34px;
      border-radius: 10px;
      display:grid; place-items:center;
      background: rgba(213,31,24,.16);
      border:1px solid rgba(213,31,24,.25);
    }
    .ico.green{
      background: rgba(44,198,176,.16);
      border-color: rgba(44,198,176,.25);
    }
    .ico svg{width:18px;height:18px;color:rgba(255,255,255,.92)}

    .ctaRow{
      margin-top:14px;
      display:flex;
      align-items:center;
      gap:12px;
      flex-wrap:wrap;
    }
    .btnBig{
      height:46px;
      padding:0 18px;
      border-radius:10px;
      font-size:14px;
      font-weight:900;
      border:1px solid rgba(0,0,0,.45);
      box-shadow:0 16px 24px rgba(0,0,0,.25);
      display:inline-flex; align-items:center; justify-content:center;
    }
    .btnPrimaryBig{background: linear-gradient(180deg, var(--red2), var(--red)); color:#fff;}

    /* FAQ */
    .faq{display:flex; flex-direction:column; gap:10px; margin-top:10px;}
    details{
      border-radius: var(--r16);
      border:1px solid rgba(255,255,255,.08);
      background: linear-gradient(180deg, rgba(55,56,60,.45), rgba(30,31,34,.55));
      box-shadow: 0 12px 20px rgba(0,0,0,.25);
      overflow:hidden;
    }
    summary{
      cursor:pointer;
      list-style:none;
      padding:14px 14px;
      font-weight:900;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }
    summary::-webkit-details-marker{display:none}
    .chev{
      width:30px;height:30px;border-radius:10px;
      background: rgba(0,0,0,.18);
      border:1px solid rgba(255,255,255,.10);
      display:grid; place-items:center;
      transition: transform .18s ease;
      color: rgba(255,255,255,.85);
    }
    details[open] .chev{transform: rotate(180deg);}
    .faqBody{padding:0 14px 14px; color:rgba(255,255,255,.76); line-height:1.7; font-size:14.5px;}

    /* CTA block like Pinco gradient bar */
    .bigCTA{
      margin-top:16px;
      border-radius: 26px;
      padding:22px 22px;
      background: linear-gradient(90deg, #ff3b30 0%, #ff7b1f 55%, #ffd34a 100%);
      box-shadow: 0 20px 55px rgba(0,0,0,.35);
      color:#111;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      overflow:hidden;
      position:relative;
    }
    .bigCTA:after{
      content:"";
      position:absolute;
      inset:-60px -80px auto auto;
      width:240px;height:240px;
      background: radial-gradient(circle, rgba(255,255,255,.35), transparent 60%);
      transform: rotate(12deg);
      pointer-events:none;
    }
    .bigCTAText{
      max-width:760px;
      position:relative;
      z-index:1;
    }
    .bigCTATitle{
      margin:0 0 6px;
      font-weight:1000;
      font-size:18px;
      letter-spacing:-.2px;
    }
    .bigCTADesc{
      margin:0;
      font-size:14px;
      opacity:.92;
      line-height:1.5;
    }
    .bigCTAButton{
      position:relative;
      z-index:1;
      height:44px;
      padding:0 18px;
      border-radius: 999px;
      border:1px solid rgba(0,0,0,.35);
      background: rgba(255,255,255,.35);
      color:#111;
      font-weight:1000;
      box-shadow: 0 14px 22px rgba(0,0,0,.22);
      display:inline-flex; align-items:center; justify-content:center;
      white-space:nowrap;
      backdrop-filter: blur(6px);
    }
    .bigCTAButton:hover{background: rgba(255,255,255,.50);}

    /* Footer without policy/contacts links (as requested) */
    footer{
      margin-top:18px;
      background: #141518;
      border-top:1px solid rgba(255,255,255,.08);
      padding:16px 0;
      color: rgba(255,255,255,.65);
      font-size:13px;
    }
    .footRow{display:flex; align-items:center; justify-content:center; text-align:center; padding:2px 0;}

    /* Responsive */
    @media (max-width: 1100px){
      .auth{min-width:auto}
      .menuGrid{grid-template-columns: repeat(2, auto); gap:12px 22px;}
    }
    @media (max-width: 900px){
      .auth input{display:none}
      .brand{min-width:auto}
      .cards3{grid-template-columns: 1fr}
      h1{font-size:28px}
      .bigCTA{flex-direction:column; align-items:flex-start}
    }
    @media (max-width: 520px){
      .menu{display:none}
    }
  
    /* CLEAN HEADER: no center menu, only logo + buttons */
    .menu{display:none !important;}
    .auth input, .auth .q{display:none !important;}
    .auth{min-width:auto !important;}

  
    /* Online pill like Pinco */
    .onlinePill{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:8px 14px;
      border-radius:999px;
      background: rgba(0,0,0,.22);
      border:1px solid rgba(255,255,255,.14);
      color: rgba(255,255,255,.85);
      font-weight:800;
      font-size:14px;
      box-shadow: 0 14px 22px rgba(0,0,0,.22);
      white-space:nowrap;
    }
    .onlinePill .dot{
      width:10px;height:10px;border-radius:50%;
      background: #21f0a6;
      box-shadow: 0 0 18px rgba(33,240,166,.55);
      display:inline-block;
    }

    .ctaNote{
      color: rgba(255,255,255,.62);
      font-size:13px;
      line-height:1.35;
    }

    /* keep header compact on small screens */
    @media (max-width: 900px){
      .onlinePill{display:none;}
    }

  

/* logo svg */
.logo-img{height:42px;width:auto;display:block}

/* FAQ: make questions H4, big tap targets, smooth reveal */
.faq details{border-radius:14px;overflow:hidden}
.faq summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  padding:16px 18px;
  list-style:none;
  -webkit-tap-highlight-color:transparent;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary h4{
  margin:0;
  font-size:16px;
  line-height:1.25;
  font-weight:700;
}
.faq .chev{
  display:inline-flex;
  width:28px;height:28px;
  align-items:center;justify-content:center;
  border-radius:10px;
  transition:transform .2s ease;
}
.faq details[open] .chev{transform:rotate(180deg)}

/* smooth open/close */
.faq .faqBody{
  padding:0 18px;
  overflow:hidden;
  max-height:0;
  opacity:.0;
  transition:max-height .25s ease, opacity .2s ease, padding .25s ease;
}
.faq details[open] .faqBody{
  padding:0 18px 16px;
  max-height:420px;
  opacity:1;
}

/* mobile */
@media (max-width:700px){
  .logo-img{height:38px}
  .faq summary{padding:14px 14px}
  .faq summary h4{font-size:15px}
  .faq .faqBody{padding:0 14px}
  .faq details[open] .faqBody{padding:0 14px 14px}
}