@charset "UTF-8";

:root {
color-scheme:dark;
--bg:#080e20;
--panel:#101a32;
--text:#f3f6ff;
--muted:#aebcd4;
--cyan:#6de9ed;
--violet:#b59aff;
--line:#2b3854;
font-family:Inter,"Segoe UI",system-ui,sans-serif;
line-height:1.65;
font-synthesis:none
}

* {
box-sizing:border-box
}
html {
scroll-behavior:smooth;
scroll-padding-top:2rem
}
body {
margin:0;
background:var(--bg);
color:var(--text)
}
a {
color:var(--cyan);
text-underline-offset:.25em
}
a:hover {
color:white
}
a:focus-visible,summary:focus-visible {
outline:3px solid var(--cyan);
outline-offset:6px;
border-radius:4px
}
img {
max-width:100%;
height:auto
}
p {
margin:0 0 1.25rem
}
h1,h2,h3 {
line-height:1.12;
letter-spacing:-.045em;
margin:0 0 1.3rem
}
h1 {
font-size:clamp(3.5rem,7.4vw,6.8rem);
font-weight:800
}
h2 {
font-size:clamp(2.2rem,4.7vw,3.7rem)
}
h3 {
font-size:1.6rem
}
strong {
color:var(--text)
}
.wrap {
width:min(1160px,calc(100% - 3rem));
margin-inline:auto
}
.skip {
position:absolute;
top:-100px;
left:1rem;
z-index:10;
padding:.6rem 1rem;
background:white;
color:#080e20
}
.skip:focus {
top:1rem
}
.header {
display:flex;
align-items:center;
justify-content:space-between;
gap:2rem;
padding-block:1.7rem
}
.brand {
display:inline-flex;
align-items:center;
gap:.6rem;
color:white;
font-size:1.4rem;
font-weight:800;
letter-spacing:-.055em;
text-decoration:none;
white-space:nowrap
}
.brand-play {
color:var(--cyan);
margin-left:.15em
}
.header nav,.footer nav {
display:flex;
gap:1.7rem;
align-items:center
}
.header nav a {
color:var(--muted);
font-size:.9rem;
text-decoration:none;
font-weight:600
}
.header nav a:hover {
color:white
}
.header .nav-cta {
border:1px solid var(--line);
padding:.5rem .9rem;
border-radius:8px;
color:var(--text)
}
.hero {
display:grid;
grid-template-columns:1.15fr 1fr;
gap:4rem;
align-items:center;
padding-block:4.5rem 5.5rem;
position:relative
}
.hero:before {
content:"";
position:absolute;
z-index:-1;
inset:-5rem 0;
background:radial-gradient(ellipse at 80% 45%,#47257142,transparent 55%)
}
.eyebrow {
font-size:.72rem;
letter-spacing:.15em;
font-weight:750;
text-transform:uppercase;
color:var(--cyan);
margin-bottom:1.4rem
}
.status-dot {
display:inline-block;
width:.5rem;
height:.5rem;
border-radius:50%;
background:var(--cyan);
box-shadow:0 0 18px #6de9ed65;
margin-right:.5rem
}
.hero h1 span {
color:var(--cyan);
background:linear-gradient(100deg,var(--cyan),var(--violet));
background-clip:text;
-webkit-text-fill-color:transparent
}
.lede {
color:var(--muted);
font-size:1.1rem;
max-width:33rem
}
.actions {
display:flex;
gap:.9rem;
flex-wrap:wrap;
margin-top:2rem
}
.button {
display:inline-flex;
align-items:center;
justify-content:center;
gap:1rem;
min-height:52px;
border-radius:9px;
padding:.8rem 1.25rem;
font-size:.95rem;
font-weight:750;
text-decoration:none;
transition:transform .2s,box-shadow .2s
}
.button:hover {
transform:translateY(-2px)
}
.primary {
background:var(--cyan);
color:#071a24;
box-shadow:0 7px 32px #6de9ed18
}
.primary:hover {
color:#071a24;
box-shadow:0 7px 32px #6de9ed40
}
.secondary {
border:1px solid var(--line);
color:var(--text);
background:#101a32
}
.access-note {
font-size:.8rem;
color:var(--muted);
margin-top:.8rem
}
.hero-tags {
padding:0;
list-style:none;
display:flex;
flex-wrap:wrap;
gap:.6rem 1.2rem;
color:var(--muted);
font-size:.75rem;
margin-top:2.3rem
}
.hero-tags li:before {
content:"+";
color:var(--violet);
margin-right:.4rem
}
.game-preview {
margin:0;
background:linear-gradient(140deg,#1a2845,#11172c);
padding:1rem;
border:1px solid #435076;
border-radius:20px;
box-shadow:0 20px 80px #0006,0 0 60px #774bcc14;
transform:rotate(1deg);
animation:arrive .8s ease-out both
}
.game-preview>img {
display:block;
width:100%;
max-height:520px;
object-fit:contain;
background:#080e20;
border-radius:10px
}
.preview-top {
display:flex;
align-items:center;
gap:.5rem;
font-size:.65rem;
font-weight:750;
letter-spacing:.1em;
padding:.2rem .2rem 1rem
}
.mini-cubes {
color:var(--cyan)
}
.preview-label {
margin-left:auto;
font-size:.6rem;
font-weight:500;
color:var(--muted);
letter-spacing:0
}
.game-preview figcaption {
font-size:.72rem;
color:var(--muted);
text-align:center;
margin-top:.8rem
}
.principles {
border-block:1px solid var(--line);
background:#0c1427
}
.principles .wrap {
display:flex;
justify-content:space-between;
gap:1rem;
padding-block:1.5rem;
align-items:center
}
.principles p {
margin:0;
color:var(--muted);
font-size:.9rem
}
.principles strong {
margin-left:1.4rem;
letter-spacing:-.02em
}
.section {
padding-block:6rem
}
.steps {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:3rem;
margin-top:3rem
}
.steps article {
border-top:1px solid var(--line);
padding-top:1.4rem
}
.step-number {
color:var(--violet);
font-family:ui-monospace,monospace;
font-size:.9rem;
display:block;
margin-bottom:1.5rem
}
.steps p,.feature p,.section-heading>p {
color:var(--muted);
font-size:.95rem
}
.section-heading {
display:flex;
justify-content:space-between;
align-items:end;
gap:2rem
}
.features {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:1.2rem;
margin-top:2rem
}
.feature {
background:linear-gradient(125deg,#111d34,#0d1629);
border:1px solid var(--line);
border-radius:16px;
padding:2rem;
min-width:0
}
.feature-wide {
grid-column:span 2
}
.feature-icon {
display:block;
color:var(--violet);
font-size:2rem;
margin-bottom:1.5rem;
line-height:1
}
.feature .eyebrow {
color:var(--cyan);
font-size:.7rem
}
.feature-wide h3 {
font-size:2rem
}
.feature p.small {
font-size:.8rem
}
.feature-footer {
display:flex;
justify-content:space-between;
gap:1rem;
flex-wrap:wrap;
border-top:1px solid var(--line);
padding-top:1rem;
margin-top:2rem;
font-size:.8rem
}
.feature-footer>span {
color:var(--muted)
}
.privacy-feature {
background:linear-gradient(125deg,#10272d,#11172e)
}
.feature a {
font-size:.85rem
}
.availability {
border:1px solid #4a4a7a;
border-radius:20px;
background:radial-gradient(ellipse at right,#45307365,transparent 70%),#121a33;
padding:3rem;
display:grid;
grid-template-columns:1.4fr 1fr;
gap:3rem;
align-items:center
}
.availability p {
color:var(--muted)
}
.availability .eyebrow {
color:var(--violet)
}
.availability-badge {
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:.7rem;
border:1px solid #5e5a80;
background:#0c142ab3;
border-radius:12px;
padding:2rem 1.2rem;
text-align:center
}
.availability-badge>span:not(.status-dot) {
flex-basis:100%;
color:var(--muted);
font-size:.8rem
}
.availability-badge a {
font-size:.8rem;
margin-top:.5rem
}
.small {
font-size:.8rem
}
.faq {
display:grid;
grid-template-columns:1fr 1.6fr;
gap:4rem
}
details {
border-bottom:1px solid var(--line);
padding:1.25rem 0
}
details:first-child {
border-top:1px solid var(--line)
}
summary {
cursor:pointer;
font-weight:650;
font-size:1rem;
padding-right:.5rem
}
details p {
color:var(--muted);
font-size:.9rem;
margin:1rem 0 .25rem
}
.footer {
border-top:1px solid var(--line);
padding-block:2.5rem;
display:flex;
flex-wrap:wrap;
align-items:center;
gap:1rem 2rem
}
.footer>p:not(.legal) {
font-size:.8rem;
color:var(--muted);
margin:0
}
.footer nav {
margin-left:auto;
font-size:.85rem
}
.footer .legal {
flex-basis:100%;
font-size:.7rem;
color:var(--muted);
margin:0
}
.document {
max-width:760px;
padding-block:4rem 6rem
}
.document h1 {
font-size:clamp(2.5rem,6vw,4rem)
}
.document h2 {
font-size:1.5rem;
margin-top:2.5rem
}
.document p,.document li {
color:var(--muted)
}
.document .notice {
padding:1.4rem;
border:1px solid var(--line);
border-radius:12px;
background:var(--panel)
}
@keyframes arrive {
from {
opacity:0;
translate:0 15px
}
to {
opacity:1;
translate:0 0
}

}

@media(max-width:850px) {
.header {
flex-wrap:wrap;
gap:1rem
}
.header nav {
gap:1.1rem;
flex-wrap:wrap
}
.hero {
gap:2rem;
padding-top:2.5rem;
grid-template-columns:1fr 1fr
}
.hero h1 {
font-size:3.9rem
}
.steps {
gap:1.5rem
}
.section-heading {
display:block
}
.availability {
gap:1.5rem;
padding:2rem
}
.faq {
gap:2rem
}
.footer nav {
margin-left:0
}

}

@media(max-width:600px) {
.wrap {
width:calc(100% - 2rem)
}
.header {
padding-block:1.2rem
}
.brand {
font-size:1.3rem
}
.header nav {
width:100%;
justify-content:space-between;
gap:.6rem
}
.header nav a {
font-size:.73rem
}
.header .nav-cta {
padding:.4rem .6rem
}
.hero {
grid-template-columns:1fr;
gap:2.5rem;
padding-block:2.5rem 3.5rem
}
.hero h1 {
font-size:clamp(3.2rem,13.5vw,4.5rem)
}
.hero .eyebrow {
font-size:.64rem
}
.lede {
font-size:1rem
}
.game-preview {
transform:none;
max-width:420px;
justify-self:center
}
.game-preview>img {
max-height:440px
}
.principles .wrap {
display:block;
padding-block:1.2rem
}
.principles p+p {
margin-top:.5rem
}
.principles strong:first-child {
margin-left:0
}
.principles strong {
margin-left:.7rem
}
.section {
padding-block:3.5rem
}
.steps,.features,.availability,.faq {
grid-template-columns:1fr
}
.steps {
gap:2rem
}
.step-number {
margin-bottom:1rem
}
.feature-wide {
grid-column:auto
}
.feature {
padding:1.5rem
}
.feature-wide h3 {
font-size:1.8rem
}
.availability {
padding:1.6rem
}
.faq {
gap:1rem
}
.faq h2 br {
display:none
}
.footer nav {
width:100%;
gap:1.3rem
}
.footer {
padding-block:2rem
}
.button {
font-size:.88rem
}
.hero-tags {
margin-top:1.5rem
}

}

@media(prefers-reduced-motion:reduce) {
html {
scroll-behavior:auto
}
*,*:before,*:after {
animation:none!important;
transition:none!important
}
.button:hover {
transform:none
}

}