:root{
--brand:#0a6e8a;
--brand-dark:#075468;
--brand-light:#e6f4f7;
--accent:#e08a3c;
--accent-light:#fdf1e4;
--text:#1f2a30;
--text-soft:#4a5a63;
--bg:#ffffff;
--bg-soft:#f5f8f9;
--border:#dbe5e9;
--shadow:0 4px 18px rgba(10,110,138,.10);
--glass:rgba(255,255,255,.72);
--glass-border:rgba(255,255,255,.55);
--radius:14px;
--radius-sm:10px;
--ease:cubic-bezier(.22,.61,.36,1);
}

html[data-theme="dark"]{
--brand:#3fb6d4;
--brand-dark:#2a92ad;
--brand-light:#0f2a33;
--accent:#f0a860;
--accent-light:#2a2015;
--text:#e3edf0;
--text-soft:#a9bcc4;
--bg:#0e161a;
--bg-soft:#131f25;
--border:#22343c;
--shadow:0 4px 18px rgba(0,0,0,.45);
--glass:rgba(18,30,36,.68);
--glass-border:rgba(63,182,212,.22);
}

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

html{
scroll-behavior:smooth;
-webkit-text-size-adjust:100%;
}

body{
font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
color:var(--text);
background:var(--bg);
line-height:1.8;
font-size:16px;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
overflow-x:hidden;
transition:background .35s var(--ease),color .35s var(--ease);
}

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

a{
color:var(--brand);
text-decoration:none;
transition:color .22s var(--ease),opacity .22s var(--ease);
}
a:hover{color:var(--accent)}

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

:focus-visible{
outline:3px solid var(--accent);
outline-offset:2px;
border-radius:4px;
}

.container{
max-width:1180px;
margin:0 auto;
padding:0 20px;
}

.skip-link{
position:absolute;
left:-9999px;
top:0;
background:var(--brand);
color:#fff;
padding:10px 16px;
z-index:9999;
border-radius:0 0 6px 0;
font-size:14px;
}
.skip-link:focus{left:0;color:#fff}

.topbar{
background:var(--brand-dark);
color:#dff0f4;
font-size:13px;
padding:6px 0;
transition:background .35s var(--ease);
}
.topbar .container{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:8px;
}
.topbar a{color:#dff0f4}
.topbar a:hover{color:#fff}
.topbar .topbar-info{
display:flex;
gap:18px;
flex-wrap:wrap;
align-items:center;
}
.topbar .topbar-tools{
display:flex;
gap:12px;
align-items:center;
}

.header{
position:sticky;
top:0;
z-index:1000;
background:var(--glass);
-webkit-backdrop-filter:blur(14px) saturate(160%);
backdrop-filter:blur(14px) saturate(160%);
border-bottom:1px solid var(--border);
box-shadow:var(--shadow);
transition:box-shadow .3s var(--ease),background .35s var(--ease);
}
.header .container{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding-top:12px;
padding-bottom:12px;
}

.logo{
display:flex;
align-items:center;
gap:10px;
font-weight:800;
font-size:20px;
color:var(--text);
transition:transform .3s var(--ease);
}
.logo:hover{transform:translateY(-1px)}
.logo .logo-mark{
width:40px;
height:40px;
flex:0 0 40px;
transition:transform .5s var(--ease);
}
.logo:hover .logo-mark{transform:rotate(-8deg) scale(1.05)}
.logo .logo-text small{
display:block;
font-size:11px;
font-weight:400;
color:var(--text-soft);
letter-spacing:1px;
}

.nav{
display:flex;
gap:4px;
flex-wrap:wrap;
align-items:center;
}
.nav a{
padding:8px 12px;
border-radius:8px;
font-size:15px;
color:var(--text-soft);
font-weight:500;
position:relative;
transition:background .22s var(--ease),color .22s var(--ease),transform .22s var(--ease);
}
.nav a::after{
content:"";
position:absolute;
left:12px;
right:12px;
bottom:4px;
height:2px;
border-radius:2px;
background:var(--accent);
transform:scaleX(0);
transform-origin:left;
transition:transform .28s var(--ease);
}
.nav a:hover{
background:var(--brand-light);
color:var(--brand);
transform:translateY(-1px);
}
.nav a:hover::after{transform:scaleX(1)}

.header-tools{
display:flex;
gap:8px;
align-items:center;
}

.icon-btn{
width:38px;
height:38px;
border:1px solid var(--border);
border-radius:9px;
background:var(--bg-soft);
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
color:var(--text-soft);
transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease);
}
.icon-btn:hover{
background:var(--brand-light);
color:var(--brand);
border-color:var(--brand);
transform:translateY(-1px);
}
.icon-btn:active{transform:scale(.94)}

.search-box{
display:flex;
align-items:center;
gap:6px;
border:1px solid var(--border);
border-radius:9px;
padding:4px 4px 4px 12px;
background:var(--bg-soft);
max-width:260px;
transition:border-color .22s var(--ease),box-shadow .22s var(--ease);
}
.search-box:focus-within{
border-color:var(--brand);
box-shadow:0 0 0 3px rgba(10,110,138,.12);
}
.search-box input{
border:none;
background:transparent;
outline:none;
font-size:14px;
width:150px;
color:var(--text);
}
.search-box input::placeholder{color:var(--text-soft);opacity:.75}
.search-box button{
border:none;
background:var(--brand);
color:#fff;
border-radius:7px;
padding:6px 10px;
cursor:pointer;
font-size:13px;
transition:background .22s var(--ease),transform .22s var(--ease);
}
.search-box button:hover{background:var(--brand-dark);transform:translateY(-1px)}

.mobile-toggle{display:none}

.hero{
background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 55%,#053f4d 100%);
color:#fff;
padding:56px 0 64px;
position:relative;
overflow:hidden;
isolation:isolate;
}
.hero::before{
content:"";
position:absolute;
inset:-40%;
background:
radial-gradient(circle at 20% 20%,rgba(224,138,60,.28),transparent 45%),
radial-gradient(circle at 80% 30%,rgba(255,217,168,.20),transparent 40%),
radial-gradient(circle at 60% 90%,rgba(189,230,240,.18),transparent 45%);
animation:heroGlow 18s ease-in-out infinite alternate;
z-index:-1;
}
.hero::after{
content:"";
position:absolute;
right:-80px;
top:-80px;
width:340px;
height:340px;
border-radius:50%;
background:rgba(255,255,255,.06);
box-shadow:0 0 0 60px rgba(255,255,255,.03);
pointer-events:none;
}
@keyframes heroGlow{
0%{transform:translate3d(0,0,0) scale(1)}
100%{transform:translate3d(2%,-2%,0) scale(1.08)}
}
.hero .container{position:relative;z-index:2}

.hero-grid{
display:grid;
grid-template-columns:1.15fr .85fr;
gap:40px;
align-items:center;
}
.hero h1{
font-size:38px;
line-height:1.3;
font-weight:800;
margin-bottom:16px;
letter-spacing:.5px;
text-shadow:0 2px 18px rgba(0,0,0,.18);
}
.hero h1 .kw{
color:#ffd9a8;
position:relative;
white-space:nowrap;
}
.hero .hero-lead{
font-size:17px;
color:#e2f3f7;
margin-bottom:14px;
max-width:640px;
}
.hero .hero-points{
list-style:none;
display:grid;
grid-template-columns:1fr 1fr;
gap:8px 18px;
margin:18px 0 26px;
font-size:15px;
}
.hero .hero-points li{
display:flex;
align-items:flex-start;
gap:8px;
color:#e2f3f7;
transition:transform .25s var(--ease),color .25s var(--ease);
}
.hero .hero-points li:hover{transform:translateX(4px);color:#fff}
.hero .hero-points li::before{
content:"◆";
color:#ffd9a8;
font-size:11px;
line-height:1.9;
flex:0 0 auto;
}

.hero-cta{
display:flex;
gap:12px;
flex-wrap:wrap;
}

.btn{
display:inline-block;
padding:12px 26px;
border-radius:10px;
font-weight:600;
font-size:15px;
cursor:pointer;
border:none;
position:relative;
overflow:hidden;
transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease),color .25s var(--ease);
}
.btn::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
transform:translateX(-120%);
transition:transform .6s var(--ease);
}
.btn:hover::after{transform:translateX(120%)}
.btn-primary{
background:linear-gradient(135deg,var(--accent),#c9742a);
color:#fff;
box-shadow:0 6px 18px rgba(224,138,60,.35);
}
.btn-primary:hover{
color:#fff;
transform:translateY(-3px);
box-shadow:0 10px 26px rgba(224,138,60,.45);
}
.btn-ghost{
background:rgba(255,255,255,.14);
color:#fff;
border:1px solid rgba(255,255,255,.4);
-webkit-backdrop-filter:blur(6px);
backdrop-filter:blur(6px);
}
.btn-ghost:hover{
background:rgba(255,255,255,.24);
color:#fff;
transform:translateY(-3px);
}

.hero-visual{
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.18);
border-radius:18px;
padding:18px;
-webkit-backdrop-filter:blur(10px);
backdrop-filter:blur(10px);
box-shadow:0 12px 40px rgba(0,0,0,.22);
transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.hero-visual:hover{
transform:translateY(-6px) rotate(-.4deg);
box-shadow:0 20px 50px rgba(0,0,0,.3);
}
.hero-visual figcaption{
font-size:13px;
color:#cfe8ee;
margin-top:10px;
text-align:center;
letter-spacing:1px;
}

.stats{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:16px;
margin-top:34px;
position:relative;
z-index:2;
}
.stat{
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.18);
border-radius:14px;
padding:16px;
text-align:center;
-webkit-backdrop-filter:blur(8px);
backdrop-filter:blur(8px);
transition:transform .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease);
}
.stat:hover{
transform:translateY(-5px);
background:rgba(255,255,255,.16);
border-color:rgba(255,217,168,.5);
}
.stat .num{
font-size:28px;
font-weight:800;
color:#ffd9a8;
line-height:1.2;
font-variant-numeric:tabular-nums;
}
.stat .label{
font-size:13px;
color:#d8ecf1;
margin-top:4px;
}

.section{
padding:64px 0;
position:relative;
transition:background .35s var(--ease);
}
.section.alt{background:var(--bg-soft)}

.section-head{
max-width:760px;
margin:0 auto 40px;
text-align:center;
}
.section-head .eyebrow{
display:inline-block;
font-size:13px;
font-weight:700;
color:var(--brand);
background:var(--brand-light);
padding:4px 14px;
border-radius:20px;
margin-bottom:12px;
letter-spacing:1px;
}
.section-head h2{
font-size:30px;
font-weight:800;
line-height:1.35;
margin-bottom:12px;
letter-spacing:.3px;
}
.section-head p{
color:var(--text-soft);
font-size:16px;
}

.grid-3{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
}
.grid-2{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:24px;
}

.card{
background:var(--bg);
border:1px solid var(--border);
border-radius:var(--radius);
padding:26px;
box-shadow:var(--shadow);
position:relative;
overflow:hidden;
transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.card::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(135deg,rgba(10,110,138,.06),transparent 55%);
opacity:0;
transition:opacity .3s var(--ease);
pointer-events:none;
}
.card:hover{
transform:translateY(-6px);
box-shadow:0 16px 38px rgba(10,110,138,.18);
border-color:var(--brand);
}
.card:hover::before{opacity:1}
.card h3{
font-size:19px;
font-weight:700;
margin-bottom:10px;
color:var(--text);
}
.card h4{
font-size:16px;
font-weight:700;
margin-bottom:8px;
color:var(--brand-dark);
}
.card p{
color:var(--text-soft);
font-size:15px;
}
.card .card-icon{
width:52px;
height:52px;
border-radius:13px;
background:var(--brand-light);
display:flex;
align-items:center;
justify-content:center;
margin-bottom:16px;
transition:transform .35s var(--ease),background .35s var(--ease);
}
.card:hover .card-icon{
transform:rotate(-6deg) scale(1.08);
background:var(--accent-light);
}
.card ul{
margin-top:12px;
padding-left:0;
list-style:none;
}
.card ul li{
position:relative;
padding-left:20px;
font-size:14px;
color:var(--text-soft);
margin-bottom:6px;
}
.card ul li::before{
content:"›";
position:absolute;
left:4px;
color:var(--brand);
font-weight:700;
}

.prose{
max-width:900px;
margin:0 auto;
}
.prose h2{
font-size:28px;
font-weight:800;
margin:40px 0 16px;
line-height:1.35;
letter-spacing:.2px;
}
.prose h2:first-child{margin-top:0}
.prose h3{
font-size:21px;
font-weight:700;
margin:28px 0 12px;
color:var(--brand-dark);
}
.prose h4{
font-size:17px;
font-weight:700;
margin:20px 0 8px;
}
.prose p{
margin-bottom:14px;
color:var(--text-soft);
font-size:16px;
text-align:justify;
}
.prose ul,.prose ol{
margin:0 0 16px 22px;
color:var(--text-soft);
}
.prose li{margin-bottom:8px}
.prose li strong{color:var(--text)}
.prose blockquote{
border-left:4px solid var(--accent);
background:var(--accent-light);
padding:14px 18px;
border-radius:0 10px 10px 0;
margin:18px 0;
color:var(--text);
font-size:15px;
position:relative;
transition:transform .3s var(--ease);
}
.prose blockquote:hover{transform:translateX(4px)}

.timeline{
position:relative;
padding-left:30px;
margin-top:20px;
}
.timeline::before{
content:"";
position:absolute;
left:8px;
top:6px;
bottom:6px;
width:2px;
background:linear-gradient(180deg,var(--brand),var(--accent));
border-radius:2px;
}
.timeline-item{
position:relative;
margin-bottom:24px;
transition:transform .3s var(--ease);
}
.timeline-item:hover{transform:translateX(5px)}
.timeline-item::before{
content:"";
position:absolute;
left:-28px;
top:6px;
width:14px;
height:14px;
border-radius:50%;
background:var(--brand);
border:3px solid var(--bg);
box-shadow:0 0 0 2px var(--brand);
transition:background .3s var(--ease),box-shadow .3s var(--ease);
}
.timeline-item:hover::before{
background:var(--accent);
box-shadow:0 0 0 2px var(--accent);
}
.timeline-item h4{
font-size:17px;
margin-bottom:4px;
}
.timeline-item .year{
font-size:13px;
color:var(--accent);
font-weight:700;
letter-spacing:.5px;
}
.timeline-item p{
font-size:14px;
color:var(--text-soft);
}

.article-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:24px;
}
.article-card{
background:var(--bg);
border:1px solid var(--border);
border-radius:var(--radius);
overflow:hidden;
box-shadow:var(--shadow);
transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
display:flex;
flex-direction:column;
}
.article-card:hover{
transform:translateY(-6px);
box-shadow:0 16px 38px rgba(10,110,138,.18);
border-color:var(--brand);
}
.article-thumb{
height:160px;
background:var(--brand-light);
position:relative;
overflow:hidden;
}
.article-thumb svg{
width:100%;
height:100%;
transition:transform .6s var(--ease);
}
.article-card:hover .article-thumb svg{transform:scale(1.06)}
.article-thumb::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.06));
pointer-events:none;
}
.article-body{
padding:22px;
flex:1;
display:flex;
flex-direction:column;
}
.article-meta{
font-size:12px;
color:var(--text-soft);
margin-bottom:8px;
display:flex;
gap:12px;
flex-wrap:wrap;
align-items:center;
}
.article-meta .tag{
background:var(--brand-light);
color:var(--brand);
padding:2px 10px;
border-radius:12px;
font-weight:600;
transition:background .25s var(--ease),color .25s var(--ease);
}
.article-card:hover .article-meta .tag{
background:var(--accent-light);
color:var(--accent);
}
.article-body h3{
font-size:18px;
font-weight:700;
margin-bottom:8px;
line-height:1.4;
}
.article-body h3 a{color:var(--text)}
.article-body h3 a:hover{color:var(--brand)}
.article-body p{
font-size:14px;
color:var(--text-soft);
flex:1;
margin-bottom:14px;
}
.read-more{
font-size:14px;
font-weight:600;
color:var(--brand);
display:inline-flex;
align-items:center;
gap:4px;
transition:gap .25s var(--ease),color .25s var(--ease);
}
.read-more:hover{color:var(--accent);gap:8px}

.faq-list{
max-width:900px;
margin:0 auto;
}
.faq-item{
border:1px solid var(--border);
border-radius:12px;
margin-bottom:12px;
background:var(--bg);
overflow:hidden;
transition:border-color .28s var(--ease),box-shadow .28s var(--ease),transform .28s var(--ease);
}
.faq-item:hover{
border-color:var(--brand);
box-shadow:0 6px 18px rgba(10,110,138,.10);
}
.faq-item.open{
border-color:var(--brand);
box-shadow:0 8px 24px rgba(10,110,138,.14);
}
.faq-q{
width:100%;
text-align:left;
background:none;
border:none;
padding:18px 22px;
font-size:16px;
font-weight:600;
color:var(--text);
cursor:pointer;
display:flex;
justify-content:space-between;
align-items:center;
gap:16px;
font-family:inherit;
transition:background .25s var(--ease),color .25s var(--ease);
}
.faq-q:hover{background:var(--bg-soft);color:var(--brand)}
.faq-q .faq-toggle{
flex:0 0 24px;
width:24px;
height:24px;
border-radius:50%;
background:var(--brand-light);
color:var(--brand);
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
line-height:1;
transition:transform .35s var(--ease),background .3s var(--ease),color .3s var(--ease);
}
.faq-item.open .faq-toggle{
transform:rotate(45deg);
background:var(--accent);
color:#fff;
}
.faq-a{
max-height:0;
overflow:hidden;
transition:max-height .4s var(--ease),padding .4s var(--ease);
padding:0 22px;
}
.faq-item.open .faq-a{
max-height:700px;
padding:0 22px 18px;
}
.faq-a p{
font-size:15px;
color:var(--text-soft);
margin:0;
}

.howto-steps{
counter-reset:step;
max-width:900px;
margin:0 auto;
}
.howto-step{
position:relative;
padding:0 0 28px 64px;
border-left:2px dashed var(--border);
margin-left:24px;
transition:transform .3s var(--ease);
}
.howto-step:hover{transform:translateX(4px)}
.howto-step:last-child{
border-left:none;
padding-bottom:0;
}
.howto-step::before{
counter-increment:step;
content:counter(step);
position:absolute;
left:-24px;
top:0;
width:46px;
height:46px;
border-radius:50%;
background:linear-gradient(135deg,var(--brand),var(--brand-dark));
color:#fff;
font-weight:800;
font-size:18px;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 0 0 4px var(--bg),0 4px 12px rgba(10,110,138,.28);
transition:transform .35s var(--ease),background .35s var(--ease);
}
.howto-step:hover::before{
transform:scale(1.08) rotate(-6deg);
background:linear-gradient(135deg,var(--accent),#c9742a);
}
.howto-step h3{
font-size:18px;
margin-bottom:6px;
}
.howto-step p{
font-size:15px;
color:var(--text-soft);
}

.case-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
}
.case-card{
background:var(--bg);
border:1px solid var(--border);
border-radius:var(--radius);
padding:24px;
box-shadow:var(--shadow);
transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.case-card:hover{
transform:translateY(-6px);
box-shadow:0 16px 38px rgba(10,110,138,.18);
border-color:var(--accent);
}
.case-card .case-tag{
display:inline-block;
font-size:12px;
font-weight:700;
color:var(--accent);
background:var(--accent-light);
padding:2px 10px;
border-radius:12px;
margin-bottom:12px;
}
.case-card h3{
font-size:17px;
margin-bottom:8px;
}
.case-card p{
font-size:14px;
color:var(--text-soft);
}

.testimonials{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
}
.testimonial{
background:var(--bg);
border:1px solid var(--border);
border-radius:var(--radius);
padding:24px;
box-shadow:var(--shadow);
position:relative;
overflow:hidden;
transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.testimonial:hover{
transform:translateY(-6px);
box-shadow:0 16px 38px rgba(10,110,138,.18);
border-color:var(--brand);
}
.testimonial::before{
content:"“";
position:absolute;
top:6px;
right:18px;
font-size:56px;
color:var(--brand-light);
font-family:Georgia,serif;
line-height:1;
transition:color .3s var(--ease),transform .3s var(--ease);
}
.testimonial:hover::before{
color:var(--accent-light);
transform:scale(1.1);
}
.testimonial p{
font-size:15px;
color:var(--text-soft);
margin-bottom:16px;
position:relative;
z-index:1;
}
.testimonial .who{
display:flex;
align-items:center;
gap:12px;
}
.testimonial .who .avatar{
width:44px;
height:44px;
border-radius:50%;
overflow:hidden;
flex:0 0 44px;
box-shadow:0 0 0 2px var(--border);
transition:box-shadow .3s var(--ease),transform .3s var(--ease);
}
.testimonial:hover .who .avatar{
box-shadow:0 0 0 2px var(--accent);
transform:scale(1.05);
}
.testimonial .who .name{font-weight:700;font-size:14px}
.testimonial .who .role{font-size:12px;color:var(--text-soft)}

.news-list{
max-width:900px;
margin:0 auto;
}
.news-item{
display:flex;
gap:20px;
padding:18px 0;
border-bottom:1px solid var(--border);
align-items:flex-start;
transition:transform .3s var(--ease),padding-left .3s var(--ease);
}
.news-item:hover{
transform:translateX(4px);
padding-left:6px;
}
.news-item:last-child{border-bottom:none}
.news-date{
flex:0 0 90px;
text-align:center;
background:var(--brand-light);
border-radius:12px;
padding:8px 0;
color:var(--brand);
transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
}
.news-item:hover .news-date{
background:var(--accent-light);
color:var(--accent);
transform:scale(1.04);
}
.news-date .d{
font-size:22px;
font-weight:800;
line-height:1.1;
}
.news-date .m{font-size:12px}
.news-body h3{
font-size:17px;
margin-bottom:4px;
}
.news-body h3 a{color:var(--text)}
.news-body h3 a:hover{color:var(--brand)}
.news-body p{
font-size:14px;
color:var(--text-soft);
}

.contact-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:36px;
align-items:start;
}
.contact-info{
background:var(--bg);
border:1px solid var(--border);
border-radius:var(--radius);
padding:28px;
box-shadow:var(--shadow);
transition:box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.contact-info:hover{
box-shadow:0 16px 38px rgba(10,110,138,.16);
border-color:var(--brand);
}
.contact-info h3{
font-size:20px;
margin-bottom:16px;
}
.contact-info dl{
display:grid;
grid-template-columns:90px 1fr;
gap:10px 12px;
font-size:15px;
}
.contact-info dt{
color:var(--text-soft);
font-weight:600;
}
.contact-info dd{color:var(--text)}
.contact-info dd a{color:var(--brand)}
.contact-info dd a:hover{color:var(--accent)}
.contact-map{
background:var(--bg);
border:1px solid var(--border);
border-radius:var(--radius);
padding:20px;
box-shadow:var(--shadow);
transition:box-shadow .3s var(--ease),transform .3s var(--ease);
}
.contact-map:hover{
box-shadow:0 16px 38px rgba(10,110,138,.16);
transform:translateY(-4px);
}
.contact-map figcaption{
font-size:13px;
color:var(--text-soft);
text-align:center;
margin-top:10px;
}

.sitemap-cols{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;
}
.sitemap-col h4{
font-size:15px;
margin-bottom:12px;
color:var(--brand-dark);
}
.sitemap-col ul{list-style:none}
.sitemap-col ul li{
margin-bottom:8px;
font-size:14px;
}
.sitemap-col ul li a{
color:var(--text-soft);
display:inline-block;
transition:color .22s var(--ease),transform .22s var(--ease);
}
.sitemap-col ul li a:hover{
color:var(--brand);
transform:translateX(3px);
}

.friend-links{
display:flex;
flex-wrap:wrap;
gap:10px 22px;
justify-content:center;
}
.friend-links a{
font-size:14px;
color:var(--text-soft);
transition:color .22s var(--ease),transform .22s var(--ease);
}
.friend-links a:hover{
color:var(--brand);
transform:translateY(-2px);
}

.footer{
background:linear-gradient(180deg,var(--brand-dark),#053f4d);
color:#cfe4ea;
padding:48px 0 0;
font-size:14px;
position:relative;
overflow:hidden;
}
.footer::before{
content:"";
position:absolute;
left:-60px;
bottom:-60px;
width:240px;
height:240px;
border-radius:50%;
background:rgba(255,255,255,.04);
pointer-events:none;
}
.footer a{color:#cfe4ea}
.footer a:hover{color:#fff}
.footer-grid{
display:grid;
grid-template-columns:1.4fr 1fr 1fr 1fr;
gap:32px;
padding-bottom:36px;
border-bottom:1px solid rgba(255,255,255,.15);
}
.footer h4{
color:#fff;
font-size:15px;
margin-bottom:14px;
}
.footer ul{list-style:none}
.footer ul li{
margin-bottom:8px;
transition:transform .22s var(--ease);
}
.footer ul li:hover{transform:translateX(3px)}
.footer .footer-brand p{
font-size:13px;
color:#b9d5dd;
margin-bottom:10px;
line-height:1.7;
}
.footer-bottom{
padding:20px 0;
font-size:13px;
color:#a9c8d1;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
gap:10px;
align-items:center;
}
.footer-bottom .legal-links{
display:flex;
gap:16px;
flex-wrap:wrap;
}

.back-top{
position:fixed;
right:24px;
bottom:24px;
width:48px;
height:48px;
border-radius:50%;
background:linear-gradient(135deg,var(--brand),var(--brand-dark));
color:#fff;
border:none;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 8px 24px rgba(10,110,138,.35);
opacity:0;
visibility:hidden;
transform:translateY(12px);
transition:opacity .3s var(--ease),visibility .3s var(--ease),transform .3s var(--ease),background .3s var(--ease);
z-index:900;
}
.back-top.show{
opacity:1;
visibility:visible;
transform:translateY(0);
}
.back-top:hover{
background:linear-gradient(135deg,var(--accent),#c9742a);
transform:translateY(-3px);
}

.reveal{
opacity:0;
transform:translateY(24px);
transition:opacity .7s var(--ease),transform .7s var(--ease);
will-change:opacity,transform;
}
.reveal.visible{
opacity:1;
transform:none;
}

.breadcrumb{
font-size:13px;
color:var(--text-soft);
padding:14px 0;
border-bottom:1px solid var(--border);
background:var(--bg-soft);
transition:background .35s var(--ease);
}
.breadcrumb ol{
list-style:none;
display:flex;
flex-wrap:wrap;
gap:6px;
align-items:center;
}
.breadcrumb li::after{
content:"/";
margin-left:6px;
color:var(--border);
}
.breadcrumb li:last-child::after{content:""}
.breadcrumb a{color:var(--text-soft)}
.breadcrumb a:hover{color:var(--brand)}
.breadcrumb [aria-current]{
color:var(--brand);
font-weight:600;
}

.carousel{
position:relative;
overflow:hidden;
border-radius:var(--radius);
background:var(--bg);
border:1px solid var(--border);
box-shadow:var(--shadow);
}
.carousel-track{
display:flex;
transition:transform .6s var(--ease);
}
.carousel-slide{
flex:0 0 100%;
padding:32px;
min-height:220px;
display:flex;
flex-direction:column;
justify-content:center;
}
.carousel-slide h3{
font-size:20px;
margin-bottom:10px;
}
.carousel-slide p{
font-size:15px;
color:var(--text-soft);
}
.carousel-dots{
display:flex;
justify-content:center;
gap:8px;
padding:0 0 16px;
}
.carousel-dots button{
width:10px;
height:10px;
border-radius:50%;
border:none;
background:var(--border);
cursor:pointer;
padding:0;
transition:all .25s var(--ease);
}
.carousel-dots button:hover{background:var(--brand)}
.carousel-dots button.active{
background:var(--brand);
width:24px;
border-radius:5px;
}

.anchor-nav{
position:sticky;
top:64px;
z-index:50;
background:var(--glass);
-webkit-backdrop-filter:blur(12px) saturate(160%);
backdrop-filter:blur(12px) saturate(160%);
border-bottom:1px solid var(--border);
overflow-x:auto;
white-space:nowrap;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.anchor-nav::-webkit-scrollbar{display:none}
.anchor-nav ul{
list-style:none;
display:flex;
gap:4px;
padding:8px 20px;
max-width:1180px;
margin:0 auto;
}
.anchor-nav a{
padding:6px 14px;
border-radius:20px;
font-size:14px;
color:var(--text-soft);
display:inline-block;
transition:background .22s var(--ease),color .22s var(--ease),transform .22s var(--ease);
}
.anchor-nav a:hover{
background:var(--brand-light);
color:var(--brand);
transform:translateY(-1px);
}

.notice{
background:var(--accent-light);
border-left:4px solid var(--accent);
padding:12px 18px;
border-radius:0 10px 10px 0;
font-size:14px;
color:var(--text);
margin:18px 0;
transition:transform .3s var(--ease);
}
.notice:hover{transform:translateX(4px)}

.tag-cloud{
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:center;
}
.tag-cloud a{
background:var(--bg-soft);
border:1px solid var(--border);
padding:6px 16px;
border-radius:20px;
font-size:14px;
color:var(--text-soft);
transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
}
.tag-cloud a:hover{
background:var(--brand-light);
color:var(--brand);
border-color:var(--brand);
transform:translateY(-3px);
box-shadow:0 6px 16px rgba(10,110,138,.16);
}

@media(max-width:960px){
.hero-grid{grid-template-columns:1fr}
.grid-3,.case-grid,.testimonials{grid-template-columns:repeat(2,1fr)}
.stats{grid-template-columns:repeat(2,1fr)}
.footer-grid{grid-template-columns:1fr 1fr}
.sitemap-cols{grid-template-columns:repeat(2,1fr)}
.contact-grid{grid-template-columns:1fr}
.article-grid{grid-template-columns:1fr}
.hero h1{font-size:32px}
}

@media(max-width:720px){
.nav,.search-box{display:none}
.mobile-toggle{display:flex}
.nav.open{
display:flex;
position:absolute;
top:100%;
left:0;
right:0;
background:var(--glass);
-webkit-backdrop-filter:blur(16px) saturate(160%);
backdrop-filter:blur(16px) saturate(160%);
flex-direction:column;
padding:12px 20px;
border-bottom:1px solid var(--border);
box-shadow:var(--shadow);
animation:navDrop .3s var(--ease);
}
@keyframes navDrop{
from{opacity:0;transform:translateY(-8px)}
to{opacity:1;transform:translateY(0)}
}
.nav.open a{padding:10px 12px}
.hero{
padding:40px 0 48px;
}
.hero h1{font-size:26px}
.hero .hero-lead{font-size:15px}
.hero .hero-points{grid-template-columns:1fr}
.hero-cta .btn{
flex:1 1 auto;
text-align:center;
padding:12px 18px;
}
.grid-3,.case-grid,.testimonials{grid-template-columns:1fr}
.section{padding:44px 0}
.section-head h2{font-size:23px}
.prose h2{font-size:23px}
.prose h3{font-size:19px}
.footer-grid{grid-template-columns:1fr}
.sitemap-cols{grid-template-columns:1fr}
.news-item{
flex-direction:column;
gap:8px;
}
.news-date{
flex:none;
width:70px;
}
.contact-info dl{grid-template-columns:80px 1fr}
.anchor-nav{top:60px}
.stats{gap:10px}
.stat{padding:12px 8px}
.stat .num{font-size:22px}
.back-top{
right:16px;
bottom:16px;
width:44px;
height:44px;
}
.howto-step{padding-left:52px;margin-left:20px}
.howto-step::before{width:40px;height:40px;left:-20px;font-size:16px}
}

@media(max-width:400px){
.hero h1{font-size:22px}
.section-head h2{font-size:20px}
.card{padding:20px}
.contact-info{padding:20px}
}

@media(prefers-reduced-motion:reduce){
*{
animation:none!important;
transition:none!important;
scroll-behavior:auto!important;
}
.reveal{opacity:1;transform:none}
.hero::before{animation:none}
}

@media print{
.header,.topbar,.anchor-nav,.back-top,.footer,#contact,#sitemap{display:none!important}
body{background:#fff;color:#000}
.hero{background:#fff;color:#000;padding:20px 0}
.hero h1,.hero .hero-lead,.hero .hero-points li{color:#000}
}