/* =========================================================
   Uncrossable Rush — global stylesheet
   Theme: midnight "rush lane" — dark navy base, cyan + violet
   neon accents. No gold/amber casino cliché on purpose.
   ========================================================= */

:root{
  --bg-0:#080B14;
  --bg-1:#0E1424;
  --bg-2:#141B31;
  --surface:#161D33;
  --surface-2:#1C2440;
  --line: rgba(255,255,255,0.08);
  --line-strong: rgba(255,255,255,0.16);

  --text-0:#F3F5FA;
  --text-1:#C4CBDE;
  --text-2:#8992AD;

  --cyan:#37F2D8;
  --cyan-dim:#1FB8A6;
  --violet:#8E6BFF;
  --violet-dim:#6247C9;
  --magenta:#FF5FA8;

  --grad-brand: linear-gradient(120deg, var(--violet) 0%, var(--cyan) 100%);
  --grad-btn: linear-gradient(120deg, #6247C9 0%, #37F2D8 100%);
  --grad-hero: radial-gradient(60% 60% at 80% 0%, rgba(142,107,255,0.28) 0%, rgba(142,107,255,0) 60%),
               radial-gradient(50% 50% at 10% 10%, rgba(55,242,216,0.16) 0%, rgba(55,242,216,0) 60%);

  --radius-s:8px;
  --radius-m:14px;
  --radius-l:22px;

  --shadow-1: 0 10px 30px rgba(0,0,0,0.35);
  --shadow-glow: 0 0 0 1px rgba(55,242,216,0.25), 0 0 24px rgba(55,242,216,0.18);

  --font-display: "Rajdhani", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --header-h: 76px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  margin:0;
  min-width:0;
  background:
    var(--grad-hero),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 2px, transparent 2px, transparent 42px),
    var(--bg-0);
  color:var(--text-1);
  font-family:var(--font-body);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}

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

a{ color:var(--cyan); text-decoration:none; }
a:hover{ color:var(--text-0); }

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:4px;
}

::selection{ background:var(--violet); color:var(--bg-0); }

.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  height:var(--header-h);
  display:flex;
  align-items:center;
  background:rgba(8,11,20,0.78);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
}

.header-inner{
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:0 20px;
  display:flex;
  align-items:center;
  gap:20px;
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:22px;
  letter-spacing:0.02em;
  color:var(--text-0);
}
.logo img{
  height:36px;
  width:auto;
}
.logo span{
  background:var(--grad-brand);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.main-nav{
  display:flex;
  align-items:center;
  gap:4px;
  margin-left:8px;
}
.main-nav a{
  font-family:var(--font-display);
  font-weight:600;
  font-size:15px;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:var(--text-1);
  padding:8px 12px;
  border-radius:var(--radius-s);
  transition:color .15s ease, background-color .15s ease;
}
.main-nav a:hover,
.main-nav a[aria-current="page"]{
  color:var(--text-0);
  background:rgba(255,255,255,0.06);
}

.header-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
}

/* language switcher */
.lang-switch{
  position:relative;
}
.lang-switch-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--surface);
  border:1px solid var(--line);
  color:var(--text-0);
  font-family:var(--font-body);
  font-size:14px;
  font-weight:600;
  padding:8px 12px;
  border-radius:999px;
  cursor:pointer;
  transition:border-color .15s ease, background-color .15s ease;
}
.lang-switch-toggle:hover{
  border-color:var(--line-strong);
  background:var(--surface-2);
}
.lang-switch-toggle .flag{ font-size:16px; line-height:1; }
.lang-switch-toggle .chev{
  width:9px; height:9px;
  border-right:2px solid var(--text-2);
  border-bottom:2px solid var(--text-2);
  transform:rotate(45deg);
  margin-top:-3px;
  transition:transform .15s ease;
}
.lang-switch[data-open="true"] .chev{ transform:rotate(-135deg); margin-top:3px; }

.lang-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:210px;
  max-height:320px;
  overflow-y:auto;
  background:var(--bg-1);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-m);
  box-shadow:var(--shadow-1);
  padding:6px;
  list-style:none;
  margin:0;
  display:none;
  z-index:120;
}
.lang-switch[data-open="true"] .lang-menu{ display:block; }

.lang-menu li{ margin:0; }
.lang-menu a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border-radius:var(--radius-s);
  color:var(--text-1);
  font-size:14px;
  font-weight:500;
}
.lang-menu a:hover{
  background:rgba(255,255,255,0.06);
  color:var(--text-0);
}
.lang-menu a[aria-current="true"]{
  color:var(--cyan);
  background:rgba(55,242,216,0.08);
}
.lang-menu .flag{ font-size:17px; }

/* CTA buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:14px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  padding:11px 20px;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }

.btn-demo{
  background:transparent;
  border-color:var(--line-strong);
  color:var(--text-0);
}
.btn-demo:hover{
  border-color:var(--cyan);
  color:var(--cyan);
}

.btn-primary{
  background:var(--grad-btn);
  color:#06121A;
  box-shadow:var(--shadow-glow);
}
.btn-primary:hover{
  box-shadow:0 0 0 1px rgba(55,242,216,0.4), 0 0 32px rgba(55,242,216,0.32);
  color:#06121A;
}

.header-actions .btn{ padding:11px 18px; }

/* burger for small screens */
.nav-toggle{
  display:none;
  width:40px;height:40px;
  border-radius:var(--radius-s);
  border:1px solid var(--line);
  background:var(--surface);
  cursor:pointer;
  flex-shrink:0;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after{
  content:"";
  display:block;
  width:18px;height:2px;
  background:var(--text-0);
  margin:0 auto;
  position:relative;
  transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle span::before{ top:-6px; }
.nav-toggle span::after{ top:4px; }

/* =========================================================
   MAIN — typography, images, tables, button, author block
   ========================================================= */
main{
  display:block;
  width:100%;
  max-width:860px;
  margin:0 auto;
  padding:48px 20px 80px;
}

main h1{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(32px, 5vw, 48px);
  line-height:1.12;
  letter-spacing:0.01em;
  color:var(--text-0);
  margin:0 0 18px;
  background:var(--grad-brand);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

main h2{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(24px, 3.4vw, 30px);
  line-height:1.25;
  color:var(--text-0);
  margin:44px 0 14px;
  padding-top:6px;
  border-top:1px solid var(--line);
}

main h3{
  font-family:var(--font-display);
  font-weight:600;
  font-size:20px;
  color:var(--text-0);
  margin:30px 0 12px;
}

main h4{
  font-family:var(--font-body);
  font-weight:700;
  font-size:16px;
  color:var(--text-0);
  margin:22px 0 10px;
  text-transform:uppercase;
  letter-spacing:0.04em;
}

main p{
  font-size:16px;
  color:var(--text-1);
  margin:0 0 18px;
}

main p.lead{
  font-size:19px;
  color:var(--text-0);
}

main strong{ color:var(--text-0); }
main em{ color:var(--text-0); }

main a{
  color:var(--cyan);
  text-decoration:underline;
  text-decoration-color:rgba(55,242,216,0.35);
  text-underline-offset:3px;
}
main a:hover{ text-decoration-color:var(--cyan); }

main ul,
main ol{
  margin:0 0 20px;
  padding-left:22px;
  color:var(--text-1);
}
main li{ margin-bottom:8px; }
main ul{ list-style:none; padding-left:4px; }
main ul li{
  position:relative;
  padding-left:24px;
}
main ul li::before{
  content:"";
  position:absolute;
  left:2px;
  top:9px;
  width:8px;height:8px;
  border-radius:2px;
  background:var(--grad-brand);
  transform:rotate(45deg);
}
main ol{ list-style:none; counter-reset:rushlist; padding-left:4px; }
main ol li{
  counter-increment:rushlist;
  padding-left:30px;
  position:relative;
}
main ol li::before{
  content:counter(rushlist);
  position:absolute;
  left:0; top:-1px;
  width:22px;height:22px;
  border-radius:6px;
  background:var(--surface-2);
  border:1px solid var(--line-strong);
  color:var(--cyan);
  font-family:var(--font-display);
  font-weight:700;
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content:center;
}

main blockquote{
  margin:24px 0;
  padding:18px 22px;
  border-left:3px solid var(--violet);
  background:rgba(142,107,255,0.08);
  border-radius:0 var(--radius-m) var(--radius-m) 0;
  color:var(--text-0);
  font-style:italic;
}

main hr{
  border:none;
  height:1px;
  margin:40px 0;
  background:linear-gradient(90deg, transparent, var(--line-strong), transparent);
}

/* inline image-between-paragraphs template */
main figure.content-image{
  margin:32px 0;
}
main figure.content-image img{
  width:100%;
  border-radius:var(--radius-m);
  border:1px solid var(--line);
  box-shadow:var(--shadow-1);
}
main figure.content-image figcaption{
  margin-top:10px;
  font-size:13px;
  color:var(--text-2);
  text-align:center;
}

/* table */
main .table-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:24px 0;
  border-radius:var(--radius-m);
  border:1px solid var(--line);
}
main table{
  width:100%;
  min-width:520px;
  border-collapse:collapse;
  font-size:14px;
  background:var(--surface);
}
main table caption{
  text-align:left;
  padding:12px 16px;
  color:var(--text-0);
  font-weight:600;
  background:var(--surface-2);
}
main thead th{
  text-align:left;
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:0.03em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--cyan);
  background:var(--surface-2);
  padding:12px 16px;
  border-bottom:1px solid var(--line-strong);
  white-space:nowrap;
}
main tbody td{
  padding:12px 16px;
  border-bottom:1px solid var(--line);
  color:var(--text-1);
  white-space:nowrap;
}
main tbody tr:last-child td{ border-bottom:none; }
main tbody tr:hover{ background:rgba(255,255,255,0.03); }

/* centered CTA button template */
.cta-block{
  display:flex;
  justify-content:center;
  margin:44px 0;
}
.cta-block .btn{
  padding:16px 40px;
  font-size:15px;
}

/* author / opinion block */
.author-block{
  display:flex;
  gap:16px;
  align-items:flex-start;
  margin:48px 0 8px;
  padding:22px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-l);
}
.author-block .author-avatar{
  width:64px;
  height:64px;
  border-radius:50%;
  flex-shrink:0;
  object-fit:cover;
  border:2px solid var(--violet);
  background:var(--surface-2);
}
.author-block .author-body{ min-width:0; }
.author-block .author-label{
  font-family:var(--font-display);
  font-size:12px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--violet);
  margin:0 0 4px;
}
.author-block .author-name{
  font-size:16px;
  font-weight:700;
  color:var(--text-0);
  margin:0 0 8px;
}
.author-block .author-opinion{
  font-size:15px;
  color:var(--text-1);
  margin:0;
}

/* generic content section wrapper for placeholder blocks on
   bonuses/reviews/app pages */
.placeholder-box{
  border:1px dashed var(--line-strong);
  border-radius:var(--radius-m);
  padding:24px;
  color:var(--text-2);
  font-size:14px;
  margin:20px 0;
}

/* =========================================================
   404 PAGE
   ========================================================= */
.error-page{
  min-height:calc(100vh - var(--header-h));
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:60px 20px;
}
.error-page .error-code{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(72px, 16vw, 140px);
  line-height:1;
  background:var(--grad-brand);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin:0;
}
.error-page h1{
  font-family:var(--font-display);
  font-size:clamp(22px, 3vw, 28px);
  color:var(--text-0);
  margin:12px 0 10px;
}
.error-page p{
  color:var(--text-2);
  max-width:440px;
  margin:0 auto 26px;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  border-top:1px solid var(--line);
  background:var(--bg-1);
  padding:40px 20px 32px;
}
.footer-inner{
  max-width:1280px;
  margin:0 auto;
}
.footer-disclaimer{
  font-size:13px;
  line-height:1.7;
  color:var(--text-2);
  max-width:980px;
  margin:0 0 26px;
}

.footer-rg{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 18px;
  padding:18px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin-bottom:20px;
}
.footer-rg-label{
  font-size:12px;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--text-2);
  margin-right:4px;
}
.footer-rg a{
  font-size:13px;
  font-weight:600;
  color:var(--text-1);
  padding:6px 12px;
  border:1px solid var(--line-strong);
  border-radius:999px;
}
.footer-rg a:hover{
  color:var(--cyan);
  border-color:var(--cyan);
}

.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  color:var(--text-2);
}

/* =========================================================
   BACK TO TOP
   ========================================================= */
.back-to-top{
  position:fixed;
  right:20px;
  bottom:24px;
  width:46px;
  height:46px;
  border-radius:50%;
  background:var(--grad-btn);
  color:#06121A;
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--shadow-1);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index:90;
}
.back-to-top.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.back-to-top svg{ width:18px; height:18px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px){
  .main-nav{ display:none; }
  .nav-toggle{ display:block; margin-left:4px; }
  .header-actions .btn-demo{ display:none; }

  .header-inner{ flex-wrap:wrap; height:auto; padding:12px 16px; }
  .site-header{ height:auto; }

  .main-nav.is-open{
    display:flex;
    flex-direction:column;
    width:100%;
    order:5;
    gap:2px;
    padding-top:10px;
    margin-top:10px;
    border-top:1px solid var(--line);
  }
  .main-nav.is-open a{ padding:12px; }
}

@media (max-width: 560px){
  .logo span.logo-text{ display:none; }
  .header-actions{ gap:6px; }
  .lang-switch-toggle span.lang-code{ display:none; }
  .btn-primary{ padding:10px 14px; }
  main{ padding:32px 16px 64px; }
  .author-block{ flex-direction:column; align-items:flex-start; }
  .footer-rg{ flex-direction:column; align-items:flex-start; }
}

/* Prevent any element from forcing horizontal scroll on mobile */
img, table, pre, iframe, video{ max-width:100%; }
.table-wrap{ max-width:100%; }
.demo-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px 16px;
}

.demo-frame {
  position: relative;
  width: 100%;
  max-width: 850px;
  aspect-ratio: 16 / 9;
  background: #111;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.demo-frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 600px) {
  .demo-wrapper {
    padding: 12px 8px;
  }

  .demo-frame {
    border-radius: 8px;
  }
}