@charset "utf-8";
/* ============================================================
   领悟时代数字研究院 · 官网基础层
   变量 / 重置 / 排版 / 布局 / 导航 / 页首 通用组件
   换风格只改 :root 变量，不碰结构
   ============================================================ */

:root{
  /* —— 文字：深蓝系，不用纯黑 —— */
  --ink:        #0B1B2E;
  --ink-2:      #3D4E66;
  --ink-3:      #64758D;
  --ink-4:      #93A2B6;

  /* —— 背景 —— */
  --bg:         #FFFFFF;
  --bg-soft:    #F6F9FD;
  --bg-mute:    #EDF2F9;
  --bg-deep:    #0A1F3D;
  --bg-deep-2:  #14325A;
  --bg-deep-3:  #0D2A50;

  /* —— 描边 —— */
  --line:       #E4EBF4;
  --line-2:     #D2DEED;
  --line-deep:  rgba(255,255,255,.14);

  /* —— 主色：与研究院 LOGO 同源的科技蓝 —— */
  --brand:      #1B62D6;
  --brand-d:    #10479E;
  --brand-l:    #E9F1FE;
  --brand-l2:   #CDE0FB;

  /* —— 辅色 —— */
  --cyan:       #0E8FC0;
  --cyan-l:     #E4F4FB;
  --gold:       #A8801A;
  --gold-l:     #FBF3DC;
  --purple:     #6B4FC9;
  --purple-l:   #EFEBFC;
  --green:      #1E7A5A;
  --green-l:    #E6F5EF;
  --red:        #A52A2A;
  --red-l:      #FBEBEB;

  /* —— 圆角 / 阴影 —— */
  --r-xs: 4px;
  --r-s:  8px;
  --r:    12px;
  --r-l:  18px;
  --shadow:    0 1px 2px rgba(11,27,46,.04), 0 6px 18px rgba(11,27,46,.05);
  --shadow-h:  0 8px 20px rgba(27,98,214,.12), 0 20px 46px rgba(11,27,46,.10);

  /* —— 尺寸 —— */
  --maxw:   1240px;
  --maxw-t: 760px;
  --pad:    28px;
  --nav-h:  92px;

  /* —— Logo 尺寸 ——
     横版 logo 宽高比 3.26:1，高度每加 1px、宽度就加 3.26px，
     所以高度必须克制。以下为站点常规尺寸（高px → 实际宽px）：
       导航 46 → 150    页首 56 → 182    信息卡 38 → 124    页脚 60 → 196 */
  --logo-nav:   56px;
  --logo-hero:  56px;
  --logo-card:  40px;
  --logo-foot:  64px;

  /* —— 字体 —— */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
               "Noto Sans CJK SC", sans-serif;
  --font-num:  "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.75;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; border:0; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }

h1,h2,h3,h4{ margin:0; font-weight:700; line-height:1.28; letter-spacing:-.01em; }
p{ margin:0 0 1em; }
ul,ol{ margin:0; padding:0; list-style:none; }

::selection{ background:var(--brand); color:#fff; }
:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:var(--r-xs); }

.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ==================== 布局容器 ==================== */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
.wrap--t{ max-width:var(--maxw-t); }
.wrap--wide{ max-width:1440px; }

.sec{ padding:96px 0; position:relative; }
.sec--tight{ padding:72px 0; }
.sec--soft{ background:var(--bg-soft); }
.sec--mute{ background:var(--bg-mute); }
.sec--deep{ background:var(--bg-deep); color:#EAF1FA; }
.sec--line{ border-top:1px solid var(--line); }

/* ==================== 通用按钮 ==================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:46px; padding:0 24px; border-radius:var(--r-s);
  font-size:15px; font-weight:600; letter-spacing:.01em;
  border:1px solid transparent; cursor:pointer;
  transition:transform .18s ease, box-shadow .22s ease, background .22s ease, color .18s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn--primary{ background:var(--brand); color:#fff; box-shadow:0 6px 16px rgba(27,98,214,.24); }
.btn--primary:hover{ background:var(--brand-d); box-shadow:0 10px 24px rgba(27,98,214,.32); }
.btn--ghost{ background:#fff; color:var(--brand); border-color:var(--brand-l2); }
.btn--ghost:hover{ border-color:var(--brand); background:var(--brand-l); }
.btn--line{ background:transparent; color:#fff; border-color:rgba(255,255,255,.34); }
.btn--line:hover{ border-color:rgba(255,255,255,.72); background:rgba(255,255,255,.08); }
.btn--gold{ background:var(--gold); color:#fff; box-shadow:0 6px 16px rgba(168,128,26,.22); }
.btn--gold:hover{ background:#8E6B13; }
.btn--sm{ height:38px; padding:0 18px; font-size:14px; }
.btn--lg{ height:54px; padding:0 32px; font-size:16px; }
.btn__ico{ width:16px; height:16px; flex:0 0 16px; }

/* ==================== 文字与标题组件 ==================== */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brand); margin-bottom:18px;
}
.eyebrow::before{
  content:""; width:22px; height:2px; background:var(--brand); border-radius:2px;
}
.eyebrow--light{ color:#8FB8EE; }
.eyebrow--light::before{ background:#8FB8EE; }
.eyebrow--gold{ color:var(--gold); }
.eyebrow--gold::before{ background:var(--gold); }

.h2{ font-size:clamp(26px,3.2vw,38px); font-weight:700; letter-spacing:-.02em; }
.h3{ font-size:clamp(19px,2vw,22px); font-weight:700; }
.lead{ font-size:17px; line-height:1.85; color:var(--ink-2); }
.sec--deep .lead{ color:#B7CBE4; }
.muted{ color:var(--ink-3); }
.small{ font-size:14px; }
.tiny{ font-size:12.5px; }
.accent{ color:var(--brand); }
.measure{ max-width:var(--maxw-t); }
.measure--wide{ max-width:900px; }

.sec__head{ margin-bottom:52px; }
.sec__head--center{ text-align:center; }
.sec__head--center .measure{ margin-left:auto; margin-right:auto; }
.sec__head .h2 + .lead{ margin-top:16px; }

/* ==================== 顶部信息条 ==================== */
.topbar{
  background:var(--bg-deep); color:#A8C0DC;
  font-size:12.5px; letter-spacing:.02em;
}
.topbar__in{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  height:38px;
}
.topbar__in{ justify-content:flex-end; }
.topbar__r{ display:flex; align-items:center; gap:22px; }
.topbar a{ color:#C8D9EC; transition:color .18s ease; }
.topbar a:hover{ color:#fff; }

/* ==================== 主导航 ==================== */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s ease, background .25s ease;
}
.nav.is-stuck{ box-shadow:0 4px 22px rgba(11,27,46,.08); }
.nav__in{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  height:var(--nav-h);
}
/* ==================== 品牌标识 ====================
   两行文字（机构名 / 机构定位）用 text-align-last:justify 强制等宽，
   即下方小字与上方「领悟时代数字研究院」左右两端对齐、长度完全一致。 */
.brand{ display:flex; align-items:center; gap:18px; flex:0 0 auto; }
.brand__logo{ height:var(--logo-nav); width:auto; }
.brand__div{ width:1px; height:48px; background:var(--line-2); }
.brand__tag{
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  width:168px;                        /* 两行统一宽度，等长对齐的关键 */
  padding-left:0; border-left:0;
}
.brand__tag b{
  font-size:15.5px; font-weight:700; line-height:1.25; color:var(--ink);
  letter-spacing:0; white-space:nowrap;
  text-align:justify; text-align-last:justify;
}
.brand__tag > span{
  font-size:12.5px; font-weight:500; line-height:1.25; color:var(--ink-3);
  letter-spacing:0; white-space:nowrap;
  text-align:justify; text-align-last:justify;
}

.nav__menu{ display:flex; align-items:center; gap:4px; }
.nav__link{
  position:relative; padding:9px 13px; border-radius:var(--r-xs);
  font-size:14.5px; font-weight:500; color:var(--ink-2);
  transition:color .18s ease, background .18s ease;
  white-space:nowrap;
}
.nav__link:hover{ color:var(--brand); background:var(--brand-l); }
.nav__link[aria-current="page"]{ color:var(--brand); font-weight:700; }
.nav__link[aria-current="page"]::after{
  content:""; position:absolute; left:13px; right:13px; bottom:2px; height:2px;
  background:var(--brand); border-radius:2px;
}
.nav__cta{ margin-left:10px; }

.nav__toggle{
  display:none; width:44px; height:44px; border:1px solid var(--line-2);
  background:#fff; border-radius:var(--r-s); cursor:pointer; padding:0;
  align-items:center; justify-content:center;
}
.nav__toggle span{
  position:relative; width:18px; height:2px; background:var(--ink); border-radius:2px;
  transition:background .2s ease;
}
.nav__toggle span::before,.nav__toggle span::after{
  content:""; position:absolute; left:0; width:18px; height:2px; background:var(--ink);
  border-radius:2px; transition:transform .24s ease, top .24s ease;
}
.nav__toggle span::before{ top:-6px; }
.nav__toggle span::after{ top:6px; }
.nav__toggle[aria-expanded="true"] span{ background:transparent; }
.nav__toggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

/* ==================== 页首 Hero ==================== */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1100px 520px at 78% -8%, rgba(27,98,214,.30), transparent 62%),
    radial-gradient(760px 420px at 6% 108%, rgba(14,143,192,.20), transparent 60%),
    linear-gradient(160deg, var(--bg-deep) 0%, #0F2A4E 46%, #0C2344 100%);
  color:#fff;
}
.hero__grid{
  position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(closest-side at 50% 42%, #000 62%, transparent 100%);
  -webkit-mask-image:radial-gradient(closest-side at 50% 42%, #000 62%, transparent 100%);
}
.hero__net{ position:absolute; right:-120px; top:-40px; width:820px; max-width:none; opacity:.55; pointer-events:none; }
.hero__in{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:64px;
  align-items:center; padding:92px var(--pad) 84px;
}
/* 页首品牌标识：深色底上用白色版 logo，尺寸克制，不与导航 logo 抢视线 */
.hero__logo{
  display:inline-block; margin-bottom:24px; padding:12px 18px;
  border-radius:var(--r); background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  transition:background .22s ease, border-color .22s ease;
}
.hero__logo:hover{ background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.26); }
.hero__logo img{ height:var(--logo-hero); width:auto; }

.hero__badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:7px 15px 7px 12px; border-radius:100px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  font-size:12.5px; font-weight:600; letter-spacing:.08em; color:#C6DCF6;
  margin-bottom:26px;
}
.hero__badge i{
  width:6px; height:6px; border-radius:50%; background:#5EEAD4; flex:0 0 6px;
  box-shadow:0 0 0 4px rgba(94,234,212,.16);
}
.hero__t{
  font-size:clamp(34px,4.6vw,58px); font-weight:800; letter-spacing:-.03em; line-height:1.14;
  margin:0 0 8px;
}
.hero__t em{
  font-style:normal;
  background:linear-gradient(96deg,#8FC4FF 6%,#D9C48A 96%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__sub{
  font-size:clamp(15px,1.5vw,18px); line-height:1.9; color:#B6CBE6;
  max-width:610px; margin:22px 0 0;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }
.hero__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 26px;
  margin-top:44px; padding-top:26px; border-top:1px solid var(--line-deep);
  font-size:13.5px; color:#9FB8D6;
}
.hero__meta b{ color:#fff; font-weight:700; }

/* Hero 右侧：能力卡片 */
.hcard{
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-l); padding:26px;
  box-shadow:0 24px 60px rgba(0,0,0,.28);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.hcard__hd{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:16px; margin-bottom:18px; border-bottom:1px solid var(--line-deep);
}
.hcard__hd span{ font-size:13px; font-weight:700; letter-spacing:.1em; color:#9FC0E6; }
.hcard__list{ display:grid; gap:2px; }
.hcard__it{
  display:flex; align-items:center; gap:14px; padding:13px 12px; border-radius:var(--r-s);
  transition:background .18s ease, transform .18s ease;
}
.hcard__it:hover{ background:rgba(255,255,255,.09); transform:translateX(3px); }
.hcard__ico{
  width:38px; height:38px; flex:0 0 38px; border-radius:10px;
  display:grid; place-items:center;
  background:rgba(143,196,255,.14); border:1px solid rgba(143,196,255,.24);
  color:#9CC6FF;
}
.hcard__ico svg{ width:19px; height:19px; }
.hcard__tx{ min-width:0; }
.hcard__tx b{ display:block; font-size:14.5px; font-weight:650; color:#fff; }
.hcard__tx small{ font-size:12.5px; color:#9FB8D6; }
.hcard__ft{
  margin-top:18px; padding-top:16px; border-top:1px solid var(--line-deep);
  font-size:12.5px; color:#8FACD0; display:flex; align-items:center; gap:8px;
}

/* ==================== 指标条 ==================== */
.stats{
  background:var(--bg); border-bottom:1px solid var(--line);
}
.stats__in{
  display:grid; grid-template-columns:repeat(4,1fr);
}
.stat{
  padding:34px 26px; border-left:1px solid var(--line); position:relative;
}
.stat:first-child{ border-left:0; }
.stat__n{
  font-family:var(--font-num); font-size:clamp(28px,3.4vw,40px); font-weight:700;
  color:var(--brand); letter-spacing:-.03em; line-height:1.1;
  display:flex; align-items:baseline; gap:3px;
}
.stat__n i{ font-style:normal; font-size:.52em; font-weight:700; color:var(--brand-d); }
.stat__l{ margin-top:8px; font-size:14px; font-weight:600; color:var(--ink); }
.stat__d{ margin-top:4px; font-size:12.5px; color:var(--ink-3); line-height:1.6; }

/* ==================== 滚动浮现 ====================
   安全策略：默认可见；仅当 JS 可用（html.js）时才启用动画，
   避免脚本异常或旧浏览器下内容永久不可见。 */
.rv{ opacity:1; transform:none; }
.js .rv{
  opacity:0; transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.22,.7,.3,1), transform .7s cubic-bezier(.22,.7,.3,1);
}
.js .rv.is-in{ opacity:1; transform:none; }

/* 关闭动效偏好 / 脚本不可用：直接显示 */
@media (prefers-reduced-motion:reduce){
  .js .rv{ opacity:1; transform:none; }
}
@media (scripting:none){
  .rv{ opacity:1!important; transform:none!important; }
}

.rv-d1{ transition-delay:.07s; }
.rv-d2{ transition-delay:.14s; }
.rv-d3{ transition-delay:.21s; }
.rv-d4{ transition-delay:.28s; }
.rv-d5{ transition-delay:.35s; }