/*
 * 全站左右边距规则：与视口左右各 120px（变量 --site-inline）
 * 顶栏 .header 除外，顶栏横向内边距独立设置、撑满视口宽度
 * 除非另有明确指令，其余区块的水平内边距 / 定位请使用 var(--site-inline)
 */
:root {
  /*
   * 版心规则（除 banner 外）：
   * - 目标内容宽度：1440px
   * - 小屏最小安全边距：24px
   * - 1920px 视口时：site-inline = (1920 - 1440) / 2 = 240px
   */
  --content-max: 1440px;
  --content-gutter: 24px;
  --site-inline: max(var(--content-gutter), calc((100vw - var(--content-max)) / 2));
  --brand-orange: #F54F00;
  --brand-orange-rgb: 245, 79, 0;
  /* 全站默认分割线：#FFFFFF 15% */
  --site-divider-color: rgba(255, 255, 255, 0.15);
  /* 顶栏（.header）高度估算：logo 48px + 顶/底 padding */
  --header-h: 96px;
}

/* ===== Self-hosted fonts =====
 * Place font files under: assets/fonts/
 * Expected files:
 * - Blue Sky Noto-Light.woff2 / .otf   (300)
 * - Blue Sky Noto-Regular.woff2 / .otf (400)
 * - Blue Sky Noto-Bold.woff2 / .otf    (700)
 */
@font-face {
  font-family: 'Blue Sky Noto';
  src:
    url('assets/fonts/Blue Sky Noto-Light.woff2') format('woff2'),
    url('assets/fonts/Blue Sky Noto-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Blue Sky Noto';
  src:
    url('assets/fonts/Blue Sky Noto-Regular.woff2') format('woff2'),
    url('assets/fonts/Blue Sky Noto-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Blue Sky Noto';
  src:
    url('assets/fonts/Blue Sky Noto-Bold.woff2') format('woff2'),
    url('assets/fonts/Blue Sky Noto-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Blue Sky Noto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  font-weight: 300;
  line-height: 1.5;
  background-color: #010200;
  color: white;
  min-height: 100vh;
  overflow-x: hidden;
}

button,
input,
textarea,
select {
  font-family: 'Blue Sky Noto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

body.intro-active {
  overflow: hidden;
}

/* Homepage intro: a short authorship statement before revealing the work. */
.site-intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #010200;
  color: #ffffff;
  overflow: hidden;
}

.site-intro::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 52% 43%, rgba(var(--brand-orange-rgb), 0.08), transparent 36%),
    radial-gradient(circle at 46% 56%, rgba(255, 255, 255, 0.025), transparent 50%);
  opacity: 0;
}

.site-intro.is-playing::before {
  animation: introAtmosphere 1400ms ease 120ms both;
}

.site-intro.is-playing {
  animation: introRevealHome 600ms cubic-bezier(0.65, 0, 0.35, 1) 4200ms forwards;
}

.site-intro-skip {
  position: absolute;
  top: 40px;
  right: 48px;
  z-index: 2;
  appearance: none;
  border: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: color 180ms ease;
}

.site-intro-skip:hover,
.site-intro-skip:focus-visible {
  color: #ffffff;
}

.site-intro-skip:focus-visible {
  outline: 1px solid var(--brand-orange);
  outline-offset: 8px;
}

.site-intro-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(1100px, calc(100% - 48px));
  text-align: center;
}

.site-intro-line {
  opacity: 0;
  transform: translateY(18px);
}

.site-intro-line--primary {
  font-size: clamp(38px, 4vw, 64px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.site-intro-line--support {
  margin-top: 46px;
  font-size: clamp(18px, 1.5vw, 24px);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.52);
}

.site-intro-accent {
  color: var(--brand-orange);
}

.site-intro.is-playing .site-intro-line:nth-child(1) {
  animation: introTextIn 660ms cubic-bezier(0.16, 1, 0.3, 1) 600ms both;
}

.site-intro.is-playing .site-intro-line:nth-child(2) {
  animation: introTextIn 660ms cubic-bezier(0.16, 1, 0.3, 1) 2000ms both;
}

.site-intro.is-playing .site-intro-line:nth-child(3) {
  animation: introTextInSoft 660ms cubic-bezier(0.16, 1, 0.3, 1) 3400ms both;
}

.site-intro-footer {
  position: absolute;
  left: 48px;
  right: 48px;
  bottom: 40px;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.42);
}

.site-intro-progress {
  position: relative;
  display: block;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
}

.site-intro-progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--brand-orange);
  transform: translateX(-100%);
}

.site-intro.is-playing .site-intro-progress-fill {
  animation: introProgress 4200ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.site-intro.is-leaving {
  pointer-events: none;
  animation: introRevealHome 600ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

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

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

@keyframes introTextInSoft {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 0.56;
    transform: translateY(0);
  }
}

@keyframes introProgress {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@keyframes introRevealHome {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-100%);
  }
}

/* ===== Page Container ===== */
.page {
  position: relative;
  min-height: 100vh;
  width: 100%;
}

/* ===== Header ===== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 48px;
  z-index: 100;
  background: transparent;
  transition: background-color 260ms ease;
}

.header.is-scrolled {
  background: var(--brand-orange);
}

.logo {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
}

.logo svg {
  display: block;
  width: 100%;
  height: 100%;
}

.brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #000;
}

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

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 18px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.nav-links a {
  color: #000;
  text-decoration: none;
  transition: opacity 0.2s;
}

.nav-links a:hover {
  opacity: 0.8;
}

/* Vertical separator */
.separator {
  width: 1px;
  height: 18px;
  background-color: rgba(0, 0, 0, 0.5);
}

/* Language toggle */
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  text-transform: uppercase;
}

.lang-btn {
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.lang-btn:hover {
  color: rgba(0, 0, 0, 0.75);
}

.lang-btn.is-active {
  color: #000;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.lang-divider {
  color: rgba(0, 0, 0, 0.45);
  font-weight: 300;
}

.mobile-nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 20px;
  background: transparent;
  cursor: pointer;
}

.mobile-nav-toggle span {
  display: block;
  width: 16px;
  height: 1px;
  background: #000000;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease;
}

.header.is-menu-open .mobile-nav-toggle span:first-child {
  transform: translateY(3.5px) rotate(45deg);
}

.header.is-menu-open .mobile-nav-toggle span:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}

/* ===== Hero Banner ===== */
.banner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  /* 让顶栏压到首屏 banner 上：不再为 fixed header 预留间距 */
  margin-top: 0;
  width: 100%;
  max-width: none;
  aspect-ratio: 1600 / 783;
  min-height: 360px;
  padding: 0;
  line-height: 0;
  /* 玻璃球会移向四角，需允许溢出可见；若 hidden 会裁切球体，看起来「活动范围」变窄 */
  overflow: visible;
  background: transparent;
}

.banner-img {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: 100%;
  display: block;
  vertical-align: bottom;
  object-fit: cover;
  mix-blend-mode: normal;
  opacity: 1;
  background: var(--brand-orange);
}

.banner-video-mask {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(var(--brand-orange-rgb), 0) 0%,
    rgba(var(--brand-orange-rgb), 0) 20%,
    rgba(var(--brand-orange-rgb), 0.8) 100%
  );
}

.banner-spotlight {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* Figma: Sphere (node 340:53912) —— 透明玻璃球体
 * 效果来自 Figma：
 *   · 内阴影：inset 0 4.487 33.767 10.096 rgba(255,255,255,0.52)
 *   · 玻璃（Glass）：浅色 -45°/100%、折射 100、深度 112.18、色散 50、霜冻 0、Splay 0
 * 由于 CSS 无原生玻璃滤镜，这里用「SVG displacement 折射 + 内阴影 + -45° 浅色高光」做近似。
 */
.banner-sphere {
  position: absolute;
  top: 50%;
  left: 50%;
  /* --sx / --sy 由 script.js 每帧写入，做 banner 内不规则漂移；静态值 0 作降级 */
  --sx: 0px;
  --sy: 0px;
  transform: translate(-50%, -50%) translate3d(var(--sx), var(--sy), 0);
  will-change: transform;
  width: clamp(234px, 28.8vw, 391.74px);
  aspect-ratio: 1 / 1;
  border-radius: 9999px;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.34) 0%,
      rgba(255, 255, 255, 0.1) 34%,
      rgba(255, 255, 255, 0) 62%
    );
  opacity: 0.78;
  pointer-events: none;
  z-index: 999;
  isolation: isolate;
  overflow: hidden;

  /* Refraction 100 / Depth 112.18 / Frost 0：
   * 通过 SVG 位移 (+ 三通道色散) 把身后视频真实弯折；
   * 再叠 saturate / contrast / brightness 强化透射感 */
  -webkit-backdrop-filter: url(#sphereGlass) saturate(1.32) contrast(1.1) brightness(1.04);
  backdrop-filter: url(#sphereGlass) saturate(1.32) contrast(1.1) brightness(1.04);
  filter: none;

  /*
   * 内阴影组合（"Depth" 的核心）：
   * 1) Figma 原「内阴影」参数（像素级照搬）
   * 2) 左上 -45° 主打光高光（玻璃前壁反射）
   * 3) 右下 caustic 亮弧（光穿出球体聚焦）
   * 4) Fresnel 暗边：整圈内缘压暗，模拟厚玻璃吸光（深度=100 的关键）
   * 5) 底部重阴影（球体下沉体量）
   * 6) 色散 50：细青 / 品红内缘
   * 7) 外沿 1px 白细线（玻璃边缘锚定）
   * 外阴影三层：近接触阴影 + 中远落影 + 地面软影
   */
  box-shadow:
    inset 0 4.487px 33.767px 10.096px rgba(255, 255, 255, 0.52),
    inset 26px -26px 52px -10px rgba(255, 255, 255, 0.58),
    inset -18px 18px 44px -12px rgba(255, 255, 255, 0.22),
    inset 0 0 46px 4px rgba(0, 0, 0, 0.22),
    inset 1px 1px 0 rgba(0, 235, 255, 0.18),
    inset -1px -1px 0 rgba(255, 0, 170, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.34);
}

/* 3D 体积叠层：整个球面再叠一层从左上(亮)→右下(暗)的软光，
 * 用 overlay 融合，让球体像一个真实立体球而不是平面圆盘
 * ——这是让"深度"观感变明显最直接的一层 */
.banner-sphere::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(
      circle at 30% 26%,
      rgba(255, 255, 255, 0.48) 0%,
      rgba(255, 255, 255, 0.12) 28%,
      rgba(255, 255, 255, 0) 48%,
      rgba(0, 0, 0, 0) 60%,
      rgba(0, 0, 0, 0.22) 100%
    );
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}

/* 镜面主高光：左上柔性光晕 */
.banner-sphere-spec {
  position: absolute;
  top: 7%;
  left: 12%;
  width: 42%;
  height: 28%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 35% 35%,
    rgba(255, 255, 255, 0.82),
    rgba(255, 255, 255, 0.34) 42%,
    rgba(255, 255, 255, 0) 78%
  );
  filter: blur(4px);
  transform: rotate(-45deg);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 3;
}

/* 次级高光：右下反光焦散，对应深度透射后在对侧聚焦的亮点 */
.banner-sphere-spec--sub {
  top: auto;
  left: auto;
  right: 14%;
  bottom: 12%;
  width: 24%;
  height: 14%;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.6),
    rgba(255, 255, 255, 0) 75%
  );
  filter: blur(4px);
  transform: rotate(12deg);
  mix-blend-mode: screen;
}

/* 尖点高光：玻璃球顶部 1 个极小的白亮点，摄影里真实玻璃球最标志性的镜面反射点 */
.banner-sphere-pinpoint {
  position: absolute;
  top: 12%;
  left: 22%;
  width: 6%;
  height: 6%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.7) 35%,
    rgba(255, 255, 255, 0) 75%
  );
  filter: blur(0.5px);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 4;
}

/* 如浏览器不支持 backdrop-filter url()（主要是 Firefox），降级：
 * 去掉折射但保留所有高光与体积层，球体仍是玻璃球观感 */
@supports not ((backdrop-filter: url(#sphereGlass)) or (-webkit-backdrop-filter: url(#sphereGlass))) {
  .banner-sphere {
  -webkit-backdrop-filter: saturate(1.32) contrast(1.1) brightness(1.04);
  backdrop-filter: saturate(1.32) contrast(1.1) brightness(1.04);
  }
}

/* Banner 顶部标题 + 左右装饰线 */
.banner-idw-row {
  position: absolute;
  /* 保持文字相对视口的原始位置：banner 上移了 header-h，所以这里补回去 */
  top: calc(var(--header-h) - 4px);
  left: var(--site-inline);
  right: var(--site-inline);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  z-index: 3;
  pointer-events: none;
}

.banner-idw-line {
  flex: 1;
  min-width: 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.35);
}

.banner-idw {
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  font-size: 24px;
  font-weight: 300;
  line-height: 1.5;
  color: #000;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
}

/* 开屏打字机效果：字符逐个点亮 */
.banner-idw.is-intro-on {
  opacity: 1;
}
.banner-idw-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(6px);
  filter: blur(0.3px);
}
.banner-idw-char.is-on {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition: transform 180ms ease, opacity 140ms ease, filter 220ms ease;
}

/* 打字机光标（可选） */
.banner-idw-caret {
  display: inline-block;
  margin-left: 2px;
  opacity: 0.7;
  transform: translateY(-1px);
  animation: banner-caret-blink 900ms steps(1, end) infinite;
}
@keyframes banner-caret-blink {
  0% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.1;
  }
  100% {
    opacity: 0.75;
  }
}

/* Banner 右下角职称文案 */
.banner-role {
  position: absolute;
  right: var(--site-inline);
  bottom: 40px;
  text-align: right;
  z-index: 3;
  pointer-events: none;
}

.banner-role-line {
  margin: 0;
  padding: 0;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.5;
  color: #000;
}

.banner-role-line + .banner-role-line {
  margin-top: 4px;
}

/* 底部向下箭头 + 文案 */
.banner-down-cta {
  position: absolute;
  left: var(--site-inline);
  bottom: 40px;
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 3;
  text-decoration: none;
  color: #000;
  transition: opacity 0.2s;
}

.banner-down-cta:hover {
  opacity: 0.8;
}

.banner-down-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: block;
}

.banner-down-text {
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Creativity & Soul - 居中机打呈现 */
.banner-creativity-wrap {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  z-index: 2;
  pointer-events: none;
}

.banner-creativity-text {
  margin: 0;
  padding: 0;
  font-size: clamp(61.6px, 9.4vw, 188.1px);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
  color: #000;
  -webkit-text-stroke: 4px #000;
  text-shadow: 0 4px 10px rgba(255, 255, 255, 0.2);
  white-space: nowrap;
  opacity: 0.9;
}

.banner-creativity-char {
  display: inline-block;
  color: inherit;
  font-weight: inherit;
  -webkit-text-stroke: inherit;
  text-shadow: inherit;
  opacity: 0;
  transform: translateY(6px);
}

.banner-creativity-char.is-on {
  opacity: 1;
  transform: translateY(0);
  transition: transform 180ms ease, opacity 140ms ease;
}

.banner-creativity-caret {
  display: inline-block;
  margin-left: 2px;
  opacity: 0.75;
  transform: translateY(-1px);
  animation: banner-caret-blink 900ms steps(1, end) infinite;
}

/* Banner 下方细条：底层 10% 白 + 上层左对齐 25% 宽纯白 */
.banner-hairline-wrap {
  position: relative;
  width: calc(100% - 2 * var(--site-inline));
  margin: 0 var(--site-inline);
  height: 4px;
}

.banner-hairline {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
}

.banner-hairline-accent {
  position: absolute;
  left: 0;
  top: 0;
  width: 25%;
  height: 4px;
  background: #ffffff;
}

/* 两侧细条：从中间向外展开 */
.banner-idw-row .banner-idw-line {
  transform: scaleX(0);
  transform-origin: right center;
}
.banner-idw-row .banner-idw-line:nth-of-type(2) {
  transform-origin: left center;
}
.banner-idw-row.is-lines-open .banner-idw-line {
  transform: scaleX(1);
  transition: transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* 内容区块：与上方间距 120px；标题与正文 gap 24px；正文块水平居中、文字左对齐 */
.section-welcome,
.section-portfolio,
.section-whatido,
.section-stand-for,
.section-right-fit {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 120px;
  padding: 0 var(--site-inline) 0;
  box-sizing: border-box;
}

.section-welcome .title-accent,
.section-portfolio .title-accent,
.section-whatido .title-accent,
.section-stand-for .title-accent,
.section-right-fit .title-accent {
  align-self: flex-start;
  flex-shrink: 0;
}

/* 我的设计信条 / What I stand for — Figma 351:5692 */
.section-stand-for .title-accent {
  gap: 16px;
}

.section-stand-for .title-accent-label {
  font-size: 18px;
  line-height: 1.5;
}

/* 标题样式：左侧 24×1 色条 + 右侧文案，可复用 .title-accent */
.title-accent {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: 300;
  line-height: 1.5;
}

.title-accent-line {
  flex-shrink: 0;
  width: 24px;
  height: 1px;
  background: var(--brand-orange);
}

.title-accent-label {
  color: var(--brand-orange);
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0.02em;
}

/* 全站默认文字行高统一 */
.section-stand-for .title-accent-label,
.portfolio-item-text,
.portfolio-panel-note,
.portfolio-case-title,
.portfolio-case-desc,
.portfolio-case-more,
.whatido-block-title,
.whatido-tag,
.stand-for-title,
.right-fit-item-num,
.right-fit-item-text,
.connect-title {
  line-height: 1.5;
}

/* 主文案 + 描述：紧跟标题 24px 后；Welcome 区块正文水平居中；What I Do 与标题左对齐 */
.welcome-content-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.welcome-content {
  box-sizing: border-box;
  width: min(960px, 100%);
  max-width: 100%;
  margin: 0;
  text-align: left;
}

.section-whatido .welcome-desc {
  max-width: 960px;
}

.section-welcome .welcome-desc {
  max-width: 960px;
}

/* Welcome 区块正文与左上角标题同一左基线 */
.section-welcome .welcome-content-shell {
  align-items: flex-start;
}

.section-welcome .welcome-content {
  width: 100%;
  max-width: 100%;
}

/* Portfolio 区块：基于 Figma 347:53956 */
.section-portfolio .portfolio-list {
  width: 100%;
  max-width: 100%;
}

.section-portfolio .portfolio-item {
  position: relative;
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.section-portfolio .portfolio-item:last-child {
  border-bottom: 0;
}

.portfolio-item-trigger {
  width: 100%;
  min-height: 172px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 48px 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  transition: background-color 500ms ease-out, color 500ms ease-out;
}

.portfolio-item-trigger::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--brand-orange);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 500ms ease-out;
  pointer-events: none;
  z-index: 0;
}

.portfolio-item-trigger > * {
  position: relative;
  z-index: 1;
}

.portfolio-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-size: 28px;
  font-weight: 300;
  line-height: 1.5;
  flex-shrink: 0;
  transition: background-color 500ms ease-out, color 500ms ease-out;
}

.portfolio-item-text {
  margin: 0;
  color: #ffffff;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.5;
  transition: color 500ms ease-out;
}

/* 悬停态（Figma 状态=悬停）：橙底 + 黑字 */
.portfolio-item-trigger:hover,
.portfolio-item-trigger:focus-visible {
  outline: none;
}

.portfolio-item-trigger:hover::before,
.portfolio-item-trigger:focus-visible::before {
  transform: scaleX(1);
}

.portfolio-item-trigger:hover .portfolio-item-text,
.portfolio-item-trigger:focus-visible .portfolio-item-text {
  color: #000000;
}

.portfolio-item-trigger:hover .portfolio-item-icon,
.portfolio-item-trigger:focus-visible .portfolio-item-icon {
  background: rgba(0, 0, 0, 0.3);
  color: #000000;
}

/* 打开态（Figma 状态=打开）：减号 + 次标题色 + 展开详情卡片 */
.portfolio-item.is-open .portfolio-item-trigger {
  min-height: 172px;
  background: transparent;
}

.portfolio-item.is-open .portfolio-item-text {
  color: #ffe4d6;
}

.portfolio-item.is-open .portfolio-item-icon {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.portfolio-panel {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 0 0 64px 72px;
}

.portfolio-panel[hidden] {
  display: none;
}

.portfolio-exp-layout {
  display: grid;
  grid-template-columns: 560px minmax(0, 1fr);
  align-items: start;
  gap: 56px;
}

.portfolio-exp-photo {
  display: block;
  width: 560px;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.portfolio-exp-timeline {
  position: relative;
  margin-left: 20px;
  padding-left: 40px;
}

.portfolio-exp-item {
  position: relative;
  padding-bottom: 48px;
}

.portfolio-exp-item:last-child {
  padding-bottom: 0;
}

.portfolio-exp-item::before {
  content: "";
  position: absolute;
  left: -48px;
  top: 17px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: #000;
  z-index: 2;
}

.portfolio-exp-item::after {
  content: "";
  position: absolute;
  left: -41px;
  top: 0;
  bottom: 0;
  width: 1px;
  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.18) 0,
      rgba(255, 255, 255, 0.18) 9px,
      transparent 9px,
      transparent 39px,
      rgba(255, 255, 255, 0.18) 39px,
      rgba(255, 255, 255, 0.18) 100%
    );
  z-index: 1;
}

.portfolio-exp-item:first-child::after {
  background:
    linear-gradient(
      to bottom,
      transparent 0,
      transparent 39px,
      rgba(255, 255, 255, 0.18) 39px,
      rgba(255, 255, 255, 0.18) 100%
    );
}

.portfolio-exp-item.is-current::before {
  background: var(--brand-orange);
  border-color: var(--brand-orange);
}

.portfolio-exp-head {
  display: flex;
  align-items: baseline;
  gap: 24px;
  min-width: 0;
}

.portfolio-exp-index {
  margin: 0;
  flex-shrink: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--brand-orange);
}

.portfolio-exp-time {
  margin: 20px 0 0;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
}

.portfolio-exp-company {
  margin: 0;
  min-width: 0;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
}

.portfolio-exp-domain,
.portfolio-exp-summary {
  margin: 8px 0 0;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
}

.portfolio-exp-summary {
  margin-top: 0;
}

.portfolio-exp-label {
  margin: 8px 0 0;
  font-size: 20px;
  font-weight: 300;
  line-height: 2;
  color: rgba(255, 255, 255, 0.65);
}

.portfolio-exp-list {
  margin: 0;
  padding-left: 1.25em;
  font-size: 20px;
  font-weight: 300;
  line-height: 2;
  color: rgba(255, 255, 255, 0.65);
}

.portfolio-exp-list li + li {
  margin-top: 4px;
}

.portfolio-panel-note {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
}

.portfolio-case {
  display: flex;
  gap: 32px;
  align-items: stretch;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.05);
  padding: 40px;
}

.portfolio-case-cover {
  width: 640px;
  min-width: 640px;
  height: 360px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background:
    radial-gradient(circle at 30% 40%, rgba(var(--brand-orange-rgb), 0.45), rgba(0, 0, 0, 0) 55%),
    radial-gradient(circle at 70% 60%, rgba(var(--brand-orange-rgb), 0.25), rgba(0, 0, 0, 0) 60%),
    linear-gradient(135deg, #13161d 0%, #0a0c10 100%);
}

.portfolio-case-cover--entellivalue {
  position: relative;
  overflow: hidden;
  background-image: url('assets/entellivalue-cover-thumb.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.portfolio-case-cover-copy {
  position: absolute;
  top: 52px;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(520px, calc(100% - 40px));
  transform: translateX(-50%);
  text-align: center;
}

.portfolio-case-cover-title {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  background: linear-gradient(90deg, #bf7f1f 0%, #ffe600 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.portfolio-case-cover-desc {
  font-size: 10px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.65);
}

.portfolio-case-cover--datavizer {
  background-image: url('assets/datavizer-cover-thumb.jpg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.portfolio-case-cover--design-system {
  background-image: url('assets/design-system-cover-thumb.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.portfolio-case-meta {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  min-height: 360px;
}

.portfolio-case-title {
  margin: 0;
  font-size: 40px;
  line-height: 1.5;
  font-weight: 700;
  color: #ffffff;
}

.portfolio-case-link {
  color: inherit;
  text-decoration: none;
}

.portfolio-case-link:hover {
  color: #ffffff;
  opacity: 0.9;
}

.portfolio-case-desc {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.45);
}

.portfolio-case-more {
  margin-top: auto;
  color: rgba(255, 255, 255, 0.45);
  font-size: 18px;
  line-height: 1.5;
  text-decoration: none;
}

.portfolio-case-more:hover {
  color: #ffffff;
}

/* What I Actually Do — 手风琴（Figma 371:15224 等） */
.section-whatido .whatido-list {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.whatido-block {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.whatido-block:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.whatido-block-heading {
  margin: 0;
  padding: 0;
  font: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
}

.whatido-block-header {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 172px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 48px 24px 48px 0;
  border: 0;
  background: transparent;
  color: #ffffff;
  text-align: left;
  cursor: pointer;
  transition: background-color 220ms ease;
}

.whatido-block-header > * {
  position: relative;
  z-index: 1;
}

.whatido-block:not(.is-open):hover .whatido-block-header {
  background: rgba(255, 255, 255, 0.05);
}

.whatido-block-header:focus {
  outline: none;
}

.whatido-block-header:focus-visible {
  outline: 2px solid var(--brand-orange);
  outline-offset: 2px;
}

.whatido-head-left {
  display: flex;
  flex: 1;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 32px;
  min-width: 0;
}

.whatido-arrow {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: url('assets/icon-common-arrow-bottom-right.svg') center / 32px 32px no-repeat;
  transition: transform 220ms ease;
}

.whatido-arrow svg {
  display: none;
}

.whatido-block:hover .whatido-arrow,
.whatido-block.is-open .whatido-arrow,
.whatido-block:focus-within .whatido-arrow {
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .site-intro {
    display: none;
  }

  .whatido-arrow,
  .whatido-block-header,
  .whatido-bar,
  .whatido-tag {
    transition: none;
  }
}

.whatido-head-right {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
  padding: 0;
}

.whatido-index {
  font-family: 'Blue Sky Noto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  color: #ffffff;
}

.whatido-bars {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  width: 101px;
  height: 64px;
  flex-shrink: 0;
}

.whatido-bar {
  width: 1px;
  height: 16px;
  border-radius: 0.5px;
  background: rgba(255, 255, 255, 0.22);
  transition:
    height 520ms cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 360ms ease;
}

.whatido-block:is(:hover, .is-open, :focus-within) .whatido-bars .whatido-bar {
  height: 16px;
  background: rgba(255, 255, 255, 0.25);
}

.whatido-block:nth-of-type(1):is(:hover, .is-open, :focus-within) .whatido-bars .whatido-bar:nth-child(1),
.whatido-block:nth-of-type(2):is(:hover, .is-open, :focus-within) .whatido-bars .whatido-bar:nth-child(2),
.whatido-block:nth-of-type(3):is(:hover, .is-open, :focus-within) .whatido-bars .whatido-bar:nth-child(3),
.whatido-block:nth-of-type(4):is(:hover, .is-open, :focus-within) .whatido-bars .whatido-bar:nth-child(4),
.whatido-block:nth-of-type(5):is(:hover, .is-open, :focus-within) .whatido-bars .whatido-bar:nth-child(5) {
  height: 64px;
  background: #ffffff;
}

.whatido-block-title {
  display: block;
  margin: 0;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.5;
  color: #ffffff;
  word-break: break-word;
}

.whatido-panel {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
  width: 100%;
  max-width: 100%;
  padding: 0 0 48px 64px;
}

.whatido-panel[hidden] {
  display: none;
}

.whatido-block-desc {
  margin: 0;
  width: min(960px, 100%);
  max-width: 100%;
  font-size: 18px;
  font-weight: 300;
  line-height: 36px !important;
  color: rgba(255, 255, 255, 0.65);
}

/* The Right Fit：正文与标题同一左基线 */
.section-right-fit .right-fit-content {
  width: 100%;
  max-width: 100%;
  margin: 0;
}

.welcome-lead {
  margin: 0;
}

.welcome-lead-line {
  margin: 0;
  padding: 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.5;
  color: #ffffff;
}

.welcome-lead-line + .welcome-lead-line {
  margin-top: 0.25em;
}

.welcome-lead-highlight {
  color: var(--brand-orange);
}

.welcome-desc {
  margin: 32px 0 0;
  max-width: none;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
}

.welcome-brand-logos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  width: min(896px, 100%);
  margin: 32px 0 0;
}

.welcome-brand-logo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 400 / 240;
  border-radius: 14px;
  object-fit: contain;
}

.whatido-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 0;
}

.whatido-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 41px;
  padding: 8px 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1111px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  color: #ffffff;
  white-space: nowrap;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* 全站分割线：1px，白 25% 透明，左右遵守 --site-inline */
.site-divider {
  display: none;
}

/* What I stand for — 四宫格卡片（Figma 351:5692） */
.stand-for-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

.stand-for-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 48px;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid transparent;
  overflow: hidden;
  box-shadow: inset 0 5px 6px 0 rgba(255, 255, 255, 0.25);
  transition:
    background-color 220ms cubic-bezier(0.42, 0, 1, 1),
    box-shadow 220ms cubic-bezier(0.42, 0, 1, 1);
}

.stand-for-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.5) 15%,
    rgba(255, 255, 255, 0.15) 20%,
    rgba(255, 255, 255, 0.4) 30%,
    rgba(255, 255, 255, 0.05) 40%,
    rgba(255, 255, 255, 0) 50%,
    rgba(255, 255, 255, 0.5) 65%,
    rgba(255, 255, 255, 0.1) 80%,
    rgba(0, 0, 0, 0) 85%,
    rgba(255, 255, 255, 0.05) 90%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
  transition: background 220ms cubic-bezier(0.42, 0, 1, 1);
}

.stand-for-card::after {
  content: '';
  position: absolute;
  left: 230px;
  top: 120px;
  width: 800px;
  height: 400px;
  border-radius: 50%;
  background: rgba(var(--brand-orange-rgb), 0.2);
  filter: blur(300px);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity 220ms cubic-bezier(0.42, 0, 1, 1);
}

.stand-for-card:hover {
  background: rgba(var(--brand-orange-rgb), 0.01);
  box-shadow: inset 0 5px 6px 0 rgba(var(--brand-orange-rgb), 0.25);
}

.stand-for-card:hover::before {
  background: linear-gradient(
    135deg,
    rgba(var(--brand-orange-rgb), 0.5) 15%,
    rgba(var(--brand-orange-rgb), 0.15) 20%,
    rgba(var(--brand-orange-rgb), 0.4) 30%,
    rgba(var(--brand-orange-rgb), 0.05) 40%,
    rgba(var(--brand-orange-rgb), 0) 50%,
    rgba(var(--brand-orange-rgb), 0.5) 65%,
    rgba(var(--brand-orange-rgb), 0.1) 80%,
    rgba(0, 0, 0, 0) 85%,
    rgba(var(--brand-orange-rgb), 0.05) 90%
  );
}

.stand-for-card:hover::after {
  opacity: 1;
}

.stand-for-card:nth-child(1),
.stand-for-card:nth-child(2) {
  min-height: 396px;
}

.stand-for-card:nth-child(3),
.stand-for-card:nth-child(4) {
  min-height: 358px;
}

.stand-for-watermark {
  position: absolute;
  top: -54px;
  right: 268px;
  transform: translateX(100%);
  font-size: 200px;
  font-weight: 700;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.1);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.stand-for-watermark,
.stand-for-num,
.stand-for-title {
  font-family: 'Blue Sky Noto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

.stand-for-card-head {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  width: 100%;
}

.stand-for-num {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: #ffffff;
}

.stand-for-title {
  margin: 0;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.5;
  color: #ffffff;
}

.stand-for-desc {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 18px;
  font-weight: 300;
  line-height: 36px !important;
  color: rgba(255, 255, 255, 0.65);
}

.stand-for-accent {
  position: relative;
  z-index: 1;
  display: block;
  width: 32px;
  height: 1px;
  background: var(--brand-orange);
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .stand-for-grid {
    grid-template-columns: 1fr;
    max-width: 100%;
  }

  .stand-for-watermark {
    right: 12px;
    transform: none;
    font-size: clamp(100px, 28vw, 200px);
  }

  .stand-for-card:nth-child(1),
  .stand-for-card:nth-child(2),
  .stand-for-card:nth-child(3),
  .stand-for-card:nth-child(4) {
    min-height: 0;
  }
}

/* The Right Fit — 文案与清单 */
.right-fit-content {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  text-align: left;
  display: flex;
  align-items: flex-start;
  gap: 168px;
}

.right-fit-lead {
  margin: 0;
  width: 650px;
  flex-shrink: 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.5;
  color: #ffffff;
}

.right-fit-lead span {
  display: block;
}

html[lang="zh-CN"] .right-fit-lead {
  width: min(1280px, 100%);
  font-size: clamp(64px, 7vw, 96px);
  line-height: 1.45;
  letter-spacing: 0;
}

html[lang="zh-CN"] .right-fit-content {
  flex-direction: column;
  gap: 64px;
}

.right-fit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 0 0;
  min-width: 0;
}

.right-fit-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 32px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  overflow: hidden;
}

.right-fit-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #ffffff;
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 500ms cubic-bezier(0.42, 0, 1, 1);
  z-index: 0;
}

.right-fit-item-num {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 24px;
  font-weight: 300;
  line-height: 1.5;
  color: #ffffff;
  transition: color 180ms ease;
}

.right-fit-item-text {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
  transition: color 180ms ease;
}

.right-fit-item:hover {
}

.right-fit-item:hover::before {
  transform: scaleY(1);
}

.right-fit-item:hover .right-fit-item-num,
.right-fit-item:hover .right-fit-item-text {
  color: #000000;
}

/* 最后板块：Let's Connect */
.section-connect {
  margin-top: 240px;
  padding: 0 var(--site-inline) 40px;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.connect-content {
  display: flex;
  flex-direction: column;
  gap: 64px;
  width: 100%;
}

.connect-title {
  margin: 0;
  font-size: clamp(120px, 11.6vw, 222px);
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-transform: capitalize;
}

.connect-title span {
  display: block;
}

.connect-email {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: #ffffff;
}

.connect-email-label {
  color: rgba(255, 255, 255, 0.65);
}

.connect-email-link {
  color: #ffffff;
  text-decoration: none;
}

.connect-email-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.connect-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.connect-divider {
  width: 100%;
  height: 1px;
  background: var(--site-divider-color);
}

.connect-copyright {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
  text-align: center;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  :root {
    --header-h: 88px;
  }

  .banner-sphere {
    width: clamp(180px, 24vw, 260px);
    opacity: 0.78;
  }

  .header {
    padding: 20px 24px;
  }

  .nav-links {
    gap: 20px;
    font-size: 16px;
  }

  .nav {
    gap: 20px;
  }

  .right-fit-lead {
    font-size: 40px;
    width: min(520px, 100%);
  }

  .right-fit-item-text {
    font-size: 18px;
  }

  .section-connect {
    margin-top: 240px;
  }

  .connect-title {
    font-size: clamp(100px, 16vw, 180px);
  }
}

@media (max-width: 768px) {
  :root {
    --header-h: 64px;
  }

  .header {
    flex-wrap: nowrap;
    padding: 16px 20px;
    background: transparent;
  }

  .header.is-menu-open {
    z-index: 1200;
    background: #000000;
  }

  body.is-mobile-menu-open {
    overflow: hidden;
  }

  .logo,
  .logo img {
    width: 32px;
    height: 32px;
  }

  .header.is-menu-open .logo img {
    filter: invert(1);
  }

  .logo,
  .lang-toggle,
  .mobile-nav-toggle {
    position: relative;
    z-index: 3;
  }

  .brand {
    position: static;
    order: 3;
    flex-basis: 100%;
    text-align: center;
    transform: none;
    margin-top: 8px;
  }

  .nav {
    margin-left: auto;
    flex-wrap: nowrap;
    gap: 12px;
  }

  .nav-links {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 18px;
    padding: calc(var(--header-h) + 54px) 20px 40px;
    background: #000000;
    border-top: 0;
    font-size: 24px;
    line-height: 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-18px);
    clip-path: inset(0 0 100% 0);
    transition:
      clip-path 520ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 240ms ease,
      visibility 0s linear 520ms,
      transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .header.is-menu-open .nav-links {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
    transition:
      clip-path 520ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 220ms ease,
      visibility 0s,
      transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .nav-links a {
    width: 100%;
    padding: 0 0 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-weight: 300;
    letter-spacing: 0.02em;
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity 360ms ease,
      transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .header.is-menu-open .nav-links a {
    opacity: 1;
    transform: translateY(0);
  }

  .header.is-menu-open .nav-links a:nth-child(1) {
    transition-delay: 140ms;
  }

  .header.is-menu-open .nav-links a:nth-child(2) {
    transition-delay: 200ms;
  }

  .header.is-menu-open .nav-links a:nth-child(3) {
    transition-delay: 260ms;
  }

  .header.is-menu-open .nav-links a:nth-child(4) {
    transition-delay: 320ms;
  }

  .separator {
    display: none;
  }

  .lang-toggle {
    font-size: 14px;
    gap: 8px;
  }

  .lang-btn {
    font-size: 14px;
  }

  .header.is-menu-open .lang-btn {
    color: rgba(255, 255, 255, 0.45);
  }

  .header.is-menu-open .lang-btn.is-active {
    color: #ffffff;
  }

  .header.is-menu-open .lang-divider {
    color: rgba(255, 255, 255, 0.45);
  }

  .mobile-nav-toggle {
    display: inline-flex;
    width: 32px;
    height: 32px;
    border-radius: 16px;
  }

  .header.is-menu-open .mobile-nav-toggle {
    border-color: rgba(255, 255, 255, 0.28);
  }

  .header.is-menu-open .mobile-nav-toggle span {
    background: #ffffff;
  }

  .site-intro-skip {
    top: 24px;
    right: 20px;
  }

  .site-intro-line--primary {
    font-size: clamp(30px, 9vw, 42px);
  }

  .site-intro-line--support {
    margin-top: 32px;
    font-size: 16px;
  }

  .site-intro-footer {
    left: 20px;
    right: 20px;
    bottom: 24px;
    gap: 14px;
    font-size: 11px;
  }

  .banner {
    --mobile-banner-media-h: calc(100vw * 1080 / 607);
    aspect-ratio: 607 / 1080;
    grid-template-rows: auto;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .banner-img {
    grid-row: 1;
    height: auto;
    object-fit: contain;
    object-position: center top;
  }

  .banner-sphere {
    top: calc(var(--mobile-banner-media-h) * 0.47);
    left: 68%;
    width: clamp(132px, 44vw, 172px);
    opacity: 0.78;
  }

  .banner-creativity-wrap {
    grid-row: 1;
    align-items: flex-start;
    padding-top: 90px;
  }

  .banner-creativity-text {
    width: auto;
    max-width: calc(100% - 32px);
    font-size: clamp(30px, 8.8vw, 42px);
    line-height: 1.1;
    white-space: nowrap;
    -webkit-text-stroke-width: 1.6px;
  }

  .banner-role {
    right: auto;
    left: 50%;
    bottom: 24px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0;
    width: max-content;
    max-width: calc(100% - 32px);
    text-align: center;
    white-space: nowrap;
    transform: translateX(-50%);
  }

  .banner-role-line {
    font-size: 14px;
    white-space: nowrap;
  }

  .banner-role-line + .banner-role-line {
    margin-top: 0;
  }

  .banner-role-line + .banner-role-line::before {
    content: ' / ';
  }

  .banner-down-cta {
    display: none;
  }

  .banner-down-icon {
    width: 28px;
    height: 28px;
  }

  .banner-down-text {
    display: none;
  }

  .banner-hairline-wrap {
    display: none;
  }

  .section-welcome {
    margin-top: 36px;
  }

  .welcome-lead-line {
    font-size: clamp(28px, 8vw, 48px);
  }

  .welcome-desc {
    font-size: 18px;
  }

  .welcome-brand-logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 24px;
  }

  .whatido-block-header {
    min-height: 120px;
    flex-wrap: wrap;
    padding: 28px 12px 28px 0;
  }

  .whatido-bars {
    width: auto;
    max-width: 100%;
  }

  .whatido-head-left {
    gap: 24px;
  }

  .whatido-block-title {
    font-size: 24px;
  }

  .whatido-block-desc {
    font-size: 18px;
  }

  .whatido-panel {
    padding: 0 0 32px 0;
  }

  .whatido-index {
    font-size: 24px;
  }

  .right-fit-content {
    flex-direction: column;
    gap: 48px;
  }

  .right-fit-lead {
    width: 100%;
    font-size: clamp(32px, 8vw, 48px);
  }

  .right-fit-item-num {
    font-size: 18px;
  }

  .right-fit-item-text {
    font-size: 18px;
  }

  .whatido-tags {
    gap: 12px;
  }

  .whatido-tag {
    height: 36px;
    padding: 6px 16px;
    font-size: 14px;
  }

  .whatido-head-right {
    display: none;
  }

  .section-portfolio .portfolio-item {
    min-height: 120px;
  }

  .portfolio-item-trigger {
    min-height: 120px;
    gap: 20px;
    padding: 28px 0;
  }

  .portfolio-item.is-open .portfolio-item-trigger {
    min-height: 120px;
  }

  .portfolio-item-icon {
    width: 28px;
    height: 28px;
    font-size: 18px;
  }

  .portfolio-item-text {
    font-size: 24px;
  }

  .portfolio-panel {
    padding: 0 0 40px;
    gap: 16px;
  }

  .portfolio-exp-layout {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 28px;
  }

  .portfolio-exp-photo {
    width: 220px;
  }

  .portfolio-exp-timeline {
    margin-left: 34px;
    padding-left: 24px;
  }

  .portfolio-exp-item::before {
    left: -32px;
    top: 14px;
  }

  .portfolio-exp-item::after {
    left: -25px;
    background:
      linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.18) 0,
        rgba(255, 255, 255, 0.18) 6px,
        transparent 6px,
        transparent 36px,
        rgba(255, 255, 255, 0.18) 36px,
        rgba(255, 255, 255, 0.18) 100%
      );
  }

  .portfolio-exp-item:first-child::after {
    background:
      linear-gradient(
        to bottom,
        transparent 0,
        transparent 36px,
        rgba(255, 255, 255, 0.18) 36px,
        rgba(255, 255, 255, 0.18) 100%
      );
  }

  .portfolio-exp-time {
    font-size: 18px;
  }

  .portfolio-exp-head {
    gap: 16px;
  }

  .portfolio-exp-index {
    font-size: 24px;
  }

  .portfolio-exp-company {
    font-size: 24px;
  }

  .portfolio-exp-domain,
  .portfolio-exp-summary,
  .portfolio-exp-label,
  .portfolio-exp-list {
    font-size: 18px;
  }

  .portfolio-exp-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .portfolio-exp-photo {
    width: min(260px, 100%);
  }

  .stand-for-title {
    font-size: 24px;
  }

  .stand-for-watermark {
    top: -22px;
  }

  .portfolio-case {
    flex-direction: column;
    gap: 20px;
    border-radius: 16px;
    padding: 20px;
  }

  .portfolio-case-cover {
    width: 100%;
    min-width: 0;
    height: 180px;
  }

  .portfolio-case-cover-copy {
    top: 20px;
    gap: 4px;
    width: calc(100% - 24px);
  }

  .portfolio-case-cover-title {
    font-size: 18px;
  }

  .portfolio-case-cover-desc {
    display: none;
  }

  .portfolio-case-meta {
    min-height: auto;
    gap: 8px;
  }

  .portfolio-case-title {
    font-size: 24px;
  }

  .portfolio-case-desc,
  .portfolio-case-more {
    font-size: 20px;
  }

  .right-fit-lead {
    margin: 16px 0 32px;
    font-size: clamp(28px, 8vw, 48px);
  }

  html[lang="zh-CN"] .right-fit-lead {
    font-size: 24px;
    line-height: 1.45;
  }

  .right-fit-item {
    padding: 24px 0 24px 18px;
    font-size: 18px;
  }

  .section-connect {
    margin-top: 160px;
    padding-bottom: 32px;
  }

  .connect-title {
    font-size: clamp(72px, 18vw, 120px);
    line-height: 0.98;
  }

  .connect-copyright {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
  }

  .section-connect,
  .connect-content {
    gap: 48px;
  }

  .connect-email {
    font-size: 16px;
  }
}