/* =========================================================
   Uncrossable Rush — eu.com edition stylesheet
   Theme: "Crosswalk" — light ink-on-paper base, lime + coral
   road-marking accents, skewed signage shapes as the signature
   motif (a nod to crossing traffic in the game itself).
   Deliberately light / high-contrast, opposite of the .com
   sibling site's dark neon treatment.
   ========================================================= */

:root{
  --paper:#F5F6F1;
  --paper-2:#ECEEE4;
  --surface:#FFFFFF;
  --ink:#12161B;
  --ink-2:#20262E;
  --line: rgba(18,22,27,0.12);
  --line-strong: rgba(18,22,27,0.22);

  --text-0:#12161B;
  --text-1:#3E4650;
  --text-2:#6D7580;

  --lime:#C6FF3D;
  --lime-ink:#1F2A08;
  --coral:#FF5A3C;
  --sky:#2E7DFF;

  --grad-sign: linear-gradient(100deg, var(--lime) 0%, var(--lime) 48%, var(--coral) 48%, var(--coral) 100%);

  --radius-s:6px;
  --radius-m:12px;
  --radius-l:20px;

  --shadow-1: 0 14px 34px rgba(18,22,27,0.12);
  --shadow-btn: 4px 4px 0 var(--ink);

  --font-display: "Archivo Black", "Arial Black", system-ui, sans-serif;
  --font-body: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;

  --header-h: 78px;
  --skew: -6deg;
}

*,*::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:
    linear-gradient(var(--paper-2) 1px, transparent 1px) 0 0 / 100% 44px,
    var(--paper);
  color:var(--text-1);
  font-family:var(--font-body);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}

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

a{ color:var(--ink); text-decoration:none; }
a:hover{ color:var(--coral); }

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

::selection{ background:var(--lime); color:var(--ink); }

.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(245,246,241,0.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:3px solid var(--ink);
}

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

.logo{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
  font-family:var(--font-display);
  font-weight:400;
  font-size:19px;
  letter-spacing:0.01em;
  color:var(--ink);
  text-transform:uppercase;
}
.logo img{ height:34px; width:auto; }
.logo span{ color:var(--ink); }
.logo span span{
  background:var(--coral);
  color:var(--paper);
  padding:1px 6px;
  margin-left:2px;
  display:inline-block;
  transform:skew(var(--skew));
}

.main-nav{
  display:flex;
  align-items:center;
  gap:2px;
  margin-left:6px;
}
.main-nav a{
  font-family:var(--font-body);
  font-weight:700;
  font-size:14px;
  letter-spacing:0.02em;
  text-transform:uppercase;
  color:var(--text-1);
  padding:9px 13px;
  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(--ink);
  background:var(--lime);
}

.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:2px solid var(--ink);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:13px;
  font-weight:700;
  padding:7px 12px;
  border-radius:999px;
  cursor:pointer;
  transition:background-color .15s ease;
}
.lang-switch-toggle:hover{ background:var(--lime); }
.lang-switch-toggle .flag{ font-size:16px; line-height:1; }
.lang-switch-toggle .chev{
  width:8px; height:8px;
  border-right:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
  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% + 10px);
  right:0;
  min-width:210px;
  max-height:320px;
  overflow-y:auto;
  background:var(--surface);
  border:2px solid var(--ink);
  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:600;
}
.lang-menu a:hover{ background:var(--paper-2); color:var(--ink); }
.lang-menu a[aria-current="true"]{
  color:var(--ink);
  background:var(--lime);
}
.lang-menu .flag{ font-size:17px; }

/* CTA buttons — skewed "sign" shape is the signature element */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--font-body);
  font-weight:800;
  font-size:13px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  padding:12px 22px;
  border-radius:var(--radius-s);
  border:2px solid var(--ink);
  cursor:pointer;
  white-space:nowrap;
  transform:skew(var(--skew));
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn > *{ display:inline-block; transform:skew(calc(var(--skew) * -1)); }

.btn-demo{
  background:var(--surface);
  color:var(--ink);
  box-shadow:var(--shadow-btn);
}
.btn-demo:hover{
  background:var(--paper-2);
  transform:skew(var(--skew)) translate(-2px,-2px);
  box-shadow:6px 6px 0 var(--ink);
}

.btn-primary{
  background:var(--lime);
  color:var(--lime-ink);
  box-shadow:var(--shadow-btn);
}
.btn-primary:hover{
  transform:skew(var(--skew)) translate(-2px,-2px);
  box-shadow:6px 6px 0 var(--ink);
  color:var(--lime-ink);
}

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

/* burger */
.nav-toggle{
  display:none;
  width:40px;height:40px;
  border-radius:var(--radius-s);
  border:2px solid var(--ink);
  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(--ink);
  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:52px 20px 84px;
}

main h1{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(30px, 5vw, 46px);
  line-height:1.1;
  letter-spacing:0.005em;
  color:var(--ink);
  text-transform:uppercase;
  margin:0 0 20px;
}

main h2{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(21px, 3vw, 26px);
  line-height:1.3;
  color:var(--ink);
  text-transform:uppercase;
  margin:46px 0 16px;
  padding-top:14px;
  position:relative;
}
main h2::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:64px; height:6px;
  background:var(--grad-sign);
}

main h3{
  font-family:var(--font-body);
  font-weight:800;
  font-size:19px;
  color:var(--ink);
  margin:30px 0 12px;
}

main h4{
  font-family:var(--font-body);
  font-weight:800;
  font-size:15px;
  color:var(--ink);
  margin:22px 0 10px;
  text-transform:uppercase;
  letter-spacing:0.05em;
}

main p{
  font-size:16px;
  color:var(--text-1);
  margin:0 0 18px;
}
main p.lead{
  font-size:19px;
  color:var(--ink);
  font-weight:600;
}

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

main a{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-color:var(--coral);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}
main a:hover{ color:var(--coral); }

main ul, main ol{
  margin:0 0 20px;
  padding-left:4px;
  color:var(--text-1);
  list-style:none;
}
main li{ margin-bottom:10px; }
main ul li{ position:relative; padding-left:26px; }
main ul li::before{
  content:"";
  position:absolute;
  left:0; top:8px;
  width:11px; height:11px;
  background:var(--coral);
  transform:skew(var(--skew));
}
main ol{ counter-reset:rushlist; }
main ol li{
  counter-increment:rushlist;
  padding-left:34px;
  position:relative;
}
main ol li::before{
  content:counter(rushlist);
  position:absolute;
  left:0; top:-2px;
  width:24px;height:24px;
  background:var(--ink);
  color:var(--lime);
  font-family:var(--font-display);
  font-weight:400;
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content:center;
}

main blockquote{
  margin:26px 0;
  padding:20px 24px;
  border:2px solid var(--ink);
  border-left:8px solid var(--coral);
  background:var(--surface);
  color:var(--ink);
  font-style:normal;
  font-weight:600;
}

main hr{
  border:none;
  height:6px;
  margin:44px 0;
  background:var(--grad-sign);
}

/* inline image-between-paragraphs template */
main figure.content-image{ margin:34px 0; }
main figure.content-image img{
  width:100%;
  border:2px solid var(--ink);
  box-shadow:6px 6px 0 var(--lime);
}
main figure.content-image figcaption{
  margin-top:12px;
  font-size:13px;
  font-weight:600;
  color:var(--text-2);
  text-align:left;
}

/* table */
main .table-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:26px 0;
  border:2px solid var(--ink);
}
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(--paper);
  font-weight:800;
  background:var(--ink);
}
main thead th{
  text-align:left;
  font-family:var(--font-body);
  font-weight:800;
  letter-spacing:0.03em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--ink);
  background:var(--lime);
  padding:12px 16px;
  border-bottom:2px solid var(--ink);
  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:nth-child(even){ background:var(--paper-2); }

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

/* author / opinion block */
.author-block{
  display:flex;
  gap:16px;
  align-items:flex-start;
  margin:50px 0 8px;
  padding:24px;
  background:var(--surface);
  border:2px solid var(--ink);
  position:relative;
}
.author-block::before{
  content:"";
  position:absolute;
  top:-3px; left:24px; right:24px;
  height:6px;
  background:var(--grad-sign);
}
.author-block .author-avatar{
  width:60px;
  height:60px;
  border-radius:50%;
  flex-shrink:0;
  object-fit:cover;
  border:2px solid var(--ink);
  background:var(--paper-2);
}
.author-block .author-body{ min-width:0; }
.author-block .author-label{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--coral);
  margin:0 0 4px;
}
.author-block .author-name{
  font-size:16px;
  font-weight:800;
  color:var(--ink);
  margin:0 0 8px;
}
.author-block .author-opinion{
  font-size:15px;
  color:var(--text-1);
  margin:0;
}

.placeholder-box{
  border:2px dashed var(--line-strong);
  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:400;
  font-size:clamp(70px, 16vw, 130px);
  line-height:1;
  color:var(--ink);
  margin:0;
}
.error-page h1{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(20px, 3vw, 26px);
  text-transform:uppercase;
  color:var(--ink);
  margin:14px 0 10px;
}
.error-page p{
  color:var(--text-2);
  max-width:440px;
  margin:0 auto 26px;
}

/* =========================================================
   FOOTER — inverted to ink, contrast switch from light body
   ========================================================= */
.site-footer{
  border-top:3px solid var(--ink);
  background:var(--ink);
  color:var(--paper);
  padding:42px 20px 32px;
}
.footer-inner{ max-width:1280px; margin:0 auto; }
.footer-disclaimer{
  font-size:13px;
  line-height:1.75;
  color:rgba(245,246,241,0.72);
  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 rgba(245,246,241,0.18);
  border-bottom:1px solid rgba(245,246,241,0.18);
  margin-bottom:20px;
}
.footer-rg-label{
  font-size:12px;
  font-weight:800;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:rgba(245,246,241,0.6);
  margin-right:4px;
}
.footer-rg a{
  font-size:13px;
  font-weight:700;
  color:var(--paper);
  padding:6px 12px;
  border:1px solid rgba(245,246,241,0.35);
  border-radius:999px;
}
.footer-rg a:hover{ color:var(--lime-ink); background:var(--lime); border-color:var(--lime); }

.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  color:rgba(245,246,241,0.55);
}

/* =========================================================
   BACK TO TOP — square sign, not a circle (differs from .com)
   ========================================================= */
.back-to-top{
  position:fixed;
  right:20px;
  bottom:24px;
  width:48px;
  height:48px;
  border-radius:var(--radius-s);
  background:var(--lime);
  color:var(--lime-ink);
  border:2px solid var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:4px 4px 0 var(--ink);
  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:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.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{ font-size:16px; }
  .header-actions{ gap:6px; }
  .lang-switch-toggle span.lang-code{ display:none; }
  .btn-primary{ padding:10px 14px; }
  main{ padding:36px 16px 68px; }
  .author-block{ flex-direction:column; align-items:flex-start; }
  .footer-rg{ flex-direction:column; align-items:flex-start; }
}

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;
  }
}