:root{
--bg:#f7f9fb;
--card:#ffffff;
--primary:#004D7A; --accent:#FF6B35; --green:#2E8B57; --muted:#6b7280;
--glass: rgba(255,255,255,0.7);
--radius:14px;
color-scheme: light;
} .hero{
position:relative;
height:64vh;
min-height:420px;
display:flex;
align-items:center;
}
.hero .poster{
position:absolute;
inset:0;
width:100%;
height:100%;
background-size: cover;
background-repeat:no-repeat;
}
.hero::after{
content:'';
position:absolute;
inset:0;
background:linear-gradient(180deg, rgba(2,6,23,0.15), rgba(2,6,23,0.45));
}
.hero-content{
position:relative;
z-index:2;
max-width:1200px;
margin:0 auto;
padding:48px;display:flex;gap:24px;align-items:center;}
.hero-left{
flex:1;
color:white;
}
.hero-left h2{
font-family:Montserrat, sans-serif;
font-size:44px;
margin:0 0 12px;
line-height:1.02;
color: white;
}
.hero-left p{
color:rgba(255,255,255,0.9);
margin:0 0 18px;
font-size:18px;
}
.hero-btn-row{
display:flex;gap:12px
}
.hero-btn{
padding:12px 18px;
border-radius:10px;
border:0;
cursor:pointer;
font-weight:700;
text-decoration: none !important;
}
.hero-btn-primary{
background:var(--accent);
color:white;
box-shadow:0 8px 30px rgba(255,107,53,0.14);
}
.hero-right{
width:420px;
min-width:280px;
background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
backdrop-filter: blur(6px);padding:16px;border-radius:14px;border:1px solid rgba(255,255,255,0.06);
}
.hero-right h4{
color:rgba(255,255,255,0.9);
}
.hero .muted{
color:rgba(255,255,255,0.9);
}
.hero-card{
display:flex;
flex-direction:column;
gap:8px;
}
.meta{
display:flex;
gap:8px;
align-items:center;
}
.badge{
background:var(--green);
color:white;
padding:6px 8px;
border-radius:8px;
font-weight:700;
font-size:12px;
} .flat-hero{
position:relative; min-height:420px;
display:flex;
align-items:center;
}
.flat-hero .poster{
position:absolute;
inset:0;
width:100%;
height:100%;
background-size: cover;
background-repeat:no-repeat;
}
.flat-hero::after{
content:'';
position:absolute;
inset:0;
background:linear-gradient(180deg, rgba(2,6,23,0.15), rgba(2,6,23,0.45));
}
.flat-hero-content{
position:relative;
z-index:2;
max-width:1200px;
margin:0 auto;
padding:48px;
display:flex;
gap:24px;
align-items:center;}
.flat-hero-left{
flex:1;
color:white;
}
.flat-hero-left h2{
font-family:Montserrat, sans-serif;
font-size:44px;
margin:0 0 12px;
line-height:1.02;
color: white;
}
.flat-hero-left p{
color:rgba(255,255,255,0.9);
margin:0 0 18px;
font-size:18px;
}
.flat-hero-btn-row{
display:flex;gap:12px
}
.flat-hero-btn{
padding:12px 18px;
border-radius:10px;
border:0;
cursor:pointer;
font-weight:700;
}
.flat-hero-btn-primary{
background:var(--accent);
color:white;
box-shadow:0 8px 30px rgba(255,107,53,0.14);
}
.grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
} .card{
background:var(--card); 
border-radius:12px;
overflow:hidden;
border:1px solid rgba(15,23,42,0.04);
box-shadow:0 8px 30px rgba(12,16,25,0.1);
transition:transform .35s ease, box-shadow .35s ;
}
.card:hover{
transform:translateY(-8px);
box-shadow:0 18px 60px rgba(12,16,25,0.08);
}
.card-figure{
height:160px;
overflow:hidden;
}
.card-figure img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform .6s ease;
}
.card:hover .card-figure img{
transform:scale(1.08);
}
.card-body{
padding:14px;
}
.card-title{
font-weight:700;
margin:0 0 8px;
font-size:16px;
}
.card-desc{
color:var(--muted);
font-size:14px;
margin:0 0 12px;
}
.card-meta{display:flex;
justify-content:space-between;
align-items:center;
}
.pill{
background:rgba(0,0,0,0.05);
padding:6px 8px;
border-radius:999px;
font-size:13px;
} @media (max-width: 980px){
.hero,.flat-hero{
height:56vh;
}
.hero-left,.flat-hero-left h2{
font-size:34px;
} .grid{
grid-template-columns:repeat(2,1fr);
}
}
@media (max-width:640px){
.nav{
padding:12px;
}
.hero,.flat-hero{
height:48vh;
}
.hero-left h2{
font-size:26px;
}
.hero-content,.flat-hero-content{
padding:20px;
}
.grid{
grid-template-columns:1fr;
}
} .muted{
color:var(--muted);font-size:13px;
}