*{
box-sizing:border-box;
}

body{
margin:0;
font-family:Arial, sans-serif;
background:linear-gradient(180deg, #eaf4ff 0%, #dbeeff 100%);
color:#0b2e59;
}

.topbar{
background:linear-gradient(135deg, #1565c0 0%, #0d47a1 100%);
color:#fff;
padding:14px 0;
font-size:18px;
}

.topbar .wrap{
max-width:1200px;
margin:0 auto;
padding:0 15px;
display:flex;
justify-content:space-between;
align-items:center;
gap:15px;
flex-wrap:wrap;
}

.topbar a{
color:#fff;
text-decoration:none;
font-weight:700;
}

.video-section{
padding:30px 15px 15px;
}

.video-wrap{
max-width:1000px;
margin:0 auto;
background:#fff;
border:2px solid #0d47a1;
border-radius:18px;
box-shadow:0 10px 30px rgba(13, 71, 161, 0.12);
overflow:hidden;
}

.video-box{
position:relative;
width:100%;
background:#000;
}

.video-box video{
width:100%;
height:360px;
object-fit:cover;
display:block;
background:#000;
}

.hero{
padding:20px 15px 35px;
}

.hero-box{
max-width:1200px;
margin:0 auto;
background:#fff;
border:2px solid #0d47a1;
border-radius:18px;
box-shadow:0 10px 30px rgba(13, 71, 161, 0.12);
padding:35px 30px;
}

.hero h1{
margin:0 0 12px;
font-size:48px;
font-weight:800;
color:#0d47a1;
}

.hero p{
margin:0 0 14px;
font-size:20px;
line-height:1.7;
color:#234b78;
max-width:900px;
}

.hero p:last-child{
margin-bottom:0;
}

.materials-section{
padding:0 15px 60px;
}

.materials-wrap{
max-width:1200px;
margin:0 auto;
}

.material-card{
background:#fff;
border:2px solid #cfe2ff;
border-radius:16px;
overflow:hidden;
box-shadow:0 8px 22px rgba(13, 71, 161, 0.08);
height:100%;
transition:0.3s ease;
position:relative;
}

.material-card:hover{
transform:translateY(-6px);
box-shadow:0 14px 28px rgba(13, 71, 161, 0.14);
border-color:#1565c0;
}

.material-number{
position:absolute;
top:12px;
left:12px;
background:linear-gradient(135deg, #1565c0 0%, #0d47a1 100%);
color:#fff;
width:44px;
height:44px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-weight:800;
font-size:18px;
box-shadow:0 4px 12px rgba(13, 71, 161, 0.35);
z-index:5;
border:2px solid #fff;
}

.material-img{
width:100%;
height:240px;
object-fit:cover;
display:block;
background:#eaf4ff;
}

.material-content{
padding:20px;
}

.material-content h3{
margin:0 0 10px;
font-size:28px;
color:#0d47a1;
font-weight:800;
}

.material-content p{
margin:0;
font-size:17px;
line-height:1.7;
color:#355b86;
}

.placeholder-box{
width:100%;
height:240px;
background:linear-gradient(135deg, #e3f0ff 0%, #cfe2ff 100%);
display:flex;
align-items:center;
justify-content:center;
color:#0d47a1;
font-weight:700;
font-size:18px;
text-align:center;
padding:20px;
}

.cta-box{
margin-top:35px;
background:linear-gradient(135deg, #1565c0 0%, #0d47a1 100%);
border-radius:18px;
color:#fff;
padding:28px 24px;
box-shadow:0 10px 25px rgba(13, 71, 161, 0.16);
}

.cta-box h2{
margin:0 0 10px;
font-size:34px;
font-weight:800;
}

.cta-box p{
margin:0 0 18px;
font-size:18px;
color:#e6f1ff;
}

.cta-btn{
display:inline-block;
background:#fff;
color:#0d47a1;
text-decoration:none;
font-weight:800;
padding:12px 20px;
border-radius:10px;
}

footer{
background:#0b2e59;
color:#d7e8ff;
text-align:center;
padding:18px 15px;
font-size:16px;
}

@media (max-width: 768px){
.video-wrap{
max-width:100%;
}

.video-box video{
height:240px;
}

.hero h1{
font-size:34px;
}

.hero p{
font-size:18px;
}

.material-img{
height:220px;
}

.material-content h3{
font-size:24px;
}

.material-number{
width:38px;
height:38px;
font-size:16px;
top:10px;
left:10px;
}
}
.call-btn{
display:inline-block;
background:linear-gradient(135deg, #1565c0 0%, #0d47a1 100%);
color:#fff;
text-decoration:none;
font-weight:700;
font-size:18px;
padding:12px 22px;
border-radius:10px;
border:none;
transition:0.3s ease;
}

.call-btn:hover{
background:linear-gradient(135deg, #0d47a1 0%, #08306b 100%);
color:#fff;
}