/* ===== royal 皇家紫 · 华丽玻璃 ===== */
:root{
  --h5-primary:#7c3aed;
  --h5-bg:#faf8ff;
  --h5-card:#ffffff;
  --h5-text:#2b2244;
  --h5-muted:#9b8fc2;
  --h5-line:#eae4fb;
  --h5-radius:16px;
  --h5-shadow:0 8px 26px rgba(124,58,237,.14);
}
body.h5-body{
  background:
    radial-gradient(600px 260px at 90% -50px,rgba(196,141,255,.16),transparent 65%),
    radial-gradient(500px 240px at 0% 30%,rgba(124,58,237,.07),transparent 60%),
    var(--h5-bg);
  color:var(--h5-text);
  font-family:"UKIJ Ekran","PingFang SC",-apple-system,sans-serif;
}
.h5-topbar{
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--h5-line);
}
.h5-topbar-inner{height:56px;}
.h5-brand{
  font-weight:700;
  background:linear-gradient(120deg,#7c3aed,#c084fc);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.h5-icon-btn{color:var(--h5-primary);border-color:#ddd2fb;background:#fff;}
.h5-hero{
  text-align:center;
  padding:46px 18px 34px;
  background:linear-gradient(135deg,#ede9fe 0%,#f5f0ff 45%,#fdf2fb 100%);
  border-radius:0 0 30px 30px;
  position:relative;overflow:hidden;
}
.h5-hero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(300px 140px at 20% 0,rgba(196,141,255,.25),transparent 70%);
}
.h5-hero h1{
  position:relative;font-size:27px;margin:0 0 12px;
  background:linear-gradient(120deg,#7c3aed 20%,#c026d3 55%,#8b5cf6 90%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.h5-slogan{position:relative;color:var(--h5-muted);}
.h5-hero .h5-btn-primary{position:relative;}
.h5-btn-primary{
  background:linear-gradient(135deg,#8b5cf6,#7c3aed 55%,#a855f7);
  border:none;border-radius:999px;
  box-shadow:0 8px 22px rgba(124,58,237,.38);
  color:#fff;font-weight:700;
}
.h5-btn-ghost{border-radius:999px;border-color:var(--h5-primary);color:var(--h5-primary);background:rgba(255,255,255,.7);}
.h5-intro-card{
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(10px);
  border:1px solid var(--h5-line);
  border-radius:var(--h5-radius);box-shadow:var(--h5-shadow);
}
.h5-intro-text{color:#4d4470;}
.h5-intro-meta li{color:var(--h5-muted);border-color:var(--h5-line);}
.h5-intro-meta li i{color:var(--h5-primary);}
.h5-section-head h2{color:var(--h5-text);}
.h5-more{color:var(--h5-primary);}
.h5-chip{background:#fff;border-color:var(--h5-line);color:var(--h5-muted);border-radius:999px;}
.h5-chip.active{
  background:linear-gradient(135deg,#8b5cf6,#7c3aed);
  border-color:transparent;color:#fff;font-weight:600;
}
.h5-work-card{
  background:rgba(255,255,255,.9);
  border:1px solid var(--h5-line);
  border-radius:var(--h5-radius);box-shadow:var(--h5-shadow);overflow:hidden;
  transition:transform .18s;
}
.h5-work-card:active{transform:translateY(-2px);}
.h5-work-title{color:var(--h5-text);}
.h5-work-meta{color:var(--h5-muted);}
.h5-work-ph{background:linear-gradient(135deg,#ede9fe,#e9d5ff);color:var(--h5-primary);}
.h5-job-list li a{
  background:rgba(255,255,255,.9);border:1px solid var(--h5-line);
  border-radius:14px;color:var(--h5-text);
}
.h5-job-list li a small{color:var(--h5-muted);}
.h5-cta{
  background:linear-gradient(135deg,#7c3aed 0%,#a855f7 60%,#c026d3 130%);
  border-radius:20px;
  box-shadow:0 10px 30px rgba(124,58,237,.35);
}
.h5-cta p{color:rgba(255,255,255,.94);}
.h5-cta .h5-btn-primary{background:#fff;color:var(--h5-primary);box-shadow:none;}
.h5-cta .h5-btn-ghost{border-color:rgba(255,255,255,.75);color:#fff;background:transparent;}
.h5-tabbar{background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-top:1px solid var(--h5-line);}
.h5-tab.active,.h5-tab.active .h5-tab-icon{color:var(--h5-primary);}
.h5-slider-dots button.active{background:var(--h5-primary);}
.h5-empty{color:var(--h5-muted);}

/* ===== royal 独特布局 / Unique Layout ===== */
.h5-hero-royal{padding:50px 18px 38px;position:relative;}
.h5-royal-glass{
  background:rgba(255,255,255,.65);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.8);
  border-radius:20px;
  padding:28px 20px;
  box-shadow:0 8px 32px rgba(124,58,237,.15);
  position:relative;
}
.h5-intro-royal{border:1px solid var(--h5-line);position:relative;}
.h5-intro-royal::before{
  content://;position:absolute;top:0;left:20px;right:20px;height:3px;
  background:linear-gradient(90deg,#7c3aed,#c084fc,#7c3aed);border-radius:3px;
}
.h5-royal-meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;}
.h5-royal-meta-item{
  background:rgba(124,58,237,.06);border:1px solid var(--h5-line);
  border-radius:12px;padding:12px 8px;text-align:center;font-size:13px;color:var(--h5-muted);
}
.h5-royal-meta-item i{display:block;font-size:20px;color:var(--h5-primary);margin-bottom:6px;}
.h5-chips-royal .h5-chip{border-radius:999px;}
.h5-works-royal{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}
.h5-work-card-royal{border-radius:var(--h5-radius);overflow:hidden;}
.h5-work-card-royal .h5-work-info{padding:12px;}
.h5-job-list-royal li a{border-radius:14px;}
.h5-cta-royal{border-radius:20px;}