/* ============================================================
   web3hire.help 高级感视觉层 Premium v1（纯追加覆盖，不动源码）
   设计语言：环境光 · 玻璃拟态 · 多层柔和阴影 · 渐变光晕 · 悬浮动效
   主色：#0b7de8 / #1a8cff · 深藏青 #0a2540 · 点缀靛蓝 #4338ca
   ============================================================ */

/* ---------- 1. 全站环境光（品牌蓝 + 靛蓝柔光，随滚动固定） ---------- */
body{
  background-color:#f9fbff;
  background-image:
    radial-gradient(1000px 560px at 88% -6%, rgba(26,140,255,.13), transparent 62%),
    radial-gradient(780px 480px at -8% 22%, rgba(67,56,202,.085), transparent 60%),
    radial-gradient(920px 580px at 50% 112%, rgba(11,125,232,.07), transparent 62%);
  background-attachment:fixed;
  background-repeat:no-repeat;
}

/* ---------- 2. 顶部导航：更强玻璃感 + 精致投影 ---------- */
header.glass-strong,
header[class*="glass"]{
  backdrop-filter:blur(18px) saturate(1.5) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.5) !important;
  background:rgba(255,255,255,.78) !important;
  box-shadow:0 1px 0 rgba(10,37,64,.06), 0 12px 32px -20px rgba(10,37,64,.22) !important;
}
/* 导航链接 hover 微浮 */
header nav a{transition:color .25s ease, transform .25s ease}
header nav a:hover{transform:translateY(-1px)}

/* ---------- 3. 卡片体系：多层柔和阴影 + 描边提亮 ---------- */
[class~="rounded-2xl"][class~="border"],
[class~="rounded-3xl"][class~="border"]{
  border-color:rgba(226,232,240,.75) !important;
  box-shadow:
    0 1px 2px rgba(10,37,64,.035),
    0 14px 34px -18px rgba(10,37,64,.14);
}
/* 可点卡片：悬浮上浮 + 蓝色光晕描边 */
a[class~="rounded-2xl"][class~="border"],
a[class~="rounded-3xl"][class~="border"],
.wh-pp-card, .wh-hr-s, .wh-stat{
  transition:transform .38s cubic-bezier(.16,1,.3,1), box-shadow .38s ease, border-color .38s ease;
}
a[class~="rounded-2xl"][class~="border"]:hover,
a[class~="rounded-3xl"][class~="border"]:hover,
.wh-pp-card:hover, .wh-hr-s:hover, .wh-stat:hover{
  transform:translateY(-4px);
  border-color:rgba(11,125,232,.30) !important;
  box-shadow:
    0 2px 4px rgba(10,37,64,.04),
    0 26px 52px -22px rgba(11,125,232,.30);
}

/* ---------- 4. 主按钮：渐变 + 光晕 + 微浮 ---------- */
[class~="bg-blue-600"], [class~="bg-blue-700"],
.wh-acc-btn-main, button.primary{
  background-image:linear-gradient(135deg,#1a8cff 0%,#0b7de8 48%,#0a63d6 100%) !important;
  box-shadow:
    0 10px 26px -10px rgba(11,125,232,.55),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
  transition:transform .28s ease, box-shadow .28s ease, filter .28s ease !important;
}
[class~="bg-blue-600"]:hover, [class~="bg-blue-700"]:hover,
.wh-acc-btn-main:hover, button.primary:hover{
  transform:translateY(-1.5px);
  filter:brightness(1.05);
  box-shadow:
    0 16px 34px -12px rgba(11,125,232,.65),
    inset 0 1px 0 rgba(255,255,255,.25) !important;
}
/* 次按钮/幽灵按钮：玻璃化 */
[class~="border-blue-200"], .wh-acc-btn-ghost{
  backdrop-filter:blur(8px);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
}
[class~="border-blue-200"]:hover, .wh-acc-btn-ghost:hover{
  transform:translateY(-1.5px);
  box-shadow:0 10px 24px -12px rgba(11,125,232,.28);
  border-color:rgba(11,125,232,.5) !important;
}

/* ---------- 5. 标题排版：收紧字距更有设计感 ---------- */
h1, h2{letter-spacing:-.025em}
h3{letter-spacing:-.015em}
.wh-hero-title{letter-spacing:-.032em}

/* Hero 主标题强调词：流光渐变文字（在原 .text-gradient-gold 上升级） */
.text-gradient-gold{
  background:linear-gradient(120deg,#0b7de8 0%,#1290f2 25%,#4338ca 50%,#1a8cff 75%,#0b7de8 100%) !important;
  background-size:220% auto !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  animation:wh-shimmer 7s linear infinite;
}
@keyframes wh-shimmer{to{background-position:220% center}}

/* Hero 主按钮 .btn-gold：提亮 + 光晕 + 掠光动画 */
.btn-gold{
  background:linear-gradient(135deg,#1a8cff 0%,#0b7de8 45%,#0a63d6 100%) !important;
  box-shadow:0 10px 26px -10px rgba(11,125,232,.6), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.btn-gold::after{
  content:"";position:absolute;top:0;left:-90%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
  transform:skewX(-22deg);transition:left .65s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.btn-gold:hover{
  background:linear-gradient(135deg,#2b9aff 0%,#1290f2 45%,#0b6fe0 100%) !important;
  box-shadow:0 16px 36px -12px rgba(11,125,232,.7), inset 0 1px 0 rgba(255,255,255,.3) !important;
  transform:translateY(-2px);
}
.btn-gold:hover::after{left:140%}

/* Hero 次按钮 .btn-glass：玻璃悬浮 */
.btn-glass{transition:all .3s cubic-bezier(.16,1,.3,1) !important}
.btn-glass:hover{
  transform:translateY(-2px);
  border-color:rgba(11,125,232,.45) !important;
  box-shadow:0 12px 26px -12px rgba(11,125,232,.35);
  color:#0b7de8 !important;
}

/* 玻璃卡片：统一悬浮上浮 */
.glass-card:hover{
  transform:translateY(-4px);
  border-color:rgba(11,125,232,.3);
  box-shadow:0 2px 4px rgba(10,37,64,.05), 0 26px 52px -22px rgba(11,125,232,.32);
}

/* ---------- 6. Hero 数据：渐变数字 ---------- */
.wh-hero-statnum, .wh-hr-num{
  background:linear-gradient(135deg,#0b7de8 20%,#4338ca 90%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* ---------- 7. 徽章/小药丸：玻璃质感 ---------- */
.wh-pp-badge, .wh-hr-pill, .wh-pain-chip,
[class~="rounded-full"][class~="bg-blue-50"]{
  background:rgba(11,125,232,.07) !important;
  border:1px solid rgba(11,125,232,.16) !important;
  backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}

/* ---------- 8. 轮播控件：圆点与箭头精致化 ---------- */
/* 轮播步长：桌面端卡片 68% 宽，位移也要按 68% 步进（手机端默认 100%） */
@media (min-width:900px){
  .wh-pp-track{--wh-pp-step:68%}
}
/* 大数字水印重设计：改为精致渐变序号徽章（原 92px 幽灵数字会压住卡片右上角内容，如 60 细分赛道数据块） */
.wh-pp-num{
  top:14px !important;
  right:14px;
  left:auto;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.14em;
  line-height:1;
  color:#fff;
  background:linear-gradient(135deg,#1a8cff 0%,#0b7de8 45%,#4338ca 110%);
  border-radius:999px;
  padding:7px 11px;
  box-shadow:
    0 6px 16px -6px rgba(11,125,232,.6),
    inset 0 1px 0 rgba(255,255,255,.32);
  pointer-events:none;
}
.wh-pp-dot, .wh-hr-dot{transition:all .3s cubic-bezier(.16,1,.3,1) !important}
.wh-pp-dot:not([style*="cbd5e1"]), .wh-hr-dot.on{
  background:linear-gradient(135deg,#1a8cff,#0a63d6) !important;
  box-shadow:0 2px 8px rgba(11,125,232,.45);
}
.wh-pp-arrow, .wh-hr-go{
  box-shadow:0 4px 14px -6px rgba(10,37,64,.18);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.wh-pp-arrow:hover, .wh-hr-go:hover{
  transform:scale(1.08);
  border-color:rgba(11,125,232,.4);
  box-shadow:0 8px 20px -8px rgba(11,125,232,.4);
}

/* ---------- 9. 深色页脚：顶部渐变光线 + 链接微光 ---------- */
footer{
  background:linear-gradient(180deg,#0a1f3d 0%,#081830 30%,#061224 100%) !important;
  position:relative;
}
footer::before{
  content:"";position:absolute;top:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(26,140,255,.55),transparent);
}
footer a{transition:color .25s ease, transform .25s ease}
footer a:hover{color:#7db8ff !important}
.wh-flink{
  transition:transform .3s ease, background .3s ease, border-color .3s ease;
}
.wh-flink:hover{transform:translateX(3px)}

/* ---------- 10. 输入框：柔光聚焦 ---------- */
input:focus, textarea:focus, select:focus{
  box-shadow:0 0 0 4px rgba(11,125,232,.12) !important;
  border-color:rgba(11,125,232,.55) !important;
}

/* ---------- 11. 全局滚动条：细窄品牌色 ---------- */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#c7d9f2,#a8c4ea);border-radius:8px;border:2px solid #fbfcfe}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#1a8cff,#0a63d6)}

/* ---------- 12. 选中文字：品牌蓝 ---------- */
::selection{background:rgba(11,125,232,.18);color:#0a2540}

/* ---------- 13. 图片与媒体：柔化边缘阴影 ---------- */
.wh-hero-dimg, .wh-hero-mimg, .wh-hero-bgimg{
  filter:saturate(1.04) contrast(1.02);
}

/* ---------- 14. 手机端微调 ---------- */
@media (max-width:480px){
  body{
    background-image:
      radial-gradient(120vw 60vw at 80% -4%, rgba(26,140,255,.09), transparent 62%),
      radial-gradient(100vw 70vw at 50% 108%, rgba(11,125,232,.05), transparent 62%);
  }
}