/* ============================================================================
   Bulanai 首页 —— 页面样式
   ----------------------------------------------------------------------------
   设计稿：Bulanai Homepage.dc.html 的方向 1a「paper blueprint」。
   令牌与 .btn/.card/.nav/.blueprint 等组件类全部来自 ds.css，本文件只做两件事：
     1. 把设计稿里写在元素 style="" 上的一次性排版搬成有名字的类；
     2. 补设计稿没有的两样东西 —— 响应式，和动效的降级。

   设计稿是 1280px 定宽画布，没有断点；下面的断点是为真机补的，取值原则是
   「先掉列数、再掉字号」，保证 1280px 下与设计稿逐像素一致。
   ========================================================================== */

/* ── 画布级 ───────────────────────────────────────────────────────────── */
body { background: var(--color-bg); color: var(--color-text); }
a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent-800); }

.wrap { width: 100%; max-width: 1280px; margin: 0 auto; }

/* 设计稿里反复出现的等宽小字（栏目号、图注、页脚、ticker）*/
.mono {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
}

/* 章节标题行：编号 + 标题 + 一条推到底的横线 */
.sec-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 40px; }
.sec-head .no { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: 0.16em; color: var(--color-accent-700); }
.sec-head h2 { margin: 0; font-family: var(--font-heading); font-size: clamp(28px, 3.4vw, 44px); line-height: 1.05; text-transform: uppercase; letter-spacing: 0.01em; }
.sec-head .rule { flex: 1; height: 1px; background: var(--color-divider); }

/* ── 导航 ─────────────────────────────────────────────────────────────── */
.site-nav { padding: 20px 48px; border-bottom: 1px solid var(--color-divider); gap: 22px; }
.site-nav .nav-brand { font-size: 22px; letter-spacing: 0.06em; text-transform: uppercase; }
.site-nav a:not(.btn) { font-size: 14px; }
.nav-cta {
  padding: 9px 18px; font-family: var(--font-heading); font-size: 15px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
/* 汉堡：只在窄屏出现，用 details/summary 做，无需 JS */
.nav-toggle { display: none; }

/* ── 首屏 ─────────────────────────────────────────────────────────────── */
.hero { display: grid; grid-template-columns: 1.05fr 0.95fr; border-bottom: 1px solid var(--color-divider); }
.hero-copy {
  padding: 72px 48px 64px; display: flex; flex-direction: column; gap: 26px;
  border-right: 1px solid var(--color-divider);
  animation: bl-rise 0.7s ease-out both;
}
.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-accent-700);
}
.eyebrow .dot { width: 7px; height: 7px; background: var(--color-accent); animation: bl-blink 1.8s steps(1, end) infinite; }
.hero h1 {
  margin: 0; font-family: var(--font-heading);
  font-size: clamp(44px, 6.6vw, 84px); line-height: 0.94;
  letter-spacing: -0.01em; text-transform: uppercase;
}
.hero-lede { margin: 0; max-width: 46ch; font-size: 19px; line-height: 1.55; color: var(--color-neutral-800); text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 6px; }
.btn-lg { padding: 14px 26px; font-family: var(--font-heading); font-size: 17px; letter-spacing: 0.08em; text-transform: uppercase; }

/* 右栏：网格底 + 扫描光 + 两块蓝图面板 */
.hero-panel {
  position: relative; padding: 48px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  background-image:
    linear-gradient(to right, var(--color-neutral-200) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-neutral-200) 1px, transparent 1px);
  background-size: 40px 40px;
  overflow: hidden;
}
.hero-panel .scan {
  position: absolute; top: 0; bottom: 0; width: 34%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-accent) 16%, transparent), transparent);
  animation: bl-scan 4.6s linear infinite;
}
.panel { position: relative; background: color-mix(in srgb, var(--color-bg) 88%, transparent); }
.panel-fig { padding: 26px 22px; }
.panel-label { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-neutral-700); margin-bottom: 18px; }
.panel-foot { display: flex; justify-content: space-between; margin-top: 18px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; color: var(--color-accent-700); }
.panel-term {
  padding: 22px; font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px; line-height: 1.9; color: var(--color-neutral-800);
}
.panel-term .out { color: var(--color-accent-700); }
.caret { animation: bl-blink 1s steps(1, end) infinite; }

/* 波形：条数与高度由设计稿的 wave() 决定，逐条的高度/透明度/延时写在 style 上 */
.wave { display: flex; align-items: center; gap: 3px; height: 96px; }
.wave span { flex: 1; background: var(--color-accent); transform-origin: center; }

/* ── 跑马灯 ───────────────────────────────────────────────────────────── */
.ticker {
  display: flex; align-items: center; gap: 40px;
  padding: 16px 48px; border-bottom: 1px solid var(--color-divider);
  overflow: hidden; color: var(--color-neutral-600);
}
.ticker-track { display: flex; gap: 40px; white-space: nowrap; animation: bl-tick 26s linear infinite; }

/* ── 01 产品能力 ──────────────────────────────────────────────────────── */
.products { padding: 72px 48px; }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.product-grid .card {
  padding: 30px 26px; gap: 14px;
  transition: transform 0.3s ease, background 0.3s ease;
}
.product-grid .card:hover { transform: translateY(-6px); background: color-mix(in srgb, var(--color-accent) 6%, transparent); }
.product-grid .card-kicker { font-size: 11px; }
.product-grid .card-title { font-size: 28px; text-transform: uppercase; }
.product-grid .card-body { font-size: 15px; line-height: 1.6; opacity: 0.85; }
.product-grid .card-meta { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding-top: 8px; }

/* ── 02 技术优势 ──────────────────────────────────────────────────────── */
.advantages { padding: 0 48px 72px; }
.adv-grid { display: grid; grid-template-columns: repeat(2, 1fr); background: var(--color-neutral-100); }
.adv-cell {
  padding: 34px 32px;
  border-right: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  display: flex; flex-direction: column; gap: 12px;
  transition: background 0.25s ease;
}
.adv-cell:hover { background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.adv-cell .row { display: flex; align-items: baseline; gap: 12px; }
.adv-cell .no { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.14em; color: var(--color-accent-700); }
.adv-cell h3 { margin: 0; font-family: var(--font-heading); font-size: clamp(21px, 2vw, 26px); text-transform: uppercase; }
.adv-cell p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--color-neutral-800); max-width: 48ch; text-wrap: pretty; }

/* ── CTA 条 ───────────────────────────────────────────────────────────── */
.cta {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 40px;
  padding: 56px 48px; border-top: 1px solid var(--color-divider);
  background: var(--color-accent-900); color: var(--color-bg);
}
.cta h2 { margin: 0; font-family: var(--font-heading); font-size: clamp(30px, 3.6vw, 46px); text-transform: uppercase; line-height: 1; }
.cta p { margin: 0; font-size: 17px; opacity: 0.8; max-width: 58ch; }
.cta .btn {
  padding: 18px 34px; background: var(--color-bg); color: var(--color-accent-900);
  border-color: var(--color-bg); font-family: var(--font-heading);
  font-size: 19px; letter-spacing: 0.08em; text-transform: uppercase;
}
/* CTA 在深底上，焦点圈用底色才看得见 */
.cta a:focus-visible { outline-color: var(--color-bg); }

/* ── 页脚 ─────────────────────────────────────────────────────────────── */
.site-foot {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding: 26px 48px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-neutral-600);
}
.site-foot a { color: inherit; }
.site-foot a:hover { color: var(--color-accent-700); }

/* ── 动效关键帧 ───────────────────────────────────────────────────────── */
@keyframes bl-scan  { 0% { transform: translateX(-100%); } 100% { transform: translateX(320%); } }
@keyframes bl-rise  { 0% { opacity: 0; transform: translateY(14px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes bl-tick  { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes bl-blink { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0.15; } 100% { opacity: 1; } }
/* 波形条：设计稿 wave() 里的 5 组缩放系数，每条按 i%5 取一组 */
@keyframes bl-bar-0 { from { transform: scaleY(0.35); } to { transform: scaleY(0.67); } }
@keyframes bl-bar-1 { from { transform: scaleY(0.55); } to { transform: scaleY(1.05); } }
@keyframes bl-bar-2 { from { transform: scaleY(0.75); } to { transform: scaleY(1.43); } }
@keyframes bl-bar-3 { from { transform: scaleY(1.35); } to { transform: scaleY(2.57); } }
@keyframes bl-bar-4 { from { transform: scaleY(1.70); } to { transform: scaleY(3.23); } }

/* ── 响应式 ───────────────────────────────────────────────────────────── */
/* 1120px：首屏右侧面板已经挤到看不清波形，改为上下叠放 */
@media (max-width: 1120px) {
  .hero { grid-template-columns: 1fr; }
  .hero-copy { border-right: 0; border-bottom: 1px solid var(--color-divider); padding: 60px 40px 52px; }
  .hero-panel { padding: 40px; }
  /* CTA 掉成单列后，按钮是 grid 项会被 stretch 成通栏，与设计里「贴合文字的
     按钮」不符，显式收回左对齐。 */
  .cta { grid-template-columns: 1fr; }
  .cta .btn { justify-self: start; }
}
/* 900px：三栏产品卡与两栏优势格都塞不下 */
@media (max-width: 900px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  .adv-grid { grid-template-columns: 1fr; }
  .site-nav, .ticker, .products, .cta, .site-foot { padding-left: 32px; padding-right: 32px; }
  .advantages { padding-left: 32px; padding-right: 32px; }
  .hero-copy, .hero-panel { padding-left: 32px; padding-right: 32px; }
}
/* 720px：导航链接收进汉堡，其余全部单栏 */
@media (max-width: 720px) {
  .product-grid { grid-template-columns: 1fr; }
  .site-nav .nav-links { display: none; }
  .nav-toggle { display: block; }
  .site-nav { position: relative; }
  .hero-copy { padding-top: 48px; gap: 22px; }
  .hero-lede { font-size: 17px; }
  .products { padding-top: 56px; padding-bottom: 56px; }
  .sec-head { flex-wrap: wrap; gap: 10px 14px; margin-bottom: 28px; }
  .sec-head .rule { display: none; }
  .cta { padding-top: 44px; padding-bottom: 44px; }
  .site-foot { flex-direction: column; gap: 8px; }
}
/* 480px：两个按钮并排会各自换行，改为撑满一行一个 */
@media (max-width: 480px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; }
  /* 窄屏反过来通栏，与首屏两个按钮保持一致 */
  .cta .btn { justify-self: stretch; }
  .site-nav, .ticker, .products, .advantages, .cta, .site-foot,
  .hero-copy, .hero-panel { padding-left: 20px; padding-right: 20px; }
  .hero-panel { padding-top: 32px; padding-bottom: 32px; }
}

/* ── 动效降级 ─────────────────────────────────────────────────────────── */
/* 这一版的动效密度不低：扫描光、跑马灯、44 条波形、两处闪烁光标，全是 infinite。
   对前庭功能敏感的人这是实打实的问题，设计稿（画布稿）没有考虑这件事。
   注意 bl-rise 是「入场」动画，直接 none 掉会让首屏停在 opacity:0 —— 必须
   显式把它归位，不能只写 animation: none。 */
@media (prefers-reduced-motion: reduce) {
  .hero-copy { animation: none; opacity: 1; transform: none; }
  .eyebrow .dot, .caret, .hero-panel .scan, .ticker-track, .wave span { animation: none !important; }
  .hero-panel .scan { display: none; }
  .ticker-track { white-space: normal; flex-wrap: wrap; }
  .product-grid .card, .adv-cell { transition: none; }
  .product-grid .card:hover { transform: none; }
  html { scroll-behavior: auto; }
}

/* ── 补：跳读链接、导航内部结构、CTA 文案块 ───────────────────────────── */
/* 键盘用户第一个 Tab 应该能跳过整条导航，平时不可见 */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  padding: 10px 16px; background: var(--color-accent-900); color: var(--color-bg);
  font-family: var(--font-heading); letter-spacing: 0.06em; text-transform: uppercase;
}
.skip:focus { left: 0; color: var(--color-bg); }

.nav-links { display: flex; align-items: center; gap: 22px; }

.cta > div { display: flex; flex-direction: column; gap: 12px; }

html { scroll-behavior: smooth; }

/* 窄屏汉堡：用 details/summary 实现，不引入任何 JS */
.nav-toggle > summary {
  list-style: none; cursor: pointer;
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--color-divider);
}
.nav-toggle > summary::-webkit-details-marker { display: none; }
.nav-toggle > summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* 三道杠：本体一道，前后伪元素各一道 */
.nav-toggle .bars,
.nav-toggle .bars::before,
.nav-toggle .bars::after {
  display: block; width: 16px; height: 1px; background: var(--color-text);
}
.nav-toggle .bars { position: relative; }
.nav-toggle .bars::before { content: ""; position: absolute; top: -5px; }
.nav-toggle .bars::after  { content: ""; position: absolute; top: 5px; }
.nav-toggle[open] > summary { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.nav-menu {
  position: absolute; right: 20px; top: calc(100% + 1px); z-index: 9;
  display: flex; flex-direction: column; min-width: 190px;
  background: var(--color-bg); border: 1px solid var(--color-divider);
  box-shadow: var(--shadow-md);
}
.nav-menu a {
  padding: 13px 18px; font-size: 15px;
  border-bottom: 1px solid var(--color-divider);
}
.nav-menu a:last-child { border-bottom: 0; }
.nav-menu a:hover { background: color-mix(in srgb, var(--color-accent) 8%, transparent); }

/* 跑马灯的第二份副本只为「平移 -50% 无缝接回」而存在；不滚动时它就是
   重复噪音，reduced-motion 下必须藏掉，否则会看到两行一样的词。 */
.ticker-dupe { display: contents; }
@media (prefers-reduced-motion: reduce) {
  .ticker-dupe { display: none; }
}