:root {
--ink:#14203a;
--muted:#57657a;
--blue:#2458ef;
--line:#dce2ed;
--paper:#fff;
--tint:#f3f6fc;
--radius:20px}
* {
box-sizing:border-box}
html {
scroll-behavior:smooth;
scroll-padding-top:100px}
body {
margin:0;
color:var(--ink);
background:var(--paper);
font-family:Arial,Helvetica,sans-serif;
line-height:1.6}
a {
color:inherit;
text-decoration:none}
button {
font:inherit;
cursor:pointer}
img {
max-width:100%;
height:auto;
display:block}
h1,h2,h3,p {
margin-top:0}
h1,h2,h3 {
line-height:1.1;
letter-spacing:-.045em}
h2 {
font-size:clamp(2rem,4vw,3.5rem);
font-weight:600}
h3 {
font-size:1.65rem}
em {
font-style:normal;
color:var(--blue)}
p {
color:var(--muted)}
a,button {
touch-action:manipulation}
a:focus-visible,button:focus-visible {
outline:3px solid #ff9f43;
outline-offset:5px}
.shell {
max-width:1280px;
margin:auto;
padding-left:40px;
padding-right:40px}
.section {
padding-top:110px;
padding-bottom:110px}
.eyebrow {
font-size:.75rem;
font-weight:700;
letter-spacing:.15em;
color:var(--blue);
margin-bottom:22px}
.site-header {
position:sticky;
top:0;
z-index:20;
background:#fffffff5;
border-bottom:1px solid var(--line);
backdrop-filter:blur(14px)}
.nav {
height:92px;
display:flex;
align-items:center;
justify-content:space-between;
gap:24px}
.brand img {
width:177px;
height:auto}
.nav nav {
display:flex;
align-items:center;
gap:30px;
font-size:.875rem;
font-weight:600}
.nav a:hover,.text-link:hover {
color:var(--blue)}
.nav-contact {
padding:11px 17px;
border:1px solid var(--line);
border-radius:8px}
.skip-link {
position:fixed;
left:12px;
top:-100px;
background:var(--ink);
color:#fff;
padding:12px;
z-index:100}
.skip-link:focus {
top:12px}
.menu-toggle {
border:0;
background:var(--tint);
padding:8px 12px;
border-radius:6px}
.hero {
display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
padding-top:76px;
padding-bottom:76px;
align-items:center}
.hero h1 {
font-size:clamp(3.8rem,6.7vw,6.4rem);
line-height:1;
letter-spacing:-.065em;
margin-bottom:28px;
font-weight:600}
.hero-intro {
max-width:470px;
font-size:1.1rem;
line-height:1.75}
.actions {
display:flex;
align-items:center;
gap:28px;
margin-top:32px}
.button {
display:inline-flex;
align-items:center;
justify-content:center;
gap:30px;
padding:15px 22px;
border-radius:8px;
font-size:.95rem;
font-weight:600}
.primary {
background:var(--blue);
color:white;
transition:background .2s,transform .2s}
.primary:hover {
background:#1641c4;
transform:translateY(-2px)}
.text-link {
font-size:.95rem;
font-weight:600}
.hero-note {
font-size:.8rem;
margin-top:36px;
margin-bottom:0}
.hero-note span {
color:#abb5c8;
padding:0 8px}
.hero-showcase {
background:#eaf0ff;
border-radius:24px;
padding:26px 24px 0;
overflow:hidden}
.showcase-label {
display:flex;
justify-content:space-between;
font-size:.65rem;
font-weight:bold;
letter-spacing:.12em;
color:#425780;
margin-bottom:22px}
.hero-screen {
display:block;
border:6px solid white;
border-radius:10px;
overflow:hidden;
transform:rotate(-3deg);
box-shadow:0 18px 35px #203b7130;
margin:14px -10px 32px 5px}
.hero-caption {
display:flex;
justify-content:space-between;
align-items:center;
font-size:1.35rem;
line-height:1.3;
margin:0 10px 24px}
.big-arrow {
font-size:3rem;
color:var(--blue)}
.hero-games {
display:flex;
gap:20px;
height:220px;
padding:0 12px;
overflow:hidden}
.hero-games>a {
position:relative;
flex:1;
border:5px solid #fff;
border-radius:14px 14px 0 0;
overflow:hidden;
background:#080808}
.hero-games img {
width:100%;
height:auto}
.hero-games span {
position:absolute;
top:12px;
left:10px;
background:white;
color:var(--ink);
padding:3px 10px;
border-radius:30px;
font-size:.75rem;
font-weight:bold}
.discipline-strip {
background:var(--ink);
color:white}
.discipline-strip .shell {
display:flex;
justify-content:space-between;
gap:20px;
padding-top:22px;
padding-bottom:22px;
font-size:.85rem}
.section-heading {
display:flex;
justify-content:space-between;
gap:50px;
align-items:end;
margin-bottom:40px}
.section-heading h2 {
margin-bottom:0}
.section-heading>p {
max-width:280px;
margin:0}
.filters {
display:flex;
gap:10px;
flex-wrap:wrap;
margin-bottom:30px}
.filters button,.screen-controls button {
border:1px solid var(--line);
background:#fff;
border-radius:30px;
padding:9px 18px;
font-size:.875rem;
color:var(--muted)}
.filters button[aria-pressed=true] {
color:white;
background:var(--ink);
border-color:var(--ink)}
[hidden] {
display:none!important}
.accounting-card {
background:#eff1ff;
border-radius:var(--radius);
padding:40px;
margin-bottom:28px;
overflow:hidden}
.project-heading {
display:flex;
gap:40px;
justify-content:space-between;
align-items:center}
.project-heading h3 {
font-size:2.5rem;
margin-bottom:24px}
.project-heading h3 span {
display:block;
font-size:1.1rem;
font-weight:400;
letter-spacing:0;
color:#5c6382;
margin-top:10px}
.project-heading>p {
max-width:340px}
.screen-controls {
display:flex;
gap:8px;
margin-bottom:20px}
.screen-controls button[aria-pressed=true] {
background:var(--blue);
border-color:var(--blue);
color:white}
.accounting-image {
display:block;
border:7px solid #fff;
border-radius:12px;
overflow:hidden;
background:white}
.accounting-image img {
width:100%;
aspect-ratio:1.947;
object-fit:contain}
.project-foot {
display:flex;
justify-content:space-between;
gap:20px;
padding-top:22px;
font-size:.8rem}
.project-foot>a {
font-weight:700}
.game-pair {
display:grid;
grid-template-columns:1fr 1fr;
gap:28px}
.game-feature {
display:grid;
grid-template-columns:1fr .8fr;
align-items:center;
gap:20px;
padding:36px 28px;
border-radius:var(--radius);
overflow:hidden}
.game-feature h3 {
font-size:2.3rem}
.game-feature .eyebrow {
font-size:.65rem;
line-height:1.7}
.game-feature p {
font-size:.9rem}
.game-feature .text-link {
font-size:.85rem}
.dream {
background:#ecedff}
.monochrome {
background:#141718;
color:white}
.monochrome p {
color:#c7ccd1}
.monochrome .eyebrow {
color:#b5c7ff}
.phone-image {
border:5px solid #ffffff55;
border-radius:17px;
overflow:hidden;
box-shadow:0 15px 30px #0002}
.phone-image img {
width:100%}
.collection {
margin-top:28px;
background:var(--tint);
padding:32px;
border-radius:var(--radius)}
.collection-heading {
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
margin-bottom:24px}
.collection-heading h3 {
font-size:2rem;
margin:0}
.collection-heading .eyebrow {
margin-bottom:14px}
.collection-image {
display:block;
overflow:hidden;
border-radius:12px}
.collection-image img {
width:100%}
.game-links {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:0 22px;
margin-top:22px}
.game-links a {
display:flex;
justify-content:space-between;
padding:12px 0;
border-bottom:1px solid var(--line);
font-size:.85rem;
font-weight:600}
.game-links a:hover {
color:var(--blue)}
.capabilities {
background:#111d36;
color:white}
.capabilities .eyebrow {
color:#99b5ff}
.capabilities p {
color:#bdc8dc}
.services-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:0 40px}
.services-grid article {
border-top:1px solid #39445a;
padding:28px 0;
margin-top:20px;
display:flex;
flex-direction:column}
.service-number {
color:#90acfa;
font-size:.8rem;
margin-bottom:35px}
.services-grid h3 {
font-size:1.5rem;
letter-spacing:-.03em}
.services-grid p {
font-size:.95rem;
line-height:1.75}
.service-tags {
margin-top:auto;
color:#8da1c2;
font-size:.75rem;
padding-top:12px}
.startup {
display:grid;
grid-template-columns:1fr 1fr;
gap:100px}
.startup-intro h2 {
line-height:1.15}
.startup-intro>p:not(.eyebrow) {
max-width:480px;
margin-bottom:30px}
.steps {
list-style:none;
padding:0;
margin:0}
.steps li {
display:flex;
gap:25px;
padding:26px 0;
border-bottom:1px solid var(--line)}
.steps li:first-child {
padding-top:0}
.steps li>span {
color:var(--blue);
font-size:.85rem;
padding-top:5px}
.steps h3 {
font-size:1.25rem;
letter-spacing:-.03em;
margin-bottom:10px}
.steps p {
font-size:.95rem;
margin:0}
.about {
background:var(--tint)}
.about-grid {
display:grid;
grid-template-columns:1fr 2fr;
gap:50px}
.about-grid>div>p {
font-size:1.1rem;
line-height:1.8;
max-width:710px}
.about-values {
display:flex;
gap:26px;
padding-top:22px;
font-size:.85rem;
font-weight:bold}
.contact h2 {
font-size:clamp(4rem,8vw,7.5rem);
margin-bottom:40px}
.contact-bottom {
display:flex;
align-items:end;
justify-content:space-between;
gap:40px}
.contact-bottom p {
margin:0}
.contact-bottom>a {
font-size:clamp(1.1rem,2.6vw,2rem);
letter-spacing:-.025em;
border-bottom:1px solid var(--ink);
padding-bottom:10px}
.contact-bottom>a span {
margin-left:20px;
color:var(--blue)}
.site-footer {
background:var(--tint);
padding-top:55px}
.footer-top {
display:grid;
grid-template-columns:2fr 1fr 1.3fr;
gap:40px;
padding-bottom:45px}
.footer-wordmark {
font-size:2.7rem;
font-weight:700;
letter-spacing:-.07em}
.footer-top p {
font-size:.875rem}
.footer-top .eyebrow {
font-size:.7rem;
margin-top:14px}
.footer-top>div>a:not(.footer-wordmark) {
display:block;
font-size:.875rem;
margin-bottom:10px}
.footer-bottom {
border-top:1px solid var(--line);
padding-top:23px;
padding-bottom:23px;
display:flex;
justify-content:space-between;
gap:20px;
color:var(--muted);
font-size:.75rem}
.footer-bottom a {
margin-left:22px}
.legal {
max-width:930px;
padding-top:70px;
padding-bottom:80px}
.legal h1 {
font-size:3rem;
margin-bottom:40px}
.legal .subHeading {
font-size:1.2rem;
margin-bottom:12px}
.legal p,.legal li {
line-height:1.8}
.legal a {
color:var(--blue);
text-decoration:underline}
.legal strong {
color:var(--ink)}
.image-dialog {
border:0;
padding:50px 15px 15px;
background:#fff;
border-radius:12px;
max-width:95vw;
max-height:95vh}
.image-dialog::backdrop {
background:#0b1428d9}
.image-dialog img {
max-height:80vh;
object-fit:contain;
margin:auto}
.dialog-close {
position:absolute;
right:14px;
top:10px;
background:var(--ink);
color:white;
border:0;
border-radius:6px;
padding:5px 12px}
body:has(dialog[open]) {
overflow:hidden}

@media(min-width:901px) {
.menu-toggle {
display:none}
}
@media(max-width:1000px) {
.hero {
gap:30px}
.hero h1 {
font-size:4.4rem}
.nav nav {
gap:18px}
.game-feature {
grid-template-columns:1fr;
padding:28px}
.phone-image {
max-width:220px;
margin:0 auto}
.startup {
gap:45px}
.services-grid {
gap:0 24px}
}
@media(max-width:900px) {
.shell {
padding-left:24px;
padding-right:24px}
.nav {
height:78px}
.nav nav {
gap:14px;
flex-wrap:wrap}
.nav.js-nav nav {
display:none;
position:absolute;
left:0;
right:0;
top:78px;
background:white;
padding:22px 24px;
border-bottom:1px solid var(--line)}
.nav.js-nav nav.open {
display:flex;
flex-direction:column;
align-items:stretch;
gap:20px}
.hero {
padding-top:50px;
grid-template-columns:1fr 1fr;
gap:24px}
.hero h1 {
font-size:3.5rem}
.hero-intro {
font-size:1rem}
.hero-showcase {
padding:20px 15px 0}
.hero-caption {
font-size:1rem}
.hero-games {
height:180px;
padding:0;
gap:10px}
.actions {
gap:16px;
flex-wrap:wrap}
.hero-note {
font-size:.7rem}
.section {
padding-top:75px;
padding-bottom:75px}
.section-heading {
gap:30px}
.section-heading>p {
max-width:220px;
font-size:.9rem}
.accounting-card {
padding:25px}
.project-heading h3 {
font-size:2rem}
.game-links {
grid-template-columns:repeat(2,1fr)}
.services-grid {
grid-template-columns:repeat(2,1fr)}
.about-grid {
grid-template-columns:1fr;
gap:15px}
.footer-top {
grid-template-columns:1.3fr 1fr 1.3fr;
gap:20px}
}

@media(max-width:620px) {
.shell {
padding-left:20px;
padding-right:20px}
.brand img {
width:148px}
.hero {
grid-template-columns:1fr;
padding-top:40px;
padding-bottom:40px;
gap:40px}
.hero h1 {
font-size:clamp(3.5rem,13vw,5rem)}
.hero-intro {
max-width:100%}
.hero-games {
height:205px}
.hero-showcase {
max-width:450px;
width:100%;
margin:auto}
.hero-caption {
font-size:1.3rem}
.hero-note {
font-size:.75rem}
.discipline-strip .shell {
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
font-size:.75rem}
.section {
padding-top:60px;
padding-bottom:60px}
.section-heading {
display:block}
.section-heading>p {
max-width:100%;
margin-top:22px}
.section-heading h2 {
font-size:2.15rem}
.accounting-card {
padding:22px 15px}
.project-heading {
display:block}
.project-heading>p {
max-width:100%;
font-size:.95rem}
.project-heading h3 {
margin-bottom:18px}
.project-foot {
flex-direction:column;
gap:12px}
.accounting-image {
border-width:3px;
border-radius:5px}
.game-pair {
grid-template-columns:1fr;
gap:20px}
.game-feature {
grid-template-columns:1fr .85fr;
padding:25px 20px;
gap:15px}
.game-feature h3 {
font-size:1.9rem}
.game-feature p {
font-size:.85rem}
.game-feature .text-link {
font-size:.8rem}
.phone-image {
border-width:3px;
border-radius:10px}
.collection {
padding:20px 14px}
.collection-heading {
display:block}
.collection-heading h3 {
font-size:1.8rem}
.collection-heading .button {
margin-top:18px}
.game-links {
gap:0 14px}
.game-links a {
font-size:.8rem}
.services-grid {
grid-template-columns:1fr}
.services-grid article {
margin-top:8px;
padding:24px 0}
.service-number {
margin-bottom:18px}
.startup {
grid-template-columns:1fr;
gap:45px}
.startup-intro h2 {
font-size:2.4rem}
.about-grid>div>p {
font-size:1rem}
.about-values {
flex-wrap:wrap;
gap:12px 20px}
.contact-bottom {
display:block}
.contact-bottom>a {
display:inline-block;
margin-top:25px;
font-size:1.35rem}
.footer-top {
grid-template-columns:1fr 1fr}
.footer-top>div:first-child {
grid-column:1/-1}
.footer-top>div:last-child {
overflow-wrap:anywhere}
.footer-bottom {
display:block;
line-height:2}
.footer-bottom a {
margin:0 18px 0 0}
.legal h1 {
font-size:2.5rem}
.nav:not(.js-nav) {
height:auto;
padding-top:15px;
padding-bottom:15px;
flex-wrap:wrap}
.nav:not(.js-nav) nav {
font-size:.75rem;
gap:12px}
.eyebrow {
font-size:.7rem}
}
@media(prefers-reduced-motion:reduce) {
html {
scroll-behavior:auto}
*,*::before,*::after {
transition:none!important;
animation:none!important}
}


.back-top { display:block; text-align:center; padding:0 20px 35px; color:var(--blue); font-size:.875rem; }