@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;700;900&display=swap');

:root {
  --ink: #0b0e14;
  --ink-soft: #121822;
  --paper: #edf0f4;
  --muted: #8c97a9;
  --muted-dark: #5d6879;
  --line: rgba(237, 240, 244, .14);
  --line-dark: rgba(11, 14, 20, .12);
  --cyan: #71e7ff;
  --violet: #a679ff;
  --coral: #f06c73;
  --orange: #ff8a4c;
  --display: 'Manrope', 'Noto Sans SC', sans-serif;
  --body: 'Noto Sans SC', 'Manrope', sans-serif;
  --mono: 'DM Mono', monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--body); line-height: 1.6; }
body, button, input { font-family: var(--body); }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.app-shell { overflow: hidden; background: var(--ink); }
.section-shell { width: min(1200px, calc(100% - 80px)); margin: 0 auto; }
.topbar { height: 84px; display: flex; align-items: center; justify-content: space-between; width: min(1320px, calc(100% - 80px)); margin: 0 auto; border-bottom: 1px solid var(--line); position: relative; z-index: 5; }
.topbar-brand, .brand-lockup { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 700; letter-spacing: .03em; }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(113, 231, 255, .7); color: var(--cyan); font: 500 11px var(--mono); letter-spacing: -.06em; }
.topnav { display: flex; gap: 32px; margin-left: 100px; }
.topnav a { color: var(--muted); font-size: 13px; transition: color .25s ease; }
.topnav a:hover, .topnav a.active { color: var(--paper); }
.topnav a.active::after { content: ''; display: inline-block; width: 4px; height: 4px; background: var(--cyan); border-radius: 50%; margin: 0 0 3px 7px; }
.ghost-button, .primary-button { border: 0; color: var(--paper); background: transparent; font-size: 12px; letter-spacing: .04em; }
.ghost-button { color: var(--muted); }
.ghost-button span, .primary-button span { color: var(--cyan); margin-left: 8px; }
.primary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 23px; background: var(--coral); color: var(--ink); font-weight: 800; transition: transform .25s ease, background .25s ease; }
.primary-button:hover { transform: translateY(-3px); background: #ff9ca1; }
.kicker { margin: 0 0 20px; color: var(--cyan); font: 500 10px var(--mono); letter-spacing: .15em; text-transform: uppercase; }

.hero { min-height: 650px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, .82fr); grid-template-rows: 1fr auto; gap: 0 70px; align-items: center; position: relative; background: var(--ink); }
.hero-copy { padding-top: 60px; }
.hero h2 { margin: 0 0 28px; font: 800 clamp(46px, 6vw, 86px)/1.04 var(--display); letter-spacing: -.07em; }
.hero h2 span, h3 em, h4 em { color: var(--cyan); font-style: normal; }
.hero-description { width: min(490px, 100%); color: var(--muted); font-size: 15px; line-height: 2; }
.arrow-link { display: inline-flex; gap: 18px; align-items: center; margin-top: 34px; padding-bottom: 10px; border-bottom: 1px solid var(--cyan); font-size: 13px; }
.arrow-link span { color: var(--cyan); font-size: 20px; transition: transform .25s ease; }
.arrow-link:hover span { transform: translate(4px, 4px); }
.hero-art { width: 100%; height: 430px; position: relative; isolation: isolate; }
.hero-art-image { position: absolute; inset: 35px 5px 35px 25px; background: linear-gradient(140deg, rgba(113,231,255,.25), rgba(10,13,20,.1) 45%, rgba(166,121,255,.42)), url('/media/hero-texture.png') center/cover; opacity: .9; clip-path: polygon(16% 0, 100% 0, 84% 100%, 0 100%); }
.hero-art::before { content: ''; position: absolute; inset: 20px 0 20px 20px; border: 1px solid rgba(113,231,255,.22); clip-path: polygon(16% 0, 100% 0, 84% 100%, 0 100%); z-index: -1; }
.hero-ring { position: absolute; border: 1px solid rgba(113,231,255,.7); border-radius: 50%; transform: rotate(-25deg); }
.ring-one { width: 290px; height: 126px; left: 97px; top: 158px; }
.ring-two { width: 400px; height: 180px; left: 51px; top: 130px; border-color: rgba(166,121,255,.65); }
.hero-core { position: absolute; top: 143px; left: 220px; width: 126px; height: 126px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(11,14,20,.72); border: 1px solid var(--cyan); box-shadow: 0 0 46px rgba(113,231,255,.2); }
.hero-core span { color: var(--cyan); font: 800 36px var(--display); letter-spacing: -.1em; }
.hero-core small { color: var(--muted); font: 8px/1.25 var(--mono); letter-spacing: .12em; text-align: center; }
.hero-label { position: absolute; color: var(--muted); font: 9px var(--mono); letter-spacing: .15em; }
.label-top { right: 18px; top: 42px; color: var(--cyan); }
.label-bottom { left: 44px; bottom: 51px; }
.hero-stats { grid-column: 1 / -1; display: flex; gap: 70px; padding: 22px 0 40px; border-top: 1px solid var(--line); }
.hero-stats div { display: flex; align-items: baseline; gap: 13px; }
.hero-stats strong { font: 700 25px var(--display); }
.hero-stats strong span { color: var(--cyan); }
.hero-stats span { color: var(--muted); font-size: 11px; }
.marquee-line { display: flex; gap: 32px; align-items: center; width: 120%; margin-left: -10%; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font: 10px var(--mono); letter-spacing: .18em; transform: rotate(-2deg); }
.marquee-line i { color: var(--cyan); font-style: normal; }

.about-section { padding: 160px 0 180px; }
.section-heading h3 { margin: 0; font: 800 clamp(38px, 5vw, 66px)/1.1 var(--display); letter-spacing: -.07em; }
.about-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 38px; margin-top: 100px; }
.about-lead { font-size: 19px; line-height: 1.9; max-width: 330px; }
.about-detail { padding-top: 13px; border-top: 1px solid var(--line); }
.line-number { color: var(--cyan); font: 10px var(--mono); }
.about-detail p { color: var(--muted); font-size: 13px; line-height: 1.9; }

.business-section { padding-bottom: 180px; }
.section-heading.compact { margin-bottom: 76px; }
.business-layout { display: grid; grid-template-columns: minmax(260px, .7fr) 1.3fr; gap: 60px; }
.business-tabs { border-top: 1px solid var(--line); }
.business-tab { width: 100%; display: grid; grid-template-columns: 35px 1fr 22px; gap: 10px; align-items: center; padding: 23px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--muted); text-align: left; transition: color .25s ease, padding .25s ease; }
.business-tab:hover, .business-tab.active { color: var(--paper); padding-left: 10px; }
.business-tab.active { border-bottom-color: var(--cyan); }
.tab-number { font: 10px var(--mono); color: var(--cyan); }
.business-tab strong { display: block; font-size: 16px; font-weight: 500; }
.business-tab small { display: block; margin-top: 5px; color: var(--muted-dark); font: 9px var(--mono); letter-spacing: .1em; }
.tab-arrow { color: var(--cyan); font-size: 19px; opacity: 0; transition: opacity .25s ease; }
.business-tab.active .tab-arrow { opacity: 1; }
.business-panel { display: grid; grid-template-columns: .8fr 1.2fr; min-height: 390px; background: var(--ink-soft); }
.business-panel-copy { display: flex; flex-direction: column; padding: 43px 38px; }
.business-panel-copy .kicker { margin-bottom: 27px; }
.business-panel-copy h4 { margin: 0 0 24px; font: 800 34px/1.16 var(--display); letter-spacing: -.06em; white-space: pre-line; }
.business-panel-copy > p:not(.kicker) { color: var(--muted); font-size: 13px; line-height: 1.9; }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 17px; }
.tag-row span { padding: 6px 10px; border: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.business-metric { margin-top: auto; padding-top: 30px; display: flex; gap: 10px; align-items: end; }
.business-metric strong { color: var(--cyan); font: 500 34px var(--display); }
.business-metric span { color: var(--muted-dark); font-size: 10px; margin-bottom: 5px; }
.business-image { min-height: 390px; background-size: cover; background-position: center; display: flex; justify-content: flex-end; align-items: flex-start; padding: 20px; }
.business-image span { padding: 7px 9px; background: rgba(11,14,20,.7); color: var(--cyan); font: 10px var(--mono); }
.game-template-section { padding-bottom: 180px; }
.game-template-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; }
.game-template { min-width: 0; overflow: hidden; background: var(--ink-soft); }
.game-template-image { position: relative; aspect-ratio: 1; overflow: hidden; }
.game-template-image::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(237,240,244,.12); pointer-events: none; }
.game-template-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease, filter .45s ease; }
.game-template:hover img { transform: scale(1.06); filter: saturate(1.12); }
.game-template-image span { position: absolute; right: 7px; bottom: 5px; z-index: 1; color: var(--paper); font: 9px var(--mono); text-shadow: 0 1px 5px var(--ink); }

.video-section { padding: 120px 0 180px; background: linear-gradient(to bottom, #0b0e14, #121822); }
.video-section .section-heading { margin-bottom: 60px; }
.video-section h3 { font-size: 54px; letter-spacing: -.05em; }
.video-section .kicker { color: var(--cyan); margin-bottom: 24px; font-size: 12px; }
.split-heading { display: flex; align-items: end; justify-content: space-between; gap: 50px; margin-bottom: 58px; }
.section-aside { width: min(310px, 100%); margin: 0 0 5px; color: var(--muted); font-size: 12px; line-height: 1.9; }
.video-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 40px; }
.video-frame { aspect-ratio: 16 / 9; position: relative; overflow: hidden; background: rgba(18,24,34,0.6) border-radius: 12px; border: 1px solid var(--line-dark); backdrop-filter: blur(10px); }
.video-frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(113,231,255,.08), rgba(11,14,20,.9)); opacity: .9; }
.video-placeholder { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.play-symbol { display: grid; place-items: center; width: 62px; height: 62px; border: 1px solid var(--cyan); color: var(--cyan); font-size: 18px; padding-left: 4px; border-radius: 50%; }
.video-placeholder-label { color: var(--paper); font: 10px var(--mono); letter-spacing: .17em; }
.video-element { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.video-meta { display: flex; justify-content: space-between; gap: 18px; padding-top: 20px; }
.video-meta .kicker { margin-bottom: 8px; }
.video-meta h4 { margin: 0 0 8px; font-size: 16px; font-weight: 500; }
.video-meta p:last-child { margin: 0; color: var(--muted); font-size: 11px; }
.upload-button { flex: 0 0 auto; height: 31px; padding: 6px 11px; border: 1px solid var(--line); color: var(--muted); font-size: 10px; cursor: pointer; }
.upload-button:hover { border-color: var(--cyan); color: var(--cyan); }
.upload-button input { display: none; }

.workflow-section { padding-bottom: 180px; }
.workflow-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 15px; }
.workflow-card { min-width: 0; background: var(--ink-soft); }
.workflow-image { aspect-ratio: 16 / 9; position: relative; overflow: hidden; background: #151b26; }
.workflow-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(11,14,20,.65)); }
.workflow-image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .5s ease; }
.workflow-card:hover .workflow-image img { transform: scale(1.035); }
.workflow-image span { position: absolute; left: 14px; bottom: 12px; z-index: 1; color: var(--cyan); font: 10px var(--mono); }
.workflow-copy { padding: 18px 19px 21px; }.workflow-copy h4 { margin: 0 0 8px; font-size: 15px; font-weight: 500; }.workflow-copy p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.8; }
.workflow-note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 17px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font: 10px var(--mono); }
.workflow-note span { color: var(--violet); letter-spacing: .08em; }.workflow-note b { color: var(--paper); font-weight: 400; margin-right: 17px; }

.interactive-section { padding-bottom: 180px; }
.interactive-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.interactive-card { display: grid; grid-template-columns: .9fr 1.1fr; min-height: 250px; background: var(--ink-soft); }
.interactive-image { min-height: 250px; position: relative; background-position: center; background-size: cover; }
.interactive-image span { position: absolute; top: 17px; left: 17px; color: var(--cyan); font: 18px var(--mono); }
.interactive-image small { position: absolute; bottom: 15px; left: 17px; color: var(--paper); font: 9px var(--mono); letter-spacing: .1em; }
.interactive-copy { padding: 30px 27px; }
.interactive-copy .kicker { margin-bottom: 14px; }
.interactive-copy h4 { margin: 0 0 15px; font: 700 23px/1.25 var(--display); letter-spacing: -.05em; }
.interactive-copy > p:last-child { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.9; }
.project-plan { display: grid; grid-template-columns: .9fr 1.1fr; min-width: 0; min-height: 250px; border: 1px solid rgba(240,108,115,.5); background: linear-gradient(120deg, rgba(240,108,115,.1), var(--ink-soft) 48%); }
.project-plan-visual { position: relative; overflow: hidden; min-height: 250px; padding: 18px; background: radial-gradient(circle at 50% 48%, rgba(166,121,255,.28), transparent 42%), #251d44; }
.project-plan-visual::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(145deg, rgba(11,14,20,.06), rgba(11,14,20,.72)); pointer-events: none; }
.project-plan-poster { position: absolute; z-index: 0; inset: 35px 22px 31px; width: calc(100% - 44px); height: calc(100% - 66px); object-fit: contain; opacity: .98; }
.project-plan-code { position: relative; z-index: 2; color: var(--coral); font: 10px var(--mono); letter-spacing: .11em; }
.project-plan-visual strong { position: absolute; right: 14px; bottom: 28px; z-index: 2; color: rgba(237,240,244,.18); font: 88px/.8 var(--display); letter-spacing: -.14em; }
.project-plan-visual i { position: absolute; z-index: 2; width: 115px; height: 43px; left: 24%; top: 43%; border: 1px solid rgba(240,108,115,.7); border-radius: 50%; transform: rotate(-23deg); box-shadow: 0 0 35px rgba(240,108,115,.28); }
.project-plan-visual-meta { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 15px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--paper); font: 9px var(--mono); letter-spacing: .08em; }
.project-plan-visual-meta small { color: var(--muted); font-size: 8px; }
.project-plan-copy { display: flex; flex-direction: column; justify-content: center; padding: 25px 27px; }
.project-plan-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; }
.project-plan-copy .kicker { color: var(--coral); margin-bottom: 12px; }
.project-plan-copy h4 { margin: 0; font: 800 31px/1 var(--display); letter-spacing: -.08em; }
.project-plan-copy h5 { margin: 7px 0 11px; color: var(--paper); font-size: 10px; font-weight: 500; }
.plan-badge { display: grid; place-items: center; flex: 0 0 49px; width: 49px; height: 49px; border: 1px solid rgba(240,108,115,.6); border-radius: 50%; color: var(--coral); font: 8px/1.35 var(--mono); text-align: center; letter-spacing: .08em; }
.plan-badge b { color: var(--paper); font-weight: 400; }
.project-plan-lead { max-width: 500px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.65; }
.project-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px 10px; margin-top: 14px; }
.project-points span { display: grid; grid-template-columns: 20px 1fr; gap: 5px; min-height: 37px; padding: 8px; border: 1px solid var(--line); background: rgba(11,14,20,.24); color: var(--paper); font-size: 9px; line-height: 1.45; }
.project-points b { color: var(--coral); font: 9px var(--mono); }.project-points em { font-style: normal; }
.project-plan-foot { display: flex; justify-content: space-between; gap: 15px; margin-top: 28px; padding-top: 15px; border-top: 1px solid var(--line); color: var(--muted); font: 9px var(--mono); letter-spacing: .08em; }

.works-section { padding-bottom: 180px; }
.works-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: auto; gap: 26px 16px; }
.work-card { display: flex; min-width: 0; flex-direction: column; }
.work-card.tall { grid-row: span 2; }
.work-card.wide { grid-column: span 2; }
.work-image { height: 245px; position: relative; overflow: hidden; background: var(--ink-soft); }
.work-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(11,14,20,.65)); }
.work-image img { width: 100%; height: 100%; object-fit: contain; background: #111722; transition: transform .6s ease; }
/*.work-image img, .team-image img, .workflow-image img, .game-template-image img, .project-plan-poster, .qr-frame img { cursor: zoom-in; pointer-events: auto; -webkit-user-drag: none; user-select: none; }*/.work-image img, .team-image img, .workflow-image img, .game-template-image img, .project-plan-poster, .qr-frame img { cursor: zoom-in; pointer-events: auto; -webkit-user-drag: none; user-select: none; }
.work-image::after, .team-image::after, .workflow-image::after, .game-template-image::after, .interactive-image::after, .project-plan-visual::after { pointer-events: none; }
#app { touch-action: pan-left; }
.work-card:hover img { transform: scale(1.04); }
.work-index { position: absolute; right: 12px; top: 12px; z-index: 1; font: 10px var(--mono); color: var(--cyan); }
.work-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 12px; }
.work-meta span { color: var(--cyan); font: 9px var(--mono); white-space: nowrap; }
.work-meta h4 { margin: 0; font-size: 13px; font-weight: 500; text-align: right; }

.team-section { padding-bottom: 180px; }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.team-image { height: 360px; overflow: hidden; position: relative; background: var(--ink-soft); }
.team-image img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(25%); transition: filter .4s ease, transform .6s ease; }
.team-card:hover .team-image img { filter: grayscale(0); transform: scale(1.03); }
.team-image span { position: absolute; left: 15px; top: 15px; color: var(--cyan); font: 10px var(--mono); }
.team-meta { padding-top: 20px; }
.team-meta .kicker { margin-bottom: 8px; }
.team-meta h4 { margin: 0 0 11px; font-size: 22px; font-weight: 500; }
.team-meta > p:last-child { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }

#app video, #app .video-element { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default; }

.cooperation-section { padding-bottom: 180px; }
.cooperation-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.cooperation-card { min-height: 230px; position: relative; padding: 22px 18px; background: var(--ink); transition: background .25s ease, transform .25s ease; }
.cooperation-card:hover { z-index: 1; background: var(--ink-soft); transform: translateY(-4px); }
.cooperation-card > span { color: var(--cyan); font: 10px var(--mono); }
.cooperation-card h4 { margin: 48px 0 14px; font-size: 15px; font-weight: 500; }
.cooperation-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.8; }
.cooperation-card b { position: absolute; right: 17px; bottom: 18px; color: var(--muted-dark); font-size: 18px; font-weight: 400; }

.contact-section { min-height: 540px; position: relative; overflow: hidden; background: #101927; }
.contact-section::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(113,231,255,.12), transparent 45%, rgba(166,121,255,.14)), url('/media/ai-texture.png') center/cover; opacity: .6; }
.contact-inner { position: relative; display: grid; grid-template-columns: 1fr 245px; gap: 90px; padding: 110px 0; }
.contact-inner h3 { margin: 0 0 25px; font: 800 clamp(48px, 7vw, 92px)/.98 var(--display); letter-spacing: -.08em; }
.contact-copy > p:not(.kicker) { color: var(--muted); width: min(440px, 100%); font-size: 14px; line-height: 1.9; }
.contact-actions { display: flex; align-items: center; gap: 25px; margin-top: 34px; }
.contact-actions > span { color: var(--muted); font: 10px var(--mono); }
.wechat-card { align-self: center; padding: 22px; border: 1px solid var(--line); background: rgba(11,14,20,.42); text-align: center; }
.wechat-card .kicker { margin-bottom: 10px; }.wechat-card h4 { margin: 0 0 17px; font-size: 18px; font-weight: 500; }.qr-frame { display: grid; place-items: center; padding: 9px; background: #fff; }.qr-frame img { display: block; width: 100%; height: auto; }.wechat-card > span { display: block; margin-top: 14px; color: var(--muted); font-size: 10px; line-height: 1.7; }
.contact-orbit { position: absolute; right: 10%; top: 50%; width: 340px; height: 150px; border: 1px solid rgba(113,231,255,.35); border-radius: 50%; transform: rotate(-23deg); box-shadow: 0 0 60px rgba(113,231,255,.14); }
.contact-orbit::before, .contact-orbit::after { content: ''; position: absolute; border: 1px solid rgba(166,121,255,.3); border-radius: 50%; }
.contact-orbit::before { inset: -28px 32px; }
.contact-orbit::after { inset: 26px -32px; }
.footer { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 15px; color: var(--muted-dark); font: 9px var(--mono); letter-spacing: .1em; }
.image-zoom-target { cursor: zoom-in; }
.image-lightbox { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 34px; background: rgba(5,7,11,.92); backdrop-filter: blur(12px); }
.lightbox-content { max-width: min(92vw, 1100px); max-height: 90vh; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lightbox-content img { display: block; max-width: 92vw; max-height: 82vh; width: auto; height: auto; object-fit: contain; box-shadow: 0 20px 90px rgba(0,0,0,.5); -webkit-user-drag: none; cursor: zoom-out; user-select: none; touch-action: none; }
.lightbox-content p { margin: 0; color: var(--muted); font-size: 11px; }
.lightbox-close { position: absolute; right: 25px; top: 18px; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--paper); font-size: 28px; line-height: 1; }
.lightbox-close:hover { border-color: var(--cyan); color: var(--cyan); }
body.lightbox-open { overflow: hidden; }

.login-screen { min-height: 100vh; display: grid; grid-template-columns: minmax(300px, 1fr) minmax(400px, .8fr); background: var(--ink); }
.login-visual { position: relative; overflow: hidden; background: #0b0e14; }
.login-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--ink)); }
.login-orbit { position: absolute; border: 1px solid rgba(113,231,255,.4); border-radius: 50%; transform: rotate(-25deg); }
.orbit-a { width: 570px; height: 230px; top: 30%; left: 1%; }
.orbit-b { width: 720px; height: 300px; top: 24%; left: -7%; border-color: rgba(166,121,255,.35); }
.orbit-c { width: 370px; height: 145px; top: 38%; left: 14%; border-color: rgba(255,138,76,.33); }
.login-glow { position: absolute; left: 36%; top: 46%; width: 130px; height: 130px; border-radius: 50%; background: var(--cyan); filter: blur(70px); opacity: .2; }
.login-coordinate { position: absolute; z-index: 1; color: var(--muted); font: 9px var(--mono); letter-spacing: .16em; }
.coordinate-a { left: 12%; bottom: 12%; }.coordinate-b { right: 9%; top: 13%; }
.login-panel { align-self: center; padding: 60px clamp(45px, 9vw, 135px) 60px 80px; }
.login-panel .brand-lockup { margin-bottom: 90px; }
.login-panel h1 { margin: 0 0 24px; font: 800 clamp(42px, 5vw, 72px)/1.07 var(--display); letter-spacing: -.08em; }
.login-panel h1 em { color: var(--cyan); font-style: normal; }
.login-copy { color: var(--muted); font-size: 13px; line-height: 1.9; max-width: 330px; }
.login-form { display: flex; flex-direction: column; gap: 25px; margin-top: 47px; max-width: 340px; }
.login-form label span { display: block; margin-bottom: 8px; color: var(--muted-dark); font: 10px var(--mono); letter-spacing: .1em; }
.login-form input { width: 100%; padding: 13px 0; border: 0; border-bottom: 1px solid var(--line); outline: none; color: var(--paper); background: transparent; font-size: 15px; }
.login-form input:focus { border-color: var(--cyan); }
.login-form input::placeholder { color: var(--muted-dark); }
.login-form .primary-button { align-self: flex-start; }
.login-form.login-error { animation: login-shake .3s ease; }
.login-form.login-error input { border-color: var(--coral); }
.login-note { margin-top: 22px; color: var(--muted-dark); font: 10px var(--mono); }
@keyframes login-shake { 0%, 100% { transform: translateX(0); } 35% { transform: translateX(-7px); } 70% { transform: translateX(7px); } }

.reveal { opacity: 0; transform: translateY(25px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: .1s; }.delay-2 { transition-delay: .18s; }.delay-3 { transition-delay: .26s; }

@media (max-width: 900px) {
  .section-shell, .topbar { width: min(100% - 40px, 680px); }
  .topbar { height: 72px; }.topnav { gap: 18px; margin-left: 0; }.topnav a:nth-child(1) { display: none; }
  .hero { grid-template-columns: 1fr; min-height: auto; padding: 85px 0 0; }.hero-copy { padding-top: 0; }.hero-art { height: 330px; margin-top: 50px; }.hero-ring { transform: rotate(-25deg) scale(.8); transform-origin: center; }.hero-core { left: 43%; top: 108px; }.hero-stats { margin-top: 20px; gap: 25px; justify-content: space-between; }.hero-stats div { display: block; }.hero-stats span { display: block; margin-top: 5px; }
  .about-section, .business-section, .game-template-section, .video-section, .workflow-section, .works-section, .team-section, .cooperation-section { padding-bottom: 120px; }.about-section { padding-top: 120px; }.about-grid { grid-template-columns: 1fr 1fr; margin-top: 60px; }.about-lead { grid-column: 1 / -1; max-width: 520px; }
  .business-layout { grid-template-columns: 1fr; gap: 35px; }.business-panel { grid-template-columns: 1fr 1fr; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .workflow-grid { grid-template-columns: 1fr 1fr; }.workflow-card:first-child { grid-column: 1 / -1; }
  .game-template-grid { grid-template-columns: repeat(6, 1fr); }
  .works-grid { grid-template-columns: repeat(2, 1fr); }.work-card.wide { grid-column: span 1; }.work-card.tall { grid-row: span 1; }.work-image { height: 230px; }
  .cooperation-grid { grid-template-columns: repeat(2, 1fr); }.cooperation-card { min-height: 210px; }
  .login-screen { grid-template-columns: 1fr; }.login-visual { display: none; }.login-panel { width: min(100% - 50px, 500px); margin: auto; padding: 50px 0; }.login-panel .brand-lockup { margin-bottom: 90px; }
}

@media (max-width: 580px) {
  .section-shell, .topbar { width: calc(100% - 32px); }.topbar-brand { font-size: 13px; }.ghost-button { font-size: 0; }.ghost-button span { font-size: 17px; margin: 0; }.topnav { gap: 13px; }.topnav a { font-size: 11px; }
  .hero h2 { font-size: 47px; }.hero-description { font-size: 13px; }.hero-art { height: 250px; }.hero-art-image, .hero-art::before { inset: 20px 0; }.hero-core { left: 39%; top: 76px; width: 100px; height: 100px; }.hero-core span { font-size: 29px; }.ring-one { left: 62px; top: 95px; }.ring-two { left: 26px; top: 80px; }.label-bottom { left: 10px; bottom: 27px; font-size: 8px; }.label-top { right: 0; top: 18px; }.hero-stats { gap: 12px; }.hero-stats strong { font-size: 20px; }.hero-stats span { font-size: 9px; }
  .about-grid { grid-template-columns: 1fr; gap: 20px; }.about-detail { display: grid; grid-template-columns: 35px 1fr; gap: 10px; }.about-detail p { margin: 0; }.section-heading h3 { font-size: 42px; }.split-heading { display: block; }.section-aside { margin-top: 22px; }
  .business-panel { grid-template-columns: 1fr; }.business-image { min-height: 235px; order: -1; }.business-panel-copy { min-height: 370px; padding: 30px 25px; }.business-panel-copy h4 { font-size: 31px; }
  .video-grid, .team-grid, .interactive-grid, .workflow-grid { grid-template-columns: 1fr; }.video-meta { display: block; }.upload-button { display: inline-block; margin-top: 15px; }.game-template-grid { grid-template-columns: repeat(4, 1fr); gap: 9px; }.works-grid { grid-template-columns: 1fr 1fr; gap: 22px 14px; }.work-image { height: 180px; }.work-meta { display: block; }.work-meta h4 { margin-top: 6px; text-align: left; font-size: 11px; }.work-meta span { font-size: 8px; }.team-grid { gap: 16px; }.team-card { background: var(--ink-soft); border-radius: 12px; padding: 12px; };.team-image { min-height: 280px; overflow: hidden; position: relative; background: var(--ink-soft); };.team-image img { width: 100%; object-fit: cover; filter: grayscale(25%); transition: filter .4s ease, transform .6s ease; };.team-meta { padding-top: 12px; padding-left: 2px; };.team-meta .kicker { margin-bottom: 6px; font-size: 9px; }.team-meta h4 { margin: 0 0 6px; font-size: 17px; font-weight: 500; line-height: 1.3; }.team-meta > p:last-child { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }