/* t27 创客云演示站 · 视觉打磨层(叠加在原模板之上,不改原 style.css) */
:root { --t-red: #e03a47; --t-red-d: #c42a37; --t-ink: #1c2230; --t-ink2: #5a6372; --t-line: #e6e9ef; --t-bg: #f5f7fa; }
html { scroll-behavior: smooth; }
body { font-family: "PingFang SC", "HarmonyOS Sans SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif; color: var(--t-ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { transition: color .25s, background-color .25s, border-color .25s, box-shadow .3s, transform .35s cubic-bezier(.16, 1, .3, 1); }
img { max-width: 100%; }

/* ---------- 宽屏:容器随屏幕放宽 ---------- */
@media (min-width: 1400px) { .container { width: 1320px; } }
@media (min-width: 1760px) { .container { width: 1520px; } }

/* ---------- 顶栏:半透明磨砂 + 滚动阴影 ---------- */
.navbar-default { background: rgba(255, 255, 255, .88) !important; -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid rgba(28, 34, 48, .06) !important; transition: box-shadow .3s, background .3s; }
.navbar-default.is-scrolled { box-shadow: 0 8px 30px -12px rgba(28, 34, 48, .25); background: rgba(255, 255, 255, .96) !important; }
.navbar-default .navbar-nav > li > a { color: var(--t-ink) !important; font-weight: 500; letter-spacing: .04em; position: relative; }
.navbar-default .navbar-nav > li > a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 10px; height: 2px; background: var(--t-red); transition: left .3s, right .3s; }
.navbar-default .navbar-nav > li > a:hover::after, .navbar-default .navbar-nav > li.active > a::after { left: 25%; right: 25%; }
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li.active > a { color: var(--t-red) !important; background: transparent !important; }

/* ---------- 首页 banner ---------- */
.banner .owl-theme .item { height: clamp(420px, 41vw, 700px) !important; background-size: cover !important; background-position: 70% center !important; position: relative; }
.banner .owl-theme .item > a, .banner .owl-theme .item > img { display: none !important; }
.kv { position: absolute; inset: 0; display: flex; align-items: center; }
.kv__in { max-width: min(500px, 37vw); color: #fff; text-align: left; }
.kv__k { display: inline-block; margin: 0 0 18px; padding: 5px 14px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 99px; font-size: 13px; letter-spacing: .18em; color: rgba(255, 255, 255, .92); backdrop-filter: blur(6px); background: rgba(255, 255, 255, .08); }
.kv__in h2 { margin: 0 0 16px; font-size: clamp(28px, 2.9vw, 52px); line-height: 1.18; font-weight: 700; letter-spacing: .01em; color: #fff; text-shadow: 0 4px 30px rgba(0, 0, 0, .35); }
.kv__in h2, .kv__in p { font-family: inherit; }
.kv__in p { margin: 0 0 28px; font-size: clamp(15px, 1.25vw, 19px); line-height: 1.7; color: rgba(255, 255, 255, .88); }
.kv__act a { display: inline-block; margin: 0 12px 12px 0; padding: 12px 28px; border-radius: 99px; font-size: 15px; font-weight: 600; text-decoration: none; color: #fff; border: 1px solid rgba(255, 255, 255, .55); }
.kv__act a:first-child { background: var(--t-red); border-color: var(--t-red); box-shadow: 0 14px 30px -12px var(--t-red); }
.kv__act a:hover { transform: translateY(-2px); background: #fff; color: var(--t-red); border-color: #fff; }
.owl-item.active .kv__in > * { animation: kvIn .9s cubic-bezier(.16, 1, .3, 1) both; }
.owl-item.active .kv__in > *:nth-child(2) { animation-delay: .08s; }
.owl-item.active .kv__in > *:nth-child(3) { animation-delay: .16s; }
.owl-item.active .kv__in > *:nth-child(4) { animation-delay: .24s; }
@keyframes kvIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.banner .owl-controls .owl-pagination .owl-page span { width: 28px; height: 4px; border-radius: 4px; margin: 0 4px; opacity: .35; transition: opacity .3s, width .3s; }
.banner .owl-controls .owl-page.active span { width: 46px; opacity: 1; background: var(--t-red); }

/* ---------- 内页 banner ---------- */
section.banner.full_bg { background-size: cover !important; background-position: center !important; }
.banner-mask { background: linear-gradient(90deg, rgba(8, 12, 28, .55), rgba(8, 12, 28, .1)) !important; padding: 5.8em 0 !important; }
.banner-mask h2 { font-size: clamp(26px, 3vw, 44px) !important; letter-spacing: .06em; font-weight: 700; }
.banner-mask p { font-size: clamp(14px, 1.1vw, 18px) !important; }

/* ---------- 板块标题 ---------- */
.h-h2 { font-weight: 700; letter-spacing: .04em; color: var(--t-ink); }
.m-sm, .xx { color: var(--t-ink2); }
.sx-jianju { padding-top: clamp(48px, 6vw, 96px); padding-bottom: clamp(48px, 6vw, 96px); }

/* ---------- 按钮 ---------- */
.btn-center, .btn-red, a.btn-title, .btn { border-radius: 99px !important; transition: all .3s cubic-bezier(.16, 1, .3, 1); }
.btn-center { padding: 10px 30px !important; font-weight: 600; letter-spacing: .06em; }
.btn-center:hover { background: var(--t-red) !important; border-color: var(--t-red) !important; color: #fff !important; transform: translateY(-2px); box-shadow: 0 14px 28px -14px var(--t-red); }

/* ---------- 服务三栏 ---------- */
.service figure { padding: 34px 28px 30px; border-radius: 16px; transition: transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .45s, background .3s; border: 0 !important; }
.service figure:hover { transform: translateY(-8px); background: #fff; box-shadow: 0 30px 60px -28px rgba(28, 34, 48, .35); }
.service figure h3 a { color: var(--t-ink); }
.service figure:hover h3 a { color: var(--t-red); }
.service ul li { color: var(--t-ink2); line-height: 2; }

/* ---------- 客户 logo ---------- */
.client figure a { display: block; }
.client figure img { border-radius: 10px; box-shadow: 0 8px 22px -14px rgba(28, 34, 48, .35); transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s; }
.client figure:hover img { transform: translateY(-5px); box-shadow: 0 22px 40px -18px rgba(28, 34, 48, .45); }
.client figcaption { color: var(--t-ink2); }

/* ---------- 案例卡片 ---------- */
.case-box figure, .case-box figure a { display: block; margin: 0; }
.case-box { display: flex; flex-wrap: wrap; }
.case-box > div { float: none; }
.case-box figure { position: relative; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 34px -22px rgba(28, 34, 48, .5); transition: box-shadow .45s, transform .45s cubic-bezier(.16, 1, .3, 1); }
.case-box figure:hover { transform: translateY(-6px); box-shadow: 0 34px 60px -26px rgba(28, 34, 48, .55); }
.case-box figure img { width: 100%; height: auto !important; aspect-ratio: 360 / 258; object-fit: cover; display: block; transition: transform 1.1s cubic-bezier(.16, 1, .3, 1); }
.case-box figure:hover img { transform: scale(1.07); }
.case-box { margin-bottom: 8px; }
.case-box > div { margin-bottom: 24px; }

/* ---------- 列表/文章页 ---------- */
.main { background: #fff; }
.ny-menu .btn-title { border-radius: 99px !important; }
.content img { border-radius: 10px; }
.content .row > div { transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.pagination > li > a, .pagination > li > span { border-radius: 8px !important; margin: 0 3px; border: 1px solid var(--t-line); }
.pagination > .active > a { background: var(--t-red) !important; border-color: var(--t-red) !important; }

/* ---------- 页脚(浅底,文字必须够深) ---------- */
.footer, .footer p, .footer li, .footer address, .footer figure p, footer p { color: #4b5463 !important; }
.footer h4, .footer figure h4, .footer figcaption { color: var(--t-ink) !important; font-weight: 600; }
.footer a, footer a { color: #3a4150; }
.footer a:hover, footer a:hover { color: var(--t-red); }
footer .copy, footer .copyright, footer p small { color: #6b7380 !important; }
.kefu li a { transition: background .25s, transform .3s; }
.kefu li a:hover { transform: translateX(-4px); }

/* ---------- 滚动渐入 ---------- */
.t27-r { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--d, 0s); }
.t27-r.t27-in { opacity: 1; transform: none; }

/* ---------- 手机端 ---------- */
@media (max-width: 767px) {
  .banner .owl-theme .item { height: 500px !important; background-color: #0c1226; background-size: auto 58% !important; background-position: 66% 100% !important; background-repeat: no-repeat !important; }
  .banner .owl-theme .item::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0c1226 0, rgba(12, 18, 38, .94) 46%, rgba(12, 18, 38, 0) 74%); z-index: 0; }
  .kv { z-index: 1; }
  .kv { align-items: flex-start; padding-top: 36px; }
  .kv__in { max-width: none !important; }
  .kv__in h2 { font-size: 27px; }
  .kv__in p { font-size: 14px; margin-bottom: 18px; }
  .kv__k { margin-bottom: 12px; font-size: 12px; }
  .kv__act a { padding: 10px 22px; font-size: 14px; }
  .banner .owl-controls .owl-pagination { bottom: -8px; }
  .banner-mask { padding: 3.6em 0 !important; }
  section.banner.full_bg { background-size: cover !important; }
  .service figure { padding: 24px 16px; }
  .client figure { width: 50%; float: left; padding: 0 8px; margin-bottom: 14px; }
  .client figure img { width: 100%; height: auto; }
  .case-box > div { margin-bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .t27-r { opacity: 1; transform: none; transition: none; }
  .owl-item.active .kv__in > * { animation: none; }
}
