:root{ --bg:#0D1117; --panel:#111827; --ink:#E5E7EB; --muted:#9CA3AF; --brand:#0EA5E9; --brand-2:#415A77; --line:#1F2937; --chip:#0B1320; --hover:#0b2236; --ok:#10B981; --warn:#F59E0B; } *{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;line-height:1.5} a{color:var(--ink);text-decoration:none} a.btn{background:var(--brand);color:#001018;padding:.75rem 1rem;border-radius:1rem;font-weight:600;display:inline-block} a.btn:hover{background:#0891c6} .container{max-width:1200px;margin:0 auto;padding:1.25rem} .nav{display:flex;gap:1rem;align-items:center;justify-content:space-between;padding:1rem 0;border-bottom:1px solid var(--line)} .nav .brand{font-weight:800;letter-spacing:.3px} .nav .links a{padding:.5rem .75rem;border-radius:.75rem} .nav .links a:hover{background:var(--hover)} .hero{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;align-items:center;padding:2rem 0} .hero img{width:100%;height:auto;border-radius:1.25rem;box-shadow:0 10px 40px rgba(0,0,0,.35)} .badges{display:flex;gap:.5rem;flex-wrap:wrap;margin:.5rem 0} .badge{background:var(--chip);border:1px solid var(--line);padding:.4rem .7rem;border-radius:999px;font-size:.85rem;color:var(--muted)} .section{padding:2rem 0} .h2{font-size:2rem;margin:.5rem 0 1rem} .lead{color:var(--muted);max-width:60ch} .grid{display:grid;gap:1rem} .grid.cols-3{grid-template-columns:repeat(3,1fr)} .grid.cols-4{grid-template-columns:repeat(4,1fr)} .card{background:var(--panel);border:1px solid var(--line);border-radius:1rem;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.25)} .card .media{position:relative;aspect-ratio:4/3;overflow:hidden} .card .media img{width:100%;height:100%;object-fit:cover;display:block} .card .body{padding:1rem} .footer{border-top:1px solid var(--line);color:var(--muted);padding:2rem 0;margin-top:2rem} .kicker{letter-spacing:.16em;text-transform:uppercase;color:var(--brand);font-weight:700} .cta{display:flex;gap:1rem;align-items:center;margin-top:1rem} .banner{position:relative;border-radius:1rem;overflow:hidden} .banner img{width:100%;height:320px;object-fit:cover;display:block;filter:contrast(1.05)} .banner .overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(13,17,23,.0), rgba(13,17,23,.7))} .banner .title{position:absolute;bottom:1rem;left:1rem;font-size:2rem;font-weight:800} .grid .card .tags{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem} .tag{font-size:.75rem;padding:.25rem .5rem;border-radius:.5rem;background:var(--chip);border:1px solid var(--line);color:var(--muted)} @media (max-width: 960px){ .hero{grid-template-columns:1fr} .grid.cols-4{grid-template-columns:repeat(2,1fr)} } @media (max-width: 600px){ .grid.cols-3{grid-template-columns:1fr} .grid.cols-4{grid-template-columns:1fr} }  @media (max-width:960px){} @media (max-width:600px){}  @media(max-width:960px){} @media(max-width:600px){}  .nav img.logo{height:120px;display:block} @media(max-width:960px){.nav img.logo{height:96px}} @media(max-width:600px){.nav img.logo{height:72px}}