/* Updated: 2026-02-08 22:40 - Glassmorphism effect for Mingfei Bi title */

/* =======================================================
*
* 	Template Style 
*	Edit this section
*<font color="#d9534f"><font color="#17A689">
* ======================================================= */

/* 全局CSS变量 */
:root {
  --border-radius: 8px;

  /* Layout content width */
  --layout-content-max-width: 800px;
  --layout-content-mid-width: 600px;
  --layout-content-padding: 24px;
  
  /* Color tokens */
  --color-bg: #0f0f0f;

  --color-text-primary: var(--color-system-warm-muted-100);
  --color-text-secondary: var(--color-system-warm-muted-400);
  --color-text-muted: var(--color-system-warm-muted-400);

 /* Primary teal  */
  --mingfei-teal: var(--color-teal-500);
  --paragraph-text-color: var(--color-text-secondary);
  --color-teal-500: #00b89a;


  /* Project / GenAI */
  --color-project-genai: #19B819;
  --color-project-genai-0: #F4FBF4;
  --color-project-genai-100: #E1F4E1;
  --color-project-genai-200: #C4E9C4;
  --color-project-genai-300: #93E693;
  --color-project-genai-400: #34D034;
  --color-project-genai-500: #19B819;
  --color-project-genai-600: #188618;
  --color-project-genai-700: #105B10;
  --color-project-genai-800: #083008;
  --color-project-genai-900: #041604;
  --color-project-genai-1000: #031103;

  /* Project / Glass Box */
  --color-project-glassbox: #9B7CFF;
  --color-project-glassbox-0: #F5F3FC;
  --color-project-glassbox-100: #E4DEF7;
  --color-project-glassbox-200: #C9BEEF;
  --color-project-glassbox-300: #A086F3;
  --color-project-glassbox-400: #BDABF7;
  --color-project-glassbox-500: #9B7CFF;
  --color-project-glassbox-600: #8968EA;
  --color-project-glassbox-700: #7654D4;
  --color-project-glassbox-800: #6140B6;
  --color-project-glassbox-900: #4C2E91;
  --color-project-glassbox-1000: #38206E;

  /* Project / Billing */
  --color-project-billing: #FFB84D;
  --color-project-billing-0: #FCF8F3;
  --color-project-billing-100: #F7EDDE;
  --color-project-billing-200: #EFDBBE;
  --color-project-billing-300: #F3C886;
  --color-project-billing-400: #F4CA8B;
  --color-project-billing-500: #FFB84D;
  --color-project-billing-600: #F6A223;
  --color-project-billing-700: #DD8809;
  --color-project-billing-800: #AC6A07;
  --color-project-billing-900: #855206;
  --color-project-billing-1000: #5E3A04;

  /* Project / Data */
  --color-project-data: #3AA0FF;
  --color-project-data-0: #F3F8FC;
  --color-project-data-100: #DEEBF7;
  --color-project-data-200: #BED7EF;
  --color-project-data-300: #86BFF3;
  --color-project-data-400: #7AB8F2;
  --color-project-data-500: #3AA0FF;
  --color-project-data-600: #1187F5;
  --color-project-data-700: #086DCB;
  --color-project-data-800: #06539A;
  --color-project-data-900: #053E72;
  --color-project-data-1000: #03284B;

  /* Project / Mobile */
  --color-project-mobile: #FF5C8A;
  --color-project-mobile-0: #FCF3F5;
  --color-project-mobile-100: #F7DEE5;
  --color-project-mobile-200: #EFBECC;
  --color-project-mobile-300: #F386A5;
  --color-project-mobile-400: #F599B3;
  --color-project-mobile-500: #FF5C8A;
  --color-project-mobile-600: #F63269;
  --color-project-mobile-700: #EB0A49;
  --color-project-mobile-800: #BA083A;
  --color-project-mobile-900: #93062E;
  --color-project-mobile-1000: #6C0422;

  /* Project / Secondary Green */
  --color-project-secondary-green: #66CC66;
  --color-project-secondary-green-0: #F5FAF5;
  --color-project-secondary-green-100: #E4F1E4;
  --color-project-secondary-green-200: #CAE2CA;
  --color-project-secondary-green-300: #A2D8A2;
  --color-project-secondary-green-400: #93D293;
  --color-project-secondary-green-500: #66CC66;
  --color-project-secondary-green-600: #45BA45;
  --color-project-secondary-green-700: #379537;
  --color-project-secondary-green-800: #297029;
  --color-project-secondary-green-900: #1E521E;
  --color-project-secondary-green-1000: #133413;

  /* System / Warning */
  --color-system-warning: #FF5A4F;
  --color-system-warning-0: #FCF3F3;
  --color-system-warning-100: #F7E0DE;
  --color-system-warning-200: #EFC1BE;
  --color-system-warning-300: #F38D86;
  --color-system-warning-400: #F4948D;
  --color-system-warning-500: #FF5A4F;
  --color-system-warning-600: #F63225;
  --color-system-warning-700: #DF1709;
  --color-system-warning-800: #AE1207;
  --color-system-warning-900: #870E06;
  --color-system-warning-1000: #5F0A04;

  /* System / Muted */
  --color-system-muted: #8C8C94;
  --color-system-muted-0: #F7F7F8;
  --color-system-muted-100: #EAEAEB;
  --color-system-muted-200: #D5D5D8;
  --color-system-muted-300: #BABABF;
  --color-system-muted-400: #A6A6AD;
  --color-system-muted-500: #8C8C94;
  --color-system-muted-600: #72727B;
  --color-system-muted-700: #5A5A60;
  --color-system-muted-800: #414146;
  --color-system-muted-900: #2D2D31;
  --color-system-muted-1000: #1A1A1C;

  /* System Warm Muted */
--color-system-warm-muted-0: #F8F7F7;
--color-system-warm-muted-100: #EBEBEA;
--color-system-warm-muted-200: #D8D6D5;
--color-system-warm-muted-300: #BFBCBA;
--color-system-warm-muted-400: #ACA8A5;
--color-system-warm-muted-500: #938E8A;
--color-system-warm-muted-600: #7A7571;
--color-system-warm-muted-700: #5F5B59;
--color-system-warm-muted-800: #454240;
--color-system-warm-muted-900: #302E2C;
--color-system-warm-muted-1000: #1D1C1B;

/* Surface / glass */
--color-surface-glass: rgba(255, 255, 255, 0.05);
--color-surface-glass-subtle: rgba(255, 255, 255, 0.01);
--color-border-glass: rgba(255, 255, 255, 0.10);
--color-border-glass-subtle: rgba(255, 255, 255, 0.03);

/* Contrast text */
--color-text-on-accent: #ffffff;
--color-text-on-dark: var(--color-text-primary);

/* White alpha / highlight */
--color-white-alpha-05: rgba(255, 255, 255, 0.05);
--color-white-alpha-10: rgba(255, 255, 255, 0.10);
--color-white-alpha-20: rgba(255, 255, 255, 0.20);
--color-white-alpha-40: rgba(255, 255, 255, 0.40);
--color-white-alpha-50: rgba(255, 255, 255, 0.50);
--color-white-alpha-70: rgba(255, 255, 255, 0.70);
--color-white-alpha-80: rgba(255, 255, 255, 0.80);
--color-white-alpha-90: rgba(255, 255, 255, 0.90);

/* Shadow */
--shadow-card: 0 4px 16px rgba(0, 0, 0, 0.4);
--shadow-card-strong: 0 4px 16px rgba(0, 0, 0, 0.5);

  
  /* Badge gradient colors */
  --gradient-harsh-purple: rgb(115, 0, 229);
  --gradient-harsh-lime: rgb(0, 112, 0);
  --gradient-harsh-magenta: rgb(178, 0, 143);
  --gradient-transparent-magenta: rgba(178, 0, 143, 0);
  
  /* Badge gradient background - 双层渐变叠加 */
  --badge-gradient: linear-gradient(196.29deg, var(--gradient-transparent-magenta) 29.188%, var(--gradient-harsh-magenta) 107.2%), 
                    linear-gradient(163.46deg, var(--gradient-harsh-purple) 29.387%, var(--gradient-harsh-lime) 107.44%);

  /* ── Typography tokens ── */

  /* Font family stacks */
  --font-display: "Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: "Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-meta: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  
 /* Base spacing scale */
--space-xxs: 4px;
--space-xs: 8px;
--space-sm: 12px;
--space-md: 16px;
--space-lg: 20px;
--space-xl: 24px;
--space-2xl: 32px;
--space-3xl: 40px;
--space-4xl: 60px;
--space-5xl: 80px;

/* Project page spacing */
--project-page-top-padding: var(--space-4xl);

--project-section-to-section-gap: var(--space-5xl);
--project-title-to-body-gap: var(--space-xl);
--project-subtitle-to-body-gap: var(--space-lg);
--project-paragraph-to-paragraph-gap: var(--space-lg);

--project-text-to-image-gap: var(--space-xl);
--project-image-to-caption-gap: var(--space-sm);
--project-image-to-next-text-gap: var(--space-2xl);

--project-info-to-content-gap: var(--space-2xl);
--project-tag-to-content-gap: var(--space-lg);

--project-list-top-gap: var(--space-md);
--project-list-to-next-content-gap: var(--space-xl);
--project-list-item-to-item-gap: var(--space-sm);

--project-nested-list-top-gap: var(--space-xs);
--project-nested-list-to-next-item-gap: var(--space-sm);
--project-nested-list-item-to-item-gap: var(--space-xs);

--project-mobile-content-padding: var(--space-lg);
--project-tablet-content-padding: var(--space-xl);
  
  /* Display / XL */
  --type-display-xl-size: 96px;
  --type-display-xl-line: 96px;
  --type-display-xl-weight: 400;
  --type-display-xl-spacing: -2.5px;

  /* Display / L */
  --type-display-l-size: 56px;
  --type-display-l-line: 62px;
  --type-display-l-weight: 400;
  --type-display-l-spacing: -1.5px;

  /* Heading / M */
  --type-heading-m-size: 38px;
  --type-heading-m-line: 44px;
  --type-heading-m-weight: 400;
  --type-heading-m-spacing: -0.8px;

  /* Heading / S */
  --type-heading-s-size: 24px;
  --type-heading-s-line: 31px;
  --type-heading-s-weight: 400;
  --type-heading-s-spacing: -0.2px;

    /* Card / Title */
  --type-card-title-size: 28px;
  --type-card-title-line: 38px;
  --type-card-title-weight: 400;
  --type-card-title-spacing: -0.6px;

  /* Body / Lead */
  --type-body-lead-size: 20px;
  --type-body-lead-line: 30px;
  --type-body-lead-weight: 400;
  --type-body-lead-spacing: 0;

  /* Body / Regular */
  --type-body-regular-size: 16px;
  --type-body-regular-line: 25px;
  --type-body-regular-weight: 400;
  --type-body-regular-spacing: 0;

  /* Body / Compact */
  --type-body-compact-size: 15px;
  --type-body-compact-line: 22px;
  --type-body-compact-weight: 400;
  --type-body-compact-spacing: 0;

  /* Meta / XS */
  --type-meta-xs-size: 12px;
  --type-meta-xs-line: 16px;
  --type-meta-xs-weight: 400;
  --type-meta-xs-spacing: 0;

  /* Meta / S */
  --type-meta-s-size: 13px;
  --type-meta-s-line: 18px;
  --type-meta-s-weight: 400;
  --type-meta-s-spacing: 0;
}

/* Mobile typography overrides */
@media (max-width: 767px) {
  :root {
    --type-display-xl-size: 52px;
    --type-display-xl-line: 54px;
    --type-display-xl-spacing: -1.2px;

    --type-display-l-size: 34px;
    --type-display-l-line: 39px;
    --type-display-l-spacing: -0.7px;

    --type-heading-m-size: 28px;
    --type-heading-m-line: 34px;
    --type-heading-m-spacing: -0.4px;

    --type-heading-s-size: 21px;
    --type-heading-s-line: 28px;
    --type-heading-s-spacing: -0.1px;

    --type-body-lead-size: 17px;
    --type-body-lead-line: 26px;

    --type-body-regular-size: 16px;
    --type-body-regular-line: 27px;

    --type-meta-s-size: 12px;
    --type-meta-s-line: 17px;

    --type-body-compact-size: 14px;
    --type-body-compact-line: 21px;

    --type-meta-xs-size: 11px;
    --type-meta-xs-line: 15px;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><circle cx="24" cy="24" r="12" fill="%2300b89a"/></svg>') 24 24, auto;
}

/* Custom cursor label typography */
[data-cursor-shape] {
  font-family: var(--font-meta);
  font-size: var(--type-meta-s-size);
  line-height: var(--type-meta-s-line);
  font-weight: 600;
  letter-spacing: var(--type-meta-s-spacing);
}

html {
  width: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  color: var(--color-text-secondary);
  /* 深黑背景 */
  background: #0f0f0f;
  height: 100%;
  position: relative;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
}

a {
  color: var(--mingfei-teal);
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
a:hover, a:active, a:focus {
  color: var(--mingfei-teal);
  outline: none;
}

p {
  margin-bottom: 1.5em;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-text-primary);
  font-family: var(--font-heading);
}

::-webkit-selection {
  color: var(--color-text-on-accent);
  background: var(--mingfei-teal);
}

::-moz-selection {
  color: var(--color-text-on-accent);
  background: var(--mingfei-teal);
}

::selection {
  color: var(--color-text-on-accent);
  background: var(--mingfei-teal);
}

#fh5co-header {
  position: fixed;
  z-index: 99;
  width: calc(100% - 40px);
  left: 20px;
  right: 20px;
  opacity: 1;
  top: 20px;
  transition: opacity 0.3s ease;
  /* 深色毛玻璃效果 */
  background: var(--color-surface-glass);
  backdrop-filter: blur(32px) saturate(150%);
  -webkit-backdrop-filter: blur(32px) saturate(150%);
  border: 1px solid var(--color-border-glass);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  border-radius: var(--border-radius);
}
#fh5co-header .navbar {
  padding-bottom: 0;
  margin-bottom: 0;
}
#fh5co-header #navbar .navbar-right {
  margin-right: 0;
}
@media screen and (max-width: 992px) {
  #fh5co-header #navbar .navbar-right {
    margin-right: -15px;
  }
}
@media screen and (max-width: 992px) {
  #fh5co-header #navbar li a {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}
#fh5co-header #navbar li a span {
  position: relative;
  display: block;
  padding-bottom: 2px;
  color: var(--mingfei-teal);
  font-size: var(--type-body-compact-size);
  line-height: var(--type-body-compact-line);
  font-weight: var(--type-body-compact-weight);
  letter-spacing: var(--type-body-compact-spacing);
}
#fh5co-header #navbar li a:hover {
  color: var(--mingfei-teal);
}
#fh5co-header #navbar li.active a {
  background: transparent;
  background: none;
}
@media screen and (max-width: 480px) {
  #fh5co-header #navbar li.active a {
    color: var(--mingfei-teal);
  }
}

@media screen and (max-width: 480px) {
  #fh5co-header #navbar li.active a span:before {
    background-color: transparent;
  }
}
#fh5co-header #navbar li.call-to-action a {
  border: 2px solid var(--mingfei-teal);
  padding: 5px 10px 3px 10px;
  margin: 12px 0 0 0px;
  -webkit-border-radius: var(--border-radius);
  -moz-border-radius: var(--border-radius);
  -ms-border-radius: var(--border-radius);
  border-radius: var(--border-radius);
}
#fh5co-header #navbar li.call-to-action a:hover {
  background-color: var(--mingfei-teal);
  color: var(--mingfei-teal);
}
#fh5co-header #navbar li.call-to-action a span:before {
  background-color: transparent;
}
#fh5co-header .navbar-brand {
  float: left;
  display: block;
  font-size: 20px;
  font-weight: 700;
  padding-left: 0;
  color: #74889e;
  text-transform: uppercase;
  letter-spacing: 3px;
}
#fh5co-header .navbar-brand > span {
  color: var(--color-text-primary);
  font-size: 40px;
}
#fh5co-header .navbar-brand1 {
  float: left;
  display: block;
  font-size: 24px;
  font-weight: 700;
  padding-left: 0;
  color: #74889e;
  text-transform: uppercase;
  letter-spacing: 3px;
  padding: 17.5px 15px;
  line-height: 20px;
  height: 55px;

}
#fh5co-header .navbar-brand1 > span {
  color: var(--color-text-primary);
  font-size: 24px;
}

#fh5co-header .navbar-brand2 {
  float: left;
  display: block;
  font-size: 20px;
  font-weight: 700;
  padding-left: 0;
  color: var(--mingfei-teal);
  text-transform: uppercase;
  padding: 17.5px 15px;
  line-height: 20px;
  height: 55px;
}
#fh5co-header .navbar-brand2 > span {
  color: var(--color-text-primary);
  font-size: 40px;
}
#fh5co-header .navbar-brand3 {
  float: left;
  display: block;
  font-size: 24px;
  font-weight: 700;
  padding-left: 0;
  color: var(--mingfei-teal);
  text-transform: uppercase;
  
  padding: 17.5px 15px;
  line-height: 20px;
  height: 55px;

}
#fh5co-header .navbar-brand3 > span {
  color: var(--color-text-primary);
  font-size: 24px;
}
@media screen and (max-width: 992px) {
  #fh5co-header .navbar-brand {
    padding-left: 10px !important;
    padding-right: 0 !important;
  }
}
#fh5co-header.navbar-fixed-top {
  position: fixed !important;
  width: calc(100% - 40px);
  left: 20px;
  right: 20px;
  /* 深色毛玻璃效果 */
  background: var(--color-surface-glass);
  backdrop-filter: blur(32px) saturate(150%);
  -webkit-backdrop-filter: blur(32px) saturate(150%);
  margin-top: 0px;
  top: 0;
  border: 1px solid var(--color-border-glass);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  border-radius: var(--border-radius);
}
#fh5co-header.navbar-fixed-top .navbar-brand {
  color: #74889e;
}
#fh5co-header.navbar-fixed-top #navbar li a {
  color: var(--color-white-alpha-50) !important;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
#fh5co-header.navbar-fixed-top #navbar li a:hover {
  color: var(--mingfei-teal);
}
#fh5co-header.navbar-fixed-top #navbar li.active a {
  color: var(--mingfei-teal) !important;
}
@media screen and (max-width: 768px) {
  #fh5co-header.navbar-fixed-top #navbar li.active a {
    color: var(--mingfei-teal) !important;
  }
}



@media screen and (max-width: 768px) {
  #fh5co-header.navbar-fixed-top #navbar li.active a span:before {
    background-color: transparent;
  }
}
#fh5co-header.navbar-fixed-top #navbar li.call-to-action a {
  border: 2px solid var(--mingfei-teal);
  padding: 5px 10px 3px 10px;
  margin: 12px 0 0 0px;
  -webkit-border-radius: var(--border-radius);
  -moz-border-radius: var(--border-radius);
  -ms-border-radius: var(--border-radius);
  border-radius: var(--border-radius);
}
#fh5co-header.navbar-fixed-top #navbar li.call-to-action a:hover {
  background-color: var(--mingfei-teal);
  color: var(--mingfei-teal) !important;
}
#fh5co-header.navbar-fixed-top #navbar li.call-to-action a span:before {
  background-color: transparent;
}
#fh5co-header .navbar-default {
  border: transparent;
  background: transparent;
  margin: 0;
  padding-right: 50px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  border-radius: 0px;
}
@media screen and (max-width: 768px) {
  #fh5co-header .navbar-default {
    margin-top: 0px;
    padding-right: 0px;
    padding-left: 0px;
  }
}
#fh5co-header .navbar-default .brand-slogan {
  margin: 28px 0 0 15px;
  float: left;
  letter-spacing: 2px;
  color: var(--color-text-secondary);
}
#fh5co-header .navbar-default .brand-slogan em {
  color: var(--mingfei-teal);
  font-style: normal;
}

/* ── Work dropdown menu ── */
:root {
  --work-menu-scroll-offset: 200px;
}

.work-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 15px;
}

.work-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  color: var(--mingfei-teal);
  font-size: var(--type-body-compact-size);
  line-height: var(--type-body-compact-line);
  font-weight: var(--type-body-compact-weight);
  letter-spacing: var(--type-body-compact-spacing);
}

.work-dropdown-arrow {
  width: 10px;
  height: 10px;
  background: currentColor;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  transition: transform 0.3s ease;
}

.work-dropdown.open .work-dropdown-arrow {
  transform: rotate(180deg);
}

.work-dropdown-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--color-surface-glass);
  backdrop-filter: blur(32px) saturate(150%);
  -webkit-backdrop-filter: blur(32px) saturate(150%);
  border: 1px solid var(--color-border-glass);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  border-radius: var(--border-radius);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  z-index: 100;
}

.work-dropdown.open .work-dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.work-menu-item {
  width: 36px;
  height: 36px;
  background: var(--mingfei-teal);
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  border: 2px solid transparent;
}

.work-menu-item span {
  font-family: var(--font-meta);
  font-size: var(--type-meta-s-size);
  line-height: 1;
  font-weight: 700;
  color: var(--color-text-on-accent);
}

.work-menu-item:hover {
  transform: scale(1.1);
}

.work-menu-item.active {
  background: var(--mingfei-teal);
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
}

.work-menu-item.active::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--border-radius);
  padding: 1.5px;
  background: conic-gradient(
    from var(--gradient-angle),
    rgba(255, 255, 255, 0.05) 0deg,
    rgba(255, 255, 255, 0.05) 60deg,
    rgba(255, 255, 255, 0.7) 120deg,
    rgba(255, 255, 255, 0.05) 180deg,
    rgba(255, 255, 255, 0.05) 240deg,
    rgba(255, 255, 255, 0.7) 300deg,
    rgba(255, 255, 255, 0.05) 360deg
  );
  -webkit-mask: conic-gradient(#000 0 0) content-box exclude, conic-gradient(#000 0 0);
  mask: conic-gradient(#000 0 0) content-box exclude, conic-gradient(#000 0 0);
  animation: border-rotate 4s linear infinite;
  pointer-events: none;
}

#fh5co-home {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 75vh;
}

/* Mingfei 渐变背景层 */
.mingfei-gradient-bg {
  width: 100%;
  height: 100%;
  background: linear-gradient(96deg, #0d2b1f 0%, #0a1a2e 26.85%, #12103a 59.66%, #1a0f2e 100%);
  background-size: 400% 400%;
  animation: mingfeiGradientMove 12s ease infinite;
}

/* Mingfei 深色渐变遮罩层 */
.mingfei-fade-overlay {
  width: 100%;
  height: 100%;
  background: radial-gradient(100% 140% at 60% -10%, rgba(15, 15, 15, 0) 0%, #0f0f0f 75%);
  padding-top: 60px;
}
#fh5co-home a {
  color: var(--color-white-alpha-80) !important;
  text-decoration: underline;
}
#fh5co-home a:hover {
  color: #fff;
  text-decoration: none;
}
#fh5co-home .gradient {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  background: transparent;
}
#fh5co-home, #fh5co-home .text-wrap {
  height: min(75vh, 600px);
}
#fh5co-home .text-wrap {
  display: table;
  width: 100%;
  height: 80vh;
  position: relative;
  z-index: 10; /* 确保文字容器在Canvas上方 */
}
#fh5co-home .text-inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  position: relative;
  z-index: 10; /* 确保文字在Canvas上方 */
}
/* Legacy hero typography - not used by current #hero-layout homepage hero */
#fh5co-home .text-inner h1 {
  font-family: var(--font-display);
  font-size: 120px;
  color: #1a1a2e;
  margin: 80px 0 20px 0;
  font-weight: 700;
  line-height: 1.2;
  padding-bottom: 10px;
  transition: all 0.5s ease;
}

/* Mingfei Bi标题渐变颜色 - 实色，无透明 */
#fh5co-home .text-inner h1.animated {
  background: linear-gradient(90deg,
    rgb(133, 52, 243),
    rgb(0, 102, 95),
    rgb(60, 92, 180));
  background-size: 100% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: none;
  text-shadow: none;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

/* Mingfei 渐变背景动画 */
@keyframes mingfeiGradientMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}





/* 隐藏指定大卡及对应 bar（保留 HTML，便于恢复） */
.section-hidden {
  display: none !important;
}

/* Glass Box Pattern Section */
#glass-box-pattern {
  /* 无背景色 - 使用body的白色背景 */
}

/* 第一张大卡收缩时：保证 section 至少 40+60+40=140px，上下 padding 不被压扁 */
#glass-box-pattern.glass-box-section-shrunk {
  min-height: 140px;
}

/* Glass Box Card - Fixed Top Version */
.glass-box-card-top {
  position: fixed;
  top: 78px;
  left: 20px;
  right: 20px;
  width: calc(100% - 40px);
  height: 60px;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 0 40px 0 20px; /* 左padding将由JavaScript动态计算 */
  /* 和top nav一样的毛玻璃效果 */
 background: var(--color-surface-glass);
  backdrop-filter: blur(32px) saturate(150%);
  -webkit-backdrop-filter: blur(32px) saturate(150%);
  /* 时间控制的fade-in动画 */
  transition: opacity 0.5s ease;
  border: 1px solid var(--color-border-glass);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  border-radius: var(--border-radius);
  transition: opacity 0.3s ease-out;
  opacity: 0;
  pointer-events: none;
}

.glass-box-top-number {
  width: 36px;
  height: 36px;
  background: var(--mingfei-teal);
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.glass-box-top-number span {
  font-family: var(--font-meta);
  font-size: var(--type-meta-s-size);
  font-weight: 700;
  color: var(--color-text-on-accent) !important;
  line-height: 1;
}

.glass-box-top-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.glass-box-top-title {
  font-family: var(--font-heading);
  font-size: var(--type-heading-s-size);
  line-height: var(--type-heading-s-line);
  font-weight: var(--type-heading-s-weight);
  letter-spacing: var(--type-heading-s-spacing);
  margin: 0;
  flex: 1;
}

.glass-box-top-title a {
  color: var(--color-text-primary);
  text-decoration: none;
}

.glass-box-top-title a:hover {
  cursor: pointer;
  color: var(--color-text-on-accent);
  background-color: rgb(36, 36, 36);
  text-decoration: none;
  -webkit-transition: 0.1s;
  -o-transition: 0.1s;
  transition: 0.1s;
}

.glass-box-top-readmore {
  font-family: var(--font-meta);
  font-size: var(--type-meta-s-size);
  line-height: var(--type-meta-s-line);
  font-weight: 600;
  letter-spacing: var(--type-meta-s-spacing);
  margin: 0;
  flex-shrink: 0;
}

.glass-box-top-readmore a {
  color: var(--mingfei-teal) !important;
  font-weight: 700 !important;
  text-decoration: none;
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
}

.glass-box-top-readmore a:hover {
  cursor: pointer;
  color: var(--color-text-on-accent) !important;
  background-color: var(--mingfei-teal);
  text-decoration: none;
  -webkit-transition: 0.1s;
  -o-transition: 0.1s;
  transition: 0.1s;
}

.glass-box-card {
  display: flex;
  flex-direction: column;
  width: calc(100% - 40px);
  margin: 0 20px;
  /* 整体毛玻璃效果和边框 */
  background: var(--color-surface-glass);
  position: relative;
  z-index: 1;
  backdrop-filter: blur(32px) saturate(150%);
  -webkit-backdrop-filter: blur(32px) saturate(150%);
  border: 1px solid var(--color-border-glass);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  border-radius: var(--border-radius);
  overflow: hidden; /* 确保子元素不超出圆角 */
  transition: height 1s ease, min-height 1s ease;
}

/* 当上方 project bar 出现时：视觉收成 bar（60px），布局高度由 JS 冻结为收缩前高度，不改变文档流 */
.glass-box-card.glass-box-card-shrunk {
  min-height: 60px; /* 仅保底，实际高度由 JS 设 style.height 冻结 */
  align-items: flex-start; /* 向左上角收拢，不居中，避免“左边中间”消失感 */
  overflow: hidden; /* 防止收缩后内容溢出产生残影 */
  /* placeholder 隐藏样式：空白区域不显示大卡的背景/边框/阴影 */
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.glass-box-card.glass-box-card-shrunk .glass-box-image {
  width: 0;
  min-width: 0;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: min-width 1s ease, max-width 1s ease, opacity 0.8s ease;
}

.glass-box-card.glass-box-card-shrunk .glass-box-content {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  padding: 0 40px;
  min-width: 0;
  max-height: 60px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: padding 0.8s ease, opacity 0.8s ease;
}

.glass-box-card.glass-box-card-shrunk .glass-box-text {
  flex-direction: row;
  align-items: flex-start;
  gap: 40px;
  flex: 1;
  min-width: 0;
  max-height: 60px;
  overflow: hidden;
}

/* 收缩后大卡内文字用 opacity 渐隐，与展开一致 0.8s */
.glass-box-card.glass-box-card-shrunk .glass-box-title-container,
.glass-box-card.glass-box-card-shrunk .glass-box-subtitle,
.glass-box-card.glass-box-card-shrunk .glass-box-category,
.glass-box-card.glass-box-card-shrunk .glass-box-description,
.glass-box-card.glass-box-card-shrunk .glass-box-description-container,
.glass-box-card.glass-box-card-shrunk .glass-box-title,
.glass-box-card.glass-box-card-shrunk .glass-box-readmore {
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}

.glass-box-image {
  width: 100%;
  height: 400px;
  flex-shrink: 0;
  border-radius: 0;
  overflow: hidden;
  position: relative;
}

/* 大卡左上角编号：与 bar 数字同款绿色方框，软编码由 JS 注入 */
.glass-box-card-number {
  display: none;
}

.glass-box-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.glass-box-content {
  flex: 0 0 auto;
  padding: 16px var(--layout-content-padding) 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.glass-box-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.glass-box-title-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.glass-box-title {
  font-family: var(--font-heading);
  font-size: var(--type-card-title-size);
  line-height: var(--type-card-title-line);
  font-weight: var(--type-card-title-weight);
  letter-spacing: var(--type-card-title-spacing);
  color: var(--color-text-primary) !important;
  margin: 0;
}

.glass-box-title a {
  color: var(--color-text-primary) !important;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.glass-box-title a:hover {
  opacity: 0.7;
  text-decoration: underline;
}

.glass-box-subtitle {
  font-family: var(--font-meta);
  font-size: var(--type-meta-s-size);
  line-height: var(--type-meta-s-line);
  font-weight: var(--type-meta-s-weight);
  letter-spacing: var(--type-meta-s-spacing);
  color: var(--mingfei-teal) !important;
  margin: 0;
}

.glass-box-description-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.glass-box-category {
  font-family: var(--font-meta);
  font-size: var(--type-meta-s-size);
  line-height: var(--type-meta-s-line);
  font-weight: var(--type-meta-s-weight);
  letter-spacing: var(--type-meta-s-spacing);
  color: var(--color-text-secondary) !important;
  margin: 0;
}

.glass-box-description,
.achievement-description {
  font-family: var(--font-body);
  font-size: var(--type-body-compact-size);
  line-height: var(--type-body-compact-line);
  font-weight: var(--type-body-compact-weight);
  letter-spacing: var(--type-body-compact-spacing);
  color: var(--color-text-secondary) !important;
}

.glass-box-description p {
  margin: 0 0 8px 0;
  color: var(--color-text-secondary) !important;
}

.glass-box-readmore {
  font-family: var(--font-meta);
  font-size: var(--type-meta-s-size);
  line-height: var(--type-meta-s-line);
  font-weight: 600;
  letter-spacing: var(--type-meta-s-spacing);
  color: var(--mingfei-teal) !important;
  margin: 0;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s ease;
  display: inline-block;
}

.glass-box-readmore:hover {
  opacity: 1;
  text-decoration: underline;
}

.glass-box-readmore a {
  background-color: transparent;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.glass-box-readmore a:hover {
  color: var(--color-text-on-accent) !important;
  background-color: var(--mingfei-teal) !important;
  text-decoration: none;
}

/* Glass Box 响应式设计 */

/* 小屏手机 - 640px以下 */
@media screen and (max-width: 640px) {
  .glass-box-card {
    width: calc(100% - 32px);
    margin: 0 16px;
  }
  
  .glass-box-image {
    height: auto;
    aspect-ratio: 2 / 1;
  }
  
  .glass-box-image img {
    height: 100%;
    position: static;
  }
  
  .glass-box-content {
    padding: 16px 20px;
  }
  
  .glass-box-title {
    font-size: var(--type-heading-s-size);
    line-height: var(--type-heading-s-line);
    letter-spacing: var(--type-heading-s-spacing);
  }
  
  .glass-box-card-top {
    width: calc(100% - 32px);
    left: 16px;
    right: 16px;
    padding: 0 20px;
    gap: 20px;
  }
  
  .glass-box-top-title {
    font-size: 18px;
  }
}

/* 平板 - 641px到1023px */
@media screen and (min-width: 641px) and (max-width: 1023px) {
  .glass-box-card {
    max-width: var(--layout-content-mid-width);
    margin: 0 auto;
  }
  
  .glass-box-content {
    padding: 24px 32px;
  }
  
  .glass-box-title {
    font-size: var(--type-heading-s-size);
    line-height: var(--type-heading-s-line);
    letter-spacing: var(--type-heading-s-spacing);
  }
}

/* 中等桌面 - 1024px到1279px */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .glass-box-card {
    max-width: var(--layout-content-max-width);
    margin: 0 auto;
  }
}

/* 大屏幕 - 1280px及以上 */
@media screen and (min-width: 1280px) {
  .glass-box-card {
    max-width: var(--layout-content-max-width);
    margin: 0 auto;
  }
  
  .glass-box-card-top {
    max-width: var(--layout-content-max-width);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: calc(100% - 40px);
  }
}

/* 页面不可见时暂停 hero 相关动画，降低后台 CPU 占用 */
body.hero-animations-paused .mingfei-gradient-bg,
body.hero-animations-paused #fh5co-home .text-inner h1.animated,
body.hero-animations-paused #genai-text.animated,
body.hero-animations-paused .bubble,
body.hero-animations-paused .bubble.purple,
body.hero-animations-paused .bubble.green,
body.hero-animations-paused .bubble.star {
  animation-play-state: paused;
}

/* 背景/文字渐变「休息」时段：播放一段时间后暂停，让 CPU 释放，再自动恢复 */
body.hero-animations-rest .mingfei-gradient-bg,
body.hero-animations-rest #fh5co-home .text-inner h1.animated,
body.hero-animations-rest #genai-text.animated {
  animation-play-state: paused;
}

/* 气泡容器（已禁用） */
.bubble-container {
  display: none;
}

/* 气泡动画（已禁用） */
.bubble {
  display: none;
}



/* Legacy hero typography - not used by current #hero-layout homepage hero */
#fh5co-home .text-inner h2 {
  font-family: var(--font-body);
  font-size: 23px;
  line-height: 30px;
  font-weight: 300;
  color: var(--color-text-secondary);
  margin: 0 0 60px 0;
  white-space: normal;
}

#fh5co-home .text-inner h2 span {
  white-space: nowrap;
}

/* GENAI文字样式 */
#genai-text {
  color: var(--color-text-secondary);
  transition: all 0.5s ease;
}

#genai-text.animated {
  /* Animated class removed - no styling applied */
}

#fh5co-home .text-inner .call-to-action {
  display: block;
  width: 100%;
}
#fh5co-home .text-inner .call-to-action a {
  width: 230px;
  display: inline-block;
  font-size: 20px;
  padding: 15px 0;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  margin-right: 10px;
}
#fh5co-home .text-inner .call-to-action a.demo {
  border: 2px solid #fff;
  text-decoration: none !important;
}
@media screen and (max-width: 768px) {
  #fh5co-home .text-inner .call-to-action a.demo {
    margin-bottom: 20px;
  }
}
#fh5co-home .text-inner .call-to-action a.demo:hover {
  background: rgba(255, 255, 255, 0.2);
}
#fh5co-home .text-inner .call-to-action a.download {
  border: 2px solid var(--mingfei-teal);
  background: var(--mingfei-teal);
  text-decoration: none !important;
}

#fh5co-services, #fh5co-testimony, #fh5co-explore, #fh5co-faq, #fh5co-team, #fh5co-trusted, #fh5co-footer {
  padding: 5em 0;
}
@media screen and (max-width: 768px) {
  #fh5co-services, #fh5co-testimony, #fh5co-explore, #fh5co-faq, #fh5co-team, #fh5co-trusted, #fh5co-footer {
    padding: 2em 0;
  }
}

#fh5co-work, #fh5co-counters {
  padding: 7em 0;
}
@media screen and (max-width: 768px) {
  #fh5co-work, #fh5co-counters {
    padding: 4em 0;
  }
}

.fh5co-explore {
  padding-bottom: 40px;
}

.fh5co-explore-bg-color {
  width: 100%;
  background: #fbfbfb;
  padding: 80px 0;
  margin-bottom: 0;
}

.work {
  margin-top: 30px;
  margin-bottom: 30px;
  padding : 80px 0 80px 0;
}
.work h4 {
  position: relative;
  font-family: var(--font-heading);
  font-weight:bold;
  font-size: 30px;
  color: var(--color-text-primary);
}

.work h4 a{
  position: relative;
  font-family: var(--font-heading);
  font-weight:bold;
  font-size: 30px;
  color:#333;
}
.work h4 a:hover{
 cursor: pointer;
 color:var(--color-text-on-accent);
 background-color: rgb(36, 36, 36);
 text-decoration: none;
 -webkit-transition: 0.1s;
  -o-transition: 0.1s;
  transition: 0.1s;
}

.work h5 {
   color: var(--mingfei-teal);
    font-family: var(--font-meta);
    font-weight: 700;
    font-size:16px;
    margin: -20px 0 30px 0;


}
.work h6{
    color: var(--color-text-secondary);
    font-family: var(--font-meta);
    font-weight: 700;
    font-size:16px;
    margin: 0px 0 5px 0;

}
.work p{
    color: rgb(36, 36, 36);
    font-family: var(--font-body);
    font-weight: 300;
    font-size:16px;
    margin: 0px 0 0px 0;


}

#fh5co-testimony .wrap-testimony {
  position: relative;
  width: 100%;
}
#fh5co-testimony .wrap-testimony .testimony-slide {
  text-align: center;
}
#fh5co-testimony .wrap-testimony .testimony-slide span {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
}
#fh5co-testimony .wrap-testimony .testimony-slide span a.twitter {
  color: var(--mingfei-teal);
  font-weight: 300;
}
#fh5co-testimony .wrap-testimony .testimony-slide figure {
  margin-bottom: 20px;
  display: -moz-inline-stack;
  display: inline-block;
  zoom: 1;
}
#fh5co-testimony .wrap-testimony .testimony-slide figure img {
  width: 90px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
#fh5co-testimony .wrap-testimony .testimony-slide blockquote {
  border: none;
  margin: 0 auto;
  width: 72%;
  position: relative;
  padding-bottom: 30px;
  margin-bottom: 30px;
}
@media screen and (max-width: 992px) {
  #fh5co-testimony .wrap-testimony .testimony-slide blockquote {
    width: 100%;
  }
}
#fh5co-testimony .wrap-testimony .testimony-slide blockquote p {
  font-style: italic;
  color: #8f989f;
  font-size: 20px;
  line-height: 1.6em;
}
#fh5co-testimony .wrap-testimony .testimony-slide blockquote:after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 2px;
  background: var(--mingfei-teal);
  left: 50%;
  margin-left: -25px;
  bottom: 0;
}
#fh5co-testimony .wrap-testimony .testimony-slide.active {
  display: block;
}
#fh5co-testimony .wrap-testimony .arrow-thumb {
  position: absolute;
  top: 40%;
  display: block;
  width: 100%;
}
#fh5co-testimony .wrap-testimony .arrow-thumb a {
  font-size: 32px;
  color: #dadada;
}
#fh5co-testimony .wrap-testimony .arrow-thumb a:hover, #fh5co-testimony .wrap-testimony .arrow-thumb a:focus, #fh5co-testimony .wrap-testimony .arrow-thumb a:active {
  text-decoration: none;
}

.getting-started {
  background: var(--mingfei-teal);
  padding: 60px 0 40px 0;
}
.getting-started h3 {
  color: var(--color-text-on-accent);
}
.getting-started p {
  color: var(--color-white-alpha-80);
}
.getting-started .call-to-action {
  display: block;
  width: 100%;
  float: left;
}
@media screen and (max-width: 992px) {
  .getting-started .call-to-action {
    float: none !important;
    width: 100%;
    text-align: left !important;
  }
}
.getting-started .call-to-action a.sign-up {
  float: right;
  margin-top: 20px;
  padding: 18px 60px;
  background: #ea574c;
  color: var(--color-text-on-accent);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  	-webkit-box-shadow: 0px 3px 6px -1px rgba(36, 36, 36, 0.19);
	-moz-box-shadow: 0px 3px 6px -1px rgba(36, 36, 36, 0.19);
	-ms-box-shadow: 0px 3px 6px -1px rgba(36, 36, 36, 0.19);
	-o-box-shadow: 0px 3px 6px -1px rgba(36, 36, 36, 0.19);
	box-shadow: 0px 3px 6px -1px rgba(36, 36, 36, 0.19);
}
@media screen and (max-width: 992px) {
  .getting-started .call-to-action a.sign-up {
    float: left !important;
  }
}
.getting-started .call-to-action a.sign-up:hover, .getting-started .call-to-action a.sign-up:focus, .getting-started .call-to-action a.sign-up:active {
  text-decoration: none;
}
.getting-started .call-to-action a.sign-up:hover {
  background: #393e46;
}

.fh5co-pricing {
  padding: 4em 0 6em 0;
  background: #f1faff;
}
.fh5co-pricing .pricing {
  display: block;
  float: left;
  margin-bottom: 30px;
}
.fh5co-pricing .price-box {
  text-align: center;
  padding: 30px;
  background: #fff;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
  margin-bottom: 40px;
  position: relative;
  -webkit-box-shadow: 0px 2px 10px -1px rgba(36, 36, 36, 0.19);
  -moz-box-shadow: 0px 2px 10px -1px rgba(36, 36, 36, 0.19);
  -ms-box-shadow: 0px 2px 10px -1px rgba(36, 36, 36, 0.19);
  -o-box-shadow: 0px 2px 10px -1px rgba(36, 36, 36, 0.19);
  box-shadow: 0px 2px 10px -1px rgba(36, 36, 36, 0.19);
}
.fh5co-pricing .price-box.popular .btn-select-plan {
  background: var(--mingfei-teal);
}
.fh5co-pricing .price-box .btn-select-plan {
  padding: 10px 20px;
  background: var(--mingfei-teal);
  color: var(--color-text-on-accent);
  -webkit-box-shadow: 0px 3px 6px -1px rgba(36, 36, 36, 0.15);
  -moz-box-shadow: 0px 3px 6px -1px rgba(36, 36, 36, 0.15);
  -ms-box-shadow: 0px 3px 6px -1px rgba(36, 36, 36, 0.15);
  -o-box-shadow: 0px 3px 6px -1px rgba(36, 36, 36, 0.15);
  box-shadow: 0px 3px 6px -1px rgba(36, 36, 36, 0.15);
}
.fh5co-pricing .pricing-plan {
  margin: 0 0 50px 0;
  padding: 0;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  color: #888f94;
}
.fh5co-pricing .pricing-plan.pricing-plan-offer {
  margin-bottom: 24px;
}
.fh5co-pricing .pricing-plan span {
  display: block;
  margin-top: 10px;
  margin-bottom: 0;
  color: #d5d8db;
}
.fh5co-pricing .price {
  font-size: 72px;
  color: #6d6d6d;
  line-height: 50px;
}
.fh5co-pricing .price .currency {
  font-size: 30px;
  top: -0.9em;
  padding-right: 10px;
}
.fh5co-pricing .price small {
  font-size: 13px;
  display: block;
  text-transform: uppercase;
  color: #888f94;
}

.fh5co-services .box-services {
  position: relative;
  margin-bottom: 70px;
}
.fh5co-services .box-services i {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 54px;
  color: var(--mingfei-teal);
}
.fh5co-services .fh5co-post {
  padding-left: 75px;
}
.fh5co-services .fh5co-post h3 {
  font-size: 20px;
  margin-bottom: 15px;
}
.fh5co-services .call-to-action .btn-learn {
  padding: 12px 30px;
  background: #50c5f8;
  color: var(--color-text-on-accent);
}

#fh5co-team {
  background: #f1faff;
}
#fh5co-team .team-box {
  position: relative;
  padding: 30px;
  padding-top: 5em;
  background: #fff;
  float: left;
  width: 100%;
  -webkit-box-shadow: 0px 2px 10px -1px rgba(36, 36, 36, 0.19);
  -moz-box-shadow: 0px 2px 10px -1px rgba(36, 36, 36, 0.19);
  -ms-box-shadow: 0px 2px 10px -1px rgba(36, 36, 36, 0.19);
  -o-box-shadow: 0px 2px 10px -1px rgba(36, 36, 36, 0.19);
  box-shadow: 0px 2px 10px -1px rgba(36, 36, 36, 0.19);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
}
@media screen and (max-width: 992px) {
  #fh5co-team .team-box {
    margin-bottom: 110px;
  }
}
#fh5co-team .team-box .user {
  position: absolute;
  top: 0;
  left: 50%;
  margin-top: -73px;
  margin-left: -73px;
  width: 147px;
  height: 147px;
}
#fh5co-team .team-box .user img {
  width: 147px;
  height: 147px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  border: 15px solid #f1faff;
}
#fh5co-team .team-box h3 {
  margin-bottom: 10px;
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
}
#fh5co-team .team-box .position {
  font-size: 16px;
  color: #8f989f;
  display: block;
  margin-bottom: 30px;
}
#fh5co-team .team-box .social-media {
  margin: 0;
  padding: 0;
}
#fh5co-team .team-box .social-media li {
  display: inline-block;
  margin: 0;
  padding: 0;
  font-size: 24px;
  margin-right: 10px;
}
#fh5co-team .team-box .social-media li a {
  color: #333;
}
#fh5co-team .team-box .social-media li a:hover, #fh5co-team .team-box .social-media li a:focus, #fh5co-team .team-box .social-media li a:active {
  text-decoration: none;
  color: var(--mingfei-teal) !important;
}

.box-faq {
  margin-bottom: 60px;
}
.box-faq h3 {
  font-size: 20px;
  margin-bottom: 20px;
}

.partner-logo {
  margin-bottom: 30px;
  float: left;
  width: 100%;
  vertical-align: middle;
}

.section-heading {
  float: left;
  width: 100%;
  padding-bottom: 50px;
  margin-bottom: 0px;
  clear: both;
}
.section-heading h2 {
  margin: 0 0 0 0;
  font-size: 40px;
  font-weight: 300;
  color: #333;
  position: relative;
  display: block;
  padding-bottom: 10px;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .section-heading h2 {
    font-size: 28px;
  }
}
.section-heading h3 {
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  color: #8f989f;
  position: relative;
  display: block;
  padding-bottom: 30px;
}
.section-heading h3:after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 2px;
  background: var(--mingfei-teal);
  left: 50%;
  margin-left: -25px;
  bottom: 0;
}
@media screen and (max-width: 768px) {
  .section-heading h3 {
    font-size: 16px !important;
    line-height: 28px;
  }
}

#fh5co-footer {
  background: transparent;
  backdrop-filter: blur(6px) saturate(130%);
  z-index: 1;
  color: var(--color-text-primary);
}

/* Footer grid — same layout system as achievement cards for alignment */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: var(--layout-content-max-width);
  margin: 0 auto;
  padding-left: calc(var(--layout-content-padding) + 1px);
  padding-right: var(--layout-content-padding);
}

.footer-col {
  display: flex;
  flex-direction: column;
}

@media screen and (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-left: calc(20px + 1px);
    padding-right: 20px;
    max-width: none;
    margin: 0 16px;
  }
}

/* 平板 - footer 和 card 对齐 (641-1023px) */
@media screen and (min-width: 641px) and (max-width: 1023px) {
  .footer-grid {
    max-width: var(--layout-content-mid-width);
    margin: 0 auto;
    padding-left: calc(32px + 1px);
    padding-right: 32px;
  }
}

#fh5co-footer *,
session * {
}
#fh5co-footer h1, #fh5co-footer h2, #fh5co-footer h3{
  color : var(--color-text-primary);
  font-family: var(--font-meta);
  font-size: var(--type-meta-s-size);
  line-height: var(--type-meta-s-line);
  font-weight: var(--type-meta-s-weight);
  letter-spacing: var(--type-meta-s-spacing);
   margin: 0 0 10px 0;
}
#fh5co-footer h1 {
  font-weight: 700;
}

#fh5co-footer a {
  color: var(--mingfei-teal);
}
#fh5co-footer a:hover {
  color: var(--color-text-primary) !important;
  text-decoration: underline;
}
#fh5co-footer .section-title {
  font-size: 22px;
  color: var(--color-text-primary);
  position: relative;
  padding-bottom: 20px;
}
#fh5co-footer .section-title:after {
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  display: block;
  width: 35px;
  height: 2px;
  background: var(--mingfei-teal);
}
#fh5co-footer .copy-right {
  position: relative;
  padding-top: 20px;
  margin-top: 40px;
}
#fh5co-footer .copy-right > a {
  color: var(--color-white-alpha-40);
}
#fh5co-footer .copy-right:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  display: block;
  width: 35px;
  height: 2px;
  background: var(--mingfei-teal);
}
#fh5co-footer .contact-info {
  margin: 0 0 60px 0;
  padding: 0;
}
#fh5co-footer .contact-info li {
  font-size: 16px;
  list-style: none;
  margin: 0 0 20px 0;
  position: relative;
  padding-left: 40px;
}
#fh5co-footer .contact-info li i {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 22px;
  color: var(--mingfei-teal);
}
#fh5co-footer .social-media {
  margin: 0 0 30px 0;
  padding: 0;
}
#fh5co-footer .social-media li {
  display: inline-block;
  margin: 0;
  padding: 0;
  font-size: 24px;
  margin-right: 10px;
}
#fh5co-footer .social-media li a {
  color: var(--mingfei-teal);
}
#fh5co-footer .social-media li a:hover, #fh5co-footer .social-media li a:focus, #fh5co-footer .social-media li a:active {
  text-decoration: none;
}
#fh5co-footer .contact-form .form-group input[type="name"],
#fh5co-footer .contact-form .form-group input[type="text"],
#fh5co-footer .contact-form .form-group input[type="email"],
#fh5co-footer .contact-form .form-group textarea {
  font-size: 16px;
}
#fh5co-footer .contact-form .form-group input[type="name"]::-webkit-input-placeholder,
#fh5co-footer .contact-form .form-group input[type="text"]::-webkit-input-placeholder,
#fh5co-footer .contact-form .form-group input[type="email"]::-webkit-input-placeholder,
#fh5co-footer .contact-form .form-group textarea::-webkit-input-placeholder {
  color: var(--color-white-alpha-50);
}
#fh5co-footer .contact-form .form-group input[type="name"]:-moz-placeholder,
#fh5co-footer .contact-form .form-group input[type="text"]:-moz-placeholder,
#fh5co-footer .contact-form .form-group input[type="email"]:-moz-placeholder,
#fh5co-footer .contact-form .form-group textarea:-moz-placeholder {
  /* Firefox 18- */
  color: var(--color-white-alpha-50);
}
#fh5co-footer .contact-form .form-group input[type="name"]::-moz-placeholder,
#fh5co-footer .contact-form .form-group input[type="text"]::-moz-placeholder,
#fh5co-footer .contact-form .form-group input[type="email"]::-moz-placeholder,
#fh5co-footer .contact-form .form-group textarea::-moz-placeholder {
  /* Firefox 19+ */
  color: var(--color-white-alpha-50);
}
#fh5co-footer .contact-form .form-group input[type="name"]:-ms-input-placeholder,
#fh5co-footer .contact-form .form-group input[type="text"]:-ms-input-placeholder,
#fh5co-footer .contact-form .form-group input[type="email"]:-ms-input-placeholder,
#fh5co-footer .contact-form .form-group textarea:-ms-input-placeholder {
  color: var(--color-white-alpha-50);
}
#fh5co-footer .contact-form .form-group input {
  color: var(--color-text-primary);
  background: transparent;
  border: none;
  background: #485b71;
  box-shadow: none;
}
#fh5co-footer .contact-form .form-group textarea {
  color: var(--color-text-primary);
  background: transparent;
  border: none;
  background: #485b71;
  box-shadow: none;
}
#fh5co-footer #btn-submit {
  color: var(--color-white-alpha-90) !important;
  background: var(--mingfei-teal) !important;
}

.btn {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.fh5co-nav-toggle {
  width: 25px;
  height: 25px;
  cursor: pointer;
  text-decoration: none;
}
.fh5co-nav-toggle.active i::before, .fh5co-nav-toggle.active i::after {
  background: var(--mingfei-teal);
}
.fh5co-nav-toggle:hover, .fh5co-nav-toggle:focus, .fh5co-nav-toggle:active {
  outline: none;
  border-bottom: none !important;
}
.fh5co-nav-toggle i {
  position: relative;
  display: -moz-inline-stack;
  display: inline-block;
  zoom: 1;
  width: 25px;
  height: 3px;
  color: #535659;
  font: bold 14px/.4 Helvetica;
  text-transform: uppercase;
  text-indent: -55px;
  background: #535659;
  transition: all .2s ease-out;
}
.fh5co-nav-toggle i::before, .fh5co-nav-toggle i::after {
  content: '';
  width: 25px;
  height: 3px;
  background: #535659;
  position: absolute;
  left: 0;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}

.fh5co-nav-toggle i::before {
  top: -7px;
}

.fh5co-nav-toggle i::after {
  bottom: -7px;
}

.fh5co-nav-toggle:hover i::before {
  top: -10px;
}

.fh5co-nav-toggle:hover i::after {
  bottom: -10px;
}

.fh5co-nav-toggle.active i {
  background: transparent;
}

.fh5co-nav-toggle.active i::before {
  top: 0;
  -webkit-transform: rotateZ(45deg);
  -moz-transform: rotateZ(45deg);
  -ms-transform: rotateZ(45deg);
  -o-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}

.fh5co-nav-toggle.active i::after {
  bottom: 0;
  -webkit-transform: rotateZ(-45deg);
  -moz-transform: rotateZ(-45deg);
  -ms-transform: rotateZ(-45deg);
  -o-transform: rotateZ(-45deg);
  transform: rotateZ(-45deg);
}

.fh5co-nav-toggle {
  position: absolute;
  top: 2px;
  right: 15px;
  z-index: 21;
  padding: 6px 0 0 0;
  display: block;
  margin: 0 auto;
  display: none;
  height: 44px;
  width: 25px;
  border-bottom: none !important;
}
@media screen and (max-width: 768px) {
  .fh5co-nav-toggle {
    display: block;
  }
}

.btn {
  letter-spacing: 2px;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.btn.btn-primary {
  background: var(--mingfei-teal);
  color: var(--color-text-on-accent);
  border: none !important;
  border: 2px solid transparent !important;
}




#map {
  width: 100%;
  height: 500px;
  position: relative;
}
@media screen and (max-width: 768px) {
  #map {
    height: 200px;
  }
}


.js .to-animate,
.js .to-animate-2,
.js .to-animate-3,
.js .single-animate {
  opacity: 0;
}

@media screen and (max-width: 480px) {
  .col-xxs-12 {
    float: none;
    width: 100%;
  }
}

.row-bottom-padded-lg {
  padding-bottom: 7em;
}
@media screen and (max-width: 768px) {
  .row-bottom-padded-lg {
    padding-bottom: 2em;
  }
}

.row-bottom-padded-md {
  padding-bottom: 4em;
}
@media screen and (max-width: 768px) {
  .row-bottom-padded-md {
    padding-bottom: 2em;
  }
}

.row-bottom-padded-sm {
  padding-bottom: 2em;
}
@media screen and (max-width: 768px) {
  .row-bottom-padded-sm {
    padding-bottom: 2em;
  }
}


.tiedImg {
    height: 50px !important;
    margin-top: 5px !important;
}
/*# sourceMappingURL=style.css.map */
#mflogo{
  width: 150px;
  height:45px;
	display: inline-block;
	vertical-align: middle;
  color: var(--mingfei-teal);
  font-family: var(--font-meta);
  font-weight: bold;
  margin-top:10px;
}

#mflogo svg{
  height:35px;
  fill:var(--mingfei-teal);
}
.nomarginnopadding
{
  margin: 0 0 0 0;
  padding: 0 0 0 0;

}

.fh5co-parallax {
    background-color: #555;
    background-attachment: fixed;
    background-size: 70%;
    background-repeat: no-repeat;
    position: relative;
}
a :hover{
  cursor: pointer;
}
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* XSmall devices (tablets, 768px and down) */

.fh5co-parallax .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #444;
    opacity: .2;

}
.fh5co-parallax .overlay:hover{
  opacity:0;
  cursor: pointer;
}



.readmore{
  color:var(--mingfei-teal) !important;
  font-weight:700 !important;


}
.readmore a:hover{
 cursor: pointer;
 color:var(--color-text-on-accent);
 background-color: var(--mingfei-teal);
 text-decoration: none;
 -webkit-transition: 0.1s;
  -o-transition: 0.1s;
  transition: 0.1s;
}

/* ================&&&&&&&^^^^&&&&&&&&&============*/
/* for project page*/

.project-info {
  padding-top: 40px; margin-bottom: 0px;
}
.project-title {
  color: rgb(36, 36, 36); 
  font-family: var(--font-heading); 
  letter-spacing: var(--type-heading-m-spacing); 
  font-size: var(--type-heading-m-size);
  line-height: var(--type-heading-m-line);
  font-weight: var(--type-heading-m-weight);
}
.project-text-title {
  color: var(--mingfei-teal); 
  font-family: var(--font-heading); 
  text-transform: none; 
  letter-spacing: var(--type-heading-m-spacing); 
  font-size: var(--type-heading-m-size);
  line-height: var(--type-heading-m-line);
  font-weight: var(--type-heading-m-weight); 
  margin-top: 40px;
  margin-bottom: 12px; 
  display: inline-block;
}

/* Sub-section headers using the portfolio heading-small typography token. */
.project-text-title.subsection {
  font-family: var(--font-heading);
  text-transform: none;
  letter-spacing: var(--type-heading-s-spacing);
  font-size: var(--type-heading-s-size);
  line-height: var(--type-heading-s-line);
  font-weight: var(--type-heading-s-weight);
  margin-top: 24px;
}

/* 更小的标题 (2.1.1等) - 深绿色加粗正文，300 weight，无bottom margin */
.project-text-detailsection {
  color: var(--mingfei-teal);
  font-family: var(--font-meta);
  font-size: var(--type-meta-s-size);
  line-height: var(--type-meta-s-line);
  font-weight: 600;
  letter-spacing: var(--type-meta-s-spacing);
  word-spacing: normal;
  text-align: left;
  margin-bottom: 0;
}

/* Tag Container - 标签容器 */
.tag-container {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 20px;
}

/* Badge - 徽章标签 */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: var(--border-radius);
  background-image: var(--badge-gradient);
  font-family: var(--font-meta);
  font-size: var(--type-meta-s-size);
  line-height: var(--type-meta-s-line);
  font-weight: 500;
  letter-spacing: var(--type-meta-s-spacing);
  color: #f9f9fa;
  white-space: nowrap;
}
.project-text {
  color: var(--paragraph-text-color); 
  font-family: var(--font-body); 
  line-height: var(--type-body-regular-line); 
  font-size: var(--type-body-regular-size); 
  font-weight: var(--type-body-regular-weight); 
  word-spacing: normal;
  letter-spacing: var(--type-body-regular-spacing);
  margin-bottom: 18px;
  text-align: left;
  max-width: 720px;
}
.project-text h3{
 color:rgb(36, 36, 36);
 font-family: var(--font-meta);
 font-size: var(--type-meta-s-size);
 line-height: var(--type-meta-s-line);
 font-weight: 600;
 letter-spacing: var(--type-meta-s-spacing);

}
.image-mb {
  margin-bottom: 20px;
}
.image-smb {
  margin-bottom: 30px;
}
.image-mt {
  margin-top: 0px;
}
.next {
  color:var(--mingfei-teal);
  padding: 10px; 
  margin: 50px auto ;
  display: inline-block;
}
.next:hover {
  background-color: var(--mingfei-teal);
  color:var(--color-text-on-accent);
}

.next span{
  font-size: 14px;
  margin-right: 10px
}
#fh5co-about {
  background-color: transparent;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
  width: 100%;
  background-color:transparent;
  height:70vh;
}

#fh5co-about .gradient {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  background: transparent;
}

#fh5co-about .text-wrap {
  display: table;
  width: 100%;
  position: relative;
  z-index: 4;
}
#fh5co-about .text-inner {
  display: table-cell;
  text-align: center;
  margin-top:30vh;
}
#fh5co-about .text-inner h1 {
  font-family: var(--font-display);
  font-size: var(--type-display-xl-size);
  line-height: var(--type-display-xl-line);
  font-weight: var(--type-display-xl-weight);
  letter-spacing: var(--type-display-xl-spacing);
  color: var(--mingfei-teal);
  margin: 0 0 20px 0;
}

#fh5co-about .text-inner .call-to-action {
  display: block;
  width: 100%;
}
#fh5co-about .text-inner .call-to-action a {
  width: 230px;
  display: inline-block;
  font-size: 20px;
  padding: 15px 0;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  margin-right: 10px;
}
#fh5co-about .text-inner .call-to-action a.demo {
  border: 2px solid #fff;
  text-decoration: none !important;
}
@media screen and (max-width: 768px) {
  #fh5co-about .text-inner .call-to-action a.demo {
    margin-bottom: 20px;
  }
}


.project-title-about{
    font-family: var(--font-display);
    font-size: var(--type-display-xl-size);
    line-height: var(--type-display-xl-line);
    font-weight: var(--type-display-xl-weight);
    letter-spacing: var(--type-display-xl-spacing);
    color: var(--mingfei-teal);
    margin: 0 0 5px 0;
}
#aboutinfo{
  padding-top:200px;
  margin-bottom: 150px;
}
.image-mt2{
  margin-top :50px;
}

/**/
.fh5co-cover{
   position: relative;
    min-height: 80vh;
    height: auto;
    background-color: var(--hero-bg, #FAF5FF);
}

/* 各项目 hero 背景色由该页在 :root 或 body 上设置 --hero-bg，此处不再按 id 写死 */

/* 图片右侧空出一列：占位，背景已去掉 */
.headerpic-right-gutter {
}

/* 小尺寸(<992px)下隐藏 hero 背景相关：右侧留白列、占位列 */
@media (max-width: 991px) {
  .headerpic-right-gutter,
  .headerpic-spacer {
    display: none !important;
  }
}

/* 背景图：缩小显示，且右侧留出约一列宽(8.33%)，图片不画进最右列 */
#headerpic {
  background-size: 48%;
  background-repeat: no-repeat;
  background-position: right 8.33% center;
}
/* 768–1199px 使用独立 img 元素，与文字分块布局，避免重叠（仅 glassbox） */
.hero-responsive-img {
  display: none;
}

.fh5co-hero {
    position: relative;
    height: 100%;
    top: 0;
    padding-top: 77px;
    background-color: var(--hero-bg, #FAF5FF);
}


.fh5co-cover .desc {
    top: 25%;
    position: absolute;
    width: 100%;
    margin-top: -100px;
    z-index: 2;
    color: #fff;
}

.fh5co-cover .desc h2{
   color: var(--mingfei-teal); 
  font-family: var(--font-display); 
  font-size: var(--type-display-l-size);
  line-height: var(--type-display-l-line);
  font-weight: var(--type-display-l-weight);
  letter-spacing: var(--type-display-l-spacing);
  max-width: 640px;
}
.fh5co-cover .desc li,
.fh5co-cover .desc p {
  color: var(--mingfei-teal);
}
#aboutp{
  color:#000;
}
.desc .project-text h3{
  color: #fff;
}
.desc .btn{
  border-color:#fff;
}



.fh5co-cover .desc span {
  display: block;
  margin-bottom: 15px;
  font-size: var(--type-heading-s-size);
  line-height: var(--type-heading-s-line);
  font-weight: var(--type-heading-s-weight);
  letter-spacing: var(--type-heading-s-spacing);
  color: var(--color-white-alpha-80);
}
.fh5co-cover .desc span i {
  color: #DA1212;
}
.fh5co-cover .desc span a {
  color: #fff;
   font-family: var(--font-heading);
  font-weight: 700;

}
.desc a {
   font-family: var(--font-heading);
  font-weight: 700;
  color: #fff;
}
.fh5co-cover .desc span a:hover, .fh5co-cover .desc span a:focus {
  color: #fff !important;
}
.fh5co-cover .desc span a.fh5co-site-name {
  padding-bottom: 2px;
  border-bottom: 1px solid var(--color-white-alpha-70);
}

/* 仅 glassbox 页：hero 内文字与按钮改为品牌色 #00b89a */
body.page-glassbox .fh5co-cover .desc {
  color: var(--mingfei-teal);
}
body.page-glassbox .fh5co-cover .desc h2 {
  color: var(--mingfei-teal);
}
body.page-glassbox .desc li,
body.page-glassbox .desc p {
  color: var(--mingfei-teal);
}
body.page-glassbox .desc .project-text h3 {
  color: var(--mingfei-teal);
}

/* Watchlist hero 内的「What I have done / delivered」标题和正文 */
.fh5co-cover #capslist1 h3 {
  color: var(--mingfei-teal);
}
.fh5co-cover #capslist1 {
  color: var(--mingfei-teal);
}
.fh5co-cover #capslist2 h3 {
  color: var(--mingfei-teal);
}
.fh5co-cover #capslist2 {
  color: var(--mingfei-teal);
}
/* 按钮保持原样（白色），不随页面改为 #00b89a */
body.page-glassbox .desc .btn,
body.page-glassbox .desc a.btn {
  color: var(--color-text-on-accent) !important;
  border-color: #fff;
}
body.page-glassbox .fh5co-cover .desc span {
  color: var(--mingfei-teal);
}
body.page-glassbox .fh5co-cover .desc span a,
body.page-glassbox .desc a {
  color: var(--mingfei-teal);
}
body.page-glassbox .fh5co-cover .desc span a:hover,
body.page-glassbox .fh5co-cover .desc span a:focus {
  color: var(--mingfei-teal) !important;
}
/* Keep button text white on hover and add underline */
body.page-glassbox .fh5co-cover .desc span a.btn:hover,
body.page-glassbox .fh5co-cover .desc span a.btn:focus {
  color: var(--color-text-on-accent) !important;
  text-decoration: underline !important;
}
body.page-glassbox .fh5co-cover .desc span a.fh5co-site-name {
  border-bottom-color: var(--mingfei-teal);
}

.fh5co-overlay {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(77px + 80vh);
    z-index: 1;
    /* background: rgba(36, 36, 36, .1);  暂时去掉遮罩背景，保留结构 */
}
.btn-outline-primary {
    color: var(--mingfei-teal);
    background-color: var(--mingfei-teal);
    background-image: none;
    border-color: var(--mingfei-teal);
    font-family: var(--font-heading);
    font-weight: 700;
    border-radius: 0px;
}
.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus {
  box-shadow: none;
  background: var(--mingfei-teal);
}
.btn:hover, .btn:active, .btn:focus {
  background: var(--mingfei-teal) !important;
  color: var(--color-text-on-accent);
  outline: none !important;
  font-family: var(--font-heading);
  font-weight: 700;
  border-radius: 0px;
}
.btn.btn-default:hover, .btn.btn-default:focus, .btn.btn-default:active {
  border-color: transparent;
}
.project-text ul {
  list-style: none;
  padding-left: 0;
  margin-top: 16px;
  margin-bottom: 24px;
}
.project-text li{
  position: relative;
  padding-left: 24px; 
  text-indent: 0;
  font-size: var(--type-body-regular-size);
  line-height: var(--type-body-regular-line);
  font-weight: var(--type-body-regular-weight);
  letter-spacing: var(--type-body-regular-spacing);
  word-spacing: normal;
  text-align: left;
  margin-bottom: 14px;
}
.project-text li::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--mingfei-teal);
  position: absolute;
  left: 0;
  top: 11px;
}

/* 嵌套列表 - 空心方框，左侧对齐，右侧多一个空格 */
.project-text ul ul {
  margin-top: 10px;
  margin-bottom: 12px;
  padding-left: 18px;
}
.project-text ul ul li {
  position: relative;
  padding-left: 22px;
  text-indent: 0;
  font-size: var(--type-body-regular-size);
  line-height: var(--type-body-regular-line);
  font-weight: var(--type-body-regular-weight);
  letter-spacing: var(--type-body-regular-spacing);
  word-spacing: normal;
  text-align: left;
  margin-bottom: 10px;
}
.project-text ul ul li::before {
  content: "";
  width: 5px;
  height: 5px;
  border: 1px solid var(--mingfei-teal);
  background: transparent;
  position: absolute;
  left: 0;
  top: 12px;
}


.project-text li a{
  padding-left: 0em; 
  text-indent: 0.7em;
}

.project-text span{
  font-weight: 600;
}
#applestoresvg{
  margin-top:5px;
  height: 1.15em;
  margin-bottom: -10px;
}
.project-text li .btn{
  margin-left: 7px;
}

/* SideKcK 页面：列表项间距减半 */
body.page-sidekck .project-text li,
body.page-sidekck .project-text ul ul li {
  margin-bottom: 9px;
}
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: var(--mingfei-teal);
  color: var(--color-text-on-accent);
  cursor: pointer;
  padding: 15px;
  font-family: var(--font-heading);
  font-weight: 700;
  border-radius: var(--border-radius);
}



#myBtn:hover {
  background-color: #fff;
  color:var(--mingfei-teal);
  border-width: 2px;
  border-style: groove;
  border-color:var(--mingfei-teal);

}

.carousel-control-next-icon {
background-image: url('cssimages/right-arrow.png');
}
.carousel-control-prev-icon {
background-image: url('cssimages/left-arrow.png');
}
.carousel-indicators li{
background-color: #4A5A6C;

}


@media (max-width: 767px) { 
 .workpic{
    height:250px;
    }
  .fh5co-parallax{
      background-color: #555;
      background-attachment: scroll;
      background-size: 102%;
  }
  #fh5co-home .text-inner h1 {
    font-size: 55px;
    color: var(--color-white-alpha-50);
    line-height: 1.2;
    padding-bottom: 8px;
    transition: all 0.5s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1),
                 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  #fh5co-home .text-inner h1.animated {
    background: linear-gradient(90deg, 
      rgba(133, 52, 243, 0.7), 
      rgba(0, 102, 95, 0.7), 
      rgba(133, 52, 243, 0.7)
    );
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 20s linear infinite;
    color: rgba(133, 52, 243, 0.7);
  }
  
  

    #fh5co-home .text-inner h2 {
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
  }
  #mflogo {
    margin-left: 15px;
  }
  #mflogo svg{
    height: 25px;
  }
  #fh5co-footer h1, #fh5co-footer h2, #fh5co-footer h3 {
    font-size: var(--type-meta-s-size);
    line-height: var(--type-meta-s-line);
    padding-left: 15px;
  }
  .project-title-about{
    font-size: var(--type-display-xl-size);
    line-height: var(--type-display-xl-line);
    letter-spacing: var(--type-display-xl-spacing);
  }
   .fh5co-cover{
      background-size: 60%;
      background-position:-2000px -2000px;
       background-repeat: no-repeat;
       min-height: 80vh;
       height: auto;
  }
  .fh5co-cover .desc{
    top:15%;
     padding-left: 20px;
    padding-right: 20px;
  }
  .fh5co-cover .desc h2{
    font-size: var(--type-display-l-size);
    line-height: var(--type-display-l-line);
    letter-spacing: var(--type-display-l-spacing);
    max-width: 100%;
  }
  .fh5co-overlay{
    opacity:0;
  }
  /* 小屏隐藏 hero 背景图（.fh5co-cover 已统一处理）；glassbox 用下方 hero-has-img 规则显示 img */
  /* 0–767px：所有 hero-has-img 页面使用独立 img，与文字分块，图片不消失 */
  .fh5co-cover.hero-has-img {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background-image: none !important;
  }
  .fh5co-cover.hero-has-img .desc {
    position: relative;
    top: auto;
    margin-top: 0;
    order: 1;
  }
  .fh5co-cover.hero-has-img .hero-responsive-img {
    display: block !important;
    order: 2;
    text-align: center;
    padding: 1em 1em 1.5em;
    flex-shrink: 0;
  }
  .fh5co-cover.hero-has-img .hero-responsive-img img {
    width: 85vw;
    max-width: 360px;
    height: auto;
  }
  /* 0–767px 正文区增加左右留白 */
  .project-info .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

}
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { 
 .workpic{
    height:300px;
    }
  .fh5co-parallax {
      background-color: #555;
      background-attachment: fixed;
      background-size: 62%;
      background-repeat: no-repeat;
      background-position: 0px -80px;
      position: relative;
  }
  .fh5co-cover{
      background-size: 60%;
      background-repeat: no-repeat;
  }

} /* end @media (min-width: 768px) */

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { 
   .workpic{
    height:450px;
    }
    .work{
      margin-top:0px;
    }
    #sidekckpic {
      background-color: #555;
      background-attachment: fixed;
      background-size: 73%;
      background-repeat: repeat;
      background-position: -100px -10px;
      position: relative;
  }
  #uniroomiepic {
      background-color: #555;
      background-attachment: fixed;
      background-size: 82%;
      background-repeat: no-repeat;
      background-position: -140px 20px;
      position: relative;
  }
  #cfaiapic {
      background-color: #555;
      background-attachment: fixed;
      background-size: 90%;
      background-repeat: no-repeat;
      background-position: -120px 0px;
      position: relative;
  }
  #dbcapspic {
      background-color: #555;
      background-attachment: fixed;
      background-size: 75%;
      background-repeat: no-repeat;
      background-position: -40px -10px;
      position: relative;
  }
}

/* 768–1199px：使用独立 img 与文字分块布局，避免重叠（所有 hero-has-img 页面） */
@media (min-width: 768px) and (max-width: 1199px) {
  /* 问题1修复：hero 高度改为 auto，图片留在 hero 内不溢出到正文 */
  .fh5co-cover.hero-has-img {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background-image: none !important;
    height: auto !important;
    min-height: 80vh;
  }
  .fh5co-cover.hero-has-img .desc {
    position: relative;
    top: auto;
    margin-top: 0;
    order: 1;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .fh5co-cover.hero-has-img .hero-responsive-img {
    display: block;
    order: 2;
    text-align: center;
    padding: 1em 1em 1.5em;
    flex-shrink: 0;
  }
  .fh5co-cover.hero-has-img .hero-responsive-img img {
    width: 65vw;
    max-width: 400px;
    height: auto;
  }
  /* 问题2修复：正文区增加左右留白，避免文字贴边 */
  .project-info .container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
  #sidekckpic, #uniroomiepic, #dbcapspic,#cfaiapic{
      background-color: #555;
      background-attachment: fixed;
      background-size: 62%;
      background-repeat: no-repeat;
      background-position: -50px -20px;
      position: relative;
  }
    #vawl1pic{
     background-color: #555;
      background-attachment: fixed;
      background-size: 120%;
      background-repeat: no-repeat;
      background-position: 40px -40px;
      position: relative;

  }

} /* end @media (min-width: 1200px) */

@media (min-width: 1600px) { 
  #sidekckpic, #uniroomiepic, #dbcapspic{
      background-color: #555;
      background-attachment: fixed;
      background-size: 62%;
      background-repeat: no-repeat;
      background-position: -50px -120px;
      position: relative;
    }
    #cfaiapic{
      background-color: #555;
      background-attachment: fixed;
      background-size: 62%;
      background-repeat: no-repeat;
      background-position: -50px -80px;
      position: relative;

    }
  .workpic{
    height:500px;
    }
}


  @media (min-width: 2000px) { 
  #sidekckpic, #uniroomiepic, #dbcapspic {
      background-color: #555;
      background-attachment: fixed;
      background-size: 62%;
      background-repeat: no-repeat;
      background-position: -50px -150px;
      position: relative;
  }
  .workpic{
    height:550px;
    }
    .work{
      margin-top: 60px;
    }
}

@media screen and (max-width: 768px) {
  
}


@media (min-width: 992px) { 
  .fh5co-cover{
      background-color: var(--hero-bg, #FAF5FF);
      background-size: 60%;
      background-repeat: no-repeat;
       background-position: 100% 40% !important; 
      position: relative;
    }
  /* 992–1199px 继续使用独立 img 布局（继承 768px 规则） */
    .fh5co-cover li{
    line-height: 1.4em;
    /* padding-top:0.6em; */
    font-weight: 300;
    }
}
/* 1200px 及以上恢复背景图右侧布局，隐藏独立 img */
@media (min-width: 1200px) { 
  .fh5co-cover.hero-has-img {
    display: block;
    /* background-image 由各页 inline style 提供 */
  }
  .fh5co-cover.hero-has-img .desc {
    position: absolute;
    top: 25%;
    margin-top: -100px;
  }
  .fh5co-cover.hero-has-img .hero-responsive-img {
    display: none;
  }
  #headerpic {
    background-size: 48% !important;
    background-position: right 8.33% center !important;
  }
}
@media (min-width: 1600px) { 
  .fh5co-cover{
      background-color: var(--hero-bg, #FAF5FF);
      background-size: 60%;
      background-repeat: no-repeat;
       background-position: 100% 20% !important; 
      position: relative;
    }
  #headerpic {
    background-size: 48%;
    background-position: right 8.33% center !important;
  }
    .fh5co-cover li{
    line-height: 1.5em;
    }
}

/* Image modal - global */
.project-info img.img-responsive { cursor: pointer; }
#img-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 9998; display: none; align-items: center; justify-content: center; }
#img-modal-overlay.active { display: flex; }
#img-modal-content { position: relative; max-width: 95%; max-height: 95%; z-index: 9999; }
#img-modal-content img { max-width: 100%; max-height: 90vh; display: block; border-radius: 4px; box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
#img-modal-close { position: absolute; top: -44px; right: 0; width: 36px; height: 36px; background: #fff; border: none; border-radius: 50%; font-size: 28px; line-height: 1; cursor: pointer; color: #333; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.2); padding: 0; }
#img-modal-close:hover { background: #f3f4f6; }



/* Card hover effects — replaced by rotating border glow below */

/* Remove hover effect from top placeholder cards */
.glass-box-card-top {
	transition: none !important;
}

.glass-box-card-top:hover {
	box-shadow: none !important;
}

/* Remove hover effect from hidden section cards */
.section-hidden .glass-box-card {
	transition: none !important;
}

.section-hidden .glass-box-card:hover {
	box-shadow: none !important;
}

/* Restore hover effect for top bar (override previous removal) */
.glass-box-card-top {
	transition: box-shadow 0.3s ease !important;
}

.glass-box-card-top:hover {
	box-shadow: -2px -2px 8px 0 #A000B8, 2px 2px 8px 0 #00B8A9 !important;
}

/* Remove hover effect from shrunk cards */
.glass-box-card-shrunk {
	transition: none !important;
}

.glass-box-card-shrunk:hover {
	box-shadow: none !important;
}

/* Change top bar link background from black to green */
.glass-box-top-title a {
	background-color: #00695C !important;
}

.glass-box-top-title a:hover {
	background-color: #00897B !important;
}

/* Change text color to white on hover */
.glass-box-top-title a:hover {
	color: var(--color-text-primary) !important;
}

/* Ensure default text color is preserved */
.glass-box-top-title a {
	color: inherit !important;
}

/* Remove default background, only show on hover */
.glass-box-top-title a {
	background-color: transparent !important;
}

/* Set default text color to black/dark */
.glass-box-top-title a {
	color: var(--color-text-primary) !important;
}

/* Add underline on hover for all card titles with links */
.glass-box-title a {
	text-decoration: none;
	transition: text-decoration 0.2s ease;
}

.glass-box-title a:hover {
	text-decoration: underline;
}

/* Change card title hover color to green */
.glass-box-title a:hover {
	color: #00897B !important;
}

/* Update card title hover color to mingfei green */
.glass-box-title a:hover {
	color: var(--mingfei-teal) !important;
}

/* Force mingfei green on card title hover with highest priority */
.glass-box-card .glass-box-title a:hover {
	color: var(--mingfei-teal) !important;
	text-decoration: underline !important;
}

/* Remove any filters or opacity on card title hover */
.glass-box-card .glass-box-title a:hover {
	opacity: 1 !important;
	filter: none !important;
	-webkit-filter: none !important;
}

/* Update top bar title hover to mingfei green (consistent with card titles) */
.glass-box-top-title a:hover {
	color: var(--mingfei-teal) !important;
	background-color: transparent !important;
	opacity: 1 !important;
	filter: none !important;
	-webkit-filter: none !important;
}

/* Add underline to top bar title hover */
.glass-box-top-title a:hover {
	text-decoration: underline !important;
}

/* Change subtitle color from green to black */
.glass-box-subtitle {
	color: var(--mingfei-teal) !important;
}

.glass-box-readmore a {
	transition: background-color 0.2s ease, color 0.2s ease !important;
}

/* ══════════════════════════════════════════════
 * style2026.css
 * CSS for index_2026.html — Organic AI Orb hero
 * ══════════════════════════════════════════════ */

/* ── Hero 2026 layout ── */
#fh5co-home {
	position: relative;
	width: 100%;
	overflow: hidden;
	height: min(75vh, 600px);
}

#fh5co-home .mingfei-gradient-bg,
#fh5co-home .mingfei-fade-overlay {
	width: 100%;
	height: 100%;
}

/* Remove all background animation in hero — plain dark bg */
#fh5co-home .mingfei-gradient-bg {
	background: #0f0f0f;
	animation: none;
}

#fh5co-home .mingfei-fade-overlay {
	background: none;
	padding-top: 0;
}

/* Two-column hero layout — uses same 3-col grid as achievements for alignment */
#hero-layout {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	align-items: center;
	height: 100%;
	max-width: var(--layout-content-max-width);
	width: calc(100% - 40px);
	margin: 0 auto;
	position: relative;
	z-index: 2;
}

/* Left: text spans first 2 columns */
#hero-text {
	grid-column: 1 / 3;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: 80px;
	padding-left: var(--layout-content-padding);
}

#hero-text h1#main-title {
	font-family: var(--font-display);
	font-size: var(--type-display-xl-size);
	line-height: var(--type-display-xl-line);
	font-weight: var(--type-display-xl-weight);
	letter-spacing: var(--type-display-xl-spacing);
	margin: 0 0 20px 0;
	text-align: left;
}

#hero-text h2 {
	font-family: var(--font-body);
	font-size: var(--type-body-lead-size);
	line-height: var(--type-body-lead-line);
	font-weight: var(--type-body-lead-weight);
	letter-spacing: var(--type-body-lead-spacing);
	color: var(--color-text-secondary);
	margin: 0;
	text-align: left;
	white-space: normal;
}

/* Right: orb sits in 3rd grid column, naturally aligned with 3rd achievement card */
#hero-orb {
	grid-column: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: visible;
	z-index: 2;
	padding-top: 80px;
}

#hero-orb svg {
	position: absolute;
	width: 0;
	height: 0;
}

/* Hide toggle checkboxes */
#hero-orb input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

/* ══════════════════════════════════════════════
 * ORGANIC AI ORB — CSS Custom Properties
 * ══════════════════════════════════════════════ */

@property --s1 { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --s2 { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --s3 { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --rotation { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

@property --mesh-x-0 { syntax: "<percentage>"; inherits: false; initial-value: 85%; }
@property --mesh-y-0 { syntax: "<percentage>"; inherits: false; initial-value: 80%; }
@property --mesh-c-0 { syntax: "<color>"; inherits: false; initial-value: hsla(150.88, 62%, 73%, 1); }
@property --mesh-s-start-0 { syntax: "<percentage>"; inherits: false; initial-value: 9%; }
@property --mesh-s-end-0 { syntax: "<percentage>"; inherits: false; initial-value: 55%; }

@property --mesh-x-1 { syntax: "<percentage>"; inherits: false; initial-value: 60%; }
@property --mesh-y-1 { syntax: "<percentage>"; inherits: false; initial-value: 24%; }
@property --mesh-c-1 { syntax: "<color>"; inherits: false; initial-value: hsla(220, 100%, 72%, 1); }
@property --mesh-s-start-1 { syntax: "<percentage>"; inherits: false; initial-value: 5%; }
@property --mesh-s-end-1 { syntax: "<percentage>"; inherits: false; initial-value: 72%; }

@property --mesh-x-2 { syntax: "<percentage>"; inherits: false; initial-value: 13%; }
@property --mesh-y-2 { syntax: "<percentage>"; inherits: false; initial-value: 82%; }
@property --mesh-c-2 { syntax: "<color>"; inherits: false; initial-value: hsla(297.79, 100%, 55%, 0.49); }
@property --mesh-s-start-2 { syntax: "<percentage>"; inherits: false; initial-value: 5%; }
@property --mesh-s-end-2 { syntax: "<percentage>"; inherits: false; initial-value: 52%; }

@property --mesh-x-3 { syntax: "<percentage>"; inherits: false; initial-value: 24%; }
@property --mesh-y-3 { syntax: "<percentage>"; inherits: false; initial-value: 7%; }
@property --mesh-c-3 { syntax: "<color>"; inherits: false; initial-value: hsla(182, 72%, 68%, 1); }
@property --mesh-s-start-3 { syntax: "<percentage>"; inherits: false; initial-value: 13%; }
@property --mesh-s-end-3 { syntax: "<percentage>"; inherits: false; initial-value: 68%; }

/* ══════════════════════════════════════════════
 * KEYFRAME ANIMATIONS
 * ══════════════════════════════════════════════ */

@keyframes s1 { to { --s1: 360deg; } }
@keyframes s2 { to { --s2: 360deg; } }
@keyframes s3 { to { --s3: 360deg; } }
@keyframes rotation { to { --rotation: 360deg; } }

@keyframes mesh-gradient {
	0% {
		--mesh-x-0: 85%; --mesh-y-0: 80%;
		--mesh-c-1: hsla(220, 100%, 82%, 1);
		--mesh-x-1: 60%; --mesh-y-1: 24%;
		--mesh-x-2: 13%; --mesh-y-2: 82%;
		--mesh-x-3: 24%; --mesh-y-3: 7%;
	}
	100% {
		--mesh-x-0: 31%; --mesh-y-0: 94%;
		--mesh-c-1: hsla(220, 82%, 95%, 1);
		--mesh-x-1: 2%;  --mesh-y-1: 25%;
		--mesh-x-2: 98%; --mesh-y-2: 20%;
		--mesh-x-3: 95%; --mesh-y-3: 92%;
	}
}

@keyframes grain-jitter {
	0%     { transform: translate(1px, 6px); }
	3.33%  { transform: translate(-12px, 8px); }
	6.67%  { transform: translate(15px, -10px); }
	10%    { transform: translate(-8px, 14px); }
	13.33% { transform: translate(11px, -6px); }
	16.67% { transform: translate(-14px, -9px); }
	20%    { transform: translate(9px, 13px); }
	23.33% { transform: translate(-7px, -15px); }
	26.67% { transform: translate(13px, 7px); }
	30%    { transform: translate(-10px, -11px); }
	33.33% { transform: translate(6px, -8px); }
	36.67% { transform: translate(-15px, 12px); }
	40%    { transform: translate(14px, -7px); }
	43.33% { transform: translate(-9px, 15px); }
	46.67% { transform: translate(8px, -13px); }
	50%    { transform: translate(-13px, -6px); }
	53.33% { transform: translate(12px, 10px); }
	56.67% { transform: translate(-6px, -14px); }
	60%    { transform: translate(10px, 9px); }
	63.33% { transform: translate(-11px, -12px); }
	66.67% { transform: translate(7px, 14px); }
	70%    { transform: translate(-14px, -8px); }
	73.33% { transform: translate(15px, 11px); }
	76.67% { transform: translate(-8px, -15px); }
	80%    { transform: translate(9px, 6px); }
	83.33% { transform: translate(-12px, -10px); }
	86.67% { transform: translate(13px, 15px); }
	90%    { transform: translate(-10px, 7px); }
	93.33% { transform: translate(11px, -14px); }
	96.67% { transform: translate(-7px, 13px); }
	100%   { transform: translate(14px, -9px); }
}

/* ══════════════════════════════════════════════
 * BLOB COMPONENT
 * ══════════════════════════════════════════════ */

.blob-wrapper {
	filter: url(#glow);
	transform-origin: center bottom;
	will-change: transform, opacity;
}

#filter-toggle:checked ~ .blob-wrapper {
	filter: url(#edge-displacement) url(#glow);
}

.blob {
	aspect-ratio: 1;
	width: 200px;
	overflow: hidden;
	background-color: hsla(358, 0%, 100%, 1);
	background-image:
		radial-gradient(circle at var(--mesh-x-0) var(--mesh-y-0), var(--mesh-c-0) var(--mesh-s-start-0), transparent var(--mesh-s-end-0)),
		radial-gradient(circle at var(--mesh-x-1) var(--mesh-y-1), var(--mesh-c-1) var(--mesh-s-start-1), transparent var(--mesh-s-end-1)),
		radial-gradient(circle at var(--mesh-x-2) var(--mesh-y-2), var(--mesh-c-2) var(--mesh-s-start-2), transparent var(--mesh-s-end-2)),
		radial-gradient(circle at var(--mesh-x-3) var(--mesh-y-3), var(--mesh-c-3) var(--mesh-s-start-3), transparent var(--mesh-s-end-3));
	--depth: 0.3;
	--rotation: 0deg;
	animation: s1 7s linear infinite, s2 11s linear infinite, s3 13s linear infinite, mesh-gradient 10s linear infinite alternate;
}

/* Blob shape using CSS shape() */
.blob-shape {
	--angle0: 0deg;       --p1-0: 0deg;     --p2-0: 0deg;     --p3-0: 0deg;
	--angle1: 51.43deg;   --p1-1: 137.5deg; --p2-1: 222.5deg; --p3-1: 360.1deg;
	--angle2: 102.86deg;  --p1-2: 275deg;   --p2-2: 85deg;    --p3-2: 80.2deg;
	--angle3: 154.29deg;  --p1-3: 52.5deg;  --p2-3: 307.5deg; --p3-3: 200.3deg;
	--angle4: 205.71deg;  --p1-4: 190deg;   --p2-4: 170deg;   --p3-4: 320.4deg;
	--angle5: 257.14deg;  --p1-5: 327.5deg; --p2-5: 32.5deg;  --p3-5: 80.5deg;
	--angle6: 308.57deg;  --p1-6: 105deg;   --p2-6: 255deg;   --p3-6: 200.6deg;

	--rand0: calc(0.5 + 0.5 * (0.5 * sin(var(--s1) + var(--p1-0)) + 0.3 * sin(var(--s2) + var(--p2-0)) + 0.2 * sin(var(--s3) + var(--p3-0))));
	--d0: calc(50 * (1 - var(--depth)) + 50 * var(--rand0) * var(--depth));
	--x0: calc((50 + var(--d0) * cos(var(--rotation) + var(--angle0))) * 1%);
	--y0: calc((50 + var(--d0) * sin(var(--rotation) + var(--angle0))) * 1%);

	--rand1: calc(0.5 + 0.5 * (0.5 * sin(var(--s1) + var(--p1-1)) + 0.3 * sin(var(--s2) + var(--p2-1)) + 0.2 * sin(var(--s3) + var(--p3-1))));
	--d1: calc(50 * (1 - var(--depth)) + 50 * var(--rand1) * var(--depth));
	--x1: calc((50 + var(--d1) * cos(var(--rotation) + var(--angle1))) * 1%);
	--y1: calc((50 + var(--d1) * sin(var(--rotation) + var(--angle1))) * 1%);

	--rand2: calc(0.5 + 0.5 * (0.5 * sin(var(--s1) + var(--p1-2)) + 0.3 * sin(var(--s2) + var(--p2-2)) + 0.2 * sin(var(--s3) + var(--p3-2))));
	--d2: calc(50 * (1 - var(--depth)) + 50 * var(--rand2) * var(--depth));
	--x2: calc((50 + var(--d2) * cos(var(--rotation) + var(--angle2))) * 1%);
	--y2: calc((50 + var(--d2) * sin(var(--rotation) + var(--angle2))) * 1%);

	--rand3: calc(0.5 + 0.5 * (0.5 * sin(var(--s1) + var(--p1-3)) + 0.3 * sin(var(--s2) + var(--p2-3)) + 0.2 * sin(var(--s3) + var(--p3-3))));
	--d3: calc(50 * (1 - var(--depth)) + 50 * var(--rand3) * var(--depth));
	--x3: calc((50 + var(--d3) * cos(var(--rotation) + var(--angle3))) * 1%);
	--y3: calc((50 + var(--d3) * sin(var(--rotation) + var(--angle3))) * 1%);

	--rand4: calc(0.5 + 0.5 * (0.5 * sin(var(--s1) + var(--p1-4)) + 0.3 * sin(var(--s2) + var(--p2-4)) + 0.2 * sin(var(--s3) + var(--p3-4))));
	--d4: calc(50 * (1 - var(--depth)) + 50 * var(--rand4) * var(--depth));
	--x4: calc((50 + var(--d4) * cos(var(--rotation) + var(--angle4))) * 1%);
	--y4: calc((50 + var(--d4) * sin(var(--rotation) + var(--angle4))) * 1%);

	--rand5: calc(0.5 + 0.5 * (0.5 * sin(var(--s1) + var(--p1-5)) + 0.3 * sin(var(--s2) + var(--p2-5)) + 0.2 * sin(var(--s3) + var(--p3-5))));
	--d5: calc(50 * (1 - var(--depth)) + 50 * var(--rand5) * var(--depth));
	--x5: calc((50 + var(--d5) * cos(var(--rotation) + var(--angle5))) * 1%);
	--y5: calc((50 + var(--d5) * sin(var(--rotation) + var(--angle5))) * 1%);

	--rand6: calc(0.5 + 0.5 * (0.5 * sin(var(--s1) + var(--p1-6)) + 0.3 * sin(var(--s2) + var(--p2-6)) + 0.2 * sin(var(--s3) + var(--p3-6))));
	--d6: calc(50 * (1 - var(--depth)) + 50 * var(--rand6) * var(--depth));
	--x6: calc((50 + var(--d6) * cos(var(--rotation) + var(--angle6))) * 1%);
	--y6: calc((50 + var(--d6) * sin(var(--rotation) + var(--angle6))) * 1%);

	/* Midpoints for smooth curves */
	--mx0: calc((var(--x0) + var(--x1)) / 2); --my0: calc((var(--y0) + var(--y1)) / 2);
	--mx1: calc((var(--x1) + var(--x2)) / 2); --my1: calc((var(--y1) + var(--y2)) / 2);
	--mx2: calc((var(--x2) + var(--x3)) / 2); --my2: calc((var(--y2) + var(--y3)) / 2);
	--mx3: calc((var(--x3) + var(--x4)) / 2); --my3: calc((var(--y3) + var(--y4)) / 2);
	--mx4: calc((var(--x4) + var(--x5)) / 2); --my4: calc((var(--y4) + var(--y5)) / 2);
	--mx5: calc((var(--x5) + var(--x6)) / 2); --my5: calc((var(--y5) + var(--y6)) / 2);
	--mx6: calc((var(--x6) + var(--x0)) / 2); --my6: calc((var(--y6) + var(--y0)) / 2);

	/* Fallback: simple circle */
	clip-path: circle(50%);
	transform: scale(calc(0.5 + var(--depth) * 0.5));
}

/* Progressive enhancement: use fancy shape if supported */
@supports (clip-path: shape(from 0% 0%, move to 100% 100%)) {
	#shape-toggle:checked ~ .blob-wrapper .blob-shape {
		clip-path: content-box
			shape(
				from var(--mx6) var(--my6),
				curve to var(--mx0) var(--my0) with var(--x0) var(--y0),
				curve to var(--mx1) var(--my1) with var(--x1) var(--y1),
				curve to var(--mx2) var(--my2) with var(--x2) var(--y2),
				curve to var(--mx3) var(--my3) with var(--x3) var(--y3),
				curve to var(--mx4) var(--my4) with var(--x4) var(--y4),
				curve to var(--mx5) var(--my5) with var(--x5) var(--y5),
				curve to var(--mx6) var(--my6) with var(--x6) var(--y6)
			);
		border-radius: 0;
		transform: scale(calc(1 + var(--depth)));
	}
}

/* ══════════════════════════════════════════════
 * GRAIN OVERLAY
 * ══════════════════════════════════════════════ */

.grain-overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	background: white;
	filter: url(#filmGrain);
	mix-blend-mode: multiply;
	opacity: 0;
	animation: grain-jitter 1s infinite steps(1);
}

#grain-toggle:checked ~ .blob-wrapper .grain-overlay {
	opacity: 0.4;
}

/* Firefox fallback */
@-moz-document url-prefix() {
	.blob-wrapper { filter: none; }
	.grain-overlay { filter: none; }
}

/* ══════════════════════════════════════════════
 * RESPONSIVE
 * ══════════════════════════════════════════════ */

@media screen and (max-width: 768px) {
	#hero-layout {
		display: flex;
		flex-direction: column;
		padding-top: 80px;
		gap: 20px;
	}
	#hero-text {
		flex: none;
		width: 100%;
		padding-top: 0;
		text-align: left;
	}
	#hero-orb {
		grid-column: auto;
		flex: none;
		width: 100%;
		height: 280px;
		margin-left: 0;
	}
	.blob { width: 200px; }
}

/* Achievements section responsive */

/* Achievement card title and description styling */
/* Achievement card styling */
.achievement-card {
	display: flex;
	flex-direction: column;
	margin: 0;
	width: 100%;
	padding: var(--layout-content-padding) var(--layout-content-padding) 12px var(--layout-content-padding);
  backdrop-filter: blur(12px) saturate(150%) !important ;
-webkit-backdrop-filter: blur(12px) saturate(150%) !important ;
}

.achievement-card .glass-box-content {
	display: flex;
	flex-direction: column;
	padding: 0;
}

.achievement-title {
	margin: 0 0 3px 0;
}

.achievement-subtitle {
	font-family: var(--font-meta);
	font-size: var(--type-meta-xs-size);
	line-height: var(--type-meta-xs-line);
	font-weight: var(--type-meta-xs-weight);
	letter-spacing: var(--type-meta-xs-spacing);
}

.achievement-number {
	font-family: var(--font-heading);
	font-size: var(--type-card-title-size);
	line-height: var(--type-card-title-line);
	font-weight: var(--type-card-title-weight);
	letter-spacing: var(--type-card-title-spacing);
	color: inherit;
}

.achievement-description {
	margin: 0;
}

/* Achievement card content padding reduction */
#achievements .glass-box-card {
	padding: var(--layout-content-padding) var(--layout-content-padding) 12px var(--layout-content-padding) !important;
	min-height: unset !important;
}

#achievements .glass-box-content {
	padding: 0 !important;
}

/* 小屏手机 - 640px以下 */
@media screen and (max-width: 640px) {
	#achievements > div {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
		padding: 0 16px;
	}
}

/* 平板 - 641px到1023px */
@media screen and (min-width: 641px) and (max-width: 1023px) {
	#achievements > div {
		grid-template-columns: 1fr 1fr !important;
		gap: 24px !important;
		padding: 0 20px;
		max-width: var(--layout-content-mid-width) !important;
	}
}

/* 桌面 - 1024px以上 */
@media screen and (min-width: 1024px) {
	#achievements > div {
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 40px !important;
	}
}

/* ══════════════════════════════════════════════
 * AMBIGUITY TEXT - Simple glow effect
 * ══════════════════════════════════════════════ */

#ambiguity-text {
	position: relative;
	display: inline-block;
	text-shadow: 
		2px 0 8px hsla(150.88, 62%, 73%, 0.6),
		4px 0 16px hsla(150.88, 62%, 73%, 0.3),
		6px 0 24px hsla(150.88, 62%, 73%, 0.1);
}

/* ══════════════════════════════════════════════
 * SHAPE DECORATIONS - Circle, Triangle, Square
 * ══════════════════════════════════════════════ */

.shape-decorated {
	display: inline;
	margin-left: 2px;
	margin-right: 2px;
}

.shape-decoration {
	display: inline-block;
	vertical-align: middle;
	line-height: 1;
	margin-right: 4px;
}

/* Circle — green, 12px diameter */
.shape-circle {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: hsla(150.88, 62%, 73%, 1);
}

/* Triangle — 12px base, using SVG via content-box or CSS clip-path */
.shape-triangle {
	width: 12px;
	height: 12px;
	background: currentColor;
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* Square — 12px */
.shape-square {
	width: 12px;
	height: 12px;
	background: currentColor;
}

/* Ambiguity glow effect — reusable class matching hero's inline style */
.ambiguity-glow {
	text-shadow:
		1px 0 10px hsla(150.88, 62%, 73%, 1),
		2px 0 15px hsla(150.88, 62%, 73%, 1),
		4px 0 25px hsla(150.88, 62%, 73%, 0.9),
		6px 0 35px hsla(150.88, 62%, 73%, 0.75),
		8px 0 45px hsla(150.88, 62%, 73%, 0.5),
		10px 0 55px hsla(150.88, 62%, 73%, 0.3),
		12px 0 65px hsla(150.88, 62%, 73%, 0.15);
}

/* ══════════════════════════════════════════════
 * DISABLE: Fixed top card stacking & shrink on scroll
 * ══════════════════════════════════════════════ */

.glass-box-card-link {
	text-decoration: none;
	color: inherit;
	display: block;
	position: relative;
}

.glass-box-card-link .glass-box-card {
	position: relative;
	overflow: hidden;
}

/* ══════════════════════════════════════════════
 * EXPANDABLE BUTTON - Grows from dot to full button on hover
 * ══════════════════════════════════════════════ */

.glass-box-expand-button {
	position: absolute;
	bottom: 20px;
	left: 20px;
	display: inline-flex;
	align-items: center;
	gap: 0;
	padding: 0;
	background: var(--mingfei-teal);
	border: none;
	border-radius: 50px;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
	overflow: hidden;
	z-index: 5;
}

.button-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--mingfei-teal);
	flex-shrink: 0;
}

.button-text {
	display: inline-block;
	font-family: var(--font-meta);
	font-size: 14px;
	font-weight: 700;
	color: #0f141a;
	white-space: nowrap;
	opacity: 0;
	width: 0;
	transition: opacity 0.3s ease 0.1s, width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
	padding-right: 0;
}

.glass-box-card:hover .glass-box-expand-button {
	width: 200px;
	padding: 6px 22px;
}

.glass-box-card:hover .button-text {
	opacity: 1;
	width: auto;
	padding-right: 12px;
}

.hover-button {
	font-family: var(--font-meta);
	font-size: 14px;
	font-weight: 700;
	color: #0f141a;
	padding: 6px 22px;
	border: 2px solid var(--mingfei-teal);
	background-color: var(--mingfei-teal);
	border-radius: 20px;
	transition: all 0.3s ease;
	cursor: pointer;
	white-space: nowrap;
	display: inline-block;
}

.glass-box-card-link:hover .hover-button {
	background: var(--mingfei-teal);
	box-shadow: 0 0 20px var(--mingfei-teal-alpha-50);
}

.glass-box-card-top {
	display: none !important;
}

/* Reduce blur so curve line shows through cards better */
.glass-box-card {
	backdrop-filter: blur(4px) saturate(120%);
	-webkit-backdrop-filter: blur(4px) saturate(120%);
}

/* ══════════════════════════════════════════════
 * CARD HOVER: rotating border glow (replaces box-shadow)
 * ══════════════════════════════════════════════ */

@property --gradient-angle {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

@keyframes border-rotate {
	0%   { --gradient-angle: 0deg; }
	100% { --gradient-angle: 360deg; }
}

/* Remove old hover shadow */
.glass-box-card:hover {
	box-shadow: none !important;
}

/* Rotating border — hidden by default, visible on hover */
.glass-box-card {
	position: relative;
}

.glass-box-card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--border-radius);
	padding: 1.5px;
	background: conic-gradient(
		from var(--gradient-angle),
		rgba(255, 255, 255, 0.05) 0deg,
		rgba(255, 255, 255, 0.05) 60deg,
		rgba(255, 255, 255, 0.7) 120deg,
		rgba(255, 255, 255, 0.05) 180deg,
		rgba(255, 255, 255, 0.05) 240deg,
		rgba(255, 255, 255, 0.7) 300deg,
		rgba(255, 255, 255, 0.05) 360deg
	);
	-webkit-mask: conic-gradient(#000 0 0) content-box exclude, conic-gradient(#000 0 0);
	mask: conic-gradient(#000 0 0) content-box exclude, conic-gradient(#000 0 0);
	animation: border-rotate 4s linear infinite;
	pointer-events: none;
	z-index: 2;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.glass-box-card:hover::after {
	opacity: 1;
}

/* NDA card — red warning border on hover */
.glass-box-card[data-cursor="nda"]::after {
	background: conic-gradient(
		from var(--gradient-angle),
		rgba(169, 68, 66, 0.05) 0deg,
		rgba(169, 68, 66, 0.05) 60deg,
		rgba(169, 68, 66, 0.7) 120deg,
		rgba(169, 68, 66, 0.05) 180deg,
		rgba(169, 68, 66, 0.05) 240deg,
		rgba(169, 68, 66, 0.7) 300deg,
		rgba(169, 68, 66, 0.05) 360deg
	);
}

/* NDA card number styling */
.glass-box-card[data-cursor="nda"] .glass-box-top-number {
	display: none;
}

/* ══════════════════════════════════════════════
 * SCROLL-DRIVEN SVG CURVE
 * ══════════════════════════════════════════════ */

#scroll-curve {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
	overflow: visible;
	filter: url(#curve-displacement);
}

#scroll-path {
	stroke-dasharray: 99999;
	stroke-dashoffset: 99999;
	filter: url(#curve-glow);
}

/* ══════════════════════════════════════════════
 * CLARITY DOT — perfect circle at journey's end
 * ══════════════════════════════════════════════ */

#clarity-dot {
	display: flex;
	justify-content: flex-start;
	padding: 0;
	margin-left: -4px;
}

.clarity-shapes {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* width will be set by JS to align with email text */
}

.clarity-shape {
	width: 120px;
	height: 120px;
	opacity: 0;
	transform: scale(0);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.clarity-circle {
	border-radius: 50%;
	background-color: hsla(150.88, 62%, 73%, 1); /* fixed, matches line color */
}

.clarity-triangle {
	width: 120px;
	height: 120px;
	clip-path: none;
	background: none !important;
	position: relative;
}

.clarity-triangle svg {
	width: 100%;
	height: 100%;
}

.clarity-square {
	border-radius: 4px;
}

.clarity-arrow {
	opacity: 0;
	transform: translateX(-10px);
	transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Sequential reveal when visible */
#clarity-dot.visible .clarity-circle {
	opacity: 1;
	transform: scale(1);
}

#clarity-dot.visible .clarity-arrow:nth-of-type(1) {
	opacity: 1;
	transform: translateX(0);
	transition-delay: 0.3s;
}

#clarity-dot.visible .clarity-triangle {
	opacity: 1;
	transform: scale(1);
	transition-delay: 0.5s;
}

#clarity-dot.visible .clarity-arrow:nth-of-type(2) {
	opacity: 1;
	transform: translateX(0);
	transition-delay: 0.7s;
}

#clarity-dot.visible .clarity-square {
	opacity: 1;
	transform: scale(1);
	transition-delay: 0.9s;
}

/* Colors assigned by JS at page load */

/* Clarity shapes inside project card */
#clarity-card-image {
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	height: auto;
	min-height: 200px;
}

#clarity-card-image #clarity-dot {
	margin: 0;
	padding: 40px;
}

#clarity-card-image .clarity-shapes {
	gap: 20px;
	justify-content: center;
}

/* Back-to-top card: more transparent than regular cards */
#back-to-top-section .glass-box-card {
	background: var(--color-surface-glass-subtle);
	border-color: var(--color-border-glass-subtle);
	box-shadow: none;
	backdrop-filter: blur(4px) saturate(120%);
	-webkit-backdrop-filter: blur(4px) saturate(120%);
}

#clarity-dot.visible .clarity-dot-inner {
	opacity: 1;
	transform: scale(1);
}


/* ═══════════════════════════════════════════════════════════════
   2026 Project Pages — shared styles
   Scoped under body.page-project-2026
   ═══════════════════════════════════════════════════════════════ */

/* Centered single-column content container */
body.page-project-2026 .project-body {
  max-width: var(--layout-content-max-width);
  margin: 0 auto;
  padding-top: 160px;
}

/* Section spacing between major numbered sections */
body.page-project-2026 .project-body-section {
  margin-top: var(--project-section-to-section-gap);
}
body.page-project-2026 .project-body-section:first-child {
  margin-top: 0;
}

/* Hero card at top */
body.page-project-2026 .project-hero-card {
  display: flex;
  flex-direction: column;
  gap: var(--project-title-to-body-gap);
}

body.page-project-2026 .project-hero-card .hero-image {
  width: 100%;
  border-radius: var(--border-radius);
  overflow: hidden;
}

body.page-project-2026 .project-hero-card .hero-title {
  font-family: var(--font-heading);
  font-size: var(--type-card-title-size);
  line-height: var(--type-card-title-line);
  font-weight: var(--type-card-title-weight);
  letter-spacing: var(--type-card-title-spacing);
  color: var(--color-text-primary);
  margin: 0;
}

body.page-project-2026 .project-hero-card .hero-intro {
  display: flex;
  flex-direction: column;
  gap: var(--project-paragraph-to-paragraph-gap);
  margin-top: var(--project-subtitle-to-body-gap);
}

body.page-project-2026 .project-hero-card .hero-intro p {
  font-family: var(--font-body);
  font-size: var(--type-body-regular-size);
  line-height: var(--type-body-regular-line);
  font-weight: var(--type-body-regular-weight);
  letter-spacing: -0.8px;
  color: var(--color-text-secondary);
  margin: 0;
}

/* Key-value pairs */
body.page-project-2026 .project-key-values {
  display: flex;
  gap: var(--space-lg);
  padding-right: 10px;
  margin-top: var(--project-info-to-content-gap);
  border-top: none;
}

body.page-project-2026 .project-key-values .kv-column {
  flex: 1;
  min-width: 0;
}

body.page-project-2026 .project-key-values .kv-divider {
  width: 1px;
  background: var(--color-system-muted-700);
  align-self: stretch;
  flex-shrink: 0;
}

body.page-project-2026 .project-key-values .kv-key {
  font-family: var(--font-heading);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 2px;
}

body.page-project-2026 .project-key-values .kv-value {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--color-text-secondary);
  margin: 0;
}

/* Section titles (numbered) */
body.page-project-2026 .project-body-section .section-title {
  font-family: var(--font-heading);
  font-size: 28px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: -0.6px;
  color: var(--color-text-primary);
  margin: 0 0 var(--project-title-to-body-gap);
  padding-left: 0;
}
body.page-project-2026 .project-body-section .section-title .section-number {
  display: inline;
  margin-right: 8px;
}

/* Body text within sections */
body.page-project-2026 .project-body-section .section-text {
  font-family: var(--font-body);
  font-size: var(--type-body-regular-size);
  line-height: var(--type-body-regular-line);
  font-weight: var(--type-body-regular-weight);
  letter-spacing: var(--type-body-regular-spacing);
  color: var(--color-text-secondary);
  margin: 0 0 var(--project-paragraph-to-paragraph-gap);
}
body.page-project-2026 .project-body-section .section-text:last-child {
  margin-bottom: 0;
}

/* Media blocks (images) */
body.page-project-2026 .project-media-block {
  margin-top: var(--project-text-to-image-gap);
  margin-bottom: var(--project-image-to-next-text-gap);
}

/* Image scroll frame */
body.page-project-2026 .project-image-scroll-frame {
  position: relative;
  z-index: 1;
  max-height: 420px;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: var(--border-radius);
  scrollbar-color: var(--mingfei-teal) transparent;
}
body.page-project-2026 .project-image-scroll-frame::-webkit-scrollbar {
  width: 6px;
}
body.page-project-2026 .project-image-scroll-frame::-webkit-scrollbar-track {
  background: transparent;
}
body.page-project-2026 .project-image-scroll-frame::-webkit-scrollbar-thumb {
  background: var(--mingfei-teal);
  border-radius: 3px;
}
body.page-project-2026 .project-image-scroll-frame img {
  width: 100%;
  height: auto;
  display: block;
}

body.page-project-2026 .project-media-block .media-caption {
  font-family: var(--font-body);
  font-size: var(--type-meta-s-size);
  line-height: var(--type-meta-s-line);
  color: var(--color-text-secondary);
  font-style: italic;
  margin-top: var(--project-image-to-caption-gap);
}

/* YouTube embed block */
body.page-project-2026 .project-video-block {
  margin-top: var(--project-text-to-image-gap);
  margin-bottom: var(--project-image-to-next-text-gap);
}
body.page-project-2026 .project-video-block .video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  border-radius: var(--border-radius);
}
body.page-project-2026 .project-video-block .video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
body.page-project-2026 .project-video-block .video-fallback {
  margin-top: var(--space-md);
}
body.page-project-2026 .project-video-block .video-fallback p {
  font-family: var(--font-body);
  font-size: var(--type-body-regular-size);
  line-height: var(--type-body-regular-line);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-sm);
}
body.page-project-2026 .project-video-block .btn-youtube {
  display: inline-block;
  padding: 12px 24px;
  background: #cc0000;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
}
body.page-project-2026 .project-video-block .btn-youtube:hover {
  background: #aa0000;
  color: white;
}

/* Attachment links */
body.page-project-2026 .project-attachment-link {
  color: var(--mingfei-teal);
  text-decoration: underline;
}
body.page-project-2026 .project-attachment-link:hover {
  color: var(--color-text-primary);
}
body.page-project-2026 .ext-link-icon {
  display: inline-block;
  margin-left: 0.25em;
  vertical-align: middle;
  opacity: 0.85;
}

/* Next project link */
body.page-project-2026 .project-next {
  margin-top: var(--project-section-to-section-gap);
  padding: var(--space-2xl) 0;
}
body.page-project-2026 .project-next a {
  color: var(--mingfei-teal);
  font-family: var(--font-heading);
  font-size: var(--type-heading-m-size);
  line-height: var(--type-heading-m-line);
  font-weight: var(--type-heading-m-weight);
  letter-spacing: var(--type-heading-m-spacing);
  text-decoration: none;
  display: inline-block;
  padding: 10px;
}
body.page-project-2026 .project-next a:hover {
  background-color: var(--mingfei-teal);
  color: var(--color-text-on-accent);
}
body.page-project-2026 .project-next .next-label {
  font-size: 14px;
  margin-right: 10px;
}

/* Image modal overrides for 2026 Project Pages */
body.page-project-2026 #img-modal-overlay {
  background: rgba(0, 0, 0, 0.85);
  overflow-y: auto;
  align-items: flex-start;
  padding: 60px 0 24px;
}
body.page-project-2026 #img-modal-content {
  max-width: 80vw;
  max-height: none;
  margin: auto;
}
body.page-project-2026 #img-modal-content img {
  max-width: 80vw;
  max-height: none;
  height: auto;
  object-fit: contain;
}
body.page-project-2026 #img-modal-close {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 10000;
}

/* Image hover — rotating border for zoom targets */
body.page-project-2026 .project-image-zoom-target {
  position: relative;
  display: block;
  border-radius: var(--border-radius);
  overflow: visible;
  isolation: isolate;
}
body.page-project-2026 .project-image-zoom-target::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--border-radius);
  padding: 1.5px;
  background: conic-gradient(
    from var(--gradient-angle, 0deg),
    rgba(255, 255, 255, 0.05) 0deg,
    rgba(255, 255, 255, 0.05) 60deg,
    rgba(255, 255, 255, 0.7) 120deg,
    rgba(255, 255, 255, 0.05) 180deg,
    rgba(255, 255, 255, 0.05) 240deg,
    rgba(255, 255, 255, 0.7) 300deg,
    rgba(255, 255, 255, 0.05) 360deg
  );
  -webkit-mask: conic-gradient(#000 0 0) content-box exclude, conic-gradient(#000 0 0);
  mask: conic-gradient(#000 0 0) content-box exclude, conic-gradient(#000 0 0);
  animation: border-rotate 4s linear infinite;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.3s ease;
}
body.page-project-2026 .project-image-zoom-target:hover::after {
  opacity: 1;
}

/* Responsive — 2026 Project Pages */
@media (max-width: 767px) {
  body.page-project-2026 .project-body {
    padding-left: var(--project-mobile-content-padding);
    padding-right: var(--project-mobile-content-padding);
  }
  body.page-project-2026 .project-hero-card .hero-title {
    font-size: 28px;
    letter-spacing: -1px;
  }
  body.page-project-2026 .project-key-values {
    flex-direction: column;
    gap: var(--space-lg);
  }
  body.page-project-2026 .project-key-values .kv-divider {
    width: 100%;
    height: 1px;
    align-self: auto;
  }
  body.page-project-2026 .project-body-section .section-title {
    font-size: 22px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  body.page-project-2026 .project-body {
    padding-left: var(--project-tablet-content-padding);
    padding-right: var(--project-tablet-content-padding);
  }
}