/* ── Design tokens ── */
:root {
  --bg: #0a0b0f;
  --bg-elevated: #12141c;
  --bg-card: #161922;
  --border: rgba(255, 255, 255, 0.08);
  --text: #e8eaef;
  --text-muted: #8b92a8;
  --accent: #6ee7b7;
  --accent-alt: #a78bfa;
  --accent-warm: #fbbf24;
  --gradient-app: linear-gradient(135deg, #6ee7b7 0%, #34d399 100%);
  --gradient-game: linear-gradient(135deg, #a78bfa 0%, #818cf8 100%);
  --font: "DM Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", monospace;
  --radius: 12px;
  --radius-lg: 20px;
  --header-h: 72px;
  --container: min(1120px, 100% - 48px);
}

/* Product catalog: content stays available without JavaScript. */
.product-card { cursor:pointer; }
.demo-open { font:inherit; cursor:pointer; }
body.demo-is-open { overflow:hidden; }
.product-dialog { padding:0; margin:auto; width:min(1180px,calc(100% - 40px)); max-height:90dvh; color:var(--text); background:#10131c; border:1px solid #343a4d; border-radius:20px; box-shadow:0 24px 100px #0009; }
.product-dialog::backdrop { background:#04070dd9; backdrop-filter:blur(8px); }
.demo-shell { padding:28px; }
.demo-header { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:24px; }
.demo-header h2 { font-size:clamp(1.2rem,3vw,1.8rem); }
.demo-header .section-label { margin-bottom:6px; }
.demo-close { position:sticky; top:0; border:1px solid #41485c; background:#202634; color:#fff; width:44px; height:44px; border-radius:50%; font-size:28px; flex-shrink:0; cursor:pointer; z-index:2; }
.demo-layout { display:grid; grid-template-columns:minmax(0,2fr) minmax(220px,1fr); gap:28px; }
.demo-viewer { min-width:0; }
.demo-stage { min-height:280px; height:min(57vh,600px); display:flex; align-items:center; justify-content:center; background:#080a10; border:1px solid var(--border); border-radius:12px; overflow:hidden; position:relative; }
.demo-stage img { display:block; width:100%; height:100%; object-fit:contain; }
.demo-stage .demo-terminal { padding:22px; width:100%; height:100%; overflow:auto; font:13px/1.7 var(--mono); color:#9fe9c8; white-space:pre-wrap; overflow-wrap:anywhere; }
.demo-empty,.demo-error { padding:24px; color:var(--text-muted); }
.demo-error { position:absolute; inset:0; background:#080a10e8; display:grid; place-content:center; }
.demo-toolbar { display:flex; align-items:center; gap:12px; padding:14px 0; }
.demo-toolbar button,.demo-thumbnails button { background:#202634; border:1px solid #41485c; color:var(--text); padding:8px 14px; border-radius:8px; cursor:pointer; font:inherit; font-size:.8rem; }
.demo-toolbar button:disabled { opacity:.35; cursor:default; }
#demo-play { margin-left:auto; }
#demo-counter,#demo-caption { color:var(--text-muted); font-size:.8rem; }
.demo-thumbnails { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.demo-thumbnails [aria-pressed=true] { border-color:var(--accent); color:var(--accent); }
.demo-info p { font-size:.92rem; line-height:1.9; }
.demo-info h3 { margin:24px 0 10px; font-size:1rem; }
.demo-info .product-note { color:var(--text-muted); font-size:.8rem; margin:24px 0; }
.demo-info .btn { font-size:.85rem; }
@media(max-width:760px) {
  .product-dialog { width:calc(100% - 16px); max-height:94dvh; }
  .demo-shell { padding:18px; }
  .demo-layout { grid-template-columns:1fr; gap:20px; }
  .demo-stage { height:48dvh; min-height:230px; }
  .demo-header { gap:10px; }
}
.catalog-nav { display:flex; flex-wrap:wrap; gap:12px; margin:0 0 48px; }
.catalog-nav a { display:flex; align-items:center; gap:16px; padding:12px 22px; border:1px solid var(--border); border-radius:999px; background:var(--bg-card); font-weight:600; }
.catalog-nav a:hover { border-color:var(--accent); color:var(--accent); }
.catalog-nav span { color:var(--text-muted); font:12px var(--mono); }
.catalog-group { scroll-margin-top:calc(var(--header-h) + 24px); margin-bottom:64px; }
.catalog-group:last-child { margin-bottom:0; }
.catalog-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; border-top:1px solid var(--border); padding-top:28px; }
.catalog-heading h3 { font-size:1.65rem; }
.catalog-heading p, .catalog-heading>span { color:var(--text-muted); font-size:.9rem; }
.catalog-heading>span { white-space:nowrap; }
.catalog-group .work-grid { grid-template-columns:repeat(3,minmax(0,1fr)); max-width:none; align-items:stretch; }
.catalog-group .product-card { aspect-ratio:auto; }
.product-cover { min-height:130px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:8px; padding:24px; border-bottom:1px solid var(--border); }
.product-cover .product-display-name { font:700 clamp(22px,2.2vw,28px)/1.4 var(--font); overflow-wrap:anywhere; }
.product-cover .product-english-name { font:500 12px/1.5 var(--mono); letter-spacing:.04em; opacity:.75; }
.cover-software { background:linear-gradient(120deg,#183d32,#142124); color:#6ee7b7; }
.cover-app { background:linear-gradient(120deg,#183049,#152332); color:#93c5fd; }
.cover-plugin { background:linear-gradient(120deg,#42351b,#242118); color:#fbbf24; }
.cover-game { background:linear-gradient(120deg,#35274e,#201b32); color:#c4b5fd; }
.product-card .work-body { padding:22px; }
.product-card .product-platform { font-size:.75rem; color:var(--text-muted); margin-bottom:8px; }
.product-card .work-body h3 { font-size:1.16rem; line-height:1.4; margin-bottom:12px; }
.product-status { display:inline-block; font-size:.72rem; border:1px solid var(--border); padding:3px 9px; border-radius:6px; margin-bottom:16px; }
.product-card .product-intro { font-size:.94rem; line-height:1.85; color:var(--text); margin-bottom:16px; }
.product-features { padding-left:18px; color:var(--text-muted); font-size:.85rem; line-height:1.9; margin-bottom:16px; }
.product-card .product-note { font-size:.78rem; line-height:1.75; margin-bottom:0; color:var(--text-muted); }
.product-card .work-action { padding:16px 22px; }
.product-card .work-action .btn { font-size:.85rem; padding:10px 14px; }
.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; }
a:focus-visible, button:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
@media(max-width:1000px) { .catalog-group .work-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:640px) {
  .catalog-group .work-grid { grid-template-columns:1fr; }
  .catalog-nav { gap:8px; margin-bottom:32px; }
  .catalog-nav a { padding:10px 15px; gap:10px; }
  .catalog-heading { align-items:flex-start; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .product-card { transition:none; } }

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

/* Noise overlay */
.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.container {
  width: var(--container);
  margin-inline: auto;
}

/* ── Header ── */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background: rgba(10, 11, 15, 0.75);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, background 0.3s;
}

.header.scrolled {
  border-bottom-color: var(--border);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 1.05rem;
}

.logo-mark {
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--accent);
  background: rgba(110, 231, 183, 0.12);
  padding: 6px 10px;
  border-radius: 8px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav a {
  font-size: 0.9rem;
  color: var(--text-muted);
  transition: color 0.2s;
}

.nav a:hover {
  color: var(--text);
}

.nav-cta {
  color: var(--bg) !important;
  background: var(--gradient-app);
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 600;
}

.nav-cta:hover {
  filter: brightness(1.08);
}

.menu-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.menu-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}

.menu-btn[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-btn[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.menu-btn[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-nav {
  display: none;
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  z-index: 99;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  padding: 20px 24px 28px;
  flex-direction: column;
  gap: 16px;
}

.mobile-nav:not([hidden]) {
  display: flex;
}

.mobile-nav a {
  font-size: 1.1rem;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

/* ── Hero ── */
.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
  padding: calc(var(--header-h) + 48px) 24px 80px;
  max-width: 1200px;
  margin-inline: auto;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.45;
}

.orb-1 {
  width: 420px;
  height: 420px;
  background: rgba(110, 231, 183, 0.25);
  top: -80px;
  right: 10%;
}

.orb-2 {
  width: 320px;
  height: 320px;
  background: rgba(167, 139, 250, 0.2);
  bottom: 10%;
  left: -60px;
}

.grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black, transparent);
}

.hero-content {
  position: relative;
  z-index: 1;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 20px;
  padding: 6px 14px 6px 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.pulse {
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

.hero-title {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

.gradient-text {
  background: var(--gradient-app);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text.alt {
  background: var(--gradient-game);
  -webkit-background-clip: text;
  background-clip: text;
}

.hero-desc {
  font-size: 1.1rem;
  color: var(--text-muted);
  max-width: 480px;
  margin-bottom: 32px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 48px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: transform 0.2s, filter 0.2s, box-shadow 0.2s;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--gradient-app);
  color: #0a0b0f;
  box-shadow: 0 8px 32px rgba(110, 231, 183, 0.25);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.04);
}

.btn-full {
  width: 100%;
}

.hero-stats {
  display: flex;
  align-items: center;
  gap: 28px;
}

.hero-stats dt {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text);
}

.hero-stats dd {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.stat-divider {
  width: 1px;
  height: 40px;
  background: var(--border);
}

/* Phone mock */
.hero-visual {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}

.phone-mock {
  width: 280px;
  padding: 12px;
  background: linear-gradient(145deg, #2a2d3a, #1a1c24);
  border-radius: 36px;
  box-shadow:
    0 40px 80px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.phone-screen {
  position: relative;
  aspect-ratio: 9/16;
  background: var(--bg-elevated);
  border-radius: 26px;
  overflow: hidden;
  padding: 20px;
}

.app-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.8rem;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
  animation: float 4s ease-in-out infinite;
}

.card-1 { top: 18%; left: 8%; animation-delay: 0s; }
.card-2 { top: 42%; right: 5%; animation-delay: 0.8s; }
.card-3 { bottom: 28%; left: 12%; animation-delay: 1.6s; }

.card-icon { font-size: 1.25rem; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.code-snippet {
  position: absolute;
  bottom: 12%;
  right: 8%;
  left: 8%;
  padding: 14px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.7;
  color: var(--text-muted);
}

.code-snippet .kw { color: var(--accent-alt); }
.code-snippet .fn { color: var(--accent); }

/* ── Sections ── */
.section {
  padding: 100px 24px;
}

.section-dark {
  background: var(--bg-elevated);
  border-block: 1px solid var(--border);
}

.section-head {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 56px;
}

.section-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 12px;
}

.section-head h2 {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.section-head p {
  color: var(--text-muted);
  font-size: 1rem;
}

/* About */
.about-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.about-card {
  padding: 32px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color 0.3s, transform 0.3s;
}

.about-card:hover {
  border-color: rgba(110, 231, 183, 0.3);
  transform: translateY(-4px);
}

.about-icon {
  font-size: 2rem;
  margin-bottom: 16px;
}

.about-card h3 {
  font-size: 1.15rem;
  margin-bottom: 10px;
}

.about-card p {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Services */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.service-card {
  padding: 36px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}

.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.service-app::before {
  background: var(--gradient-app);
}

.service-game::before {
  background: var(--gradient-game);
}

.service-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(110, 231, 183, 0.15);
  color: var(--accent);
  margin-bottom: 12px;
}

.service-badge.game {
  background: rgba(167, 139, 250, 0.15);
  color: var(--accent-alt);
}

.service-header h3 {
  font-size: 1.5rem;
  margin-bottom: 20px;
}

.service-list {
  list-style: none;
  margin-bottom: 24px;
}

.service-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.service-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-size: 0.85rem;
}

.service-game .service-list li::before {
  color: var(--accent-alt);
}

.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.service-tags span {
  font-family: var(--mono);
  font-size: 0.75rem;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  color: var(--text-muted);
}

/* Work */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 1120px;
  margin-inline: auto;
}

.work-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.3s, border-color 0.3s;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.work-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, 0.15);
}

.work-body {
  padding: 12px;
  flex: 1;
}

.work-body p {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.work-thumb {
  height: 100px;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 12px;
}

.work-thumb-1 {
  background: linear-gradient(135deg, #1e3a2f 0%, #0f1f18 50%, #2d1f4e 100%);
}

.work-thumb-2 {
  background: linear-gradient(135deg, #2d3a1e 0%, #1a2410 50%, #3d2a1a 100%);
}

.work-thumb-3 {
  background: linear-gradient(135deg, #1e2a3a 0%, #101820 50%, #1e3a4a 100%);
}

.work-thumb-4 {
  background: linear-gradient(135deg, #3a2a1e 0%, #241810 50%, #4a301e 100%);
}

.work-thumb-5 {
  background: linear-gradient(135deg, #1a3a3a 0%, #0f2020 50%, #1e4a3a 100%);
}

.work-thumb-6 {
  background: linear-gradient(135deg, #3a2a1a 0%, #201510 50%, #4a301a 100%);
}

.work-thumb-7 {
  background: linear-gradient(135deg, #1f2f4a 0%, #0f1726 50%, #263c5f 100%);
}

.work-thumb-8 {
  background: linear-gradient(135deg, #24403a 0%, #10211d 50%, #33524d 100%);
}

.work-qrcode {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px;
  border-top: 1px solid var(--border);
}

.work-action {
  padding: 14px;
  border-top: 1px solid var(--border);
}

.work-action .btn {
  width: 100%;
  padding: 12px 20px;
  font-size: 0.9rem;
  text-decoration: none;
}

.work-qrcode-dual {
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
}

.qrcode-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.work-qrcode img {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  object-fit: cover;
}

.qrcode-hint {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-align: center;
}

.work-type {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 6px;
}

.work-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.work-meta span {
  font-size: 0.7rem;
  font-family: var(--mono);
  color: var(--accent);
  opacity: 0.9;
}

/* Stack */
.stack-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.stack-group h3 {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.stack-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stack-items span {
  font-size: 0.9rem;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* Contact */
.contact-section {
  padding-bottom: 120px;
}

.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.contact-copy h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.25;
  margin: 12px 0 16px;
}

.contact-copy p {
  color: var(--text-muted);
}

.wechat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
  padding: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.wechat-card img {
  width: 180px;
  height: 180px;
  padding: 6px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

.wechat-card h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.wechat-card p {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-form label span {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  font-family: inherit;
  font-size: 1rem;
  padding: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  transition: border-color 0.2s;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.contact-form textarea {
  resize: vertical;
  min-height: 100px;
}

.form-hint {
  margin-top: 10px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-muted, #6b7280);
  text-align: center;
}

.form-note {
  font-size: 0.85rem;
  color: var(--accent);
  text-align: center;
}

.form-note[hidden] {
  display: none;
}

.contact-email {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
  font-size: 0.95rem;
}

.contact-email span {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.contact-email a {
  font-family: var(--mono);
  border-bottom: 1px solid var(--border);
}

.contact-email a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.btn-copy {
  font: inherit;
  font-size: 0.78rem;
  min-height: 32px;
  padding: 5px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  cursor: pointer;
  touch-action: manipulation;
}

.btn-copy:hover,
.btn-copy.is-copied {
  border-color: var(--accent);
  color: var(--accent);
}

.form-fallback {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}

.form-fallback[hidden] {
  display: none;
}

.form-fallback-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.form-fallback-actions .btn {
  flex: 1 1 46%;
  font-size: 0.85rem;
  padding: 9px 14px;
}

/* Footer */
.footer {
  padding: 32px 24px;
  border-top: 1px solid var(--border);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-inner p {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: flex-end;
}

.footer-links a {
  font-size: 0.85rem;
  color: var(--text-muted);
  transition: color 0.2s;
}

.footer-links a:hover {
  color: var(--accent);
}

.bottom-element {
  text-align: center;
  padding: 0 24px 24px;
}

.bottom-element a {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 0.8rem;
  color: var(--text-muted);
  transition: color 0.2s;
}

.bottom-element a:hover {
  color: var(--text);
}

/* Reveal animation
   默认可见，只有 JS 就绪时才启用 reveal 初始隐藏，避免本地 file:// 或脚本异常时整块内容消失。 */
[data-reveal] {
  opacity: 1;
  transform: none;
}

.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.js [data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .hero {
    grid-template-columns: 1fr;
    text-align: center;
    padding-top: calc(var(--header-h) + 32px);
  }

  .hero-desc {
    margin-inline: auto;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-stats {
    justify-content: center;
  }

  .hero-visual {
    order: -1;
  }

  .phone-mock {
    width: 220px;
  }

  .about-grid,
  .services-grid,
  .work-grid {
    grid-template-columns: 1fr;
  }

  .stack-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-inner {
    grid-template-columns: 1fr;
  }

  .wechat-card {
    max-width: 420px;
  }
}

@media (min-width: 641px) {
  .mobile-nav {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .nav {
    display: none;
  }

  .menu-btn {
    display: flex;
  }

  .stack-grid {
    grid-template-columns: 1fr;
  }

  .hero-stats {
    flex-wrap: wrap;
    gap: 20px;
  }

  .wechat-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .work-qrcode-dual {
    flex-direction: column;
    align-items: center;
  }

  .stat-divider {
    display: none;
  }
}

.cover-douyin { background:linear-gradient(120deg,#42213b,#1e2236); color:#f9a8d4; }
/* Product-first showcase */
.hero { max-width:1320px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; min-height: min(880px,100svh); }
.hero-title { font-size:clamp(36px,4.1vw,60px); line-height:1.18; letter-spacing:-.035em; }
.hero-desc { font-size:17px; line-height:1.9; }
.product-showcase { display:block; min-width:0; }
.showcase-main,.showcase-small { display:block; overflow:hidden; background:#15212a; border:1px solid #ffffff20; border-radius:18px; color:var(--text); text-decoration:none; transition:transform .22s,box-shadow .22s; }
.showcase-main { box-shadow:0 24px 70px #0006; transform:rotate(-2deg); }
.showcase-kicker { display:flex; justify-content:space-between; padding:15px 18px; font-size:14px; color:#bce8d6; }
.showcase-main img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; background:#09130f; }
.showcase-bottom { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:22px 0 0; }
.showcase-small img { display:block; width:100%; height:132px; object-fit:contain; background:#0e1117; }
.showcase-small>span { display:block; padding:12px 14px; font-weight:600; }
.showcase-small small { display:block; margin-top:5px; font-size:11px; color:#b4bece; font-weight:400; }
.showcase-note { text-align:right; font-size:12px; margin:15px 0 0; color:#a7b8b5; }
.showcase-main:hover { transform:rotate(0); box-shadow:0 24px 60px #35b68b24; }
.showcase-small:hover { transform:translateY(-4px); }
.product-cover { padding:0; position:relative; min-height:0; aspect-ratio:16/10; overflow:hidden; background:#0e121a; }
.product-cover img { display:block; width:100%; height:100%; object-fit:contain; transition:transform .3s ease; }
.cover-label { position:absolute; bottom:10px; right:10px; padding:5px 10px; border-radius:6px; font-size:11px; color:#edf5fa; background:#0c1420ed; }
.product-card:hover .product-cover img { transform:scale(1.025); }
.product-card:focus-within { outline:2px solid var(--accent); outline-offset:4px; }
.showcase-main:focus-visible,.showcase-small:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
.catalog-group { scroll-margin-top:100px; }
.product-card { scroll-margin-top:100px; }
#work .section-head { margin-bottom:32px; }
.demo-stage { height:min(46dvh,460px); min-height:220px; }
.demo-stage img { animation:picture-in .18s ease-out; }
.product-dialog[open] { animation:dialog-in .2s ease-out; }
@keyframes picture-in { from {opacity:.5} to {opacity:1} }
@keyframes dialog-in { from {opacity:0;transform:translateY(8px)} to {opacity:1;transform:translateY(0)} }
@media(max-width:960px) { .hero {grid-template-columns:1fr; min-height:0; gap:32px;} .product-showcase {order:0;width:min(100%,600px);margin:auto;} }
@media(max-width:640px) { .hero {padding-bottom:40px;} .showcase-small img {height:105px;} .showcase-small>span {padding:10px;} .showcase-main {transform:none;} .showcase-bottom {gap:10px;} .demo-stage {height:32dvh;min-height:180px;} }
@media(prefers-reduced-motion:reduce) { .showcase-main,.showcase-small,.product-cover img {transition:none;transform:none!important;} .demo-stage img,.product-dialog[open] {animation:none;} }
/* Phone H5: readable layout, safe areas and comfortable touch targets. */
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
.demo-toolbar button,.demo-thumbnails button { min-width:44px; min-height:44px; touch-action:manipulation; }
.demo-stage { touch-action:pan-y pinch-zoom; }
.demo-stage img { user-select:none; -webkit-user-drag:none; }
.product-dialog { overscroll-behavior:contain; }
@media(max-width:640px) {
 :root { --header-h:64px; --container:calc(100% - 32px); }
 .header { padding-left:max(16px,env(safe-area-inset-left)); padding-right:max(16px,env(safe-area-inset-right)); }
 .menu-btn {width:44px;min-height:44px;justify-content:center;align-items:center;}
 .mobile-nav {max-height:calc(100dvh - var(--header-h));overflow-y:auto;padding-bottom:max(16px,env(safe-area-inset-bottom));}
 .mobile-nav a {min-height:48px;display:flex;align-items:center;}
 .hero {padding:calc(var(--header-h) + 24px) 16px 32px;gap:24px;}
 .hero-tag {font-size:11px;margin-bottom:18px;}
 .hero-title {font-size:clamp(28px,8vw,36px);line-height:1.28;}
 .hero-desc {font-size:14px;line-height:1.8;margin-top:18px;}
 .hero-actions {gap:12px;margin-top:22px;}
 .hero-actions .btn {padding:13px 22px;min-height:48px;}
 .hero-stats {margin-top:26px;gap:24px;}
 .hero-stats dt {font-size:24px;}
 .hero-stats dd {font-size:11px;}
 .section {padding-block:48px;}
 .catalog-nav {flex-wrap:nowrap;overflow-x:auto;padding:5px 4px 12px;gap:8px;scrollbar-width:thin;}
 .catalog-nav a {flex-shrink:0;min-height:44px;padding:10px 14px;font-size:14px;}
 .catalog-heading {gap:12px;}
 .catalog-heading h3 {font-size:24px;}
 .catalog-heading p {font-size:13px;}
 .product-card .work-body {padding:18px;}
 .product-card .product-intro {font-size:14px;}
 .product-dialog {width:calc(100% - 16px);max-height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));border-radius:16px;}
 .demo-shell {padding:0 14px max(18px,env(safe-area-inset-bottom));}
 .demo-header {position:sticky;top:0;z-index:5;background:#10131cf5;align-items:center;padding:14px 0 12px;margin-bottom:12px;}
 .demo-header h2 {font-size:17px;overflow-wrap:anywhere;}
 .demo-header .section-label {font-size:11px;}
 .demo-stage {height:auto;aspect-ratio:4/3;min-height:0;}
 .demo-toolbar {gap:8px;}
 .demo-toolbar button {padding:8px 12px;}
 .demo-thumbnails {flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;}
 .demo-thumbnails button {flex-shrink:0;}
 .contact-form {padding:20px;}
 .contact-form input,.contact-form textarea,.contact-form select {font-size:16px;min-height:48px;}
 .wechat-card img {max-width:100%;height:auto;}
}
@media(max-height:500px) and (orientation:landscape) {
 .product-dialog {max-height:calc(100dvh - 12px);width:calc(100% - 24px);}
 .demo-shell {padding:12px;}
 .demo-header {margin-bottom:12px;}
 .demo-layout {grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;}
 .demo-stage {height:48dvh;min-height:120px;}
 .demo-close {position:fixed;right:20px;top:12px;}
 .demo-header {padding-right:52px;}
}
@media(hover:none) { .product-card:hover,.showcase-small:hover,.product-card:hover .product-cover img {transform:none;} }
/* Intentional headline lines and screenshot proportions. */
.hero-line {display:block;white-space:nowrap;}
.hero-conjunction {font-size:.65em;color:#a5afbe;vertical-align:middle;}
.hero-title {font-size:clamp(36px,3.8vw,56px);}
.showcase-bottom {grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);align-items:stretch;}
.showcase-small {min-width:0;}
.showcase-tool img {height:220px;object-fit:contain;background:#eef3f8;}
.showcase-portrait img {height:220px;object-fit:contain;background:linear-gradient(135deg,#253a27,#173a36);}
.showcase-small small {font-size:12px;line-height:1.5;}
@media(max-width:640px) {
 .hero-title {font-size:clamp(30px,8.6vw,40px);line-height:1.22;}
 .showcase-bottom {grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);}
 .showcase-tool img,.showcase-portrait img {height:160px;}
 .showcase-small>span {font-size:14px;}
 .showcase-small small {font-size:11px;}
 .product-card .product-features,.product-card .product-note,.product-card .product-status {display:none;}
 .product-card .product-intro {display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;line-height:1.65;}
  .product-card .work-body h3 {margin-bottom:8px;font-size:18px;}
 .product-card .work-body {padding:14px 16px;}
 .product-card .work-action {padding:0 16px 14px;}
 .product-card .work-action .btn {min-height:44px;}
 .product-cover {aspect-ratio:16/9;}
}
/* One product per frame: stable layout for portrait and landscape screenshots. */
.hero-carousel {display:block;min-width:0;width:100%;border:1px solid #ffffff20;border-radius:22px;background:#15212a;overflow:hidden;box-shadow:0 24px 70px #0005;}
.carousel-eyebrow {display:flex;justify-content:space-between;gap:12px;padding:16px 20px;color:#bce8d6;font-size:13px;}
.carousel-eyebrow span {color:#b6c3ce;}
.carousel-slides {touch-action:pan-y pinch-zoom;background:radial-gradient(ellipse at center,#264c48,#111d29);}
.carousel-slide {display:block;width:100%;border:0;padding:0;background:transparent;color:var(--text);text-align:left;cursor:pointer;font:inherit;}
.carousel-slide[hidden] {display:none;}
.carousel-slide img {display:block;width:100%;height:clamp(260px,29vw,420px);object-fit:contain;user-select:none;-webkit-user-drag:none;animation:picture-in .35s ease-out;}
.carousel-caption {display:block;padding:18px 20px;background:#15212a;}
.carousel-caption strong {display:block;font-size:24px;}
.carousel-caption small {display:block;color:#b6c3ce;font-size:13px;margin-top:6px;}
.carousel-controls {display:flex;align-items:center;gap:8px;padding:14px 16px 16px;border-top:1px solid #ffffff1a;}
.carousel-controls button {min-height:44px;min-width:44px;border:1px solid #526475;border-radius:9px;background:#1d303b;color:#eef5fa;padding:8px 12px;font:inherit;font-size:13px;touch-action:manipulation;cursor:pointer;}
.carousel-controls button:hover {border-color:var(--accent);color:var(--accent);}
.carousel-pause {margin-left:auto;}
.carousel-pause.is-paused {border-color:var(--accent-warm);color:var(--accent-warm);}
.carousel-count {white-space:nowrap;font-size:12px;color:#c6d5df;padding:0 4px;}
.carousel-slide:focus-visible {outline:3px solid var(--accent);outline-offset:-4px;}
@media(max-width:640px) { .hero-carousel {order:0;} .carousel-slide img {height:260px;} .carousel-caption {padding:14px 16px;} .carousel-caption strong {font-size:20px;} .carousel-controls {flex-wrap:wrap;padding:12px;gap:6px;} .carousel-pause {margin-left:0;flex:1 1 100%;} }
@media(prefers-reduced-motion:reduce) { .carousel-slide img {animation:none;} }
/* Consistent screenshot framing, with full portrait content preserved. */
.product-cover {background:radial-gradient(ellipse at center,#253b45,#111923);padding:12px;}
.product-cover img {border-radius:6px;object-fit:contain;}
.product-cover.media-portrait img {filter:drop-shadow(0 8px 14px #0005);}
.carousel-slide img {padding:12px;}
.carousel-slide.media-portrait img {padding:14px 0;filter:drop-shadow(0 8px 18px #0006);}
.carousel-slide.media-explainer img {padding:20px;background:#18252d;}
.hero {row-gap:26px;}
.hero-content {grid-column:1;grid-row:1;align-self:end;}
.hero>.hero-stats {grid-column:1;grid-row:2;margin-top:0;align-self:start;padding-top:8px;}
.hero-carousel {grid-column:2;grid-row:1 / 3;align-self:center;}
@media(max-width:960px) {
 .hero-content,.hero-carousel,.hero>.hero-stats {grid-column:1;grid-row:auto;}
 .hero-content {order:0;}
 .hero-carousel {order:1;}
 .hero>.hero-stats {order:2;justify-content:center;padding:8px 0;margin:0;}
}
@media(max-width:640px) {
 .hero {gap:20px;}
 .hero-desc {margin-bottom:0;}
 .hero-actions {margin-bottom:0;}
 .hero>.hero-stats {border-top:1px solid var(--border);padding-top:20px;}
 .carousel-slide img {height:230px;padding:8px;}
 .carousel-slide.media-portrait img {padding:8px 0;}
 .carousel-slide.media-explainer img {padding:8px;}
 .product-cover {padding:8px;}
}

/* Product-first navigation and category selection. */
.catalog-group[hidden], .mobile-nav[hidden] { display:none !important; }
.nav a[aria-current="true"], .mobile-nav a[aria-current="true"] { color:var(--accent); }
.nav a[aria-current="true"] { box-shadow:0 2px 0 var(--accent); }
.catalog-nav a[aria-current="true"] { background:#183c32; border-color:#5ac9a1; color:#aff7d9; }
.catalog-result { color:var(--text-muted);font-size:13px;margin:0 0 16px;min-height:20px; }
.catalog-nav { position:sticky;top:calc(var(--header-h) + 8px);z-index:8;background:#10171ef5;padding:12px;border:1px solid var(--border);border-radius:16px;backdrop-filter:blur(16px);margin-bottom:24px; }
.catalog-group { scroll-margin-top:calc(var(--header-h) + 100px); }
.cover-miniapp { background:linear-gradient(120deg,#183049,#152332);color:#93c5fd; }
#work { background:linear-gradient(180deg,#101820,#0e141b); }
#work .section-head { margin-bottom:24px; }
.product-card { transition:border-color .2s,transform .2s; }
.product-card:hover { border-color:#638c7d;transform:translateY(-3px); }
.hero { min-height:650px; }
.hero-carousel { box-shadow:0 18px 60px #0004; }
@media(max-width:640px) {
 .catalog-nav { top:calc(var(--header-h) + 4px);padding:8px;gap:6px;border-radius:12px; }
 .catalog-nav a { padding:8px 12px;font-size:13px;gap:7px; }
 .catalog-group { scroll-margin-top:calc(var(--header-h) + 92px); }
 .hero { min-height:0; }
}
@media(prefers-reduced-motion:reduce) { .product-card { transition:none; } }

/* Concrete capabilities, grouped by the product work they support. */
.stack-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.stack-group {padding:26px;border:1px solid var(--border);border-radius:16px;background:var(--bg-card);}
.stack-group h3 {font-size:18px;color:var(--text);margin-bottom:10px;}
.stack-group>p {font-size:13px;color:var(--text-muted);line-height:1.8;margin-bottom:20px;}
.stack-items {gap:8px;flex-direction:row;flex-wrap:wrap;}
.stack-items span {font-size:12px;line-height:1.6;overflow-wrap:anywhere;}
.stack-note {font-size:12px;color:var(--text-muted);margin-top:24px;line-height:1.8;}
@media(max-width:960px){.stack-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:640px){.stack-grid{grid-template-columns:1fr;}.stack-group{padding:22px;}}

/* AI tools describe the workflow separately from the implementation stack. */
.ai-development {display:grid;grid-template-columns:1fr 2fr;gap:28px;margin-top:24px;padding:28px;border:1px solid var(--border);border-radius:16px;background:linear-gradient(110deg,#17352b66,#171c2866);align-items:center;}
.ai-development .section-label {font-size:11px;margin-bottom:8px;}
.ai-development h3 {font-size:21px;margin:0;}
.ai-development p {color:var(--text-muted);font-size:14px;line-height:1.8;margin:14px 0 0;}
@media(max-width:640px){.ai-development{grid-template-columns:1fr;gap:18px;padding:22px;}}

/* Language control integrated with the original dark theme. */
.header{gap:20px}.nav{margin-left:auto}.language-control{flex-shrink:0}.language-control select{font:inherit;font-size:12px;min-height:38px;padding:8px 10px;border:1px solid #48566b;border-radius:8px;background:#18222e;color:#e8eaef;cursor:pointer}.hero-line{white-space:normal}html[lang="en"] .hero-title{font-size:clamp(35px,3.7vw,54px)}html[lang="en"] .hero-line:nth-child(3){font-size:.75em;margin-top:12px}.stack-group h3{text-transform:none;letter-spacing:0}.product-dialog .demo-info{min-width:0}.demo-info .btn{white-space:normal}
@media(max-width:960px){.nav{gap:18px}.header{gap:14px}}
@media(max-width:760px){.nav{display:none}.menu-btn{display:flex}.language-control{margin-left:auto}}
@media(max-width:640px){.header{gap:10px}.logo{font-size:15px}.logo-mark{font-size:12px}.language-control select{max-width:89px}html[lang="en"] .hero-title{font-size:35px}.carousel-controls{flex-wrap:wrap}}
/* Product Design: guided collection, selected visual direction 3. */
:root{--container:min(1320px,100% - 80px);--text-muted:#a9b2bf;--border:#293238;--gradient-app:#6ee7b7;--gradient-game:#6ee7b7}.hero{grid-template-columns:.9fr 1.15fr;min-height:0;padding-top:56px;padding-bottom:48px;gap:64px}.hero-bg{display:none}.hero-title,html[lang="en"] .hero-title{font-size:clamp(44px,4.8vw,68px);line-height:1.14;letter-spacing:-2px}.hero-line{white-space:normal}.hero-line:nth-child(2){color:var(--accent)}.gradient-text{-webkit-text-fill-color:currentColor;background:none;color:var(--accent)}.hero-tag{border:0;background:none;padding:0;margin-bottom:24px}.hero-desc{font-size:16px;max-width:480px;line-height:1.85}.hero-actions{margin-top:28px}.btn{border-radius:7px;box-shadow:none}.btn-primary{background:var(--accent);color:#10241c}.hero-carousel{background:transparent;border:0;border-radius:0;box-shadow:none;padding:0;min-width:0}.carousel-eyebrow{display:none}.carousel-slide{border:1px solid var(--border);border-radius:8px;overflow:hidden;background:#172028}.carousel-slide img{object-fit:contain;max-height:390px}.carousel-caption{background:transparent;padding:14px 0}.carousel-caption strong{font-size:16px}.carousel-caption small{font-size:12px}.carousel-controls{border:0;justify-content:flex-start;padding:12px 0;gap:14px}.carousel-controls button{width:auto;min-width:36px;border-radius:6px;box-shadow:none}.hero>.hero-stats{display:none}.section{padding-block:64px}.section-head h2{font-size:36px}.work-grid{display:block}.work-card.product-card{display:grid;grid-template-columns:.85fr 1.2fr;grid-template-rows:1fr auto;column-gap:56px;background:transparent;border:0;border-top:1px solid var(--border);border-radius:0;padding:32px 0;box-shadow:none;transform:none}.product-card:hover{background:transparent;transform:none;box-shadow:none}.product-cover{grid-column:2;grid-row:1/3;border:1px solid var(--border);background:#172028;border-radius:8px;min-height:0;height:340px;padding:18px;align-self:center}.product-cover img{object-fit:contain;width:100%;height:100%}.cover-label{display:none}.work-body{grid-column:1;grid-row:1;padding:0}.work-body h3{font-size:30px;margin-top:10px}.product-platform{font-size:12px;color:var(--accent)}.product-intro{font-size:15px;line-height:1.85}.product-features{font-size:14px;line-height:1.8}.product-note{font-size:13px;line-height:1.8}.work-action{grid-column:1;grid-row:2;padding:20px 0 0;border:0}.work-action .btn-full{width:auto;padding:12px 20px;font-size:14px}.catalog-nav a{border-radius:5px}.catalog-heading{padding-block:24px}.catalog-heading h3{font-size:26px}.section-dark{background:#101815}.about-card,.stack-group,.service-card{box-shadow:none}.about-icon{display:none}.section-label{color:var(--accent)}a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}@media(max-width:760px){:root{--container:calc(100% - 36px)}.hero{grid-template-columns:1fr;gap:28px;padding-top:32px}.hero-title,html[lang="en"] .hero-title{font-size:44px;letter-spacing:-1.3px}.hero-carousel{width:100%}.carousel-slide img{height:auto;max-height:320px}.section{padding-block:44px}.work-card.product-card{grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:20px}.work-body{grid-column:1;grid-row:1}.work-action{grid-column:1;grid-row:2;padding:0}.product-cover{grid-column:1;grid-row:3;height:auto;min-height:200px;max-height:380px}.product-cover img{height:auto;max-height:340px}.work-body h3{font-size:26px}.catalog-nav{flex-wrap:wrap}.section-head h2{font-size:30px}}
.hero{padding:calc(var(--header-h) + 36px) 40px 40px}.hero-content{align-self:center}.hero-carousel{align-self:center}.hero-tag .pulse{display:none}.product-card .work-body{padding:0;align-self:center}.product-card .work-body h3{font-size:30px}.product-card .product-intro{display:block;overflow:visible;-webkit-line-clamp:unset;font-size:15px;line-height:1.85}.product-card .product-features,.product-card .product-note,.product-card .product-status{display:block}.product-card .work-action{padding:20px 0 0}.product-cover{aspect-ratio:auto}.catalog-nav{background:transparent;border:0;padding:0}.section-head{text-align:left}.carousel-slide.media-landscape img{width:100%;height:auto;object-fit:contain}.carousel-caption{position:static}.carousel-pause{margin-left:0}@media(max-width:760px){.hero{padding:calc(var(--header-h) + 28px) 18px 32px}.product-card .work-body h3{font-size:26px}.product-card .work-action{padding:0}.product-card .product-note{font-size:12px}}