/**
 * Awwwards.com Style Design
 * Based on downloaded awwwards.com design patterns
 */

/******************************************************************
 1. CSS VARIABLES & RESET
*******************************************************************/

:root {
    /* Inter Tight（2026-10-24 加入本地字库，见 fonts/inter-tight.css）*/
    --font-inter-tight: 'Inter Tight', 'Inter Tight Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    /* Colors - Dark Theme */
    --color-black: #0a0a0a;
    --color-black-light: #141414;
    --color-black-dark: #050505;
    --color-white: #ffffff;
    --color-gray-light: #2a2a2a;
    --color-gray: #888888;
    --color-gray-dark: #666666;
    --color-accent: #00ff88;
    --color-accent-green: #00dc82;

    /* Typography
       说明：原先这里写的是 'Inter Tight'，但全站（含 local.google.fonts.css）
       从未定义过这个字体，等于每次都静默回退——留着只会造成误导。
       现改为实际可用的系统字体栈，并补上中文回退，保证中英文都有一致的渲染。 */
    --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
    --font-secondary: 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;

    /* Spacing */
    --gutter: 20px;
    --gutter-large: 40px;

    /* Border Radius */
    --rounded-small: 4px;
    --rounded-normal: 8px;
    --rounded-large: 16px;
    --rounded-xlarge: 24px;

    /* Text Sizes */
    --text-size-small: 12px;
    --text-size-primary: 14px;
    --text-size-medium: 16px;
    --text-size-large: 20px;
    --text-size-xlarge: 32px;
    --text-size-xxlarge: 48px;
    --text-size-hero: clamp(48px, 8vw, 120px);
}

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

html {
    font-size: 16px;
    overflow-x: hidden;
    height: auto;
}

body {
    font-family: var(--font-primary);
    font-size: var(--text-size-medium);
    line-height: 1.5;
    color: var(--color-white);
    background: var(--color-black);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 100vh;
    position: relative;
    padding-top: 70px;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* 链接在任何状态下都不要下划线。
   assets/css/plugins.css 里打包了 Bootstrap 3，其中有：
       a,a:visited         { text-decoration: underline }
       a:focus,a:hover     { color:#23527c; text-decoration:underline }
   `a:hover` 的优先级是 (0,1,1)，会压过单独 `a` 的 (0,0,1)，
   导致鼠标悬停时所有链接文字都被加上下划线。
   下面用同等或更高优先级、且声明在**更晚的样式表**里（awwwards-style.css
   在每个页面都排在 plugins.css 之后）把它覆盖掉。
   main.css 也自带同样的覆盖（main.css:58），旧版作品页不受影响。 */
a,
a:link,
a:visited,
a:hover,
a:focus,
a:active {
    text-decoration: none;
}

/* 与上面同一批 Bootstrap 3 规则的另一半：
   plugins.css 里的 `a:focus,a:hover{color:#23527c}` 优先级 (0,1,1) 高于 `a{color:inherit}` (0,0,1)，
   导致**任何没有自己颜色的链接文字**在悬停/聚焦时变成深蓝（深色主题上非常突兀）。
   下面用同等优先级 + 更晚的样式表顺序把它覆盖掉。
   带明确 hover 颜色的组件（如 .footer-site__nav a:hover、.bottom-nav-awwwards__list li a:hover）
   优先级更高，不受影响。 */
a:hover,
a:focus {
    color: inherit;
}
/* 焦点样式（全站统一）
   plugins.css 里打包的 Bootstrap 3 有一条：
       a:focus { outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px }
   它在深色背景上会渲染成一圈浅白色边框。因为站内所有按钮都是 <a>，
   点击后链接获得焦点，这圈白边就会出现并一直留着（Bootstrap 只清掉了 :hover/:active）。
   下面用 :focus-visible 区分输入方式：
     · 鼠标 / 触摸点击 -> 不显示任何焦点框
     · 键盘 Tab 导航   -> 显示品牌绿焦点圈（既不是白边，也保住了键盘可访问性）
   a:focus-visible 与 Bootstrap 的 a:focus 同优先级 (0,1,1)，靠声明更晚取胜；
   :focus:not(:focus-visible) 优先级是 (0,2,0)，高于 a:focus，因此点击时一定生效。 */
:focus:not(:focus-visible) {
    outline: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-accent-green, #00dc82);
    outline-offset: 2px;
}

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

/******************************************************************
 2. HEADER / NAVIGATION
*******************************************************************/

.header-site {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    pointer-events: none;
}

.header-site__container {
    position: relative;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px clamp(20px, 5.6vw, 80px);
    max-width: 1920px;
    margin: 0 auto;
}

/* 顶部左上角品牌名（index.html / about.html）。
   work.html / portfolio-item.html / project-detail.html 各自的内联样式里
   有 .page-header__logo / .project-header__logo，取值与本规则保持一致。
   如需改品牌名字体或字重，记得四处一起改。 */
.header-site__logo {
    font-family: var(--font-primary);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-white);
    text-decoration: none;
    transition: color 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.header-site__logo:hover {
    color: var(--color-accent-green);
    text-decoration: none;
}

@media (max-width: 768px) {
    .header-site__logo {
        font-size: 20px;
    }
}

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

.header-site__nav a {
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray);
    text-decoration: none;
}

.header-site__nav a:hover {
    color: var(--color-accent-green);
    text-decoration: none;
}

.header-site__actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.btn-submit {
    padding: 12px 24px;
    background: var(--color-white);
    color: var(--color-black);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: none;
    border-radius: var(--rounded-normal);
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-submit:hover {
    background: var(--color-accent-green);
    color: var(--color-white);   /* 悬停变绿时文字用白色 */
    transform: translateY(-2px);
}

/* 顶部栏右侧按钮统一尺寸（桌面端）。
   各页顶部栏是 flex + space-between 布局：中间导航的位置由「logo 宽度」和
   「右侧按钮宽度」共同决定。下面把按钮固定成与首页 About Me 相同的 124×45，
   这样所有页面（index / about / 404 / work / portfolio-item / project-detail）
   的 logo、导航、按钮都会落在完全相同的位置上。
   移动端（≤768px）导航隐藏、按钮收窄，由各页自己的断点接管，这里不干预。 */
@media (min-width: 769px) {
    .header-site__actions .btn-submit {
        box-sizing: border-box;
        width: 124px;
        padding: 12px 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
    }
}

/******************************************************************
 3. HERO SECTION
*******************************************************************/

.hero-site {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 30px clamp(20px, 5.6vw, 80px) 80px;
    display: flex;
    flex-direction: column;
    /* 顶部对齐：内容紧贴导航栏下方，不再整屏垂直居中（居中会上下留大片空白） */
    justify-content: flex-start;
    /* 2026-10-20：末端由 #141414 改为 #0a0a0a，与下方 ACE 推广块卡片同色 →
       两区相接不产生 1px 亮边（推广块那边因此不需要再加渐变遮罩，避免"虚化"）*/
    background: linear-gradient(180deg, var(--color-black) 0%, var(--color-black) 100%);
}

.hero-site::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(0, 220, 130, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

.hero-site__content {
    position: relative;
    z-index: 1;
    max-width: 1920px;
    margin: 0 auto;
    width: 100%;
}

.hero-site__title {
    font-size: var(--text-size-hero);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-top: 0;   /* 清掉 h1 浏览器默认上边距（0.67em，大字号下近百像素），让标题贴紧导航栏 */
    margin-bottom: 24px;
    color: var(--color-white);
}

.hero-site__title span {
    display: block;
}

.hero-site__subtitle {
    font-size: clamp(18px, 2vw, 24px);
    color: var(--color-gray);
    max-width: 600px;
    margin-bottom: 48px;
}

.hero-site__actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.btn-primary {
    padding: 16px 32px;
    /* 2026-10-18：用户要求改成常亮品牌绿（原来是白底、悬停才变绿）*/
    background: var(--color-accent-green);
    color: var(--color-black);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    /* 与 .btn-secondary 的 2px 边框保持一致（保证两者文字/顶边对齐） */
    border: 2px solid transparent;
    border-radius: var(--rounded-normal);
    cursor: pointer;
    /* 用户要求：不要悬停/按下的光影与位移动画 */
    transition: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}



.btn-secondary {
    padding: 16px 32px;
    background: transparent;
    color: var(--color-white);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 2px solid var(--color-white);
    border-radius: var(--rounded-normal);
    cursor: pointer;
    transition: all 0.3s ease;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* 2026-10-18：手机没有 hover，补 :active → 按下变绿 */
.btn-secondary:active,
a.btn-secondary:active,
.btn-secondary:active:focus,
.btn-secondary:active:hover {
    background: var(--color-accent-green) !important;
    color: var(--color-white) !important;
    border-color: var(--color-accent-green) !important;
    transform: translateY(-2px);
    transition-duration: 0.1s;
    outline: none;
}

.btn-secondary:hover {
    background: var(--color-white);
    color: var(--color-black);
}

/******************************************************************
 4. WEBSITES GRID (Portfolio)
*******************************************************************/

.websites-section {
    position: relative;
    padding: 100px clamp(20px, 5.6vw, 80px);
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 60px;
}

.section-title {
    font-size: clamp(32px, 4vw, 64px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-white);
}

.section-link {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-accent-green);
    text-decoration: none;
}

.section-link:hover {
    color: var(--color-white);
    text-decoration: none;
}

.websites-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.website-card {
    position: relative;
    border-radius: var(--rounded-xlarge);
    overflow: hidden;
    background: var(--color-black-light);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.website-card:hover {
    transform: translateY(-8px);
    border-color: var(--color-accent-green);
    box-shadow: 0 30px 60px rgba(0, 220, 130, 0.15);
}

.website-card__image {
    position: relative;
    width: 100%;
    padding-top: 75%;
    overflow: hidden;
}

.website-card__image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.website-card:hover .website-card__image img {
    transform: scale(1.05);
}

.website-card__content {
    padding: 24px;
}

.website-card__title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--color-white);
}

.website-card__author {
    font-size: 14px;
    color: var(--color-gray);
    display: flex;
    align-items: center;
    gap: 8px;
}

.website-card__author img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.website-card__badge {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 8px 16px;
    background: var(--color-accent-green);
    color: var(--color-black);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--rounded-normal);
}

/* More Card Style */
.website-card__more {
    cursor: default;
}

.website-card__more:hover {
    transform: none;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

.website-card__more .website-card__image {
    background: rgba(0, 220, 130, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.website-card__more .website-card__title {
    color: var(--color-accent-green);
}

/******************************************************************
 5. ABOUT SECTION
*******************************************************************/

.about-section {
    position: relative;
    padding: 100px clamp(20px, 5.6vw, 80px);
    width: 100%;
    background: var(--color-black-light);
    color: var(--color-white);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.about-section__container {
    max-width: 1400px;
    margin: 0 auto;
}

.about-section__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.about-section__image {
    border-radius: var(--rounded-xlarge);
    overflow: hidden;
}

.about-section__image img {
    width: 100%;
    height: auto;
}

.about-section__content h2 {
    font-size: clamp(32px, 4vw, 56px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
}

.about-section__content p {
    font-size: 18px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 32px;
}

.about-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 48px;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: 48px;
    font-weight: 700;
    color: var(--color-accent-green);
}

.stat-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/******************************************************************
 6. SERVICES SECTION
*******************************************************************/

.services-section {
    position: relative;
    padding: 100px clamp(20px, 5.6vw, 80px);
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-top: 60px;
}

.service-card {
    padding: 40px;
    background: var(--color-black-light);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--rounded-xlarge);
    transition: all 0.3s ease;
}

.service-card:hover {
    background: var(--color-black);
    color: var(--color-white);
    transform: translateY(-8px);
    border-color: var(--color-accent-green);
}

.service-card__icon {
    width: 60px;
    height: 60px;
    margin-bottom: 24px;
    background: var(--color-white);
    border-radius: var(--rounded-normal);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.service-card:hover .service-card__icon {
    background: var(--color-accent-green);
}

.service-card__title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
}

.service-card__description {
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-gray);
}

.service-card:hover .service-card__description {
    color: rgba(255, 255, 255, 0.7);
}

/******************************************************************
 7. FOOTER
*******************************************************************/

.footer-site {
    position: relative;
    width: 100%;
    background: var(--color-black-dark);
    padding: 80px clamp(20px, 5.6vw, 80px) 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-site__container {
    max-width: 1920px;
    margin: 0 auto;
}

.footer-site__top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 60px;
}

.footer-site__brand h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--color-white);
}

.footer-site__brand p {
    font-size: 14px;
    line-height: 1.8;
    color: var(--color-gray);
}

.footer-site__nav h4 {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 20px;
    color: var(--color-white);
}

.footer-site__nav ul {
    list-style: none;
}

.footer-site__nav li {
    margin-bottom: 12px;
}

.footer-site__nav a {
    font-size: 14px;
    color: var(--color-gray);
    text-decoration: none;
}

.footer-site__nav a:hover {
    color: var(--color-accent-green);
    text-decoration: none;
}

.footer-site__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-site__copyright {
    font-size: 14px;
    color: var(--color-gray);
}

.footer-site__social {
    display: flex;
    gap: 16px;
}

.footer-site__social a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    color: var(--color-black);
    border-radius: 50%;
    transition: all 0.3s ease;
    text-decoration: none;
}

.footer-site__social a:hover {
    background: var(--color-accent-green);
    color: var(--color-white);   /* 悬停变绿时文字用白色 */
    transform: translateY(-4px);
    text-decoration: none;
}

/******************************************************************
 8. PORTFOLIO ITEM PAGE
*******************************************************************/

.portfolio-item-page {
    padding: 120px clamp(20px, 5.6vw, 80px) 60px;
    max-width: 1400px;
    margin: 0 auto;
}

.portfolio-item-page__header {
    margin-bottom: 60px;
}

.portfolio-item-page__title {
    font-size: clamp(32px, 4vw, 56px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.portfolio-item-page__meta {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.portfolio-item-page__meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--color-gray);
}

.portfolio-item-page__gallery {
    display: grid;
    grid-gap: 40px;
    margin-bottom: 60px;
}

.portfolio-item-page__image {
    border-radius: var(--rounded-xlarge);
    overflow: hidden;
}

.portfolio-item-page__image img {
    width: 100%;
    height: auto;
}

.portfolio-item-page__description {
    font-size: 18px;
    line-height: 1.8;
    color: var(--color-gray-dark);
    max-width: 800px;
}

/******************************************************************
 9. ABOUT PAGE
*******************************************************************/

.about-page {
    padding: 120px clamp(20px, 5.6vw, 80px) 60px;
    max-width: 1200px;
    margin: 0 auto;
}

.about-page__header {
    margin-bottom: 60px;
}

.about-page__title {
    font-size: clamp(32px, 4vw, 56px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
}

.about-page__content {
    font-size: 18px;
    line-height: 1.8;
    color: var(--color-gray-dark);
    margin-bottom: 60px;
}

.about-page__skills {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 40px;
}

.skill-tag {
    padding: 12px 24px;
    background: var(--color-gray-light);
    border-radius: var(--rounded-normal);
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    transition: all 0.3s ease;
    text-decoration: none;
}

.skill-tag:hover {
    background: var(--color-black);
    color: var(--color-white);
    text-decoration: none;
}

/******************************************************************
 10. RESPONSIVE
*******************************************************************/

@media (max-width: 1200px) {
    .websites-grid,
    .portfolio-grid,
    .latest-works-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* 平面作品在中等屏幕显示 2 列 */
    .portfolio-grid-graphic {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* 拍摄作品在中等屏幕显示 2 列，使用 flex 布局 */
    .portfolio-grid-photo {
        display: flex !important;
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .portfolio-grid-photo .website-card {
        width: auto !important;
        flex: 1;
    }
}

@media (max-width: 768px) {
    .header-site__container {
        padding: 16px clamp(20px, 5.6vw, 80px);
    }

    .header-site__nav {
        display: none;
    }

    .hero-site {
        padding: 140px clamp(20px, 5.6vw, 80px) 60px;
    }

    .websites-section,
    .services-section,
    .category-section {
        padding: 60px clamp(20px, 5.6vw, 80px);
    }

    .websites-grid,
    .portfolio-grid,
    .latest-works-grid {
        grid-template-columns: 1fr !important;
    }

    /* 手机端：所有作品分类一律上下排（1 栏）
       为什么逐分类显式写：只写 .portfolio-grid 时，一旦某个分类有自己的规则
       （或以后新增分类）就可能漏掉，导致手机上仍是 2 栏、卡片被压到 130px 左右。 */
    .portfolio-grid,
    .websites-grid,
    .latest-works-grid,
    .portfolio-grid-graphic,
    .portfolio-grid-space,
    .portfolio-grid-photo,
    .portfolio-grid-video,
    .portfolio-grid-aigc,
    .portfolio-grid-workflow,
    .portfolio-grid-web {
        grid-template-columns: 1fr !important;
    }

    /* 「拍摄」这一栏用的是 flex 横排，只改 grid-template-columns 对它无效 → 必须改成竖排 */
    .portfolio-grid-photo {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .portfolio-grid-photo .website-card {
        width: 100% !important;
        flex: none !important;
    }

    .about-section__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-stats {
        grid-template-columns: 1fr;
    }

    .footer-site__top {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .footer-site__bottom {
        flex-direction: column;
        gap: 20px;
    }

    /* Bottom nav responsive - horizontal scroll */
    .bottom-nav {
        bottom: 10px;
        padding: 10px 12px;
        max-width: calc(100vw - 20px);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 4px;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .bottom-nav::-webkit-scrollbar {
        display: none;
    }

    .bottom-nav__item {
        padding: 8px 10px;
        min-width: fit-content;
    }

    .bottom-nav__icon {
        width: 18px;
        height: 18px;
    }

    .bottom-nav__label {
        font-size: 8px;
    }

    .bottom-nav__divider {
        height: 20px;
    }
}

/******************************************************************
 11. ANIMATIONS
*******************************************************************/

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

.animate-in {
    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-in-delay-1 {
    opacity: 0;
    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards;
}

.animate-in-delay-2 {
    opacity: 0;
    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards;
}

.animate-in-delay-3 {
    opacity: 0;
    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
}

/* Section Title Animation */
@keyframes titleSlideIn {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes titleGlow {
    0%, 100% {
        text-shadow: 0 0 20px rgba(0, 220, 130, 0.3);
    }
    50% {
        text-shadow: 0 0 40px rgba(0, 220, 130, 0.6);
    }
}

.section-title-animated {
    position: relative;
    display: inline-block;
    opacity: 0;
    animation: titleSlideIn 1s cubic-bezier(0.4, 0, 0.2, 1) forwards, titleGlow 3s ease-in-out infinite 1s;
}

.section-title-animated::before {
    content: '';
    position: absolute;
    left: -60px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--color-accent-green));
    animation: lineGrow 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
    transform-origin: left;
    transform: scaleX(0);
}

@keyframes lineGrow {
    to {
        transform: scaleX(1);
    }
}

.category-section {
    padding: 80px clamp(20px, 5.6vw, 80px);
    max-width: 1920px;
    margin: 0 auto;
}

.category-section:first-of-type {
    padding-top: 40px;
}

.category-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 80px;
    padding-top: 0;
    border-top: none;
}

.category-footer__text {
    color: var(--color-gray);
    font-size: 14px;
}

.category-footer__link {
    color: var(--color-accent-green);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

.category-footer__link:hover {
    color: var(--color-white);
}

/* Old category header style - deprecated, use c-heading instead */
.category-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 40px;
    position: relative;
}

.category-header::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 24px;
    background: var(--color-accent-green);
    border-radius: 2px;
}

.category-title {
    font-size: clamp(24px, 3vw, 40px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-white);
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

/* 平面作品显示两排（3 列 x 2 行） */
.portfolio-grid-graphic {
    grid-template-columns: repeat(3, 1fr);
}

/* 拍摄作品显示一排 2 个，居中显示，每个项目框宽度 873px */
.portfolio-grid-photo {
    display: flex;
    justify-content: center;
    gap: 40px;
}

.portfolio-grid-photo .website-card {
    width: 873px;
}

/* Latest Works Section */
.latest-works-section {
    position: relative;
    padding: 60px clamp(20px, 5.6vw, 80px) 80px;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
}

.latest-works-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 60px;
}

.latest-works-title {
    font-size: clamp(32px, 4vw, 64px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-white);
}

.latest-works-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

/******************************************************************
 12. AWWWARDS STYLE HEADINGS
*******************************************************************/

/* C-Heading Component */
.c-heading {
    position: relative;
    margin-bottom: clamp(40px, 5vw, 96px);
    font-weight: 400;
    text-align: left;
}

.c-heading.c-heading--center {
    text-align: center;
}

.c-heading--small .c-heading__top {
    margin-bottom: 1rem;
}

.c-heading--small .c-heading__middle + .c-heading__bottom {
    margin-top: 1em;
}

.c-heading--small .c-heading__short-desc {
    width: 500px;
}

.c-heading__top {
    margin-bottom: clamp(20px, 3vw, 24px);
    font-weight: 400;
    display: flex;
    justify-content: flex-start;
}

.c-heading.c-heading--center .c-heading__top {
    justify-content: center;
}

.c-heading__top .text-default {
    font-weight: 400;
}

.c-heading__middle + .c-heading__bottom {
    margin-top: 1em;
}

.c-heading__middle {
    display: flex;
    justify-content: flex-start;
}

.c-heading.c-heading--center .c-heading__middle {
    justify-content: center;
}

.c-heading__short-desc {
    display: inline-block;
    width: 360px;
    max-width: 100%;
    font-size: 18px;
    font-size: clamp(18px, 16.5915492958px + 0.2816901408vw, 22px);
}

.c-heading__bottom {
    display: flex;
    justify-content: flex-start;
}

.c-heading.c-heading--center .c-heading__bottom {
    justify-content: center;
}

.c-heading__large-desc {
    display: inline-block;
    width: 900px;
    max-width: 100%;
    font-size: 18px;
    font-size: clamp(18px, 16.5915492958px + 0.2816901408vw, 22px);
}

.c-heading__by {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: clamp(20px, 2vw, 30px);
    font-size: 16px;
    font-size: clamp(16px, 14.5915492958px + 0.2816901408vw, 20px);
}

.c-heading__by small {
    font-size: 0.6em;
}

.c-heading__between {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px;
}

.c-heading .heading-1 {
    position: relative;
    display: inline-block;
}

/* Heading Sizes */
.heading-1 {
    font-family: var(--font-primary);
    font-size: 42px;
    font-size: clamp(42px, -3.0704225352px + 9.014084507vw, 170px);
    line-height: 100%;
    text-transform: uppercase;
    font-weight: 500;
    text-decoration: none;
}

.heading-2 {
    font-family: var(--font-primary);
    font-size: 42px;
    font-size: clamp(42px, 5.3802816901px + 7.323943662vw, 146px);
    line-height: 100%;
    text-transform: uppercase;
    font-weight: 500;
    text-decoration: none;
}

.heading-3 {
    font-family: var(--font-primary);
    font-size: 36px;
    font-size: clamp(36px, 15.5774647887px + 4.0845070423vw, 94px);
    line-height: 100%;
    font-weight: 500;
    text-decoration: none;
}

.heading-4 {
    font-family: var(--font-primary);
    font-size: 32px;
    font-size: clamp(32px, 17.2112676056px + 2.9577464789vw, 74px);
    line-height: 100%;
    text-transform: uppercase;
    font-weight: 500;
    text-decoration: none;
}

.heading-5 {
    font-family: var(--font-primary);
    font-size: 26px;
    font-size: clamp(26px, 17.5492957746px + 1.6901408451vw, 50px);
    line-height: 120%;
    text-transform: uppercase;
    font-weight: 500;
    text-decoration: none;
}

.heading-6 {
    font-family: var(--font-primary);
    margin-bottom: 1em;
    font-size: 22px;
    font-size: clamp(22px, 13.5492957746px + 1.6901408451vw, 46px);
    line-height: 130%;
    font-weight: 300;
    text-transform: uppercase;
    text-decoration: none;
}

/* Text Utilities */
.text-default {
    font-size: var(--text-size-primary);
    font-weight: 300;
}

.text-uppercase {
    text-transform: uppercase;
}

.text-balance {
    text-wrap: balance;
}

.text-center {
    text-align: center;
}

/* Has Sticker Animation */
.has-sticker {
    position: relative;
    display: inline-block;
}

.has-sticker__ico {
    position: absolute;
    height: auto;
    margin-block: auto;
    pointer-events: none;
}

/* Text Sizes */
.text-x-large {
    font-size: 22px;
    font-size: clamp(22px, 19.8873239437px + 0.4225352113vw, 28px);
}

.text-large {
    font-size: 18px;
    font-size: clamp(18px, 17.2957746479px + 0.1408450704vw, 20px);
}

.text-medium {
    font-size: 16px;
}

.text-subtitle-narrow {
    display: inline-block;
    width: 360px;
    max-width: 100%;
}


/******************************************************************
 13. BOTTOM NAVIGATION
*******************************************************************/

.bottom-nav {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 100px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

.bottom-nav__item {
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    position: relative;
}

.bottom-nav__item::after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 4px;
    height: 2px;
    background: var(--color-accent-green);
    border-radius: 2px;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.bottom-nav__item.active::after {
    transform: translateX(-50%) scaleX(1);
}

.bottom-nav__item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.bottom-nav__item.active {
    background: rgba(0, 220, 130, 0.1);
}

.bottom-nav__item.active .bottom-nav__icon {
    color: var(--color-accent-green);
}

.bottom-nav__item.active .bottom-nav__label {
    color: var(--color-accent-green);
    font-weight: 600;
}

.bottom-nav__item:hover .bottom-nav__icon {
    color: var(--color-white);
}

.bottom-nav__icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.bottom-nav__icon svg {
    width: 100%;
    height: 100%;
}

.bottom-nav__label {
    font-size: 9px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.bottom-nav__divider {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 2px;
}

/* Awwwards Style Bottom Navigation */
.bottom-nav-awwwards {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    width: auto;
    max-width: 95vw;
}

.bottom-nav-awwwards__inner {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(10, 10, 10, 0.4);
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    border-radius: 100px;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    overflow-x: auto;
    overflow-y: hidden;
}

.bottom-nav-awwwards__inner::-webkit-scrollbar {
    display: none;
}

.bottom-nav-awwwards__logo {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    padding: 8px 16px;
    background: #000;
    border-radius: 12px;
    transition: all 0.3s ease;
    margin-right: 8px;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

/* 注意：这里不再包含 :focus —— 鼠标点击时的焦点框已由全局
   `:focus:not(:focus-visible)` 处理；保留 :focus 会连键盘 Tab 的焦点圈一起干掉。 */
.bottom-nav-awwwards__logo:active {
    outline: none;
    text-decoration: none;
}

.bottom-nav-awwwards__logo:hover {
    background: var(--color-accent-green);
    color: var(--color-white);   /* 悬停变绿时文字用白色 */
    text-decoration: none;
}

.bottom-nav-awwwards__list {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.bottom-nav-awwwards__list li {
    display: flex;
    align-items: center;
}

.bottom-nav-awwwards__list li a {
    display: block;
    padding: 10px 16px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-radius: 12px;
    transition: all 0.3s ease;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    text-decoration-line: none;
}

.bottom-nav-awwwards__list li a:hover,
.bottom-nav-awwwards__list li a.active {
    text-decoration: none;
}

.bottom-nav-awwwards__list li a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

/* 触屏设备：点过的项如果同时命中 :hover，保持实心绿（避免"绿白混合"看起来没变绿） */
@media (hover: none) {
    .bottom-nav-awwwards__list li a.active,
    .bottom-nav-awwwards__list li a.active:hover {
        background: var(--color-accent-green);
        color: #0a0a0a;
    }
}

/* 2026-10-18 修：原来只有 15% 透明度的绿，手机上看起来"没完全变绿" → 改为实心品牌绿 + 深色文字 */
.bottom-nav-awwwards__list li a.active {
    background: var(--color-accent-green);
    color: #0a0a0a;
    font-weight: 600;
    box-shadow: 0 2px 12px rgba(0, 220, 130, 0.35);
}

.bottom-nav-awwwards__cta {
    padding: 12px 24px;
    background: #fff;
    color: #000;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    border-radius: 100px;
    transition: all 0.3s ease;
    white-space: nowrap;
    margin-left: 8px;
}

.bottom-nav-awwwards__cta:hover {
    background: var(--color-accent-green);
    color: var(--color-white);   /* 悬停变绿时文字改白色（原来是 #000） */
    transform: scale(1.05);
    text-decoration: none;
}

/* 2026-10-18 补：手机上没有 hover，用 :active 给"按下即变绿"的反馈 */
.bottom-nav-awwwards__cta:active {
    background: var(--color-accent-green);
    color: var(--color-white);
    transform: scale(0.98);
    transition-duration: 0.08s;
}

/* Mobile responsive */
@media (max-width: 1200px) {
    .bottom-nav-awwwards {
        left: 50%;
        transform: translateX(-50%);
        width: 90vw;
        max-width: none;
    }

    .bottom-nav-awwwards__inner {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .bottom-nav-awwwards__list {
        flex-shrink: 0;
    }
}

@media (max-width: 768px) {
    .bottom-nav-awwwards {
        bottom: 10px;
        width: calc(100% - 20px);
    }

    .bottom-nav-awwwards__inner {
        padding: 8px 12px;
        gap: 6px;
    }

    .bottom-nav-awwwards__logo {
        font-size: 14px;
        padding: 6px 12px;
        margin-right: 4px;
    }

    .bottom-nav-awwwards__list li a {
        padding: 8px 10px;
        font-size: 12px;
    }

    .bottom-nav-awwwards__cta {
        padding: 10px 16px;
        font-size: 12px;
        margin-left: 4px;
    }
}


/******************************************************************
 13. SMOOTH SCROLL IMPROVEMENTS
*******************************************************************/

html {
    font-size: 16px;
    height: 100%;
}

body {
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* 确保鼠标滚轮正常工作 */
    position: relative;
}

/* 禁用固定元素的滚动拦截 */
.header-site,
.bottom-nav {
    touch-action: manipulation;
}

/* 确保内容区域可以正常滚动 */
.hero-site,
.websites-section,
.about-section,
.services-section {
    overflow: visible;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-black-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--color-gray-dark);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent-green);
}

/******************************************************************
 14. UTILITY CLASSES
*******************************************************************/

.text-center { text-align: center; }
.text-right { text-align: right; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }


/******************************************************************
  外部链接角标
  ----------------------------------------------------------------
  作品卡片的跳转方式选了「外部链接」时，图片左上角出现这个 ↗，
  提示访客点击后会离开本站（同时用 target="_blank" 新窗口打开）。
*******************************************************************/
.card-external-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-accent-green, #00dc82);
    color: #0a0a0a;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

/******************************************************************
  2026-10-18 追加：顶部右侧按钮 + 左侧 Logo 的「按下变绿」
  ------------------------------------------------------------
  问题：这几个元素原来只有 :hover（桌面鼠标悬停才变绿），
        手机没有 hover → 点了不会变绿。
  做法：补 :active（按下即变绿，手机触摸和桌面点击都生效），
        并用 !important 压过各页内联样式与第三方 Bootstrap。
  覆盖范围：
    按钮  .btn-submit / .page-header__back / .project-header__back
    Logo  .header-site__logo / .page-header__logo /
          .project-header__logo / .bottom-nav-awwwards__logo
*******************************************************************/

.btn-submit,
.page-header__back,
.project-header__back,
.header-site__logo,
.page-header__logo,
.project-header__logo,
.bottom-nav-awwwards__logo {
    -webkit-tap-highlight-color: transparent;   /* 去掉安卓点击时的蓝色高亮 */
    -webkit-touch-callout: none;
}

/* 右上角按钮：按下 → 实心品牌绿 + 白字 */
.btn-submit:active,
a.btn-submit:active,
.page-header__back:active,
a.page-header__back:active,
.project-header__back:active,
a.project-header__back:active {
    background: var(--color-accent-green) !important;
    color: var(--color-white) !important;
    border-color: var(--color-accent-green) !important;
}

/* 左侧 Logo：按下 → 品牌绿文字（不改变背景） */
.header-site__logo:active,
a.header-site__logo:active,
.page-header__logo:active,
a.page-header__logo:active,
.project-header__logo:active,
a.project-header__logo:active,
.bottom-nav-awwwards__logo:active,
a.bottom-nav-awwwards__logo:active {
    color: var(--color-accent-green) !important;
}

/* 2026-10-18：常亮绿按钮 —— 悬停/按下/聚焦都不改变外观。
   必须用 !important：第三方 Bootstrap 的 .btn-primary:hover (#286090) 和
   :active (#204D74) 优先级与本规则的类选择器相同、且在样式表中更靠后，会抢先生效变蓝。 */
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:active:hover,
.btn-primary:active:focus {
    background: var(--color-accent-green) !important;
    color: var(--color-black) !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    outline: none;
}

/* ==================================================================
   2026-10-19 全面优化（按 Oil UI 走查结论逐条改，均可单块回滚）
   原则：一个屏只有一个主角；层级靠字号/留白/对比拉开；可点尺寸 ≥44px；
        文本不硬裁、不拆词；状态（hover/active/focus）完整。
   ================================================================== */

/* ── 1. 区块留白节奏：桌面统一 100/80，手机 60/60（原来 latest 60/80、answer-book 40/88 各说各话） */
.latest-works-section { padding-top: 100px; padding-bottom: 80px; }
.answer-book { padding-top: 80px; padding-bottom: 80px; }
@media (max-width: 768px) {
  .latest-works-section,
  .answer-book { padding-top: 60px; padding-bottom: 60px; }
}

/* ── 2. 固定底部导航：页脚让位，版权行不再被压 */
.footer-site { padding-bottom: 120px; }
@media (max-width: 768px) { .footer-site { padding-bottom: 96px; } }

/* ── 3. 手机底部导航：9 个分类可左右滑（列表 scrollWidth 455 > 212），
      但两端没有提示、裁切正好切在字中间 → 加左右渐隐 */
@media (max-width: 1200px) {
  /* 2026-10-19 修正：原规则两侧都做渐隐，但"最新"就贴在列表最左边，
      左侧 16px 渐隐把它的绿色块淡掉了（看起来像被阴影挡住）。
      这里只留右侧渐隐提示"还能继续滑"，左侧不再淡出。 */
  .bottom-nav-awwwards__list {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
  }
}

/* ── 4. 可点尺寸：导航项 19–21px → 44px；「更多项目」21 → 45；Logo → 44 */
.bottom-nav-awwwards__list li a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}
.category-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 45px;
  padding: 0 4px;
}
.header-site__logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
@media (max-width: 768px) {
  .footer-site__nav li { min-height: 44px; display: flex; align-items: center; gap: 4px; }   /* gap 补回 TEL: 后面的空格 */
  .footer-site__nav li a,
  .footer-site__social { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ── 5. 中文断行：避免"投资 / 行业 / 专业 / 模板"被拆到两行 */
.hero-site__subtitle,
.about-section p,
.services-section p,
.service-card p,
.latest-works-section p,
.footer-site p,
.category-title__desc {
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

/* ── 6. 首屏高度：hero 从页面 y=70（顶栏下方）开始，原来 100vh 会多出 70px 跑到折叠线以下
      → 收成 calc(100vh - 70px)，首屏正好占满一屏。
      （2026-10-19 修正：用户不要在首屏放 SCROLL 引导，已整套移除） */
.hero-site { min-height: calc(100vh - 70px); }
@media (max-width: 768px) {
  .hero-site { min-height: calc(100svh - 70px); }   /* svh：移动端地址栏收缩时不再跳动 */

  /* 2026-10-19：用户要求手机端吉祥物整体上移一点
     （原来动画占位 549–815，底部空得比较多、又贴近导航） */
  .hero-site__anim { margin-top: -21px; }   /* 2026-10-19：先 -26px，用户反馈"太高"→ 降 5px */
}

/* ── 7. 主次分明：右上「About Me」原来和白底实心主按钮抢视觉
      → 降为描边按钮（按下仍变绿，保持 10-18 定的交互） */
.header-site__actions .btn-submit {
  background: transparent;
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.32);
}
.header-site__actions .btn-submit:hover,
.header-site__actions .btn-submit:active {
  background: var(--color-accent-green);
  color: #0a0a0a;
  border-color: var(--color-accent-green);
}

/* ── 8. 作品卡：源图多为 720×720 方图，被 4:3 裁掉上下 12%，
      封面里的"视频脚本解析 Skill"等文字贴边/被切
      → 固定 4:3 + 焦点上移，保住封面上半部的标题区 */
.website-card__image { aspect-ratio: 4 / 3; overflow: hidden; }
.website-card__image img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; }

/* ── 9. 键盘焦点：触屏断点里也不要清掉 outline */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-accent-green);
  outline-offset: 2px;
}

/* ── 10. 页脚社交项（暂无真实链接，已降级为文字） */
.footer-site__social { font-size: 14px; color: var(--color-gray); }

/* ── 11. 页脚「广州」这类纯文本信息原本是白色，与旁边的灰色链接不一致 → 统一灰 */
.footer-site__nav li span[data-contact] { color: var(--color-gray); }


/* ── 12. 手机端页脚精简（2026-10-19 按用户要求）
      手机端隐藏「导航」和「关注」两栏：顶部/底部已有导航入口，社交暂无真实链接。
      只做 display:none，内容仍在 HTML 里，桌面端照常显示。 */
@media (max-width: 768px) {
  .footer-site__nav[data-footer-col="nav"],
  .footer-site__nav[data-footer-col="social"] {
    display: none;
  }
}

/* ==================================================================
   ACE 加速营 · 首页推广块（2026-10-20）
   取自 ACE 落地页 hero 的视觉语言（深色卡 + 荧光金 CTA），
   与站点品牌绿区分开，明确是"另一个产品"，避免和主 CTA 抢。
   ================================================================== */
.ace-promo { padding: 0; background: var(--color-black); }   /* 2026-10-20：按用户要求左右满屏 */
.ace-promo__wrap { max-width: 1920px; margin: 0 auto; }
.ace-promo__card {
  position: relative; overflow: hidden;
  border-radius: 0;               /* 去圆角（满屏） */
  min-height: 380px;
  display: flex; align-items: center;
  background: #0a0a0b;
  border: 0;                     /* 去边框 */
}
.ace-promo__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.ace-promo__mask {
  position: absolute; inset: 0; z-index: 1;
  background:
    /* 顶部不再做渐变过渡（用户要求"不要虚化"）：改由 hero 底部与卡片同色来消除接缝 */
    /* 左右：左侧压暗保证文字对比度，右侧留出画面 */
    linear-gradient(90deg, rgba(10,10,11,.97) 0%, rgba(10,10,11,.90) 42%, rgba(10,10,11,.55) 72%, rgba(10,10,11,.30) 100%),
    /* 顶部（2026-10-20 补）：之前只有底部压暗，视频顶部的亮画面会直接透出来，看起来"漏光" */
    linear-gradient(180deg, rgba(10,10,11,.90) 0%, rgba(10,10,11,.34) 15%, rgba(10,10,11,0) 34%),
    /* 底部：收口 */
    linear-gradient(0deg, rgba(10,10,11,.82), rgba(0,0,0,0) 52%);
}
.ace-promo__inner {
  position: relative; z-index: 2;
  /* 满屏后卡片左边从 0 开始：
     - 左边距 = 原页面留白 + 原卡片内边距 → 文字/按钮绝对位置不变
     - max-width 同步加回「页面留白」，保证文字排版宽度仍是 645px → 标题仍是 2 行 */
  padding: 56px clamp(24px, 4vw, 64px) 56px calc(clamp(20px, 5.6vw, 80px) + clamp(24px, 4vw, 64px));
  max-width: calc(760px + clamp(20px, 5.6vw, 80px));
}
.ace-promo__eyebrow {
  display: inline-block; margin-bottom: 16px;
  font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-accent-green);
}
.ace-promo__title {
  font-size: clamp(24px, 3.2vw, 42px); line-height: 1.22; font-weight: 800;
  letter-spacing: -.01em; color: #fff; margin-bottom: 16px;
}
.ace-promo__title em { font-style: normal; color: var(--color-accent-green); }
.ace-promo__sub { font-size: 15px; line-height: 1.8; color: rgba(255,255,255,.72); max-width: 560px; margin-bottom: 26px; }
.ace-promo__cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 15px 30px; border-radius: 999px;
  background: var(--color-accent-green);            /* 2026-10-20：金 → 站点绿 */
  color: #04130c; font-size: 15px; font-weight: 800; text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 220, 130, 0.28), 0 14px 34px rgba(0, 220, 130, 0.16);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  min-height: 44px;
}
.ace-promo__cta:hover { transform: translateY(-2px); filter: brightness(1.06); color: #04130c; box-shadow: 0 6px 18px rgba(0,220,130,.36), 0 18px 40px rgba(0,220,130,.20); }
.ace-promo__cta svg { transition: transform .18s ease; }
.ace-promo__cta:hover svg { transform: translateX(4px); }
@media (max-width: 768px) {
  .ace-promo { padding: 0; }
  .ace-promo__card { min-height: 0; border-radius: 0; }
  .ace-promo__inner { padding: 34px 22px 34px 42px; }   /* 左 42 = 原 20（页面）+ 22（卡片），右 22 与原来一致 */
  .ace-promo__title { font-size: 24px; }
  .ace-promo__sub { font-size: 14px; margin-bottom: 20px; }
  .ace-promo__cta { width: 100%; justify-content: center; }
  /* 手机端原来只有左右渐变，视频顶部/底部的亮画面会透出来（"漏光"）→ 补上下渐变 */
  .ace-promo__mask {
    background:
      /* 无顶部渐变（不要虚化）：靠 hero 底部同色消除接缝 */
      linear-gradient(90deg, rgba(10,10,11,.96), rgba(10,10,11,.82)),
      linear-gradient(180deg, rgba(10,10,11,.92) 0%, rgba(10,10,11,.36) 13%, rgba(10,10,11,0) 30%),
      linear-gradient(0deg, rgba(10,10,11,.62) 0%, rgba(0,0,0,0) 24%);
  }
}

/* ==================================================================
   Inter Tight 工具类（2026-10-24）
   用法：<div class="u-inter-tight">…</div>
   ================================================================== */
.u-inter-tight { font-family: var(--font-inter-tight); }

/* ==================================================================
   首页 LATEST WORKS 标题：改用 Inter Tight 700（2026-10-24）
   ------------------------------------------------------------------
   只作用于 #latest 区块里的大标题（.heading-1），其它标题（ABOUT / SERVICES 等）不受影响。
   原规则 .heading-1 用 var(--font-primary) + 500，这里提到 700 并换字。
   字体文件：fonts/inter-tight/InterTight-700.woff2（由 fonts/inter-tight.css 声明）
   ================================================================== */
.latest-works-section .c-heading__middle .heading-1 {
  font-family: 'Inter Tight', var(--font-primary);
  font-weight: 700;
}

/* ==================================================================
   两个大英文标题换 Inter Tight（2026-10-24）
   ------------------------------------------------------------------
   ① ABOUT DESIGNER：.about-section 里的 .heading-3 → Inter Tight 700
   ② 7 个分类大英文标题（Al Generated Content / Graphic Design …）→ Inter Tight 500
      用 h3[id^="category-title-"] 精准命中，不会波及 Our Services 等其它 .heading-3
   ================================================================== */
.about-section .c-heading__middle .heading-3 {
  font-family: 'Inter Tight', var(--font-primary);
  font-weight: 700;
}

h3[id^="category-title-"] {
  font-family: 'Inter Tight', var(--font-primary);
  font-weight: 400;   /* 2026-10-24 调整：500 → 400（用户要求用 InterTight-400） */
}

/* ==========================================================
   顶栏语言下拉（2026-10-24 新增）
   注意：只新增自己的样式，不修改任何既有规则（毛玻璃等硬约束不变）
   ========================================================== */
.lang-dd { position: relative; display: inline-flex; align-items: center; }

.lang-dd__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 47px; padding: 0 15px;      /* 与 .btn-submit 完全同高（实测 47px） */
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.32); border-radius: 8px;
  background: transparent; color: var(--color-white);
  font: 600 14px/1 var(--font-primary);
  letter-spacing: .05em; text-transform: uppercase; cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.lang-dd__btn:hover,
.lang-dd.is-open .lang-dd__btn {
  color: var(--color-white);
  border-color: rgba(0,220,130,.55);
  background: rgba(0,220,130,.08);
}
.lang-dd__ico { opacity: .8; flex: 0 0 auto; }
.lang-dd__caret { opacity: .65; transition: transform .2s ease; flex: 0 0 auto; }
.lang-dd.is-open .lang-dd__caret { transform: rotate(180deg); }

.lang-dd__menu {
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 148px; margin: 0; padding: 6px;
  list-style: none;
  background: #141416;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 1200;
}
.lang-dd.is-open .lang-dd__menu { opacity: 1; visibility: visible; transform: translateY(0); }

.lang-dd__menu a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 11px; border-radius: 6px;
  color: #cfcfcf; font-size: 13px; line-height: 1; text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.lang-dd__menu a:hover { background: rgba(255,255,255,.07); color: #fff; }
.lang-dd__menu a.is-active { color: var(--color-accent-green); }
.lang-dd__menu a.is-active::after { content: "✓"; font-size: 11px; margin-left: 10px; }

/* 手机端压缩：只留图标 + 语言名，避免和 About Me 按钮挤 */
@media (max-width: 768px) {
  /* 高度与 ABOUT ME 一致（47px），只压缩内边距与字号，避免挤 */
  .lang-dd__btn { height: 47px; padding: 0 10px; gap: 5px; font-size: 13px; letter-spacing: .02em; }
  .lang-dd__menu { min-width: 132px; top: calc(100% + 8px); }
  .header-site__actions { gap: 10px; }
}

/* 78px 顶栏（work / 项目内页）里的语言下拉：与 45px 胶囊按钮对齐 */
.lang-dd--pill .lang-dd__btn { height: 45px; border-radius: 24px; padding: 0 14px; }

/* 顶栏右侧「语言下拉 + 返回按钮」包裹层，保持 logo | nav | 右侧 三段式不变形 */
.lang-dd-wrap { display: flex; align-items: center; gap: 10px; }

@media (max-width: 768px) {
  .lang-dd--pill .lang-dd__btn { height: 45px; padding: 0 10px; }
  .lang-dd-wrap { gap: 8px; }
}

/* 英文模式下顶栏按钮自适应宽度（中文「返回作品集」5 字够放，英文 "Back to portfolio" 会溢出） */
html:not([lang="zh"]) .header-site__actions .btn-submit,
html:not([lang="zh"]) .page-header__back,
html:not([lang="zh"]) .project-header__back {
  width: auto; min-width: 124px;
  padding-left: 18px; padding-right: 18px;
  white-space: nowrap;
}
@media (max-width: 768px) {
  html:not([lang="zh"]) .header-site__actions .btn-submit,
html:not([lang="zh"]) .page-header__back,
html:not([lang="zh"]) .project-header__back { padding-left: 12px; padding-right: 12px; min-width: 0; }
}

/* ==========================================================
   顶栏导航严格居中（2026-10-24）
   原因：加语言下拉后右侧变宽，space-between 会把中间导航挤偏（实测 −49 ~ −53px）。
   做法：左右两侧各占 1fr（等宽），导航自身 auto → 导航中心 = 视口中心。
   注意：不改任何毛玻璃/配色，只调整 flex 分配。
   ========================================================== */
.header-site__container > .header-site__logo,
.header-site__container > .header-site__actions { flex: 1 1 0; min-width: 0; }
.header-site__container > .header-site__actions { justify-content: flex-end; }
.header-site__container > .header-site__nav { flex: 0 0 auto; }

.page-header > .page-header__logo,
.project-header > .project-header__logo,
.page-header > .lang-dd-wrap,
.project-header > .lang-dd-wrap { flex: 1 1 0; min-width: 0; }
.page-header > .lang-dd-wrap,
.project-header > .lang-dd-wrap { justify-content: flex-end; }
.page-header > .page-header__nav,
.project-header > .project-header__nav { flex: 0 0 auto; }

/* ==========================================================
   多语言排版（2026-10-24：fr / de / ru / ja / ko）
   · 日/韩：追加 CJK 字体栈 + 断行规则
   · 德语：长复合词允许断词，避免撑破按钮/导航
   · 俄语：行高略增（西里尔 x-height 更大）
   · 语言菜单：更宽的条目以容纳 Français / Deutsch / Русский
   ========================================================== */
html[lang="ja"] {
  --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP", sans-serif;
}
html[lang="ja"] .hero-site__title,
html[lang="ja"] .heading-1,
html[lang="ja"] .heading-3,
html[lang="ja"] .section-title { word-break: normal; line-break: strict; }

html[lang="ko"] {
  --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
}
html[lang="ko"] .hero-site__title,
html[lang="ko"] .heading-1,
html[lang="ko"] .heading-3,
html[lang="ko"] .section-title { word-break: keep-all; }

html[lang="de"] .hero-site__title,
html[lang="de"] .heading-1,
html[lang="de"] .heading-3,
html[lang="de"] p,
html[lang="de"] li { hyphens: auto; overflow-wrap: break-word; }

html[lang="ru"] .hero-site__title,
html[lang="ru"] .heading-1,
html[lang="ru"] .heading-3 { line-height: 1.12; }

/* 语言菜单：容纳多语言名称 */
.lang-dd__menu { min-width: 170px; }
@media (max-width: 768px) { .lang-dd__menu { min-width: 150px; } }

/* 非中文按钮宽度自适应（英/法/德/俄/日/韩 文案普遍比中文长）*/
html:not([lang="zh"]) .header-site__actions .btn-submit,
html:not([lang="zh"]) .page-header__back,
html:not([lang="zh"]) .project-header__back {
  width: auto; min-width: 124px;
  padding-left: 18px; padding-right: 18px;
  white-space: nowrap;
}
@media (max-width: 768px) {
  html:not([lang="zh"]) .header-site__actions .btn-submit,
  html:not([lang="zh"]) .page-header__back,
  html:not([lang="zh"]) .project-header__back { padding-left: 12px; padding-right: 12px; min-width: 0; }
}

/* ==========================================================
   手机端顶栏按钮：纯 CSS 显示英文短词（HOME / BACK / ABOUT）
   为什么用 CSS：JS 翻译要等词典请求，首屏会先闪一下中文/ABOUT ME；
   CSS 从第一次绘制就是短词，且与语言无关（不会溢出）。
   ========================================================== */
@media (max-width: 768px) {
  .header-site__actions .btn-submit,
  .page-header__back,
  .project-header__back { font-size: 0 !important; letter-spacing: 0 !important; }

  .header-site__actions .btn-submit::after,
  .page-header__back::after,
  .project-header__back::after {
    content: "HOME";
    font-size: 14px; font-weight: 600; letter-spacing: .05em; line-height: 1;
  }
  .header-site__actions .btn-submit[data-nav="cta"]::after { content: "ABOUT"; }
  .page-header__back::after,
  .project-header__back::after { content: "BACK"; }
}

/* 手机端按钮与语言下拉同高（2026-10-25：font-size:0 会让按钮塌到 40px，显得不齐） */
@media (max-width: 768px) {
  .header-site__actions .btn-submit {
    height: 47px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  .page-header__back,
  .project-header__back {
    height: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  .header-site__actions .btn-submit::after,
  .page-header__back::after,
  .project-header__back::after { line-height: 1; display: inline-block; }
}

/* ==========================================================
   品牌 Logo 字体锁定（2026-10-25，用户硬性要求）
   —— 之前 ja/ko 覆盖了 --font-primary，导致 Logo 字体跟着变。
   这里给 Logo 单独指定字体栈，与语言无关，任何语言都保持原样。
   ========================================================== */
:root {
  --font-logo: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
}
.header-site__logo,
.page-header__logo,
.project-header__logo,
.bottom-nav-awwwards__logo,
[class*="__logo"] {
  font-family: var(--font-logo) !important;
}

/* ==========================================================
   STICKY TABS：底部导航滑动指示条（2026-10-27）
   · 指示条是一个绝对定位的绿胶囊，由 JS 计算目标标签位置
   · 有指示条后，active 标签自身不再画绿底（避免双层）
   ========================================================== */
.bottom-nav-awwwards__list { position: relative; }
.bottom-nav-awwwards__list li { position: relative; z-index: 1; }

.bottom-tabs__pill {
  position: absolute; top: 0; bottom: 0; left: 0; width: 0;
  border-radius: 12px;
  background: var(--color-accent-green);
  box-shadow: 0 2px 12px rgba(0, 220, 130, 0.35);
  transform: translate3d(0, 0, 0);
  transition: transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1),
              width 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
  opacity: 0;
  z-index: 0;
}
.bottom-nav-awwwards__list.is-ready .bottom-tabs__pill { opacity: 1; }

/* active 标签：文字变深色加粗，但背景交给指示条 */
.bottom-nav-awwwards__list[data-sticky-tabs] li a.active,
.bottom-nav-awwwards__list[data-sticky-tabs] li a.active:hover,
.bottom-nav-awwwards__list[data-sticky-tabs] li a.active:focus {
  background: transparent;
  box-shadow: none;
  color: #0a0a0a;
  font-weight: 600;
}

/* 尊重「减少动态效果」 */
@media (prefers-reduced-motion: reduce) {
  .bottom-tabs__pill { transition: none; }
}
/* ==========================================================
   2026-10-27 修：语言下拉标签换行 + 返回按钮文字居中
   · .lang-dd__label 加 nowrap，且下拉容器不被压缩
   · .project-header__back 改为「无上下内边距 + 行高 1」，::after 作为块级 flex 项居中
   ========================================================== */
.lang-dd__label{white-space:nowrap;display:inline-block;line-height:1}
.lang-dd,.lang-dd--pill{flex:0 0 auto;min-width:0}
.lang-dd__btn{white-space:nowrap;gap:5px;padding:0 9px}

.project-header__back{line-height:1;padding:0 14px}
.project-header__back::after{display:block;line-height:1}
.page-header__back{line-height:1}
.page-header__back::after{display:block;line-height:1}

@media (max-width:768px){
  .lang-dd__btn{padding:0 8px;gap:4px;font-size:12px}
  .lang-dd__label{font-size:12px;line-height:1}
  .project-header__back,.page-header__back{padding:0 13px;line-height:1}
}

/* ==========================================================
   2026-10-27 修：手机端返回按钮「‹  BACK」中间空隙过大
   原因：中文原文仍作为 flex 项存在（宽度 0），把两个 gap 叠成 16px；
   修法：gap 归零 + 由 ::after 的 margin-left 提供 8px 间距。
   ========================================================== */
@media (max-width: 768px) {
  .project-header__back, .page-header__back {
    column-gap: 0 !important;
    gap: 0 !important;
  }
  .project-header__back::after, .page-header__back::after {
    margin-left: 5px;
  }
  /* 被 font-size:0 隐藏的中文标签彻底移出布局（不影响 JS 读取 textContent） */
  #backText, .back-label {
    display: none !important;
  }
}
/* 2026-10-27 再加紧：返回按钮图标与文字间距 8px → 5px */
.project-header__back, .page-header__back { gap: 5px !important; }
.project-header__back::after, .page-header__back::after { margin-left: 5px; }
/* 2026-10-27 最终：返回按钮图标与文字间距（左右留空对称） */
.project-header__back, .page-header__back { gap: 5px !important; justify-content: center; }
.project-header__back::after, .page-header__back::after { margin-left: 0 !important; }
@media (max-width: 768px) {
  .project-header__back, .page-header__back { gap: 5px !important; padding-left: 12px !important; padding-right: 12px !important; }
  .project-header__back::after, .page-header__back::after { margin-left: 0 !important; }
}

/* 2026-10-27 修：返回按钮图标 SVG 两侧留白（viewBox 内箭头只占中间一小段）
   → 用负 margin 收掉左右各 4px，使「左留白 = 右留白」，同时图标与文字更贴近 */
.project-header__back svg, .page-header__back svg {
  margin-left: -4px !important;
  margin-right: -4px !important;
}

/* 2026-10-28 ICP 备案号（合规展示，全站统一） */
.footer-site__icp, .page-footer__icp, .project-footer__icp {
  font-size: 12px; line-height: 1.6; opacity: 0.5; margin-top: 8px;
}
.footer-site__icp a, .page-footer__icp a, .project-footer__icp a,
.pl-footer .lc-icp a {
  color: inherit; text-decoration: none;
}
.footer-site__icp a:hover, .page-footer__icp a:hover, .project-footer__icp a:hover,
.pl-footer .lc-icp a:hover {
  text-decoration: underline; opacity: 0.9;
}
.pl-footer .lc-icp { opacity: 0.5; }