/* ===== 字体（如全局已引入可去重） ===== */
@font-face {
  font-family: "Inter";
  src: url("../font/inter/Inter_24pt-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../font/inter/Inter_24pt-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../font/inter/Inter_28pt-Black.ttf") format("truetype");
  font-weight: 900; font-style: normal; font-display: swap;
}

:root{
  --fs-body: clamp(14px, 1.1vw, 20px);
  --fs-h1: clamp(40px, 5vw, 80px);
  --fs-h2: clamp(24px, 2.4vw, 40px);
  --fs-lead: clamp(16px, 1.4vw, 22px);
  --fs-sub: clamp(13px, 1.1vw, 18px);

  --pad-x: clamp(20px, 4vw, 96px);

  --c-lg:#dadada; --c-md:#c6c6c6; --c-sm:#ececec; --c-xs:#bfbfbf;

  /* 卡片统一间距 */
  --card-gap: clamp(28px, 4vw, 56px);
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  color:#111;background:#fff;line-height:1.6;
}

/* 容器与段落 */
.wrapper{max-width:clamp(1040px,74vw,1560px);margin:0 auto;padding:0 var(--pad-x);}
.section-full{min-height:100vh;display:flex;align-items:center;}

/* ===== Hero ===== */
.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;justify-items:center;gap:clamp(16px,3vw,40px);}
.hero-text{width:min(100%,46rem);text-align:left;}
.hero-title{font-size:var(--fs-h1);font-weight:900;letter-spacing:-.01em;margin:0 0 .5rem;}
.hero-lead{font-size:var(--fs-lead);margin:0 0 8px;line-height:1.35;}
.hero-sub{font-size:var(--fs-sub);color:#333;max-width:42rem;}

.hero-ornaments{position:relative;width:clamp(260px,28vw,420px);height:clamp(260px,28vw,420px);}
.orb{position:absolute;border-radius:50%;filter:saturate(.95);}
.orb-lg{width:65%;height:65%;left:18%;top:28%;background:var(--c-lg);animation:float 10s ease-in-out infinite alternate;box-shadow:0 12px 28px rgba(0,0,0,.12);}
.orb-md{width:34%;height:34%;right:6%;top:4%;background:var(--c-md);animation:float 7s ease-in-out infinite alternate-reverse;}
.orb-sm{width:22%;height:22%;left:0;top:6%;background:var(--c-sm);animation:float 6s ease-in-out infinite alternate;}
.orb-xs{width:16%;height:16%;right:12%;bottom:6%;background:var(--c-xs);animation:float 5s ease-in-out infinite alternate-reverse;}
.orb-ring{width:52%;height:52%;left:26%;top:12%;border:1.5px solid #bdbdbd;border-radius:50%;background:transparent;animation:pulse 4.5s ease-in-out infinite;}
@keyframes float{from{transform:translateY(0) translateX(0);}to{transform:translateY(-8%) translateX(4%);}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.7;}50%{transform:scale(1.06);opacity:1;}}
@media (prefers-reduced-motion:reduce){.orb,.orb-ring{animation:none;}}

/* ===== Projects：统一 section 与间距 ===== */
.projects-section{
  padding-block: clamp(24px, 5vw, 64px);
}
.projects-section .project-card{
  margin-block: var(--card-gap);
}
.projects-section .project-card:first-of-type{ margin-top: 0; }
.projects-section .project-card:last-of-type{  margin-bottom: 0; }

/* 桌面端加大间距 */
@media (min-width:769px){
  :root{ --card-gap: clamp(64px, 6vw, 120px); }
}

/* ===== 项目卡片：16:9 外壳（桌面） ===== */
.project-card{
  width:100%;
  aspect-ratio:16/9;           /* 桌面端固定 16:9 */
  position:relative;
  border-radius:22px;
  overflow:hidden;
  background:#bfbfbf;
}

/* 用 <a> 包裹整张卡片 */
.project-card > .card-link{
  display:block;
  height:100%;
  color:inherit;
  text-decoration:none;
  border-radius:inherit;
  cursor:pointer;
}
.project-card > .card-link:focus-visible{
  outline:3px solid rgba(0,120,255,.6);
  outline-offset:4px;
  border-radius:inherit;
}

/* 内部网格铺满卡片，不破坏外层比例 */
.card-inner{
  position:absolute; inset:0;
  display:grid;
  grid-template-columns:1fr 1fr;
}
.card-left,.card-right{display:flex;flex-direction:column;justify-content:center;}
.card-left{padding:clamp(24px,4.4vw,60px);gap:10px;}
.pill{display:inline-block;font-size:12px;background:#ffdfe0;border-radius:999px;padding:4px 10px;width:fit-content;}
.card-title{font-size:clamp(22px,2.2vw,34px);font-weight:800;line-height:1.25;}
.card-desc{font-size:var(--fs-sub);color:#202020;max-width:48ch;}
.tags{display:flex;flex-wrap:wrap;gap:8px 12px;}
.tags span{display:inline-block;background:#fff;border-radius:999px;padding:4px 12px;font-size:12px;}

.card-right{
  position:relative;
  overflow:hidden;
  background:#666 center/cover no-repeat;
  min-width:0;
  filter:saturate(.95);
}

/* ===== 媒体风格 1：视频填充（手机屏） ===== */
.card-right.is-video{ background:none; }
.card-right.is-video .card-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
}

/* ===== 媒体风格 2：宽屏视频（白底 + 80% 宽，不裁切，播完停止） ===== */
.card-right.is-video-wide{
  background:#fff;
  display:flex; align-items:center; justify-content:center;
}
.card-right.is-video-wide .card-video{
  position:static; width:80%; height:auto; max-height:100%;
  object-fit:contain; object-position:center;
  display:block;
}

/* ===== 媒体风格 3：图片完整显示（FIXA 专用，深灰底） ===== */
.card-right.is-image-contain{
  background:#3A3A3A;
  display:flex; align-items:center; justify-content:center;
}
.card-right.is-image-contain .card-media{
  width:100%; height:100%;
  object-fit:contain; object-position:center;
  display:block;
}

/* ===== 媒体风格 4：图片填充（cover） ===== */
.card-right.is-image{ position:relative; overflow:hidden; background:none; }
.card-right.is-image .card-media{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
}

/* ===== 移动端：上下栈叠、媒体不裁切 ===== */
@media (max-width:768px){
  .section-full{min-height:unset;}
  .hero{grid-template-columns:1fr;}
  .hero-ornaments{order:2;width:clamp(220px,60vw,360px);height:auto;aspect-ratio:1/1;}

  .project-card{ aspect-ratio:auto; position:relative; border-radius:18px; }
  .card-link{ height:auto; }
  .card-inner{ position:static; display:flex; flex-direction:column; }

  .card-right{
    order:-1;
    width:100%;
    height:auto;              /* 让高度随内容 */
    background-position:center bottom;
    background-size:cover;
  }

  /* 移动端：所有视频与图片都按原比例展示（contain） */
  .card-right.is-video .card-video,
  .card-right.is-video-wide .card-video{
    position:static;
    width:100%; height:auto;
    object-fit:contain; object-position:center;
  }

  .card-right.is-image .card-media{
    position:static;
    width:100%; height:auto;
    object-fit:contain; object-position:center;
  }

  .card-right.is-image-contain{
    height:auto;
  }
  .card-right.is-image-contain .card-media{
    width:100%; height:auto;
    object-fit:contain;
  }
}


/* ===== Hero 照片与线条 ===== */
.hero-media{
  position: relative;
  width: clamp(260px, 34vw, 520px);
  aspect-ratio: 5/6; /* 近似 600x720 */
  translate: 0 6px; /* 轻微下沉更稳 */
  will-change: transform;
}

.hero-blob{
  position: relative;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.18))
          drop-shadow(0 3px 8px rgba(0,0,0,.08));
  transition: transform .4s ease;
  transform-style: preserve-3d;
}

/* 轮廓描边动画 */
.blob-stroke{
  stroke: color-mix(in oklab, #0b60ff 60%, #00c9a7 40%);
  stroke-width: 2.4;
  stroke-linejoin: round;
  stroke-dasharray: 14 10;
  stroke-dashoffset: 0;
  opacity: .85;
  animation: dashMove 6s linear infinite;
}
@keyframes dashMove{
  to { stroke-dashoffset: -48; }
}

/* 互动线条画布：盖在最底层 */
.hero-lines{
  position: absolute;
  inset: -6% -10% -10% -6%;
  width: 120%;
  height: 120%;
  pointer-events: none;   /* 只做视觉，不挡交互 */
  opacity: .7;
  filter: blur(.1px) contrast(1.02);
}

/* 悬停轻微抬头 */
@media (hover:hover){
  .hero-media:hover .hero-blob{ transform: translateZ(0) scale(1.01); }
}

/* 深色偏好适配（若你有主题切换，也可自行覆盖） */
@media (prefers-color-scheme: dark){
  .blob-stroke{ stroke: color-mix(in oklab, #9ac2ff 60%, #7fe9cc 40%); opacity: .95; }
}

/* ===== 容器与排版（与主页一致的宽度控制） ===== */
:root{
  --pad-x: clamp(20px, 4vw, 96px);
  --wrap-max: clamp(1040px, 74vw, 1560px);
  --fs-body: clamp(14px, 1.1vw, 20px);
  --fs-h2: clamp(24px, 2.4vw, 40px);
  --fs-degree: clamp(18px, 1.8vw, 30px);
  --edu-logo-col: clamp(260px, 22vw, 420px);
  --edu-logo-h: clamp(84px, 8vw, 140px);
}

*{ box-sizing: border-box; }
html,body{ margin:0; }
body{ font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC","Microsoft YaHei", sans-serif; font-size: var(--fs-body); color:#111; line-height:1.6; }

.wrapper{ max-width: var(--wrap-max); margin: 0 auto; padding: 0 var(--pad-x); }

/* ===== 教育区块 ===== */
.edu-wrap{ padding-block: clamp(24px, 7vh, 96px); }

.edu-title{
  margin:0;
  font-weight:800;
  font-size: var(--fs-h2);
}
.edu-rule{
  border:0; height:1px; background:#eee;
  margin: 12px 0 40px;
}

/* 2 列：左文右 Logo */
.edu-wrap{
  display: grid;
  grid-template-columns: minmax(0,1fr) var(--edu-logo-col);
  column-gap: clamp(16px, 2vw, 24px);
  row-gap: 0;
}
.edu-title, .edu-rule{ grid-column: 1 / -1; }

.edu-item{ display: contents; }        /* 让子块直接占网格 */
.edu-left{
  grid-column:1; padding: 24px 0; border-top:1px solid #eee; min-width:0;
}
.edu-right{
  grid-column:2; padding: 24px 0; display:flex; align-items:center; justify-content:flex-end;
}
.edu-item:last-of-type .edu-left{ border-bottom:1px solid #eee; }

.edu-degree{
  margin:0 0 6px; font-weight:800; font-size: var(--fs-degree); line-height:1.3;
  overflow-wrap:anywhere;
}
.edu-school{ margin:0; color:#202020; }

.edu-logo{
  height: var(--edu-logo-h);
  width: auto; max-width:100%;
  object-fit: contain; object-position: right center;
  display:block;
}

/* ===== 移动端：上下堆叠，Logo 居中更大 ===== */
@media (max-width:768px){
  .edu-wrap{ display:block; }
  .edu-title{ text-align:center; font-size: clamp(26px, 7vw, 38px); }
  .edu-rule{ margin-bottom: 28px; }

  .edu-item{
    display:grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 14px;
    row-gap: 12px;
    padding: 20px 0;
    border-top:1px solid #eee;
  }
  .edu-item + .edu-item{ margin-top: 14px; }
  .edu-item:last-of-type{ border-bottom:1px solid #eee; }

  .edu-right{
    order:-1; grid-column: 1 / 3; justify-content:center; padding:0;
  }
  .edu-left{
    grid-column: 1 / 3; padding:0;
  }
  .edu-logo{ height: clamp(90px, 26vw, 150px); }
}

/* 兜底：避免误溢出导致横向滚动条 */
html, body{ overflow-x:hidden; }
img{ max-width:100%; height:auto; }

/* ===== Hero 图片（替换原泡泡） ===== */
.hero-photo{
  width: clamp(260px, 34vw, 520px);
  aspect-ratio: 4 / 5;                 /* 可按你的图改比例 */
  display: grid;
  place-items: center;
  border-radius: 28px;                  /* 圆角容器 */
  background: radial-gradient(120% 120% at 20% 10%, #f4f6f8 0%, #e9edf2 60%, #e6eaef 100%);
  box-shadow:
    0 18px 42px rgba(0,0,0,.16),
    0 3px 8px rgba(0,0,0,.08);
  overflow: hidden;
}

.hero-img{
  width: 100%;
  height: 100%;
  object-fit: cover;                    /* 充满容器 */
  object-position: center;
  display: block;
  transform: translateZ(0);
}

/* 可选：悬停微动效（桌面） */
@media (hover:hover){
  .hero-photo{ transition: transform .35s ease; }
  .hero-photo:hover{ transform: translateY(-2px) scale(1.01); }
}

/* 移动端尺寸调整 */
@media (max-width: 768px){
  .hero-photo{
    width: clamp(220px, 60vw, 360px);
    aspect-ratio: 1 / 1;               /* 手机上改成正方形更稳 */
    border-radius: 24px;
  }
}
/* === 教育经历：仅左侧文字块（.edu-left）毛玻璃，浅灰风格 === */
.edu-left{
  position: relative;
  border-radius: 16px;
  padding: clamp(16px, 2vw, 24px);          /* 轻微内边距，保留你原来的也行 */
  background: rgba(244,246,248,.55);        /* very light gray */
  border: 1px solid rgba(140,150,170,.18);
  backdrop-filter: blur(12px) saturate(1.03);
  -webkit-backdrop-filter: blur(12px) saturate(1.03);
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 8px 24px rgba(17,18,20,.06);
}

/* 让标题与院校信息在玻璃内保持层次 */
.edu-degree{ position: relative; z-index: 1; }
.edu-school{ position: relative; z-index: 1; }

/* 可选：在玻璃上叠一点极淡的纹理（更有质感），不需要可删除 */
.edu-left::after{
  content:"";
  position:absolute; inset:0; border-radius: inherit; pointer-events:none;
  opacity:.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* 兼容降级：不支持 backdrop-filter 的浏览器用浅灰渐变替代 */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))){
  .edu-left{
    background: linear-gradient(180deg, #f6f8fb 0%, #eef1f5 100%);
    border-color: rgba(140,150,170,.28);
    box-shadow:
      0 1px 0 rgba(255,255,255,.6) inset,
      0 8px 22px rgba(17,18,20,.08);
  }
  .edu-left::after{ display:none; }
}

/* === 整条教育项毛玻璃（含左右两列与图片） === */
.edu-card{
  position: relative;
  grid-column: 1 / -1;        /* 占满两列，再用内层列布局 */
  display: grid;
  grid-template-columns: minmax(0,1fr) var(--edu-logo-col);
  column-gap: clamp(16px, 2vw, 24px);
  padding: clamp(16px, 2vw, 22px);
  margin: 12px 0;             /* 与上下一致的呼吸感 */
  border-radius: 18px;

  /* 玻璃底色 + 描边 */
  background: rgba(244,246,248,.50);
  border: 1px solid rgba(140,150,170,.18);
  backdrop-filter: blur(14px) saturate(1.03);
  -webkit-backdrop-filter: blur(14px) saturate(1.03);

  /* 阴影与内高光 */
  box-shadow:
    0 1px 0 rgba(255,255,255,.52) inset,
    0 10px 28px rgba(17,18,20,.06);
}

/* 保留分隔线：把原先的上/下边线挪到外层，避免双线叠加 */
.edu-item + .edu-item{ margin-top: 16px; }
.edu-title + .edu-card{ margin-top: 6px; }

/* 左右列在玻璃内的内边距（可按需微调） */
.edu-card .edu-left{ padding: 6px 0; border: 0; }
.edu-card .edu-right{ padding: 6px 0; border: 0; display:flex; align-items:center; justify-content:flex-end; }

/* === 右侧 Logo 的“子玻璃容器” === */
.logo-frame{
  position: relative;
  border-radius: 14px;
  padding: clamp(8px, 1.4vw, 12px);
  background: rgba(255,255,255,.28);
  border: 1px solid rgba(140,150,170,.22);
  backdrop-filter: blur(6px) saturate(1.02);
  -webkit-backdrop-filter: blur(6px) saturate(1.02);
  box-shadow:
    0 1px 0 rgba(255,255,255,.40) inset,
    0 6px 16px rgba(17,18,20,.05);
  max-width: min(100%, var(--edu-logo-col));
}

/* 图片本身保持清晰；让其在子容器内等比居中 */
.logo-frame .edu-logo{
  display:block;
  height: var(--edu-logo-h);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
}

/* === 移动端：玻璃卡改为单列，Logo 居中 === */
@media (max-width:768px){
  .edu-card{
    grid-template-columns: 1fr;
    row-gap: 12px;
    padding: clamp(14px, 4vw, 18px);
  }
  .edu-card .edu-right{ justify-content: center; }
  .logo-frame{ padding: clamp(10px, 3.5vw, 14px); }
  .logo-frame .edu-logo{ height: clamp(90px, 26vw, 150px); }
}

/* === 兼容降级：无 backdrop-filter 时使用渐变模拟 === */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))){
  .edu-card{
    background:
      linear-gradient(180deg, #f6f8fb 0%, #eef1f5 100%);
    border-color: rgba(140,150,170,.28);
    box-shadow:
      0 1px 0 rgba(255,255,255,.6) inset,
      0 10px 26px rgba(17,18,20,.08);
  }
  .logo-frame{
    background: rgba(255,255,255,.5);
    border-color: rgba(140,150,170,.26);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

/* 细节：防溢出与点击体验 */
.edu-card *{ border-radius: inherit; }
html, body{ overflow-x: hidden; }
/* 1) 左侧文字区：在所在 div 内垂直居中 */
.edu-card{
  align-items: center; /* 让当前行内的两个格子在纵向居中 */
}
.edu-card .edu-left{
  display: flex;
  flex-direction: column;
  justify-content: center;   /* 垂直方向居中内容 */
  /* 可选：让文字区至少与 Logo 高度接近，避免显得靠上 */
  min-height: var(--edu-logo-h);
}

/* 2) 右侧图片容器：边框内填充为纯白 */
.logo-frame{
  background: #fff !important;           /* 纯白填充 */
  border: 1px solid rgba(140,150,170,.22);
  backdrop-filter: none;                  /* 取消玻璃模糊（可保留也行） */
  -webkit-backdrop-filter: none;
  box-shadow:
    0 1px 0 rgba(255,255,255,.60) inset,
    0 6px 16px rgba(17,18,20,.05);
}

/* 保持图片等比居中 */
.logo-frame .edu-logo{
  display: block;
  height: var(--edu-logo-h);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
}

/* 移动端也居中显示 */
@media (max-width:768px){
  .edu-card{ align-items: center; }
  .edu-card .edu-left{ min-height: 0; }   /* 小屏不强制等高 */
}
/* 让每行两列等高 */
.edu-card{
  align-items: stretch;                 /* grid 单元格拉伸到同高 */
}

/* 两侧容器都占满可用高度 */
.edu-card .edu-left,
.edu-card .edu-right{ height: 100%; }

/* 左侧：内容垂直居中，同时与右侧同高 */
.edu-card .edu-left{
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 如果之前加过 min-height，移除它以免破坏等高 */
  min-height: 0 !important;
}

/* 右侧：用一个满高的白色框承载 Logo */
.edu-card .edu-right{
  display: flex;
  align-items: stretch;   /* 让子元素充满右列高度 */
}

.logo-frame{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;                          /* 关键：与左列同高 */
  width: 100%;
  background: #fff;                      /* 你要求的纯白填充 */
  border: 1px solid rgba(140,150,170,.22);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.60) inset,
    0 6px 16px rgba(17,18,20,.05);
}

/* Logo 在白框内自适应，不拉伸变形 */
.logo-frame .edu-logo{
  max-width: 100%;
  max-height: 80%;                        /* 预留上下内边距，避免顶满 */
  height: auto;
  object-fit: contain;
  object-position: center;
}

/* 移动端：依然保持居中，但不强制等高 */
@media (max-width:768px){
  .edu-card{
    align-items: center;
  }
  .logo-frame{ height: auto; }
}
:root{ --edu-card-pad: clamp(16px, 2vw, 24px); }

/* 同行两列等高 */
.edu-card{ align-items: stretch; }

/* 左侧与右侧都用 box-sizing，避免因 padding 影响视觉高度 */
.edu-card .edu-left{ 
  box-sizing: border-box;
  padding: var(--edu-card-pad);
  min-height: 0 !important;   /* 移除之前的 min-height 以免卡死高度 */
}

/* 关键：右列自身不留内边距，白框去占满整列高度 */
.edu-card .edu-right{
  padding: 0 !important;
  display: flex;
  align-items: stretch;        /* 让子元素充满右列高度 */
}

/* 白框与左侧同高 */
.logo-frame{
  height: 100%;                /* 跟随右列（=左列）高度 */
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;

  /* 你的纯白填充与描边 */
  background: #fff;
  border: 1px solid rgba(140,150,170,.22);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.60) inset,
    0 6px 16px rgba(17,18,20,.05);

  /* 把原先右列的内边距转移到白框上，左右对齐更一致 */
  padding: var(--edu-card-pad);
}

/* Logo 在框内等比缩放 */
.logo-frame .edu-logo{
  max-width: 100%;
  max-height: 80%;
  height: auto;
  object-fit: contain;
  object-position: center;
}

/* 移动端：不强制等高，避免超长文字拉高白框 */
@media (max-width:768px){
  .edu-card{ align-items: center; }
  .logo-frame{ height: auto; padding: clamp(10px, 3.5vw, 14px); }
}

/* ===== 软件技能 ===== */
.skills-wrap{
  padding-block: clamp(24px, 7vh, 96px);
}
.skills-title{
  margin: 0;
  font-weight: 800;
  font-size: clamp(24px, 2.4vw, 40px);
}
.skills-rule{
  border: 0; height: 1px; background: #eee;
  margin: 12px 0 28px;
}

/* 网格：桌面 3 列，平板 3/2 列，移动 2 列 */
.skills-grid{
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.6vw, 28px);
}

/* 单个技能卡 */
.skill-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;

  /* 卡片视觉 */
  padding: clamp(12px, 1.8vw, 16px) clamp(12px, 1.8vw, 20px);
  border-radius: 16px;
  background: rgba(255,255,255,1);
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 10px 22px rgba(17,18,20,.06);
  border: 1px solid rgba(140,150,170,.16);
}

/* 图标的内框（与右侧 logo 风格一致） */
.icon-frame{
  width: clamp(84px, 7vw, 112px);
  height: clamp(84px, 7vw, 112px);
  display: grid; place-items: center;
  background: #fff;
  border: 1px solid rgba(140,150,170,.22);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.60) inset,
    0 6px 16px rgba(17,18,20,.05);
}
.skill-icon{
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
}

/* 文字 */
.skill-name{
  margin: 2px 0 0;
  font-weight: 600;
  color: #111;
  text-align: center;
  line-height: 1.3;
}

/* 交互：轻微抬升 */
@media (hover:hover){
  .skill-card{ transition: transform .25s ease, box-shadow .25s ease; }
  .skill-card:hover{
    transform: translateY(-2px);
    box-shadow:
      0 1px 0 rgba(255,255,255,.55) inset,
      0 14px 28px rgba(17,18,20,.08);
  }
}

/* 响应式 */
@media (max-width:1024px){
  .skills-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width:768px){
  .skills-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}