:root{
  --bg:#0b0e12;
  --text:#e9eef3;
  --muted:#97a3b6;
  --accent:#1c93e4;
  --card:#131821;
  --line:#223042;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans','Apple Color Emoji','Segoe UI Emoji';
  color:var(--text);
  background:linear-gradient(180deg, #0b0e12, #0f141c);
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px; margin:0 auto; padding:24px}
.header{
  background:#0c1118;
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:100;
}
.header .inner{display:flex; align-items:center; gap:18px; padding:12px 24px}
.header img.logo{height:48px}
.nav a{margin:0 10px; font-weight:600}
.hero{
  background:url('../img/cover4.png') center/cover no-repeat;
  min-height:360px; display:flex; align-items:flex-end;
  border-bottom:1px solid var(--line);
}
.hero .overlay{background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(8,10,14,0.8) 60%, rgba(8,10,14,1) 100%); width:100%}
.hero .copy{padding:32px 24px}
.hero h1{font-size:40px; margin:0 0 6px}
.hero p{max-width:800px; color:#cfe4ff; margin:0}
.main{padding:24px}
.grid{display:grid; grid-template-columns:repeat(12,1fr); gap:18px}
.card{grid-column:span 12; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px}
@media (min-width: 900px){
  .card.half{grid-column:span 6}
}
.footer{
  border-top:1px solid var(--line); color:var(--muted);
  padding:24px; text-align:center; font-size:14px
}
.badge{display:inline-block; background:#0f1a26; border:1px solid var(--line); color:#cfe4ff; padding:4px 10px; border-radius:999px; font-size:12px}
ul.inline{display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding-left:0}
ul.inline li::marker{content:''}
h1,h2,h3,h4,h5,h6{scroll-margin-top:100px}
table{width:100%; border-collapse:collapse; font-size:15px}
th, td{padding:10px; border-bottom:1px solid var(--line)}
tr:hover td{background:#0f141c}
kbd{background:#0d1822; border:1px solid var(--line); padding:2px 6px; border-radius:6px}
form input, form textarea{
  width:100%; background:#0d1420; color:var(--text); border:1px solid var(--line);
  padding:10px 12px; border-radius:10px; outline:none
}
form button{
  background:var(--accent); color:white; border:0; padding:10px 14px; border-radius:12px; font-weight:700; cursor:pointer
}
small.muted{color:var(--muted)}