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

        body {
            background-color: #181140;
            color: #fff;
            font-family: 'Segoe UI', system-ui, sans-serif;
            min-height: 100vh;
            padding: 1.5rem;
            overflow-x: hidden;
            position: relative;
        }

        /* Bright Cyberpunk Grid Background */
        body::before {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
                repeating-linear-gradient(0deg, rgba(0, 255, 200, 0.2) 0px, rgba(0, 255, 200, 0.2) 1px, transparent 1px, transparent 30px),
                repeating-linear-gradient(90deg, rgba(0, 255, 200, 0.2) 0px, rgba(0, 255, 200, 0.2) 1px, transparent 1px, transparent 30px),
                radial-gradient(circle at 10% 20%, rgba(255, 0, 100, 0.3) 0%, transparent 40%),
                radial-gradient(circle at 90% 80%, rgba(0, 200, 255, 0.3) 0%, transparent 40%);
            z-index: -2;
        }

        /* Glowing scanline effect (brighter) */
        .scanline {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
            background: linear-gradient(to bottom,
                transparent,
                rgba(0, 255, 200, 0.15) 50%,
                transparent
            );
            animation: scan 6s linear infinite;
            opacity: 0.8;
        }

        @keyframes scan {
            0% { transform: translateY(-100%); }
            100% { transform: translateY(100%); }
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            width: 100%;
            position: relative;
            z-index: 2;
        }

        header {
            text-align: center;
            margin-bottom: 2rem;
            animation: fadeInDown 1s ease;
        }

        h1 {
            font-size: 3.2rem;
            margin-bottom: 0.6rem;
            background: linear-gradient(90deg, #ffff00, #ffcc00, #ffff00);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-weight: 800;
            letter-spacing: -0.5px;
            text-shadow: 0 0 20px rgba(0, 255, 200, 0.8);
        }

        .subtitle {
            color: #00ffcc;
            font-size: 1.2rem;
            font-weight: 300;
            letter-spacing: 1px;
            text-shadow: 0 0 15px rgba(0, 255, 200, 0.8);
        }

        .search-container {
            margin: 1.5rem 0;
            animation: fadeIn 1.2s ease;
        }

        .search-box {
            position: relative; /* Required for absolute positioning of the icon */
            max-width: 700px;
            margin: 0 auto 1.5rem;
        }

        .search-box input {
            width: 100%;
            padding: 1rem 3rem 1rem 1.2rem; /* Added padding on the right for the icon */
            border-radius: 50px;
            border: 2px solid transparent;
            background: rgba(10, 10, 20, 0.7);
            backdrop-filter: blur(8px);
            color: white;
            font-size: 1.05rem;
            outline: none;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
        }

        .search-box input:focus {
            border-color: #00ffcc;
            box-shadow: 0 0 30px rgba(0, 255, 200, 0.8);
            background: rgba(15, 15, 30, 0.9);
        }

        .search-icon {
			position: absolute;
			right: 1rem; /* Position the icon inside the input */
			top: 50%;
			transform: translateY(-50%); /* Center the icon vertically */
			color: #00ffcc; /* Keep the original neon color */
			cursor: pointer;
			font-size: 1.2rem;
			transition: color 0.3s ease;
			background: none; /* Remove any background color */
			border: none; /* Remove default button border */
			padding: 0.6rem 0.8rem; /* Keep padding for click area, adjust if needed */
			outline: none; /* Remove default focus outline */
		}

		.search-icon:hover {
			color: #ffff00; /* Change color on hover as before */
		}

        .section-title {
            text-align: center;
            font-size: 2rem;
            margin: 2.5rem 0 1.5rem;
            background: linear-gradient(90deg, #ff00aa, #00ffcc, #ffff00);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-weight: 700;
            letter-spacing: 1px;
            animation: titleGlow 2.5s infinite alternate;
        }

        @keyframes titleGlow {
            0% { text-shadow: 0 0 10px rgba(255, 0, 170, 0.8); }
            100% { text-shadow: 0 0 25px rgba(0, 255, 200, 1), 0 0 40px rgba(255, 255, 0, 0.8); }
        }

        .ai-grid { /* Usunięto .creative-grid z selektora */
            display: grid;
            gap: 1.2rem;
            margin: 1.8rem 0;
        }

        .ai-grid {
            grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        }

        /* Usunięto regułę .creative-grid */


        .ai-card { /* Usunięto .creative-card z selektora */
            background: rgba(15, 15, 30, 0.7);
            border-radius: 16px;
            padding: 1.4rem 0.9rem;
            text-align: center;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border: 1px solid rgba(0, 255, 200, 0.3);
            cursor: pointer;
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(6px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
        }

        .ai-card::before { /* Usunięto .creative-card::before z selektora */
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(0, 255, 200, 0.4), transparent);
            transition: 0.6s;
        }

        .ai-card:hover { /* Usunięto .creative-card:hover z selektora */
            transform: translateY(-8px) scale(1.03);
            background: rgba(20, 20, 40, 0.9);
            border-color: rgba(0, 255, 200, 0.6);
            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.8), 0 0 25px rgba(0, 255, 200, 0.4);
        }

        .ai-icon { /* Usunięto .creative-icon z selektora */
            font-size: 2.2rem;
            margin-bottom: 0.8rem;
            display: block;
            transition: transform 0.3s ease;
        }

        .ai-card:hover .ai-icon { /* Usunięto .creative-card:hover .creative-icon z selektora */
            transform: scale(1.2) rotate(5deg);
        }

        .ai-name { /* Usunięto .creative-title z selektora */
            font-weight: 700;
            font-size: 1rem;
            color: #00ffcc;
            text-shadow: 0 0 10px rgba(0, 255, 200, 0.8);
        }

        /* Animations */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes fadeInDown {
            from { opacity: 0; transform: translateY(-30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .ai-card { /* Usunięto .creative-card z selektora */
            animation: fadeIn 0.6s ease forwards;
        }

        .ai-card:nth-child(n) { animation-delay: calc(0.1s * var(--i)); }
        /* Usunięto .creative-card:nth-child(n) */


        /* Mobile responsiveness */
        @media (max-width: 768px) {
            h1 { font-size: 2.4rem; }
            .ai-grid { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
            /* Usunięto .creative-grid { grid-template-columns: 1fr; } */
            .section-title { font-size: 1.7rem; }
        }

        @media (max-width: 480px) {
            body { padding: 1rem; }
            h1 { font-size: 2rem; }
            .subtitle { font-size: 1rem; }
            .search-box input {
                padding: 0.9rem 2.8rem 0.9rem 1rem; /* Adjust padding for smaller screen */
                font-size: 1rem;
            }
            .search-icon {
                font-size: 1.1rem; /* Slightly smaller icon on mobile */
            }
            .ai-card { padding: 1.1rem 0.7rem; } /* Usunięto .creative-card z selektora */
            .ai-name { font-size: 0.95rem; } /* Usunięto .creative-title z selektora */
        }
		#top-search,
		#bottom-search {
			background-color: rgba(10, 81, 67, 0.25);
		}
		
		.features-grid {
		  display: grid;
		  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		  gap: 2rem;
		  margin: 3rem 0;
		}

		.feature-card h3 {
		  margin: 1rem 0;
		  color: #00ffcc;
		}

		.feature-card p {
		  color: #b0f0ff;
		  line-height: 1.6;
		}

		/* Stylizacja div.feature-card wewnątrz linku .feature-link - ZAKTUALIZOWANE */
        .feature-link .feature-card {
             background: rgba(15, 15, 30, 0.8);
             border-radius: 16px;
             padding: 1.5rem;
             box-shadow: 0 10px 25px rgba(0,0,0,0.3);
             transition: all 0.3s ease; /* Zmieniamy z 'all 0.3s ease' na 'all 0.3s ease' dla spójności */
             border: 1px solid rgba(0,255,200, 0.3);
             color: #fff;
             text-align: center;
             /* Dodajemy transition również do samego .feature-card w linku dla płynnego efektu */
             transition: all 0.3s ease, transform 0.3s ease; /* Możesz połączyć z istniejącym */
             position: relative; /* Wymagane dla pseudo-elementu ::before */
             overflow: hidden; /* Zapobiega wyciekom efektu poza krawędzie */
        }

        /* Nowa reguła: pseudo-element ::before dla efektu błysku */
        .feature-link .feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%; /* Zaczyna poza lewą krawędzią */
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(0, 255, 200, 0.4), transparent);
            transition: 0.6s; /* Długość przejścia */
        }

        /* Nowa reguła: animacja błysku przy najechaniu na link */
        .feature-link:hover .feature-card::before {
            left: 100%; /* Przesuwa się przez całą kartę do prawej */
        }

        /* Nowa reguła: stylizacja przy najechaniu na link - USUWAMY transformację z animacji błysku */
        .feature-link:hover .feature-card {
             transform: translateY(-10px); /* PODNIESIENIE KARTY - możesz usunąć jeśli chcesz tylko błysk */
             box-shadow: 0 15px 35px rgba(0,255,200, 0.4);
             border-color: rgba(0,255,200, 0.6);
        }

        /* Dodaj regułę dla ikony wewnątrz .feature-card w linku */
        .feature-link .feature-card i {
            font-size: 2.5rem;
            color: #00ffcc;
            transition: transform 0.3s ease;
            margin-bottom: 0.8rem;
            display: block;
        }

        /* Dodaj regułę dla ikony przy najechaniu na link */
        .feature-link:hover .feature-card i {
            transform: scale(1.2) rotate(5deg);
        }

		footer {
		  margin-top: 4rem;
		  padding: 2rem 0;
		  font-size: 0.9rem;
		  color: #94a3b8;
		  background: rgba(0,0,0,0.3);
		  text-align: center;
		  border-top: 1px solid rgba(0,255,200,0.2);
		}

		.footer-content {
		  display: flex;
		  flex-direction: column;
		  align-items: center;
		  gap: 1rem;
		}

		.social-links {
		  display: flex;
		  gap: 1rem;
		  margin-top: 1rem;
		}

		.social-link {
		  width: 50px;
		  height: 50px;
		  border-radius: 50%;
		  background: rgba(15, 15, 30, 0.7);
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  color: #00ffcc;
		  text-decoration: none;
		  transition: all 0.3s ease;
		}

		.social-link:hover {
		  transform: translateY(-3px);
		  background: #CBE010;
		  color: #000;
		}

        /* Dodatkowy CSS dla linków w features-grid */
        .feature-link {
            text-decoration: none; /* Usuwa podkreślenie linku */
            color: inherit; /* Dziedziczy kolor tekstu z rodzica */
            display: block; /* Sprawia, że link zajmuje całą dostępną przestrzeń diva */
        }