@charset "UTF-8";
/* ==========================================================================
   AIMTE ·「关于我们」页 · 方案 A「深蓝沉浸」v4
   移动优先 · 语义化 · WCAG 2.2 AA · 8px 基线
   作用域：仅 page-templates/template-about.php（inc/setup.php 条件加载）
   说明：主题 theme.css 全量使用 aimte- 前缀，本文件类名与之互不冲突。
   ========================================================================== */

/* ---------- 设计变量（覆盖 / 补充 theme.css 同名变量，仅本页生效） ---------- */
:root{
  --navy-900:#04121F; --navy-800:#071B2E; --navy-700:#0A2740; --navy-600:#0E3557;
  --blue-700:#0A4D8F; --blue-600:#0B5CA8; --blue-500:#1276CC;
  --cyan-500:#00A6E0; --cyan-400:#2ABCF0; --cyan-200:#7FD8FF;
  --abt-ink:#12222F; --abt-ink-2:#2C3E4E;
  --abt-muted:#5B6C7E;      /* 正文级次要色：白底对比度 5.3:1 */
  --abt-muted-2:#8C9AA8;    /* 仅装饰、非文本 */
  --abt-line:#E4EAF1; --abt-line-2:#EFF3F8; --abt-soft:#F5F8FB;

  /* 字体刻度（1.25 比例） */
  --fs-xs:.75rem; --fs-sm:.8125rem; --fs-base:1rem; --fs-lg:1.0625rem;
  --fs-xl:1.25rem; --fs-2xl:1.5rem;

  /* 间距（4px 网格） */
  --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.25rem; --sp-6:1.5rem;
  --sp-8:2rem; --sp-10:2.5rem; --sp-12:3rem; --sp-16:4rem; --sp-20:5rem;

  /* 容器宽度不再自持，直接继承主题 --container（1200px；≥1520px 自动升为 1400px），
     与 .aimte-container 完全同源，保证本页有效可视宽度与全站一致 */
  --abt-w:var(--container,1200px); --abt-r:6px; --abt-r-lg:12px;
  /* 板块纵向呼吸间距：全页统一，改一处即全站板块同步（手机 64px / 桌面 72px） */
  --abt-sec-y:4rem;
  /* 深浅背景交界处（Hero→简介、行业→CTA）的加大版间距 */
  --abt-gap-lg:calc(var(--abt-sec-y) + 2.25rem);
  --abt-sh-sm:0 2px 10px rgba(9,32,58,.05);
  --abt-sh-md:0 14px 34px rgba(9,32,58,.09);
  --abt-sh-lg:0 26px 60px rgba(9,32,58,.16);

  --abt-tr:.24s cubic-bezier(.22,.61,.36,1);
  --abt-tr-slow:.32s cubic-bezier(.22,.61,.36,1);

  --abt-font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;
  --abt-num:"SF Mono","DIN Alternate","Helvetica Neue",Arial,sans-serif;
}

/* ---------- 区块基础（仅本页容器内生效） ---------- */
.abt{font-family:var(--abt-font);color:var(--abt-ink);line-height:1.75;-webkit-font-smoothing:antialiased}
.abt *,.abt *::before,.abt *::after{box-sizing:border-box}
.abt h1,.abt h2,.abt h3,.abt h4{margin:0 0 .55em;font-weight:700;line-height:1.3;letter-spacing:-.01em}
.abt p{margin:0 0 1em}
.abt ul,.abt ol{margin:0;padding:0;list-style:none}
.abt a{color:inherit;text-decoration:none;transition:color var(--abt-tr),opacity var(--abt-tr)}
.abt img{max-width:100%;display:block}
.abt ::selection{background:rgba(42,188,240,.28)}

/* 与 .aimte-container 规则完全对齐：左右内边距 24px；≤640px 收窄到 18px；
   最大宽度走 --abt-w → --container，≥1520px 时自动与其他页面同步扩到 1400px */
.abt-wrap{width:100%;max-width:var(--abt-w);margin:0 auto;padding:0 24px}
@media(max-width:640px){.abt-wrap{padding:0 18px}}

/* 焦点可见（浅底深蓝 / 深底浅青，均 ≥3:1） */
.abt :focus-visible{outline:3px solid var(--blue-700);outline-offset:2px;border-radius:3px}
.abt .on-dark :focus-visible{outline-color:var(--cyan-200)}

/* 屏幕阅读器专用 */
.abt-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- 通用排版件 ---------- */
.abt .kicker{display:inline-flex;align-items:center;gap:8px;font:700 var(--fs-xs)/1 var(--abt-font);letter-spacing:.22em;text-transform:uppercase;color:var(--blue-600);margin-bottom:var(--sp-4)}
.abt .kicker::before{content:"";width:26px;height:2px;background:var(--cyan-500);flex:none}
.abt .on-dark .kicker{color:var(--cyan-400)}

.abt .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:700 .9375rem/1 var(--abt-font);padding:15px 28px;border:0;border-radius:7px;
  transition:transform var(--abt-tr),background-color var(--abt-tr),box-shadow var(--abt-tr),border-color var(--abt-tr);
  will-change:transform;
}
.abt .btn--pri{background:linear-gradient(120deg,var(--blue-700),var(--blue-600));color:#fff;box-shadow:0 10px 24px rgba(11,92,168,.28)}
.abt .btn--pri:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 16px 32px rgba(11,92,168,.36);color:#fff}
.abt .btn--pri:active{transform:scale(.97)}
.abt .btn--ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.42)}
.abt .btn--ghost:hover{transform:translateY(-2px) scale(1.02);background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
.abt .btn--ghost:active{transform:scale(.97)}

/* 品牌画面 / 行业图（真实照片填充） */
.abt .media{
  position:relative;overflow:hidden;border-radius:var(--abt-r-lg);
  background:linear-gradient(135deg,#0E3557 0%,#0B5CA8 58%,#1276CC 100%);
}
.abt .media::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(120% 130% at 12% -10%,rgba(42,188,240,.5),transparent 56%),repeating-linear-gradient(118deg,rgba(255,255,255,.07) 0 2px,transparent 2px 10px)}
.abt .media img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.abt .media--has-img::before{background:linear-gradient(180deg,rgba(4,18,31,.12),rgba(4,18,31,.34))}
.abt .media-cap{position:absolute;left:var(--sp-3);bottom:var(--sp-3);z-index:2;font-size:var(--fs-xs);color:rgba(255,255,255,.92);background:rgba(4,18,31,.48);border:1px solid rgba(255,255,255,.22);padding:4px 12px;border-radius:20px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* ============================================================
   1. Hero
   ============================================================ */
.abt .hero{
  position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(760px 420px at 78% 6%,rgba(42,188,240,.24),transparent 62%),linear-gradient(160deg,#04121F 0%,#0A2740 58%,#0E3557 100%);
  padding:var(--sp-10) 0 var(--abt-sec-y);
}
.abt .hero::after{content:"";position:absolute;right:-120px;top:-80px;width:380px;height:380px;border-radius:50%;border:1px solid rgba(255,255,255,.09);pointer-events:none}
.abt .crumb{font-size:var(--fs-sm);color:rgba(255,255,255,.56);margin-bottom:var(--sp-8)}
.abt .crumb a:hover{color:#fff;text-decoration:underline}
.abt .crumb b{color:rgba(255,255,255,.86);font-weight:600}
.abt .hero h1{font-size:clamp(1.75rem,7.2vw,2.875rem);font-weight:800;line-height:1.24;letter-spacing:-.02em;max-width:17em;color:#fff}
.abt .hero h1 em{font-style:normal;background:linear-gradient(100deg,#2ABCF0,#9CE4FF);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#9CE4FF}
.abt .hero .lead{margin-top:var(--sp-5);font-size:1.0625rem;line-height:1.8;color:rgba(255,255,255,.82);max-width:34em}
.abt .hero__btns{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-8)}
@media(min-width:600px){.abt .hero__btns{flex-direction:row;flex-wrap:wrap}}
@media(min-width:1024px){
  .abt{--abt-sec-y:4.5rem}
  .abt .hero{padding:var(--sp-16) 0 var(--abt-sec-y)}
  .abt .hero h1{font-size:clamp(2.25rem,3.6vw,2.875rem)}
  .abt .hero .abt-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-10);align-items:center}
  .abt .hero__btns{margin-top:0;justify-self:end;flex-wrap:nowrap}
}

/* ============================================================
   2. 品牌画面
   ============================================================ */
.abt .cover{margin-top:-56px;position:relative;z-index:3;padding-bottom:var(--sp-16)}
.abt .cover .media{min-height:280px;box-shadow:var(--abt-sh-lg);display:flex;align-items:flex-end;border-radius:var(--abt-r-lg)}
.abt .cover__panel{position:relative;z-index:3;margin:var(--sp-5);padding:var(--sp-5) var(--sp-6);border-radius:10px;background:rgba(4,18,31,.54);border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);max-width:34em}
.abt .cover__panel .k{font:700 var(--fs-xs)/1 var(--abt-font);letter-spacing:.22em;text-transform:uppercase;color:var(--cyan-400);margin-bottom:10px}
.abt .cover__panel p{margin:0}
.abt .cover__panel .t{color:#fff;font-size:clamp(1.0625rem,2.4vw,1.375rem);font-weight:600;line-height:1.5}
@media(min-width:768px){.abt .cover{margin-top:-72px}.abt .cover .media{min-height:400px}.abt .cover__panel{margin:var(--sp-8)}}

/* ============================================================
   3. 公司简介 + 定位
   ============================================================ */
.abt .intro{padding:var(--abt-gap-lg) 0 var(--abt-sec-y)}
.abt .intro h2{font-size:clamp(1.3125rem,4.4vw,1.6875rem);font-weight:800;color:var(--navy-700);margin-bottom:var(--sp-5)}
.abt .prose p{color:var(--abt-ink-2);font-size:1.0625rem;line-height:1.85;margin-bottom:var(--sp-4)}
.abt .prose p:last-child{margin-bottom:0}
/* 简介区右栏图片：4:3 比例，圆角 + 投影；无图时深蓝渐变占位 */
.abt .intro-media{position:relative;margin:0;border-radius:var(--abt-r-lg);overflow:hidden;box-shadow:var(--abt-sh-md);aspect-ratio:4/3;background:linear-gradient(135deg,#0E3557,#0B5CA8)}
.abt .intro-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(min-width:1024px){
  .abt .intro__grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(340px,1fr);gap:var(--sp-10);align-items:start}
}

/* ============================================================
   4. 数据带
   ============================================================ */
.abt .stats{background:linear-gradient(120deg,#04121F,#0E3557 70%,#0B5CA8);color:#fff;padding:var(--sp-10) 0}
.abt .stats__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6) 0}
.abt .stats__it{text-align:center;padding:0 var(--sp-4);position:relative}
.abt .stats__it:nth-child(odd)::after{content:"";position:absolute;right:0;top:12%;height:76%;width:1px;background:rgba(255,255,255,.14)}
.abt .stats__n{font:800 clamp(1.875rem,7vw,2.75rem)/1 var(--abt-num);letter-spacing:-.02em}
.abt .stats__n small{font-size:.42em;font-weight:700;color:var(--cyan-400);margin-left:5px;letter-spacing:0}
.abt .stats__l{font-size:var(--fs-sm);color:rgba(255,255,255,.78);margin-top:10px}
@media(min-width:768px){
  .abt .stats{padding:var(--sp-12) 0}
  .abt .stats__grid{grid-template-columns:repeat(4,1fr)}
  .abt .stats__it:nth-child(odd)::after{display:none}
  .abt .stats__it:not(:last-child)::after{content:"";position:absolute;right:0;top:12%;height:76%;width:1px;background:rgba(255,255,255,.14)}
}

/* ============================================================
   5. 通用区块
   ============================================================ */
.abt .sec{padding:var(--abt-sec-y) 0}
.abt .sec--soft{background:var(--abt-soft);padding-bottom:var(--abt-gap-lg)}
.abt .sec__head{margin-bottom:var(--sp-10)}
.abt .sec__head h2{font-size:clamp(1.375rem,4.6vw,1.8125rem);font-weight:800;color:var(--navy-700);margin-bottom:var(--sp-3)}
.abt .sec__head p{color:var(--abt-muted);font-size:1rem;line-height:1.8;max-width:38em;margin:0}

/* 产品线 */
.abt .lines{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3)}
.abt .card{
  display:block;background:#fff;border:1px solid var(--abt-line);border-radius:11px;padding:var(--sp-6);
  position:relative;overflow:hidden;
  transition:transform var(--abt-tr-slow),box-shadow var(--abt-tr-slow),border-color var(--abt-tr-slow);
}
.abt .card::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:linear-gradient(90deg,var(--cyan-400),var(--blue-600));transform:scaleX(0);transform-origin:left;transition:transform var(--abt-tr-slow)}
.abt .card:hover{transform:translateY(-4px);box-shadow:var(--abt-sh-md);border-color:#CFE0F3}
.abt .card:hover::before{transform:scaleX(1)}
.abt .card__ic{width:46px;height:46px;border-radius:11px;background:linear-gradient(140deg,#E7F4FD,#D6EAFB);display:grid;place-items:center;margin-bottom:var(--sp-4)}
.abt .card h3{font-size:1.03125rem;font-weight:700;color:var(--navy-700);margin-bottom:var(--sp-2)}
.abt .card p{font-size:.875rem;line-height:1.7;color:var(--abt-muted);margin:0}
.abt .card__more{display:inline-flex;align-items:center;gap:6px;font-size:.875rem;font-weight:700;color:var(--blue-600);margin-top:var(--sp-4)}
.abt .card:hover .card__more{text-decoration:underline}
@media(min-width:600px){.abt .lines{grid-template-columns:repeat(2,1fr)}}
/* 手机端两列：卡片内距/图标/字号整体收一档，保证 160px 宽度下不挤 */
@media(max-width:599px){
  .abt .card{padding:var(--sp-4)}
  .abt .card__ic{width:36px;height:36px;border-radius:9px;margin-bottom:var(--sp-3)}
  .abt .card__ic svg{width:18px;height:18px}
  .abt .card h3{font-size:.9375rem;margin-bottom:5px}
  .abt .card p{font-size:.75rem;line-height:1.6}
  .abt .card__more{font-size:.75rem;margin-top:var(--sp-3)}
}
@media(min-width:1024px){.abt .lines{grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}}
@media(min-width:1200px){
  .abt .lines{grid-template-columns:repeat(6,1fr);gap:var(--sp-4)}
  .abt .card{padding:var(--sp-5) var(--sp-4)}
  .abt .card__ic{width:38px;height:38px;border-radius:9px;margin-bottom:var(--sp-3)}
  .abt .card__ic svg{width:18px;height:18px}
  .abt .card h3{font-size:.96875rem}
  .abt .card p{font-size:.8125rem;line-height:1.6}
  .abt .card__more{margin-top:var(--sp-3);font-size:.8125rem}
}

/* 行业 */
.abt .inds{display:grid;gap:var(--sp-4)}
/* 行业卡:照片沉浸式——整卡为4:3实景图,底部深蓝渐变压白字,悬停图片缓放 */
.abt .ind{position:relative;display:block;aspect-ratio:4/3;border-radius:var(--abt-r-lg);overflow:hidden;background:linear-gradient(140deg,#0E3557,#0B5CA8);box-shadow:var(--abt-sh-sm);transition:transform var(--abt-tr-slow),box-shadow var(--abt-tr-slow)}
.abt .ind:hover{transform:translateY(-4px);box-shadow:var(--abt-sh-md)}
.abt .ind::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(4,18,31,.06) 38%,rgba(4,18,31,.86) 100%);pointer-events:none}
.abt .ind .media{position:absolute;inset:0;height:auto;border-radius:0}
.abt .ind .media img{transition:transform var(--abt-tr-slow)}
.abt .ind:hover .media img{transform:scale(1.06)}
.abt .ind__bd{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:var(--sp-5)}
.abt .ind h3{font-size:1.0625rem;font-weight:700;color:#fff;margin-bottom:5px}
.abt .ind p{font-size:.8125rem;color:rgba(255,255,255,.85);line-height:1.6;margin:0}
@media(min-width:600px){.abt .inds{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.abt .inds{grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}}

/* 优势 */
.abt .advs{display:grid;gap:var(--sp-4)}
.abt .adv{border:1px solid var(--abt-line);border-radius:var(--abt-r-lg);padding:var(--sp-6);background:#fff;display:flex;gap:var(--sp-5);align-items:flex-start}
.abt .adv__no{font:800 2.5rem/1 var(--abt-num);letter-spacing:-.03em;flex:none;color:transparent;-webkit-text-stroke:1px #C6D5E4}
.abt .adv h3{font-size:1.03125rem;font-weight:700;color:var(--navy-700);margin-bottom:7px}
.abt .adv p{font-size:.875rem;line-height:1.7;color:var(--abt-muted);margin:0}
@media(min-width:768px){.abt .advs{grid-template-columns:repeat(2,1fr);gap:var(--sp-5)}}
/* ≥1024px：一行 4 个，卡内改竖排（编号上 / 文字下），避免窄卡横排拥挤 */
@media(min-width:1024px){
  .abt .advs{grid-template-columns:repeat(4,1fr)}
  .abt .adv{flex-direction:column;gap:var(--sp-4);padding:var(--sp-6) var(--sp-5)}
  .abt .adv__no{font-size:2.25rem}
}

/* 服务流程 */
.abt .proc{display:grid;gap:var(--sp-4)}
.abt .proc__s{background:#fff;border:1px solid var(--abt-line);border-radius:var(--abt-r-lg);box-shadow:var(--abt-sh-sm);padding:var(--sp-6) var(--sp-5) var(--sp-5);text-align:center;display:flex;flex-direction:column;transition:transform var(--abt-tr-slow),box-shadow var(--abt-tr-slow),border-color var(--abt-tr-slow)}
.abt .proc__s:hover{transform:translateY(-4px);box-shadow:var(--abt-sh-md);border-color:#CFE0F3}
.abt .proc__n{width:44px;height:44px;border-radius:50%;background:linear-gradient(140deg,#E7F4FD,#D6EAFB);color:var(--blue-600);font:700 1rem/1 var(--abt-num);display:grid;place-items:center;margin:0 auto var(--sp-4)}
.abt .proc h3{font-size:1rem;font-weight:700;color:var(--navy-700);margin-bottom:6px}
.abt .proc p{font-size:.8125rem;line-height:1.65;color:var(--abt-muted);margin:0 0 var(--sp-5)}
.abt .proc__d{margin-top:auto;background:#EFF7FD;border-radius:var(--abt-r);padding:10px 12px}
.abt .proc__d span{display:block;font-size:.6875rem;font-weight:700;letter-spacing:.12em;color:var(--blue-600)}
.abt .proc__d b{display:block;font-size:.8125rem;font-weight:600;color:var(--navy-700);margin-top:3px;line-height:1.5}
@media(min-width:600px){.abt .proc{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){
  .abt .proc{grid-template-columns:repeat(5,1fr);gap:var(--sp-4)}
  .abt .proc__s{padding:var(--sp-5) var(--sp-4)}
  .abt .proc__n{width:38px;height:38px;font-size:.9375rem}
  .abt .proc p{font-size:.78125rem}
}

/* ============================================================
   6. CTA
   ============================================================ */
.abt .cta{
  color:#fff;padding:var(--abt-sec-y) 0;
  background:radial-gradient(680px 300px at 84% 120%,rgba(42,188,240,.28),transparent 62%),linear-gradient(120deg,#04121F,#0E3557 62%,#0B5CA8);
}
.abt .cta h2{font-size:clamp(1.375rem,4.6vw,1.75rem);font-weight:800;margin-bottom:var(--sp-3);color:#fff}
.abt .cta p{color:rgba(255,255,255,.8);font-size:1rem;line-height:1.8;max-width:36em}
.abt .cta__chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:var(--sp-5)}
.abt .cta__chips li{font-size:var(--fs-sm);padding:6px 14px;border-radius:20px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.92)}
.abt .cta__btn{margin-top:var(--sp-8)}
@media(min-width:1024px){
  .abt .cta{padding:var(--sp-20) 0}
  .abt .cta__grid{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-12)}
  .abt .cta__btn{margin-top:0;flex:none}
}

/* ---------- 动效克制 ---------- */
@media(prefers-reduced-motion:reduce){
  .abt *, .abt *::before, .abt *::after{transition:none!important;animation:none!important}
  .abt .card:hover,.abt .ind:hover,.abt .btn:hover{transform:none}
}