/* ==========================================================================
   本象（广州）科技有限公司 · 官网样式表
   风格：黑白细线条极简。零阴影、零渐变、零圆角，所有分隔都靠 1px 细线。
   版式：整站只有一屏，不需要滚动。

   【一屏不滚动是怎么做到的】
   1) 页面高度用 100dvh（不是 100vh）。dvh 会跟着手机浏览器地址栏的
      收起/展开实时变化，用 vh 在手机上会算多出几十像素，导致多出滚动条。
   2) 字号和间距全部用 clamp() + vh，屏幕越矮，字和留白自动同步变小，
      让内容「缩进去」，而不是被裁掉。
   3) 用的是 min-height 而不是固定 height，也没有 overflow:hidden。
      所以万一遇到极端矮的窗口（比如高度不到 480px），页面会老老实实
      出现滚动条 —— 内容永远不会被切掉，底部备案号永远看得到。

   【小白必读】想改颜色、间距、字号，只改下面这一块「变量区」就够了，
   改一处全站生效，不用去下面的代码里一行行找。
   ========================================================================== */

:root {
  /* ---------- 颜色 ---------- */
  --color-bg:        #FFFFFF;  /* 页面底色：大面积白 */
  --color-ink:       #000000;  /* 主文字、Logo、线条 hover 变黑后的颜色 */
  --color-ink-muted: #737373;  /* 次要文字（灰）。对比度 4.6:1，符合无障碍 */
  --color-body:      #262626;  /* 简介正文的颜色，比纯黑柔和一点 */
  --color-rule:      #DBDBDB;  /* 1px 细线的默认灰色 */

  /* ---------- 间距（都跟着屏幕高度缩放，屏幕越矮越紧凑） ---------- */
  --maxw:      1120px;                      /* 内容最大宽度 */
  --gutter:    clamp(20px, 5vw, 40px);      /* 左右安全边距 */
  --pad-stage: clamp(18px, 3.4vh, 56px);    /* 正文区上下留白 */
  --gap-col:   clamp(16px, 3.4vh, 48px);    /* 公司名与企业简介之间的间距 */
  --gap-text:  clamp(8px, 1.5vh, 20px);     /* 段落之间的小间距 */

  /* ---------- 字体与动效 ---------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ease:      180ms cubic-bezier(0.4, 0, 0.2, 1); /* 全站统一过渡速度 */

  /* 不做深色模式：声明 light 防止浏览器/系统强制反色，破坏黑白关系 */
  color-scheme: light;
}


/* ==========================================================================
   基础重置（一般不需要动）
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
  /* 关键一行：至少撑满一屏。用 min-height 保证内容多的时候也不会被切掉 */
  min-height: 100dvh;

  display: flex;
  flex-direction: column;   /* 从上到下：Logo 条 / 正文 / Footer */

  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 老浏览器不认识 dvh 时的退路：先用 vh 顶上 */
@supports not (min-height: 100dvh) {
  body { min-height: 100vh; }
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, p { margin: 0; }

ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

/* 键盘用户的焦点框：细描边，不用系统默认的粗蓝框 */
:focus-visible {
  outline: 1px solid var(--color-ink);
  outline-offset: 4px;
}

/* 内容居中容器 */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}


/* ==========================================================================
   通用文字样式
   ========================================================================== */

/* 英文小标签（AI+ TECHNOLOGY COMPANY 这种） */
.eyebrow {
  font-size: clamp(10px, 1.35vh, 12px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

/* 企业简介正文
   字号取「屏幕宽度」和「屏幕高度」算出来的两个值里较小的那个，
   再夹在 14px～17px 之间。宽度那一项放得比较宽松，
   这样平板竖屏（又窄又高）时字不会被压到最小号、下面空一大块。 */
.body-text {
  font-size: clamp(14px, min(2.6vw, 1.78vh), 17px);
  font-weight: 400;
  line-height: 1.9;
  color: var(--color-body);
}

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


/* ==========================================================================
   跳到正文（无障碍）：平时藏起来，键盘按 Tab 第一下才出现
   ========================================================================== */

.skip-link {
  position: absolute;
  top: -200px;
  left: var(--gutter);
  z-index: 100;
  padding: 10px 16px;
  background: var(--color-bg);
  border: 1px solid var(--color-ink);
  font-size: 13px;
}

.skip-link:focus { top: 12px; }


/* ==========================================================================
   区块 1 · 顶部 Logo 条
   ========================================================================== */

.site-header {
  flex: 0 0 auto;
  border-bottom: 1px solid var(--color-rule); /* 通栏 1px 细线 */
}

.header-inner {
  display: flex;
  align-items: center;
  min-height: clamp(46px, 8vh, 72px);
}

.brand { display: inline-flex; align-items: center; }

/* Logo 高度随屏幕高度微调，宽度按原始比例自动换算（2.52:1） */
.brand-logo {
  height: clamp(20px, 3.4vh, 28px);
  width: auto;
}


/* ==========================================================================
   区块 2 · 正文（公司名 + 企业简介）
   .stage 会自动吃掉 Logo 条与 Footer 之间剩下的全部高度
   ========================================================================== */

.stage {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.lede {
  flex: 1 1 auto;
  display: flex;
  align-items: center;              /* 内容在剩余空间里垂直居中 */
  padding-block: var(--pad-stage);
}

.lede-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* 窄屏：上下排列 */
  gap: var(--gap-col);
}

/* 窄屏上下排列时，用一条 1px 横细线把「公司名」和「企业简介」分开。
   屏幕特别矮（<600px）时不加这条线，把高度全留给文字。 */
@media (max-width: 899px) and (min-height: 600px) {
  .lede-about {
    border-top: 1px solid var(--color-rule);
    padding-top: var(--gap-col);
  }
}

/* 屏幕够宽（≥900px）时改成左右分栏，中间一条 1px 竖细线分隔 */
@media (min-width: 900px) {
  .lede-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 5vw, 72px);
    align-items: center;
  }

  .lede-about {
    border-left: 1px solid var(--color-rule);
    padding-left: clamp(40px, 5vw, 72px);
  }
}


/* ---------- 左栏：公司名 ---------- */

.hero-title {
  margin-top: clamp(10px, 1.8vh, 22px);
  /* 字号同时受屏幕宽度和高度限制，谁小听谁的，保证一行放得下、也不顶破一屏 */
  font-size: clamp(24px, min(5.4vw, 4.6vh), 46px);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: 0.02em;
}

/* 「（广州）」比主名号小一点、灰一点，让公司全称读起来有层次 */
.hero-title-sub {
  font-size: 0.62em;
  color: var(--color-ink-muted);
  letter-spacing: 0;
}

.hero-lead {
  margin-top: clamp(10px, 1.8vh, 22px);
  max-width: 26em;   /* 中文用 em 控制每行字数，1em ≈ 一个汉字宽 */
  font-size: clamp(14px, min(3vw, 1.95vh), 20px);
  font-weight: 400;
  line-height: 1.8;
  color: var(--color-body);
}


/* ---------- 右栏：企业简介 ---------- */

.about-title {
  margin-bottom: clamp(10px, 1.8vh, 20px);
  font-size: clamp(15px, min(3.4vw, 2.5vh), 24px);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: 0.04em;
}


/* ---------- 右栏底部：联系邮箱 ----------
   放在企业简介正文下面，用一条 1px 细线和正文隔开。
   （备案号那种"合规信息"留在 Footer，邮箱是"业务信息"，
     所以放在这里，两类信息不混在一起。）
   想让它离正文更远/更近，改下面 margin-top 和 padding-top 的第三个数。 */

.contact {
  margin-top: clamp(14px, 2.6vh, 32px);
  padding-top: clamp(12px, 2.2vh, 26px);
  border-top: 1px solid var(--color-rule);
}

/* 邮箱本身：下划线平时是灰细线，鼠标移上去/键盘选中时变黑，
   和 Footer 备案号是同一套交互语言 */
.contact-mail {
  display: inline-block;
  margin-top: clamp(4px, 0.9vh, 10px);
  font-size: clamp(13px, min(2.6vw, 1.7vh), 16px);
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--color-body);
  border-bottom: 1px solid var(--color-rule);
  padding-bottom: 2px;
  transition: color var(--ease), border-color var(--ease);
}

.contact-mail:hover,
.contact-mail:focus-visible {
  color: var(--color-ink);
  border-bottom-color: var(--color-ink);
}


/* ==========================================================================
   区块 3 · Footer（备案信息区，工信部硬性要求）
   备案号必须始终可见，所以这里绝不隐藏任何一行。
   页面下半部分只剩 Footer 一条细线，所以留白比正文区稍厚一点，
   让底部有分量、不显得空 —— 数值改大更空，改小更紧凑。
   ========================================================================== */

.site-footer {
  flex: 0 0 auto;
  border-top: 1px solid var(--color-rule);
  padding-block: clamp(14px, 2.5vh, 34px);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: clamp(2px, 0.6vh, 8px);
  text-align: center;
}

@media (min-width: 700px) {
  .footer-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    text-align: left;
  }
}

.footer-company {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--color-ink);
}

/* 备案号：字号 13px（要求 ≥12px 且可读），下划线 hover 由灰变黑 */
.footer-beian {
  font-size: 13px;
  line-height: 1.6;
}

.footer-beian a {
  color: var(--color-ink-muted);
  border-bottom: 1px solid var(--color-rule);
  padding-bottom: 1px;
  transition: color var(--ease), border-color var(--ease);
}

.footer-beian a:hover,
.footer-beian a:focus-visible {
  color: var(--color-ink);
  border-bottom-color: var(--color-ink);
}

.footer-copy {
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-ink-muted);
}


/* ==========================================================================
   无障碍：系统里开了「减弱动态效果」的用户，关闭所有动效
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}