/* 觅风校园官网公共样式：统一首页和法律页面的品牌、排版与响应式规则。 */
:root {
  color-scheme: light;
  --brand: #00c3ce;
  --brand-deep: #007f88;
  --brand-soft: #e8fbfc;
  --ink: #101820;
  --muted: #5e6975;
  --line: #dce5e8;
  --surface: #f5f8fa;
  --white: #ffffff;
  --content: 1120px;
}

/* 所有元素使用同一盒模型，避免边框和内边距撑破移动端宽度。 */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--white);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  line-height: 1.7;
}
img { display: block; max-width: 100%; }
a { color: inherit; }

/* 跳转链接只在键盘聚焦时出现，不干扰普通浏览。 */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 8px 12px;
  color: var(--white);
  background: var(--ink);
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

/* 顶部导航保持轻量，不遮挡页面首屏内容。 */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid rgba(220, 229, 232, .9);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(14px);
}
.header-inner {
  width: min(var(--content), calc(100% - 40px));
  height: 72px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 34px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 18px;
  font-weight: 800;
  text-decoration: none;
}
.brand img { width: 38px; height: 38px; border-radius: 9px; }
.desktop-nav { display: flex; justify-content: flex-end; gap: 30px; }
.desktop-nav a { color: var(--muted); font-size: 15px; text-decoration: none; }
.desktop-nav a:hover { color: var(--brand-deep); }
.header-download {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 17px;
  border-radius: 6px;
  color: var(--white);
  background: var(--brand-deep);
  font-weight: 700;
  text-decoration: none;
}

/* 首屏让产品名称与真实 App 截图成为第一视觉信号。 */
.hero {
  min-height: calc(100vh - 72px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--white) 0%, #f2fbfc 100%);
}
.hero-inner {
  width: min(var(--content), calc(100% - 40px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .75fr);
  align-items: center;
  gap: 72px;
  padding: 62px 0 34px;
}
.eyebrow, .section-index {
  margin: 0 0 13px;
  color: var(--brand-deep);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
}
h1, h2, h3, p { overflow-wrap: break-word; }
h1 { margin: 0; font-size: 64px; line-height: 1.08; letter-spacing: 0; }
.hero-slogan { margin: 20px 0 0; font-size: 25px; font-weight: 700; line-height: 1.45; }
.hero-description { max-width: 630px; margin: 18px 0 0; color: var(--muted); font-size: 17px; }
.hero-actions, .download-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 21px;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 16px;
  font-weight: 750;
  text-decoration: none;
}
.button-primary { color: var(--white); background: var(--brand-deep); }
.button-secondary, .button-outline { color: var(--brand-deep); border-color: var(--brand-deep); background: var(--white); }
.button:focus-visible, a:focus-visible { outline: 3px solid rgba(0, 195, 206, .3); outline-offset: 3px; }
.availability { margin: 14px 0 0; color: var(--muted); font-size: 13px; }
.hero-product { position: relative; width: min(100%, 355px); justify-self: center; padding: 17px 17px 0; }
.hero-product::before {
  content: "";
  position: absolute;
  inset: 0 0 38px;
  border: 1px solid #bcecef;
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 26px 68px rgba(0, 92, 99, .16);
}
.hero-screen { position: relative; width: 100%; aspect-ratio: 444 / 960; object-fit: cover; object-position: top; border-radius: 4px; }
.hero-identity {
  position: relative;
  width: calc(100% - 28px);
  margin: -38px auto 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--white);
  box-shadow: 0 12px 30px rgba(16, 24, 32, .12);
}
.hero-identity img { width: 42px; height: 42px; border-radius: 9px; }
.hero-identity strong, .hero-identity span { display: block; }
.hero-identity span { color: var(--muted); font-size: 12px; }
.scroll-cue { width: min(var(--content), calc(100% - 40px)); margin: 8px auto 22px; color: var(--brand-deep); font-size: 13px; font-weight: 700; text-decoration: none; }

/* 页面区块使用统一内容宽度和节奏，形成常规产品官网结构。 */
.section { padding: 88px 0; }
.section-inner { width: min(var(--content), calc(100% - 40px)); margin: 0 auto; }
.section-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 430px); gap: 50px; align-items: end; margin-bottom: 48px; }
.section-heading h2, .scene-heading h2, .about-grid h2, .contact-grid h2, .download-inner h2 { margin: 0; font-size: 38px; line-height: 1.25; letter-spacing: 0; }
.section-heading > p, .scene-heading > p, .contact-grid > div > p { margin: 0; color: var(--muted); }

/* 产品截图保持固定比例，图片加载不会引起布局跳动。 */
.product-section { background: var(--white); }
.screen-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.screen-gallery figure { min-width: 0; margin: 0; }
.screen-gallery figure > img { width: 100%; aspect-ratio: 444 / 960; object-fit: cover; object-position: top; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.screen-gallery figcaption { padding: 18px 2px 0; }
.screen-gallery figcaption strong, .screen-gallery figcaption span { display: block; }
.screen-gallery figcaption strong { font-size: 18px; }
.screen-gallery figcaption span { margin-top: 5px; color: var(--muted); font-size: 14px; }

/* 深色功能区增加页面层次，但品牌青色只用于重点信息。 */
.features-section { color: var(--white); background: #13242a; }
.section-heading-light .section-index { color: #77edf2; }
.section-heading-light > p { color: #b7c4c8; }
.feature-list { border-top: 1px solid rgba(255, 255, 255, .18); }
.feature-item { display: grid; grid-template-columns: 70px 1fr; gap: 18px; padding: 28px 0; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.feature-number { color: #77edf2; font-size: 13px; font-weight: 800; }
.feature-item h3 { margin: 0; font-size: 21px; }
.feature-item p { margin: 5px 0 0; color: #b7c4c8; }

/* 场景区使用文字层级解释产品真实使用方式。 */
.scenes-section { background: var(--surface); }
.scenes-grid { display: grid; grid-template-columns: minmax(280px, .75fr) minmax(0, 1.25fr); gap: 80px; }
.scene-heading > p:last-child { margin-top: 22px; }
.scene-list { border-top: 1px solid var(--line); }
.scene-list article { display: grid; grid-template-columns: 100px 190px 1fr; gap: 22px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid var(--line); }
.scene-list span { color: var(--brand-deep); font-size: 13px; font-weight: 800; }
.scene-list h3, .scene-list p { margin: 0; }
.scene-list h3 { font-size: 18px; }
.scene-list p { color: var(--muted); }

/* 关于区明确展示运营主体、版权和产品服务边界。 */
.about-grid { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); gap: 80px; }
.about-copy > p { margin: 0 0 16px; color: var(--muted); font-size: 16px; }
.company-facts { margin: 34px 0 0; border-top: 1px solid var(--line); }
.company-facts div { display: grid; grid-template-columns: 170px 1fr; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.company-facts dt { color: var(--muted); }
.company-facts dd { margin: 0; font-weight: 700; }

/* 下载区是完整网站中的独立行动区域，不替代产品介绍内容。 */
.download-section { padding: 54px 0; background: var(--brand-soft); border-top: 1px solid #bcecef; border-bottom: 1px solid #bcecef; }
.download-inner { width: min(var(--content), calc(100% - 40px)); margin: 0 auto; display: grid; grid-template-columns: 90px 1fr auto; gap: 28px; align-items: center; }
.download-inner > img { width: 90px; height: 90px; border-radius: 19px; }
.download-inner p:not(.section-index) { margin: 8px 0 0; color: var(--muted); }
.download-inner .download-actions { margin: 0; }

/* 联系方式使用可扫描的信息行，并提供可直接打开的企业微信客服。 */
.contact-grid { display: grid; grid-template-columns: minmax(280px, .75fr) minmax(0, 1.25fr); gap: 80px; }
.contact-grid > div > p:last-child { margin-top: 18px; }
.contact-methods { border-top: 1px solid var(--line); }
.contact-methods > div, .contact-methods > a { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.contact-methods span { color: var(--muted); }
.contact-methods a strong { color: var(--brand-deep); }

/* 页脚集中展示网站法律入口、版权和备案域名信息。 */
.site-footer { padding: 38px 0 42px; color: #bcc8cc; background: #0c181d; font-size: 13px; }
.footer-inner { width: min(var(--content), calc(100% - 40px)); margin: 0 auto; }
.footer-brand { display: flex; align-items: center; gap: 10px; color: var(--white); font-size: 16px; }
.footer-brand img { width: 32px; height: 32px; border-radius: 7px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 22px; margin: 22px 0; }
.site-footer nav a { color: var(--white); text-decoration: none; }
.site-footer p { margin: 5px 0 0; }

/* 法律页面复用网站导航和页脚，并使用适合长文阅读的窄版正文。 */
.legal-main { padding: 70px 0 90px; background: var(--surface); }
.legal-document { width: min(820px, calc(100% - 40px)); margin: 0 auto; padding: 52px 58px; border: 1px solid var(--line); border-radius: 6px; background: var(--white); }
.legal-document h1 { font-size: 40px; }
.legal-meta { margin: 10px 0 36px; color: var(--muted); font-size: 14px; }
.legal-document h2 { margin: 34px 0 12px; font-size: 22px; }
.legal-document h3 { margin: 24px 0 8px; font-size: 17px; }
.legal-document p, .legal-document li { color: #3f4b55; }
.legal-document ul { padding-left: 22px; }
.legal-document a { color: var(--brand-deep); }

/* 平板与窄桌面压缩栅格间距，保持信息完整。 */
@media (max-width: 900px) {
  .desktop-nav { display: none; }
  .header-inner { grid-template-columns: 1fr auto; }
  .hero-inner { gap: 38px; }
  h1 { font-size: 52px; }
  .scenes-grid, .about-grid, .contact-grid { gap: 48px; }
  .scene-list article { grid-template-columns: 90px 1fr; }
  .scene-list article p { grid-column: 2; }
  .download-inner { grid-template-columns: 72px 1fr; }
  .download-inner > img { width: 72px; height: 72px; border-radius: 16px; }
  .download-inner .download-actions { grid-column: 2; }
}

/* 手机端全部改为单列，避免长文案、按钮和截图互相挤压。 */
@media (max-width: 680px) {
  .header-inner { width: min(100% - 28px, var(--content)); height: 64px; }
  .header-download { min-height: 38px; padding: 0 13px; font-size: 14px; }
  .brand { font-size: 16px; }
  .brand img { width: 34px; height: 34px; }
  .hero { min-height: 0; }
  .hero-inner { grid-template-columns: 1fr; padding: 48px 0 38px; }
  h1 { font-size: 44px; }
  .hero-slogan { font-size: 21px; }
  .hero-product { width: min(100%, 310px); }
  .scroll-cue { margin-top: 18px; }
  .section { padding: 64px 0; }
  .section-heading, .scenes-grid, .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 24px; }
  .section-heading h2, .scene-heading h2, .about-grid h2, .contact-grid h2, .download-inner h2 { font-size: 30px; }
  .screen-gallery { grid-template-columns: 1fr; gap: 38px; }
  .screen-gallery figure { width: min(100%, 360px); margin: 0 auto; }
  .scene-list article { grid-template-columns: 1fr; gap: 4px; }
  .scene-list article p { grid-column: 1; margin-top: 5px; }
  .company-facts div, .contact-methods > div, .contact-methods > a { grid-template-columns: 1fr; gap: 2px; }
  .download-inner { grid-template-columns: 58px 1fr; }
  .download-inner > img { width: 58px; height: 58px; border-radius: 13px; }
  .download-inner .download-actions { grid-column: 1 / -1; }
  .button { flex: 1 1 170px; }
  .legal-main { padding: 28px 0 54px; }
  .legal-document { padding: 34px 24px; }
  .legal-document h1 { font-size: 32px; }
}