/* ==================== About 页面样式 - 基于 Figma 设计稿 ==================== */
/* V6.0 视觉底层规范更新 */

/* ==================== 变量定义 ==================== */
:root {
    /* 颜色 */
    --color-primary: #111111;
    --color-text: #111111;
    --color-text-secondary: #666666;
    --color-text-tertiary: #666666;
    --color-text-muted: #999999;
    --color-accent: #111111;
    --color-bg-gray: #f5f5f7;
    --color-bg-gray-alt: rgb(245, 245, 247);
    --color-border: #d2d2d7;
    --color-white: #ffffff;
    
    /* 字体族 - V6.0 精细化排版系统 */
    --font-family: 'Inter', 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-main: 'Inter', 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-zh: 'PingFang SC', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-family-en: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-family-display: 'Inter', 'PingFang SC', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-family-strong: 'PingFang SC', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-family-number: 'Inter', 'DIN Condensed', 'PingFang SC', sans-serif;
    
    /* 字号变量 - V6.0 保底线 12px */
    --font-size-xs: 0.75rem;   /* 12px - L5 标签/分类（保底线） */
    --font-size-sm: 0.875rem;  /* 14px - L4 辅助文字 */
    --font-size-base: 1rem;   /* 16px - L3 正文 */
    --font-size-md: 1.125rem;  /* 18px - 平板正文 */
    --font-size-lg: 1.25rem;  /* 20px - L2 二级标题 */
    --font-size-xl: 2rem;      /* 32px - L1 标题（PC） */
    --font-size-2xl: 2rem;    /* 32px - L1 标题（PC） */
    --font-size-3xl: 3rem;    /* 48px - 大数字展示 */
    /* L5 标签/分类 - 全端 12px（触发保底线） */
    --font-size-l5: 0.75rem;  /* 12px - 保底线 */
    
    /* 行高变量 - V6.0 */
    --line-height-heading: 1.25;  /* L1/L2 标题专用，紧凑有力 */
    --line-height-body: 1.6;      /* L3 正文专用，舒缓阅读节奏 */
    --line-height-caption: 1.5;  /* L4 辅助文字 */
    --line-height-tag: 1;        /* L5 标签/胶囊专用 */
    
    /* 字间距变量 - V6.0 */
    --letter-spacing-tight: -0.02em;  /* L1 标题负值字间距，营造印刷质感 */
    --letter-spacing-heading: -0.01em; /* L2 标题负值字间距 */
    --letter-spacing-tag: 0.05em;      /* L5 标签拉开字间距 */
    --letter-spacing-normal: 0;        /* 正常字间距 */
    
    /* 圆角阶梯 - V6.0 */
    --card-radius: 24px;  /* PC ≥1200px: 24px */
    --card-radius-tablet: 16px;  /* Tablet 768px-1199px: 16px */
    --card-radius-mobile: 12px;  /* Mobile ≤767px: 12px（保底线） */
    
    /* 过渡动画 - V6.0 果冻般顺滑感 */
    /* cubic-bezier(0.2, 0.8, 0.2, 1) - 快速启动，优雅减速 */
    --transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    --transition-fast: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    --transition-slow: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    --transition-jelly: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    
    /* 间距 */
    --max-width: 1200px;
    --section-padding: 120px;
    --heading-margin-bottom: 64px;
    --container-padding: var(--gutter-desktop);
}

/* ==================== 页面容器 ==================== */
.about-main {
    min-height: 100vh;
    background-color: #ffffff;
    background-image: linear-gradient(45deg, #f6f9fd 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

/* ---- 方向C：首屏背景光斑漂移 + 呼吸 ---- */
/* 右上方灰光斑漂移，7s */
@keyframes blobDrift1 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
    50%       { transform: translate(1.2%, 0.8%) scale(1.05); opacity: 0.7; }
}

/* 左上蓝白光斑漂移，9s，相位错开 3s */
@keyframes blobDrift2 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
    40%       { transform: translate(-1.5%, 0.6%) scale(0.96); opacity: 0.75; }
    80%       { transform: translate(0.8%, -1%) scale(1.03); opacity: 0.85; }
}

/* 底部光斑漂移，6s，更微弱 */
@keyframes blobDrift3 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
    50%       { transform: translate(0.6%, -0.5%) scale(1.06); opacity: 0.65; }
}

/* ::before：右上灰光斑 */
.about-main::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(
        ellipse 60% 45% at 100% 0%,
        rgba(200, 197, 203, 0.25) 0%,
        transparent 55%
    );
    animation: blobDrift1 7s ease-in-out infinite;
    will-change: transform, opacity;
}

/* ::after：左上蓝白光斑 */
.about-main::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(
        ellipse 70% 55% at 0% 0%,
        rgba(198, 219, 255, 0.2) 0%,
        rgba(198, 219, 255, 0.08) 45%,
        transparent 70%
    );
    animation: blobDrift2 9s ease-in-out infinite 3s;
    will-change: transform, opacity;
}

/* 让 Hero 内容压在动画层之上 */
.about-hero {
    position: relative;
    z-index: 1;
}

.about-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* 首屏以下：内容区固定 1200px 宽，块级内容两端顶齐容器 */
.about-body {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    box-sizing: border-box;
}

/* ==================== Hero Section - 基于 Figma 552-3506 ==================== */
.about-hero {
    display: flex;
    gap: 85px;
    padding: 80px 0;  /* Hero 上下留白：80px（基础值） */
    align-items: flex-start;
}

/* 左侧 - 教育经历 */
.about-hero-left {
    width: 317px;
    flex-shrink: 0;
}

/* 教育经历列表 */
.about-hero-education {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.about-education-card {
    padding: 24px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.about-education-card:first-child {
    padding-top: 0;
}

.about-education-card:last-child {
    border-bottom: none;
}

/* 当前状态 */
.about-education-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary);
}

.status-text {
    font-family: var(--font-family-en);
    font-size: 12px;
    font-weight: 500;
    color: #666666;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* 年份样式 */
.about-education-year {
    font-family: var(--font-family-number);
    font-size: 36px;
    font-weight: 500;
    color: #111111;
    letter-spacing: -0.75px;
    line-height: 44px;
    margin-bottom: 4px;
}

.about-education-degree {
    font-family: var(--font-family-zh);
    font-size: 16px;
    font-weight: 600;
    color: #666666;
    letter-spacing: 2px;
    line-height: 1.5;
    margin: 0;
}

/* 右侧 - 照片 + 介绍 */
.about-hero-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 0;
    max-width: 664px;
}

/* 照片区域 - 在文字上方 */
.about-hero-portrait-section {
    width: 100%;
    margin-bottom: 80px;
}

/* 人物照片容器 - 严格按照 Figma 设计稿 */
/* Background+Border+Shadow 外层容器 */
.portrait-container {
    position: relative;
    width: 384px;
    height: 384px;
    border-radius: 24px;
    background: #f5f5f7;
    padding: 24px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: visible;
    box-shadow: 
        -8px -8px 16px rgba(255, 255, 255, 1),
        8px 8px 16px rgba(224, 224, 231, 1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.4);
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Peter Hol portrait 人物头像 */
.portrait-image {
    width: 334px;
    height: 334px;
    object-fit: cover;
    border-radius: 24px;
    display: block;
}

.portrait-container:hover {
    transform: translateY(-4px);
    box-shadow: 
        -8px -8px 24px rgba(255, 255, 255, 1),
        12px 12px 24px rgba(224, 224, 231, 1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

/* 头像外层：仅包裹卡片，便于居中 */
.about-hero-portrait-wrapper {
    width: fit-content;
    max-width: 100%;
}

/* 社交按钮：位于头像卡片右下角外侧（向右偏移 56px），Figma 数据 */
.about-social-links {
    position: absolute;
    right: -38px;
    bottom: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 11px;
    z-index: 2;
    transform: translateY(50%);
    pointer-events: none;
}

.about-social-links .social-link {
    pointer-events: auto;
}

.social-link {
    width: 56px;
    height: 56px;
    border-radius: var(--card-radius);
    background: #f5f5f7;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111111;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease;
    box-shadow:
        -8px -8px 16px rgba(255, 255, 255, 1),
        8px 8px 16px rgba(224, 224, 231, 1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.social-link:hover {
    background: #eaeaea;
    transform: translateY(-2px) scale(1.03);
    box-shadow:
        -8px -8px 20px rgba(255, 255, 255, 1),
        10px 10px 22px rgba(224, 224, 231, 1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.social-link:active {
    transform: translateY(0) scale(0.98);
}

.social-link svg {
    width: 20px;
    height: 20px;
}

/* 文字介绍区域 - 在照片下方 */
.about-hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.about-section-label {
    font-family: var(--font-family-en);
    font-size: 12px;
    font-weight: 500;
    color: rgba(17, 17, 17, 0.5);
    letter-spacing: 4.8px;
    text-transform: uppercase;
    margin-bottom: 48px;  /* PC 标签→标题间距：48px（规范25） */
}

.about-main-title {
    letter-spacing: -0.02em !important;
    color: #111111 !important;
    line-height: 1 !important;
}

/* 打字机效果 - 固定两行高度防止内容跳动 */
.typewrite-target {
    display: block;
    min-height: 2em;
    line-height: 1;
}

/* 打字机效果光标 */
.typewrite-cursor {
    line-height: 1;
    border-right: 0.08em solid #111111;
    padding-right: 0.04em;
    margin-right: 0.04em;
    animation: typewrite-blink 0.8s step-end infinite;
}

/* PC 端光标（字号 32px）*/
@media (min-width: 1024px) {
    .typewrite-cursor {
        border-right-width: 0.078em; /* 32px × 0.078 ≈ 2.5px */
    }
}

/* 平板端光标（字号 28-32px clamp 范围）*/
@media (min-width: 768px) and (max-width: 1023px) {
    .typewrite-cursor {
        border-right-width: 0.09em; /* 28px × 0.09 ≈ 2.5px */
    }
}

/* 移动端光标（字号 24-28px）*/
@media (max-width: 767px) {
    .typewrite-cursor {
        border-right-width: 0.1em; /* 24px × 0.1 = 2.4px */
    }
}

/* 小屏移动端光标（字号 24px 固定）*/
@media (max-width: 479px) {
    .typewrite-cursor {
        border-right-width: 0.1em; /* 24px × 0.1 = 2.4px */
    }
}

@keyframes typewrite-blink {
    0%, 100% { border-color: #111111; }
    50%       { border-color: transparent; }
}

.about-description {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 64px;  /* PC 描述→下区块间距：64px（规范25/阶梯规范） */
    width: 100%;
}

.about-description p {
    font-family: var(--font-family-zh);
    /* L3 正文：全端统一 16px（黄金阅读字号） */
    font-size: var(--font-size-base);
    font-weight: 400;
    color: #666666;
    /* L3 行高：1.6（舒缓阅读节奏） */
    line-height: var(--line-height-body);
    margin: 0;
}

/* deprecated: 已迁移至 buttons.css 中的 .btn-primary */

/* deprecated: 已迁移至 buttons.css 中的 .btn-primary */

/* ==================== Section 通用样式 ==================== */
.about-section {
    padding: var(--section-padding) 0;
}

.about-section-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--heading-margin-bottom, 64px);
}

.about-section-title {
    font-family: var(--font-family-zh);
    /* L1 一级标题：PC端 32px */
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: #111111;
    /* L1 行高：1.25 */
    line-height: var(--line-height-heading);
    /* L1 字间距：-0.02em */
    letter-spacing: var(--letter-spacing-tight);
    margin: 0;
    text-align: center;
}

.about-section-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-family-en);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.about-section-link:hover {
    gap: 12px;
}

.about-section-link svg {
    width: 20px;
    height: 20px;
}

/* ==================== 核心产品卡片 ==================== */
/* PC端：固定宽度 1200px，3列 Grid 布局 */
.about-projects-container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    box-sizing: border-box;
}

.about-projects-grid-wrapper {
    /* 移动/平板端会覆盖此样式 */
}

.about-projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--card-gap, 24px);
}

.about-section--projects {
    overflow: hidden;
}

/* 移动/平板：核心产品卡片用外描边，去掉外投影，避免横向滚动裁切 */
@media (max-width: 1199px) {
    .about-projects-grid .work-card {
        box-shadow: none;
        border: 1px solid rgba(0, 0, 0, 0.1);
        transition: border-color 0.3s ease;
    }

    .about-projects-grid .work-card:hover {
        transform: none;
        box-shadow: none;
        border-color: #111111;
    }
}

.about-section--projects .about-section-header {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    box-sizing: border-box;
    margin-bottom: var(--heading-margin-bottom, 64px);
}

.about-section--projects .about-section-title {
    text-align: center;
}

/* PC端查看全部作品按钮 */
.about-projects-cta {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    padding-top: 64px; /* 与上方卡片的垂直间距 */
    display: none; /* 默认隐藏，在 PC 端显示 */
}

@media (min-width: 1200px) {
    .about-projects-cta {
        display: block;
    }
}

.project-card, .workflow-card, .strength-card {
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: var(--card-radius) !important;
}

.project-card:hover, .workflow-card:hover {
    transform: translateY(-6px) !important;
    border-color: #111111 !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.strength-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.project-card-image {
    width: 100%;
    border-radius: var(--card-radius) var(--card-radius) 0 0 !important;
    aspect-ratio: 4/3;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.project-card:hover .project-card-image {
    transform: scale(1.05);
}

.project-card-image-wrapper {
    overflow: hidden;
    position: relative;
}

.project-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.4) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

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

.project-card-content {
    padding: var(--spacing-5);  /* 卡片内边距 24px（设计规范） */
}

.project-card-tags {
    display: flex;
    gap: var(--spacing-4);  /* 16px（设计规范） */
    margin-bottom: var(--spacing-3);  /* 12px（设计规范） */
}

.project-card-tag {
    font-family: var(--font-family-en);
    font-size: var(--font-size-xs);  /* 12px - 标签文字（设计规范） */
    font-weight: 500;
    color: #111111;
    letter-spacing: 1px;  /* 标签字间距（设计规范） */
}

.project-card-title {
    font-family: var(--font-family-zh);
    font-size: var(--font-size-lg);  /* 20px - 卡片标题（设计规范） */
    font-weight: 600;
    color: #111111;
    line-height: 1.4;
    margin-bottom: var(--spacing-2);  /* 8px（设计规范） */
}

.project-card-desc {
    font-family: var(--font-family-zh);
    font-size: var(--font-size-sm);  /* 14px - 正文描述（设计规范） */
    font-weight: 400;
    color: #666666;
    line-height: 1.6;  /* 正文行高（设计规范） */
    margin: 0;
}

/* ==================== 职业经历时间线（<1200px：双列年份+详情）Figma 552-3616 移动端语义 ==================== */
.about-timeline-section {
    position: relative;
}

.about-timeline-vertline {
    display: none;
}

.timeline-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 24px;
    padding: 32px 0;  /* 时间线行内边距（组件级，非 section 间距） */
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    position: relative;
    align-items: start;
}

.timeline-row:last-child {
    border-bottom: none;
}

.timeline-row-dot {
    display: none;
}

.timeline-row-content {
    min-width: 0;
}

.timeline-row:not(.timeline-row--reverse) .timeline-row-content {
    grid-column: 2;
    text-align: left;
}

.timeline-row:not(.timeline-row--reverse) .timeline-row-year {
    grid-column: 1;
    grid-row: 1;
}

.timeline-row--reverse .timeline-row-year {
    grid-column: 1;
    grid-row: 1;
}

.timeline-row--reverse .timeline-row-content {
    grid-column: 2;
    text-align: left;
}

.timeline-row-title {
    font-family: var(--font-family-zh);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: #111111;
    line-height: 1.4;
    margin: 0 0 8px;
}

.timeline-row-company {
    font-family: var(--font-family-zh);
    font-size: 14px;
    font-weight: 400;
    color: #999999;
    line-height: 1.5;
    margin: 0 0 16px;
}

.timeline-row-desc {
    font-family: var(--font-family-zh);
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    line-height: 22px;
    margin: 0 0 16px;
}

.timeline-row-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
}

.timeline-row-year {
    font-size: 36px;
    font-weight: 400;
    color: #999999;
    letter-spacing: -1.8px;
    line-height: 40px;
    min-width: 100px;
}

.timeline-year {
    color: inherit;
}

.timeline-year-sep {
    margin: 0 0.15em;
    color: inherit;
}

.timeline-tag {
    font-family: var(--font-family-en);
    font-size: var(--font-size-l5);  /* 12px - 保底线 */
    font-weight: 500;
    color: #111111;
    padding: 6px 12px;
    background: #F3F3F3;
    border-radius: var(--card-radius);  /* 响应式圆角 */
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.timeline-tag:hover {
    background: rgba(0, 0, 0, 0.08);
}

/* ==================== AI 辅助设计工作流 - Figma 552-3735 ==================== */
.about-workflow {
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.about-workflow-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-5);  /* 24px（设计规范） */
}

.workflow-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);  /* 16px（设计规范） */
    padding: var(--spacing-5);  /* 24px（设计规范） */
    background: #f5f5f7;
    border-radius: var(--card-radius);  /* 响应式圆角 */
}

.workflow-card-number {
    font-family: var(--font-family-number);
    font-size: 30px;
    font-weight: 700;
    color: #111111;
    opacity: 0.2;
    line-height: 1.2;
    letter-spacing: 0;
}

.workflow-card-title {
    font-family: var(--font-family-en);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: #111111;
    line-height: 1.4;
    letter-spacing: 0;
    margin: 0;
}

.workflow-card-desc {
    font-family: var(--font-family-zh);
    font-size: var(--font-size-base);
    font-weight: 400;
    color: #666666;
    line-height: 1.6;
    letter-spacing: 0;
    margin: 0;
}

/* ==================== 核心优势 Bento Grid - Figma 552-3681 ==================== */
.strengths-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.strengths-bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: minmax(0, 1fr) 191px;
    grid-row-gap: 32px;
    column-gap: 32px;
}

/* ---- Large Feature Card (8列) ---- */
.strength-card--large {
    grid-column: span 8;
    position: relative;
    border-radius: var(--card-radius);
    overflow: hidden;
    background: transparent;
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    border: 1px solid rgba(255, 255, 255, 1);
    box-shadow: 
        0 0 0 1px rgba(255, 255, 255, 1),
        0 9px 20px rgba(0, 51, 217, 0.03);
    cursor: default;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* 渐变背景层 */
.strength-card--large::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 24px;
    background: radial-gradient(ellipse 120% 80% at 50% 120%,
        rgba(217, 236, 254, 0.56) 0%,
        rgba(255, 255, 255, 0) 58%);
    z-index: -1;
    pointer-events: none;
}

.strength-card--large .strength-card-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px;
    min-height: 392px;
    box-sizing: border-box;
}

.strength-card-content {
    display: flex;
    flex-direction: column;
    gap: 46px;
}

.strength-card--large .strength-card-title {
    font-family: var(--font-family-en);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: #111111;
    line-height: 1.4;
    letter-spacing: 0;
    margin: 0;
}

.strength-card--large .strength-card-desc {
    font-family: var(--font-family-zh);
    font-size: var(--font-size-base);
    font-weight: 400;
    color: #666666;
    line-height: 1.6;
    letter-spacing: 0;
    margin: 0;
}

.strength-card-bg {
    border-radius: var(--card-radius);
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.strength-card-bg-image {
    width: 100%;
    height: 192px;
    object-fit: cover;
    display: block;
}

/* ---- Vertical Feature Card (4列) ---- */
.strength-card--vertical {
    grid-column: span 4;
    position: relative;
    border-radius: var(--card-radius);
    overflow: hidden;
    background: transparent;
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    border: 1px solid rgba(255, 255, 255, 1);
    box-shadow: 
        0 0 0 1px rgba(255, 255, 255, 1),
        0 9px 20px rgba(0, 51, 217, 0.03);
    cursor: default;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex;
    flex-direction: column;
}

/* 渐变背景层 */
.strength-card--vertical::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 24px;
    background: radial-gradient(ellipse 200% 100% at 80% 80%,
        rgba(217, 236, 254, 0.3) 0%,
        rgba(255, 255, 255, 0) 26%);
    z-index: -1;
    pointer-events: none;
}

.strength-card--vertical .strength-card-inner {
    display: flex;
    flex-direction: column;
    padding: 40px;
    min-height: 392px;
    box-sizing: border-box;
    flex: 1;
    height: 100%;
}

/* ---- Box 1: 标题盒子 ---- */
.strength-card-header {
    width: 100%;
    position: relative;
    box-sizing: border-box;
    flex-shrink: 0;
    margin-bottom: 46px;
}

/* ---- Box 3: 图标盒子 ---- */
.strength-card-footer {
    position: absolute;
    bottom: 0;
    right: 0;
}

.strength-icon-wrap {
    width: 192px;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    flex-shrink: 0;
}

.strength-icon {
    width: 100%;
    height: auto;
}

.strength-card-title--center {
    font-family: var(--font-family-en);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: #111111;
    line-height: 1.4;
    letter-spacing: 0;
    margin: 0;
    text-align: left;
}

.strength-card-desc--center {
    font-family: var(--font-family-zh);
    font-size: var(--font-size-base);
    font-weight: 400;
    color: #666666;
    line-height: 1.6;
    letter-spacing: 0;
    margin: 0;
    text-align: left;
}

/* ---- Stats Card (4列) ---- */
.strength-card--stats {
    grid-column: span 4;
    position: relative;
    border-radius: var(--card-radius);
    overflow: hidden;
    background: transparent;
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    border: 1px solid rgba(255, 255, 255, 1);
    box-shadow: 
        0 0 0 1px rgba(255, 255, 255, 1),
        0 9px 20px rgba(0, 51, 217, 0.03);
    cursor: default;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    align-self: stretch;
}

/* 渐变背景层 */
.strength-card--stats::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 24px;
    background: radial-gradient(ellipse 120% 100% at 0% 0%,
        rgba(217, 236, 254, 0.36) 0%,
        rgba(255, 255, 255, 0) 50%);
    z-index: -1;
    pointer-events: none;
}

.strength-card--stats .strength-card-inner {
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-height: 0;
    justify-content: center;
}

.strength-stat-number {
    font-family: var(--font-family-number);
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: #111111;
    line-height: 1;
    letter-spacing: -2.4px;
    margin: 0;
}

.strength-stat-label {
    font-family: var(--font-family-zh);
    font-size: var(--font-size-base);
    font-weight: 500;
    color: #111111;
    letter-spacing: 1.4px;
    line-height: 1.6;
    margin: 0;
}

.strength-stat-desc {
    font-family: var(--font-family-zh);
    font-size: var(--font-size-base);
    font-weight: 400;
    color: #666666;
    line-height: 1.6;
    letter-spacing: 0;
    margin: 16px 0 0;
    padding-top: 16px;
    border-top: 1px solid rgba(195, 198, 212, 0.2);
}

.strength-card-avatars {
    display: flex;
    align-items: center;
    padding: 0 40px 40px;
}

.strength-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 4px solid #ffffff;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.06),
        0 10px 15px rgba(0, 0, 0, 0.06);
    margin-right: -12px;
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
}

.strength-avatar:last-child {
    margin-right: 0;
}

.strength-avatar--1 {
    background: none;
}

.strength-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.strength-avatar--2,
.strength-avatar--3 {
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
}

/* ---- Stats Wide Card (8列) ---- */
.strength-card--stats-wide {
    grid-column: span 8;
    position: relative;
    border-radius: var(--card-radius);
    overflow: hidden;
    background: transparent;
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    border: 1px solid rgba(255, 255, 255, 1);
    box-shadow: 
        0 0 0 1px rgba(255, 255, 255, 1),
        0 9px 20px rgba(0, 51, 217, 0.03);
    cursor: default;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 40px;
    gap: 32px;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* 渐变背景层 */
.strength-card--stats-wide::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 24px;
    background: radial-gradient(ellipse 100% 150% at 80% 100%,
        rgba(217, 236, 254, 0.36) 0%,
        rgba(255, 255, 255, 0) 58%);
    z-index: -1;
    pointer-events: none;
}

.strength-card--stats-wide .strength-card-inner {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 32px;
}

.strength-stat-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.strength-stat-group .strength-card-title {
    font-family: var(--font-family-en);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: #111111;
    line-height: 1.4;
    letter-spacing: 0;
    margin: 0;
}

.strength-stat-number--small {
    font-family: var(--font-family-number);
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: #111111;
    line-height: 1;
    letter-spacing: -2.4px;
    margin: 0;
}

.strength-stat-label--normal {
    font-family: var(--font-family-zh);
    font-size: var(--font-size-base);
    font-weight: 500;
    color: #111111;
    letter-spacing: 0;
    line-height: 1.6;
    margin: 0;
}

.strength-stat-desc--wide {
    font-family: var(--font-family-zh);
    font-size: var(--font-size-base);
    font-weight: 400;
    color: #666666;
    line-height: 1.6;
    letter-spacing: 0;
    margin: 0;
    padding-top: 0;
    border-top: none;
}

.strength-card-avatars--right {
    flex-shrink: 0;
}

/* ==================== 探索中的事 - Figma 552-3742 ==================== */
.exploring-container {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.exploring-row {
    border-top: none;
    border-bottom: 1px solid #eeeeee;
    padding: 20px 0;
    cursor: default;
}

.exploring-row:hover {
    background: transparent;
}

.exploring-row-inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 40px;
}

.exploring-row-title {
    font-family: var(--font-family-zh);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: #111111;
    line-height: 1.4;
    letter-spacing: 0;
    margin: 0;
}

.exploring-row-desc {
    font-family: var(--font-family-zh);
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    line-height: 1.5;
    letter-spacing: 0;
    margin: 0;
}

.exploring-row-desc--en {
    font-family: var(--font-family-en);
    font-size: 16px;
    font-weight: 400;
    color: #666666;
    line-height: 1.7;
    letter-spacing: 0;
    margin: 0;
}


/* ==================== 摄影画廊 - Figma 552-3767 ==================== */
.about-gallery {
    border-radius: var(--card-radius);
    padding: 0 0 0;
}

/* 标题单元：与上方内容间距由 section 自身 padding 控制 */
.about-gallery-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: 0;
}

/* 画廊标题：与副标题间距 */
.about-gallery-title {
    font-family: var(--font-family-zh);  /* 设计规范：中文标题使用中文字体 */
    /* L1 一级标题：PC端 32px */
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: #111111;
    /* L1 行高：1.25 */
    line-height: var(--line-height-heading);
    /* L1 字间距：-0.02em */
    letter-spacing: var(--letter-spacing-tight);
    margin: 0;
    margin-bottom: 8px;  /* 标题→副标题间距：8px（设计规范，固定） */
    text-align: left;
}

/* 查看全部链接 */
.about-gallery-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-family-en);
    font-size: 16px;
    font-weight: 600;
    color: #111111;
    text-decoration: none;
    transition: gap 0.2s ease;
    flex-shrink: 0;
}

.about-gallery-link:hover {
    gap: 12px;
}

.about-gallery-link svg {
    width: 16px;
    height: 12px;
}

/* 副标题 */
.about-gallery-subtitle {
    font-family: var(--font-family-zh);
    font-size: 16px;
    font-weight: 400;
    color: #666666;
    line-height: 1.5;
    margin: 0;
    text-align: left;
}

/* Grid 布局：12列系统，8:4 比例 */
/* 副标题→内容间距由 margin-top 控制：64px（设计规范） */
.about-gallery-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: 24px;
    margin-top: var(--heading-margin-bottom, 64px);  /* 副标题→内容间距：64px（设计规范） */
}

/* 左：大图占 8 列 */
.gallery-item--large {
    grid-column: span 8;
    border-radius: var(--card-radius);
    overflow: hidden;
    position: relative;
    cursor: pointer;
    aspect-ratio: 792/520;
}

.gallery-item--large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    display: block;
}

.gallery-item--large:hover img {
    transform: scale(1.04);
}

/* 右：堆叠图占 4 列 */
.gallery-item-stack {
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.gallery-item--stack-top,
.gallery-item--stack-bottom {
    border-radius: var(--card-radius);
    overflow: hidden;
    position: relative;
    cursor: pointer;
    flex: 1;
    aspect-ratio: 384/248;
}

.gallery-item--stack-top img,
.gallery-item--stack-bottom img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    display: block;
}

.gallery-item--stack-top:hover img,
.gallery-item--stack-bottom:hover img {
    transform: scale(1.04);
}

/* 图片叠加层 - 底部渐变遮罩，hover 时显示 */
.gallery-item-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.7) 100%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.gallery-item--large:hover .gallery-item-overlay,
.gallery-item--stack-top:hover .gallery-item-overlay,
.gallery-item--stack-bottom:hover .gallery-item-overlay {
    opacity: 1;
}

/* 图片信息区域 - 左下角，hover 时滑入显示 */
.gallery-item-info {
    position: absolute;
    bottom: 40px;
    left: 40px;
    z-index: 2;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
}

.gallery-item--large:hover .gallery-item-info,
.gallery-item--stack-top:hover .gallery-item-info,
.gallery-item--stack-bottom:hover .gallery-item-info {
    opacity: 1;
    transform: translateY(0);
}

/* 位置+时间行 */
.gallery-info-location {
    font-family: var(--font-family-en);
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    line-height: 1.5;
    margin: 0 0 6px;
}

/* 标题行 */
.gallery-info-title {
    font-family: var(--font-family-zh);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: #ffffff;
    line-height: 1 !important;
    margin: 0;
}

/* ==================== 引用区域 - 三层夹心流光边框 ==================== */
.about-quote {
    margin-top: 0;
    padding: var(--section-padding, 120px) var(--gutter-desktop);
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

.about-quote-inner {
    position: relative !important;
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(40px) !important;
    -webkit-backdrop-filter: blur(40px) !important;
    border-radius: var(--card-radius) !important;
    padding: 120px 64px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 32px !important;
    overflow: hidden !important;
    z-index: 1;
    border: none !important;
    
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    max-width: 1200px !important;
    width: 100% !important;
    box-sizing: border-box;
}

/* 旋转彩色流光层 */
.about-quote-inner::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -50% !important;
    width: 200% !important;
    height: 200% !important;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(66, 133, 244, 0.3) 45deg,
        rgba(26, 166, 74, 0.3) 90deg,
        transparent 110deg,
        rgba(252, 189, 0, 0.3) 180deg,
        rgba(219, 55, 45, 0.3) 225deg,
        transparent 270deg,
        transparent 360deg
    ) !important;
    animation: rotateGlow 16s linear infinite !important;
    z-index: -2 !important;
    filter: blur(4px) !important;
}

/* 内部遮罩层 (实现 1.5px 极细边框感) */
.about-quote-inner::after {
    content: '' !important;
    position: absolute !important;
    inset: 1.5px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border-radius: 12px !important;
    z-index: -1 !important;
    backdrop-filter: blur(20px) !important;
}

@keyframes rotateGlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 交互唤醒 - 鼠标悬浮时算力加速 */
.about-quote-inner:hover::before {
    animation-duration: 10s !important;
}

/* 子元素层级确保在遮罩层之上 */
.about-quote-inner > * {
    position: relative;
    z-index: 1 !important;
}

.about-quote-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-quote-icon svg {
    opacity: 0.3;
}

/* 宣言容器排版 */
.manifesto-content {
    text-align: center;
    width: 100%;
}

.manifesto-line {
    font-family: var(--font-family-zh);
    font-size: 20px;
    line-height: 1.8;
    color: #111111;
    margin-bottom: 4px;
    letter-spacing: 0.02em;
    opacity: 0.9;
}

.manifesto-secondary {
    font-size: 18px;
    color: #444444;
    font-weight: 400;
}

.manifesto-footer {
    margin-top: 40px;
    font-size: 22px;
    font-weight: 500;
    color: #111111;
}

/* 衬线体增加人文温度 */
.miracle-text {
    font-family: "STSong", "SimSun", serif; 
    font-style: italic;
    color: rgba(66, 133, 244, 1); /* 使用 Google Blue */
    margin: 0 4px;
    position: relative;
}

/* 强调文字的下划线感 */
.highlight-ink {
    position: relative;
    z-index: 1;
}
.highlight-ink::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 8px;
    background: rgba(66, 133, 244, 0.1);
    z-index: -1;
}

/* 签名样式 */
.manifesto-signature {
    margin-top: 64px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: #999999;
    display: inline-block;
    border-top: 1px solid #EEEEEE;
    padding-top: 16px;
}

/* 针对流光边框容器的微调：增加内部呼吸感 */
.about-quote-inner {
    padding: 100px 40px !important; /* 调整内边距让文字更聚焦 */
}

/* 移动端适配 */
@media (max-width: 767px) {
    .manifesto-line {
        font-size: 16px;
        line-height: 1.6;
    }
    .manifesto-footer {
        font-size: 18px;
        margin-top: 32px;
    }
    .about-quote-inner {
        padding: 60px 24px !important;
    }
}

.about-quote-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding-top: 16px;
}

/* deprecated: 已迁移至 buttons.css 中的 .btn-primary */

/* ==================== 响应式设计 ==================== */

/* 桌面端 (≥1200px) - 完整 Figma 设计稿布局 */
/* 阶梯规范：PC Section padding = 120px */
@media (min-width: 1200px) {
    :root {
        --section-padding: 120px;
    }
    
    .about-hero {
        display: flex;
        gap: 85px;
        padding: 120px 0;
    }
    
    .about-hero-left {
        width: 317px;
        flex-shrink: 0;
    }
    
    .about-hero-education {
        padding-left: 0;
    }
    
    .about-hero-right {
        flex: 1;
        max-width: 664px;
    }
    
    .about-hero-portrait-section {
        margin-bottom: 80px;
    }
    
    /* 照片容器 - Figma 384x384 */
    .portrait-container {
        width: 384px;
        height: 384px;
        border-radius: 24px;
        padding: 24px;
    }
    
    /* 人物头像 - Figma 334x334 */
    .portrait-image {
        width: 334px;
        height: 334px;
        border-radius: 24px;
    }
    
    .about-social-links {
        right: -30px;
        bottom: 8px;
        gap: 10px;
    }
    
    .social-link {
        width: 48px;
        height: 48px;
        border-radius: var(--card-radius);
    }

    .about-body {
        padding-left: 0;
        padding-right: 0;
    }

    /* 职业经历 — Figma 552-3616（≥1200px：中轴竖线 + 双列 48px 间距） */
    .about-timeline-section {
        border-radius: var(--card-radius);
        padding: 40px 0;
    }

    .about-timeline-vertline {
        display: block;
        position: absolute;
        left: 50%;
        top: 40px;
        bottom: 40px;
        width: 1px;
        background: rgba(195, 198, 212, 0.2);
        transform: translateX(-50%);
        pointer-events: none;
        z-index: 0;
    }

    .timeline-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 48px;
        row-gap: 0;
        align-items: center;
        padding: 0;
        border-bottom: none;
        margin-top: 0;
    }

    .timeline-row + .timeline-row {
        margin-top: 48px;
    }

    .timeline-row-dot {
        display: block;
        position: absolute;
        grid-column: 1 / -1;
        grid-row: 1;
        left: 50%;
        top: 12px;
        width: 8px;
        height: 8px;
        margin-left: -4px;
        border-radius: 50%;
        background: #1b1c1c;
        box-shadow: 0 0 0 10px rgba(86, 144, 255, 0.15);
        z-index: 2;
        pointer-events: none;
    }

    .timeline-row:not(.timeline-row--reverse) .timeline-row-content {
        grid-column: 1;
        text-align: right;
        padding-right: 0;
    }

    .timeline-row:not(.timeline-row--reverse) .timeline-row-year {
        grid-column: 2;
        text-align: left;
        padding-left: 48px;
        min-width: 0;
    }

    .timeline-row:not(.timeline-row--reverse) .timeline-row-tags {
        justify-content: flex-end;
    }

    .timeline-row--reverse .timeline-row-year {
        grid-column: 1;
        text-align: right;
        padding-right: 48px;
        min-width: 0;
    }

    .timeline-row--reverse .timeline-row-content {
        grid-column: 2;
        text-align: left;
    }

    .timeline-row--reverse .timeline-row-tags,
    .timeline-row-tags--right {
        justify-content: flex-start;
    }

    .timeline-tag {
        border-radius: var(--card-radius);  /* 响应式圆角：16px */
    }

    .timeline-row-year {
        font-size: 40px;
        font-weight: 400;
        color: #e5e2e1;
        letter-spacing: -1.8px;
        line-height: 1.1;
    }
}

    /* 平板端 (768px - 1199px) */
    /* 阶梯规范：Tablet Section padding = 80px */
    @media (max-width: 1199px) and (min-width: 768px) {
        :root {
            --container-padding: var(--gutter-tablet);
            --section-padding: 80px;
            --heading-margin-bottom: 48px;
            /* 平板端圆角阶梯：16px */
            --card-radius: 16px;
            /* 平板端字号：L1 28px */
            --font-size-xl: 1.75rem;
            --font-size-2xl: 1.75rem;
        }
        
        /* 流体标题：平板端 */
        .about-section-label {
            font-size: clamp(0.75rem, 0.8vw + 0.5rem, 0.875rem); /* 12px - 14px（保底线） */
            letter-spacing: 4px;
            margin-bottom: 24px;
        }
        
        .about-main-title {
            font-size: clamp(1.75rem, 3vw + 1rem, 2rem); /* 28px - 32px */
            letter-spacing: -0.02em;
            line-height: 1 !important;
            margin-bottom: 48px;
        }
        
        .about-description p {
            font-size: var(--font-size-base); /* 16px 全端统一 */
            line-height: var(--line-height-body);
        }
        
        .about-section-title {
            font-size: clamp(1.75rem, 2vw + 1rem, 2rem); /* 28px - 32px */
        }
        
        .about-gallery-title {
            font-size: clamp(1.75rem, 2vw + 1rem, 2rem); /* 28px - 32px */
            line-height: 1 !important;
            margin-bottom: 8px;
        }
        
        .project-card-title {
            font-size: clamp(1.125rem, 1vw + 0.875rem, 1.25rem); /* 18px - 20px L2 */
        }
        
        .workflow-card-title {
            font-size: clamp(1.125rem, 1vw + 0.875rem, 1.25rem); /* 18px - 20px L2 */
        }
        
        .workflow-card-desc {
            font-size: clamp(0.875rem, 1vw + 0.625rem, 1rem); /* 14px - 16px */
        }
        
        .strength-stat-number {
            font-size: clamp(2.5rem, 4vw + 1rem, 3rem); /* 40px - 48px */
        }
        
        .gallery-item-title {
            font-size: clamp(1.5rem, 2.5vw + 0.75rem, 1.875rem); /* 24px - 30px */
        }
    
    .about-hero {
        display: flex;
        gap: 48px;
        padding: 80px 0;
    }
    
    .about-hero-left {
        width: 240px;
        flex-shrink: 0;
    }
    
    .about-hero-education {
        padding-left: 32px;
    }
    
    .about-hero-education {
        gap: 24px;
    }
    
    .about-education-card {
        padding: 16px 0;
    }
    
    .about-education-year {
        font-size: 28px;
        letter-spacing: -0.5px;
        line-height: 36px;
    }
    
    .about-education-degree {
        font-size: 15px;
    }
    
    .about-hero-right {
        flex: 1;
    }
    
    .about-hero-portrait-section {
        margin-bottom: 48px;
    }
    
    /* 平板端照片容器 - 按比例缩小 */
    .portrait-container {
        width: 300px;
        height: 300px;
        border-radius: 16px;
        padding: 20px;
    }
    
    .portrait-image {
        width: 260px;
        height: 260px;
        border-radius: 16px;
    }
    
    .about-social-links {
        right: -28px;
        bottom: 6px;
        gap: 10px;
        transform: translateY(50%);
    }
    
    .social-link {
        width: 48px;
        height: 48px;
        border-radius: var(--card-radius);
    }
    
    .social-link svg {
        width: 18px;
        height: 18px;
    }
    
    .about-section-label {
        font-size: 12px;
        letter-spacing: 4px;
        margin-bottom: 24px;
    }
    
    .about-main-title {
        font-size: 32px;
        letter-spacing: -2px;
        line-height: 1 !important;
        margin-bottom: 48px;  /* 平板端标题→内容间距：48px（阶梯规范 Tablet 48px） */
    }
    
    .about-description {
        gap: 12px;
        margin-bottom: 24px;
    }
    
    .about-description p {
        font-size: 16px;
        line-height: 1.6;
    }

    /* 核心产品 - 平板端横向滚动（伪元素占位法） */
    .about-section--projects .about-section-header {
        text-align: center;
        justify-content: center;
        display: flex;
        width: 100%;
        margin-bottom: 48px;
    }

    /* 平板端隐藏查看全部按钮（移动端逻辑：显示全部卡片） */
    .about-projects-cta {
        display: none;
    }

    .about-projects-container {
        max-width: none;
        padding: 0;
        width: 100%;
    }

    .about-projects-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 24px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .about-projects-grid::-webkit-scrollbar {
        display: none;
    }

    .about-projects-grid::before,
    .about-projects-grid::after {
        content: '';
        flex-shrink: 0;
        scroll-snap-align: start;
        width: var(--container-padding);
    }

    .project-card,
    .about-projects-grid .work-card {
        flex-shrink: 0;
        /* 平板端默认显示 2.33 个卡片 */
        width: calc((100vw - 72px) * 0.429);
        min-width: calc((100vw - 72px) * 0.429);
        scroll-snap-align: start;
        border-radius: var(--card-radius);
    }

    .project-card-content,
    .about-projects-grid .work-card .work-card-title-container {
        padding: 20px;
    }

    .about-projects-grid .work-card .work-card-info,
    .about-projects-grid .work-card .work-card-tags {
        padding-left: 20px;
        padding-right: 20px;
    }

    .project-card-title,
    .about-projects-grid .work-card .work-card-title {
        font-size: 18px;
    }

    /* AI 工作流 - 平板端两列撑满 */
    .about-workflow {
        padding-bottom: 0;
        width: 100%;
        max-width: none;
        box-sizing: border-box;
    }
    
    .about-workflow-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-5);  /* 24px（设计规范） */
    }
    
    .workflow-card {
        padding: var(--spacing-5);  /* 24px（设计规范） */
        border-radius: var(--card-radius);  /* 统一圆角（设计规范） */
    }
    
    .workflow-card-title {
        font-size: 18px;  /* 平板端 18px（设计规范） */
    }
    
    .workflow-card-desc {
        font-size: var(--font-size-base);  /* 16px（设计规范） */
    }
    
    /* 核心优势 - 平板端 */
    .strengths-container {
        gap: 48px;  /* 平板端内容区间距：48px（阶梯规范 Tablet 48px） */
    }

    /* Section 标题 - 平板端响应式 */
    .about-section-header {
        justify-content: center;
        margin-bottom: 48px;  /* 标题单元距内容间距：48px（设计规范） */
    }

    .about-section-title {
        font-size: 28px;  /* L1 一级标题：平板端 28px（设计规范13.1） */
        text-align: center;
    }

    /* 探索中的事 - 平板端 */
    .exploring-row-inner {
        padding: 0 24px;
    }

    /* 摄影画廊 - 平板端响应式 */
    .about-gallery {
        padding-bottom: 0;
        border-radius: var(--card-radius);
    }

    .about-gallery-header {
        padding-top: 0;
    }

    .about-gallery-title {
        font-size: 28px;  /* L1 一级标题：平板端 28px（设计规范13.1） */
        line-height: 1 !important;
        text-align: left;
        margin-bottom: 8px;  /* 标题→副标题间距：8px（设计规范，固定） */
    }

    .about-gallery-subtitle {
        font-size: 14px;
    }

    .about-gallery-grid {
        grid-template-columns: repeat(12, 1fr);
        grid-column-gap: 16px;
        margin-top: 48px;  /* 副标题→内容间距：48px（设计规范） */
    }

    .gallery-item--large {
        grid-column: span 8;
        aspect-ratio: 792/520;
        border-radius: var(--card-radius);
    }

    .gallery-item-stack {
        grid-column: span 4;
        flex-direction: column;
        gap: 16px;
    }

    .gallery-item--stack-top,
    .gallery-item--stack-bottom {
        flex: 1;
        aspect-ratio: 384/248;
        border-radius: var(--card-radius);
    }

    .gallery-item--large::before,
    .gallery-item--stack-top::before,
    .gallery-item--stack-bottom::before {
        border-radius: var(--card-radius);
    }

    .gallery-item-info {
        bottom: 24px;
        left: 24px;
    }

    .gallery-info-location {
        font-size: 12px;
    }

    /* 核心优势 - 平板端响应式 */
    .strengths-bento-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .strength-card--large,
    .strength-card--vertical,
    .strength-card--stats,
    .strength-card--stats-wide {
        grid-column: span 1;
    }

    .strength-card--large {
        min-height: auto;
    }

    .strength-card--large .strength-card-inner {
        padding: 24px;
        min-height: 280px;
        gap: 24px;
    }

    .strength-card-content {
        gap: 24px;
    }

    .strength-card--large .strength-card-title {
        font-size: var(--font-size-lg);
        line-height: 1.4;
    }

    .strength-card--large .strength-card-desc {
        font-size: var(--font-size-sm);
        line-height: 1.5;
    }

    .strength-card-bg-image {
        height: 140px;
    }

    .strength-card--vertical {
        min-height: auto;
        height: 100%;
    }

    .strength-card--vertical .strength-card-inner {
        padding: 24px;
        min-height: 300px;
    }

    .strength-card-header {
        margin-bottom: 24px;
    }

    .strength-card-footer {
        bottom: 24px;
        right: 24px;
    }

    .strength-icon-wrap {
        width: 168px;
        height: 168px;
    }

    .strength-icon-wrap svg {
        width: 96px;
        height: 96px;
    }

    .strength-card--stats .strength-card-inner {
        padding: 24px;
    }

    .strength-stat-number {
        font-size: 40px;
    }

    .strength-card-avatars {
        padding: 0 24px 24px;
    }

    .strength-card--stats-wide {
        flex-direction: column;
        padding: 24px;
        gap: 16px;
    }

    .strength-card--stats-wide .strength-card-inner {
        flex-direction: column;
        gap: 16px;
    }

    .strength-stat-number--small {
        font-size: 40px;
    }

    /* quote section 与 footer 间距 - 平板端 80px */
    .about-quote {
        padding-bottom: 80px;
    }
}

    /* 移动端（≤767px） */
    /* 阶梯规范：Mobile Section padding = 48px */
    @media (max-width: 767px) {
        :root {
            --container-padding: var(--gutter-mobile);
            --section-padding: 48px;
            --heading-margin-bottom: 32px;
            /* 移动端圆角阶梯：12px */
            --card-radius: 12px;
            /* 移动端字号：L1 24px */
            --font-size-xl: 1.5rem;
            --font-size-2xl: 1.5rem;
        }
        
        /* 流体标题：移动端 */
        .about-section-label {
            font-size: clamp(0.75rem, 1.5vw + 0.5rem, 0.875rem); /* 12px - 14px（保底线） */
            letter-spacing: 3px;
            margin-bottom: 16px;
        }
        
        .about-main-title {
            font-size: clamp(1.5rem, 4vw + 1rem, 1.75rem); /* 24px - 28px */
            letter-spacing: -0.02em;
            line-height: 1 !important;
            margin-bottom: 32px;
        }
        
        .about-description p {
            font-size: var(--font-size-base); /* 16px 全端统一 */
            line-height: var(--line-height-body);
        }
        
        .about-section-title {
            font-size: clamp(1.5rem, 3vw + 0.75rem, 1.75rem); /* 24px - 28px */
            text-align: center;
        }
        
        .about-gallery-title {
            font-size: clamp(1.5rem, 3vw + 0.75rem, 1.75rem); /* 24px - 28px */
            line-height: 1 !important;
            margin-bottom: 8px;
        }
        
        .project-card-title {
            font-size: clamp(1rem, 1vw + 0.75rem, 1.0625rem); /* 16px - 17px */
        }
        
        .workflow-card-title {
            font-size: clamp(1rem, 1vw + 0.75rem, 1.0625rem); /* 16px - 17px */
            line-height: 1.4;
        }
        
        .workflow-card-desc {
            font-size: clamp(0.875rem, 1vw + 0.625rem, 0.9375rem); /* 14px - 15px */
            line-height: 1.5;
        }
        
        .strength-stat-number {
            font-size: clamp(2rem, 4vw + 1rem, 2.5rem); /* 32px - 40px */
        }
        
        .gallery-item-title {
            font-size: clamp(1.25rem, 2.5vw + 0.5rem, 1.5rem); /* 20px - 24px */
            line-height: 1.3;
        }
        
        .timeline-row-year {
            font-size: clamp(1.25rem, 3vw + 0.75rem, 1.5rem); /* 20px - 24px */
        }
        
        .timeline-tag {
            font-size: clamp(0.75rem, 1vw + 0.5rem, 0.875rem); /* 12px - 14px（保底线） */
        }
        
        .exploring-row-title {
            font-size: clamp(1rem, 1.5vw + 0.625rem, 1.0625rem); /* 16px - 17px */
        }
        
        .exploring-row-desc {
            font-size: clamp(0.8125rem, 1vw + 0.5rem, 0.875rem); /* 13px - 14px */
        }
    
    .about-hero {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 24px;
        padding: 48px 0;  /* 移动端 about-hero padding：48px（阶梯规范） */
        min-height: auto;
    }

    /* 左侧 - 教育经历 - 完整显示，字号压缩 */
    .about-hero-left {
        display: block;
        width: 35%;
        flex-shrink: 0;
    }

    .about-hero-education {
        padding-left: 0;
        gap: 0;
    }

    .about-education-card {
        padding: 16px 0;
    }

    .about-education-year {
        font-size: 16px;
        line-height: 20px;
    }

    .about-education-degree {
        font-size: 13px;
        word-break: break-word;
    }

    /* 右侧 - 照片 + 介绍 */
    .about-hero-right {
        width: 65%;
        max-width: 100%;
        gap: 16px;
        flex-shrink: 0;
    }

    /* 照片区域 */
    .about-hero-portrait-section {
        width: 100%;
        margin-bottom: 0;
    }

    .about-hero-portrait-wrapper {
        padding-bottom: 0;
    }

    /* 移动端照片容器 - 缩小 */
    .portrait-container {
        width: 200px;
        height: auto;
        aspect-ratio: 1;
        border-radius: 12px;
        padding: 12px;
        margin: 0;
        overflow: visible;
    }

    .portrait-image {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        border-radius: 12px;
    }

    /* 社交链接 - 移到头像右侧，垂直居中 */
    .about-social-links {
        right: -44px;
        bottom: 0;
        transform: none;
        gap: 8px;
    }

    .social-link {
        width: 44px;
        height: 44px;
        border-radius: var(--card-radius);
    }

    .social-link svg {
        width: 16px;
        height: 16px;
    }

    /* 文字介绍区域 */
    .about-hero-content {
        margin-bottom: 0;
        width: 100%;
    }
    
    .about-section-label {
        font-size: 12px;
        letter-spacing: 3px;
        margin-bottom: 16px;
    }
    
    .about-main-title {
        font-size: 28px;
        letter-spacing: -1.5px;
        line-height: 1 !important;
        margin-bottom: 32px;  /* 移动端标题→内容间距：32px（阶梯规范 Mobile 32px） */
    }
    
    .about-description {
        gap: 12px;
        margin-bottom: 24px;
    }
    
    .about-description p {
        font-size: 15px;
        line-height: 1.6;
    }
    
    /* 核心产品 - 移动端横向滚动（伪元素占位法） */
    .about-section--projects .about-section-header {
        text-align: center;
        justify-content: center;
        display: flex;
        width: 100%;
        margin-bottom: 32px;
    }

    /* 移动端隐藏查看全部按钮（移动端逻辑：显示全部卡片） */
    .about-projects-cta {
        display: none;
    }

    .about-projects-container {
        max-width: none;
        padding: 0;
        width: 100%;
    }

    .about-projects-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 16px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .about-projects-grid::-webkit-scrollbar {
        display: none;
    }

    .about-projects-grid::before,
    .about-projects-grid::after {
        content: '';
        flex-shrink: 0;
        scroll-snap-align: start;
        width: var(--container-padding);
    }

    .project-card,
    .about-projects-grid .work-card {
        flex-shrink: 0;
        /* 移动端默认显示 1 + 1/3 个卡片 */
        width: calc((100vw - 48px) * 0.75);
        min-width: calc((100vw - 48px) * 0.75);
        scroll-snap-align: start;
        border-radius: var(--card-radius);
    }

    .project-card-content,
    .about-projects-grid .work-card .work-card-title-container {
        padding: 16px;
    }

    .about-projects-grid .work-card .work-card-info,
    .about-projects-grid .work-card .work-card-tags {
        padding-left: 16px;
        padding-right: 16px;
        padding-bottom: 16px;
    }

    .project-card-title,
    .about-projects-grid .work-card .work-card-title {
        font-size: 16px;
    }
    
    /* 职业经历 */
    .timeline-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .timeline-row:not(.timeline-row--reverse) .timeline-row-content,
    .timeline-row:not(.timeline-row--reverse) .timeline-row-year,
    .timeline-row--reverse .timeline-row-content,
    .timeline-row--reverse .timeline-row-year {
        grid-column: 1;
        grid-row: auto;
    }

    .timeline-row:not(.timeline-row--reverse) .timeline-row-year {
        order: -1;
    }

    .timeline-row-year {
        font-size: 24px;
        line-height: 1.2;
        min-width: 0;
    }

    .timeline-row-tags {
        gap: 6px;
    }
    
    .timeline-tag {
        font-size: 12px;  /* 保底线 12px */
        padding: 4px 8px;
        border-radius: var(--card-radius);  /* 响应式圆角：12px */
    }
    
    /* AI 工作流 */
    .about-workflow-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .about-workflow {
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
        gap: 24px;
    }
    
    .workflow-card {
        padding: var(--spacing-4);  /* 16px（设计规范） */
        border-radius: var(--card-radius);  /* 响应式圆角：12px */
    }

    .workflow-card-number {
        font-size: 24px;  /* 移动端 24px（设计规范） */
    }

    .workflow-card-title {
        font-size: 16px;  /* 移动端 16px（设计规范） */
        line-height: 1.4;  /* 行高（设计规范） */
    }
    
    .workflow-card-desc {
        font-size: 15px;  /* 移动端 15px（设计规范） */
        line-height: 1.5;  /* 行高（设计规范） */
    }

    /* 核心优势 - 移动端 */
    .strengths-container {
        gap: 24px;
    }

    /* 探索中的事 */
    .exploring-container {
        gap: 0;
    }

    .exploring-row {
        padding: 16px 0;
    }

    .exploring-row-inner {
        padding: 0 16px;
    }

    .exploring-row-title {
        font-size: 17px;
    }

    .exploring-row-desc {
        font-size: 13px;
        line-height: 22px;
    }

    /* 摄影画廊 - 移动端响应式 */
    .about-gallery {
        padding-bottom: 0;
        border-radius: var(--card-radius);
    }

    .about-gallery-header {
        flex-direction: row;
        align-items: flex-start;  /* 与副标题顶部对齐 */
        justify-content: space-between;
        padding-top: 0;
    }

    .about-gallery-title {
        font-size: 24px;  /* L1 一级标题：移动端 24px（设计规范13.1） */
        line-height: 1 !important;
        text-align: left;
        margin-bottom: 8px;  /* 标题→副标题间距：8px（设计规范，固定） */
    }

    .about-gallery-subtitle {
        font-size: 13px;
        text-align: left;
    }

    .about-gallery-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 32px;  /* 副标题→内容间距：32px（设计规范） */
    }

    .gallery-item--large {
        grid-column: span 1;
        aspect-ratio: 4/3;
        border-radius: var(--card-radius);
    }

    .gallery-item-stack {
        grid-column: span 1;
        flex-direction: row;
        gap: 12px;
    }

    .gallery-item--stack-top,
    .gallery-item--stack-bottom {
        flex: 1;
        aspect-ratio: 4/3;
        border-radius: var(--card-radius);
    }

    .gallery-item--large::before,
    .gallery-item--stack-top::before,
    .gallery-item--stack-bottom::before {
        border-radius: var(--card-radius);
    }

    .gallery-item-info {
        bottom: 20px;
        left: 20px;
    }

    .gallery-info-title {
        font-size: 20px;
        line-height: 26px;
    }

    .gallery-info-location {
        font-size: 12px;
    }

    /* 探索中的事 - 移动端 */
    .exploring-row {
        padding: 16px 0;
    }

    .exploring-row-title {
        font-size: 17px;
    }

    .exploring-row-desc {
        font-size: 13px;
        line-height: 22px;
    }

    /* 核心优势 - 移动端 */
    .about-section-header {
        justify-content: center;
        margin-bottom: 32px;  /* 标题单元距内容间距：32px（设计规范） */
    }

    .about-section-title {
        font-size: 24px;  /* L1 一级标题：移动端 24px（设计规范13.1） */
        text-align: center;
    }

    .strengths-bento-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .strength-card--large,
    .strength-card--vertical,
    .strength-card--stats,
    .strength-card--stats-wide {
        grid-column: span 1;
    }

    .strength-card--large {
        min-height: auto;
    }

    .strength-card--large .strength-card-inner {
        padding: 24px;
        min-height: auto;
        gap: 16px;
    }

    .strength-card-content {
        gap: 16px;
    }

    .strength-card--large .strength-card-title {
        font-size: 18px;
        line-height: 28px;
    }

    .strength-card--large .strength-card-desc {
        font-size: 14px;
        line-height: 22px;
    }

    .strength-card-bg {
        border-radius: var(--card-radius);
    }

    .strength-card-bg-image {
        height: 120px;
    }

    .strength-card--vertical {
        min-height: auto;
        height: 100%;
    }

    .strength-card--vertical .strength-card-inner {
        padding: 24px;
        min-height: 240px;
    }

    .strength-card-header {
        margin-bottom: 24px;
    }

    .strength-card-footer {
        bottom: 24px;
        right: 24px;
    }

    .strength-icon-wrap {
        width: 96px;
        height: 96px;
    }

    .strength-icon-wrap svg {
        width: 64px;
        height: 64px;
    }

    .strength-card-title--center {
        font-size: var(--font-size-base);
        line-height: 1.4;
    }

    .strength-card-desc--center {
        font-size: var(--font-size-base);
        line-height: 1.6;
    }

    .strength-card-progress {
        padding: 12px;
        gap: 6px;
    }

    .strength-card--stats .strength-card-inner {
        padding: 20px;
    }

    .strength-stat-number {
        font-size: var(--font-size-2xl);
        letter-spacing: -1.5px;
    }

    .strength-stat-label {
        font-size: var(--font-size-base);
        letter-spacing: 0;
    }

    .strength-stat-desc {
        font-size: var(--font-size-base);
        line-height: 1.6;
        margin-top: 12px;
        padding-top: 12px;
    }

    .strength-card-avatars {
        padding: 0 20px 20px;
    }

    .strength-avatar {
        width: 36px;
        height: 36px;
        border-width: 3px;
        margin-right: -8px;
    }

    .strength-card--stats-wide {
        flex-direction: column;
        padding: 20px;
        gap: 16px;
    }

    .strength-card--stats-wide .strength-card-inner {
        flex-direction: column;
        gap: 12px;
    }

    .strength-stat-number--small {
        font-size: 32px;
        letter-spacing: -1.5px;
    }

    .strength-stat-label--normal {
        font-size: var(--font-size-base);
    }

    .strength-stat-desc--wide {
        font-size: var(--font-size-base);
        line-height: 1.6;
    }

    .about-quote {
        padding: 0 var(--gutter-tablet);
        padding-bottom: 64px;
        width: 100%;
        box-sizing: border-box;
    }

    .about-quote-inner {
        padding: 80px 48px !important;
        border-radius: 16px !important;
        gap: 24px;
    }

    .about-quote-inner::after {
        border-radius: 14.5px !important;
    }

    .about-quote-icon svg {
        width: 32px;
        height: auto;
    }

    .about-quote-text {
        font-size: 22px;
        line-height: 36px;
    }

    .about-quote-buttons {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        padding-top: 8px;
    }

    .about-quote-buttons .btn-primary,
    .about-quote-buttons .btn-secondary {
        flex: 1;
        min-width: 120px;
    }
}

/* 小屏幕手机（≤480px）超小屏保底线 */
/* 字号完全对齐 767px 的移动端标准，禁止进一步缩小字号，改为通过容器内边距适配 */
@media (max-width: 480px) {
    :root {
        --container-padding: var(--gutter-small);
        /* section-padding 继承移动端 48px（禁止低于此值） */
        /* 圆角保持 12px（保底线），不进一步缩小 */
        --card-radius: 12px;
        /* 字号保持移动端标准（保底线） */
        /* L1 标题：24px */
        --font-size-xl: 1.5rem;
        --font-size-2xl: 1.5rem;
        --font-size-l1: 1.5rem;
        /* L2 标题：17px */
        --font-size-lg: 1.0625rem;
        --font-size-l2: 1.0625rem;
        /* L4 辅助文字：13px */
        --font-size-sm: 0.8125rem;
        --font-size-l4: 0.8125rem;
    }
    
    /* 果冻般过渡动画 - 超小屏 */
    .project-card,
    .workflow-card,
    .strength-card,
    .btn-primary,
    .social-link,
    .portrait-container {
        transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    }
    
    .about-hero {
        display: flex;
        flex-direction: row;
        gap: 16px;
        padding: 48px 0;  /* 超小屏 about-hero padding：48px（继承移动端，不低于 48px 阶梯规范） */
    }

    .about-hero-left {
        width: 35%;
        flex-shrink: 0;
    }

    .about-hero-education {
        gap: 0;
    }

    .about-education-card {
        padding: 16px 0;
    }

    .about-education-year {
        font-size: 16px;
        line-height: 18px;
    }

    .about-education-degree {
        font-size: 14px;
        word-break: break-word;
    }

    .about-hero-right {
        width: 65%;
        max-width: 100%;
        gap: 12px;
        flex-shrink: 0;
    }

    .about-hero-portrait-section {
        margin-bottom: 0;
    }

    .about-hero-portrait-wrapper {
        padding-bottom: 0;
    }

    .portrait-container {
        width: 180px;
        border-radius: 12px;
        padding: 10px;
    }

    .portrait-image {
        border-radius: 12px;
    }

    .about-social-links {
        right: -36px;
        bottom: 0;
        gap: 6px;
    }

    .social-link {
        width: 40px;
        height: 40px;
        border-radius: var(--card-radius);
    }

    .social-link svg {
        width: 15px;
        height: 15px;
    }

    .about-hero-content {
        width: 100%;
    }

    .about-main-title {
        font-size: 24px;
        letter-spacing: -1px;
        line-height: 1 !important;
        margin-bottom: 20px;
    }

    .about-section-label {
        font-size: 12px;
        letter-spacing: 2px;
        margin-bottom: 12px;
    }
    
    .about-description p {
        font-size: 14px;
        line-height: 24px;
    }

    /* 核心产品 - 超小屏横向滚动（伪元素占位法） */
    /* 设计规范：移动端统一使用一套规范，不单独设置超小屏 */
    /* 继承移动端 16px gutter 设置 */

    .about-projects-grid {
        gap: 16px;
    }

    .about-projects-grid::before,
    .about-projects-grid::after {
        width: var(--container-padding);
    }

    /* AI 工作流 - 超小屏 */
    .about-workflow {
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
        gap: 16px;
    }

    .about-workflow-grid {
        gap: 12px;
    }

    .workflow-card {
        padding: 12px;
        border-radius: var(--card-radius);
    }

    .workflow-card-number {
        font-size: 20px;
    }

    .workflow-card-title {
        font-size: 16px;
    }

    .workflow-card-desc {
        font-size: 14px;
    }

    /* 核心优势 - 超小屏 */
    .strengths-container {
        gap: 16px;
    }

    .strengths-bento-grid {
        gap: 12px;
    }

    .strength-card--large .strength-card-inner {
        padding: 16px;
    }

    .strength-card--large .strength-card-title {
        font-size: var(--font-size-base);
        line-height: 1.4;
    }

    .strength-card--large .strength-card-desc {
        font-size: var(--font-size-sm);
        line-height: 1.5;
    }

    .strength-card-bg-image {
        height: 100px;
    }

    .strength-card--vertical .strength-card-inner {
        padding: 16px;
        min-height: 200px;
    }

    .strength-card-header {
        margin-bottom: 16px;
    }

    .strength-card-footer {
        bottom: 16px;
        right: 16px;
    }

    .strength-icon-wrap {
        width: 96px;
        height: 96px;
    }

    .strength-icon-wrap svg {
        width: 64px;
        height: 64px;
    }

    .strength-card--stats .strength-card-inner {
        padding: 16px;
    }

    .strength-stat-number {
        font-size: 28px;
        letter-spacing: -1px;
    }

    .strength-card-avatars {
        padding: 0 16px 16px;
    }

    .strength-avatar {
        width: 32px;
        height: 32px;
        border-width: 2px;
        margin-right: -6px;
    }

    .strength-card--stats-wide {
        padding: 16px;
    }

    .strength-stat-number--small {
        font-size: 28px;
        letter-spacing: -1px;
    }

    /* 探索中的事 - 超小屏 */
    .exploring-row-title {
        font-size: 16px;
        line-height: 24px;
    }

    .exploring-row-desc {
        font-size: 13px;
        line-height: 20px;
    }

    /* 摄影画廊 - 超小屏 */
    .about-gallery {
        padding-bottom: 0;
    }

    .about-gallery-header {
        padding-top: 32px;  /* 超小屏继承移动端：32px（设计规范） */
    }

    .about-gallery-title {
        font-size: 24px;  /* 超小屏 24px（设计规范） */
        margin-bottom: 8px;  /* 标题→副标题间距：8px（设计规范，固定） */
    }

    .about-gallery-subtitle {
        font-size: 14px;
    }

    .about-gallery-grid {
        gap: 12px;
        margin-top: 32px;  /* 超小屏继承移动端：32px（设计规范） */
    }

    .gallery-item-info {
        bottom: 16px;
        left: 16px;
    }

    .gallery-info-title {
        font-size: 16px;
        line-height: 22px;
    }

    .gallery-info-location {
        font-size: 12px;
    }

    .gallery-item-stack {
        gap: 12px;
    }

    .gallery-item--stack-top,
    .gallery-item--stack-bottom {
        border-radius: var(--card-radius);
    }

    .gallery-item--large {
        border-radius: var(--card-radius);
    }

    .about-quote {
        padding: 0 var(--gutter-mobile);
        padding-bottom: 64px;
        width: 100%;
        box-sizing: border-box;
    }

    .about-quote-inner {
        padding: 48px 20px !important;
        border-radius: 12px !important;
        gap: 16px;
    }

    .about-quote-inner::after {
        border-radius: 12px !important;
    }

    .about-quote-icon svg {
        width: 28px;
        height: auto;
    }

    .about-quote-text {
        font-size: 18px;
        line-height: 1.6;
    }

    .about-quote-buttons {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding-top: 8px;
    }

    .about-quote-buttons .btn-primary,
    .about-quote-buttons .btn-secondary {
        flex: 1;
        min-width: 120px;
    }
}

/* ==================== 动画效果 ==================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* 滚动渐入效果 */
.about-section,
.about-hero,
.project-card,
.timeline-row,
.workflow-card,
.exploring-row,
.gallery-item--large,
.gallery-item--stack-top,
.gallery-item--stack-bottom {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.about-section.visible,
.about-hero.visible,
.project-card.visible,
.timeline-row.visible,
.workflow-card.visible,
.exploring-row.visible,
.gallery-item--large.visible,
.gallery-item--stack-top.visible,
.gallery-item--stack-bottom.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 延迟动画 */
.project-card:nth-child(1) { transition-delay: 0ms; }
.project-card:nth-child(2) { transition-delay: 100ms; }
.project-card:nth-child(3) { transition-delay: 200ms; }

.workflow-card:nth-child(1) { transition-delay: 0ms; }
.workflow-card:nth-child(2) { transition-delay: 100ms; }
.workflow-card:nth-child(3) { transition-delay: 200ms; }
.workflow-card:nth-child(4) { transition-delay: 300ms; }

.exploring-row:nth-child(1) { transition-delay: 0ms; }
.exploring-row:nth-child(2) { transition-delay: 100ms; }
.exploring-row:nth-child(3) { transition-delay: 200ms; }
.exploring-row:nth-child(4) { transition-delay: 300ms; }

/* ==================== 新增动效：克制而灵动 ==================== */

/* ---- 一、Hero 首屏入场：渐进浮入 ---- */
/* 头像容器入场 */
.portrait-container {
    opacity: 0;
    transform: scale(0.96) translateY(16px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out, box-shadow 0.3s ease;
}

.portrait-container.visible {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* 教育卡片列表入场 */
.about-hero-education {
    opacity: 0;
    transform: translateX(-24px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.about-hero-education.visible {
    opacity: 1;
    transform: translateX(0);
}

/* 教育卡片逐个入场 */
.about-education-card {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.35s ease-out, transform 0.35s ease-out, border-color 0.2s ease;
}

.about-education-card.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 右侧文字区域入场 */
.about-hero-content {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out 0.2s, transform 0.5s ease-out 0.2s;
}

.about-hero-content.visible {
    opacity: 1;
    transform: translateY(0);
}

/* CTA 按钮弹入（保留入场动画效果，同时引用 buttons.css 中的完整组件样式） */
.btn-primary.visible {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
    background-color: #111111;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.btn-primary.visible:hover {
    background-color: #000000;
    transform: scale(1.02);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.btn-primary.visible:active {
    transform: scale(0.98);
}

/* ---- 二、时间线圆点：呼吸脉冲 ---- */
@keyframes timelinePulse {
    0%   { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.15), 0 0 0 0 rgba(0, 0, 0, 0.06); }
    50%  { box-shadow: 0 0 0 14px rgba(0, 0, 0, 0), 0 0 0 20px rgba(0, 0, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.15), 0 0 0 0 rgba(0, 0, 0, 0.06); }
}

.timeline-row-dot {
    animation: timelinePulse 3s ease-in-out infinite !important;
    transition: transform 0.2s ease !important;
}

.timeline-row:nth-child(1) .timeline-row-dot { animation-delay: 0s; }
.timeline-row:nth-child(2) .timeline-row-dot { animation-delay: 1s; }
.timeline-row:nth-child(3) .timeline-row-dot { animation-delay: 2s; }

.timeline-row:hover .timeline-row-dot {
    animation-play-state: paused !important;
    transform: scale(1.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

/* ---- 三、时间线竖线：流光扫过 ---- */
@keyframes timelineFlow {
    0%   { background-position: 0 100%; opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { background-position: 0 0%; opacity: 0; }
}

.about-timeline-vertline {
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(0, 0, 0, 0.06) 20%,
        rgba(0, 0, 0, 0.4) 48%,
        rgba(0, 0, 0, 0.7) 50%,
        rgba(0, 0, 0, 0.4) 52%,
        rgba(0, 0, 0, 0.06) 80%,
        transparent 100%
    );
    background-size: 100% 200%;
    background-position: 0 0%;
    animation: timelineFlow 5s ease-in-out infinite !important;
}

/* ---- 四、核心产品卡片：边缘流光 ---- */
.project-card {
    overflow: hidden;
    position: relative;
}

.project-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--card-radius);
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255, 255, 255, 0.5) 50%,
        transparent 70%
    );
    background-size: 200% 100%;
    background-position: 100% 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 3;
    pointer-events: none;
}

.project-card:hover::before {
    opacity: 1;
    animation: cardShine 0.7s ease-out forwards;
}

@keyframes cardShine {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* ---- 五、AI 工作流卡片：序号微光渐显 ---- */
@keyframes numberShimmer {
    0%, 100% { opacity: 0.12; }
    50%       { opacity: 0.3; }
}

.workflow-card-number {
    animation: numberShimmer 3.5s ease-in-out infinite;
}

.workflow-card:nth-child(1) .workflow-card-number { animation-delay: 0s; }
.workflow-card:nth-child(2) .workflow-card-number { animation-delay: 0.875s; }
.workflow-card:nth-child(3) .workflow-card-number { animation-delay: 1.75s; }
.workflow-card:nth-child(4) .workflow-card-number { animation-delay: 2.625s; }

/* ---- 六、核心优势 Bento 格：微弱漂浮 ---- */
@keyframes strengthFloat {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-2px); }
}

.strength-card--large {
    animation: strengthFloat 6s ease-in-out infinite !important;
}

.strength-card--vertical  { animation: strengthFloat 6s ease-in-out infinite 1.5s !important; }
.strength-card--stats    { animation: strengthFloat 6s ease-in-out infinite 3s !important; }
.strength-card--stats-wide{ animation: strengthFloat 6s ease-in-out infinite 4.5s !important; }

/* 悬浮期间保持其他 transition */
.strength-card--large,
.strength-card--vertical,
.strength-card--stats,
.strength-card--stats-wide {
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}


.exploring-row:hover::after {
    opacity: 1;
    animation: exploringFlow 2s ease-out forwards;
}

@keyframes exploringFlow {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* 当前行背景透明 */
.exploring-row:hover {
    background: transparent;
}

/* ---- 八、摄影画廊：左上微光 ---- */
.gallery-item--large,
.gallery-item--stack-top,
.gallery-item--stack-bottom {
    position: relative;
}

.gallery-item--large::before,
.gallery-item--stack-top::before,
.gallery-item--stack-bottom::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--card-radius);
    background: radial-gradient(
        ellipse 70% 70% at 0% 0%,
        rgba(255, 255, 255, 0.25) 0%,
        transparent 65%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 3;
    pointer-events: none;
}

.gallery-item--stack-top::before,
.gallery-item--stack-bottom::before {
    border-radius: 24px;
}

.gallery-item--large:hover::before,
.gallery-item--stack-top:hover::before,
.gallery-item--stack-bottom:hover::before {
    opacity: 1;
}

/* ---- 九、引用区：关键词脉动 ---- */
@keyframes quotePulse {
    0%, 100% { opacity: 0.8; }
    50%       { opacity: 1; }
}

.quote-highlight {
    animation: quotePulse 4.5s ease-in-out infinite;
}

/* ---- 十一、Section 标题入场 ---- */

/* ---- 十二、社交按钮悬浮：微发光 ---- */
.social-link {
    position: relative;
}

.social-link::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 12px;
    background: rgba(0, 81, 217, 0.08);
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: -1;
}

.social-link:hover::after {
    opacity: 1;
    transform: scale(1);
}

/* ---- Aurora 极光动态背景 ---- */
#aurora-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: 0.75;
}

/* 确保 Hero 内容压在极光层之上 */
.about-hero > *:not(#aurora-canvas) {
    position: relative;
    z-index: 1;
}

/* ---- 无障碍：用户减少动画偏好时关闭所有动效 ---- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}