:root {
    /* --- Base Colors (Dark Theme - Default) --- */
    --bg-primary-rgb: 15, 15, 18;
    --bg-secondary-rgb: 26, 26, 30;
    --bg-tertiary-rgb: 37, 37, 42;
    --accent-primary-rgb: 0, 170, 255;
    --accent-secondary-rgb: 255, 51, 133;
    --accent-success-rgb: 255, 255, 255;

    --bg-neon-rgb: 0, 170, 255;
    --text-on-neon-colr-rgb: 255, 255, 255;

    /* --- Derived Colors & Properties (Dark Theme) --- */
    --bg-primary: rgb(var(--bg-primary-rgb));
    --bg-secondary: rgb(var(--bg-secondary-rgb));
    --bg-tertiary: rgb(var(--bg-tertiary-rgb));
    --accent-primary: rgb(var(--accent-primary-rgb));
    --accent-secondary: rgb(var(--accent-secondary-rgb));
    --accent-success: rgb(var(--accent-success-rgb));
    --text-primary: #e5e5e5;
    --text-secondary: #a0a0a5;
    --text-heading: #ffffff;
    --book-title: #9e9020;
    --text-hero-lead: #d0d0d0; /* Specific for hero lead text */
    --text-on-image-primary: #ffffff; /* Forced white for readability */
    --text-on-image-secondary: #e0e0e0; /* Forced light grey for readability */
    --text-on-accent-primary: #ffffff; /* Text on accent bg (e.g., buttons) */
    --border-color: rgba(255, 255, 255, 0.1);
    --border-color-strong: rgba(255, 255, 255, 0.2);
    --shadow-color-light: rgba(var(--accent-primary-rgb), 0.2);
    --shadow-color-medium: rgba(var(--accent-primary-rgb), 0.4);
    --shadow-modal: rgba(0, 0, 0, 0.2);
    --shadow-button: rgba(0, 0, 0, 0.2);
    --text-shadow-on-image: rgba(0, 0, 0, 0.5);
    --font-primary: 'Special Gothic', sans-serif;
    --font-subtext: "Bodoni Moda", serif;
    --font-heading: "Funnel Display", sans-serif;
    --navbar-height: 100px; /* Adjust if needed - JS updates this too */
    --modal-backdrop-bg: #000;
    --modal-backdrop-opacity: 0.7;
    --scrollbar-thumb: var(--accent-primary);
    --scrollbar-track: var(--bg-primary);
    --modal-scrollbar-thumb: var(--accent-secondary);
    --modal-scrollbar-track: rgba(var(--bg-tertiary-rgb), 0.5);
    --blockquote-border: var(--accent-primary);
    --input-bg: rgba(255, 255, 255, 0.05);
    --input-border: var(--border-color-strong);
    --input-focus-border: var(--accent-primary);
    --input-focus-shadow: var(--shadow-color-light);
    --input-placeholder: var(--text-secondary);
    --checkbox-border: var(--border-color-strong);
    --checkbox-checked-bg: var(--accent-primary);
    --checkbox-checked-border: var(--accent-primary);
    --checkbox-focus-shadow: var(--shadow-color-light);
    --accordion-item-bg: var(--bg-tertiary);
    --accordion-item-border: var(--border-color);
    --accordion-button-bg: var(--bg-secondary);
    --accordion-button-color: var(--text-primary);
    --accordion-button-active-bg: var(--bg-primary);
    --accordion-button-active-color: var(--accent-primary);
    --accordion-body-bg: var(--bg-secondary);
    --accordion-icon-filter: brightness(0) invert(1) opacity(0.7);
    --hr-border-color: var(--border-color-strong);
    --btn-neon-border: var(--accent-primary);
    --btn-neon-color: var(--accent-primary);
    --btn-neon-shadow: var(--accent-primary);
    --btn-neon-hover-bg: var(--accent-primary);
    --btn-neon-hover-color: var(--bg-primary); /* Text on hover needs contrast */
    --cursor-border: var(--accent-secondary);
    --cursor-shadow: var(--accent-secondary);
    --cursor-hover-border: var(--accent-success);
    --dynamic-bg-opacity: 0.1;
    --dynamic-bg-color: var(--accent-primary); /* Legacy, check if used */
    --hero-overlay-bg: rgba(var(--bg-primary-rgb), 0.6); /* Dark overlay */
}

body.light-mode {
    /* --- Base Colors (Light Theme Overrides) --- */
    --bg-primary-rgb: 248, 249, 250;
    --bg-secondary-rgb: 255, 255, 255;
    --bg-tertiary-rgb: 241, 243, 245;
    --accent-primary-rgb: 33, 79, 156;
    --accent-primary-small-rgb: 158, 144, 32;
    --accent-secondary-rgb: 220, 53, 69;
    --accent-success-rgb: 80, 107, 49;

    --bg-neon-rgb: orange;
    --text-on-neon-colr-rgb: #FFFFFF;

    /* --- Derived Colors & Properties (Light Theme) --- */
    --bg-primary: rgb(var(--bg-primary-rgb));
    --bg-secondary: rgb(var(--bg-secondary-rgb));
    --bg-tertiary: rgb(var(--bg-tertiary-rgb));
    --bg-primary-small: rgb(var(--accent-primary-small-rgb));
    --accent-primary: rgb(var(--accent-primary-rgb));
    --accent-secondary: rgb(var(--accent-secondary-rgb));
    --accent-success: rgb(var(--accent-success-rgb));
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-heading: #1f4d9f;
    --book-title: #9e9020;
    --text-hero-lead: #4e565d; /* Darker grey for contrast */
    --text-on-image-primary: #ffffff; /* Keep forced white */
    --text-on-image-secondary: #ffffff; /* Dark text shadow for light bg */
    --text-on-accent-primary: #ffffff; /* Text on accent bg */
    --border-color: rgba(0, 0, 0, 0.1);
    --border-color-strong: rgba(0, 0, 0, 0.15);
    --shadow-color-light: rgba(var(--accent-primary-rgb), 0.15);
    --shadow-color-medium: rgba(var(--accent-primary-rgb), 0.25);
    --shadow-modal: rgba(0, 0, 0, 0.1);
    --shadow-button: rgba(0, 0, 0, 0.15);
    --text-shadow-on-image: rgba(0, 0, 0, 0.3); /* Lighter shadow */
    --modal-backdrop-bg: #fff;
    --modal-backdrop-opacity: 0.6;
    --scrollbar-thumb: var(--accent-primary);
    --scrollbar-track: var(--bg-tertiary);
    --modal-scrollbar-thumb: var(--accent-secondary);
    --modal-scrollbar-track: rgba(var(--bg-tertiary-rgb), 0.5);
    --blockquote-border: var(--accent-primary);
    --input-bg: #ffffff;
    --input-border: #ced4da; /* Standard Bootstrap light input border */
    --input-focus-border: #86b7fe; /* Standard Bootstrap light focus border */
    --input-focus-shadow: rgba(var(--accent-primary-rgb), 0.25);
    --input-placeholder: var(--text-secondary);
    --checkbox-border: #adb5bd; /* Standard Bootstrap light checkbox border */
    --checkbox-checked-bg: var(--accent-primary);
    --checkbox-checked-border: var(--accent-primary);
    --checkbox-focus-shadow: rgba(var(--accent-primary-rgb), 0.25);
    --accordion-item-bg: var(--bg-secondary);
    --accordion-item-border: var(--border-color-strong);
    --accordion-button-bg: var(--bg-tertiary);
    --accordion-button-color: var(--text-primary);
    --accordion-button-active-bg: #e7f1ff; /* Specific light blue active */
    --accordion-button-active-color: var(--accent-primary);
    --accordion-body-bg: var(--bg-secondary);
    --accordion-icon-filter: none; /* Reset filter */
    --hr-border-color: var(--border-color-strong);
    --btn-neon-border: var(--accent-primary);
    --btn-neon-color: var(--accent-primary);
    --btn-neon-shadow: transparent; /* No glow */
    --btn-neon-hover-bg: var(--accent-primary);
    --btn-neon-hover-color: var(--text-on-accent-primary);
    --cursor-border: var(--accent-primary);
    --cursor-shadow: transparent; /* No shadow */
    --cursor-hover-border: var(--accent-success);
    --dynamic-bg-opacity: 0.08;
    /* --dynamic-bg-color: var(--accent-primary); */ /* Already defined */
    --hero-overlay-bg: rgba(255, 255, 255, 0.0); /* Light overlay */
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-primary);
    overflow-x: hidden;
    padding-top: var(--navbar-height); /* Prevent content overlap */
    transition: background-color 0.3s ease, color 0.3s ease;
}


h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--text-heading);
}


h2.section-title {
    text-align: center;
    margin-bottom: 60px;
    font-size: clamp(2.2rem, 5vw, 3rem);
    font-weight: 700;
    color: var(--accent-primary);
}

.text-muted {
    color: var(--text-secondary);
}

.dropdown-menu  {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 15px var(--shadow-color-light);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.dropdown-item {
    color: var(--text-secondary);
    padding: 10px 20px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.dropdown-item:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}


a {
    color: var(--accent-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--accent-secondary);
    text-decoration: none; /* Keep no underline on hover */
}

/* --- Dynamic Background --- */
#dynamic-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    background: linear-gradient(45deg, var(--bg-primary), var(--bg-secondary), var(--bg-primary));
    background-size: 200% 200%;
    animation: gradientBG 25s ease infinite;
    transition: background 0.3s ease; /* Smooth theme change */
}

#dynamic-bg-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* Use primary accent for the grid lines */
    background-image: linear-gradient(rgba(var(--accent-primary-rgb), var(--dynamic-bg-opacity)) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-primary-rgb), var(--dynamic-bg-opacity)) 1px, transparent 1px);
    background-size: 60px 60px; /* Slightly larger grid */
    opacity: 0.7; /* Adjusted base opacity */
    animation: pulseGrid 15s infinite alternate;
    transition: background-image 0.3s ease, opacity 0.3s ease;
}

@keyframes gradientBG { /* Simpler gradient animation */
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes pulseGrid { /* Gentler pulse */
    0% { opacity: 0.5; }
    100% { opacity: 0.9; }
}

/* --- Cursor Follower --- */
#cursor-follower {
    position: fixed;
    width: 20px;
    height: 20px;
    border: 2px solid var(--cursor-border);
    border-radius: 50%;
    left: -50px; /* Initial off-screen */
    top: -50px; /* Initial off-screen */
    pointer-events: none;
    z-index: 9999;
    transition: transform 0.1s ease-out, opacity 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    transform-origin: center center;
    box-shadow: 0 0 8px var(--cursor-shadow), 0 0 15px var(--cursor-shadow);
    opacity: 0; /* Start hidden */
}

/* Cursor hover state */
.cursor-hover #cursor-follower {
    transform: scale(1.5) translate(-5px, -5px);
    opacity: 1;
    border-color: var(--cursor-hover-border);
    box-shadow: 0 0 10px var(--cursor-hover-border); /* Optional shadow on hover */
}

/* --- Navbar --- */
#mainNav {
    background-color: rgba(var(--bg-secondary-rgb), 0.95); /* Use RGB for opacity */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-bottom: 1px solid var(--border-color);
    height: var(--navbar-height);
    transition: background-color 0.3s ease, border-color 0.3s ease;
    padding-top: 0;
    padding-bottom: 0;
}

.navbar-brand {
    padding-top: 0.2rem; /* Adjust vertical padding if needed */
    padding-bottom: 0.2rem;
    margin-right: auto; /* Push toggler/controls to the right */
}

.navbar-logo-img {
    height: 85px; /* Adjust the height as desired - navbar is ~70px */
    width: auto; /* Maintain aspect ratio */
    vertical-align: middle; /* Helps align image nicely if there's text nearby */
    margin-right: 5px; /* Optional: Add a little space if needed */
}

#mainNav .navbar-brand {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--accent-primary);
    transition: color 0.3s ease;
}

#mainNav .navbar-brand:hover {
    color: var(--accent-secondary);
}

#mainNav .navbar-nav .nav-link {
    color: var(--text-secondary);
    font-weight: 500; /* Use Lato weight */
    font-size: 0.9rem;

    padding: 0.8rem 1rem;
    transition: color 0.3s ease;
    position: relative;
}

#mainNav .navbar-nav .nav-link:hover,
#mainNav .navbar-nav .nav-link.active {
    color: var(--accent-primary);
}

/* Optional: Add underline effect for active/hover nav link (Desktop only) */
@media (min-width: 992px) {
    #mainNav .navbar-nav .nav-link::after {
        content: '';
        position: absolute;
        bottom: 5px; /* Adjust position */
        left: 1rem; /* Match padding */
        right: 1rem; /* Match padding */
        height: 2px;
        background-color: var(--accent-secondary);
        transform: scaleX(0);
        transition: transform 0.3s ease;
        transform-origin: center;
    }

    #mainNav .navbar-nav .nav-link:hover::after,
    #mainNav .navbar-nav .nav-link.active::after {
        transform: scaleX(1);
    }
}

#mainNav .navbar-toggler {
    border: none;
    font-size: 1.2rem;
    color: var(--text-secondary);
    padding: 0.5rem 0.8rem; /* Adjust padding */
}

#mainNav .navbar-toggler:focus {
    box-shadow: none;
}

#mainNav .navbar-toggler i {
    color: var(--accent-primary);
    font-size: 1.4rem; /* Make icon slightly larger */
}

/* Theme Toggle Button (Shared Styles) */
.theme-toggle-btn {
    cursor: pointer;
    border: 1px solid var(--border-color-strong);
    background: transparent;
    color: var(--text-secondary);
    padding: 5px 8px;
    border-radius: 5px;
    transition: all 0.3s ease;
    line-height: 1; /* Ensure icon vertical alignment */
    display: inline-flex; /* Align icon inside */
    align-items: center;
    justify-content: center;
}

.theme-toggle-btn:hover {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
}

/* Mobile Theme/Language Toggle Link Styling */
.theme-toggle-link { /* Used for mobile language dropdown link */
    color: var(--text-secondary);
    padding: 5px 8px; /* Match button padding */
    line-height: 1;
}
.theme-toggle-link:hover {
    color: var(--accent-primary);
}
.theme-toggle-link i {
    font-size: 1.1rem; /* Adjust icon size */
}

/* Theme Icon Visibility (Handled by JS applyTheme function now) */
/* body:not(.light-mode) .fa-sun { display: none; } */
/* body.light-mode .fa-moon { display: none; } */

/* --- Hero Section --- */
#hero {
    min-height: calc(100vh - var(--navbar-height)); /* Adjust for navbar */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative; /* Needed for pseudo-element */
    padding: 40px 15px; /* Add padding */
    background: transparent; /* Keep transparent to see dynamic BG */
    margin-top: calc(-1 * var(--navbar-height)); /* Pull up to start at viewport top */
    padding-top: var(--navbar-height); /* Add padding back */
    overflow: hidden; /* Prevent potential overflow issues */

    /* *** Background Image Styles *** */
    background-image: url('../images/landscape.jpg'); /* Example Image - Replace with your preferred one */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Optional: Parallax-like effect */
}

/* *** Overlay for Hero Background *** */
#hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--hero-overlay-bg);
    z-index: 0; /* Behind content */
    transition: background-color 0.3s ease; /* Smooth theme transition for overlay */
}

/* *** Ensure hero content is above overlay *** */
#hero .container {
    position: relative; /* Needed for z-index */
    z-index: 1; /* Place content above ::before pseudo-element */
}

#hero h1 {
    font-size: clamp(2.8rem, 7vw, 5rem); /* Slightly larger */
    margin-bottom: 0.5em;
    color: var(--text-on-image-primary); /* Use variable for forced white */
    text-shadow: 2px 2px 4px var(--text-shadow-on-image); /* Use variable */
    font-weight: 500; /* Bold heading */
}

#hero p.lead { /* More specific selector */
    font-family: var(--font-subtext);
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    color: var(--text-on-image-secondary); /* Use variable for forced light grey */
    max-width: 750px;
    margin: 0 auto 2em auto;
    line-height: 1.6;
    text-shadow: 1px 1px 2px var(--text-shadow-on-image); /* Use variable */
}

#typing-container {
    font-size: clamp(2.3rem, 3vw, 1.9rem);
    font-weight: 700;
    color: var(--accent-success); /* Use success green */
    font-family: var(--font-heading); /* Use heading font for typing */
    margin-top: 1.5em;
    min-height: 1.5em; /* Use min-height to prevent collapsing */
    text-shadow: 1px 1px 2px var(--text-shadow-on-image); /* Use variable */
}

#typing-effect {
    border-right: 0.1em solid var(--accent-success);
    animation: blink-caret 0.75s step-end infinite;
    padding-right: 0.1em;
    /* Prevent wrapping */
    white-space: nowrap;
    display: inline-block; /* Needed for border-right to work well */
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: var(--accent-success); }
}


/* --- Neon Button (Revised) --- */
.btn-neon {
    background: var(--bg-neon-rgb);
    /*border: 2px solid var(--btn-neon-border);*/
    color: var(--text-on-neon-colr-rgb);
    padding: 12px 35px; /* Slightly more padding */
    font-family: var(--font-primary); /* Use primary font */
    font-weight: 700; /* Bolder button text */
    border: none;
    font-size: 1.1rem;
    border-radius: 12px; /* More rounded corners */
    transition: background 0.3s ease, color 0.3s ease;
    box-shadow: 0 0 10px rgba(158,144,32,0.3);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-neon:hover,
.btn-neon:focus {
    background: var(--btn-neon-hover-bg);
    color: var(--btn-neon-hover-color); /* Uses variable */
    box-shadow: 0 0 10px var(--btn-neon-shadow), 0 0 20px var(--btn-neon-shadow), inset 0 0 5px var(--btn-neon-shadow);
    text-shadow: none;
    transform: translateY(-2px);
    outline: none;

    /*background: #204d9e; !* Blue on hover *!*/
    /*color: #fff;*/
}

/* Note: Light mode hover color is defined via --btn-neon-hover-color in body.light-mode */

/* --- Example Work Section --- */
#example-work {
    background-color: rgba(var(--bg-primary-rgb), 0.6); /* Blend with theme */
    transition: background-color 0.3s ease;
}

.section-subtitle { /* Generic subtitle style if needed elsewhere */
    font-family: var(--font-subtext);
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1.6;
    transition: color 0.3s ease;
}

.example-book-title {
    color: var(--book-title); /* Use heading color */
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.8rem; /* Slightly smaller than section title */
    transition: color 0.3s ease;
}

.example-book-description {
    font-family: var(--font-subtext);
    font-size: 1rem;
    margin-bottom: 1.5rem; /* Ensure spacing */
}

.example-item {
    max-width: 250px; /* Limit width of the item container */
    transition: transform 0.3s ease;
    margin-left: auto; /* Center if col width is larger */
    margin-right: auto;
}

.example-cover-img {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    max-height: 350px; /* Limit image height */
    width: auto; /* Maintain aspect ratio */
    max-width: 100%; /* Ensure it doesn't overflow container */
    margin-left: auto; /* Center image within item div */
    margin-right: auto;
    display: block; /* Ensure centering works */
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.example-item:hover .example-cover-img {
    transform: scale(1.03);
    border-color: var(--accent-primary);
    box-shadow: 0 4px 15px var(--shadow-color-light); /* Use theme shadow */
}

.example-language-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    transition: color 0.3s ease;
}

.example-item:hover .example-language-label {
    color: var(--accent-primary);
}

/* --- Responsiveness for Example Work --- */
@media (max-width: 767px) {
    .example-book-title {
        font-size: 1.6rem;
    }
    .example-cover-img {
        max-height: 280px; /* Adjust height for smaller screens */
    }
    #example-work .section-subtitle { /* Target specifically if needed */
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .example-cover-img {
        max-height: 240px; /* Further adjust height */
    }
    .example-language-label {
        font-size: 0.8rem;
    }
}


/* --- General Sections --- */
section {
    padding: 80px 0;
    position: relative;
    z-index: 1;
    background-color: transparent; /* Sections overlay the dynamic bg */
    border-bottom: 1px solid var(--border-color); /* Subtle separator */
    transition: border-color 0.3s ease;
}

section:last-of-type {
    border-bottom: none;
}

/* --- Features Section --- */
.feature-block {
    text-align: center;
    padding: 35px 25px;
    background: rgba(var(--bg-secondary-rgb), 1.0); /* Use RGB for opacity */
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.feature-block:hover {
    transform: translateY(-10px);
    border-color: var(--accent-primary);
    background-color: rgba(var(--bg-tertiary-rgb), 0.8);
    box-shadow: 0 10px 25px var(--shadow-color-light);
}

.feature-icon {
    font-size: 2.8rem; /* Slightly smaller */
    color: var(--accent-primary);
    margin-bottom: 25px;
    transition: transform 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    width: 75px;
    height: 75px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0px solid var(--border-color-strong);
    border-radius: 50%;
}

.feature-block:hover .feature-icon {
    color: var(--bg-primary-small);
    border-color: var(--accent-secondary);
    transform: scale(1.1) rotate(5deg);
}

.feature-block h5 {
    font-size: 1.4rem; /* Slightly larger */
    margin-bottom: 15px;
    color: var(--text-heading); /* Use heading color */
    font-weight: 700;
    transition: color 0.3s ease;
}

.feature-block:hover h5 {
    color: var(--bg-primary-small);
}

.feature-block p {
    font-family: var(--font-subtext);
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    transition: color 0.3s ease;
}


/* --- Platforms Section --- */
#platforms {
    background-color: rgba(var(--bg-secondary-rgb), 0.5); /* Use theme color */
    transition: background-color 0.3s ease;
}

.platform-logo {
    padding: 20px;
    display: flex;
    flex-direction: column; /* Stack icon and text */
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0.8;
    text-align: center; /* Center text */
}

.platform-logo i {
    font-size: 4rem;
    color: var(--text-secondary);
    margin-bottom: 15px; /* Space between icon and text */
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.platform-logo p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    transition: color 0.3s ease;
    margin-bottom: 0; /* Remove default margin */
}

.platform-logo:hover {
    transform: scale(1.05);
    opacity: 1;
}

.platform-logo:hover i {
    color: var(--accent-success);
}

.platform-logo:hover p {
    color: var(--text-primary);
}

/* --- Testimonials Section --- */
#testimonials {
    background-color: rgba(var(--bg-secondary-rgb), 0.5);
    transition: background-color 0.3s ease;
}

.testimonial-card {
    background: rgba(var(--bg-tertiary-rgb), 0.7);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 35px;
    margin-bottom: 30px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column; /* Ensure consistent height use */
}

.testimonial-card:hover {
    border-color: var(--accent-secondary);
    box-shadow: 0 5px 15px rgba(var(--accent-secondary-rgb), 0.1);
}

.testimonial-card blockquote {
    font-family: var(--font-subtext);

    font-style: italic;
    color: var(--text-primary);
    margin-bottom: 20px; /* More space */
    border-left: 4px solid var(--blockquote-border);
    padding-left: 20px;
    font-size: 1.05rem; /* Slightly larger quote */
    line-height: 1.7;
    flex-grow: 1; /* Allow quote to take space */
    transition: color 0.3s ease, border-color 0.3s ease;
}

.testimonial-card blockquote p {
    margin-bottom: 0;
}

.testimonial-card .client-name {
    font-weight: 700;
    color: var(--accent-primary);
    margin-top: auto; /* Push to bottom */
    text-align: right;
    font-size: 1rem;
    transition: color 0.3s ease;
}

.testimonial-card .client-title {
    font-size: 0.9em;
    color: var(--text-secondary);
    text-align: right;
    transition: color 0.3s ease;
    display: block; /* Ensure it takes full width for alignment */
}

/* --- FAQ Section --- */
#faq {
    background-color: rgba(var(--bg-primary-rgb), 0.6); /* Use primary bg */
    transition: background-color 0.3s ease;
}

.accordion-item {
    background-color: var(--accordion-item-bg);
    border: 1px solid var(--accordion-item-border);
    margin-bottom: 1rem;
    border-radius: 8px;
    overflow: hidden;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.accordion-header { /* No specific styles needed */ }

.accordion-button {
    background-color: var(--accordion-button-bg);
    color: var(--accordion-button-color);
    font-family: var(--font-primary); /* Use primary font */
    font-weight: 700;
    font-size: 1.15rem;
    border: none;
    box-shadow: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-align: left; /* Ensure text aligns left */
    padding: 1.2rem 1.5rem;
    width: 100%; /* Ensure it takes full width */
}

.accordion-button:not(.collapsed) {
    color: var(--accordion-button-active-color);
    background-color: var(--accordion-button-active-bg);
    box-shadow: inset 0 -2px 0 var(--accent-primary); /* Use primary accent */
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.accordion-button:focus {
    z-index: 3;
    border-color: var(--input-focus-border);
    outline: 0;
    box-shadow: 0 0 0 0.2rem var(--input-focus-shadow);
}

.accordion-button::after { /* Style the default Bootstrap icon */
    filter: var(--accordion-icon-filter);
    transition: filter 0.3s ease, transform 0.3s ease; /* Add transform transition */
    background-size: 1rem; /* Adjust icon size */
    flex-shrink: 0; /* Prevent icon from shrinking */
}

/* Keep icon color consistent with button text - filter handles this via variable */
.accordion-button:not(.collapsed)::after {
    filter: var(--accordion-icon-filter); /* Already handles color change */
    transform: rotate(-180deg); /* Explicitly add rotation */
}


.accordion-body {
    background-color: var(--accordion-body-bg);
    color: var(--text-secondary);
    font-size: 0.95rem;
    padding: 1.5rem;
    line-height: 1.7;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.accordion-body p:last-child {
    margin-bottom: 0;
}

.accordion-body ul {
    list-style-type: disc;
    padding-left: 20px;
    margin-top: 1rem;
    margin-bottom: 1rem; /* Add margin bottom */
}

.accordion-body li {
    margin-bottom: 0.5rem;
}

.accordion-body strong {
    color: var(--text-primary);
    font-weight: 700;
    transition: color 0.3s ease;
}


/* --- Contact Section --- */
#contact {
    background-color: rgba(var(--bg-secondary-rgb), 0.5);
    transition: background-color 0.3s ease;
}

.social-icons a {
    color: var(--text-secondary);
    font-size: 1.6rem;
    margin: 0 12px;
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block; /* Needed for transform */
}

.social-icons a:hover {
    color: var(--accent-primary);
    transform: translateY(-3px);
}
/* Remove the specific .icon-themed class requirement */
/* .social-icons a:hover .icon-themed { ... } */
/* .icon-themed { ... } */


/* --- Footer --- */
footer {
    padding: 25px 0;
    background-color: var(--bg-primary);
    color: var(--text-secondary);
    font-size: 0.9rem;
    border-top: 1px solid var(--border-color);
    position: relative;
    z-index: 1;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

footer .footer-links a {
    color: var(--text-secondary);
    text-decoration: none;
    margin: 0 5px; /* Add spacing */
}

footer .footer-links a:hover {
    color: var(--text-primary);
    text-decoration: underline;
}


/* --- Modals --- */
.modal {
    --bs-modal-bg: var(--bg-secondary); /* Use CSS vars directly */
    --bs-modal-color: var(--text-primary);
    --bs-modal-border-color: var(--border-color-strong);
    --bs-modal-border-radius: 8px;
    --bs-modal-box-shadow: 0 5px 25px var(--shadow-modal);
    --bs-modal-header-border-color: var(--border-color); /* Add header border color */
    --bs-modal-footer-border-color: var(--border-color); /* Add footer border color */
    --bs-modal-backdrop-bg: var(--modal-backdrop-bg);
    --bs-modal-backdrop-opacity: var(--modal-backdrop-opacity);
}

.modal-content {
    /* Use Bootstrap's CSS variables via .modal parent */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.modal-body {
    padding: 2rem;
    max-height: 75vh;
    overflow-y: auto;
    color: var(--text-secondary); /* Default modal text */
    transition: color 0.3s ease;
}

.modal-body h4, .modal-body h5 { /* Target h5 as well */
    color: var(--accent-primary);
    font-family: var(--font-heading);
    font-weight: 700;
    margin-bottom: 1.5rem;
    transition: color 0.3s ease;
}

.modal-body p {
    /* Inherit color from .modal-body */
    margin-bottom: 1rem;
    line-height: 1.6;
}

.modal-body strong {
    color: var(--text-primary); /* Primary text color for strong tags */
    font-weight: 700;
    transition: color 0.3s ease;
}

.modal-body ul {
    list-style: none;
    padding-left: 0;
}

.modal-body li {
    margin-bottom: 0.7rem;
    padding-left: 25px;
    position: relative;
}

.modal-body li::before {
    content: "\f105"; /* FontAwesome angle-right */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--accent-primary);
    position: absolute;
    left: 0;
    top: 4px; /* Adjust position */
    transition: color 0.3s ease;
}

.modal-header, .modal-footer {
    display: none; /* Keep hidden if not used */
    /* If used, they will inherit vars from .modal */
}


/* Apply Modal Specific Styles */
#applyModal .form-label {
    color: var(--text-primary);
    font-weight: 700;
    transition: color 0.3s ease;
}

#applyModal .form-control-themed {
    margin-bottom: 1rem;
} /* Use themed control */

#applySummary {
    border: 1px dashed var(--border-color);
    padding: 20px;
    margin-bottom: 2rem;
    border-radius: 5px;
    background-color: rgba(var(--bg-tertiary-rgb), 0.3);
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

#applySummary h5 {
    color: var(--accent-success);
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    transition: color 0.3s ease;
}

#applySummary p {
    margin-bottom: 0.5rem;
    font-size: 1rem;
    color: var(--text-secondary); /* Inherited, but explicit */
    transition: color 0.3s ease;
}

#applySummary p strong:not(.total-amount) { /* Style non-total strong tags */
    color: var(--text-primary);
    margin-right: 5px; /* Add space after label */
    transition: color 0.3s ease;
}

#applySummary p strong.total-amount { /* Specifically style the total amount */
    color: var(--accent-success);
    font-size: 1.1em; /* Slightly larger total */
    transition: color 0.3s ease;
}

#applyFormMessage p i { /* Style icons in messages */
    margin-right: 0.5em;
}


/* --- Back to Top Button --- */
#backToTopBtn {
    display: none; /* Hidden by default */
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1050; /* Below modals but above most content */
    border: none;
    outline: none;
    background-color: var(--accent-primary);
    color: var(--text-on-accent-primary); /* Use variable */
    cursor: pointer;
    padding: 10px 15px;
    border-radius: 50%; /* Make it round */
    font-size: 18px;
    box-shadow: 0 4px 8px var(--shadow-button); /* Use variable */
    transition: opacity 0.3s ease, background-color 0.3s ease, transform 0.2s ease, color 0.3s ease, box-shadow 0.3s ease;
    opacity: 0; /* Start faded out */
    visibility: hidden; /* Start hidden */
}
#backToTopBtn.show { /* Class added by JS */
    opacity: 0.8;
    visibility: visible;
}


#backToTopBtn:hover {
    background-color: var(--accent-secondary);
    opacity: 1;
    transform: scale(1.1);
}

/* Light mode adjustment */
body.light-mode #backToTopBtn:hover {
    background-color: var(--text-heading); /* Darker blue hover, uses heading color */
}


/* --- Responsiveness --- */
@media (max-width: 991px) { /* Adjust when navbar collapses */
    body {
        padding-top: var(--navbar-height); /* Keep padding */
    }

    #hero {
        min-height: calc(100vh - var(--navbar-height));
        margin-top: calc(-1 * var(--navbar-height));
        padding-top: var(--navbar-height);
    }

    #mainNav {
        /* Ensure background covers collapsed menu area better */
        background-color: var(--bg-secondary); /* Use solid color when collapsed */
        backdrop-filter: none; /* Remove blur when solid */
        -webkit-backdrop-filter: none;
    }

    #mainNav .navbar-collapse {
        background-color: var(--bg-secondary); /* Add background to the expanded menu */
        padding: 1rem; /* Add padding inside the menu */
        margin-top: 0.5rem; /* Space between toggler and menu */
        border-top: 1px solid var(--border-color);
        box-shadow: 0 8px 15px rgba(0,0,0,0.1); /* Optional shadow for depth */
        /* Make it full width */
        position: absolute;
        top: var(--navbar-height); /* Position below navbar */
        left: 0;
        right: 0;
        z-index: 1030; /* Ensure it's above page content */
        max-height: calc(100vh - var(--navbar-height) - 20px); /* Limit height and allow scrolling */
        overflow-y: auto;
    }

    #mainNav .navbar-nav {
        margin-top: 0; /* Remove top margin from ul */
        border-top: none; /* Remove border from ul */
        padding-top: 0; /* Remove padding from ul */
        transition: none;
        align-items: flex-start !important; /* Align items left */
    }

    #mainNav .navbar-nav .nav-item {
        margin-left: 0 !important; /* Override ms-auto spacing */
        width: 100%; /* Make nav items full width */
    }

    #mainNav .navbar-nav .nav-link {
        padding: 0.7rem 1rem; /* Adjust padding */
        display: block; /* Ensure links take full width */
        width: 100%;
    }

    #mainNav .navbar-nav .nav-link::after { /* Hide underline on mobile */
        display: none;
    }

    /* Ensure mobile dropdowns work well */
    #mainNav .navbar-collapse .dropdown-menu {
        background-color: var(--bg-tertiary); /* Slightly different bg for dropdown */
        border: 1px solid var(--border-color-strong);
    }
    #mainNav .navbar-collapse .dropdown-item {
        color: var(--text-secondary);
    }
    #mainNav .navbar-collapse .dropdown-item:hover,
    #mainNav .navbar-collapse .dropdown-item:focus,
    #mainNav .navbar-collapse .dropdown-item.active {
        background-color: var(--accent-primary);
        color: var(--text-on-accent-primary);
    }

    /* Mobile theme/language button styles already handled by .theme-toggle-btn etc */

}

@media (max-width: 767px) {
    h2.section-title {
        font-size: clamp(1.8rem, 6vw, 2.5rem);
        margin-bottom: 40px;
    }

    section {
        padding: 60px 0;
    }

    .feature-block, .testimonial-card {
        margin-bottom: 30px;
    }
    .platform-logo {
        margin-bottom: 15px; /* Smaller margin */
    }

    .platform-logo i {
        font-size: 3.5rem;
    }

    #hero {
        padding: 60px 15px;
        background-attachment: scroll; /* Disable fixed attachment on mobile */
    }

    .language-list {
        columns: 1;
        -webkit-columns: 1;
        -moz-columns: 1;
    }

    #grandTotalContainer {
        text-align: center;
        font-size: 1.3em;
    }

    #applyNowContainer {
        text-align: center;
    }

    #applyModal .modal-dialog {
        max-width: 95%;
        margin: 1.75rem auto; /* Adjust margin */
    }
    .modal-body {
        padding: 1.5rem;
    }

    #resultsTableContainer {
        font-size: 0.9rem; /* Adjust font size for small screens */
    }
    #resultsTableContainer th,
    #resultsTableContainer td {
        padding: 0.6rem 0.5rem; /* Adjust padding */
    }
}

@media (max-width: 576px) {
    .navbar-logo-img {
        height: 50px; /* Slightly smaller logo */
    }

    #mainNav .navbar-brand {
        font-size: 1.4rem; /* Smaller brand text */
    }

    h1 {
        font-size: clamp(2.2rem, 10vw, 2.8rem);
    }

    #hero p.lead {
        font-size: 1rem;
    }

    #typing-container {
        font-size: 1.2rem;
    }

    .btn-neon {
        padding: 10px 25px;
        font-size: 1rem;
    }

    #resultsTableContainer table {
        font-size: 0.85rem;
    }
    #resultsTableContainer th, #resultsTableContainer td {
        padding: 0.5rem 0.4rem;
    }

    .social-icons a {
        font-size: 1.4rem;
        margin: 0 10px;
    }

    #backToTopBtn {
        bottom: 15px;
        right: 15px;
        padding: 8px 12px;
        font-size: 16px;
    }
}


/* --- Scrollbar (Webkit) --- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 5px;
    border: 2px solid var(--scrollbar-track); /* Creates padding */
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-secondary);
}

/* Modal scrollbar (Webkit) */
.modal-body::-webkit-scrollbar {
    width: 8px;
}

.modal-body::-webkit-scrollbar-track {
    background: var(--modal-scrollbar-track);
    border-radius: 4px;
}

.modal-body::-webkit-scrollbar-thumb {
    background: var(--modal-scrollbar-thumb);
    border-radius: 4px;
    border: none;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--modal-scrollbar-thumb) 80%, var(--text-heading) 20%);
} /* Slightly darken/adjust on hover */

/* --- Scrollbar (Firefox - Basic) --- */
/* Note: Firefox scrollbar styling is less customizable */
html {
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    scrollbar-width: thin;
}

.modal-body {
    scrollbar-color: var(--modal-scrollbar-thumb) var(--modal-scrollbar-track);
    scrollbar-width: thin;
}
.custom-dashed-box {
    display: flex;
    align-items: center;
    border: 2px dashed #6c757d;
    border-radius: 20px;
    padding: 24px;
    margin-top: 40px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    background: var(--bg-secondary);
  }

  .box-image {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 12px;
    margin-right: 24px;
    flex-shrink: 0;
  }

  .box-text {
    flex: 1;
    font-family: "Funnel Display", sans-serif;
  }