:root {
  color-scheme: light;
  --paper: #fbf8f2;
  --ink: #1b1a2b;
  --muted: #747487;
  --green: #c5f36b;
  --violet: #6558e9;
  --line: rgba(27, 26, 43, .14);
  --display: "Manrope", sans-serif;
  --body: "DM Sans", sans-serif;
  --mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.site-intro { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; overflow: hidden; background: var(--paper); animation: intro-dismiss .32s ease-in 1.32s forwards; }
.intro-frame { position: absolute; inset: 15px; border: 1px solid rgba(27, 26, 43, .12); }
.intro-trace { position: absolute; inset: 15px; width: calc(100% - 30px); height: calc(100% - 30px); overflow: visible; }
.intro-trace rect { fill: none; stroke: var(--violet); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 22 78; animation: intro-travel 1.15s linear infinite; vector-effect: non-scaling-stroke; }
.intro-center { display: flex; flex-direction: column; align-items: center; gap: 13px; }
.intro-wordmark { display: inline-flex; align-items: center; gap: 10px; font: 800 32px var(--display); letter-spacing: -2px; }
.intro-wordmark .brand-mark { transform: scale(1.15) skew(-17deg); }
.intro-caption { color: var(--muted); font: 9px var(--mono); letter-spacing: .12em; }
@keyframes intro-travel { to { stroke-dashoffset: -100; } }
@keyframes intro-dismiss { to { opacity: 0; visibility: hidden; } }
.section-wrap { width: min(1240px, calc(100% - 96px)); margin-inline: auto; }
.site-header { height: 88px; width: min(1360px, calc(100% - 96px)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); position: relative; z-index: 5; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 25px; font-weight: 800; letter-spacing: -1.8px; }
.wordmark-dot { color: var(--violet); }
.brand-mark { display: flex; align-items: flex-end; gap: 2px; width: 21px; height: 23px; transform: skew(-17deg); }
.brand-mark span { display: block; width: 5px; border-radius: 5px; background: var(--ink); }
.brand-mark span:nth-child(1) { height: 12px; }
.brand-mark span:nth-child(2) { height: 19px; }
.brand-mark span:nth-child(3) { height: 23px; }
.site-nav { display: flex; align-items: center; gap: 42px; font-size: 13px; font-weight: 600; }
.site-nav a { transition: opacity .2s ease; }
.site-nav a:hover { opacity: .6; }
.nav-contact { padding: 12px 17px; border: 1px solid var(--ink); border-radius: 28px; transition: color .2s ease, background .2s ease; }
.nav-contact:hover { color: var(--paper); background: var(--ink); opacity: 1 !important; }
.nav-contact span { padding-left: 10px; color: var(--violet); }
.menu-toggle { display: none; }

.hero { padding-top: 76px; display: grid; grid-template-columns: 1.06fr .94fr; grid-template-rows: auto auto; column-gap: 36px; }
.hero-copy { padding: 0 0 34px; }
.eyebrow { margin: 0; font: 11px var(--mono); letter-spacing: .035em; text-transform: uppercase; }
.status-dot { display: inline-block; width: 8px; height: 8px; margin: 0 7px 0 0; border-radius: 50%; background: #8cce43; box-shadow: 0 0 0 4px rgba(140, 206, 67, .18); }
h1, h2, h3, p { margin-top: 0; }
.hero h1 { margin: 33px 0 38px; font-family: var(--display); font-weight: 600; font-size: clamp(60px, 7.15vw, 102px); letter-spacing: -.092em; line-height: .99; }
.headline-accent { white-space: nowrap; }
.asterisk { display: inline-block; color: var(--violet); font-size: .39em; vertical-align: top; margin: .08em 0 0 .08em; animation: rotate 24s linear infinite; }
.hero-bottom { display: flex; align-items: flex-end; gap: 34px; }
.hero-description { max-width: 260px; margin: 0; color: #696879; font-size: 15px; line-height: 1.65; }
.text-link, .light-link { display: inline-flex; gap: 23px; align-items: center; padding-bottom: 8px; border-bottom: 1px solid currentColor; font-size: 12px; font-weight: 600; white-space: nowrap; }
.text-link span { color: var(--violet); font-size: 17px; }
.hero-art { min-height: 428px; position: relative; overflow: hidden; background: #7164f0; border-radius: 5px 5px 70px 5px; box-shadow: 0 18px 46px rgba(72, 56, 173, .17); }
.hero-art::before { content: ""; position: absolute; inset: 0; opacity: .15; background-image: radial-gradient(#fff 0.55px, transparent .55px); background-size: 8px 8px; }
.hero-orbit { position: absolute; width: 400px; height: 200px; left: 50%; top: 49%; border: 1px solid rgba(255, 255, 255, .56); border-radius: 50%; transform: translate(-50%, -50%) rotate(-37deg); }
.orbit-two { width: 455px; height: 236px; transform: translate(-50%, -50%) rotate(43deg); }
.hero-sun { position: absolute; width: 228px; height: 228px; left: 50%; top: 49%; transform: translate(-50%, -50%); border-radius: 50%; background: #ff9676; box-shadow: 0 22px 55px rgba(37, 28, 105, .24); }
.hero-sun::before, .hero-sun::after { content: ""; position: absolute; background: #ff9676; border-radius: 50%; }
.hero-sun::before { width: 74px; height: 74px; right: -16px; top: 9px; background: var(--paper); }
.hero-sun::after { width: 31px; height: 31px; left: 17px; bottom: 18px; background: var(--green); }
.hero-sticker { position: absolute; right: 12%; top: 12%; width: 96px; height: 96px; border-radius: 50%; background: var(--paper); display: flex; flex-direction: column; align-items: center; justify-content: center; font: 9px/1.4 var(--mono); text-align: center; transform: rotate(12deg); box-shadow: 0 8px 20px #28205c22; }
.sticker-star { margin-top: 3px; color: var(--violet); font-size: 21px; line-height: 1; }
.hero-note { position: absolute; left: 8%; bottom: 10%; padding: 12px 15px 12px 18px; border: 1px solid rgba(27, 26, 43, .08); border-radius: 9px; background: linear-gradient(145deg, #fffefa, #f1eee7); color: var(--ink); font: 10px/1.55 var(--mono); box-shadow: 0 2px 4px rgba(27, 26, 43, .08), 0 10px 22px rgba(27, 26, 43, .18); }
.hero-note::before { content: ""; position: absolute; top: 10px; bottom: 10px; left: 8px; width: 3px; border-radius: 3px; background: var(--violet); }
.hero-index { position: absolute; right: 7%; bottom: 7%; font: 10px var(--mono); }
.hero-caption { grid-column: 1 / -1; display: flex; justify-content: space-between; padding: 14px 0 22px; color: #797888; font: 10px var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.hero-caption span:last-child span { color: var(--violet); font-size: 15px; }

.ticker { margin: 7px 0 0; padding: 17px 0; overflow: hidden; background: var(--violet); color: #fff; }
.ticker-track { width: max-content; display: flex; gap: 27px; align-items: center; animation: ticker 32s linear infinite; font: 11px var(--mono); letter-spacing: .12em; }
.ticker-track b { color: var(--green); font: 15px var(--body); }
@keyframes ticker { to { transform: translateX(-50%); } }
@keyframes rotate { to { transform: rotate(360deg); } }

.work-section { padding-top: 133px; padding-bottom: 145px; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 48px; }
.heading-star { color: var(--violet); font-size: 17px; margin-left: 7px; }
.section-heading h2, .services-heading h2 { margin: 24px 0 0; font: 600 clamp(44px, 5.1vw, 67px)/1.05 var(--display); letter-spacing: -.075em; }
.section-heading h2 span { color: var(--violet); }
.section-intro { width: 270px; margin: 0 0 4px; color: #707083; font-size: 14px; line-height: 1.7; }
.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px 25px; }
.project-card { position: relative; min-width: 0; }
.project-art { height: clamp(250px, 31vw, 390px); position: relative; overflow: hidden; isolation: isolate; border-radius: 13px; box-shadow: 0 8px 24px rgba(36, 31, 54, .08); transition: transform .28s ease, box-shadow .28s ease; }
.project-art::after { content: ""; position: absolute; inset: 0; opacity: .1; z-index: -1; background-image: radial-gradient(#17251f .6px, transparent .6px); background-size: 6px 6px; }
.art-label { position: absolute; left: 20px; bottom: 18px; font: 9px var(--mono); letter-spacing: .07em; }
.project-meta { display: flex; justify-content: space-between; margin: 18px 0 9px; color: #7c7b8c; font: 9px var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.project-card h3 { margin: 0 0 7px; font: 700 24px var(--display); letter-spacing: -.055em; }
.project-card > p { max-width: 390px; margin: 0; color: #6f7080; font-size: 13px; line-height: 1.6; }
.project-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--violet); font-size: 12px; font-weight: 700; }
.project-link span { transition: transform .2s ease; }
.project-link:hover span { transform: translate(2px, -2px); }
.card-arrow { position: absolute; bottom: 2px; right: 0; font-size: 18px; transition: transform .2s ease; }
.project-card:hover .card-arrow { transform: translate(3px, -3px); }
.project-card:hover .project-art { filter: saturate(1.08); transform: translateY(-4px); box-shadow: 0 16px 34px rgba(36, 31, 54, .13); }

.other-projects { padding-bottom: 78px; }
.other-projects-heading { margin-bottom: 27px; }
.other-projects-heading h2 { margin: 15px 0 0; font: 600 clamp(34px, 4vw, 48px)/1.05 var(--display); letter-spacing: -.07em; }
.fold-feature { min-height: 285px; position: relative; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border-radius: 16px; background: #eeeaff; box-shadow: 0 12px 32px rgba(36, 31, 54, .09); }
.fold-art { min-height: 285px; position: relative; overflow: hidden; background: linear-gradient(140deg, #7568f2, #5749d5); }
.fold-art::before { content: ""; position: absolute; inset: 0; opacity: .16; background-image: radial-gradient(#fff 0.6px, transparent .6px); background-size: 8px 8px; }
.fold-sheet { position: absolute; top: 50%; left: 50%; width: 126px; height: 174px; border-radius: 4px; box-shadow: 0 18px 32px rgba(32, 24, 94, .24); }
.fold-sheet-back { background: #c9f178; transform: translate(-34%, -54%) rotate(12deg); }
.fold-sheet-front { display: flex; flex-direction: column; justify-content: center; gap: 13px; padding: 18px; background: #fbf8f2; color: #24213b; transform: translate(-68%, -47%) rotate(-9deg); }
.fold-sheet-front span { font: 800 28px var(--display); letter-spacing: -.08em; }
.fold-sheet-front i { display: block; width: 74%; height: 3px; border-radius: 4px; background: #d9d5e7; }
.fold-sheet-front i:last-of-type { width: 48%; }
.fold-sheet-front b { margin-top: 3px; color: var(--violet); font: 9px var(--mono); }
.fold-art-star { position: absolute; top: 18%; right: 23%; color: #d4fb83; font-size: 29px; }
.fold-copy { align-self: center; max-width: 430px; padding: 35px 54px; }
.fold-kicker { margin-bottom: 8px; color: #746bba; font: 10px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.fold-copy h3 { margin: 0 0 10px; font: 700 clamp(35px, 4vw, 48px)/1 var(--display); letter-spacing: -.08em; }
.fold-copy > p:not(.fold-kicker) { max-width: 390px; margin: 0 0 20px; color: #646176; font-size: 13px; line-height: 1.7; }
.fold-link { display: inline-flex; align-items: center; gap: 26px; padding: 12px 16px; border-radius: 30px; background: var(--violet); color: #fff; font-size: 12px; font-weight: 700; transition: background .2s ease, transform .2s ease; }
.fold-link:hover { transform: translateY(-2px); background: #5144d2; }

.games-feature-section { padding-bottom: 132px; }
.games-feature { min-height: 340px; display: grid; grid-template-columns: .92fr 1.08fr; overflow: hidden; border-radius: 18px; background: #1b1928; color: #fbf8f2; box-shadow: 0 18px 42px rgba(36, 31, 54, .16); }
.games-feature-art { min-height: 340px; position: relative; overflow: hidden; background: linear-gradient(145deg, #7265ef, #4539b9); }
.games-feature-art::after { position: absolute; inset: 0; content: ""; opacity: .14; background-image: radial-gradient(#fff .6px, transparent .6px); background-size: 8px 8px; }
.games-feature-orbit { position: absolute; left: 48%; top: 48%; width: 280px; height: 150px; border: 1px solid #ffffff70; border-radius: 50%; transform: translate(-50%, -50%) rotate(-32deg); }
.games-feature-orbit.orbit-two { width: 300px; height: 172px; transform: translate(-50%, -50%) rotate(53deg); }
.games-feature-die { position: absolute; z-index: 2; left: 48%; top: 48%; width: 90px; height: 90px; display: grid; place-items: center; border-radius: 20px; transform: translate(-50%, -50%) rotate(-8deg); background: #fbf8f2; color: #e97879; font-size: 45px; box-shadow: 0 17px 34px #17122c55; }
.games-feature-token { position: absolute; z-index: 1; width: 25px; height: 25px; border: 4px solid #fff; border-radius: 50%; box-shadow: 0 5px 12px #15132955; }
.token-coral { left: 21%; top: 24%; background: #ee777d; }.token-lime { right: 19%; top: 28%; background: #c5f36b; }.token-violet { left: 20%; bottom: 23%; background: #8b80ff; }.token-gold { right: 21%; bottom: 20%; background: #f2c354; }
.games-feature-sticker { position: absolute; right: 9%; top: 8%; z-index: 3; width: 74px; height: 74px; display: grid; place-content: center; border-radius: 50%; transform: rotate(9deg); background: #c5f36b; color: #24213b; text-align: center; font: 8px/1.45 var(--mono); box-shadow: 0 7px 18px #17122c44; }
.games-feature-copy { align-self: center; padding: 40px clamp(32px, 5vw, 65px); }
.games-feature-kicker { margin: 0 0 20px; color: #c5f36b; font: 9px var(--mono); letter-spacing: .11em; }.games-feature-kicker span { padding-left: 7px; font-size: 14px; }
.games-feature-copy h2 { margin: 0 0 16px; font: 700 clamp(35px, 4.1vw, 52px)/1.02 var(--display); letter-spacing: -.075em; }
.games-feature-copy h2 span { color: #c5f36b; }
.games-feature-copy > p:not(.games-feature-kicker) { max-width: 450px; margin: 0 0 14px; color: #c3c0ce; font-size: 12px; line-height: 1.7; }
.games-feature-copy .games-feature-note { color: #a9a5b7; font-size: 10px; }
.games-feature-link { display: inline-flex; align-items: center; gap: 24px; margin-top: 12px; padding: 13px 17px; border-radius: 28px; background: #c5f36b; color: #24213b; font-size: 11px; font-weight: 700; transition: transform .2s ease, background .2s ease; }
.games-feature-link:hover { transform: translateY(-2px); background: #d6ff8d; }
.fold-link span { font-size: 15px; }
.fold-index { position: absolute; right: 21px; bottom: 16px; color: #8f8aa8; font: 9px var(--mono); }

.art-pramaan { background: linear-gradient(145deg, #ffb9a2, #f68783); }
.review-window { position: absolute; width: min(70%, 345px); min-height: 218px; left: 50%; top: 50%; padding: 0 23px 19px; transform: translate(-50%, -49%) rotate(-4deg); border-radius: 9px; background: #fcfaf4; box-shadow: 0 22px 50px #733e3540; }
.window-top { height: 39px; display: flex; align-items: center; gap: 4px; border-bottom: 1px solid #ece7dc; color: #aaa99e; font: 8px var(--mono); }
.window-top i { width: 5px; height: 5px; border-radius: 50%; background: #ee9f8c; }.window-top i:nth-child(2) { background: #f1ca76; }.window-top i:nth-child(3) { background: #9fcc80; }
.window-top span { margin-left: auto; }
.review-stars { margin: 20px 0 8px; color: #86bd43; font-size: 17px; letter-spacing: 3px; }
.review-line { width: 57%; height: 5px; margin-top: 7px; border-radius: 4px; background: #e9e6dc; }.line-long { width: 88%; }
.review-user { display: flex; align-items: center; gap: 9px; margin-top: 20px; font-size: 9px; }
.review-user b, .review-user small { display: block; }.review-user small { margin-top: 3px; color: #a2a297; font-size: 8px; }
.avatar { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; font-weight: 700; }.avatar-coral { background: #f4c5ad; color: #885348; }
.verified { display: grid; width: 15px; height: 15px; margin-left: auto; place-items: center; border-radius: 50%; background: #8cc44c; color: white; font-size: 9px; }
.art-creator { background: linear-gradient(145deg, #ffda78, #ffc25f); }
.creator-phone { position: absolute; left: 50%; top: 51%; width: 190px; height: 304px; transform: translate(-50%, -50%) rotate(7deg); padding: 8px; border: 3px solid #28342c; border-radius: 27px; background: #f7f7f2; box-shadow: 15px 17px 0 #28342c20; }
.phone-camera { position: absolute; z-index: 2; width: 37px; height: 8px; top: 13px; left: 50%; transform: translateX(-50%); border-radius: 8px; background: #28342c; }
.creator-sky { position: absolute; inset: 8px; overflow: hidden; border-radius: 17px; background: linear-gradient(160deg, #f69f83 0 45%, #fae4ad 45% 66%, #a3c66a 66%); }
.creator-sky span { position: absolute; left: 14px; top: 45px; color: #19362e; font: 800 29px/.93 var(--display); letter-spacing: -.08em; }.creator-sky i { position: absolute; right: 12px; top: 43px; color: #f8f5e7; font: normal 38px var(--body); }
.creator-controls { position: absolute; z-index: 3; bottom: 17px; left: 18px; right: 18px; display: flex; align-items: center; gap: 7px; color: #f8f5e7; font: 8px var(--mono); }
.control-play { font-size: 8px; }.control-bar { height: 2px; flex: 1; background: #f8f5e7ad; }.control-time { font-size: 7px; }
.floating-heart, .floating-play { position: absolute; z-index: 3; display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: #fbf8ef; box-shadow: 0 5px 15px #724b1b20; }
.floating-heart { top: 20%; right: 18%; color: #ed8c83; font-size: 20px; }.floating-play { bottom: 17%; left: 18%; color: #60773f; font-size: 12px; }
.art-hotspot { background: linear-gradient(145deg, #b9c5ff, #939ff0); }
.map-grid { position: absolute; inset: -15%; opacity: .39; transform: rotate(-15deg); background: repeating-linear-gradient(0deg, transparent 0 35px, #6279c53d 36px 37px), repeating-linear-gradient(90deg, transparent 0 47px, #6279c53d 48px 49px); }
.map-grid::after { content: ""; position: absolute; inset: 20% 0 0; background: linear-gradient(55deg, transparent 45%, #f3f2df 45.5% 48%, transparent 48.5%), linear-gradient(-25deg, transparent 39%, #f3f2df 39.5% 42%, transparent 42.5%); }
.map-pin { position: absolute; z-index: 1; display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid #354664; border-radius: 50% 50% 50% 0; background: #f8f7ef; color: #50659a; transform: rotate(-45deg); box-shadow: 0 5px 10px #293e7133; }
.map-pin span { transform: rotate(45deg); font-size: 14px; }.pin-one { top: 24%; left: 35%; background: #c6fa67; }.pin-two { top: 31%; left: 64%; }.pin-three { top: 55%; left: 25%; }
.hotspot-card { position: absolute; left: 50%; bottom: 18%; z-index: 2; display: flex; align-items: center; gap: 11px; width: 70%; padding: 14px; transform: translateX(-50%); border-radius: 8px; background: #fffdf5; box-shadow: 0 10px 30px #40527c2e; }
.wifi-symbol { color: #798bd0; font-size: 25px; }.hotspot-card b, .hotspot-card small { display: block; }.hotspot-card b { font-size: 10px; }.hotspot-card small { margin-top: 4px; color: #888c93; font-size: 8px; }.hotspot-plus { margin-left: auto; font-size: 19px; }
.art-java { background: linear-gradient(145deg, #ffc59d, #f7a87f); }
.java-sun { position: absolute; width: 205px; height: 205px; left: 50%; top: 51%; transform: translate(-50%, -50%); border: 1px solid #da845f80; border-radius: 50%; background: #f1a07b; }
.java-book { position: absolute; left: 50%; top: 51%; width: 168px; height: 224px; display: flex; flex-direction: column; justify-content: space-between; padding: 17px; transform: translate(-50%, -50%) rotate(-7deg); background: #354a3c; color: #f5f0db; box-shadow: 12px 16px 0 #ca765d62; }
.java-book > span:first-child { font-size: 26px; }.java-book > span:nth-child(2) { font: 700 23px/.96 var(--display); letter-spacing: -.07em; }.java-book i { position: absolute; right: 17px; top: 17px; color: #c6fa67; font: normal 20px var(--body); }
.java-orbit { position: absolute; width: 84%; height: 25%; left: 8%; top: 37%; border: 1px solid #354a3c80; border-radius: 50%; transform: rotate(30deg); }.orbit-b { transform: rotate(-30deg); }
.art-marketing { background: linear-gradient(145deg, #bce9c5, #8ed8c9); }
.social-post { position: absolute; top: 50%; left: 50%; display: flex; flex-direction: column; justify-content: space-between; width: 158px; height: 213px; padding: 15px; box-shadow: 0 15px 30px #314e322c; }
.post-back { transform: translate(-14%, -58%) rotate(9deg); background: #d9f287; color: #283b2b; font: 800 28px/.95 var(--display); letter-spacing: -.08em; }.post-back b { align-self: flex-end; font-size: 17px; }
.post-front { transform: translate(-75%, -38%) rotate(-7deg); background: #fffdf5; }
.social-avatar { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: #ef9f82; color: #fff; font: 700 11px var(--display); }
.social-lines { position: absolute; top: 18px; left: 42px; }.social-lines i { display: block; width: 45px; height: 3px; margin: 3px 0; border-radius: 5px; background: #d7d9ce; }
.social-image { display: flex; flex: 1; align-items: center; margin: 8px 0; padding-left: 11px; background: linear-gradient(135deg, #f2a088 0 35%, #d7ed98 35% 69%, #edcf87 69%); color: #27382d; font: 800 19px/.95 var(--display); letter-spacing: -.06em; }
.social-actions { font-size: 11px; }
.art-ai { background: linear-gradient(145deg, #c7b4ff, #9f8ae8); }
.ai-glow { position: absolute; width: 250px; height: 250px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: #ddd2ff; filter: blur(1px); }
.ai-orb { position: absolute; top: 38%; left: 50%; display: grid; width: 94px; height: 94px; place-items: center; transform: translate(-50%, -50%); border: 1px solid #796ba6; border-radius: 50%; background: radial-gradient(circle at 37% 29%, #faf7ff, #b8a2f0 67%, #8c73c9); box-shadow: inset -8px -9px 20px #7862ac55, 0 13px 30px #70619145; color: #4c3d77; font: 700 40px var(--display); }
.ai-orb i { position: absolute; right: -9px; top: -5px; color: #e5ffb2; font: normal 23px var(--body); }
.chat-bubble { position: absolute; z-index: 1; max-width: 55%; padding: 11px 13px; border-radius: 10px; background: #faf8f4; box-shadow: 0 6px 15px #51447719; font-size: 9px; line-height: 1.4; }
.bubble-user { top: 55%; right: 11%; border-bottom-right-radius: 2px; }.bubble-bot { left: 10%; bottom: 18%; border-bottom-left-radius: 2px; }
.bot-spark { margin-right: 3px; color: #967dd0; }
.art-print { background: linear-gradient(145deg, #ffd08d, #ffad70); }
.print-sheet { position: absolute; width: 167px; height: 220px; padding: 19px; box-shadow: 7px 10px 25px #80512630; }
.sheet-back { top: 18%; left: 27%; display: flex; align-items: center; background: #f3e8d0; color: #d46d4f; font: 800 30px/.91 var(--display); letter-spacing: -.09em; transform: rotate(10deg); }
.sheet-front { top: 23%; left: 42%; display: flex; flex-direction: column; justify-content: space-between; background: #d3ef93; color: #26392d; transform: rotate(-8deg); }
.sheet-symbol { font-size: 20px; }.sheet-front > span:nth-child(2) { font: 800 23px/.96 var(--display); letter-spacing: -.08em; }.sheet-front small { font: 7px var(--mono); }
.art-product { background: linear-gradient(145deg, #9bdbce, #68bfb5); }
.product-cube { position: absolute; left: 50%; top: 50%; width: 170px; height: 170px; transform: translate(-50%, -50%) rotate(45deg) skew(-8deg, -8deg); }
.cube-back { left: 58%; top: 44%; background: #e49c7d; }.cube-front { display: grid; place-items: center; background: #314a40; box-shadow: 12px 15px 0 #223b3440; color: #e6f3cd; }
.cube-front span { transform: rotate(-45deg) skew(8deg, 8deg); font: 800 23px/.98 var(--display); letter-spacing: -.08em; }
.product-spark { position: absolute; color: #f6f0dc; }.spark-a { top: 21%; left: 24%; font-size: 29px; }.spark-b { right: 21%; bottom: 24%; font-size: 20px; }

.services-section { overflow: hidden; background: #211d3d; color: var(--paper); }
.services-inner { min-height: 580px; position: relative; display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 8%; padding-top: 100px; padding-bottom: 104px; }
.services-heading { position: relative; z-index: 1; }
.eyebrow-mark { margin-right: 6px; color: var(--green); font-size: 15px; }
.services-heading h2 { margin-top: 25px; font-size: clamp(47px, 5.4vw, 70px); }.services-heading h2 span { color: var(--green); }
.services-heading > p:not(.eyebrow) { max-width: 355px; margin: 24px 0 29px; color: #c4c0d2; font-size: 13px; line-height: 1.8; }
.light-link { font-size: 11px; }.light-link span { color: var(--green); }
.services-list { position: relative; z-index: 1; border-top: 1px solid #ffffff32; }
.services-list > div { min-height: 80px; display: grid; grid-template-columns: 43px 1fr 24px; align-items: center; border-bottom: 1px solid #ffffff32; }
.services-list > div > span:first-child { color: #9ba49c; font: 10px var(--mono); }
.services-list h3 { margin: 0; font: 500 17px var(--display); letter-spacing: -.03em; }
.service-symbol { color: var(--green); font-size: 17px; }
.services-decoration { position: absolute; right: -77px; bottom: -187px; color: #2a254b; font: 700 450px/.8 var(--display); letter-spacing: -.12em; }
.services-decoration span { position: absolute; top: 60px; right: -60px; color: #37305f; font-size: 105px; }

.contact-section { position: relative; overflow: hidden; padding-top: 104px; padding-bottom: 104px; }
.contact-topline { display: flex; justify-content: space-between; color: #83887e; font: 9px var(--mono); letter-spacing: .07em; }
.contact-topline > span:last-child span { color: #88be4d; }
.contact-section h2 { position: relative; z-index: 1; margin: 45px 0 36px; font: 600 clamp(59px, 9.1vw, 119px)/.96 var(--display); letter-spacing: -.095em; }
.contact-section h2 span { color: var(--violet); }
.contact-bottom { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.contact-bottom p { max-width: 340px; margin: 0; color: #6f7080; font-size: 13px; line-height: 1.7; }
.contact-button { display: inline-flex; align-items: center; gap: 50px; padding: 18px 20px; border-radius: 40px; background: var(--violet); color: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 8px 20px rgba(101, 88, 233, .2); transition: transform .2s ease, background .2s ease; }
.contact-button:hover { transform: translateY(-3px); background: #5144d2; }
.contact-button span { font-size: 17px; }
.contact-scribble { position: absolute; right: 17%; top: 39%; color: var(--violet); font: italic 12px var(--mono); transform: rotate(-13deg); }
.site-footer { min-height: 89px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); }
.footer-wordmark { font-size: 21px; }.footer-wordmark .brand-mark { transform: scale(.85) skew(-17deg); transform-origin: left center; }
.site-footer > p { margin: 0; color: #848394; font-size: 11px; }
.copyright, .back-to-top { color: #858394; font: 9px var(--mono); }
.back-to-top span { margin-left: 6px; color: var(--violet); font-size: 14px; }

@media (min-width: 1440px) { .hero h1 { font-size: 102px; } }
@media (min-width: 621px) and (max-width: 760px) {
  .site-header { width: calc(100% - 40px); }
  .site-nav { gap: 12px; font-size: 11px; }
  .nav-contact { padding: 9px 11px; white-space: nowrap; }
}
@media (max-width: 900px) {
  .section-wrap, .site-header { width: calc(100% - 56px); }
  .site-nav { gap: clamp(12px, 2.5vw, 22px); font-size: 12px; }
  .nav-contact { padding: 10px 12px; white-space: nowrap; }
  .hero { padding-top: 58px; column-gap: 22px; }
  .hero h1 { font-size: clamp(57px, 8vw, 76px); }
  .hero-art { min-height: 370px; }
  .hero-bottom { display: block; }.hero-description { margin-bottom: 20px; }
  .project-grid { gap: 48px 19px; }.project-art { height: 31vw; min-height: 235px; }
  .fold-copy { padding: 30px; }
  .games-feature { grid-template-columns: .8fr 1.2fr; }.games-feature-art { min-height: 320px; }
  .games-feature-copy { padding: 32px 27px; }.games-feature-copy h2 { font-size: 40px; }
  .services-inner { gap: 5%; }.services-list h3 { font-size: 15px; }
  .site-footer { gap: 14px; }.site-footer > p { display: none; }
}
@media (max-width: 620px) {
  .section-wrap, .site-header { width: calc(100% - 40px); }
  .site-header { height: 72px; }
  .menu-toggle { display: inline-flex; align-items: center; gap: 11px; padding: 10px 0 10px 10px; border: 0; background: transparent; color: var(--ink); font-size: 12px; font-weight: 600; }
  .menu-icon { display: grid; gap: 5px; }.menu-icon i { display: block; width: 18px; height: 1px; background: var(--ink); transition: transform .2s ease; }
  .menu-toggle[aria-expanded="true"] .menu-icon i:first-child { transform: translateY(3px) rotate(45deg); }.menu-toggle[aria-expanded="true"] .menu-icon i:last-child { transform: translateY(-3px) rotate(-45deg); }
  .site-nav { position: absolute; top: 71px; left: -20px; right: -20px; display: none; padding: 18px 20px 23px; flex-direction: column; align-items: stretch; gap: 0; border-bottom: 1px solid var(--line); background: var(--paper); }
  .site-nav.is-open { display: flex; }.site-nav > a { padding: 14px 0; border-bottom: 1px solid var(--line); }.site-nav .nav-contact { display: inline-flex; justify-content: space-between; margin-top: 12px; padding: 13px 15px; border: 1px solid var(--line); }
  .hero { display: flex; flex-direction: column; padding-top: 47px; }
  .hero-copy { padding-bottom: 25px; }.hero h1 { margin: 28px 0 25px; font-size: clamp(57px, 13.4vw, 83px); }
  .hero-bottom { display: flex; align-items: flex-start; flex-direction: column; gap: 19px; }.hero-description { max-width: 310px; margin: 0; font-size: 14px; }
  .hero-art { min-height: 320px; margin-top: 10px; border-bottom-right-radius: 50px; }
  .hero-sun { width: 185px; height: 185px; }.hero-orbit { width: 320px; height: 165px; }.orbit-two { width: 345px; height: 190px; }
  .hero-caption { padding-top: 13px; font-size: 8px; }
  .ticker { margin-top: 0; padding: 13px 0; }.ticker-track { font-size: 9px; gap: 20px; }
  .work-section { padding-top: 92px; padding-bottom: 94px; }.section-heading { display: block; margin-bottom: 34px; }
  .section-heading h2, .services-heading h2 { margin-top: 19px; font-size: 49px; }.section-intro { width: auto; max-width: 310px; margin: 19px 0 0; font-size: 13px; }
  .project-grid { grid-template-columns: 1fr; gap: 42px; }.project-art { height: min(87vw, 375px); min-height: 270px; }
  .project-card h3 { font-size: 23px; }.project-card > p { max-width: 83%; font-size: 12px; }
  .other-projects { padding-bottom: 88px; }.other-projects-heading { margin-bottom: 20px; }.other-projects-heading h2 { font-size: 38px; }
  .fold-feature { grid-template-columns: 1fr; }
  .fold-art { min-height: 220px; }
  .fold-sheet { width: 103px; height: 142px; }
  .fold-sheet-front { gap: 10px; padding: 15px; }.fold-sheet-front span { font-size: 23px; }
  .fold-copy { padding: 27px 24px 32px; }.fold-copy h3 { font-size: 39px; }.fold-copy > p:not(.fold-kicker) { font-size: 12px; }
  .fold-index { top: 16px; right: 16px; bottom: auto; color: rgba(255, 255, 255, .8); }
  .games-feature-section { padding-bottom: 88px; }.games-feature { grid-template-columns: 1fr; }
  .games-feature-art { min-height: 230px; }.games-feature-die { width: 76px; height: 76px; }
  .games-feature-copy { padding: 28px 24px 33px; }.games-feature-copy h2 { font-size: 41px; }
  .services-inner { display: block; padding-top: 80px; padding-bottom: 84px; }
  .services-heading > p:not(.eyebrow) { max-width: 340px; margin: 20px 0 24px; }
  .services-list { margin-top: 48px; }.services-list > div { min-height: 69px; grid-template-columns: 35px 1fr 20px; }.services-list h3 { font-size: 14px; }
  .services-decoration { right: -64px; bottom: -122px; font-size: 290px; }.services-decoration span { top: 30px; right: -43px; font-size: 72px; }
  .contact-section { padding-top: 72px; padding-bottom: 78px; }.contact-topline { font-size: 7px; }.contact-topline > span:last-child { text-align: right; }
  .contact-section h2 { margin: 38px 0 25px; font-size: clamp(56px, 12.6vw, 77px); }.contact-bottom { align-items: flex-start; flex-direction: column; gap: 24px; }.contact-bottom p { max-width: 310px; font-size: 12px; }
  .contact-button { gap: 37px; padding: 16px 18px; font-size: 12px; }.contact-scribble { top: 34%; right: 8%; font-size: 9px; }
  .site-footer { min-height: 80px; flex-wrap: wrap; gap: 7px 16px; padding-top: 17px; padding-bottom: 17px; }
  .footer-wordmark { font-size: 18px; }.footer-wordmark .brand-mark { transform: scale(.72) skew(-17deg); width: 17px; }
  .copyright { order: 3; width: 100%; font-size: 8px; }.back-to-top { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .site-intro { animation-delay: 0s; }
}