@charset "utf-8";
/* ============================================================
   《数据法》课程网站 · 基础层
   变量 / 重置 / 排版 / 布局 / 通用工具类
   换风格只需改 :root 里的变量，不动结构
   ============================================================ */

:root{
  /* —— 文字：深蓝系，不用纯黑，长时间阅读更舒服 —— */
  --ink:        #0E1B2A;
  --ink-2:      #415066;
  --ink-3:      #5C6E88;

  /* —— 背景：浅色为主，深色只做点缀 —— */
  --bg:         #FFFFFF;
  --bg-soft:    #F5F8FC;
  --bg-mute:    #EDF2F9;
  --bg-deep:    #0F2544;   /* 深靛蓝，不是黑 */
  --bg-deep-2:  #17395F;

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

  /* —— 主色：科技蓝 —— */
  --brand:      #1B62D6;
  --brand-d:    #12499F;
  --brand-l:    #E8F1FE;
  --brand-l2:   #CFE2FC;

  /* —— 辅色：数据青 / AI紫 / 古铜金 / 朱红 —— */
  --cyan:       #0E8FC0;
  --cyan-l:     #E4F4FB;
  --purple:     #6B4FC9;
  --purple-l:   #EFEBFC;
  --gold:       #A8801A;
  --gold-l:     #FBF3DC;
  --red:        #A52A2A;
  --red-l:      #FBEBEB;

  --green:      #1E7A5A;
  --green-l:    #E6F5EF;

  /* —— 圆角 / 阴影 —— */
  --r-xs: 6px;
  --r-s:  10px;
  --r:    14px;
  --r-l:  20px;
  --shadow:    0 1px 2px rgba(14,27,42,.04), 0 6px 20px rgba(14,27,42,.05);
  --shadow-h:  0 6px 16px rgba(27,98,214,.10), 0 18px 44px rgba(14,27,42,.10);

  /* —— 尺寸 —— */
  --maxw:  1200px;
  --maxw-t: 820px;   /* 阅读区宽度，模仿文档类页面 */
  --pad:   24px;

  /* —— 字体：全部系统字体，零外链、零等待 —— */
  --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-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ============ 重置 ============ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px; }
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,svg{ max-width:100%; display:block; }
button,input,select,textarea{ font:inherit; color:inherit; }
a{ color:var(--brand); text-decoration:none; }
a:hover{ color:var(--brand-d); }
ul,ol{ padding-left:1.4em; }

/* 键盘可达性：所有可聚焦元素都要看得见的焦点环 */
:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:3px;
  border-radius:var(--r-xs);
}

/* ============ 排版 ============ */
h1,h2,h3,h4,h5{ margin:0; line-height:1.35; font-weight:600; letter-spacing:-.01em; }
h1{ font-size:clamp(28px,4vw,44px); }
h2{ font-size:clamp(23px,2.8vw,32px); }
h3{ font-size:clamp(18px,2vw,21px); }
h4{ font-size:17px; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }
small{ font-size:13px; }

.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.tnum{ font-variant-numeric:tabular-nums; }

/* ============ 布局 ============ */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
.wrap-t{ width:100%; max-width:var(--maxw-t); margin:0 auto; padding:0 var(--pad); }
.section{ padding:100px 0; }
.section--soft{ background:var(--bg-soft); }
.section--mute{ background:var(--bg-mute); }
.section--tight{ padding:66px 0; }

/* 深色区块：压住页面节奏，避免通篇白底 */
.section--deep{
  position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(920px 430px at 15% -8%, rgba(27,98,214,.32), transparent 62%),
    radial-gradient(720px 380px at 88% 110%, rgba(107,79,201,.28), transparent 62%),
    linear-gradient(158deg, #0F2544 0%, #17395F 100%);
}
.section--deep::before{
  content:""; position:absolute; inset:0; opacity:.45; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:52px 52px;
}
.section--deep > .wrap{ position:relative; z-index:1; }
.section--deep .sec-title,
.section--deep h2,.section--deep h3,.section--deep h4{ color:#fff; }
.section--deep .sec-desc{ color:rgba(255,255,255,.82); }
.section--deep .eyebrow{ color:#8FC2FF; background:rgba(63,143,255,.14); border-color:rgba(63,143,255,.3); }
.section--deep .eyebrow::before{ background:#5AA9FF; }

/* 浅色渐变区块：替代纯白，板块之间有呼吸 */
.section--grad{
  background:
    radial-gradient(780px 380px at 6% 0%, rgba(27,98,214,.075), transparent 60%),
    radial-gradient(700px 360px at 98% 100%, rgba(14,143,192,.085), transparent 62%),
    linear-gradient(180deg,#FBFDFF 0%,#F1F6FD 100%);
}
/* 暖色渐变区块：给考核、成果这类内容换一层底色 */
.section--warm{
  background:
    radial-gradient(720px 360px at 92% 4%, rgba(168,128,26,.10), transparent 62%),
    linear-gradient(180deg,#FFFCF5 0%,#F7F9FD 100%);
}

/* ============ 区块标题（统一规格，保证对比清晰） ============ */
.sec-head{ margin-bottom:48px; max-width:100%; }
.sec-head--center{ margin-left:auto; margin-right:auto; text-align:center; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brand);
  background:var(--brand-l); border:1px solid var(--brand-l2);
  padding:5px 12px; border-radius:999px; margin-bottom:16px;
}
.eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--brand); flex:none;
}
.sec-title{ margin-bottom:14px; }
.sec-desc{ color:var(--ink-2); font-size:17px; line-height:1.9; margin:0; max-width:100%; }

/* 深色区内的标题 */
.on-deep .eyebrow{ color:#8FC2FF; background:rgba(63,143,255,.14); border-color:rgba(63,143,255,.3); }
.on-deep .eyebrow::before{ background:#5AA9FF; }
.on-deep .sec-desc{ color:rgba(255,255,255,.82); }
.on-deep .sec-title,
.on-deep h2,.on-deep h3,.on-deep h4{ color:#fff; }
.on-deep p{ color:rgba(255,255,255,.82); }
.on-deep .mono{ color:rgba(255,255,255,.9); }

/* ============ 按钮 ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px; border-radius:var(--r-s);
  font-size:15px; font-weight:500; border:1px solid transparent;
  cursor:pointer; transition:all .18s var(--ease); white-space:nowrap;
}
.btn--primary{ background:var(--brand); color:#fff; }
.btn--primary:hover{ background:var(--brand-d); color:#fff; transform:translateY(-1px); box-shadow:0 8px 20px rgba(27,98,214,.24); }
.btn--ghost{ background:#fff; color:var(--ink); border-color:var(--line-2); }
.btn--ghost:hover{ border-color:var(--brand); color:var(--brand); }
.btn--ondeep{ background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.28); }
.btn--ondeep:hover{ background:rgba(255,255,255,.18); color:#fff; border-color:rgba(255,255,255,.45); }
.btn--sm{ padding:8px 16px; font-size:14px; }

/* ============ 通用卡片 ============ */
.card{
  background:var(--bg); border:1px solid var(--line);
  border-radius:var(--r); padding:28px;
  transition:all .22s var(--ease);
}
.card--hover:hover{ transform:translateY(-3px); box-shadow:var(--shadow-h); border-color:var(--brand-l2); }

/* ============ 标签 ============ */
.tag{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; padding:3px 10px; border-radius:999px;
  background:var(--bg-mute); color:var(--ink-2); border:1px solid var(--line);
  white-space:nowrap;
}
.tag--blue{ background:var(--brand-l); color:var(--brand-d); border-color:var(--brand-l2); }
.tag--cyan{ background:var(--cyan-l); color:#0A6A92; border-color:#C3E7F5; }
.tag--purple{ background:var(--purple-l); color:#5539A8; border-color:#DCD2F6; }
.tag--gold{ background:var(--gold-l); color:#8A6710; border-color:#EFDFB4; }
.tag--red{ background:var(--red-l); color:#8C2222; border-color:#F0CFCF; }
.tag--green{ background:var(--green-l); color:#15624A; border-color:#BFE4D6; }

/* ============ 工具类 ============ */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}
.mt-3{margin-top:24px}.mt-4{margin-top:32px}.mt-5{margin-top:48px}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}
.mb-4{margin-bottom:32px}.mb-5{margin-bottom:48px}
.text-c{text-align:center}
.muted{ color:var(--ink-2); }
.muted-2{ color:var(--ink-3); }
.nowrap{ white-space:nowrap; }

/* 科技风底纹：极淡网格，只做氛围不抢内容 */
.tech-grid{
  background-image:
    linear-gradient(to right, rgba(27,98,214,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(27,98,214,.055) 1px, transparent 1px);
  background-size:44px 44px;
}

/* ============ 滚动渐显 ============ */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ============ 响应式 ============ */
@media (max-width:900px){
  :root{ --pad:20px; }
  .section{ padding:64px 0; }
  body{ font-size:15.5px; }
}
@media (max-width:600px){
  .section{ padding:52px 0; }
  .card{ padding:22px; }
}