*, *::before, *::after { box-sizing: border-box; }
* { min-width: 0; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: #e8f0ff;
  background: #1d3584;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }

:root{
  --header-h:72px;
  --sidebar-w:264px;
  --sidebar-w-mini:84px;
  --content-max:1440px;
  --radius:14px;

  --bg-900:#070b1a; --bg-800:#0a0e23; --bg-700:#0d1440; --bg-600:#121a56; --bg-500:#182373; --bg-400:#203191;
  --brand-500:#2a64f6; --brand-600:#1f4fe0; --brand-700:#1a3eb8;
  --accent-500:#16c987; --accent-600:#0fb375; --accent-700:#0b8f5c;
  --warn-500:#ffa21a; --danger-500:#ff4848;

  --text-100:#f6f8ff; --text-200:#e0e8ff; --text-300:#c1cffb; --muted:#9bb0e6;

  --shadow-1: 0 6px 16px rgba(10,16,52,.30), inset 0 1px 0 rgba(255,255,255,.05);
  --shadow-2: 0 14px 30px rgba(8,12,40,.46), 0 2px 8px rgba(0,0,0,.22);
  --glass: rgba(255,255,255,.07);
}

*::-webkit-scrollbar { height: 10px; width: 10px; }
*::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#3a56e0,#2743ce); border-radius: 999px; }
*::-webkit-scrollbar-track { background: transparent; }

.skip-link{ position:absolute; left:8px; top:-48px; z-index:10000; background:#11183d; color:#fff; padding:10px 14px; border-radius:8px; transition:top .2s; }
.skip-link:focus{ top:8px; }
.container { width: min(100%, var(--content-max)); margin-inline: auto; }
.hidden { display: none !important; }
.muted { color: var(--muted); }

.section {
  padding: 24px clamp(16px, 2.2vw, 28px);
  margin: 0 auto;
  max-width: calc(var(--content-max) + var(--sidebar-w));
}
.section__title {
  margin: 24px 0 14px;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 700;
  color: var(--text-100);
}

.header{
  position: fixed; inset: 0 0 auto 0; height: var(--header-h); z-index: 1000;
  background: linear-gradient(180deg, #2132a4, #1b2887 55%, #151e69 100%);
  box-shadow: var(--shadow-1);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.header__inner{
  height: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 0 clamp(12px,2vw,24px);
  max-width: calc(var(--content-max) + var(--sidebar-w));
  margin: 0 auto;
  background-size: 88px;
  background-blend-mode: soft-light;
}
.logo{ display:inline-flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px; color:#fff; white-space:nowrap; }
.logo img{ height:34px; width:auto; filter: drop-shadow(0 3px 8px rgba(37,123,255,.22)); }
.search{
  display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center;
  max-width:680px; min-width:260px; margin-left:max(8px,3vw);
}
.search input{
  width:100%; height:42px;
  background: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.12), rgba(255,255,255,.05) 60%), var(--glass);
  border:1px solid rgba(255,255,255,.18); color:#fff; border-radius:999px; padding:0 14px;
  outline:none; transition:border-color .2s, box-shadow .2s, background .2s; box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.search input::placeholder{ color:#c6d3ff99; }
.search input:focus{ 
  border-color:#7ab0ff; 
  box-shadow:0 0 0 3px rgba(122,176,255,.28), inset 0 1px 0 rgba(255,255,255,.10); 
}
.header__actions{ display:inline-flex; gap:10px; white-space:nowrap; }
.btn{
  --bg:#2737b3; --bg2:#1e2a8f; --bd:rgba(255,255,255,.18); --txt:#fff;
  border:1px solid var(--bd); background:linear-gradient(180deg, var(--bg), var(--bg2));
  color:var(--txt); padding:10px 14px; border-radius:12px; cursor:pointer; box-shadow:var(--shadow-1);
  transition:transform .12s ease, filter .2s ease, box-shadow .2s ease;
}
.btn:hover{ filter:brightness(1.06); }
.btn:active{ transform:translateY(1px); }
.btn--ghost{ --bg:rgba(255,255,255,.06); --bg2:rgba(255,255,255,.03); --bd:rgba(255,255,255,.14); --txt:#e8f0ff; backdrop-filter: blur(6px); }
.btn--primary{ --bg:#2f68ff; --bg2:#2550d6; }
.btn--success{ --bg:#19d08f; --bg2:#11b579; }
.btn--icon{
  width:42px; height:42px; border-radius:999px; border:1px solid rgba(255,255,255,.15);
  background:linear-gradient(180deg,#2737b3,#1e2a8f); display:grid; place-items:center; box-shadow:var(--shadow-1); cursor:pointer;
}

.burger{
  width:42px; height:42px; border-radius:10px; border:1px solid rgba(255,255,255,.15);
  background:linear-gradient(180deg,#2737b3,#1e2a8f); box-shadow:var(--shadow-1);
  display:inline-grid; place-content:center; gap:4px; cursor:pointer;
}
.burger span{ width:20px; height:2px; background:#fff; border-radius:999px; transition: transform .25s, opacity .25s; }
body.nav-open .burger span:nth-child(1),
.burger[aria-expanded="false"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
body.nav-open .burger span:nth-child(2),
.burger[aria-expanded="false"] span:nth-child(2){ opacity: 0; }
body.nav-open .burger span:nth-child(3),
.burger[aria-expanded="false"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

.sidebar{
  position: fixed; top: var(--header-h); left: 0; bottom: 0; z-index: 900;
  width: var(--sidebar-w);
  background: linear-gradient(180deg, #1a2c91, #17287f 60%, #141f67 100%);
  border-right: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow-1);
  display: grid; grid-template-rows: 1fr auto;
  transition: width .2s ease;
}
.sidebar__nav{ padding:14px 10px 12px; overflow:auto; }
.sidebar__nav a{
  display:grid; grid-template-columns:36px 1fr; align-items:center; gap:12px;
  padding:10px 12px; border-radius:12px; color:var(--text-200);
  transition: background .15s, color .15s, transform .1s;
  border:1px solid transparent;
  backdrop-filter: saturate(1.05);
}
.sidebar__nav li + li{ margin-top:6px; }
.sidebar__nav a:hover{ background:rgba(255,255,255,.08); color:#fff; }
.sidebar__nav .active > a, .sidebar__nav a:active{
  background: linear-gradient(180deg, #2e58f0, #2345cb);
  color:#fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.12);
}
.sidebar__footer{
  padding:12px; display:grid; grid-auto-flow:column; gap:10px; border-top:1px solid rgba(255,255,255,.08);
}
.lang{ padding:8px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); cursor:pointer; }
.lang.alt{ background: rgba(255,255,255,.03); }

.i{ width:24px; height:24px; display:inline-block; border-radius:6px; background: linear-gradient(180deg,#2e48ef,#1f38c8); box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 6px 14px rgba(16,24,80,.35); }
.i--home{ background-image: radial-gradient(8px 8px at 6px 6px,#92b4ff 40%,transparent 41%), radial-gradient(8px 8px at 18px 18px,#6bf0c4 40%,transparent 41%); background-size:22px 22px,22px 22px; background-repeat:no-repeat; }
.i--gift{ background-image: radial-gradient(8px 8px at 50% 40%, #ffdd71 40%, transparent 41%); }
.i--chip, .i--live, .i--jackpot, .i--sport, .i--trophy, .i--vip, .i--help { opacity: .9; }

body.sidebar-collapsed{ --sidebar-w: var(--sidebar-w-mini); }
body.sidebar-collapsed .sidebar__nav a{ grid-template-columns:36px 0; justify-items:center; }
body.sidebar-collapsed .sidebar__nav .label{ opacity:0; visibility:hidden; width:0; overflow:hidden; }
body.sidebar-collapsed .sidebar__footer{ grid-auto-flow:row; justify-items:center; }
body.sidebar-collapsed .main{ margin-left: var(--sidebar-w-mini); }

.main{ padding-top: var(--header-h); margin-left: var(--sidebar-w); min-height: 100vh; transition: margin-left .2s ease; padding-left: 8px;}

footer {
  padding-top: var(--header-h);
  margin-left: var(--sidebar-w);
  border-top-color: rgba(255,255,255,.10);
}

.slider{
  position: relative; border-radius: var(--radius);
  background: linear-gradient(180deg, #1a2b8f, #17277e 60%, #121b64);
  padding: clamp(12px, 1.2vw, 16px);
  box-shadow: var(--shadow-2);
}
.slider__viewport{ overflow: hidden; border-radius: calc(var(--radius) - 6px); }
.slider__track{ display: grid; grid-auto-flow: column; grid-auto-columns: 100%; transition: transform .55s cubic-bezier(.22,.85,.27,1); }
.slide{ position: relative; min-height: clamp(240px, 34vw, 380px); isolation: isolate; overflow: hidden; display: grid; align-items: stretch; }
.slide__bg, .slide__bg::after{
  position: absolute; inset: 0; border-radius: 12px; z-index: 0;
  background: radial-gradient(120% 160% at 80% 0%, #2b5cf3 0%, #1e2a8f 50%, #141b53 100%);
}
.slide__bg::after{
  content:""; position:absolute; inset:-1px;
  background: radial-gradient(110% 80% at 85% 20%, rgba(0,0,0,.22), transparent 55%) ,
              radial-gradient(110% 90% at 0% 100%, rgba(0,0,0,.18), transparent 60%);
  pointer-events:none;
}
.slide__bg.alt{ background: radial-gradient(120% 160% at 10% 0%, #8b5cf6 0%, #4c1d95 55%, #141b53 100%); }
.slide__bg.alt2{ background: radial-gradient(120% 160% at 10% 0%, #22d3ee 0%, #0891b2 55%, #0b3b66 100%); }
.slide__content{ position: relative; z-index: 2; padding: clamp(18px, 3vw, 32px); display: grid; align-content: center; gap:10px; max-width:720px; color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.15); }
.slide .badge{ display:inline-block; background: linear-gradient(180deg,#ffb648,#f59e0b); color:#0b0e29; font-weight:800; padding:6px 10px; border-radius:999px; box-shadow:0 4px 14px rgba(245,158,11,.35); }
.slide__title{ font-size: clamp(22px, 3.4vw, 38px); font-weight: 900; letter-spacing:.2px; }
.slide__desc{ color: var(--text-200); max-width: 52ch; }
.slide__cta{ display: inline-flex; gap: 10px; margin-top: 6px; }
.slider__arrow{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 999px; border: 1px solid rgba(255,255,255,.20);
  background: linear-gradient(180deg, #2f68ff, #2550d6); box-shadow: var(--shadow-1);
  display: grid; place-items: center; cursor: pointer; color:#fff; z-index:3;
}
.slider__arrow span{ font-size: 24px; transform: translateY(-1px); }
.slider__arrow.prev{ left: 10px; }
.slider__arrow.next{ right: 10px; }
.slider__arrow:hover{ filter: brightness(1.07) saturate(1.02); }
.parallax{ position:absolute; border-radius:50%; filter:blur(1px); opacity:.45; z-index:1; }
.p1{ width:240px; height:240px; right:-40px; bottom:-40px; background: radial-gradient(circle at 30% 30%, #22d3ee, #2349cf); }
.p2{ width:180px; height:180px; right:120px; top:24px; background: radial-gradient(circle at 30% 30%, #10b981, #1f2e9a); }
.p3{ width:260px; height:260px; left:-60px; bottom:-50px; background: radial-gradient(circle at 40% 40%, #f59e0b, #7c2d12); }
.slide [data-anim]{ opacity:0; transform:translateY(12px) scale(.98); transition: transform .5s ease, opacity .5s ease; }
.slide.is-active [data-anim]{ opacity:1; transform:none; }
.slide.is-active [data-anim]:nth-child(1){ transition-delay:.05s; }
.slide.is-active [data-anim]:nth-child(2){ transition-delay:.12s; }
.slide.is-active [data-anim]:nth-child(3){ transition-delay:.18s; }
.slide.is-active [data-anim]:nth-child(4){ transition-delay:.26s; }

.chips{ display:flex; align-items:center; gap:8px; flex-wrap:nowrap; padding:14px 4px 4px; overflow-x:auto; scrollbar-width:thin; }
.chip{
  --bg: rgba(255,255,255,.08);
  color: var(--text-200);
  background: var(--bg);
  border:1px solid rgba(255,255,255,.16);
  padding:8px 12px; border-radius:999px; cursor:pointer;
  transition: background .15s, color .15s, transform .1s, border-color .15s;
  white-space:nowrap; display:inline-flex; align-items:center; gap:8px;
}
.chip .ci{ width:16px; height:16px; color:#bfe0ff; }
.chip:hover{ background: rgba(255,255,255,.1); color:#fff; }
.chip.active{
  color:#08123a; background: linear-gradient(180deg, #9fd5ff, #6cabff);
  border-color: transparent; box-shadow: 0 8px 18px rgba(60,140,255,.40);
}
.chips__all{ margin-left:auto; font-weight:700; color:#9fc1ff; padding:8px 12px; border-radius:10px; }
.chips__all:hover{ background: rgba(255,255,255,.06); color:#cde0ff; }

.grid.games{ --min:168px; display:grid; grid-template-columns: repeat(auto-fill, minmax(var(--min), 1fr)); gap:14px; }
.card.game{
  position:relative; overflow:hidden; border-radius:16px;
  background: linear-gradient(180deg, #0d143a, #0b102e);
  border:1px solid rgba(160,190,255,.16);
  box-shadow:0 10px 22px rgba(7,12,42,.46);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, filter .2s ease;
  display:grid; grid-template-rows:1fr auto;
}
.card.game img{ width:100%; aspect-ratio:3/4; object-fit:cover; background:#0a0e23; }
.card.game .game__title{ padding:10px 12px; font-weight:700; color:var(--text-100); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); }
.card.game:hover{ 
  transform: translateY(-3px); 
  box-shadow: 0 18px 36px rgba(7,12,42,.55); 
  border-color: rgba(160,190,255,.32); 
}
.badge{ position:absolute; top:10px; left:10px; z-index:2; padding:6px 10px; border-radius:999px; font-weight:800; font-size:12px; }
.badge--num{
  display:grid; place-items:center; width:28px; height:28px; border-radius:999px;
  background: linear-gradient(180deg,#2b5cf3,#2039c7); color:#fff; border:1px solid rgba(255,255,255,.24);
  box-shadow: 0 8px 18px rgba(32,57,199,.45);
}

.footer{
  margin:28px auto 0; padding:26px clamp(16px,2.2vw,28px);
  background: linear-gradient(180deg, #0b102e, #0a0e23);
  border-top: 1px solid rgba(255,255,255,.08);
}
.footer__cols{
  display:grid; gap:22px; grid-template-columns: repeat(4, minmax(0,1fr));
  max-width: calc(var(--content-max) + var(--sidebar-w)); margin:0 auto;
}
.footer__cols h4{ font-size:14px; text-transform:uppercase; letter-spacing:.8px; color:#b9c8ff; margin-bottom:12px; }
.footer__cols li + li{ margin-top:8px; }
.footer__cols a{ color:#9fb2ff; }
.footer__cols a:hover{ color:#cfe0ff; text-decoration: underline; }
.footer__legal{
  max-width: calc(var(--content-max) + var(--sidebar-w));
  margin:18px auto 0; padding-top:16px; border-top:1px solid rgba(255,255,255,.08);
  color:#8da1dd; font-size:13px;
}

:focus-visible { 
  outline:3px solid rgba(130,170,255,.85); 
  outline-offset:2px;
  text-decoration: none !important;
}
a:focus-visible, button:focus-visible { border-radius:10px; }

@supports (backdrop-filter: blur(6px)) {
  .header.scrolled{
    background: linear-gradient(180deg, rgba(27,42,163,.85), rgba(18,28,99,.9));
    backdrop-filter: blur(6px);
  }
}

@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }

@media (max-width:1280px){ :root{ --sidebar-w:240px; } }

@media (max-width:1100px){
  .search{ margin-left:12px; min-width:200px; }
  .footer__cols{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width:980px){
  :root{ --sidebar-w:0px; }
  .sidebar{ 
    width:280px; 
    transform: translateX(-100%); 
    transition: transform .25s ease; 
    top: var(--header-h); 
    height: calc(100vh - var(--header-h)); 
  }
  body.nav-open .sidebar{ transform: translateX(0); }
  .main, footer{ margin-left:0 !important; }
  body.nav-open::after{
    content:""; position:fixed; inset: var(--header-h) 0 0 0; background: rgba(7,11,26,.55);
    backdrop-filter: blur(2px); z-index:800;
  }
  .header__inner{ padding-left: clamp(12px, 3vw, 24px); }
}

@media (max-width:860px){
  .header__inner{ gap:10px; }
  .search{ grid-template-columns: 1fr auto; max-width:100%; margin-left:0; min-width:0; }
  .footer__cols{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width:600px){
  :root{ --header-h:64px; }
  .btn--icon, .burger{ width:38px; height:38px; }
  .grid.games{ --min:146px; gap:12px; }
  .footer__cols{ grid-template-columns: 1fr; }
  .strip__title{ font-size: 22px; }
}

body::before{
  content:""; position:fixed; inset:-20% -10% auto -10%; height:60%;
  background: radial-gradient(50% 50% at 20% 20%, rgba(37,99,235,.18), transparent 60%),
              radial-gradient(60% 60% at 80% 10%, rgba(16,185,129,.12), transparent 70%);
  pointer-events:none; z-index:0;
}

@media (max-width:980px){ .sidebar{ width:280px; transform: translateX(-100%); }
body.nav-open .sidebar{ transform: translateX(0); } }



  .slider {
      position: relative;
      height: var(--slider-height);
      min-height: 420px;
      overflow: hidden;
      isolation: isolate;
      color: #fff;
    }

    .slider::before{
      content:"";
      position:absolute; inset:0;
      z-index: 1;
      background:
        radial-gradient(20% 30% at 20% 20%, rgba(255,255,255,.10), transparent 60%),
        radial-gradient(16% 24% at 70% 10%, rgba(255,255,255,.08), transparent 60%),
        radial-gradient(18% 20% at 85% 70%, rgba(255,255,255,.10), transparent 60%),
        radial-gradient(12% 16% at 15% 80%, rgba(255,255,255,.06), transparent 60%);
      mix-blend-mode: screen;
      pointer-events:none;
    }

    .slider::after {
      content:"";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(15,21,36,.25), rgba(15,21,36,.45));
      z-index: 1;
      pointer-events: none;
    }

    .slider__bg { position:absolute; inset:0; z-index:0; overflow:hidden; }
    .slider__bg video {
      position:absolute; inset:0;
      width:100%; height:100%;
      object-fit: cover;
      filter: saturate(110%) brightness(0.9);
      pointer-events:none;
    }

    .slider__stage { position:relative; height:100%; z-index:2; }

    .slider__slide {
      position:absolute; inset:0;
      padding: clamp(16px, 4vw, 56px);
      text-align:center;
      opacity:0; transition: opacity var(--slide-fade) ease;
      pointer-events:none;
    }
    .slider__slide.is-active { opacity:1; pointer-events:auto; }

    .slider__content { max-width:min(1100px,92vw); }

    .slider__title{
      margin:0 0 .45em;
      font-size: clamp(26px, 6vw, 64px);
      line-height: 1.05;
      letter-spacing: .5px;
      text-wrap: balance;
      -webkit-text-stroke: 2px rgba(10,25,55,.35);
      text-shadow:
        0 4px 0 rgba(0,0,0,.18),
        0 12px 24px rgba(0,0,0,.35);
    }

    .slider__text{
      margin: 0 auto 1.3em;
      max-width: 72ch;
      font-size: clamp(16px, 2.4vw, 20px);
      opacity:.98;
      text-shadow: 0 2px 10px rgba(0,0,0,.35);
    }

    .btns { display:inline-flex; gap:14px; flex-wrap:wrap; justify-content:center; }

    .btn{
      position:relative;
      appearance:none; border:0; cursor:pointer; user-select:none;
      font: 700 16px/1 "Fredoka", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
      text-transform: uppercase; letter-spacing: .6px;
      padding: 14px 22px;
      border-radius: 14px;
      color:#fff;
      transform: translateY(0);
      transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
      box-shadow:
        0 6px 0 var(--outline),
        0 12px 22px rgba(0,0,0,.28);
      text-shadow: 0 2px 0 rgba(0,0,0,.25);
      outline: 3px solid var(--outline);
      outline-offset: -3px;
      overflow:hidden;
    }
    .btn::after{
      content:"";
      position:absolute; left:6px; right:6px; top:6px; height:45%;
      background: linear-gradient(to bottom, rgba(255,255,255,.65), rgba(255,255,255,0) 70%);
      border-radius: 10px;
      pointer-events:none;
      mix-blend-mode: soft-light;
    }

    .btn--blue{
      background: linear-gradient(180deg, var(--blue-1) 10%, var(--blue-2) 60%, var(--blue-3) 120%);
      outline-color: #143A7A;
      box-shadow:
        0 6px 0 #143A7A,
        0 12px 22px rgba(0,0,0,.28);
    }
    .btn--green{
      background: linear-gradient(180deg, var(--green-1) 10%, var(--green-2) 60%, var(--green-3) 120%);
      outline-color: #0F5C1D;
      box-shadow:
        0 6px 0 #0F5C1D,
        0 12px 22px rgba(0,0,0,.28);
    }

    .btn:hover{ transform: translateY(-2px); filter: brightness(1.03); }
    .btn:active{
      transform: translateY(3px);
      box-shadow:
        0 2px 0 var(--outline),
        0 8px 16px rgba(0,0,0,.25);
    }
    .btn:focus-visible{ outline: 4px solid #fff; outline-offset: 2px; }

    .slider__arrows{
      position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between;
      padding: 0 clamp(8px, 2vw, 24px); z-index:3; pointer-events:none;
    }
    .arrow{
      pointer-events:auto; width:56px; height:56px; border-radius:14px;
      display:grid; place-items:center; font-size:28px; line-height:1;
      color:#fff; cursor:pointer; border:0;
      background: linear-gradient(180deg, #6FB6FF 10%, #2E7BEF 70%);
      outline: 3px solid #0E2A57; outline-offset: -3px;
      box-shadow: 0 6px 0 #0E2A57, 0 10px 18px rgba(0,0,0,.28);
      transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
    }
    .arrow:hover{ transform: translateY(-2px); filter: brightness(1.05); }
    .arrow:active{ transform: translateY(2px); box-shadow: 0 3px 0 #0E2A57, 0 6px 12px rgba(0,0,0,.25); }

    .slider__dots{
      position:absolute; left:50%; bottom:16px; transform: translateX(-50%);
      display:flex; gap:10px; z-index:3;
    }
    .dot{
      position:relative;
      width:14px; height:14px; border-radius:50%;
      background: linear-gradient(180deg, #ffffff 0%, #A4D0FF 45%, #2E7BEF 120%);
      outline: 3px solid #0E2A57; outline-offset: -3px;
      box-shadow: 0 4px 0 #0E2A57, 0 8px 16px rgba(0,0,0,.25);
      cursor:pointer;
      transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
    }
    .dot::after{
      content:""; position:absolute; left:3px; right:3px; top:2px; height:42%;
      background: linear-gradient(to bottom, rgba(255,255,255,.85), rgba(255,255,255,0));
      border-radius: 50%;
      pointer-events:none;
    }
    .dot:hover{ transform: translateY(-1px); filter: brightness(1.05); }
    .dot[aria-current="true"]{
      background: linear-gradient(180deg, #B4FF8F 10%, #2FCC40 70%);
      outline-color:#0F5C1D;
      box-shadow: 0 4px 0 #0F5C1D, 0 8px 16px rgba(0,0,0,.25);
    }

    @media (max-width: 767px) {
      .slider__bg video { display:none; }
      .slider {
        background: center/cover no-repeat url("https://pistolo-casino.ca/uploads/2025/09/desktop_intro-v4.jpg");
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .slider__slide { transition:none; }
    }

:root{
  --pc-blue-1:#8fd0ff; --pc-blue-2:#3a91ff; --pc-blue-3:#1b56b5;
  --pc-outline:#0E2A57; --pc-shadow:rgba(0,0,0,.35);
  --pc-orange-1:#FFA84D; --pc-orange-2:#FF7A17; --pc-orange-3:#C84E00;
  --pc-green-1:#9BFF7A; --pc-green-2:#36D744; --pc-green-3:#158221;
}

.promo-card{
  position: relative;
  display: inline-block;
  max-width: min(980px, 92vw);
  margin: 0 auto;
  border-radius: 20px;
  outline: 4px solid var(--pc-outline);
  outline-offset: -4px;
  box-shadow: 0 10px 0 var(--pc-outline), 0 20px 40px var(--pc-shadow);
  background:
    radial-gradient(120px 80px at 92% 18%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(120px 80px at 8% 14%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(18px 18px at 20% 30%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(18px 18px at 40% 65%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(18px 18px at 70% 40%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(180deg, var(--pc-blue-1) 0%, var(--pc-blue-2) 50%, var(--pc-blue-3) 115%);
}

.promo-body{
  padding: clamp(18px, 3.6vw, 28px) clamp(16px, 4vw, 40px) clamp(22px, 4.4vw, 34px);
  text-align: center;
}

.promo-ribbon{
  position: absolute; left: 50%; top: -20px; transform: translateX(-50%);
  background: linear-gradient(180deg, var(--pc-orange-1), var(--pc-orange-2) 70%, var(--pc-orange-3) 120%);
  color:#fff; padding: 8px 18px; border-radius: 10px;
  font: 700 16px/1.1 "Fredoka", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  text-shadow: 0 2px 0 rgba(0,0,0,.25);
  outline: 4px solid #7A2A00; outline-offset:-4px;
  box-shadow: 0 8px 0 #7A2A00, 0 12px 22px rgba(0,0,0,.25);
}
.promo-ribbon::before,
.promo-ribbon::after{
  content:""; position:absolute; top:50%; width:22px; height:14px; transform: translateY(-50%);
  background: linear-gradient(180deg, #FF9840, #E76409 90%);
  outline:4px solid #7A2A00; outline-offset:-4px; box-shadow:0 6px 0 #7A2A00;
  clip-path: polygon(0 0, 100% 30%, 100% 70%, 0 100%); 
  border-radius: 3px;
}
.promo-ribbon::before{ left:-18px; transform: translateY(-50%) scaleX(-1); }
.promo-ribbon::after{ right:-18px; }

.promo-title{
  margin: clamp(6px, .8vw, 10px) 0 clamp(12px, 1.2vw, 16px);
  font: 800 clamp(24px, 5.8vw, 54px)/1.05 "Fredoka", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  color: #FFD86A; 
  background: linear-gradient(180deg, #FFE99C 0%, #FFC54D 45%, #FF9F17 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 2px rgba(10,25,55,.45);
  text-shadow:
    0 3px 0 rgba(0,0,0,.25),
    0 10px 18px rgba(0,0,0,.3);
}

.promo-cta{
  position: relative; display: inline-block;
  margin-top: clamp(10px, 1.2vw, 14px);
  padding: 14px 28px;
  border-radius: 16px;
  font: 800 clamp(16px, 2.6vw, 26px)/1 "Fredoka", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  text-transform: uppercase; letter-spacing: .6px;
  color:#fff; text-decoration:none;
  background: linear-gradient(180deg, var(--pc-green-1) 8%, var(--pc-green-2) 60%, var(--pc-green-3) 120%);
  outline: 4px solid #0F5C1D; outline-offset: -4px;
  box-shadow: 0 8px 0 #0F5C1D, 0 16px 28px rgba(0,0,0,.28);
  text-shadow: 0 2px 0 rgba(0,0,0,.25);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
  overflow: hidden;
}
.promo-cta::after{ 
  content:""; position:absolute; left:8px; right:8px; top:7px; height:46%;
  background: linear-gradient(to bottom, rgba(255,255,255,.65), rgba(255,255,255,0) 70%);
  border-radius: 12px; pointer-events:none; mix-blend-mode: soft-light;
}
.promo-cta:hover{ transform: translateY(-2px); filter: brightness(1.04); }
.promo-cta:active{ transform: translateY(3px); box-shadow: 0 4px 0 #0F5C1D, 0 10px 18px rgba(0,0,0,.25); }

.promo-cta .hole{
  --x:50%; --y:50%; --s:16px;
  position:absolute; left:var(--x); top:var(--y); width:var(--s); height:var(--s);
  transform: translate(-50%, -50%) rotate(0.0001deg);
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, #000 0 55%, transparent 56%),
    radial-gradient(circle at 50% 50%, #fff 0 68%, transparent 69%),
    radial-gradient(circle at 70% 35%, rgba(255,255,255,.35), transparent 60%);
  box-shadow:
    0 1px 0 rgba(0,0,0,.4) inset,
    0 2px 6px rgba(0,0,0,.45);
}
.promo-cta .hole::before{
  content:""; position:absolute; inset:-6px;
  background:
    conic-gradient(from 10deg, transparent 0 20deg, rgba(255,255,255,.65) 20deg 24deg, transparent 24deg 60deg,
                   rgba(255,255,255,.5) 60deg 64deg, transparent 64deg 120deg,
                   rgba(255,255,255,.45) 120deg 124deg, transparent 124deg 200deg,
                   rgba(255,255,255,.5) 200deg 204deg, transparent 204deg 360deg);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 0 58%, #000 59%);
          mask: radial-gradient(circle at 50% 50%, transparent 0 58%, #000 59%);
  pointer-events:none;
}

@media (max-width: 480px){
  .promo-card{ border-radius:16px; }
  .promo-ribbon{ padding:7px 14px; top:-18px; }
  .promo-title{ -webkit-text-stroke: 1.5px rgba(10,25,55,.45); }
}

:root{
--gap: 18px;
--rail-pad: 12px;
--card-w: 232px;
--card-r: 18px;
--shadow: 0 6px 14px rgba(0,0,0,.35);
--blue-1:#0b3d8d;
--blue-2:#062e6b;
}
.strip{
position: relative;
margin: 28px 0 40px;
}

.strip__head{
display:flex; align-items:center; justify-content:space-between;
margin-bottom: 14px;
gap: 10px;
}

.strip__title{
font: 700 28px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Arial;
color:#fff; margin:0;
text-shadow: 0 2px 0 rgba(0,0,0,.2);
}

.strip__controls{
display:flex; align-items:center; gap:10px;justify-content: flex-end;
    margin-bottom: 10px;
}

.strip__seeall{
font:600 14px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Arial;
color:#cfe3ff; text-decoration:none; padding:8px 10px; border-radius:10px;
background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
transition:.2s;
}
.strip__seeall:hover{ background:rgba(255,255,255,.12); }

.strip__arrow{
inline-size:38px; block-size:38px; border-radius:12px; border:none; cursor:pointer;
display:grid; place-items:center; background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.22); transition:.2s;
}
.strip__arrow:hover{ background:rgba(255,255,255,.18); }
.strip__arrow:disabled{ opacity:.45; cursor:default; }
.strip__arrow::before{
content:""; inline-size:18px; block-size:18px; mask-size:contain; mask-repeat:no-repeat;
background:#fff;
}
.strip__arrow.prev::before{ mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>'); }
.strip__arrow.next::before{ mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M8.59 16.59 10 18l6-6-6-6-1.41 1.41L13.17 12z"/></svg>'); }

.strip__rail{
display:grid;
grid-auto-flow: column;
grid-auto-columns: var(--card-w);
gap: var(--gap);
padding-inline: var(--rail-pad);
scroll-snap-type: x mandatory;
overflow-x:auto; overflow-y:visible;
overscroll-behavior-inline: contain;
scroll-padding-inline: calc(var(--rail-pad) + 2px);
-webkit-overflow-scrolling: touch;
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.strip__rail:focus{ outline:2px solid rgba(255,255,255,.25); outline-offset:2px; }

.game-card{
position:relative; scroll-snap-align:start;
inline-size:var(--card-w); aspect-ratio: 3/4; border-radius:var(--card-r);
background:linear-gradient(180deg, var(--blue-1), var(--blue-2));
box-shadow: var(--shadow); overflow:hidden; user-select:none;
}
.game-card > img{
inline-size:100%; block-size:100%; object-fit:cover; display:block;
transition: transform .25s ease;
}
.game-card:hover > img{ transform: scale(1.03); }

.badge{
position:absolute; right:12px; bottom:12px;
padding:6px 10px; border-radius:10px; font:700 12px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Arial;
color:#fff; text-transform:uppercase; letter-spacing:.4px;     right: inherit;
    bottom: inherit;
}
.badge--new{
background:#ff3e36;
box-shadow: 0 5px 12px rgba(255,62,54,.45), inset 0 1px 0 rgba(255,255,255,.35);
}

.game-card--category .game-card__label{
position:absolute; left:0; right:0; bottom:0;
padding:12px 14px 14px;
color:#fff; font:900 22px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Arial;
text-shadow: 0 2px 0 rgba(0,0,0,.35);
}

@media (max-width: 1160px){
:root{ --card-w: 220px; }
}
@media (max-width: 840px){
:root{ --card-w: 200px; --rail-pad: 10px; }
.strip__title{ font-size:24px; }
}

@media (hover: none){
.strip__arrow{ display:none; }
}

footer .casino-footer{
  --bg1:#214ad8; --bg2:#1838bd; --text:#f0f4ff; --muted:#c6d4fa;
  --link:#ffffff; --link-hover:#cfe2ff; --line:rgba(255,255,255,.18);
  --pill: rgba(255,255,255,.08);
  background:
    radial-gradient(900px 520px at 80% -10%, #3a68ff 0%, transparent 55%),
    radial-gradient(700px 360px at 10% 10%, rgba(255,255,255,.12) 0%, transparent 50%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  color:var(--text);
  padding: 36px 20px 24px;
}
footer .cf__inner{ max-width:1200px; margin:0 auto; }

footer .cf__grid{
  display:grid; gap:26px 18px;
  grid-template-columns: repeat(6, minmax(160px, 1fr));
  text-align: center;
  row-gap: 28px;
}
@media (max-width: 1100px){ .cf__grid{ grid-template-columns: repeat(3, minmax(200px, 1fr)); } }
@media (max-width: 680px){ .cf__grid{ grid-template-columns: repeat(2, minmax(180px, 1fr)); } }

footer .cf__h{
  margin:0 0 10px; color:#fff;
  font:700 14px/1.15 Inter, system-ui, Segoe UI, Roboto, Arial;
  letter-spacing:.2px;
}
footer .cf__list{ list-style:none; padding:0; margin:0; }
footer .cf__list li{ margin:9px 0; }
footer .cf__list a{
  color:var(--link); text-decoration:none;
  font:500 13px/1.35 Inter, system-ui, Segoe UI, Roboto, Arial;
  opacity:.95; transition:color .15s ease, opacity .15s ease;
}
footer .cf__list a:hover{ color:var(--link-hover); opacity:1; }
footer .cf__col--terms .cf__h{ text-align:left; }

footer .cf__middle{
  display:grid; grid-template-columns:1fr 1fr 1fr;
  gap:18px; align-items:center;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:22px 0; margin:20px 0 10px;
}
footer .cf__label{
  color:#dbe6ff; font:700 14px/1.2 Inter, system-ui;
}
footer .cf__label--right{ justify-self:end; text-align:right; }
@media (max-width: 820px){
  .cf__middle{ grid-template-columns:1fr; }
  .cf__label--right{ justify-self:start; text-align:left; }
}

footer .cf__chips{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:18px 0 10px; justify-content: center;}
footer .chip{
  display:inline-grid; place-items:center; width:106px; height:38px;
  background:var(--pill); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 6px 14px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.18);
  color:#fff; cursor:default; padding:0 10px;
}
footer .chip--more{ width:auto; padding:0 12px; cursor:pointer; gap:8px; }
footer .chip__logo{ font:800 12px/1 Inter, system-ui; text-transform:uppercase; letter-spacing:.3px; }

.chip__logo--visa{ color:#fff; background:#0a4bc1; padding:6px 12px; border-radius:7px; }
.chip__logo--mc{ color:#fff; background:#1b1b1b; padding:6px 12px; border-radius:7px; }
.chip__logo--maestro{ color:#fff; background:#156dd1; padding:6px 12px; border-radius:7px; }
.chip__logo--pix{ color:#fff; background:#5b38f6; padding:6px 12px; border-radius:7px; }
.chip__logo--apple{ background:#111; padding:6px 12px; border-radius:7px; }
.chip__logo--gpay{ background:#202124; padding:6px 12px; border-radius:7px; }
.chip__logo--skrill{ background:#7a2a7b; padding:6px 12px; border-radius:7px; }
.chip__logo--neteller{ background:#45b649; padding:6px 12px; border-radius:7px; }
.chip__logo--btc{ background:#f7931a; padding:6px 12px; border-radius:7px; }

footer .cf__more{ display:flex; flex-wrap:wrap; gap:12px; margin-top:10px; }

footer .cf__badge{ display:grid; place-items:center; margin:10px 0; }
footer .cf__badge span{
  display:inline-grid; place-items:center;
  width:56px; height:56px; border-radius:50%;
  color:#97b6ff; border:2px solid #97b6ff; font:800 16px/1 Inter, system-ui; opacity:.95;
}

footer .cf__licenses{ display:flex; align-items:center; gap:8px; color:#cfe0ff; margin:8px 0 10px; }
footer .cf__lic{ font:700 13px/1 Inter, system-ui; }
footer .cf__drop{
  width:28px; height:28px; border-radius:8px; border:1px solid var(--line);
  background:var(--pill); color:#fff; display:grid; place-items:center; cursor:pointer;
}
footer .cf__lic-list{
  list-style:none; margin:8px 0 0; padding:8px 10px;
  background:rgba(0,0,0,.2); border:1px solid var(--line); border-radius:10px;
}
footer .cf__lic-list li{ margin:6px 0; }
footer .cf__lic-list a{ color:#d7e6ff; text-decoration:none; font-size:13px; }
footer .cf__lic-list a:hover{ color:#fff; }

footer .cf__legal{ color:var(--muted); font:400 12px/1.6 Inter, system-ui; margin-top:6px; text-align:center; }
footer .cf__copy{ margin:.4rem 0 0; color:#a8b8db }

.slider .slide__content{
  position:relative;
  width:min(92vw, 325px);
  padding:18px 16px 16px;
  border-radius:16px;
  border: 2px solid #0a3b8f;
  background:
    radial-gradient(60% 120% at 50% -10%, rgba(255,255,255,.28), transparent 60%),
    linear-gradient(180deg, #48aaff 0%, #2370eb 60%, #1857c0 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.50),
    inset 0 -3px 12px rgba(8,18,58,.55),
    0 12px 22px rgba(4, 20, 54, .48);
}

.slider .slide__content::after{
  content:"";
  position:absolute; inset:0;
  background:
    url('data:image/svg+xml;utf8,\
    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28">\
      <g fill="none" stroke="%23ffffff" stroke-opacity=".18" stroke-width="2">\
        <circle cx="14" cy="14" r="8"/><path d="M14 1v6M14 21v6M1 14h6M21 14h6M6 6l4 4M22 22l-4-4M22 6l-4 4M6 22l4-4"/>\
      </g></svg>') repeat;
  opacity:.55;
  mix-blend-mode:overlay;
  pointer-events:none;
}

.slider .slide__content:before{
  content:"";
  position:absolute; top:6px; left:6px; width:10px; height:10px; border-radius:50%;
  background:#fff; opacity:.7; filter:blur(.3px);
  box-shadow: 0 0 0 2px rgba(255,255,255,.15), 312px 0 0 0 #fff;
  border:1px solid rgba(255,255,255,.35);
}

.slider .badge{
  position:absolute; top:-14px; left:30%; transform:translateX(-50%);
  display:inline-block; padding:6px 14px 7px;
  background:linear-gradient(180deg, #ff9e3d, #f3721a);
  color:#fff; font:800 12px/1.1 system-ui, -apple-system, Inter, Segoe UI, Roboto;
  text-shadow:0 1px 0 rgba(0,0,0,.25); letter-spacing:.3px; border-radius:8px;
  bottom: inherit;
  right: inherit;
}
.slider .badge::before, .slider .badge::after{
  content:""; position:absolute; top:10px; width:14px; height:12px; background:#f3721a;
}
.slider .badge::before{ right:100%; border-radius:4px 0 0 4px; transform:skewX(-18deg); }
.slider .badge::after{ left:100%; border-radius:0 4px 4px 0; transform:skewX(18deg); }

.slider .slide__title{
  margin:18px 6px 10px;
  color:#ffe16a;
  font:900 clamp(18px, 7vw, 22px)/1.1 "Inter", system-ui, Segoe UI, Roboto, Arial;
  text-align:center;
  text-shadow:
    0 2px 0 rgba(0,0,0,.35),
    0 0 0.7px #0a2c66, 0 0 1.2px #0a2c66,
    0 1.2px 0 #0a2c66, 0 -1.2px 0 #0a2c66, 1.2px 0 0 #0a2c66, -1.2px 0 0 #0a2c66;
  letter-spacing:.3px;
}

.slider .slide__desc{
  margin:0 6px 14px; color:rgba(255,255,255,.9);
  font:600 12px/1.35 Inter, system-ui;
  text-align:center;
}
@media (max-width:420px){ .slider .slide__desc{ display:none; } }

.slider .slide__cta{
  display:grid; gap:10px; place-items:center;
}

.slider .btn{
  appearance:none; border:none; cursor:pointer; border-radius:14px;
  font:900 16px/1 Inter, system-ui; letter-spacing:.6px;
}
.slider .btn--success{
  position:relative;
  width:100%;
  padding:16px 14px;
  color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.35);
  background:
    linear-gradient(180deg, #4bea77 0%, #1fc54a 70%, #19a63f 100%);
  border:2px solid #0a7a2e;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.35),
    inset 0 -3px 8px rgba(0,0,0,.25),
    0 10px 0 #0a2c66, 0 12px 18px rgba(0,0,0,.45);
  text-transform:uppercase;
  transform:translateY(0);
  transition:transform .1s ease, box-shadow .1s ease, filter .2s ease;
}

.slider .btn--success::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
   radial-gradient(circle at 24px 18px, rgba(255,255,255,.95) 0 6px, transparent 6.5px),
   radial-gradient(circle at calc(50% + 22px) 28px, rgba(255,255,255,.95) 0 6px, transparent 6.5px),
   radial-gradient(circle at calc(100% - 28px) 16px, rgba(255,255,255,.95) 0 5.5px, transparent 6px),
   radial-gradient(circle at 24px 18px, #0b0f14 0 4px, transparent 4.2px),
   radial-gradient(circle at calc(50% + 22px) 28px, #0b0f14 0 4px, transparent 4.2px),
   radial-gradient(circle at calc(100% - 28px) 16px, #0b0f14 0 3.6px, transparent 3.8px);
  mix-blend-mode:normal;
  opacity:.9;
}

.slider .btn--success:hover{ filter:saturate(1.1); }
.slider .btn--success:active{
  transform:translateY(2px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.25),
    inset 0 -2px 6px rgba(0,0,0,.3),
    0 8px 0 #0a2c66, 0 10px 14px rgba(0,0,0,.45);
}

.btn--ghost{
  background:transparent; color:#e9f1ff;
  border:2px dashed rgba(255,255,255,.35); padding:10px 14px;
  font-weight:800; text-transform:uppercase;
}
@media (max-width:420px){ .btn--ghost{ display:none; } }

@keyframes popIn{ from{ transform:translateY(8px) scale(.98); opacity:0 } to{ transform:none; opacity:1 } }
[data-anim]{ animation:popIn .35s ease both; }
.badge[data-anim]{ animation-delay:.05s }
.slide__title[data-anim]{ animation-delay:.12s }
.slide__desc[data-anim]{ animation-delay:.18s }
.slide__cta[data-anim]{ animation-delay:.24s }


@media (max-width:768px){
.chips {
  flex-wrap: wrap!important;
  }
}

@media (max-width: 680px) {
    footer .cf__grid {
        grid-template-columns: max-content;
    display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 40px;
    }
}

.seo-content a {color: silver; text-decoration: underline}

.seo-content p {
    margin-bottom: 15px;
}

.seo-content h2 {
    margin-top: 30px;
}

.seo-content {
    margin-inline: clamp(10px, 3vw, 18px);
}
.seo-content a{ color:#d6e4ff; text-decoration: underline; text-underline-offset: 2px; }
.seo-content a:hover{ color:#ffffff; }

.main-404 {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 80px 20px;
    margin: 40px 0;
}

.main-404 .aioseo-breadcrumbs {
    margin-bottom: 40px;
    text-align: center;
}

.page-404 {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.page-404 .title {
    font-size: 120px;
    font-weight: bold;
    color: #333;
    margin: 0 0 20px 0;
    line-height: 1;
}

.page-404 .description {
    font-size: 24px;
    color: #666;
    margin: 0 0 40px 0;
}

.page-404 .btn--primary {
    display: inline-block;
    padding: 15px 30px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 18px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.page-404 .btn--primary:hover {
    background-color: #0056b3;
}

@media (max-width: 768px) {
    .main-404 {
        padding: 60px 15px;
        margin: 20px 0;
        min-height: 50vh;
    }
    
    .page-404 .title {
        font-size: 80px;
    }
    
    .page-404 .description {
        font-size: 20px;
    }
    
    .page-404 .btn--primary {
        padding: 12px 25px;
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .main-404 {
        padding: 40px 10px;
    }
    
    .page-404 .title {
        font-size: 60px;
    }
    
    .page-404 .description {
        font-size: 18px;
    }
    
    .main-404 .aioseo-breadcrumbs {
        margin-bottom: 30px;
    }
}

.main-internal {
    max-width: 1200px;
    margin: 60px auto 40px;
    padding: 0 20px;
    min-height: 60vh;
}

.main-internal .aioseo-breadcrumbs {
    margin-bottom: 25px;
    padding: 10px 0;
}

.main-internal .aioseo-breadcrumb a {
    color: #2a64f6;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.main-internal .aioseo-breadcrumb a:hover {
    color: #333;
    text-decoration: underline;
}

.main-internal .aioseo-breadcrumb-separator {
    color: #999;
    margin: 0 8px;
    font-size: 14px;
}

.main-internal h1 {
    font-size: 36px;
    color: #ffffff;
    margin: 0 0 25px 0;
    line-height: 1.3;
    font-weight: 700;
    padding-top: 20px;
}

.main-internal h2 {
    font-size: 28px;
    color: #ffffff;
    margin: 35px 0 18px 0;
    line-height: 1.4;
    font-weight: 600;
}

.main-internal p {
    font-size: 16px;
    line-height: 1.7;
    color: #ffffff;
    margin: 0 0 20px 0;
    text-align: left;
}

.main-internal a {
    color: #2a64f6;
    text-decoration: none;
    transition: all 0.3s ease;
}

.main-internal a:hover {
    color: #2a64f6;
    text-decoration: underline;
}

.main-internal strong {
    color: #2a64f6;
    font-weight: 600;
}

@media (max-width: 768px) {
    .main-internal {
        margin: 40px auto 30px;
        padding: 0 15px;
    }
    
    .main-internal h1 {
        font-size: 28px;
        margin: 0 0 20px 0;
        padding-top: 15px;
    }
    
    .main-internal h2 {
        font-size: 24px;
        margin: 30px 0 16px 0;
    }
    
    .main-internal p {
        font-size: 15px;
        line-height: 1.6;
        margin: 0 0 18px 0;
    }
    
    .main-internal .aioseo-breadcrumbs {
        margin-bottom: 20px;
    }
}

@media (max-width: 480px) {
    .main-internal {
        margin: 30px auto 20px;
        padding: 0 10px;
    }
    
    .main-internal h1 {
        font-size: 24px;
        margin: 0 0 18px 0;
        padding-top: 10px;
    }
    
    .main-internal h2 {
        font-size: 20px;
        margin: 25px 0 14px 0;
    }
    
    .main-internal p {
        font-size: 14px;
        line-height: 1.6;
    }
    
    .main-internal .aioseo-breadcrumb a,
    .main-internal .aioseo-breadcrumb-separator {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .header__inner {
        padding: 0 10px;
        gap: 8px;
    }
    
    .logo img {
        height: 28px;
    }
    
    .search {
        min-width: 0;
        margin-left: 0;
    }
    
    .search input {
        height: 36px;
        font-size: 14px;
        padding: 0 12px;
    }
    
    .btn {
        padding: 8px 12px;
        font-size: 13px;
        border-radius: 10px;
    }
    
    .btn--icon, .burger {
        width: 36px;
        height: 36px;
    }
    
    .main {
        padding-left: 0;
    }
    
    .section {
        padding: 16px 12px;
    }
    
    .section__title {
        font-size: 18px;
        margin: 16px 0 12px;
    }
    
    .slider {
        min-height: 300px;
    }
    
    .slide__content {
        padding: 14px 12px;
        gap: 8px;
    }
    
    .slide__title {
        font-size: 20px;
    }
    
    .slide__desc {
        font-size: 14px;
    }
    
    .slider__arrow {
        width: 36px;
        height: 36px;
    }
    
    .grid.games {
        --min: 140px;
        gap: 10px;
    }
    
    .card.game .game__title {
        padding: 8px 10px;
        font-size: 13px;
    }
    
    .chips {
        padding: 12px 4px 4px;
        gap: 6px;
    }
    
    .chip {
        padding: 6px 10px;
        font-size: 13px;
    }
    
    .chip .ci {
        width: 14px;
        height: 14px;
    }
    
    .strip {
        margin: 20px 0 30px;
    }
    
    .strip__title {
        font-size: 20px;
    }
    
    .strip__rail {
        padding-inline: 8px;
        gap: 10px;
    }
    
    :root {
        --card-w: 160px;
    }
    
    .game-card {
        border-radius: 12px;
    }
    
    footer .casino-footer {
        padding: 24px 12px 16px;
    }
    
    .cf__grid {
        gap: 20px;
    }
    
    .cf__middle {
        padding: 16px 0;
        margin: 16px 0 8px;
    }
    
    .cf__label {
        font-size: 13px;
    }
    
    footer .chip {
        width: 90px;
        height: 34px;
        font-size: 11px;
    }
    
    .promo-card {
        border-radius: 14px;
    }
    
    .promo-body {
        padding: 16px 14px 20px;
    }
    
    .promo-ribbon {
        padding: 6px 12px;
        top: -16px;
        font-size: 14px;
    }
    
    .promo-title {
        font-size: 22px;
        -webkit-text-stroke: 1px rgba(10,25,55,.45);
    }
    
    .promo-cta {
        padding: 12px 20px;
        font-size: 16px;
        border-radius: 14px;
    }
    
    .btn {
        padding: 10px 16px;
        font-size: 14px;
        border-radius: 10px;
    }
    
    body {
        font-size: 14px;
        line-height: 1.4;
    }
    
    .container {
        width: 100%;
        overflow-x: hidden;
    }
    
    .search {
        grid-template-columns: 1fr;
    }
    
    .search input {
        min-width: 0;
    }
    
    .header__actions {
        gap: 6px;
    }
    
    footer .cf__chips {
        gap: 8px;
    }
    
    footer .chip {
        flex-shrink: 0;
    }
}

@media (max-width: 360px) {
    .header__inner {
        grid-template-columns: auto 1fr;
        gap: 6px;
    }
    
    .search {
        grid-column: 1 / -1;
        order: 3;
        margin-top: 8px;
    }
    
    .header__actions {
        justify-self: end;
    }
    
    .grid.games {
        --min: 130px;
        gap: 8px;
    }
    
    :root {
        --card-w: 150px;
    }
    
    .strip__rail {
        padding-inline: 6px;
        gap: 8px;
    }
    
    footer .chip {
        width: 80px;
        height: 32px;
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .btn, 
    .chip, 
    .strip__arrow, 
    .slider__arrow,
    .game-card {
        min-height: 44px;
    }
    
    .btn--icon, 
    .burger {
        min-width: 44px;
        min-height: 44px;
    }
}

@media (max-width: 480px) {
    .main-internal h1 {
        font-size: 22px;
        line-height: 1.2;
    }
    
    .main-internal h2 {
        font-size: 18px;
        line-height: 1.3;
    }
    
    .main-internal p {
        font-size: 14px;
        line-height: 1.5;
    }
}

@media (max-width: 480px) {
    .seo-content {
        margin-inline: 8px;
    }
    
    .seo-content h2 {
        margin-top: 20px;
        font-size: 18px;
    }
    
    .seo-content p {
        margin-bottom: 12px;
    }
}