:root{--maxw:1020px;--pad:1rem;--radius:14px;--shadow:0 4px 18px rgba(0,0,0,.06)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; margin:0; line-height:1.65; color:#111}
a{color:#0a57d5; text-decoration-thickness:.08em; text-underline-offset:.15em}
a:hover{opacity:.9}
header{background:#0b1324; color:#fff}
header .container{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.logo{font-weight:800; letter-spacing:.2px}
nav ul{list-style:none; display:flex; gap:.5rem; margin:0; padding:0; flex-wrap:wrap}
nav a{color:#cfe1ff; padding:.5rem .75rem; border-radius:10px}
nav a[aria-current="page"], nav a:hover{background:#1a2a4a; color:#fff}
.container{max-width:var(--maxw); margin:0 auto; padding:var(--pad)}
main{max-width:var(--maxw); margin:0 auto; padding:clamp(.75rem, 2.5vw, 1.5rem)}
.hero{background:linear-gradient(180deg,#f7fbff,#fff); border:1px solid #e8f0ff; border-radius:var(--radius); padding:clamp(1rem,3vw,2rem); box-shadow:var(--shadow)}
.grid{display:grid; grid-template-columns:1fr; gap:1rem}
.card{background:#fff; border:1px solid #eee; border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow)}
@media(min-width:860px){.grid{grid-template-columns:repeat(3,1fr)}}
footer{background:#f7f7f8; border-top:1px solid #eee; margin-top:2rem}
small,.muted{color:#666}
.ad-box{display:block; margin:1.5rem auto; text-align:center; border:1px dashed #ddd; padding:.75rem; border-radius:10px; background:#fcfcfc}
.alert{background:#fff7e6; border:1px solid #ffe4b0; padding:.75rem; border-radius:10px}
figure{margin:0} img{max-width:100%; height:auto}
kbd{background:#f2f2f2; border:1px solid #e5e5e5; border-radius:4px; padding:.1rem .3rem}
table{border-collapse:collapse; width:100%} td,th{border:1px solid #eee; padding:.5rem; text-align:left}