/* ============================================
 * 丐帮 · Karot 设计系统直接套用 v6
 * _block 边框系统 / 切角 / 蜂巢 / 粘性卡片 / 聊天FAQ
 * ============================================ */

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

/* ============================================
 * 全局变量 — 直接套用 Karot
 * ============================================ */

:root {
  --color_orange: #f4a443;
  --color_yellow: #efc64b;
  --color_black: #1a1a1a;
  --color_white: #fafafa;
  --color_dark: #222;

  --scale: 1;
  --margin_x: calc(var(--scale) * 6rem);
  --margin_y: calc(var(--scale) * 5rem);

  --s_br: calc(var(--scale) * 1rem);
  --m_br: calc(var(--scale) * 1.5rem);
  --l_br: calc(var(--scale) * 2rem);

  --s_border: calc(var(--scale) * .1rem);
  --m_border: calc(var(--scale) * .2rem);
  --l_border: calc(var(--scale) * .3rem);

  --ease_in: cubic-bezier(.6, 0, .6, .2);
  --ease_out: cubic-bezier(.2, .6, .45, 1);
  --ease_inout: cubic-bezier(.6, 0, .3, 1);

  --xs_duration: .3s;
  --s_duration: .5s;
  --m_duration: .8s;
  --l_duration: 1s;

  --orange_glow: rgba(244, 164, 67, 0.35);
}

/* ============================================
 * 重置 — 套用 Karot 的 div:flex 全局规则
 * ============================================ */

* {
  margin: 0; padding: 0;
  font-size: 1vmin;
  box-sizing: border-box;
}

@media screen and (max-aspect-ratio: 1.8/1) { * { font-size: .9vmin; } }
@media screen and (max-aspect-ratio: 1.6/1) { * { font-size: .8vmin; } }
@media screen and (max-aspect-ratio: 1.4/1) { * { font-size: .7vmin; } }
@media screen and (max-aspect-ratio: 1.2/1) { * { font-size: .6vmin; } }
@media screen and (max-aspect-ratio: 1/1)   { * { font-size: .55vmax; } }
@media screen and (max-aspect-ratio: .6/1)  { * { font-size: .51vmax; } }

p { -webkit-user-select: none; user-select: none; }
img { pointer-events: none; -webkit-user-select: none; user-select: none; }
div { display: flex; -webkit-user-select: none; user-select: none; }

body {
  background-color: var(--color_black);
  overflow-x: hidden;
  font-family: 'Rajdhani', 'Noto Sans SC', sans-serif;
  color: var(--color_white);
}

::-webkit-scrollbar { display: none; }
html { scrollbar-width: none; }

/* 字体类 */
.title-font { font-family: 'Orbitron', sans-serif; }
.content-font { font-family: 'Rajdhani', 'Noto Sans SC', sans-serif; }

._title_1 { font-family: 'Orbitron'; font-size: calc(var(--scale) * 2rem); }
._title_2 { font-family: 'Orbitron'; font-size: calc(var(--scale) * 5rem); }
._title_3 { font-family: 'Orbitron'; font-size: calc(var(--scale) * 7rem); }
._content_1 { font-family: 'Rajdhani'; font-size: calc(var(--scale) * 2rem); }
._content_2 { font-family: 'Rajdhani'; font-size: calc(var(--scale) * 3rem); }

/* ============================================
 * _block 边框系统 — Karot 核心设计
 * ::before = 橙色边框层, ::after = 深色填充层
 * ============================================ */

._block {
  --border: var(--m_border);
  --radius: 0;
  --gap: 0;
  z-index: 1;
}
._block::before {
  content: ""; position: absolute;
  width: 100%; height: 100%;
  border-radius: var(--radius);
  background-color: var(--color_orange);
  z-index: -1;
}
._block::after {
  content: ""; position: absolute;
  width: calc(100% - var(--border) * 2);
  height: calc(100% - var(--border) * 2);
  top: var(--border); left: var(--border);
  border-radius: calc(var(--radius) - var(--border));
  background-color: #2f2b1e;
  transition: background-color var(--m_duration) var(--ease_out);
  z-index: -1;
}
._block:hover::after { background-color: var(--color_orange); }

/* 切角类 — 直接套用 Karot clip-path */
._clip_left,  ._clip_left::before,  ._clip_left::after {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, calc(0% + var(--gap)) 100%, 0% calc(100% - var(--gap)));
}
._clip_right, ._clip_right::before, ._clip_right::after {
  clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - var(--gap)), calc(100% - var(--gap)) 100%, 0% 100%);
}
._clip_hexagon, ._clip_hexagon::before, ._clip_hexagon::after {
  clip-path: polygon(0% 50%, calc(0% + var(--gap)) 0%, calc(100% - var(--gap)) 0%, 100% 50%, calc(100% - var(--gap)) 100%, calc(0% + var(--gap)) 100%);
}

/* 动画初始态 */
._animation_move { transform: translateY(100%); }

/* ============================================
 * 背景 Three.js Canvas
 * ============================================ */

#three-canvas {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
}

#fallback-canvas {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
}

/* ============================================
 * 加载动画
 * ============================================ */

.loading {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  background: var(--color_white);
  transition: opacity .6s var(--ease_out), visibility .6s;
}
.loading.hide { opacity: 0; visibility: hidden; }
.loading-logo {
  width: 60px; height: 60px;
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background: var(--color_orange);
  animation: loading-spin 2s var(--ease_out) infinite;
}
@keyframes loading-spin {
  0%, 30% { transform: rotate(0); }
  55% { transform: rotate(180deg); }
  65% { transform: rotate(180deg); }
  90% { transform: rotate(360deg); }
  to { transform: rotate(360deg); }
}

/* ============================================
 * 导航栏 — 套用 Karot menu
 * ============================================ */

.menu {
  --scale: 1;
  position: fixed; top: var(--margin_y); left: 0;
  width: 100%; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
}

.menu_logo {
  position: absolute; left: var(--margin_x);
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; text-decoration: none;
}

.menu_logo_icon {
  width: calc(var(--scale) * 3rem); height: calc(var(--scale) * 3rem);
  object-fit: contain;
  filter: brightness(0) invert(1);
  transition: transform var(--s_duration) var(--ease_out);
  display: flex; align-items: center; justify-content: center;
}
.menu_logo:hover .menu_logo_icon { transform: rotate(135deg) translateY(-10%) translateX(2%); }

.menu_logo_text {
  font-family: 'Orbitron'; font-weight: 900;
  font-size: calc(var(--scale) * 2.5rem);
  color: var(--color_white); letter-spacing: .05em;
}

.menu_nav {
  display: flex; align-items: center; gap: 0;
  height: calc(var(--scale) * 2.5rem);
}
.menu_nav_selections {
  margin: 0 calc(var(--scale) * .5rem);
  cursor: pointer;
  color: var(--color_white);
  font-family: 'Rajdhani'; font-weight: 600;
  font-size: calc(var(--scale) * 2rem);
  transition: color var(--xs_duration) var(--ease_out);
  text-decoration: none;
}
.menu_nav_selections:hover { color: var(--color_orange); }
.menu_nav_selections.active { color: var(--color_orange); }

.menu_links {
  position: absolute; right: var(--margin_x);
  display: flex; align-items: center; gap: calc(var(--scale) * 2rem);
}

.menu_links_button {
  --border: var(--m_border);
  --radius: var(--s_br);
  --gap: calc(var(--scale) * 1.5rem);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--scale) * 1rem) calc(var(--scale) * 1.5rem);
  cursor: pointer; text-decoration: none;
  font-family: 'Rajdhani'; font-weight: 600;
  font-size: calc(var(--scale) * 2rem);
  color: var(--color_orange);
  transition: color var(--m_duration) var(--ease_out);
}
.menu_links_button:hover { color: var(--color_black); }

/* ============================================
 * 双段箭头按钮 — 套用 Karot welcome_content_button
 * ============================================ */

.welcome_button {
  position: relative;
  display: inline-flex; align-items: stretch;
  height: calc(var(--scale) * 6rem);
  overflow: hidden;
  cursor: pointer; text-decoration: none;
}

.welcome_button_text {
  --border: var(--m_border);
  --radius: 0;
  --gap: calc(var(--scale) * 1.5rem);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 100%;
  padding: 0 calc(var(--scale) * 2.5rem);
  margin-right: calc(var(--scale) * -2rem);
  pointer-events: none; z-index: 2;
  font-family: 'Rajdhani'; font-weight: 700;
  font-size: calc(var(--scale) * 2rem);
  color: var(--color_orange);
  transition: color var(--m_duration) var(--ease_out);
}

.welcome_button_arrow {
  --border: var(--m_border);
  --radius: 0;
  --gap: calc(var(--scale) * 1.5rem);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 100%;
  padding: 0 calc(var(--scale) * 3rem);
  pointer-events: none; z-index: 1;
}
.welcome_button_arrow::after { background-color: var(--color_black); }

.welcome_button_arrow svg {
  width: calc(var(--scale) * 2rem);
  overflow: visible; position: relative; z-index: 1;
}
.welcome_button_arrow svg polyline {
  fill: none; stroke: var(--color_white);
  stroke-width: var(--l_border);
  transition: transform var(--s_duration) var(--ease_out);
}
.welcome_button_arrow svg polyline:nth-child(2) {
  stroke: var(--color_orange);
  transform: translate(-250%);
}

.welcome_button:hover .welcome_button_text::after { background-color: var(--color_orange); }
.welcome_button:hover .welcome_button_text { color: var(--color_black); }
.welcome_button:hover .welcome_button_arrow svg polyline:nth-child(1) { transform: translate(250%); }
.welcome_button:hover .welcome_button_arrow svg polyline:nth-child(2) { transform: translate(0); }

/* ============================================
 * Hero / Welcome
 * ============================================ */

.welcome {
  --scale: 1;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 0 var(--margin_x);
}

.welcome_container {
  display: flex; align-items: center;
  width: 100%; max-width: 1600px;
}

.welcome_content {
  flex-direction: column; justify-content: start;
  flex: 0 0 55%;
  z-index: 2;
}

.welcome_content_subtitle {
  display: flex; align-items: center;
  margin-bottom: calc(var(--scale) * 1rem);
  overflow: hidden;
}
.welcome_content_subtitle div { display: flex; align-items: center; }
.welcome_content_subtitle div div {
  width: calc(var(--scale) * .5rem); height: calc(var(--scale) * .5rem);
  background: var(--color_orange); border-radius: 50%;
  margin-right: calc(var(--scale) * 1rem);
}
.welcome_content_subtitle p {
  color: var(--color_white);
  font-family: 'Rajdhani'; font-weight: 500;
  font-size: calc(var(--scale) * 2rem);
}

.welcome_content_title {
  flex-direction: column; justify-content: start;
  margin-bottom: calc(var(--scale) * 5rem);
}
.welcome_content_title div { overflow: hidden; }
.welcome_content_title div p {
  font-family: 'Orbitron'; font-weight: 900;
  font-size: calc(var(--scale) * 7rem);
  color: var(--color_white);
  white-space: nowrap;
  line-height: 1.05;
}
.welcome_content_title div:nth-of-type(1) p { color: var(--color_orange); }

.welcome_content_introduce {
  width: calc(var(--scale) * 45rem);
  font-family: 'Rajdhani'; font-weight: 500;
  font-size: calc(var(--scale) * 2.2rem);
  color: var(--color_white);
  line-height: 1.6;
  margin-bottom: calc(var(--scale) * 4rem);
}

.welcome_content_buttons {
  display: flex; align-items: center; gap: calc(var(--scale) * 3rem);
}
.welcome_content_buttons a {
  font-family: 'Rajdhani'; font-weight: 600;
  font-size: calc(var(--scale) * 2rem);
  color: var(--color_white);
  text-decoration: none;
  transition: color var(--s_duration) var(--ease_out);
}
.welcome_content_buttons a:hover { color: var(--color_orange); }

/* 右侧视觉区 */
.welcome_canvas {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 45%;
}
.welcome_canvas_inner {
  width: 100%; aspect-ratio: 1;
  position: relative;
}

/* 右侧 SCROLL 指示 */
.scrolltip {
  position: fixed; right: var(--margin_x); bottom: var(--margin_y);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  z-index: 50;
}
.scrolltip p {
  font-family: 'Rajdhani'; font-weight: 500;
  font-size: calc(var(--scale) * 1.5rem);
  color: var(--color_white);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: .2em;
}
.scrolltip_line {
  width: 1px; height: 50px;
  background: linear-gradient(to bottom, var(--color_orange), transparent);
}

/* ============================================
 * Intro / About — 套用 Karot intro 布局
 * 左侧滚动线 + 标题 + 右侧视觉
 * ============================================ */

.intro {
  --scale: 1;
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--scale) * 20rem) var(--margin_x);
  min-height: 100vh;
}

.intro_main {
  position: relative;
  display: flex; align-items: center;
  margin-right: calc(var(--scale) * 20rem);
  z-index: 2;
}

.intro_scrollline {
  display: flex; flex-direction: column; align-items: center;
  height: 100%; margin-right: calc(var(--scale) * 3rem);
}
.intro_scrollline_line {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 600px; width: calc(var(--scale) * 2.5rem);
}
.intro_scrollline_line svg {
  position: relative; width: 100%; height: 100%;
  fill: none; stroke: var(--color_orange);
  stroke-width: var(--s_border); stroke-linecap: round;
  stroke-dasharray: 0 calc(var(--scale) * 1rem);
  animation: scrollline-dash 2s linear infinite;
}
@keyframes scrollline-dash { 0% { stroke-dashoffset: 0; } to { stroke-dashoffset: calc(var(--scale) * -20rem); } }

.intro_scrollline_dot {
  position: absolute;
  top: calc(50% - calc(var(--scale) * .75rem));
  width: calc(var(--scale) * 1.5rem); height: calc(var(--scale) * 1.5rem);
  background: var(--color_orange);
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  transition: top .1s linear;
}

/* 时间轴节点标记 */
.intro_scrollline_node {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
}
.intro_scrollline_node p {
  margin-top: calc(var(--scale) * 1.8rem);
  font-family: 'Orbitron'; font-weight: 700;
  font-size: calc(var(--scale) * 1.2rem);
  color: var(--color_white);
  opacity: 0.4;
  transition: opacity var(--s_duration) var(--ease_out), color var(--s_duration) var(--ease_out);
  white-space: nowrap;
}
.intro_scrollline_node::before {
  content: '';
  width: calc(var(--scale) * .8rem);
  height: calc(var(--scale) * .8rem);
  background: var(--color_black);
  border: 2px solid var(--color_orange);
  border-radius: 50%;
  transition: transform var(--s_duration) var(--ease_out), background-color var(--s_duration) var(--ease_out);
}
.intro_scrollline_node.node_active p {
  opacity: 1;
  color: var(--color_orange);
}
.intro_scrollline_node.node_active::before {
  background: var(--color_orange);
  transform: scale(1.3);
}

/* 多内容区切换 */
.intro_content_section {
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--m_duration) var(--ease_out), transform var(--m_duration) var(--ease_out);
}
.intro_content_section.section_visible {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

.intro_content { flex-direction: column; justify-content: start; }

.intro_content_subtitle {
  display: flex; align-items: center;
  margin-bottom: calc(var(--scale) * 1rem);
  overflow: hidden;
}
.intro_content_subtitle div { display: flex; align-items: center; }
.intro_content_subtitle div div {
  width: calc(var(--scale) * .5rem); height: calc(var(--scale) * .5rem);
  background: var(--color_orange); border-radius: 50%;
  margin-right: calc(var(--scale) * 1rem);
}
.intro_content_subtitle p {
  color: var(--color_white);
  font-family: 'Rajdhani'; font-weight: 500;
  font-size: calc(var(--scale) * 2rem);
}

.intro_content_title {
  flex-direction: column; justify-content: start;
  margin-bottom: calc(var(--scale) * 5rem);
}
.intro_content_title div { overflow: hidden; }
.intro_content_title div p {
  font-family: 'Orbitron'; font-weight: 900;
  font-size: calc(var(--scale) * 7rem);
  color: var(--color_white);
  line-height: 1.05;
  white-space: nowrap;
}
.intro_content_title div:nth-of-type(1) p { color: var(--color_orange); }

.intro_content_introduce {
  width: calc(var(--scale) * 45rem);
  font-family: 'Rajdhani', 'Noto Sans SC'; font-weight: 500;
  font-size: calc(var(--scale) * 2.2rem);
  color: var(--color_white);
  line-height: 1.6;
}

/* 右侧 logo 堆叠 */
.intro_logobox {
  position: relative;
  width: calc(var(--scale) * 35rem); height: calc(var(--scale) * 50rem);
  z-index: 1;
}
.intro_logobox_logo {
  position: absolute; width: 100%;
  will-change: transform;
  z-index: calc(4 - var(--i));
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background: var(--color_orange);
  opacity: calc(1 - var(--i) * 0.2);
  transform: translateY(calc(40% * var(--i)));
}
.intro_logobox_logo:nth-child(1) { height: 100%; }
.intro_logobox_logo:nth-child(2) { height: 85%; top: 7.5%; left: 7.5%; width: 85%; }
.intro_logobox_logo:nth-child(3) { height: 70%; top: 15%; left: 15%; width: 70%; }
.intro_logobox_logo:nth-child(4) { height: 55%; top: 22.5%; left: 22.5%; width: 55%; }

/* ============================================
 * Features — 橙色区域 + 横向滚动（CSS sticky + GSAP x 位移）
 * ============================================ */

/* 父级 wrapper — 提供滚动空间 */
.features_wrapper {
  position: relative;
  width: 100%;
}

.features {
  --scale: 1;
  position: sticky; top: 0;
  display: flex; justify-content: start; align-items: center;
  width: 100%; height: 100vh;
  background: var(--color_orange);
  overflow: hidden;
  --l_w: 25vw; --s_w: 18vw; --h: 3vw; --a_h: calc(var(--scale) * 10rem);
  clip-path: polygon(0% calc(0% + var(--a_h)), calc(100% - var(--l_w)) calc(0% + var(--a_h)), calc(100% - var(--s_w)) calc(var(--h) + var(--a_h)), 100% calc(var(--h) + var(--a_h)), 100% 100%, 0% 100%);
}

/* 蜂巢背景 */
.features_background {
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.features_background svg {
  width: 110%; height: 110%;
}
.features_background_block {
  fill: var(--color_orange);
  stroke: var(--color_white);
  stroke-width: var(--m_border);
  stroke-opacity: .3;
  transition: fill 0s var(--ease_out) .5s;
}
.features_background_block:hover, .features_background_block:active {
  fill: var(--color_yellow);
  transition: fill 0s var(--ease_out);
}

/* 横向滚动主体 — GSAP 驱动 x 位移 */
.features_main {
  position: relative;
  display: flex; align-items: center;
  margin-left: calc(var(--scale) * 20rem);
  top: calc(var(--scale) * 5rem);
  pointer-events: none;
  will-change: transform;
}

.features_main_title {
  display: flex; align-items: center;
  margin-right: calc(var(--scale) * 50rem);
}
.features_main_title svg {
  height: calc(var(--scale) * 6rem);
  fill: var(--color_black);
  margin-right: calc(var(--scale) * 1rem);
  overflow: visible;
}
.features_main_title svg g {
  transform-origin: center;
  animation: hex-rotate 2s var(--ease_out) infinite;
}
@keyframes hex-rotate { 0% { transform: rotate(0); } to { transform: rotate(60deg); } }

.features_main_title p {
  font-family: 'Orbitron'; font-weight: 900;
  font-size: calc(var(--scale) * 5rem);
  color: var(--color_black);
}

/* 卡片 — 套用 Karot 尺寸 50rem × 60rem */
.features_main_card {
  position: relative;
  flex-direction: column; justify-content: start; align-items: center;
  width: calc(var(--scale) * 50rem); height: calc(var(--scale) * 60rem);
  background: var(--color_black);
  /* 切角 — 底部左对角切 */
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, calc(var(--scale) * 5rem) 100%, 0% calc(100% - calc(var(--scale) * 5rem)));
}
/* 最后一个卡片右侧留白 — 提供滚动余量 */
.features_main .features_main_card:last-child {
  margin-right: calc(50vw + calc(var(--scale) * 5rem));
}

/* 卡片遮罩用 clip-path 代替 SVG */
.fmc_mask { display: none; }

.fmc_icon {
  position: relative;
  height: calc(var(--scale) * 18rem);
  margin: calc(var(--scale) * 7rem) 0;
  z-index: 1;
  display: flex; align-items: center; justify-content: center;
}
.fmc_icon_inner {
  width: calc(var(--scale) * 12rem); height: calc(var(--scale) * 12rem);
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background: var(--color_orange);
  display: flex; align-items: center; justify-content: center;
}
.fmc_icon_inner::after {
  content: ''; width: 40%; height: 40%;
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background: var(--color_black);
}

.fmc_title {
  font-family: 'Orbitron'; font-weight: 700;
  width: calc(var(--scale) * 40rem);
  font-size: calc(var(--scale) * 3rem);
  color: var(--color_orange);
  margin-bottom: calc(var(--scale) * 1rem);
  z-index: 1; text-align: center;
}
.fmc_content {
  width: calc(var(--scale) * 40rem);
  color: var(--color_white);
  font-family: 'Rajdhani', 'Noto Sans SC'; font-weight: 500;
  font-size: calc(var(--scale) * 2rem);
  z-index: 1; text-align: center; line-height: 1.5;
}

.fmc_points {
  position: absolute; left: calc(var(--scale) * 5rem); bottom: calc(var(--scale) * 3rem);
  display: flex; z-index: 1;
}
.fmc_points div {
  width: calc(var(--scale) * .5rem); height: calc(var(--scale) * .5rem);
  background: var(--color_white); border-radius: 50%;
  margin-right: calc(var(--scale) * 1rem);
}
.fmc_points_select {
  background: var(--color_orange) !important;
}

/* scrollline — 在卡片之间，六边形圆点+连线 */
.features_main_scrollline {
  display: flex; align-items: center;
  margin: 0 calc(var(--scale) * 1rem);
}
.features_main_scrollline div {
  width: calc(var(--scale) * 1.5rem); height: calc(var(--scale) * 1.5rem);
  background: var(--color_black);
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  flex-shrink: 0;
}
.features_main_scrollline svg {
  width: calc(var(--scale) * 50rem); height: calc(var(--scale) * .2rem);
  fill: none; stroke: var(--color_black);
  stroke-width: var(--l_border); stroke-linecap: round;
  stroke-dasharray: 0 calc(var(--scale) * 1rem);
  animation: scrollline-dash 2s linear infinite;
}

/* ============================================
 * Components / 创始人 — 套用 Karot 粘性交替卡片
 * ============================================ */

.components {
  --scale: 1;
  flex-direction: column; position: relative; width: 100%;
}

.components_card {
  position: sticky; top: 0;
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 100vh;
  background: var(--color_black);
  overflow: hidden;
}
.components_card:nth-child(2n) { background: var(--color_dark); }

/* 角部遮罩 */
.components_card_mask {
  position: absolute; width: 25%; z-index: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  background: var(--color_black);
}
.components_card:nth-child(2n) .components_card_mask { background: var(--color_dark); }
.components_card .components_card_mask:first-of-type {
  top: 0; left: 0; transform: scale(-1) translateY(100%);
}
.components_card .components_card_mask:last-of-type {
  bottom: 0; right: 0; transform: translateY(100%);
}

.ccm_main {
  position: relative;
  display: flex; align-items: center;
  margin: calc(var(--scale) * 20rem) 0;
  z-index: 2;
}

.ccm_content {
  position: relative;
  flex-direction: column;
  width: calc(var(--scale) * 70rem);
  justify-content: start; align-items: start;
  margin-right: calc(var(--scale) * 15rem);
}

.ccm_content_title { overflow: hidden; margin-bottom: calc(var(--scale) * 2rem); }
.ccm_content_title p {
  font-family: 'Orbitron'; font-weight: 900;
  font-size: calc(var(--scale) * 7rem);
  color: var(--color_orange);
  transform: translateY(100%);
  transition: transform var(--m_duration) var(--ease_inout);
  line-height: 1.05;
}

.ccm_content_subtitle { overflow: hidden; margin-bottom: calc(var(--scale) * 3rem); }
.ccm_content_subtitle p {
  font-family: 'Rajdhani', 'Noto Sans SC'; font-weight: 600;
  font-size: calc(var(--scale) * 3rem);
  color: var(--color_white);
  transform: translateY(100%);
  transition: transform var(--l_duration) var(--ease_inout);
  line-height: 1.4;
}

.ccm_content_desc {
  font-family: 'Rajdhani', 'Noto Sans SC'; font-weight: 500;
  font-size: calc(var(--scale) * 2rem);
  color: var(--color_white); opacity: .7;
  max-width: calc(var(--scale) * 55rem);
  line-height: 1.6;
  margin-bottom: calc(var(--scale) * 3rem);
}

.ccm_content_show .ccm_content_title p,
.ccm_content_show .ccm_content_subtitle p { transform: translateY(0); }

.ccm_content_tip {
  position: absolute; bottom: calc(var(--scale) * -5rem); left: 0;
  display: flex; align-items: center;
  overflow: hidden;
}
.ccm_content_tip div {
  display: flex; align-items: center;
  transform: translateY(100%);
  transition: transform var(--m_duration) var(--ease_inout) .3s;
}
.ccm_content_show .ccm_content_tip div { transform: translateY(0); }
.ccm_content_tip p {
  font-family: 'Rajdhani'; font-weight: 600;
  font-size: calc(var(--scale) * 1.5rem);
  color: var(--color_white);
  margin-right: calc(var(--scale) * 3rem);
}
.ccm_content_tip_number { color: var(--color_orange) !important; }

/* 右侧动画区 */
.ccm_animation {
  position: relative;
  width: calc(var(--scale) * 40rem); height: calc(var(--scale) * 50rem);
  display: flex; align-items: center; justify-content: center;
}
.ccm_animation_hex {
  width: calc(var(--scale) * 30rem); height: calc(var(--scale) * 30rem);
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background: var(--color_orange);
  display: flex; align-items: center; justify-content: center;
  animation: hex-float 4s var(--ease_inout) infinite;
}
@keyframes hex-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}
.ccm_animation_hex::after {
  content: ''; width: 50%; height: 50%;
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background: var(--color_black);
}
.ccm_animation_hex:nth-child(2) {
  position: absolute; width: 20rem; height: 20rem;
  top: 10%; right: 5%; opacity: .4;
  animation-delay: -2s;
}

/* 进入传送门按钮 */
.ccm_button {
  --border: var(--m_border);
  --radius: 0;
  --gap: calc(var(--scale) * 1.5rem);
  position: relative;
  display: inline-flex; align-items: stretch;
  text-decoration: none; cursor: pointer;
  height: calc(var(--scale) * 5rem);
}
.ccm_button_text {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  padding: 0 calc(var(--scale) * 2.5rem);
  margin-right: calc(var(--scale) * -2rem);
  font-family: 'Rajdhani'; font-weight: 700;
  font-size: calc(var(--scale) * 2rem);
  color: var(--color_orange);
  transition: color var(--m_duration) var(--ease_out);
  pointer-events: none;
}
.ccm_button_arrow {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 0 calc(var(--scale) * 2.5rem);
  pointer-events: none;
}
.ccm_button_arrow::after { background: var(--color_black); }
.ccm_button_arrow svg {
  width: calc(var(--scale) * 2rem); position: relative; z-index: 1;
  overflow: visible;
}
.ccm_button_arrow svg polyline {
  fill: none; stroke: var(--color_white);
  stroke-width: var(--l_border);
  transition: transform var(--s_duration) var(--ease_out);
}
.ccm_button_arrow svg polyline:nth-child(2) {
  stroke: var(--color_orange); transform: translate(-250%);
}
.ccm_button:hover .ccm_button_text { color: var(--color_black); }
.ccm_button:hover .ccm_button_text::after { background: var(--color_orange); }
.ccm_button:hover .ccm_button_arrow svg polyline:nth-child(1) { transform: translate(250%); }
.ccm_button:hover .ccm_button_arrow svg polyline:nth-child(2) { transform: translate(0); }

/* ============================================
 * Showcase — 作品展示区
 * ============================================ */

.showcase {
  --scale: 1;
  flex-direction: column; align-items: center;
  width: 100%;
  padding: calc(var(--scale) * 20rem) var(--margin_x);
  background-color: var(--color_dark);
  position: relative; z-index: 10;
}

.showcase_title {
  flex-direction: column; align-items: center;
  margin-bottom: calc(var(--scale) * 10rem);
}
.showcase_title div { overflow: hidden; }
.showcase_title div p {
  font-family: 'Orbitron'; font-weight: 900;
  font-size: calc(var(--scale) * 7rem);
  line-height: 1.05;
}
.showcase_title div:nth-child(1) p { color: var(--color_white); }
.showcase_title div:nth-child(2) p { color: var(--color_orange); }

.showcase_grid {
  display: flex; flex-wrap: wrap;
  justify-content: center; gap: calc(var(--scale) * 3rem);
  width: 100%; max-width: 1200px;
}

.showcase_item {
  --border: var(--m_border);
  --radius: var(--m_br);
  --gap: calc(var(--scale) * 2rem);
  position: relative;
  flex-direction: column;
  width: calc(var(--scale) * 35rem);
  min-height: calc(var(--scale) * 25rem);
  padding: calc(var(--scale) * 3rem);
  cursor: pointer;
}
.showcase_item::after { background-color: var(--color_black); }
.showcase_item:hover::after { background-color: #2a2520; }

.showcase_item_icon {
  width: calc(var(--scale) * 5rem); height: calc(var(--scale) * 5rem);
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background: var(--color_orange);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: calc(var(--scale) * 2rem);
}
.showcase_item_icon::after {
  content: ''; width: 40%; height: 40%;
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background: var(--color_black);
}

.showcase_item_title {
  font-family: 'Orbitron'; font-weight: 700;
  font-size: calc(var(--scale) * 2.5rem);
  color: var(--color_orange);
  margin-bottom: calc(var(--scale) * 1rem);
  position: relative; z-index: 1;
}
.showcase_item_desc {
  font-family: 'Rajdhani', 'Noto Sans SC'; font-weight: 500;
  font-size: calc(var(--scale) * 1.8rem);
  color: var(--color_white); opacity: .7;
  line-height: 1.5;
  position: relative; z-index: 1;
}
.showcase_item_tag {
  position: absolute; top: calc(var(--scale) * 2rem); right: calc(var(--scale) * 2rem);
  font-family: 'Rajdhani'; font-weight: 600;
  font-size: calc(var(--scale) * 1.2rem);
  color: var(--color_orange); opacity: .5;
  z-index: 1;
}

/* ============================================
 * FAQ — 套用 Karot 聊天式 Q&A
 * ============================================ */

.questions {
  --scale: 1;
  flex-direction: column; position: relative;
  align-items: center; width: 100%;
  padding: calc(var(--scale) * 20rem) var(--margin_x);
  background-color: var(--color_black);
  z-index: 10;
}

.questions_content {
  flex-direction: column; align-items: center;
  margin-bottom: calc(var(--scale) * 15rem);
}

.questions_content_subtitle {
  display: flex; align-items: center;
  margin-bottom: calc(var(--scale) * 1rem);
  overflow: hidden;
}
.questions_content_subtitle p {
  color: var(--color_white);
  font-family: 'Rajdhani'; font-weight: 500;
  font-size: calc(var(--scale) * 2rem);
  margin: 0 calc(var(--scale) * 1rem);
}
.questions_content_subtitle p span { color: var(--color_orange); }

.questions_content_title { overflow: hidden; }
.questions_content_title p {
  font-family: 'Orbitron'; font-weight: 900;
  font-size: calc(var(--scale) * 7rem);
  color: var(--color_white);
  /* 3D 立体文字阴影 — 套用 Karot 原版 */
  text-shadow:
    calc(var(--scale) * .3rem) calc(var(--scale) * .3rem) 0 rgba(255,255,255,0.15),
    calc(var(--scale) * .6rem) calc(var(--scale) * .6rem) 0 rgba(255,255,255,0.1),
    calc(var(--scale) * .9rem) calc(var(--scale) * .9rem) 0 rgba(255,255,255,0.05);
}
.questions_content_title_select p {
  color: var(--color_orange);
  text-shadow:
    calc(var(--scale) * .3rem) calc(var(--scale) * .3rem) 0 rgba(244,164,67,0.3),
    calc(var(--scale) * .6rem) calc(var(--scale) * .6rem) 0 rgba(244,164,67,0.2),
    calc(var(--scale) * .9rem) calc(var(--scale) * .9rem) 0 rgba(244,164,67,0.1);
}

.questions_main {
  flex-direction: column; position: relative;
  width: calc(var(--scale) * 95rem); max-width: 100%;
}

.qmq {
  display: flex; align-items: flex-end; justify-content: space-between;
  width: 100%; margin-bottom: calc(var(--scale) * 5rem);
  gap: calc(var(--scale) * 2rem);
}
.qmq_question { justify-content: end; }
.qmq_answer { justify-content: start; margin-bottom: calc(var(--scale) * 8rem); }

/* FAQ 可折叠交互 */
.qmq_question {
  cursor: pointer;
  transition: transform var(--xs_duration) var(--ease_out);
}
.qmq_question:hover { transform: translateX(-6px); }
.qmq_question_bubble { transition: background-color var(--s_duration) var(--ease_out); }
.qmq_question:hover .qmq_question_bubble::after { background-color: var(--color_orange); }
.qmq_question:hover .qmq_question_bubble p { color: var(--color_black); }

/* 答案默认收起 */
.qmq_answer {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-bottom: 0 !important;
  transition: max-height var(--m_duration) var(--ease_out),
              opacity var(--s_duration) var(--ease_out),
              margin-bottom var(--m_duration) var(--ease_out);
}
.qmq_answer.faq_open {
  max-height: 400px;
  opacity: 1;
  margin-bottom: calc(var(--scale) * 5rem) !important;
}

/* 分隔线跟随答案收起 */
.questions_main_line {
  max-height: 60px;
  opacity: 0.6;
  overflow: hidden;
  transition: max-height var(--m_duration) var(--ease_out), opacity var(--s_duration) var(--ease_out), margin-bottom var(--m_duration) var(--ease_out);
}
.questions_main_line.faq_hidden {
  max-height: 0;
  opacity: 0;
  margin-bottom: 0 !important;
}

/* 展开指示器 */
.qmq_question_bubble p { position: relative; }
.qmq_question_bubble p::after {
  content: '+';
  position: absolute;
  right: calc(var(--scale) * -3rem);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color_orange);
  font-size: calc(var(--scale) * 2rem);
  transition: transform var(--s_duration) var(--ease_out);
}
.qmq_question.faq_active .qmq_question_bubble p::after {
  transform: translateY(-50%) rotate(45deg);
}

/* 头像图标 — 六边形 */
.qmq_avatar {
  width: calc(var(--scale) * 6rem); height: calc(var(--scale) * 6rem);
  flex-shrink: 0;
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  display: flex; align-items: center; justify-content: center;
}
.qmq_avatar::after {
  content: ''; width: 45%; height: 45%;
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}
.qmq_avatar_question {
  background: var(--color_orange);
}
.qmq_avatar_question::after { background: var(--color_black); }
.qmq_avatar_answer {
  background: var(--color_white);
}
.qmq_avatar_answer::after { background: var(--color_orange); }

.qmq_question_bubble {
  --border: var(--m_border);
  --radius: var(--m_br);
  --gap: calc(var(--scale) * 2rem);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  max-width: calc(var(--scale) * 55rem);
  padding: calc(var(--scale) * 2rem) calc(var(--scale) * 5rem);
  pointer-events: none;
}
.qmq_question_bubble::after { background-color: var(--color_black); }
.qmq_question_bubble p {
  font-family: 'Rajdhani', 'Noto Sans SC'; font-weight: 600;
  font-size: calc(var(--scale) * 2.5rem);
  color: var(--color_orange);
}

.qmq_answer_bubble {
  --border: var(--m_border);
  --radius: var(--m_br);
  --gap: calc(var(--scale) * 2rem);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  max-width: calc(var(--scale) * 55rem);
  padding: calc(var(--scale) * 2rem) calc(var(--scale) * 5rem);
  pointer-events: none;
  background-color: var(--color_white);
  border-radius: var(--m_br);
  clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - var(--gap)), calc(100% - var(--gap)) 100%, 0% 100%);
}
.qmq_answer_bubble p {
  font-family: 'Rajdhani', 'Noto Sans SC'; font-weight: 500;
  font-size: calc(var(--scale) * 2rem);
  color: var(--color_black);
}

/* 分隔线 */
.questions_main_line {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: calc(var(--scale) * 8rem);
}
.questions_main_line div {
  width: 100%; height: var(--s_border);
  background: var(--color_white);
  -webkit-mask-image: linear-gradient(90deg, transparent 10%, #000);
  mask-image: linear-gradient(90deg, transparent 10%, #000);
  opacity: .6;
}
.questions_main_line div:last-child { transform: scaleX(-1); }
.questions_main_line p {
  color: var(--color_orange);
  font-family: 'Rajdhani'; font-weight: 600;
  font-size: calc(var(--scale) * 2rem);
  margin: 0 calc(var(--scale) * 3rem);
  white-space: nowrap;
}

/* ============================================
 * Footer CTA — 套用 Karot 白色对角区域
 * ============================================ */

.feeter {
  --scale: 1;
  position: relative; width: 100%;
  height: calc(var(--scale) * 50rem);
  background: var(--color_white);
  overflow: hidden;
  --l_w: 25vw; --s_w: 18vw; --h: 3vw;
  clip-path: polygon(0% 0%, calc(100% - var(--l_w)) 0%, calc(100% - var(--s_w)) var(--h), 100% var(--h), 100% 100%, 0% 100%);
  display: flex; align-items: center; justify-content: center;
  z-index: 10;
}

.feeter_background {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; z-index: 0;
}
.feeter_background_circle {
  position: absolute;
  width: calc(var(--scale) * 100rem); height: calc(var(--scale) * 100rem);
  border: var(--m_border) dashed var(--color_black);
  border-radius: 50%;
  opacity: .15;
  animation: circle-rotate 30s linear infinite;
}
@keyframes circle-rotate { to { transform: rotate(360deg); } }

.feeter_background_hex {
  position: absolute;
  width: calc(var(--scale) * 8rem); height: calc(var(--scale) * 8rem);
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background: var(--color_orange);
  opacity: .1;
}
.feeter_background_hex:nth-child(2) { top: 15%; left: 20%; transform: rotate(15deg); }
.feeter_background_hex:nth-child(3) { top: 20%; right: 15%; transform: rotate(-20deg); width: 5rem; height: 5rem; }
.feeter_background_hex:nth-child(4) { bottom: 15%; left: 25%; transform: rotate(30deg); width: 6rem; height: 6rem; }
.feeter_background_hex:nth-child(5) { bottom: 20%; right: 20%; transform: rotate(-10deg); }

.feeter_content {
  flex-direction: column; position: relative;
  align-items: center; z-index: 1;
}
.feeter_content p { color: var(--color_black); text-align: center; }
.feeter_content p:nth-child(1) {
  font-family: 'Rajdhani', 'Noto Sans SC'; font-weight: 500;
  font-size: calc(var(--scale) * 2.5rem);
  margin-bottom: calc(var(--scale) * 1rem);
}
.feeter_content p:nth-child(2) {
  font-family: 'Orbitron'; font-weight: 900;
  font-size: calc(var(--scale) * 7rem);
  margin-bottom: calc(var(--scale) * 3rem);
  text-transform: lowercase;
}

.feeter_content_button {
  --border: var(--m_border);
  --radius: 0;
  --gap: calc(var(--scale) * 1.5rem);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--scale) * 1.5rem) calc(var(--scale) * 4rem);
  cursor: pointer; text-decoration: none;
}
.feeter_content_button::after { background-color: #f9f5e8; }
.feeter_content_button:hover::after { background-color: var(--color_orange); }
.feeter_content_button p {
  font-family: 'Orbitron'; font-weight: 700;
  font-size: calc(var(--scale) * 2.5rem);
  color: var(--color_black);
  margin-right: calc(var(--scale) * 2rem);
  transition: color var(--m_duration) var(--ease_out);
}
.feeter_content_button svg {
  position: relative; width: calc(var(--scale) * 3rem);
  fill: var(--color_orange);
  transition: fill var(--m_duration) var(--ease_out);
}
.feeter_content_button:hover svg { fill: var(--color_black); }

/* 底部版权 */
.feeter_copyright {
  position: absolute; bottom: calc(var(--scale) * 3rem);
  display: flex; justify-content: space-between; width: 100%;
  padding: 0 var(--margin_x);
  font-family: 'Rajdhani'; font-weight: 500;
  font-size: calc(var(--scale) * 1.5rem);
  color: var(--color_black); opacity: .5;
  z-index: 1;
}

/* ============================================
 * 滚动进度条
 * ============================================ */

.scroll_progress {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 2px; z-index: 200;
  background: transparent;
}
.scroll_progress_bar {
  height: 100%; background: var(--color_orange);
  transform-origin: left center; transform: scaleX(0);
  transition: transform .1s linear;
  box-shadow: 0 0 8px var(--orange_glow);
}

/* ============================================
 * 响应式
 * ============================================ */

@media screen and (max-aspect-ratio: 1/1) {
  .welcome_container { flex-direction: column; }
  .welcome_content { align-items: center; margin-bottom: calc(var(--scale) * 10rem); }
  .welcome_content_title { align-items: center; }
  .intro_main { margin-right: 0; flex-direction: column; }
  .intro_logobox { display: none; }
  .features_main { flex-direction: column; margin-left: 0; top: 0; }
  .features_main_title { margin-right: 0; margin-bottom: calc(var(--scale) * 5rem); }
  .features_main_card { width: 100%; max-width: calc(var(--scale) * 40rem); }
  .ccm_main { flex-direction: column; }
  .ccm_content { margin-right: 0; margin-bottom: calc(var(--scale) * 15rem); }
  .qmq { flex-direction: column; align-items: center; }
  .menu_nav { display: none; }
}

@media screen and (max-aspect-ratio: .6/1) {
  .welcome_content_introduce { width: 100%; text-align: center; }
  .questions_main { width: 90%; }
  .qmq_question_bubble, .qmq_answer_bubble { max-width: 90%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================
 * 导航栏滚动隐藏/显示
 * ============================================ */

.menu {
  transition: transform var(--m_duration) var(--ease_out), opacity var(--s_duration) var(--ease_out);
}
.menu.menu_hidden {
  transform: translateY(-150%);
  opacity: 0;
}

/* ============================================
 * 返回顶部按钮
 * ============================================ */

.back-to-top {
  position: fixed;
  bottom: calc(var(--scale) * 5rem);
  left: var(--margin_x);
  width: calc(var(--scale) * 5rem);
  height: calc(var(--scale) * 5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.8);
  transition: opacity var(--s_duration) var(--ease_out),
              transform var(--s_duration) var(--ease_out),
              visibility var(--s_duration);
  cursor: pointer;
}
.back-to-top.back_visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.back-to-top_inner {
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background: var(--color_orange);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--s_duration) var(--ease_out);
}
.back-to-top:hover .back-to-top_inner { transform: scale(1.1); }
.back-to-top_inner::after {
  content: '';
  width: 40%;
  height: 40%;
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background: var(--color_black);
}
.back-to-top svg {
  position: absolute;
  width: 45%;
  height: 45%;
  fill: none;
  stroke: var(--color_white);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
  z-index: 1;
  pointer-events: none;
}

/* ============================================
 * 移动端汉堡菜单
 * ============================================ */

.menu_hamburger {
  display: none;
  position: absolute;
  right: var(--margin_x);
  width: calc(var(--scale) * 4rem);
  height: calc(var(--scale) * 4rem);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--scale) * .5rem);
  cursor: pointer;
  z-index: 10001;
}
.menu_hamburger span {
  width: 70%;
  height: calc(var(--scale) * .3rem);
  background: var(--color_white);
  transition: transform var(--s_duration) var(--ease_out), opacity var(--xs_duration);
}
.menu_hamburger.menu_open span:nth-child(1) { transform: translateY(calc(var(--scale) * .8rem)) rotate(45deg); }
.menu_hamburger.menu_open span:nth-child(2) { opacity: 0; }
.menu_hamburger.menu_open span:nth-child(3) { transform: translateY(calc(var(--scale) * -.8rem)) rotate(-45deg); }

/* 移动端展开的导航面板 */
.menu_nav_mobile {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100vh;
  background: var(--color_black);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--scale) * 4rem);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--m_duration) var(--ease_out), visibility var(--m_duration);
}
.menu_nav_mobile.menu_open {
  opacity: 1;
  visibility: visible;
}
.menu_nav_mobile a {
  font-family: 'Orbitron'; font-weight: 700;
  font-size: calc(var(--scale) * 4rem);
  color: var(--color_white);
  text-decoration: none;
  transition: color var(--xs_duration);
}
.menu_nav_mobile a:hover { color: var(--color_orange); }

@media screen and (max-aspect-ratio: 1/1) {
  .menu_hamburger { display: flex; }
  .menu_links { display: none; }
  .menu_nav { display: none; }
}

/* ============================================
 * Showcase 卡片 hover 增强
 * ============================================ */

.showcase_item {
  transition: transform var(--s_duration) var(--ease_out);
}
.showcase_item:hover {
  transform: translateY(-8px);
}
.showcase_item_icon {
  transition: transform var(--m_duration) var(--ease_out);
}
.showcase_item:hover .showcase_item_icon {
  transform: rotate(180deg) scale(1.1);
}

/* ============================================
 * 创始人卡片视差增强
 * ============================================ */

.ccm_animation_hex {
  transition: transform var(--m_duration) var(--ease_out);
}
.components_card:hover .ccm_animation_hex:nth-child(1) {
  transform: translateY(-5px) scale(1.05);
}
.components_card:hover .ccm_animation_hex:nth-child(2) {
  transform: scale(1.1);
}