body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
            background-color: #121212;
            color: #E0E0E0;
            margin: 0;
            padding: 0;
            font-size: 16px;
            line-height: 1.6;

        }

#glitchy-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -10; /* Ensure it's well behind all other content */
    overflow: hidden;
    background-color: transparent; /* The body's #121212 will show through */
}

.bg-glitch-item {
    position: absolute;
    /* Default/placeholder values, will be randomized by JS */
    background-color: rgba(51, 51, 51, 0.5); /* Dark grey, semi-transparent */
    border-radius: 2px; /* Subtle rounding */
    /* transition: all 0.1s ease-out; // Optional: for subtle hover/glitch effects later */
}

        /* Add a class for elements that should use the pointer cursor on hover */


        .page-wrapper {
            width: 100%;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            padding: 0;
            box-sizing: border-box;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 25px 40px;
            border-bottom: 1px solid #333;
            background-color: #121212;
        }

        .logo {
            font-size: 1.8em;
            font-weight: bold;
            color: #FFFFFF;
        }
        
        .logo-accent {
            color: #a155ff;
            font-style: italic;
        }

        .tech-chips {
            display: flex;
            gap: 12px;
        }

        .chip {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 0.9em;
            font-weight: 500;
        }

        .chip-cursor { background-color: #333; color: #fff; border: 1px solid #555;}
        .chip-github { background-color: #24292e; color: #fff; border: 1px solid #555;}
        .chip-python { background-color: #306998; color: #FFD43B; border: 1px solid #FFD43B;}
        .chip-bcrypt { background-color: #4A90E2; color: #fff; border: 1px solid #6CB6FF;}
        .chip-letsencrypt { background-color: #2E7D32; color: #fff; border: 1px solid #55A65B;}
        .chip-js { background-color: #F7DF1E; color: #000; border: 1px solid #000;}

        .tiles-outer-container {
            width: 100%;
            padding: 20px; 
            box-sizing: border-box;
        }
        .tiles-outer-container::-webkit-scrollbar {
        }

        .grid {
            box-sizing: border-box;
            margin: 0 auto;
        }

        .grid-sizer {
        }

        .grid-item {
            /* background-color: #1E1E1E; */ /* Old background */
            background: #4c6142; /* Fallback background */
            background: linear-gradient(320deg, rgba(76, 97, 66, 1) 9%, rgba(10, 10, 10, 1) 65%); /* New gradient background */
            border: 1px solid #333;
            border-radius: 16px;
            padding: 25px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.3);
            color: #E0E0E0;
            overflow-y: auto;
            margin-bottom: 20px;
            box-sizing: border-box;
        }

        .grid-item.tile-large,
        .grid-item--extra-tall,
        .grid-item--double-width {
            width: auto;
            min-height: 0;
        }

        .grid-item-style-A {
            min-height: 600px;
            height: auto;
        }

        .grid-item-style-B {
            min-height: 400px;
            height: auto;
        }
        
        .grid-item h2.manifesto-main-title {
            font-family: 'Oregano', cursive;
            font-size: 2.2em;
            color: #a155ff;
            font-weight: 700;
            text-transform: uppercase;
            line-height: 1.2;
            margin-bottom: 15px;
            text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5);
        }

        .grid-item p.manifesto-subtitle {
            font-family: 'Oregano', cursive;
            font-size: 1.8em;
            color: #a155ff;

            border-radius: 6px;
            display: inline-block;
            margin-bottom: 20px;
            font-weight: 500;
            text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5);
        }
        
        .grid-item p.manifesto-intro-paragraph {
            font-size: 1.05em;
            color: #FFFFFF;
        }

        .grid-item h3 { 
            font-family: 'Oregano', cursive;
            font-size: 1.5em;
            color: #FFFFFF;
            font-weight: 600;
            margin-top: 0;
            margin-bottom: 15px;
        }

        .grid-item p {
            font-size: 1em;
            line-height: 1.6;
            margin-bottom: 15px;
        }
        
        .grid-item p:last-child {
            margin-bottom: 0;
        }

        .grid-item .quote {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
            font-style: italic;
            font-size: 1.05em;
            color: #E0E0E0;
            padding: 12px 15px;
            margin-top: auto; 
            background-color: #2a2a2a;
            border-left: 3px solid #a155ff;
            border-radius: 0 8px 8px 0;
        }
        
        .grid-item ul {
            padding-left: 20px;
            margin-top: 0;
            margin-bottom: 15px;
            list-style-type: disc;
        }
        .grid-item li {
            margin-bottom: 8px;
            line-height: 1.5;
        }

        .grid-item.tile-final-words h3 {
            font-family: 'Oregano', cursive;
            font-size: 1.8em;
            color: #a155ff;
            text-align: left;
            font-weight: 700;
            text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5);
        }
        .grid-item.tile-final-words p {
            text-align: left;
            font-size: 1.1em;
        }
        .grid-item.tile-final-words .emphasis {
            font-weight: bold;
            font-size: 1.2em;
            color: #FFFFFF;
            margin-top: 10px;
            display: block;
        }

        @media (max-width: 768px) {
            .page-wrapper {
                padding: 10px 0;
            }
            .tiles-outer-container {
                padding: 10px; 
            }
            .header {
                flex-direction: column;
                gap: 20px;
                padding: 20px;
            }
            .tech-chips {
                flex-wrap: wrap;
                justify-content: center;
            }
            .grid {
                 height: auto;
            }
            .grid-sizer,
            .grid-item-style-A,
            .grid-item-style-B {
                width: 100% !important;
            }
            .grid-item-style-A {
                min-height: 400px;
                height: auto;
            }
            .grid-item-style-B {
                min-height: 300px;
                height: auto;
            }
            .grid-item {
                padding: 20px;
                max-height: none;
            }
            .grid-item h2.manifesto-main-title {
                font-size: 1.8em;
            }
            .grid-item p.manifesto-subtitle {
                font-size: 1em;
            }
            .grid-item h3 {
                font-size: 1.3em;
            }
            .grid-item p {
                font-size: 0.95em;
            }
            .grid-item .quote {
                font-size: 1em;
            }
            .grid-item.tile-final-words h3 {
                 font-size: 1.5em;
            }
            .grid-item.tile-final-words p {
                font-size: 1em;
            }
            .grid-item.tile-final-words .emphasis {
                font-size: 1.1em;
            }
        }

        @media (min-width: 769px) and (max-width: 1024px) {
            .grid-sizer { width: calc((100% - 60px) / 4); }
            .grid-item-style-A { width: calc( ((100% - 60px) / 4) * 2 + 20px ); } 
            .grid-item-style-B { width: calc((100% - 60px) / 4); } 
        }

        @media (min-width: 1025px) and (max-width: 1440px) {
            .grid-sizer { width: calc((100% - 100px) / 6); }
            .grid-item-style-A { width: calc( ((100% - 100px) / 6) * 3 + (2 * 20px) ); } 

            .grid-item-style-B { width: calc( ((100% - 100px) / 6) * 2 + 20px ); } 
        }

        @media (min-width: 1441px) {
            .grid-sizer { 
              width: calc((100% - 140px) / 8); }
            .grid-item-style-A { 
              width: calc( ((100% - 140px) / 8) * 4 + (3 * 20px) ); } 
            .grid-item-style-B { 
              width: calc( ((100% - 140px) / 8) * 2 + 20px ); } 
        }

        /* Styles for image grid items */
        .grid-item.grid-item-image {
            padding: 0; /* Override .grid-item's default padding */
            min-height: auto; 
            height: auto;
            line-height: 0; /* Remove potential whitespace around image */
        }

        .grid-item.grid-item-image img {
            width: 100%;
            height: auto;
            display: block; /* Ensures image takes full width and behaves as a block */
            /* The image will be contained by .grid-item's border-radius */
        }

        /* Ensure links wrapping images fill the space and don't add underlines */
        .grid-item.grid-item-image a,
        .promo-image-column a {
            display: block;
            line-height: 0; /* Consistent with parent containers */
            text-decoration: none; /* Remove underline from image links */
        }

        /* Specific styling for promo page image links if they behave differently due to nested structure */
        .promo-page-image-link {
            width: calc(50% - 7.5px); /* Ensure link takes same width as image */
            display: block; /* Make it a block to contain the image correctly */
            line-height: 0;
        }

        .promo-page-image-link img {
            width: 100%; /* Image takes full width of its link container */
        }

        /* Styles for Full Width Promo Tile */
        .grid-item-full-width-promo {
            width: 100% !important; /* Override other width styles */
            text-align: center;
            display: flex; /* Use flexbox for centering content */
            flex-direction: column; /* Stack items vertically */
            align-items: center; /* Center items horizontally */
            justify-content: center; /* Center items vertically */
            padding: 40px 20px; /* Add more padding */
        }

        .promo-content-wrapper {
            display: flex;
            flex-direction: row; /* side-by-side on desktop */
            width: 100%;
            gap: 30px; /* Space between image column and text column */
            align-items: flex-start; /* Align items to the top */
        }

        .promo-image-column {
            flex: 1 1 45%; /* Takes up roughly 45% of the space */
            display: flex;
            flex-direction: column;
            gap: 50px 25px; /* Space between cover image and page images */
        }

        .promo-cover-image {
            width: 100%;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        }

        .promo-half-width-images {
            display: flex;
            gap: 15px; /* Space between the two page images */
        }

        .promo-page-image {
            width: calc(50% - 7.5px); /* Half width minus half the gap */
            height: auto;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        }

        .offer-section {
            width: 100%;
            max-width: 800px; /* Max width for readability */
            flex: 1 1 55%; /* Takes up roughly 55% of the space */
            text-align: left; /* Align text to the left within this column */
        }

        .offer-section h2 {
            font-family: 'Oregano', cursive;
            font-size: 2.2em; /* Prominent heading */
            color: #a155ff; /* Accent color */
            text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5);
            margin-bottom: 25px;
            line-height: 1.3;
        }

        .offer-section p {
            font-size: 1.1em;
            margin-bottom: 20px;
            color: #E0E0E0;
            line-height: 1.7;
        }

        .offer-section p strong {
            font-weight: 600; /* Make strong more distinct */
            color: #FFFFFF; /* Brighter for emphasis */
        }

        .offer-section ul {
            list-style-type: none;
            padding-left: 0; /* Remove default padding */
            margin-bottom: 25px;
            text-align: left; /* Align list items to the left */
            max-width: 600px; /* Control width of the list */
            margin-left: auto;
            margin-right: auto;
        }

        .offer-section li {
            margin-bottom: 12px;
            font-size: 1.1em;
            color: #E0E0E0;
            line-height: 1.6;
            /* Emojis should align naturally as text prefixes */
        }

        .offer-section hr {
            border: 0;
            border-top: 1px solid #333;
            margin: 2em 0; /* Matches inline style */
        }

        .offer-section .cta-button:hover,
        .offer-section .cta-button:focus {
            background-color: #b77aff; 
            color: #FFFFFF !important;
            transform: translateY(-2px) scale(1.02); /* Keep hover effect */
            box-shadow: 0 6px 20px rgba(161, 85, 255, 0.5);
            outline: none; 
        }

        @keyframes pulse-grow {
            0%, 100% {
                transform: scale(1);
                box-shadow: 0 4px 15px rgba(161, 85, 255, 0.4);
            }
            5% { /* Corresponds to 0.5s in a 10s animation duration */
                transform: scale(1.08);
                box-shadow: 0 8px 25px rgba(161, 85, 255, 0.6);
            }
             /* The button stays scaled up for a very short duration then returns to normal for the rest of the 10s cycle */
        }

        .offer-section .cta-button {
            display: inline-block;
            margin-top: 25px; 
            padding: 18px 35px; 
            background-color: #a155ff; 
            color: #FFFFFF !important; 
            font-weight: bold;
            font-size: 1.4em; /* Slightly larger CTA */
            text-decoration: none;
            border: none; 
            border-radius: 12px; 
            transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; /* Added box-shadow to transition */
            box-shadow: 0 4px 15px rgba(161, 85, 255, 0.4);
            text-align: center;
            animation-name: pulse-grow;
            animation-duration: 10s;
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;
        }

        /* Remove or comment out old specific promo styles if they conflict or are no longer needed */
        /* For example, .promo-supertitle, .promo-subtitle, .promo-list, .promo-divider-text, .promo-final-pitch, .promo-cta-button */
        .grid-item-full-width-promo .promo-supertitle,
        .grid-item-full-width-promo .promo-subtitle,
        .grid-item-full-width-promo .promo-list,
        .grid-item-full-width-promo .promo-divider-text,
        .grid-item-full-width-promo .promo-final-pitch,
        .promo-cta-button { /* Old button class */
            /* These selectors are now deprecated by .offer-section styling */
            /* You can remove them or ensure they don't conflict */
            display: none; /* Effectively hide if any elements with these classes remain by mistake */
        }

        .grid-item-full-width-promo h3,
        .grid-item-full-width-promo .emphasis {
            font-size: inherit;
            color: inherit;
            font-weight: inherit;
            margin: 0;
            padding: 0;
            display: none; /* Hide old h3 and emphasis if they were used */
        }

        .cheatsheet-link {
            display: inline-block;
            margin-top: 20px;
            padding: 12px 25px;
            background-color: #a155ff;
            color: #121212 !important; /* Ensure text is dark on purple bg */
            font-weight: bold;
            text-decoration: none;
            border-radius: 8px;
            transition: background-color 0.3s ease;
        }

        .cheatsheet-link:hover {
            background-color: #b77aff; /* Lighter purple on hover */
        }

        /* Ensure full width promo overrides other width settings in media queries specifically */
        @media (min-width: 769px) and (max-width: 1024px) {
            /* .grid-sizer { width: calc((100% - 60px) / 4); } */
            /* .grid-item-style-A { width: calc( ((100% - 60px) / 4) * 2 + 20px ); }  */
            /* .grid-item-style-B { width: calc((100% - 60px) / 4); }  */
            .grid-item-full-width-promo {
                width: 100% !important;
            }
        }

        @media (min-width: 1025px) and (max-width: 1440px) {
            /* .grid-sizer { width: calc((100% - 100px) / 6); } */
            /* .grid-item-style-A { width: calc( ((100% - 100px) / 6) * 3 + (2 * 20px) ); }  */
            /* .grid-item-style-B { width: calc( ((100% - 100px) / 6) * 2 + 20px ); }  */
            .grid-item-full-width-promo {
                width: 100% !important;
            }
        }

        @media (min-width: 1441px) {
            /* .grid-sizer { width: calc((100% - 140px) / 8); } */
            /* .grid-item-style-A { width: calc( ((100% - 140px) / 8) * 4 + (3 * 20px) ); }  */
            /* .grid-item-style-B { width: calc( ((100% - 140px) / 8) * 2 + 20px ); }  */
            .grid-item-full-width-promo {
                width: 100% !important;
            }
        }
        /* End new styles for logo tiles */ 

        /* Responsive adjustments for the promo tile's new structure */
        @media (max-width: 768px) {
            .promo-content-wrapper {
                flex-direction: column-reverse; /* Text on top, images below */
                align-items: center; 
            }
            .promo-image-column {
                flex-basis: 100%; 
                max-width: 100%;
                margin-top: 30px; /* Add space above images when stacked below text */
            }
            .offer-section {
                flex-basis: 100%; 
                max-width: 100%;
                text-align: left; /* Text left-aligned on mobile */
                /* margin-top: 30px; /* Removed: image column now gets margin-top */
            }
            .promo-half-width-images {
                flex-direction: column; 
                align-items: center;
            }
            .promo-page-image {
                width: 80%; 
                max-width: 350px;
            }
            .promo-page-image-link {
                width: 80%; /* Adjust link width to match image on mobile */
                max-width: 350px;
                margin-bottom: 15px; /* Add some space between stacked page image links */
            }
            .promo-page-image-link:last-child {
                margin-bottom: 0;
            }
            .offer-section .cta-button {
                width: 100%; /* Full width on mobile */
                box-sizing: border-box; /* Include padding and border in the element's total width and height */
            }
            .offer-section ul {
                margin-left: 0; /* Adjust for left alignment if previously centered */
                margin-right: 0;
            }
        }

/* Footer Styles */
.footer {
    padding: 40px 20px;
    text-align: center;
    background-color: #0a0a0a; /* Slightly lighter than the main background for subtle separation */
    border-top: 1px solid #222; /* Subtle top border */
    margin-top: 50px; /* Space above the footer */
}

.footer-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px; /* Space between logos */
    margin-bottom: 25px;
}

.footer-logos img {
    max-height: 40px; /* Control logo size */
    width: auto;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.footer-logos a:hover img {
    opacity: 1;
}

.footer-info {
    font-size: 0.8em;
    color: #888; /* Dimmed text color */
}

.footer-info p {
    margin: 5px 0;
}

.footer-info a {
    color: #aaa; /* Slightly lighter link color */
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-info a:hover {
    color: #E0E0E0; /* Lighten on hover */
    text-decoration: underline;
}