/* =====================================================================
   辽宁博观创意科技有限公司官网 · Corporate UI
   AnswerBit-inspired · light neutral / ink primary / indigo-violet AI accents
   ===================================================================== */
:root {
    --bg-brand-900: #050816;
    --bg-brand-800: #0B1024;
    --bg-brand-700: #4F46E5;
    --bg-brand-600: #0284C7;
    --bg-brand-500: #22D3EE;
    --bg-brand-100: #E8F7FF;
    --bg-brand-050: #F5FAFF;
    --bg-accent: #22D3EE;
    --bg-ink: #0F172A;
    --bg-body: #F5F7FB;
    --bg-surface: #ffffff;
    --bg-muted: #64748B;
    --bg-light: #F8FAFF;
    --bg-line: #DCE4F2;
    --shadow-sm: 0 2px 10px rgba(15, 23, 42, .05);
    --shadow-md: 0 16px 45px rgba(15, 23, 42, .10);
    --shadow-brand: 0 20px 45px rgba(2, 132, 199, .24);
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --font: -apple-system, BlinkMacSystemFont, "SF Pro SC", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

* {
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 88px;
}

body.body-white,
body.xiaoshouyi-theme,
body.bg-theme {
    background: var(--bg-body);
    color: var(--bg-ink);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.75;
    letter-spacing: -0.01em;
    padding-top: 76px;
}

body.bg-page-white {
    background: #fff;
}

::selection {
    background: rgba(232, 145, 120, .22);
    color: var(--bg-brand-900);
}

a,
a:focus,
a:hover {
    color: var(--bg-brand-600);
}

img {
    max-width: 100%;
}

.bg-container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

.bg-section {
    position: relative;
    padding: 96px 0;
}

.bg-section-alt {
    background: #fff;
}

.bg-section-soft {
    background: var(--bg-body);
}

.bg-section-dark {
    background: radial-gradient(circle at 78% 18%, rgba(34,211,238,.28) 0, transparent 36%), radial-gradient(circle at 12% 78%, rgba(124,58,237,.32) 0, transparent 44%), linear-gradient(135deg,#050816 0%,#0B1024 56%,#16235A 100%);
    color: #fff;
}

.bg-section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    padding: 6px 14px;
    border: 1px solid rgba(79, 70, 229, .24);
    border-radius: 999px;
    background: rgba(34, 211, 238, .12);
    color: var(--bg-brand-700);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1;
    text-transform: uppercase;
}

.bg-section-dark .bg-section-eyebrow {
    border-color: rgba(255,255,255,.24);
    background: rgba(255,255,255,.10);
    color: #fff;
}

.bg-section-header {
    max-width: 780px;
    margin: 0 auto 56px;
    text-align: center;
}

.bg-section-header.align-left {
    margin: 0 0 42px;
    text-align: left;
}

.bg-section-title {
    margin: 0;
    color: var(--bg-ink);
    font-size: clamp(30px, 4vw, 45px);
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -.04em;
}

.bg-section-dark .bg-section-title {
    color: #fff;
}

.bg-section-subtitle {
    margin: 16px 0 0;
    color: var(--bg-muted);
    font-size: 17px;
    line-height: 1.85;
}

.bg-section-dark .bg-section-subtitle {
    color: rgba(255,255,255,.76);
}

/* ============================ Navigation ============================ */
.bg-navbar {
    position: fixed;
    z-index: 1080;
    top: 0;
    right: 0;
    left: 0;
    min-height: 76px;
    border-bottom: 1px solid rgba(223,229,239,.86);
    background: rgba(255,255,255,.96);
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 1px 24px rgba(15,23,42,.05);
}

.bg-navbar.bg-scrolled {
    box-shadow: 0 8px 32px rgba(15,23,42,.10);
}

.bg-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 76px;
}

.bg-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 0;
    color: var(--bg-ink);
    text-decoration: none;
}

.bg-brand:hover,
.bg-brand:focus {
    color: var(--bg-ink);
}

.bg-brand-mark {
    display: block;
    width: 42px;
    height: 42px;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    flex: 0 0 auto;
    padding: 0;
    object-fit: contain;
    filter: none;
}

.bg-brand-mark img,
.bg-brand-mark svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: none;
}

.bg-brand-mark--footer {
    width: 46px;
    height: 46px;
    padding: 0;
}

.bg-brand-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.18;
}

.bg-brand-copy strong {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.bg-brand-copy span {
    margin-top: 3px;
    color: #778191;
    font-family: Arial, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .15em;
}

.bg-nav-menu {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bg-nav-menu > li > a {
    display: inline-flex;
    align-items: center;
    height: 42px;
    padding: 0 15px;
    border-radius: 999px;
    color: #364152;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: all .2s ease;
}

.bg-nav-menu > li > a:hover,
.bg-nav-menu > li > a:focus,
.bg-nav-menu > li.active > a {
    color: var(--bg-brand-700);
    background: var(--bg-brand-050);
}

.bg-nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bg-phone-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #364152;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.bg-phone-link:hover {
    color: var(--bg-brand-600);
}

.bg-phone-link i {
    color: var(--bg-brand-600);
}

.bg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 11px 24px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}

.bg-btn-primary {
    background: linear-gradient(135deg, #0284C7 0%, #4F46E5 100%);
    color: #fff;
    box-shadow: var(--shadow-brand);
}

.bg-btn-primary:hover,
.bg-btn-primary:focus {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 24px 52px rgba(2,132,199,.32);
}

.bg-btn-white {
    background: #fff;
    color: var(--bg-brand-700);
    box-shadow: 0 12px 30px rgba(79,70,229,.18);
}

.bg-btn-white:hover,
.bg-btn-white:focus {
    color: var(--bg-brand-800);
    transform: translateY(-2px);
}

.bg-btn-outline {
    border: 1px solid rgba(255,255,255,.52);
    color: #fff;
}

.bg-btn-outline:hover,
.bg-btn-outline:focus {
    color: #fff;
    background: rgba(255,255,255,.12);
}

.bg-btn-ghost {
    border: 1px solid var(--bg-line);
    background: #fff;
    color: #344256;
}

.bg-btn-ghost:hover,
.bg-btn-ghost:focus {
    color: var(--bg-brand-700);
    border-color: rgba(79,70,229,.36);
    background: var(--bg-brand-050);
}

.bg-nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--bg-line);
    border-radius: 12px;
    background: #fff;
    color: #263244;
    font-size: 20px;
    line-height: 42px;
    text-align: center;
}

/* =============================== Hero =============================== */
.bg-hero {
    position: relative;
    overflow: hidden;
    padding: 86px 0 104px;
    background: radial-gradient(circle at 76% 22%, rgba(34,211,238,.30) 0, transparent 34%), radial-gradient(circle at 10% 82%, rgba(124,58,237,.34) 0, transparent 42%), linear-gradient(135deg,#050816 0%,#0B1024 52%,#172554 100%);
    color: #fff;
    isolation: isolate;
}

.bg-hero::before,
.bg-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.bg-hero::before {
    top: -220px;
    right: -180px;
    width: 720px;
    height: 720px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(34,211,238,.42) 0%, rgba(34,211,238,0) 66%);
}

.bg-hero::after {
    bottom: -280px;
    left: -200px;
    width: 780px;
    height: 780px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124,58,237,.34) 0%, rgba(124,58,237,0) 68%);
}

.bg-hero-grid {
    display: grid;
    grid-template-columns: minmax(0,1.06fr) minmax(0,.94fr);
    align-items: center;
    gap: 62px;
}

.bg-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 24px;
    padding: 8px 16px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.88);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1;
}

.bg-hero-badge i {
    color: #8ce99a;
}

.bg-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(36px, 5.3vw, 61px);
    font-weight: 900;
    line-height: 1.09;
    letter-spacing: -.055em;
}

.bg-hero h1 em {
    display: block;
    font-style: normal;
    background: linear-gradient(92deg, #fff 0%, #9fc0ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bg-hero-lead {
    max-width: 610px;
    margin: 26px 0 0;
    color: rgba(255,255,255,.78);
    font-size: 18px;
    line-height: 1.9;
}

.bg-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 36px;
}

.bg-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 34px 0 0;
    padding: 0;
    list-style: none;
}

.bg-hero-tags li {
    padding: 7px 14px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.78);
    font-size: 13px;
    font-weight: 600;
}

/* Hero visual dashboard */
.bg-hero-panel {
    position: relative;
    padding: 28px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 28px;
    background: linear-gradient(155deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 100%);
    box-shadow: 0 32px 80px rgba(0,0,0,.22);
    backdrop-filter: blur(18px);
}

.bg-hero-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.bg-hero-panel-title {
    margin: 0;
    color: #fff;
    font-size: 18px;
    font-weight: 800;
}

.bg-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(255,255,255,.70);
    font-size: 12px;
    font-weight: 700;
}

.bg-live::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 4px rgba(74,222,128,.20);
}

.bg-flow {
    display: grid;
    gap: 12px;
}

.bg-flow-item {
    display: grid;
    grid-template-columns: 38px minmax(0,1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 16px;
    background: rgba(255,255,255,.07);
}

.bg-flow-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: rgba(255,255,255,.14);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

.bg-flow-body strong {
    display: block;
    color: #fff;
    font-size: 15px;
    font-weight: 750;
}

.bg-flow-body span {
    display: block;
    margin-top: 3px;
    color: rgba(255,255,255,.62);
    font-size: 12px;
}

.bg-flow-state {
    color: #a7f3d0;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.bg-panel-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.14);
    color: rgba(255,255,255,.68);
    font-size: 12px;
}

.bg-panel-foot strong {
    color: #fff;
}

/* ============================ Value strip ============================ */
.bg-value-strip {
    position: relative;
    z-index: 2;
    margin: -54px auto 0;
}

.bg-value-card {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    overflow: hidden;
    border: 1px solid rgba(223,229,239,.9);
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--shadow-md);
}

.bg-value-item {
    padding: 30px 28px;
    border-right: 1px solid var(--bg-line);
}

.bg-value-item:last-child {
    border-right: 0;
}

.bg-value-item i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 16px;
    border-radius: 13px;
    background: var(--bg-brand-050);
    color: var(--bg-brand-600);
    font-size: 18px;
}

.bg-value-item strong {
    display: block;
    color: var(--bg-ink);
    font-size: 17px;
    font-weight: 800;
}

.bg-value-item p {
    margin: 7px 0 0;
    color: var(--bg-muted);
    font-size: 14px;
    line-height: 1.68;
}

/* =========================== CRM spotlight =========================== */
.bg-crm-layout {
    display: grid;
    grid-template-columns: minmax(0,.94fr) minmax(0,1.06fr);
    gap: 54px;
    align-items: start;
}

.bg-crm-copy .bg-section-eyebrow {
    background: rgba(34,211,238,.12);
}

.bg-crm-copy h2 {
    margin: 0;
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: -.04em;
}

.bg-crm-copy > p {
    margin: 20px 0 0;
    color: var(--bg-muted);
    font-size: 17px;
    line-height: 1.88;
}

.bg-crm-process {
    display: grid;
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap: 10px;
    margin: 34px 0 0;
}

.bg-crm-step {
    position: relative;
    padding: 17px 13px;
    border: 1px solid var(--bg-line);
    border-radius: 16px;
    background: #fff;
    text-align: center;
}

.bg-crm-step span {
    display: block;
    color: var(--bg-brand-600);
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 800;
}

.bg-crm-step strong {
    display: block;
    margin-top: 5px;
    color: var(--bg-ink);
    font-size: 14px;
    font-weight: 750;
}

.bg-crm-visual {
    padding: 30px;
    border: 1px solid var(--bg-line);
    border-radius: 26px;
    background: #fff;
    box-shadow: var(--shadow-md);
}

.bg-visual-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--bg-line);
}

.bg-visual-head h3 {
    margin: 0;
    color: var(--bg-ink);
    font-size: 20px;
    font-weight: 820;
}

.bg-pill {
    display: inline-flex;
    align-items: center;
    padding: 7px 13px;
    border-radius: 999px;
    background: var(--bg-brand-050);
    color: var(--bg-brand-700);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.bg-product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 14px;
    margin: 24px 0 0;
}

.bg-product-tile {
    padding: 19px;
    border: 1px solid var(--bg-line);
    border-radius: 18px;
    background: linear-gradient(155deg,#FFFFFF 0%,#F4F9FF 100%);
}

.bg-product-tile strong {
    display: block;
    color: var(--bg-ink);
    font-size: 16px;
    font-weight: 800;
}

.bg-product-tile p {
    margin: 7px 0 0;
    color: var(--bg-muted);
    font-size: 13.5px;
    line-height: 1.65;
}

.bg-product-tile.is-ai {
    border-color: rgba(2,132,199,.32);
    background: linear-gradient(155deg,#E6F6FF 0%,#FFFFFF 100%);
}

.bg-benchmark {
    margin: 25px 0 0;
    padding: 18px;
    border-left: 3px solid var(--bg-brand-600);
    border-radius: 0 16px 16px 0;
    background: var(--bg-brand-050);
    color: #43536a;
    font-size: 13.5px;
    line-height: 1.75;
}

.bg-benchmark strong {
    color: var(--bg-brand-800);
}

/* =========================== Services grid =========================== */
.bg-services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 24px;
}

.bg-service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 30px;
    border: 1px solid var(--bg-line);
    border-radius: 24px;
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.bg-service-card:hover {
    transform: translateY(-5px);
    border-color: rgba(2,132,199,.28);
    box-shadow: var(--shadow-md);
}

.bg-service-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.bg-service-index {
    color: #aeb8c7;
    font-family: Arial, sans-serif;
    font-size: 34px;
    font-weight: 900;
    line-height: .9;
}

.bg-service-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 20px;
    border-radius: 17px;
    background: var(--bg-brand-050);
    color: var(--bg-brand-600);
    font-size: 22px;
}

.bg-service-card h3 {
    margin: 0;
    color: var(--bg-ink);
    font-size: 20px;
    font-weight: 820;
    line-height: 1.35;
}

.bg-service-card > p {
    margin: 11px 0 20px;
    color: var(--bg-muted);
    font-size: 14.5px;
    line-height: 1.75;
}

.bg-service-list {
    margin: 0;
    padding: 0;
    color: #4b5768;
    font-size: 14px;
    line-height: 1.68;
    list-style: none;
}

.bg-service-list li {
    position: relative;
    padding: 6px 0 6px 20px;
}

.bg-service-list li::before {
    content: "";
    position: absolute;
    top: 14px;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bg-brand-600);
}

.bg-service-card.core {
    border-color: rgba(79,70,229,.36);
    background: linear-gradient(155deg, #F5FAFF 0%, #FFFFFF 62%);
    box-shadow: 0 20px 50px rgba(79,70,229,.16);
}

.bg-core-tag {
    position: absolute;
    top: 24px;
    right: 24px;
    padding: 6px 11px;
    border-radius: 999px;
    background: var(--bg-brand-600);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1;
}

/* ======================== Capability matrix ======================== */
.bg-capability-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap: 16px;
}

.bg-capability-card {
    padding: 25px 22px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 20px;
    background: rgba(255,255,255,.07);
}

.bg-capability-card i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 18px;
    border-radius: 14px;
    background: rgba(255,255,255,.13);
    color: #fff;
}

.bg-capability-card h3 {
    margin: 0;
    color: #fff;
    font-size: 17px;
    font-weight: 800;
}

.bg-capability-card p {
    margin: 9px 0 0;
    color: rgba(255,255,255,.68);
    font-size: 13.5px;
    line-height: 1.68;
}

.bg-capability-note {
    max-width: 880px;
    margin: 42px auto 0;
    padding: 0;
    color: rgba(255,255,255,.68);
    text-align: center;
    font-size: 15px;
    line-height: 1.8;
}

.bg-capability-note strong {
    color: #fff;
}

/* ============================== Process ============================== */
.bg-process {
    display: grid;
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap: 18px;
}

.bg-process-step {
    position: relative;
    padding: 28px 22px;
    border: 1px solid var(--bg-line);
    border-radius: 20px;
    background: #fff;
    text-align: center;
}

.bg-process-step:not(:last-child)::after {
    content: "\f105";
    position: absolute;
    top: 50%;
    right: -19px;
    z-index: 1;
    width: 20px;
    height: 28px;
    color: #a6b1c1;
    font-family: FontAwesome;
    font-size: 20px;
    line-height: 28px;
    transform: translateY(-50%);
}

.bg-process-step i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 15px;
    border-radius: 15px;
    background: var(--bg-brand-050);
    color: var(--bg-brand-600);
    font-size: 18px;
}

.bg-process-step span {
    display: block;
    color: var(--bg-brand-600);
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 800;
}

.bg-process-step h3 {
    margin: 5px 0 8px;
    color: var(--bg-ink);
    font-size: 17px;
    font-weight: 820;
}

.bg-process-step p {
    margin: 0;
    color: var(--bg-muted);
    font-size: 13px;
    line-height: 1.62;
}

.bg-mode-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 18px;
    margin-bottom: 48px;
}

.bg-mode-card {
    padding: 26px;
    border: 1px solid var(--bg-line);
    border-radius: 20px;
    background: #fff;
}

.bg-mode-card strong {
    display: block;
    margin-bottom: 8px;
    color: var(--bg-brand-700);
    font-size: 17px;
    font-weight: 820;
}

.bg-mode-card p {
    margin: 0;
    color: var(--bg-muted);
    font-size: 14.5px;
    line-height: 1.75;
}

/* ============================== Industry ============================= */
.bg-industry-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 22px;
}

.bg-industry-card {
    padding: 28px;
    border: 1px solid var(--bg-line);
    border-radius: 22px;
    background: #fff;
    transition: transform .2s ease, box-shadow .2s ease;
}

.bg-industry-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.bg-industry-card h3 {
    margin: 0 0 15px;
    color: var(--bg-ink);
    font-size: 19px;
    font-weight: 820;
}

.bg-industry-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bg-industry-card li {
    position: relative;
    padding: 7px 0 7px 22px;
    color: #4b5768;
    font-size: 14px;
    line-height: 1.65;
}

.bg-industry-card li::before {
    content: "\f00c";
    position: absolute;
    top: 8px;
    left: 0;
    color: var(--bg-brand-600);
    font-family: FontAwesome;
    font-size: 12px;
}

.bg-industry-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 42px 0 0;
    padding: 0;
    list-style: none;
}

.bg-industry-tags li {
    padding: 8px 15px;
    border: 1px solid var(--bg-line);
    border-radius: 999px;
    background: #fff;
    color: #4c596a;
    font-size: 13px;
    font-weight: 650;
}

/* =============================== Why us ============================== */
.bg-why-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 20px;
}

.bg-why-card {
    padding: 26px;
    border: 1px solid var(--bg-line);
    border-radius: 20px;
    background: #fff;
}

.bg-why-card i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 16px;
    border-radius: 14px;
    background: var(--bg-brand-050);
    color: var(--bg-brand-600);
}

.bg-why-card h3 {
    margin: 0 0 9px;
    color: var(--bg-ink);
    font-size: 17px;
    font-weight: 800;
}

.bg-why-card p {
    margin: 0;
    color: var(--bg-muted);
    font-size: 14px;
    line-height: 1.72;
}

.bg-method-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 18px;
    margin-top: 24px;
}

.bg-method-item {
    padding: 20px;
    border-radius: 17px;
    background: var(--bg-brand-050);
}

.bg-method-item strong {
    display: block;
    color: var(--bg-brand-800);
    font-size: 15px;
}

.bg-method-item p {
    margin: 6px 0 0;
    color: var(--bg-muted);
    font-size: 13.5px;
    line-height: 1.65;
}

/* =============================== Insight ============================= */
.bg-insight-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 22px;
}

.bg-insight-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 230px;
    padding: 28px;
    border: 1px solid var(--bg-line);
    border-radius: 22px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

.bg-insight-card:hover,
.bg-insight-card:focus {
    color: inherit;
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.bg-insight-label {
    margin-bottom: 20px;
    color: var(--bg-brand-600);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
}

.bg-insight-card h3 {
    margin: 0;
    color: var(--bg-ink);
    font-size: 20px;
    font-weight: 810;
    line-height: 1.42;
}

.bg-insight-card p {
    margin: 12px 0 26px;
    color: var(--bg-muted);
    font-size: 14px;
    line-height: 1.7;
}

.bg-insight-more {
    color: var(--bg-brand-600);
    font-size: 14px;
    font-weight: 750;
}

/* =============================== Contact ============================= */
.bg-contact-layout {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,.78fr);
    gap: 34px;
}

.bg-contact-main {
    padding: 38px;
    border: 1px solid var(--bg-line);
    border-radius: 28px;
    background: #fff;
    box-shadow: var(--shadow-md);
}

.bg-contact-main h2 {
    margin: 0 0 12px;
    font-size: 34px;
    font-weight: 850;
    line-height: 1.25;
}

.bg-contact-main > p {
    margin: 0;
    color: var(--bg-muted);
}

.bg-contact-form {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 16px;
    margin-top: 30px;
}

.bg-contact-form .full {
    grid-column: 1 / -1;
}

.bg-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.bg-field.full {
    grid-column: 1 / -1;
}

.bg-field label {
    color: #39465a;
    font-size: 13px;
    font-weight: 750;
}

.bg-field input,
.bg-field select,
.bg-field textarea {
    width: 100%;
    padding: 13px 15px;
    border: 1px solid var(--bg-line);
    border-radius: 12px;
    background: #fff;
    color: var(--bg-ink);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.5;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.bg-field textarea {
    min-height: 128px;
    resize: vertical;
}

.bg-field input:focus,
.bg-field select:focus,
.bg-field textarea:focus {
    border-color: rgba(34,211,238,.55);
    box-shadow: 0 0 0 4px rgba(79,70,229,.14);
}

.bg-contact-aside {
    display: grid;
    gap: 18px;
    align-content: start;
}

.bg-contact-card {
    padding: 27px;
    border: 1px solid var(--bg-line);
    border-radius: 22px;
    background: #fff;
}

.bg-contact-card h3 {
    margin: 0 0 14px;
    color: var(--bg-ink);
    font-size: 18px;
    font-weight: 820;
}

.bg-contact-line {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 0;
    color: #4b5768;
    font-size: 14.5px;
    line-height: 1.65;
}

.bg-contact-line i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: var(--bg-brand-050);
    color: var(--bg-brand-600);
}

.bg-contact-card.is-primary {
    border: 0;
    background: linear-gradient(145deg,#050816 0%,#0284C7 100%);
    color: #fff;
}

.bg-contact-card.is-primary h3,
.bg-contact-card.is-primary .bg-contact-line {
    color: #fff;
}

.bg-contact-card.is-primary .bg-contact-line i {
    background: rgba(255,255,255,.14);
    color: #fff;
}

.bg-contact-card.is-primary .bg-contact-line a {
    color: #fff;
}

/* =============================== Footer ============================== */
.bg-footer {
    background: #070C1D;
    color: rgba(255,255,255,.64);
    padding: 72px 0 0;
}

.bg-footer-grid {
    display: grid;
    grid-template-columns: 1.35fr .8fr .8fr 1fr;
    gap: 42px;
    padding-bottom: 52px;
}

.bg-footer-brand .bg-brand {
    color: #fff;
}

.bg-footer-brand p {
    margin: 22px 0 0;
    font-size: 14px;
    line-height: 1.85;
}

.bg-footer h4 {
    margin: 0 0 20px;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
}

.bg-footer-list,
.bg-footer-contact {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    line-height: 1.8;
}

.bg-footer-list li + li {
    margin-top: 10px;
}

.bg-footer-list a,
.bg-footer-contact a {
    color: rgba(255,255,255,.64);
    text-decoration: none;
}

.bg-footer-list a:hover,
.bg-footer-contact a:hover {
    color: #fff;
}

.bg-footer-contact li {
    display: flex;
    gap: 10px;
}

.bg-footer-contact i {
    color: #8fb0ff;
}

.bg-footer-bottom {
    padding: 25px 0;
    border-top: 1px solid rgba(255,255,255,.10);
    background: #040814;
}

.bg-footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    color: rgba(255,255,255,.48);
    font-size: 13px;
}

.bg-footer-bottom a {
    color: rgba(255,255,255,.62);
}

.bg-footer-bottom a:hover {
    color: #fff;
}

/* ============================ Content pages ========================== */
.bg-page-hero {
    padding: 68px 0 54px;
    border-bottom: 1px solid var(--bg-line);
    background: linear-gradient(135deg,#F8FBFF 0%,#E8F2FF 100%);
}

.bg-page-hero h1 {
    margin: 0;
    color: var(--bg-ink);
    font-size: clamp(29px,4vw,44px);
    font-weight: 850;
    line-height: 1.2;
}

.bg-page-hero p {
    margin: 14px 0 0;
    color: var(--bg-muted);
    font-size: 16px;
}

.bg-content-layout {
    display: grid;
    grid-template-columns: minmax(0,1fr) 330px;
    gap: 32px;
    align-items: start;
    padding: 48px 0 88px;
}

.bg-content-main,
.bg-side-card {
    border: 1px solid var(--bg-line);
    border-radius: 24px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.bg-content-main {
    padding: 40px;
}

.bg-article-title {
    margin: 0;
    color: var(--bg-ink);
    font-size: clamp(25px,3vw,35px);
    font-weight: 830;
    line-height: 1.28;
}

.bg-article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 18px 0 0;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--bg-line);
    color: var(--bg-muted);
    font-size: 13.5px;
}

.bg-article-meta i {
    margin-right: 6px;
    color: var(--bg-brand-600);
}

#article_content {
    padding-top: 28px;
    color: #253044;
    font-size: 16px;
    line-height: 1.9;
}

#article_content h2,
#article_content h3 {
    color: var(--bg-ink);
    font-weight: 800;
}

#article_content h2 {
    margin: 42px 0 18px;
    font-size: 26px;
    line-height: 1.35;
}

#article_content h3 {
    margin: 32px 0 14px;
    font-size: 20px;
}

#article_content p {
    margin: 0 0 18px;
}

#article_content ul,
#article_content ol {
    margin: 0 0 18px;
    padding-left: 24px;
}

#article_content li {
    margin-bottom: 8px;
}

#article_content a {
    color: var(--bg-brand-600);
}

#article_content blockquote {
    margin: 20px 0;
    padding: 16px 20px;
    border-left: 3px solid var(--bg-brand-600);
    border-radius: 0 14px 14px 0;
    background: var(--bg-brand-050);
    color: #38465b;
}

#article_content img {
    height: auto !important;
    max-width: 100%;
    border-radius: 12px;
    margin: 20px 0;
}

.bg-article-list {
    display: grid;
    gap: 18px;
}

.bg-article-row {
    padding: 27px;
    border: 1px solid var(--bg-line);
    border-radius: 20px;
    background: #fff;
    transition: transform .2s ease, box-shadow .2s ease;
}

.bg-article-row:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.bg-article-row h2 {
    margin: 0;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.45;
}

.bg-article-row h2 a {
    color: var(--bg-ink);
    text-decoration: none;
}

.bg-article-row h2 a:hover {
    color: var(--bg-brand-600);
}

.bg-article-row .bg-article-meta {
    margin: 12px 0 14px;
    padding: 0;
    border: 0;
}

.bg-article-row p {
    margin: 0;
    color: var(--bg-muted);
    font-size: 14.5px;
    line-height: 1.75;
}

.bg-read-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    color: var(--bg-brand-600);
    font-size: 14px;
    font-weight: 750;
    text-decoration: none;
}

.bg-side-card {
    overflow: hidden;
    margin-bottom: 18px;
    padding: 25px;
}

.bg-side-card h3 {
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--bg-brand-600);
    color: var(--bg-ink);
    font-size: 17px;
    font-weight: 820;
}

.bg-side-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bg-side-list li {
    display: grid;
    grid-template-columns: 26px minmax(0,1fr);
    gap: 10px;
    align-items: start;
    padding: 11px 0;
    border-bottom: 1px solid #edf0f6;
}

.bg-side-list li:last-child {
    border-bottom: 0;
}

.bg-side-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    border-radius: 7px;
    background: #edf1f7;
    color: #657081;
    font-size: 12px;
    font-weight: 800;
}

.bg-side-list li:nth-child(-n+3) .bg-side-rank {
    background: var(--bg-brand-600);
    color: #fff;
}

.bg-side-list a {
    color: #414d5f;
    font-size: 14px;
    line-height: 1.58;
    text-decoration: none;
}

.bg-side-list a:hover {
    color: var(--bg-brand-600);
}

.bg-side-cta {
    border: 0;
    background: linear-gradient(145deg,#050816,#0284C7);
    color: #fff;
}

.bg-side-cta h3 {
    color: #fff;
    border-bottom-color: rgba(255,255,255,.25);
}

.bg-side-cta p {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.7;
}

.bg-side-cta i {
    margin-right: 7px;
}

.bg-side-cta .bg-btn {
    width: 100%;
    margin-top: 14px;
}

.bg-pagination {
    margin: 34px 0 0;
}

.bg-pagination > li > a {
    border: 1px solid var(--bg-line);
    border-radius: 9px !important;
    color: #46536a;
    margin: 0 3px;
}

.bg-pagination > .active > a,
.bg-pagination > li > a:hover {
    border-color: var(--bg-brand-600);
    background: var(--bg-brand-600);
    color: #fff;
}

.bg-page-content {
    padding: 40px;
    border: 1px solid var(--bg-line);
    border-radius: 24px;
    background: #fff;
}

/* ========================== Reveal animation ========================= */
.bg-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .65s ease, transform .65s ease;
}

.bg-reveal.bg-in {
    opacity: 1;
    transform: translateY(0);
}

/* ============================== Responsive ============================ */
@media (max-width: 1120px) {
    .bg-capability-grid { grid-template-columns: repeat(3,1fr); }
    .bg-why-grid { grid-template-columns: repeat(2,1fr); }
    .bg-method-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 1024px) {
    .bg-hero { padding: 70px 0 90px; }
    .bg-hero-grid { grid-template-columns: 1fr; gap: 42px; }
    .bg-hero-panel { max-width: 640px; }
    .bg-crm-layout { grid-template-columns: 1fr; }
    .bg-services-grid { grid-template-columns: repeat(2,1fr); }
    .bg-content-layout { grid-template-columns: 1fr; }
    .bg-contact-layout { grid-template-columns: 1fr; }
    .bg-crm-process,
    .bg-process { grid-template-columns: repeat(3,1fr); }
    .bg-process-step::after { display: none; }
    .bg-footer-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 900px) {
    .bg-nav-menu {
        position: absolute;
        top: 76px;
        right: 24px;
        left: 24px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 5px;
        padding: 14px;
        border: 1px solid var(--bg-line);
        border-radius: 18px;
        background: #fff;
        box-shadow: var(--shadow-md);
    }

    .bg-nav-menu.open { display: flex; }
    .bg-nav-menu > li > a { justify-content: center; height: 46px; }
    .bg-nav-actions .bg-phone-link { display: none; }
    .bg-nav-toggle { display: block; }

    .bg-value-card { grid-template-columns: repeat(2,1fr); }
    .bg-value-item:nth-child(2n) { border-right: 0; }
    .bg-value-item:nth-child(-n+2) { border-bottom: 1px solid var(--bg-line); }
    .bg-industry-grid,
    .bg-insight-grid,
    .bg-mode-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    body.body-white,
    body.xiaoshouyi-theme,
    body.bg-theme { padding-top: 68px; }
    .bg-section { padding: 68px 0; }
    .bg-container { padding: 0 18px; }
    .bg-navbar,
    .bg-nav-inner { min-height: 68px; }
    .bg-nav-menu { top: 68px; right: 18px; left: 18px; }
    .bg-brand-copy strong { font-size: 17px; }
    .bg-brand-copy span { display: none; }
    .bg-hero { padding: 54px 0 82px; text-align: left; }
    .bg-hero h1 { font-size: 35px; }
    .bg-hero-lead { font-size: 16px; }
    .bg-hero-actions .bg-btn { width: 100%; }
    .bg-value-card,
    .bg-services-grid,
    .bg-capability-grid,
    .bg-crm-process,
    .bg-process,
    .bg-product-grid,
    .bg-why-grid,
    .bg-method-grid { grid-template-columns: 1fr; }
    .bg-value-item { border-right: 0 !important; border-bottom: 1px solid var(--bg-line); }
    .bg-value-item:last-child { border-bottom: 0; }
    .bg-value-strip { margin-top: -38px; }
    .bg-contact-main,
    .bg-content-main,
    .bg-page-content { padding: 24px; }
    .bg-contact-form { grid-template-columns: 1fr; }
    .bg-footer-grid { grid-template-columns: 1fr; gap: 34px; }
    .bg-footer-bottom-inner { flex-direction: column; text-align: center; }
    .bg-service-card,
    .bg-crm-visual { padding: 22px; }
}

@media (max-width: 420px) {
    .bg-hero h1 { font-size: 31px; }
    .bg-section-title { font-size: 29px; }
    .bg-flow-item { grid-template-columns: 34px minmax(0,1fr); }
    .bg-flow-state { grid-column: 2; justify-self: start; }
}

@media print {
    .bg-navbar,
    .bg-footer,
    .bg-nav-actions,
    #backtotop { display: none !important; }
    body { padding: 0 !important; }
}

/* =====================================================================
   AI Technology polish · midnight / cyan / violet intelligent interface
   ===================================================================== */
.bg-hero::before {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
    border-radius: 0;
    background:
        radial-gradient(circle at 78% 20%, rgba(34,211,238,.24) 0, transparent 34%),
        linear-gradient(rgba(148,197,255,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148,197,255,.055) 1px, transparent 1px);
    background-size: auto, 62px 62px, 62px 62px;
    opacity: 1;
}

.bg-hero-panel {
    border-color: rgba(148,222,255,.28);
    background: linear-gradient(155deg, rgba(255,255,255,.17) 0%, rgba(10,18,45,.28) 100%);
    box-shadow: 0 30px 90px rgba(2,8,23,.42), inset 0 1px 0 rgba(255,255,255,.16);
}

.bg-flow-item {
    border-color: rgba(148,222,255,.18);
    background: linear-gradient(120deg, rgba(255,255,255,.10), rgba(9,15,38,.18));
}

.bg-flow-num {
    background: linear-gradient(135deg, rgba(34,211,238,.28), rgba(124,58,237,.24));
    box-shadow: inset 0 0 0 1px rgba(148,222,255,.22);
}

.bg-section-dark {
    position: relative;
    isolation: isolate;
}

.bg-section-dark::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(rgba(148,197,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148,197,255,.045) 1px, transparent 1px);
    background-size: 64px 64px;
    pointer-events: none;
}

.bg-section-dark > .bg-container {
    position: relative;
    z-index: 1;
}

.bg-service-card {
    background: linear-gradient(165deg, #FFFFFF 0%, #F7FBFF 100%);
}

.bg-service-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(125deg, rgba(34,211,238,.14), rgba(124,58,237,.08) 46%, transparent 72%);
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}

.bg-service-card:hover::after {
    opacity: 1;
}

.bg-service-card.core {
    border-color: rgba(2,132,199,.28);
    background: linear-gradient(155deg, #F3FAFF 0%, #FFFFFF 64%);
    box-shadow: 0 20px 52px rgba(2,132,199,.14);
}

.bg-core-tag {
    background: linear-gradient(135deg, #0284C7, #4F46E5);
    box-shadow: 0 8px 20px rgba(2,132,199,.24);
}

.bg-value-card,
.bg-crm-visual,
.bg-contact-main,
.bg-content-main,
.bg-page-content {
    border-color: rgba(17,35,73,.09);
}

.bg-value-item i,
.bg-service-icon,
.bg-process-step i,
.bg-why-card i,
.bg-contact-line i {
    background: linear-gradient(150deg, #EAF8FF, #EEF2FF);
    color: #0369A1;
}

.bg-product-tile.is-ai {
    border-color: rgba(34,211,238,.38);
    background: linear-gradient(155deg,#E9FAFF 0%,#FFFFFF 100%);
}

.bg-side-cta {
    background: linear-gradient(145deg,#050816,#0284C7);
}

.bg-btn-primary {
    background: linear-gradient(135deg, #0284C7 0%, #4F46E5 100%);
}

.bg-footer {
    background: #070C1D;
}

.bg-footer-bottom {
    background: #040814;
}

/* =====================================================================
   Warm Copper AI Theme
   Palette roles:
   Primary: warm copper #C06A43 / deep copper #A75A39
   Auxiliary: light gold #E6B77D / beige #F8E9D8
   Neutral: ink #2D2823 / gray #726A61 / paper #F7F3EE
   Accent: vibrant orange #F07822
   ===================================================================== */
:root {
    --bg-brand-900: #241D18;
    --bg-brand-800: #332721;
    --bg-brand-700: #A75A39;
    --bg-brand-600: #C06A43;
    --bg-brand-500: #E08A54;
    --bg-brand-400: #F0B894;
    --bg-brand-300: #F4CBA6;
    --bg-brand-100: #F8E9D8;
    --bg-brand-050: #FBF5EC;
    --bg-accent: #F07822;
    --bg-gold: #E6B77D;
    --bg-ink: #2D2823;
    --bg-body: #F7F3EE;
    --bg-muted: #726A61;
    --bg-light: #FBF8F3;
    --bg-line: #E4DBD0;
    --shadow-sm: 0 2px 10px rgba(45, 40, 35, .05);
    --shadow-md: 0 16px 45px rgba(45, 40, 35, .10);
    --shadow-brand: 0 20px 45px rgba(192, 106, 67, .24);
}

::selection {
    background: rgba(230, 183, 125, .36);
    color: #3A2C22;
}

/* Global surface */
body.body-white,
body.xiaoshouyi-theme,
body.bg-theme {
    background: var(--bg-body);
    color: var(--bg-ink);
}

/* Navigation */
.bg-navbar {
    border-bottom: 1px solid rgba(228, 219, 208, .92);
    box-shadow: 0 1px 24px rgba(45, 40, 35, .04);
}

.bg-navbar.bg-scrolled {
    box-shadow: 0 8px 32px rgba(45, 40, 35, .09);
}

.bg-nav-menu > li > a {
    color: #4A443D;
}

.bg-nav-menu > li > a:hover,
.bg-nav-menu > li > a:focus,
.bg-nav-menu > li.active > a {
    color: #A75A39;
    background: #FBF5EC;
}

.bg-phone-link { color: #4A443D; }
.bg-phone-link:hover { color: #A75A39; }
.bg-phone-link i { color: #C06A43; }

/* Buttons */
.bg-btn-primary {
    background: linear-gradient(135deg, #C06A43 0%, #A75A39 100%);
    color: #fff;
    box-shadow: 0 18px 40px rgba(192, 106, 67, .26);
}

.bg-btn-primary:hover,
.bg-btn-primary:focus {
    background: linear-gradient(135deg, #D0764B 0%, #A75A39 100%);
    color: #fff;
    box-shadow: 0 24px 52px rgba(192, 106, 67, .30);
}

.bg-btn-outline {
    border-color: rgba(255,255,255,.55);
    color: #fff;
}

.bg-btn-ghost {
    border-color: #E4DBD0;
    background: #fff;
    color: #4A443D;
}

.bg-btn-ghost:hover,
.bg-btn-ghost:focus {
    color: #A75A39;
    border-color: rgba(192,106,67,.32);
    background: #FBF5EC;
}

/* Eyebrow / labels */
.bg-section-eyebrow {
    border-color: rgba(192,106,67,.22);
    background: rgba(248,233,216,.72);
    color: #A75A39;
}

.bg-section-dark .bg-section-eyebrow {
    border-color: rgba(240,184,148,.35);
    background: rgba(240,184,148,.14);
    color: #F7D9AE;
}

.bg-pill {
    background: #F8E9D8;
    color: #A75A39;
}

/* Hero: warm graphite + copper/gold AI glow */
.bg-hero {
    background:
        radial-gradient(circle at 78% 18%, rgba(240,184,148,.28) 0, transparent 38%),
        radial-gradient(circle at 12% 80%, rgba(230,183,125,.20) 0, transparent 44%),
        linear-gradient(135deg, #241D18 0%, #332721 56%, #57392A 100%);
}

.bg-hero::before {
    background:
        radial-gradient(circle at 78% 20%, rgba(240,184,148,.22) 0, transparent 34%),
        linear-gradient(rgba(248,233,216,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(248,233,216,.055) 1px, transparent 1px);
    background-size: auto, 62px 62px, 62px 62px;
}

.bg-hero::after {
    background: radial-gradient(circle, rgba(240,120,34,.22) 0, rgba(240,120,34,0) 68%);
}

.bg-hero h1 em {
    background: linear-gradient(92deg, #FFFFFF 0%, #F4CBA6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bg-hero-badge {
    border-color: rgba(240,184,148,.30);
    background: rgba(240,184,148,.12);
}

.bg-hero-panel {
    border-color: rgba(240,184,148,.28);
    background: linear-gradient(155deg, rgba(255,246,235,.17) 0%, rgba(36,29,24,.30) 100%);
    box-shadow: 0 30px 90px rgba(25,18,14,.42), inset 0 1px 0 rgba(255,246,235,.18);
}

.bg-flow-item {
    border-color: rgba(240,184,148,.18);
    background: linear-gradient(120deg, rgba(255,246,235,.10), rgba(34,25,20,.18));
}

.bg-flow-num {
    background: linear-gradient(135deg, rgba(240,184,148,.30), rgba(240,120,34,.22));
    box-shadow: inset 0 0 0 1px rgba(240,184,148,.24);
}

.bg-flow-state { color: #F7C88C; }

/* Value strip */
.bg-value-card {
    border-color: rgba(45,40,35,.08);
    background: #fff;
}

.bg-value-item i,
.bg-service-icon,
.bg-process-step i,
.bg-why-card i,
.bg-contact-line i {
    background: linear-gradient(150deg, #F8E9D8, #F6DCC0);
    color: #A75A39;
}

/* CRM section */
.bg-crm-step {
    border-color: #E4DBD0;
    background: #fff;
}

.bg-crm-step span { color: #C06A43; }

.bg-benchmark {
    border-left-color: #C06A43;
    background: #FBF5EC;
    color: #5B5047;
}

.bg-benchmark strong { color: #8E4C30; }

.bg-product-tile {
    border-color: #E4DBD0;
    background: linear-gradient(155deg, #FFFFFF 0%, #FBF5EC 100%);
}

.bg-product-tile.is-ai {
    border-color: rgba(230,183,125,.52);
    background: linear-gradient(155deg, #F8E9D8 0%, #FFFFFF 100%);
}

/* Six services */
.bg-service-card {
    border-color: rgba(45,40,35,.08);
    background: linear-gradient(165deg, #FFFFFF 0%, #FBF8F3 100%);
}

.bg-service-card::after {
    background: linear-gradient(125deg, rgba(240,184,148,.20), rgba(240,120,34,.10) 48%, transparent 74%);
}

.bg-service-card.core {
    border-color: rgba(192,106,67,.30);
    background: linear-gradient(155deg, #FBF5EC 0%, #FFFFFF 64%);
    box-shadow: 0 20px 52px rgba(192,106,67,.14);
}

.bg-core-tag {
    background: linear-gradient(135deg, #C06A43, #F07822);
    box-shadow: 0 8px 20px rgba(192,106,67,.26);
}

/* Dark capability matrix */
.bg-section-dark {
    background:
        radial-gradient(circle at 76% 20%, rgba(240,184,148,.18) 0, transparent 36%),
        linear-gradient(135deg, #241D18 0%, #332721 62%, #57392A 100%);
}

.bg-section-dark::before {
    background:
        linear-gradient(rgba(248,233,216,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(248,233,216,.045) 1px, transparent 1px);
    background-size: 64px 64px;
}

.bg-capability-card {
    border-color: rgba(240,184,148,.18);
    background: rgba(255,246,235,.07);
}

.bg-capability-card i {
    background: rgba(240,184,148,.15);
}

/* Industries / process / why */
.bg-industry-card,
.bg-mode-card,
.bg-why-card,
.bg-contact-card,
.bg-side-card {
    border-color: rgba(45,40,35,.08);
    background: #fff;
}

.bg-method-item { background: #F8E9D8; }
.bg-method-item strong { color: #8E4C30; }

/* Contact */
.bg-contact-main {
    border-color: rgba(45,40,35,.08);
    background: #fff;
}

.bg-contact-card.is-primary {
    background: linear-gradient(145deg, #241D18 0%, #A75A39 100%);
}

.bg-side-cta {
    background: linear-gradient(145deg, #241D18, #C06A43);
}

/* Footer */
.bg-footer { background: #241D18; }
.bg-footer-bottom { background: #1B1613; }
.bg-footer-contact i { color: #F0B894; }

/* Content pages */
.bg-page-hero {
    background: linear-gradient(135deg, #FBF8F3 0%, #F5E6D5 100%);
}

.bg-content-main,
.bg-page-content {
    border-color: rgba(45,40,35,.08);
}

#article_content blockquote {
    border-left-color: #C06A43;
    background: #FBF5EC;
}

.bg-side-list li { border-bottom-color: #F0E9DF; }
.bg-side-rank { background: #F0E9DF; color: #756A5F; }
.bg-side-list li:nth-child(-n+3) .bg-side-rank {
    background: #C06A43;
    color: #fff;
}

.bg-pagination > li > a {
    border-color: #E4DBD0;
    color: #4A443D;
}

.bg-pagination > .active > a,
.bg-pagination > li > a:hover {
    border-color: #C06A43;
    background: #C06A43;
    color: #fff;
}

/* Live indicator */
.bg-live::before {
    background: #F0B894;
    box-shadow: 0 0 0 4px rgba(240,184,148,.22);
}

/* =====================================================================
   AnswerBit-inspired UI theme
   Extracted from https://answerbit.qq.com/zh-CN
   Core semantic colors:
   Background #FAFAFA / Surface #FFFFFF
   Foreground #020618 / Primary #0F172B
   Border #E2E8F0 / Muted text #62748E
   AI indigo #6366F1 / AI violet #8B5CF6
   ===================================================================== */
:root {
    --bg-brand-950: #020618;
    --bg-brand-900: #0F172B;
    --bg-brand-800: #1D293D;
    --bg-brand-700: #4F46E5;
    --bg-brand-600: #6366F1;
    --bg-brand-500: #8B5CF6;
    --bg-brand-400: #A5B4FC;
    --bg-brand-300: #C7D2FE;
    --bg-brand-200: #E0E7FF;
    --bg-brand-100: #EEF2FF;
    --bg-brand-050: #F8FAFC;
    --bg-accent: #6366F1;
    --bg-gold: #C7D2FE;
    --bg-ink: #020618;
    --bg-body: #FAFAFA;
    --bg-muted: #62748E;
    --bg-light: #F8FAFC;
    --bg-line: #E2E8F0;
    --shadow-sm: 0 1px 3px rgba(2, 6, 24, .04), 0 1px 2px rgba(2, 6, 24, .03);
    --shadow-md: 0 12px 36px rgba(2, 6, 24, .08);
    --shadow-brand: 0 12px 30px rgba(15, 23, 43, .14);
}

::selection {
    background: rgba(99,102,241,.16);
    color: #020618;
}

/* ============================ Global surfaces ============================ */
body.body-white,
body.xiaoshouyi-theme,
body.bg-theme {
    background: #FAFAFA;
    color: #020618;
}

.bg-section { background: #fff; }
.bg-section-alt { background: #fff; }
.bg-section-soft { background: #FAFAFA; }

/* ============================== Navigation ============================== */
.bg-navbar {
    border-bottom: 1px solid rgba(226,232,240,.92);
    background: rgba(255,255,255,.96);
    box-shadow: 0 1px 2px rgba(2,6,24,.03);
}

.bg-navbar.bg-scrolled {
    border-bottom-color: #E2E8F0;
    box-shadow: 0 8px 28px rgba(2,6,24,.06);
}

.bg-nav-menu > li > a {
    color: #364153;
}

.bg-nav-menu > li > a:hover,
.bg-nav-menu > li > a:focus,
.bg-nav-menu > li.active > a {
    color: #0F172B;
    background: #F1F5F9;
}

.bg-phone-link { color: #364153; }
.bg-phone-link:hover { color: #0F172B; }
.bg-phone-link i { color: #6366F1; }

.bg-btn-primary {
    background: #0F172B;
    color: #fff;
    box-shadow: 0 8px 20px rgba(15,23,43,.14);
}

.bg-btn-primary:hover,
.bg-btn-primary:focus {
    background: #020618;
    color: #fff;
    box-shadow: 0 14px 32px rgba(2,6,24,.20);
}

.bg-btn-outline {
    border-color: #CBD5E1;
    background: rgba(255,255,255,.86);
    color: #0F172B;
    box-shadow: none;
}

.bg-btn-outline:hover,
.bg-btn-outline:focus {
    border-color: #94A3B8;
    background: #fff;
    color: #020618;
}

.bg-btn-ghost {
    border-color: #E2E8F0;
    background: #fff;
    color: #364153;
}

.bg-btn-ghost:hover,
.bg-btn-ghost:focus {
    border-color: #C7D2FE;
    background: #F8FAFC;
    color: #0F172B;
}

/* ============================ Section labels ============================ */
.bg-section-eyebrow {
    border-color: rgba(99,102,241,.18);
    background: #EEF2FF;
    color: #4F46E5;
}

.bg-pill {
    background: #EEF2FF;
    color: #4F46E5;
    border: 1px solid rgba(99,102,241,.12);
}

/* ============================ Light AI hero ============================= */
.bg-hero {
    background:
        radial-gradient(80% 60% at 50% -20%, rgba(99,102,241,.12), transparent),
        radial-gradient(60% 45% at 85% 10%, rgba(139,92,246,.08), transparent),
        linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%);
    color: #020618;
}

.bg-hero::before {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
    border-radius: 0;
    background:
        linear-gradient(rgba(99,102,241,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99,102,241,.035) 1px, transparent 1px);
    background-size: 58px 58px, 58px 58px;
    opacity: 1;
}

.bg-hero::after {
    background: radial-gradient(circle at 88% 18%, rgba(99,102,241,.10) 0, transparent 42%);
}

.bg-hero h1,
.bg-hero h1 em {
    color: #020618;
    background: none;
    -webkit-text-fill-color: currentColor;
}

.bg-hero-lead { color: #62748E; }

.bg-hero-badge {
    border-color: rgba(99,102,241,.20);
    background: rgba(255,255,255,.82);
    color: #4F46E5;
}

.bg-hero-badge i { color: #6366F1; }

.bg-hero-tags li {
    border-color: #E2E8F0;
    background: #fff;
    color: #62748E;
}

/* Hero panel: AnswerBit-style light product shell */
.bg-hero-panel {
    border: 1px solid #E2E8F0;
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
    box-shadow: 0 24px 70px rgba(2,6,24,.08);
    color: #020618;
}

.bg-hero-panel-head { border-bottom: 1px solid #F1F5F9; }

.bg-hero-panel-title {
    color: #0F172B;
}

.bg-live { color: #62748E; }
.bg-live::before {
    background: #6366F1;
    box-shadow: 0 0 0 4px rgba(99,102,241,.12);
}

.bg-flow-item {
    border-color: #EDF2F7;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(2,6,24,.02);
}

.bg-flow-num {
    background: #EEF2FF;
    color: #4F46E5;
    box-shadow: none;
}

.bg-flow-body strong { color: #0F172B; }
.bg-flow-body span { color: #62748E; }
.bg-flow-state { color: #4F46E5; }

.bg-panel-foot {
    border-top: 1px solid #F1F5F9;
    color: #62748E;
}

.bg-panel-foot strong { color: #0F172B; }

/* ============================ Value and CRM ============================= */
.bg-value-card {
    border-color: #E2E8F0;
    background: #fff;
    box-shadow: 0 12px 40px rgba(2,6,24,.06);
}

.bg-value-item { border-color: #F1F5F9; }
.bg-value-item i,
.bg-service-icon,
.bg-process-step i,
.bg-why-card i,
.bg-contact-line i {
    background: #EEF2FF;
    color: #4F46E5;
}

.bg-crm-step {
    border-color: #E2E8F0;
    background: #fff;
}

.bg-crm-step span { color: #6366F1; }

.bg-benchmark {
    border-left-color: #6366F1;
    background: #F8FAFC;
    color: #475467;
}

.bg-benchmark strong { color: #0F172B; }

.bg-product-tile {
    border-color: #E2E8F0;
    background: #fff;
}

.bg-product-tile.is-ai {
    border-color: #C7D2FE;
    background: linear-gradient(155deg,#F8FAFF 0%,#FFFFFF 100%);
}

/* ========================== Six business cards ========================== */
.bg-service-card {
    border-color: #E2E8F0;
    background: #fff;
    box-shadow: 0 1px 3px rgba(2,6,24,.03);
}

.bg-service-card::after {
    background: linear-gradient(125deg, rgba(99,102,241,.10), rgba(139,92,246,.06) 48%, transparent 74%);
}

.bg-service-card:hover {
    border-color: #C7D2FE;
    box-shadow: 0 18px 48px rgba(2,6,24,.08);
}

.bg-service-card.core {
    border-color: #C7D2FE;
    background: linear-gradient(165deg,#FFFFFF 0%,#F8FAFF 100%);
    box-shadow: 0 18px 50px rgba(99,102,241,.10);
}

.bg-core-tag {
    background: linear-gradient(135deg,#6366F1,#8B5CF6);
    box-shadow: 0 8px 20px rgba(99,102,241,.22);
}

/* ========================= Dark capability block ======================== */
.bg-section-dark {
    background:
        radial-gradient(72% 48% at 76% 12%, rgba(99,102,241,.22), transparent),
        radial-gradient(56% 44% at 10% 82%, rgba(139,92,246,.16), transparent),
        linear-gradient(135deg,#020618 0%,#0F172B 68%,#111C34 100%);
    color: #F8FAFC;
}

.bg-section-dark::before {
    background:
        linear-gradient(rgba(199,210,254,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(199,210,254,.055) 1px, transparent 1px);
    background-size: 62px 62px;
}

.bg-capability-card {
    border-color: rgba(199,210,254,.18);
    background: rgba(248,250,252,.055);
}

.bg-capability-card i {
    background: rgba(99,102,241,.18);
}

/* ====================== Industry / process / contact ==================== */
.bg-industry-card,
.bg-mode-card,
.bg-why-card,
.bg-contact-card,
.bg-side-card {
    border-color: #E2E8F0;
    background: #fff;
}

.bg-method-item {
    background: #F8FAFC;
}

.bg-method-item strong { color: #4F46E5; }

.bg-contact-main {
    border-color: #E2E8F0;
    background: #fff;
}

.bg-contact-card.is-primary {
    background: linear-gradient(145deg,#020618,#0F172B);
}

.bg-side-cta {
    background: linear-gradient(145deg,#020618,#1D293D);
}

/* =============================== Content ================================ */
.bg-page-hero {
    background:
        radial-gradient(70% 55% at 50% -20%, rgba(99,102,241,.10), transparent),
        linear-gradient(180deg,#FFFFFF 0%,#FAFAFA 100%);
}

.bg-content-main,
.bg-page-content {
    border-color: #E2E8F0;
    background: #fff;
}

#article_content blockquote {
    border-left-color: #6366F1;
    background: #F8FAFC;
}

.bg-side-list li { border-bottom-color: #F1F5F9; }
.bg-side-rank { background: #F1F5F9; color: #62748E; }
.bg-side-list li:nth-child(-n+3) .bg-side-rank {
    background: #0F172B;
    color: #fff;
}

.bg-pagination > li > a {
    border-color: #E2E8F0;
    color: #364153;
}

.bg-pagination > .active > a,
.bg-pagination > li > a:hover {
    border-color: #0F172B;
    background: #0F172B;
    color: #fff;
}

/* =============================== Footer ================================= */
.bg-footer { background: #020618; }
.bg-footer-bottom { background: #01040F; }
.bg-footer-contact i { color: #A5B4FC; }

/* =====================================================================
   AnswerBit light-mode refinement
   Keep the complete page as light as the reference: white surfaces,
   quiet gray metadata, ink primary actions, restrained AI gradients.
   ===================================================================== */
.bg-section-dark {
    background:
        radial-gradient(75% 52% at 50% -20%, rgba(99,102,241,.10), transparent),
        linear-gradient(180deg,#FFFFFF 0%,#FAFAFA 100%);
    color: #020618;
}

.bg-section-dark::before {
    background:
        linear-gradient(rgba(99,102,241,.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99,102,241,.026) 1px, transparent 1px);
    background-size: 62px 62px;
}

.bg-section-dark .bg-section-title { color: #020618; }
.bg-section-dark .bg-section-subtitle { color: #62748E; }
.bg-section-dark .bg-section-eyebrow {
    border-color: rgba(99,102,241,.18);
    background: #EEF2FF;
    color: #4F46E5;
}

.bg-capability-card {
    border-color: #E2E8F0;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(2,6,24,.03);
}

.bg-capability-card i {
    background: #EEF2FF;
    color: #4F46E5;
}

.bg-capability-card h3 { color: #0F172B; }
.bg-capability-card p { color: #62748E; }

.bg-capability-note {
    color: #475467;
}

.bg-capability-note strong { color: #020618; }

.bg-industry-tags li {
    border-color: #E2E8F0;
    background: #FFFFFF;
    color: #475467;
}

/* Contact blocks become white cards, not large dark color fields */
.bg-contact-card.is-primary {
    border: 1px solid #C7D2FE;
    background: linear-gradient(165deg,#FFFFFF 0%,#F8FAFF 100%);
    color: #020618;
}

.bg-contact-card.is-primary h3,
.bg-contact-card.is-primary .bg-contact-line { color: #0F172B; }

.bg-contact-card.is-primary .bg-contact-line i {
    background: #EEF2FF;
    color: #4F46E5;
}

.bg-contact-card.is-primary .bg-contact-line a {
    color: #0F172B;
    font-weight: 700;
}

.bg-side-cta {
    border-color: #C7D2FE;
    background: linear-gradient(165deg,#FFFFFF 0%,#F8FAFF 100%);
    color: #020618;
}

.bg-side-cta h3 { color: #0F172B; }
.bg-side-cta p { color: #475467; }
.bg-side-cta .bg-btn-white {
    background: #0F172B;
    color: #FFFFFF;
    border: 0;
}

.bg-side-cta .bg-btn-white:hover {
    background: #020618;
    color: #fff;
}

/* Light footer, matching AnswerBit's near-white page ending */
.bg-footer {
    border-top: 1px solid #E2E8F0;
    background: #FFFFFF;
    color: #62748E;
}

.bg-footer-brand .bg-brand { color: #020618; }

.bg-footer h4 {
    color: #0F172B;
}

.bg-footer-list a,
.bg-footer-contact a {
    color: #62748E;
}

.bg-footer-list a:hover,
.bg-footer-contact a:hover {
    color: #0F172B;
}

.bg-footer-contact i { color: #6366F1; }

.bg-footer-bottom {
    border-top: 1px solid #E2E8F0;
    background: #FAFAFA;
}

.bg-footer-bottom-inner { color: #62748E; }

.bg-footer-bottom a {
    color: #475467;
}

.bg-footer-bottom a:hover { color: #0F172B; }