:root {
  --ink: #11121f;
  --ink-2: #1b1c2d;
  --ink-3: #262840;
  --cream: #f5f1e8;
  --paper: #fffcf5;
  --muted: #b6b5c7;
  --muted-dark: #5e6073;
  --mint: #6fe1ce;
  --mint-deep: #2cae9b;
  --coral: #ff7b62;
  --gold: #ffd477;
  --violet: #9c8cff;
  --line: rgba(255,255,255,.14);
  --font-head: 'Space Grotesk', 'Arial', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'DM Mono', 'Courier New', monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--ink); color: var(--cream); font-family: var(--font-body); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.site-shell { overflow: clip; }
.site-header { height: 90px; padding: 0 clamp(22px, 5.6vw, 92px); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 30; background: rgba(17,18,31,.92); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(255,255,255,.1); }
.brand { display: flex; align-items: center; gap: 12px; min-width: 215px; }
.brand-terminal { position: relative; width: 40px; height: 40px; flex: 0 0 40px; display: flex; align-items: center; justify-content: center; gap: 1px; border-radius: 8px; background: var(--mint); color: var(--ink); box-shadow: 4px 4px 0 rgba(111,225,206,.16); font-family: var(--font-mono); font-size: 17px; font-weight: 500; line-height: 1; }
.brand-terminal i { font-style: normal; animation: blink 1.1s steps(2, start) infinite; }
.brand-terminal::after { content: ''; position: absolute; right: -4px; bottom: -4px; width: 7px; height: 7px; background: var(--coral); box-shadow: 7px 0 rgba(255,123,98,.35), 0 7px rgba(255,123,98,.25); }
.brand-wordmark { display: flex; flex-direction: column; line-height: .9; font-family: var(--font-head); font-size: 14px; letter-spacing: .075em; }
.brand-wordmark strong { color: white; font-weight: 700; }
.brand-wordmark b { color: var(--mint); letter-spacing: .18em; font-size: 11px; margin-top: 5px; }
.main-nav { display: flex; gap: clamp(22px, 3.4vw, 54px); align-items: center; font-size: 13px; font-weight: 600; color: #deddeb; }
.main-nav a { transition: color .2s ease; }
.main-nav a:hover { color: var(--mint); }
.nav-contact { border: 1px solid rgba(111,225,206,.65); border-radius: 999px; padding: 10px 16px; color: var(--mint) !important; }
.nav-contact span { margin-left: 10px; }
.menu-toggle { display: none; }
.section-grid { width: min(1240px, calc(100% - 2 * clamp(24px, 6vw, 88px))); margin-inline: auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.hero { min-height: 650px; padding-top: 58px; padding-bottom: 66px; position: relative; align-items: center; isolation: isolate; }
.hero::before { content: ''; position: absolute; z-index: -3; inset: 0; background: radial-gradient(ellipse at 88% 36%, rgba(87,73,174,.32), transparent 37%), radial-gradient(ellipse at 47% 93%, rgba(41,173,155,.12), transparent 32%), linear-gradient(112deg, #11121f 0%, #151629 55%, #17172b 100%); }
.hero::after { content: ''; position: absolute; z-index: -2; inset: 0; opacity: .2; background-image: linear-gradient(rgba(180,180,220,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(180,180,220,.12) 1px, transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(90deg, transparent, black 35%, black); }
.hero-copy { grid-column: 1 / span 6; position: relative; z-index: 2; padding: 28px 0 36px; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--mint); font-family: var(--font-mono); font-size: 11px; letter-spacing: .13em; font-weight: 500; text-transform: uppercase; line-height: 1.4; margin: 0 0 23px; }
.status-light { height: 8px; width: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(111,225,206,.12), 0 0 16px rgba(111,225,206,.7); }
.eyebrow-slash { color: var(--coral); }
.hero h1 { font-family: var(--font-head); font-size: clamp(44px, 5.05vw, 72px); line-height: .99; letter-spacing: -.065em; font-weight: 700; margin: 0; max-width: 750px; }
.headline-accent { color: var(--mint); }
.hero-lede { max-width: 545px; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.65; color: #e7e4ef; margin: 28px 0 10px; }
.hero-detail { color: #aaaabd; font-size: 15px; margin: 0; max-width: 515px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 31px; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 20px; padding: 0 20px; border-radius: 8px; font-size: 13px; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-3px); }
.button-primary { color: var(--ink); background: var(--mint); box-shadow: 0 8px 24px rgba(111,225,206,.12); }
.button-primary:hover { background: #91f1e2; box-shadow: 0 10px 30px rgba(111,225,206,.25); }
.button-quiet { border: 1px solid rgba(245,241,232,.32); color: var(--cream); background: rgba(255,255,255,.025); }
.button-quiet:hover { border-color: var(--mint); }
.hero-footnote { margin-top: 37px; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.12); max-width: 490px; color: #9d9eb2; font-size: 12px; }
.tiny-cross { color: var(--coral); font-size: 17px; margin-right: 8px; vertical-align: -1px; }
.hero-art { grid-column: 8 / span 5; min-height: 510px; display: flex; align-items: center; justify-content: center; position: relative; isolation: isolate; }
.art-grid { position: absolute; inset: 20px -15px 15px 5px; z-index: -2; background-image: radial-gradient(rgba(255,255,255,.22) 1px, transparent 1px); background-size: 17px 17px; mask-image: radial-gradient(ellipse at center, black 0%, transparent 73%); }
.art-orbit { position: absolute; width: 410px; height: 410px; border: 1px solid rgba(111,225,206,.3); border-radius: 50%; transform: rotate(-25deg) scaleY(.7); }
.orbit-one { width: 440px; height: 440px; border-color: rgba(156,140,255,.38); }
.orbit-two { width: 510px; height: 510px; border-style: dashed; border-color: rgba(255,123,98,.29); transform: rotate(24deg) scaleY(.48); }
.character-frame { width: min(350px, 80%); position: relative; z-index: 2; border: 1px solid rgba(245,241,232,.3); border-radius: 13px; background: linear-gradient(160deg, rgba(42,43,69,.95), rgba(23,24,41,.96)); box-shadow: 0 32px 70px rgba(0,0,0,.38), 0 0 0 7px rgba(255,255,255,.025), 12px 12px 0 rgba(111,225,206,.12); overflow: hidden; transform: rotate(1.4deg); }
.frame-top, .frame-bottom { padding: 13px 15px; display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; background: rgba(0,0,0,.18); }
.frame-top { border-bottom: 1px solid rgba(255,255,255,.1); color: #deddeb; }
.frame-right { font-size: 8px; color: var(--mint); }
.frame-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); margin-right: -3px; box-shadow: 12px 0 var(--gold), 24px 0 var(--mint); }
.logo-window { min-height: 330px; padding: 14px 12px 7px; display: flex; justify-content: center; align-items: center; position: relative; background: radial-gradient(ellipse at 50% 42%, rgba(156,140,255,.22), transparent 65%); }
.logo-window::before { content: ''; position: absolute; width: 220px; height: 220px; border-radius: 50%; border: 1px solid rgba(111,225,206,.28); box-shadow: 0 0 0 18px rgba(111,225,206,.025), 0 0 0 36px rgba(111,225,206,.018); }
.logo-window img { position: relative; z-index: 1; height: 295px; width: auto; object-fit: contain; filter: drop-shadow(0 12px 16px rgba(0,0,0,.28)); }
.frame-bottom { border-top: 1px solid rgba(255,255,255,.1); gap: 16px; }
.frame-stat { display: flex; flex-direction: column; gap: 3px; }
.frame-stat small { font-size: 8px; color: #a7a6bc; }
.frame-stat b { color: var(--cream); font-size: 10px; font-weight: 500; }
.floating-tag { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 9px; background: rgba(22,24,42,.95); box-shadow: 0 12px 25px rgba(0,0,0,.25); padding: 11px 13px; }
.tag-code { top: 95px; left: -3px; transform: rotate(-4deg); }
.tag-game { right: -18px; bottom: 92px; transform: rotate(3deg); }
.tag-icon { width: 33px; height: 33px; border-radius: 7px; display: grid; place-items: center; background: var(--mint); color: var(--ink); font-family: var(--font-mono); font-size: 14px; font-weight: 600; }
.game-icon { background: var(--coral); font-size: 21px; }
.floating-tag span:last-child { display: flex; flex-direction: column; gap: 2px; }
.floating-tag small { font-family: var(--font-mono); color: #aaaabd; font-size: 8px; letter-spacing: .06em; }
.floating-tag b { color: #f6f2ec; font-family: var(--font-head); font-size: 11px; letter-spacing: .03em; }
.pixel { position: absolute; z-index: -1; width: 15px; height: 15px; background: var(--coral); box-shadow: 15px 0 rgba(255,123,98,.45), 0 15px rgba(255,123,98,.3); }
.pixel-a { top: 65px; right: 85px; transform: rotate(14deg); }
.pixel-b { bottom: 73px; left: 40px; width: 10px; height: 10px; background: var(--gold); box-shadow: 10px 0 rgba(255,212,119,.4), 0 10px rgba(255,212,119,.25); }
.pixel-c { top: 155px; right: -7px; width: 7px; height: 7px; background: var(--mint); box-shadow: 7px 0 rgba(111,225,206,.4), 0 7px rgba(111,225,206,.3); }
.pixel-d { bottom: 130px; right: 48px; width: 8px; height: 8px; background: var(--violet); box-shadow: 8px 0 rgba(156,140,255,.35), 0 8px rgba(156,140,255,.25); }
.hero-art-caption { position: absolute; bottom: 10px; right: 7px; font-family: var(--font-mono); color: #77798f; font-size: 9px; letter-spacing: .1em; }
.hero-art-caption span { color: var(--coral); margin-right: 10px; }
.ticker { overflow: hidden; background: var(--mint); color: var(--ink); border-top: 1px solid rgba(0,0,0,.12); border-bottom: 1px solid rgba(0,0,0,.12); transform: rotate(-1deg) scale(1.02); position: relative; z-index: 5; margin: 0 -10px; padding: 15px 0; }
.ticker-track { display: flex; align-items: center; justify-content: space-around; gap: 27px; width: max-content; white-space: nowrap; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; animation: ticker 42s linear infinite; }
.ticker-track i { font-style: normal; color: #4b8b84; font-size: 16px; }
@keyframes ticker { to { transform: translateX(-50%); } }
.section-light { background: var(--cream); color: var(--ink); }
.projects { padding: 116px 0 87px; position: relative; }
.projects::before { content: ''; position: absolute; top: 0; right: -120px; width: 340px; height: 340px; background: radial-gradient(circle, rgba(156,140,255,.13), transparent 68%); pointer-events: none; }
.section-heading { align-items: end; margin-bottom: 39px; }
.section-heading > div { grid-column: 1 / span 7; }
.section-intro { grid-column: 8 / span 5; margin: 0 0 3px; color: var(--muted-dark); max-width: 470px; font-size: 15px; line-height: 1.8; }
.eyebrow-dark { color: #477f78; }
.eyebrow-number { color: var(--coral); margin-right: 3px; }
.section-heading h2, .craft h2, .about h2, .contact h2 { font-family: var(--font-head); font-weight: 700; font-size: clamp(38px, 4.4vw, 60px); line-height: 1.03; letter-spacing: -.06em; margin: 0; }
.section-heading h2 span { color: #e66550; }
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; width: min(1240px, calc(100% - 2 * clamp(24px, 6vw, 88px))); margin-inline: auto; }
.project-card { background: #fffdf7; border: 1px solid rgba(17,18,31,.11); border-radius: 13px; overflow: hidden; box-shadow: 0 8px 30px rgba(27,28,45,.04); transition: transform .28s ease, box-shadow .28s ease; }
.project-card:hover { transform: translateY(-7px); box-shadow: 0 22px 44px rgba(27,28,45,.12); }
.project-visual { height: 210px; position: relative; overflow: hidden; background: var(--ink-2); }
.project-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.project-card:hover .project-visual img { transform: scale(1.04); }
.visual-index { position: absolute; left: 15px; top: 14px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; color: #fff; background: rgba(17,18,31,.7); border: 1px solid rgba(255,255,255,.2); padding: 7px 9px; border-radius: 5px; backdrop-filter: blur(5px); }
.visual-corner { display: grid; place-items: center; width: 33px; height: 33px; background: var(--gold); color: var(--ink); border-radius: 50%; position: absolute; bottom: 13px; right: 13px; font-size: 18px; opacity: .95; }
.project-content { padding: 23px 22px 24px; }
.project-kicker { font-family: var(--font-mono); font-size: 9px; letter-spacing: .13em; color: #51847c; margin-bottom: 9px; }
.project-content h3 { font-family: var(--font-head); font-size: 22px; line-height: 1.16; letter-spacing: -.04em; margin: 0 0 11px; }
.project-content p { margin: 0; color: #5e6073; font-size: 14px; line-height: 1.75; }
.tag-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 19px; }
.tag-list span { font-family: var(--font-mono); font-size: 9px; letter-spacing: .02em; color: #43455a; background: #eeece4; border: 1px solid #dfddd5; padding: 5px 8px; border-radius: 5px; }
.project-note { width: min(1240px, calc(100% - 2 * clamp(24px, 6vw, 88px))); margin: 26px auto 0; padding-top: 19px; border-top: 1px solid rgba(17,18,31,.14); color: #777789; font-size: 12px; }
.note-star { color: #e66550; margin-right: 8px; }
.section-dark { background: #1a1b2c; color: var(--cream); }
.craft { position: relative; overflow: hidden; padding: 108px 0 112px; }
.craft::before { content: ''; position: absolute; inset: 0; opacity: .25; background: linear-gradient(135deg, transparent 40%, rgba(156,140,255,.2)), repeating-linear-gradient(135deg, transparent 0 38px, rgba(255,255,255,.018) 38px 39px); pointer-events: none; }
.craft-inner { position: relative; align-items: start; }
.craft-copy { grid-column: 1 / span 5; padding-right: 42px; position: sticky; top: 125px; }
.craft h2 { font-size: clamp(43px, 4.4vw, 62px); }
.craft h2 span { color: var(--mint); }
.craft-intro { color: #b9b8ca; font-size: 15px; line-height: 1.85; max-width: 430px; margin: 25px 0; }
.text-link { display: inline-flex; gap: 14px; align-items: center; color: var(--gold); font-size: 13px; font-weight: 600; border-bottom: 1px solid rgba(255,212,119,.45); padding-bottom: 8px; }
.text-link span { font-size: 17px; transition: transform .2s ease; }
.text-link:hover span { transform: translate(3px,-3px); }
.craft-list { grid-column: 7 / span 6; border-top: 1px solid var(--line); }
.craft-item { display: grid; grid-template-columns: 54px 1fr 27px; gap: 17px; align-items: start; padding: 25px 0; border-bottom: 1px solid var(--line); }
.craft-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 10px; color: var(--mint); background: rgba(111,225,206,.09); border: 1px solid rgba(111,225,206,.22); font-family: var(--font-mono); font-size: 19px; }
.craft-icon svg { width: 29px; height: 25px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.craft-item h3 { margin: 1px 0 7px; font-family: var(--font-head); font-size: 19px; letter-spacing: -.025em; }
.craft-item p { color: #aeafc3; font-size: 13px; line-height: 1.7; max-width: 440px; margin: 0; }
.craft-number { color: #77798f; font-family: var(--font-mono); font-size: 10px; padding-top: 6px; }
.about { padding: 110px 0 116px; position: relative; }
.about::before { content: ''; position: absolute; width: 440px; height: 440px; border-radius: 50%; background: radial-gradient(circle, rgba(111,225,206,.15), transparent 68%); left: -190px; bottom: -170px; pointer-events: none; }
.about-inner { align-items: center; }
.about-stamp { grid-column: 1 / span 4; position: relative; min-height: 375px; display: flex; align-items: center; justify-content: center; }
.about-stamp::before { content: ''; width: 310px; height: 310px; border-radius: 50%; position: absolute; border: 1px dashed rgba(17,18,31,.24); box-shadow: 0 0 0 20px rgba(17,18,31,.018), 0 0 0 42px rgba(17,18,31,.018); }
.about-stamp img { height: 315px; width: auto; z-index: 1; object-fit: contain; filter: drop-shadow(0 12px 9px rgba(17,18,31,.13)); }
.stamp-ring { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); white-space: nowrap; color: #76778a; font-family: var(--font-mono); font-size: 8px; letter-spacing: .17em; z-index: 2; background: var(--cream); padding: 5px 9px; }
.about-copy { grid-column: 6 / span 7; }
.about h2 { margin-bottom: 24px; }
.about h2 span { color: #6654cc; }
.about-copy > p:not(.eyebrow) { color: #56596c; font-size: 15px; line-height: 1.9; margin: 0 0 17px; }
.about-copy .eyebrow { margin-bottom: 17px; }
.about-facts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: 30px; padding-top: 25px; border-top: 1px solid rgba(17,18,31,.15); }
.about-facts div { display: flex; flex-direction: column; gap: 5px; }
.about-facts strong { font-family: var(--font-head); font-size: 17px; letter-spacing: -.03em; }
.about-facts span { color: #77798b; font-size: 11px; line-height: 1.45; }
.contact { background: #11121f; padding: 24px clamp(18px, 3vw, 42px) 72px; }
.contact-panel { max-width: 1390px; background: linear-gradient(115deg, #292044 0%, #1d2038 51%, #163c43 100%); border: 1px solid rgba(255,255,255,.15); border-radius: 18px; padding: clamp(34px, 6vw, 76px); position: relative; overflow: hidden; align-items: center; }
.contact-panel::before { content: ''; position: absolute; width: 450px; height: 450px; border-radius: 50%; border: 1px solid rgba(111,225,206,.19); right: -70px; top: -220px; box-shadow: 0 0 0 35px rgba(111,225,206,.025), 0 0 0 75px rgba(111,225,206,.025); }
.contact-copy { grid-column: 1 / span 6; position: relative; z-index: 2; }
.contact h2 { font-size: clamp(42px, 4.6vw, 64px); }
.contact h2 span { color: var(--gold); }
.contact-copy > p:not(.eyebrow) { color: #c7c5d8; max-width: 475px; font-size: 15px; line-height: 1.8; margin: 20px 0 26px; }
.button-warm { background: var(--gold); color: var(--ink); }
.button-warm:hover { background: #ffe2a0; box-shadow: 0 12px 32px rgba(255,212,119,.15); }
.contact-side { grid-column: 8 / span 5; min-height: 300px; display: flex; align-items: center; justify-content: center; position: relative; }
.contact-console { width: 100%; max-width: 380px; position: relative; z-index: 2; border: 1px solid rgba(111,225,206,.44); border-radius: 9px; background: rgba(10,14,26,.78); box-shadow: 0 20px 45px rgba(0,0,0,.25); overflow: hidden; transform: rotate(1.5deg); }
.console-top { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; color: #9ba3b9; font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; background: rgba(111,225,206,.06); border-bottom: 1px solid rgba(111,225,206,.17); }
.console-lights { display: flex; gap: 5px; }
.console-lights i { width: 6px; height: 6px; display: block; border-radius: 50%; background: var(--coral); }
.console-lights i:nth-child(2) { background: var(--gold); }
.console-lights i:nth-child(3) { background: var(--mint); }
.console-prompt { margin: 26px 22px 5px; color: #d2d3e2; font-family: var(--font-mono); font-size: 12px; }
.console-prompt span { color: var(--mint); margin-right: 7px; }
.console-response { margin: 0 22px 25px; font-family: var(--font-head); font-size: 24px; letter-spacing: -.04em; }
.cursor-block { color: var(--mint); animation: blink 1.1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
.console-divider { height: 1px; background: rgba(255,255,255,.1); }
.console-email-label { font-family: var(--font-mono); font-size: 9px; color: #8188a3; letter-spacing: .13em; margin: 19px 22px 6px; }
.contact-console > a { margin: 0 22px 21px; display: flex; justify-content: space-between; gap: 10px; align-items: center; color: var(--mint); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.contact-console > a span { color: var(--gold); }
.console-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 12px 16px; display: flex; align-items: center; gap: 8px; color: #858ba4; font-family: var(--font-mono); font-size: 8px; letter-spacing: .1em; }
.availability-dot { height: 6px; width: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px rgba(111,225,206,.7); }
.contact-scanlines { position: absolute; inset: -25%; z-index: 1; opacity: .18; background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(255,255,255,.08) 4px 5px); pointer-events: none; }
.contact-pixel { position: absolute; width: 18px; height: 18px; background: var(--coral); box-shadow: 18px 0 rgba(255,123,98,.5), 0 18px rgba(255,123,98,.3); }
.pixel-contact-a { top: 15px; left: -5px; transform: rotate(-9deg); }
.pixel-contact-b { bottom: 8px; right: 0; background: var(--gold); box-shadow: 18px 0 rgba(255,212,119,.5), 0 18px rgba(255,212,119,.3); transform: rotate(7deg); }
.site-footer { padding: 26px clamp(24px, 6vw, 88px); display: flex; align-items: center; gap: 25px; background: #0c0d17; border-top: 1px solid rgba(255,255,255,.09); }
.footer-brand img { height: 58px; width: auto; }
.footer-meta { display: flex; flex-direction: column; gap: 2px; color: #7f8197; font-size: 10px; line-height: 1.5; }
.footer-meta span:first-child { color: #b3b3c2; }
.footer-meta span:last-child { color: #6f7189; }
.back-top { margin-left: auto; align-self: center; font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; color: var(--mint); }
.back-top:hover { color: #fff; }
@media (max-width: 1060px) {
  .site-header { padding-inline: 28px; }
  .main-nav { gap: 22px; }
  .section-grid { column-gap: 18px; }
  .hero { grid-template-columns: repeat(12, minmax(0,1fr)); }
  .hero-copy { grid-column: 1 / span 7; }
  .hero-art { grid-column: 8 / span 5; min-height: 460px; }
  .hero h1 { font-size: clamp(42px, 5vw, 60px); }
  .tag-code { left: -12px; }
  .tag-game { right: -12px; }
  .project-grid { gap: 15px; }
  .project-visual { height: 170px; }
  .project-content { padding: 19px 17px 21px; }
  .about-stamp { grid-column: 1 / span 4; }
  .about-copy { grid-column: 5 / span 8; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 76px; }
  .site-header { height: 76px; padding-inline: 20px; }
  .brand { min-width: unset; gap: 8px; }
  .brand img { height: 50px; width: 37px; }
  .brand-wordmark { font-size: 13px; }
  .brand-wordmark b { font-size: 10px; }
  .menu-toggle { display: flex; width: 43px; height: 43px; border: 1px solid rgba(255,255,255,.2); border-radius: 9px; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: rgba(255,255,255,.04); cursor: pointer; }
  .menu-toggle span { display: block; width: 17px; height: 2px; background: var(--mint); transition: transform .2s ease; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .main-nav { display: none; position: absolute; left: 12px; right: 12px; top: 68px; background: #1b1c2d; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 13px; align-items: stretch; flex-direction: column; gap: 0; box-shadow: 0 20px 45px rgba(0,0,0,.35); }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 13px 12px; }
  .main-nav .nav-contact { text-align: center; margin-top: 6px; }
  .section-grid { width: calc(100% - 40px); display: grid; grid-template-columns: 1fr; gap: 0; }
  .hero { display: flex; flex-direction: column; align-items: stretch; padding-top: 42px; padding-bottom: 44px; gap: 20px; }
  .hero-copy { padding: 0; }
  .eyebrow { font-size: 9px; letter-spacing: .1em; margin-bottom: 18px; }
  .hero h1 { font-size: clamp(42px, 11vw, 62px); }
  .hero-lede { margin-top: 22px; font-size: 16px; }
  .hero-detail { font-size: 14px; }
  .hero-actions { margin-top: 23px; }
  .button { min-height: 46px; }
  .hero-footnote { margin-top: 25px; font-size: 11px; }
  .hero-art { width: 100%; min-height: 430px; margin-top: 3px; }
  .character-frame { width: min(290px, 78%); }
  .logo-window { min-height: 270px; }
  .logo-window img { height: 240px; }
  .logo-window::before { width: 180px; height: 180px; }
  .frame-top, .frame-bottom { padding: 11px 12px; font-size: 9px; }
  .frame-right { font-size: 7px; }
  .frame-stat small { font-size: 7px; }
  .frame-stat b { font-size: 8px; }
  .tag-code { top: 40px; left: 0; }
  .tag-game { bottom: 45px; right: -4px; }
  .floating-tag { padding: 8px; gap: 8px; }
  .tag-icon { width: 28px; height: 28px; }
  .floating-tag small { font-size: 7px; }
  .floating-tag b { font-size: 9px; }
  .art-orbit { max-width: 90vw; }
  .orbit-two { max-width: 94vw; }
  .hero-art-caption { bottom: 4px; right: 5px; font-size: 8px; }
  .ticker { padding: 13px 0; }
  .ticker-track { font-size: 10px; gap: 20px; }
  .projects { padding: 77px 0 64px; }
  .section-heading { display: block; margin-bottom: 27px; }
  .section-heading h2, .craft h2, .about h2, .contact h2 { font-size: clamp(37px, 9vw, 52px); }
  .section-intro { margin-top: 19px; font-size: 14px; }
  .project-grid { width: calc(100% - 40px); grid-template-columns: 1fr; gap: 16px; }
  .project-visual { height: 195px; }
  .project-content { padding: 20px; }
  .project-content h3 { font-size: 22px; }
  .project-content p { font-size: 14px; }
  .project-note { width: calc(100% - 40px); font-size: 11px; line-height: 1.7; }
  .craft { padding: 76px 0 80px; }
  .craft-copy { padding: 0; position: static; }
  .craft-intro { font-size: 14px; margin: 21px 0; }
  .craft-list { margin-top: 37px; }
  .craft-item { grid-template-columns: 44px 1fr 22px; gap: 12px; padding: 22px 0; }
  .craft-icon { width: 42px; height: 42px; font-size: 16px; }
  .craft-item h3 { font-size: 17px; }
  .craft-item p { font-size: 12px; }
  .about { padding: 71px 0 76px; }
  .about-stamp { grid-column: 1; min-height: 300px; margin-bottom: 26px; }
  .about-stamp img { height: 260px; }
  .about-stamp::before { width: 260px; height: 260px; }
  .stamp-ring { bottom: 5px; font-size: 7px; }
  .about-copy { grid-column: 1; }
  .about-copy > p:not(.eyebrow) { font-size: 14px; }
  .about-facts { gap: 10px; }
  .about-facts strong { font-size: 15px; }
  .about-facts span { font-size: 10px; }
  .contact { padding: 13px 12px 42px; }
  .contact-panel { padding: 32px 23px 27px; display: block; border-radius: 14px; }
  .contact-copy > p:not(.eyebrow) { font-size: 14px; }
  .contact-side { min-height: 275px; margin-top: 29px; }
  .contact-console { max-width: 400px; }
  .console-response { font-size: 21px; }
  .contact-console > a { font-size: 12px; }
  .site-footer { padding: 24px 20px; display: grid; grid-template-columns: 50px 1fr; gap: 15px; }
  .footer-brand img { height: 56px; }
  .footer-meta { font-size: 9px; }
  .back-top { grid-column: 1 / -1; margin: 5px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Version 2 refinements: use the supplied logo as a single brand mark, and give tabletop games their own space. */
.brand { min-width: unset; gap: 9px; }
.brand-terminal { width: 34px; height: 34px; flex-basis: 34px; font-size: 15px; border-radius: 7px; }
.brand-wordmark { font-size: 12px; }
.brand-wordmark b { font-size: 10px; margin-top: 4px; }

/* The hero now features an original game-scene illustration instead of a second copy of the logo. */
.logo-window.player-screen { min-height: 330px; padding: 18px 13px 14px; overflow: hidden; }
.logo-window.player-screen img { display: block; width: 100%; height: auto; max-height: 285px; object-fit: contain; filter: drop-shadow(0 12px 20px rgba(0,0,0,.3)); }

/* Tabletop / offline games */
.tabletop { position: relative; overflow: hidden; padding: clamp(76px, 8.8vw, 118px) 0; color: var(--ink); background: radial-gradient(ellipse at 82% 14%, rgba(156,140,255,.16), transparent 31%), linear-gradient(135deg, #f4eddf, #e8dfcf); border-block: 1px solid rgba(17,18,31,.12); }
.tabletop::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .22; background-image: linear-gradient(rgba(38,40,64,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(38,40,64,.09) 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(100deg, transparent 0%, #000 70%); }
.tabletop::after { content: ''; position: absolute; width: 440px; height: 440px; right: -190px; bottom: -285px; border: 1px solid rgba(102,84,204,.2); border-radius: 50%; box-shadow: 0 0 0 25px rgba(102,84,204,.035), 0 0 0 55px rgba(102,84,204,.025); pointer-events: none; }
.tabletop-inner { position: relative; z-index: 1; align-items: center; }
.tabletop-copy { grid-column: 1 / span 5; padding-right: 28px; }
.tabletop .eyebrow { color: #5e5d79; }
.tabletop .eyebrow-number { color: #d56852; }
.tabletop h2 { margin: 0; max-width: 500px; font-family: var(--font-head); font-size: clamp(40px, 4.2vw, 58px); font-weight: 700; letter-spacing: -.065em; line-height: 1.03; }
.tabletop h2 span { color: #6654cc; }
.tabletop-copy > p:not(.eyebrow) { max-width: 490px; margin: 23px 0 0; color: #535467; font-size: 14px; line-height: 1.85; }
.tabletop-process { display: grid; margin-top: 28px; border-top: 1px solid rgba(17,18,31,.16); }
.tabletop-process span { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(17,18,31,.12); color: #34354b; font-size: 12px; }
.tabletop-process b { color: #b75d4b; font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; }
.tabletop-art { grid-column: 7 / span 6; position: relative; min-width: 0; }
.tabletop-art-frame { position: relative; padding: 13px; border-radius: 19px; background: rgba(255,252,245,.72); border: 1px solid rgba(17,18,31,.13); box-shadow: 0 28px 60px rgba(35,32,55,.14); transform: rotate(1.1deg); }
.tabletop-art-frame > img { width: 100%; height: auto; border-radius: 12px; }
.tabletop-art-label { position: absolute; padding: 9px 12px; background: #17182a; color: #f5f1e8; border: 1px solid rgba(255,255,255,.22); border-radius: 6px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; box-shadow: 0 8px 20px rgba(0,0,0,.18); }
.label-rules { top: 27px; right: -15px; display: flex; align-items: center; gap: 8px; }
.label-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px rgba(111,225,206,.5); }
.label-offline { left: -17px; bottom: 33px; background: var(--gold); color: var(--ink); border-color: rgba(17,18,31,.12); }
.tabletop-caption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 21px 2px 0; color: #666579; font-size: 11px; }
.tabletop-caption span { color: #6654cc; font-family: var(--font-mono); font-size: 9px; letter-spacing: .11em; }

/* About panel keeps the playful profile-card idea without repeating the logo art. */
.profile-stamp::before { width: 310px; height: 310px; border-color: rgba(17,18,31,.18); }
.profile-card { width: min(330px, 88%); position: relative; z-index: 1; overflow: hidden; border: 1px solid rgba(17,18,31,.2); border-radius: 12px; background: #22243a; box-shadow: 11px 12px 0 rgba(102,84,204,.15), 0 24px 44px rgba(17,18,31,.16); transform: rotate(-2.5deg); }
.profile-card-bar { display: flex; justify-content: space-between; gap: 10px; padding: 12px 15px; color: #b7b6cc; border-bottom: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.16); font-family: var(--font-mono); font-size: 9px; letter-spacing: .09em; }
.profile-card-bar span:last-child { color: var(--mint); }
.profile-card-visual { position: relative; height: 175px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 50%, rgba(156,140,255,.25), transparent 65%), linear-gradient(135deg, #2b2d49, #17182a); }
.profile-card-visual::before { content: ''; position: absolute; width: 132px; height: 132px; border: 1px dashed rgba(111,225,206,.35); border-radius: 50%; box-shadow: 0 0 0 18px rgba(111,225,206,.035); }
.profile-card-visual svg { position: relative; z-index: 1; width: 180px; height: auto; fill: rgba(111,225,206,.12); stroke: var(--mint); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.profile-card-visual svg path:nth-child(2) { fill: none; stroke: var(--gold); stroke-width: 3; }
.profile-card-visual svg circle { fill: var(--coral); stroke: #25263d; stroke-width: 2; }
.profile-pixel { position: absolute; width: 8px; height: 8px; background: var(--coral); }
.profile-pixel-a { left: 32px; top: 30px; box-shadow: 8px 0 rgba(255,123,98,.4), 0 8px rgba(255,123,98,.3); }
.profile-pixel-b { right: 40px; top: 46px; width: 6px; height: 6px; background: var(--gold); box-shadow: 6px 0 rgba(255,212,119,.45), 0 6px rgba(255,212,119,.35); }
.profile-pixel-c { right: 54px; bottom: 28px; width: 9px; height: 9px; background: var(--violet); box-shadow: 9px 0 rgba(156,140,255,.4), 0 9px rgba(156,140,255,.3); }
.profile-card-info { padding: 13px 17px 12px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-top: 1px solid rgba(255,255,255,.1); }
.profile-card-info strong { color: #fffdf7; font-family: var(--font-head); font-size: 12px; letter-spacing: .02em; }
.profile-card-info span { color: #a9a8bd; font-size: 10px; }
.profile-card-tags { display: flex; gap: 7px; padding: 0 17px 15px; }
.profile-card-tags span { padding: 4px 7px; border: 1px solid rgba(111,225,206,.23); border-radius: 4px; color: var(--mint); font-family: var(--font-mono); font-size: 8px; letter-spacing: .08em; }
.profile-stamp .stamp-ring { color: #666579; background: var(--cream); }

/* Use a small typographic signature in the footer, not another copy of the illustration. */
.footer-brand { display: inline-flex; align-items: center; gap: 11px; min-width: 180px; }
.footer-brand-chip { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 7px; background: var(--mint); color: var(--ink); box-shadow: 4px 4px 0 rgba(111,225,206,.18); font-family: var(--font-mono); font-weight: 500; font-size: 14px; }
.footer-brand-name { display: flex; flex-direction: column; font-family: var(--font-head); font-weight: 700; font-size: 12px; letter-spacing: .08em; line-height: 1.15; }
.footer-brand-name b { color: var(--mint); font-size: 11px; letter-spacing: .18em; }

@media (max-width: 1060px) {
  .tabletop-copy { grid-column: 1 / span 6; padding-right: 12px; }
  .tabletop-art { grid-column: 7 / span 6; }
  .tabletop-art-label { font-size: 8px; }
}
@media (max-width: 760px) {
  /* Collapse the What I Do two-column layout into one column.
     The desktop grid-column values must be reset here, otherwise
     the 1-column grid creates implicit columns and the content overlaps. */
  .craft-copy,
  .craft-list {
    grid-column: 1 / -1;
  }

  .craft-copy {
    position: static;
    padding-right: 0;
  }

  .brand-terminal { width: 32px; height: 32px; flex-basis: 32px; font-size: 14px; }
  .brand-wordmark { font-size: 11px; }
  .brand-wordmark b { font-size: 9px; margin-top: 4px; }
  .main-nav { gap: 0; }
  .hero-art { min-height: 410px; }
  .logo-window.player-screen { min-height: 255px; padding: 12px 8px; }
  .logo-window.player-screen img { height: auto; max-height: 230px; width: 100%; }
  .tabletop { padding: 73px 0 78px; }
  .tabletop-copy, .tabletop-art { grid-column: 1; }
  .tabletop-copy { padding-right: 0; }
  .tabletop h2 { font-size: clamp(38px, 9vw, 51px); }
  .tabletop-copy > p:not(.eyebrow) { font-size: 14px; }
  .tabletop-art { margin: 36px 9px 0 0; }
  .tabletop-art-frame { padding: 8px; border-radius: 13px; }
  .tabletop-art-frame > img { border-radius: 8px; }
  .label-rules { top: 17px; right: -8px; font-size: 7px; }
  .label-offline { left: -8px; bottom: 18px; font-size: 7px; }
  .tabletop-caption { font-size: 10px; }
  .about-stamp { min-height: 355px; }
  .profile-card { width: min(330px, 88%); }
  .profile-card-visual { height: 160px; }
  .profile-card-info { flex-wrap: wrap; }
  .stamp-ring { bottom: 3px; font-size: 7px; }
  .site-footer { grid-template-columns: 1fr; }
  .footer-brand { min-width: unset; }
  .footer-meta { font-size: 10px; }
}

/* About section: a more personal workspace scene, connecting early games to current development. */
.about-workspace { grid-column: 1 / span 5; position: relative; min-width: 0; align-self: center; }
.workspace-scene-frame { overflow: hidden; border: 1px solid rgba(17,18,31,.18); border-radius: 15px; background: #202136; box-shadow: 0 22px 50px rgba(17,18,31,.16), 9px 9px 0 rgba(102,84,204,.13); transform: rotate(-.8deg); }
.workspace-window-bar { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 12px 13px; border-bottom: 1px solid rgba(255,255,255,.1); background: #1b1c2d; color: #b8b7ca; font-family: var(--font-mono); font-size: 9px; letter-spacing: .07em; white-space: nowrap; }
.workspace-window-dots { display: flex; flex: 0 0 auto; gap: 5px; }
.workspace-window-dots i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }
.workspace-window-dots i:nth-child(2) { background: var(--gold); }
.workspace-window-dots i:nth-child(3) { background: var(--mint); }
.workspace-window-bar > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; }
.workspace-window-state { margin-left: auto; color: var(--mint); font-size: 8px; }
.workspace-scene-frame > img { width: 100%; height: auto; }
.workspace-caption { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 7px 14px; margin: 17px 2px 0; color: #666579; font-size: 11px; }
.workspace-caption span { color: #6654cc; font-family: var(--font-mono); font-size: 9px; letter-spacing: .11em; }
.about-copy { grid-column: 7 / span 6; }
.about-copy > p:not(.eyebrow) { font-size: 16px; line-height: 1.85; }
@media (max-width: 1060px) {
  .about-workspace { grid-column: 1 / span 5; }
  .about-copy { grid-column: 7 / span 6; }
}
@media (max-width: 760px) {
  .about-workspace, .about-copy { grid-column: 1; }
  .about-workspace { margin-bottom: 28px; }
  .workspace-window-bar { padding: 10px 11px; font-size: 8px; }
  .workspace-window-state { font-size: 7px; }
  .workspace-caption { font-size: 10px; }
  .about-copy > p:not(.eyebrow) { font-size: 15px; }
}
@media (max-width: 390px) {
  .workspace-window-state { display: none; }
}


/* Company details: a quiet legal/business close that matches the site's retro-modern palette. */
.business-info {
  padding: 72px clamp(24px, 6vw, 88px) 76px;
  background: #121321;
  border-top: 1px solid rgba(255,255,255,.1);
}
.business-info-inner {
  width: min(1240px, 100%);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
}
.business-info-intro h2 {
  max-width: 470px;
  margin: 0 0 16px;
  color: var(--cream);
  font-family: var(--font-head);
  font-size: clamp(27px, 3vw, 39px);
  line-height: 1.12;
  letter-spacing: -.045em;
}
.business-info-intro h2 span { color: var(--mint); }
.business-info-intro > p:not(.eyebrow) {
  max-width: 430px;
  margin: 0;
  color: #aaaabd;
  font-size: 14px;
  line-height: 1.75;
}
.business-list { margin: 0; border-top: 1px solid rgba(255,255,255,.14); }
.business-list > div {
  display: grid;
  grid-template-columns: minmax(155px, .78fr) minmax(0, 1.22fr);
  gap: 22px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.business-list dt {
  color: #9294aa;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.business-list dd {
  margin: 0;
  color: #ece9f2;
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.business-list dd a { color: var(--mint); }
.business-list dd a:hover { color: #fff; }
@media (max-width: 760px) {
  .business-info { padding: 52px 20px 56px; }
  .business-info-inner { grid-template-columns: 1fr; gap: 28px; }
  .business-info-intro h2 { max-width: 560px; font-size: clamp(27px, 8vw, 36px); }
  .business-list > div { grid-template-columns: minmax(115px, .8fr) minmax(0, 1.2fr); gap: 14px; }
  .business-list dt { font-size: 9px; }
  .business-list dd { font-size: 12px; }
}

/* Social links: small, unobtrusive icons that fit the retro-modern navigation. */
.social-links {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: -8px;
}
.social-link {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  color: #bdbdcc;
  border: 1px solid transparent;
  border-radius: 7px;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}
.social-link svg {
  width: 18px;
  height: 18px;
  display: block;
}
.social-link:hover {
  color: var(--mint);
  border-color: rgba(111,225,206,.25);
  background: rgba(111,225,206,.06);
  transform: translateY(-2px);
}
.footer-social {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.footer-social-label {
  margin-right: 5px;
  color: #66697f;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .12em;
}
.footer-social .social-link {
  color: #8f91a5;
}
.footer-social .social-link:hover {
  color: var(--mint);
}

@media (max-width: 760px) {
  .social-links {
    margin: 5px 0 0;
    padding: 8px 12px;
    justify-content: flex-start;
    border-top: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .main-nav .social-links + .nav-contact {
    margin-top: 6px;
  }
  .footer-social {
    grid-column: 1 / -1;
    margin: 2px 0 0;
    justify-content: flex-start;
  }
  .footer-social-label {
    margin-right: 4px;
  }
}

@media (max-width: 760px) {
  .main-nav .social-link {
    padding: 0;
  }
}