/* ============================================================
   寻游互娱官网 — 公共样式 v0.6.10
   对标 Team17 灵动风格 + 寻游红 #D8261C
   - 字体: Outfit + Noto Sans SC + JetBrains Mono
   - 配色: red-50→700 + ink-50→950
   - 大图 hero (满屏 100vh 5 张横铺居中放大)
   - 跑马灯 + 6 业务卡 (hover 变红) + 紫色 FEATURED + 社交
   ============================================================ */

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

:root {
  --red-50:  #FFF1F0;
  --red-100: #FFE0DC;
  --red-300: #FF7A6E;
  --red-500: #D8261C;
  --red-600: #B81E15;
  --red-700: #921810;
  --ink-50:  #FAFAFA;
  --ink-100: #F4F4F5;
  --ink-200: #E4E4E7;
  --ink-300: #D4D4D8;
  --ink-400: #A1A1AA;
  --ink-500: #71717A;
  --ink-600: #52525B;
  --ink-700: #3F3F46;
  --ink-800: #27272A;
  --ink-900: #18181B;
  --ink-950: #0A0A0B;
  --font-display: 'Outfit', 'Noto Sans SC', sans-serif;
  --font-body: 'Noto Sans SC', 'Outfit', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--ink-900);
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }

/* ===== 0. Sticky 导航 ===== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 20px 0;
  transition: all 0.4s var(--ease-out-expo);
  background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
}
.site-header.scrolled {
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  padding: 14px 0;
  box-shadow: 0 1px 0 var(--ink-200);
}
.site-header .inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.logo { display: flex; align-items: center; gap: 14px; transition: transform 0.3s var(--ease-out-expo); }
.logo:hover { transform: scale(1.04); }
.logo .logo-red, .logo .logo-orange {
  width: auto;
  transition: filter 0.4s;
}
/* 两张源图都已裁到有效像素边界；寻游字标造型留白感更强，做视觉等高补偿。 */
.logo .logo-red { height: 40px; }
.logo .logo-orange { height: 36px; }
.site-header.scrolled .logo .logo-orange,
.games-page + .site-footer .logo-orange { filter: brightness(0) saturate(100%) invert(19%) sepia(92%) saturate(3437%) hue-rotate(356deg) brightness(92%) contrast(95%); }
.site-header:not(.scrolled) .logo .logo-red,
.site-header:not(.scrolled) .logo .logo-orange { filter: brightness(0) invert(1); }

.nav { display: flex; align-items: center; gap: 36px; margin-left: auto; margin-right: 24px; }
.nav a {
  font-size: 14px; font-weight: 600;
  color: #fff; position: relative; padding: 6px 0;
  transition: color 0.2s;
}
.site-header.scrolled .nav a { color: var(--ink-900); }
.nav a:hover { color: var(--red-500); }
.nav a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 2px; background: var(--red-500);
  border-radius: 2px;
  animation: navUnderline 0.4s var(--ease-out-expo);
}
@keyframes navUnderline { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.lang-switcher { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border: 1.5px solid rgba(255,255,255,0.4);
  border-radius: 24px;
  color: #fff;
  font-size: 13px; font-weight: 600;
  background: transparent; transition: all 0.2s;
}
.site-header.scrolled .lang-btn { border-color: var(--ink-300); color: var(--ink-900); }
.lang-btn:hover { border-color: var(--red-500); color: var(--red-500); }
.lang-arrow { width: 14px; height: 14px; }
.lang-menu {
  position: absolute; top: calc(100% + 12px); right: 0;
  background: #fff; border: 1px solid var(--ink-200);
  border-radius: 12px; padding: 8px 0; min-width: 160px;
  list-style: none; margin: 0;
  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
  opacity: 0; visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.25s var(--ease-out-expo);
}
.lang-switcher.open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; font-size: 13px; color: var(--ink-900);
  transition: background 0.15s;
}
.lang-menu a:hover { background: var(--ink-100); color: var(--red-500); }
.lang-menu a.active { color: var(--red-500); font-weight: 700; }
.lang-flag { font-size: 18px; line-height: 1; }

/* ===== 1. HERO — Team17 风格 3 张大图横铺占满首屏 ===== */
.hero {
  position: relative;
  height: 100vh; min-height: 760px;
  background: linear-gradient(135deg, #FF6B35 0%, #D8261C 50%, #F97316 100%);
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 90% 70% at 25% 30%, rgba(255, 200, 80, 0.45), transparent 60%),
    radial-gradient(ellipse 70% 80% at 75% 70%, rgba(255, 110, 50, 0.4), transparent 60%);
  z-index: 0;
  animation: heroBgShift 14s ease-in-out infinite alternate;
}
@keyframes heroBgShift {
  0%   { filter: hue-rotate(0deg)   saturate(1); }
  100% { filter: hue-rotate(-10deg) saturate(1.1); }
}
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 80px 80px;
  z-index: 0;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 85%);
}
.hero-track {
  position: relative; z-index: 1;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  height: 100%;
  width: 100%;
  padding: 0;
  gap: 0;
}
/* Team17 风格: 三张默认 flex:1 平均分布, 点击 active 那张 flex:1.8 放大 */
.hero-slide {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  transition: flex 0.7s var(--ease-out-expo), filter 0.55s ease, opacity 0.5s var(--ease-out-expo);
  filter: brightness(0.48) saturate(0.72);
  box-shadow: inset 0 -220px 200px -100px rgba(0,0,0,0.55);
}
.hero-slide[data-pos="0"] {
  flex: 1.8 1 0;
  z-index: 3;
  filter: brightness(1) saturate(1);
}
.hero-slide[data-pos="idle"] {
  flex: 1 1 0;
  z-index: 2;
}
.hero-game-logo {
  position: absolute; z-index: 3;
  top: 13%; left: 50%;
  width: min(64%, 520px); max-height: 220px;
  object-fit: contain;
  transform: translate(-50%, -24px) scale(0.72);
  opacity: 0;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.48));
  transition: opacity .45s ease, transform .65s var(--ease-out-expo);
  pointer-events: none;
}
.hero-slide[data-pos="0"] .hero-game-logo {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
.hero-slide::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.55) 75%, rgba(0,0,0,0.85) 100%);
  z-index: 1;
  pointer-events: none;
}
.hero-info {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 50px 36px 36px; z-index: 2;
  transform: translateY(0);
  transition: transform 0.5s var(--ease-out-expo);
  display: flex; flex-direction: column; align-items: flex-start;
}
.hero-slide:not([data-pos="0"]) .hero-info { transform: translateY(12px); }
.hero-top-row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.hero-status {
  display: inline-flex; align-items: center;
  padding: 5px 12px;
  border-radius: 14px;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff;
}
.hero-status.out-now { background: #00C896; }
.hero-status.coming-soon { background: #FFC107; color: #1a1a1a; }
.hero-genre {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
.hero-genre::before { content: "·"; margin-right: 8px; opacity: 0.6; }
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 36px);
  font-weight: 900;
  margin: 0 0 0;
  letter-spacing: -0.025em;
  line-height: 1.05;
  text-transform: uppercase;
}
.hero-slide[data-pos="0"] .hero-title {
  font-size: clamp(32px, 3.6vw, 56px);
}
.hero-subtitle {
  display: none;
  font-size: 13px; font-weight: 500;
  opacity: 0.85;
  margin: 12px 0 18px; line-height: 1.5;
  max-width: 520px;
}
.hero-slide[data-pos="0"] .hero-subtitle { display: block; }
.hero-platforms {
  display: none;
  gap: 6px; margin-bottom: 14px;
}
.hero-slide[data-pos="0"] .hero-platforms { display: flex; }
.hero-platform {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  backdrop-filter: blur(8px);
}
.hero-platform svg { width: 16px; height: 16px; fill: currentColor; }
.platform-logo {
  width: 100%; height: 100%; display: block; object-fit: contain;
}
.hero-platform .platform-logo,
.featured-card-platforms .platform-logo { filter: brightness(0) invert(1); }
label:has(input[data-multi]:checked) .platform-logo {
  filter: brightness(0) saturate(100%) invert(20%) sepia(95%) saturate(3710%) hue-rotate(357deg) brightness(99%) contrast(82%);
}
.hero-cta-row {
  display: none;
  gap: 10px; flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}
.hero-slide[data-pos="0"] .hero-cta-row { display: flex; }
.hero-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 28px;
  border-radius: 30px;
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  transition: all 0.3s var(--ease-out-expo);
  cursor: pointer;
  border: 1.5px solid transparent;
}
.hero-cta-go {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.9);
}
.hero-cta-go:hover { background: #fff; color: var(--ink-900); }
.hero-cta-buy {
  background: #fff; color: var(--ink-900);
}
.hero-cta-buy:hover { background: var(--red-500); color: #fff; }
.hero-play {
  display: none;
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 96px; height: 96px;
  border-radius: 50%;
  background: #fff;
  align-items: center; justify-content: center;
  color: var(--red-500);
  z-index: 3;
  cursor: pointer;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
  transition: all 0.3s;
}
.hero-slide[data-pos="0"] .hero-play { display: flex; }
.hero-play::before {
  content: ""; width: 0; height: 0;
  border-left: 22px solid currentColor;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  margin-left: 6px;
}
.hero-play::after {
  content: ""; position: absolute; inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.6);
  animation: ripple 2.2s infinite;
}
@keyframes ripple { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.hero-play:hover { transform: translate(-50%, -50%) scale(1.1); }
.hero-nav {
  position: absolute; top: 50%; left: 0; right: 0;
  display: flex; justify-content: space-between;
  padding: 0 24px;
  transform: translateY(-50%);
  z-index: 5;
  pointer-events: none;
}
.hero-arrow {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(0,0,0,0.4);
  border: 1.5px solid rgba(255,255,255,0.4);
  color: #fff;
  font-size: 22px; font-weight: 300;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  backdrop-filter: blur(10px);
  transition: all 0.25s;
}
.hero-arrow:hover { background: var(--red-500); border-color: var(--red-500); transform: scale(1.1); }
.hero-progress {
  position: absolute; bottom: 24px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 8px;
  z-index: 5;
}
.hero-dot {
  width: 28px; height: 3px;
  background: rgba(255,255,255,0.3);
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.4s var(--ease-out-expo);
}
.hero-dot.active { background: var(--red-500); width: 48px; }
.hero-scroll {
  position: absolute; top: 50%; right: 24px;
  color: rgba(255,255,255,0.6);
  font-size: 10px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase;
  z-index: 4;
  writing-mode: vertical-rl;
  display: flex; align-items: center; gap: 12px;
  transform: translateY(-50%);
}
.hero-scroll::before {
  content: ""; width: 1px; height: 36px;
  background: linear-gradient(0deg, rgba(255,255,255,0.6), transparent);
  animation: scrollDown 1.8s ease-in-out infinite;
}
@keyframes scrollDown {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  50.1% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ===== 2. 跑马灯 ===== */
.marquee {
  background: var(--ink-950); color: #fff;
  padding: 32px 0;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.marquee-track {
  display: flex; gap: 64px;
  animation: marquee 30s linear infinite;
  white-space: nowrap;
  align-items: center;
}
.marquee-track span {
  font-family: var(--font-display);
  font-size: 32px; font-weight: 800;
  letter-spacing: -0.02em;
  display: inline-flex; align-items: center; gap: 32px;
}
.marquee-track span::after { content: "✦"; color: var(--red-500); font-size: 24px; }
.marquee-track em { font-style: normal; color: var(--red-500); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ===== 3. Services (6 业务卡) ===== */
.services {
  padding: 140px 0 100px;
  background: #fff;
  position: relative;
  overflow: hidden;
}
.services::before {
  content: ""; position: absolute; top: -100px; right: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, var(--red-50), transparent 70%);
  z-index: 0;
}
.services-head {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px;
  align-items: end; margin-bottom: 64px; position: relative; z-index: 1;
}
.services-head h2 {
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 800; line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink-950);
}
.services-head h2 em { font-style: normal; color: var(--red-500); }
.services-head p { font-size: 17px; line-height: 1.6; color: var(--ink-500); }
.services-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; position: relative; z-index: 1;
}
.service-card {
  position: relative;
  padding: 36px 28px 32px;
  background: #fff;
  border: 1.5px solid var(--ink-200);
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.4s var(--ease-out-expo);
  cursor: pointer;
  text-decoration: none;
  color: var(--ink-900);
}
.service-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 0;
  background: linear-gradient(135deg, var(--red-500), var(--red-700));
  transition: height 0.5s var(--ease-out-expo);
  z-index: 0;
}
.service-card:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: 0 24px 60px rgba(216, 38, 28, 0.18);
}
.service-card:hover::before { height: 100%; }
.service-card > * { position: relative; z-index: 1; transition: color 0.4s; }
.service-card:hover .service-icon { background: rgba(255,255,255,0.2); color: #fff; }
.service-card:hover .service-title,
.service-card:hover .service-desc { color: #fff; }
.service-card:hover .service-arrow { background: #fff; color: var(--red-500); }
.service-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  background: var(--red-50);
  color: var(--red-500);
  border-radius: 14px;
  margin-bottom: 20px;
  transition: all 0.4s;
}
.service-icon svg { width: 28px; height: 28px; }
.service-title {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700;
  margin-bottom: 8px;
}
.service-desc {
  font-size: 14px; line-height: 1.6;
  color: var(--ink-500);
  margin-bottom: 20px;
}
.service-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: var(--ink-100); color: var(--ink-900);
  border-radius: 50%;
  transition: all 0.4s;
}
.service-arrow svg { width: 16px; height: 16px; }

/* ===== 4. FEATURED GAMES (红色 wave + 1 列卡片) ===== */
.featured {
  position: relative;
  background: #fff;
  padding: 0 0 100px;
  overflow: hidden;
}
.featured-wave {
  position: relative;
  height: 320px;
  background: linear-gradient(135deg, #D8261C 0%, #B81E15 50%, #921810 100%);
  clip-path: ellipse(120% 100% at 50% 0%);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  color: #fff;
  text-align: center;
  padding: 40px 24px 80px;
}
.featured-wave::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 80% at 30% 30%, rgba(255,255,255,0.1), transparent),
    radial-gradient(ellipse 50% 80% at 70% 70%, rgba(255,255,255,0.06), transparent);
  pointer-events: none;
}
.featured-wave h2 {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 88px);
  font-weight: 900; letter-spacing: -0.03em; line-height: 1;
  text-transform: uppercase;
  margin: 0; position: relative;
}
.featured-wave .featured-sub {
  font-size: 16px; opacity: 0.7; margin-top: 12px;
  letter-spacing: 0.05em; position: relative;
}
.featured-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1280px;
  margin: -60px auto 0; padding: 0 32px;
}
.featured-card {
  position: relative;
  display: block;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  background: #1a1a1a;
  transition: all 0.4s var(--ease-out-expo);
  aspect-ratio: 3/4;
}
.featured-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
.featured-card-cover {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center top;
  background-color: #1a1a1a;
  transition: transform 0.6s var(--ease-out-expo);
}
.featured-card:hover .featured-card-cover { transform: scale(1.05); }
.featured-card-cover::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.10) 0%,
    rgba(0,0,0,0) 35%,
    rgba(0,0,0,0) 55%,
    rgba(0,0,0,0.75) 85%,
    rgba(0,0,0,0.92) 100%);
  pointer-events: none;
  z-index: 1;
}
.featured-status {
  position: absolute; top: 16px; left: 16px;
  z-index: 3;
  display: inline-flex; align-items: center;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.featured-status.out-now { background: rgba(0,200,150,0.95); }
.featured-status.coming-soon { background: rgba(255,193,7,0.95); color: #1a1a1a; }
.featured-status.new { background: rgba(255,80,80,0.95); }
.featured-card-content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 20px 22px 22px;
  display: flex; flex-direction: column;
}
.featured-card-title {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 800;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.featured-card-genres {
  font-size: 12px; font-weight: 500;
  color: rgba(255,255,255,0.85);
  margin: 0 0 10px;
  line-height: 1.4;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.featured-card-platforms {
  display: flex; gap: 8px;
  margin: 0 0 14px;
}
.featured-card-platforms .pf-icon {
  width: 22px; height: 22px;
  color: #fff;
  opacity: 0.9;
  display: inline-flex; align-items: center; justify-content: center;
}
.featured-card-platforms .pf-icon svg { width: 18px; height: 18px; fill: currentColor; }
.featured-card-platforms .pf-icon .platform-logo { width: 20px; height: 20px; }
.featured-card-actions {
  display: flex; gap: 8px;
  margin-top: 4px;
  justify-content: center;
}
.featured-card-btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 24px;
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.featured-card-btn.primary {
  background: #0a0a0a; color: #fff;
}
.featured-card-btn.primary:hover { background: var(--red-500); }
.featured-card-btn.ghost {
  background: transparent; color: #7C3AED;
  border: 1.5px solid rgba(255,255,255,0.4);
  color: #fff;
}
.featured-card-btn.ghost:hover { border-color: #fff; background: rgba(255,255,255,0.1); }
.featured-card-btn:only-child { flex: 1; }

.featured-nav {
  display: flex; align-items: center; justify-content: center;
  gap: 20px; margin-top: 48px;
}
.featured-arrow {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--ink-200);
  color: var(--ink-900);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.25s;
  font-size: 20px;
}
.featured-arrow:hover { background: var(--ink-950); color: #fff; border-color: var(--ink-950); }
.featured-indicator {
  font-family: var(--font-mono);
  font-size: 14px; font-weight: 600;
  color: var(--ink-500);
  min-width: 64px; text-align: center;
}
.view-all {
  display: block; width: max-content; margin: 80px auto 0;
  padding: 16px 36px;
  background: var(--ink-950); color: #fff;
  border-radius: 30px;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  transition: all 0.3s;
}
.view-all:hover { background: var(--red-500); transform: translateY(-2px); }

/* ===== 5. submit-game 入口 ===== */
.submit-entry {
  padding: 100px 0;
  background: var(--ink-50);
  position: relative;
  overflow: hidden;
}
.submit-entry-inner {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  align-items: center;
  background: #fff;
  border: 1.5px solid var(--ink-200);
  border-radius: 24px;
  padding: 60px 60px;
  position: relative;
  overflow: hidden;
}
.submit-entry-inner::before {
  content: ""; position: absolute;
  top: -50%; right: -10%;
  width: 60%; height: 200%;
  background: radial-gradient(ellipse, var(--red-50), transparent 60%);
  pointer-events: none;
}
.submit-entry-text { position: relative; z-index: 1; }
.submit-entry h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 800;
  line-height: 1.15; letter-spacing: -0.02em;
  color: var(--ink-950);
  margin: 0 0 20px;
}
.submit-entry h2 em { font-style: normal; color: var(--red-500); }
.submit-entry p {
  font-size: 16px; line-height: 1.7;
  color: var(--ink-500);
  margin: 0 0 32px;
}
.submit-entry-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 16px 36px;
  background: var(--ink-950); color: #fff;
  border-radius: 30px;
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  transition: all 0.3s;
}
.submit-entry-cta:hover { background: var(--red-500); transform: translateX(4px); }
.submit-entry-image {
  position: relative; z-index: 1;
  aspect-ratio: 1/1;
  max-width: 480px;
  background: transparent;
  border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: visible;
  border: none;
  margin-left: auto;
}
.submit-entry-image img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.18));
}
.submit-entry-image-grid {
  display: none;
}
.image-tile {
  background: #fff; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: var(--red-500);
  font-family: var(--font-display);
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* ===== 6. 社交媒体 ===== */
.social {
  padding: 80px 0 100px;
  background: #fff;
  text-align: center;
}
.social-logo {
  display: inline-block;
  background: var(--red-500);
  padding: 12px 28px;
  border-radius: 10px;
  margin-bottom: 24px;
}
.social-logo img {
  height: 32px; width: auto;
  filter: brightness(0) invert(1);
}
.social h3 {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 700;
  margin: 0 0 36px;
  color: var(--ink-900);
}
.social-icons {
  display: flex; flex-wrap: wrap;
  justify-content: center; gap: 20px;
  max-width: 760px; margin: 0 auto;
}
.social-icons .social-item {
  width: 72px; height: 72px;
  border-radius: 50%;
  border: 2px solid var(--ink-200);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-700);
  background: #fff;
  transition: all 0.3s var(--ease-out-expo);
}
.social-icons a.social-item:hover {
  border-color: var(--red-500);
  background: var(--red-500);
  color: #fff;
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 12px 28px rgba(216, 38, 28, 0.25);
}
.social-icons svg { width: 30px; height: 30px; fill: currentColor; }
.social-icons .social-item.no-link { cursor: default; }
.social-icons .xunyou-social-mark {
  width: 32px;
  height: 32px;
  display: block;
  object-fit: contain;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* v0.7.1 — clearer Team17-style hero information and logo reveal. */
.hero-slide {
  filter: none;
  transition: flex .78s var(--ease-out-expo), opacity .5s var(--ease-out-expo);
}
.hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(5, 7, 11, .52);
  transition: background .7s ease;
}
.hero-slide[data-pos="0"]::before { background: rgba(5, 7, 11, .08); }
.hero-slide::after {
  background: linear-gradient(180deg, rgba(0,0,0,0) 28%, rgba(0,0,0,.1) 48%, rgba(0,0,0,.72) 78%, rgba(0,0,0,.96) 100%);
}
.hero-game-logo {
  top: 12%;
  width: min(72%, 600px);
  max-height: 250px;
  opacity: 0;
  transform: translate(-50%, -38px) scale(.3);
  transition: opacity .72s ease .08s, transform 1s var(--ease-out-expo) .04s;
}
.hero-slide[data-pos="0"] .hero-game-logo {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
.hero-info {
  padding: 54px 34px 42px;
  transform: none;
  color: #fff;
}
.hero-slide:not([data-pos="0"]) .hero-info { transform: none; }
.hero-status {
  padding: 7px 18px;
  margin-bottom: 18px;
  border-radius: 18px;
  color: #111;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
}
.hero-status.out-now { background: #eaf500; color: #111; }
.hero-status.coming-soon { background: #35e3b2; color: #111; }
.hero-genre {
  margin-bottom: 13px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-shadow: 0 2px 8px rgba(0,0,0,.9);
}
.hero-genre::before { display: none; }
.hero-platforms {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.hero-platform {
  width: 23px;
  height: 23px;
  border-radius: 4px;
  background: transparent;
}
.hero-title,
.hero-slide[data-pos="0"] .hero-title {
  margin: 0;
  color: #fff;
  font-size: clamp(25px, 2.5vw, 42px);
  line-height: 1.08;
  text-shadow: 0 4px 16px rgba(0,0,0,.9), 0 1px 2px #000;
}
.hero-slide[data-pos="0"] .hero-title { font-size: clamp(34px, 3.5vw, 58px); }
.hero-subtitle {
  color: #fff;
  opacity: 1;
  text-shadow: 0 2px 8px rgba(0,0,0,.95);
}
.hero-cta-row { justify-content: stretch; }
.hero-cta { width: 100%; justify-content: center; }
.hero-nav, .hero-progress { display: none; }

/* v0.7.2 — raise/enlarge idle information; remove the active bottom veil. */
.hero-slide[data-pos="idle"] .hero-info {
  bottom: 7vh;
  padding: 42px 38px 40px;
}
.hero-slide[data-pos="idle"] .hero-status {
  padding: 8px 20px;
  font-size: 13px;
  margin-bottom: 20px;
}
.hero-slide[data-pos="idle"] .hero-genre {
  font-size: 13px;
  margin-bottom: 15px;
}
.hero-slide[data-pos="idle"] .hero-platform {
  width: 25px;
  height: 25px;
}
.hero-slide[data-pos="idle"] .hero-title {
  font-size: clamp(29px, 2.8vw, 46px);
}
.hero-slide[data-pos="0"]::after {
  background: transparent;
}
.hero-slide[data-pos="0"]::before {
  background: transparent;
}
.hero-slide[data-pos="0"] .hero-info {
  bottom: 4vh;
  padding-bottom: 34px;
}
.social-icons a.social-item:hover .xunyou-social-mark { filter: brightness(0) invert(1); }
/* Wordmarks are naturally wider, so give them enough width to match the
   perceived area of the square symbols without making the row uneven. */
.social-icons .social-bilibili,
.social-icons .social-xiaohongshu { width: 43px; height: 34px; }
.social-icons .social-kuaishou { width: 31px; height: 36px; }

/* Admin social-link sorter */
.social-editor-head,
.social-editor-row {
  display: grid;
  grid-template-columns: 42px 140px minmax(220px, 1fr) 100px;
  gap: 12px;
  align-items: center;
}
.social-editor-head {
  padding: 0 10px 10px;
  border-bottom: 2px solid var(--ink-200);
  color: var(--ink-500);
  font-size: 12px;
  font-weight: 700;
}
.social-editor-row {
  padding: 14px 10px;
  border-bottom: 1px solid var(--ink-200);
  background: #fff;
  transition: background .15s, box-shadow .15s;
}
.social-editor-row[draggable="true"] { cursor: grab; }
.social-editor-row.dragging { opacity: .45; }
.social-editor-row.drag-over { box-shadow: inset 0 3px 0 var(--red-500); background: var(--red-50); }
.social-drag-handle { color: var(--ink-400); font-size: 22px; line-height: 1; text-align: center; user-select: none; }
.social-editor-row input[type="url"] { width: 100%; padding: 9px 11px; border: 1.5px solid var(--ink-200); border-radius: 6px; font-size: 13px; }
.social-editor-row input[type="url"]:focus { outline: none; border-color: var(--red-500); }
.social-editor-enabled { display:flex; align-items:center; gap:6px; cursor:pointer; }
.social-editor-enabled input { width:18px; height:18px; cursor:pointer; }
.social-editor-actions { display:flex; justify-content:flex-end; padding-top:20px; }
.social-save-all { min-width: 160px; }

/* ===== 7. Footer ===== */
.site-footer {
  background: var(--ink-950); color: var(--ink-400);
  padding: 48px 0 32px;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.footer-top {
  display: flex; align-items: center; justify-content: center;
  gap: 32px; margin-bottom: 32px;
  font-size: 13px;
}
.footer-top a { color: var(--ink-300); transition: color 0.2s; }
.footer-top a:hover { color: var(--red-500); }
.footer-copyright { font-size: 12px; }
.footer-icp { margin-top: 8px; font-size: 12px; }
.footer-icp a { color: inherit; transition: color 0.2s; }
.footer-icp a:hover { color: var(--red-500); }

/* ===== 8. 服务子页 / submit-game / contact 通用 ===== */
.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink-500);
  font-size: 13px; font-weight: 500;
  margin-bottom: 24px;
  transition: color 0.2s;
}
.back-link:hover { color: var(--red-500); }
.service-detail { padding: 80px 0; min-height: calc(100vh - 200px); }
.service-detail-content { max-width: 800px; margin: 0 auto; }
.service-detail-icon { font-size: 64px; margin-bottom: 24px; }
.service-detail-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 800; line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink-950);
  margin: 0 0 16px;
}
.service-detail-desc {
  font-size: 20px; color: var(--ink-500);
  margin: 0 0 40px;
  line-height: 1.5;
}
.service-detail-body p {
  font-size: 16px; line-height: 1.8;
  color: var(--ink-700);
  margin: 0 0 16px;
}
/* ===== Service Detail v0.6.10 — hero header + features + process + cta ===== */
.sd-hero {
  position: relative;
  padding: 140px 0 80px;
  background: linear-gradient(135deg, #FFF1F0 0%, #FFFFFF 50%, #F4F4F5 100%);
  border-bottom: 1px solid var(--ink-200);
  overflow: hidden;
}
.sd-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(216,38,28,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216,38,28,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 80%);
  pointer-events: none;
}
.sd-hero-inner { position: relative; z-index: 1; }
.sd-hero-top { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; }
.sd-hero-num {
  font-family: var(--font-display);
  font-size: 72px; font-weight: 900;
  color: var(--red-500);
  line-height: 1;
  letter-spacing: -0.04em;
}
.sd-hero-icon {
  width: 80px; height: 80px;
  background: var(--red-50);
  border: 1.5px solid var(--red-100);
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  color: var(--red-500);
}
.sd-hero-icon svg { width: 44px; height: 44px; }
.sd-hero-bar { flex: 1; height: 2px; background: linear-gradient(90deg, var(--red-500), transparent); }
.sd-hero-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 800; line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink-950);
  margin: 0 0 12px;
}
.sd-hero-subtitle {
  font-size: 18px; color: var(--ink-500);
  margin: 0 0 24px;
  font-weight: 500;
}
.sd-hero-desc {
  font-size: 20px; color: var(--ink-700);
  line-height: 1.5;
  max-width: 720px;
  margin: 0;
}

/* Body section */
.sd-section { padding: 80px 0; }
.sd-section-title {
  font-family: var(--font-display);
  font-size: 36px; font-weight: 800;
  color: var(--ink-950);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.sd-section-sub {
  font-size: 16px; color: var(--ink-500);
  margin: 0 0 48px;
}
.sd-body { font-size: 17px; line-height: 1.85; color: var(--ink-700); }
.sd-body p { margin: 0 0 20px; }

/* Features grid */
.sd-features {
  background: var(--ink-50);
  padding: 80px 0;
}
.sd-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.sd-feature {
  background: #fff;
  border: 1.5px solid var(--ink-200);
  border-radius: 16px;
  padding: 32px 28px;
  transition: all 0.3s var(--ease-out-expo);
}
.sd-feature:hover {
  border-color: var(--red-500);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(216,38,28,0.1);
}
.sd-feature-icon {
  width: 56px; height: 56px;
  background: var(--red-50);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: var(--red-500);
  margin-bottom: 20px;
}
.sd-feature-icon svg { width: 28px; height: 28px; }
.sd-feature-title {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 700;
  color: var(--ink-950);
  margin: 0 0 10px;
}
.sd-feature-desc {
  font-size: 14px; line-height: 1.6;
  color: var(--ink-500);
  margin: 0;
}

/* Process steps */
.sd-process {
  padding: 80px 0;
  background: #fff;
}
.sd-process-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  position: relative;
}
.sd-process-list::before {
  content: ""; position: absolute;
  top: 28px; left: 10%; right: 10%;
  height: 2px; background: var(--ink-200);
  z-index: 0;
}
.sd-step {
  position: relative; z-index: 1;
  text-align: center;
}
.sd-step-num {
  width: 56px; height: 56px;
  margin: 0 auto 16px;
  background: #fff;
  border: 2px solid var(--red-500);
  color: var(--red-500);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 22px; font-weight: 800;
}
.sd-step-label {
  font-size: 14px; font-weight: 600;
  color: var(--ink-900);
  margin: 0;
}

/* CTA */
.sd-cta {
  padding: 100px 0;
  background: linear-gradient(135deg, var(--ink-950) 0%, #1F1F23 100%);
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.sd-cta::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 60% at 30% 50%, rgba(216,38,28,0.25), transparent 60%),
    radial-gradient(ellipse 50% 60% at 70% 50%, rgba(255,107,53,0.18), transparent 60%);
  pointer-events: none;
}
.sd-cta-inner { position: relative; z-index: 1; }
.sd-cta-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.sd-cta-sub {
  font-size: 16px; color: rgba(255,255,255,0.7);
  margin: 0 0 32px;
}
.sd-cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.sd-cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 32px;
  background: var(--red-500); color: #fff;
  border-radius: 8px;
  font-size: 15px; font-weight: 700;
  transition: all 0.2s;
}
.sd-cta-btn:hover { background: var(--red-600); transform: translateY(-2px); }
.sd-cta-btn.ghost {
  background: transparent; color: #fff;
  border: 1.5px solid rgba(255,255,255,0.3);
}
.sd-cta-btn.ghost:hover { border-color: #fff; background: rgba(255,255,255,0.05); transform: translateY(-2px); }

/* Responsive */
@media (max-width: 1024px) {
  .sd-features-grid { grid-template-columns: repeat(2, 1fr); }
  .sd-process-list { grid-template-columns: repeat(3, 1fr); row-gap: 32px; }
  .sd-process-list::before { display: none; }
}
@media (max-width: 768px) {
  .sd-hero { padding: 100px 0 48px; }
  .sd-hero-num { font-size: 48px; }
  .sd-hero-icon { width: 56px; height: 56px; }
  .sd-hero-icon svg { width: 28px; height: 28px; }
  .sd-section { padding: 56px 0; }
  .sd-section-title { font-size: 28px; }
  .sd-features { padding: 56px 0; }
  .sd-features-grid { grid-template-columns: 1fr; }
  .sd-process { padding: 56px 0; }
  .sd-process-list { grid-template-columns: repeat(2, 1fr); }
  .sd-cta { padding: 64px 0; }
}


/* ===== 9. 响应式 ===== */
@media (max-width: 1024px) {
  .hero-slide[data-pos="0"] { width: 100vw; height: 100vh; }
  .hero-slide[data-pos="-1"], .hero-slide[data-pos="1"] { width: 50vw; height: 70vh; }
  .hero-slide[data-pos="-2"], .hero-slide[data-pos="2"] { width: 30vw; height: 50vh; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .featured-grid { grid-template-columns: repeat(2, 1fr); }
  .featured-grid > :nth-child(3) { grid-column: span 2; }
}
@media (max-width: 768px) {
  html { scroll-padding-top: 112px; }
  body { overflow-x: hidden; }
  .container { width: 100%; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }

  .site-header,
  .site-header.scrolled {
    padding: 10px 0 0;
    background: rgba(10,10,11,.94);
    box-shadow: 0 1px 0 rgba(255,255,255,.12);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
  }
  .site-header .inner { min-height: 48px; gap: 10px; flex-wrap: wrap; }
  .logo { gap: 8px; min-width: 0; }
  .logo:hover { transform: none; }
  .logo .logo-red { height: 28px; }
  .logo .logo-orange { height: 25px; }
  .site-header.scrolled .logo .logo-red,
  .site-header.scrolled .logo .logo-orange { filter: brightness(0) invert(1); }
  .lang-switcher { margin-left: auto; }
  .lang-btn,
  .site-header.scrolled .lang-btn { min-height: 36px; padding: 6px 10px; border-color: rgba(255,255,255,.4); color: #fff; }
  .lang-flag { display: none; }
  .lang-menu { position: fixed; top: 58px; right: 12px; max-width: calc(100vw - 24px); }
  .lang-menu .lang-flag { display: inline; }
  .nav {
    order: 3;
    display: flex;
    width: calc(100% + 32px);
    margin: 0 -16px;
    padding: 4px 16px 10px;
    gap: 24px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a,
  .site-header.scrolled .nav a { flex: 0 0 auto; color: rgba(255,255,255,.9); font-size: 13px; padding: 5px 0; }
  .nav a.active::after { bottom: -2px; }

  .hero { height: min(780px, 100svh); min-height: 620px; padding-top: 98px; background: #111; }
  .hero-bg, .hero-grid { display: none; }
  .hero-track {
    position: relative;
    display: flex;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .hero-track::-webkit-scrollbar { display: none; }
  .hero-slide,
  .hero-slide:first-child,
  .hero-slide[data-pos="0"],
  .hero-slide[data-pos="idle"] {
    display: block;
    flex: 0 0 88vw;
    width: 88vw;
    height: 100%;
    scroll-snap-align: center;
    filter: brightness(.72) saturate(.82);
    border-right: 2px solid rgba(255,255,255,.18);
  }
  .hero-slide[data-pos="0"] { filter: brightness(1) saturate(1); }
  .hero-slide::before { background: rgba(5,7,11,.18); }
  .hero-slide[data-pos="0"]::before { background: rgba(5,7,11,.04); }
  .hero-slide::after { background: linear-gradient(180deg, transparent 48%, rgba(0,0,0,.30) 76%, rgba(0,0,0,.58) 100%); }
  .hero-info,
  .hero-slide[data-pos="0"] .hero-info,
  .hero-slide[data-pos="idle"] .hero-info { bottom: 18px; padding: 28px 22px 26px; transform: none; }
  .hero-title,
  .hero-slide[data-pos="0"] .hero-title,
  .hero-slide[data-pos="idle"] .hero-title { font-size: clamp(27px, 9vw, 40px); line-height: 1.02; opacity: 1; }
  .hero-subtitle { font-size: 13px; margin: 10px 0 14px; display: block; }
  .hero-platforms, .hero-slide[data-pos="0"] .hero-platforms { display: flex; }
  .hero-cta-row, .hero-slide[data-pos="0"] .hero-cta-row { display: flex; }
  .hero-cta { min-height: 44px; padding: 10px 16px; }
  .hero-game-logo { top: 11%; width: min(72%, 320px); max-height: 130px; }
  .hero-play { width: 54px; height: 54px; top: 42%; }
  .hero-play::before { border-left-width: 15px; border-top-width: 10px; border-bottom-width: 10px; }
  .hero-nav, .hero-progress, .hero-scroll { display: none; }

  .marquee { padding: 18px 0; }
  .marquee-track { gap: 34px; }
  .marquee-track span { gap: 18px; font-size: 20px; }
  .services { padding: 72px 0 64px; }
  .services-head { margin-bottom: 34px; }
  .services-head h2 { font-size: 32px; }
  .services-head p { font-size: 15px; }
  .service-card { padding: 26px 22px 22px; border-radius: 16px; }
  .services-head { grid-template-columns: 1fr; gap: 24px; }
  .services-grid { grid-template-columns: 1fr; }
  .featured-grid { grid-template-columns: 1fr; gap: 16px; }
  .featured-grid > :nth-child(3) { grid-column: span 1; }
  .featured { padding-bottom: 64px; }
  .featured-wave { height: 210px; padding: 34px 20px 58px; clip-path: ellipse(155% 100% at 50% 0%); }
  .featured-wave h2 { font-size: 44px; }
  .featured-grid { margin-top: -44px; padding: 0 16px; }
  .featured-card { aspect-ratio: 4/5; border-radius: 14px; }
  .featured-card-content { padding: 18px; }
  .featured-card-title { font-size: 24px; }
  .featured-card-btn { min-height: 44px; padding: 10px; }
  .view-all { margin-top: 40px; min-height: 46px; display: flex; align-items: center; }

  .submit-entry { padding: 64px 0; }
  .submit-entry-inner { grid-template-columns: 1fr; gap: 30px; padding: 30px 22px; border-radius: 18px; }
  .submit-entry h2 { font-size: 30px; }
  .submit-entry p { font-size: 15px; }
  .submit-entry-cta { min-height: 46px; padding: 13px 24px; }
  .submit-entry-image { max-width: 260px; margin: 0 auto; }

  .social { padding: 58px 0 64px; }
  .social-logo { padding: 10px 22px; margin-bottom: 20px; }
  .social-logo img { height: 27px; }
  .social h3 { font-size: 25px; margin-bottom: 28px; }
  .social-icons { gap: 12px; max-width: 360px; }
  .social-icons .social-item { width: 58px; height: 58px; }
  .social-icons .xunyou-social-mark { max-width: 30px; max-height: 30px; }

  .site-footer { padding: 36px 0 calc(26px + env(safe-area-inset-bottom)); }
  .footer-top { flex-wrap: wrap; gap: 18px; margin-bottom: 22px; }
  .footer-copyright, .footer-icp { line-height: 1.7; }

  .ct-page, .sg-page, .games-page { padding-top: 132px !important; padding-bottom: 64px !important; min-height: 100svh !important; }
  .ct-wrap { gap: 18px !important; }
  .ct-info, .ct-form-card, .sg-wrap { padding: 26px 20px !important; border-radius: 14px !important; }
  .ct-info h1, .sg-wrap h1 { font-size: 30px !important; }
  .ct-form-card h2 { margin-bottom: 30px !important; }
  .ct-row, .sg-row { grid-template-columns: 1fr !important; gap: 14px !important; }
  .ct-field input, .ct-field textarea,
  .sg-field input, .sg-field select, .sg-field textarea { min-height: 46px; font-size: 16px !important; }
  .ct-field textarea, .sg-field textarea { min-height: 130px; }
  .ct-submit, .sg-submit { min-height: 48px; }
  .sg-wrap .back-link { margin-bottom: 18px; }
  .sg-wrap .subtitle { margin-bottom: 36px !important; }
  .games-head { margin-bottom: 32px !important; }
  .games-head h1 { font-size: 36px !important; }
  .games-head p { font-size: 14px !important; }
  .games-filters { justify-content: flex-start !important; flex-wrap: nowrap !important; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .games-filters::-webkit-scrollbar { display: none; }
  .games-filters .filter { flex: 0 0 auto; min-height: 42px; }

  .sd-hero { padding-top: 132px; }
  .sd-hero-top { gap: 12px; }
  .sd-hero-title { font-size: 38px; overflow-wrap: anywhere; }
  .sd-hero-desc { font-size: 15px; }
  .sd-feature { padding: 24px 20px; }
  .sd-process-list { grid-template-columns: 1fr; gap: 22px; }
  .sd-step { display: flex; align-items: center; gap: 16px; text-align: left; }
  .sd-step-num { flex: 0 0 48px; width: 48px; height: 48px; margin: 0; }
  .sd-cta-title { font-size: 30px; }
  .sd-cta-buttons { flex-direction: column; }
  .sd-cta-btn { width: 100%; min-height: 48px; justify-content: center; }
}

@media (max-width: 480px) {
  .logo .logo-red { height: 24px; }
  .logo .logo-orange { height: 22px; }
  .lang-btn { font-size: 12px; }
  .hero-slide,
  .hero-slide:first-child,
  .hero-slide[data-pos="0"],
  .hero-slide[data-pos="idle"] { flex-basis: 92vw; width: 92vw; }
  .hero-info,
  .hero-slide[data-pos="0"] .hero-info,
  .hero-slide[data-pos="idle"] .hero-info { padding-left: 18px; padding-right: 18px; }
  .hero-cta-row { flex-direction: column; }
  .hero-cta { width: 100%; justify-content: center; }
  .featured-card-actions { flex-direction: column; }
  .social-icons { max-width: 300px; }
}

@media (hover: none) and (pointer: coarse) {
  .service-card:hover, .featured-card:hover, .social-icons a.social-item:hover { transform: none; }
  .service-card:hover::before { height: 0; }
  .service-card:hover .service-title { color: var(--ink-950); }
  .service-card:hover .service-desc { color: var(--ink-500); }
  .service-card:hover .service-icon { background: var(--red-50); color: var(--red-500); }
}

/* ===== 10. reduced-motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .marquee-track { animation: none; }
  .hero-play::after { animation: none; }
  .hero-scroll::after { animation: none; }
  .hero-status::before { animation: none; }
}

/* ============================================================
   ADMIN 后台样式 (登录 + 管理界面)
   ============================================================ */
.admin-login {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--ink-50) 0%, var(--red-50) 100%);
  z-index: 200;
}
.admin-login .box {
  width: 360px;
  padding: 48px 36px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.08);
  text-align: center;
}
.admin-login h1 {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 800;
  margin: 0 0 32px;
  color: var(--ink-950);
}
.admin-login input {
  width: 100%; padding: 12px 16px;
  margin-bottom: 12px;
  border: 1.5px solid var(--ink-200);
  border-radius: 8px;
  font-size: 14px; font-family: inherit;
}
.admin-login input:focus { outline: none; border-color: var(--red-500); }
.admin-login button {
  width: 100%; padding: 14px;
  background: var(--red-500); color: #fff;
  border: none; border-radius: 8px;
  font-size: 15px; font-weight: 700;
  cursor: pointer; font-family: inherit;
  margin-top: 8px;
  transition: background 0.2s;
}
.admin-login button:hover { background: var(--red-600); }
.admin-login .err { color: var(--red-500); font-size: 12px; min-height: 16px; margin-top: 12px; }

.admin-shell { display: flex; flex-direction: column; min-height: 100vh; }
.admin-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 32px;
  background: #fff;
  border-bottom: 1.5px solid var(--ink-200);
  position: sticky; top: 0; z-index: 50;
}
.admin-header h1 {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 800;
  color: var(--ink-950);
  margin: 0;
}
.admin-header .user { display: flex; align-items: center; gap: 20px; font-size: 13px; }
.admin-header .user a { color: var(--ink-700); transition: color 0.2s; }
.admin-header .user a:hover { color: var(--red-500); }

.admin-body { display: flex; flex: 1; }
.admin-side {
  width: 220px; padding: 24px 16px;
  background: var(--ink-50);
  border-right: 1px solid var(--ink-200);
}
.admin-side .item {
  display: block; padding: 12px 16px;
  border-radius: 8px; font-size: 14px; font-weight: 500;
  color: var(--ink-700);
  margin-bottom: 4px;
  cursor: pointer;
  transition: all 0.2s;
}
.admin-side .item:hover { background: #fff; color: var(--ink-900); }
.admin-side .item.active { background: var(--ink-950); color: #fff; }
.admin-main { flex: 1; padding: 32px; background: #fff; }
.admin-card {
  background: #fff;
  border: 1.5px solid var(--ink-200);
  border-radius: 12px;
  padding: 28px;
  margin-bottom: 24px;
}
.admin-card h2 {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 800;
  margin: 0 0 16px;
  color: var(--ink-950);
}

.btn {
  padding: 10px 20px;
  background: var(--red-500); color: #fff;
  border: none; border-radius: 8px;
  font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: background 0.2s;
}
.btn:hover { background: var(--red-600); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-ghost {
  padding: 8px 16px;
  background: #fff; color: var(--ink-700);
  border: 1px solid var(--ink-300); border-radius: 6px;
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-ghost:hover { border-color: var(--red-500); color: var(--red-500); }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-row { display: flex; gap: 12px; margin-bottom: 20px; align-items: center; }

.game-list { display: grid; gap: 16px; }
.game-list .item {
  display: grid; grid-template-columns: 120px 1fr auto;
  gap: 20px; padding: 16px;
  background: #fff;
  border: 1.5px solid var(--ink-200);
  border-radius: 10px;
  align-items: center;
}
.game-list .item .cover-wrap {
  width: 120px; height: 80px;
  border-radius: 6px; overflow: hidden;
  background: var(--ink-100);
}
.game-list .item .cover-wrap img { width: 100%; height: 100%; object-fit: cover; }
.game-list .item .title { font-weight: 700; font-size: 15px; color: var(--ink-900); }
.game-list .item .info { font-size: 12px; color: var(--ink-500); margin-top: 4px; }
.game-list .item .actions { display: flex; gap: 8px; }
.game-list .item button.del { color: var(--red-500); border-color: var(--red-500); }
.game-list .item button.del:hover { background: var(--red-500); color: #fff; }

.games-empty { padding: 40px 20px; text-align: center; color: var(--ink-400); font-size: 14px; }

.modal-mask {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 200; padding: 20px;
}

/* Crop is a child workflow and must stay above dynamically-created editors. */
#cropModal { z-index: 1200; }
.modal {
  width: 720px; max-width: 100%;
  max-height: 90vh; overflow-y: auto;
  background: #fff;
  border-radius: 16px;
  display: flex; flex-direction: column;
}
.modal h3 {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 800;
  padding: 24px 32px;
  margin: 0;
  border-bottom: 1px solid var(--ink-200);
  color: var(--ink-950);
}
.modal .body { padding: 24px 32px; flex: 1; }
.modal .footer {
  padding: 20px 32px;
  border-top: 1px solid var(--ink-200);
  display: flex; justify-content: flex-end; gap: 12px;
  background: var(--ink-50);
  border-radius: 0 0 16px 16px;
}
.modal .footer .cancel {
  padding: 10px 24px;
  background: #fff; color: var(--ink-700);
  border: 1px solid var(--ink-300); border-radius: 8px;
  font-size: 14px; font-weight: 500;
  cursor: pointer;
}
.modal .footer .ok {
  padding: 10px 24px;
  background: var(--red-500); color: #fff;
  border: none; border-radius: 8px;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
}
.modal .footer .ok:hover { background: var(--red-600); }
.modal .footer .ok:disabled { opacity: 0.5; cursor: not-allowed; }

.modal .body .row { margin-bottom: 16px; }
.modal .body label {
  display: block;
  font-size: 12px; font-weight: 600;
  color: var(--ink-700);
  margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.modal .body input[type="text"],
.modal .body input[type="number"],
.modal .body input[type="url"],
.modal .body input[type="email"],
.modal .body select,
.modal .body textarea {
  width: 100%; padding: 10px 14px;
  border: 1.5px solid var(--ink-200);
  border-radius: 6px;
  font-size: 14px; font-family: inherit;
  background: #fff;
}
.modal .body input:focus,
.modal .body select:focus,
.modal .body textarea:focus { outline: none; border-color: var(--red-500); }
.modal .body textarea { min-height: 80px; resize: vertical; }

.upload-area {
  border: 2px dashed var(--ink-200);
  border-radius: 10px;
  padding: 24px;
  min-height: 180px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--ink-50);
}
.upload-area:hover { border-color: var(--red-500); background: var(--red-50); }
.upload-area .empty-hint {
  text-align: center; color: var(--ink-500);
  font-size: 13px;
}
.upload-area .preview { max-width: 100%; max-height: 300px; border-radius: 8px; }

.contact-list { display: flex; flex-direction: column; gap: 12px; }
.contact-msg {
  padding: 20px;
  background: #fff;
  border: 1.5px solid var(--ink-200);
  border-radius: 10px;
}
.contact-msg.unread { border-left: 4px solid var(--red-500); }
.contact-msg .head { display: flex; justify-content: space-between; margin-bottom: 8px; }
.contact-msg .head .name { font-weight: 700; color: var(--ink-900); }
.contact-msg .head .time { color: var(--ink-400); font-size: 12px; }
.contact-msg .body { font-size: 13px; color: var(--ink-500); line-height: 1.6; white-space: pre-wrap; }
.contact-msg .actions { margin-top: 10px; display: flex; gap: 8px; justify-content: flex-end; }

@media (max-width: 768px) {
  .admin-side { width: 64px; padding: 12px 8px; }
  .admin-side .item { font-size: 0; padding: 12px 8px; text-align: center; }
  .admin-side .item::first-letter { font-size: 14px; }
  .admin-main { padding: 16px; }
  .modal { width: 100%; }
  .modal .body { padding: 16px; }
}

/* ===== v0.9.0 business pages: one system, six distinct visual languages ===== */
.service-reimagined { --service-accent: var(--red-500); --service-dark: #151515; --service-soft: #fff2ef; }
.service-reimagined .sd-hero { overflow:hidden; position:relative; background:var(--service-dark); }
.service-reimagined .sd-hero::before { content:"";position:absolute;inset:0;pointer-events:none;opacity:.5; }
.service-reimagined .sd-hero-num,.service-reimagined .sd-hero-icon { color:var(--service-accent); }
.service-reimagined .sd-hero-title { color:#fff!important;text-shadow:0 3px 26px rgba(0,0,0,.28); }
.service-reimagined .sd-hero-subtitle,.service-reimagined .sd-hero-desc,.service-reimagined .back-link { color:rgba(255,255,255,.72)!important; }
.service-reimagined .sd-hero-bar { background:var(--service-accent); }
.service-reimagined .sd-feature { transition:transform .35s var(--ease-out-expo),box-shadow .35s; }
.service-reimagined .sd-feature:hover { transform:translateY(-8px);box-shadow:0 22px 60px rgba(0,0,0,.12); }
.service-theme-publishing { --service-accent:#ef392f;--service-dark:#111;--service-soft:#fff0ed; }
.service-theme-publishing .sd-hero::before { background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:64px 64px;transform:perspective(600px) rotateX(55deg) scale(1.5);transform-origin:bottom; }
.service-theme-marketing { --service-accent:#e52b22;--service-dark:#18212d;--service-soft:#eef4fa; }
.service-theme-marketing .sd-hero::before { background:repeating-linear-gradient(-18deg,transparent 0 34px,rgba(255,255,255,.07) 35px 36px); }
.service-theme-marketing .sd-features-grid { grid-template-columns:repeat(3,1fr); }
.service-theme-marketing .sd-feature:nth-child(2n) { transform:translateY(22px); }
.service-theme-cinematic { --service-accent:#c776ff;--service-dark:#160d25;--service-soft:#f7efff; }
.service-theme-cinematic .sd-hero::before { background:radial-gradient(circle at 72% 25%,rgba(199,118,255,.38),transparent 30%),linear-gradient(90deg,transparent 4%,rgba(255,255,255,.08) 4.5% 5%,transparent 5.5% 94%,rgba(255,255,255,.08) 94.5% 95%,transparent 95.5%); }
.service-theme-cinematic .sd-case-cover { aspect-ratio:16/9; }
.service-theme-data { --service-accent:#36d399;--service-dark:#071b19;--service-soft:#eafbf5; }
.service-theme-data .sd-hero::before { background-image:linear-gradient(rgba(54,211,153,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(54,211,153,.12) 1px,transparent 1px);background-size:32px 32px; }
.service-theme-data .sd-case-card { border-radius:4px;background:#071b19;color:#fff; }
.service-theme-data .sd-case-copy p,.service-theme-data .sd-case-metrics span { color:#a6c9c1; }
.service-theme-merchandise { --service-accent:#f08b35;--service-dark:#432817;--service-soft:#fff7e9; }
.service-theme-merchandise .sd-hero::before { background:radial-gradient(circle at 80% 20%,#f08b3566,transparent 28%),radial-gradient(circle at 18% 78%,#ffe2b766,transparent 24%); }
.service-theme-merchandise .sd-case-card { border-radius:28px; }
.service-theme-commerce { --service-accent:#4b7cff;--service-dark:#09152d;--service-soft:#eef3ff; }
.service-theme-commerce .sd-hero::before { background:radial-gradient(circle at 15% 50%,#4b7cff 0 3px,transparent 4px),radial-gradient(circle at 55% 20%,#4b7cff 0 3px,transparent 4px),radial-gradient(circle at 80% 70%,#4b7cff 0 3px,transparent 4px),linear-gradient(25deg,transparent 49.7%,rgba(75,124,255,.25) 50%,transparent 50.3%);background-size:240px 170px,310px 230px,280px 190px,100% 100%; }

.sd-cases-section,.sd-partners-section { padding:100px 0;background:#fff; }
.sd-cases-section { background:var(--service-soft); }
.sd-dynamic-head { margin-bottom:38px; }
.sd-dynamic-head>span { color:var(--service-accent);font:700 12px var(--font-mono);letter-spacing:.12em;text-transform:uppercase; }
.sd-dynamic-head h2 { font:900 clamp(34px,4vw,58px)/1 var(--font-display);letter-spacing:-.035em; }
.sd-dynamic-head p { color:var(--ink-500); }
.sd-case-page { display:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;animation:casePageIn .35s ease; }
.sd-case-page.active { display:grid; }
@keyframes casePageIn { from{opacity:0;transform:translateX(18px)} to{opacity:1;transform:none} }
.sd-case-card { overflow:hidden;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:16px; }
.sd-case-cover { aspect-ratio:16/8;background-size:cover;background-position:center; }
.sd-case-placeholder { display:grid;place-items:center;background:linear-gradient(135deg,var(--service-dark),var(--service-accent));color:#fff;font-size:60px; }
.sd-case-copy { padding:28px; }
.sd-case-index { font:700 11px var(--font-mono);color:var(--service-accent);letter-spacing:.12em; }
.sd-case-copy h3 { margin:8px 0 10px;font-size:25px; }
.sd-case-copy p { color:var(--ink-500);font-size:13px;line-height:1.7;margin-top:18px; }
.sd-case-metrics { display:flex;flex-wrap:wrap;gap:22px;margin-top:20px;padding:18px 0;border-top:1px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(0,0,0,.1); }
.sd-case-metrics div { display:flex;flex-direction:column; }
.sd-case-metrics strong { font:900 clamp(27px,2.4vw,40px)/1 var(--font-display);color:var(--service-accent);letter-spacing:-.03em; }
.sd-case-metrics span { color:var(--ink-500);font-size:12px; }
.sd-partner-grid { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px; }
.sd-partner-grid>a,.sd-partner-grid>div { min-height:112px;border:1px solid var(--ink-200);border-radius:12px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:9px;padding:20px;background:#fff;transition:.25s; }
.sd-partner-grid>a:hover { border-color:var(--service-accent);transform:translateY(-4px); }
.sd-partner-grid img { width:auto;height:44px;max-width:150px;object-fit:contain; }
.sd-partner-grid span { color:var(--ink-500);font-size:11px; }
.sd-case-stage { position:relative; }
.sd-case-side { position:absolute;top:50%;z-index:4;width:58px;height:58px;border-radius:50%;border:1px solid var(--ink-300);font-size:25px;transition:.25s;background:rgba(255,255,255,.92);box-shadow:0 12px 30px rgba(0,0,0,.1);transform:translateY(-50%); }
.sd-case-side.prev { left:-82px; }.sd-case-side.next { right:-82px; }
.sd-case-side:hover { border-color:var(--service-accent);background:var(--service-accent);color:#fff;transform:translateY(-50%) scale(1.08); }
.sd-empty-state { border:1px dashed var(--ink-300);border-radius:14px;padding:42px;text-align:center;color:var(--ink-400); }

@media(max-width:800px){
  .sd-case-page{grid-template-columns:1fr}.sd-partner-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sd-cases-section,.sd-partners-section{padding:64px 0}.service-theme-marketing .sd-features-grid{grid-template-columns:1fr}.service-theme-marketing .sd-feature:nth-child(2n){transform:none}.sd-case-side{width:44px;height:44px}.sd-case-side.prev{left:-12px}.sd-case-side.next{right:-12px}
}

.service-reimagined .sd-process-list { display:flex;grid-template-columns:none;gap:0;overflow-x:auto;padding:0 4px 12px; }
.service-reimagined .sd-process-list::before { display:block!important;left:32px;right:32px;top:28px; }
.service-reimagined .sd-step { flex:1 0 140px; }

/* Admin: page-based reusable asset assignment */
.asset-board{margin-top:24px;padding:22px!important}.asset-board-head{display:flex;justify-content:space-between;gap:24px;align-items:flex-start}.asset-board-head h2{margin:2px 0 6px}.asset-board-head p{margin:0;color:var(--ink-500);font-size:13px}.asset-board-kicker{color:var(--red-500)!important;font-weight:800;letter-spacing:.08em}.asset-board-actions{display:flex;gap:8px;flex-shrink:0}.asset-board-toolbar{display:grid;grid-template-columns:1.2fr 1fr 1.5fr auto;gap:12px;align-items:end;margin:22px 0;padding:16px;border-radius:12px;background:#f7f7f8}.asset-board-toolbar label{font-size:12px;font-weight:700;color:var(--ink-600)}.asset-board-toolbar select,.asset-board-toolbar input{display:block;width:100%;height:42px;margin-top:6px;padding:0 11px;border:1px solid var(--ink-200);border-radius:8px;background:#fff}.asset-board-section{padding:16px 0}.asset-unselected-section{border-top:1px solid var(--ink-200)}.asset-board-section-title{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}.asset-board-section-title h3{margin:0}.asset-board-section-title span{font-size:12px;color:var(--ink-400)}.asset-card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;min-height:80px}.asset-card{position:relative;overflow:hidden;border:2px solid transparent;border-radius:12px;background:#f4f4f5;cursor:pointer;transition:.18s ease;user-select:none}.asset-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.08)}.asset-card.selected{border-color:var(--red-500);background:#fff}.asset-card.dragging{opacity:.42;transform:scale(.97)}.asset-card-thumb{aspect-ratio:16/9;background:#ececef}.asset-card-thumb img{width:100%;height:100%;object-fit:cover}.asset-card-thumb.is-logo{background:#fff}.asset-card-thumb.is-logo img{object-fit:contain;padding:16px}.asset-card-meta{display:flex;flex-direction:column;gap:3px;padding:10px 12px 12px}.asset-card-meta strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.asset-card-meta span{font-size:11px;color:var(--ink-400)}.asset-card-check{display:none;position:absolute;right:8px;top:8px;width:24px;height:24px;border-radius:50%;background:var(--red-500);color:#fff;font-style:normal;text-align:center;line-height:24px}.asset-card.selected .asset-card-check{display:block}.asset-card-delete{position:absolute;z-index:2;left:7px;top:7px;width:24px;height:24px;border:0;border-radius:50%;background:rgba(0,0,0,.56);color:#fff;cursor:pointer;opacity:0;transition:.15s}.asset-card:hover .asset-card-delete{opacity:1}.asset-board-empty{grid-column:1/-1;margin:0;padding:24px;border:1px dashed var(--ink-200);border-radius:10px;text-align:center;color:var(--ink-400)}
.asset-editor-modal{width:min(720px,calc(100vw - 28px))!important}.asset-editor-modal textarea{width:100%;padding:10px;border:1px solid var(--ink-300);border-radius:6px;resize:vertical}.asset-editor-modal .footer{display:flex;align-items:center}.asset-editor-modal .footer-spacer{flex:1}.field-help{margin:4px 0 10px;color:var(--ink-400);font-size:12px}.asset-image-preview{width:100%;aspect-ratio:16/9;border:1.5px dashed var(--ink-300);border-radius:10px;display:grid;place-items:center;overflow:hidden;color:var(--ink-400);cursor:pointer;background:#f8f8f9}.asset-image-preview img{width:100%;height:100%;object-fit:cover}.asset-image-preview.is-logo{height:180px;aspect-ratio:auto;background:#fff}.asset-image-preview.is-logo img{display:block;width:auto;height:auto;max-width:calc(100% - 36px);max-height:calc(100% - 36px);object-fit:contain;padding:0;margin:auto}.asset-service-checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.asset-service-option{display:flex;gap:7px;align-items:center;justify-content:center;min-height:48px;padding:7px 10px;border:1px solid var(--ink-200);border-radius:10px;text-align:center}.asset-select-all{border-color:var(--red-300);color:var(--red-500);font-weight:800}
.sd-case-cover{aspect-ratio:16/9}
@media(max-width:980px){.asset-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.asset-board-toolbar{grid-template-columns:1fr 1fr}.asset-board-head{flex-direction:column}.asset-service-checks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.asset-card-grid,.asset-board-toolbar{grid-template-columns:1fr}.asset-board-actions{flex-wrap:wrap}.asset-service-checks{grid-template-columns:1fr}}

/* Compact admin thumbnails: dense enough for large case/logo libraries. */
.asset-card-grid{grid-template-columns:repeat(auto-fill,112px);gap:9px;align-items:start}.asset-card{width:112px;border-radius:8px}.asset-card-thumb{width:100%;height:63px;aspect-ratio:auto}.asset-card-thumb.is-logo img{padding:9px}.asset-card-meta{gap:1px;padding:6px 7px 7px}.asset-card-meta strong{font-size:11px}.asset-card-meta span{font-size:9px}.asset-card-check{right:4px;top:4px;width:18px;height:18px;line-height:18px;font-size:11px}.asset-card-delete{left:4px;top:4px;width:18px;height:18px;font-size:12px}.asset-board-empty{min-width:260px}.admin-nav-group{padding:0 0 16px}.admin-nav-group+.admin-nav-group{padding-top:15px;border-top:1px solid var(--ink-100)}.admin-nav-title{padding:0 24px 7px;color:var(--ink-400);font-size:11px;font-weight:800;letter-spacing:.12em}.admin-side .admin-nav-group .item{padding:9px 24px;font-size:13px}
.asset-card-edit,.asset-card-drag{position:absolute;z-index:3;bottom:4px;width:22px;height:18px;padding:0;border:0;border-radius:5px;background:rgba(35,35,40,.72);color:#fff;font-size:11px;line-height:18px}.asset-card-edit{left:4px;cursor:pointer}.asset-card-drag{right:4px;cursor:grab;letter-spacing:-2px;touch-action:none}.asset-card-drag:active{cursor:grabbing}.asset-card.selected .asset-card-meta{padding-left:28px;padding-right:28px}.asset-card.drop-target{box-shadow:0 0 0 3px rgba(226,35,27,.28)}

/* Every process item owns the connector to its next sibling, so appended
   steps always receive a line regardless of the scrollable content width. */
.service-reimagined .sd-process-list::before{display:none!important}.service-reimagined .sd-step{position:relative}.service-reimagined .sd-step::after{content:"";position:absolute;z-index:0;top:28px;left:calc(50% + 30px);width:calc(100% - 60px);height:2px;background:var(--ink-200)}.service-reimagined .sd-step:last-child::after{display:none}.service-reimagined .sd-step-num{position:relative;z-index:1;background:#fff}
@media(max-width:600px){.asset-card-grid{grid-template-columns:repeat(auto-fill,96px)}.asset-card{width:96px}.asset-card-thumb{height:54px}}

/* Partner logos: compact cards and equal visible logo height. Transparent
   margins are trimmed by service-detail.js before these dimensions apply. */
.service-reimagined .sd-partner-grid{grid-template-columns:repeat(auto-fill,minmax(170px,190px));gap:12px;justify-content:start}.service-reimagined .sd-partner-grid>a,.service-reimagined .sd-partner-grid>div{min-height:88px;padding:10px 12px;border-radius:9px}.service-reimagined .sd-partner-grid img{display:block;width:auto;height:52px;max-width:100%;object-fit:contain}.service-reimagined .sd-partner-grid>a:hover{transform:translateY(-2px)}
@media(max-width:600px){.service-reimagined .sd-partner-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.service-reimagined .sd-partner-grid>a,.service-reimagined .sd-partner-grid>div{min-height:76px;padding:8px}.service-reimagined .sd-partner-grid img{height:44px}}

/* Shared in-page video player for home trailers and service cases. */
body.video-modal-open{overflow:hidden}.xy-video-modal[hidden]{display:none}.xy-video-modal{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;padding:24px}.xy-video-backdrop{position:absolute;inset:0;border:0;background:rgba(5,7,10,.86);backdrop-filter:blur(9px);cursor:pointer}.xy-video-dialog{position:relative;width:min(1120px,94vw);overflow:hidden;border:1px solid rgba(255,255,255,.18);border-radius:16px;background:#090a0d;box-shadow:0 30px 100px rgba(0,0,0,.58);animation:xyVideoIn .24s ease}.xy-video-head{height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;color:#fff}.xy-video-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.xy-video-close{width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:27px;line-height:1;cursor:pointer}.xy-video-close:hover{background:var(--red-500)}.xy-video-stage{position:relative;width:100%;aspect-ratio:16/9;background:#000}.xy-video-stage iframe,.xy-video-stage video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}@keyframes xyVideoIn{from{opacity:0;transform:translateY(18px) scale(.975)}to{opacity:1;transform:none}}
.sd-case-cover{position:relative}.sd-case-play{position:absolute;inset:0;margin:auto;width:68px;height:68px;border:1px solid rgba(255,255,255,.65);border-radius:50%;background:rgba(0,0,0,.56);box-shadow:0 10px 30px rgba(0,0,0,.28);cursor:pointer;transition:.22s}.sd-case-play::before{content:"";position:absolute;left:28px;top:21px;border-left:19px solid #fff;border-top:13px solid transparent;border-bottom:13px solid transparent}.sd-case-card:hover .sd-case-play{transform:scale(1.1);background:var(--service-accent)}
@media(max-width:600px){.xy-video-modal{padding:10px}.xy-video-dialog{width:100%;border-radius:11px}.xy-video-head{height:46px}.sd-case-play{width:56px;height:56px}.sd-case-play::before{left:23px;top:17px;border-left-width:16px;border-top-width:11px;border-bottom-width:11px}}