/* =========================================================
   回盛生物 2027 届全球校园招聘 · 盛星计划
   纯静态 · 响应式
   ========================================================= */

:root{
  /* brand */
  --teal-900:#00332F;
  --teal-800:#04413C;
  --teal-700:#00867F;
  --teal-600:#009B92;
  --teal-500:#00B3A1;
  --teal-400:#2ED3BE;
  --teal-100:#DCF3EF;
  --teal-050:#EEF8F6;

  --gold:#E8C77B;
  --gold-lt:#FFF3D6;
  --gold-dk:#C9A253;

  --paper:#FFFFFF;
  --paper-2:#F4FAF9;
  --ink:#0C2B28;
  --ink-2:#3A5652;
  --ink-3:#7A938F;
  --line:rgba(12,43,40,.09);

  --r-sm:10px;
  --r-md:16px;
  --r-lg:22px;
  --shadow-s:0 2px 10px -4px rgba(6,46,43,.16);
  --shadow-m:0 16px 40px -24px rgba(6,46,43,.42);
  --shadow-l:0 26px 70px -34px rgba(6,46,43,.5);

  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC","Noto Sans SC","Segoe UI",Roboto,sans-serif;

  --header-h:64px;
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:var(--header-h);
}

body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.wrap{
  width:100%;
  max-width:1240px;
  margin-inline:auto;
  padding-inline:clamp(20px,5vw,48px);
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:60;
  transition:background .35s ease, box-shadow .35s ease, backdrop-filter .35s ease, opacity .3s ease, transform .3s ease;
}
/* 首屏主视觉是浅色环境底：不再压深色遮罩，页头文字改深青，
   避免遮罩和白色文字盖住海报自身的 logo 行 / 股票代码 / 主标题 */
.site-header::before{content:none}
.site-header:not(.is-solid) .brand-text strong{color:#0B4A47}
.site-header:not(.is-solid) .brand-text em{color:rgba(11,74,71,.62)}
.site-header:not(.is-solid) .nav-desktop a{color:rgba(9,62,59,.88)}
.site-header:not(.is-solid) .nav-desktop a:hover{color:#00867F}
.site-header:not(.is-solid) .menu-btn{
  background:rgba(255,255,255,.74);
  border-color:rgba(12,74,71,.16);
  color:#0B4A47;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 6px 18px -10px rgba(6,46,43,.45);
}
.site-header.is-solid{
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  backdrop-filter:saturate(180%) blur(18px);
  box-shadow:0 1px 0 rgba(12,43,40,.07), 0 12px 30px -26px rgba(6,46,43,.5);
}
.site-header.is-solid::before{content:none}

.header-inner{
  max-width:1240px;
  margin-inline:auto;
  padding-inline:clamp(16px,4vw,48px);
  height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand-mark{
  width:34px;height:34px;flex:none;
  display:grid;place-items:center;
  color:#fff;
  border-radius:11px;
  background:linear-gradient(140deg,var(--teal-500),var(--teal-700));
  box-shadow:0 6px 16px -8px rgba(0,134,127,.8);
  transition:color .35s ease;
}
.brand-mark svg{width:21px;height:21px}
.brand-text{display:flex;flex-direction:column;line-height:1.12;min-width:0}
.brand-text strong{
  font-size:16px;font-weight:800;letter-spacing:.02em;color:#fff;
  white-space:nowrap;transition:color .35s ease;
}
.brand-text em{
  font-style:normal;font-size:11px;letter-spacing:.18em;
  color:rgba(255,255,255,.72);transition:color .35s ease;
}
.site-header.is-solid .brand-text strong{color:var(--ink)}
.site-header.is-solid .brand-text em{color:var(--teal-700)}

.nav-desktop{display:flex;align-items:center;gap:6px}
.nav-desktop a{
  position:relative;
  padding:9px 15px;
  font-size:14.5px;
  font-weight:600;
  color:rgba(255,255,255,.9);
  border-radius:999px;
  transition:color .28s ease, background .28s ease;
  white-space:nowrap;
}
.nav-desktop a::after{
  content:"";
  position:absolute;left:50%;bottom:4px;
  width:0;height:2px;border-radius:2px;
  background:currentColor;opacity:.85;
  transform:translateX(-50%);
  transition:width .28s ease;
}
.nav-desktop a:hover::after{width:18px}
.site-header.is-solid .nav-desktop a{color:var(--ink-2)}
.site-header.is-solid .nav-desktop a:hover{color:var(--teal-700)}

.menu-btn{
  display:none;
  width:42px;height:42px;flex:none;
  border-radius:13px;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
  color:#fff;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  transition:background .3s ease,border-color .3s ease,color .3s ease;
}
.menu-btn span{
  display:block;width:17px;height:1.8px;border-radius:2px;background:currentColor;
  transition:transform .3s ease,opacity .3s ease;
}
.site-header.is-solid .menu-btn{color:var(--ink);background:rgba(12,43,40,.05);border-color:rgba(12,43,40,.1)}
body.nav-open .menu-btn span:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
body.nav-open .menu-btn span:nth-child(2){opacity:0}
body.nav-open .menu-btn span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}

.progress{
  height:2px;width:0%;
  background:linear-gradient(90deg,var(--teal-500),var(--gold));
  transition:width .12s linear;
}

/* =========================================================
   DRAWER
   ========================================================= */
.drawer{
  position:fixed;
  top:0;right:0;bottom:0;
  z-index:80;
  width:min(84vw,340px);
  padding:22px 22px calc(28px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;
  background:linear-gradient(160deg,var(--teal-800),var(--teal-900) 62%,#012522);
  transform:translateX(103%);
  transition:transform .42s cubic-bezier(.22,.68,.24,1);
  box-shadow:-30px 0 70px -40px rgba(0,0,0,.7);
}
.drawer.is-open{transform:translateX(0)}
.drawer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.drawer-brand{font-size:13px;letter-spacing:.3em;color:rgba(255,255,255,.6)}
.drawer-close{
  width:40px;height:40px;flex:none;display:grid;place-items:center;
  border-radius:50%;color:#fff;background:rgba(255,255,255,.09);
}
.drawer-close svg{width:19px;height:19px}
.drawer-nav{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.drawer-nav a{
  padding:15px 4px;
  display:flex;flex-direction:column;gap:4px;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.drawer-nav a span{font-size:18px;font-weight:700;color:#fff;letter-spacing:.01em}
.drawer-nav a i{font-style:normal;font-size:12.5px;color:rgba(255,255,255,.5)}

.drawer-mask{
  position:fixed;inset:0;z-index:70;
  background:rgba(3,23,21,.55);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  opacity:0;transition:opacity .35s ease;
}
.drawer-mask.is-on{opacity:1}

/* =========================================================
   1. HERO
   ========================================================= */
.hero{
  --hint-strip:0px;             /* 海报铺满整屏；提示条改为浮在底部，不占版面 */
  position:relative;
  height:100vh;
  height:100svh;
  min-height:560px;
  overflow:hidden;
  background:#0E7E7F;           /* 兜底：取海报底部主色 */
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
/* 环境底：海报自身虚化铺满，只作氛围，不承担内容 */
.hero__bd{
  position:absolute;left:0;right:0;top:0;bottom:var(--hint-strip);
  display:block;z-index:0;
}
.hero__bd img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  filter:blur(26px) saturate(.94) brightness(.96);
  transform:scale(1.18);transform-origin:center;
}
/* 海报本体：手机端用「已按 9:19.5 合成好的成品图」+ cover —— 铺满整屏，
   画面内容（顶部 logo 行 / 底部两行文案）完整落在图内，任何机型都不会裁到内容 */
.hero__stage{
  position:absolute;left:0;right:0;top:0;bottom:var(--hint-strip);
  z-index:1;
  display:flex;align-items:center;justify-content:center;
}
.hero__poster-pic{display:block;width:100%;height:100%}
.hero__poster{
  width:100%;height:100%;
  /* center top：屏幕比海报送"宽"时（16:9 一类的矮屏）cover 会垂直溢出，
     顶部锚定可保证 logo 行 / 股票代码永远完整，溢出量全部落在底部延展带上。
     19.5:9 ~ 20:9 的主流机型垂直方向本就不溢出，这条不产生任何影响。 */
  object-fit:cover;object-position:center top;
}

.scroll-hint{
  position:absolute;
  left:0;right:0;
  margin-inline:auto;
  width:fit-content;
  bottom:clamp(18px,3.2vh,30px);
  z-index:2;
  display:inline-flex;
  align-items:center;gap:10px;
  padding:10px 18px 10px 20px;
  border-radius:999px;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 6px 22px rgba(11,74,72,.18);
  color:#0E6E6A;
  animation:hintFloat 2.6s ease-in-out infinite;
  transition:background .3s ease,transform .3s ease;
}
/* 桌面端：海报两侧留有大片环境底，提示移到左下角，避免压住主视觉底部文案 */
@media (min-width:900px){
  .hero{--hint-strip:0px}
  .hero__stage{top:28px;bottom:28px}
  /* 桌面端是 16:9 横屏，整幅海报用 contain 才保得住上下内容，两侧由环境底承担；
     这里海报是"浮"在环境底上的一张卡，所以给它一层贴边投影 */
  .hero__poster{
    object-fit:contain;
    filter:drop-shadow(0 22px 54px rgba(4,42,40,.45));
  }
  .scroll-hint{
    left:clamp(28px,4.6vw,68px);
    right:auto;
    margin-inline:0;
    bottom:clamp(26px,5vh,54px);
  }
}
.scroll-hint:hover{background:#fff;transform:translateY(-2px)}

.scroll-hint__text{font-size:13.5px;font-weight:600;letter-spacing:.16em}
.scroll-hint__arrow{display:grid;place-items:center}
.scroll-hint__arrow svg{width:19px;height:19px}
@keyframes hintFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(6px)}
}

/* =========================================================
   SECTION BASICS  (uniform label block)
   ========================================================= */
.sec{
  position:relative;
  padding-block:clamp(58px,7.4vw,104px);
}
.sec--culture{background:var(--paper)}
.sec--alumni{background:var(--paper-2)}
/* 面试流程：浅色收尾，与第一版一致 */
.sec--process{
  background:linear-gradient(180deg,#F2F9F8 0%,#FBFDFD 100%);
  overflow:hidden;
  color:var(--ink);
}
.sec--process .wrap{position:relative;z-index:2}


/* --- the shared label block --- */
.sec-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:clamp(26px,3.4vw,44px);
}
.sec-bar{
  flex:none;
  width:4px;height:28px;
  border-radius:2px;
  background:linear-gradient(180deg,var(--teal-500),var(--teal-700));
}
.sec-title{
  font-size:clamp(21px,2.5vw,29px);
  font-weight:800;
  letter-spacing:.01em;
  color:var(--ink);
  white-space:nowrap;
  line-height:1.2;
}
.sec-rule{
  flex:1 1 auto;
  min-width:26px;
  height:1px;
  background:linear-gradient(90deg,rgba(0,134,127,.30),rgba(0,134,127,0));
}

/* =========================================================
   2. 回盛文化 — marquee
   ========================================================= */
.marquee{
  display:flex;
  flex-direction:column;
  gap:clamp(12px,1.6vw,20px);
  padding-block:6px;
}
.marquee__row{overflow:hidden;padding-block:6px}
.marquee__track{
  display:flex;
  width:max-content;
  will-change:transform;
}
.shot{
  flex:none;
  margin:0 20px 0 0;
  width:clamp(206px,24vw,296px);
  border-radius:var(--r-md);
  overflow:hidden;
  background:var(--teal-100);
  box-shadow:var(--shadow-m);
}
.shot img{
  width:100%;height:auto;
  aspect-ratio:4/3;
  object-fit:cover;
  transition:transform .5s cubic-bezier(.22,.68,.24,1);
}
.shot:hover img{transform:scale(1.045)}

.marquee__track[data-dir="left"]{animation:marqL 58s linear infinite}
.marquee__track[data-dir="right"]{animation:marqR 72s linear infinite}
.marquee__row:hover .marquee__track{animation-play-state:paused}
@keyframes marqL{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-33.3333%,0,0)}
}
@keyframes marqR{
  from{transform:translate3d(-33.3333%,0,0)}
  to{transform:translate3d(0,0,0)}
}

/* =========================================================
   3. 学长学姐说
   ========================================================= */
.alum-rows{
  display:flex;
  flex-direction:column;
  gap:clamp(16px,2vw,26px);
}
/* 两排共用同一个 flex-basis → 每张卡片宽度严格相等；第一排 3 张自动居中 */
.alum-row{
  --gap:clamp(16px,2vw,26px);
  display:flex;
  flex-wrap:wrap;
  gap:var(--gap);
  justify-content:center;
}
.alum-row .alum{
  flex:0 1 calc((100% - 3 * var(--gap)) / 4);
  max-width:calc((100% - 3 * var(--gap)) / 4);
}
.alum{
  display:flex;
  flex-direction:column;
  width:100%;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-s);
  transition:transform .38s cubic-bezier(.22,.68,.24,1), box-shadow .38s ease;
}
.alum:hover{transform:translateY(-5px);box-shadow:var(--shadow-l)}

.alum__photo{
  position:relative;
  background:var(--teal-050);
  overflow:hidden;
}
.alum__photo::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(3,32,29,.14),rgba(3,32,29,0) 42%);
  pointer-events:none;
}
.alum__photo img{
  width:100%;
  aspect-ratio:3/4;
  height:auto;
  object-fit:cover;
  object-position:center 32%;
  transition:transform .6s cubic-bezier(.22,.68,.24,1);
}
.alum:hover .alum__photo img{transform:scale(1.035)}

.alum__body{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  padding:clamp(18px,1.8vw,24px) clamp(16px,1.7vw,22px) clamp(20px,2vw,26px);
}
.alum__name{
  font-size:clamp(17px,1.35vw,19px);
  font-weight:800;
  letter-spacing:.04em;
  text-align:center;
  color:var(--ink);
}
.alum__title{
  margin-top:9px;
  font-size:13.5px;
  line-height:1.65;
  text-align:center;
  color:var(--teal-700);
  font-weight:600;
}
.alum__quote{
  position:relative;
  margin-top:16px;
  padding-top:16px;
  font-size:13.6px;
  line-height:1.92;
  color:var(--ink-2);
  text-align:justify;
}
.alum__quote::before{
  content:"";
  position:absolute;top:0;left:0;
  width:26px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--teal-500),rgba(0,179,161,0));
}

/* swipe hint (mobile only) */
.alum-swipe{
  display:none;
  margin-top:16px;
  align-items:center;gap:8px;
  font-size:12.5px;letter-spacing:.14em;
  color:var(--ink-3);
}

/* =========================================================
   4. 面试流程 + 简历投递（浅色，与第一版一致）
   ========================================================= */
.flow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:0;
}
.step{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  text-align:center;
}
.step .ico{
  display:grid;
  place-items:center;
  width:clamp(50px,13vw,74px);
  height:clamp(50px,13vw,74px);
  border-radius:20px;
  background:#fff;
  color:var(--teal-700);
  box-shadow:0 10px 26px -14px rgba(6,46,43,.36);
  border:1px solid rgba(0,179,161,.14);
}
.step .ico svg{width:54%;height:54%}
.step .name{
  font-size:clamp(11.5px,3.05vw,14.5px);
  font-weight:700;
  color:var(--ink);
  white-space:nowrap;
  letter-spacing:.01em;
}
.arrow{
  flex:none;
  display:grid;
  place-items:center;
  height:clamp(50px,13vw,74px);
  color:#B9D6D4;
  width:clamp(10px,3.4vw,30px);
}
.arrow svg{width:min(100%,16px);height:auto}

.apply{
  margin-top:clamp(34px,4.4vw,54px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.btn-apply{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  width:100%;
  max-width:420px;
  padding:19px 30px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--teal-500) 0%,var(--teal-700) 58%,#0E6E6A 100%);
  color:#fff;
  font-size:18px;
  font-weight:800;
  letter-spacing:.14em;
  box-shadow:0 14px 32px rgba(0,134,127,.32), inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-apply svg{width:22px;height:22px;flex:none}
.btn-apply:hover{filter:saturate(1.05);box-shadow:0 18px 38px rgba(0,134,127,.38), inset 0 1px 0 rgba(255,255,255,.32)}
.btn-apply:active{transform:translateY(2px) scale(.988);box-shadow:0 8px 20px rgba(0,134,127,.28)}
.apply-note{
  color:var(--ink-3);
  font-size:12.5px;
  letter-spacing:.04em;
  text-align:center;
}


/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background:#FBFDFD;
  color:var(--ink-3);
  text-align:center;
  padding:26px 20px calc(30px + env(safe-area-inset-bottom));
  font-size:12.5px;
  letter-spacing:.05em;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* ---- ≤1080px : cards shrink automatically, keep 3 / 4 layout ---- */
@media (max-width:1080px){
  .alum-row{--gap:16px}
}

/* ---- ≤900px : mobile / tablet ---- */
@media (max-width:900px){
  :root{--header-h:58px}

  .nav-desktop{display:none}
  .menu-btn{display:flex}
  .brand-text em{display:none}
  .brand-text strong{font-size:15px}

  .hero{min-height:520px}
  /* 手机端首屏：海报自带 logo 行 + 股票代码，页头让位隐藏，滚动后再浮出 */
  .site-header:not(.is-solid){opacity:0;transform:translateY(-10px);pointer-events:none}
  .scroll-hint{bottom:clamp(16px,2.8vh,26px);padding:9px 16px 9px 18px}
  .scroll-hint__text{font-size:12.5px}

  /* alumni → horizontal snap scroller : 7 cards in one swipeable strip */
  .alum-rows{
    flex-direction:row;
    gap:14px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    margin-inline:calc(-1 * clamp(20px,5vw,48px));
    padding-inline:clamp(20px,5vw,48px);
    padding-bottom:12px;
    scroll-padding-inline:clamp(20px,5vw,48px);
    scrollbar-width:none;
    align-items:stretch;
  }
  .alum-rows::-webkit-scrollbar{display:none}
  .alum-row{display:contents}
  .alum-row .alum{
    flex:0 0 78%;
    max-width:none;
    scroll-snap-align:center;
  }
  .alum__quote{text-align:left}
  .alum-swipe{display:flex}

  .flow{padding:2px 0}
  .btn-apply{max-width:380px;padding:17px 26px;font-size:16.5px}

  .shot{width:min(64vw,240px)}
}

/* ---- ≤430px : 五步流程在小屏收紧 ---- */
@media (max-width:430px){
  .step .ico{width:46px;height:46px;border-radius:15px}
  .arrow{width:11px;height:46px}
  .step .name{font-size:11px;letter-spacing:0}
  .step{gap:8px}
}

/* ---- ≤480px ---- */
@media (max-width:480px){
  .sec{padding-block:52px}
  .sec-bar{width:3.5px;height:24px}
  .alum-row .alum{flex:0 0 82%}
  .shot{width:min(70vw,220px);margin-right:14px}
  .marquee__track[data-dir="left"]{animation-duration:46s}
  .marquee__track[data-dir="right"]{animation-duration:58s}
}

/* ---- ≤380px ---- */
@media (max-width:380px){
  .alum-row .alum{flex:0 0 86%}
  .btn-apply{letter-spacing:.06em;font-size:15px}
}

/* ---- desktop: cap marquee card size ---- */
@media (min-width:1600px){
  .shot{width:300px}
}

/* =========================================================
   MOTION PREFERENCES
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .marquee__track{animation:none !important}
  .scroll-hint{animation:none}
  .alum,.shot img,.btn-apply{transition:none}
}