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

:root{
--primary:#1e40af;
--primary-light:#3b82f6;
--primary-dark:#1e3a8a;
--secondary:#059669;
--secondary-light:#10b981;
--accent:#f59e0b;
--dark:#111827;
--darker:#0f172a;
--text:#374151;
--text-light:#6b7280;
--light:#f9fafb;
--border:#e5e7eb;
--shadow-sm:0 1px 2px rgba(0,0,0,0.05);
--shadow:0 4px 6px rgba(0,0,0,0.07);
--shadow-lg:0 10px 30px rgba(0,0,0,0.12);
--transition:all 0.3s ease
}

body{
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
line-height:1.7;
color:var(--text);
background:#fff;
font-size:16px;
overflow-x:hidden
}

.container{
max-width:1280px;
margin:0 auto;
padding:0 1.5rem
}

header{
background:#fff;
box-shadow:var(--shadow);
position:sticky;
top:0;
z-index:999;
transition:var(--transition)
}

.nav-wrap{
display:flex;
justify-content:space-between;
align-items:center;
padding:1rem 1.5rem;
max-width:1280px;
margin:0 auto
}

.logo{
font-size:1.8rem;
font-weight:900;
color:var(--primary);
text-decoration:none;
letter-spacing:-0.5px;
transition:var(--transition)
}

.logo:hover{
color:var(--primary-light)
}

nav ul{
display:none;
list-style:none;
margin:0;
padding:0
}

nav.active ul{
display:block;
position:absolute;
top:100%;
left:0;
right:0;
background:#fff;
box-shadow:var(--shadow-lg);
padding:1rem 0;
animation:slideDown 0.3s ease
}

@keyframes slideDown{
from{
opacity:0;
transform:translateY(-10px)
}
to{
opacity:1;
transform:translateY(0)
}
}

nav ul li{
margin:0
}

nav ul li a{
display:block;
padding:1rem 1.5rem;
color:var(--dark);
text-decoration:none;
font-weight:600;
transition:var(--transition);
position:relative
}

nav ul li a::before{
content:'';
position:absolute;
left:0;
top:50%;
transform:translateY(-50%);
width:0;
height:3px;
background:var(--primary);
transition:width 0.3s ease
}

nav ul li a:hover{
background:var(--light);
color:var(--primary);
padding-left:2rem
}

nav ul li a:hover::before{
width:4px
}

.menu-toggle{
display:block;
background:none;
border:none;
cursor:pointer;
padding:0.5rem;
z-index:1000;
transition:var(--transition)
}

.menu-toggle:hover{
transform:scale(1.1)
}

.menu-toggle span{
display:block;
width:26px;
height:3px;
background:var(--dark);
margin:5px 0;
transition:var(--transition);
border-radius:3px
}

.menu-toggle.active span:nth-child(1){
transform:rotate(45deg) translate(7px,7px)
}

.menu-toggle.active span:nth-child(2){
opacity:0
}

.menu-toggle.active span:nth-child(3){
transform:rotate(-45deg) translate(7px,-7px)
}

.hero{
background:linear-gradient(135deg,#1e40af 0%,#3b82f6 100%);
color:#fff;
padding:4rem 1.5rem;
text-align:center;
position:relative;
overflow:hidden
}

.hero::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-size:cover;
background-position:center;
opacity:0.12;
z-index:0
}

.hero-content{
position:relative;
z-index:1;
max-width:900px;
margin:0 auto
}

.hero h1{
font-size:2.2rem;
font-weight:900;
margin-bottom:1.2rem;
line-height:1.2;
text-shadow:0 2px 10px rgba(0,0,0,0.3);
animation:fadeInUp 0.6s ease
}

@keyframes fadeInUp{
from{
opacity:0;
transform:translateY(20px)
}
to{
opacity:1;
transform:translateY(0)
}
}

.hero-desc{
font-size:1.1rem;
margin-bottom:2rem;
opacity:0.95;
line-height:1.8;
animation:fadeInUp 0.8s ease
}

.hero-cta{
display:flex;
flex-direction:column;
gap:1rem;
max-width:400px;
margin:0 auto;
animation:fadeInUp 1s ease
}

.btn{
padding:1rem 2rem;
font-size:1.05rem;
font-weight:700;
text-decoration:none;
border-radius:8px;
transition:var(--transition);
display:inline-block;
text-align:center;
border:none;
cursor:pointer;
box-shadow:var(--shadow)
}

.btn:active{
transform:scale(0.98)
}

.btn-primary{
background:#fff;
color:var(--primary);
box-shadow:0 4px 15px rgba(0,0,0,0.2)
}

.btn-primary:hover{
transform:translateY(-2px);
box-shadow:0 6px 20px rgba(0,0,0,0.3)
}

.btn-outline{
background:transparent;
color:#fff;
border:2px solid #fff
}

.btn-outline:hover{
background:#fff;
color:var(--primary)
}

main{
display:block
}

section{
padding:4rem 1.5rem
}

.section-header{
text-align:center;
margin-bottom:3rem;
animation:fadeInUp 0.6s ease
}

.section-title{
font-size:2rem;
font-weight:900;
color:var(--dark);
margin-bottom:1rem;
line-height:1.3
}

.section-desc{
font-size:1.05rem;
color:var(--text-light);
max-width:700px;
margin:0 auto;
line-height:1.8
}

.card-grid{
display:grid;
grid-template-columns:1fr;
gap:2rem
}

.card{
background:#fff;
border-radius:16px;
overflow:hidden;
box-shadow:var(--shadow);
transition:var(--transition);
border:1px solid var(--border);
animation:fadeInUp 0.6s ease
}

.card:hover{
box-shadow:var(--shadow-lg);
transform:translateY(-5px)
}

.card-img{
width:100%;
height:240px;
object-fit:cover;
transition:var(--transition)
}

.card:hover .card-img{
transform:scale(1.05)
}

.card-body{
padding:1.8rem
}

.card-title{
font-size:1.4rem;
font-weight:800;
color:var(--dark);
margin-bottom:1rem;
line-height:1.3
}

.card-text{
color:var(--text);
line-height:1.8;
margin-bottom:1rem
}

.card-list{
list-style:none;
margin-bottom:1.5rem
}

.card-list li{
padding:0.5rem 0;
padding-left:1.8rem;
position:relative;
color:var(--text);
line-height:1.6
}

.card-list li::before{
content:'✓';
position:absolute;
left:0;
color:var(--secondary);
font-weight:900;
font-size:1.1rem
}

.card-link{
color:var(--primary);
text-decoration:none;
font-weight:700;
display:inline-flex;
align-items:center;
transition:var(--transition);
position:relative
}

.card-link::after{
content:'→';
margin-left:0.3rem;
transition:var(--transition)
}

.card-link:hover{
color:var(--primary-light);
gap:0.5rem
}

.card-link:hover::after{
transform:translateX(5px)
}

.bg-light{
background:var(--light)
}

.bg-dark{
background:var(--dark);
color:#fff
}

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

.bg-dark .section-desc{
color:#d1d5db
}

.faq-item{
background:#fff;
border-radius:12px;
margin-bottom:1.5rem;
box-shadow:var(--shadow);
border-left:4px solid var(--primary);
overflow:hidden;
transition:var(--transition)
}

.faq-item:hover{
box-shadow:var(--shadow-lg)
}

.faq-question{
font-size:1.15rem;
font-weight:700;
color:var(--dark);
padding:1.5rem 1.8rem;
cursor:pointer;
display:flex;
justify-content:space-between;
align-items:center;
transition:var(--transition);
user-select:none;
margin:0
}

.faq-question:hover{
background:var(--light);
color:var(--primary)
}

.faq-icon{
font-size:1.5rem;
font-weight:700;
color:var(--primary);
transition:var(--transition);
flex-shrink:0;
margin-left:1rem
}

.faq-question[aria-expanded="true"] .faq-icon{
transform:rotate(45deg)
}

.faq-answer{
padding:0 1.8rem;
color:var(--text);
line-height:1.9;
max-height:0;
overflow:hidden;
transition:max-height 0.3s ease,padding 0.3s ease
}

.faq-item.active .faq-answer{
max-height:2000px;
padding:0 1.8rem 1.5rem
}

.faq-answer p{
margin-bottom:1rem
}

.faq-answer p:last-child{
margin-bottom:0
}

.faq-answer strong{
color:var(--dark);
font-weight:700
}

footer{
background:var(--darker);
color:#9ca3af;
padding:3rem 1.5rem 2rem
}

footer a{
color:#9ca3af;
text-decoration:none;
transition:var(--transition)
}

footer a:hover{
color:#fff
}

footer nav{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:2rem;
margin-bottom:2rem
}

footer > div > div:last-child{
padding-top:2rem;
border-top:1px solid #374151;
text-align:center
}

footer p{
margin-bottom:0.8rem;
line-height:1.6
}

footer p:last-child{
margin-bottom:0
}

@media (min-width:640px){
.hero h1{
font-size:2.8rem
}

.section-title{
font-size:2.3rem
}

.card-grid{
grid-template-columns:repeat(2,1fr)
}

.hero-cta{
flex-direction:row;
justify-content:center;
max-width:none
}
}

@media (min-width:768px){
nav ul{
display:flex;
position:static;
box-shadow:none;
padding:0;
background:transparent;
animation:none
}

nav ul li{
margin-left:2rem
}

nav ul li a{
padding:0.5rem 1rem;
background:transparent
}

nav ul li a::before{
display:none
}

nav ul li a:hover{
padding-left:1rem;
background:transparent;
color:var(--primary)
}

.menu-toggle{
display:none
}

.hero h1{
font-size:3.2rem
}

.section-title{
font-size:2.5rem
}

section{
padding:5rem 1.5rem
}
}

@media (min-width:1024px){
.card-grid{
grid-template-columns:repeat(3,1fr)
}

.hero h1{
font-size:3.5rem
}

.hero{
padding:5rem 1.5rem
}
}

@media (min-width:1280px){
.section-title{
font-size:2.8rem
}
}

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