/* --- 1. CONFIGURATION & VARIABLES --- */
		:root {
			/* Change your colors here */
			--bg-color: #0f0f11;	   /* Very dark background */
			--card-bg: #1c1c1f;		/* Slightly lighter cards */
			--card-hover: #252529;	 /* Hover state */
			--text-main: #ffffff;	  /* Main text color */
			--text-muted: #a1a1aa;	 /* Secondary text color */
			--accent-color: #0096D6;   
			--bg-image: url('background.jpg'); /* Background image */
			--bg-gradient: linear-gradient(45deg, #d71edf 0%, #2772e2 100%);
			
			/* Spacing & Layout */
			--border-radius: 24px;
			--gap: 16px;
		}

		/* --- 2. GLOBAL STYLES --- */
		body {
			margin: 0;
			padding: 20px;
			/*background-image: var(--bg-image);
			background-repeat: no-repeat;
			background-size: cover; */
			background: var(--bg-gradient);
			font-family: 'Inter', sans-serif;
			color: var(--text-main);
			display: flex;
			justify-content: center;
			align-items: center;
			min-height: 100vh;
		}

		/* --- 3. BENTO GRID LAYOUT --- */
		.bento-container {
			display: grid;
			grid-template-columns: repeat(4, 1fr); /* 4 columns on desktop */
			grid-template-rows: auto auto; 
			gap: var(--gap);
			max-width: 900px;
			width: 100%;
		}

		/* --- 4. CARD STYLES --- */
		.card {
			background-color: var(--card-bg);
			border-radius: var(--border-radius);
			padding: 24px;
			display: flex;
			flex-direction: column;
			transition: transform 0.2s ease, background-color 0.2s ease;
			text-decoration: none; /* For link cards */
			color: var(--text-main);
			border: 1px solid rgba(255,255,255, 0.05);
		}

		.card:hover {
			transform: translateY(-4px);
			background-color: var(--card-hover);
			border-color: rgba(255,255,255, 0.1);
		}

		/* --- 5. SPECIFIC CARD CONFIGURATIONS --- */
		
		/* Profile Card: Big square, top left */
		.card-profile {
			grid-column: span 2;
			grid-row: span 2;
			align-items: center;
			justify-content: center;
			text-align: center;
		}

		.profile-img {
			width: 120px;
			height: 120px;
			border-radius: 50%;
			object-fit: cover;
			margin-bottom: 16px;
			border: 3px solid var(--accent-color);
		}

		.profile-name { font-size: 1.8rem; font-weight: 800; margin: 0; }
		.profile-bio { color: var(--text-muted); margin-top: 8px; line-height: 1.4; }

		/* Social Link Cards: Small squares */
		.card-social {
			grid-column: span 1;
			aspect-ratio: 1/1; /* Keeps them square */
			align-items: center;
			justify-content: center;
			font-size: 2rem; /* Icon size */
		}
		
		/* Wide Cards (e.g., Portfolio or Setup) */
		.card-wide {
			grid-column: span 2;
			justify-content: space-between;
		}
		
		.card-title { font-weight: 600; font-size: 1.1rem; margin-bottom: 8px; display: block;}
		.card-desc { color: var(--text-muted); font-size: 0.9rem; }

		.card-fullwidth {
			grid-column: span 4; /* Full width */
			background: linear-gradient(45deg, #1c1c1f, #2a2a30);
			flex-direction: row;
			align-items: center;
			gap: 15px;
		}

		.card-speclist{
			grid-column: span 4;
			justify-content: space-betweeen;
		}

		.spec-title {
			margin:0;
			font-size:0.95rem;
		}

		.status-dot {
			height: 12px;
			width: 12px;
			background-color: #22c55e; /* Green */
			border-radius: 50%;
			box-shadow: 0 0 10px #22c55e;
			animation: pulse 2s infinite;
		}

		/* --- 6. MOBILE RESPONSIVENESS --- */
		@media (max-width: 768px) {
			.bento-container {
				display: flex;
				flex-direction: column;
			}
			
			.card-social {
				aspect-ratio: auto;
				padding: 20px;
				flex-direction: row;
				gap: 15px;
				justify-content: flex-start;
			}
			
			/* Add text label to icons on mobile for clarity */
			.card-social::after {
				content: attr(data-label);
				font-size: 1rem;
				font-weight: 600;
			}
		}

		/* --- 7. ANIMATIONS --- */
		@keyframes pulse {
			0% { opacity: 1; }
			50% { opacity: 0.5; }
			100% { opacity: 1; }
		}