/* =========================================================
   Laniakea — main.css (Organized / Maintainable)
   规则：重复定义保留原文件靠下版本；其余仅重组归类
   ========================================================= */

/* =========================
   01. Root Tokens
   ========================= */
:root{
  /* Let the UA render built-in controls in both schemes */
  color-scheme: light;

  /* Layout */
  --maxw: 980px;
  --pad-x: 22px;
  --nav-h: 56px;

  /* Radius */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;

  /* Type */
  --fs-1: 12px;
  --fs-2: 13px;
  --fs-3: 15px;
  --fs-4: 17px;
  --fs-5: 20px;
  --fs-6: 28px;
  --fs-7: 44px;

  /* Motion */
  --ease: cubic-bezier(.2,.8,.2,1);
  --t-fast: 160ms;
  --t-med: 260ms;

  /* Light scheme defaults */
  --bg: #ffffff;
  --surface: rgba(255,255,255,.72);
  --text: #1D1D1F;
  --muted: #6e6e73;
  --border: rgba(0,0,0,.10);
  --shadow: 0 14px 40px rgba(0,0,0,.08);
  --link: #2A64C5;
  --focus: rgba(0,102,204,.35);

  /* Apple-like error/footer tokens */
  --apple-container: 980px;
  --apple-pad-x: 22px;
  --apple-divider: rgba(0,0,0,.16);
  --apple-muted: #6e6e73;
}

/* =========================
   02. Base Reset
   ========================= */
*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
               "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video{ display: block; max-width: 100%; }

a{ color: var(--link); text-decoration: none; }
a:hover{ text-decoration: underline; text-underline-offset: 3px; }

:focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

h1,h2,h3,p{ margin: 0; }

/* =========================
   03. Global Helpers
   ========================= */
.container{
  width: min(var(--maxw), calc(100% - var(--pad-x) * 2));
  margin: 0 auto;
}

.hr{
  height: 1px;
  background: var(--border);
  border: 0;
  margin: 0;
}

.section{
  padding: 96px 0;
}

.section-inner{
  width: min(var(--maxw), calc(100% - var(--pad-x) * 2));
  margin: 0 auto;
  text-align: center;
}

.section-title{
  font-size: 30px;
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.section-desc{
  margin-top: 14px;
  font-size: 25px;
  line-height: 1.8;
  color: var(--muted);
  max-width: 72ch;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 560px){
  .section-desc{
    font-size: clamp(16px, 4.2vw, 19px);
    line-height: 1.65;
    letter-spacing: -0.01em;
    max-width: 34ch;
    margin-left: auto;
    margin-right: auto;
  }
}

/* =========================
   04. Header / Navigation
   ========================= */
.site-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3000;

  background: #fbfbfd;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);

  border: 0;
  box-shadow: none;
}

.site-header .nav{
  height: 56px;
  width: min(980px, calc(100% - 44px));
  margin: 0 auto;

  display: flex;
  align-items: center;
  gap: 18px;
}

.site-header .brand{
  display: inline-flex;
  align-items: center;
  white-space: nowrap;

  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;

  color: #323233;
  text-decoration: none;
  transition: color 200ms ease;
}

.site-header .menu{
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-header .menu a{
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;

  font-size: 13px;
  letter-spacing: -0.01em;

  color: #323233;
  text-decoration: none;
  transition: color 200ms ease;
}

.site-header .mobile-links a{
  color: #323233;
  text-decoration: none;
  transition: color 200ms ease;
}

.site-header .brand:visited,
.site-header .menu a:visited{
  color: #323233;
}

@media (hover: hover){
  .site-header .brand:hover,
  .site-header .menu a:hover,
  .site-header .mobile-links a:hover{
    color: #000000;
  }
}

.site-header .brand:focus-visible,
.site-header .menu a:focus-visible{
  outline: 2px solid rgba(0,0,0,.22);
  outline-offset: 3px;
  border-radius: 10px;
}

/* Mobile menu defaults */
.menu-btn,
.mobile-panel{
  display: none;
}

.mobile-panel{
  position: fixed;
  left: 0;
  right: 0;
  top: var(--nav-h);
  bottom: 0;
  transform: translateY(-8px);
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  background: #FFFFFF;
  transition: transform 320ms ease, opacity 220ms ease, visibility 0s linear 320ms;
}

.site-header.is-open .mobile-panel{
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
  transition: transform 320ms ease, opacity 220ms ease, visibility 0s;
}

@media (max-width: 560px){
  .site-header .menu{ display: none !important; }

  .site-header .nav{
    position: relative;
    z-index: 2100;
  }

  .menu-btn{
    display: inline-flex !important;
    margin-left: auto;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;
    padding: 0;

    border: 0;
    background: transparent;
    border-radius: 10px;
    -webkit-tap-highlight-color: transparent;

    position: relative;
    z-index: 2200;
  }

  .menu-icon{
    position: relative;
    width: 18px;
    height: 12px;
    display: block;
  }

  .menu-icon::before,
  .menu-icon::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;

    height: 2px;
    border-radius: 2px;
    background: #333333;

    transition:
      transform 320ms ease,
      top 320ms ease,
      bottom 320ms ease,
      background 200ms ease;
    transform-origin: 50% 50%;
  }

  .menu-icon::before{ top: 1px; }
  .menu-icon::after{ bottom: 1px; }

  .menu-btn[aria-expanded="true"] .menu-icon::before{
    top: 5px;
    transform: rotate(45deg);
  }

  .menu-btn[aria-expanded="true"] .menu-icon::after{
    bottom: 5px;
    transform: rotate(-45deg);
  }

  .mobile-panel{
    display: block !important;
    z-index: 2500;
    border: 0;
    box-shadow: none;
    height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-links{
    display: none !important;
    padding: 20px 20px calc(env(safe-area-inset-bottom) + 24px);
    gap: 14px;
  }

  .site-header.is-open .mobile-links{
    display: grid !important;
  }

  .mobile-links a{
    display: block;
    padding: 12px 0;

    font-size: 17px;
    letter-spacing: -0.01em;

    color: #333333;
    text-decoration: none;

    -webkit-tap-highlight-color: transparent;
    background: transparent;
  }

  .mobile-links a:active{
    background: transparent;
  }

  .menu-btn:focus-visible,
  .mobile-links a:focus-visible{
    outline: 2px solid rgba(0,0,0,.22);
    outline-offset: 3px;
    border-radius: 10px;
  }

  body.menu-open{
    overflow: hidden;
    height: 100dvh;
  }
}

@media (max-width: 560px) and (hover: hover){
  .menu-btn:hover .menu-icon::before,
  .menu-btn:hover .menu-icon::after{
    background: #000000;
  }
}

@media (min-width: 561px){
  .site-header .mobile-panel,
  .site-header #mobileNav{
    display: none !important;
  }

  body.menu-open{
    overflow: visible !important;
  }
}

/* =========================
   05. Hero
   ========================= */
.hero{
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F5F5F7;

  padding: 24px 0;
}

.hero-inner{
  width: min(980px, calc(100% - 44px));
  margin: 0 auto;
  text-align: center;
}

.hero h1{
  font-size: 72px;
}

.hero h3{
  font-size: 72px;
  text-align: center;
}

.hero p{
  margin-top: 16px;
  font-size: 19px;
  line-height: 1.7;
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
  color: #6C6C6D;
}

@media (max-width: 560px){
  .hero{
    min-height: calc(92svh - var(--nav-h));
    padding: 18px 0;
  }

  .hero-inner{
    width: min(720px, calc(100% - 40px));
  }

  .hero h1{
    font-size: 35px;
  }

  .hero p{
    font-size: 17px;
    color: #6C6C6D;
  }
}

/* =========================
   06. Features
   ========================= */
.features{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 300px));
  justify-content: center;
  justify-items: stretch;
  gap: 24px;
  margin-top: 42px;
}

.feature{
  border: 1px solid rgba(0,0,0,.16);
  border-radius: 12px;
  background: white;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  padding: 22px 18px;
  text-align: center;
}

.feature h3{
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

.feature p{
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.6;
  color: #6e6e73;
}

@media (max-width: 600px){
  .features{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .feature{
    max-width: none;
  }
}

/* =========================
   07. Footer
   ========================= */
.site-footer{
  padding: 28px 0 34px;
  border-top: 0 !important;
  background: #F5F5F7;
}

.footer-divider{
  width: min(980px, calc(100% - 44px));
  margin: 0 auto;
  height: 1px;
  background: rgba(0,0,0,.16);
}

.footer-content{
  width: min(980px, calc(100% - 44px));
  margin: 0 auto;
  text-align: center;
  padding: 18px 0 28px;
  font-size: 12px;
  color: #6e6e73;
}

.footer-content p{ margin: 0; }
.footer-content p + p{ margin-top: 6px; }

.site-footer a,
.site-footer a:visited{
  color: inherit;
  text-decoration: none;
}

.site-footer a:hover{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-grid{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 16px;
}

.footer-center{ text-align: center; }
.footer-center p{ margin: 0; }
.footer-center p + p{ margin-top: 6px; }

.footer-locale{
  display: flex;
  justify-content: flex-end;
}

.footer-row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.footer-left{
  text-align: left;
}

.footer-left p{
  margin: 0;
}

.footer-left p + p{
  margin-top: 6px;
}

.footer-right{
  display: flex;
  justify-content: flex-end;
}

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

.icp-link:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-locale-link{
  color: #1d1d1f;
  text-decoration: none;
  padding: 4px 0;
}

.footer-locale-link:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 560px){
  .footer-grid{
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .footer-locale{
    justify-content: center;
  }

  .footer-row{
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-right{
    justify-content: flex-start;
  }
}

/* =========================
   08. Motion Preferences
   ========================= */
@media (prefers-reduced-motion: reduce){
  *{
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* =========================
   09. Error / System Pages
   ========================= */
.main{
  width: min(var(--apple-container), calc(100% - var(--apple-pad-x) * 2));
  margin: 0 auto;
  padding-top: 112px;
  padding-bottom: 160px;
}

.section-headline.typography-headline{
  margin: 0;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #1d1d1f;
}

.error-subhead{
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--apple-muted);
  max-width: 60ch;
}

.page-not-found #main{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100svh - var(--nav-h));
  padding: 0 22px;
  text-align: center;
}

.page-not-found .section-headline.typography-headline{
  margin: 0;
  font-size: 40px;
  color: #1d1d1f;
}

.page-50x #main{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100svh - var(--nav-h));
  padding: 0 22px;
  text-align: center;
}

.page-50x .section-headline.typography-headline{
  margin: 0;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #1d1d1f;
}

.page-50x .error-subhead{
  display: block;
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 60ch;
}

@media (max-width: 560px){
  .main{
    padding-top: 88px;
    padding-bottom: 120px;
  }
}

/* =========================
   10. Choose Country / Region
   ========================= */
.choose-main{
  padding: 44px 0 96px;
  background: #ffffff;
}

.choose-inner{
  width: min(var(--maxw), calc(100% - var(--pad-x) * 2));
  margin: 0 auto;
}

.choose-top{
  padding-top: 0;
}

.choose-brand{
  display: inline-block;
  font-size: 17px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #1d1d1f;
  text-decoration: none;
}

.choose-title{
  margin: 4px 0 0;
  font-size: 20px;
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #1F1F1F;
}

.choose-divider{
  margin-top: 18px;
  height: 1px;
  background: #d2d2d7;
}

.choose-category{
  margin-top: 28px;
}

.choose-category-title{
  font-size: 24px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #1d1d1f;
}

.choose-list{
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.choose-item{
  padding: 10px 0;
}

.choose-link{
  font-size: 17px;
  line-height: 1.4;
  color: #0066cc;
  text-decoration: none;
}

.choose-link:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 560px){
  .choose-main{ padding: 32px 0 72px; }
  .choose-title{ font-size: 20px; }
  .choose-category-title{ font-size: 20px; }
}

/* =========================
   11. Careers
   ========================= */
.jobs-section{
  padding: 56px 0 88px;
}

.jobs-inner{
  width: min(var(--maxw), calc(100% - var(--pad-x) * 2));
  margin: 0 auto;
}

.jobs-title{
  margin: 0;
  font-size: 30px;
  text-align: center;
}

.jobs-count{
  margin: 10px 0 18px;
  font-size: 20px;
  color: #6e6e73;
  text-align: center;
}

.jobs-list{
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid rgba(0,0,0,.16);
}

.job-item{
  margin: 0;
}

.job-row{
  display: flex;
  grid-template-columns: 260px minmax(0, 1fr);
  align-items: start;
  justify-content: space-between;
  gap: 12px;

  padding: 18px 0;
  border-top: none;
  border-bottom: 1px solid rgba(0,0,0,.16);

  color: inherit;
  text-decoration: none;

  width: 100%;
  box-sizing: border-box;
}

.job-row:hover{
  text-decoration: none;
}

.job-row:last-of-type{
  border-bottom: 1px solid rgba(0,0,0,.16);
}

.job-left{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.job-right{
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  text-align: right;
  min-width: 120px;
}

.job-name{
  margin: 0;
  font-size: 25px;
  font-weight: 600;
  color: #1d1d1f;
}

.job-dept,
.job-date{
  margin-top: 6px;
  font-size: 18px;
  color: #6e6e73;
}

.job-loc{
  font-size: 18px;
  color: #1d1d1f;
  margin-top: 6px;
}

/* Job Detail blocks */
.job-page{
  background: #ffffff;
}

.job-wrap{
  width: min(980px, calc(100% - 44px));
  margin: 0 auto;
}

.job-hero{
  padding: 64px 0 20px;
  text-align: center;
}

.job-title{
  display: inline-block;   /* 让文字宽度可测 */
  max-width: 100%;
  width: auto;
  margin: 0;
  text-align: center;
  line-height: 1.1;
  font-size: 52px;         /* 上限 */
  white-space: nowrap;     /* 强制单行 */
  overflow: visible;       /* 不要先裁掉 */
}

.job-submeta{
  margin-top: 12px;
  gap: 14px 24px;
  font-size: 18px;
  color: #6e6e73;
  justify-content: center;
}

.job-sections{
  padding: 14px 0 56px;
}

.job-sections .job-value p{
  white-space: pre-wrap;   /* 保留换行和空格 */
}

.job-label{
  flex: 0 0 260px;
  max-width: 260px;
  font-weight: 600;
  font-size: 30px;
  line-height: 1.45;
  color: #111111;
  white-space: normal;
  word-break: break-word;
}

.job-value{
  flex: 1 1 auto;
  font-size: 18px;
  line-height: 1.75;
  color: #1d1d1f;
  text-align: left;
  max-width: none;
}

.job-value p{
  margin: 0;
}

.job-value p + p{
  margin-top: 10px;
}

.job-list{
  margin: 0;
  padding-left: 18px;
}

.job-list li{
  margin: 6px 0;
}

.job-equal{
  margin-top: 22px;
  font-size: 13px;
  line-height: 1.7;
  color: #6e6e73;
}

.job-Submit{
  font-size: 15px;
  line-height: 1.75;
  color: #1d1d1f;
  align-items: center;
}

.job-row,
.jobs-list{
  border-bottom-color: rgba(0,0,0,.16) !important;
}

@media (max-width: 700px){
  .job-row{
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .job-right{
    flex: 0 0 auto;
    width: 100%;
    text-align: left;
  }
}

@media (max-width: 760px){
  .job-page,
  .job-wrap{
    width: calc(100% - 32px);
    margin: 0 auto;
    padding: 0;
  }

  .job-hero{
    padding: 44px 0 18px;
  }

  .job-row{
    display: flex;
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(0,0,0,.16);
  }

  .job-label{
    flex: none;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
    color: #111111;
    white-space: normal;
    word-break: break-word;
  }

  .job-value{
    flex: none;
    width: 100%;
    max-width: 100%;
    font-size: 15px;
    line-height: 1.65;
    color: #1d1d1f;
    text-align: left;
  }

  .job-title{
    font-size: 30px;
    color: #1d1d1f;
  }

  .job-value p{
    margin: 0;
  }

  .job-value p + p{
    margin-top: 10px;
  }

  .job-list{
    list-style-position: outside;
    padding-left: 18px;
  }

  .job-list li{
    margin: 6px 0;
  }

  .job-equal{
    font-size: 13px;
    line-height: 1.7;
    margin-top: 18px;
    padding-bottom: 32px;
    text-align: left;
  }

  .job-Submit{
    font-size: 15px;
    color: #1d1d1f;
    align-items: center;
  }
}

@media (max-width: 760px){
  .job-wrap{
    width: calc(100% - 32px); /* 与分割线容器同宽 */
    margin: 0 auto;
  }

  .job-title{
    width: 100%;
    margin: 0 auto;
    text-align: center;
    line-height: 1.12;
    font-size: 34px;

    white-space: normal;        /* 允许换行 */
    overflow-wrap: anywhere;
    word-break: break-word;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;      /* 最多两行 */
    overflow: hidden;
  }

  .job-title.is-measuring{
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }
}

/* =========================
   Apple-like Motion Additions
   ========================= */

:root{
  --motion-apple-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-apple-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-apple-fast: 220ms;
  --motion-apple-mid: 420ms;
  --motion-apple-slow: 900ms;
}

html:focus-within{
  scroll-behavior: smooth;
}

@keyframes apple-fade-up{
  0%{
    opacity: 0;
    transform: translateY(18px);
  }
  100%{
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes apple-settle{
  0%{
    opacity: 0;
    transform: translateY(14px) scale(0.992);
  }
  100%{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes apple-section-reveal{
  0%{
    opacity: 0;
    transform: translateY(26px) scale(0.988);
  }
  100%{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes apple-card-reveal{
  0%{
    opacity: 0;
    transform: translateY(22px);
  }
  100%{
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero staged entrance */
.hero-inner{
  animation: apple-settle var(--motion-apple-slow) var(--motion-apple-ease-out) both;
}

.hero h1,
.hero h3,
.hero p{
  opacity: 0;
  transform: translateY(18px);
  animation: apple-fade-up 900ms var(--motion-apple-ease-out) both;
}

.hero h1,
.hero h3{
  animation-delay: 120ms;
}

.hero p{
  animation-delay: 240ms;
}

/* Header + links micro transition */
.site-header{
  transition:
    background-color var(--motion-apple-mid) var(--motion-apple-ease-in-out),
    border-color var(--motion-apple-mid) var(--motion-apple-ease-in-out),
    backdrop-filter var(--motion-apple-mid) var(--motion-apple-ease-in-out),
    -webkit-backdrop-filter var(--motion-apple-mid) var(--motion-apple-ease-in-out);
}

.site-header .brand,
.site-header .menu a,
.site-header .mobile-links a,
.choose-link,
.footer-locale-link,
.icp-link{
  transition:
    color var(--motion-apple-fast) var(--motion-apple-ease-in-out),
    opacity var(--motion-apple-fast) var(--motion-apple-ease-in-out);
}

@media (hover: hover){
  .site-header .menu:hover a{
    opacity: .58;
  }

  .site-header .menu:hover a:hover{
    opacity: 1;
  }

  .feature{
    transition:
      transform var(--motion-apple-mid) var(--motion-apple-ease-out),
      box-shadow var(--motion-apple-mid) var(--motion-apple-ease-out),
      border-color var(--motion-apple-mid) var(--motion-apple-ease-in-out);
  }

  .feature:hover{
    transform: translateY(-6px);
    box-shadow: 0 22px 42px rgba(0,0,0,.12);
    border-color: rgba(0,0,0,.22);
  }
}

/* Scroll-driven reveal (supported browsers) */
@supports (animation-timeline: view()){
  .section-inner,
  .choose-inner,
  .jobs-inner,
  .main{
    opacity: 0;
    transform: translateY(26px) scale(0.988);
    animation: apple-section-reveal linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 34%;
    will-change: transform, opacity;
  }

  .features .feature{
    opacity: 0;
    transform: translateY(22px);
    animation: apple-card-reveal linear both;
    animation-timeline: view();
    animation-range: entry 14% cover 34%;
    will-change: transform, opacity;
  }

  .features .feature:nth-child(2){
    animation-range: entry 16% cover 36%;
  }

  .features .feature:nth-child(3){
    animation-range: entry 18% cover 38%;
  }

  .jobs-list .job-item{
    opacity: 0;
    transform: translateY(14px);
    animation: apple-card-reveal linear both;
    animation-timeline: view();
    animation-range: entry 15% cover 32%;
  }
}

/* Reduced motion safety */
@media (prefers-reduced-motion: reduce){
  html:focus-within{
    scroll-behavior: auto;
  }

  .hero-inner,
  .hero h1,
  .hero h3,
  .hero p,
  .section-inner,
  .choose-inner,
  .jobs-inner,
  .main,
  .features .feature,
  .jobs-list .job-item{
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* =========================
   Header + Hero viewport fix
   1) 解决被固定 Header 遮挡
   2) Hero 在桌面/手机都接近一屏（Apple 风格）
   ========================= */

/* 固定 Header 占位，避免首屏内容被盖住 */
body{
  padding-top: var(--nav-h);
}

/* 首页 Hero：接近可视区一屏（扣掉 Header 高度） */
.hero{
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  min-height: calc(100dvh - var(--nav-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 3vh, 28px) 0;
}

/* 错误页首屏同样保持接近一屏 */
.page-not-found #main,
.page-50x #main{
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  min-height: calc(100dvh - var(--nav-h));
}

/* 手机端微调，保持与苹果官网类似的“几乎满屏”观感 */
@media (max-width: 560px){
  .hero{
    min-height: calc(100vh - var(--nav-h));
    min-height: calc(100svh - var(--nav-h));
    min-height: calc(100dvh - var(--nav-h));
    padding: clamp(12px, 2.8vh, 20px) 0;
  }
}

.job-row > .resume:only-child{
  grid-column: 1 / -1;
  justify-self: center;
  margin: 0 auto;
  width: min(760px, 100%);
  text-align: center;
}

.job-row > .resume:only-child p{
  margin: 0;
}

@media (max-width: 760px){
  .job-row > .resume:only-child{
    grid-column: 1 / -1;
    justify-self: center;
    margin: 0 auto;
    width: calc(100% - 32px);
    text-align: center;
  }

  .job-row > .resume:only-child p{
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* 手机横屏（仅 phone 场景） */
@media (max-width: 932px) and (max-height: 500px) and (orientation: landscape){
  .job-row > .resume:only-child{
    grid-column: 1 / -1;
    justify-self: center;
    margin: 0 auto;
    width: min(
      900px,
      calc(100% - 48px - env(safe-area-inset-left) - env(safe-area-inset-right))
    );
    text-align: center;
  }

  .job-row > .resume:only-child p{
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* 容器：features auto */
.features.auto{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 24px;
}

/* 卡片：feature reveal auto */
.feature.reveal.auto{
  box-sizing: border-box;
  flex: 0 1 auto;
  width: fit-content;
  min-width: 320px;
  max-width: 1000px;
  text-align: left;
}

/* 内容换行保护 */
.feature.reveal.auto p{
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.7;
  font-size: 20px;
  color: #000000
}

/* 你这个例子里 Metronome 标题居中 */
.feature.reveal.auto h3{
  text-align: center;
  font-size: 28px;
}

/* 桌面 + 手机都保留换行和空格 */
#intro .feature.reveal.auto p{
  white-space: pre-wrap;
}

/* 手机端再强制一次，防止被其他 media 规则覆盖 */
@media (max-width: 600px){
  #intro .feature.reveal.auto p{
    white-space: pre-wrap !important;
  }
}

.job-sections .job-value p{
  white-space: pre-wrap;   /* 保留换行 + 空格 */
  overflow-wrap: anywhere; /* 防止手机端长串文本溢出 */
  word-break: break-word;
}

@media (max-width: 760px){
  .job-sections .job-value p{
    white-space: pre-wrap;
    font-size: 15px;
    line-height: 1.7;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

.footer-left .icp-row{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.footer-left .icp-icon{
  height: 1em;   /* 与“沪ICP备...”文字同高度 */
  width: auto;
  display: inline-block;
}

/* Universe.jpg 作为 hero 背景层，不影响文字布局 */
.hero.reveal{
  position: relative;
  overflow: hidden;
}

.hero.reveal > .hero-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;      /* 自动填满 hero */
  object-position: center;
  z-index: 0;
  pointer-events: none;
}

.hero.reveal > .hero-inner{
  position: relative;
  z-index: 1;             /* 文字始终在图片上层 */
}

/* 仅这个 hero 的标题和描述变白 */
.hero.hero-homepage > .hero-inner h1,
.hero.hero-homepage > .hero-inner p{
  color: #fff;
}

/* 只给 Universe 那个 hero 加遮罩 */
.hero.hero-homepage::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.22);
  z-index: 0;
}

.hero.hero-homepage > .hero-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero.hero-homepage > .hero-inner{
  position: relative;
  z-index: 1;
}

/* 仅这个 hero 的标题和描述变白 */
.hero.hero-Careers > .hero-inner h1,
.hero.hero-Careers > .hero-inner p{
  color: #fff;
}

/* 只给 Universe 那个 hero 加遮罩 */
.hero.hero-Careers::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.22);
  z-index: 0;
}

.hero.hero-Careers > .hero-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero.hero-Careers > .hero-inner{
  position: relative;
  z-index: 1;
}

:root {
  --apple-gap: 12px;
  --apple-side: 12px;
  --apple-radius: 18px;
  --section-gap: 12px;
  --apple-card-max: 560px; /* 调小这个值，卡片会整体变小 */
}

/* ===== Page / Section ===== */
.apple-home-body {
  padding: 0 var(--apple-side) var(--apple-gap);
  background: #fff;
}

.apple-body-section + .apple-body-section {
  margin-top: var(--apple-gap);
}

/* 统一上下间距 */
.hero-homepage {
  margin-block: var(--section-gap);
}

/* Header 下方第一个 hero 不加顶部间距 */
#site-header + .hero-homepage,
header + .hero-homepage,
body > .hero-homepage:first-of-type {
  margin-top: 0;
}

/* ===== Grid: 每行最多2个 ===== */
.apple-square-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 平分宽度 */
  justify-content: center;
  gap: var(--apple-gap);
}

/* ===== Card ===== */
.apple-square-card {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f5f5f7;
  color: #1d1d1f;
  isolation: isolate;
}

.apple-square-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.apple-square-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;     /* 水平居中 */
  justify-content: center; /* 垂直居中 */
  text-align: center;
  padding: clamp(20px, 3vw, 28px);
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.25),
    rgba(0, 0, 0, 0.05) 50%,
    rgba(0, 0, 0, 0.15)
  );
  color: #fff;
}

/* ===== Typography ===== */
.apple-square-content h2,
.apple-card-title {
  width: 100%;
  margin: 0;
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(30px, 3.2vw, 40px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.015em;
  min-height: 2.1em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.apple-square-content p,
.apple-card-desc {
  width: 100%;
  margin: 8px 0 0;
  font-family: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(17px, 1.55vw, 21px);
  line-height: 1.24;
  font-weight: 400;
  letter-spacing: 0;
  min-height: 2.48em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.apple-card-desc {
  max-inline-size: min(100%, 36ch); /* 约等于 “Inspired by the power of connection.” 这一行长度 */
  margin-inline: auto;              /* 你当前是居中排版时用 */
  white-space: normal;              /* 允许自动换行 */
  overflow-wrap: anywhere;          /* 防止超长单词撑破 */
}

/* ===== CTA ===== */
.apple-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  background: #0071e3;
  color: #fff;
  text-decoration: none;
  font-family: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.1765;
  font-weight: 400;
  letter-spacing: -0.022em;
  white-space: nowrap;
}

.apple-card-cta:hover {
  background: #0077ed;
}

.apple-card-cta:active {
  background: #0068d1;
}

.apple-card-cta,
.apple-card-cta:hover,
.apple-card-cta:focus,
.apple-card-cta:focus-visible,
.apple-card-cta:active,
.apple-card-cta:visited {
  text-decoration: none;
}

/* ===== Mobile ===== */
@media (max-width: 734px) {
  :root {
    --apple-gap: 8px;
    --apple-side: 8px;
    --section-gap: 20px;
    --apple-card-max: 100%;
  }

  .apple-square-grid {
    grid-template-columns: 1fr;
  }

  .apple-square-content {
    padding: 20px;
  }

  .apple-square-content h2,
  .apple-card-title {
    font-size: 28px;
  }

  .apple-square-content p,
  .apple-card-desc {
    font-size: 17px;
  }
}

.hero-homepage {
  margin-block: var(--section-gap);
}

/* Header 下方第一个 hero-homepage 取消上间距 */
#site-header + main > .hero.hero-homepage:first-child {
  margin-block-start: 0;
}

/* 手机端：Header 下第一个 hero-homepage 取消上间距 */
@media (max-width: 734px) {
  #site-header + main > .hero.reveal.hero-homepage:first-of-type {
    margin-top: 0 !important;
    margin-block-start: 0 !important;
  }
}

.apple-card-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.apple-card-actions .apple-card-cta {
  margin-top: 0; /* 覆盖你原来按钮的 margin-top */
}

/* 主按钮（Learn more） */
.apple-card-cta--learn {
  background: #0071e3;
  color: #fff;
  border: 1px solid #0071e3;
}

/* 次按钮（Shop）默认白底蓝字 */
.apple-card-cta--shop {
  background: transparent;
  color: #0071e3;
  border: 1px solid #0071e3; /* 改这里 */
}

/* 悬浮后变蓝底白字 */
.apple-card-cta--shop:hover {
  background: #0071e3;
  color: #fff;
  border-color: #0071e3;
}

.apple-square-card--black-text .apple-card-title,
.apple-square-card--black-text .apple-card-desc {
  color: #000;
}

.apple-square-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding-top: 70px;
}

.apple-card-title,
.apple-card-desc,
.apple-card-cta,
.apple-card-actions {
  margin: 0 !important;
}

.apple-card-title,
.apple-card-desc {
  min-height: 0 !important;
}

.apple-card-actions .apple-card-cta {
  margin: 0 !important;
}

/* iPhone 宽度：hero-homepage 之间间距 = 12px（Apple 风格） */
@media (max-width: 734px) {
  /* 先清掉通用 margin，避免叠加 */
  #site-header + main > .hero.reveal.hero-homepage {
    margin-block: 0 !important;
  }

  /* 仅相邻 hero-homepage 之间保留间距 */
  #site-header + main > .hero.reveal.hero-homepage + .hero.reveal.hero-homepage {
    margin-block-start: 12px !important;
  }
}

@media (max-width: 734px) {
  :root {
    --mobile-module-gap: 12px;
  }

  /* hero 与 hero 的间距（保持统一） */
  #site-header + main > .hero.reveal.hero-homepage + .hero.reveal.hero-homepage {
    margin-top: var(--mobile-module-gap) !important;
  }

  /* hero 与卡片区的间距 = 同一个值 */
  #site-header + main > .hero.reveal.hero-homepage + .apple-home-body {
    margin-top: var(--mobile-module-gap) !important;
  }

  /* 卡片区满屏宽 */
  .apple-home-body {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .apple-home-body .apple-square-grid {
    grid-template-columns: 1fr !important;
    width: 100%;
    gap: var(--mobile-module-gap);
  }

  /* 覆盖你之前可能写过的固定宽度(如 461px / var(--apple-card-max)) */
  .apple-home-body .apple-square-card {
    width: 100% !important;
    max-width: none !important;
    margin: 0;
  }
}

@media (max-width: 734px) {
  .apple-square-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start !important;
    text-align: center;
    padding: 37px 18px 0 !important; /* 顶部起点 */
  }

  .apple-card-title {
    margin: 0 !important;
    font-family: "SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-size: 32px !important;
    line-height: 1.125 !important;
    font-weight: 600;
    letter-spacing: -0.022em;
  }

  .apple-card-desc {
    margin: 6px 0 0 !important;
    font-family: "SF Pro Text","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-size: 19px !important;
    line-height: 1.2105 !important;
    font-weight: 400;
    letter-spacing: 0.012em;
    max-inline-size: 18ch;
  }

  .apple-card-actions {
    margin-top: 15px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  .apple-card-cta {
    margin: 0 !important;
    min-height: 36px;
    padding: 0 16px;
    font-family: "SF Pro Text","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-size: 17px;
    line-height: 1.1765;
    font-weight: 400;
    letter-spacing: -0.022em;
  }
}

@media (max-width: 1000px) {
  .apple-square-content .apple-card-desc {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
    white-space: normal !important;

    font-size: clamp(14px, 3.8vw, 19px) !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;

    min-height: 0 !important;
    max-height: none !important;
  }
}

/* 手机端替换为另一张图 */
@media (max-width: 734px) {
  .apple-square-bg[style*="Music Toolboxes.jpeg"] {
    background-image: url("/images/Music Toolboxes Mobile.jpeg") !important;
  }
}

@media (max-width: 734px) {
  .apple-card-desc {
    max-inline-size: 36ch;      /* 约等于 “Inspired by the power of connection.” */
    margin-inline: auto;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;      /* 最多 3 行 */
    overflow: hidden;

    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (min-width: 735px) {
  .site-header .menu-btn {
    display: none;
  }

  .site-header .nav {
    display: flex;
    align-items: center;
    justify-content: space-between; /* 自动按项目数量调整间距 */
  }

  .site-header .menu {
    display: contents; /* 让 menu 里的每个 a 直接参与 .nav 排列 */
  }

  .site-header .brand,
  .site-header .menu a {
    white-space: nowrap;
    flex: 0 0 auto;
  }
}

/* 默认颜色：#323233（Laniakea + 所有菜单） */
.site-header .brand,
.site-header .menu > a {
  color: #323233;
  opacity: 1;
  filter: none;
  text-decoration: none;
  transition: color 180ms ease;
}

/* 悬停/键盘聚焦：纯黑 */
.site-header .brand:hover,
.site-header .menu > a:hover,
.site-header .brand:focus-visible,
.site-header .menu > a:focus-visible,
.site-header .brand:active,
.site-header .menu > a:active {
  color: #000000;
}

/* 取消“悬停一个，其他变暗” */
.site-header .menu:hover > a:not(:hover):not(:focus-visible) {
  color: #323233 !important;
  opacity: 1 !important;
  filter: none !important;
}

/* =========================
   Header Dark Theme (Final)
   ========================= */

/* 启用方式：
   <header class="site-header site-header--dark" id="siteHeader"> ... </header>
*/

.site-header.site-header--dark {
  background: #151515;
  border: 0;
  box-shadow: none;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}

/* 默认文字颜色（所有状态） */
.site-header.site-header--dark .brand,
.site-header.site-header--dark .brand:link,
.site-header.site-header--dark .brand:visited,
.site-header.site-header--dark .brand:active,
.site-header.site-header--dark .brand:focus,
.site-header.site-header--dark .menu a,
.site-header.site-header--dark .menu a:link,
.site-header.site-header--dark .menu a:visited,
.site-header.site-header--dark .menu a:active,
.site-header.site-header--dark .menu a:focus,
.site-header.site-header--dark .mobile-links a,
.site-header.site-header--dark .mobile-links a:link,
.site-header.site-header--dark .mobile-links a:visited,
.site-header.site-header--dark .mobile-links a:active,
.site-header.site-header--dark .mobile-links a:focus {
  color: #d0d0d1 !important;
  text-decoration: none !important;
  transition: color 240ms ease !important;
  opacity: 1 !important;
  filter: none !important;
}

/* 防止“悬停一个，其他变暗” */
.site-header.site-header--dark .nav:hover .brand:not(:hover),
.site-header.site-header--dark .menu:hover a:not(:hover),
.site-header.site-header--dark .mobile-links a:not(:hover) {
  color: #d0d0d1 !important;
  opacity: 1 !important;
  filter: none !important;
}

/* 仅悬停项变白 */
@media (hover: hover) {
  .site-header.site-header--dark .brand:hover,
  .site-header.site-header--dark .menu a:hover,
  .site-header.site-header--dark .mobile-links a:hover {
    color: #ffffff !important;
    opacity: 1 !important;
    filter: none !important;
  }
}

/* 移动端面板 */
.site-header.site-header--dark .mobile-panel {
  background: #151515;
  border: 0;
  box-shadow: none;
}

/* 汉堡按钮线条 */
.site-header.site-header--dark .menu-icon::before,
.site-header.site-header--dark .menu-icon::after {
  background: #d0d0d1;
  transition: background 200ms ease, transform 320ms ease, top 320ms ease, bottom 320ms ease;
}

@media (max-width: 560px) and (hover: hover) {
  .site-header.site-header--dark .menu-btn:hover .menu-icon::before,
  .site-header.site-header--dark .menu-btn:hover .menu-icon::after {
    background: #ffffff;
  }
}

/* 键盘焦点 */
.site-header.site-header--dark .brand:focus-visible,
.site-header.site-header--dark .menu a:focus-visible,
.site-header.site-header--dark .menu-btn:focus-visible,
.site-header.site-header--dark .mobile-links a:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.38);
  outline-offset: 3px;
  border-radius: 10px;
}