/* YiHub 官网：白色与森林绿。 */
@font-face {
  font-family: "Noto Serif SC";

  src: url("fonts/NotoSerifSC-Medium.woff2") format("woff2");

  font-weight: 500;

  font-display: swap;

}

@font-face {
  font-family: "DM Sans";

  src: url("fonts/DMSans.woff2") format("woff2");

  font-weight: 400 500;

  font-display: swap;

}

@font-face {
  font-family: "JetBrains Mono";

  src: url("fonts/JetBrainsMono-Regular.woff2") format("woff2");

  font-weight: 400;

  font-display: swap;

}



:root{--paper:#fff;
  --ink:#183c2d;
  --muted:#57685f;
  --rule:#dce7df;
  --green:#226442;
  --sans:"DM Sans",-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  --serif:"Noto Serif SC","Songti SC",serif;
  --mono:"JetBrains Mono",monospace}

*{box-sizing:border-box}
html{background:var(--paper);
  color-scheme:light;
  scroll-behavior:smooth;
  scroll-padding-top:30px}
body{margin:0;
  color:var(--ink);
  background:#fff;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased}
a{color:inherit;
  text-decoration:none}
p,figure{margin:0}
p+p{margin-top:1em}
img{max-width:100%}
h1,h2{font-weight:500;
  text-wrap:balance}
::selection{background:#d3eadb}
:focus-visible{outline:3px solid var(--green);
  outline-offset:5px}
.col{width:min(1120px,calc(100% - 80px));
  margin-inline:auto}
.skip-link{position:absolute;
  top:-80px;
  left:20px;
  background:#fff;
  padding:12px;
  z-index:20}
.skip-link:focus{top:10px}

.site-head{border-bottom:1px solid var(--rule)}
.site-head .col{height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between}
.brand{display:flex;
  align-items:center;
  gap:11px}
.brand-icon{width:34px;
  height:34px;
  border-radius:10px;
  overflow:hidden}
.brand-icon img{display:block;
  width:100%;
  height:100%}
.brand-word{width:auto;
  height:21px}
.head-nav{display:flex;
  gap:34px;
  font-size:14px}
.head-nav a:hover,.site-foot a:hover{color:var(--green);
  text-decoration:underline;
  text-underline-offset:5px}

.hero{display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:48px;
  align-items:center;
  padding-block:74px 88px}
.lead,.eyebrow{font-size:11px;
  letter-spacing:.1em;
  color:var(--green);
  font-family:var(--mono);
  margin-bottom:20px}
.lead .zh{font-family:var(--sans);
  letter-spacing:.08em}
.status-dot{display:inline-block;
  width:7px;
  height:7px;
  background:#439268;
  border-radius:50%;
  margin-right:8px}
.hero h1{font-size:clamp(40px,4.7vw,66px);
  line-height:1.35;
  letter-spacing:-.045em;
  margin:0 0 26px}
.hero h1 span{color:#33805a}
.hero .sub{max-width:27em;
  color:var(--muted);
  font-size:17px;
  line-height:1.95}
.hero .sub strong{font-weight:500;
  color:var(--ink)}
.actions{display:flex;
  gap:28px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:34px}
.btn{display:inline-flex;
  align-items:center;
  gap:26px;
  padding:13px 23px;
  border-radius:7px;
  background:var(--green);
  color:#fff;
  font-size:14px}
.btn:hover{background:#174c32}
.text-link{font-size:14px;
  color:var(--green);
  border-bottom:1px solid #a8c6b4;
  padding-bottom:3px}
.hero-visual{min-height:530px;
  background:#fff;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:30px 0 40px;
  overflow:hidden}
.phone{width:260px;

  z-index:1}
.phone img{display:block;
  width:100%;
  height:auto}
.visual-caption{position:absolute;
  bottom:8px;
  font-size:10px;
  letter-spacing:.12em;
  color:#577160}

.section-intro{padding:56px 0 40px;
  border-top:1px solid var(--rule)}
.section-intro h2{font-size:34px;
  margin:0 0 12px}
.section-intro>p:last-child{color:var(--muted);
  font-size:15px}
.features{display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
  padding-bottom:76px}
.feature{min-width:0}
.num{font-family:var(--mono);
  font-size:12px;
  color:var(--green);
  display:block;
  margin:0 0 18px}
.feature h2{font-size:23px;
  margin:0 0 12px;
  letter-spacing:-.03em}
.feature p{color:var(--muted);
  font-size:14px;
  line-height:1.9;
  min-height:135px}
.feature q{quotes:"「" "」"}
.screen-link{display:block;max-width:100%}
.stage .screen-link{width:290px}
.preview-note{font-size:12px!important;color:var(--muted);margin-top:14px}
.stage{background:#fff;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  margin-top:26px}
.stage img{display:block;
  width:100%;
  height:auto;
  max-width:100%;
  margin:0}

.breath{display:flex;
  justify-content:center;
  padding:30px 0 42px}
.seedling{height:84px;
  width:auto;
  overflow:visible}
.seedling path{fill:none;
  stroke:var(--green);
  stroke-width:1.75;
  stroke-linejoin:round;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:1;
  stroke-dashoffset:1}
.seedling.is-drawn path{animation:draw 1.6s ease forwards}
.seedling.is-drawn path:nth-child(2){animation-delay:.3s}
.seedling.is-drawn path:nth-child(3){animation-delay:.8s}
@keyframes draw{to{stroke-dashoffset:0}
}

.beliefs{display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
  padding-block:0 90px}
.beliefs>.lead{grid-column:1/-1;
  text-align:center;
  margin:0 0 12px}
.belief{border-top:1px solid var(--rule);
  padding-top:24px}
.belief h2{font-size:20px;
  margin:0 0 14px}
.belief p{font-size:14px;
  color:var(--muted);
  line-height:1.9}
.company-strip{display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding:38px 0;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule)}
.company-strip .eyebrow{margin-bottom:10px}
.company-strip h2{font-size:26px;
  margin:0 0 12px}
.company-strip p:last-child{font-size:14px;
  color:var(--muted)}
.company-strip .text-link{flex-shrink:0}
.closing{padding:75px 0;
  text-align:center}
.closing p{font-family:var(--serif);
  font-size:19px;
  line-height:1.95}
.closing .phrase{display:block}

.site-foot{border-top:1px solid var(--rule);
  padding:40px 0 32px}
.footer-grid{display:grid;
  grid-template-columns:1fr auto;
  gap:30px}
.footer-brand{font-size:27px;
  font-weight:500;
  letter-spacing:-.05em}
.footer-grid>div:first-child p{font-size:12px;
  color:var(--muted);
  margin-top:3px}
.site-foot nav{display:flex;
  gap:24px;
  flex-wrap:wrap;
  align-items:start;
  padding-top:10px;
  font-size:13px}
.company-line{grid-column:1/-1;
  border-top:1px solid var(--rule);
  padding-top:24px;
  font-size:11px;
  color:var(--muted);
  overflow-wrap:anywhere}
.company-line p+p{margin-top:3px}
.ul-link{color:var(--green);
  text-decoration:underline;
  text-underline-offset:4px}

.doc{max-width:780px;
  min-height:65vh;
  padding-block:70px 90px}
.doc h1{font-size:44px;
  line-height:1.4;
  margin:0 0 16px;
  letter-spacing:-.025em}
.doc .meta{font-size:12px;
  color:var(--muted);
  margin-bottom:40px}
.doc h2{font-size:22px;
  margin:38px 0 12px}
.doc p,.doc li{color:var(--muted);
  line-height:1.95;
  overflow-wrap:anywhere}
.doc ul{padding-left:1.3em}
.doc .eyebrow{color:var(--green)}
.company-details{display:grid;
  grid-template-columns:140px 1fr;
  border-top:1px solid var(--rule);
  margin:24px 0}
.company-details dt,.company-details dd{margin:0;
  padding:16px 0;
  border-bottom:1px solid var(--rule);
  font-size:14px}
.company-details dt{color:var(--muted)}
.company-details dd{overflow-wrap:anywhere}
.contact-email{font-size:clamp(20px,4vw,28px);
  color:var(--green);
  text-decoration:underline;
  text-underline-offset:6px}

@media(prefers-reduced-motion:no-preference){.hero-text,.hero-visual{animation:rise .7s ease both}
.hero-visual{animation-delay:.15s}
@keyframes rise{from{opacity:0;
  transform:translateY(12px)}
to{opacity:1;
  transform:none}
}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
.seedling path{stroke-dashoffset:0;
  animation:none}
}

@media(max-width:950px){.col{width:calc(100% - 48px)}
.hero{gap:28px}
.hero-visual{min-height:500px}
.features{gap:20px}
.feature h2{font-size:20px}
.feature p{min-height:165px}
.beliefs{grid-template-columns:repeat(2,1fr)}
.company-strip{padding:30px 0}
.stage .screen-link{width:230px}
}

@media(max-width:640px){.col{width:calc(100% - 40px)}
.site-head .col{height:72px}
.brand-word{height:18px}
.brand-icon{width:29px;
  height:29px}
.head-nav{gap:18px;
  font-size:12px}
.hero{grid-template-columns:1fr;
  padding:44px 0 55px;
  gap:38px}
.hero h1{font-size:44px;
  margin-bottom:22px}
.hero .sub{font-size:15px}
.hero .lead{font-size:10px;
  letter-spacing:0}
.actions{margin-top:25px;
  gap:24px}
.hero-visual{min-height:488px;
  padding:25px 0 32px}
.phone{width:270px}
.section-intro{padding:35px 0 28px}
.section-intro h2{font-size:27px}
.eyebrow{font-size:9px}
.features{grid-template-columns:1fr;
  gap:38px;
  padding-bottom:38px}
.num{margin-bottom:12px}
.feature h2{font-size:24px}
.feature p{min-height:0;
  font-size:15px}
.stage{margin-top:22px}
.stage .screen-link{width:290px}
.beliefs{gap:24px 20px;
  padding-bottom:48px}
.belief h2{font-size:17px}
.belief p{font-size:13px}
.company-strip{display:block;
  padding:26px 0}
.company-strip h2{font-size:23px}
.company-strip .text-link{display:inline-block;
  margin-top:24px}
.closing{padding:48px 0}
.closing p{font-size:15px}
.footer-grid{grid-template-columns:1fr;
  gap:22px}
.site-foot nav{gap:18px;
  font-size:12px;
  padding:0}
.company-line{font-size:10px}
.doc{padding-block:44px 60px}
.doc h1{font-size:34px}
.doc h2{font-size:21px}
.doc p,.doc li{font-size:15px}
.company-details{grid-template-columns:1fr}
.company-details dt{padding-bottom:0;
  border:0}
.company-details dd{padding-top:5px}
.breath{padding:25px 0 35px}
}