/* ==========================================================================
1. 设计令牌（对齐数谱官网 design-tokens.css，本页内联一份）
========================================================================== */
:root{
/* 品牌色 */
--brand:#555353; /* 主色 深灰 */
--brand-deep:#2e2d2d; /* 页脚 / 大标题 */
--accent:#89ba33; /* 强调色 黄绿 */
--accent-dark:#6f9c26; /* hover */
--accent-soft:#f4f9ea; /* 强调浅底 */
--navy:#1b3160; /* 深蓝 标题 / 链接 */
--navy-soft:#e9eef7; /* 深蓝浅底（分类标签用） */
--headline:#1c244b; /* 页面大标题深蓝 */
--alert:#e8681a; /* 警示 / 徽标（仅限需要引导点击处） */
/* 中性色 */
--ink:#333333;
--ink-2:#666363;
/* 2026-09-20 从 #a9a8a8 调深到 #757575：原值在白底上只有 2.4:1，
品牌副标语 / 文章分类标签 / 金句出处 / 流程小字 / 面包屑分隔符都低于 WCAG AA；
#757575 在白底上是 4.6:1，刚好过线，观感仍然是"浅灰但看得清"。
这几处用法全部落在白底或浅灰底上，所以可以全站一处改。 */
--ink-3:#757575;
--line:#e2e2e2;
--bg:#ffffff;
--bg-soft:#f2f2f2;
--bg-fog:#f7f7f7;
/* 深色区块（hero / 页脚） */
--deep-1:#232a3d;
--deep-2:#1b3160;
/* 字体：英文优先 Arial，中文回落到微软雅黑 */
/* 2026-09-20：暂不引外部 webfont（思源黑体），改为把系统字体栈排全：
中文先取 Windows 的微软雅黑 UI，再留 Mac 的苹方 / 冬青黑，
避免 Mac 用户掉到不理想的默认中文字体。零外部请求，静态站更稳。 */
--font-sans:Arial,"Microsoft YaHei UI","Microsoft YaHei","微软雅黑","PingFang SC","Hiragino Sans GB","Helvetica Neue",Helvetica,sans-serif;
/* 字号 */
--fs-xs:12px;
--fs-sm:14px;
--fs-base:16px;
--fs-md:18px;
--fs-lg:20px;
--fs-xl:24px;
--fs-2xl:32px;
--fs-3xl:42px;
/* 首页 hero 标题单独一档（次级页 hero 仍是 --fs-3xl，不跟着变）。
2026-09-20 第二轮按用户要求改：第一屏标题要**单行排列**，第二屏用**同一字号**
但「均可读出」必须仍在第二行。这两条约束在固定字号下是打架的——
文字列宽 col（>1024 时是两个栏位，col = 0.56×(min(1200,视口−40) − 48)）
· 第一屏单行：「tRNA 表达、氨酰化与修饰检测」自然宽 ≈ 13.74×字号 → 字号 ≤ col/13.74
· 第二屏断行：16 个全角字要放不下 ≈ 16×字号 → 字号 > col/16
col 在 1025 视口的 525px 到 ≥1280 视口的 618px 之间变化，两个区间不重叠
（窄屏上限 38.2px < 宽屏下限 38.6px），所以**没有任何固定字号能同时满足**。
解法：让字号跟着视口流，取 col/14.8 附近的值（两个约束的中间偏大一侧）：
calc(3.75vw − 3.4px) → 1025px 时约 35px、1100px 时约 38px、1200px 时约 42px，
1280px 以上封顶 42px（容器封顶 1200px，列宽不再变）。
1024px 及以下 hero 变单列，由后面的媒体查询直接给固定值，这段不影响它们。 */
--fs-hero:clamp(28px,calc(3.75vw - 3.4px),42px);
--lh-tight:1.35;
--lh-base:1.75;
/* 间距 */
--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
--sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
/* 圆角 / 阴影 */
--r-sm:4px; --r-md:8px; --r-lg:12px; --r-pill:999px;
--sh-1:0 1px 3px rgba(20,30,40,.06);
--sh-2:0 4px 16px rgba(20,30,40,.10);
--sh-3:0 10px 30px rgba(20,30,40,.14);
/* 布局 */
--w-container:1200px;
--pad-x:24px;
/* 门户导航高度（驱动吸顶偏移） */
--nav-h:64px;
--bar-h:36px;
}
/* ==========================================================================
2. 基础
========================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html,body{overflow-x:clip;}
body{
margin:0;
font-family:var(--font-sans);
font-size:var(--fs-base);
line-height:var(--lh-base);
color:var(--ink);
background:var(--bg);
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;border:0;}
a{color:var(--navy);text-decoration:none;}
a:hover{color:var(--accent-dark);}
p{margin:0 0 var(--sp-4);}
h1,h2,h3,h4{margin:0 0 var(--sp-3);font-weight:500;line-height:var(--lh-tight);color:var(--headline);
/* 句子式标题：禁止 text-transform（会把 tRNA 变成 TRNA） */
text-transform:none;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;font-size:inherit;cursor:pointer;}
.tn-container{max-width:var(--w-container);margin:0 auto;padding:0 var(--pad-x);}
/* 避免中文词组被拆到两行（例：「全程合作伙伴」不要断成「全」+「程合作伙伴」） */
.tn-nowrap{white-space:nowrap;}
/* 区块通用 */
.tn-block{padding:var(--sp-8) 0;}
.tn-block--alt{background:var(--bg-fog);}
/* 章节标题
2026-09-20 改版：原来是 16px「深灰底 + 黄绿左条」色块，八个区块连着出现时偏笨重，
与 42px 的 hero 标题落差也大。改为「左侧 3px 黄绿条 + 22px 深蓝粗体」——
与次级页 .tn-sec > h2 用的是同一套语言，首页和次级页从此一致。
（同款深灰色块仍保留在次级页右栏 .tn-side__title 上。） */
.tn-sec-title{position:relative;display:block;background:none;border-left:0;
color:var(--headline);font-size:22px;font-weight:700;line-height:1.35;
padding:0 0 0 14px;margin:0 0 var(--sp-3);}
.tn-sec-title::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;background:var(--accent);}
.tn-sec-sub{max-width:820px;margin:0 0 var(--sp-6);color:var(--ink-2);font-size:var(--fs-base);}
/* 按钮 */
.tn-btn{display:inline-block;padding:11px 26px;border:1px solid var(--accent);border-radius:var(--r-sm);
background:var(--accent);color:#fff;font-size:var(--fs-base);line-height:1.5;transition:background .2s,border-color .2s;}
.tn-btn:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff;}
.tn-btn--ghost{background:transparent;color:var(--accent-dark);}
.tn-btn--ghost:hover{background:var(--accent-soft);color:var(--accent-dark);}
.tn-btn--light{background:#fff;border-color:#fff;color:var(--brand-deep);}
.tn-btn--light:hover{background:var(--accent);border-color:var(--accent);color:#fff;}
/* 深色底（hero）上的次要按钮：黄绿实心主按钮旁边配一个描边款，
底色透明、描边和文字用白色，hover 才上黄绿（2026-09-20 加） */
.tn-btn--ghost-light{background:transparent;border-color:rgba(255,255,255,.55);color:#fff;}
.tn-btn--ghost-light:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff;}
/* ==========================================================================
3. 顶部信息条 + 门户导航
门户自带导航（与主站导航分离）：logo 回到主站，菜单指向 /trna/ 下的页面。
========================================================================== */
/* 白底信息条与白底导航：与白底 logo 融为一体（2026-09-18 按用户要求改） */
.tn-topbar{background:#fff;color:var(--ink-2);font-size:var(--fs-xs);line-height:var(--bar-h);
border-bottom:1px solid var(--line);}
.tn-topbar .tn-container{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);}
.tn-topbar a{color:var(--ink-2);}
.tn-topbar a:hover{color:var(--accent-dark);}
.tn-topbar__l{display:flex;gap:var(--sp-5);}
.tn-topbar__r{display:flex;gap:var(--sp-5);align-items:center;}
.tn-nav{position:sticky;top:0;z-index:60;background:#fff;
border-bottom:3px solid var(--accent);box-shadow:0 1px 3px rgba(20,30,40,.05);}
.tn-nav .tn-container{display:flex;align-items:center;gap:var(--sp-6);height:var(--nav-h);}
/* 品牌区底部对齐：logo 里 Aksomics 的字底与右侧两行文字的底部齐平（2026-09-20 按用户要求） */
.tn-brand{display:flex;align-items:flex-end;gap:var(--sp-3);flex:0 0 auto;}
.tn-brand img{display:block;height:41px;width:auto;border-radius:3px;} /* 2026-09-18 按用户要求放大到约 120% */
/* 两行两端对齐（2026-09-20 按用户要求）：标题行「数谱生物 tRNA 研究平台」与
副标语行「表达谱 · 氨酰化 · 修饰图谱」左右边缘对齐。
容器宽度取两行里较长的一行，较短的一行由 text-align-last:justify 撑满。 */
.tn-brand__txt{color:var(--brand-deep);font-size:var(--fs-sm);line-height:1.25;border-left:1px solid var(--line);padding-left:var(--sp-3);
text-align:justify;text-align-last:justify;}
.tn-brand__txt b{display:block;font-weight:700;letter-spacing:.5px;}
.tn-brand__txt span{color:var(--ink-3);font-size:var(--fs-xs);}
.tn-menu{display:flex;align-items:center;gap:var(--sp-1);margin-left:auto;height:100%;}
.tn-menu>li{position:relative;height:100%;display:flex;align-items:center;}
.tn-menu>li>a{display:flex;align-items:center;height:100%;padding:0 var(--sp-4);color:var(--brand-deep);
font-size:var(--fs-base);white-space:nowrap;}
.tn-menu>li>a:hover,.tn-menu>li:hover>a{background:var(--accent-soft);color:var(--accent-dark);}
.tn-menu>li.is-current>a{background:var(--accent);color:#fff;}
.tn-menu>li.is-current>a:hover{background:var(--accent-dark);color:#fff;}
.tn-caret{display:inline-block;margin-left:6px;border-top:4px solid currentColor;
border-left:4px solid transparent;border-right:4px solid transparent;transform:translateY(1px);}
/* 下拉面板
第一版的问题（2026-09-18）：面板没写宽度，宽度由内容 max-content 撑开，
「服务」菜单项又在导航右侧，于是面板整体超出视口右边，
第三列的长条目被硬断行，看着像"被截断"。
修法：① 显式宽度并用 min() 夹在视口内；② 越界时由页脚脚本做一次 translateX 修正。 */
.tn-drop{position:absolute;top:100%;left:0;min-width:280px;background:#fff;
border-top:3px solid var(--accent);box-shadow:var(--sh-3);padding:var(--sp-5);
display:none;z-index:70;}
.tn-menu>li:hover .tn-drop,.tn-menu>li:focus-within .tn-drop{display:block;}
/* 宽下拉：服务（4 列）/ 产品（2 列） */
.tn-drop--mega,.tn-drop--list{display:none;gap:var(--sp-5);}
/* 服务下拉的四列按内容长短配宽窄：前两列条目短（给窄），
后两列是「xxx tRNA单碱基测序（方法名）」这类长名称，给宽，
这样条目不跨行（2026-09-18 按用户要求调）。 */
.tn-drop--mega{width:min(1330px,calc(100vw - 40px));
grid-template-columns:0.54fr 1.02fr 1.22fr 1.22fr;}
/* 产品下拉：条目里有很长的试剂盒全名（约 420px），两列塞不下会折行，改单列宽面板 */
.tn-drop--list{width:min(520px,calc(100vw - 40px));grid-template-columns:1fr;}
/* 解决方案下拉（2026-09-20 按用户要求）：条目名称长，面板加宽并强制每条单行显示 */
.tn-drop--sol{width:min(430px,calc(100vw - 40px));white-space:nowrap;}
/* 解决方案页里的三级小标题（如「生物信息与交付」）：比 h2 小一档，但要明显重于正文 */
.tn-h3{font-size:var(--fs-md);font-weight:700;margin:var(--sp-5) 0 var(--sp-3);}
/* ==========================================================================
关于我们 + 四个数字（首页，2026-09-20）
位置：研究前沿与底部联系 CTA 之间；白底，靠一条细线与上面的
「团队与平台」（同为白底）分区；右上角不写"查看更多"按钮。
========================================================================== */
.tn-about{border-top:1px solid var(--line);}
.tn-about__grid{display:grid;grid-template-columns:1.35fr 1fr;gap:var(--sp-8);align-items:center;}
.tn-about__eyebrow{margin:0 0 var(--sp-3);color:var(--accent-dark);font-size:var(--fs-sm);
font-weight:700;letter-spacing:.5px;}
.tn-about__name{margin:0 0 var(--sp-4);font-size:26px;font-weight:700;color:var(--headline);line-height:1.3;}
.tn-about__txt p{color:var(--ink-2);font-size:var(--fs-base);margin:0 0 var(--sp-4);}
.tn-about__stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-6) var(--sp-5);}
.tn-about__stats b{display:block;font-size:40px;line-height:1.05;font-weight:700;color:var(--navy);
letter-spacing:-.5px;}
.tn-about__stats span{display:block;margin-top:8px;color:var(--ink-2);font-size:var(--fs-sm);}
@media (max-width:1024px){
.tn-about__grid{grid-template-columns:1fr;gap:var(--sp-7);}
}
@media (max-width:640px){
.tn-about__name{font-size:22px;}
.tn-about__stats b{font-size:32px;}
}
.tn-menu>li:hover .tn-drop--mega,.tn-menu>li:focus-within .tn-drop--mega,
.tn-menu>li:hover .tn-drop--list,.tn-menu>li:focus-within .tn-drop--list{display:grid;}
.tn-drop h4{margin:0 0 var(--sp-3);padding:0 0 var(--sp-2);color:var(--brand);
font-size:var(--fs-sm);font-weight:700;border-bottom:1px solid var(--line);}
.tn-drop h4 .tn-flag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:var(--r-pill);
font-size:11px;font-weight:700;line-height:1.6;vertical-align:1px;}
/* 下拉小标题的文字本身可以点（2026-09-22：两组「单碱基修饰」都指向 hub page）——
整行保持标题外观，hover 才变色，避免在菜单里冒出一条蓝色下划线。 */
.tn-drop h4 a{color:inherit;text-decoration:none;}
.tn-drop h4 a:hover,.tn-drop h4 a:focus-visible{color:var(--accent-dark);text-decoration:underline;}
.tn-flag--new{background:#fde7d5;color:#e8681a;}
.tn-flag--hot{background:#e8f3d3;color:#5c8a1b;}
.tn-drop li{margin:0 0 2px;}
.tn-drop li a{display:block;padding:5px 8px;border-radius:var(--r-sm);font-size:var(--fs-sm);color:var(--ink-2);
overflow-wrap:break-word;}
.tn-drop li a:hover{background:var(--accent-soft);color:var(--accent-dark);}
/* 移动端汉堡（默认隐藏；展开菜单由脚本切换 .is-open） */
.tn-burger{display:none;margin-left:auto;background:transparent;border:1px solid var(--line);
border-radius:var(--r-sm);padding:9px 11px;color:var(--brand-deep);line-height:0;}
.tn-burger svg{display:block;width:22px;height:22px;}
.tn-nav.is-open .tn-menu{display:block;position:absolute;top:100%;left:0;right:0;background:#fff;
border-top:1px solid var(--line);box-shadow:var(--sh-2);
padding:var(--sp-3) var(--pad-x);height:auto;max-height:70vh;overflow-y:auto;}
.tn-nav.is-open .tn-menu>li{display:block;height:auto;}
.tn-nav.is-open .tn-menu>li>a{height:auto;padding:10px 0;}
.tn-nav.is-open .tn-drop{position:static;display:block;box-shadow:none;border-top:0;padding:0 0 var(--sp-4);}
.tn-nav.is-open .tn-drop--mega,.tn-nav.is-open .tn-drop--list{grid-template-columns:1fr;width:auto;}
.tn-nav.is-open .tn-drop--sol{width:auto;white-space:normal;}
.tn-nav.is-open .tn-caret{display:none;}
/* ==========================================================================
4. Hero（两屏轮播）
========================================================================== */
.tn-hero{position:relative;background:var(--deep-2);overflow:hidden;}
.tn-hero__viewport{overflow:hidden;}
.tn-hero__track{display:flex;transition:transform .5s ease;}
.tn-hero__slide{flex:0 0 100%;position:relative;
background:linear-gradient(115deg,var(--deep-2) 0%,var(--deep-1) 62%,#2b3350 100%);
color:#fff;padding:var(--sp-8) 0;}
.tn-hero__slide::after{content:"";position:absolute;inset:0;pointer-events:none;
/* 绿色光晕：挪到右上角、范围收小（2026-09-20 按用户要求） */
background:radial-gradient(circle at 96% 4%,rgba(137,186,51,.22),transparent 30%);}
/* 首屏背景点阵纹理（2026-09-20 加）：透明度压得很低，只给深色底一点质感，
下半部用 mask 淡出，保证正文区的对比度不受影响。 */
.tn-hero__slide::before{content:"";position:absolute;inset:0;pointer-events:none;
background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px);
background-size:22px 22px;opacity:.5;
-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.85),rgba(0,0,0,.15) 70%,transparent);
mask-image:linear-gradient(180deg,rgba(0,0,0,.85),rgba(0,0,0,.15) 70%,transparent);}
.tn-hero__inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
gap:var(--sp-7);align-items:center;}
/* Hero 眉标：绿色实心 + 白字（2026-09-18 按用户要求，描边款在白底/深底上不够显眼） */
.tn-kicker{display:inline-block;margin-bottom:var(--sp-4);padding:5px 16px;
background:var(--accent);border:1px solid var(--accent);
border-radius:var(--r-pill);color:#fff;font-size:var(--fs-xs);letter-spacing:1px;font-weight:700;}
/* 两屏标题统一字号与字重（第二屏原来小一号、且都偏细）。
字号走 --fs-hero：2026-09-20 上午提到 48px，同日下午按用户要求改回
「随视口流的 clamp」——既要第一屏单行、又要第二屏仍在「均可读出」前断行，
固定字号满足不了（推导见 :root 里 --fs-hero 的注释）。次级页 hero 用的是
--fs-3xl，不受这里影响。 */
.tn-hero h1,.tn-hero h2{color:#fff;margin:0 0 var(--sp-4);font-weight:700;font-size:var(--fs-hero);}
.tn-hero__desc{color:#cfd4e2;font-size:var(--fs-base);max-width:560px;margin:0 0 var(--sp-5);}
.tn-pills{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0 0 var(--sp-6);}
.tn-pills li{padding:4px 12px;border-radius:var(--r-pill);background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.18);color:#e6e9f2;font-size:var(--fs-xs);}
.tn-hero__cta{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;}
/* 下面两条 .tn-hero__note 目前无元素使用——2026-09-20 按用户要求把两屏
轮播下方的注释小字（"样本类型：…" / "8 类修饰…"）删掉了；
样式留着，以后要加回来直接补回 … 即可。 */
/* 说明文字单独占一行（两颗按钮并排之后换行，2026-09-20） */
.tn-hero__cta .tn-hero__note{flex:1 1 100%;}
.tn-hero__note{color:#c3c9d9;font-size:var(--fs-xs);}
/* 首屏示意图加卡片容器（2026-09-20）：圆角 + 细描边 + 浅底 + 阴影，
让机制图从深色底上"浮"起来，不再是张裸图。 */
.tn-hero__fig{margin:0;padding:var(--sp-3);background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.18);border-radius:var(--r-lg);box-shadow:var(--sh-3);}
.tn-hero__fig img{display:block;width:100%;border-radius:var(--r-md);}
.tn-hero__fig figcaption{margin-top:var(--sp-3);color:#c3c9d9;font-size:var(--fs-xs);text-align:center;}
.tn-hero__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.35);
background:rgba(0,0,0,.25);color:#fff;font-size:var(--fs-md);line-height:1;}
.tn-hero__arrow:hover{background:var(--accent);border-color:var(--accent);}
.tn-hero__arrow.prev{left:18px;}
.tn-hero__arrow.next{right:18px;}
.tn-hero__dots{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:var(--sp-2);}
.tn-hero__dots button{width:10px;height:10px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.6);
background:transparent;}
.tn-hero__dots button.is-active{background:var(--accent);border-color:var(--accent);}
/* ==========================================================================
5. 特色四卡
========================================================================== */
.tn-feat{padding:var(--sp-7) 0;background:var(--bg-soft);}
.tn-feat__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-5);}
.tn-feat__card{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-5);
display:flex;flex-direction:column;box-shadow:var(--sh-1);}
.tn-feat__card h3{font-size:var(--fs-md);margin:0 0 var(--sp-3);}
.tn-feat__card p,.tn-feat__card li{font-size:var(--fs-sm);color:var(--ink-2);}
.tn-feat__card ul{margin:0 0 var(--sp-4);}
.tn-feat__card li{position:relative;padding-left:16px;margin-bottom:6px;}
.tn-feat__card li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;
border-radius:50%;background:var(--accent);}
.tn-feat__more{margin-top:auto;font-size:var(--fs-sm);font-weight:700;color:var(--navy);}
.tn-feat__card--dark{background:var(--brand);border-color:var(--brand);color:#e9e8e8;}
.tn-feat__card--dark h3{color:#fff;}
.tn-feat__card--dark p{color:#d9d7d7;}
.tn-feat__card--dark .tn-feat__more{color:var(--accent);}
/* ==========================================================================
6. 页内锚点导航（吸顶）
========================================================================== */
.tn-anchor{position:sticky;top:var(--nav-h);z-index:40;background:#fff;
border-top:1px solid var(--line);border-bottom:1px solid var(--line);
box-shadow:none;transition:box-shadow .18s ease;}
.tn-anchor.is-stuck{box-shadow:var(--sh-1);}
/* 锚点栏：窄屏横向滚动时隐藏滚动条 + 吸附到条目（2026-09-20） */
.tn-anchor ul{display:flex;justify-content:space-between;gap:var(--sp-2);overflow-x:auto;
scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;}
.tn-anchor ul::-webkit-scrollbar{display:none;}
.tn-anchor li{scroll-snap-align:start;}
.tn-anchor a{display:block;padding:var(--sp-3) var(--sp-2);font-size:var(--fs-base);font-weight:700;
color:#456075;white-space:nowrap;}
.tn-anchor a:hover,.tn-anchor a.is-active{color:var(--accent-dark);box-shadow:inset 0 -2px 0 var(--accent);}
/* 锚点落点：区块顶边应停在两层吸顶栏下方（这是兜底，实际由页脚脚本精确计算） */
#why-us,#hot,#services,#products,#insights,#contact{scroll-margin-top:120px;}
/* ==========================================================================
7. 为什么选择我们
========================================================================== */
.tn-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5);margin-bottom:var(--sp-6);}
.tn-step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
padding:var(--sp-5);box-shadow:var(--sh-1);}
.tn-step__num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
border-radius:50%;background:var(--accent);color:#fff;font-size:var(--fs-sm);font-weight:700;margin-bottom:var(--sp-3);}
.tn-step h3{font-size:var(--fs-md);margin:0 0 var(--sp-2);}
.tn-step p{font-size:var(--fs-sm);color:var(--ink-2);margin:0;}
.tn-cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5);}
.tn-card3{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-5);box-shadow:var(--sh-1);}
.tn-card3 h3{font-size:var(--fs-md);margin:0 0 var(--sp-2);}
.tn-card3 p{font-size:var(--fs-sm);color:var(--ink-2);margin:0;}
.tn-ico{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
border-radius:var(--r-sm);background:var(--accent-soft);color:var(--accent-dark);
font-size:var(--fs-md);font-weight:700;margin-bottom:var(--sp-3);}
.tn-ico svg{display:block;width:22px;height:22px;}
/* ==========================================================================
8. 新服务（带图卡片）
========================================================================== */
.tn-filters{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-5);}
.tn-filters button{padding:6px 16px;border:1px solid var(--line);border-radius:var(--r-pill);
background:#fff;color:var(--ink-2);font-size:var(--fs-sm);}
.tn-filters button.is-active{background:var(--brand);border-color:var(--brand);color:#fff;}
/* 2026-09-21（第三十五轮）：9 个单碱基页全部放进「新服务」，改成横向轮播——
一次看 3 张（≤1024 看 2 张、≤768 看 1 张），左右箭头 + 底部圆点翻页，
交互与 hero 轮播一致。没有 JS 时它退化成一条可横向滑动的轨道，第一屏照样可见。
grid-auto-columns 用 (100% − 2×gap)/3，所以横向不留 padding，翻页步长好算。 */
.tn-hot__wrap{position:relative;}
.tn-hot{display:grid;grid-auto-flow:column;gap:var(--sp-5);
grid-auto-columns:calc((100% - var(--sp-5) * 2) / 3);
overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
scrollbar-width:none;-webkit-overflow-scrolling:touch;
/* 上下留一点余量给卡片阴影 / hover 上浮，再用负外边距把版面位置拉回来 */
padding:6px 0 10px;margin:-6px 0 -10px;}
.tn-hot::-webkit-scrollbar{display:none;}
.tn-hot__card{scroll-snap-align:start;display:flex;flex-direction:column;
background:#fff;border:1px solid var(--line);
/* 卡片圆角对齐「新」标签的弧度：标签是高 23px 的胶囊，视觉弧半径≈12px ⇒ --r-lg */
border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1);transition:box-shadow .2s,transform .2s;}
/* 左右切换按钮（浅底卡片上用白底 + 细边 + 阴影，保证可见） */
.tn-hot__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
background:rgba(255,255,255,.94);color:var(--brand);font-size:var(--fs-md);line-height:1;
box-shadow:var(--sh-2);}
.tn-hot__arrow:hover{background:var(--accent);border-color:var(--accent);color:#fff;}
/* 半骑在卡片边线上：容器左右各留 24px 内边距，-14px 仍落在页内 */
.tn-hot__arrow.prev{left:-14px;}
.tn-hot__arrow.next{right:-14px;}
/* 底部圆点（与 hero 一致：小圆点，当前页填充强调色） */
.tn-hot__dots{display:flex;justify-content:center;gap:var(--sp-2);margin-top:var(--sp-5);}
.tn-hot__dots:empty{display:none;}
.tn-hot__dots button{width:10px;height:10px;padding:0;border-radius:50%;
border:1px solid var(--ink-3);background:transparent;}
.tn-hot__dots button.is-active{background:var(--accent);border-color:var(--accent);}
.tn-hot__card:hover{box-shadow:var(--sh-2);transform:translateY(-2px);}
.tn-hot__card:hover h3{color:var(--accent-dark);}
/* 卡片缩略图：完整显示、四周留白 10px（原来 cover 会左右裁切） */
/* 2026-09-20：机制图本身是白底的，六张连在一起容易糊成一片。
给缩略图区加浅灰"衬纸" + 图片描一道细线，六张图各自有边界。 */
.tn-hot__thumb{position:relative;aspect-ratio:16/9;background:var(--bg-soft);border-bottom:1px solid var(--line);
overflow:hidden;padding:10px;}
/* 2026-09-21（第三十六轮）：卡内 scheme 图的圆角跟卡片走同一个变量，
原来写死 2px，放大后跟 12px 的卡片弧线不搭。图片本身是白底的，
圆角一变，四个角露出浅灰衬纸，反而更像一张"贴纸"。 */
.tn-hot__thumb img{width:100%;height:100%;object-fit:contain;display:block;background:#fff;
border:1px solid var(--line);border-radius:var(--r-lg);}
.tn-hot__flag{position:absolute;top:10px;left:10px;padding:2px 10px;border-radius:var(--r-pill);
background:var(--alert);color:#fff;font-size:11px;font-weight:700;}
.tn-hot__body{padding:var(--sp-4) var(--sp-5) var(--sp-5);}
.tn-hot__body h3{font-size:var(--fs-md);margin:0 0 var(--sp-2);}
.tn-hot__body p{font-size:var(--fs-sm);color:var(--ink-2);margin:0;}
/* ==========================================================================
9. 服务体系（文字卡九宫格）
========================================================================== */
.tn-svc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5);}
/* 卡片网格下面还要跟一行链接时用它（与 .tn-insights 的 32px 间距一致，
否则「查看全部…」会贴着卡片，和别的分区不一样；2026-09-20） */
.tn-svc--mb{margin-bottom:var(--sp-6);}
.tn-svc__card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
border-radius:var(--r-md);padding:var(--sp-5);box-shadow:var(--sh-1);transition:box-shadow .2s,transform .2s;}
.tn-svc__card:hover{box-shadow:var(--sh-2);transform:translateY(-2px);}
.tn-svc__tag{display:inline-block;align-self:flex-start;margin-bottom:var(--sp-3);padding:2px 10px;
border-radius:var(--r-sm);background:var(--accent-soft);color:var(--accent-dark);
font-size:var(--fs-xs);font-weight:700;}
/* 服务体系那段（#services）的分类标签换深蓝浅底，与「配套产品」的浅绿底区分开，
两段九宫格各有各的脸（2026-09-20） */
#services .tn-svc__tag{background:var(--navy-soft);color:var(--navy);}
.tn-svc__card h3{font-size:var(--fs-md);margin:0 0 var(--sp-2);}
.tn-svc__card p{font-size:var(--fs-sm);color:var(--ink-2);margin:0 0 var(--sp-4);}
.tn-svc__links{margin-top:auto;display:flex;flex-wrap:wrap;gap:6px var(--sp-4);
font-size:var(--fs-sm);font-weight:700;}
/* ==========================================================================
10. 研究前沿（文章卡）
========================================================================== */
.tn-insights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5);margin-bottom:var(--sp-6);}
.tn-rev{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
border-left:3px solid var(--accent);border-radius:var(--r-md);padding:var(--sp-5);box-shadow:var(--sh-1);}
.tn-rev__meta{font-size:var(--fs-xs);color:var(--ink-3);margin:0 0 var(--sp-2);}
.tn-rev h3{font-size:var(--fs-md);margin:0 0 var(--sp-3);}
.tn-rev p{font-size:var(--fs-sm);color:var(--ink-2);margin:0 0 var(--sp-4);}
.tn-rev__more{margin-top:auto;font-size:var(--fs-sm);font-weight:700;color:var(--navy);}
.tn-sec-link{display:flex;gap:var(--sp-4);flex-wrap:wrap;}
.tn-sec-link a{font-size:var(--fs-sm);font-weight:700;color:var(--navy);}
.tn-sec-link a::after{content:" →";}
/* ==========================================================================
11. 专业服务 + 客户信赖
========================================================================== */
.tn-quote{margin-top:var(--sp-6);background:#fff;border:1px solid var(--line);border-left:3px solid var(--accent);
border-radius:var(--r-md);padding:var(--sp-6);box-shadow:var(--sh-1);}
.tn-quote h3{font-size:var(--fs-lg);margin:0 0 var(--sp-3);}
.tn-quote p{font-size:var(--fs-sm);color:var(--ink-2);margin:0 0 var(--sp-4);}
.tn-journal{display:flex;flex-wrap:wrap;gap:var(--sp-3);}
.tn-journal span{padding:5px 14px;border:1px solid var(--line);border-radius:var(--r-sm);
background:var(--bg-soft);color:var(--ink-2);font-size:var(--fs-xs);}
/* ==========================================================================
12. 底部 CTA
========================================================================== */
.tn-cta-band{background:linear-gradient(115deg,var(--deep-2) 0%,var(--deep-1) 100%);color:#fff;
padding:var(--sp-8) 0;text-align:center;}
.tn-cta-band h2{color:#fff;font-size:var(--fs-2xl);margin:0 0 var(--sp-3);}
.tn-cta-band p{color:#cfd4e2;max-width:720px;margin:0 auto var(--sp-6);}
/* ==========================================================================
13. 页脚
========================================================================== */
.tn-foot{background:var(--brand-deep);color:#b9b7b7;font-size:var(--fs-sm);padding:var(--sp-7) 0 0;}
.tn-foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--sp-6);padding-bottom:var(--sp-6);}
.tn-foot h4{color:#fff;font-size:var(--fs-base);margin:0 0 var(--sp-4);}
.tn-foot li{margin-bottom:var(--sp-2);}
.tn-foot a{color:#b9b7b7;}
.tn-foot a:hover{color:var(--accent);}
.tn-foot__name{color:#fff;font-size:var(--fs-lg);font-weight:500;margin:0 0 var(--sp-4);letter-spacing:.5px;}
.tn-foot__name span{display:block;color:#a7a5a5;font-size:var(--fs-xs);letter-spacing:1px;font-weight:400;}
.tn-foot__tel{color:#fff;font-size:var(--fs-md);font-weight:500;}
/* 页脚版权行 / 副标题原来 #8d8b8b，压在 #2e2d2d 上只有 4.1:1，
12px 小字过不了 WCAG AA；调到 #a7a5a5 是 5.5:1（2026-09-20） */
.tn-legal{border-top:1px solid #45443f;padding:var(--sp-4) 0;font-size:var(--fs-xs);color:#a7a5a5;
display:flex;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;}
/* 公众号二维码位：默认不显示（靠 [hidden] 属性收起），上线前删掉 hidden 即可。
注意 display:flex 会盖掉浏览器默认的 [hidden]{display:none}，所以必须显式写回来。 */
.tn-foot__qr{display:flex;align-items:center;gap:var(--sp-4);margin:var(--sp-5) 0 0;}
.tn-foot__qr[hidden]{display:none;}
.tn-foot__qr img{width:104px;height:104px;border-radius:var(--r-sm);background:#fff;padding:4px;}
.tn-foot__qr span{color:#a7a5a5;font-size:var(--fs-xs);line-height:1.6;}
/* ==========================================================================
14. 响应式（4 档）
========================================================================== */
@media (max-width:1280px){
:root{--pad-x:20px;}
}
/* 1024–1200 之间四列会偏挤，宽下拉降为两列（面板也随之变窄） */
@media (max-width:1200px){
.tn-drop--mega{grid-template-columns:repeat(2,minmax(0,1fr));
width:min(660px,calc(100vw - 40px));}
}
@media (max-width:1024px){
:root{--fs-3xl:34px;--fs-2xl:26px;--fs-hero:30px;}
.tn-feat__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
.tn-hero__inner{grid-template-columns:1fr;gap:var(--sp-6);}
.tn-hero__fig{max-width:640px;}
.tn-svc,.tn-insights{grid-template-columns:repeat(2,minmax(0,1fr));}
/* 新服务改成横向轮播后，这里改的是「一次露出几张」而不是列数 */
.tn-hot{grid-auto-columns:calc((100% - var(--sp-5)) / 2);}
}
@media (max-width:768px){
:root{--fs-3xl:26px;--fs-2xl:22px;--fs-xl:20px;--fs-hero:24px;--pad-x:16px;--nav-h:56px;}
.tn-topbar__l{display:none;}
.tn-menu{display:none;}
.tn-burger{display:inline-block;}
.tn-steps,.tn-cards3,.tn-svc,.tn-insights,.tn-foot__grid{grid-template-columns:1fr;}
/* 窄屏一次一张，靠滑动/圆点翻页（箭头与 hero 一样隐藏） */
.tn-hot{grid-auto-columns:100%;}
.tn-hot__arrow{display:none;}
.tn-block{padding:var(--sp-7) 0;}
.tn-anchor ul{justify-content:flex-start;}
.tn-hero__arrow{display:none;}
/* 窄屏首屏别拉太长：上下留白收一档，机制图限宽居中（2026-09-20） */
.tn-hero__slide{padding:var(--sp-7) 0;}
.tn-hero__fig{max-width:460px;margin:0 auto;}
/* 品牌区收一档：标题加了「数谱生物」四个字之后，390px 宽下
logo + 两行文字会把右侧汉堡按钮挤出视口（2026-09-20 诊断行实测
brand=[16..351] burger=[383..429] 视口 390）。这里把 logo 与字号同步收小。 */
.tn-nav .tn-container{gap:var(--sp-3);}
.tn-brand{gap:var(--sp-2);flex:0 1 auto;min-width:0;}
.tn-brand>a{flex:0 0 auto;}
.tn-brand img{height:34px;}
/* 极窄屏兜底：文字可收缩、超长省略号，保证汉堡按钮永远落在视口内 */
.tn-brand__txt{padding-left:var(--sp-2);min-width:0;}
.tn-brand__txt b,.tn-brand__txt span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tn-brand__txt b{font-size:13px;letter-spacing:.2px;}
.tn-brand__txt span{font-size:11px;}
}
@media (max-width:480px){
:root{--fs-3xl:23px;--fs-hero:21px;}
.tn-feat__grid{grid-template-columns:1fr;}
.tn-btn{width:100%;text-align:center;}
.tn-hero__cta{gap:var(--sp-3);}
.tn-cta-strip{flex-direction:column;align-items:flex-start;}
.tn-brand img{height:30px;}
.tn-brand__txt b{font-size:12px;}
.tn-brand__txt span{font-size:10.5px;}
}
@media (max-width:380px){
/* 超窄屏（320–380）：副标语让位给汉堡按钮，只留品牌主标题 */
.tn-brand__txt span{display:none;}
}
@media print{
.tn-nav,.tn-anchor,.tn-hero__arrow,.tn-hero__dots,
.tn-hot__arrow,.tn-hot__dots{display:none;}
}
/* 关闭动效偏好：轮播翻页不做平滑滚动 */
@media (prefers-reduced-motion:reduce){
.tn-hot{scroll-behavior:auto;}
}
/* ==========================================================================
16. 次级页组件（服务 / 产品 / 资源 / 客户成果 / 公司页共用）
首页的样式在上面，这里只补次级页需要的；类名继续用 tn- 前缀。
========================================================================== */
/* 面包屑 */
.tn-crumb{font-size:var(--fs-xs);color:var(--ink-2);padding:var(--sp-4) 0;border-bottom:1px solid var(--line);}
.tn-crumb a{color:var(--ink-2);}
.tn-crumb a:hover{color:var(--accent-dark);}
.tn-crumb span{margin:0 6px;color:var(--ink-3);}
/* 页头（hero）：深色渐变，样式对齐 Arraystar tRNA 小站的服务页 hero
2026-09-18 按用户要求：标题加粗、内容垂直居中、背景改深色渐变 */
.tn-page-head{position:relative;overflow:hidden;
display:flex;align-items:center;justify-content:center;
min-height:300px;padding:var(--sp-8) 0;
background:linear-gradient(115deg,var(--deep-2) 0%,var(--deep-1) 62%,#2b3350 100%);}
.tn-page-head::after{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(circle at 96% 4%,rgba(137,186,51,.22),transparent 30%);}
.tn-page-head > .tn-container{position:relative;z-index:2;width:100%;}
.tn-page-head h1{font-size:var(--fs-3xl);font-weight:700;color:#fff;margin:0 0 var(--sp-4);}
.tn-page-head p{max-width:880px;margin:0 0 var(--sp-3);color:#cfd4e2;}
/* 正文两栏（主内容 + 右侧相关栏） */
.tn-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:var(--sp-7);
padding:var(--sp-7) 0 var(--sp-8);align-items:start;}
/* 正文排版 */
.tn-article h2{position:relative;font-size:var(--fs-lg);font-weight:700;margin:var(--sp-7) 0 var(--sp-4);
padding-left:14px;color:var(--headline);}
.tn-article h2::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;background:var(--accent);}
.tn-article h2:first-child{margin-top:0;}
.tn-article h3{font-size:var(--fs-md);font-weight:700;margin:var(--sp-5) 0 var(--sp-3);color:var(--headline);}
.tn-article p{margin:0 0 var(--sp-4);color:var(--ink);}
.tn-article ul{margin:0 0 var(--sp-4);}
.tn-article ul li{position:relative;padding-left:18px;margin-bottom:8px;color:var(--ink);}
.tn-article ul li::before{content:"";position:absolute;left:2px;top:11px;width:6px;height:6px;
border-radius:50%;background:var(--accent);}
.tn-note{font-size:var(--fs-sm);color:var(--ink-2);background:var(--bg-soft);
border-left:3px solid var(--line);padding:var(--sp-4);border-radius:var(--r-sm);margin:0 0 var(--sp-5);}
.tn-ref{font-size:var(--fs-xs);color:var(--ink-2);}
.tn-ref li{margin-bottom:4px;padding-left:0;}
.tn-ref li::before{display:none;}
/* 相关资料（产品页的文件链接）：用正文标准字号，别跟参考文献一样缩到 12px（2026-09-20 按用户要求） */
.tn-docs{font-size:var(--fs-base);}
.tn-docs li{margin-bottom:8px;padding-left:0;}
.tn-docs li::before{display:none;}
.tn-docs a{color:var(--navy);}
.tn-docs a:hover{color:var(--accent-dark);}
/* 表格 */
.tn-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);margin:0 0 var(--sp-5);}
.tn-table th,.tn-table td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top;}
.tn-table th{background:var(--brand);color:#fff;font-weight:500;}
.tn-table tbody tr:nth-child(even){background:var(--bg-soft);}
.tn-table .tn-mod-sym{display:block;font-weight:600;white-space:nowrap;}
.tn-table .tn-mod-cn{display:block;color:var(--ink-3);font-size:var(--fs-xs);white-space:nowrap;margin-top:2px;}
/* 修饰表格：首列是"符号 + 中文名"两行块，保持顶对齐；后三列表格文字垂直居中，
行高被其它列拉高时不会出现贴顶的空档（2026-09-22 用户要求）。 */
.tn-table--mid td:nth-child(n+2){vertical-align:middle;}
/* 宽表格容器：列数多的表在窄屏横向滚动，不要撑破正文列（2026-09-20 产品页用） */
.tn-table-wrap{overflow-x:auto;margin:0 0 var(--sp-5);}
.tn-table-wrap .tn-table{margin:0;}
/* 折叠清单：产品页的长列表（引物 / 修饰酶 / tRF 编号）默认收起，展开后是表格 */
.tn-details{margin:0 0 var(--sp-5);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;}
.tn-details>summary{padding:10px 14px;cursor:pointer;font-weight:700;color:var(--brand-deep);background:var(--bg-soft);}
.tn-details>summary::marker{color:var(--accent);}
.tn-details[open]>summary{border-bottom:1px solid var(--line);}
.tn-details>*:not(summary){padding:0 14px;}
.tn-details .tn-table-wrap{margin:var(--sp-4) 0;}
/* 右侧相关栏 */
.tn-side{position:sticky;top:136px;align-self:start;}
/* 2026-09-24：「相关服务」列全站 19 个服务后，侧栏比视口还高——
sticky 元素高于视口时下半截会够不着（一直钉在顶部，滚不动）。
这里给宽屏下的侧栏一个最大高度 + 内部滚动：吸顶行为保留，条目全都能点到。
152 = 主导航 64 + 锚点栏约 52 + 上下留白。 */
@media (min-width:1025px){
.tn-side{max-height:calc(100vh - 152px);overflow-y:auto;overscroll-behavior:contain;
scrollbar-width:thin;}
.tn-side::-webkit-scrollbar{width:6px;}
.tn-side::-webkit-scrollbar-thumb{background:var(--line);border-radius:var(--r-pill);}
}
/* top = 主导航 64 + 锚点栏约 52 + 间距 20；窄屏侧栏转为正文下方，无需吸顶 */
@media (max-width:1024px){.tn-side{position:static;top:auto;}}
.tn-side__title{background:var(--brand);border-left:3px solid var(--accent);color:#fff;
font-size:var(--fs-sm);font-weight:700;padding:6px 14px;margin:0;}
.tn-side__list{margin:0 0 var(--sp-5);padding:0;list-style:none;background:var(--bg-soft);}
.tn-side__list li{border-bottom:1px solid var(--line);}
.tn-side__list li:last-child{border-bottom:0;}
.tn-side__list a{display:block;padding:9px 14px;font-size:var(--fs-sm);color:var(--ink-2);}
.tn-side__list a:hover{background:var(--accent-soft);color:var(--accent-dark);}
/* 分类列表（资源页 / 客户成果页） */
.tn-cat{margin:0 0 var(--sp-7);}
.tn-cat h2{font-size:var(--fs-lg);font-weight:700;margin:0 0 var(--sp-4);padding-bottom:var(--sp-2);
border-bottom:2px solid var(--accent);color:var(--headline);}
.tn-cat ul{margin:0;padding:0;list-style:none;}
.tn-cat li{padding:10px 0 10px 18px;border-bottom:1px dashed var(--line);position:relative;}
.tn-cat li::before{content:"";position:absolute;left:2px;top:19px;width:6px;height:6px;
border-radius:50%;background:var(--accent);}
.tn-cat li a{color:var(--ink);}
.tn-cat li a:hover{color:var(--accent-dark);}
/* 联系信息块 */
.tn-info{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5);margin-bottom:var(--sp-6);}
.tn-info__item{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
padding:var(--sp-5);box-shadow:var(--sh-1);}
.tn-info__item h3{font-size:var(--fs-md);font-weight:700;margin:0 0 var(--sp-3);}
.tn-info__item p{margin:0;font-size:var(--fs-sm);color:var(--ink-2);line-height:2;}
/* 响应式补充 */
@media (max-width:1024px){
.tn-layout{grid-template-columns:1fr;gap:var(--sp-6);}
.tn-side{order:2;}
}
@media (max-width:768px){
.tn-info{grid-template-columns:1fr;}
.tn-page-head{padding:var(--sp-6) 0 var(--sp-5);}
}
/* ==========================================================================
17. 次级页板块（SEO/GEO 用：锚点区块 / 定义块 / FAQ / 流程条 / 金句）
对标单碱基服务页的板块结构：服务优势 / 背景介绍 / 实验流程 /
生物信息分析 / 研究应用 / 常见问题 / 参考文献
========================================================================== */
/* 锚点导航（与首页同款，次级页用同一套） */
.tn-page-head + .tn-anchor{margin-top:0;}
/* 板块容器：锚点跳转时留出两层吸顶栏的高度 */
.tn-sec{margin:0 0 var(--sp-7);scroll-margin-top:120px;}
.tn-sec:last-child{margin-bottom:0;}
.tn-sec > h2{position:relative;font-size:var(--fs-lg);font-weight:700;margin:0 0 var(--sp-4);
padding-left:14px;color:var(--headline);}
.tn-sec > h2::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;background:var(--accent);}
/* 定义块：给 AI 引擎抓的"一句话定义"（GEO） */
.tn-def{background:var(--accent-soft);border-left:3px solid var(--accent);
border-radius:var(--r-sm);padding:var(--sp-4) var(--sp-5);margin:0 0 var(--sp-5);
font-size:var(--fs-sm);color:var(--ink);line-height:1.9;}
.tn-def strong{color:var(--brand-deep);}
/* 金句：带出处，供引用 */
.tn-quote-line{border-left:3px solid var(--line);padding:var(--sp-2) var(--sp-5);
color:var(--ink-2);font-size:var(--fs-sm);margin:0 0 var(--sp-5);}
.tn-quote-line cite{display:block;margin-top:6px;font-style:normal;color:var(--ink-3);font-size:var(--fs-xs);}
/* 文章页（resources/articles/）：正文图片统一宽度、图片与图注水平居中（2026-09-20 用户要求） */
.tn-article img{display:block;max-width:100%;height:auto;margin:var(--sp-4) auto;border-radius:var(--r-sm);}
.tn-article img.tn-fig{width:100%;max-width:660px;}
.tn-figcap{text-align:center;color:var(--ink-2);font-size:var(--fs-sm);line-height:1.7;margin:0 0 var(--sp-5);}
/* 正文里带图注的插图（2026-09-22 加）：图片宽度按正文行宽的百分比给（默认 80%），
自带 figcaption，图片靠 .tn-article img 的 margin:auto 居中，图注靠 .tn-figcap 居中。 */
.tn-article figure.tn-figure{margin:var(--sp-4) 0 var(--sp-5);}
.tn-article figure.tn-figure img{width:80%;}
.tn-article figure.tn-figure .tn-figcap{margin:var(--sp-3) 0 0;}
/* 文章页首屏的金句：紧跟 hero，样式沿用 .tn-quote-line */
.tn-article > .tn-quote-line{margin:0 0 var(--sp-6);}
/* 流程条 */
.tn-flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-3);margin:0 0 var(--sp-5);}
.tn-flow__step{background:#fff;border:1px solid var(--line);border-top:3px solid var(--accent);
border-radius:var(--r-sm);padding:var(--sp-4) var(--sp-3);font-size:var(--fs-sm);
text-align:center;color:var(--brand-deep);}
.tn-flow__step span{display:block;color:var(--ink-3);font-size:var(--fs-xs);margin-top:4px;}
/* FAQ：用原生 details，无脚本 */
.tn-faq{border-top:1px solid var(--line);}
.tn-faq details{border-bottom:1px solid var(--line);}
.tn-faq summary{position:relative;padding:var(--sp-4) var(--sp-6) var(--sp-4) 0;
font-size:var(--fs-base);font-weight:500;color:var(--brand-deep);cursor:pointer;list-style:none;}
.tn-faq summary::-webkit-details-marker{display:none;}
.tn-faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);
color:var(--accent);font-size:var(--fs-lg);line-height:1;}
.tn-faq details[open] summary::after{content:"−";}
.tn-faq .tn-faq__a{padding:0 0 var(--sp-4);font-size:var(--fs-sm);color:var(--ink);line-height:1.9;}
/* 要点格：研究应用 / 优势用两列 */
.tn-cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4) var(--sp-6);margin:0 0 var(--sp-4);}
/* 「各类修饰与对应服务」：左右双栏卡片（2026-09-22 用户要求"灵动一点"）。
卡片本体复用首页服务体系的 .tn-svc__card / .tn-svc__tag（白底 + 细边 + hover 上浮），
这里只把网格改成两列，并把卡内边距和标题/末段的间距收紧一点，两列才不会显得空。 */
.tn-modgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4) var(--sp-5);}
.tn-modgrid .tn-svc__card{padding:var(--sp-4) var(--sp-5);}
.tn-modgrid .tn-svc__card h3{margin:0 0 var(--sp-3);line-height:1.5;}
.tn-modgrid .tn-svc__card p{margin-bottom:0;}
.tn-modgrid .tn-svc__tag{margin-bottom:var(--sp-3);}
.tn-modgrid .tn-svc__tag{margin-bottom:var(--sp-3);}
/* 「研究应用」也走左右双栏卡片，但换一张脸跟上面的修饰卡片区分：
标题用数谱蓝 --navy（本站标题/链接的蓝），左侧加一条 3px 蓝条
（这条左条沿用首页「研究前沿」卡片的做法，只是把绿换成蓝），
卡片里不再放标签。(2026-09-22 用户要求) */
.tn-appgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4) var(--sp-5);}
.tn-appcard{background:#fff;border:1px solid var(--line);border-left:3px solid var(--navy);
border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);box-shadow:var(--sh-1);
transition:box-shadow .2s,transform .2s;}
.tn-appcard:hover{box-shadow:var(--sh-2);transform:translateY(-2px);}
.tn-appcard h3{font-size:var(--fs-md);font-weight:700;color:var(--navy);margin:0 0 var(--sp-3);line-height:1.5;}
.tn-appcard p{font-size:var(--fs-sm);color:var(--ink-2);line-height:1.85;margin:0;}
@media (max-width:1024px){
.tn-flow{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:768px){
.tn-flow{grid-template-columns:repeat(2,minmax(0,1fr));}
.tn-cols2{grid-template-columns:1fr;}
.tn-modgrid{grid-template-columns:1fr;}
.tn-appgrid{grid-template-columns:1fr;}
}
/* 上标（如 m2,2G）：收窄字号并避免撑高行距 */
sup{font-size:.72em;vertical-align:super;line-height:0;}