* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: 'Inter', sans-serif;
     background: linear-gradient(145deg, #f8fafc 0%, #eef2ff 100%);
     color: #0a0f2c;
     scroll-behavior: smooth;
 }

 /* header / footer simulation (since #header and #footer will load separately, but we provide fallback) */
 /* #header, #footer {
            width: 100%;
        } */

 /* main container for links section */
 .links-section {
     max-width: 1300px;
     margin: 2rem auto;
     padding: 1.5rem 2rem;
 }

 /* page title with decorative gradient */
 .page-title {
     text-align: center;
     margin-bottom: 2rem;
     position: relative;
 }

 .page-title h1 {
     font-family: 'Poppins', sans-serif;
     font-size: 2rem;
     font-weight: 700;
     background: linear-gradient(135deg, #1E2A5E, #3b82f6, #8b5cf6);
     background-size: 200% auto;
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
     display: inline-block;
     letter-spacing: -0.02em;
     text-shadow: 2px 2px 12px rgba(0, 0, 0, 0.05);
 }

 .page-title::after {
     content: "🔗";
     font-size: 2rem;
     margin-left: 12px;
     opacity: 0.7;
     display: inline-block;
     vertical-align: middle;
 }

 /* responsive grid: beautiful cards */
 .links-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
     gap: 1.4rem;
 }

 /* card styling with glassmorphism + shadow + hover effect */
 .link-card {
     background: rgba(255, 255, 255, 0.9);
     backdrop-filter: blur(2px);
     border-radius: .5rem;
     transition: all 0.35s cubic-bezier(0.2, 0.9, 0.4, 1.1);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.02);
     border: 1px solid rgba(255, 255, 255, 0.6);
     overflow: hidden;
     position: relative;
     border-style: solid;
     border-color: green;
     border-width: 2px 6px 2px 6px;
     /* top right bottom left */
 }

 .link-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 24px 36px -12px rgba(59, 130, 246, 0.25);
     background: white;
     border-color: #cbd5ff;
 }

 /* inner link styling */
 .link-card .link-title {
     margin: 0;
     padding: 1.5rem 1.2rem 1.5rem 3.8rem;
     position: relative;
     transition: all 0.2s;
 }

 .link-card .link-title a {
     text-decoration: none;
     font-size: 1.1rem;
     font-weight: 600;
     color: #0f172a;
     display: block;
     line-height: 1.4;
     transition: color 0.2s ease;
     letter-spacing: -0.2px;
 }

 .link-card .link-title a:hover {
     color: #3b82f6;
     text-decoration: underline;
     text-underline-offset: 6px;
 }

 /* universal icon style using pseudo-element (emoji + fontawesome fallback) */
 .link-card .link-title::before {
     content: "🔗";
     font-family: "Font Awesome 6 Free", "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
     font-weight: 900;
     position: absolute;
     left: 1.2rem;
     top: 50%;
     transform: translateY(-50%);
     font-size: 1.6rem;
     background: linear-gradient(145deg, #2563eb, #7c3aed);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
     transition: all 0.2s;
     width: 32px;
     text-align: center;
 }

 /* specific icons per link category using attribute selectors */
 .link-card .link-title a[href*="aadhaar"]~&,
 .link-card .link-title a[href*="uidai"]~& {
     /* handled differently but we add dynamic style via js? to keep pure CSS we override using sibling? 
               Better approach: add data-icon via JS on load? But we want pure CSS with attribute magic */
 }

 /* Enhanced: I will use additional classless styling with substring selectors for richer icon variation */
 .link-card .link-title a[href*="aadhaar"]+.link-title::before,
 .link-card .link-title a[href*="uidai"]+.link-title::before {
     /* not possible, so we apply directly on .link-card using has? Use modern :has() for robust assignment */
 }

 /* Modern :has() selector for custom per-link icons (supported in all modern browsers) */
 .link-card:has(a[href*="incometax"]) .link-title::before {
     content: "📊";
     background: none;
     color: #e67e22;
     background: linear-gradient(135deg, #e67e22, #f39c12);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
 }

 .link-card:has(a[href*="pan"]) .link-title::before {
     content: "💳";
     background: none;
     background: linear-gradient(135deg, #2c3e66, #1e40af);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
 }

 .link-card:has(a[href*="udise"]) .link-title::before {
     content: "🏫";
 }

 .link-card:has(a[href*="prerna"]) .link-title::before {
     content: "✨";
 }

 .link-card:has(a[href*="ehrms"]) .link-title::before {
     content: "👥";
 }

 .link-card:has(a[href*="passport"]) .link-title::before {
     content: "🛂";
 }

 .link-card:has(a[href*="scert"]) .link-title::before {
     content: "📘";
 }

 .link-card:has(a[href*="electricity"]) .link-title::before,
 .link-card:has(a[href*="uppcl"]) .link-title::before {
     content: "⚡";
 }

 .link-card:has(a[href*="udyam"]) .link-title::before {
     content: "🏭";
 }

 .link-card:has(a[href*="scholarship"]) .link-title::before {
     content: "🎓💰";
     font-size: 1.4rem;
 }

 .link-card:has(a[href*="cbse"]) .link-title::before {
     content: "📚";
 }

 .link-card:has(a[href*="upsc"]) .link-title::before {
     content: "⚖️";
 }

 .link-card:has(a[href*="nta"]) .link-title::before {
     content: "📝";
 }

 .link-card:has(a[href*="diksha"]) .link-title::before {
     content: "📱";
 }

 .link-card:has(a[href*="swayam"]) .link-title::before {
     content: "🌐";
 }

 .link-card:has(a[href*="nroer"]) .link-title::before {
     content: "📖";
 }

 .link-card:has(a[href*="nep"]) .link-title::before {
     content: "🇮🇳";
 }

 .link-card:has(a[href*="mid-day"]) .link-title::before {
     content: "🍛";
 }

 .link-card:has(a[href*="socialjustice"]) .link-title::before {
     content: "🤝";
 }

 .link-card:has(a[href*="eshram"]) .link-title::before {
     content: "🧑‍💼";
 }

 .link-card:has(a[href*="beti"]) .link-title::before {
     content: "👧🌸";
 }

 .link-card:has(a[href*="poshan"]) .link-title::before {
     content: "🥗";
 }

 .link-card:has(a[href*="skillindia"]) .link-title::before {
     content: "🛠️";
 }

 .link-card:has(a[href*="startup"]) .link-title::before {
     content: "🚀";
 }

 .link-card:has(a[href*="nios"]) .link-title::before {
     content: "🎓";
 }

 .link-card:has(a[href*="ignou"]) .link-title::before {
     content: "🏛️";
 }

 .link-card:has(a[href*="digitalindia"]) .link-title::before {
     content: "📡";
 }

 .link-card:has(a[href*="olympiad"]) .link-title::before {
     content: "🏅";
 }

 .link-card:has(a[href*="ntse"]) .link-title::before {
     content: "⭐";
 }

 /* default fallback for any link: glowing emoji chain */
 .link-card .link-title::before {
     content: "🔗";
     font-size: 1.5rem;
     background: linear-gradient(145deg, #2563eb, #7c3aed);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
     transition: transform 0.2s;
 }

 .link-card:hover .link-title::before {
     transform: scale(1.1) rotate(3deg);
 }

 /* accessibility & focus */
 .link-card .link-title a:focus-visible {
     outline: 3px solid #3b82f6;
     outline-offset: 4px;
     border-radius: 12px;
 }

 /* additional decorative effect: gradient border bottom */
 .link-card::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 4px;
     background: linear-gradient(90deg, #3b82f6, #a855f7, #ec489a);
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.3s ease;
     border-radius: 0 0 1rem 1rem;
 }

 .link-card:hover::after {
     transform: scaleX(1);
 }

 /* responsive design: mobile and tablet */
 @media (max-width: 768px) {
     .links-section {
         padding: 1rem 1.2rem;
         margin: 1rem auto;
     }

     .page-title h1 {
         font-size: 2rem;
     }

     .page-title::after {
         font-size: 1.6rem;
     }

     .links-grid {
         gap: 1.2rem;
         grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
     }

     .link-card .link-title {
         padding: 1.2rem 1rem 1.2rem 3.2rem;
     }

     .link-card .link-title a {
         font-size: 0.95rem;
     }

     .link-card .link-title::before {
         font-size: 1.3rem;
         left: 1rem;
     }
 }

 @media (max-width: 480px) {
     .links-grid {
         grid-template-columns: 1fr;
     }

     .page-title h1 {
         font-size: 1.8rem;
     }

     .link-card .link-title a {
         font-size: 0.9rem;
         font-weight: 600;
     }
 }

 /* additional tablet fine-tune */
 @media (min-width: 769px) and (max-width: 1024px) {
     .links-grid {
         grid-template-columns: repeat(2, 1fr);
         gap: 1.5rem;
     }

     .link-card .link-title a {
         font-size: 1rem;
     }
 }

 /* subtle background pattern */
 body::before {
     content: "";
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: radial-gradient(circle at 10% 20%, rgba(59, 130, 246, 0.03) 2%, transparent 2.5%);
     background-size: 40px 40px;
     pointer-events: none;
     z-index: -1;
 }

 /* loading animation & smooth */
 .link-card {
     animation: fadeSlideUp 0.4s ease-out backwards;
     animation-delay: calc(var(--order, 0) * 0.02s);
 }

 @keyframes fadeSlideUp {
     from {
         opacity: 0;
         transform: translateY(20px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }


 /* Search Bar Section */
 .search-container {
     max-width: 650px;
     margin: 0 auto 2rem auto;
     position: relative;
 }

 .search-wrapper {
     display: flex;
     align-items: center;
     background: white;
     border-radius: 14px;
     box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
     border: 1px solid rgba(59, 130, 246, 0.2);
     transition: all 0.3s ease;
 }

 .search-wrapper:focus-within {
     box-shadow: 0 20px 30px -12px rgba(59, 130, 246, 0.25);
     border-color: #3b82f6;
     transform: scale(1.01);
 }

 .search-icon {
     padding: 0 1rem 0 1.5rem;
     font-size: 1.2rem;
     color: #94a3b8;
 }

 .search-input {
     flex: 1;
     padding: 1rem 0.5rem 1rem 0;
     border: none;
     font-size: 1rem;
     font-weight: 500;
     background: transparent;
     outline: none;
     font-family: 'Inter', sans-serif;
 }

 .clear-search {
     background: none;
     border: none;
     padding: 0 1.2rem;
     cursor: pointer;
     color: #94a3b8;
     font-size: 1.1rem;
     transition: color 0.2s;
 }

 .clear-search:hover {
     color: #ef4444;
 }

 .search-stats {
     text-align: center;
     margin-top: 0.75rem;
     font-size: 0.85rem;
     color: #475569;
     font-weight: 500;
 }

 .search-stats span {
     background: #e2e8f0;
     padding: 0.2rem 0.7rem;
     border-radius: 6px;
 }

 /* quick accessibility for missing js fallback */
 .no-js .link-card .link-title a {
     color: #0f172a;
 }