@font-face { font-family: 'Alexandria'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/alexandria-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Alexandria'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/alexandria-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Alexandria'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/alexandria-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Alexandria'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/alexandria-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Alexandria'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/alexandria-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Alexandria'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/alexandria-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Alexandria'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/alexandria-vietnamese-400-normal.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Alexandria'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/alexandria-vietnamese-600-normal.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Alexandria'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/alexandria-vietnamese-700-normal.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Alexandria'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/alexandria-arabic-400-normal.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Alexandria'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/alexandria-arabic-600-normal.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Alexandria'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/alexandria-arabic-700-normal.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/barlow-condensed-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/barlow-condensed-latin-800-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/barlow-condensed-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/barlow-condensed-latin-ext-800-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/barlow-condensed-vietnamese-700-normal.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/barlow-condensed-vietnamese-800-normal.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
:root {
color-scheme: dark;
--ink: #06070a;
--ink-2: #0b0d12;
--ink-3: #12161d;
--ink-4: #1a1f28;
--line: rgb(255 255 255 / 8%);
--line-2: rgb(255 255 255 / 14%);
--text: #eef1f4;
--text-2: #aeb7c2;
--text-3: #75808c;
--gold-hi: #fff1c4;
--gold: #f0c766;
--gold-2: #d79c39;
--gold-lo: #8c5c1e;
--gold-ink: #1d1404;
--brass: linear-gradient(180deg, #f6dc98 0%, var(--gold) 50%, #b8862f 100%);
--brass-text: linear-gradient(180deg, #fff4c9 0%, #f2cd6c 40%, #cf9734 75%, #9a6522 100%);
--pitch: #0b2a19;
--pitch-hi: #3fd97f;
--pitch-btn: linear-gradient(180deg, #4fe08c 0%, #27b866 55%, #168a49 100%);
--cut: 11px;
--radius: 14px;
--gutter: max(20px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
--body: 'Alexandria', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--display: 'Barlow Condensed', 'Alexandria', system-ui, sans-serif;
--display-weight: 800;
--display-case: uppercase;
--display-track: 0.01em;
--display-leading: 0.95;
--hero-size: clamp(50px, 7.6vw, 112px);
--h2-size: clamp(38px, 5vw, 72px);
--body-leading: 1.7;
}
html[data-script='arab'] {
--body: 'Alexandria', 'Geeza Pro', 'Noto Kufi Arabic', 'Segoe UI', Tahoma, sans-serif;
--display: 'Alexandria', 'Geeza Pro', 'Noto Kufi Arabic', sans-serif;
--display-weight: 700;
--display-case: none;
--display-track: 0;
--display-leading: 1.35;
--hero-size: clamp(38px, 5.4vw, 76px);
--h2-size: clamp(30px, 3.8vw, 52px);
--body-leading: 1.95;
}
html[data-script='cyrl'],
html[data-script='grek'] {
--body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
--display: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
--display-case: none;
--display-track: -0.015em;
--display-leading: 1.08;
--hero-size: clamp(38px, 5.6vw, 82px);
--h2-size: clamp(30px, 4vw, 58px);
}
html[data-script='geor'] {
--body: 'Noto Sans Georgian', 'BPG Arial', system-ui, -apple-system, 'Segoe UI', sans-serif;
--display: 'Noto Sans Georgian', 'BPG Arial', system-ui, -apple-system, 'Segoe UI', sans-serif;
--display-case: none;
--display-track: 0;
--display-leading: 1.25;
--hero-size: clamp(32px, 4.4vw, 64px);
--h2-size: clamp(28px, 3.4vw, 48px);
--body-leading: 1.85;
}
html[data-script='hans'] {
--body: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', 'Source Han Sans SC', sans-serif;
--display: var(--body);
}
html[data-script='hant'] {
--body: 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', 'Source Han Sans TC', sans-serif;
--display: var(--body);
}
html[data-script='jpan'] {
--body: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, 'Noto Sans JP', sans-serif;
--display: var(--body);
}
html[data-script='jpan'] :is(h1, h2, h3) {
word-break: auto-phrase;
}
html[data-script='kore'] {
--body: 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif;
--display: var(--body);
word-break: keep-all;
}
html:is([data-script='hans'], [data-script='hant'], [data-script='jpan'], [data-script='kore']) {
--display-case: none;
--display-track: 0.02em;
--display-leading: 1.25;
--hero-size: clamp(36px, 5vw, 72px);
--h2-size: clamp(28px, 3.6vw, 50px);
--body-leading: 1.85;
}
html[data-script='thai'] {
--body: 'Sukhumvit Set', Thonburi, 'Leelawadee UI', 'Noto Sans Thai', system-ui, sans-serif;
--display: var(--body);
--display-case: none;
--display-track: 0;
--display-leading: 1.4;
--hero-size: clamp(34px, 4.8vw, 68px);
--h2-size: clamp(28px, 3.4vw, 48px);
--body-leading: 1.95;
}
html[data-script='deva'] {
--body: 'Kohinoor Devanagari', 'Nirmala UI', 'Noto Sans Devanagari', Mangal, system-ui, sans-serif;
--display: var(--body);
--display-case: none;
--display-track: 0;
--display-leading: 1.4;
--hero-size: clamp(34px, 4.8vw, 68px);
--h2-size: clamp(28px, 3.4vw, 48px);
--body-leading: 1.95;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 88px;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
margin: 0;
min-height: 100vh;
overflow-x: hidden;
font-family: var(--body);
font-size: 16.5px;
line-height: var(--body-leading);
color: var(--text);
background: var(--ink);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img,
svg,
picture {
display: block;
max-width: 100%;
}
img {
height: auto;
}
a {
color: inherit;
}
h1,
h2,
h3 {
margin: 0;
text-wrap: balance;
}
p {
margin: 0;
text-wrap: pretty;
}
:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
border-radius: 4px;
}
::selection {
color: var(--gold-ink);
background: var(--gold);
}
.wrap {
width: 100%;
max-width: 1240px;
margin-inline: auto;
padding-inline: var(--gutter);
}
.narrow {
max-width: 860px;
}
.skip {
position: absolute;
inset-inline-start: 16px;
top: -60px;
z-index: 100;
padding: 10px 16px;
color: var(--gold-ink);
background: var(--gold);
border-radius: 8px;
font-weight: 700;
text-decoration: none;
}
.skip:focus {
top: 12px;
}
svg {
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
[dir='rtl'] .arrow {
transform: scaleX(-1);
}
.display {
font-family: var(--display);
font-weight: var(--display-weight);
line-height: var(--display-leading);
letter-spacing: var(--display-track);
text-transform: var(--display-case);
}
.kicker {
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold);
}
.kicker::before {
content: '';
width: 34px;
height: 2px;
background: linear-gradient(90deg, var(--gold), transparent);
}
[dir='rtl'] .kicker::before {
background: linear-gradient(270deg, var(--gold), transparent);
}
html:not([data-script='latn']) .kicker {
letter-spacing: 0.04em;
}
.kicker-green {
color: var(--pitch-hi);
}
.kicker-green::before {
background: linear-gradient(90deg, var(--pitch-hi), transparent);
}
[dir='rtl'] .kicker-green::before {
background: linear-gradient(270deg, var(--pitch-hi), transparent);
}
.lead {
max-width: 38em;
font-size: clamp(17px, 1.5vw, 20px);
color: var(--text-2);
}
.actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 34px;
}
.btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
max-width: 100%;
padding-inline: 24px;
font: 700 15px/1 var(--body);
color: var(--text);
text-decoration: none;
white-space: nowrap;
cursor: pointer;
background: var(--ink-3);
border: 1px solid var(--line-2);
border-radius: 0;
transition:
transform 0.2s ease,
filter 0.2s ease,
background-color 0.2s ease,
border-color 0.2s ease;
}
.btn svg {
flex: none;
width: 18px;
height: 18px;
stroke-width: 2.2;
}
.btn:active {
transform: translateY(1px);
}
.btn-sm {
min-height: 38px;
padding-inline: 16px;
font-size: 13.5px;
}
.btn-lg {
min-height: 56px;
padding-inline: 30px;
font-size: 16px;
}
@media (max-width: 640px) {
.btn {
padding-block: 10px;
line-height: 1.25;
text-align: center;
white-space: normal;
text-wrap: balance;
}
}
.btn-gold,
.btn-green {
overflow: hidden;
border: 0;
clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.btn-gold {
color: var(--gold-ink);
background: var(--brass);
}
.btn-green {
color: #04150b;
background: var(--pitch-btn);
}
.btn-gold::after,
.btn-green::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 55%) 50%, transparent 65%);
transform: translateX(-120%);
transition: transform 0.7s ease;
}
.btn-gold:hover::after,
.btn-green:hover::after {
transform: translateX(120%);
}
.btn-gold:hover,
.btn-green:hover {
filter: brightness(1.06) saturate(1.05);
}
.btn-ghost {
background: rgb(255 255 255 / 3%);
border-color: var(--line-2);
backdrop-filter: blur(6px);
}
.btn-ghost:hover {
background: rgb(255 255 255 / 7%);
border-color: rgb(240 199 102 / 45%);
}
.top {
position: sticky;
top: 0;
z-index: 50;
padding-top: env(safe-area-inset-top, 0px);
background: linear-gradient(180deg, rgb(6 7 10 / 92%), rgb(6 7 10 / 74%));
backdrop-filter: blur(14px) saturate(1.2);
border-bottom: 1px solid var(--line);
}
.top-in {
display: flex;
align-items: center;
gap: 22px;
height: 72px;
}
.brand {
display: inline-flex;
flex: none;
align-items: center;
gap: 11px;
text-decoration: none;
}
.brand img {
width: 40px;
height: 40px;
}
.brand-word {
font: 800 25px/1 'Barlow Condensed', 'Alexandria', sans-serif;
letter-spacing: 0.06em;
color: var(--text);
white-space: nowrap;
}
.brand-word b {
font-weight: 800;
background: var(--brass-text);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.nav {
display: flex;
gap: 4px;
margin-inline-start: auto;
}
.nav a {
padding: 10px 14px;
font-size: 14.5px;
font-weight: 600;
color: var(--text-2);
text-decoration: none;
border-radius: 8px;
transition:
color 0.2s,
background-color 0.2s;
}
.nav a:hover {
color: var(--text);
background: rgb(255 255 255 / 5%);
}
.langs {
position: relative;
}
.langs summary {
display: flex;
align-items: center;
gap: 8px;
height: 40px;
padding-inline: 12px;
font-size: 14px;
font-weight: 600;
color: var(--text-2);
list-style: none;
cursor: pointer;
border: 1px solid var(--line);
border-radius: 10px;
transition:
color 0.2s,
border-color 0.2s;
}
.langs summary::-webkit-details-marker {
display: none;
}
.langs summary:hover,
.langs[open] summary {
color: var(--text);
border-color: rgb(240 199 102 / 40%);
}
.langs summary svg {
width: 18px;
height: 18px;
}
.langs-panel {
position: absolute;
inset-inline-end: 0;
top: calc(100% + 10px);
width: min(560px, calc(100vw - 32px));
max-height: min(70vh, 560px);
overflow-y: auto;
padding: 16px;
background: rgb(14 17 23 / 97%);
border: 1px solid var(--line-2);
border-radius: var(--radius);
box-shadow: 0 30px 80px rgb(0 0 0 / 60%);
backdrop-filter: blur(18px);
}
.langs-title {
margin: 2px 6px 12px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-3);
}
.langs ul {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2px;
margin: 0;
padding: 0;
list-style: none;
}
.langs li a {
display: block;
padding: 8px 10px;
overflow: hidden;
font-size: 14px;
color: var(--text-2);
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
border-radius: 8px;
}
.langs li a:hover {
color: var(--text);
background: rgb(255 255 255 / 6%);
}
.langs li a[aria-current='true'] {
color: var(--gold-hi);
background: rgb(240 199 102 / 12%);
}
.menu {
display: none;
width: 44px;
height: 44px;
padding: 10px;
color: var(--text);
background: transparent;
border: 1px solid var(--line);
border-radius: 10px;
cursor: pointer;
}
.hero {
position: relative;
overflow: hidden;
isolation: isolate;
padding-block: clamp(56px, 9vw, 120px) clamp(64px, 9vw, 130px);
background:
radial-gradient(900px 600px at 78% 38%, rgb(240 199 102 / 13%), transparent 62%),
radial-gradient(700px 500px at 8% 100%, rgb(63 217 127 / 6%), transparent 60%),
var(--ink);
}
.hero-grid {
position: absolute;
inset: -96px;
z-index: -1;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='55.43' height='96' viewBox='0 0 55.43 96'%3E%3Cpath d='M27.71 0 55.43 16v32L27.71 64 0 48V16zM27.71 64v32' fill='none' stroke='%23f0c766' stroke-opacity='.16' stroke-width='1'/%3E%3C/svg%3E");
background-size: 55.43px 96px;
mask-image: radial-gradient(ellipse 60% 70% at 72% 42%, #000 0%, transparent 72%);
animation: drift 40s linear infinite;
}
@keyframes drift {
to {
background-position: 55.43px 96px;
}
}
.hero-in {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
align-items: center;
gap: clamp(32px, 5vw, 72px);
}
.hero h1 {
font-size: var(--hero-size);
background: linear-gradient(160deg, #ffffff 0%, #eef1f4 42%, var(--gold-hi) 62%, var(--gold) 82%, var(--gold-2) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 6px 30px rgb(0 0 0 / 40%));
}
.hero h1.fit-1 {
font-size: calc(var(--hero-size) * 0.92);
}
.hero h1.fit-2 {
font-size: calc(var(--hero-size) * 0.85);
}
.hero h1.fit-3 {
font-size: calc(var(--hero-size) * 0.78);
}
[dir='rtl'] .hero h1 {
background-image: linear-gradient(200deg, #ffffff 0%, #eef1f4 42%, var(--gold-hi) 62%, var(--gold) 82%, var(--gold-2) 100%);
}
.hero .lead {
margin-top: 26px;
}
.hero-art {
position: relative;
display: grid;
place-items: center;
aspect-ratio: 1;
max-width: 520px;
width: 100%;
margin-inline: auto;
perspective: 900px;
}
.hero-mark {
position: relative;
z-index: 2;
width: 62%;
height: auto;
filter: drop-shadow(0 30px 60px rgb(0 0 0 / 70%)) drop-shadow(0 0 50px rgb(240 199 102 / 22%));
animation: hover 7s ease-in-out infinite;
}
@keyframes hover {
50% {
translate: 0 -12px;
}
}
.hero-glow {
position: absolute;
inset: 12%;
z-index: 1;
border-radius: 50%;
background: conic-gradient(from 0deg, transparent 0deg, rgb(240 199 102 / 38%) 70deg, transparent 140deg, rgb(63 217 127 / 16%) 220deg, transparent 300deg);
filter: blur(36px);
animation: spin 14s linear infinite;
}
@keyframes spin {
to {
rotate: 360deg;
}
}
.orbit {
position: absolute;
inset: 0;
border: 1px solid rgb(240 199 102 / 22%);
border-radius: 50%;
transform: rotateX(72deg);
}
.orbit::after {
content: '';
position: absolute;
top: 50%;
left: -5px;
width: 9px;
height: 9px;
margin-top: -4.5px;
border-radius: 50%;
background: var(--gold);
box-shadow: 0 0 18px var(--gold);
}
.orbit-1 {
animation: orbit 16s linear infinite;
}
.orbit-2 {
inset: 10%;
border-color: rgb(255 255 255 / 10%);
animation: orbit 11s linear infinite reverse;
}
.orbit-2::after {
background: var(--pitch-hi);
box-shadow: 0 0 18px var(--pitch-hi);
}
.orbit-3 {
inset: -9%;
border-style: dashed;
border-color: rgb(240 199 102 / 12%);
animation: orbit 30s linear infinite;
}
.orbit-3::after {
display: none;
}
@keyframes orbit {
from {
transform: rotateX(72deg) rotateZ(0deg);
}
to {
transform: rotateX(72deg) rotateZ(360deg);
}
}
.chip {
position: absolute;
z-index: 3;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
font-size: 13px;
color: var(--text);
background: rgb(14 17 23 / 82%);
border: 1px solid var(--line-2);
border-radius: 12px;
box-shadow: 0 18px 40px rgb(0 0 0 / 45%);
backdrop-filter: blur(12px);
animation: hover 6s ease-in-out infinite;
}
.chip img {
width: 40px;
height: 40px;
border-radius: 9px;
}
.chip span {
display: grid;
line-height: 1.35;
}
.chip b {
font-weight: 700;
}
.chip small {
font-size: 12px;
color: var(--pitch-hi);
}
.chip-a {
inset-inline-start: -4%;
bottom: 14%;
}
.chip-b {
inset-inline-end: -2%;
top: 12%;
animation-delay: -3s;
}
.pulse {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--pitch-hi);
box-shadow: 0 0 0 0 rgb(63 217 127 / 60%);
animation: pulse 2s ease-out infinite;
}
@keyframes pulse {
to {
box-shadow: 0 0 0 12px rgb(63 217 127 / 0%);
}
}
.marquee {
overflow: hidden;
padding-block: 18px;
background: linear-gradient(90deg, #1b1306, #2a1d08 50%, #1b1306);
border-block: 1px solid rgb(240 199 102 / 25%);
}
.marquee-run {
display: flex;
width: max-content;
animation: run 46s linear infinite;
}
.marquee span {
display: inline-flex;
align-items: center;
gap: 28px;
padding-inline-end: 28px;
font-family: var(--display);
font-weight: var(--display-weight);
font-size: clamp(20px, 2.2vw, 30px);
text-transform: var(--display-case);
letter-spacing: 0.04em;
white-space: nowrap;
color: var(--gold-hi);
}
.marquee span::after {
content: '';
width: 11px;
height: 12.5px;
background: var(--gold);
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
@keyframes run {
to {
translate: -50% 0;
}
}
[dir='rtl'] .marquee-run {
animation-name: run-rtl;
}
@keyframes run-rtl {
to {
translate: 50% 0;
}
}
.feature {
position: relative;
overflow: hidden;
padding-block: clamp(80px, 10vw, 140px);
background:
radial-gradient(800px 500px at 85% 30%, rgb(63 217 127 / 14%), transparent 60%),
repeating-linear-gradient(90deg, rgb(255 255 255 / 0%) 0 90px, rgb(255 255 255 / 1.6%) 90px 180px),
linear-gradient(180deg, #04120a, var(--pitch) 50%, #04120a);
}
.feature-in {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
align-items: center;
gap: clamp(36px, 6vw, 90px);
}
.feature-name {
display: flex;
align-items: center;
gap: 18px;
}
.feature-name img {
width: 72px;
height: 72px;
border-radius: 18px;
box-shadow: 0 12px 30px rgb(0 0 0 / 45%);
}
.feature h2 {
font-size: var(--h2-size);
color: #fff;
}
.feature-tag {
margin-top: 18px;
font-size: clamp(20px, 2vw, 26px);
font-weight: 700;
background: var(--brass-text);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.feature-text {
margin-top: 14px;
max-width: 34em;
color: #c7d3cb;
}
.ticks {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 22px;
margin: 26px 0 0;
padding: 0;
list-style: none;
}
.ticks li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 15px;
font-weight: 600;
line-height: 1.45;
}
.ticks svg {
flex: none;
width: 22px;
height: 22px;
padding: 3px;
color: #04150b;
background: var(--pitch-hi);
border-radius: 50%;
stroke-width: 3;
}
.feature-art {
position: relative;
padding: 6% 0 12%;
}
.screen {
position: relative;
margin: 0;
overflow: hidden;
border: 1px solid rgb(255 255 255 / 16%);
border-radius: 18px;
box-shadow:
0 50px 100px rgb(0 0 0 / 55%),
0 0 0 8px rgb(255 255 255 / 3%);
transform: perspective(1400px) rotateY(-7deg) rotateX(2deg);
transition: transform 0.6s ease;
}
[dir='rtl'] .screen {
transform: perspective(1400px) rotateY(7deg) rotateX(2deg);
}
.feature-art:hover .screen {
transform: perspective(1400px) rotateY(0) rotateX(0);
}
.screen img {
width: 100%;
}
.live {
position: absolute;
top: 14px;
inset-inline-start: 14px;
padding: 6px 10px;
font: 800 13px/1 'Barlow Condensed', sans-serif;
letter-spacing: 0.12em;
color: #fff;
background: #e5392d;
border-radius: 6px;
box-shadow: 0 6px 20px rgb(229 57 45 / 45%);
}
.float {
position: absolute;
margin: 0;
overflow: hidden;
border: 1px solid rgb(255 255 255 / 18%);
border-radius: 14px;
box-shadow: 0 30px 60px rgb(0 0 0 / 55%);
}
.float img {
width: 100%;
}
.float-a {
width: 44%;
inset-inline-start: -6%;
bottom: 0;
rotate: -4deg;
}
.float-b {
width: 36%;
inset-inline-end: -3%;
top: -2%;
rotate: 5deg;
}
.band {
position: relative;
padding-block: clamp(80px, 9vw, 130px);
}
.band-dark {
background: linear-gradient(180deg, var(--ink-2), var(--ink));
border-block: 1px solid var(--line);
}
.band-head {
display: grid;
gap: 16px;
max-width: 760px;
margin-bottom: clamp(36px, 5vw, 60px);
}
.band-head h2 {
font-size: var(--h2-size);
}
.band-head p {
font-size: 18px;
color: var(--text-2);
}
.card {
position: relative;
padding: 30px;
background: linear-gradient(180deg, rgb(255 255 255 / 4%), rgb(255 255 255 / 1.5%));
border: 1px solid var(--line);
border-radius: var(--radius);
transition:
border-color 0.3s,
transform 0.3s,
background-color 0.3s;
}
.card:hover {
border-color: rgb(240 199 102 / 35%);
transform: translateY(-4px);
}
.card h3 {
font-size: 21px;
font-weight: 700;
line-height: 1.35;
}
.card p {
margin-top: 10px;
color: var(--text-2);
}
.card-icon {
display: grid;
place-items: center;
width: 54px;
height: 54px;
margin-bottom: 22px;
color: var(--gold);
background: radial-gradient(circle at 30% 20%, rgb(240 199 102 / 22%), rgb(240 199 102 / 6%));
border: 1px solid rgb(240 199 102 / 30%);
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.card-icon svg {
width: 24px;
height: 24px;
}
.card-icon-green {
color: var(--pitch-hi);
background: radial-gradient(circle at 30% 20%, rgb(63 217 127 / 24%), rgb(63 217 127 / 6%));
}
.make {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
.card-make {
padding: 40px;
overflow: hidden;
}
.card-make::after {
content: '';
position: absolute;
inset-inline-end: -60px;
bottom: -60px;
width: 220px;
height: 220px;
background: radial-gradient(circle, rgb(240 199 102 / 14%), transparent 70%);
}
.card-make h3 {
font-family: var(--display);
font-weight: var(--display-weight);
font-size: clamp(30px, 3vw, 40px);
text-transform: var(--display-case);
letter-spacing: var(--display-track);
}
.values {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
margin: 0;
padding: 0;
list-style: none;
}
.value-no {
position: absolute;
top: 18px;
inset-inline-end: 22px;
font: 800 46px/1 'Barlow Condensed', sans-serif;
color: transparent;
-webkit-text-stroke: 1px rgb(240 199 102 / 28%);
}
.next {
display: flex;
align-items: center;
gap: 26px;
margin-top: 26px;
padding: 30px 34px;
border: 1px dashed rgb(240 199 102 / 30%);
border-radius: var(--radius);
background: rgb(240 199 102 / 3%);
}
.next h3 {
font-size: 21px;
}
.next p {
margin-top: 6px;
color: var(--text-2);
}
.next-mark {
flex: none;
width: 58px;
height: 66px;
}
.next-base {
stroke: rgb(240 199 102 / 18%);
stroke-width: 2;
}
.next-run {
stroke: var(--gold);
stroke-width: 3;
stroke-dasharray: 28 72;
animation: draw 3.2s linear infinite;
filter: drop-shadow(0 0 6px rgb(240 199 102 / 70%));
}
@keyframes draw {
to {
stroke-dashoffset: -100;
}
}
.contact {
position: relative;
overflow: hidden;
padding-block: clamp(90px, 11vw, 150px);
text-align: center;
background:
radial-gradient(700px 400px at 50% 110%, rgb(240 199 102 / 16%), transparent 70%),
var(--ink);
}
.contact-in {
display: grid;
justify-items: center;
gap: 18px;
}
.contact h2 {
font-size: var(--h2-size);
}
.contact p {
max-width: 36em;
font-size: 18px;
color: var(--text-2);
}
.mail-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: 18px;
}
.mail {
font: 800 clamp(30px, 5vw, 64px)/1.1 'Barlow Condensed', 'Alexandria', sans-serif;
letter-spacing: 0.02em;
text-decoration: none;
background: var(--brass-text);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
overflow-wrap: anywhere;
}
.mail:hover {
filter: brightness(1.12);
}
.foot {
padding-top: 64px;
background: var(--ink-2);
border-top: 1px solid var(--line);
}
.foot-in {
display: grid;
grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
gap: 40px;
padding-bottom: 48px;
}
.foot-brand {
display: grid;
justify-items: start;
gap: 16px;
}
.foot-brand p {
max-width: 26em;
color: var(--text-2);
}
.foot-mail {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 600;
color: var(--gold);
text-decoration: none;
}
.foot-mail svg {
width: 18px;
height: 18px;
}
.foot-col {
display: grid;
align-content: start;
gap: 10px;
}
.foot-col h2 {
margin-bottom: 6px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-3);
}
.foot-col a {
display: inline-flex;
align-items: center;
gap: 6px;
width: fit-content;
color: var(--text-2);
text-decoration: none;
}
.foot-col a:hover {
color: var(--gold-hi);
}
.foot-col svg {
width: 15px;
height: 15px;
}
.foot-base {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 10px;
padding-block: 22px calc(22px + env(safe-area-inset-bottom, 0px));
font-size: 13.5px;
color: var(--text-3);
border-top: 1px solid var(--line);
}
.game-hero {
position: relative;
isolation: isolate;
overflow: hidden;
padding-block: clamp(40px, 6vw, 80px) clamp(70px, 9vw, 120px);
background: #04120a;
}
.game-hero-bg {
position: absolute;
inset: 0;
z-index: -2;
}
.game-hero-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 70% 50%;
}
.game-hero::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(90deg, rgb(4 18 10 / 97%) 0%, rgb(4 18 10 / 86%) 45%, rgb(4 18 10 / 40%) 100%),
linear-gradient(0deg, rgb(4 18 10 / 100%) 0%, transparent 35%);
}
[dir='rtl'] .game-hero::before {
background:
linear-gradient(270deg, rgb(4 18 10 / 97%) 0%, rgb(4 18 10 / 86%) 45%, rgb(4 18 10 / 40%) 100%),
linear-gradient(0deg, rgb(4 18 10 / 100%) 0%, transparent 35%);
}
.game-hero-in {
display: grid;
justify-items: start;
max-width: 1240px;
}
.game-hero-in > * {
max-width: 680px;
}
.game-logo {
width: 132px;
height: 132px;
margin: 26px 0 20px;
border-radius: 28px;
box-shadow: 0 20px 50px rgb(0 0 0 / 60%);
}
.game-hero h1 {
font-size: clamp(56px, 8vw, 120px);
color: #fff;
}
html:not([data-script='latn']) .game-hero h1 {
font-family: 'Barlow Condensed', var(--display);
font-weight: 800;
text-transform: uppercase;
line-height: 0.95;
}
.game-hero .lead {
margin-top: 16px;
color: #c7d3cb;
}
.game-by {
margin-top: 18px;
font-size: 14px;
color: var(--text-3);
}
.crumbs ol {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
padding: 0;
font-size: 14px;
list-style: none;
color: var(--text-3);
}
.crumbs li + li::before {
content: '/';
margin-inline-end: 8px;
color: var(--text-3);
}
.crumbs a {
color: var(--text-2);
text-decoration: none;
}
.crumbs a:hover {
color: var(--gold-hi);
}
.features {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
margin: 0;
padding: 0;
list-style: none;
}
.gallery {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.shot {
position: relative;
margin: 0;
overflow: hidden;
border: 1px solid var(--line-2);
border-radius: var(--radius);
background: var(--ink-3);
}
.shot-wide {
grid-column: 1 / -1;
}
.shot img {
width: 100%;
transition: transform 0.8s ease;
}
.shot:hover img {
transform: scale(1.03);
}
.shot figcaption {
position: absolute;
inset-inline: 0;
bottom: 0;
padding: 40px 20px 16px;
font-size: 15px;
font-weight: 600;
background: linear-gradient(0deg, rgb(0 0 0 / 82%), transparent);
}
.faq {
display: grid;
gap: 12px;
}
.faq details {
border: 1px solid var(--line);
border-radius: var(--radius);
background: rgb(255 255 255 / 2.5%);
transition: border-color 0.3s;
}
.faq details[open] {
border-color: rgb(63 217 127 / 35%);
}
.faq summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 22px 24px;
list-style: none;
cursor: pointer;
}
.faq summary::-webkit-details-marker {
display: none;
}
.faq summary::after {
content: '+';
flex: none;
font: 600 26px/1 var(--body);
color: var(--pitch-hi);
transition: rotate 0.3s;
}
.faq details[open] summary::after {
rotate: 45deg;
}
.faq h3 {
font-size: 18px;
font-weight: 700;
}
.faq details p {
padding: 0 24px 22px;
color: var(--text-2);
}
.game-cta {
background:
radial-gradient(700px 400px at 50% 110%, rgb(63 217 127 / 18%), transparent 70%),
var(--ink);
}
.doc {
padding-block: 56px 110px;
}
.doc h1 {
margin-top: 28px;
font-size: clamp(42px, 6vw, 80px);
}
.doc-date {
margin: 14px 0 28px;
font-size: 14px;
color: var(--text-3);
}
.doc section {
margin-top: 40px;
padding-top: 30px;
border-top: 1px solid var(--line);
}
.doc h2 {
font-size: 22px;
font-weight: 700;
color: var(--gold-hi);
}
.doc p,
.doc li {
color: var(--text-2);
}
.doc section p,
.doc ul {
margin-top: 12px;
}
.doc ul {
display: grid;
gap: 10px;
padding-inline-start: 20px;
}
.doc li::marker {
color: var(--gold);
}
.doc b {
color: var(--text);
}
.doc a {
color: var(--gold);
}
.lost {
display: grid;
justify-items: center;
gap: 16px;
padding-block: clamp(80px, 14vw, 180px);
text-align: center;
}
.lost-code {
font: 800 clamp(110px, 20vw, 240px)/0.9 'Barlow Condensed', sans-serif;
background: var(--brass-text);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.lost h1 {
font-size: clamp(34px, 4vw, 54px);
}
.suggest {
position: fixed;
inset-inline-end: max(16px, env(safe-area-inset-right, 0px));
bottom: max(16px, env(safe-area-inset-bottom, 0px));
z-index: 60;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 16px;
max-width: min(460px, calc(100vw - 32px));
padding: 16px 18px;
font-size: 15px;
background: rgb(14 17 23 / 96%);
border: 1px solid rgb(240 199 102 / 35%);
border-radius: var(--radius);
box-shadow: 0 24px 60px rgb(0 0 0 / 55%);
backdrop-filter: blur(14px);
animation: rise 0.5s ease both;
}
.suggest[hidden] {
display: none;
}
.suggest p {
flex: 1 1 200px;
}
.suggest .x {
width: 36px;
height: 36px;
padding: 0;
font-size: 20px;
color: var(--text-2);
background: transparent;
border: 0;
cursor: pointer;
}
@keyframes rise {
from {
opacity: 0;
translate: 0 16px;
}
}
.reveal {
transition:
opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
translate 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal.waiting {
opacity: 0;
translate: 0 44px;
}
@media (max-width: 1100px) {
.values {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.features {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.top-play {
display: none;
}
}
@media (max-width: 900px) {
.top-in {
gap: 12px;
height: 64px;
}
.brand-word {
font-size: 22px;
}
.menu {
display: block;
order: 4;
}
.langs {
margin-inline-start: auto;
}
.nav {
position: absolute;
inset-inline: 0;
top: 100%;
display: none;
flex-direction: column;
gap: 2px;
padding: 12px var(--gutter) 18px;
background: #090b0f;
border-bottom: 1px solid var(--line);
box-shadow: 0 30px 60px rgb(0 0 0 / 60%);
}
.top.open .nav {
display: flex;
}
.nav a {
padding: 14px 12px;
font-size: 17px;
}
.hero-in,
.feature-in {
grid-template-columns: minmax(0, 1fr);
}
.hero-art {
max-width: 320px;
}
.feature-art {
max-width: 640px;
margin-inline: auto;
width: 100%;
}
.make {
grid-template-columns: minmax(0, 1fr);
}
.foot-in {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.foot-brand {
grid-column: 1 / -1;
}
}
@media (max-width: 640px) {
body {
font-size: 16px;
}
.langs summary span {
display: none;
}
.langs-panel {
position: fixed;
inset-inline: 12px;
top: 74px;
width: auto;
}
.langs ul {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.actions .btn {
flex: 1 1 100%;
}
.ticks {
grid-template-columns: minmax(0, 1fr);
}
.values,
.features,
.gallery {
grid-template-columns: minmax(0, 1fr);
}
.card,
.card-make {
padding: 26px;
}
.next {
flex-direction: column;
align-items: flex-start;
}
.chip-a {
inset-inline-start: 0;
}
.chip-b {
inset-inline-end: 0;
}
.float-a {
inset-inline-start: -2%;
}
.float-b {
inset-inline-end: -1%;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation: none !important;
transition: none !important;
}
}