/* =========================
   Neon Game Show Aesthetic
   ========================= */
:root {
  --bg: #0a0b10;
  --card: #11131b;
  --muted: #9aa4b2;
  --txt: #f6f7fb;
  --accent: #ff2bd6;
  --accent-2: #00e5ff;
  --accent-3: #ffc600;
  --glass: rgba(255,255,255,0.06);
}

* { box-sizing: border-box; scroll-behavior: smooth; }
html, body { height: 100%; }
body.ct9x-body {
  margin: 0;
  background-color: #250F26;
  color: var(--txt);
  font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  line-height: 1.6;
}

/* Buttons */
.s7p-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 20px; border-radius: 14px; text-decoration: none;
  font-weight: 800; letter-spacing: .2px; transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.s7p-btn--primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #0b0c12; box-shadow: 0 10px 30px rgba(255,43,214,.25);
}
.s7p-btn--primary:hover { transform: translateY(-2px); }
.s7p-btn--ghost {
  background: transparent; color: var(--txt); border-color: rgba(255,255,255,.15);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.s7p-btn--glow {
  background: linear-gradient(135deg, var(--accent-2), var(--accent-3));
  color: #0b0c12; box-shadow: 0 10px 35px rgba(0,229,255,.25);
}

/* HERO */
.q1r-hero { position: relative; min-height: 86vh; display: grid; place-items: center; overflow: clip; }

.heroBG{
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: .3;
    filter: blur(5px);
    -webkit-filter: blur(5px);
}
.q1r-hero__bg { position: absolute; inset: 0; }
.q1r-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.45) contrast(1.08) saturate(1.1); }
.q1r-hero__fx { position: absolute; inset: 0; background:
  radial-gradient(800px 500px at 20% 30%, rgba(255,198,0,0.18), transparent 55%),
  radial-gradient(900px 600px at 80% 60%, rgba(0,229,255,0.20), transparent 60%);
  mix-blend-mode: screen; pointer-events: none;
}
.q1r-hero__spark { position: absolute; inset: 0; pointer-events:none; }
.q1r-hero__container {
  position: relative; z-index: 2; width: min(1160px, 92vw);
  text-align: center; padding: 96px 0 48px;
}
.q1r-hero__title {
  font-family: Syne, Manrope, sans-serif; font-weight: 800; margin: 0 0 14px;
  font-size: clamp(42px, 7vw, 94px); line-height: .9; letter-spacing: .5px;
  text-shadow: 0 6px 40px rgba(255,43,214,.25);
}
.q1r-hero__title span {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.q1r-hero__subtitle {
  margin: 10px auto 28px; color: var(--muted); font-size: clamp(16px, 2.2vw, 20px); max-width: 780px;
}
.q1r-hero__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.q1r-hero__chips { position: relative; margin-top: 40px; display: flex; gap: 16px; justify-content: center; }
.q1r-chip { width: 56px; height: 56px; filter: drop-shadow(0 10px 20px rgba(0,0,0,.45)) brightness(1.1) saturate(1.1); }
.q1r-chip--mid { width: 68px; height: 68px; transform: translateY(-6px); }
.q1r-chip--lg  { width: 78px; height: 78px; transform: translateY(-12px); }

/* ABOUT */
.v5n-about { padding: 80px 0; }
.v5n-wrap { width: min(1160px, 92vw); margin: 0 auto; display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: center; }
.v5n-title { font-family: Syne, Manrope, sans-serif; font-weight: 800; font-size: clamp(28px, 3.4vw, 44px); margin: 0 0 10px; }
.v5n-text { color: var(--muted); margin: 0 0 18px; }
.v5n-highs { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; list-style: none; }
.v5n-pill { background: var(--glass); border: 1px solid rgba(255,255,255,.08); padding: 10px 14px; border-radius: 999px; font-weight: 700; font-size: 14px; }
.v5n-media { position: relative; border-radius: 20px; overflow: hidden; background: #0d0f16; }
.v5n-img { display: block; width: 100%; height: 100%; object-fit: cover; min-height: 320px; filter: brightness(.9) contrast(1.05); }
.v5n-glow { position: absolute; inset: 0; background: radial-gradient(400px 300px at 70% 30%, rgba(255,43,214,.25), transparent 60%), radial-gradient(400px 300px at 30% 80%, rgba(0,229,255,.25), transparent 60%); mix-blend-mode: screen; pointer-events: none; }

/* HOW */
.k2b-how { padding: 80px 0; }
.k2b-head { width: min(1160px, 92vw); margin: 0 auto 24px; text-align: center; }
.k2b-title { font-family: Syne, Manrope, sans-serif; font-weight: 800; font-size: clamp(26px, 3vw, 40px); margin: 0 0 6px; }
.k2b-sub { color: var(--muted); margin: 0; }
.k2b-grid { width: min(1160px, 92vw); margin: 26px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.t9c-card {
  display: flex; flex-direction: column; gap: 10px; padding: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.08); border-radius: 18px; min-height: 180px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.t9c-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(0,0,0,.35); border-color: rgba(255,255,255,.14); }
.t9c-ico img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 6px 16px rgba(0,0,0,.45)); }
.t9c-title { margin: 4px 0 0; font-size: 18px; font-weight: 800; }
.t9c-text { margin: 6px 0 0; color: var(--muted); }

/* BONUS */
.m8x-bonus { padding: 80px 0; }
.m8x-head { width: min(1160px, 92vw); margin: 0 auto 24px; text-align: center; }
.m8x-title { font-family: Syne, Manrope, sans-serif; font-weight: 800; font-size: clamp(26px, 3vw, 40px); margin: 0 0 6px; }
.m8x-sub { color: var(--muted); margin: 0; }
.m8x-grid { width: min(1160px, 92vw); margin: 24px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.m8x-card {
  position: relative; overflow: hidden; border-radius: 18px;
  background: var(--card); border: 1px solid rgba(255,255,255,.08);
  display: flex; flex-direction: column; min-height: 280px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.m8x-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(0,0,0,.4); border-color: rgba(255,255,255,.16); }
.m8x-img { width: 100%; height: 180px; object-fit: cover; filter: brightness(.92) contrast(1.06) saturate(1.05); }
.m8x-body { padding: 18px; display: grid; gap: 6px; }
.m8x-h3 { margin: 0; font-size: 18px; font-weight: 800; }
.m8x-p { margin: 0; color: var(--muted); }

button.s7p-btn{
    border: none;
}


/* Simulator */
.z0c-sim { padding: 80px 0; }
.z0c-wrap { width: min(1160px, 92vw); margin: 0 auto; }
.z0c-title { font-family: Syne, Manrope, sans-serif; font-weight: 800; font-size: clamp(26px, 3vw, 40px); margin: 0 0 6px; }
.z0c-sub { color: var(--muted); margin: 0 0 18px; }
.z0c-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; background: var(--glass); border: 1px solid rgba(255,255,255,.08); padding: 16px; border-radius: 14px; }
.z0c-row { display: grid; gap: 6px; }
.z0c-label { font-weight: 700; font-size: 14px; color: #e9ecf3; }
.z0c-input, .z0c-select {
  width: 100%; padding: 12px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(12,14,20,.8); color: var(--txt); outline: none;
}
.z0c-input:focus, .z0c-select:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(0,229,255,.15); }
.z0c-result { margin: 14px 2px 0; font-weight: 800; font-size: 18px; }
.z0c-note { color: var(--muted); font-size: 14px; }


/* tilt hint */
.v5n-tilt { will-change: transform; transform-style: preserve-3d; }

/* reveal animation base */
.r-anim { opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .6s ease, transform .6s ease; }
.r-anim.r-in { opacity: 1; transform: translateY(0) scale(1); }

/* RESPONSIVE */
@media (max-width: 1024px) {
  .v5n-wrap { grid-template-columns: 1fr; }
  .m8x-grid { grid-template-columns: repeat(2, 1fr); }
  .k2b-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .k2b-grid, .m8x-grid { grid-template-columns: 1fr; }
  .z0c-form { grid-template-columns: 1fr; }
  .q1r-hero__subtitle { padding: 0 6px; }
}

/* =============  EXTRA SECTIONS  ============= */

/* Stats */
.z6s-stats { padding: 80px 0; }
.z6s-wrap { width: min(1160px, 92vw); margin: 0 auto; }
.z6s-head { text-align: center; margin-bottom: 32px; }
.z6s-title { font-family: Syne; font-weight: 800; font-size: clamp(26px,3vw,40px); margin: 0 0 8px; }
.z6s-sub { color: var(--muted); margin: 0; }
.z6s-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.z6s-card { background: var(--glass); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; text-align: center; padding: 22px; transition: .25s; }
.z6s-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.15); }
.z6s-h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--muted); }
.z6s-num { font-family: Syne; font-weight: 800; font-size: 32px; margin: 6px 0; background: linear-gradient(90deg,var(--accent),var(--accent-2)); -webkit-background-clip: text; color: transparent; }
.z6s-desc { color: var(--muted); font-size: 13px; }

/* Live Studio */
.l8x-live { padding: 80px 0; }
.l8x-wrap { width: min(1160px,92vw); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.l8x-img { width: 100%; height: auto; border-radius: 18px; filter: brightness(.95) contrast(1.1); }

.l8x-copy { display: grid; gap: 14px; }
.l8x-title { font-family: Syne; font-weight:800; font-size: clamp(26px,3vw,40px); margin:0; }
.l8x-text { color: var(--muted); }
.l8x-points { list-style:none; padding:0; margin:0; display:grid; gap:6px; color:var(--txt); }

/* Wins */
.w9t-wins { padding: 80px 0;  }
.w9t-wrap { width: min(1160px,92vw); margin:0 auto; }
.w9t-head { text-align:center; margin-bottom:32px; }
.w9t-title { font-family:Syne; font-weight:800; font-size:clamp(26px,3vw,40px); margin:0 0 8px; }
.w9t-sub { color:var(--muted); }
.w9t-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.w9t-card { background:var(--glass); border:1px solid rgba(255,255,255,.08); border-radius:18px; overflow:hidden; transition:.3s; }
.w9t-card:hover { transform:translateY(-6px); border-color:rgba(255,255,255,.14); box-shadow:0 20px 50px rgba(0,0,0,.4); }
.w9t-img { width:100%; height:200px; object-fit:cover; }
.w9t-body { padding:18px; display:grid; gap:6px; }
.w9t-h3 { margin:0; font-size:18px; font-weight:800; }
.w9t-p { margin:0; color:var(--muted); }

/* Mobile */
.m4o-mobile { padding:80px 0; }
.m4o-wrap { width:min(1160px,92vw); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center; }
.m4o-title { font-family:Syne; font-weight:800; font-size:clamp(26px,3vw,40px); margin:0 0 8px; }
.m4o-text { color:var(--muted); margin:0 0 12px; }
.m4o-bullets { list-style:none; padding:0; margin:0 0 16px; display:grid; gap:6px; }
.m4o-img { width:100%; height:auto; border-radius:20px; filter:brightness(.95) contrast(1.1); }
.m4o-glow { position:absolute; inset:0; background:radial-gradient(600px 400px at 70% 30%, rgba(255,198,0,.25), transparent 60%), radial-gradient(600px 400px at 30% 70%, rgba(0,229,255,.25), transparent 60%); mix-blend-mode:screen; pointer-events:none; }

@media (max-width: 900px) {
  .z6s-grid { grid-template-columns: repeat(2,1fr); }
  .l8x-wrap, .m4o-wrap { grid-template-columns: 1fr; }
  .w9t-grid { grid-template-columns: 1fr; }
}


/*   НАСТРОЙКА SCROLL-BAR   */
::-webkit-scrollbar {
    width: 0.6em;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: #F631D7;
}


::-webkit-scrollbar-thumb:active {
    background-color: #F631D7;
}




.header{
    position: absolute;
    left: 0; right: 0;
    z-index: 1000;
    top: 0;

}
.headerWrapper{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.nav{

}
.ham{
    display: none;
}

.nav ul{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    padding-left: 0;
    margin: 0;
}

.nav li{
    list-style: none;
}

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

.stopScroll{
    overflow: hidden;
}
.logo{
    position: relative;
    z-index: 1000;
    font-weight: 900;
    text-decoration: none;
    font-size: 20px;
    color: #fff;
    
}

.logo img{
    width: 140px;
}
@media screen and (max-width: 800px) {
    .nav{
        position: fixed;
        inset: 0;
        background-color: #111;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
        z-index: 999;
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -o-transform: translateX(100%);
        transition: .3s all cubic-bezier(0.23, 1, 0.320, 1);
        -webkit-transition: .3s all cubic-bezier(0.23, 1, 0.320, 1);
        -moz-transition: .3s all cubic-bezier(0.23, 1, 0.320, 1);
        -ms-transition: .3s all cubic-bezier(0.23, 1, 0.320, 1);
        -o-transition: .3s all cubic-bezier(0.23, 1, 0.320, 1);
}
    .nav.active{
        transform: translateX(0);
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
}

    .nav ul{
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .ham {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: transform 400ms;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
        display: flex;
        z-index: 1000;
}
.hamRotate.active {
  transform: rotate(45deg);
}
.hamRotate180.active {
  transform: rotate(180deg);
}
.line {
  fill:none;
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
  stroke:#fff;
  stroke-width:5.5;
  stroke-linecap:round;
}
.ham7 .top {
  stroke-dasharray: 40 82;
}
.ham7 .middle {
  stroke-dasharray: 40 111;
}
.ham7 .bottom {
  stroke-dasharray: 40 161;
}
.ham7.active .top {
  stroke-dasharray: 17 82;
  stroke-dashoffset: -62px;
}
.ham7.active .middle {
  stroke-dashoffset: 23px;
}
.ham7.active .bottom {
  stroke-dashoffset: -83px;
}
.ham8 .top {
  stroke-dasharray: 40 160;
}
}


.container{
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 20px;
}
.footer-inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    p{
        margin: 0;
        text-align: center;
        max-width: 900px;
    }
}

.footer{
    padding: 20px 0;
    border-top: 1px solid #EB3ADA;
}

.intoLinks {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        text-align: center;
        span {
          width: 8px;
          height: 8px;
          background-color: #fff;
          border-radius: 50%;
        }
        a {
          transition: 0.3s all linear;
          transform-origin: left;
          text-decoration: none;
          color: #fff;
        }
        a:hover {
          text-decoration: underline;
        }
      }
      @media screen and (max-width: 750px) {
        .intoLinks {
          flex-direction: column;
          span {
            display: none;
          }
        }
      }
.socialLinks{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    i{
        color: #fff;
        font-size: 24px;
    }
}


.copy{
    text-align: center;
    opacity: .3;
}

.expertReview a {
        color: #EB3ADA;
      }
      .expertReview p {
        border-left: 5px solid #EB3ADA;
        padding-left: 20px;
        

        span {
          font-style: italic;
          opacity: 0.6;
          color: var(--muted);
        }
      }


@media screen and (max-width: 800px) {
  .intosWrap{
    padding: 0 40px;
    padding-top: 80px;
  }
  .q1r-hero{
    min-height: 40vh;
  }
  .q1r-hero__container{
    padding: 0 10px;
    padding-top: 100px;
    width: fit-content;
    display: flex;
    margin: 0 auto;
    flex-direction: column;
    align-items: center;
    
  }

  .headerWrapper{
    padding-left: 0;
    padding-right: 0;
  }

  .v5n-about p{
    text-align: center;
  }

  .v5n-highs{
    justify-content: center;
  }
  .z0c-note, .l8x-text{
    text-align: center;
  }
  .l8x-points li{
    text-align: center;
  }
  .m4o-copy{
    display: flex;
    flex-direction: column;
    align-items: center;
    p{
      text-align: center;
    }
  }
  .m4o-bullets li{
    text-align: center;

  }

  .intosWrap h1{
    text-align: center;
  }
  .intosWrap p {
    text-align: center;
  }
 

  


  
}