/* 深海科技 · Depth 版：近黑底 + 深海蓝/青色斜向光带。参考方向：Raycast 品牌色强光流动（用户 2026-11-06 选定 C）。
 * 内容保持愿景层面，不呈现具体产品；原始 Logo、主体、备案入口保留。 */
@import url('./ai-system/tokens.css');
@import url('./ai-system/base.css');
:root {
  --color-paper:#03060c; --color-paper-2:#070d18; --color-paper-3:#0c1626;
  --color-ink:oklch(97% .008 240); --color-ink-2:oklch(82% .02 240); --color-muted:oklch(66% .025 245); --color-rule:oklch(100% 0 0 / .08);
  --color-accent:oklch(83% .13 215); --color-accent-2:oklch(62% .17 252); --color-accent-ink:#03111f; --color-action-hover:oklch(92% .08 213);
  --glass:linear-gradient(180deg,oklch(100% 0 0 / .045),oklch(100% 0 0 / .015)); --glass-edge:oklch(100% 0 0 / .09);
  --font-mono:"SF Mono","JetBrains Mono",ui-monospace,Menlo,monospace;
  --header-height:84px; --radius-card:20px; --anchor-gap:38px;
}
html { scroll-behavior:smooth; scroll-padding-top:calc(var(--header-height) + 1px); }
a { text-decoration:none; }
button { cursor:pointer; }
a:focus-visible, button:focus-visible { outline:2px solid var(--color-focus); outline-offset:4px; }
.skip-link { position:absolute; inset:var(--space-md) auto auto var(--space-md); z-index:var(--z-tooltip); padding:var(--space-sm) var(--space-lg); background:var(--color-ink); color:var(--color-paper); transform:translateY(-200%); }
.skip-link:focus-visible { transform:none; }

/* Header */
.site-header { position:fixed; inset:0 0 auto; z-index:var(--z-sticky-nav); transition:background-color var(--dur-long) var(--ease-out),border-color var(--dur-long) var(--ease-out); border-bottom:1px solid transparent; }
.site-header.is-scrolled { background:oklch(8% .02 250 / .72); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); border-bottom-color:var(--color-rule); }
.header-inner { height:var(--header-height); display:flex; align-items:center; justify-content:space-between; gap:var(--space-xl); }
/* 深色底用纯白反白版标志（原版深蓝与底色对比度仅 1.9:1），不再需要光晕 */
.brand { display:inline-flex; align-items:center; gap:14px; flex-shrink:0; }
.brand img { width:34px; height:42px; object-fit:contain; }
.brand > span { font-size:18px; font-weight:600; line-height:1.25; letter-spacing:.02em; }
.brand small { display:block; margin-top:2px; font-size:12px; font-weight:400; color:var(--color-muted); letter-spacing:.06em; }
/* 顶栏品牌名只有一行，单独放大到标志高度的一半左右；页脚保持两行原尺寸 */
/* 苹方最粗只到中粗（600/700/800 渲染相同），叠一层同色细描边让笔画真正加粗 */
.site-header .brand > span { font-size:26px; font-weight:700; letter-spacing:.06em; -webkit-text-stroke:.6px currentColor; paint-order:stroke fill; }
.site-nav { display:flex; align-items:center; gap:var(--space-xs); padding:4px; border:1px solid var(--color-rule); border-radius:var(--radius-pill); background:oklch(100% 0 0 / .03); }
.site-nav a { display:inline-flex; align-items:center; min-height:36px; padding:0 var(--space-md); border-radius:var(--radius-pill); font-size:var(--text-sm); color:var(--color-ink-2); white-space:nowrap; transition:color var(--dur-short),background-color var(--dur-short); }
.site-nav a:hover, .site-nav a[aria-current] { color:var(--color-ink); background:oklch(100% 0 0 / .07); }
.header-actions { display:flex; align-items:center; gap:var(--space-md); }
.text-control { min-height:40px; padding:0; background:transparent; border:0; color:var(--color-muted); font-size:var(--text-xs); white-space:nowrap; }
.text-control:hover { color:var(--color-ink); }
.text-control:disabled { opacity:.45; cursor:default; }
.nav-toggle { display:none; width:44px; height:44px; border:0; padding:var(--space-sm); background:transparent; color:var(--color-ink); }
.nav-toggle span { display:block; height:1px; margin-block:7px; background:currentColor; }

/* Buttons */
.button { min-height:48px; padding:0 var(--space-lg); display:inline-flex; align-items:center; justify-content:center; gap:var(--space-sm); background:var(--color-ink); color:var(--color-accent-ink); border:1px solid transparent; border-radius:var(--radius-pill); font-size:var(--text-sm); font-weight:600; white-space:nowrap; transition:background-color var(--dur-short) var(--ease-out),box-shadow var(--dur-short),transform var(--dur-micro); }
.button:hover { background:var(--color-action-hover); box-shadow:0 0 32px oklch(83% .13 215 / .35); }
.button:active { transform:translateY(1px); }
.button svg { width:18px; height:18px; }
.button--quiet { background:oklch(12% .03 250 / .82); color:var(--color-ink); border-color:var(--glass-edge); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.button--quiet:hover { background:oklch(18% .04 250 / .9); box-shadow:none; }
.button--small { min-height:36px; padding:0 var(--space-md); font-size:var(--text-xs); }

/* Hero：斜向光带 */
.hero { position:relative; min-height:100svh; display:flex; flex-direction:column; overflow:hidden; isolation:isolate; }
.hero-light { position:absolute; inset:0; z-index:-1; pointer-events:none; }
.hero-light canvas { position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; transition:opacity 1.2s var(--ease-out); }
.hero-light.is-ready canvas { opacity:1; }
.hero-beam-fallback { position:absolute; inset:-30% -20%; transform:translateY(19%) rotate(-24deg); transition:opacity 1.2s var(--ease-out);
  background:
    linear-gradient(180deg,transparent 41%,oklch(62% .17 252 / .45) 46%,oklch(86% .12 210 / .9) 49.4%,oklch(97% .04 210) 50%,oklch(86% .12 210 / .9) 50.6%,oklch(62% .17 252 / .45) 54%,transparent 60%),
    linear-gradient(180deg,transparent 30%,oklch(45% .17 255 / .35) 38%,transparent 48%);
  filter:blur(18px); }
.hero-light.is-ready .hero-beam-fallback { opacity:0; }
.hero::after { content:''; position:absolute; inset:auto 0 0; height:28%; z-index:-1; background:linear-gradient(180deg,transparent,var(--color-paper)); pointer-events:none; }
.hero-stage { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:var(--space-lg); padding-block:calc(var(--header-height) + var(--space-2xl)) var(--space-xl); }
.hero-mark { width:clamp(56px,6vw,76px); aspect-ratio:300/372; }
.hero-mark img { width:100%; height:100%; object-fit:contain; }
.hero h1 { display:flex; flex-wrap:wrap; justify-content:center; font-size:clamp(3rem,7.4vw,7.25rem); line-height:1.05; font-weight:600; letter-spacing:-.01em; text-shadow:0 2px 40px oklch(5% .02 250 / .6); }
.hero h1 span { white-space:nowrap; }
.glow-text { background:linear-gradient(100deg,oklch(97% .02 220) 10%,oklch(85% .12 212) 55%,oklch(66% .16 248) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-lead { max-width:36em; color:var(--color-ink-2); font-size:var(--text-lead); line-height:1.7; text-shadow:0 1px 20px oklch(5% .02 250 / .8); }
.hero-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-sm); margin-top:var(--space-xs); }
.hero-tags { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-xs) var(--space-xl); margin:0 auto; padding-block:0 var(--space-2xl); list-style:none; color:var(--color-muted); font-size:var(--text-xs); letter-spacing:.12em; }
.hero-tags li { position:relative; }
.hero-tags li + li::before { content:''; position:absolute; top:50%; left:calc(var(--space-xl) / -2 - 2px); width:4px; height:4px; margin-top:-2px; border-radius:50%; background:oklch(100% 0 0 / .22); }

/* 通用分区 */
.section { --section-pad:clamp(72px,9vw,128px); position:relative; padding-block:var(--section-pad); scroll-margin-top:calc(var(--anchor-gap) - var(--section-pad)); }
/* 点导航后，每屏的标题（关于深海是整张卡片）停在顶栏下方 --anchor-gap 处，而不是带着整段上内边距 */
#contact { scroll-margin-top:var(--anchor-gap); }
.section::before { content:''; position:absolute; top:0; left:50%; width:min(1100px,90%); height:1px; transform:translateX(-50%); background:linear-gradient(90deg,transparent,oklch(83% .13 215 / .35),transparent); }
.section-head { max-width:760px; margin-bottom:clamp(48px,6vw,80px); }
.section h2 { font-size:clamp(2.25rem,4.6vw,4.25rem); line-height:1.12; font-weight:600; letter-spacing:-.01em; background:linear-gradient(180deg,var(--color-ink) 40%,oklch(72% .03 245)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.section h2 .glow-text { -webkit-background-clip:text; background-clip:text; }
.section-lead { margin-top:var(--space-lg); max-width:40em; color:var(--color-ink-2); font-size:var(--text-lead); line-height:1.75; }
h3 { font-size:var(--text-lg); font-weight:600; line-height:1.35; }

/* 卡片 */
.glass-card, .horizon-card, .principle, .audience-row > div { position:relative; border:1px solid var(--glass-edge); border-radius:var(--radius-card); background:var(--glass); overflow:hidden; }
.glass-card::before, .horizon-card::before { content:''; position:absolute; inset:0 0 auto; height:1px; background:linear-gradient(90deg,transparent,oklch(100% 0 0 / .35),transparent); }
.belief-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-md); }
.glass-card { padding:var(--space-xl); min-height:280px; display:flex; flex-direction:column; transition:border-color var(--dur-long) var(--ease-out),transform var(--dur-long) var(--ease-out); }
.glass-card:hover { border-color:oklch(83% .13 215 / .35); transform:translateY(-4px); }
.card-index { font-family:var(--font-mono); font-size:var(--text-xs); color:var(--color-accent); margin-bottom:auto; }
.glass-card h3 { margin-top:var(--space-2xl); margin-bottom:var(--space-sm); }
.glass-card p, .principle p, .audience-row p, .method-flow p { color:var(--color-muted); line-height:1.75; }

.horizon-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-md); }
.horizon-card { padding:clamp(28px,3.4vw,48px); display:flex; flex-direction:column; gap:var(--space-2xl); background:radial-gradient(120% 90% at 0% 0%,oklch(62% .17 252 / .22),transparent 60%),var(--glass); }
.horizon-card--alt { background:radial-gradient(120% 90% at 100% 0%,oklch(80% .13 205 / .16),transparent 60%),var(--glass); }
.horizon-label { font-family:var(--font-mono); font-size:var(--text-xs); color:var(--color-muted); letter-spacing:.08em; text-transform:uppercase; margin-bottom:var(--space-lg); }
.horizon-card h3 { font-size:clamp(2rem,3.4vw,3rem); margin-bottom:var(--space-md); }
.horizon-top > p:last-child { color:var(--color-ink-2); line-height:1.75; max-width:24em; }
.question-list { margin:auto 0 0; padding:0; list-style:none; border-top:1px solid var(--color-rule); }
.question-list li { display:flex; gap:var(--space-sm); padding-block:var(--space-md); border-bottom:1px solid var(--color-rule); color:var(--color-ink-2); line-height:1.6; }
.question-list li::before { content:'?'; flex-shrink:0; width:22px; height:22px; display:grid; place-items:center; border-radius:50%; border:1px solid oklch(83% .13 215 / .4); color:var(--color-accent); font-size:12px; font-family:var(--font-mono); }
.audience-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-md); margin-top:var(--space-md); }
.audience-row > div { padding:var(--space-lg) var(--space-xl); display:grid; grid-template-columns:auto 1fr; align-items:baseline; gap:var(--space-lg); border-radius:14px; }

/* 方法：横向步骤，顶部一条光线 */
.method-flow { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-xl); margin:0; padding:var(--space-2xl) 0 0; list-style:none; }
.method-flow::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,oklch(62% .17 252 / .1),oklch(83% .13 215 / .9) 50%,oklch(62% .17 252 / .1)); box-shadow:0 0 18px oklch(83% .13 215 / .5); }
.method-flow li { position:relative; }
.method-flow li::before { content:''; position:absolute; top:calc(-1 * var(--space-2xl) - 4px); left:0; width:9px; height:9px; border-radius:50%; background:var(--color-paper); border:1px solid var(--color-accent); box-shadow:0 0 12px oklch(83% .13 215 / .7); }
.step-no { display:block; font-family:var(--font-mono); font-size:clamp(2.5rem,4vw,3.5rem); line-height:1; color:transparent; -webkit-text-stroke:1px oklch(100% 0 0 / .22); margin-bottom:var(--space-lg); }
.method-flow h3 { margin-bottom:var(--space-sm); }

/* 原则 */
.principles-layout { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(40px,6vw,96px); align-items:start; }
.principles-layout .section-head { position:sticky; top:calc(var(--header-height) + 1px + var(--anchor-gap)); margin-bottom:0; }
.principle-list { display:grid; gap:var(--space-md); }
.principle { padding:var(--space-xl); display:grid; grid-template-columns:140px 1fr; gap:var(--space-lg); align-items:baseline; border-radius:14px; transition:border-color var(--dur-long) var(--ease-out); }
.principle:hover { border-color:oklch(83% .13 215 / .35); }

/* 关于 / 联系：带光带的收尾卡 */
.about-card { position:relative; overflow:hidden; isolation:isolate; padding:clamp(48px,8vw,120px) clamp(28px,6vw,96px); border:1px solid var(--glass-edge); border-radius:28px; background:radial-gradient(80% 120% at 50% 120%,oklch(45% .17 255 / .45),transparent 70%),var(--color-paper-2); text-align:center; display:flex; flex-direction:column; align-items:center; }
.about-card .section-lead { margin-inline:auto; }
.about-beam { position:absolute; z-index:-1; inset:-60% -10% auto; height:140%; transform:rotate(-14deg); background:linear-gradient(180deg,transparent 44%,oklch(62% .17 252 / .3) 48%,oklch(88% .1 210 / .55) 50%,oklch(62% .17 252 / .3) 52%,transparent 56%); filter:blur(14px); opacity:.85; }
.about-actions { margin-top:var(--space-2xl); display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--space-lg); }
.contact-line { font-family:var(--font-mono); font-size:var(--text-sm); color:var(--color-muted); }

/* Footer */
.site-footer { padding-block:var(--space-2xl) var(--space-xl); border-top:1px solid var(--color-rule); color:var(--color-muted); font-size:var(--text-xs); }
.footer-signature { display:flex; align-items:center; justify-content:space-between; gap:var(--space-lg); padding-bottom:var(--space-xl); color:var(--color-ink-2); font-size:var(--text-sm); }
.footer-bottom { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-md); padding-top:var(--space-lg); border-top:1px solid var(--color-rule); }
.legal-links { display:flex; flex-wrap:wrap; gap:var(--space-lg); }
.legal-links a { display:inline-flex; align-items:center; gap:6px; min-height:32px; }
.legal-links a:hover { color:var(--color-ink); }
.legal-links img { width:16px; height:16px; }

/* 滚动显现：仅在 JS 可用且允许动态时生效，无 JS 时内容始终可见 */
.js-motion .reveal { opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease-out),transform .9s var(--ease-out); }
.js-motion .reveal.is-visible { opacity:1; transform:none; }
.js-motion .belief-grid .reveal:nth-child(2), .js-motion .method-flow .reveal:nth-child(2), .js-motion .principle-list .reveal:nth-child(2) { transition-delay:.08s; }
.js-motion .belief-grid .reveal:nth-child(3), .js-motion .method-flow .reveal:nth-child(3), .js-motion .principle-list .reveal:nth-child(3) { transition-delay:.16s; }
.js-motion .method-flow .reveal:nth-child(4) { transition-delay:.24s; }

@media (max-width:1080px) {
  .site-nav a { padding:0 var(--space-sm); }
  .text-control { display:none; }
}
@media (max-width:900px) {
  .belief-grid { grid-template-columns:1fr; }
  .glass-card { min-height:0; }
  .glass-card h3 { margin-top:var(--space-xl); }
  .horizon-grid, .audience-row { grid-template-columns:1fr; }
  .method-flow { grid-template-columns:1fr 1fr; row-gap:var(--space-2xl); }
  .method-flow::before, .method-flow li::before { display:none; }
  .principles-layout { grid-template-columns:1fr; }
  .principles-layout .section-head { position:static; margin-bottom:var(--space-xl); }
}
@media (max-width:760px) {
  :root { --header-height:68px; --anchor-gap:24px; }
  .brand { gap:10px; }
  .brand img { width:28px; height:35px; }
  .brand > span { font-size:16px; }
  .brand small { font-size:11px; }
  .site-header .brand > span { font-size:21px; -webkit-text-stroke:.5px currentColor; }
  .nav-toggle { display:block; }
  .header-actions .button--small { display:none; }
  .site-nav { position:absolute; inset:calc(var(--header-height) + 8px) var(--gutter) auto; flex-direction:column; align-items:stretch; gap:2px; padding:var(--space-sm); border-radius:16px; background:oklch(10% .025 250 / .96); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
  .js .site-nav { display:none; }
  .site-header.is-open .site-nav { display:flex; }
  .site-header.is-open { background:oklch(8% .02 250 / .9); }
  .site-nav a { min-height:48px; font-size:var(--text-md); }
  .hero h1 { flex-direction:column; font-size:clamp(2.75rem,13vw,4rem); }
  .hero-lead { font-size:var(--text-md); }
  .hero-lead br { display:none; }
  .hero-tags { gap:var(--space-xs); padding-bottom:var(--space-xl); }
  .hero-tags li { padding:4px 10px; border:1px solid var(--color-rule); border-radius:var(--radius-pill); background:oklch(8% .02 250 / .6); letter-spacing:.06em; }
  .hero-tags li + li::before { display:none; }
  .method-flow { grid-template-columns:1fr; }
  .principle, .audience-row > div { grid-template-columns:1fr; gap:var(--space-xs); padding:var(--space-lg); }
  .glass-card { padding:var(--space-lg); }
  .footer-signature { flex-direction:column; align-items:flex-start; }
}
/* 桌面一屏一屏：点导航后，每屏内容正好在窗口内收尾（底部留 --fit-bottom），不截断、不露出下一屏。
   高度上限 900px，超高显示器不把卡片拉得过长；手机与竖屏平板照常往下滚动。 */
@media (min-width:1024px) and (min-height:680px) {
  :root { --fit-bottom:36px; }
  .section > .container { display:flex; flex-direction:column; min-height:min(900px, calc(100svh - var(--header-height) - 1px - var(--anchor-gap) - var(--fit-bottom))); }
  .section > .container > .section-head { flex-shrink:0; }
  /* 愿景、探索方向：卡片撑满剩余高度 */
  .belief-grid, .horizon-grid { flex:1; }
  /* 探索方向内容最多：标题与导语左右并排，卡片内边距收紧 */
  .explore .section-head { max-width:none; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:var(--gap-columns); align-items:end; margin-bottom:var(--space-xl); }
  .explore .section-head .section-lead { margin-top:0; justify-self:end; }
  .horizon-card { padding:clamp(24px,2.4vw,36px); gap:clamp(12px,3svh,24px); }
  .horizon-label { margin-bottom:var(--space-sm); }
  .horizon-card h3 { margin-bottom:var(--space-sm); }
  .question-list li { padding-block:clamp(8px,1.6svh,12px); }
  .audience-row > div { padding:var(--space-md) var(--space-xl); }
  /* 愿景：卡片里的标题和说明放大，卡片不显空 */
  .glass-card h3 { font-size:clamp(1.375rem,1.6vw,1.75rem); }
  .glass-card p { font-size:clamp(1rem,1.1vw,1.125rem); }
  /* 方法：步骤放大并沉到屏幕下部，上方留白归到标题与步骤之间 */
  .method-flow { margin-top:auto; }
  .method-flow .step-no { font-size:clamp(3.5rem,5.4vw,5.5rem); }
  .method-flow h3 { font-size:clamp(1.5rem,1.9vw,2rem); margin-bottom:var(--space-md); }
  .method-flow p { font-size:clamp(1rem,1.15vw,1.25rem); }
  /* 原则：右侧三条撑满整屏高度，字号放大；左侧标题和其他屏一样靠顶 */
  .section > .principles-layout { display:grid; align-items:stretch; }
  .principles-layout .section-head { position:static; align-self:start; }
  .principle-list { grid-template-rows:repeat(3,1fr); }
  .principle { align-content:center; grid-template-columns:minmax(150px,200px) 1fr; padding:var(--space-xl) clamp(32px,3vw,48px); }
  .principle h3 { font-size:clamp(1.5rem,1.9vw,2rem); }
  .principle p { font-size:clamp(1rem,1.15vw,1.25rem); }
  /* 关于深海：卡片撑满一屏，内容垂直居中 */
  .about-card { flex:1; justify-content:center; }
}
/* 矮屏（如 1280×720）：标题下方间距收小，内容仍能一屏放完 */
@media (min-width:1024px) and (min-height:680px) and (max-height:760px) {
  .section-head { margin-bottom:var(--space-xl); }
  .explore .section-head { margin-bottom:var(--space-lg); }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .glass-card:hover { transform:none; }
}