:root{
--bg:#0b0f14;--panel:#111820;--yellow:#ffcc00;--orange:#ff7a00;--text:#fff;--muted:#bfc6cf;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
background:var(--bg);
color:var(--text);
font-family:Arial,Helvetica,sans-serif;
line-height:1.6;
overflow-x:hidden;
}
.container{
width:min(95%,1200px);
margin:auto;
}
.header{
background:#05070a;
padding:16px 0;
border-bottom:1px solid rgba(255,255,255,.08);
}
.top{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
flex-wrap:wrap;
}
.brand{
display:flex;
align-items:center;
gap:14px;
}
.brand img{
width:88px;
height:58px;
object-fit:contain;
}
.brand h1{
font-size:clamp(18px,3vw,26px);
color:var(--yellow);
}
main{
padding:30px 0;
}
.card{
background:var(--panel);
border-radius:24px;
padding:24px;
margin-bottom:22px;
border:1px solid rgba(255,255,255,.08);
}
.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:18px;
}
.service{
background:#0b0f14;
border-radius:20px;
padding:20px;
border:1px solid rgba(255,255,255,.08);
overflow:hidden;
}
.service h3{
color:var(--yellow);
font-size:clamp(20px,2vw,26px);
margin-bottom:12px;
}
.service p{
word-break:break-word;
}
.media{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:14px;
margin-top:16px;
}
.media img,
.media video{
width:100%;
height:auto;
max-height:320px;
object-fit:cover;
border-radius:18px;
background:#000;
}
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:14px 22px;
border-radius:999px;
font-weight:900;
text-decoration:none;
border:none;
cursor:pointer;
background:linear-gradient(135deg,var(--yellow),var(--orange));
color:#080b10;
}
.btn.dark{
background:#0b0f14;
color:#fff;
border:1px solid rgba(255,255,255,.14);
}
.actions{
display:flex;
gap:12px;
flex-wrap:wrap;
margin-top:18px;
}
input,textarea,select{
width:100%;
padding:14px;
background:#080b10;
border:1px solid rgba(255,255,255,.12);
border-radius:14px;
color:#fff;
font-size:16px;
}
label{
display:block;
margin:12px 0 8px;
color:#ddd;
}
@media(max-width:768px){
.card{
padding:18px;
border-radius:20px;
}
.top{
align-items:flex-start;
}
.media{
grid-template-columns:1fr;
}
.service h3{
font-size:22px;
}
.btn{
width:100%;
}
}