/* ===========================================================
   壹隔® 官网 UI 精修层 v2 · 主色 RAL 5002（群青 / Ultramarine）
   用法：在 <head> 内联 <style> 之后追加
        <link rel="stylesheet" href="/assets/ui-2026.css">
   回滚：删掉这一行。
   色彩体系：RAL5002 = #2A2A78（主）｜5001 深 #1B1B55｜5002-40 淡 #6E6EB0
            ｜金棕 #B8934F（辅，商标/点缀）｜中性 #F7F7FC / #E7E7F2
   =========================================================== */

:root{
  /* —— RAL5002 主色族 —— */
  --ral5002:#2a2a78;
  --ral5001:#1b1b55;          /* 更深一档，用于按压/阴影 */
  --ral5002-70:#44448f;
  --ral5002-40:#6e6eb0;
  --ral5002-16:#c9c9e6;
  --ral5002-08:#e7e7f5;       /* 浅底 */
  --ral5002-04:#f4f4fb;
  /* —— 辅助 —— */
  --ui-gold:#b8934f;
  --ui-gold-2:#d8b877;
  --ui-ink:#12132a;            /* 带主色倾向的墨色，比纯黑柔 */
  --ui-body:#4a4d68;
  --ui-muted:#72768f;
  --ui-line:rgba(42,42,120,.14);
  --ui-ease:cubic-bezier(.16,1,.3,1);
  --ui-serif:"Songti SC","Source Han Serif SC","Noto Serif CJK SC","SimSun",serif;
}

/* ---------- 滚动进度 ---------- */
#ui-progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:9999;
  background:linear-gradient(90deg,var(--ral5002),var(--ral5002-40) 60%,var(--ui-gold));
  transition:width .12s linear;pointer-events:none}

/* ---------- 顶栏：深靛 ---------- */
.topbar{background:linear-gradient(90deg,var(--ral5001),var(--ral5002) 55%,#33338a);
  letter-spacing:.02em}
.topbar a{color:#fff}

/* ---------- 导航：玻璃拟态 + 靛蓝下划线 ---------- */
.nav{position:sticky;top:0;z-index:900;background:rgba(247,247,252,.74);
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid var(--ui-line);
  transition:background .35s var(--ui-ease),box-shadow .35s var(--ui-ease)}
.nav.ui-solid{background:rgba(247,247,252,.92);box-shadow:0 10px 30px -18px rgba(27,27,85,.45)}
.nav-inner{gap:22px}
.nav .brand{font-weight:700;letter-spacing:.01em;color:var(--ral5001)}
.nav .links>a{position:relative;padding:6px 2px;color:var(--ui-body)}
.nav .links>a:hover{color:var(--ral5002)}
.nav .links>a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:var(--ral5002);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ui-ease)}
.nav .links>a:hover::after{transform:scaleX(1)}
.nav .cta-mini{background:var(--ral5002)!important;color:#fff!important;
  box-shadow:0 8px 20px -10px rgba(42,42,120,.85)}
.nav .cta-mini:hover{background:var(--ral5001)!important;transform:translateY(-1px)}

/* ---------- 首屏 ---------- */
.page-hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#fbfbfe 0%,var(--ral5002-04) 55%,#fff 100%)}
.page-hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(58% 46% at 6% 0%,rgba(42,42,120,.16),transparent 62%),
    radial-gradient(50% 44% at 100% 100%,rgba(184,147,79,.14),transparent 62%)}
.page-hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.45;
  background-image:linear-gradient(rgba(42,42,120,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(42,42,120,.07) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(70% 62% at 50% 42%,#000,transparent 76%);
  mask-image:radial-gradient(70% 62% at 50% 42%,#000,transparent 76%)}
.hero-grid{position:relative;z-index:2}
.hero-3d{z-index:0}
.page-hero .hero-copy{position:relative;z-index:3}

.hero-copy .eyebrow{color:var(--ral5002);font-weight:700;letter-spacing:.14em;
  text-transform:none;font-size:12.5px}
.hero-copy .eyebrow::before{content:"";display:inline-block;width:28px;height:2px;
  background:var(--ui-gold);vertical-align:middle;margin-right:10px}

.page-hero h1{font-family:var(--ui-serif);font-weight:600;letter-spacing:-.015em;
  line-height:1.08;font-size:clamp(32px,4.6vw,60px);text-wrap:balance}
.page-hero .hero-copy h1{color:var(--ral5001)}
.page-hero .lead{color:#2f3d4d;max-width:52ch;text-wrap:pretty}
/* 3D 未加载/未渲染时的兜底视觉：玻璃面板剪影 + 光晕，避免首屏右侧空白 */
.hero-3d{background:
   radial-gradient(70% 60% at 30% 18%,rgba(42,42,120,.10),transparent 62%),
   repeating-linear-gradient(101deg,rgba(42,42,120,.05) 0 2px,transparent 2px 46px),
   linear-gradient(160deg,rgba(255,255,255,.9),rgba(233,233,246,.55) 60%,rgba(255,255,255,.9))}
.page-hero .hero-points li{position:relative;padding-left:20px;color:#2b3847}
.page-hero .hero-points li::before{content:"";position:absolute;left:0;top:.62em;
  width:8px;height:8px;border-radius:2px;background:var(--ral5002);opacity:.85;transform:rotate(45deg)}
.page-hero .hero-note{color:#4b5a69;font-size:13px;letter-spacing:.02em}

/* ---------- 按钮 ---------- */
.btn{position:relative;overflow:hidden;border-radius:999px;letter-spacing:.01em;
  transition:transform .4s var(--ui-ease),box-shadow .4s var(--ui-ease),background .3s}
.btn-primary{background:linear-gradient(135deg,var(--ral5002),var(--ral5001));
  box-shadow:0 16px 32px -18px rgba(27,27,85,.85);color:#fff}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 22px 40px -18px rgba(27,27,85,.9)}
.btn-ghost{background:rgba(255,255,255,.78);border:1px solid var(--ui-line);color:var(--ral5001)}
.btn-ghost:hover{transform:translateY(-2px);background:#fff;box-shadow:0 14px 26px -18px rgba(42,42,120,.5)}
.btn .ui-ripple{position:absolute;border-radius:50%;transform:scale(0);
  background:rgba(255,255,255,.32);animation:ui-rip .62s ease-out forwards;pointer-events:none}
.btn-ghost .ui-ripple{background:rgba(42,42,120,.14)}
@keyframes ui-rip{to{transform:scale(2.8);opacity:0}}

/* ---------- 区块标题 ---------- */
.section-title h2{font-family:var(--ui-serif);font-weight:600;letter-spacing:-.01em;
  line-height:1.18;font-size:clamp(24px,3vw,38px)}
/* 注意：不在此处指定 h2 颜色 —— 深底区块（真实项目案例等）必须沿用其原有的白色，
   若在这里统一上色会造成「深底深字」不可读（2026-10-29 实测踩到）。 */
.section-title .eyebrow{color:#8f6f33;font-weight:700;letter-spacing:.2em}
.section-title p{color:var(--ui-muted);line-height:1.85}
/* 正文行高（可读性） */
.section p,.section li{line-height:1.92}
.section p+p{margin-top:1em}

/* ---------- 入口卡 / 案例卡 ---------- */
.home-nav-card,.case-card{border-radius:18px;overflow:hidden;position:relative;
  border:1px solid var(--ui-line);background:#fff;
  transition:transform .5s var(--ui-ease),box-shadow .5s var(--ui-ease),border-color .5s}
.home-nav-card:hover,.case-card:hover{transform:translateY(-4px);
  box-shadow:0 26px 50px -30px rgba(27,27,85,.5);border-color:var(--ral5002-40)}
.home-nav-card .idx,.home-nav-card b{color:var(--ral5002)}
.case-card img,.case-card video{transition:transform 1.1s var(--ui-ease),filter .6s}
.case-card:hover img,.case-card:hover video{transform:scale(1.06);filter:saturate(1.06)}
.case-card::after{content:"";position:absolute;inset:auto 0 0 0;height:58%;pointer-events:none;
  background:linear-gradient(0deg,rgba(18,19,42,.78),transparent);opacity:.85;transition:opacity .5s}
.case-card:hover::after{opacity:1}
.case-card .cc-meta{position:relative;z-index:2}

/* ---------- 揭示动效 ---------- */
.reveal{transition-duration:.75s;transition-timing-function:var(--ui-ease)}
.home-nav-grid .home-nav-card.reveal{transition-delay:calc(var(--ui-i,0) * 70ms)}

/* ---------- 回到顶部 ---------- */
.to-top{border-radius:50%;background:var(--ral5002)!important;
  transition:transform .3s var(--ui-ease),opacity .3s}
.to-top:hover{transform:translateY(-2px) scale(1.04)}

/* ---------- 可访问性 ---------- */
a:focus-visible,button:focus-visible,.btn:focus-visible{outline:2px solid var(--ral5002);
  outline-offset:3px;border-radius:8px}

@media (max-width:760px){
  .page-hero h1{letter-spacing:-.01em}
  .section-title{margin-bottom:34px}
  .btn{padding:13px 22px;font-size:15px}
}

@media (prefers-reduced-motion:reduce){
  .nav,.btn,.home-nav-card,.case-card,.reveal{transition:none!important}
  .btn:hover,.home-nav-card:hover,.case-card:hover{transform:none!important}
}

/* ---------- 首屏精修（2026-10-29 二轮） ---------- */
/* 主 CTA 明确用 RAL5002，压过站点原有的深灰按钮 */
.hero-cta .btn-primary{background:linear-gradient(135deg,var(--ral5002),var(--ral5001))!important;
  color:#fff!important;box-shadow:0 16px 32px -16px rgba(27,27,85,.9)}
/* 要点标签压在不透明白底上，避免右侧压到深蓝玻璃时糊字 */
.page-hero .hero-points li{background:#fff!important;border:1px solid rgba(42,42,120,.10);
  box-shadow:0 2px 8px -6px rgba(13,22,32,.35)}
.page-hero .hero-note{background:rgba(255,255,255,.94);display:inline-block;padding:6px 12px;
  border-radius:999px}