.langswitch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    border: 1px solid var(--glass-stroke);
    background: #0d0d4b66;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px)
}

.langswitch__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding: .32rem .7rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text-mute);
    text-decoration: none;
    transition: color .2s var(--ease-out), background .2s var(--ease-out)
}

a.langswitch__item:hover {
    color: var(--text)
}

.langswitch__item.is-active {
    color: var(--navy-900);
    background: var(--cyan);
    box-shadow: 0 0 14px #16e9d766
}

.hud {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 1rem var(--gutter);
    background: linear-gradient(180deg, rgba(6, 6, 31, .5), transparent);
    border-bottom: 1px solid transparent;
    transition: padding .3s var(--ease-out), background .3s var(--ease-out), border-color .3s var(--ease-out)
}

.hud.is-scrolled {
    padding: .6rem var(--gutter);
    background: linear-gradient(180deg, #06061fe6, #06061f8c);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    border-bottom: 1px solid var(--glass-stroke)
}

.hud__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem
}

.hud__brand {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-width: 0
}

.hud__logo {
    height: 30px;
    width: auto
}

@media (max-width: 560px) {
    .hud__logo {
        height: 24px
    }
}

.hud__lockup {
    display: inline-flex;
    align-items: center;
    gap: .5rem
}

.hud__wordmark {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -.01em;
    color: var(--text);
    white-space: nowrap
}

.hud__wordmark-accent {
    color: var(--brand);
    text-shadow: 0 0 14px rgba(46, 123, 255, .5)
}

.hud__nav {
    display: flex;
    align-items: center;
    gap: 1.6rem
}

.hud__link {
    position: relative;
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-mute);
    transition: color .2s var(--ease-out)
}

.hud__link:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 1px;
    background: var(--brand);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s var(--ease-out)
}

.hud__link:hover {
    color: var(--text)
}

.hud__link:hover:after {
    transform: scaleX(1)
}

.hud__right {
    display: flex;
    align-items: center;
    gap: .9rem
}

.hud__eq {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 16px
}

.hud__eq i {
    width: 3px;
    background: var(--brand);
    border-radius: 2px;
    animation: eq-bounce 1.1s ease-in-out infinite
}

.hud__eq i:nth-child(1) {
    height: 40%;
    animation-delay: 0s
}

.hud__eq i:nth-child(2) {
    height: 100%;
    animation-delay: .2s
}

.hud__eq i:nth-child(3) {
    height: 60%;
    animation-delay: .4s
}

.hud__eq i:nth-child(4) {
    height: 80%;
    animation-delay: .1s
}

@keyframes eq-bounce {

    0%,
    to {
        transform: scaleY(.4);
        opacity: .6
    }

    50% {
        transform: scaleY(1);
        opacity: 1
    }
}

.hud__divider {
    width: 1px;
    height: 20px;
    background: var(--glass-stroke-strong)
}

.hud__tag {
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-mute);
    white-space: nowrap
}

.hud__status {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .8rem;
    border-radius: 999px;
    border: 1px solid var(--glass-stroke-strong);
    background: #2e7bff14;
    font-family: var(--font-mono);
    font-size: .66rem;
    letter-spacing: .16em;
    color: var(--text);
    white-space: nowrap;
    flex-shrink: 0
}

.hud__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 8px var(--brand-glow);
    animation: hud-pulse 2.2s ease-in-out infinite
}

@keyframes hud-pulse {

    0%,
    to {
        opacity: 1;
        box-shadow: 0 0 6px var(--brand-glow)
    }

    50% {
        opacity: .45;
        box-shadow: 0 0 14px var(--brand-glow)
    }
}

@media (max-width: 900px) {
    .hud__nav {
        display: none
    }
}

@media (max-width: 560px) {

    .hud__divider,
    .hud__tag,
    .hud__eq,
    .hud__status-text {
        display: none
    }

    .hud__status {
        padding: .4rem
    }
}

@media (prefers-reduced-motion: reduce) {

    .hud__dot,
    .hud__eq i {
        animation: none
    }
}

.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    padding-block: clamp(6rem, 12vh, 9rem) clamp(5rem, 9vh, 7.5rem);
    padding-inline: var(--gutter);
    overflow: hidden;
    background: var(--navy-900)
}

.hero__bgimg {
    position: absolute;
    top: clamp(68px, 8vh, 96px);
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    z-index: 0
}

.hero__scrim {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(0deg, #04040ff2, #04040f8c 24%, #04040f00 50%), radial-gradient(120% 70% at 50% 120%, rgba(4, 4, 15, .6), transparent 60%)
}

.hero__overlay {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(1.5rem, 5vw, 4rem)
}

.hero__heading-col {
    text-align: left;
    max-width: 48%
}

.hero__eyebrow {
    margin-bottom: .8rem
}

.hero__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.9rem, 4.6vw, 4.2rem);
    line-height: 1.02;
    letter-spacing: -.03em;
    color: var(--text);
    text-shadow: 0 2px 18px rgba(0, 0, 0, .6)
}

html[lang=ar] .hero__title{
    text-align: right;
}


.hero__line {
    display: block
}

html[lang=cn] .hero__title,
html[lang=tw] .hero__title {
    font-size: clamp(1.5rem, 3.4vw, 3rem)
}

@media (min-width: 821px) {

    html[lang=cn] .hero__title,
    html[lang=tw] .hero__title {
        white-space: nowrap
    }
}

.hero__content-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 1rem;
    max-width: 44%
}

html[lang=ar] .hero__content-col{
    align-items: flex-start;
}

.hero__sub {
    font-size: clamp(.98rem, 1.5vw, 1.18rem);
    line-height: 1.55;
    color: var(--text);
    text-shadow: 0 2px 12px rgba(0, 0, 0, .7);
    max-width: 42ch
}

html[lang=cn] .hero__sub,
html[lang=tw] .hero__sub {
    white-space: pre-line;
    max-width: none
}

.hero__chip {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem .7rem;
    padding: .55rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--glass-stroke);
    background: #0d0d4b66;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px)
}

.hero__chip-label {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--brand)
}

.hero__chip-value {
    font-size: .8rem;
    color: var(--text)
}

.hero__chip-state {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--navy-900);
    background: var(--cyan);
    padding: .16rem .5rem;
    border-radius: 999px
}

.hero__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .8rem 1.7rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .98rem;
    color: var(--navy-900);
    background: linear-gradient(180deg, #5cf4e6 0%, var(--cyan) 45%, #0fb8aa 100%);
    box-shadow: 0 8px 22px #16e9d766, inset 0 1px #fff9;
    transition: transform .18s var(--ease-out), box-shadow .25s var(--ease-out)
}

.hero__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px #16e9d78c, inset 0 1px #ffffffb3
}

.hero__cta-arrow {
    font-size: 1.1rem;
    transition: transform .2s var(--ease-out)
}

.hero__cta:hover .hero__cta-arrow {
    transform: translate(4px)
}

.hero__fw {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    pointer-events: none
}

.hero__firework {
    position: absolute;
    width: 0;
    height: 0
}

.hero__fw-flash {
    position: absolute;
    top: 0;
    left: 0;
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    border-radius: 50%;
    background: radial-gradient(closest-side, #fff, currentColor 45%, transparent 75%);
    opacity: 0;
    animation: hero-fw-flash 5s ease-out infinite;
    animation-delay: var(--d)
}

@keyframes hero-fw-flash {
    0% {
        transform: scale(.2);
        opacity: 0
    }

    2% {
        opacity: 1
    }

    10% {
        transform: scale(1.3);
        opacity: .9
    }

    20% {
        transform: scale(1.6);
        opacity: 0
    }

    to {
        opacity: 0
    }
}

.hero__fw-spark {
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px #fff, 0 0 14px currentColor, 0 0 22px currentColor;
    --a: calc(360deg / 16 * var(--i));
    transform: rotate(var(--a)) translate(0) scale(.6);
    opacity: 0;
    animation: hero-fw 5s ease-out infinite;
    animation-delay: var(--d)
}

@keyframes hero-fw {
    0% {
        transform: rotate(var(--a)) translate(4px) scale(.6);
        opacity: 0
    }

    3% {
        opacity: 1
    }

    16% {
        transform: rotate(var(--a)) translate(calc(var(--r) * .85)) scale(1.05);
        opacity: 1
    }

    26% {
        transform: rotate(var(--a)) translate(var(--r)) scale(.25);
        opacity: 0
    }

    to {
        transform: rotate(var(--a)) translate(var(--r)) scale(.25);
        opacity: 0
    }
}

.hero__cursor-fw {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    pointer-events: none
}

.hero__burst {
    position: absolute;
    width: 0;
    height: 0
}

.hero__burst-flash {
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border-radius: 50%;
    background: radial-gradient(closest-side, #fff, currentColor 45%, transparent 75%);
    animation: burst-flash .5s ease-out forwards
}

@keyframes burst-flash {
    0% {
        transform: scale(.2);
        opacity: 0
    }

    15% {
        opacity: 1
    }

    to {
        transform: scale(1.7);
        opacity: 0
    }
}

.hero__burst-spark {
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px #fff, 0 0 12px currentColor;
    --a: calc(360deg / 14 * var(--i));
    transform: rotate(var(--a)) translate(2px) scale(.7);
    animation: burst-spark .85s ease-out forwards
}

@keyframes burst-spark {
    0% {
        transform: rotate(var(--a)) translate(2px) scale(.7);
        opacity: 0
    }

    12% {
        opacity: 1
    }

    to {
        transform: rotate(var(--a)) translate(74px) scale(.2);
        opacity: 0
    }
}

.hero__ticker {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3
}

@media (max-width: 820px) {
    .hero {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        min-height: 0;
        padding: calc(56px + .85rem) 0 2.75rem;
        gap: clamp(1.5rem, 5vw, 2.25rem)
    }

    .hero__bgimg {
        position: static;
        top: auto;
        width: 100%;
        height: auto;
        object-fit: fill
    }

    .hero__scrim,
    .hero__fw {
        display: none
    }

    .hero__overlay {
        flex-direction: column;
        align-items: stretch;
        gap: 1.25rem;
        padding-inline: var(--gutter)
    }

    .hero__heading-col,
    .hero__content-col {
        width: 100%;
        max-width: 100%
    }

    .hero__content-col {
        align-items: flex-start;
        text-align: left
    }

    .hero__sub {
        max-width: 100%
    }

    .hero__chip {
        justify-content: flex-start;
        max-width: 100%
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero__cta:hover {
        transform: none
    }
}

.medal {
    --m1: #d6dde2;
    --m2: var(--silver);
    --m3: #6f767c;
    position: relative;
    display: grid;
    place-items: center;
    filter: drop-shadow(0 5px 12px rgba(0, 0, 0, .45))
}

.medal--silver {
    --m1: #eef1f3;
    --m2: var(--silver);
    --m3: #6f767c
}

.medal--sand {
    --m1: #f2e2cf;
    --m2: var(--sand);
    --m3: #a98a6a
}

.medal--gold {
    --m1: #fff1c2;
    --m2: #e8c45a;
    --m3: #a87d1e
}

.medal--img {
    object-fit: contain
}

.medal__ribbon {
    position: absolute;
    top: -6px;
    width: 16px;
    height: 42%;
    background: linear-gradient(180deg, var(--blue), var(--navy-700));
    z-index: 0
}

.medal__ribbon--l {
    left: 32%;
    transform: rotate(14deg)
}

.medal__ribbon--r {
    right: 32%;
    transform: rotate(-14deg)
}

.medal__disc {
    position: relative;
    width: 78%;
    height: 78%;
    border-radius: 50%;
    overflow: hidden;
    z-index: 1;
    background: radial-gradient(circle at 36% 30%, var(--m1) 0%, var(--m2) 48%, var(--m3) 100%);
    box-shadow: inset -6px -8px 16px #00000073, inset 5px 6px 12px #ffffff80
}

.medal__rim {
    position: absolute;
    top: 7%;
    right: 7%;
    bottom: 7%;
    left: 7%;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .35)
}

.medal__num {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    place-items: center;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 1.5rem;
    color: #1c1f2ab3;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .4)
}

.medal__gloss {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 80%;
    height: 55%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .85), transparent 70%);
    filter: blur(1px)
}

.medal__sweep {
    position: absolute;
    top: -20%;
    left: -60%;
    width: 40%;
    height: 140%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent);
    transform: skew(-18deg);
    animation: medal-sweep 5s ease-in-out infinite
}

@keyframes medal-sweep {

    0%,
    60% {
        left: -60%;
        opacity: 0
    }

    68% {
        opacity: 1
    }

    92%,
    to {
        left: 120%;
        opacity: 0
    }
}

@media (prefers-reduced-motion: reduce) {
    .medal__sweep {
        animation: none;
        opacity: 0
    }
}

.champions {
    position: relative;
    overflow: hidden
}

.champions__spotlights {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    pointer-events: none;
    z-index: 0
}

.champions__beam {
    position: absolute;
    bottom: -10%;
    width: 22%;
    height: 90%;
    background: linear-gradient(180deg, transparent, rgba(22, 233, 215, .16));
    filter: blur(28px);
    transform-origin: bottom center;
    opacity: .7;
    animation: beam-sway 7s ease-in-out infinite alternate
}

.champions__beam--1 {
    left: 22%;
    transform: rotate(8deg);
    background: linear-gradient(180deg, transparent, rgba(0, 71, 187, .2))
}

.champions__beam--2 {
    left: 50%;
    transform: translate(-50%);
    height: 100%;
    background: linear-gradient(180deg, transparent, rgba(172, 124, 89, .22));
    animation-delay: .6s
}

.champions__beam--3 {
    right: 22%;
    transform: rotate(-8deg);
    background: linear-gradient(180deg, transparent, rgba(22, 233, 215, .16));
    animation-delay: 1.1s
}

@keyframes beam-sway {
    0% {
        opacity: .35
    }

    to {
        opacity: .85
    }
}

.champions .container {
    position: relative;
    z-index: 1
}

.champions__intro {
    text-align: center;
    max-width: 60ch;
    margin: 0 auto clamp(3rem, 7vw, 5rem);
    display: flex;
    flex-direction: column;
    align-items: center
}

.champions__eyebrow {
    margin-top: .8rem;
    margin-bottom: .9rem
}

.champions__placeholder {
    display: inline-block;
    margin: 1.4rem auto 0;
    padding: .6rem 1.2rem;
    font-family: var(--font-mono);
    font-size: .92rem;
    letter-spacing: .04em;
    color: var(--cyan);
    background: #16e9d712;
    border: 1px dashed var(--glass-stroke-strong);
    border-radius: 999px
}

.champions__body {
    margin-top: 1.4rem;
    font-size: var(--fs-lead);
    color: var(--text-mute)
}

html[lang=cn] .champions__placeholder,
html[lang=tw] .champions__placeholder {
    white-space: nowrap
}

html[lang=cn] .champions__body,
html[lang=tw] .champions__body {
    white-space: pre-line
}

.podium {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: end;
    gap: clamp(.75rem, 2.5vw, 2rem);
    perspective: 1200px
}

.podium__col {
    display: flex;
    flex-direction: column;
    align-items: center
}

.is-second {
    order: 1
}

.is-first {
    order: 2
}

.is-third {
    order: 3
}

.podium__crown {
    display: grid;
    place-items: center;
    margin-bottom: .5rem;
    min-height: 96px
}

.is-first .podium__crown {
    min-height: 108px
}

.prize-card {
    --rx: 0deg;
    --ry: 0deg;
    --mx: 50%;
    position: relative;
    width: 100%;
    padding: 1.4rem 1.3rem 1.5rem;
    overflow: hidden;
    transform: perspective(800px) rotateX(var(--rx)) rotateY(var(--ry));
    transform-style: preserve-3d;
    transition: transform .18s var(--ease-out), box-shadow .3s var(--ease-out)
}

.is-first .prize-card {
    border-color: #ac7c598c;
    background: linear-gradient(180deg, #ac7c5929, #0d0d4b4d);
    box-shadow: 0 0 38px #ac7c5947
}

.is-second .prize-card {
    border-color: #a0a8ae66
}

.is-third .prize-card {
    border-color: #dfc5ae5c
}

.prize-card__head {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-bottom: 1.1rem
}

.prize-card__rank {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--navy-900);
    background: var(--silver)
}

.is-first .prize-card__rank {
    background: linear-gradient(135deg, var(--bronze-hi), var(--bronze));
    box-shadow: 0 0 14px #ac7c5980
}

.is-third .prize-card__rank {
    background: var(--sand)
}

.prize-card__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.1;
    color: var(--text)
}

.prize-card__meta {
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .06em;
    color: var(--text-mute);
    margin-top: .2rem
}

.prize-card__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .6rem
}

.prize-card__item {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .95rem;
    color: var(--text)
}

.prize-card__bullet {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    margin-top: .5rem;
    border-radius: 2px;
    background: var(--cyan);
    box-shadow: 0 0 8px var(--cyan-glow)
}

.prize-card__meter {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: .4rem .6rem;
    margin-top: 1.3rem;
    padding-top: 1rem;
    border-top: 1px solid var(--glass-stroke)
}

.prize-card__meter-label {
    grid-column: 1 / 2;
    font-family: var(--font-mono);
    font-size: .58rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-mute)
}

.prize-card__meter-val {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    align-self: center;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--cyan)
}

.prize-card__meter-track {
    grid-column: 1 / 2;
    height: 6px;
    border-radius: 999px;
    background: #08081eb3;
    overflow: hidden
}

.prize-card__meter-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--blue), var(--cyan));
    box-shadow: 0 0 10px var(--cyan-glow)
}

.is-first .prize-card__meter-fill {
    background: linear-gradient(90deg, var(--bronze), var(--bronze-hi));
    box-shadow: 0 0 10px #e6c9a880
}

.is-first .prize-card__meter-val {
    color: var(--bronze-hi)
}

.winners {
    margin-top: 1.3rem;
    padding-top: 1rem;
    border-top: 1px solid var(--glass-stroke)
}

.winners__label {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-mono);
    font-size: .58rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-mute);
    margin-bottom: .7rem
}

.winners__count {
    display: inline-grid;
    place-items: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 .35rem;
    border-radius: 999px;
    font-size: .62rem;
    color: var(--text);
    background: #2e7bff2e;
    border: 1px solid var(--glass-stroke-strong)
}

.winners__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem
}

.winner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .5rem .75rem;
    border-radius: var(--r-md, 12px);
    border: 1px solid var(--glass-stroke);
    background: linear-gradient(180deg, #0d0d4b59, #06061f73)
}

.winner__id {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-width: 0
}

.winner__icon {
    flex-shrink: 0;
    color: var(--text-mute)
}

.winner__id-label {
    font-family: var(--font-mono);
    font-size: .6rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-mute)
}

.winner__id-val {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .02em;
    color: var(--text)
}

.winner__rate {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    flex-shrink: 0
}

.winner__rate-label {
    font-family: var(--font-mono);
    font-size: .56rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-mute)
}

.winner__rate-val {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: .85rem;
    color: var(--cyan)
}

.winner__rate-val.is-empty {
    color: var(--text-mute);
    opacity: .6
}

.is-first .winner__rate-val:not(.is-empty) {
    color: var(--bronze-hi)
}

.prize-card__shine {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .14) 50%, transparent 65%);
    background-size: 250% 100%;
    background-position: var(--mx) 0;
    opacity: 0;
    transition: opacity .3s var(--ease-out)
}

.prize-card:hover .prize-card__shine {
    opacity: 1
}

.podium__block {
    position: relative;
    width: 100%;
    margin-top: 1.1rem;
    border-radius: var(--r-md) var(--r-md) 0 0;
    border: 1px solid var(--glass-stroke);
    border-bottom: 0;
    background: linear-gradient(180deg, #0d0d4b99, #06061f33);
    display: grid;
    place-items: center
}

.is-first .podium__block {
    height: clamp(96px, 14vw, 150px);
    background: linear-gradient(180deg, #ac7c5959, #06061f33);
    border-color: #ac7c5980
}

.is-second .podium__block {
    height: clamp(64px, 9vw, 100px)
}

.is-third .podium__block {
    height: clamp(48px, 7vw, 78px)
}

.podium__place-num {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 3.4rem);
    color: #dae3ed1f
}

@media (max-width: 720px) {
    .podium {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 1.5rem
    }

    .is-first,
    .is-second,
    .is-third {
        order: 0
    }

    .podium__col {
        order: 0 !important
    }

    .is-first {
        order: -1 !important
    }

    .podium__block {
        display: none
    }

    .is-first .podium__crown,
    .podium__crown {
        min-height: 0;
        margin-bottom: .75rem
    }
}

.road {
    position: relative;
    overflow: hidden
}

.road__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: clamp(2.5rem, 6vw, 4.5rem)
}

.road__eyebrow {
    margin-top: .8rem;
    margin-bottom: .9rem
}

.road__curve {
    position: relative;
    width: 100%;
    max-width: 1040px;
    margin-inline: auto;
    aspect-ratio: 1000 / 540
}

html[lang=ar] .road__curve{
    direction: ltr;
}

.road__svg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible
}

.road__sparks {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none
}

.road__spark {
    position: absolute;
    width: calc(6px * var(--s, 1));
    height: calc(6px * var(--s, 1));
    background: #fff;
    border-radius: 1px;
    transform: translate(-50%, -50%) rotate(45deg);
    box-shadow: 0 0 8px var(--cyan-glow);
    opacity: .2;
    animation: spark-twinkle 3.2s ease-in-out infinite;
    animation-delay: var(--d, 0s)
}

.road__spark:before,
.road__spark:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: inherit
}

@keyframes spark-twinkle {

    0%,
    to {
        opacity: .15;
        transform: translate(-50%, -50%) rotate(45deg) scale(.7)
    }

    50% {
        opacity: .9;
        transform: translate(-50%, -50%) rotate(45deg) scale(1)
    }
}

.road__comet {
    filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 12px var(--cyan))
}

.road__item {
    position: absolute;
    width: 0;
    height: 0
}

.road__node {
    position: absolute;
    left: 0;
    top: 0;
    width: 46px;
    height: 46px;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #16e9d773, #0047bb59 60%, #06061fd9);
    border: 1.5px solid var(--cyan);
    box-shadow: 0 0 16px #16e9d780, inset 0 0 12px #16e9d740;
    z-index: 2
}

.road__node-core {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: .92rem;
    color: var(--text);
    text-shadow: 0 0 8px var(--cyan-glow)
}

.road__node-ring {
    position: absolute;
    top: -7px;
    right: -7px;
    bottom: -7px;
    left: -7px;
    border-radius: 50%;
    border: 1px solid rgba(22, 233, 215, .4);
    animation: node-ping 2.6s ease-out infinite
}

@keyframes node-ping {
    0% {
        transform: scale(.85);
        opacity: .8
    }

    70%,
    to {
        transform: scale(1.5);
        opacity: 0
    }
}

.road__node--champ {
    width: 116px;
    height: 116px;
    border-color: var(--bronze-hi);
    background: radial-gradient(circle at 50% 60%, #16e9d759, #0047bb66 45%, #06061feb 78%);
    box-shadow: 0 0 30px #16e9d780, 0 0 60px #0047bb66, inset 0 0 20px #78c8ff59;
    overflow: visible
}

.road__champ-trophy {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 66%;
    width: auto;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .6)) drop-shadow(0 0 10px rgba(22, 233, 215, .45));
    animation: champ-trophy-float 5s ease-in-out infinite
}

@keyframes champ-trophy-float {

    0%,
    to {
        transform: translate(-50%, -50%)
    }

    50% {
        transform: translate(-50%, calc(-50% - 4px))
    }
}

.road__node--champ .road__node-ring {
    border-color: #e6c9a899
}

.road__champ-sparks {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none
}

.road__champ-spark {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    border-radius: 1px;
    background: var(--bronze-hi);
    box-shadow: 0 0 8px #e6c9a8b3;
    --angle: calc(360deg / var(--n) * var(--i));
    transform: rotate(var(--angle)) translate(0);
    opacity: 0
}

.road__champ-spark:nth-child(odd) {
    background: var(--cyan);
    box-shadow: 0 0 8px var(--cyan-glow)
}

.is-lit .road__champ-spark {
    animation: champ-spark-burst 1.2s var(--ease-out) 1.3s forwards
}

@keyframes champ-spark-burst {
    0% {
        transform: rotate(var(--angle)) translate(0) scale(.4);
        opacity: 0
    }

    30% {
        opacity: 1
    }

    to {
        transform: rotate(var(--angle)) translate(64px) scale(0);
        opacity: 0
    }
}

.road__card {
    position: absolute;
    left: 0;
    top: 0;
    width: clamp(154px, 17vw, 200px);
    padding: .85rem .95rem;
    border-radius: var(--r-md);
    text-align: left
}

.road__stage-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: .54rem;
    letter-spacing: .18em;
    color: var(--cyan);
    margin-bottom: .35rem
}

.road__stage-tag--gold {
    color: var(--bronze-hi)
}

.road__name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: -.01em;
    color: var(--text);
    line-height: 1.1;
    margin-bottom: .45rem
}

.road__split {
    font-family: var(--font-mono);
    font-size: .6rem;
    line-height: 1.5;
    color: var(--text-mute)
}

.road__status {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .55rem;
    padding: .18rem .5rem;
    border-radius: 999px;
    border: 1px solid var(--glass-stroke-strong);
    background: #16e9d714;
    font-family: var(--font-mono);
    font-size: .56rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cyan)
}

.road__check {
    width: 11px;
    height: 11px
}

.road__status--gold {
    color: var(--bronze-hi);
    border-color: #e6c9a880;
    background: #ac7c5929
}

.road__card--champ {
    width: clamp(170px, 18vw, 210px);
    background: linear-gradient(180deg, #ac7c5933, #0d0d4b66);
    border-color: #e6c9a866
}

.road__item--above.road__item--center .road__card {
    transform: translate(-50%, calc(-100% - 32px))
}

.road__item--below.road__item--center .road__card {
    transform: translate(-50%, 32px)
}

.road__item--below.road__item--left .road__card {
    transform: translate(-8%, 32px)
}

.road__item--above.road__item--right .road__card {
    transform: translate(-88%, calc(-100% - 36px))
}

@media (max-width: 860px) {
    .road__curve {
        aspect-ratio: auto;
        height: auto;
        max-width: 480px;
        display: flex;
        flex-direction: column;
        gap: 1.4rem;
        padding-left: 1.5rem
    }

    .road__curve:before {
        content: "";
        position: absolute;
        left: calc(1.5rem + 22px);
        top: 12px;
        bottom: 12px;
        width: 2px;
        background: linear-gradient(180deg, var(--blue), var(--cyan), var(--bronze-hi));
        opacity: .6
    }

    .road__svg,
    .road__comet,
    .road__sparks {
        display: none
    }

    .road__item {
        position: static;
        width: auto;
        height: auto;
        display: flex;
        align-items: flex-start;
        gap: 1rem
    }

    .road__node {
        position: relative;
        transform: none;
        flex-shrink: 0
    }

    .road__card,
    .road__item--above.road__item--center .road__card,
    .road__item--below.road__item--center .road__card,
    .road__item--below.road__item--left .road__card,
    .road__item--above.road__item--right .road__card {
        position: static;
        transform: none;
        width: auto;
        flex: 1
    }

    .road__node--champ {
        width: 84px;
        height: 84px
    }
}

@media (prefers-reduced-motion: reduce) {

    .road__spark,
    .road__node-ring,
    .road__comet,
    .road__champ-spark {
        animation: none
    }

    .road__comet {
        display: none
    }
}

.cfw {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3
}

.cfw__burst {
    position: absolute;
    width: 0;
    height: 0
}

.cfw__flash {
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border-radius: 50%;
    background: radial-gradient(closest-side, #fff, currentColor 45%, transparent 75%);
    animation: cfw-flash .5s ease-out forwards
}

@keyframes cfw-flash {
    0% {
        transform: scale(.2);
        opacity: 0
    }

    15% {
        opacity: 1
    }

    to {
        transform: scale(1.7);
        opacity: 0
    }
}

.cfw__spark {
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px #fff, 0 0 12px currentColor;
    --a: calc(360deg / 14 * var(--i));
    transform: rotate(var(--a)) translate(2px) scale(.7);
    animation: cfw-spark .85s ease-out forwards
}

@keyframes cfw-spark {
    0% {
        transform: rotate(var(--a)) translate(2px) scale(.7);
        opacity: 0
    }

    12% {
        opacity: 1
    }

    to {
        transform: rotate(var(--a)) translate(74px) scale(.2);
        opacity: 0
    }
}

.more {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-block: clamp(4.5rem, 10vw, 8rem)
}

.more__inner {
    position: relative;
    z-index: 1;
    max-width: 60ch;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center
}

.more__title {
    margin-bottom: 1.6rem
}

.more__lead {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.2rem, 2.6vw, 1.85rem);
    line-height: 1.32;
    letter-spacing: -.02em;
    color: var(--text);
    margin-bottom: 2.2rem;
    text-wrap: balance
}

.more__line {
    font-size: var(--fs-lead);
    font-weight: 700;
    color: var(--text);
    margin-bottom: .9rem
}

.more__line--mute {
    font-weight: 400;
    color: var(--text-mute);
    max-width: 52ch;
    margin-inline: auto
}

.footer {
    position: relative;
    overflow: hidden;
    padding: clamp(3rem, 7vw, 5rem) var(--gutter) clamp(2rem, 4vw, 3rem);
    border-top: 1px solid var(--glass-stroke);
    background: linear-gradient(180deg, transparent, rgba(6, 6, 31, .6))
}

.footer__ghost {
    position: absolute;
    left: 50%;
    bottom: -.18em;
    transform: translate(-50%);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(3.5rem, 16vw, 15rem);
    letter-spacing: -.04em;
    line-height: 1;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1px rgba(22, 233, 215, .08);
    background: linear-gradient(180deg, rgba(22, 233, 215, .05), transparent);
    -webkit-background-clip: text;
    background-clip: text;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    z-index: 0
}

.footer__inner {
    position: relative;
    z-index: 1;
    text-align: center
}

.footer__tagline {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.15rem, 2.6vw, 1.7rem);
    line-height: 1.3;
    letter-spacing: -.02em;
    color: var(--text);
    max-width: 42ch;
    margin: 0 auto 1rem;
    text-wrap: balance
}

.footer__signoff {
    font-size: var(--fs-body);
    color: var(--cyan);
    margin-bottom: 2.5rem
}

.footer__baseline {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    padding-top: 1.8rem;
    border-top: 1px solid var(--glass-stroke)
}

.footer__logo {
    height: 30px;
    width: auto;
    opacity: .92
}

.footer__legal {
    width: 100%;
    margin-top: 2.6rem;
    padding-top: 1.8rem;
    border-top: 1px solid var(--glass-stroke);
    text-align: left
}

.footer__legal-title {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: .6rem
}

.footer__legal-title:not(:first-child) {
    margin-top: 1.8rem
}

.footer__legal-text {
    font-size: .72rem;
    line-height: 1.7;
    color: var(--text-mute);
    margin-bottom: .8rem
}

.footer__legal-text:last-child {
    margin-bottom: 0
}

.footer__mark-accent {
    color: var(--cyan)
}

.hudframe {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 90;
    pointer-events: none
}

.hudframe__progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    transform-origin: left;
    transform: scaleX(0);
    background: linear-gradient(90deg, var(--blue), var(--cyan));
    box-shadow: 0 0 12px var(--cyan-glow);
    transition: transform .12s linear
}

.hudframe__corner {
    position: absolute;
    width: 26px;
    height: 26px;
    border: 2px solid rgba(22, 233, 215, .35)
}

.hudframe__corner--tl {
    top: 14px;
    left: 14px;
    border-right: 0;
    border-bottom: 0
}

.hudframe__corner--tr {
    top: 14px;
    right: 14px;
    border-left: 0;
    border-bottom: 0
}

.hudframe__corner--bl {
    bottom: 14px;
    left: 14px;
    border-right: 0;
    border-top: 0
}

.hudframe__corner--br {
    bottom: 14px;
    right: 14px;
    border-left: 0;
    border-top: 0
}

.hudframe__scan {
    position: absolute;
    left: 0;
    right: 0;
    height: 28vh;
    top: -28vh;
    background: linear-gradient(180deg, transparent, rgba(22, 233, 215, .05), transparent);
    animation: hud-scan 9s linear infinite
}

@keyframes hud-scan {
    0% {
        top: -30vh
    }

    to {
        top: 100vh
    }
}

.hudframe__edge {
    position: absolute;
    top: 18%;
    bottom: 18%;
    width: 3px;
    background-image: repeating-linear-gradient(180deg, rgba(22, 233, 215, .25) 0 2px, transparent 2px 16px);
    opacity: .5
}

.hudframe__edge--l {
    left: 6px
}

.hudframe__edge--r {
    right: 6px
}

@media (max-width: 640px) {
    .hudframe__corner {
        width: 16px;
        height: 16px
    }

    .hudframe__edge {
        display: none
    }
}

@media (prefers-reduced-motion: reduce) {
    .hudframe__scan {
        display: none
    }
}

:root {
    --navy-900: #06061f;
    --navy-800: #0d0d4b;
    --navy-700: #001489;
    --ink: #1c1f2a;
    --gray: #50555b;
    --cyan: #16e9d7;
    --blue: #0047bb;
    --east: #2e7bff;
    --west: #e23c4e;
    --bronze: #ac7c59;
    --bronze-hi: #e6c9a8;
    --silver: #a0a8ae;
    --sand: #dfc5ae;
    --text: #dae3ed;
    --text-mute: #8a93b0;
    --brand: #2f6bff;
    --brand-strong: #0047bb;
    --glass-bg: rgba(13, 13, 75, .32);
    --glass-stroke: rgba(46, 123, 255, .22);
    --glass-stroke-strong: rgba(46, 123, 255, .5);
    --panel-base: rgba(28, 31, 42, .55);
    --cyan-glow: rgba(22, 233, 215, .55);
    --blue-glow: rgba(0, 71, 187, .55);
    --brand-glow: rgba(46, 123, 255, .55);
    --font-display: "Plus Jakarta Sans", system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Hiragino Sans GB", sans-serif;
    --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Hiragino Sans GB", sans-serif;
    --font-mono: "Plus Jakarta Sans", system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Hiragino Sans GB", sans-serif;
    --fs-display: clamp(2.5rem, 6.2vw, 5.1rem);
    --fs-h2: clamp(1.9rem, 4.4vw, 3.25rem);
    --fs-lead: clamp(1.05rem, 1.9vw, 1.4rem);
    --fs-body: clamp(1rem, 1.4vw, 1.125rem);
    --fs-label: clamp(.68rem, 1vw, .78rem);
    --section-pad: clamp(4rem, 9vw, 8rem);
    --gutter: clamp(1.25rem, 5vw, 3rem);
    --maxw: 1200px;
    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 22px;
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1)
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--text);
    background: var(--navy-900);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden
}

body:before {
    content: "";
    position: fixed;
    top: -20%;
    right: -20%;
    bottom: -20%;
    left: -20%;
    z-index: -3;
    background: radial-gradient(42% 52% at 18% 12%, rgba(0, 71, 187, .55), transparent 60%), radial-gradient(40% 48% at 84% 22%, rgba(46, 123, 255, .34), transparent 62%), radial-gradient(40% 46% at 70% 64%, rgba(22, 233, 215, .14), transparent 60%), radial-gradient(55% 62% at 50% 108%, rgba(0, 71, 187, .5), transparent 60%), linear-gradient(180deg, var(--navy-900) 0%, #04040f 100%);
    animation: aurora-drift 26s ease-in-out infinite alternate
}

@keyframes aurora-drift {
    0% {
        transform: translate3d(-2%, -1%, 0) scale(1.05)
    }

    to {
        transform: translate3d(3%, 2%, 0) scale(1.12)
    }
}

body:after {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -2;
    pointer-events: none;
    background-image: linear-gradient(rgba(46, 123, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(46, 123, 255, .05) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(120% 95% at 50% 25%, #000 30%, transparent 92%);
    mask-image: radial-gradient(120% 95% at 50% 25%, #000 30%, transparent 92%)
}

.bg-floor {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    pointer-events: none
}

.bg-floor:before {
    content: "";
    position: absolute;
    left: -50%;
    right: -50%;
    bottom: -10%;
    height: 55vh;
    background-image: linear-gradient(rgba(46, 123, 255, .18) 1px, transparent 1px), linear-gradient(90deg, rgba(46, 123, 255, .12) 1px, transparent 1px);
    background-size: 60px 60px;
    transform: perspective(420px) rotateX(68deg);
    transform-origin: bottom center;
    mask-image: linear-gradient(to top, #000, transparent 75%);
    -webkit-mask-image: linear-gradient(to top, #000, transparent 75%);
    animation: floor-scroll 8s linear infinite;
    opacity: .5
}

@keyframes floor-scroll {
    to {
        background-position: 0 60px
    }
}

.bg-floor:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: radial-gradient(120% 80% at 50% 50%, transparent 55%, rgba(4, 4, 15, .7))
}

h1,
h2,
h3,
p {
    margin: 0
}

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

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

button {
    font: inherit;
    color: inherit;
    cursor: pointer
}

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
    border-radius: 4px
}

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

.skip-link {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -120%);
    background: var(--cyan);
    color: var(--navy-900);
    font-family: var(--font-mono);
    font-size: .8rem;
    font-weight: 700;
    padding: .6rem 1rem;
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    z-index: 200;
    transition: transform .2s var(--ease-out)
}

.skip-link:focus {
    transform: translate(-50%)
}

.section {
    position: relative;
    padding-block: var(--section-pad);
    padding-inline: var(--gutter)
}

.container {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto
}

.eyebrow {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--brand)
}
html[lang=ar] .eyebrow{
    text-align: right;
}

.section-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-h2);
    line-height: 1.02;
    letter-spacing: -.03em;
    color: var(--text)
}

.section-index {
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .24em;
    color: var(--text-mute)
}

.section-index b {
    color: var(--brand);
    font-weight: 700
}

.glass {
    position: relative;
    background: var(--glass-bg);
    border: 1px solid var(--glass-stroke);
    border-radius: var(--r-lg);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%)
}

.corner-brackets:before,
.corner-brackets:after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid var(--glass-stroke-strong);
    pointer-events: none
}

.corner-brackets:before {
    top: 10px;
    left: 10px;
    border-right: 0;
    border-bottom: 0;
    border-top-left-radius: 6px
}

.corner-brackets:after {
    bottom: 10px;
    right: 10px;
    border-left: 0;
    border-top: 0;
    border-bottom-right-radius: 6px
}

.hud-tag {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .32rem .7rem;
    border-radius: 999px;
    border: 1px solid var(--glass-stroke-strong);
    background: #2e7bff14;
    font-family: var(--font-mono);
    font-size: .62rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text)
}

.hud-tag__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 8px var(--brand-glow)
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto
    }

    *,
    *:before,
    *:after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important
    }

    .bg-floor:before {
        animation: none
    }
}
/* ! wwwstartr|2026-07-29 09:43:00 ! */