:root {
--bg: #121219;
--bg2: #191924;
--panel: #1e1e2b;
--panel2: #262637;
--panel3: #2d2d40;
--ink: #f7f4ea;
--muted: #b7b4c6;
--dim: #7f7d95;
--tang: #783d0c;
--tang-d: #ae4a14;
--sun: #ffc53d;
--aqua: #af2ed3;
--grape: #7cffc0;
--rose: #ff7bac;
--line: #2f2f42;
--r: 18px;
--r-sm: 12px;
--disp: "Bricolage Grotesque", system-ui, sans-serif;
--body: "Inter", system-ui, sans-serif;
--mono: "Space Mono", monospace;
--hard: 6px 6px 0 rgba(0, 0, 0, .45);
}
* {
box-sizing: border-box
}
html {
scroll-behavior: smooth;
scroll-padding-top: 110px
}
body {
background: var(--bg);
color: var(--ink);
font-family: var(--body);
line-height: 1.65;
overflow-x: hidden
}
body::before {
content: "";
position: fixed;
inset: 0;
z-index: -3;
background:
radial-gradient(560px 380px at 8% 6%, rgba(255, 107, 53, .14), transparent 65%),
radial-gradient(640px 420px at 94% 12%, rgba(139, 124, 255, .16), transparent 65%),
radial-gradient(700px 500px at 50% 100%, rgba(46, 211, 183, .10), transparent 60%), var(--bg)
}
body::after {
content: "";
position: fixed;
inset: 0;
z-index: -3;
opacity: .5;
background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
background-size: 26px 26px;
pointer-events: none
}
::selection {
background: var(--tang);
color: #fff
}
h1,
h2,
h3 {
font-family: var(--disp);
font-weight: 800;
line-height: 1.02;
letter-spacing: -.02em
}
a {
color: inherit
}
.skip {
position: absolute;
left: -9999px;
top: 0;
background: var(--sun);
color: #000;
padding: .6rem 1rem;
z-index: 9999;
border-radius: 0 0 10px 0;
font-weight: 700
}
.skip:focus {
left: 0
}
.wrap {
max-width: 1200px
}
/* top strip */
.topstrip {
background: var(--tang);
color: #1a0d05;
font-family: var(--mono);
font-size: .72rem;
font-weight: 700;
letter-spacing: .06em;
overflow: hidden;
white-space: nowrap
}
.topstrip-inner {
display: inline-flex;
gap: 2.6rem;
padding: .45rem 1rem;
animation: tick 26s linear infinite
}
@keyframes tick {
to {
transform: translateX(-50%)
}
}
/* nav */
.topnav {
position: sticky;
top: 0;
z-index: 100;
background: rgba(18, 18, 25, .92);
backdrop-filter: blur(14px);
border-bottom: 2px solid var(--line)
}
.navbox {
display: flex;
align-items: center;
gap: .9rem;
padding: .7rem 0
}
.logo {
display: flex;
align-items: center;
gap: .65rem;
text-decoration: none
}
.logo-disc {
width: 42px;
height: 42px;
border-radius: 50%;
background: conic-gradient(var(--tang) 0 25%, var(--sun) 0 50%, var(--aqua) 0 75%, var(--grape) 0 100%);
border: 3px solid #0c0c12;
box-shadow: 0 0 0 2px rgba(255, 255, 255, .15);
position: relative;
flex-shrink: 0
}
.logo-disc::after {
content: "";
position: absolute;
inset: 11px;
border-radius: 50%;
background: var(--bg);
border: 2px solid rgba(255, 255, 255, .25)
}
.logo b {
font-family: var(--disp);
font-size: 1.25rem;
line-height: 1;
display: block
}
.logo small {
font-family: var(--mono);
font-size: .62rem;
letter-spacing: .24em;
color: var(--sun)
}
.navlinks {
display: flex;
gap: .15rem;
margin: 0 auto
}
.navlinks a {
text-decoration: none;
font-size: .82rem;
font-weight: 600;
color: var(--muted);
padding: .55rem .75rem;
border-radius: 10px;
transition: all .2s
}
.navlinks a:hover,
.navlinks a.on {
color: #fff;
background: rgba(255, 255, 255, .08)
}
@media(max-width:1199px) {
.navlinks a {
padding: .5rem .5rem;
font-size: .78rem
}
}
.credit-chip {
display: flex;
align-items: center;
gap: .55rem;
background: #14141d;
border: 2px solid var(--line);
border-radius: 14px;
padding: .35rem .7rem .35rem .45rem
}
.credit-chip .coin {
width: 30px;
height: 30px;
border-radius: 50%;
background: radial-gradient(circle at 32% 30%, #ffe9a8, var(--sun) 55%, #b97e10);
display: flex;
align-items: center;
justify-content: center;
color: #3a2703;
font-weight: 800;
border: 2px solid #0c0c12
}
.credit-chip b {
font-family: var(--mono);
font-size: .86rem;
color: var(--sun);
line-height: 1;
display: block
}
.credit-chip small {
font-size: .6rem;
color: var(--dim);
line-height: 1
}
.btn-chunk {
border-radius: 100px;
font-weight: 800;
font-size: .82rem;
letter-spacing: .04em;
padding: .75rem 1.4rem;
border: 2px solid #0c0c12;
box-shadow: 4px 4px 0 rgba(0, 0, 0, .5);
transition: all .18s;
display: inline-flex;
align-items: center;
gap: .55rem;
text-decoration: none;
cursor: pointer
}
.btn-chunk:hover {
transform: translate(-1px, -1px);
box-shadow: 5px 5px 0 rgba(0, 0, 0, .5)
}
.btn-chunk:active {
transform: translate(3px, 3px);
box-shadow: 1px 1px 0 rgba(0, 0, 0, .5)
}
.btn-tang {
background: var(--tang);
color: #fff !important
}
.btn-sun {
background: var(--sun);
color: #241500 !important
}
.btn-aqua {
background: var(--aqua);
color: #04241d !important
}
.btn-ghosty {
background: var(--panel2);
color: #fff !important;
border-color: var(--line);
box-shadow: 4px 4px 0 rgba(0, 0, 0, .35)
}
.btn-chunk i {
transition: transform .2s
}
.btn-chunk:hover i {
transform: translateX(3px)
}
.burger {
display: none;
background: var(--panel2);
border: 2px solid var(--line);
border-radius: 12px;
color: #fff;
padding: .45rem .7rem;
font-size: 1.3rem
}
@media(max-width:992px) {
.navlinks {
display: none
}
.burger {
display: block
}
.navlinks.open {
display: flex;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--bg2);
flex-direction: column;
padding: 1rem;
border-bottom: 2px solid var(--line);
z-index: 99
}
.navlinks.open a {
padding: .8rem 1rem;
font-size: .95rem
}
}
/* kickers + headers */
.tag-pill {
display: inline-flex;
align-items: center;
gap: .5rem;
font-family: var(--mono);
font-size: .7rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
border-radius: 100px;
padding: .4rem .9rem;
border: 2px solid #0c0c12;
box-shadow: 3px 3px 0 rgba(0, 0, 0, .45)
}
.tp-tang {
background: var(--tang);
color: #fff
}
.tp-sun {
background: var(--sun);
color: #241500
}
.tp-aqua {
background: var(--aqua);
color: #04241d
}
.tp-grape {
background: var(--grape);
color: #fff
}
.tp-dark {
background: var(--panel3);
color: #fff;
border-color: var(--line);
box-shadow: none
}
.sec {
padding: 4.6rem 0
}
@media(max-width:768px) {
.sec {
padding: 3.2rem 0
}
}
.sec-top {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1.5rem;
margin-bottom: 2rem;
flex-wrap: wrap
}
.sec-top h2 {
font-size: clamp(2rem, 4.6vw, 3.2rem);
margin: .8rem 0 0
}
.sec-top h2 .hl {
position: relative;
white-space: nowrap
}
.sec-top h2 .hl i {
position: absolute;
left: -4px;
right: -4px;
bottom: 2px;
height: .42em;
background: var(--tang);
z-index: -1;
font-style: normal;
border-radius: 4px;
transform: rotate(-1.2deg)
}
.sec-top p {
color: var(--muted);
max-width: 420px;
margin: 0
}
/* HERO dashboard */
.hero {
padding: 2.2rem 0 1rem;
position: relative
}
.hero-grid {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 1.4rem;
align-items: stretch
}
@media(max-width:992px) {
.hero-grid {
grid-template-columns: 1fr
}
}
.hero-main {
background: linear-gradient(150deg, #23232f, #17171f);
border: 2px solid var(--line);
border-radius: 24px;
padding: clamp(1.6rem, 4vw, 3rem);
position: relative;
overflow: hidden;
box-shadow: var(--hard)
}
.hero-main::before {
content: "★ ★ ★";
position: absolute;
top: 1rem;
right: 1.4rem;
font-family: var(--mono);
color: rgba(255, 197, 61, .35);
letter-spacing: .5em;
font-size: .85rem
}
.hero h1 {
font-size: clamp(2.7rem, 6.4vw, 4.7rem);
margin: 1rem 0 .9rem
}
.hero h1 .w-tang {
color: var(--tang)
}
.hero h1 .w-sun {
background: var(--sun);
color: #241500;
padding: 0 .18em;
border-radius: .18em;
display: inline-block;
transform: rotate(-1.5deg);
border: 2px solid #0c0c12
}
.hero h1 .w-line {
position: relative;
display: inline-block
}
.hero h1 .w-line::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 4px;
height: 10px;
background: rgba(46, 211, 183, .4);
z-index: -1;
border-radius: 6px
}
.hero-sub {
color: #cfcddd;
font-size: 1.02rem;
max-width: 520px
}
.hero-ctas {
display: flex;
gap: .7rem;
flex-wrap: wrap;
margin-top: 1.3rem
}
.trust-row {
display: flex;
align-items: center;
gap: .9rem;
margin-top: 1.4rem;
flex-wrap: wrap
}
.avatars {
display: flex
}
.ph-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--panel3);
border-radius: 50%;
border: 3px solid var(--bg);
margin-left: -10px;
width: 38px;
height: 38px;
font-size: 1.2rem;
z-index: 1;
}
.ph-avatar:first-child {
margin-left: 0;
}
.trust-row small {
color: var(--muted);
font-size: .8rem;
line-height: 1.4
}
.trust-row .stars {
color: var(--sun);
letter-spacing: .15em;
font-size: .85rem
}
.hero-minis {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: .6rem;
margin-top: 1.5rem
}
@media(max-width:560px) {
.hero-minis {
grid-template-columns: repeat(2, 1fr)
}
}
.mini {
background: var(--panel);
border: 2px solid var(--line);
border-radius: 14px;
padding: .7rem .6rem;
text-align: center
}
.mini b {
font-family: var(--disp);
font-size: 1.35rem;
display: block;
line-height: 1
}
.mini span {
font-family: var(--mono);
font-size: .62rem;
letter-spacing: .06em;
color: var(--muted);
text-transform: uppercase
}
.mini.o b {
color: var(--tang)
}
.mini.y b {
color: var(--sun)
}
.mini.a b {
color: var(--aqua)
}
.mini.g b {
color: var(--grape)
}
.hero-note {
margin-top: 1rem;
display: flex;
gap: .6rem;
align-items: flex-start;
background: rgba(46, 211, 183, .08);
border: 2px dashed rgba(46, 211, 183, .4);
border-radius: 14px;
padding: .7rem .9rem;
font-size: .8rem;
color: #9fe8d7
}
/* console */
.console {
background: #0e0e15;
border: 2px solid var(--line);
border-radius: 24px;
overflow: hidden;
box-shadow: var(--hard);
display: flex;
flex-direction: column
}
.console-bar {
display: flex;
align-items: center;
gap: .5rem;
padding: .7rem 1rem;
background: var(--panel2);
border-bottom: 2px solid var(--line)
}
.dot {
width: 11px;
height: 11px;
border-radius: 50%;
border: 2px solid #0c0c12
}
.console-bar .url {
margin-left: .6rem;
flex: 1;
background: #0e0e15;
border: 2px solid var(--line);
border-radius: 100px;
font-family: var(--mono);
font-size: .68rem;
color: var(--aqua);
padding: .3rem .9rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis
}
.console-live {
display: inline-flex;
align-items: center;
gap: .4rem;
font-family: var(--mono);
font-size: .66rem;
font-weight: 700;
color: #ff8f8f
}
.console-live i {
width: 8px;
height: 8px;
border-radius: 50%;
background: #ff5252;
display: inline-block;
animation: blink 1.4s infinite
}
@keyframes blink {
50% {
opacity: .25
}
}
.console-body {
padding: 1.1rem;
display: flex;
flex-direction: column;
gap: .9rem;
flex: 1
}
.slotbox {
background: linear-gradient(180deg, #22222f, #14141c);
border: 2px solid var(--line);
border-radius: 16px;
padding: 1rem;
text-align: center;
position: relative;
overflow: hidden
}
.slotbox::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(280px 120px at 50% 0%, rgba(255, 197, 61, .12), transparent);
pointer-events: none
}
.reels {
display: flex;
gap: .6rem;
justify-content: center;
margin: .7rem 0
}
.reel {
width: 72px;
height: 78px;
background: #0b0b12;
border: 2px solid #3a3a52;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--disp);
font-size: 2rem;
color: var(--sun);
box-shadow: inset 0 6px 14px rgba(0, 0, 0, .7)
}
.reel.spin {
animation: reelJit .1s linear infinite
}
@keyframes reelJit {
0% {
transform: translateY(-3px)
}
100% {
transform: translateY(3px)
}
}
.feed {
background: var(--panel);
border: 2px solid var(--line);
border-radius: 14px;
padding: .8rem .9rem;
flex: 1
}
.feed h4 {
font-size: .8rem;
font-family: var(--mono);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted);
margin: 0 0 .6rem
}
.feed ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: .5rem;
max-height: 172px;
overflow: hidden
}
.feed li {
display: flex;
gap: .6rem;
align-items: center;
font-size: .8rem;
background: rgba(255, 255, 255, .03);
border: 1px solid rgba(255, 255, 255, .07);
border-radius: 10px;
padding: .45rem .6rem;
animation: feedIn .5s ease both
}
@keyframes feedIn {
from {
opacity: 0;
transform: translateX(12px)
}
to {
opacity: 1;
transform: none
}
}
.feed li b {
color: var(--sun);
font-weight: 700
}
/* marquee */
.marquee {
border-top: 2px solid var(--line);
border-bottom: 2px solid var(--line);
background: var(--bg2);
overflow: hidden;
margin-top: 1.6rem
}
.marquee-track {
display: flex;
gap: 0;
width: max-content;
animation: tick 30s linear infinite
}
.marquee span {
font-family: var(--disp);
font-weight: 800;
font-size: 1rem;
letter-spacing: .04em;
padding: .8rem 1.4rem;
white-space: nowrap;
border-right: 2px solid var(--line)
}
.marquee span:nth-child(odd) {
color: var(--sun)
}
.marquee span:nth-child(even) {
color: var(--ink)
}
/* placeholder boxes */
.ph-box {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: var(--panel3);
transition: transform 0.5s;
}
.ph-img {
position: absolute;
inset: 0;
}
.ph-spot { background: linear-gradient(135deg, #191924, #121219); font-size: 8rem; color: rgba(255,255,255,0.1); }
.ph-cat { background: linear-gradient(135deg, var(--panel2), var(--bg2)); font-size: 6rem; opacity: 0.15; }
.ph-shelf { background: linear-gradient(135deg, #1e1e2b, #2d2d40); font-size: 4rem; }
.ph-tab { width: 34px; height: 34px; border-radius: 10px; background: var(--panel3); font-size: 1.2rem; flex-shrink: 0; }
.ph-news { background: linear-gradient(135deg, #17171f, #23232f); font-size: 8rem; opacity: 0.4; }
.tile:hover .ph-box { transform: scale(1.08); }
.catcard:hover .ph-box { transform: scale(1.07); }
/* spotlight */
.spot-shell {
background: var(--panel);
border: 2px solid var(--line);
border-radius: 24px;
overflow: hidden;
box-shadow: var(--hard)
}
.spot-tabs {
display: flex;
gap: .5rem;
padding: .9rem .9rem 0;
flex-wrap: wrap
}
.spot-tab {
flex: 1;
min-width: 150px;
background: var(--panel2);
border: 2px solid var(--line);
border-radius: 14px;
padding: .6rem .8rem;
color: var(--muted);
font-weight: 700;
font-size: .85rem;
display: flex;
align-items: center;
gap: .6rem;
cursor: pointer;
transition: all .2s
}
.spot-tab.on {
background: var(--sun);
color: #241500;
border-color: #0c0c12;
box-shadow: 4px 4px 0 rgba(0, 0, 0, .45)
}
.spot-tab.on .ph-tab {
background: var(--tang);
}
.spot-body {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0
}
@media(max-width:860px) {
.spot-body {
grid-template-columns: 1fr
}
}
.spot-img {
position: relative;
min-height: 320px;
background: #0c0c12;
overflow: hidden;
}
.spot-img .flag {
position: absolute;
top: 1rem;
left: 1rem;
z-index: 2
}
.spot-info {
padding: 2rem
}
.spot-info h3 {
font-size: 2.2rem;
margin: .6rem 0
}
.stat-chips {
display: flex;
gap: .5rem;
flex-wrap: wrap;
margin: .9rem 0
}
.chipx {
font-family: var(--mono);
font-size: .68rem;
font-weight: 700;
background: var(--panel3);
border: 2px solid var(--line);
border-radius: 100px;
padding: .35rem .8rem;
color: #e8e6f2
}
.chipx.hot {
background: var(--tang);
color: #fff;
border-color: #0c0c12
}
.shelf {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: .8rem;
margin-top: 1rem
}
@media(max-width:860px) {
.shelf {
grid-template-columns: repeat(2, 1fr)
}
}
.shelf-card {
background: var(--panel2);
border: 2px solid var(--line);
border-radius: 16px;
overflow: hidden;
cursor: pointer;
transition: all .22s
}
.shelf-card:hover {
transform: translateY(-4px) rotate(-.5deg);
border-color: var(--sun);
box-shadow: var(--hard)
}
.shelf-ph-wrapper {
height: 110px;
width: 100%;
display: block;
overflow: hidden;
}
.shelf-card div:last-child {
padding: .7rem .8rem
}
/* lobby */
.lobby {
display: grid;
grid-template-columns: 250px 1fr;
gap: 1.2rem;
align-items: start
}
@media(max-width:992px) {
.lobby {
grid-template-columns: 1fr
}
}
.side {
background: var(--panel);
border: 2px solid var(--line);
border-radius: 20px;
padding: 1.1rem;
box-shadow: var(--hard);
position: sticky;
top: 110px
}
@media(max-width:992px) {
.side {
position: static
}
}
.side h4 {
font-size: .78rem;
font-family: var(--mono);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--muted);
margin: 1rem 0 .6rem
}
.side h4:first-child {
margin-top: 0
}
.fbtn {
display: flex;
align-items: center;
gap: .6rem;
width: 100%;
text-align: left;
background: transparent;
border: 2px solid transparent;
border-radius: 12px;
padding: .6rem .7rem;
color: var(--muted);
font-weight: 600;
font-size: .88rem;
cursor: pointer;
transition: all .18s;
margin-bottom: .25rem
}
.fbtn i {
width: 30px;
height: 30px;
border-radius: 9px;
background: var(--panel3);
display: flex;
align-items: center;
justify-content: center;
color: var(--sun);
flex-shrink: 0
}
.fbtn:hover {
background: rgba(255, 255, 255, .05);
color: #fff
}
.fbtn.on {
background: var(--tang);
color: #fff;
border-color: #0c0c12;
box-shadow: 3px 3px 0 rgba(0, 0, 0, .45)
}
.fbtn.on i {
background: rgba(0, 0, 0, .25);
color: #fff
}
.field label {
display: block;
font-family: var(--mono);
font-size: .68rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--sun);
margin-bottom: .4rem
}
.field input,
.field select,
.field textarea {
width: 100%;
background: #101018;
border: 2px solid var(--line);
border-radius: 12px;
color: #fff;
padding: .7rem .9rem;
font-size: .9rem;
transition: all .2s
}
.field input:focus,
.field select:focus,
.field textarea:focus {
outline: none;
border-color: var(--tang);
box-shadow: 0 0 0 3px rgba(255, 107, 53, .25)
}
.field select option {
background: #191924
}
.field .hint {
font-size: .75rem;
color: var(--dim);
margin-top: .35rem
}
.tiles {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem
}
@media(max-width:1100px) {
.tiles {
grid-template-columns: repeat(2, 1fr)
}
}
@media(max-width:560px) {
.tiles {
grid-template-columns: 1fr
}
}
.tile {
background: var(--panel);
border: 2px solid var(--line);
border-radius: 20px;
overflow: hidden;
cursor: pointer;
transition: transform .25s, border-color .25s, box-shadow .25s;
position: relative;
transform-style: preserve-3d
}
.tile:hover {
border-color: var(--sun);
box-shadow: var(--hard)
}
.tile-art {
position: relative;
height: 168px;
overflow: hidden;
background: var(--panel3)
}
.tile-art::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(10, 10, 16, .75))
}
.tile-badges {
position: absolute;
top: .7rem;
left: .7rem;
right: .7rem;
display: flex;
justify-content: space-between;
z-index: 2
}
.bdg {
font-family: var(--mono);
font-size: .62rem;
font-weight: 700;
letter-spacing: .06em;
border-radius: 100px;
padding: .28rem .7rem;
border: 2px solid #0c0c12
}
.bdg-new {
background: var(--aqua);
color: #04241d
}
.bdg-hot {
background: var(--tang);
color: #fff
}
.bdg-cat {
background: rgba(10, 10, 16, .7);
color: #fff;
border-color: rgba(255, 255, 255, .25)
}
.tile-play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
opacity: 0;
transition: opacity .25s;
background: rgba(10, 10, 16, .35)
}
.tile:hover .tile-play {
opacity: 1
}
.tile-body {
padding: 1rem 1rem 1.1rem
}
.tile-body h3 {
font-size: 1.25rem;
margin: 0
}
.tile-meta {
display: flex;
align-items: center;
gap: .5rem;
font-size: .76rem;
color: var(--muted);
margin: .4rem 0 .6rem;
flex-wrap: wrap
}
.stars-sm {
color: var(--sun);
letter-spacing: .1em;
font-size: .72rem
}
.tile-foot {
display: flex;
align-items: center;
justify-content: space-between;
border-top: 2px dashed var(--line);
padding-top: .7rem;
margin-top: .2rem
}
.play-mini {
background: var(--sun);
color: #241500;
border: 2px solid #0c0c12;
border-radius: 100px;
font-weight: 800;
font-size: .75rem;
padding: .45rem 1rem;
display: inline-flex;
gap: .4rem;
align-items: center;
transition: all .2s
}
.tile:hover .play-mini {
background: var(--tang);
color: #fff
}
.lobby-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 1rem
}
.result-count {
font-family: var(--mono);
font-size: .76rem;
color: var(--muted)
}
.sortbox {
display: flex;
align-items: center;
gap: .6rem
}
.sortbox select {
background: #101018;
border: 2px solid var(--line);
border-radius: 100px;
color: #fff;
padding: .5rem 1rem;
font-size: .82rem
}
/* categories */
.catgrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem
}
@media(max-width:860px) {
.catgrid {
grid-template-columns: 1fr 1fr
}
}
@media(max-width:560px) {
.catgrid {
grid-template-columns: 1fr
}
}
.catcard {
position: relative;
border-radius: 20px;
overflow: hidden;
border: 2px solid var(--line);
min-height: 230px;
display: flex;
align-items: flex-end;
cursor: pointer;
transition: all .25s;
background: var(--panel)
}
.catcard::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(10, 10, 16, .15), rgba(10, 10, 16, .9))
}
.catcard:hover {
transform: translateY(-5px);
border-color: var(--aqua);
box-shadow: var(--hard)
}
.catcard>div {
position: relative;
z-index: 2;
padding: 1.2rem;
width: 100%
}
.catcard h3 {
font-size: 1.5rem;
margin: .3rem 0
}
.catcard p {
font-size: .82rem;
color: #d7d5e2;
margin: 0
}
.cat-n {
position: absolute;
top: .9rem;
right: 1rem;
z-index: 2;
font-family: var(--disp);
font-size: 2rem;
font-weight: 800;
color: rgba(255, 255, 255, .35)
}
/* how */
.timeline {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
margin-top: 1rem
}
@media(max-width:900px) {
.timeline {
grid-template-columns: 1fr 1fr
}
}
@media(max-width:560px) {
.timeline {
grid-template-columns: 1fr
}
}
.timeline::before {
content: "";
position: absolute;
top: 34px;
left: 6%;
right: 6%;
border-top: 3px dashed var(--line);
z-index: 0
}
@media(max-width:560px) {
.timeline::before {
display: none
}
}
.tstep {
background: var(--panel);
border: 2px solid var(--line);
border-radius: 20px;
padding: 1.4rem 1.2rem;
position: relative;
z-index: 1;
text-align: center;
transition: all .25s
}
.tstep:hover {
transform: translateY(-5px) rotate(.5deg);
border-color: var(--grape);
box-shadow: var(--hard)
}
.tnum {
width: 52px;
height: 52px;
border-radius: 16px;
margin: 0 auto 1rem;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--disp);
font-weight: 800;
font-size: 1.3rem;
border: 2px solid #0c0c12;
box-shadow: 3px 3px 0 rgba(0, 0, 0, .45)
}
.tstep h3 {
font-size: 1.2rem;
margin-bottom: .4rem
}
.tstep p {
font-size: .85rem;
color: var(--muted);
margin: 0
}
.safe-banner {
margin-top: 1.4rem;
background: #0f1f1b;
border: 2px solid rgba(46, 211, 183, .45);
border-radius: 16px;
padding: 1rem 1.2rem;
display: flex;
gap: .8rem;
align-items: flex-start;
font-size: .88rem
}
.safe-banner i {
color: var(--aqua);
font-size: 1.3rem
}
/* why bento */
.bento {
display: grid;
grid-template-columns: 1.2fr 1fr 1fr;
grid-template-rows: auto auto;
gap: 1rem
}
@media(max-width:900px) {
.bento {
grid-template-columns: 1fr 1fr
}
}
@media(max-width:600px) {
.bento {
grid-template-columns: 1fr
}
}
.bcard {
background: var(--panel);
border: 2px solid var(--line);
border-radius: 20px;
padding: 1.5rem;
position: relative;
overflow: hidden;
transition: all .25s
}
.bcard:hover {
transform: translateY(-4px);
box-shadow: var(--hard);
border-color: var(--sun)
}
.bcard.big {
grid-row: span 2;
background: linear-gradient(135deg, var(--grape), #4a3fa0);
min-height: 380px;
display: flex;
flex-direction: column;
justify-content: flex-end;
border-color: var(--line)
}
.bcard.big::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(10, 10, 16, .1), rgba(10, 10, 16, .92))
}
.bcard.big>* {
position: relative;
z-index: 2
}
.bicon {
width: 46px;
height: 46px;
border-radius: 13px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
border: 2px solid #0c0c12;
box-shadow: 3px 3px 0 rgba(0, 0, 0, .4);
margin-bottom: .9rem
}
.bcard h3 {
font-size: 1.2rem;
margin-bottom: .35rem
}
.bcard p {
font-size: .85rem;
color: var(--muted);
margin: 0
}
.statrow {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
margin-top: 1rem
}
@media(max-width:860px) {
.statrow {
grid-template-columns: 1fr 1fr
}
}
.statchunk {
background: var(--tang);
border: 2px solid #0c0c12;
border-radius: 20px;
padding: 1.3rem 1rem;
text-align: center;
box-shadow: var(--hard);
color: #fff;
position: relative;
overflow: hidden
}
.statchunk:nth-child(2) {
background: var(--sun);
color: #241500
}
.statchunk:nth-child(3) {
background: var(--aqua);
color: #04241d
}
.statchunk:nth-child(4) {
background: var(--grape);
color: #fff
}
.statchunk b {
font-family: var(--disp);
font-size: 2.4rem;
display: block;
line-height: 1
}
.statchunk span {
font-family: var(--mono);
font-size: .68rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
opacity: .85
}
/* rewards */
.levelpath {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-bottom: 1.2rem
}
@media(max-width:860px) {
.levelpath {
grid-template-columns: 1fr
}
}
.lvl {
background: var(--panel);
border: 2px solid var(--line);
border-radius: 20px;
padding: 1.5rem;
position: relative;
transition: all .25s
}
.lvl:hover {
transform: translateY(-4px);
box-shadow: var(--hard)
}
.lvl.mid {
border-color: var(--sun);
background: linear-gradient(160deg, #2a2417, #1e1e2b)
}
.lvl ul {
list-style: none;
padding: 0;
margin: 1rem 0
}
.lvl li {
font-size: .87rem;
color: #d7d5e2;
padding: .45rem 0;
border-bottom: 1px dashed var(--line);
display: flex;
gap: .55rem;
align-items: center
}
.lvl li i {
color: var(--aqua)
}
.collect {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem
}
@media(max-width:900px) {
.collect {
grid-template-columns: 1fr 1fr
}
}
@media(max-width:600px) {
.collect {
grid-template-columns: 1fr
}
}
.coll {
background: var(--panel2);
border: 2px solid var(--line);
border-radius: 18px;
padding: 1.1rem;
display: flex;
gap: .9rem;
align-items: center;
transition: all .25s
}
.coll:hover {
border-color: var(--rose);
transform: translateY(-3px)
}
.coll-ic {
width: 56px;
height: 56px;
border-radius: 16px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
background: var(--panel3);
border: 2px solid var(--line);
color: var(--dim)
}
.coll-ic.got {
background: linear-gradient(135deg, var(--sun), var(--tang));
color: #241500;
border-color: #0c0c12;
box-shadow: 3px 3px 0 rgba(0, 0, 0, .4)
}
.bar {
height: 9px;
background: #101018;
border: 2px solid var(--line);
border-radius: 100px;
overflow: hidden;
margin-top: .55rem
}
.bar div {
height: 100%;
background: linear-gradient(90deg, var(--tang), var(--sun));
width: 0;
transition: width 1.3s cubic-bezier(.2, .8, .2, 1);
border-radius: 100px
}
/* testimonials */
.testi-wrap {
display: grid;
grid-template-columns: .9fr 1.1fr;
gap: 1.2rem;
align-items: stretch
}
@media(max-width:900px) {
.testi-wrap {
grid-template-columns: 1fr
}
}
.testi-side {
background: var(--grape);
border: 2px solid #0c0c12;
border-radius: 22px;
padding: 2rem;
box-shadow: var(--hard);
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
overflow: hidden
}
.testi-side::after {
content: "”";
position: absolute;
right: .5rem;
bottom: -3rem;
font-family: var(--disp);
font-size: 11rem;
opacity: .18;
line-height: 1
}
.testi-card {
background: var(--panel);
border: 2px solid var(--line);
border-radius: 22px;
padding: 2rem;
box-shadow: var(--hard);
min-height: 340px;
display: flex;
flex-direction: column;
justify-content: center
}
.testi-card .who {
display: flex;
align-items: center;
gap: .9rem;
margin-top: 1.2rem
}
.testi-nav {
display: flex;
align-items: center;
gap: .7rem;
margin-top: 1.1rem
}
.tbtn2 {
width: 46px;
height: 46px;
border-radius: 14px;
border: 2px solid var(--line);
background: var(--panel2);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: all .2s
}
.tbtn2:hover {
border-color: var(--sun);
color: var(--sun);
transform: translateY(-2px)
}
.tdots2 {
display: flex;
gap: .4rem;
flex: 1
}
.tdots2 button {
flex: 1;
height: 8px;
border-radius: 100px;
border: 0;
background: var(--panel3);
padding: 0;
transition: all .3s
}
.tdots2 button.on {
background: var(--tang)
}
#tSlide {
animation: tIn .45s ease both
}
@keyframes tIn {
from {
opacity: 0;
transform: translateX(22px)
}
to {
opacity: 1;
transform: none
}
}
/* faq */
.faq-max {
max-width: 820px;
margin: 0 auto
}
.faq-item {
background: var(--panel);
border: 2px solid var(--line);
border-radius: 16px !important;
overflow: hidden;
margin-bottom: .7rem
}
.faq-item .accordion-button {
background: transparent !important;
color: var(--ink) !important;
font-family: var(--disp);
font-weight: 700;
font-size: 1.02rem;
box-shadow: none !important;
padding: 1.05rem 1.2rem
}
.faq-item .accordion-button:not(.collapsed) {
background: var(--panel2) !important;
color: var(--sun) !important
}
.faq-item .accordion-button::after {
filter: invert(80%) sepia(40%) saturate(500%)
}
.faq-item .accordion-body {
color: var(--muted);
font-size: .9rem;
border-top: 2px solid var(--line)
}
/* newsletter */
.news-card {
background: linear-gradient(140deg, #26263a, #191924);
border: 2px solid var(--line);
border-radius: 26px;
overflow: hidden;
box-shadow: var(--hard);
display: grid;
grid-template-columns: .9fr 1.1fr
}
@media(max-width:900px) {
.news-card {
grid-template-columns: 1fr
}
}
.news-art {
position: relative;
min-height: 300px;
overflow: hidden;
}
.news-art::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, rgba(18, 18, 25, .15), rgba(18, 18, 25, .75))
}
.news-art>div:last-child {
position: absolute;
bottom: 1.4rem;
left: 1.4rem;
right: 1.4rem;
z-index: 2
}
.news-form {
padding: clamp(1.5rem, 4vw, 2.6rem)
}
.checkrow {
display: flex;
gap: .7rem;
align-items: flex-start;
background: rgba(255, 255, 255, .03);
border: 2px solid var(--line);
border-radius: 14px;
padding: .8rem .9rem;
margin: .9rem 0
}
.checkrow input {
width: 20px;
height: 20px;
margin-top: .2rem;
flex-shrink: 0;
accent-color: var(--tang)
}
.checkrow label {
font-size: .82rem;
color: #d7d5e2
}
.err {
color: #ff9aa8;
font-size: .8rem;
display: none;
margin-top: .3rem
}
.was-v .field input:invalid~.err,
.was-v .field select:invalid~.err,
.was-v .checkrow input:invalid~.err {
display: block
}
.was-v .field input:invalid,
.was-v .field select:invalid {
border-color: #ff7b8d
}
.okmsg {
color: var(--aqua);
font-size: .88rem;
font-weight: 600;
margin-top: .7rem
}
/* contact */
.c-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
margin-bottom: 1.2rem
}
@media(max-width:900px) {
.c-cards {
grid-template-columns: 1fr 1fr
}
}
@media(max-width:560px) {
.c-cards {
grid-template-columns: 1fr
}
}
.ccard {
background: var(--panel);
border: 2px solid var(--line);
border-radius: 18px;
padding: 1.2rem;
transition: all .25s
}
.ccard:hover {
transform: translateY(-4px);
border-color: var(--aqua);
box-shadow: var(--hard)
}
.ccard i {
font-size: 1.4rem;
color: var(--sun)
}
.ccard b {
display: block;
margin: .5rem 0 .2rem;
font-family: var(--disp)
}
.ccard span {
font-size: .85rem;
color: var(--muted)
}
.contact-grid {
display: grid;
grid-template-columns: 0.8fr;
gap: 1.2rem;
justify-content: center;
}
@media(max-width:900px) {
.contact-grid {
grid-template-columns: 1fr
}
}
.cform {
background: var(--panel);
border: 2px solid var(--line);
border-radius: 22px;
padding: 1.6rem;
box-shadow: var(--hard)
}
.mapbox {
border: 2px solid var(--line);
border-radius: 22px;
overflow: hidden;
box-shadow: var(--hard);
min-height: 420px;
display: flex;
flex-direction: column;
background: var(--panel)
}
.mapbox iframe {
flex: 1;
min-height: 340px;
width: 100%;
border: 0;
filter: saturate(1.1)
}
.mapbox .cap {
padding: .9rem 1.1rem;
background: var(--panel2);
border-top: 2px solid var(--line);
font-size: .82rem;
color: var(--muted);
display: flex;
gap: .6rem;
align-items: center
}
/* footer */
.cta-band {
background: linear-gradient(120deg, var(--tang), #b23a12);
border: 2px solid #0c0c12;
border-radius: 26px;
padding: clamp(2rem, 5vw, 3.4rem);
box-shadow: var(--hard);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
color: #fff;
position: relative;
overflow: hidden
}
.cta-band::after {
content: "✦ ✦ ✦";
position: absolute;
top: .8rem;
right: 1.2rem;
opacity: .35;
font-family: var(--mono);
letter-spacing: .4em
}
footer {
padding: 0 0 2rem
}
.foot-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
gap: 1.4rem;
margin: 2.5rem 0 1.5rem
}
@media(max-width:900px) {
.foot-grid {
grid-template-columns: 1fr 1fr
}
}
@media(max-width:560px) {
.foot-grid {
grid-template-columns: 1fr
}
}
.foot-grid h5 {
font-family: var(--mono);
font-size: .7rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--sun);
margin-bottom: .9rem
}
.foot-grid ul {
list-style: none;
padding: 0;
margin: 0
}
.foot-grid a {
color: var(--muted);
text-decoration: none;
font-size: .88rem;
display: inline-block;
padding: .28rem 0;
transition: all .2s
}
.foot-grid a:hover {
color: #fff;
transform: translateX(3px)
}
.legal-strip {
background: var(--panel);
border: 2px solid var(--line);
border-radius: 16px;
padding: 1rem 1.2rem;
font-size: .8rem;
color: var(--muted);
display: flex;
gap: .8rem
}
.legal-strip i {
color: var(--aqua);
font-size: 1.2rem;
flex-shrink: 0
}
.foot-base {
display: flex;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
padding-top: 1.2rem;
font-size: .8rem;
color: var(--dim)
}
.foot-base a {
color: var(--muted);
text-decoration: none;
margin-left: 1rem
}
.foot-base a:hover {
color: var(--sun)
}
/* modals */
.modal-content {
background: var(--bg2) !important;
border: 2px solid var(--line) !important;
border-radius: 22px !important;
color: var(--ink);
box-shadow: 0 30px 90px rgba(0, 0, 0, .7)
}
.modal-header {
border-bottom: 2px solid var(--line) !important
}
.modal-footer {
border-top: 2px solid var(--line) !important
}
.m-legal h4 {
font-size: 1.15rem;
color: var(--sun);
margin-top: 1.3rem
}
.m-legal p,
.m-legal li {
font-size: .88rem;
color: var(--muted)
}
.bal-pill {
display: inline-flex;
align-items: center;
gap: .5rem;
background: #101018;
border: 2px solid var(--line);
border-radius: 100px;
padding: .4rem 1rem;
font-family: var(--mono);
font-size: .8rem;
color: var(--sun)
}
.betpills {
display: flex;
gap: .5rem;
flex-wrap: wrap;
justify-content: center;
margin: .9rem 0
}
.betp {
border: 2px solid var(--line);
background: var(--panel2);
color: #fff;
border-radius: 100px;
padding: .45rem 1rem;
font-size: .8rem;
font-weight: 700;
transition: all .2s
}
.betp.on,
.betp:hover {
border-color: #0c0c12;
background: var(--sun);
color: #241500;
box-shadow: 3px 3px 0 rgba(0, 0, 0, .45)
}
.g-reels {
display: flex;
gap: .7rem;
justify-content: center;
margin: 1.1rem 0
}
.g-reel {
width: 84px;
height: 96px;
border-radius: 14px;
background: #0b0b12;
border: 2px solid #3a3a52;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--disp);
font-size: 2.3rem;
color: var(--sun)
}
.g-reel.roll {
animation: reelJit .1s linear infinite
}
.g-cards {
display: flex;
gap: .6rem;
justify-content: center;
flex-wrap: wrap;
margin: .9rem 0
}
.g-card {
width: 70px;
height: 98px;
border-radius: 12px;
background: #f7f4ea;
color: #14141c;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-weight: 800;
box-shadow: 4px 4px 0 rgba(0, 0, 0, .5);
animation: tIn .4s ease both
}
.g-card.red {
color: #c22a3d
}
.g-card.back {
background: linear-gradient(150deg, var(--grape), #4a3fa0);
color: #fff;
border: 2px solid #0c0c12;
cursor: pointer;
transition: transform .2s
}
.g-card.back:hover {
transform: translateY(-5px)
}
.g-card .vv {
font-family: var(--disp);
font-size: 1.4rem;
line-height: 1
}
.g-dice {
display: flex;
gap: .9rem;
justify-content: center;
margin: 1rem 0
}
.g-die {
width: 66px;
height: 66px;
border-radius: 14px;
background: #f7f4ea;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px;
padding: 12px;
box-shadow: 4px 4px 0 rgba(0, 0, 0, .5)
}
.g-die span {
width: 8px;
height: 8px;
border-radius: 50%;
background: #14141c;
margin: auto
}
.g-die span.e {
background: transparent
}
.g-die.roll {
animation: wiggle .35s ease infinite
}
@keyframes wiggle {
0% {
transform: rotate(-10deg)
}
50% {
transform: rotate(8deg)
}
100% {
transform: rotate(-6deg)
}
}
.resbox {
border-radius: 14px;
padding: .9rem 1rem;
margin: 1rem 0;
text-align: center;
font-family: var(--disp);
font-weight: 700;
font-size: 1.1rem;
display: none
}
.resbox.show {
display: block;
animation: tIn .4s ease both
}
.resbox.win {
background: rgba(46, 211, 183, .12);
border: 2px solid var(--aqua);
color: #a7f3df
}
.resbox.big {
background: rgba(255, 197, 61, .12);
border: 2px solid var(--sun);
color: var(--sun)
}
.resbox.meh {
background: rgba(255, 255, 255, .04);
border: 2px solid var(--line);
color: var(--muted)
}
.spinw {
width: 200px;
height: 200px;
border-radius: 50%;
border: 6px solid #0c0c12;
box-shadow: 0 0 0 3px var(--sun), 0 16px 50px rgba(0, 0, 0, .5);
transition: transform 3.2s cubic-bezier(.12, .8, .12, 1);
background: conic-gradient(var(--tang) 0 45deg, var(--grape) 45deg 90deg, var(--aqua) 90deg 135deg, var(--sun) 135deg 180deg, var(--rose) 180deg 225deg, #3a3a52 225deg 270deg, var(--tang) 270deg 315deg, var(--grape) 315deg 360deg);
position: relative
}
.spinw::after {
content: "★";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.6rem;
color: #fff;
background: radial-gradient(circle, #14141c 0 28px, transparent 29px)
}
.ptr {
width: 0;
height: 0;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
border-top: 16px solid var(--sun);
filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5))
}
.pickrow {
display: flex;
gap: .55rem;
justify-content: center;
flex-wrap: wrap;
margin: .7rem 0
}
.pick {
border: 2px solid var(--line);
background: var(--panel2);
color: #fff;
border-radius: 12px;
padding: .55rem 1rem;
font-size: .82rem;
font-weight: 600;
transition: all .2s
}
.pick.sel {
border-color: #0c0c12;
background: var(--aqua);
color: #04241d;
box-shadow: 3px 3px 0 rgba(0, 0, 0, .45)
}
.vgrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: .7rem;
max-width: 400px;
margin: 1rem auto
}
.vault {
aspect-ratio: 1;
border-radius: 14px;
background: var(--panel3);
border: 2px solid var(--line);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 1.8rem;
cursor: pointer;
transition: all .2s
}
.vault:hover:not(.open) {
transform: translateY(-4px);
border-color: var(--sun)
}
.vault.open {
background: rgba(255, 197, 61, .12);
border-color: var(--sun);
cursor: default
}
.vault small {
font-size: .62rem;
color: var(--muted)
}
.racebox {
background: #0e0e15;
border: 2px solid var(--line);
border-radius: 14px;
padding: .9rem;
display: flex;
flex-direction: column;
gap: .55rem;
margin: .9rem 0
}
.lane {
display: flex;
align-items: center;
gap: .7rem;
background: rgba(255, 255, 255, .03);
border-radius: 10px;
padding: .45rem .7rem;
overflow: hidden
}
.lane .car {
font-size: 1.3rem;
transition: left 2.6s ease;
position: relative;
left: 0
}
.lane .nm {
font-family: var(--mono);
font-size: .64rem;
color: var(--muted);
min-width: 92px;
text-transform: uppercase
}
.lvl-dots {
display: flex;
gap: .45rem;
justify-content: center;
margin: .8rem 0
}
.lvl-dots span {
width: 32px;
height: 8px;
border-radius: 100px;
background: var(--panel3);
border: 1px solid var(--line)
}
.lvl-dots span.on {
background: linear-gradient(90deg, var(--tang), var(--sun))
}
/* reveal system: pop + slide */
.pop,
.slide-l,
.slide-r {
opacity: 0;
transition: opacity .6s ease, transform .7s cubic-bezier(.2, .9, .25, 1.15)
}
.pop {
transform: scale(.92) translateY(18px)
}
.slide-l {
transform: translateX(-36px)
}
.slide-r {
transform: translateX(36px)
}
.pop.in,
.slide-l.in,
.slide-r.in {
opacity: 1;
transform: none
}
.floaty {
animation: floaty 5s ease-in-out infinite
}
@keyframes floaty {
0%,
100% {
transform: translateY(0) rotate(0)
}
50% {
transform: translateY(-10px) rotate(1.5deg)
}
}
.toast-chunk {
background: var(--panel2) !important;
border: 2px solid var(--aqua) !important;
color: #fff !important;
border-radius: 14px !important;
font-size: .88rem
}
#toTop {
position: fixed;
bottom: 1.2rem;
right: 1.2rem;
width: 48px;
height: 48px;
border-radius: 14px;
background: var(--sun);
color: #241500;
border: 2px solid #0c0c12;
box-shadow: 4px 4px 0 rgba(0, 0, 0, .5);
font-size: 1.2rem;
opacity: 0;
pointer-events: none;
transition: all .3s;
z-index: 60
}
#toTop.show {
opacity: 1;
pointer-events: auto
}
.confetti {
position: absolute;
width: 9px;
height: 14px;
border-radius: 2px;
pointer-events: none;
z-index: 50
}
:focus-visible {
outline: 3px solid var(--sun);
outline-offset: 3px;
border-radius: 8px
}
@media(prefers-reduced-motion:reduce) {
*,
*::before,
*::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important
}
.pop,
.slide-l,
.slide-r {
opacity: 1;
transform: none
}
.topstrip-inner,
.marquee-track {
animation: none
}
}

/* ============================================================
   INNER PAGE ADDITIONS (page hero, prose, forms, map duo)
   ============================================================ */
.page-hero {
padding: 3.4rem 0 2.4rem;
position: relative
}
.page-hero h1 {
font-size: clamp(2.5rem, 5.8vw, 4.2rem);
margin: 1rem 0 .8rem
}
.page-hero h1 .w-tang {
color: var(--tang)
}
.page-hero h1 .w-sun {
background: var(--sun);
color: #241500;
padding: 0 .18em;
border-radius: .18em;
display: inline-block;
transform: rotate(-1.5deg);
border: 2px solid #0c0c12
}
.page-hero h1 .w-line {
position: relative;
display: inline-block
}
.page-hero h1 .w-line::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 4px;
height: 10px;
background: rgba(46, 211, 183, .4);
z-index: -1;
border-radius: 6px
}
.page-hero .lead {
color: #cfcddd;
font-size: 1.05rem;
max-width: 660px;
margin: 0
}
.crumb {
font-family: var(--mono);
font-size: .72rem;
color: var(--dim);
letter-spacing: .08em;
text-transform: uppercase;
display: inline-block
}
.crumb a {
color: var(--sun);
text-decoration: none
}
.crumb a:hover {
color: #fff
}
.prose {
max-width: 860px;
margin: 0 auto;
background: var(--panel);
border: 2px solid var(--line);
border-radius: 24px;
padding: clamp(1.6rem, 4vw, 3rem);
box-shadow: var(--hard)
}
.prose h4 {
font-family: var(--disp);
color: var(--sun);
font-size: 1.15rem;
margin: 1.7rem 0 .5rem
}
.prose h4:first-child {
margin-top: 0
}
.prose p,
.prose li {
color: var(--muted);
font-size: .95rem
}
.prose ul {
padding-left: 1.2rem;
margin: .5rem 0 1rem
}
.prose ul li {
margin-bottom: .35rem
}
.prose strong {
color: var(--ink)
}
.contact-duo {
display: grid;
grid-template-columns: 1.1fr .9fr;
gap: 1.2rem;
align-items: stretch
}
@media(max-width:900px) {
.contact-duo {
grid-template-columns: 1fr
}
}
.form-shell {
max-width: 780px;
margin: 0 auto
}
.perk-list {
list-style: none;
padding: 0;
margin: .9rem 0 0;
display: flex;
flex-direction: column;
gap: .5rem
}
.perk-list li {
display: flex;
gap: .55rem;
align-items: flex-start;
font-size: .9rem;
color: #e8e6f2
}
.perk-list i {
color: var(--aqua);
margin-top: .2rem
}