:root{
	--brand-1:#60a5fa; --brand-2:#a78bfa; --brand-3:#34d399;
	--nav:#0b1220; --card-bg:#0b1220; --card-txt:#e2e8f0;
}
html,body{height:100%;}
body{font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans';}
.bg-gradient{background: radial-gradient(1200px 600px at 10% -10%, rgba(96,165,250,.25), transparent), radial-gradient(1000px 500px at 90% 0%, rgba(167,139,250,.25), transparent), #0b1220;}
.bg-nav{background: linear-gradient(90deg, rgba(8,15,53,1), rgba(8,15,53,1));}
.hero-gradient{background: linear-gradient(180deg, rgba(96,165,250,.20), rgba(52,211,153,.10));}
.card{border: none; border-radius: 14px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); color: var(--card-txt); box-shadow: 0 20px 50px rgba(2,6,23,.25); padding: 1.25rem; margin-bottom: 1rem;}
.thumb{width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:12px; box-shadow: 0 10px 20px rgba(2,6,23,.4);} 
.btn-brand{background: linear-gradient(90deg, var(--brand-1), var(--brand-2), var(--brand-3)); border:0; color:white;}
.btn-outline-brand{border:2px solid rgba(255,255,255,.25); color:white;}
.badge-soft{background: rgba(255,255,255,.1); color:#fff;}
.glass{backdrop-filter: blur(10px);}
.grid{display:grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(260px,1fr));}
.chip{display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .6rem; border-radius:999px; background: rgba(255,255,255,.08); color:#fff;}
.chip i{font-size: 1rem;}