* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: #11182d;
    color: #e8edff;
    font: 16px/1.75 system-ui, -apple-system, Segoe UI, sans-serif
}

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

.rb-top {
    height: 82px;
    position: sticky;
    top: 0;
    z-index: 20;
    background: #1a213b;
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 0 5%;
    border-bottom: 1px solid #2b3556
}

.rb-brand {
    font-size: 30px;
    font-weight: 900;
    letter-spacing: -2px;
    font-style: italic;
    color: white
}

.rb-brand-icon {
    color: #42b6ff;
    font-style: normal;
    margin-right: 8px
}

.rb-nav {
    display: flex;
    gap: 32px;
    margin-right: auto
}

.rb-nav a {
    color: #c5cfe9
}

.rb-actions {
    display: flex;
    gap: 12px;
    align-items: center
}

.rb-login,
.rb-outline {
    border: 1px solid #53668c;
    padding: 12px 22px;
    border-radius: 10px
}

.rb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #138bea;
    color: #fff;
    border-radius: 10px;
    padding: 13px 25px;
    font-weight: 750;
    box-shadow: 0 6px 20px #0078e433
}

.rb-btn:hover {
    background: #34a7ff
}

.rb-layout {
    display: grid;
    grid-template-columns: 238px minmax(0, 1fr)
}

.rb-side {
    padding: 28px 16px;
    background: #171f38;
    border-right: 1px solid #2a3454;
    display: flex;
    flex-direction: column;
    gap: 7px
}

.rb-side-head {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #7f9ac8;
    margin: 0 10px 16px
}

.rb-side>a {
    padding: 12px 15px;
    border-radius: 9px;
    color: #c8d5f3
}

.rb-side>a:hover {
    background: #283b5f
}

.rb-side-promo {
    background: linear-gradient(145deg, #163f85, #17213d);
    border: 1px solid #315c9d;
    border-radius: 16px;
    padding: 22px;
    margin-top: 35px;
    display: grid;
    gap: 14px
}

.rb-side-promo small {
    color: #74caff;
    letter-spacing: 2px
}

.rb-side-promo strong {
    font-size: 24px;
    line-height: 1.3
}

.rb-side-promo a {
    background: #26bb72;
    text-align: center;
    border-radius: 8px;
    padding: 10px;
    font-weight: 800
}

.rb-main {
    min-width: 0
}

.rb-hero {
    background: radial-gradient(circle at 85% 40%, #243c80 0%, transparent 45%), linear-gradient(125deg, #111b3c, #1b2246);
    padding: 70px max(5%, 30px);
    align-items: center;
    border-bottom: 1px solid #34466f
}

.rb-eyebrow {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #78c5ff
}

.rb-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    background: #2edb86;
    border-radius: 50%
}

.rb-hero h1 {
    font-size: clamp(34px, 4.1vw, 63px);
    line-height: 1.12;
    letter-spacing: -2px;
    margin: 24px 0
}

.rb-hero-copy>p {
    color: #c6d1ed;
    font-size: 18px
}

.rb-hero-buttons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin: 28px 0 42px
}

.rb-stats {
    display: flex;
    gap: 32px;
    flex-wrap: wrap
}

.rb-stats div {
    display: grid;
    line-height: 1.4
}

.rb-stats strong {
    font-size: 22px;
    color: #fff
}

.rb-stats span {
    font-size: 12px;
    color: #9eafcf
}

.rb-hero-art {
    background: linear-gradient(150deg, #0e65b7, #12336e 65%, #101d42);
    border: 1px solid #3976b6;
    padding: 25px;
    border-radius: 24px;
    transform: rotate(2deg);
    box-shadow: 0 20px 60px #050c20a0
}

.rb-art-heading {
    font-size: 23px;
    font-weight: 900;
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 25px
}

.rb-art-heading em {
    color: #40d79d
}

.rb-game-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.rb-game-grid div {
    min-height: 125px;
    border-radius: 13px;
    background: linear-gradient(145deg, #2053a1, #0d2b5d);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    border: 1px solid #4279b6
}

.rb-game-grid span {
    font-size: 14px;
    font-weight: 750
}

.rb-feature-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    background: #202d4d;
    padding: 16px 5%;
    font-weight: 700
}

.rb-feature-strip a {
    color: #5ec5ff
}

.rb-article {
    max-width: 1050px;
    padding: 40px 5% 75px;
    margin: auto
}

.rb-article h2 {
    font-size: clamp(25px, 2.5vw, 35px);
    line-height: 1.25;
    margin: 55px 0 18px;
    color: #fff;
    letter-spacing: -.7px;
    border-left: 4px solid #25a7ff;
    padding-left: 18px
}

.rb-article h3 {
    font-size: 22px;
    color: #91d4ff;
    margin: 35px 0 12px
}

.rb-article p {
    color: #cbd5ec;
    margin: 0 0 20px
}

.rb-lead {
    font-size: 18px !important;
    color: #e2eaff !important
}

.rb-article ul,
.rb-article ol {
    padding-left: 25px;
    color: #cbd5ec;
    margin: 12px 0 26px
}

.rb-article li {
    padding: 5px 0
}

.rb-inline-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: #202d4b;
    border: 1px solid #334b78;
    border-radius: 13px;
    padding: 20px 24px;
    margin: 28px 0
}

.rb-inline-cta span {
    font-weight: 800
}

.rb-inline-cta a {
    background: #2ec57b;
    color: #071d24;
    padding: 11px 18px;
    border-radius: 8px;
    font-weight: 800
}

.rb-table-scroll {
    overflow-x: auto;
    margin: 25px 0
}

table {
    border-collapse: collapse;
    width: 100%;
    min-width: 530px
}

td,
th {
    padding: 16px;
    border: 1px solid #354869;
    text-align: left
}

tr:nth-child(odd) {
    background: #1e2a46
}

th {
    background: #1c4d83
}

.rb-bottom-cta {
    margin: 0 5% 40px;
    padding: 45px;
    background: linear-gradient(120deg, #174d94, #1b2850);
    border: 1px solid #3479b9;
    border-radius: 20px;
    text-align: center
}

.rb-bottom-cta h2 {
    font-size: 32px;
    margin: 0
}

.rb-bottom-cta p {
    color: #c8d6f4
}

.rb-footer {
    padding: 30px 5%;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    color: #a4b4d0;
    border-top: 1px solid #34405f;
    font-size: 13px
}

@media(max-width:1050px) {
    .rb-layout {
        grid-template-columns: 1fr
    }

    .rb-side {
        display: none
    }

    .rb-hero {
        grid-template-columns: 1fr
    }

    .rb-hero-art {
        max-width: 550px;
        transform: none
    }

    .rb-nav {
        margin-right: auto
    }
}

@media(max-width:600px) {
    .rb-top {
        height: 68px;
        padding: 0 16px;
        gap: 12px
    }

    .rb-brand {
        font-size: 25px
    }

    .rb-nav,
    .rb-login {
        display: none
    }

    .rb-actions {
        margin-left: auto
    }

    .rb-btn {
        padding: 11px 15px;
        font-size: 13px
    }

    .rb-hero {
        padding: 45px 20px
    }

    .rb-hero h1 {
        letter-spacing: -1px
    }

    .rb-hero-art {
        padding: 14px
    }

    .rb-game-grid div {
        min-height: 90px;
        font-size: 30px
    }

    .rb-stats {
        gap: 18px
    }

    .rb-feature-strip {
        justify-content: flex-start;
        padding: 16px 20px
    }

    .rb-article {
        padding: 15px 20px 55px
    }

    .rb-article h2 {
        margin-top: 40px
    }

    .rb-bottom-cta {
        padding: 25px 18px
    }

    .rb-footer {
        padding: 24px 20px
    }
}