:root {
  --ink: #11120f;
  --paper: #f1f0e9;
  --muted: #92938a;
  --line: rgba(17, 18, 15, .16);
  --acid: #d8f55d;
  --coral: #ff6e58;
  --blue: #5b8cff;
  --white: #fbfbf7;
  --mono: "DM Mono", monospace;
  --sans: "Space Grotesk", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.45; }
body:has(dialog[open]) { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
.grain { position: fixed; inset: 0; pointer-events: none; opacity: .055; z-index: 10; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.52'/%3E%3C/svg%3E"); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.section-wrap { width: min(1180px, calc(100% - 80px)); margin: 0 auto; }
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 26px 40px; color: var(--white); }
.wordmark { display: inline-flex; align-items: center; gap: 9px; font-size: 20px; font-weight: 600; letter-spacing: -.06em; }
.wordmark-mark { display: grid; place-items: center; width: 29px; height: 29px; background: var(--acid); color: var(--ink); font-family: var(--mono); font-size: 15px; font-weight: 500; letter-spacing: 0; }
.wordmark-dot { color: var(--acid); }
.site-nav { display: flex; gap: 30px; margin-left: 120px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.site-nav a, .header-cta, .footer-links a { transition: color .2s ease; }
.site-nav a:hover, .footer-links a:hover { color: var(--acid); }
.header-cta { padding: 10px 13px; border: 1px solid rgba(251, 251, 247, .44); font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
.header-cta:hover { background: var(--acid); border-color: var(--acid); color: var(--ink); }
.hero { position: relative; min-height: 720px; height: min(90vh, 900px); display: flex; align-items: center; overflow: hidden; color: var(--white); background: var(--ink); }
.hero-photo, .hero-shade { position: absolute; inset: 0; }
.hero-photo { background-image: url("https://images.unsplash.com/photo-1511512578047-dfb367046420?auto=format&fit=crop&w=2200&q=85"); background-size: cover; background-position: center; filter: saturate(.7); }
.hero-shade { background: rgba(8, 10, 8, .72); }
.hero-content { position: relative; z-index: 1; width: min(1180px, calc(100% - 80px)); margin: 80px auto 0; }
.eyebrow, .section-kicker, .card-topline, .game-meta, .art-label, .art-score, .hero-footnote, .hero-index, .copyright { font-family: var(--mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 27px; color: var(--acid); }
.eyebrow-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 5px rgba(216, 245, 93, .11); }
.eyebrow-dot-coral { background: var(--coral); box-shadow: 0 0 0 5px rgba(255, 110, 88, .12); }
.hero h1 { max-width: 800px; margin: 0; font-size: clamp(76px, 11vw, 160px); line-height: .83; letter-spacing: -.1em; font-weight: 600; }
.hero h1 em, h2 em { color: var(--acid); font-style: normal; }
.hero-copy { max-width: 420px; margin: 36px 0 30px; color: rgba(251, 251, 247, .74); font-size: 17px; line-height: 1.5; }
.hero-actions { display: flex; align-items: center; gap: 27px; }
.button { display: inline-flex; align-items: center; gap: 22px; border: 0; padding: 14px 16px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; transition: transform .2s ease, background .2s ease; }
.button:hover { transform: translateY(-3px); }
.button-primary { background: var(--acid); color: var(--ink); }
.button-coral { background: var(--coral); color: var(--ink); }
.text-button { padding: 0; border: 0; color: var(--white); background: transparent; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.text-button:hover, .inline-link:hover { color: var(--acid); }
.hero-index { position: absolute; right: 40px; bottom: 54px; display: flex; align-items: center; gap: 12px; color: rgba(251, 251, 247, .64); }
.index-line { width: 72px; height: 1px; background: rgba(251, 251, 247, .52); }
.hero-footnote { position: absolute; right: 40px; bottom: 30px; left: 40px; display: flex; justify-content: space-between; color: rgba(251, 251, 247, .5); }
.signal-strip { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 40px; background: var(--acid); color: var(--ink); font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.signal-strip p { margin: 0; }
.signal-arrow { font-size: 22px; }
.section-kicker { display: flex; justify-content: space-between; padding-bottom: 17px; border-bottom: 1px solid var(--line); color: var(--muted); }
.pricing-section { padding-top: 112px; padding-bottom: 112px; border-top: 1px solid var(--line); }
.pricing-intro { display: grid; grid-template-columns: 1.15fr .85fr; gap: 35px 70px; padding: 58px 0 48px; }
.pricing-intro .eyebrow { grid-column: 1 / -1; margin-bottom: 0; color: #506b20; }
.pricing-intro h2 { max-width: 720px; }
.pricing-intro h2 em { color: var(--coral); }
.pricing-intro-copy { max-width: 330px; align-self: end; margin: 0 0 5px; color: #5f6059; font-size: 18px; }
.pricing-carousel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 30px; min-height: 310px; padding: clamp(25px, 5vw, 62px); border-left: 6px solid var(--coral); background: var(--ink); color: var(--white); }
.pricing-slide-stage { min-width: 0; }
.pricing-slide-count, .pricing-position { color: var(--acid); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.pricing-slide-count { margin: 0 0 30px; }
.pricing-slide-copy { max-width: 1000px; min-height: 2em; margin: 0; font-size: clamp(36px, 6.2vw, 84px); line-height: 1.02; font-weight: 600; }
.pricing-controls { display: flex; align-items: center; gap: 12px; padding-bottom: 4px; }
.pricing-arrow { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(251, 251, 247, .48); border-radius: 50%; background: transparent; color: var(--white); font-size: 21px; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.pricing-arrow:hover:not(:disabled), .pricing-arrow:focus-visible { border-color: var(--acid); background: var(--acid); color: var(--ink); }
.pricing-arrow:disabled { opacity: .35; cursor: not-allowed; }
.pricing-model { display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; padding: 64px 0 0; }
.pricing-model .section-kicker { margin-bottom: 30px; }
.pricing-model h3 { margin: 0; font-size: clamp(34px, 5vw, 60px); line-height: 1; font-weight: 600; }
.pricing-model-copy { align-self: end; max-width: 480px; }
.pricing-model-copy p { margin: 0 0 15px; color: #5f6059; font-size: 16px; }
.pricing-model-copy p:first-child { color: var(--ink); font-size: 20px; font-weight: 600; }
.pricing-model-copy .button { margin-top: 12px; }
.pricing-breakdown { margin: 22px 0 15px; border-top: 1px solid var(--line); }
.pricing-breakdown > div { display: grid; grid-template-columns: 125px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pricing-breakdown span { color: #506b20; font-family: var(--mono); font-size: 10px; text-transform: uppercase; }
.pricing-breakdown p { margin: 0; color: #5f6059; font-size: 14px; }
.pricing-model-copy .pricing-note { margin: 0; color: var(--muted); font-size: 12px; }
.suite-flexibility { margin-top: 14px !important; padding-top: 14px; border-top: 1px solid var(--line); }
.suite-roadmap { margin: 22px 0 0; color: var(--ink); font-size: 14px; line-height: 1.6; }
.suite-roadmap strong { display: block; margin-bottom: 4px; color: #506b20; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.suite-roadmap-note { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.site-header .header-cta { background: var(--acid); border-color: var(--acid); color: var(--ink); }
.site-header .header-cta:hover { background: var(--white); border-color: var(--white); }
@media (max-width: 900px) { .pricing-intro, .pricing-model { grid-template-columns: 1fr; gap: 28px; }.pricing-intro-copy { max-width: 520px; }.pricing-carousel { min-height: 280px; } }
@media (max-width: 620px) { .pricing-section { padding-top: 75px; padding-bottom: 85px; }.pricing-intro { gap: 25px; padding: 46px 0 38px; }.pricing-intro-copy { font-size: 15px; }.pricing-carousel { grid-template-columns: 1fr; gap: 26px; min-height: 300px; padding: 25px 20px; }.pricing-slide-count { margin-bottom: 24px; }.pricing-slide-copy { min-height: 4em; font-size: clamp(33px, 10vw, 54px); }.pricing-controls { justify-content: flex-end; }.pricing-model { gap: 32px; padding-top: 48px; }.pricing-model-copy p { font-size: 15px; } }
.suite-section { padding-top: 112px; padding-bottom: 130px; }
.suite-intro { display: grid; grid-template-columns: 1.1fr .9fr; gap: 80px; padding: 68px 0 74px; }
h2 { margin: 0; font-size: clamp(54px, 7vw, 96px); line-height: .9; letter-spacing: -.09em; font-weight: 600; }
h2 span { color: var(--blue); }
.suite-description { align-self: end; max-width: 355px; padding-bottom: 8px; }
.suite-description p, .signal-form-wrap > p { margin: 0 0 24px; color: #5f6059; font-size: 17px; }
.inline-link, .card-link { display: inline-flex; gap: 18px; color: var(--ink); font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.suite-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.suite-card { min-height: 345px; display: flex; flex-direction: column; padding: 20px; background: #e5e4db; transition: transform .25s ease, background .25s ease, color .25s ease; }
.suite-card:hover { transform: translateY(-8px); background: var(--white); color: var(--ink); }
.suite-card:hover p { color: #5f6059; }
.suite-card:hover .card-status { color: var(--muted); }
.suite-card:hover .card-link { color: var(--ink); }
.suite-card-featured { background: var(--ink); color: var(--white); }
.suite-card-store { background: var(--blue); color: var(--white); }
.card-topline { display: flex; justify-content: space-between; color: var(--muted); }
.suite-card-featured .card-status, .suite-card-store .card-status { color: var(--acid); }
.suite-symbol { height: 125px; display: grid; place-items: center; margin: 30px 0 15px; font-family: var(--mono); font-size: 70px; }
.symbol-auth { position: relative; }
.suite-symbol svg { width: 100px; height: 100px; overflow: visible; }
.blueprint-ring { fill: none; stroke: var(--acid); stroke-width: 1.3; }
.blueprint-ring-inner { stroke-opacity: .55; }
.blueprint-core { fill: var(--acid); }
.symbol-track svg { width: 112px; height: 112px; overflow: visible; }
.symbol-link svg, .symbol-store svg { width: 118px; height: 100px; overflow: visible; }
.link-orbit { fill: none; stroke: var(--coral); stroke-width: 1.5; stroke-linecap: square; }
.link-orbit-b { stroke-opacity: .58; }
.link-arrow { fill: none; stroke: var(--coral); stroke-width: 1.7; stroke-linecap: square; }
.link-node { fill: var(--coral); }.link-node-b { fill: var(--acid); }
.signal-grid { fill: none; stroke: var(--coral); stroke-width: .7; opacity: .22; stroke-dasharray: 2 5; }
.signal-path { fill: none; stroke: var(--coral); stroke-width: 2; stroke-linecap: square; stroke-linejoin: bevel; }
.signal-node { fill: var(--coral); }.signal-scan { fill: none; stroke: var(--acid); stroke-width: 1; stroke-dasharray: 3 3; }
.store-frame { fill: none; stroke: var(--acid); stroke-width: 1.5; }.store-shelf { fill: none; stroke: var(--acid); stroke-width: 1; }.store-slot { fill: none; stroke: rgba(216,245,93,.55); stroke-width: 2; }.store-active { fill: var(--acid); }
.symbol-ring { position: absolute; width: 68px; height: 68px; border: 1px solid var(--acid); border-radius: 50%; }
.symbol-ring::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(216, 245, 93, .5); border-radius: 50%; }
.symbol-core { width: 10px; height: 10px; background: var(--acid); border-radius: 50%; }
.symbol-link { color: var(--coral); }
.symbol-track { display: flex; align-items: end; justify-content: center; gap: 7px; }
.symbol-track i { display: block; width: 8px; height: 35px; background: var(--coral); }
.symbol-track i:nth-child(2) { height: 62px; opacity: .72; }.symbol-track i:nth-child(3) { height: 89px; }.symbol-track i:nth-child(4) { height: 48px; opacity: .72; }.symbol-track i:nth-child(5) { height: 74px; }
.symbol-store { display: flex; align-items: center; justify-content: center; gap: 4px; }
.symbol-store span { display: block; width: 30px; height: 50px; border: 2px solid var(--acid); transform: skewY(20deg); }.symbol-store span:nth-child(2) { height: 76px; transform: skewY(-20deg); }.symbol-store span:nth-child(3) { height: 38px; }
.suite-card h3 { margin: 0 0 10px; font-size: 26px; letter-spacing: -.06em; }.suite-card p { max-width: 200px; margin: 0; color: #707169; font-size: 14px; }.suite-card-featured p, .suite-card-store p { color: rgba(251, 251, 247, .64); }.card-link { margin-top: auto; padding-top: 23px; color: inherit; }
.game-section { padding: 0 0 142px; }.game-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; padding-top: 75px; }.game-copy { padding: 18px 0 0; }.game-copy .eyebrow { color: var(--coral); }.game-copy h2 em { color: var(--coral); }.game-copy > p:not(.eyebrow) { max-width: 380px; margin: 33px 0 28px; color: #5f6059; font-size: 18px; }.game-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 35px; color: var(--muted); }.game-meta span { padding: 8px 9px; border: 1px solid var(--line); }
.dropball-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 32px; }.dropball-shot { position: relative; aspect-ratio: 9 / 16; display: block; overflow: hidden; padding: 0; border: 1px solid rgba(53, 87, 99, .28); background: #d9d8cf; cursor: zoom-in; }.dropball-shot::after { position: absolute; right: 7px; bottom: 7px; display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; background: rgba(17, 18, 15, .65); color: #fff; content: "↗"; font: 12px var(--mono); opacity: 0; transition: opacity .2s ease; }.dropball-shot:hover::after, .dropball-shot:focus-visible::after { opacity: 1; }.dropball-shot img { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(.85); transition: transform .3s ease, filter .3s ease; }.dropball-shot:hover img, .dropball-shot:focus-visible img { transform: scale(1.05); filter: saturate(1); }
.game-art { position: relative; min-height: 620px; overflow: hidden; display: grid; place-items: center; background: #e7e3d8; }.game-art::before { content: ""; position: absolute; inset: 34px; border: 1px solid rgba(17, 18, 15, .2); }.game-proof-label { position: absolute; top: 51px; left: 52px; z-index: 2; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }.dropball-device { position: relative; width: 292px; height: 520px; overflow: hidden; border: 7px solid #0b111c; border-radius: 12px; background: #101a29; box-shadow: 12px 14px 0 rgba(17, 18, 15, .18); color: #fff; transform: rotate(2deg); }.dropball-hud { position: absolute; z-index: 4; top: 14px; left: 13px; width: 125px; padding: 12px 12px 10px; background: rgba(9, 15, 26, .94); border-radius: 0 0 8px 0; font-family: var(--mono); font-size: 8px; line-height: 1.6; }.dropball-hud strong, .dropball-hud span { display: block; font-weight: 400; }.dropball-hud span { margin-top: 3px; }.dropball-hud b { font-weight: 400; }.dropball-hud small { display: block; margin-top: 7px; color: #a9b4c7; font-family: var(--sans); font-size: 7px; }.dropball-hearts { margin-top: 4px; color: #ff2943; font-family: var(--sans); font-size: 15px; letter-spacing: -3px; }.dropball-pause { position: absolute; z-index: 4; top: 17px; right: 14px; padding: 10px 11px; background: #101520; font-family: var(--mono); font-size: 8px; }.dropball-maze { position: absolute; inset: 0; overflow: hidden; background: #182536; }.dropball-maze::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(139, 162, 198, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(139, 162, 198, .12) 1px, transparent 1px); background-size: 34px 34px; }.maze-wall { position: absolute; display: block; background: #8ea7cb; box-shadow: inset 0 0 0 1px rgba(17, 27, 43, .22), 0 7px 0 rgba(5, 11, 20, .32); }.maze-wall-a { top: 20%; left: -7%; width: 62%; height: 38px; }.maze-wall-b { top: 20%; right: -8%; width: 48%; height: 104px; }.maze-wall-c { top: 39%; left: 18%; width: 35%; height: 39px; }.maze-wall-d { top: 57%; left: -8%; width: 52%; height: 98px; }.maze-wall-e { top: 72%; right: -8%; width: 61%; height: 39px; }.maze-wall-f { bottom: -4%; left: 16%; width: 81%; height: 52px; }.dropball-ball { position: absolute; z-index: 3; top: 34%; left: 31%; width: 22px; height: 22px; border: 2px solid #ffd96a; border-radius: 50%; background: #ffc94c; box-shadow: 0 0 13px #ffc94c, inset -4px -4px 0 rgba(210, 128, 15, .32); }.dropball-gate { position: absolute; z-index: 2; display: block; width: 55px; height: 31px; border: 4px solid; border-bottom: 0; background: rgba(5, 10, 19, .66); }.gate-pink { top: 61%; left: 13%; border-color: #ff628a; }.gate-gold { top: 51%; right: 7%; border-color: #ffd452; }.gate-cyan { top: 81%; left: 53%; border-color: #3bffe5; }.dropball-joystick { position: absolute; z-index: 5; bottom: 42px; left: 17px; width: 68px; height: 68px; border: 1px solid rgba(174, 198, 233, .7); border-radius: 50%; }.dropball-joystick i { position: absolute; top: 21px; left: 22px; width: 27px; height: 27px; border-radius: 50%; background: #4c9fee; }.dropball-ad { position: absolute; z-index: 5; right: 8px; bottom: 9px; left: 8px; padding: 8px; background: #f1f1ed; color: #667080; font-family: var(--sans); font-size: 8px; }.dropball-ad span { float: right; color: #15191f; }.art-caption { position: absolute; right: 52px; bottom: 50px; left: auto; font-size: 24px; line-height: .95; letter-spacing: -.06em; text-align: right; }
.blueprint-svg { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; }
.blueprint-grid { fill: none; stroke: #90a9cd; stroke-width: 1; opacity: .12; }
.blueprint-wall { fill: none; stroke: #8ea7cb; stroke-width: 14; stroke-linecap: square; stroke-linejoin: bevel; opacity: .86; }
.blueprint-route { fill: none; stroke: #b8f2d9; stroke-width: 1.5; stroke-dasharray: 6 10; opacity: .78; }
.blueprint-gate { fill: rgba(5, 10, 19, .66); stroke-width: 5; }
.blueprint-gate-pink { stroke: #ff628a; }.blueprint-gate-gold { stroke: #ffd452; }.blueprint-gate-cyan { stroke: #3bffe5; }
.blueprint-pit { stroke-width: 3; }.blueprint-pit-pink { fill: #ff628a; stroke: #ff9cb3; }.blueprint-pit-orange { fill: #ffad48; stroke: #ffd18e; }.blueprint-exit { fill: #42e99b; stroke: #b7ffe0; stroke-width: 3; }.blueprint-ball { fill: #ffc94c; stroke: #ffd96a; stroke-width: 3; filter: drop-shadow(0 0 9px #ffc94c); }
.game-art { background: #dfe7e9; }.game-art::before { inset: 28px; border-color: rgba(61, 92, 107, .32); }.dropball-device { border: 1px solid #213744; border-radius: 2px; background: #0c1822; box-shadow: 10px 12px 0 rgba(40, 67, 78, .18); transform: rotate(1deg); }.dropball-maze { background: #0c1822; }.dropball-maze::before { background-image: linear-gradient(rgba(141, 180, 193, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(141, 180, 193, .1) 1px, transparent 1px); }.dropball-hud { border-radius: 0; background: rgba(8, 19, 29, .9); color: #eaf4f5; }.dropball-pause { border: 1px solid rgba(184, 242, 217, .35); background: transparent; color: #b8f2d9; }.game-proof-label { color: #365765; }.dropball-gallery figure { background: #cedbdd; border: 1px solid rgba(53, 87, 99, .28); }
.studio-section { position: relative; min-height: 700px; overflow: hidden; background: var(--ink); color: var(--white); }.studio-image { position: absolute; inset: 0; opacity: .42; background: url("https://images.unsplash.com/photo-1550745165-9bc0b252726f?auto=format&fit=crop&w=2200&q=80") center / cover; filter: grayscale(.8) contrast(1.2); }.studio-content { position: relative; z-index: 1; padding-top: 45px; }.section-kicker-light { border-color: rgba(251, 251, 247, .22); color: rgba(251, 251, 247, .56); }.studio-copy { display: grid; grid-template-columns: 1.1fr .9fr; gap: 100px; padding-top: 110px; }.studio-copy h2 em { color: var(--acid); }.studio-copy > div:last-child { max-width: 370px; align-self: end; padding-bottom: 10px; }.studio-copy p { color: rgba(251, 251, 247, .75); font-size: 18px; }.studio-note { padding-top: 28px; border-top: 1px solid rgba(251, 251, 247, .27); color: var(--acid) !important; font-family: var(--mono); font-size: 11px !important; text-transform: uppercase; letter-spacing: .05em; }
.signal-section { padding-top: 112px; padding-bottom: 120px; }.signal-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; padding-top: 72px; }.signal-form-wrap { max-width: 420px; align-self: end; padding-bottom: 5px; }.signal-form { display: flex; border-bottom: 1px solid var(--ink); }.signal-form input { min-width: 0; flex: 1; padding: 15px 0; border: 0; outline: 0; background: transparent; color: var(--ink); }.signal-form input::placeholder { color: var(--muted); }.signal-form button { border: 0; background: transparent; font-family: var(--mono); font-size: 11px; text-transform: uppercase; }.signal-form button:hover { color: var(--coral); }.form-message { min-height: 22px; margin-top: 15px !important; color: var(--coral) !important; font-family: var(--mono); font-size: 11px !important; text-transform: uppercase; }
.site-footer { display: grid; grid-template-columns: 1.2fr 1fr 1.2fr auto; align-items: center; gap: 30px; padding-top: 25px; padding-bottom: 30px; border-top: 1px solid var(--line); }.site-footer p { margin: 0; color: #76776f; font-size: 13px; }.footer-links { display: flex; gap: 18px; font-family: var(--mono); font-size: 10px; text-transform: uppercase; }.copyright { color: var(--muted) !important; white-space: nowrap; }
.release-dialog { position: fixed; z-index: 20; width: min(520px, calc(100% - 40px)); padding: 43px; border: 0; background: var(--acid); color: var(--ink); box-shadow: 12px 12px 0 var(--ink); }.release-dialog::backdrop { background: transparent; }.release-dialog h2 { font-size: clamp(52px, 8vw, 78px); }.release-dialog h2 em { color: var(--coral); }.release-dialog > p:not(.eyebrow) { max-width: 360px; margin: 25px 0 30px; font-size: 17px; }.dialog-close { position: absolute; top: 15px; right: 18px; border: 0; background: transparent; font-size: 30px; line-height: 1; }.dialog-backdrop { display: none; position: fixed; inset: 0; z-index: 15; background: rgba(17, 18, 15, .78); }.dialog-backdrop.is-visible { display: block; }
.dropball-lightbox { width: min(920px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 28px; border: 1px solid rgba(216, 245, 93, .34); background: #0c1822; color: var(--white); box-shadow: 14px 14px 0 rgba(17, 18, 15, .55); }.dropball-lightbox::backdrop { background: rgba(8, 13, 18, .86); }.lightbox-frame { display: grid; max-height: calc(100vh - 118px); place-items: center; overflow: hidden; background: #07111b; }.lightbox-frame img { display: block; max-width: 100%; max-height: calc(100vh - 150px); object-fit: contain; }.lightbox-close { position: absolute; top: 8px; right: 12px; border: 0; background: transparent; color: var(--white); font-size: 28px; line-height: 1; }.dropball-lightbox p { margin: 13px 0 0; color: var(--acid); font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 900px) { .site-nav { margin-left: 0; }.suite-grid { grid-template-columns: repeat(2, 1fr); }.game-layout, .studio-copy, .signal-layout { grid-template-columns: 1fr; gap: 45px; }.game-art { min-height: 600px; }.studio-section { min-height: 780px; }.studio-copy { padding-top: 75px; }.site-footer { grid-template-columns: 1fr 1fr; }.copyright { justify-self: end; } }
@media (max-width: 620px) { .site-header { padding: 18px 20px; }.site-nav { display: none; }.header-cta { padding: 8px 9px; font-size: 9px; }.section-wrap, .hero-content { width: calc(100% - 40px); }.hero { min-height: 680px; height: 88vh; }.hero-content { margin-top: 70px; }.hero h1 { font-size: clamp(68px, 20vw, 110px); }.hero-copy { max-width: 320px; font-size: 15px; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 20px; }.hero-index, .hero-footnote { right: 20px; left: 20px; }.hero-index { bottom: 57px; }.hero-footnote { font-size: 8px; }.signal-strip { padding: 14px 20px; font-size: 8px; }.signal-strip p:last-child { text-align: right; }.suite-section, .signal-section { padding-top: 75px; padding-bottom: 85px; }.section-kicker { font-size: 8px; }.suite-intro { grid-template-columns: 1fr; gap: 35px; padding: 48px 0 55px; }.suite-description { max-width: 300px; }.suite-description p, .signal-form-wrap > p { font-size: 15px; }.suite-grid { grid-template-columns: 1fr; }.suite-card { min-height: 300px; }.game-section { padding-bottom: 85px; }.game-layout { padding-top: 50px; }.game-copy > p:not(.eyebrow) { font-size: 16px; }.game-art { min-height: 600px; }.game-art::before { inset: 20px; }.game-proof-label { top: 35px; left: 35px; }.art-caption { right: 35px; bottom: 35px; font-size: 20px; }.dropball-device { width: 250px; height: 500px; }.studio-section { min-height: 720px; }.studio-content { padding-top: 25px; }.studio-copy { padding-top: 75px; }.studio-copy > div:last-child { padding-bottom: 0; }.studio-copy p { font-size: 16px; }.signal-layout { padding-top: 50px; gap: 45px; }.signal-form { display: block; border: 0; }.signal-form input { width: 100%; border-bottom: 1px solid var(--ink); }.signal-form button { margin-top: 18px; padding: 0; }.site-footer { grid-template-columns: 1fr; gap: 18px; padding-top: 22px; }.copyright { justify-self: start; }.release-dialog { padding: 32px 25px; } }