/* ═══════════════════════════════════════
   YAO YAO Portfolio — Dark Minimal Style
   Inspired by byjasonzeng.com
   Built with M3 Design Tokens
   ═══════════════════════════════════════ */

/* --- Tokens --- */
:root {
  --bg: #0A0A0A;
  --bg-elevated: #141414;
  --bg-card: #1A1A1A;
  --text-primary: #F5F5F5;
  --text-secondary: #999999;
  --text-muted: #666666;
  --accent: #C8C8C8;
  --accent-hover: #FFFFFF;
  --border: #222222;
  --border-light: #333333;

  /* Purple accent colors */
  --purple-primary: #8B5CF6;
  --purple-light: #A78BFA;
  --purple-dark: #7C3AED;
  --purple-glow: rgba(139, 92, 246, 0.3);

  /* M3 shape tokens */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* M3 spacing (8dp grid) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* Typography */
  --font: 'JetBrains Mono', 'Noto Sans SC', monospace;
  --font-display: 'JetBrains Mono', monospace;
  --font-serif: 'Playfair Display', 'Noto Serif SC', serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  /* Typography Scale */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 28px;
  --text-xl: clamp(36px, 5vw, 64px);

  /* Easing */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Nav height */
  --nav-h: 72px;
}

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

html {
  font-size: var(--text-base);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: none; }
img { display: block; max-width: 100%; }
::selection { background: rgba(255,255,255,0.15); }

/* --- Resume Modal --- */
.resume-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease;
  cursor: default;
}

.resume-modal * {
  cursor: default;
}

.resume-modal.active {
  opacity: 1;
}

.resume-modal.active .resume-modal-overlay {
  opacity: 1;
}

.resume-modal.active .resume-modal-content {
  opacity: 1;
  transform: scale(1);
}

.resume-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.resume-modal-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  z-index: 1;
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.resume-modal-img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.resume-modal-close {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 36px;
  height: 36px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  color: #fff;
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.resume-modal-close:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

/* --- Custom Cursor --- */
.cursor {
  position: fixed;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transition: transform 0.15s var(--ease-out), opacity 0.3s;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}

.cursor-dot {
  position: fixed;
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform 0.08s;
}

.cursor.hover {
  transform: translate(-50%, -50%) scale(2);
  border-color: rgba(255,255,255,0.8);
}

/* --- Navigation --- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  padding: 0 var(--sp-10);
  z-index: 100;
  background: transparent;
  transition: background 0.4s var(--ease-out), backdrop-filter 0.4s, transform 0.4s var(--ease-out);
}

.nav.scrolled {
  background: rgba(10,10,10,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.in-detail .nav {
  background: rgba(10,10,10,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.nav-logo {
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--text-primary);
  transition: opacity 0.3s;
  display: flex;
  align-items: center;
}

.nav-logo-img {
  height: 26px;
  width: auto;
}

.nav-logo:hover { opacity: 0.7; }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.nav-resume {
  margin-left: auto;
}

.nav-link {
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 2px;
  color: var(--text-secondary);
  transition: color 0.3s;
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--purple-primary), var(--purple-light));
  transition: width 0.3s var(--ease-out);
}

.nav-link:hover,
.nav-link.active { color: var(--purple-light); }
.nav-link:hover::after,
.nav-link.active::after { width: 100%; }

/* Nav Dropdown */
.nav-dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 240px;
  background: rgba(18, 18, 18, 0.98);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(139, 92, 246, 0.15);
  border-radius: var(--radius-lg);
  padding: var(--sp-3);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.25s var(--ease-out);
  z-index: 200;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 0 24px rgba(139, 92, 246, 0.08);
}

.nav-dropdown:hover .dropdown-menu,
.dropdown-menu:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 16px;
  background: transparent;
}

.dropdown-item {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.dropdown-item:hover {
  color: var(--text-primary);
  background: rgba(139, 92, 246, 0.1);
  transform: scale(1.05);
}

.nav-menu-btn {
  display: none;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: none;
  padding: var(--sp-2);
}

.nav-menu-btn span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--text-primary);
  transition: all 0.3s var(--ease-out);
}

.nav-menu-btn.open span:first-child {
  transform: rotate(45deg) translate(2px, 4px);
}
.nav-menu-btn.open span:last-child {
  transform: rotate(-45deg) translate(2px, -4px);
}

/* Mobile Menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 99;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-10);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-out);
}

.mobile-menu.open {
  opacity: 1;
  pointer-events: all;
}

.mobile-link {
  font-size: var(--text-lg);
  font-weight: 300;
  letter-spacing: 8px;
  color: var(--text-secondary);
  transition: color 0.3s, transform 0.3s var(--ease-out);
}

.mobile-link:hover {
  color: var(--text-primary);
  transform: translateX(8px);
}

/* --- Hero --- */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--nav-h) var(--sp-10) var(--sp-20);
  position: relative;
  overflow: hidden;
}

/* Stars Background */
.stars-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.star {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--purple-light);
  border-radius: 50%;
  opacity: 0;
  animation: starTwinkle 3s ease-in-out infinite;
  box-shadow: 0 0 8px 2px var(--purple-primary), 0 0 12px 4px var(--purple-glow);
}

.star:nth-child(1) { top: 12%; left: 8%; animation-delay: 0s; }
.star:nth-child(2) { top: 28%; left: 82%; animation-delay: 0.7s; }
.star:nth-child(3) { top: 50%; left: 25%; animation-delay: 1.4s; }
.star:nth-child(4) { top: 18%; left: 55%; animation-delay: 2.1s; }
.star:nth-child(5) { top: 72%; left: 70%; animation-delay: 0.4s; }
.star:nth-child(6) { top: 65%; left: 12%; animation-delay: 1.8s; }
.star:nth-child(7) { top: 40%; left: 92%; animation-delay: 1.1s; }

@keyframes starTwinkle {
  0%, 100% { opacity: 0; transform: scale(0.8); }
  50% { opacity: 0.8; transform: scale(1.3); }
}

.hero-inner {
  max-width: 1200px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.hero-label {
  display: flex;
  justify-content: center;
  gap: 4px;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 300;
  letter-spacing: 12px;
  color: var(--text-muted);
  margin-bottom: var(--sp-2);
}

.hero-label .char-wrap {
  display: inline-block;
  overflow: hidden;
}

.hero-label .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(110%);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.hero-label.is-visible .char {
  opacity: 1;
  transform: translateY(0);
}

.hero-label.is-visible .char-wrap:nth-child(1) .char { transition-delay: 0s; }
.hero-label.is-visible .char-wrap:nth-child(2) .char { transition-delay: 0.06s; }
.hero-label.is-visible .char-wrap:nth-child(3) .char { transition-delay: 0.12s; }
.hero-label.is-visible .char-wrap:nth-child(4) .char { transition-delay: 0.18s; }
.hero-label.is-visible .char-wrap:nth-child(5) .char { transition-delay: 0.24s; }

.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(72px, 14vw, 180px);
  font-weight: 400;
  font-style: italic;
  line-height: 1;
  letter-spacing: -3px;
  margin-bottom: var(--sp-8);
}

.hero-title .line {
  display: block;
  overflow: hidden;
}

.hero-title .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(110%);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}

.hero-title.is-visible .word {
  opacity: 1;
  transform: translateY(0);
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--purple-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Hero Nameplate */
.hero-nameplate {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-5);
  margin-bottom: var(--sp-8);
  padding: var(--sp-3) var(--sp-6);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: opacity 0.8s var(--ease-out), transform 0.3s ease-out;
  will-change: transform;
}

.hero-nameplate.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.hero-brace {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  letter-spacing: -1px;
}

.hero-avatar {
  width: clamp(44px, 6vw, 88px);
  height: clamp(44px, 6vw, 88px);
  background: linear-gradient(135deg, var(--bg-card) 0%, rgba(255,255,255,0.1) 100%);
  border-radius: 50%;
  border: 1px solid var(--border-light);
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.hero-avatar img {
  width: 92%;
  height: 92%;
  object-fit: contain;
  object-position: center bottom;
}

.hero-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.hero-meta.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hero-meta .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-muted);
}

.scroll-cue {
  position: absolute;
  bottom: var(--sp-10);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  letter-spacing: 2px;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.scroll-cue.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent, var(--purple-primary));
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
  from { opacity: 0; transform: translateY(20px); }
}

@keyframes slideUp {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(1.2); }
}

/* --- Work Section --- */
.work {
  padding: var(--sp-24) var(--sp-10);
  max-width: calc(1400px + var(--sp-10) * 2);
  margin: 0 auto;
}

.section-header {
  margin-bottom: var(--sp-16);
  text-align: center;
}

.section-title {
  font-size: var(--text-xl);
  font-weight: 300;
  letter-spacing: -1px;
  margin-bottom: var(--sp-8);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
}

.filter:hover,
.filter.active {
  color: var(--text-primary);
  border-color: var(--text-primary);
  background: rgba(255,255,255,0.05);
}

/* Projects Grid */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
}

.project-card {
  opacity: 0;
  transform: translateY(40px);
  animation: fadeInUp 0.8s var(--ease-out) forwards;
}

.project-card:nth-child(1) { animation-delay: 0.1s; }
.project-card:nth-child(2) { animation-delay: 0.2s; }
.project-card:nth-child(3) { animation-delay: 0.3s; }
.project-card:nth-child(4) { animation-delay: 0.4s; }
.project-card:nth-child(5) { animation-delay: 0.5s; }

@keyframes fadeInUp {
  to { opacity: 1; transform: translateY(0); }
}

.project-link {
  display: block;
}

.img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  transition: all 0.6s var(--ease-out);
}

.img-placeholder svg {
  width: 120px;
  height: 120px;
  margin-bottom: var(--sp-4);
  opacity: 0.6;
  transition: all 0.6s var(--ease-out);
}

.placeholder-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 3px;
  opacity: 0.4;
  transition: opacity 0.3s;
}

.project-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}

.view-text {
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 2px;
  color: var(--text-primary);
  transform: translateY(10px);
  transition: transform 0.4s var(--ease-out);
}

.project-link:hover .project-overlay {
  opacity: 1;
}

.project-link:hover .view-text {
  transform: translateY(0);
}

.project-link:hover .img-placeholder {
  transform: scale(1.05);
}

.project-link:hover .img-placeholder svg {
  transform: scale(1.1) rotate(5deg);
  opacity: 1;
}

.project-info {
  padding: var(--sp-2) 0;
}

.project-title {
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: -0.5px;
  margin-bottom: var(--sp-1);
  transition: color 0.3s;
}

.project-link:hover .project-title {
  color: var(--purple-light);
}

.project-subtitle {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--sp-3);
}

.project-desc {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.project-tags span {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--text-muted);
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

/* --- About Section --- */
.about {
  padding: var(--sp-24) var(--sp-10);
  background: var(--bg-elevated);
}

.about-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--sp-16);
}

.about-left {
  position: sticky;
  top: 120px;
  align-self: start;
}

.about-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 4px;
  color: var(--text-muted);
  margin-bottom: var(--sp-4);
}

.about-title {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: 6px;
  line-height: 1.1;
  margin-bottom: var(--sp-8);
}

.education {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-10);
}

.edu-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.edu-degree {
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-primary);
}

.edu-school {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-secondary);
}

.about-stats {
  display: flex;
  gap: var(--sp-6);
}

.stat {
  flex: 1;
  position: relative;
  padding: var(--sp-5) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-align: center;
  transition: border-color 0.3s ease, transform 0.3s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
}

.stat::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--purple-primary), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.stat:hover {
  border-color: var(--purple-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px var(--purple-glow);
}

.stat:hover::before {
  opacity: 1;
}

.stat-num {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  letter-spacing: -1px;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: var(--sp-6);
}

.stat-label {
  font-size: var(--text-xs);
  letter-spacing: 2px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-top: 0;
}

.experience-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
}

.exp-item {
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--border);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.exp-item:last-child {
  border-bottom: none;
}

.exp-date {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 2px;
  color: var(--purple-primary);
  display: block;
  margin-bottom: var(--sp-2);
}

.exp-company {
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: -0.5px;
  margin-bottom: var(--sp-1);
}

.exp-role {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--sp-2);
}

.exp-desc {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-muted);
}

/* --- Contact Section --- */
.contact {
  padding: var(--sp-24) var(--sp-10);
  background: var(--bg);
}

.contact-inner {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.contact-label {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 4px;
  color: var(--text-muted);
  margin-bottom: 0;
}

.contact-title {
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 300;
  letter-spacing: -2px;
  line-height: 1.1;
  margin-bottom: var(--sp-16);
}

.contact-links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  margin-bottom: var(--sp-20);
}

.link-label {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 2px;
  color: var(--text-muted);
}

.link-value {
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--text-primary);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  padding-top: var(--sp-10);
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* --- Scroll Animation Classes --- */
.fade-in-up {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}

.fade-in-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children inside sections */
.stagger-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.stagger-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Enhanced card transitions */
.project-card {
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

.project-img {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--sp-4);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}

.project-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-link:hover .project-img {
  box-shadow: 0 30px 60px rgba(0,0,0,0.4), 0 0 30px var(--purple-glow);
}

/* About section fade-in stagger for exp-items */
.exp-item {
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.edu-item {
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

/* Contact link hover enhancement */
.contact-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: all 0.4s var(--ease-out);
}

.contact-link:hover {
  border-color: var(--purple-primary);
  background: rgba(139, 92, 246, 0.05);
  transform: translateX(8px);
  box-shadow: -4px 0 0 var(--purple-primary);
}

/* Filter pill hover animation */
.filter {
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: all 0.3s var(--ease-out), transform 0.2s var(--ease-out);
}

/* --- Project Detail Page --- */
.project-detail {
  padding: calc(var(--nav-h) + var(--sp-10)) var(--sp-10) var(--sp-24);
  min-height: 100vh;
  animation: detailFadeIn 0.6s var(--ease-out);
}

@keyframes detailFadeIn {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.detail-container {
  max-width: 1400px;
  margin: 0 auto;
}

.detail-back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-8);
  transition: all 0.3s var(--ease-out);
}

.detail-back:hover {
  color: var(--purple-light);
  border-color: var(--purple-primary);
}

.detail-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-10);
  align-items: center;
  margin-bottom: var(--sp-16);
}

.detail-title {
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -1px;
  margin-bottom: var(--sp-3);
  white-space: nowrap;
}

.detail-subtitle {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--sp-8);
}

/* Feature List */
.detail-features {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  margin-bottom: var(--sp-8);
}

.detail-feature {
  display: flex;
  gap: var(--sp-5);
  align-items: flex-start;
}

.feature-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: var(--radius-md);
  color: var(--purple-light);
  flex-shrink: 0;
}

.feature-icon svg {
  width: 24px;
  height: 24px;
}

.feature-text h3 {
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: var(--sp-1);
}

.feature-text p {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Tech Stack */
.detail-tech {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.tech-label {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 2px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.tech-tags {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.tech-tags span {
  font-size: var(--text-xs);
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
}

/* Preview Area */
.detail-preview {
  display: flex;
  align-items: center;
  justify-content: center;
}

.detail-preview img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.preview-placeholder {
  color: var(--text-muted);
  font-size: var(--text-sm);
  letter-spacing: 2px;
}

/* Summary Card */
.detail-summary {
  background: linear-gradient(135deg, var(--purple-dark) 0%, var(--purple-primary) 50%, #6D28D9 100%);
  border-radius: var(--radius-xl);
  padding: var(--sp-10);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-10);
  align-items: center;
}

.summary-text h3 {
  font-size: var(--text-base);
  font-weight: 600;
  color: #fff;
  margin-bottom: var(--sp-4);
}

.summary-text p {
  font-size: var(--text-sm);
  line-height: 1.8;
  color: rgba(255,255,255,0.85);
}

.summary-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}

.summary-stat {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.summary-num {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: #fff;
  line-height: 1;
}

.summary-label {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.7);
  letter-spacing: 1px;
}

/* --- Detail Sub-Sections --- */
.detail-section {
  margin-top: var(--sp-24);
}

.detail-section-center + .detail-section {
  margin-top: var(--sp-10);
}

.section-header-detail {
  margin-bottom: var(--sp-10);
}

.section-number {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--purple-primary);
  margin-right: var(--sp-3);
}

.section-tag {
  font-size: var(--text-sm);
  color: var(--text-muted);
  letter-spacing: 1px;
}

.section-title-detail {
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: var(--sp-4);
}

.detail-section-center .section-title-detail,
.detail-section-center .detail-section-desc {
  text-align: center;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.section-content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
}

.text-bold {
  font-weight: 800;
}

/* Brand Top: desc + logo */
.brand-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-10);
  align-items: start;
  margin-top: 0;
  margin-bottom: var(--sp-12);
}

.brand-desc {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.brand-desc p {
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--text-secondary);
  margin-top: 0;
}

.brand-logo-display {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  padding-top: var(--sp-4);
  min-height: 200px;
}

/* Elliptical ring at the bottom of LM */
.star-ring {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  height: 60px;
}

.star-ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(139, 92, 246, 0.35);
  border-radius: 50%;
  animation: ringPulse 4s ease-in-out infinite;
}

.star-ring::after {
  content: '';
  position: absolute;
  inset: -18px;
  border: 1px dashed rgba(139, 92, 246, 0.2);
  border-radius: 50%;
  animation: ringPulse 4s ease-in-out infinite 2s;
}

@keyframes ringPulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.03); }
}

.logo-3d {
  position: relative;
  z-index: 1;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}


.logo-float {
  animation: logoFloat 4s ease-in-out infinite;
}

@keyframes logoFloat {
  0%, 100% {
    transform: translateY(0px) scale(1);
    filter: drop-shadow(0 0 40px var(--purple-glow)) drop-shadow(0 0 80px rgba(139, 92, 246, 0.15));
  }
  50% {
    transform: translateY(-10px) scale(1.02);
    filter: drop-shadow(0 0 50px rgba(139, 92, 246, 0.45)) drop-shadow(0 0 100px rgba(139, 92, 246, 0.2));
  }
}

.logo-3d img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 40px var(--purple-glow)) drop-shadow(0 0 80px rgba(139, 92, 246, 0.15));
}

/* Orbiting stars on elliptical path */
.orbit-star {
  position: absolute;
  background: var(--purple-light);
  border-radius: 50%;
  box-shadow: 0 0 10px 2px var(--purple-primary);
  bottom: 40px;
  left: 50%;
}

.orbit-star:nth-child(2) {
  width: 6px;
  height: 6px;
  animation: ellipseOrbit1 6s linear infinite;
}

.orbit-star:nth-child(3) {
  width: 4px;
  height: 4px;
  opacity: 0.8;
  animation: ellipseOrbit2 8s linear infinite;
}

.orbit-star:nth-child(4) {
  width: 3px;
  height: 3px;
  opacity: 0.6;
  animation: ellipseOrbit3 10s linear infinite;
}

@keyframes ellipseOrbit1 {
  0%   { transform: translate(160px, 0); z-index: 2; }
  25%  { transform: translate(0, -40px); z-index: 2; }
  50%  { transform: translate(-160px, 0); z-index: 0; }
  75%  { transform: translate(0, 40px); z-index: 0; }
  100% { transform: translate(160px, 0); z-index: 2; }
}

@keyframes ellipseOrbit2 {
  0%   { transform: translate(-178px, 0); z-index: 0; }
  25%  { transform: translate(0, 44px); z-index: 0; }
  50%  { transform: translate(178px, 0); z-index: 2; }
  75%  { transform: translate(0, -44px); z-index: 2; }
  100% { transform: translate(-178px, 0); z-index: 0; }
}

@keyframes ellipseOrbit3 {
  0%   { transform: translate(0, 34px); z-index: 0; }
  25%  { transform: translate(140px, 0); z-index: 2; }
  50%  { transform: translate(0, -34px); z-index: 2; }
  75%  { transform: translate(-140px, 0); z-index: 0; }
  100% { transform: translate(0, 34px); z-index: 0; }
}

/* Brand Grid: concept + colors */
.brand-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
}

.brand-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
}

.brand-card-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.brand-card-header .card-icon {
  color: var(--purple-primary);
  font-size: var(--text-xs);
}

.brand-card-header h3 {
  font-size: var(--text-base);
  font-weight: 600;
}

.brand-card-header .card-tag {
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: 2px;
  margin-left: var(--sp-4);
}

/* Logo Evolution */
.logo-evolution {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: var(--sp-8);
}

.evo-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  text-align: center;
  flex: 1;
}

.evo-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-card);
}

.evo-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.evo-step p {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-primary);
}

.evo-arrow {
  color: var(--text-muted);
  font-size: var(--text-base);
  flex-shrink: 0;
  margin-top: 20px;
}

/* Second header inside same card */
.brand-card > .brand-card-header:not(:first-child) {
  margin-top: 0;
}

/* Color Grid */
.color-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}

.color-card-full {
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.color-card-top {
  background: var(--card-bg);
  color: var(--card-text);
  padding: var(--sp-4) var(--sp-5) var(--sp-3);
}

.color-card-top .color-name {
  display: block;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--card-text);
  margin-bottom: 1px;
}

.color-card-top .color-role {
  font-size: var(--text-xs);
  letter-spacing: 2px;
  opacity: 0.7;
  color: var(--card-text);
}

.color-card-values {
  background: var(--card-bg);
  padding: var(--sp-3) var(--sp-5) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.cv-row {
  display: flex;
  gap: var(--sp-4);
}

.cv-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--card-text);
  opacity: 0.85;
  width: 42px;
  flex-shrink: 0;
}

.cv-value {
  font-size: var(--text-xs);
  color: var(--card-text);
}

.color-opacity-bar {
  display: flex;
}

.color-opacity-bar span {
  flex: 1;
  height: 32px;
}

.color-opacity-labels {
  display: flex;
  background: var(--card-bg);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: var(--sp-2) 0;
}

.color-opacity-labels span {
  flex: 1;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--card-text);
  opacity: 0.5;
}

/* Clear Space & Min Size */
.brand-card-full {
  margin-top: 0;
}

.card-divider {
  height: 1px;
  background: var(--border);
  margin: var(--sp-8) 0;
}

.clearspace-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-8);
  align-items: center;
}

.clearspace-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}

.clearspace-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cs-logo-box {
  position: relative;
  width: 64px;
  height: 64px;
  background: var(--purple-primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 16px rgba(139, 92, 246, 0.08), 0 0 0 17px rgba(139, 92, 246, 0.15);
}

.cs-logo-text {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: #fff;
}

.cs-mark {
  position: absolute;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.cs-mark.cs-top { top: -20px; left: 50%; transform: translateX(-50%); }
.cs-mark.cs-right { right: -24px; top: 50%; transform: translateY(-50%); }
.cs-mark.cs-bottom { bottom: -20px; left: 50%; transform: translateX(-50%); }
.cs-mark.cs-left { left: -24px; top: 50%; transform: translateY(-50%); }

.cs-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
}

.cs-label.cs-label-small {
  font-size: var(--text-xs);
}

.cs-label-small {
  font-size: var(--text-xs);
}

.cs-icon-small {
  width: 48px;
  height: 48px;
  background: var(--purple-primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: #fff;
}

.cs-icon-tiny {
  width: 36px;
  height: 36px;
  background: var(--purple-primary);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  color: #fff;
}

.cs-size {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}


/* Detail Hero Image Effects */
.detail-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
  position: relative;
}

.preview-3d-img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  transform-style: preserve-3d;
  will-change: transform;
  border-radius: var(--radius-lg);
}

.video-editor-hero-img.preview-3d-img {
  width: 135%;
  max-width: 135%;
}

.lf-hero-img.preview-3d-img {
  width: 110%;
  max-width: 110%;
  border-radius: 0;
}

#littleFreddieDetail .detail-preview::before {
  display: none;
}

#littleFreddieDetail .detail-hero {
  grid-template-columns: 7fr 4fr;
}

@keyframes gentleSway {
  0% {
    transform: perspective(1200px) rotateX(0deg) rotateY(0deg) translateY(0);
  }
  25% {
    transform: perspective(1200px) rotateX(2deg) rotateY(-3deg) translateY(-6px);
  }
  50% {
    transform: perspective(1200px) rotateX(-1deg) rotateY(3deg) translateY(0);
  }
  75% {
    transform: perspective(1200px) rotateX(1.5deg) rotateY(-2deg) translateY(-4px);
  }
  100% {
    transform: perspective(1200px) rotateX(0deg) rotateY(0deg) translateY(0);
  }
}

.detail-preview::before {
  content: '';
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at center, rgba(139, 92, 246, 0.15) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}

.detail-animate-right.is-visible .detail-preview::before {
  opacity: 1;
}

/* Parallax scroll effect */
.detail-hero-parallax {
  transform: translateY(0) scale(1);
  transition: transform 0.3s ease-out;
}


.hero-img-reveal {
  animation: heroImgReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.preview-3d-img.hero-img-reveal {
  animation: heroImgReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards, gentleSway 6s ease-in-out 1.2s infinite;
}

@keyframes heroImgReveal {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.96);
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes heroImgGlow {
  0%, 100% {
    filter: drop-shadow(0 0 20px rgba(139, 92, 246, 0.12));
  }
  50% {
    filter: drop-shadow(0 0 40px rgba(139, 92, 246, 0.22));
  }
}

/* Detail Section Description */
.detail-section-desc {
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--text-secondary);
  max-width: 800px;
  margin-top: 0;
  margin-bottom: var(--sp-4);
}

/* Responsive Layout Grid */
.responsive-grid {
  display: flex;
  justify-content: center;
  gap: var(--sp-4);
  align-items: flex-start;
}

.resp-card {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: center;
}

.resp-screen {
  display: flex;
  align-items: center;
  justify-content: center;
}

.resp-screen img {
  height: 260px;
  width: auto;
  display: block;
}

.resp-browser-bar {
  display: flex;
  gap: 5px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}

.resp-browser-bar span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-light);
}

.resp-content {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-2);
  flex: 1;
}

.resp-sidebar {
  width: 20%;
  background: rgba(139, 92, 246, 0.08);
  border-radius: var(--radius-sm);
}

.resp-main {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
}

.resp-1920 .resp-main {
  grid-template-columns: repeat(4, 1fr);
}

.resp-block {
  background: rgba(139, 92, 246, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.1);
  border-radius: var(--radius-sm);
}

.resp-1440 .resp-content {
  padding: var(--sp-2) var(--sp-3);
}

.resp-label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-align: center;
}

/* Agent Development Layout */
.agent-layout {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--sp-12);
  align-items: start;
}

.agent-left {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.agent-left .section-title-detail {
  margin-bottom: 0;
}

.agent-text-block {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.agent-card-title {
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: 0;
  color: var(--text-primary);
}

.agent-card-desc {
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--text-secondary);
}

.agent-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.agent-list li {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--text-secondary);
  padding-left: var(--sp-4);
  position: relative;
}

.agent-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--purple-primary);
}

/* Agent Screens 2x2 Grid */
.agent-right {
  display: flex;
}

.agent-screens {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  width: 100%;
}

.agent-screen-placeholder {
  aspect-ratio: 16/10;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.agent-screen-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
  border: 1px solid var(--border);
}

/* Prompt Development Section */
.prompt-context {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  margin-bottom: var(--sp-12);
}

.prompt-context-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
}

.prompt-context-card h3 {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--sp-3);
}

.prompt-context-card p {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: var(--sp-1);
}

.prompt-steps {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0;
  margin-bottom: var(--sp-12);
  width: 100%;
}

.prompt-step {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: 999px;
  padding: 6px 24px 6px 6px;
  position: relative;
  z-index: 2;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.prompt-step:hover {
  transform: translateY(-4px) scale(1.05);
  background: var(--bg-card);
  border-color: var(--purple-primary);
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.25), 0 0 0 1px rgba(139, 92, 246, 0.1);
}

.prompt-step:hover .step-num {
  background: linear-gradient(135deg, var(--purple-light), #C4B5FD);
  box-shadow: 0 0 30px rgba(139, 92, 246, 0.6), 0 4px 16px rgba(139, 92, 246, 0.4);
  transform: scale(1.1);
}

.prompt-step:hover .step-label {
  color: var(--purple-light);
}

/* Step Animation */
.prompt-step-animate {
  opacity: 0;
  transform: translateY(40px) scale(0.85);
}

.prompt-step-animate.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.prompt-step-animate:nth-child(1) { transition-delay: 0s; }
.prompt-step-animate:nth-child(3) { transition-delay: 0.2s; }
.prompt-step-animate:nth-child(5) { transition-delay: 0.4s; }
.prompt-step-animate:nth-child(7) { transition-delay: 0.6s; }

.prompt-step-animate.is-visible .step-num {
  background: linear-gradient(135deg, var(--purple-primary), var(--purple-light));
  color: #fff;
  box-shadow: 0 0 20px var(--purple-glow), 0 4px 12px rgba(139, 92, 246, 0.3);
  animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 20px var(--purple-glow), 0 4px 12px rgba(139, 92, 246, 0.3);
  }
  50% {
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.5), 0 4px 16px rgba(139, 92, 246, 0.4);
  }
}

.step-num {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--purple-primary);
  background: rgba(139, 92, 246, 0.15);
  border-radius: 50%;
  flex-shrink: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.step-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Connecting gradient bars */
.prompt-step-connector {
  flex: 1;
  height: 48px;
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.05) 0%, rgba(139, 92, 246, 0.12) 100%);
  position: relative;
  z-index: 1;
  clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 70%);
  margin-right: -20px;
  min-width: 60px;
  overflow: hidden;
}

.prompt-connector-animate::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(139, 92, 246, 0) 0%, rgba(167, 139, 250, 0.7) 50%, rgba(139, 92, 246, 0) 100%);
  transform: translateX(-100%);
  opacity: 0;
}

.prompt-step-animate.is-visible + .prompt-connector-animate::after,
.prompt-connector-animate.is-visible::after {
  opacity: 1;
  animation: connectorSweep 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes connectorSweep {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.prompt-screen-stack {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--sp-8);
  display: flex;
  justify-content: center;
  align-items: center;
}

.prompt-layer {
  width: 35%;
  height: auto;
  display: block;
  box-shadow: none;
  border-radius: 0;
  border: none;
  flex-shrink: 0;
  margin-left: -5%;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.prompt-layer:first-child {
  margin-left: 0;
}

.prompt-layer.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.prompt-layer-1 {
  z-index: 1;
  width: 50%;
  transition-delay: 0s;
}

.prompt-layer-1.is-visible {
  transform: translateY(0);
}

.prompt-layer-2 {
  z-index: 2;
  margin-left: -20%;
  transition-delay: 0.25s;
}

.prompt-layer-2.is-visible {
  transform: translateY(-24px);
}

.prompt-layer-3 {
  z-index: 3;
  transition-delay: 0.5s;
}

.prompt-layer-3.is-visible {
  transform: translateY(-24px);
}

.prompt-layer-4 {
  z-index: 4;
  transition-delay: 0.75s;
}

.prompt-layer-4.is-visible {
  transform: translateY(-24px);
}

/* Evaluation Center Screens */
.eval-screens {
  display: flex;
  gap: var(--sp-5);
  align-items: flex-start;
  overflow-x: auto;
}

.eval-screen-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex-shrink: 0;
}

.eval-screen-item.eval-large {
  width: 280px;
}

.eval-screen-item.eval-small {
  width: 160px;
}

.eval-screen-placeholder {
  width: 100%;
  height: 264px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.eval-screen-label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.5;
}

.eval-center-img {
  width: 100%;
}

.eval-center-img img {
  width: 100%;
  height: auto;
  display: block;
}
/* Design Principles Layout */
.design-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12);
  align-items: start;
}

.design-left {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
}

.design-block h3 {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--sp-3);
  line-height: 1.5;
}

.design-block p {
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--text-secondary);
  margin-bottom: var(--sp-2);
}

.design-block p:last-child {
  margin-bottom: 0;
}

.design-screen-placeholder {
  width: 100%;
  aspect-ratio: 16/11;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  position: sticky;
  top: calc(var(--nav-h) + var(--sp-8));
}

/* Create Evaluator Section */
.evaluator-section {
  margin-top: var(--sp-24);
}

.evaluator-modes-title {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto var(--sp-12);
  min-height: 40px;
  max-width: 800px;
}

.evaluator-line {
  position: absolute;
  width: 100%;
  max-width: 607px;
  height: 6px;
  object-fit: cover;
}

.evaluator-modes-title span {
  position: relative;
  z-index: 1;
  padding: 0 var(--sp-4);
  background: #0A0A0A;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.7;
}

.evaluator-row {
  display: flex;
  gap: var(--sp-8);
  align-items: stretch;
  justify-content: space-between;
  max-width: 1400px;
  margin: 0 auto;
}

.evaluator-main-img {
  display: block;
  width: 738px;
  height: 461px;
  flex-shrink: 0;
}

.evaluator-mode-card {
  width: 229px;
  height: 461px;
  flex-shrink: 0;
  overflow: hidden;
}

.evaluator-mode-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}



/* Evaluation Task Layout */
.eval-task-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12);
  align-items: start;
  margin-bottom: var(--sp-6);
}

.eval-task-text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.eval-task-desc {
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--text-secondary);
}

.eval-task-img-side .eval-task-placeholder {
  width: 100%;
  aspect-ratio: 16/10;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.eval-task-bottom {
  display: flex;
  gap: var(--sp-6);
  align-items: flex-end;
  margin-top: -40px;
}

.eval-task-img-half {
  flex: 1;
  min-width: 0;
}

.eval-task-img-half img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.eval-task-img-half:first-child img {
  transform: scale(0.864);
  transform-origin: bottom left;
}

/* Full Screen Image Section */
.detail-fullscreen-img {
  width: 100%;
  margin-top: var(--sp-24);
  margin-bottom: var(--sp-24);
}

.detail-fullscreen-img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
}

/* --- Detail Page Scroll Animations --- */
.detail-animate {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.detail-animate.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.detail-animate-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.detail-animate-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.detail-animate-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.detail-animate-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.detail-animate-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.detail-animate-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays */
.detail-delay-1 { transition-delay: 0.1s; }
.detail-delay-2 { transition-delay: 0.2s; }
.detail-delay-3 { transition-delay: 0.3s; }
.detail-delay-4 { transition-delay: 0.4s; }

/* --- Back to Top Button --- */
.back-to-top {
  position: fixed;
  bottom: var(--sp-8);
  right: var(--sp-8);
  width: 48px;
  height: 48px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s var(--ease-out);
  z-index: 999;
  cursor: pointer;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--purple-primary);
  border-color: var(--purple-primary);
  color: var(--text-primary);
  box-shadow: 0 4px 20px var(--purple-glow);
  transform: translateY(-4px);
}

.back-to-top svg {
  width: 20px;
  height: 20px;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .projects-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--sp-8);
  }

  .about-inner {
    grid-template-columns: 1fr;
    gap: var(--sp-16);
  }

  .about-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  :root {
    --nav-h: 72px;
  }

  .nav {
    padding: 0 var(--sp-6);
  }

  .nav-links {
    display: none;
  }

  .nav-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: transparent;
    margin-left: var(--sp-3);
  }

  .nav-resume {
    padding: 0;
    width: 44px;
    height: 44px;
    justify-content: center;
    border-radius: var(--radius-md);
    margin-top: 0;
  }

  .nav-resume .resume-text {
    display: none;
  }

  .nav-resume svg {
    width: 20px;
    height: 20px;
  }

  .hero {
    padding: var(--nav-h) var(--sp-6) var(--sp-12);
  }

  .hero-title {
    font-size: clamp(48px, 12vw, 80px);
  }

  .hero-label {
    font-size: clamp(20px, 4vw, 32px);
    letter-spacing: 6px;
  }

  .hero-nameplate {
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-4);
  }

  .hero-brace {
    font-size: clamp(18px, 3.5vw, 28px);
  }

  .hero-meta {
    flex-direction: column;
    gap: var(--sp-2);
  }

  .hero-meta .dot {
    display: none;
  }

  .work,
  .about,
  .contact {
    padding: var(--sp-16) var(--sp-6);
  }

  .projects-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
  }

  .about-left {
    position: relative;
    top: auto;
  }

  .about-stats {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .contact-link {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
  }

  .footer-bottom {
    flex-direction: column;
    gap: var(--sp-2);
    text-align: center;
  }
}

@media (max-width: 480px) {
  .filters {
    gap: var(--sp-2);
  }

  .filter {
    font-size: var(--text-xs);
    padding: var(--sp-1) var(--sp-3);
  }

  .project-title {
    font-size: var(--text-base);
  }

  .about-title {
    font-size: clamp(32px, 8vw, 48px);
  }

  .contact-title {
    font-size: clamp(32px, 10vw, 56px);
  }
}

/* Hide cursor on touch devices */
@media (hover: none) {
  .cursor,
  .cursor-dot {
    display: none;
  }

  body {
    cursor: auto;
  }

  button,
  a {
    cursor: pointer;
  }
}

/* ═══════════════════════════════════════
   Hanlin Guan Brand Detail Page Styles
   ═══════════════════════════════════════ */

.hanlin-hero-banner {
  width: 100%;
  height: 500px;
  background: url('bg-hanlin.png') center/cover no-repeat;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  margin-bottom: var(--sp-16);
}

.hanlin-logo-center {
  width: 250px;
  height: auto;
  filter: drop-shadow(0 0 40px rgba(139, 115, 85, 0.6));
  animation: float 6s ease-in-out infinite;
}

.hanlin-logo-center img {
  width: 100%;
  height: auto;
  display: block;
}

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

/* Hanlin Logo Design Layout */
.hanlin-logo-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12);
  align-items: center;
}

.hanlin-logo-left {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hanlin-logo-left img {
  width: 320px;
  height: auto;
  display: block;
}

.hanlin-design-right {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  align-items: flex-end;
}

.hanlin-bamboo-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
}

.hanlin-bamboo-grid img {
  width: 140px;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.hanlin-bamboo-grid .evo-arrow {
  font-size: var(--text-base);
  color: var(--text-secondary);
  opacity: 0.5;
  flex-shrink: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  align-self: center;
  transform: translateY(-2px);
}

.hanlin-bihua-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  width: 100%;
  max-width: calc(140px * 4 + var(--sp-4) * 6 + 1em * 3);
}

.hanlin-bihua-grid img {
  flex: 1;
  min-width: 0;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
}

.hanlin-text-banner {
  width: 100%;
  max-width: calc(140px * 4 + var(--sp-4) * 6 + 1em * 3);
}

.hanlin-text-banner img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
}

.hanlin-culture-svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-xl);
}

@media (max-width: 768px) {
  .hanlin-hero-banner { height: 350px; }
  .hanlin-logo-center { width: 180px; }
  .spark-hero-banner { height: 350px; }
  .hanlin-logo-layout { grid-template-columns: 1fr; gap: var(--sp-8); }
  .hanlin-logo-left { max-width: 280px; margin: 0 auto; }
}

/* ═══════════════════════════════════════
   Other Logo Works Detail Page Styles
   ═══════════════════════════════════════ */

.logo-hero-banner {
  width: 100%;
  height: 500px;
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  margin-bottom: var(--sp-16);
}

.logo-hero-center {
  width: 350px;
  height: auto;
  filter: drop-shadow(0 0 40px rgba(0, 0, 0, 0.3));
  animation: float 6s ease-in-out infinite;
}

.logo-hero-center img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  .logo-hero-banner { height: 350px; }
  .logo-hero-center { width: 180px; }
}

/* Logo Design Process Layout */
.logo-design-layout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-16);
  align-items: stretch;
}

.logo-design-left {
  display: flex;
  align-items: stretch;
}

.logo-display-large {
  width: auto;
  height: 100%;
  max-width: 300px;
  display: block;
  border-radius: var(--radius-lg);
  object-fit: cover;
}

/* 延伸方案的 logo 保持原始比例 */
.logo-design-layout-variant .logo-design-left {
  align-items: center;
}

.logo-display-variant {
  width: 300px;
  height: auto;
  object-fit: contain;
}

/* 延伸方案的三张图缩小到 40% */
.logo-design-layout-variant .process-img {
  max-width: 120px;
}

.logo-design-layout-variant .section-title-detail {
  font-size: var(--text-lg);
}

.logo-design-right {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}

.logo-design-block {
  display: flex;
  flex-direction: column;
}

.logo-design-block .detail-section-desc {
  max-width: 100%;
  text-align: justify;
}

.logo-process-grid {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

.process-img {
  flex: 1;
  min-width: 0;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
}

.process-arrow {
  font-size: var(--text-base);
  color: var(--text-secondary);
  opacity: 0.5;
  flex-shrink: 0;
}

.logo-variants-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-top: var(--sp-4);
}

.variant-logo-main {
  flex: 0 0 auto;
  width: 192px;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  background: #fff;
  padding: var(--sp-4);
  aspect-ratio: 4/3;
  object-fit: contain;
}

.logo-variants-right {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.variant-img {
  flex: 0 0 auto;
  width: 50%;
  max-width: 125px;
  height: auto;
  display: block;
}

.variant-item {
  flex: 1;
  min-width: 0;
}

.variant-placeholder {
  width: 100%;
  aspect-ratio: 1;
  background: var(--bg-card);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
}

@media (max-width: 768px) {
  .logo-design-layout {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .logo-design-left {
    position: static;
  }

  .logo-process-grid,
  .logo-variants-grid {
    flex-wrap: wrap;
  }
}

/* Logo Collection Grid */
.logo-collection-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}

.logo-collection-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-collection-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
}

@media (max-width: 768px) {
  .logo-collection-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ═══════════════════════════════════════
   Video Editor Detail Page Styles
   ═══════════════════════════════════════ */

.video-bg-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-10);
  align-items: stretch;
  margin-top: var(--sp-8);
}

.video-bg-left {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  height: 100%;
}

.video-editor-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  flex: 0.4;
}

.video-editor-row .video-editor-card {
  height: 100%;
}

.video-bg-left > .video-editor-card {
  flex: 1.6;
}

.video-bg-right {
  display: flex;
  align-items: stretch;
}

.video-editor-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.video-editor-card-compact {
  padding: var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-editor-card-compact .video-editor-roles {
  margin: 0;
}

.video-editor-card-split {
  flex-direction: row;
  gap: var(--sp-8);
  align-items: center;
}

.card-split-left {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.card-split-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.video-editor-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.video-editor-card-title {
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: -0.5px;
  color: var(--text-primary);
}

.video-editor-card-icon {
  font-size: 28px;
}

.video-editor-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.video-editor-roles-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-editor-roles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: var(--sp-6) var(--sp-8);
  justify-items: center;
  margin: var(--sp-2) 0;
  position: relative;
  padding: var(--sp-4);
}

.video-editor-roles .role-item:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
}

.video-editor-roles .role-item:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
  margin-top: var(--sp-8);
}

.video-editor-roles .role-item:nth-child(3) {
  grid-column: 1 / 3;
  grid-row: 2;
  justify-self: center;
  margin-left: var(--sp-8);
}

.role-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}

.role-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.role-label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-weight: 500;
}

.video-editor-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.video-editor-list li {
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--text-secondary);
  padding-left: var(--sp-5);
  position: relative;
}

.video-editor-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--text-muted);
}

.video-flow-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-lg);
  cursor: pointer;
}

/* Lightbox hover overlay - applied to parent containers */
.video-bg-right,
.solution-screen-wrapper,
.courseware-main-img,
.courseware-side-img {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.video-bg-right::after,
.solution-screen-wrapper::after,
.courseware-main-img::after,
.courseware-side-img::after {
  content: '点击放大查看原图';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  letter-spacing: 2px;
  border-radius: var(--radius-lg);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}

.video-bg-right:hover::after,
.solution-screen-wrapper:hover::after,
.courseware-main-img:hover::after,
.courseware-side-img:hover::after {
  opacity: 1;
}

@media (max-width: 768px) {
  .video-bg-layout {
    grid-template-columns: 1fr;
  }

  .video-editor-roles {
    gap: var(--sp-4);
  }
}

/* ═══════════════════════════════════════
   Solution Flow Styles
   ═══════════════════════════════════════ */

.solution-flow {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-bottom: var(--sp-12);
  position: relative;
}

.solution-avatar {
  flex-shrink: 0;
  animation: fadeInScale 0.6s ease-out;
  position: absolute;
  left: 0;
  top: 0;
  transform: translateX(-30%) translateY(-10%);
  z-index: 2;
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: translateX(-30%) translateY(-10%) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateX(-30%) translateY(-10%) scale(1);
  }
}

.solution-steps {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
}

.solution-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s ease-out forwards;
}

.solution-step-card {
  width: 100%;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-5);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.solution-step-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.15);
}

.solution-step:first-child .solution-step-card {
  padding-left: calc(var(--sp-5) + 40px);
}

.solution-step:nth-child(1) {
  animation-delay: 0.1s;
}

.solution-step:nth-child(3) {
  animation-delay: 0.2s;
}

.solution-step:nth-child(5) {
  animation-delay: 0.3s;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.solution-step:hover {
}

.solution-step-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
}

.solution-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
}

.solution-tag {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 999px;
  padding: var(--sp-1) var(--sp-3);
}

.solution-arrow {
  font-size: var(--text-base);
  color: var(--text-secondary);
  opacity: 0.5;
  display: flex;
  align-items: center;
  align-self: flex-start;
  flex-shrink: 0;
  margin-top: var(--sp-4);
}

.solution-screens {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-8);
}

.solution-screen-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--sp-6) var(--sp-5);
}

.solution-screen-desc {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-secondary);
  text-align: center;
}

.solution-screen-wrapper {
  width: 100%;
}

@media (max-width: 768px) {
  .solution-flow {
    flex-direction: column;
  }

  .solution-steps {
    flex-direction: column;
  }

  .solution-screens {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════
   Courseware Module Styles
   ═══════════════════════════════════════ */

.courseware-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--sp-10);
  align-items: stretch;
}

.courseware-left {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  height: 100%;
}

.courseware-main-img {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: stretch;
}

.courseware-main-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.courseware-right {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  height: 100%;
}

.courseware-side-img {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.courseware-side-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

@media (max-width: 768px) {
  .courseware-layout {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════
   Recording Interface Section
   ═══════════════════════════════════════ */

.record-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-10);
}

.record-feature-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  text-align: left;
}

.record-feature-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 24px;
  padding: 0 var(--sp-2);
  border-radius: 6px;
  background: var(--purple-primary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  margin-right: var(--sp-2);
}

.record-feature-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  display: flex;
  align-items: center;
}

.record-feature-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0;
}

.record-showcase {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
}

.record-showcase-left {
  flex-shrink: 0;
}

.record-showcase-center {
  flex: 1;
  max-width: 740px;
}

.record-showcase-right {
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .record-features {
    grid-template-columns: 1fr;
  }
  .record-showcase {
    flex-direction: column;
  }
}

/* ═══════════════════════════════════════
   Edit Preview Section
   ═══════════════════════════════════════ */

.edit-preview-desc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  text-align: left;
  margin-bottom: var(--sp-8);
}

.edit-preview-desc-item {
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--text-secondary);
}

.edit-preview-desc-item strong {
  color: var(--text-primary);
}

.edit-preview-layout {
  display: grid;
  grid-template-columns: 0.7fr 1.5fr;
  gap: var(--sp-12);
  align-items: center;
}

.edit-preview-left {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.edit-preview-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.edit-preview-list li {
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--text-secondary);
}

.edit-preview-list li strong {
  color: var(--text-primary);
}

.edit-preview-annotations {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  align-items: flex-start;
}

.edit-annotation {
  font-size: var(--text-sm);
  color: var(--purple-light);
  font-weight: 500;
}

.edit-preview-right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.edit-preview-composite {
  position: relative;
  width: 100%;
  margin-top: var(--sp-16);
}

.edit-main-img {
  width: 130%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  position: relative;
  z-index: 1;
}

.edit-overlay-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  position: absolute;
  top: 0;
  left: -300px;
  z-index: 2;
}

.edit-text-overlay {
  position: absolute;
  right: calc(var(--sp-6) + 40px);
  top: calc(-1 * var(--sp-10));
  width: 156px;
  height: auto;
  z-index: 3;
}

@media (max-width: 768px) {
  .edit-preview-layout {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════
   Edit Detail Section
   ═══════════════════════════════════════ */

.edit-detail-layout {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--sp-12);
  align-items: start;
  max-height: 55vh;
}

.edit-detail-left {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  position: sticky;
  top: var(--sp-8);
}

.edit-detail-heading {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  margin: var(--sp-4) 0 0;
}

.edit-detail-heading:first-child {
  margin-top: 0;
}

.edit-detail-desc {
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--text-secondary);
}

.edit-detail-right {
  overflow-y: auto;
  max-height: 55vh;
  padding-right: var(--sp-2);
}

.edit-detail-right::-webkit-scrollbar {
  width: 4px;
}

.edit-detail-right::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
}

.edit-detail-right img {
  width: 100%;
  max-width: none;
  display: block;
}

.edit-detail-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

@media (max-width: 768px) {
  .edit-detail-layout {
    grid-template-columns: 1fr;
  }
  .edit-detail-right {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════
   Mobile Preview Section
   ═══════════════════════════════════════ */

.mobile-preview-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-10);
  margin-top: var(--sp-8);
}

.mobile-preview-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  .mobile-preview-layout {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════
   Design Goal Section
   ═══════════════════════════════════════ */

.design-goal-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-10);
  align-items: start;
  margin-top: var(--sp-8);
}

.design-goal-left {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -60px;
}

.design-goal-right {
  display: flex;
  flex-direction: column;
  padding-top: var(--sp-6);
}

.design-goal-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.design-goal-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.15);
}

.design-goal-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.design-goal-title {
  font-size: var(--text-base);
  color: var(--text-primary);
  margin: 0;
}

.design-goal-icon {
  font-size: var(--text-lg);
}

.design-goal-desc {
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--text-secondary);
  margin: 0;
}

.design-goal-footer {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--sp-6) var(--sp-8);
  margin-top: -109px;
  position: relative;
  z-index: -1;
  text-align: left;
  display: flex;
  justify-content: flex-end;
}

.design-goal-footer-content {
  max-width: 50%;
}

.design-goal-footer-title {
  font-size: var(--text-base);
  color: var(--text-primary);
  margin: 0 0 var(--sp-3) 0;
}

.design-goal-footer-desc {
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--text-secondary);
  margin: 0;
}

@media (max-width: 768px) {
  .design-goal-layout {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════
   Mobile Screens Section
   ═══════════════════════════════════════ */

.mobile-screens-layout {
  margin-top: var(--sp-4);
  display: flex;
  justify-content: center;
}

.mobile-screens-layout img {
  width: 100%;
  max-width: none;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  .mobile-screens-layout img {
    width: 100%;
  }
}

/* ═══════════════════════════════════════
   Interaction Explanation Section
   ═══════════════════════════════════════ */

.interaction-layout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-12);
  align-items: stretch;
}

.interaction-left {
  display: flex;
  gap: var(--sp-8);
  height: 100%;
}

.interaction-phone {
  flex-shrink: 0;
  width: 280px;
  display: flex;
  align-items: center;
}

.interaction-phone img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.interaction-right {
  display: flex;
  align-items: center;
  height: 100%;
}

.interaction-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
}

.interaction-title {
  font-size: var(--text-base);
  color: var(--text-primary);
  margin: 0 0 var(--sp-4) 0;
}

.interaction-desc {
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--text-secondary);
  margin: 0 0 var(--sp-8) 0;
}

.interaction-items {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.interaction-item {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
}

.interaction-number {
  width: 24px;
  height: 24px;
  background: var(--purple-light);
  color: var(--bg-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 600;
  flex-shrink: 0;
}

.interaction-content {
  display: flex;
  gap: var(--sp-4);
  align-items: center;
  flex: 1;
}

.interaction-icon {
  width: 32px;
  height: 54px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.interaction-panel {
  width: 193px;
  height: 165px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.interaction-pages {
  width: 193px;
  height: 103px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.interaction-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .interaction-layout {
    grid-template-columns: 1fr;
  }

  .interaction-left {
    flex-direction: column;
    align-items: center;
  }
}

/* ═══════════════════════════════════════
   Interaction Layout 2 Section
   ═══════════════════════════════════════ */

.interaction-layout-2 {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: var(--sp-8);
  align-items: stretch;
}

.interaction-phones-left {
  display: flex;
  height: 100%;
}

.interaction-phone-single {
  flex-shrink: 0;
  width: 280px;
  display: flex;
  align-items: center;
  height: 100%;
}

.interaction-phone-single img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.interaction-phones-center {
  display: flex;
  flex-direction: column;
  gap: 0;
  justify-content: space-between;
  height: 100%;
}

.interaction-phone-item {
  flex-shrink: 0;
  width: 280px;
  display: flex;
  align-items: flex-start;
}

.interaction-phone-item:last-child {
  align-items: flex-end;
}

.interaction-phone-item img {
  width: 100%;
  height: auto;
  display: block;
}

.interaction-right-2 {
  display: flex;
  align-items: center;
  height: 100%;
}

@media (max-width: 768px) {
  .interaction-layout-2 {
    grid-template-columns: 1fr;
  }

  .interaction-phones-center {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* ═══════════════════════════════════════
   Exception States Section
   ═══════════════════════════════════════ */

.exception-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-8);
  margin-top: var(--sp-8);
}

.exception-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}

.exception-card {
  width: 100%;
  max-width: 414px;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.exception-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.15);
}

.exception-card img {
  width: 210px;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: var(--radius-md);
}

.exception-label {
  font-size: var(--text-base);
  color: var(--text-primary);
  text-align: center;
  margin: 0;
}

@media (max-width: 768px) {
  .exception-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════
   Image Lightbox
   ═══════════════════════════════════════ */

.img-lightbox {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.92);
  cursor: zoom-out;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.img-lightbox.active {
  display: flex;
}

.img-lightbox-content {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  border-radius: var(--radius-lg);
  transition: transform 0.15s ease;
  transform-origin: center center;
  cursor: grab;
}


/* ═══════════════════════════════════════
   H5 Activity Detail Page Styles
   ═══════════════════════════════════════ */

.h5-hero-image {
  width: 100%;
  height: 500px;
  display: block;
  border-radius: var(--radius-xl);
  object-fit: cover;
  object-position: center;
}

@media (max-width: 768px) {
  .h5-hero-image {
    height: 350px;
    border-radius: var(--radius-lg);
  }
}

/* 520 Activity Section */
.h5-520-layout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-16);
  align-items: center;
}

.h5-520-phones {
  display: flex;
  gap: var(--sp-8);
  align-items: flex-start;
}

.h5-520-phones img {
  width: 205px;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
}

.h5-520-info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}

.h5-520-goals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

.h5-520-goal-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}

.h5-520-goal-label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.8;
}

.h5-520-goal-circle {
  width: 155px;
  height: 159px;
  background-image: url('h5-520-circle-bg.png');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.h5-520-goal-title {
  font-size: var(--text-base);
  color: var(--text-primary);
  text-align: center;
  line-height: 1.8;
}

.h5-520-data {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.h5-520-data-row {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

.h5-520-data-year {
  font-size: var(--text-base);
  color: var(--text-primary);
  white-space: nowrap;
  min-width: 150px;
}

.h5-520-data-bar {
  height: 28px;
  background: #73b1bf;
  border-radius: var(--radius-sm);
  transition: width 0.3s ease;
}

.h5-520-data-value {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  white-space: nowrap;
}

@media (max-width: 768px) {
  .h5-520-layout {
    grid-template-columns: 1fr;
    gap: var(--sp-12);
  }

  .h5-520-phones {
    gap: var(--sp-4);
    justify-content: center;
  }

  .h5-520-phones img {
    width: 150px;
  }

  .h5-520-goals {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .h5-520-goal-circle {
    width: 120px;
    height: 120px;
  }

  .h5-520-data-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
  }

  .h5-520-data-year {
    min-width: auto;
  }

  .h5-520-data-bar {
    width: 100% !important;
    max-width: 200px;
  }
}

/* Page Flow Section */
.h5-flow-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  position: relative;
  min-height: 600px;
}

.h5-flow-left {
  display: flex;
  flex-direction: row;
  gap: var(--sp-6);
  align-items: center;
}

.h5-flow-left img {
  width: 151px;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
}

.h5-flow-center {
  display: flex;
  align-items: center;
}

.h5-flow-center img {
  width: 258px;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
}

.h5-flow-arrow {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
}

.h5-flow-dot {
  width: 8px;
  height: 8px;
  background: var(--text-secondary);
  border-radius: 50%;
  flex-shrink: 0;
}

.h5-flow-line {
  width: 212px;
  height: 1px;
  background: var(--text-secondary);
  flex-shrink: 0;
}

.h5-flow-triangle {
  width: 0;
  height: 0;
  border-left: 6px solid var(--text-secondary);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  flex-shrink: 0;
}

.h5-flow-arrow-label {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--text-base);
  color: var(--text-primary);
  text-align: center;
  white-space: nowrap;
  line-height: 1.8;
}

.h5-flow-arrow-label span {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.h5-flow-banners {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
}

.h5-flow-banners img {
  width: 214px;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
}

@media (max-width: 768px) {
  .h5-flow-layout {
    flex-direction: column;
    gap: var(--sp-12);
    min-height: auto;
  }

  .h5-flow-left {
    flex-direction: row;
    gap: var(--sp-4);
  }

  .h5-flow-left img {
    width: 120px;
  }

  .h5-flow-center img {
    width: 200px;
  }

  .h5-flow-arrow {
    transform: rotate(90deg);
  }

  .h5-flow-arrow-label {
    transform: translateX(-50%) rotate(-90deg);
    top: -80px;
  }

  .h5-flow-banners {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
  }

  .h5-flow-banners img {
    width: 150px;
  }
}

/* Design Approach Section */
.h5-design-layout {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: var(--sp-12);
  align-items: stretch;
}

.h5-design-left {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  height: 100%;
}

.h5-design-keywords {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.h5-design-subtitle {
  font-size: var(--text-base);
  color: var(--text-primary);
  margin: 0;
}

.h5-design-text {
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--text-secondary);
}

.h5-design-refs {
  display: flex;
  gap: var(--sp-6);
}

.h5-design-refs img {
  flex: 1;
  min-width: 0;
  height: 183px;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-md);
}

.h5-design-right {
  height: 100%;
}

.h5-design-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-md);
}

@media (max-width: 768px) {
  .h5-design-layout {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
  }

  .h5-design-refs {
    flex-wrap: wrap;
  }

  .h5-design-refs img {
    width: calc(50% - var(--sp-2));
    height: auto;
  }
}

/* Poster Grid Section */
.poster-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}

.poster-grid img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.poster-grid img:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.15);
}

@media (max-width: 768px) {
  .poster-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
  }
}

/* Vertical Poster Grid */
.poster-vertical-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  background: var(--bg-secondary);
  padding: var(--sp-6);
  border-radius: var(--radius-lg);
}

.poster-vertical-grid img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.poster-vertical-grid img:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.15);
}

@media (max-width: 768px) {
  .poster-vertical-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Outdoor Poster Section */
.poster-outdoor-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--sp-12);
  align-items: start;
  min-height: 600px;
  position: relative;
}

.poster-outdoor-text {
  padding-top: var(--sp-8);
}

.poster-outdoor-images {
  position: relative;
  height: 800px;
  max-width: 1200px;
  margin: 0 auto;
}

.poster-outdoor-images img {
  position: absolute;
  display: block;
  border-radius: var(--radius-md);
}

/* 中间大图 */
.poster-outdoor-large {
  width: 490px;
  height: auto;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: 4;
}

/* 右侧中图 - 紧挨大图右侧 */
.poster-outdoor-medium {
  width: 334px;
  height: auto;
  left: calc(50% + 245px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

/* 右下小图 */
.poster-outdoor-small {
  width: 234px;
  height: auto;
  right: 80px;
  bottom: 80px;
  z-index: 2;
}

/* 左下宽图 */
.poster-outdoor-wide {
  width: 519px;
  height: auto;
  left: 0;
  bottom: 80px;
  z-index: 1;
}

@media (max-width: 768px) {
  .poster-outdoor-layout {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .poster-outdoor-images {
    height: 400px;
  }

  .poster-outdoor-large {
    width: 60%;
    left: 50%;
  }

  .poster-outdoor-medium {
    width: 40%;
    right: 0;
  }

  .poster-outdoor-small {
    width: 35%;
    right: 10px;
  }

  .poster-outdoor-wide {
    width: 70%;
    left: 0;
  }
  }
}

/* H5 Mobile Page Section */
.h5-mobile-section {
  background: #000000;
  position: relative;
  min-height: 900px;
  overflow: hidden;
  padding: var(--sp-24) 0;
}

.h5-mobile-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.6;
}

.h5-mobile-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.h5-mobile-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 480px 1fr;
  gap: var(--sp-12);
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--sp-8);
}

.h5-mobile-text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  max-width: 480px;
}

.h5-mobile-steps {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
  max-width: 375px;
}

.h5-step-item {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-md);
  transition: background 0.3s ease;
}

.h5-step-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.h5-step-number {
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-base);
  font-weight: 600;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.h5-step-text {
  font-size: var(--text-base);
  color: #e0e0e0;
  line-height: 1.6;
  margin: 0;
  flex: 1;
}

.h5-mobile-phones {
  display: flex;
  gap: var(--sp-6);
  justify-content: flex-end;
  align-items: center;
}

.h5-mobile-phones img {
  height: 617px;
  width: auto;
  display: block;
  border-radius: var(--radius-lg);
}

.h5-mobile-phones img:last-child {
  width: 117px;
  height: 617px;
  object-fit: cover;
}

@media (max-width: 768px) {
  .h5-mobile-section {
    min-height: auto;
    padding: var(--sp-12) 0;
  }

  .h5-mobile-content {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .h5-mobile-phones {
    justify-content: center;
    flex-wrap: wrap;
  }

  .h5-mobile-phones img {
    height: 400px;
  }

  .h5-mobile-phones img:last-child {
    width: auto;
    height: 400px;
  }
}

/* Illustration Grid */
.illustration-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-8);
  margin-top: var(--sp-8);
  align-items: start;
}

.illustration-card {
  height: 474px;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.illustration-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 16px;
}

@media (max-width: 768px) {
  .illustration-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
}

.illustration-with-bg {
  background: white;
  padding: var(--sp-6);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-radius: 16px;
}

.illustration-with-bg {
  background: white;
  padding: var(--sp-6);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-md);
}

/* Lotus Illustration Layout */
.illustration-lotus-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--sp-8);
  align-items: stretch;
}

.illustration-lotus-left {
  border-radius: 16px;
}

.illustration-lotus-left img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 16px;
  object-fit: cover;
}

.illustration-lotus-right {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  align-items: center;
  justify-content: space-between;
}

.illustration-lotus-right > img {
  width: 217px;
  height: auto;
  display: block;
}

.illustration-lotus-row {
  display: flex;
  gap: var(--sp-6);
  width: 100%;
}

.illustration-lotus-row img {
  flex: 1;
  min-width: 0;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  .illustration-lotus-layout {
    grid-template-columns: 1fr;
  }

  .illustration-lotus-right > img {
    width: 150px;
  }
}

/* Painting Practice Layout */
.illustration-paint-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--sp-6);
  align-items: stretch;
}

.illustration-paint-left {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.illustration-paint-row {
  display: flex;
  gap: var(--sp-6);
}

.illustration-paint-row img {
  flex: 1;
  min-width: 0;
  height: auto;
  display: block;
  object-fit: cover;
}

.illustration-paint-right {
  height: 100%;
}

.illustration-paint-right img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

@media (max-width: 768px) {
  .illustration-paint-layout {
    grid-template-columns: 1fr;
  }

  .illustration-paint-row {
    flex-direction: column;
  }
}

/* Illustration Detail Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Apply animations to illustration detail page */
#illustrationDetail .section-title-detail {
  animation: fadeInUp 0.6s ease-out;
}

#illustrationDetail .detail-section-desc {
  animation: fadeInUp 0.8s ease-out;
}

#illustrationDetail .illustration-card,
#illustrationDetail .illustration-lotus-left,
#illustrationDetail .illustration-lotus-right > img,
#illustrationDetail .illustration-lotus-row img,
#illustrationDetail .illustration-paint-row img,
#illustrationDetail .illustration-paint-right img {
  animation: fadeIn 1s ease-out;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#illustrationDetail .illustration-card:hover,
#illustrationDetail .illustration-lotus-left:hover,
#illustrationDetail .illustration-lotus-right > img:hover,
#illustrationDetail .illustration-lotus-row img:hover,
#illustrationDetail .illustration-paint-row img:hover,
#illustrationDetail .illustration-paint-right img:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* Stagger animation delays */
#illustrationDetail .illustration-card:nth-child(1) {
  animation-delay: 0.1s;
}

#illustrationDetail .illustration-card:nth-child(2) {
  animation-delay: 0.2s;
}

#illustrationDetail .illustration-lotus-row img:nth-child(1) {
  animation-delay: 0.2s;
}

#illustrationDetail .illustration-lotus-row img:nth-child(2) {
  animation-delay: 0.3s;
}

#illustrationDetail .illustration-paint-row:nth-child(1) img {
  animation-delay: 0.1s;
}

#illustrationDetail .illustration-paint-row:nth-child(2) img {
  animation-delay: 0.3s;
}

/* Resume Download Button */
.nav-resume {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: transparent;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  transition: all 0.3s ease;
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 2px;
}

.nav-resume::after {
  display: none;
}

.nav-resume:hover {
  color: white !important;
  border-color: white;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

.nav-resume svg {
  width: 16px;
  height: 16px;
}

/* Textbox Interaction Design Section */
.textbox-solutions {
  display: flex;
  align-items: stretch;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.textbox-solution-card {
  flex: 1;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
}

.textbox-solution-final {
  background: var(--purple-primary);
}

.textbox-solution-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: white;
  text-align: center;
  line-height: 1.7;
  margin: 0;
}

.textbox-solution-title-final {
  font-size: var(--text-base);
  font-weight: 600;
  color: white;
  text-align: center;
  line-height: 1.7;
  margin: 0;
}

.textbox-arrow {
  font-size: 24px;
  color: var(--text-secondary);
  flex-shrink: 0;
  align-self: center;
}

.textbox-tag {
  display: inline-block;
  padding: var(--sp-1) var(--sp-3);
  border-radius: 999px;
  font-size: var(--text-xs);
  white-space: nowrap;
  color: var(--text-secondary);
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.2);
}

.textbox-tag-red {
}

.textbox-tag-green {
}

.textbox-examples {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12);
}

.textbox-example-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
}

.textbox-group-title {
  font-size: var(--text-base);
  color: var(--text-primary);
  text-align: center;
  margin: 0;
}

.textbox-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}

.textbox-grid img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
}

@media (max-width: 768px) {
  .textbox-solutions {
    flex-direction: column;
  }

  .textbox-arrow {
    transform: rotate(90deg);
    align-self: center;
  }

  .textbox-examples {
    grid-template-columns: 1fr;
  }
}

/* Textbox Tags Row */
.textbox-tags-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-2);
  margin-bottom: var(--sp-16);
}

.textbox-tags-row .textbox-tag {
  flex: 1;
  text-align: center;
}

.textbox-arrow-spacer {
  width: 24px;
  flex-shrink: 0;
}

/* Video Editor Detail Animations */
#videoEditorDetail .section-title-detail {
  animation: fadeInUp 0.6s ease-out;
}

#videoEditorDetail .detail-section-desc {
  animation: fadeInUp 0.8s ease-out;
}

#videoEditorDetail .textbox-solution-card {
  animation: fadeInUp 0.6s ease-out;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#videoEditorDetail .textbox-solution-card:nth-child(1) {
  animation-delay: 0.1s;
}

#videoEditorDetail .textbox-solution-card:nth-child(3) {
  animation-delay: 0.2s;
}

#videoEditorDetail .textbox-solution-card:nth-child(5) {
  animation-delay: 0.3s;
}

#videoEditorDetail .textbox-solution-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.15);
}

#videoEditorDetail .textbox-tag {
  animation: fadeIn 0.8s ease-out;
  animation-delay: 0.4s;
  animation-fill-mode: both;
}

#videoEditorDetail .textbox-example-group {
  animation: fadeInUp 0.8s ease-out;
}

#videoEditorDetail .textbox-example-group:first-child {
  animation-delay: 0.2s;
}

#videoEditorDetail .textbox-example-group:last-child {
  animation-delay: 0.4s;
}

#videoEditorDetail .textbox-grid img {
  border-radius: var(--radius-md);
}

#videoEditorDetail .interaction-card {
  animation: fadeIn 0.8s ease-out;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#videoEditorDetail .interaction-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.12);
}

#videoEditorDetail .interaction-item {
  transition: transform 0.2s ease;
}

#videoEditorDetail .interaction-item:hover {
  transform: translateX(4px);
}

/* Edit Preview Floating Animation */
@keyframes floatUp {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

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

.edit-main-img {
  animation: floatUp 4s ease-in-out infinite;
}

.edit-overlay-img {
  animation: floatDown 5s ease-in-out infinite;
}

/* Little Freddie Info Bar & Steps */
.lf-info-bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-4);
  margin-top: 0;
}

.lf-info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lf-info-icon {
  font-size: var(--text-sm);
  color: var(--purple-primary);
}

.lf-info-icon-svg {
  width: 18px;
  height: 18px;
  color: var(--purple-primary);
  flex-shrink: 0;
}

.lf-info-label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-weight: 500;
}

.lf-info-value {
  font-size: var(--text-xs);
  color: var(--text-primary);
  font-weight: 500;
}

.lf-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.lf-step-card {
  background: #1a1a1a;
  border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lf-step-num {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--purple-primary);
  color: white;
  font-size: var(--text-xs);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lf-step-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.lf-step-main {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.lf-step-sub {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin: 0;
}

@media (max-width: 768px) {
  .lf-info-bar {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-4);
  }

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

/* Little Freddie Design Language */
.lf-design-language-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-10);
  align-items: start;
}

.lf-design-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}

.lf-design-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.lf-design-item-title {
  font-size: var(--text-base);
  color: var(--text-primary);
  margin: 0;
  line-height: 1.7;
}

.lf-design-item-title span {
  font-weight: 400;
  color: var(--text-primary);
}

.lf-design-item img {
  width: 100%;
  height: auto;
  display: block;
}

.lf-design-right {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.lf-design-hero {
  width: 100%;
  height: auto;
  display: block;
  margin-top: 34px;
}

.lf-design-typography {
  width: 347px;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  .lf-design-language-layout {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .lf-design-grid {
    grid-template-columns: 1fr;
  }

  .lf-design-typography {
    width: 100%;
    max-width: 347px;
  }
}

.lf-brand-text {
  width: 220px;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  .lf-brand-text {
    width: 180px;
  }
}

/* Little Freddie Main Pages */
.lf-pages-layout {
  position: relative;
  min-height: 760px;
  max-width: 1280px;
  margin: 120px auto 0;
}

#littleFreddieDetail .detail-section-center + .detail-section {
  margin-top: 0;
}

#littleFreddieDetail .detail-section-center {
  position: relative;
  z-index: 2;
  margin-bottom: 20px;
}

.lf-page-side {
  position: absolute;
  display: block;
  height: auto;
  box-shadow: 0 16px 16px -8px rgba(12, 12, 13, 0.1);
  border-radius: var(--radius-md);
}

.lf-page-side-small {
  width: 240px;
}

.lf-page-side-large {
  width: 274px;
}

.lf-page-left-small {
  left: 0;
  top: 37px;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.lf-page-left-large {
  left: 238px;
  top: 0;
}

.lf-page-right-large {
  right: 240px;
  top: 0;
}

.lf-page-right-small {
  right: 0;
  top: 37px;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.lf-page-center-wrap {
  position: absolute;
  left: 50%;
  top: -10px;
  width: 399px;
  height: 731px;
  transform: translateX(-50%);
  filter: drop-shadow(0 16px 8px rgba(12, 12, 13, 0.1));
}

.lf-page-center-wrap-large {
  width: 540px;
  height: 990px;
  top: -230px;
  z-index: 10;
  animation: floatUpDown 3s ease-in-out infinite;
}

@keyframes floatUpDown {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-12px);
  }
}

.lf-page-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.lf-page-screen {
  position: absolute;
  left: 48px;
  top: 64px;
  width: 291px;
  height: 630px;
  object-fit: cover;
  display: block;
  border-radius: 28px;
}

.lf-page-center-wrap-large .lf-page-screen {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 315px;
  height: 683px;
  border-radius: 30px;
}

@media (max-width: 768px) {
  .lf-pages-layout {
    min-height: auto;
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
    align-items: center;
  }

  .lf-page-side,
  .lf-page-center-wrap {
    position: static;
    transform: none;
  }

  .lf-page-center-wrap {
    width: 280px;
    height: 512px;
    filter: none;
  }

  .lf-page-frame {
    width: 100%;
    height: 100%;
  }

  .lf-page-screen {
    left: 34px;
    top: 45px;
    width: 204px;
    height: 443px;
    border-radius: 20px;
  }

  .lf-page-side-small,
  .lf-page-side-large {
    width: 100%;
    max-width: 320px;
  }
}

/* Little Freddie Expert Classroom */
.lf-expert-section {
  position: relative;
  max-width: 1283px;
  margin: 0 auto;
}

.lf-expert-bg {
  background: #76a72d;
  border-radius: var(--radius-lg);
  padding: var(--sp-6) var(--sp-10);
  position: relative;
  overflow: hidden;
  min-height: 323px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: var(--sp-6);
  gap: var(--sp-4);
}

.lf-expert-watermark {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 150px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.2);
  white-space: nowrap;
  pointer-events: none;
  font-family: 'Inter', 'Arial', sans-serif;
  letter-spacing: -2px;
  width: 100%;
  text-align: center;
}

.lf-expert-content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: white;
}

.lf-expert-title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: white;
  margin: 0 0 var(--sp-4) 0;
}

.lf-expert-desc {
  font-size: var(--text-base);
  color: white;
  line-height: 1.7;
  max-width: 1107px;
  margin: 0;
}

.lf-expert-phones {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-10);
  margin-top: -100px;
  padding-bottom: var(--sp-16);
}

.lf-expert-phone-left,
.lf-expert-phone-right {
  width: 228px;
  height: auto;
  border-radius: 10px;
  margin-top: -80px;
  box-shadow: 0 16px 16px -8px rgba(12, 12, 13, 0.1);
}

.lf-expert-phone-center-single {
  width: 520px;
  height: auto;
  flex-shrink: 0;
  margin-top: 30px;
  margin-left: 50px;
  filter: drop-shadow(0 16px 8px rgba(12, 12, 13, 0.1));
}

@media (max-width: 768px) {
  .lf-expert-bg {
    min-height: 320px;
    padding: var(--sp-6);
  }

  .lf-expert-watermark {
    font-size: 60px;
  }

  .lf-expert-title {
    font-size: var(--text-lg);
  }

  .lf-expert-desc {
    font-size: var(--text-sm);
  }

  .lf-expert-phones {
    flex-direction: column;
    gap: var(--sp-6);
    margin-top: var(--sp-8);
    padding-bottom: var(--sp-8);
  }

  .lf-expert-phone-left,
  .lf-expert-phone-right {
    width: 100%;
    max-width: 280px;
  }

  .lf-expert-phone-center-single {
    width: 280px;
  }
}

/* Little Freddie Other Pages */
.lf-other-pages {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-10);
  max-width: 1283px;
  margin: 0 auto;
}

.lf-other-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  align-items: center;
}

.lf-other-badge {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  padding: 6px 16px 6px 6px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.lf-other-badge:hover {
  transform: translateY(-2px);
  border-color: var(--purple-primary);
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.2);
}

.lf-other-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple-primary), var(--purple-light));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-base);
  font-weight: 700;
  box-shadow: 0 0 20px var(--purple-glow), 0 4px 12px rgba(139, 92, 246, 0.3);
}

.lf-other-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
}

.lf-other-img {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 16px 16px -8px rgba(12, 12, 13, 0.1);
  border-radius: var(--radius-md);
}

@media (max-width: 768px) {
  .lf-other-pages {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .lf-other-img {
    max-width: 320px;
  }
}

/* Little Freddie Points Mall */
.lf-points-layout {
  display: grid;
  grid-template-columns: 359px 1fr;
  gap: var(--sp-16);
  align-items: start;
  max-width: 1440px;
  margin: 0 auto;
  max-height: 110vh;
}

.lf-points-left {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.lf-points-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  text-align: center;
}

.lf-points-desc {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0;
}

.lf-points-right {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  position: relative;
  overflow-y: auto;
  max-height: 110vh;
  padding-right: var(--sp-2);
}

.lf-points-right::-webkit-scrollbar {
  width: 4px;
}

.lf-points-right::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 2px;
}

.lf-points-right::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 2px;
}

.lf-points-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.lf-points-col-1 {
  margin-top: -261px;
}

.lf-points-col-2 {
  margin-top: 211px;
}

.lf-points-col-3 {
  margin-top: 1px;
}

.lf-points-col img {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 16px 16px -8px rgba(12, 12, 13, 0.1);
  border-radius: var(--radius-md);
}

@media (max-width: 768px) {
  .lf-points-layout {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .lf-points-title {
    font-size: var(--text-lg);
  }

  .lf-points-desc {
    font-size: var(--text-sm);
  }

  .lf-points-right {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .lf-points-col-1,
  .lf-points-col-2,
  .lf-points-col-3 {
    margin-top: 0;
  }

  .lf-points-col img {
    max-width: 320px;
    margin: 0 auto;
  }
}

/* Little Freddie Activity */
.lf-activity-layout {
  display: flex;
  gap: var(--sp-10);
  align-items: flex-end;
  width: 100%;
}

.lf-activity-main-single {
  width: 350px;
  height: auto;
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: -30px;
  filter: drop-shadow(0 16px 8px rgba(12, 12, 13, 0.1));
}

.lf-activity-steps {
  display: flex;
  gap: var(--sp-8);
  flex-wrap: nowrap;
  flex: 1;
  width: 100%;
  align-items: flex-end;
}

.lf-activity-step {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: center;
  flex: 1;
  min-width: 0;
  justify-content: flex-end;
}

.lf-activity-badge {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  padding: 6px 16px 6px 6px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.lf-activity-badge:hover {
  transform: translateY(-2px);
  border-color: var(--purple-primary);
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.2);
}

.lf-activity-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple-primary), var(--purple-light));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-base);
  font-weight: 700;
  box-shadow: 0 0 20px var(--purple-glow), 0 4px 12px rgba(139, 92, 246, 0.3);
}

.lf-activity-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
}

.lf-activity-img {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 16px 16px -8px rgba(12, 12, 13, 0.1);
  border-radius: var(--radius-md);
}

@media (max-width: 768px) {
  .lf-activity-layout {
    flex-direction: column;
    align-items: center;
    gap: var(--sp-8);
  }

  .lf-activity-main-single {
    width: 280px;
  }

  .lf-activity-steps {
    flex-direction: column;
    gap: var(--sp-6);
    width: 100%;
  }

  .lf-activity-step {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }
}

/* Little Freddie Activity Result */
.lf-result-section {
  position: relative;
  width: 100%;
  min-height: auto;
  overflow: visible;
  border-radius: 0;
  background: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lf-result-bg {
  display: none;
}

.lf-result-mascot {
  display: none;
}

.lf-result-card {
  position: relative;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
  width: 100%;
}

.lf-result-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
}

.lf-result-images {
  display: flex;
  gap: var(--sp-6);
  justify-content: center;
}

.lf-result-row {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  width: 100%;
  justify-content: center;
}

.lf-result-img {
  width: 180px;
  height: auto;
  border-radius: var(--radius-sm);
}

.lf-result-challenge {
  width: 360px;
  height: auto;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .lf-result-section {
    flex-direction: column;
    min-height: auto;
    padding: var(--sp-6);
  }

  .lf-result-card {
    width: 100%;
  }

  .lf-result-images {
    flex-direction: column;
    align-items: center;
  }

  .lf-result-img {
    width: 160px;
  }

  .lf-result-mascot {
    position: relative;
    left: auto;
    top: auto;
    width: 120px;
  }
}

/* Little Freddie All Screens */
.lf-all-screens-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}

/* Spark Assistant Hero Banner */
.spark-hero-banner {
  width: 100%;
  height: 500px;
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
  margin-bottom: var(--sp-16);
}

.spark-hero-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: float 6s ease-in-out infinite;
}

/* Spark Assistant */
.spark-hero-card {
  background: #947efb;
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.spark-hero-preview {
  background: #eceef0;
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 400px;
}

.spark-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spark-hero-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.spark-hero-title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: white;
  margin: 0;
}

.spark-hero-tags {
  display: flex;
  gap: var(--sp-4);
}

.spark-hero-tag {
  background: white;
  color: #947efb;
  font-size: var(--text-sm);
  padding: var(--sp-2) var(--sp-4);
  border-radius: 999px;
}

.spark-hero-desc {
  font-size: var(--text-sm);
  color: white;
  line-height: 1.6;
  margin: 0;
}

/* PLACEHOLDER_SPARK_CSS_PART2 */

.spark-hero-nav {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.spark-nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-size: var(--text-base);
  font-weight: 500;
  color: #d3d3d3;
}

.spark-nav-item.active {
  color: #407cff;
}

.spark-nav-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d3d3d3;
}

.spark-nav-item.active .spark-nav-dot {
  background: #407cff;
}

/* Spark AI Layout */
.spark-ai-layout {
  display: flex;
  gap: var(--sp-10);
  align-items: center;
  position: relative;
  justify-content: center;
}

.spark-ai-left {
  position: relative;
  flex-shrink: 0;
}

.spark-ai-kefu-img {
  width: 800px;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 16px -8px rgba(12, 12, 13, 0.1);
}

.spark-ai-gradient-card {
  width: 500px;
  height: 360px;
  background: linear-gradient(to bottom, #f8c9ff, #b6e3ff);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 16px 16px -8px rgba(12, 12, 13, 0.1);
  position: relative;
}

.spark-ai-card-bg {
  position: absolute;
  top: 20px;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 0.5;
}

.spark-ai-phone {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
}

.spark-ai-phone-frame {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 2;
}

.spark-ai-phone-screen {
  position: absolute;
  top: 20px;
  left: 22px;
  width: 200px;
  height: auto;
  z-index: 1;
  border-radius: 16px;
}

/* PLACEHOLDER_SPARK_CSS_PART3 */

.spark-ai-right {
  display: flex;
  gap: 60px;
  flex: 1;
  margin-top: -140px;
}

.spark-ai-side-img {
  width: 260px;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: 0 16px 16px -8px rgba(12, 12, 13, 0.1);
}

/* Spark Reply Grid */
.spark-reply-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-6);
}

.spark-reply-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: center;
}

.spark-reply-label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
}

.spark-reply-img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: 0 16px 16px -8px rgba(12, 12, 13, 0.1);
}

/* Spark Other Grid */
.spark-other-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-10);
}

.spark-other-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  align-items: center;
}

.spark-other-badge {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  padding: 6px 16px 6px 6px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.spark-other-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple-primary), var(--purple-light));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 700;
  box-shadow: 0 0 20px var(--purple-glow), 0 4px 12px rgba(139, 92, 246, 0.3);
}

.spark-other-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
}

.spark-other-img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: 0 16px 16px -8px rgba(12, 12, 13, 0.1);
}

/* Brand VI Design */
.brand-vi-hero {
  width: 100%;
  aspect-ratio: 16 / 5;
  background: linear-gradient(135deg, #d4727a 0%, #e8a0a0 50%, #f0c4c0 100%);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--sp-12);
  position: relative;
  overflow: hidden;
}

.brand-vi-hero-content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* ffit8 logo image base style */
.ffit8-logo-img {
  height: 1em;
  width: auto;
  object-fit: contain;
  vertical-align: middle;
  display: inline-block;
}

.brand-vi-logo .ffit8-logo-img {
  height: 48px;
  filter: brightness(0) invert(1);
}
.brand-vi-logo-big .ffit8-logo-img { height: 96px; }
.brand-vi-logo-grid-text .ffit8-logo-img { height: 80px; opacity: 0.4; }
.brand-vi-color-logo .ffit8-logo-img { height: 48px; }

/* 02 和 03 容器的 logo 改为白色 */
.brand-vi-color-item:nth-child(2) .ffit8-logo-img,
.brand-vi-color-item:nth-child(3) .ffit8-logo-img {
  filter: brightness(0) invert(1);
}

/* 04 和 05 容器的 logo 改为黑色 */
.brand-vi-color-item:nth-child(4) .ffit8-logo-img,
.brand-vi-color-item:nth-child(5) .ffit8-logo-img {
  filter: brightness(0);
}
.brand-vi-safe-logo .ffit8-logo-img { height: 56px; }
.brand-vi-min-size-logo .ffit8-logo-img { height: 14px; }
.brand-vi-pos-logo .ffit8-logo-img { height: 14px; }
.brand-vi-restrict-item:nth-child(n+5) .ffit8-logo-img {
  height: 65px;
}

.brand-vi-restrict-item:nth-child(-n+4) .ffit8-logo-img {
  height: 54px;
}
.brand-vi-palette-logo .ffit8-logo-img { height: 52px; filter: brightness(0) invert(1); }
.brand-vi-gray-logo-red .ffit8-logo-img,
.brand-vi-gray-logo-black .ffit8-logo-img,
.brand-vi-gray-logo-white .ffit8-logo-img { height: 18px; }
.brand-vi-extend-logo .ffit8-logo-img { height: 80px; }
.brand-vi-slogan-logo-text .ffit8-logo-img { height: 36px; }
.brand-vi-card-front-logo .ffit8-logo-img { height: 32px; }
.brand-vi-badge-logo .ffit8-logo-img { height: 18px; }
.brand-vi-bag-logo .ffit8-logo-img { height: 14px; }
.brand-vi-bg-box .ffit8-logo-img { height: 52px; }

.brand-vi-logo {
  font-size: 48px;
  font-weight: 700;
  color: white;
  margin: 0;
  line-height: 1;
}

.brand-vi-logo sup {
  font-size: 14px;
  vertical-align: super;
}

.brand-vi-subtitle {
  font-size: var(--text-lg);
  font-weight: 400;
  color: white;
  margin: 0;
  opacity: 0.9;
}

.brand-vi-title {
  font-size: var(--text-base);
  color: white;
  margin: var(--sp-6) 0 0;
  opacity: 0.85;
}

.brand-vi-credit {
  position: absolute;
  bottom: var(--sp-10);
  left: var(--sp-12);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--text-xs);
  color: white;
  opacity: 0.6;
  text-transform: uppercase;
}

.brand-vi-intro {
  position: relative;
  padding: var(--sp-12) 0;
  width: 100%;
}

.brand-vi-intro-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--sp-4);
}

.brand-vi-intro-desc {
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--text-secondary);
  margin: 0;
}

/* Brand VI Overview */
.brand-vi-overview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-10);
  align-items: center;
}

.brand-vi-overview-left {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.brand-vi-section-num {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.brand-vi-section-num span {
  margin-left: var(--sp-3);
}

.brand-vi-block {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-left: var(--sp-8);
}

.brand-vi-block-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.brand-vi-block-desc {
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--text-secondary);
  margin: 0;
}

.brand-vi-overview-right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-vi-triangle {
  position: relative;
  width: 100%;
  height: 420px;
}

.brand-vi-triangle-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.brand-vi-circle {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #d4727a;
  color: white;
  font-size: var(--text-sm);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.brand-vi-circle-top {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.brand-vi-circle-bl {
  bottom: 0;
  left: 100px;
}

.brand-vi-circle-br {
  bottom: 0;
  right: 100px;
}

/* Brand VI Logo Section */
.brand-vi-logo-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.brand-vi-logo-display {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-10);
  margin-top: var(--sp-10);
}

.brand-vi-logo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
}

.brand-vi-logo-big-container,
.brand-vi-logo-grid-container {
  width: 100%;
}

.brand-vi-logo-big {
  font-size: 96px;
  font-weight: 700;
  color: #d4727a;
  line-height: 1;
  letter-spacing: -2px;
}

.brand-vi-logo-big-container {
  background: #2a2a2a;
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  flex: 1;
  min-height: 400px;
}

.brand-vi-logo-big-container .brand-vi-logo-caption {
  color: #ffffff;
}

.brand-vi-logo-grid-container {
  background: #ffffff;
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  flex: 1;
  min-height: 400px;
}

.brand-vi-logo-grid-img {
  width: 70%;
  height: auto;
}

.brand-vi-logo-big sup {
  font-size: 20px;
  vertical-align: super;
  color: var(--text-secondary);
}

.brand-vi-logo-grid-box {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 19px,
    rgba(212, 114, 122, 0.15) 19px,
    rgba(212, 114, 122, 0.15) 20px
  ),
  repeating-linear-gradient(
    90deg,
    transparent,
    transparent 19px,
    rgba(212, 114, 122, 0.15) 19px,
    rgba(212, 114, 122, 0.15) 20px
  );
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
}

.brand-vi-logo-grid-text {
  font-size: 80px;
  font-weight: 700;
  color: rgba(212, 114, 122, 0.4);
  letter-spacing: -2px;
  line-height: 1;
}

.brand-vi-logo-grid-text sup {
  font-size: 16px;
  vertical-align: super;
}

.brand-vi-logo-caption {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.6;
}

/* Brand VI Color Grid */
.brand-vi-color-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-10);
}

.brand-vi-color-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.brand-vi-color-box {
  width: 100%;
  aspect-ratio: 5 / 3;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-vi-color-logo {
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -1px;
}

.brand-vi-color-logo sup {
  font-size: 12px;
  vertical-align: super;
}

.brand-vi-color-info {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.8;
}

.brand-vi-color-info strong {
  font-size: var(--text-sm);
  color: var(--text-primary);
}

/* Brand VI Safe Area */
.brand-vi-safe-area {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-10);
  margin-top: var(--sp-10);
}

.brand-vi-safe-item {
  width: 100%;
}

.brand-vi-safe-box {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: var(--sp-10);
}

.brand-vi-safe-outer {
  width: 100%;
  height: 100%;
  position: relative;
  border: 1px dashed rgba(212, 114, 122, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-vi-safe-outer::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 15%;
  background: rgba(200, 200, 200, 0.2);
}

.brand-vi-safe-outer::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 15%;
  background: rgba(200, 200, 200, 0.2);
}

.brand-vi-safe-inner {
  border: 1px solid rgba(150, 150, 150, 0.3);
  padding: var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-vi-safe-logo {
  font-size: 56px;
  font-weight: 700;
  color: #d4727a;
  letter-spacing: -1px;
}

.brand-vi-safe-logo sup {
  font-size: 14px;
  vertical-align: super;
}

.brand-vi-safe-label-top,
.brand-vi-safe-label-right-top,
.brand-vi-safe-label-right-mid,
.brand-vi-safe-label-right-x,
.brand-vi-safe-label-right-bottom {
  position: absolute;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.brand-vi-safe-label-top {
  top: -20px;
  left: 15%;
}

.brand-vi-safe-label-right-top {
  top: -20px;
  right: 15%;
}

.brand-vi-safe-label-right-mid {
  top: 10%;
  right: -40px;
}

.brand-vi-safe-label-right-x {
  top: 45%;
  right: -30px;
}

.brand-vi-safe-label-right-bottom {
  bottom: 10%;
  right: -30px;
}

.brand-vi-safe-box-simple {
  padding: var(--sp-6);
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--sp-2);
}

.brand-vi-safe-box-simple .brand-vi-safe-logo {
  align-self: center;
}

.brand-vi-safe-100 {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.brand-vi-safe-50 {
  position: absolute;
  top: var(--sp-10);
  left: var(--sp-10);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
  padding: 2px var(--sp-2);
  border-radius: 2px;
}

/* Brand VI Min Size */
.brand-vi-min-size {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  margin-top: var(--sp-16);
  padding-left: var(--sp-8);
}

.brand-vi-min-size-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.brand-vi-min-size-logo {
  font-size: 14px;
  font-weight: 700;
  color: #d4727a;
  border-left: 2px solid var(--text-secondary);
  padding-left: var(--sp-3);
}

.brand-vi-min-size-logo sup {
  font-size: 6px;
  vertical-align: super;
}

/* Brand VI Position Layout */
.brand-vi-position-layout {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--sp-10);
  margin-top: var(--sp-10);
  align-items: stretch;
}

.brand-vi-position-box {
  position: relative;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent calc(33.33% - 1px),
    rgba(200, 200, 200, 0.2) calc(33.33% - 1px),
    rgba(200, 200, 200, 0.2) 33.33%
  ),
  repeating-linear-gradient(
    90deg,
    transparent,
    transparent calc(50% - 1px),
    rgba(200, 200, 200, 0.2) calc(50% - 1px),
    rgba(200, 200, 200, 0.2) 50%
  );
  min-height: 450px;
}

.brand-vi-position-landscape {
  width: 100%;
}

.brand-vi-position-portrait {
  width: 100%;
}

.brand-vi-pos-label {
  position: absolute;
  left: -80px;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.brand-vi-pos-header-label {
  position: absolute;
  top: -24px;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.brand-vi-pos-logo {
  position: absolute;
  font-size: var(--text-sm);
  font-weight: 700;
  color: #d4727a;
}

.brand-vi-pos-logo sup {
  font-size: 6px;
  vertical-align: super;
}

/* Brand VI Restrictions */
.brand-vi-restrict-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-10);
}

.brand-vi-restrict-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.brand-vi-restrict-box {
  width: 100%;
  aspect-ratio: 5 / 3;
  border: 1px solid #d4727a;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.brand-vi-restrict-logo {
  font-size: 36px;
  font-weight: 700;
  color: #d4727a;
  letter-spacing: -1px;
}

.brand-vi-restrict-img {
  max-width: 56%;
  max-height: 56%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.brand-vi-restrict-logo sup {
  font-size: 8px;
  vertical-align: super;
}

.brand-vi-restrict-cross {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom right, transparent calc(50% - 1px), #d4727a calc(50% - 1px), #d4727a calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(to bottom left, transparent calc(50% - 1px), #d4727a calc(50% - 1px), #d4727a calc(50% + 1px), transparent calc(50% + 1px));
  opacity: 0.6;
}

.brand-vi-restrict-cross::before,
.brand-vi-restrict-cross::after {
  display: none;
}

.brand-vi-restrict-dots {
  background: radial-gradient(circle, #d4727a 4px, transparent 4px);
  background-size: 20px 20px;
  background-position: 10px 10px;
}

.brand-vi-restrict-caption {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

/* Brand VI Color Spec */
.brand-vi-color-spec-layout {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  margin-top: var(--sp-4);
}

.brand-vi-color-spec-layout .brand-vi-block-desc {
  padding-left: var(--sp-8);
}

.brand-vi-color-spec-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

.brand-vi-color-spec-row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  align-items: center;
  padding: var(--sp-4) var(--sp-6);
  gap: var(--sp-6);
  border-radius: var(--radius-md);
}

.brand-vi-color-spec-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.brand-vi-color-spec-values {
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--text-primary);
}

.brand-vi-color-spec-tag {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
}

/* Brand VI Palette Grid */
.brand-vi-palette-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-10);
}

.brand-vi-palette-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.brand-vi-palette-box {
  width: 100%;
  aspect-ratio: 5 / 3;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-vi-palette-logo {
  font-size: 40px;
  font-weight: 700;
  color: white;
  letter-spacing: -1px;
}

.brand-vi-palette-logo sup {
  font-size: 10px;
  vertical-align: super;
}

.brand-vi-palette-info {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

/* Brand VI Background Color */
.brand-vi-bg-color-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-10);
  margin-top: var(--sp-4);
  align-items: stretch;
}

.brand-vi-bg-color-left {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding-bottom: 36px;
}

.brand-vi-gray-scale {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-top: 100px;
}

.brand-vi-gray-bar {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-light);
  padding-bottom: var(--sp-2);
}

.brand-vi-gray-demo,
.brand-vi-gray-demo-color {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--radius-md);
  padding: var(--sp-10) var(--sp-4);
  overflow: hidden;
  position: relative;
}

.brand-vi-restrict-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 27.27%;
  width: 36.36%;
  border: 2px dashed #e53935;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

.brand-vi-restrict-zone::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' preserveAspectRatio='none' viewBox='0 0 100 100'%3E%3Cline x1='0' y1='0' x2='100' y2='100' stroke='%23e53935' stroke-width='1.5' stroke-dasharray='6 4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  background-size: 100% 100%;
}

.brand-vi-gray-demo {
  background:
    linear-gradient(to right,
      #ffffff 0%, #ffffff 9.09%,
      #e6e6e6 9.09%, #e6e6e6 18.18%,
      #cccccc 18.18%, #cccccc 27.27%,
      #b3b3b3 27.27%, #b3b3b3 36.36%,
      #999999 36.36%, #999999 45.45%,
      #808080 45.45%, #808080 54.54%,
      #666666 54.54%, #666666 63.63%,
      #4d4d4d 63.63%, #4d4d4d 72.72%,
      #333333 72.72%, #333333 81.81%,
      #1a1a1a 81.81%, #1a1a1a 90.9%,
      #000000 90.9%, #000000 100%
    );
}

.brand-vi-gray-demo-color {
  margin-top: 40px;
  background:
    linear-gradient(to right,
      #c8e0e8 0%, #c8e0e8 9.09%,
      #b0d0d8 9.09%, #b0d0d8 18.18%,
      #90b8c8 18.18%, #90b8c8 27.27%,
      #70a0b0 27.27%, #70a0b0 36.36%,
      #588898 36.36%, #588898 45.45%,
      #487888 45.45%, #487888 54.54%,
      #386878 54.54%, #386878 63.63%,
      #2a5060 63.63%, #2a5060 72.72%,
      #1e4050 72.72%, #1e4050 81.81%,
      #163040 81.81%, #163040 90.9%,
      #0e2030 90.9%, #0e2030 100%
    );
}

.brand-vi-gray-demo-box {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.brand-vi-gray-logo-red {
  font-size: var(--text-lg);
  font-weight: 700;
  color: #d4727a;
}

.brand-vi-gray-logo-black {
  font-size: var(--text-lg);
  font-weight: 700;
  color: #1a1a1a;
}

.brand-vi-gray-logo-white {
  font-size: var(--text-lg);
  font-weight: 700;
  color: white;
}

.brand-vi-gray-logo-red sup,
.brand-vi-gray-logo-black sup,
.brand-vi-gray-logo-white sup {
  font-size: 8px;
  vertical-align: super;
}

.brand-vi-gray-note {
  font-size: var(--text-xs);
  color: #d4727a;
  margin: 0;
  margin-left: 27.27%;
  width: 36.36%;
  text-align: center;
}

.brand-vi-prohibit-icon {
  font-size: 20px;
  vertical-align: middle;
}

.brand-vi-bg-color-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

.brand-vi-bg-example {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.brand-vi-bg-box {
  width: 100%;
  aspect-ratio: 5 / 3;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-vi-bg-caption {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  text-align: center;
}

/* Brand VI - Font Section */
.brand-vi-font-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  margin-top: var(--sp-10);
}

.brand-vi-font-column {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  align-items: center;
}

.brand-vi-font-subtitle {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--text-secondary);
  margin: 0;
}

.brand-vi-font-cn-img {
  width: 100%;
  max-height: 50%;
  object-fit: contain;
  filter: brightness(0) invert(1);
  border-radius: var(--radius-md);
}

.brand-vi-font-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.brand-vi-font-row {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

.brand-vi-font-sample {
  font-size: 36px;
  color: var(--text-primary);
  white-space: nowrap;
}

.brand-vi-font-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.brand-vi-font-en {
  font-size: var(--text-lg);
  letter-spacing: 1px;
}

/* Brand VI - 品牌延展 */
.brand-vi-extend-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}

.brand-vi-extend-left {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.brand-vi-extend-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}

.brand-vi-extend-logo {
  font-size: 80px;
  font-weight: 700;
  color: #d4727a;
  letter-spacing: 2px;
}

.brand-vi-extend-logo sup {
  font-size: 16px;
  vertical-align: super;
}

.brand-vi-extend-line {
  width: 60%;
  height: 3px;
  background: #d4727a;
}

.brand-vi-extend-slogan {
  font-size: var(--text-lg);
  font-weight: 500;
  color: #d4727a;
  letter-spacing: 8px;
}

/* Brand VI - 辅助图形 */
.brand-vi-slogan-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  margin-top: var(--sp-10);
}

.brand-vi-slogan-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  background: #ffffff;
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
}

.brand-vi-slogan-card .brand-vi-mockup-img {
  max-width: 80%;
  height: auto;
  align-self: center;
  margin-top: auto;
  margin-bottom: auto;
}

.brand-vi-slogan-card:first-child .brand-vi-mockup-img {
  max-width: 64%;
}

.brand-vi-slogan-demo {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-8);
  border-radius: var(--radius-md);
  flex: 1;
}

.brand-vi-slogan-white {
  background: #ffffff;
  border: 1px solid var(--border-light);
}

.brand-vi-slogan-dark {
  background: #1a1a1a;
}

.brand-vi-slogan-logo-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.brand-vi-slogan-logo-text {
  font-size: 36px;
  font-weight: 700;
  color: #d4727a;
}

.brand-vi-slogan-logo-text sup {
  font-size: 10px;
}

.brand-vi-slogan-hand {
  font-size: 32px;
  transform: scaleX(-1);
}

.brand-vi-slogan-hand-outline {
  font-size: 48px;
  filter: grayscale(1) brightness(10);
}

.brand-vi-slogan-divider {
  width: 2px;
  height: 60px;
  background: #1a1a1a;
}

.brand-vi-slogan-text-group {
  display: flex;
  flex-direction: column;
}

.brand-vi-slogan-cn {
  font-size: 32px;
  font-weight: 700;
  color: #1a1a1a;
}

.brand-vi-slogan-text-group-alt {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.brand-vi-slogan-cn-alt {
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
}

.brand-vi-slogan-en {
  font-size: var(--text-sm);
  color: #ffffff;
  letter-spacing: 2px;
}

/* Brand VI - 辅助图形2 */
.brand-vi-aux2-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}

.brand-vi-aux2-left {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.brand-vi-aux2-display {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-10);
}

.brand-vi-aux2-cn {
  font-size: 42px;
  font-weight: 900;
  color: var(--text-primary);
  letter-spacing: 2px;
}

.brand-vi-aux2-en {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 3px;
}

.brand-vi-aux2-right {
  display: flex;
  gap: var(--sp-6);
  align-items: stretch;
}

.brand-vi-aux2-card {
  background: #ffffff;
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.brand-vi-aux2-img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.brand-vi-aux2-grid-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: repeating-linear-gradient(0deg, transparent, transparent 9px, rgba(200,60,60,0.15) 9px, rgba(200,60,60,0.15) 10px),
    repeating-linear-gradient(90deg, transparent, transparent 9px, rgba(200,60,60,0.15) 9px, rgba(200,60,60,0.15) 10px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  font-weight: 900;
  color: rgba(200,60,60,0.4);
}

.brand-vi-aux2-grid-bar {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: repeating-linear-gradient(0deg, transparent, transparent 9px, rgba(200,60,60,0.15) 9px, rgba(200,60,60,0.15) 10px),
    repeating-linear-gradient(90deg, transparent, transparent 9px, rgba(200,60,60,0.15) 9px, rgba(200,60,60,0.15) 10px);
  font-size: var(--text-base);
  font-weight: 700;
  color: rgba(200,60,60,0.5);
  text-align: center;
}

/* Brand VI - 名片 */
.brand-vi-card-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--sp-16);
  align-items: center;
  padding: var(--sp-10) 0;
}

.brand-vi-card-left {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.brand-vi-card-right {
  display: flex;
  gap: var(--sp-6);
  justify-content: center;
  align-items: flex-start;
}

.brand-vi-mockup-img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  object-fit: cover;
}

.brand-vi-card-front {
  width: 200px;
  aspect-ratio: 9/16;
  background: #d4a0a0;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: var(--sp-8);
  gap: var(--sp-2);
}

.brand-vi-card-front-logo {
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
}

.brand-vi-card-front-logo sup {
  font-size: 8px;
}

.brand-vi-card-front-text {
  font-size: var(--text-xs);
  color: #ffffff;
  letter-spacing: 2px;
}

.brand-vi-card-back {
  width: 180px;
  aspect-ratio: 9/16;
  background: #ffffff;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--sp-6);
}

.brand-vi-card-back-top {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.brand-vi-card-back-name {
  font-size: var(--text-base);
  font-weight: 700;
  color: #d4727a;
}

.brand-vi-card-back-title {
  font-size: var(--text-xs);
  color: #d4727a;
}

.brand-vi-card-back-bottom {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Brand VI - 工牌 */
.brand-vi-badge-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.brand-vi-badge-lanyard {
  width: 16px;
  height: 40px;
  background: #d4727a;
  border-radius: 2px 2px 0 0;
}

.brand-vi-badge-body {
  width: 160px;
  background: #f5f5f5;
  border: 2px solid #ddd;
  border-radius: var(--radius-sm);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-height: 220px;
}

.brand-vi-badge-top {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.brand-vi-badge-logo {
  font-size: 18px;
  font-weight: 700;
  color: #d4727a;
}

.brand-vi-badge-logo sup {
  font-size: 6px;
}

.brand-vi-badge-tagline {
  font-size: 8px;
  color: var(--text-secondary);
}

.brand-vi-badge-bottom-info {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 8px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.brand-vi-badge-avatar {
  width: 80px;
  height: 80px;
  background: #ddd;
  border-radius: 4px;
  align-self: center;
}

.brand-vi-badge-name-bar {
  background: #d4a0a0;
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: auto;
}

.brand-vi-badge-person-name {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
}

.brand-vi-badge-person-title {
  font-size: 9px;
  color: #ffffff;
}

/* Brand VI - 徽章 */
.brand-vi-pins-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  align-items: center;
}

.brand-vi-pin {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.brand-vi-pin-white {
  background: #ffffff;
  border: 1px solid #eee;
}

.brand-vi-pin-white span {
  color: #d4727a;
  font-size: 24px;
  font-weight: 700;
}

.brand-vi-pin-light {
  background: #ffffff;
  border: 1px solid #eee;
  width: 80px;
  height: 80px;
}

.brand-vi-pin-light span {
  color: #d4727a;
  font-size: 18px;
  font-weight: 700;
}

.brand-vi-pin-pink {
  background: #e8a0a8;
}

.brand-vi-pin-pink span {
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
}

.brand-vi-pin-card {
  background: #ffffff;
  border: 1px solid #eee;
  border-radius: var(--radius-sm);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.brand-vi-pin-card-cn {
  font-size: 16px;
  font-weight: 900;
  color: var(--text-primary);
}

.brand-vi-pin-card-en {
  font-size: 8px;
  color: var(--text-secondary);
  letter-spacing: 1px;
}

/* Brand VI - 手提袋 */
.brand-vi-bag {
  width: 220px;
  aspect-ratio: 3/4;
  background: #f0f0f0;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-4);
  position: relative;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  margin: 0 auto;
}

.brand-vi-bag-handle {
  width: 50px;
  height: 16px;
  background: #d0d0d0;
  border-radius: 8px;
  margin-bottom: var(--sp-2);
}

.brand-vi-bag-stripe {
  width: 100%;
  height: 6px;
  background: #d4727a;
  margin-bottom: var(--sp-2);
}

.brand-vi-bag-logo {
  font-size: 14px;
  font-weight: 700;
  color: #d4727a;
  align-self: flex-end;
  margin-bottom: auto;
}

.brand-vi-bag-logo sup {
  font-size: 6px;
}

.brand-vi-bag-slogans {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: var(--sp-2);
}

.brand-vi-bag-slogan-line {
  font-size: 10px;
  color: #d4727a;
  letter-spacing: 1px;
}

.brand-vi-bag-slogan-bold {
  font-weight: 900;
  font-size: 12px;
  opacity: 1 !important;
}

.brand-vi-bag-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.brand-vi-bag-footer-cn {
  font-size: 12px;
  font-weight: 900;
  color: #d4727a;
}

.brand-vi-bag-footer-en {
  font-size: 7px;
  color: #d4727a;
  letter-spacing: 1px;
}

/* Teaching Tool Platform */
.tt-hero-redesign {
  display: flex;
  align-items: center;
  min-height: 600px;
  position: relative;
  overflow: visible;
}

.tt-hero-redesign .detail-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding-right: var(--sp-8);
}

.tt-hero-big-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  margin: 0;
  position: relative;
  z-index: 1;
}

.tt-hero-author {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.tt-hero-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}

.tt-hero-byline {
  font-size: var(--text-base);
  color: #999;
  font-weight: 400;
}

.tt-hero-arrows {
  position: absolute;
  bottom: -40px;
  left: 100px;
  display: flex;
  flex-direction: column;
  gap: 0;
  z-index: 0;
}

.tt-hero-arrow {
  width: 200px;
  height: auto;
  opacity: 0.8;
}

.tt-hero-arrow-1 {
  transform: rotate(-15deg) scale(1.2);
  opacity: 0.6;
}

.tt-hero-arrow-2 {
  transform: rotate(-15deg) scale(1);
  margin-top: -10px;
  opacity: 0.4;
}

.tt-hero-redesign .detail-right {
  flex: 1.2;
  display: flex;
  justify-content: flex-end;
}

.tt-macbook {
  width: 100%;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: gentleSway 6s ease-in-out infinite;
}

.tt-macbook-screen {
  background: #1a1a1a;
  border-radius: 12px 12px 0 0;
  padding: 12px 12px 0 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.tt-macbook-screen img {
  width: 100%;
  display: block;
  border-radius: 4px 4px 0 0;
}

.tt-macbook-img {
  width: 100%;
  height: auto;
  display: block;
}

.tt-macbook-base {
  background: linear-gradient(180deg, #e8e8e8 0%, #d4d4d4 100%);
  width: 110%;
  height: 20px;
  border-radius: 0 0 8px 8px;
  text-align: center;
  font-size: 10px;
  color: #999;
  line-height: 20px;
  letter-spacing: 1px;
}

.tt-reform-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-8);
}

.tt-reform-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  text-align: center;
  align-items: center;
}

.tt-reform-card h4 {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  text-align: center;
}

.tt-reform-card p {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0;
  text-align: center;
}

.tt-reform-card img {
  width: 100%;
  border-radius: var(--radius-lg);
}

.tt-full-img {
  width: 100%;
  border-radius: var(--radius-md);
}

.tt-research-table {
  margin-top: var(--sp-8);
  overflow-x: auto;
}

.tt-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 var(--sp-4);
  text-align: left;
}

.tt-table thead th {
  background: #2a2a2a;
  padding: var(--sp-4);
  font-size: var(--text-base);
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
}

.tt-table thead th:first-child {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.tt-table thead th:last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.tt-table tbody td {
  background: #3a3a3a;
  padding: var(--sp-4);
  font-size: var(--text-base);
  color: #ffffff;
  vertical-align: middle;
  text-align: center;
}

.tt-table tbody tr td:first-child {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.tt-table tbody tr td:last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.tt-subject {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  text-align: left;
}

.tt-avatar {
  width: auto;
  height: 50px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.tt-subject-name {
  font-size: var(--text-base);
  font-weight: 400;
  color: #ffffff;
}

.tt-subject-teachers {
  font-size: var(--text-sm);
  color: #cccccc;
}

.tt-stars {
  font-size: 24px;
  line-height: 1;
}

.tt-issues-bubbles {
  margin-top: var(--sp-10);
  margin-bottom: var(--sp-8);
  position: relative;
  overflow: visible;
}

.tt-bubble-row {
  display: flex;
  gap: var(--sp-6);
  justify-content: center;
  align-items: center;
  margin-bottom: var(--sp-6);
  overflow: visible;
}

.tt-issue-bubble {
  background: #3a3a3a;
  border-radius: 999px;
  padding: var(--sp-3) var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: auto;
  height: 72px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
}

.tt-bubble-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #3ea9fb;
}

.tt-bubble-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tt-bubble-content {
  font-size: var(--text-base);
  font-weight: 400;
  color: #ffffff;
  text-align: left;
  line-height: 1.4;
  white-space: normal;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tt-bubble-content strong {
  font-weight: 400;
  display: inline;
  margin-right: 4px;
}

.tt-issue-bubble::after {
  content: attr(data-tooltip);
  position: absolute;
  background: rgba(255, 255, 255, 0.95);
  color: #1a1a1a;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.6;
  white-space: normal;
  max-width: 350px;
  width: max-content;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  z-index: 99999;
}

/* 第一行左边气泡 - tooltip 在右侧上方 */
.tt-bubble-row:first-child .tt-issue-bubble:first-child::after {
  left: calc(100% + 10px);
  bottom: 0;
  transform: none;
}

/* 第一行右边气泡 - tooltip 在左侧上方 */
.tt-bubble-row:first-child .tt-issue-bubble:last-child::after {
  right: calc(100% + 10px);
  bottom: 0;
  transform: none;
}

/* 第二行左边气泡 - tooltip 在右侧上方 */
.tt-bubble-row:nth-child(2) .tt-issue-bubble:first-child::after {
  left: calc(100% + 10px);
  bottom: 0;
  transform: none;
}

/* 第二行中间气泡 - tooltip 在下方 */
.tt-bubble-row:nth-child(2) .tt-issue-bubble:nth-child(2)::after {
  left: 50%;
  top: calc(100% + 10px);
  transform: translateX(-50%);
}

/* 第二行右边气泡 - tooltip 在左侧上方 */
.tt-bubble-row:nth-child(2) .tt-issue-bubble:last-child::after {
  right: calc(100% + 10px);
  bottom: 0;
  transform: none;
}

.tt-issue-bubble:hover::after {
  opacity: 1;
}

.tt-issue-bubble:hover {
  z-index: 99999;
}

@keyframes tt-bubble-float {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(10px);
  }
}

.tt-issue-bubble:hover {
  animation-play-state: paused;
}

.tt-center-bubble {
  background: var(--purple-primary);
  border-radius: 999px;
  padding: var(--sp-3) var(--sp-5);
  padding-left: 70px;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: #ffffff;
  font-size: var(--text-base);
  font-weight: 700;
  flex-shrink: 0;
  height: 72px;
  position: relative;
  overflow: visible;
}

.tt-center-icon {
  width: 100px;
  height: 100px;
  object-fit: contain;
  position: absolute;
  left: -30px;
  top: -40px;
  z-index: 10;
  animation: tt-fist-bounce 1.5s ease-in-out infinite;
  transform-origin: bottom center;
}

@keyframes tt-fist-bounce {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-8px) rotate(-5deg);
  }
  50% {
    transform: translateY(0) rotate(0deg);
  }
  75% {
    transform: translateY(-4px) rotate(5deg);
  }
}

.tt-summary-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  margin-top: calc(var(--sp-8) + 60px);
  width: 100%;
}

.tt-flow-row {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  width: 100%;
}

.tt-flow-label-dark {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  min-width: 100px;
  text-align: left;
  position: relative;
  top: -10px;
}

.tt-flow-cards {
  display: flex;
  gap: var(--sp-4);
  flex: 1;
  margin-top: -20px;
}

.tt-flow-card-dark {
  background: #3a3a3a;
  border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-6);
  font-size: var(--text-base);
  font-weight: 400;
  color: #ffffff;
  flex: 1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tt-flow-highlight-dark {
  background: var(--purple-primary);
}

.tt-flow-arrow-dark {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: calc(100px + var(--sp-6) - 105px);
  margin-top: 0;
  margin-bottom: 0;
  align-self: flex-start;
  position: relative;
  top: -10px;
}

.tt-flow-arrow-dark img {
  width: 40px;
  height: auto;
}

.tt-flow-label {
  background: #ffffff;
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  min-width: 120px;
  text-align: center;
}

.tt-flow-card {
  background: #ebebeb;
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-primary);
  flex: 1;
  text-align: center;
}

.tt-flow-highlight {
  background: #cadbff;
}

.tt-flow-arrow {
  font-size: 36px;
  color: var(--text-primary);
  margin: var(--sp-2) 0;
}

.tt-summary-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  margin-top: var(--sp-10);
}

.tt-summary-row {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}

.tt-summary-label {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  min-width: 80px;
}

.tt-summary-cards {
  display: flex;
  gap: var(--sp-6);
  flex: 1;
}

.tt-summary-card {
  background: #ebebeb;
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-primary);
  flex: 1;
  text-align: center;
}

.tt-summary-highlight {
  background: #cadbff;
}

.tt-visual-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--sp-4) var(--sp-8);
}

.tt-visual-col {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  gap: var(--sp-4);
}

.tt-visual-img-wrap {
  overflow: hidden;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}

.tt-visual-img-wrap::after {
  content: '点击放大查看原图';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  letter-spacing: 2px;
  border-radius: var(--radius-md);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}

.tt-visual-img-wrap:hover::after {
  opacity: 1;
}

.tt-visual-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: 0 16px 16px -8px rgba(12,12,13,0.1), 0 4px 4px -4px rgba(12,12,13,0.05);
}

.tt-before-box,
.tt-after-box {
  display: flex;
  gap: var(--sp-6);
  padding: var(--sp-6);
  border-radius: var(--radius-md);
}

.tt-before-box {
  background: #3a3a3a;
  color: #ffffff;
}

.tt-after-box {
  background: var(--purple-primary);
}

.tt-before-img,
.tt-after-img {
  width: 50%;
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

.tt-before-info,
.tt-after-info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.tt-before-info h4,
.tt-after-info h4 {
  font-size: var(--text-base);
  font-weight: 700;
  margin: 0;
}

.tt-before-info ul,
.tt-after-info ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: var(--text-base);
}

/* 设计语言定位 */
.tt-lang-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--sp-4);
}

.tt-lang-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.tt-lang-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tt-lang-label {
  position: absolute;
  bottom: var(--sp-4);
  left: var(--sp-4);
  font-size: var(--text-base);
  font-weight: 700;
  color: #ffffff;
}

.tt-lang-wide {
  grid-row: 1;
  grid-column: 1;
}

.tt-lang-extra-wide {
  grid-column: 2 / 4;
}

/* 色彩系统 */
.tt-color-chips {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-8);
  justify-content: center;
}

.tt-color-chip {
  width: 147px;
  height: 147px;
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.tt-chip-name {
  font-size: var(--text-base);
  font-weight: 700;
}

.tt-chip-hex {
  font-size: var(--text-sm);
}

/* Typography Section */
.tt-typo-section {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: var(--sp-16);
}

.tt-typo-header {
  max-width: 65%;
}

.tt-typo-title {
  font-size: 36px;
  font-weight: 700;
  margin: 0 0 var(--sp-4) 0;
}

.tt-typo-title .text-purple {
  color: var(--purple-primary);
}

.tt-typo-desc {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.8;
}

.tt-typo-weights {
  display: flex;
  gap: var(--sp-3);
}

.tt-typo-weight-tag {
  padding: var(--sp-2) var(--sp-6);
  border: 1px solid var(--border-light);
  border-radius: 100px;
  font-size: var(--text-base);
  color: var(--text-primary);
}

.tt-typo-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
}

.tt-typo-label {
  font-size: var(--text-lg);
  font-weight: 700;
  margin: 0 0 var(--sp-8) 0;
}

.tt-typo-showcase {
  position: relative;
}

.tt-typo-inter {
  font-family: 'Inter', sans-serif;
  font-size: 180px;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(180deg, #ffffff 0%, #666666 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.tt-typo-sample {
  font-family: 'Inter', sans-serif;
  font-size: 56px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-top: var(--sp-6);
}

.tt-typo-table {
  width: 100%;
}

.tt-typo-table-header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr 3fr;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: #2a2a2a;
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-4);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.tt-typo-table-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr 3fr;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.tt-typo-table-sample {
  font-family: 'Noto Sans SC', sans-serif;
  color: var(--text-primary);
}

.tt-typo-table-size,
.tt-typo-table-lh {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.tt-typo-table-weight {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.tt-typo-table-scene {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.tt-typo-scale {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.tt-typo-scale-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-6);
}

.tt-typo-scale-name {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  min-width: 80px;
  text-align: right;
}

.tt-typo-scale-value {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  color: var(--text-primary);
}

.tt-screens-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-4);
}

.tt-screens-grid img {
  width: 100%;
  border-radius: var(--radius-md);
}

/* 自由拖拽模块 */
.tt-drag-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
  margin-bottom: var(--sp-8);
  align-items: start;
}

.tt-drag-step {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--sp-6);
  height: 100%;
}

.tt-drag-step-title {
  background: #3a3a3a;
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  font-size: var(--text-base);
  font-weight: 700;
  text-align: center;
  color: #ffffff;
}

.tt-drag-step-desc {
  background: #3a3a3a;
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  font-size: var(--text-base);
  line-height: 1.7;
  color: #ffffff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.tt-drag-step-blue .tt-drag-step-title,
.tt-drag-step-blue .tt-drag-step-desc {
  background: var(--purple-primary);
  color: #ffffff;
}

.tt-drag-step-img {
  display: block;
  width: 49%;
  height: auto;
  border-radius: var(--radius-md);
  margin: 0 auto var(--sp-4);
}

.tt-drag-demos {
  display: grid;
  grid-template-columns: 956fr 960fr 466fr;
  gap: var(--sp-4);
}

.tt-drag-demos img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

/* 暗黑模式 */
.tt-dark-preview {
  margin-top: 0;
}

.tt-dark-preview img {
  width: 100%;
  border-radius: var(--radius-lg);
}

/* 洞察行为触发点 */
.tt-insight-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  background: #000000;
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
}

.tt-insight-row {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

.tt-insight-label {
  background: transparent;
  border-radius: 0;
  padding: 0;
  font-size: var(--text-base);
  font-weight: 700;
  white-space: nowrap;
  min-width: 120px;
  text-align: left;
  color: #ffffff;
}

.tt-insight-label-blue {
  background: transparent;
  color: var(--purple-primary);
}

.tt-insight-cards {
  display: flex;
  gap: var(--sp-6);
  flex: 1;
  flex-wrap: wrap;
}

.tt-insight-card {
  background: #3a3a3a;
  color: #ffffff;
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  font-size: var(--text-base);
  font-weight: 400;
  flex: 1;
  min-width: 200px;
  text-align: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tt-insight-card p {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 400;
  text-align: center;
  color: #ffffff;
}

.tt-insight-badge {
  position: absolute;
  top: 0;
  left: 0;
  padding: var(--sp-1) var(--sp-3);
  border-radius: 8px 0 8px 0;
  font-size: var(--text-sm);
  font-weight: 700;
  color: #ffffff;
}

.tt-badge-gray {
  background: #8e8e8e;
}

.tt-badge-blue {
  background: #ffffff;
  color: #000000;
}

.tt-insight-stat {
  background: var(--purple-primary);
  color: #ffffff;
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  font-size: var(--text-base);
  font-weight: 400;
  flex: 1;
  text-align: center;
}

.tt-insight-stat strong {
  font-size: 48px;
  font-weight: 700;
  color: #ffffff;
}

/* 方案总结 */
.tt-data-stats {
  display: flex;
  gap: var(--sp-8);
  margin-top: var(--sp-8);
}

.tt-stat-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.tt-stat-title {
  background: #000000;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  font-size: var(--text-base);
  font-weight: 700;
  text-align: center;
}

.tt-stat-items {
  display: flex;
  gap: var(--sp-4);
}

.tt-stat-item {
  background: #3a3a3a;
  color: #ffffff;
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tt-stat-item span {
  font-size: var(--text-sm);
  color: #ffffff;
  white-space: nowrap;
}

.tt-stat-item strong {
  font-size: var(--text-base);
  color: #ffffff;
}

.tt-stat-active {
  background: var(--purple-primary);
  color: #ffffff;
}

.tt-data-screens {
  display: grid;
  grid-template-columns: 788fr 788fr 444fr;
  gap: var(--sp-8);
  margin-top: var(--sp-8);
}

.tt-data-screens img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

/* ═══════════════════════════════════════
   Image Lazy Loading Styles
   ═══════════════════════════════════════ */
img.lazy {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

img.lazy.loaded {
  opacity: 1;
}

/* ═══════════════════════════════════════
   Detail Pages — Mobile Adaptation
   ═══════════════════════════════════════ */
@media (max-width: 768px) {

  /* --- 通用详情页 --- */
  .detail-container {
    padding: var(--sp-6);
  }

  .detail-hero {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .detail-title {
    font-size: clamp(24px, 6vw, 36px);
    white-space: normal;
  }

  .detail-summary {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
    padding: var(--sp-6);
  }

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

  .detail-section {
    margin-top: var(--sp-12);
  }

  .section-title-detail {
    font-size: clamp(20px, 5vw, 28px);
  }

  .detail-section-desc {
    font-size: var(--text-sm);
  }

  .detail-features {
    gap: var(--sp-4);
  }

  .detail-feature {
    gap: var(--sp-3);
  }

  /* --- 大模型: 品牌标识 --- */
  .brand-top {
    flex-direction: column;
    gap: var(--sp-6);
  }

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

  .brand-card {
    padding: var(--sp-4);
  }

  .logo-evolution {
    flex-wrap: wrap;
    justify-content: center;
  }

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

  /* --- 大模型: 布局导航 --- */
  .responsive-grid {
    flex-direction: column;
    align-items: center;
  }

  .resp-card {
    width: 100%;
  }

  .resp-screen img {
    width: 100%;
    height: auto;
  }

  /* --- 大模型: 智能体 --- */
  .agent-layout {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .agent-screens {
    grid-template-columns: 1fr;
  }

  .agent-screen-img {
    width: 100%;
  }

  /* --- 大模型: Prompt --- */
  .prompt-steps {
    flex-wrap: wrap;
    justify-content: center;
  }

  .prompt-screen-stack {
    flex-direction: column;
    align-items: center;
    padding: 0;
  }

  .prompt-layer,
  .prompt-layer-1,
  .prompt-layer-2,
  .prompt-layer-3,
  .prompt-layer-4 {
    width: 100% !important;
    margin-left: 0;
  }

  /* --- 大模型: 评测中心 --- */
  .design-layout {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .evaluator-row {
    flex-direction: column;
    align-items: center;
  }

  .evaluator-main-img {
    width: 100%;
    height: auto;
  }

  .evaluator-mode-card {
    width: 100%;
    height: auto;
  }

  .evaluator-mode-card img {
    width: 100%;
    height: auto;
  }

  /* --- 大模型: 评测任务 --- */
  .eval-task-top {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .eval-task-bottom {
    flex-direction: column;
    margin-top: 0;
  }

  /* --- 互动视频编辑器 --- */
  .video-bg-layout {
    flex-direction: column;
  }

  .video-bg-left,
  .video-bg-right {
    width: 100%;
  }

  .video-editor-row {
    flex-direction: column;
    gap: var(--sp-4);
  }

  .solution-flow {
    flex-direction: column;
    align-items: center;
  }

  .solution-steps {
    flex-direction: column;
    align-items: center;
  }

  .solution-arrow {
    transform: rotate(90deg);
  }

  .solution-screens {
    flex-direction: column;
  }

  .solution-screen-item {
    width: 100%;
  }

  /* --- 互动视频: 课件制作 --- */
  .courseware-layout {
    grid-template-columns: 1fr;
  }

  .courseware-right {
    flex-direction: row;
    gap: var(--sp-4);
  }

  .courseware-side-img {
    flex: 1;
  }

  /* --- 互动视频: 录制 --- */
  .record-features {
    flex-direction: column;
  }

  .record-showcase {
    flex-direction: column;
    align-items: center;
  }

  .record-showcase-left img,
  .record-showcase-right img {
    width: 100px;
  }

  /* --- 互动视频: 编辑预览 --- */
  .edit-preview-desc-grid {
    grid-template-columns: 1fr;
  }

  .edit-preview-layout {
    flex-direction: column;
  }

  .edit-preview-left {
    flex-direction: row;
    align-items: center;
  }

  .edit-preview-left img {
    width: 120px;
    margin-top: 0;
  }

  .edit-detail-layout {
    grid-template-columns: 1fr;
  }

  .edit-detail-right {
    max-height: none;
  }

  /* --- 互动视频: 异常状态插画 --- */
  .exception-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* --- 互动视频: 手机端 --- */
  .mobile-preview-layout {
    flex-direction: column;
  }

  /* --- 互动视频: 交互说明 --- */
  .interaction-layout,
  .interaction-layout-2 {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .interaction-phones-left,
  .interaction-phones-center {
    flex-direction: row;
    gap: var(--sp-4);
  }

  /* --- 互动视频: 文本框交互 --- */
  .textbox-solutions {
    flex-direction: column;
  }

  .textbox-arrow {
    transform: rotate(90deg);
  }

  .textbox-tags-row {
    flex-direction: column;
    align-items: center;
  }

  .textbox-arrow-spacer {
    display: none;
  }

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

  /* --- 教学工具平台 --- */
  .tt-reform-grid {
    grid-template-columns: 1fr;
  }

  .tt-research-table {
    overflow-x: auto;
  }

  .tt-table {
    min-width: 600px;
    font-size: 12px;
  }

  .tt-issues-bubbles {
    gap: var(--sp-4);
  }

  .tt-bubble-row {
    flex-direction: column;
    align-items: center;
  }

  .tt-issue-bubble {
    max-width: 100%;
  }

  .tt-visual-layout {
    grid-template-columns: 1fr;
  }

  .tt-lang-grid {
    grid-template-columns: 1fr;
  }

  .tt-lang-card.tt-lang-wide,
  .tt-lang-card.tt-lang-extra-wide {
    grid-column: auto;
  }

  .tt-typo-table-header,
  .tt-typo-table-row {
    font-size: 12px;
  }

  .tt-typo-table-sample {
    font-size: 14px !important;
  }

  .tt-drag-steps {
    flex-direction: column;
  }

  .tt-drag-demos {
    flex-direction: column;
  }

  .tt-drag-demos img {
    width: 100%;
  }

  .tt-insight-grid {
    gap: var(--sp-4);
  }

  .tt-insight-row {
    flex-direction: column;
    gap: var(--sp-3);
  }

  .tt-insight-cards {
    flex-direction: column;
  }

  .tt-data-stats {
    flex-direction: column;
  }

  .tt-data-screens {
    flex-direction: column;
  }

  .tt-data-screens img {
    width: 100%;
  }

  .tt-flow-cards {
    flex-direction: column;
  }

  .tt-before-box,
  .tt-after-box {
    flex-direction: column;
  }

  /* --- 星火助手 --- */
  .spark-ai-layout {
    flex-direction: column;
  }

  .spark-ai-left,
  .spark-ai-right {
    width: 100%;
  }

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

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

  /* --- 小皮 Little Freddie --- */
  .lf-info-bar {
    flex-direction: column;
  }

  .lf-steps {
    flex-direction: column;
  }

  .lf-design-language-layout {
    flex-direction: column;
  }

  .lf-design-grid {
    grid-template-columns: 1fr;
  }

  .lf-pages-layout {
    min-height: auto;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-4);
  }

  .lf-page-side {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 60%;
  }

  .lf-page-center-wrap,
  .lf-page-center-wrap-large {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 60%;
    height: auto;
    animation: none;
  }

  .lf-page-screen {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    height: auto;
  }

  .lf-page-center-wrap-large .lf-page-screen {
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    height: auto;
  }

  .lf-expert-phones {
    flex-direction: column;
    align-items: center;
  }

  .lf-expert-phone-left,
  .lf-expert-phone-center-single,
  .lf-expert-phone-right {
    width: 80%;
  }

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

  .lf-points-layout {
    flex-direction: column;
  }

  .lf-points-right {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--sp-4);
  }

  .lf-points-col {
    flex: 1;
    min-width: 120px;
  }

  .lf-activity-layout {
    flex-direction: column;
    align-items: center;
  }

  .lf-activity-main-single {
    width: 100%;
  }

  .lf-activity-steps {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .lf-result-section {
    padding: var(--sp-4);
  }

  .lf-result-images {
    flex-direction: column;
    align-items: center;
  }

  /* --- H5活动 --- */
  .h5-520-layout {
    flex-direction: column;
  }

  .h5-520-phones {
    flex-direction: row;
    justify-content: center;
  }

  .h5-520-goals {
    flex-direction: column;
  }

  .h5-flow-layout {
    flex-direction: column;
    align-items: center;
  }

  .h5-flow-left {
    flex-direction: row;
    gap: var(--sp-4);
  }

  .h5-flow-arrow {
    transform: rotate(90deg);
  }

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

  .h5-design-layout {
    grid-template-columns: 1fr;
  }

  .h5-mobile-content {
    flex-direction: column;
  }

  .h5-mobile-phones {
    flex-direction: row;
    justify-content: center;
  }

  /* --- 海报设计 --- */
  .poster-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .poster-outdoor-images {
    grid-template-columns: 1fr;
  }

  /* --- 插画设计 --- */
  .illustration-grid {
    grid-template-columns: 1fr;
  }

  .illustration-lotus-layout {
    grid-template-columns: 1fr;
  }

  .illustration-paint-layout {
    grid-template-columns: 1fr;
  }

  .illustration-paint-right {
    width: 100%;
  }

  .illustration-paint-right img {
    width: 100%;
  }

  /* --- 品牌VI --- */
  .brand-vi-overview {
    flex-direction: column;
  }

  .brand-vi-logo-display {
    flex-direction: column;
  }

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

  .brand-vi-safe-area {
    flex-direction: column;
  }

  .brand-vi-position-layout {
    flex-direction: column;
  }

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

  .brand-vi-color-spec-layout {
    flex-direction: column;
  }

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

  .brand-vi-bg-color-layout {
    flex-direction: column;
  }

  .brand-vi-font-layout {
    flex-direction: column;
  }

  .brand-vi-extend-layout {
    flex-direction: column;
    gap: var(--sp-6);
  }

  .brand-vi-slogan-layout {
    flex-direction: column;
  }

  .brand-vi-card-layout {
    flex-direction: column;
    gap: var(--sp-6);
  }
}