:root{--bb-bg:#f7f8fc;--bb-bg-soft:#eef1f9;--bb-surface:#ffffff;--bb-surface-2:#f2f5fb;--bb-text:#2d2d3a;--bb-text-soft:#5a5a6a;--bb-text-mute:#8a8a9a;--bb-heading:#1a1a2e;--bb-primary:#4dabf7;--bb-primary-deep:#3b5bdb;--bb-primary-soft:#e7f0ff;--bb-dark:#1a1a2e;--bb-dark-2:#16213e;--bb-dark-3:#0f3460;--bb-border:rgba(26,26,46,.08);--bb-shadow-sm:0 2px 10px rgba(26,26,46,.06);--bb-shadow-md:0 6px 22px rgba(26,26,46,.10);--bb-shadow-lg:0 16px 44px rgba(26,26,46,.16);--bb-glass:rgba(255,255,255,.72);--bb-glass-border:rgba(255,255,255,.55);--bb-radius-sm:10px;--bb-radius:14px;--bb-radius-lg:20px;--bb-radius-xl:26px;--bb-ease:cubic-bezier(.22,.61,.36,1);--bb-nav-h:64px}

@media (prefers-color-scheme:dark){
:root{
--bb-bg:#0e1117;--bb-bg-soft:#12161f;--bb-surface:#161b25;--bb-surface-2:#1b2130;--bb-text:#d6dae5;--bb-text-soft:#a8afc0;--bb-text-mute:#7c8496;--bb-heading:#f2f5fb;--bb-primary:#5cb3ff;--bb-primary-deep:#7cc4ff;--bb-primary-soft:#16273b;--bb-border:rgba(255,255,255,.09);--bb-shadow-sm:0 2px 10px rgba(0,0,0,.4);--bb-shadow-md:0 6px 22px rgba(0,0,0,.5);--bb-shadow-lg:0 16px 44px rgba(0,0,0,.6);--bb-glass:rgba(22,27,37,.72);--bb-glass-border:rgba(255,255,255,.12)
}
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--bb-nav-h) + 16px)}

body{
font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
color:var(--bb-text);
background:var(--bb-bg);
background-image:radial-gradient(1200px 600px at 12% -8%,rgba(77,171,247,.16),transparent 60%),radial-gradient(900px 520px at 100% 0%,rgba(15,52,96,.14),transparent 55%);
background-attachment:fixed;
line-height:1.85;
font-size:16px;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
transition:background-color .35s var(--bb-ease),color .35s var(--bb-ease)
}

::selection{background:var(--bb-primary);color:#fff}

a{color:var(--bb-primary-deep);text-decoration:none;transition:color .22s var(--bb-ease),opacity .22s var(--bb-ease)}
a:hover{color:var(--bb-heading);text-decoration:underline;text-underline-offset:3px}
a:focus-visible,button:focus-visible,.faq-q:focus-visible{outline:2px solid var(--bb-primary);outline-offset:3px;border-radius:6px}

img,svg,video{max-width:100%;height:auto;display:block}

header{
position:sticky;top:0;z-index:1000;
background:var(--bb-glass);
-webkit-backdrop-filter:saturate(180%) blur(18px);
backdrop-filter:saturate(180%) blur(18px);
border-bottom:1px solid var(--bb-glass-border);
box-shadow:0 2px 18px rgba(26,26,46,.07);
color:var(--bb-heading);
transition:background-color .35s var(--bb-ease),box-shadow .3s var(--bb-ease),border-color .35s var(--bb-ease)
}

.nav-wrap{
max-width:1200px;margin:0 auto;
display:flex;align-items:center;justify-content:space-between;
padding:12px 20px;min-height:var(--bb-nav-h);gap:16px
}

.logo{
font-size:22px;font-weight:800;letter-spacing:.5px;
color:var(--bb-heading);white-space:nowrap;
display:inline-flex;align-items:center;
background:linear-gradient(100deg,var(--bb-primary) 0%,var(--bb-primary-deep) 100%);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
transition:filter .25s var(--bb-ease),transform .25s var(--bb-ease)
}
.logo span{
background:linear-gradient(100deg,var(--bb-primary-deep) 0%,var(--bb-primary) 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent
}
.logo:hover{filter:brightness(1.12);transform:translateY(-1px)}

nav ul{display:flex;list-style:none;gap:6px;margin:0;flex-wrap:wrap;justify-content:flex-end}
nav a{
position:relative;display:inline-block;
color:var(--bb-text-soft);font-size:15px;font-weight:500;
padding:8px 12px;border-radius:999px;
transition:color .22s var(--bb-ease),background-color .22s var(--bb-ease),transform .22s var(--bb-ease)
}
nav a::after{
content:"";position:absolute;left:50%;bottom:4px;
width:0;height:2px;border-radius:2px;
background:linear-gradient(90deg,var(--bb-primary),var(--bb-primary-deep));
transform:translateX(-50%);
transition:width .28s var(--bb-ease)
}
nav a:hover{
color:var(--bb-primary-deep);text-decoration:none;
background:var(--bb-primary-soft);transform:translateY(-1px)
}
nav a:hover::after{width:calc(100% - 24px)}

main{max-width:1200px;margin:0 auto;padding:0 20px}

section{margin:56px 0;scroll-margin-top:calc(var(--bb-nav-h) + 20px)}

h1{font-size:30px;color:var(--bb-heading);margin-bottom:16px;line-height:1.35;font-weight:800;letter-spacing:.2px}
h2{
position:relative;font-size:24px;color:var(--bb-heading);
margin:36px 0 18px;padding:2px 0 2px 16px;
line-height:1.45;font-weight:750;letter-spacing:.2px;
border-left:4px solid transparent;
border-image:linear-gradient(180deg,var(--bb-primary),var(--bb-primary-deep)) 1;
transition:transform .3s var(--bb-ease)
}
h2::after{
content:"";display:block;width:56px;height:3px;margin-top:10px;border-radius:3px;
background:linear-gradient(90deg,var(--bb-primary),rgba(77,171,247,0));
opacity:.85
}
h3{font-size:19px;color:var(--bb-heading);margin:26px 0 10px;line-height:1.5;font-weight:700}
h4{font-size:17px;color:var(--bb-text);margin:18px 0 8px;font-weight:650}

p{margin:10px 0;color:var(--bb-text-soft)}
ul,ol{margin:10px 0 12px 24px;color:var(--bb-text-soft)}
li{margin:6px 0}
li::marker{color:var(--bb-primary)}
strong{color:var(--bb-heading);font-weight:700}

.breadcrumb{
font-size:14px;color:var(--bb-text-mute);
margin:18px 0 0;padding:10px 16px;
display:inline-block;border-radius:999px;
background:var(--bb-glass);
-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
border:1px solid var(--bb-border);
box-shadow:var(--bb-shadow-sm)
}
.breadcrumb a{color:var(--bb-primary-deep);font-weight:500}
.breadcrumb a:hover{text-decoration:underline}

.first-screen{
position:relative;overflow:hidden;
background:linear-gradient(135deg,var(--bb-dark) 0%,var(--bb-dark-2) 58%,var(--bb-dark-3) 100%);
color:#fff;border-radius:var(--bb-radius-xl);
padding:56px 44px;margin-top:26px;
box-shadow:var(--bb-shadow-lg);
isolation:isolate
}
.first-screen::before{
content:"";position:absolute;inset:-40% -10% auto -10%;height:120%;
background:radial-gradient(600px 300px at 18% 8%,rgba(77,171,247,.42),transparent 62%),radial-gradient(700px 360px at 88% 96%,rgba(59,91,219,.38),transparent 60%);
z-index:-1;pointer-events:none;
animation:bbGlow 14s ease-in-out infinite alternate
}
.first-screen::after{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
background-size:44px 44px;
mask-image:radial-gradient(circle at 30% 30%,#000 0%,transparent 78%);
-webkit-mask-image:radial-gradient(circle at 30% 30%,#000 0%,transparent 78%)
}
.first-screen h1{color:#fff;font-size:32px;text-shadow:0 2px 18px rgba(0,0,0,.28)}
.first-screen p{color:#c8d0e0;font-size:16px;max-width:860px;position:relative}
.first-screen .kw{
color:#7cc4ff;font-weight:700;
text-shadow:0 0 18px rgba(77,171,247,.5)
}

@keyframes bbGlow{
0%{transform:translate3d(0,0,0) scale(1);opacity:.9}
100%{transform:translate3d(-2%,2%,0) scale(1.08);opacity:1}
}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin:22px 0}

.card{
position:relative;overflow:hidden;
background:var(--bb-surface);
border:1px solid var(--bb-border);
border-radius:var(--bb-radius-lg);
padding:26px;
box-shadow:var(--bb-shadow-sm);
transition:transform .32s var(--bb-ease),box-shadow .32s var(--bb-ease),border-color .32s var(--bb-ease),background-color .35s var(--bb-ease)
}
.card::before{
content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:linear-gradient(140deg,rgba(77,171,247,.14),transparent 45%);
opacity:0;transition:opacity .32s var(--bb-ease)
}
.card:hover{transform:translateY(-6px);box-shadow:var(--bb-shadow-md);border-color:rgba(77,171,247,.35)}
.card:hover::before{opacity:1}
.card h3{margin-top:0;color:var(--bb-heading)}

.tag{
display:inline-block;background:var(--bb-primary-soft);color:var(--bb-primary-deep);
font-size:13px;padding:3px 12px;border-radius:999px;margin:0 6px 6px 0;
font-weight:600;letter-spacing:.2px;
border:1px solid rgba(77,171,247,.22);
transition:transform .22s var(--bb-ease),background-color .22s var(--bb-ease)
}
.tag:hover{transform:translateY(-2px);background:rgba(77,171,247,.22)}

.article-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}

.article-item{
position:relative;overflow:hidden;
background:var(--bb-surface);
border:1px solid var(--bb-border);
border-radius:var(--bb-radius-lg);
padding:24px;
box-shadow:var(--bb-shadow-sm);
transition:transform .32s var(--bb-ease),box-shadow .32s var(--bb-ease),border-color .32s var(--bb-ease)
}
.article-item::after{
content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
background:linear-gradient(180deg,var(--bb-primary),var(--bb-primary-deep));
transform:scaleY(0);transform-origin:top;
transition:transform .34s var(--bb-ease)
}
.article-item:hover{transform:translateY(-6px);box-shadow:var(--bb-shadow-md);border-color:rgba(77,171,247,.32)}
.article-item:hover::after{transform:scaleY(1)}
.article-item h3{font-size:17px;margin-top:0;color:var(--bb-heading);line-height:1.55}
.article-item .meta{font-size:13px;color:var(--bb-text-mute);margin:8px 0;display:flex;align-items:center;gap:6px}
.article-item .meta::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--bb-primary);flex:none}
.article-item p{font-size:14px;color:var(--bb-text-soft)}

.read-more{
font-size:14px;color:var(--bb-primary-deep);font-weight:600;
display:inline-flex;align-items:center;gap:6px;margin-top:6px;
transition:gap .25s var(--bb-ease),color .22s var(--bb-ease)
}
.read-more:hover{gap:12px;color:var(--bb-heading);text-decoration:none}

.faq-item{
background:var(--bb-surface);
border:1px solid var(--bb-border);
border-radius:var(--bb-radius);
margin:12px 0;overflow:hidden;
box-shadow:var(--bb-shadow-sm);
transition:box-shadow .3s var(--bb-ease),border-color .3s var(--bb-ease),transform .3s var(--bb-ease)
}
.faq-item:hover{box-shadow:var(--bb-shadow-md);border-color:rgba(77,171,247,.3)}
.faq-item.open{border-color:rgba(77,171,247,.42);box-shadow:var(--bb-shadow-md)}

.faq-q{
padding:17px 22px;font-weight:650;color:var(--bb-heading);
cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;
font-size:16px;line-height:1.6;
transition:background-color .25s var(--bb-ease),color .25s var(--bb-ease);
-webkit-tap-highlight-color:transparent
}
.faq-q:hover{background:var(--bb-surface-2)}
.faq-q::after{
content:"+";font-size:22px;line-height:1;font-weight:400;
color:var(--bb-primary);flex:none;width:26px;height:26px;
display:flex;align-items:center;justify-content:center;
border-radius:50%;background:var(--bb-primary-soft);
transition:transform .3s var(--bb-ease),background-color .3s var(--bb-ease),color .3s var(--bb-ease)
}
.faq-item.open .faq-q::after{content:"−";transform:rotate(180deg);background:var(--bb-primary);color:#fff}
.faq-a{
display:none;padding:0 22px 18px;color:var(--bb-text-soft);font-size:15px;
border-top:1px solid var(--bb-border);
animation:bbFade .34s var(--bb-ease) both
}
.faq-item.open .faq-a{display:block;padding-top:14px}

@keyframes bbFade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.steps{counter-reset:step;margin:18px 0}

.step{
position:relative;
padding:18px 20px 18px 62px;
background:var(--bb-surface);
border:1px solid var(--bb-border);
border-radius:var(--bb-radius);
margin:14px 0;
box-shadow:var(--bb-shadow-sm);
color:var(--bb-text-soft);
transition:transform .3s var(--bb-ease),box-shadow .3s var(--bb-ease),border-color .3s var(--bb-ease)
}
.step:hover{transform:translateX(6px);box-shadow:var(--bb-shadow-md);border-color:rgba(77,171,247,.34)}
.step::before{
counter-increment:step;
content:counter(step);
position:absolute;left:18px;top:18px;
width:30px;height:30px;
background:linear-gradient(135deg,var(--bb-primary),var(--bb-primary-deep));
color:#fff;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:14px;font-weight:800;
box-shadow:0 4px 14px rgba(77,171,247,.4)
}
.step strong{color:var(--bb-heading)}

.case-box{
position:relative;overflow:hidden;
background:var(--bb-surface);
border:1px solid var(--bb-border);
border-radius:var(--bb-radius-lg);
padding:26px;margin:18px 0;
border-left:4px solid var(--bb-primary);
box-shadow:var(--bb-shadow-sm);
transition:transform .32s var(--bb-ease),box-shadow .32s var(--bb-ease)
}
.case-box::before{
content:"";position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;
background:radial-gradient(circle,rgba(77,171,247,.18),transparent 70%);
pointer-events:none
}
.case-box:hover{transform:translateY(-4px);box-shadow:var(--bb-shadow-md)}
.case-box h3{margin-top:0;color:var(--bb-heading)}

.testimonial{
position:relative;
background:linear-gradient(135deg,rgba(77,171,247,.12),rgba(59,91,219,.08));
border:1px solid rgba(77,171,247,.2);
border-radius:var(--bb-radius-lg);
padding:22px 26px 22px 54px;margin:14px 0;
font-style:normal;color:var(--bb-text-soft);
transition:transform .3s var(--bb-ease),box-shadow .3s var(--bb-ease)
}
.testimonial::before{
content:"“";position:absolute;left:18px;top:8px;
font-size:44px;line-height:1;color:var(--bb-primary);opacity:.55;font-family:Georgia,serif
}
.testimonial:hover{transform:translateY(-4px);box-shadow:var(--bb-shadow-md)}
.testimonial p{margin:4px 0}
.testimonial .who{font-weight:700;color:var(--bb-heading);margin-top:10px;font-style:normal;font-size:14px}

.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin:18px 0}

.contact-item{
position:relative;overflow:hidden;
background:var(--bb-surface);
border:1px solid var(--bb-border);
border-radius:var(--bb-radius);
padding:22px;
box-shadow:var(--bb-shadow-sm);
transition:transform .3s var(--bb-ease),box-shadow .3s var(--bb-ease),border-color .3s var(--bb-ease)
}
.contact-item::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
background:linear-gradient(90deg,var(--bb-primary),var(--bb-primary-deep));
transform:scaleX(0);transform-origin:left;
transition:transform .34s var(--bb-ease)
}
.contact-item:hover{transform:translateY(-5px);box-shadow:var(--bb-shadow-md);border-color:rgba(77,171,247,.32)}
.contact-item:hover::after{transform:scaleX(1)}
.contact-item h4{margin-top:0;color:var(--bb-heading)}
.contact-item p{font-size:14px;margin:4px 0;color:var(--bb-text-soft)}

.sitemap-list{columns:2;column-gap:36px;margin:18px 0}
.sitemap-list a{
display:block;margin:6px 0;font-size:14px;
color:var(--bb-text-soft);
padding:6px 10px;border-radius:8px;
transition:color .22s var(--bb-ease),background-color .22s var(--bb-ease),transform .22s var(--bb-ease)
}
.sitemap-list a:hover{
color:var(--bb-primary-deep);background:var(--bb-primary-soft);
text-decoration:none;transform:translateX(4px)
}

footer{
position:relative;overflow:hidden;
background:linear-gradient(160deg,var(--bb-dark) 0%,#141a30 55%,var(--bb-dark-3) 100%);
color:#a0a0b0;
margin-top:70px;padding:48px 20px 26px;
border-top:1px solid rgba(77,171,247,.16)
}
footer::before{
content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(700px 320px at 80% 0%,rgba(77,171,247,.16),transparent 62%)
}
.footer-inner{
position:relative;max-width:1200px;margin:0 auto;
display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px
}
footer h4{color:#fff;font-size:16px;margin-bottom:14px;letter-spacing:.3px}
footer p{color:#a0a0b0}
footer a{
color:#a0a0b0;font-size:14px;display:block;margin:8px 0;
transition:color .22s var(--bb-ease),transform .22s var(--bb-ease)
}
footer a:hover{color:var(--bb-primary);text-decoration:none;transform:translateX(4px)}
.footer-bottom{
position:relative;max-width:1200px;margin:30px auto 0;padding-top:22px;
border-top:1px solid rgba(255,255,255,.1);
font-size:13px;text-align:center;color:#7a7a8a
}
.footer-bottom p{margin:0;color:#7a7a8a}

.back-top{
position:fixed;right:24px;bottom:32px;
width:46px;height:46px;
background:linear-gradient(135deg,var(--bb-primary),var(--bb-primary-deep));
color:#fff;border:none;border-radius:50%;
font-size:20px;line-height:1;cursor:pointer;
box-shadow:0 6px 20px rgba(77,171,247,.45);
display:none;align-items:center;justify-content:center;
z-index:999;
transition:transform .28s var(--bb-ease),box-shadow .28s var(--bb-ease),opacity .28s var(--bb-ease)
}
.back-top.show{display:flex;animation:bbPop .3s var(--bb-ease) both}
.back-top:hover{transform:translateY(-4px) scale(1.06);box-shadow:0 10px 28px rgba(77,171,247,.6)}
.back-top:active{transform:translateY(-1px) scale(.98)}

@keyframes bbPop{from{opacity:0;transform:translateY(14px) scale(.85)}to{opacity:1;transform:none}}

section{animation:bbRise .7s var(--bb-ease) both}
section:nth-of-type(1){animation-delay:.02s}
section:nth-of-type(2){animation-delay:.06s}
section:nth-of-type(3){animation-delay:.1s}
section:nth-of-type(4){animation-delay:.14s}
section:nth-of-type(5){animation-delay:.18s}
section:nth-of-type(6){animation-delay:.22s}
section:nth-of-type(7){animation-delay:.26s}

@keyframes bbRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

@media (max-width:1024px){
:root{--bb-nav-h:60px}
h1{font-size:27px}
.first-screen h1{font-size:28px}
.first-screen{padding:44px 32px}
}

@media (max-width:768px){
:root{--bb-nav-h:56px}
body{font-size:15px;line-height:1.8}
main{padding:0 16px}
section{margin:40px 0}
nav ul{display:none}
.logo{font-size:20px}
.first-screen{padding:34px 22px;border-radius:var(--bb-radius-lg);margin-top:20px}
.first-screen h1{font-size:23px}
.first-screen p{font-size:15px}
h1{font-size:23px}
h2{font-size:20px;margin:30px 0 14px;padding-left:12px}
h3{font-size:17px}
h4{font-size:16px}
.cards,.article-list,.contact-grid{gap:16px}
.card,.article-item,.case-box,.contact-item{padding:20px}
.step{padding:16px 16px 16px 56px}
.step::before{left:14px;top:16px;width:26px;height:26px;font-size:13px}
.faq-q{padding:15px 18px;font-size:15px}
.faq-a{padding:0 18px 16px}
.testimonial{padding:20px 20px 20px 48px}
.sitemap-list{columns:1}
.footer-inner{gap:22px}
footer{padding:38px 16px 22px;margin-top:52px}
.back-top{right:16px;bottom:20px;width:42px;height:42px;font-size:18px}
}

@media (max-width:420px){
.first-screen h1{font-size:21px}
h1{font-size:21px}
h2{font-size:18px}
.card,.article-item,.case-box,.contact-item{padding:18px}
}

@media (hover:none){
.card:hover,.article-item:hover,.case-box:hover,.contact-item:hover,.step:hover{transform:none}
}