/* ==========================================================================
   1. VARIABLES & BASIC RESET
   ========================================================================== */
:root {
    /* --- Base Colors (used by both themes) --- */
    --primary-color: #ed6a32; /* Original primary orange */
    --monospace-font: 'Share Tech Mono', 'Courier New', Courier, monospace;
    --sans-serif-font: 'Roboto', sans-serif;
    --section-padding: 5rem 2rem;
    --transition-speed: 0.3s; /* Standard transition speed */

    /* --- Dark Mode (Current Default) --- */
    --primary-color-current: var(--primary-color);
    --bg-main: #121212;
    --bg-card-main: #1E1E1E;
    --bg-card-darker-main: #181818;
    --bg-terminal-static-main: #0D0D0D;
    --text-color-main: #E0E0E0;
    --text-darker-main: #a0a0a0;
    --header-bg: rgba(18, 18, 18, 0.75);
    --header-border: rgba(237, 106, 50, 0.15);
    --navbar-links-bg-mobile: rgba(25, 25, 25, 0.95);
    --footer-bg: #121212; /* Same as --bg-main for dark */
    --footer-border: #222;
    --input-bg: #121212; /* Dark input background */
    --input-border: #333;
    --input-text-color: var(--text-color-main);
    --input-placeholder-color: #555;
    --input-focus-shadow: rgba(237, 106, 50, 0.25);
    --modal-bg: var(--bg-card-main);
    --modal-border: var(--primary-color-current);
    --tab-link-color: var(--text-darker-main);
    --tab-link-border: #333;
    --solution-content-detailed-border: #2a2a2a;
    --hero-particle-color-base: 237, 106, 50; /* RGB for rgba */
    --terminal-green-main: #00FF41;
    --terminal-prompt-blue-main: #78D0FF;
    --border-color-soft: #333;
    --border-color-card: #2a2a2a;
    --card-shadow-main: 0 5px 15px rgba(0, 0, 0, 0.3);
    --accent-shadow-main: 0 0 15px rgba(237, 106, 50, 0.3);
    --primary-color-hover-text: #121212; /* Text color when primary is background */
    --button-outline-hover-bg: var(--primary-color-current);
    --button-outline-hover-text: #121212;


    /* Theme Toggle Specific - Dark */
    --theme-toggle-bg: linear-gradient(145deg, #1a2036, #2a304d); /* Dark blue/purple gradient */
    --theme-toggle-slider-bg: #c0c0c0; /* Silvery Moon color */
    --theme-toggle-icon-moon-fill: var(--theme-toggle-slider-bg); /* Moon body */
    --theme-toggle-icon-moon-crater-fill: #808080; /* Moon crater color */
    --theme-toggle-star-color: rgba(255, 255, 224, 0.7);
}

body.light-mode {
    --primary-color-current: #d95f29; /* Slightly adjusted primary for light bg */
    --bg-main: #f4f4f8;
    --bg-card-main: #ffffff;
    --bg-card-darker-main: #eef0f5;
    --bg-terminal-static-main: #f0f0f0; /* Light terminal background */
    --text-color-main: #2c3e50;
    --text-darker-main: #555e69;
    --header-bg: rgba(255, 255, 255, 0.85);
    --header-border: rgba(217, 95, 42, 0.2);
    --navbar-links-bg-mobile: rgba(240, 240, 240, 0.95);
    --footer-bg: #eef0f5;
    --footer-border: #d1d5db;
    --input-bg: #ffffff;
    --input-border: #ccc;
    --input-text-color: #333;
    --input-placeholder-color: #888;
    --input-focus-shadow: rgba(217, 95, 42, 0.25);
    --modal-bg: #ffffff;
    --modal-border: var(--primary-color-current);
    --tab-link-color: #555e69;
    --tab-link-border: #ddd;
    --solution-content-detailed-border: #ddd;
    --hero-particle-color-base: 217, 95, 42;
    --terminal-green-main: #00802b; /* Darker green for light bg */
    --terminal-prompt-blue-main: #005ea6; /* Darker blue for light bg */
    --border-color-soft: #ddd;
    --border-color-card: #ddd;
    --card-shadow-main: 0 5px 15px rgba(0, 0, 0, 0.1);
    --accent-shadow-main: 0 0 15px rgba(217, 95, 42, 0.2);
    --primary-color-hover-text: #ffffff;
    --button-outline-hover-bg: var(--primary-color-current);
    --button-outline-hover-text: #ffffff;

    /* Theme Toggle Specific - Light */
    --theme-toggle-bg: linear-gradient(145deg, #87CEEB, #f0e68c); /* Sky blue to pale yellow */
    --theme-toggle-slider-bg: #FFEB3B; /* Bright Sun color */
    --theme-toggle-icon-sun-core-fill: var(--theme-toggle-slider-bg); /* Sun core */
    --theme-toggle-icon-sun-ray-stroke: #F9A825; /* Sun ray color */
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--sans-serif-font);
    background-color: var(--bg-main);
    color: var(--text-color-main);
    line-height: 1.7;
    overflow-x: hidden;
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}

/* ==========================================================================
   2. GLOBAL STYLES & UTILITIES
   ========================================================================== */
.accent-text {
    color: var(--primary-color);
}

.section-title {
    font-size: 2.8rem;
    font-family: var(--monospace-font);
    text-align: center;
    margin-bottom: 1rem;
    color: var(--text-color);
}

.section-subtitle {
    font-size: 1.1rem;
    color: var(--text-darker);
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3rem auto;
}

.text-center {
    text-align: center;
}

/* Generic content section padding - can be applied to various sections */
.content-section {
    padding: var(--section-padding);
}

/* Container for narrower content on pages */
.container-narrow {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1rem;
}

.container-medium {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* For sub-section titles within pages */
.section-title-small {
    font-size: 2.2rem;
    font-family: var(--monospace-font);
    text-align: center;
    margin-bottom: 2rem;
    color: var(--text-color);
}

/* For alternating background colors on homepage sections */
.home-section-alt {
    background-color: var(--bg-card-darker);
}

/* ==========================================================================
   3. COMMON COMPONENTS
   ========================================================================== */

/* --- Buttons --- */
.cta-button {
    background-color: var(--primary-color);
    color: var(--bg-dark);
    padding: 0.9rem 2.2rem;
    border: 2px solid var(--primary-color);
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
    box-shadow: 0 0 10px rgba(237, 106, 50, 0.4);
}
.cta-button:hover {
    background-color: transparent;
    color: var(--primary-color);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 0 20px rgba(237, 106, 50, 0.6);
}
.cta-button.small-cta {
    font-size: 1rem;
    padding: 0.7rem 1.8rem;
}

.cta-button-outline {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    padding: 0.7rem 1.5rem;
    border-radius: 5px;
    font-size: 0.95rem;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
}
.cta-button-outline:hover {
    background-color: var(--primary-color);
    color: var(--bg-dark);
}
.hero-section .hero-content .cta-button-outline.hero-cta-outline { /* Homepage specific secondary CTA */
    margin-left: 1rem;
    border-color: rgba(237, 106, 50, 0.7);
    color: rgba(237, 106, 50, 0.9);
}
.hero-section .hero-content .cta-button-outline.hero-cta-outline:hover {
    background-color: rgba(237, 106, 50, 0.2);
    color: var(--primary-color);
    border-color: var(--primary-color);
}
.tier-card .cta-button-outline { /* Specific for tier cards */
     margin-top: auto; /* Pushes button to bottom */
}


/* --- Forms --- */
#contactForm { /* Assuming this is the primary form, can be generalized */
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.form-group {
    display: flex;
    flex-direction: column;
}
.form-group label {
    margin-bottom: 0.5rem;
    color: var(--text-darker);
    font-size: 0.9rem;
}
.form-group input,
.form-group textarea,
.form-group select {
    padding: 0.9rem;
    background-color: var(--bg-dark);
    border: 1px solid #333;
    border-radius: 5px;
    color: var(--text-color);
    font-size: 1rem;
    font-family: var(--sans-serif-font);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #555;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(237, 106, 50, 0.25);
}
.form-group select { /* Custom select arrow */
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ed6a32' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 1em;
}
.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* --- Modals --- */
.modal {
    display: none;
    position: fixed;
    z-index: 1001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.7);
    backdrop-filter: blur(5px);
}
.modal-content {
    background-color: var(--bg-card);
    margin: 15% auto;
    padding: 2.5rem;
    border: 1px solid var(--primary-color);
    border-radius: 8px;
    width: 90%;
    max-width: 450px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    position: relative;
    animation: slideInModal 0.5s ease-out;
}
.close-button {
    color: var(--text-darker);
    float: right;
    font-size: 1.8rem;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 15px;
}
.close-button:hover,
.close-button:focus {
    color: var(--primary-color);
    text-decoration: none;
    cursor: pointer;
}
.modal-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}
.modal-content h3 {
    font-size: 1.8rem;
    margin-bottom: 0.8rem;
    color: var(--text-color);
}
.modal-content p {
    color: var(--text-darker);
}


/* ==========================================================================
   4. LAYOUT COMPONENTS (Header, Footer)
   ========================================================================== */

/* --- Header & Navbar --- */
#header {
    background-color: rgba(rgb(0 0 0 / 0%));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    border-bottom: 1px solid rgba(237, 106, 50, 0.15);
}
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}
.logo {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-color);
    text-decoration: none;
    font-family: var(--monospace-font);
}
.nav-links {
    list-style: none;
    display: flex;
}
.nav-links li {
    margin-left: 2.2rem;
}
.nav-links a {
    color: var(--text-darker);
    text-decoration: none;
    font-size: 1rem;
    position: relative;
    padding-bottom: 0.4rem;
    transition: color 0.3s ease;
}
.nav-links a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--primary-color);
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.3s ease-out;
}
.nav-links a:hover,
.nav-links a.active-link {
    color: var(--primary-color);
}
.nav-links a:hover::after,
.nav-links a.active-link::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}
.mobile-menu-toggle span {
    display: block;
    width: 25px;
    height: 2px;
    background-color: var(--text-color);
    margin: 5px 0;
    transition: all 0.3s ease-in-out;
}

/* --- Footer --- */
footer {
    background-color: var(--bg-dark);
    color: var(--text-darker);
    text-align: center;
    padding: 2.5rem 1rem;
    border-top: 1px solid #222;
}
.footer-content {
    max-width: 1200px;
    margin: 0 auto;
}
.footer-content p {
    margin-bottom: 1rem;
    font-size: 0.9rem;
}
.social-icons a {
    color: var(--text-darker);
    text-decoration: none;
    font-size: 1.3rem;
    font-family: var(--monospace-font);
    margin: 0 0.7rem;
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block;
}
.social-icons a:hover {
    color: var(--primary-color);
    transform: scale(1.2) translateY(-2px);
}
.footer-links {
    margin-top: 1rem;
    font-size: 0.85rem;
}
.footer-links a {
    color: var(--text-darker);
    text-decoration: none;
    margin: 0 0.5rem;
    transition: color 0.3s ease;
}
.footer-links a:hover {
    color: var(--primary-color);
}

/* ==========================================================================
   5. HOMEPAGE SECTIONS
   ========================================================================== */

/* --- Hero Section --- */
.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--section-padding);
    position: relative;
    background: var(--bg-dark);
}
#interactiveParticleCanvas { /* Used in Hero */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.hero-content {
    position: relative;
    z-index: 1;
}
.hero-content h1 {
    font-size: 3.8rem;
    margin-bottom: 1rem;
    font-family: var(--monospace-font);
    font-weight: 700;
    color: var(--text-color);
    text-shadow: 0 0 15px rgba(237, 106, 50, 0.4);
}
.hero-content p {
    font-size: 1.2rem; /* Homepage Hero p */
    line-height: 1.6;
    margin-bottom: 2.5rem;
    color: var(--text-darker);
    max-width: 700px; /* Homepage Hero p */
    margin-left: auto;
    margin-right: auto;
}

/* --- Challenges / Why VulnVault Section (Homepage) --- */
.challenges-section { /* Used on Homepage */
    background-color: var(--bg-dark);
}
.why-vulnvault-grid { /* Also used in #challenges */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 2rem auto 0;
    align-items: stretch;
}
.why-card {
    background-color: var(--bg-card);
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
    border: 1px solid transparent;
    box-shadow: var(--card-shadow);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}
.why-card:hover {
    transform: translateY(-8px);
    border-color: rgba(237, 106, 50, 0.5);
    box-shadow: 0 8px 25px rgba(237, 106, 50, 0.15);
}
.why-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
}
.why-card h3 {
    font-size: 1.4rem;
    font-family: var(--monospace-font);
    margin-bottom: 0.7rem;
    color: var(--text-color);
}
.why-card p {
    font-size: 0.95rem;
    color: var(--text-darker);
    flex-grow: 1;
    margin-bottom: 1.5rem;
}

/* --- ProbeIQ Teaser (Homepage) --- */
.probeiqlite-section.home-section-alt { /* From Homepage */
    padding: var(--section-padding);
}
.home-section-header {
    margin-bottom: 3rem;
    text-align: center;
}
.home-section-header .section-title { /* From Homepage */
    margin-bottom: 0.5rem;
}
.home-feature-preview {
    display: flex;
    align-items: center;
    gap: 3rem;
    max-width: 1100px;
    margin: 2rem auto;
    padding: 1rem;
}
.home-feature-preview:nth-child(even) {
    flex-direction: row-reverse;
}
.home-feature-img-container {
    flex: 0 0 48%;
    max-width: 500px;
}
.home-feature-img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}
.home-feature-text {
    flex: 1;
    padding-right: 1rem;
}
.home-feature-preview:nth-child(even) .home-feature-text {
    padding-right: 0;
    padding-left: 1rem;
}
.home-feature-text h4 {
    font-size: 1.8rem;
    color: var(--primary-color);
    font-family: var(--monospace-font);
    margin-bottom: 1rem;
}
.home-feature-text p { /* From Homepage */
    margin-bottom: 1.5rem;
    color: var(--text-darker);
    font-size: 1.05rem; /* Homepage feature text */
}
.home-feature-text ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1.5rem;
}
.home-feature-text ul li {
    margin-bottom: 0.6rem;
    font-size: 0.95rem;
    color: var(--text-color);
    padding-left: 1.2rem;
    position: relative;
}
.home-feature-text ul li .accent-text { /* For checkmark */
    position: absolute;
    left: 0;
    top: 2px;
}

/* --- Services Teaser (Homepage) --- */
.services-section { /* Used on Homepage and Services page */
    padding: var(--section-padding);
    background-color: var(--bg-card-darker);
}
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}
.service-card {
    background-color: var(--bg-card);
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid transparent;
    box-shadow: var(--card-shadow);
    text-align: center;
    transition: transform 0.3s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.service-card:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: var(--primary-color);
    box-shadow: 0 10px 30px rgba(237, 106, 50, 0.3);
}
.service-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.3s ease;
}
.service-card:hover .service-icon {
    transform: scale(1.3) rotate(8deg);
}
.service-card h3 {
    font-size: 1.5rem; /* Service card title */
    margin-bottom: 0.7rem;
    color: var(--text-color);
    font-family: var(--monospace-font);
}
.service-card p { /* Service card text */
    font-size: 0.95rem; /* Service card text */
    color: var(--text-darker);
    line-height: 1.6;
}
.service-card.service-card-condensed h3 { /* Homepage specific */
    font-size: 1.2rem;
}
.service-card.service-card-condensed p { /* Homepage specific */
    font-size: 0.85rem;
    line-height: 1.5;
}


/* --- Who We Empower / Solutions Teaser (Homepage) --- */
#who-we-empower.home-section-alt { /* Homepage specific */
    padding: var(--section-padding);
}
.empower-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto;
}
.empower-card {
    background-color: var(--bg-card);
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
    border-top: 4px solid var(--primary-color);
    box-shadow: var(--card-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.empower-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}
.empower-icon {
    font-size: 2.8rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
}
.empower-card h4 {
    font-size: 1.4rem;
    font-family: var(--monospace-font);
    margin-bottom: 0.7rem;
    color: var(--text-color);
}
.empower-card p {
    font-size: 0.95rem;
    color: var(--text-darker);
}

/* --- Trust & Expertise Section (Homepage) --- */
#trust-expertise.content-section { /* Homepage specific */
     padding: var(--section-padding);
}
.trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}
.trust-item {
    background-color: transparent;
    padding: 1rem;
}
.trust-icon {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
    display: inline-block;
}
.trust-item p {
    font-size: 1rem;
    color: var(--text-darker);
    line-height: 1.7;
}
.trust-item p em {
    display: block;
    margin-top: 0.5rem;
    font-style: italic;
    color: var(--text-color);
}
.client-logos { /* Placeholder styling */
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.client-logos span {
    font-size: 0.9rem;
    color: var(--text-darker);
    padding: 0.5rem 1rem;
    border: 1px dashed #444;
    border-radius: 4px;
    opacity: 0.7;
}

/* --- VulnOS Teaser (Homepage) --- */
#vulnos-home.content-section { /* Homepage specific */
    padding: var(--section-padding);
}
#vulnos-home .home-feature-img { /* For the VulnOS image on homepage */
    max-width: 400px; /* Adjust as needed */
    margin: 0 auto 1.5rem auto; /* Center if it's standalone */
}


/* --- Next Steps Section (Homepage) --- */
.next-steps-section {
    background-color: var(--bg-card-darker);
    padding: 4rem var(--section-padding) 5rem;
}
.next-steps-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}
.next-steps-actions .cta-button,
.next-steps-actions .cta-button-outline {
    min-width: 200px;
    text-align: center;
}

/* --- Dashboard Preview (Used on Homepage & ProbeIQ Page) --- */
.dashboard-preview-section {
    padding: var(--section-padding);
    background-color: var(--bg-card-darker); /* Default, can be overridden */
    position: relative;
}
.dashboard-container {
    position: relative;
    width: 80%;
    max-width: 1000px;
    margin: 2rem auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.dashboard-mockup-img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(237, 106, 50, 0.2);
    z-index: 5;
    object-fit: cover;
}
.dashboard-hotspot {
    position: absolute;
    border-radius: 5px;
    cursor: pointer;
    z-index: 6;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.dashboard-hotspot:hover {
    background-color: rgba(237, 106, 50, 0.1);
    box-shadow: 0 0 10px rgba(237, 106, 50, 0.2);
}
.dashboard-tooltip {
    position: fixed;
    background-color: var(--bg-card);
    color: var(--text-color);
    padding: 0.8rem 1.2rem;
    border-radius: 6px;
    border: 1px solid var(--primary-color);
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    font-size: 0.9rem;
    max-width: 280px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    transform: translateY(10px);
    z-index: 1005;
    pointer-events: none;
}
.dashboard-tooltip.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.dashboard-tagline { /* Sub-text for dashboard section */
    text-align: center;
    margin-top: 2.5rem;
    font-size: 1.1rem;
    color: var(--text-darker);
}


/* ==========================================================================
   6. GENERIC INTERNAL PAGE STYLES
   ========================================================================== */
.page-hero { /* For internal page top banners */
    padding: 5rem 2rem 4rem;
    background-color: var(--bg-card-darker);
    text-align: center;
    border-bottom: 1px solid rgba(237, 106, 50, 0.1);
}
.page-hero-content h1 {
    font-size: 3rem; /* Adjusted from 3.2rem for better balance */
    font-family: var(--monospace-font);
    color: var(--text-color);
    margin-bottom: 0.8rem;
    text-shadow: 0 0 8px rgba(237, 106, 50, 0.2);
}
.page-hero-content p {
    font-size: 1.15rem; /* Adjusted from 1.2rem */
    color: var(--text-darker);
    max-width: 750px; /* Max width for hero subtext */
    margin: 0 auto 1.5rem auto;
}

/* Specific Hero Backgrounds for Internal Pages */
.page-hero.probelite-hero {
    background: linear-gradient(rgb(255 255 255 / 85%), rgba(rgb(255 255 255 / 85%))), url('https://via.placeholder.com/1920x450.png?text=ProbeIQ+Platform+Banner') no-repeat center center/cover;
}
.page-hero.services-hero {
    background: linear-gradient(rgba(rgb(255 255 255 / 85%)), rgba(rgb(255 255 255 / 85%))), url('https://via.placeholder.com/1920x450.png?text=Expert+Services+Banner') no-repeat center center/cover;
}
.page-hero.solutions-hero {
    background: linear-gradient(rgba(rgb(255 255 255 / 85%)), rgba(rgb(255 255 255 / 85%))), url('https://via.placeholder.com/1920x450.png?text=Tailored+Solutions+Banner') no-repeat center center/cover;
}
.page-hero.vulnos-hero {
    background: linear-gradient(rgba(rgb(255 255 255 / 85%)), rgb(255 255 255 / 85%)), url('https://via.placeholder.com/1920x450.png?text=VulnOS+Education+Banner') no-repeat center center/cover;
}
.page-hero.about-hero,
.page-hero.contact-hero { /* Simpler hero for these pages */
    padding: 4rem 2rem;
    background-color: var(--bg-card);
}


/* ==========================================================================
   7. PROBEIQ PAGE SPECIFIC STYLES
   ========================================================================== */
.probelite-overview p { /* ProbeIQ Page */
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-darker);
    text-align: center;
}
.tiers-grid { /* ProbeIQ Page */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1100px;
    margin: 2rem auto;
}
.tier-card { /* ProbeIQ Page */
    background-color: var(--bg-card);
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid #2a2a2a;
    text-align: center;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.tier-card:hover,
.tier-card.popular {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 8px 25px rgba(237, 106, 50, 0.2);
    border-color: var(--primary-color);
}
.tier-card.popular {
    border-width: 2px;
}
.tier-icon { /* ProbeIQ Page */
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
}
.tier-card h3 { /* ProbeIQ Page */
    font-size: 1.6rem;
    font-family: var(--monospace-font);
    margin-bottom: 0.5rem;
}
.tier-description { /* ProbeIQ Page */
    font-size: 0.95rem;
    color: var(--text-darker);
    margin-bottom: 1.5rem;
    min-height: 40px; /* For alignment */
}
.tier-card ul { /* ProbeIQ Page */
    list-style: none;
    padding: 0;
    margin-bottom: 2rem;
    text-align: left;
    flex-grow: 1;
}
.tier-card ul li { /* ProbeIQ Page */
    font-size: 0.9rem;
    color: var(--text-color);
    margin-bottom: 0.6rem;
    padding-left: 1.8rem;
    position: relative;
}
.tier-card ul li::before { /* ProbeIQ Page */
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--terminal-green);
    font-weight: bold;
    font-size: 1.1rem;
}

.key-features-grid { /* ProbeIQ Page */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 2rem auto;
}
.key-feature { /* ProbeIQ Page */
    background: var(--bg-card);
    padding: 1.8rem;
    border-radius: 8px;
    border-left: 4px solid var(--primary-color);
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}
.kf-icon { /* ProbeIQ Page icon */
    font-size: 2.2rem;
    color: var(--primary-color);
    margin-bottom: 0.8rem;
}
.key-feature h4 { /* ProbeIQ Page feature title */
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    color: var(--text-color); /* Added color for consistency */
    font-family: var(--monospace-font); /* Added font for consistency */
}
.key-feature p { /* ProbeIQ Page feature text */
    font-size: 0.95rem;
    color: var(--text-darker);
}
.probeiqlite-section { /* ProbeIQ Page, also used on Homepage */
    padding: var(--section-padding);
    background-color: var(--bg-dark);
}
.probeiqlite-features-grid { /* Used on old homepage teaser */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    max-width: 1000px;
    margin: 2rem auto 0;
}
.feature-card { /* Used on old homepage teaser */
    background-color: var(--bg-card);
    padding: 1.8rem;
    border-radius: 8px;
    text-align: left;
    border: 1px solid var(--bg-card-darker);
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-card:hover { /* Used on old homepage teaser */
    transform: scale(1.03);
    box-shadow: 0 5px 20px rgba(237, 106, 50, 0.2);
}
.feature-icon { /* Used on old homepage teaser */
    font-size: 2rem;
    margin-bottom: 0.8rem;
    color: var(--primary-color);
}
.feature-card h4 { /* Used on old homepage teaser */
    font-size: 1.3rem;
    font-family: var(--monospace-font);
    margin-bottom: 0.5rem;
    color: var(--text-color);
}
.feature-card p { /* Used on old homepage teaser */
    font-size: 0.9rem;
    color: var(--text-darker);
    line-height: 1.6;
}
.feature-card.full-width-feature { /* Used on old homepage teaser */
    grid-column: 1 / -1;
    text-align: center;
}
.feature-card.full-width-feature .feature-icon { /* Used on old homepage teaser */
    margin-left: auto;
    margin-right: auto;
}


/* ==========================================================================
   8. SERVICES PAGE SPECIFIC STYLES
   ========================================================================== */
.service-listing { /* Wrapper for service items on Services page */
    padding: 2rem 0; /* Top/bottom padding for the group */
}
.service-detail .service-item { /* Services page */
    display: flex;
    gap: 2.5rem;
    margin-bottom: 4rem;
    padding: 2rem;
    background-color: var(--bg-card);
    border-radius: 8px;
    box-shadow: var(--card-shadow);
    align-items: flex-start;
}
.service-detail .service-item.alt-layout { /* Services page */
    flex-direction: row-reverse;
}
.service-item-icon { /* Services page */
    font-size: 4rem;
    color: var(--primary-color);
    flex-shrink: 0;
    margin-top: 0.5rem;
}
.service-item-content h3 { /* Services page */
    font-size: 2rem;
    font-family: var(--monospace-font);
    color: var(--primary-color);
    margin-bottom: 1rem;
}
.service-item-content p { /* Services page */
    font-size: 1.05rem;
    color: var(--text-darker);
    margin-bottom: 1.5rem;
    line-height: 1.8;
}
.service-item-content h4 { /* Services page */
    font-size: 1.2rem;
    color: var(--text-color);
    margin-bottom: 0.8rem;
    font-weight: bold;
}
.service-item-content ul { /* Services page */
    list-style: none;
    padding-left: 0;
    margin-bottom: 1.5rem;
}
.service-item-content ul li { /* Services page */
    font-size: 0.95rem;
    color: var(--text-color);
    margin-bottom: 0.5rem;
    padding-left: 1.8rem;
    position: relative;
}
.service-item-content ul li::before { /* Services page */
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: bold;
}
.service-cta { /* Wrapper for CTA button in service item */
    margin-top: 1.5rem;
}

/* ==========================================================================
   9. SOLUTIONS PAGE SPECIFIC STYLES (Tabs, etc.)
   ========================================================================== */
.solutions-section { /* Used on Solutions page and Homepage */
    background-color: var(--bg-dark);
}
.solutions-tabs { /* Solutions page */
    display: flex;
    justify-content: center;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid #333;
}
.tab-link { /* Solutions page */
    background: none;
    border: none;
    color: var(--text-darker);
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
    cursor: pointer;
    font-family: var(--monospace-font);
    transition: color 0.3s ease, border-bottom-color 0.3s ease;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px; /* For active border overlap */
}
.tab-link:hover { /* Solutions page */
    color: var(--primary-color);
}
.tab-link.active { /* Solutions page */
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}
.solution-content { /* Used on Homepage for solutions */
    display: none;
    padding: 1.5rem;
    background-color: var(--bg-card);
    border-radius: 8px;
    max-width: 800px;
    margin: 0 auto;
    animation: fadeInSolution 0.5s ease-out;
}
.solution-content.active { /* Used on Homepage for solutions */
    display: block;
}
.solution-content h4 { /* Used on Homepage for solutions */
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-family: var(--monospace-font);
}
.solution-content p { /* Used on Homepage for solutions */
    margin-bottom: 1rem;
    font-size: 1rem;
    color: var(--text-darker);
}
.solution-content ul { /* Used on Homepage for solutions */
    list-style: none;
    padding-left: 0;
}
.solution-content ul li { /* Used on Homepage for solutions */
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    color: var(--text-color);
    position: relative;
    padding-left: 1.5rem;
}
.solution-content ul li::before { /* Used on Homepage for solutions */
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: bold;
}
.solution-content-detailed { /* Solutions page specific */
    display: none;
    padding: 2rem;
    background-color: var(--bg-card);
    border-radius: 0 0 8px 8px;
    max-width: 900px;
    margin: 0 auto;
    animation: fadeInSolution 0.5s ease-out;
    border: 1px solid #2a2a2a;
    border-top: none;
}
.solution-content-detailed.active { /* Solutions page specific */
    display: block;
}
.solution-header { /* Solutions page specific */
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 1rem;
}
.solution-icon { /* Solutions page specific */
    font-size: 2.5rem;
    color: var(--primary-color);
}
.solution-content-detailed h2 { /* Solutions page specific */
    font-size: 1.8rem;
    color: var(--text-color);
    font-family: var(--monospace-font);
}
.solution-content-detailed p { /* Solutions page specific */
    margin-bottom: 1.5rem;
    font-size: 1rem;
    color: var(--text-darker);
    line-height: 1.7;
}
.solution-content-detailed h4 { /* Solutions page specific */
    font-size: 1.3rem;
    color: var(--primary-color);
    margin-top: 1.5rem;
    margin-bottom: 0.8rem;
}
.solution-content-detailed ul { /* Solutions page specific */
    list-style: none;
    padding-left: 0;
    margin-bottom: 1.5rem;
}
.solution-content-detailed ul li { /* Solutions page specific */
    margin-bottom: 0.6rem;
    font-size: 0.95rem;
    color: var(--text-color);
    position: relative;
    padding-left: 1.8rem;
}
.solution-content-detailed ul li::before { /* Solutions page specific */
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--terminal-green);
    font-weight: bold;
    font-size: 1.1rem;
}
.solution-content-detailed ul li strong { /* Solutions page specific */
    color: var(--text-color);
    font-weight: 600;
}


/* ==========================================================================
   10. ABOUT US PAGE SPECIFIC STYLES
   ========================================================================== */
.page-about .about-section { /* About page */
    min-height: auto; /* Override from homepage */
    padding: var(--section-padding); /* Ensure padding */
    background-color: var(--bg-dark); /* Ensure consistent bg */
}
.about-story .text-center.section-subtitle { /* About page */
    max-width: 800px;
}
.about-philosophy { /* About page */
    display: flex;
    gap: 2rem;
    align-items: center;
    margin-top: 3rem;
    background-color: var(--bg-card);
    padding: 2rem;
    border-radius: 8px;
}
.about-philosophy .about-visual { /* About page */
    flex-basis: 45%;
}
.about-philosophy .philosophy-text { /* About page */
    flex-basis: 55%;
}
.about-philosophy .philosophy-text h3 { /* About page */
    font-size: 1.6rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-family: var(--monospace-font);
}
.embedded-terminal { /* Used in About Us and old Homepage section */
    background-color: var(--bg-terminal-static);
    border: 1px solid rgba(237, 106, 50, 0.3);
    border-radius: 6px;
    padding: 0.5rem;
    box-shadow: 0 5px 20px rgba(0,0,0,0.4);
    width: 100%;
    max-width: 450px;
    font-family: var(--monospace-font);
    font-size: 0.85rem;
}
.terminal-header-static { /* About page embedded terminal */
    background-color: #1A1A1A;
    padding: 0.3rem 0.6rem;
    color: var(--text-darker);
    font-size: 0.75rem;
    border-bottom: 1px solid rgba(237, 106, 50, 0.2);
    margin: -0.5rem -0.5rem 0.5rem -0.5rem;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.terminal-body-static pre { /* About page embedded terminal */
    margin: 0;
    padding: 0.5rem;
    line-height: 1.6;
    white-space: pre-wrap;
    color: var(--text-darker);
}
.terminal-body-static .prompt-user { /* About page embedded terminal */
    color: var(--terminal-green);
}
.terminal-body-static .prompt-host { /* About page embedded terminal */
    color: var(--terminal-prompt-blue);
}
.terminal-body-static .path { /* About page embedded terminal */
    color: var(--primary-color);
}
.terminal-body-static .output-green { /* About page embedded terminal */
    color: var(--terminal-green);
    display: block;
    margin-left: 0;
}
.embedded-cursor { /* About page embedded terminal */
    display: inline-block;
    width: 0.5em;
    height: 1em;
    background-color: var(--terminal-green);
    animation: blinkCursor 1s steps(1) infinite;
    vertical-align: text-bottom;
}
.team-section { /* About page */
    padding-bottom: 4rem;
    background-color: var(--bg-card-darker); /* Ensure section bg */
}
.team-grid { /* About page */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1000px;
    margin: 2rem auto 0;
}
.team-member-card { /* About page */
    background-color: var(--bg-card);
    padding: 1.5rem;
    border-radius: 8px;
    text-align: center;
    box-shadow: var(--card-shadow);
    border-top: 3px solid var(--primary-color);
}
.team-member-img { /* About page */
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1rem;
    border: 3px solid var(--primary-color);
}
.team-member-card h4 { /* About page */
    font-size: 1.3rem;
    margin-bottom: 0.25rem;
    color: var(--text-color);
}
.member-title { /* About page */
    font-size: 0.9rem;
    color: var(--primary-color);
    font-family: var(--monospace-font);
    margin-bottom: 0.75rem;
}
.member-bio { /* About page */
    font-size: 0.9rem;
    color: var(--text-darker);
    margin-bottom: 1rem;
}
.member-certs { /* About page */
    font-size: 0.8rem;
    color: var(--text-darker);
    font-style: italic;
}

/* ==========================================================================
   11. VULNOS PAGE SPECIFIC STYLES
   ========================================================================== */
.vulnos-overview p { /* VulnOS Page */
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-darker);
}
.vulnos-key-components .key-feature p a.text-link { /* VulnOS Page */
    color: var(--primary-color);
    text-decoration: underline;
    font-weight: 500;
    transition: color 0.3s;
}
.vulnos-key-components .key-feature p a.text-link:hover { /* VulnOS Page */
    color: var(--text-color);
}
.vulnos-target-audience .empower-card { /* VulnOS Page, reusing empower-card styles */
    /* Any specific overrides for VulnOS target audience cards if needed */
}
.vulnos-pricing-model .tiers-grid { /* VulnOS Page, reusing tiers-grid */
    max-width: 800px; /* Narrower for pricing tiers */
}

/* ==========================================================================
   12. CONTACT PAGE SPECIFIC STYLES
   ========================================================================== */
.page-contact .contact-section { /* Contact page */
    background-color: var(--bg-dark);
    padding: var(--section-padding); /* Ensure padding */
}
.contact-wrapper { /* Contact page */
    display: flex;
    gap: 3rem;
    max-width: 1100px;
    margin: 2rem auto;
    align-items: flex-start;
}
.contact-info { /* Contact page */
    flex-basis: 40%;
    background-color: var(--bg-card);
    padding: 2rem;
    border-radius: 8px;
}
.contact-info h3 { /* Contact page */
    font-size: 1.6rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}
.contact-info p { /* Contact page */
    color: var(--text-darker);
    margin-bottom: 1rem;
}
.contact-info ul { /* Contact page */
    list-style: none;
    padding: 0;
    margin-bottom: 1rem;
}
.contact-info ul li { /* Contact page */
    margin-bottom: 0.7rem;
    color: var(--text-color);
}
.contact-info ul li strong { /* Contact page */
    color: var(--text-color); /* Ensuring visibility if nested */
}
.contact-info ul li a { /* Contact page */
    color: var(--primary-color);
    text-decoration: none;
}
.contact-info ul li a:hover { /* Contact page */
    text-decoration: underline;
}
.contact-info h4 { /* Contact page */
    font-size: 1.1rem;
    color: var(--text-color);
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}
.contact-form-container { /* Contact page */
    flex-basis: 60%;
    background-color: var(--bg-card);
    padding: 2.5rem;
    border-radius: 8px;
}
.contact-form-container h3 { /* Contact page */
    font-size: 1.6rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    text-align: center;
}


/* ==========================================================================
   13. ANIMATIONS (Keyframes)
   ========================================================================== */
@keyframes blinkCursor {
    50% {
        opacity: 0;
    }
}
@keyframes slideInModal {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes fadeInSolution { /* Used for solution tabs content */
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Scroll Animations - base state defined, JS adds .is-visible */
.animate-on-scroll {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.animate-on-scroll.fade-in-up { transform: translateY(30px); }
.animate-on-scroll.fade-in { transform: scale(0.9); } /* Generic fade-in with subtle scale */
.animate-on-scroll.fade-in-left { transform: translateX(-30px); }
.animate-on-scroll.fade-in-right { transform: translateX(30px); }

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1) translateX(0); /* Reset all transforms */
}


/* ==========================================================================
   14. RESPONSIVE DESIGN (Media Queries)
   ========================================================================== */

@media (max-width: 992px) {
    /* --- Global --- */
    .section-title { font-size: 2.4rem; }
    .page-hero-content h1 { font-size: 2.8rem; } /* Internal page hero titles */
    .hero-content h1 { font-size: 3rem; } /* Homepage hero title */
    .hero-content p { font-size: 1.15rem; } /* Homepage hero p */
    .dashboard-container { width: 90%; }

    /* --- Homepage Specific --- */
    .home-feature-preview,
    .home-feature-preview:nth-child(even) {
        flex-direction: column;
        text-align: center;
    }
    .home-feature-img-container { margin-bottom: 1.5rem; max-width: 400px; }
    .home-feature-text { padding-right: 0; padding-left: 0; }
    .home-feature-text ul { text-align: left; display: inline-block; }

    /* --- About Page --- */
    .about-content-wrapper { flex-direction: column; text-align: center; }
    .about-text .section-title, .about-text p { text-align: center; }
    .about-philosophy { flex-direction: column; }
    .about-philosophy .about-visual { max-width: 350px; margin-bottom: 1.5rem; }
    .about-visual { margin-top: 2rem; max-width: 400px; }


    /* --- Services Page --- */
    .service-detail .service-item,
    .service-detail .service-item.alt-layout {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
    .service-item-icon { margin-bottom: 1rem; }
    .service-item-content ul { text-align: left; display: inline-block; }

    /* --- ProbeIQ Page --- */
    .probeiqlite-features-grid { grid-template-columns: 1fr; } /* Stack features */
}

@media (max-width: 768px) {
    /* --- Navbar --- */
    .navbar { width: 95%; }
    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%; /* Position below header assuming header height is consistent */
        left: 0;
        width: 100%;
        background-color: rgba(25, 25, 25, 0.95);
        backdrop-filter: blur(8px);
        padding: 1rem 0;
        border-bottom: 1px solid rgba(237, 106, 50, 0.2);
    }
    .nav-links.active { display: flex; }
    .nav-links li { margin: 1rem 0; text-align: center; }
    .mobile-menu-toggle { display: block; }
    .mobile-menu-toggle.active span:nth-child(1) { transform: rotate(-45deg) translate(-5px, 6px); }
    .mobile-menu-toggle.active span:nth-child(2) { opacity: 0; }
    .mobile-menu-toggle.active span:nth-child(3) { transform: rotate(45deg) translate(-5px, -6px); }

    /* --- Global --- */
    .hero-content h1 { font-size: 2.5rem; } /* Homepage hero */
    .page-hero-content h1 { font-size: 2.2rem; } /* Internal page hero */
    .hero-content p { font-size: 1rem; } /* Homepage hero p */
    .page-hero-content p { font-size: 1rem; } /* Internal page hero p */
    .section-title { font-size: 2rem; margin-bottom: 0.8rem; }
    .section-subtitle { font-size: 1rem; margin-bottom: 2.5rem; }
    .section-title-small { font-size: 1.8rem; }
    .dashboard-container { width: 95%; }

    /* --- Grids --- */
    .services-grid, .why-vulnvault-grid, .empower-grid, .trust-grid, .tiers-grid, .key-features-grid, .team-grid {
        grid-template-columns: 1fr;
    }

    /* --- Specific Sections --- */
    .about-visual .embedded-terminal { font-size: 0.8rem; }
    .solutions-tabs { flex-wrap: wrap; }
    .tab-link { font-size: 0.9rem; padding: 0.7rem 1rem; }
    .service-item-content h3 { font-size: 1.6rem; } /* Services page */
    .next-steps-actions { flex-direction: column; gap: 1rem; } /* Homepage */
    .next-steps-actions .cta-button,
    .next-steps-actions .cta-button-outline {
        width: 100%;
        max-width: 300px;
    }
    .contact-wrapper { flex-direction: column; } /* Contact Page */
    .contact-info, .contact-form-container { flex-basis: 100%; }
    .contact-info { margin-bottom: 2rem; }
}

@media (max-width: 480px) {
    /* --- Global --- */
    .logo { font-size: 1.5rem; }
    .hero-content h1 { font-size: 2rem; } /* Homepage hero */
    .page-hero-content h1 { font-size: 1.8rem; } /* Internal page hero */
    .hero-content p { font-size: 0.9rem; } /* Homepage hero p */
    .cta-button { padding: 0.7rem 1.5rem; font-size: 0.9rem; }
    .section-title { font-size: 1.8rem; }
    .section-subtitle { font-size: 0.9rem; }

    /* --- Cards --- */
    .service-card h3, .why-card h3, .feature-card h4, .empower-card h4, .tier-card h3, .key-feature h4, .team-member-card h4 {
        font-size: 1.2rem; /* Consistent smaller heading for cards */
    }

    /* --- Specific Sections --- */
    .modal-content { width: 90%; margin: 25% auto; padding: 1.5rem; }
    .modal-content h3 { font-size: 1.5rem; }
    .about-visual .embedded-terminal { font-size: 0.7rem; }
    .dashboard-tooltip { font-size: 0.8rem; padding: 0.5rem 0.8rem; max-width: 180px; }
    .service-item-icon { font-size: 3rem; } /* Services page */
    .service-item-content h3 { font-size: 1.4rem; } /* Services page */
}


/* ==========================================================================
   2. GLOBAL STYLES & UTILITIES (Button Consistency)
   ========================================================================== */
/* ... (previous global styles) ... */

.cta-button,
.cta-button-outline {
    padding: 0.85rem 2rem; /* Standardized padding */
    font-size: 1.05rem;   /* Standardized font size */
    line-height: 1.5;     /* Ensure consistent line height */
    min-width: 180px;     /* Minimum width for better visual balance */
    text-align: center;
}

.cta-button.small-cta,
.cta-button-outline.small-cta {
    padding: 0.65rem 1.6rem; /* Slightly smaller padding */
    font-size: 0.95rem;    /* Slightly smaller font */
    min-width: 150px;
}

/* Ensure hover states are consistent */
.cta-button:hover {
    background-color: transparent;
    color: var(--primary-color);
    transform: translateY(-3px) scale(1.03); /* Subtle lift and scale */
    box-shadow: 0 0 18px rgba(237, 106, 50, 0.5);
}

.cta-button-outline:hover {
    background-color: var(--primary-color);
    color: var(--bg-dark);
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 0 18px rgba(237, 106, 50, 0.5);
}


/* ==========================================================================
   3. COMMON COMPONENTS (Enhanced Card Styles & Hover Effects)
   ========================================================================== */
.why-card,
.feature-card, /* Applies to ProbeIQ homepage teaser & ProbeIQ page features */
.service-card, /* Applies to homepage teaser & main services page cards */
.empower-card, /* Homepage Who We Empower & Solutions page cards */
.tier-card,    /* ProbeIQ editions & VulnOS pricing */
.key-feature,  /* ProbeIQ page & VulnOS page key components */
.team-member-card, /* About Us page */
.solution-content-detailed .solution-feature-card /* If adding cards within solution tabs */ {
    background-color: var(--bg-card);
    padding: 2rem;
    border-radius: 10px; /* Slightly more rounded */
    border: 1px solid var(--bg-card-darker); /* Subtle border */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
                box-shadow 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
                border-color 0.35s ease;
    position: relative; /* For pseudo-elements if needed */
    overflow: hidden; /* For effects like background reveal */
}

.why-card:hover,
.feature-card:hover,
.service-card:hover,
.empower-card:hover,
.tier-card:hover,
.key-feature:hover,
.team-member-card:hover,
.solution-content-detailed .solution-feature-card:hover {
    transform: translateY(-8px) scale(1.02); /* Enhanced lift and slight scale */
    box-shadow: 0 10px 30px rgba(237, 106, 50, 0.25), 0 4px 15px rgba(0,0,0,0.3);
    border-color: var(--primary-color);
}

/* Icon animation on card hover (if icons are direct children or specifically targeted) */
.why-card:hover .why-icon,
.feature-card:hover .feature-icon,
.service-card:hover .service-icon,
.empower-card:hover .empower-icon,
.tier-card:hover .tier-icon,
.key-feature:hover .kf-icon {
    transform: scale(1.15) rotate(5deg);
    color: var(--primary-color); /* Ensure accent color on hover */
}

/* Adjust padding for specific cards if needed after standardization */
.service-card-condensed { /* Homepage services teaser */
    padding: 1.5rem; /* Keep this distinct if desired */
}
.feature-card { padding: 1.8rem; } /* Maintained distinct padding */
.key-feature { padding: 1.8rem; border-left-width: 5px; } /* Maintained distinct padding & border */


/* Specific style for Service Page items if not using the generic card hover */
.service-item { /* From services.html */
    /* Keep its existing distinct styling, or adapt the generic card hover */
    /* For this exercise, we'll assume its existing styles are preferred for its detailed layout */
    /* If you want the generic card hover, replace .service-item styles with .service-card */
    transition: box-shadow 0.3s ease, transform 0.3s ease; /* Add base transition */
}
.service-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.2), 0 8px 10px rgba(0,0,0,0.18);
}

/* Ensure text alignment and other properties are suitable for each card type */
.why-card, .empower-card, .team-member-card, .service-card-condensed { text-align: center; }
.feature-card, .key-feature, .tier-card { text-align: left; } /* Tier card content is usually left-aligned for lists */
.tier-card .tier-icon, .tier-card h3, .tier-card .tier-description { text-align: center; } /* Center specific elements within left-aligned card */



/* --- Services Page (New Layout) --- */
.service-page-layout {
    max-width: 1000px;
    margin: 3rem auto;
    padding: 0 1rem;
}

.service-block {
    background-color: var(--bg-card);
    padding: 2.5rem 2rem; /* More padding */
    border-radius: 12px; /* More rounded */
    margin-bottom: 3rem;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15); /* Softer shadow */
    border-left: 5px solid var(--primary-color); /* Accent border */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-block:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(237, 106, 50, 0.15), 0 6px 15px rgba(0,0,0,0.2);
}

.service-block-icon {
    font-size: 2.8rem; /* Prominent icon */
    color: var(--primary-color);
    margin-bottom: 1rem;
    /* text-align: center; */ /* Or keep left */
}

.service-block-title {
    font-size: 2rem; /* Clear title */
    font-family: var(--monospace-font);
    color: var(--text-color);
    margin-bottom: 1rem;
}

.service-block-intro {
    font-size: 1.05rem;
    color: var(--text-darker);
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

.service-block h4 {
    font-size: 1.25rem;
    color: var(--primary-color);
    margin-top: 2rem;
    margin-bottom: 0.8rem;
    font-weight: 600;
}

.service-block ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1.5rem;
}

.service-block ul li {
    font-size: 0.95rem;
    color: var(--text-color);
    margin-bottom: 0.7rem;
    padding-left: 1.8rem;
    position: relative;
    line-height: 1.6;
}

.service-block ul li::before {
    content: '▹'; /* Hacker-style bullet */
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: bold;
    font-size: 1.1rem;
}
.service-block ul li strong {
    font-weight: 600;
    color: var(--text-color);
}

.service-block .cta-button-outline {
    margin-top: 1.5rem;
}

/* --- About Page Enhancements --- */
.about-intro .section-subtitle {
    font-size: 1.2rem; /* Slightly larger for intro statement */
    line-height: 1.8;
}

.mission-vision-flex {
    display: flex;
    gap: 2rem;
    justify-content: space-around;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}
.mission-vision-item {
    flex: 1;
    min-width: 280px; /* Minimum width before wrapping */
    padding: 1.5rem;
    background-color: var(--bg-card); /* Use card bg for these blocks */
    border-radius: 8px;
    border-left: 4px solid var(--primary-color);
}
.mission-vision-item h3 {
    font-size: 1.7rem;
    font-family: var(--monospace-font);
    color: var(--primary-color);
    margin-bottom: 0.8rem;
}
.mission-vision-item p {
    font-size: 1rem;
    color: var(--text-darker);
    line-height: 1.7;
}

.about-philosophy-visual {
    padding: var(--section-padding);
    background-color: var(--bg-dark); /* Or alternate like --bg-card-darker */
}
.about-philosophy-grid {
    display: flex;
    gap: 3rem;
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping */
}
.philosophy-image-container {
    flex: 1;
    min-width: 300px;
    max-width: 450px; /* Control image size */
    margin: 0 auto; /* Center if it wraps alone */
    text-align: center;
}
.stylized-terminal-image {
    width: 100%;
    border-radius: 8px;
    border: 1px solid #333; /* Subtle border for the image */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.image-caption {
    font-size: 0.85rem;
    color: var(--text-darker);
    margin-top: 0.5rem;
    font-style: italic;
}
.philosophy-text-detailed {
    flex: 1.5; /* Give more space to text */
    min-width: 300px;
}
.philosophy-text-detailed h4 {
    font-size: 1.6rem;
    color: var(--text-color);
    margin-bottom: 1rem;
}
.philosophy-text-detailed ul {
    list-style: none;
    padding-left: 0;
}
.philosophy-text-detailed ul li {
    font-size: 1rem;
    color: var(--text-darker);
    margin-bottom: 0.8rem;
    padding-left: 1.8rem;
    position: relative;
    line-height: 1.6;
}
.philosophy-text-detailed ul li::before {
    content: '▹'; /* Hacker-style bullet */
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-size: 1.1rem;
}
.philosophy-text-detailed ul li strong {
    color: var(--text-color);
    font-weight: 600;
}

/* Responsive adjustments for About Page philosophy section */
@media (max-width: 768px) {
    .about-philosophy-grid {
        flex-direction: column;
    }
    .philosophy-image-container {
        margin-bottom: 2rem;
    }
}


/* Add these within your existing @media queries or as new ones if needed */

/* For smaller screens - typically tablets and below */
@media (max-width: 768px) {
    /* --- Global Adjustments --- */
    .section-title {
        font-size: 1.8rem; /* Slightly smaller section titles on mobile */
        margin-bottom: 0.6rem;
    }
    .section-subtitle {
        font-size: 0.95rem; /* Slightly smaller subtitles */
        margin-bottom: 2rem;
    }
    .section-title-small {
        font-size: 1.6rem;
    }
    .content-section,
    .probeiqlite-section,
    .services-section,
    .solutions-section,
    .dashboard-preview-section,
    .about-section,
    .contact-section,
    .next-steps-section {
        padding: 3rem 1rem; /* Reduced padding on mobile for sections */
    }

    /* --- Hero Sections --- */
    .hero-content h1,
    .page-hero-content h1 {
        font-size: 2.2rem; /* Adjust hero titles */
        line-height: 1.3;
    }
    .hero-content p,
    .page-hero-content p {
        font-size: 0.95rem; /* Adjust hero paragraph text */
        margin-bottom: 2rem;
    }
    .hero-content .cta-button,
    .hero-content .cta-button-outline { /* Ensure hero buttons stack nicely if needed */
        margin-bottom: 0.5rem; /* Add some space if they stack */
    }
    .hero-content .cta-button-outline.hero-cta-outline {
        margin-left: 0; /* Stack directly below primary CTA on mobile */
        margin-top: 0.75rem;
    }


    /* --- Card Layouts --- */
    .why-vulnvault-grid,
    .probeiqlite-features-grid,
    .services-grid, /* This is for the homepage teaser */
    .empower-grid,
    .tiers-grid,
    .key-features-grid,
    .team-grid,
    .trust-grid {
        grid-template-columns: 1fr; /* Ensure all grids stack to single column */
        gap: 1.5rem; /* Slightly reduced gap for mobile */
    }
    .why-card, .feature-card, .service-card, .empower-card, .tier-card, .key-feature, .team-member-card {
        padding: 1.5rem; /* Adjust card padding */
    }

    /* --- Specific Homepage Elements --- */
    .home-feature-preview {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }
    .home-feature-img-container {
        margin-bottom: 1rem;
        max-width: 100%; /* Ensure image container doesn't cause overflow */
    }
    .home-feature-text {
        padding-right: 0;
        padding-left: 0;
    }
    .home-feature-text ul {
        text-align: left;
        display: inline-block; /* Helps with centering the block if text-align:center on parent */
    }
    .next-steps-actions {
        flex-direction: column;
        gap: 1rem;
    }
    .next-steps-actions .cta-button,
    .next-steps-actions .cta-button-outline {
        width: 100%;
        max-width: 320px;
    }


    /* --- Dashboard Preview --- */
    .dashboard-container {
        width: 95%; /* Ensure it doesn't hit screen edges */
    }
    .dashboard-hotspot { /* Hotspots can be tricky on mobile. Consider simplifying or hiding if they cause issues */
        /* Example: Make them slightly larger tap targets if kept, or use fewer */
        /* width: 30% !important; height: 15% !important; */ /* Example: Adjust size if needed */
    }
    .dashboard-tooltip {
        max-width: 180px; /* Ensure tooltip doesn't get too wide */
        font-size: 0.8rem;
    }

    /* --- About Us Page --- */
    .about-content-wrapper,
    .about-philosophy-grid {
        flex-direction: column;
        text-align: center;
    }
    .about-text .section-title, .about-text p {
        text-align: center;
    }
    .about-visual, .philosophy-image-container {
        margin-top: 2rem;
        margin-bottom: 1rem;
        max-width: 100%; /* Ensure image/terminal doesn't overflow */
    }
    .about-philosophy .about-visual { /* Specifically for the one in the philosophy section */
        max-width: 350px;
        margin-left: auto;
        margin-right: auto;
    }


    /* --- Services Page (New Layout from Part 2 will also need mobile checks) --- */
    .service-block { /* For the new service page layout */
        padding: 1.5rem 1rem;
        border-left-width: 4px;
    }
    .service-block-title { font-size: 1.6rem; }
    .service-block-intro { font-size: 0.95rem; }
    .service-block h4 { font-size: 1.1rem; }
    .service-block ul li { font-size: 0.9rem; }


    /* --- Solutions Page --- */
    .solutions-tabs {
        flex-wrap: wrap; /* Allow tabs to wrap if too many */
        margin-bottom: 1.5rem;
    }
    .tab-link {
        font-size: 0.9rem;
        padding: 0.7rem 1rem;
        margin-bottom: 0.5rem; /* Space if they wrap */
    }
    .solution-content-detailed {
        padding: 1.5rem;
    }
    .solution-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.5rem;
    }
    .solution-icon { font-size: 2rem; }
    .solution-content-detailed h2 { font-size: 1.5rem; }


    /* --- Contact Page --- */
    .contact-wrapper {
        flex-direction: column;
    }
    .contact-info, .contact-form-container {
        flex-basis: 100%;
    }
    .contact-info {
        margin-bottom: 2rem;
        padding: 1.5rem;
    }
    .contact-form-container {
        padding: 1.5rem;
    }
}

/* For even smaller screens - typically phones */
@media (max-width: 480px) {
    .hero-content h1,
    .page-hero-content h1 {
        font-size: 1.8rem; /* Further reduce very large titles */
    }
    .hero-content p,
    .page-hero-content p {
        font-size: 0.9rem;
    }
    .section-title {
        font-size: 1.6rem;
    }
    .section-subtitle {
        font-size: 0.85rem;
    }
    .section-title-small {
        font-size: 1.4rem;
    }

    .cta-button,
    .cta-button-outline {
        padding: 0.7rem 1.5rem;
        font-size: 0.9rem;
    }
    .cta-button.small-cta,
    .cta-button-outline.small-cta {
        padding: 0.6rem 1.2rem;
        font-size: 0.85rem;
    }

    .logo { font-size: 1.5rem; } /* Adjust logo size */

    .why-card h3, .feature-card h4, .service-card h3, .empower-card h4, .tier-card h3, .key-feature h4, .team-member-card h4 {
        font-size: 1.1rem; /* Smaller card titles */
    }

    .about-visual .embedded-terminal,
    .stylized-terminal-image { /* If using the image placeholder */
        font-size: 0.7rem; /* For embedded terminal text */
        /* For image, ensure max-width: 100% is applied if not already */
    }
    .modal-content { /* Contact form success modal */
        padding: 1.5rem;
    }
    .modal-content h3 { font-size: 1.5rem;}
}


/* --- Services Page Redesign --- */
.services-page-container {
    max-width: 1100px; /* Max width for the content area */
    margin: 0 auto;
    padding: 3rem 1rem;
}

.service-entry {
    background-color: var(--bg-card);
    padding: 2.5rem 3rem; /* Generous padding */
    border-radius: 12px;
    margin-bottom: 3rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: 1px solid transparent; /* For hover effect */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.service-entry:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(237, 106, 50, 0.15), 0 8px 15px rgba(0,0,0,0.2);
    border-color: rgba(237, 106, 50, 0.3);
}

.service-entry.alt-bg { /* For alternating background if desired */
    background-color: var(--bg-card-darker);
}

.service-entry-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(237, 106, 50, 0.2);
    padding-bottom: 1rem;
}

.service-entry-icon {
    font-size: 2.5rem; /* Slightly smaller than old page, but clear */
    color: var(--primary-color-current);
    background-color: rgba(237, 106, 50, 0.1); /* Subtle background for icon */
    padding: 0.75rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.service-entry-title {
    font-size: 2rem;
    font-family: var(--monospace-font);
    color: var(--text-color);
    margin: 0; /* Remove default margin from h2 */
}

.service-entry-intro {
    font-size: 1.1rem;
    color: var(--text-darker);
    margin-bottom: 2rem;
    line-height: 1.8;
}

.service-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 1 or 2 columns */
    gap: 2rem;
    margin-bottom: 2rem;
}

.service-detail-item h4 {
    font-size: 1.2rem;
    color: var(--primary-color-current);
    margin-bottom: 1rem;
    font-weight: 600;
    border-left: 3px solid var(--primary-color-current);
    padding-left: 0.75rem;
}
.service-detail-item p {
    font-size: 0.95rem;
    color: var(--text-darker);
    line-height: 1.7;
    margin-bottom: 0.75rem;
}

.service-detail-item ul {
    list-style: none;
    padding-left: 0;
}

.service-detail-item ul li {
    font-size: 0.95rem;
    color: var(--text-color);
    margin-bottom: 0.6rem;
    padding-left: 1.8rem;
    position: relative;
}

.service-detail-item ul li::before {
    content: '▹';
    position: absolute;
    left: 0;
    color: var(--primary-color-current);
    font-weight: bold;
    font-size: 1.1rem;
    top: 1px; /* Adjust alignment */
}

.service-entry-cta {
    display: inline-block; /* So it doesn't take full width */
    margin-top: 1rem;
}

/* Specific hover for cards on VulnOS page if needed (current card hover is generic) */
.page-vulnos .key-feature:hover,
.page-vulnos .empower-card:hover, /* Reusing empower-card for audience */
.page-vulnos .tier-card:hover {
    /* Generic card hover already applies. Add specific overrides if needed */
    /* Example: background-image: linear-gradient(45deg, var(--primary-color-current) 0%, var(--bg-card) 50%); */
    /* background-size: 200% 100%; */
    /* animation: vulnosCardHover 0.5s forwards; */
}

/* @keyframes vulnosCardHover {
    to { background-position: -100% 0; }
} */


/* Responsive for new Services Page Layout */
@media (max-width: 768px) {
    .service-entry {
        padding: 2rem 1.5rem;
    }
    .service-entry-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        text-align: left;
    }
    .service-entry-title {
        font-size: 1.7rem;
    }
    .service-details-grid {
        grid-template-columns: 1fr; /* Stack detail items */
        gap: 1.5rem;
    }
}


/* ==========================================================================
   SPECIFIC STYLES FOR 404 PAGE
   ========================================================================== */

body.page-404 {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure footer sticks to bottom */
}

.main-404 {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--section-padding);
    text-align: center;
    background-color: var(--bg-dark); /* Ensure dark background */
}

.error-container {
    max-width: 700px;
    width: 100%;
    padding: 2rem;
    background-color: var(--bg-card); /* Card background for the container */
    border-radius: 10px;
    box-shadow: var(--card-shadow-main);
    border: 1px solid var(--border-color-card);
}

.error-code-container {
    font-family: var(--monospace-font);
    font-size: 8rem; /* Large 404 */
    font-weight: 700;
    color: var(--primary-color-current);
    margin-bottom: 0.5rem;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: baseline;
}

.error-digit {
    display: inline-block;
}

.error-digit.glitch {
    position: relative;
    animation: glitch-animation 2.5s infinite steps(1);
}

.error-digit.glitch::before,
.error-digit.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.error-digit.glitch::before {
    left: 2px;
    text-shadow: -2px 0 var(--terminal-green-main); /* Use themed terminal green */
    clip: rect(24px, 550px, 90px, 0);
    animation: glitch-anim-2 2.5s infinite linear alternate-reverse;
}

.error-digit.glitch::after {
    left: -2px;
    text-shadow: -2px 0 var(--terminal-prompt-blue-main), 2px 2px var(--terminal-green-main); /* Use themed colors */
    clip: rect(85px, 550px, 140px, 0);
    animation: glitch-anim-1 2.5s infinite linear alternate-reverse;
}


.error-title {
    font-family: var(--monospace-font);
    font-size: 1.8rem;
    color: var(--text-color);
    margin-bottom: 1rem;
}

.error-message {
    font-size: 1rem;
    color: var(--text-darker);
    margin-bottom: 2.5rem;
    line-height: 1.7;
}

.interactive-terminal-404 {
    background-color: var(--bg-terminal-static);
    border: 1px solid var(--border-color-card);
    border-radius: 6px;
    padding: 0.5rem; /* Reduced padding */
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
    width: 100%;
    max-width: 600px;
    margin: 0 auto 2.5rem auto;
    font-family: var(--monospace-font);
    font-size: 0.9rem;
    text-align: left;
    min-height: 150px; /* Minimum height for terminal content */
}

.terminal-header-static { /* Reusing from About page for consistency */
    background-color: #1A1A1A; /* Keep this dark for contrast */
    padding: 0.3rem 0.6rem;
    color: var(--text-darker);
    font-size: 0.75rem;
    border-bottom: 1px solid rgba(237, 106, 50, 0.2);
    margin: -0.5rem -0.5rem 0.5rem -0.5rem;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
body.light-mode .terminal-header-static { /* Ensure header remains dark in light mode */
    background-color: #333;
    color: #ccc;
    border-bottom-color: rgba(0,0,0,0.1);
}


.terminal-body-404 {
    padding: 0.8rem;
    height: auto; /* Let content define height */
    min-height: 100px; /* Ensure some space for typing */
    overflow-y: auto; /* Scroll if content exceeds height */
    color: var(--terminal-green-main);
    line-height: 1.6;
}

.terminal-body-404 .line {
    margin-bottom: 0.3em;
    white-space: pre-wrap;
    word-break: break-all;
}
.terminal-body-404 .prompt-user { color: var(--terminal-green-main); }
.terminal-body-404 .prompt-host { color: var(--terminal-prompt-blue-main); }
.terminal-body-404 .path { color: var(--primary-color-current); }
.terminal-body-404 .command-text { color: var(--text-color); } /* Command text in terminal */
.terminal-body-404 .output-text { color: var(--text-darker); padding-left: 1em; } /* Output text in terminal */
.terminal-body-404 .error-text { color: #ff5555; } /* Specific error color in terminal */

.terminal-cursor-404 {
    display: inline-block;
    width: 0.5em;
    height: 1em;
    background-color: var(--terminal-green-main);
    animation: blinkCursor 1s steps(1) infinite;
    vertical-align: text-bottom;
}

.error-actions {
    margin-top: 2rem;
}
.error-actions p {
    margin-bottom: 1rem;
    color: var(--text-darker);
}
.error-actions .cta-button,
.error-actions .cta-button-outline {
    margin: 0.5rem;
}

/* Glitch Animation Keyframes */
@keyframes glitch-animation {
  0% { text-shadow: .05em 0 0 rgba(255,0,0,.75), -.025em -.05em 0 rgba(0,255,0,.75), .025em .05em 0 rgba(0,0,255,.75); }
  14% { text-shadow: .05em 0 0 rgba(255,0,0,.75), -.025em -.05em 0 rgba(0,255,0,.75), .025em .05em 0 rgba(0,0,255,.75); }
  15% { text-shadow: -.05em -.025em 0 rgba(255,0,0,.75), .025em .025em 0 rgba(0,255,0,.75), -.05em -.05em 0 rgba(0,0,255,.75); }
  49% { text-shadow: -.05em -.025em 0 rgba(255,0,0,.75), .025em .025em 0 rgba(0,255,0,.75), -.05em -.05em 0 rgba(0,0,255,.75); }
  50% { text-shadow: .025em .05em 0 rgba(255,0,0,.75), .05em 0 0 rgba(0,255,0,.75), 0 -.05em 0 rgba(0,0,255,.75); }
  99% { text-shadow: .025em .05em 0 rgba(255,0,0,.75), .05em 0 0 rgba(0,255,0,.75), 0 -.05em 0 rgba(0,0,255,.75); }
  100% { text-shadow: -.025em 0 0 rgba(255,0,0,.75), -.025em -.025em 0 rgba(0,255,0,.75), -.025em -.05em 0 rgba(0,0,255,.75); }
}

@keyframes glitch-anim-1 {
  0% { clip: rect(32px, 9999px, 76px, 0); }
  10% { clip: rect(12px, 9999px, 62px, 0); }
  20% { clip: rect(42px, 9999px, 102px, 0); }
  30% { clip: rect(5px, 9999px, 85px, 0); }
  40% { clip: rect(28px, 9999px, 72px, 0); }
  50% { clip: rect(50px, 9999px, 100px, 0); }
  60% { clip: rect(10px, 9999px, 80px, 0); }
  70% { clip: rect(45px, 9999px, 70px, 0); }
  80% { clip: rect(62px, 9999px, 110px, 0); }
  90% { clip: rect(25px, 9999px, 90px, 0); }
  100% { clip: rect(5px, 9999px, 75px, 0); }
}

@keyframes glitch-anim-2 {
  0% { clip: rect(85px, 9999px, 100px, 0); }
  10% { clip: rect(42px, 9999px, 120px, 0); }
  20% { clip: rect(5px, 9999px, 90px, 0); }
  30% { clip: rect(60px, 9999px, 115px, 0); }
  40% { clip: rect(20px, 9999px, 75px, 0); }
  50% { clip: rect(70px, 9999px, 95px, 0); }
  60% { clip: rect(35px, 9999px, 105px, 0); }
  70% { clip: rect(15px, 9999px, 85px, 0); }
  80% { clip: rect(55px, 9999px, 110px, 0); }
  90% { clip: rect(30px, 9999px, 95px, 0); }
  100% { clip: rect(40px, 9999px, 100px, 0); }
}


/* Responsive adjustments for 404 page */
@media (max-width: 768px) {
    .error-code-container {
        font-size: 6rem;
    }
    .error-title {
        font-size: 1.5rem;
    }
    .error-message {
        font-size: 0.9rem;
    }
    .interactive-terminal-404 {
        font-size: 0.8rem;
        max-width: 90%;
    }
    .error-actions .cta-button,
    .error-actions .cta-button-outline {
        display: block; /* Stack buttons on mobile */
        width: 80%;
        max-width: 280px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 480px) {
    .error-container {
        padding: 1.5rem;
    }
    .error-code-container {
        font-size: 4.5rem;
    }
    .error-title {
        font-size: 1.2rem;
    }
    .interactive-terminal-404 {
        font-size: 0.75rem;
    }
}

/* ==========================================================================
   SPECIFIC STYLES FOR 404 PAGE (Modifications)
   ========================================================================== */

/* body.page-404 and .main-404 remain the same */

.error-container {
    max-width: 700px;
    width: 100%;
    padding: 2rem;
    /* REMOVE OR COMMENT OUT these lines to remove the card background: */
     background-color: #1e1e1e00; 
    /* box-shadow: var(--card-shadow-main); */
    /* border: 1px solid var(--border-color-card); */
    border-radius: 10px; /* Can keep or remove radius if no background */
    text-align: center; /* ADDED to ensure content within is centered if parent isn't .main-404 */
}

.error-code-container {
    font-family: var(--monospace-font);
    font-size: 8rem;
    font-weight: 700;
    color: var(--primary-color-current);
    margin-bottom: 0.5rem;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: baseline;
}

.error-digit {
    display: inline-block;
}

/* Minimal Glitch Animation */
.error-digit.glitch {
    position: relative;
    /* Remove direct text-shadow animation from the main element if it was there */
    /* The glitch effect will now primarily come from ::before and ::after */
    animation: minimal-glitch-base 2.5s infinite steps(2, jump-none); /* Optional: very subtle base flicker */
}

.error-digit.glitch::before,
.error-digit.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: var(--primary-color-current); /* Match base color */
}

.error-digit.glitch::before {
    left: 1px; /* Minimal offset */
    top: -1px;
    text-shadow: -1px 0 var(--text-darker); /* Subtle, darker shadow */
    opacity: 0.7;
    clip-path: inset(30% 0 30% 0); /* Clip a band */
    animation: minimal-glitch-anim-1 2.5s infinite linear alternate-reverse;
}

.error-digit.glitch::after {
    left: -1px; /* Minimal offset */
    top: 1px;
    text-shadow: 1px 0 var(--text-darker); /* Subtle, darker shadow */
    opacity: 0.7;
    clip-path: inset(60% 0 10% 0); /* Clip a different band */
    animation: minimal-glitch-anim-2 2.5s infinite linear alternate-reverse;
}

.error-title {
    font-family: var(--monospace-font);
    font-size: 1.8rem;
    color: var(--text-color);
    margin-bottom: 1rem;
}

.error-message {
    font-size: 1rem;
    color: var(--text-darker);
    margin-bottom: 2.5rem;
    line-height: 1.7;
}

/* Interactive terminal styles remain largely the same, ensure colors are themed */
.interactive-terminal-404 {
    background-color: var(--bg-terminal-static);
    border: 1px solid var(--border-color-card); /* Or remove if no card for error-container */
    border-radius: 6px;
    padding: 0.5rem;
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
    width: 100%;
    max-width: 600px;
    margin: 0 auto 2.5rem auto;
    font-family: var(--monospace-font);
    font-size: 0.9rem;
    text-align: left;
    min-height: 150px;
    transition: background-color 0.3s ease, border-color 0.3s ease; /* For theme toggle */
}

.terminal-header-static {
    background-color: #1A1A1A;
    padding: 0.3rem 0.6rem;
    color: var(--text-darker);
    font-size: 0.75rem;
    border-bottom: 1px solid rgba(237, 106, 50, 0.2); /* Use primary color subtly */
    margin: -0.5rem -0.5rem 0.5rem -0.5rem;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
body.light-mode .terminal-header-static {
    background-color: #ddd; /* Lighter header for light mode terminal */
    color: #555;
    border-bottom-color: rgba(217, 95, 42, 0.2); /* Light mode primary */
}

.terminal-body-404 {
    padding: 0.8rem;
    height: auto;
    min-height: 100px;
    overflow-y: auto;
    color: var(--terminal-green-main); /* Themed terminal green */
    line-height: 1.6;
}
/* ... other terminal body styles ... */

.error-actions {
    margin-top: 2rem;
}
.error-actions p {
    margin-bottom: 1rem;
    color: var(--text-darker);
}
.error-actions .cta-button,
.error-actions .cta-button-outline {
    margin: 0.5rem;
}

/* Minimal Glitch Animation Keyframes - MODIFIED */
@keyframes minimal-glitch-base { /* Optional very subtle base flicker/shift */
  0%, 100% { transform: translate(0,0); opacity: 1;}
  48% { transform: translate(0,0); opacity: 1;}
  50% { transform: translate(0.5px, -0.5px); opacity: 0.95;}
  52% { transform: translate(0,0); opacity: 1;}
}

@keyframes minimal-glitch-anim-1 { /* Controls ::before element's clip-path jitter */
  0%   { clip-path: inset(30% 0 30% 0); transform: translate(-0.5px, 0.5px); }
  25%  { clip-path: inset(32% 0 28% 0); transform: translate(0.5px, -0.5px); }
  50%  { clip-path: inset(28% 0 32% 0); transform: translate(-0.5px, -0.5px); }
  75%  { clip-path: inset(31% 0 29% 0); transform: translate(0.5px, 0.5px); }
  100% { clip-path: inset(30% 0 30% 0); transform: translate(-0.5px, 0.5px); }
}

@keyframes minimal-glitch-anim-2 { /* Controls ::after element's clip-path jitter */
  0%   { clip-path: inset(60% 0 10% 0); transform: translate(0.5px, -0.5px); }
  25%  { clip-path: inset(62% 0 8% 0);  transform: translate(-0.5px, 0.5px); }
  50%  { clip-path: inset(58% 0 12% 0); transform: translate(0.5px, 0.5px); }
  75%  { clip-path: inset(61% 0 9% 0);  transform: translate(-0.5px, -0.5px); }
  100% { clip-path: inset(60% 0 10% 0); transform: translate(0.5px, -0.5px); }
}

/* Responsive adjustments for 404 page (These should already be in your @media blocks) */
@media (max-width: 768px) {
    .error-code-container {
        font-size: 6rem;
    }
    .error-title {
        font-size: 1.5rem;
    }
    .error-message {
        font-size: 0.9rem;
    }
    .interactive-terminal-404 {
        font-size: 0.8rem;
        max-width: 90%;
    }
    .error-actions .cta-button,
    .error-actions .cta-button-outline {
        display: block;
        width: 80%;
        max-width: 280px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 480px) {
    .error-container {
        padding: 1.5rem;
    }
    .error-code-container {
        font-size: 4.5rem;
    }
    .error-title {
        font-size: 1.2rem;
    }
    .interactive-terminal-404 {
        font-size: 0.75rem;
    }
}


/* ==========================================================================
   STYLES FOR PRIVACY POLICY PAGE (Minimal & Elegant)
   ========================================================================== */

/* Apply a specific class to the body of privacy-policy.html if not already done:
   <body class="page-privacy-policy">
   This allows us to scope these styles.
*/

.page-privacy-policy .page-hero {
    padding: 4rem 2rem; /* Slightly reduced hero padding */
    background-color: var(--bg-dark); /* Use main dark for a more integrated feel */
    border-bottom: 1px solid var(--border-color-card); /* Softer border */
}

.page-privacy-policy .page-hero-content h1 {
    font-size: 2.5rem; /* Slightly smaller for a more refined look */
    color: var(--text-color);
}

.page-privacy-policy .page-hero-content p {
    font-size: 1.1rem; /* Slightly smaller */
    color: var(--text-darker);
}

.page-privacy-policy .content-section-policy {
    max-width: 850px; /* Slightly narrower for better line length */
    margin: 0 auto;
    padding: 4rem 2rem; /* Increased padding for more whitespace */
    background-color: transparent; /* Remove card background for minimalism */
    border-radius: 0; /* No radius if no distinct card background */
    box-shadow: none; /* No shadow if no distinct card background */
    margin-bottom: 0; /* Remove bottom margin if sections flow directly */
    border-bottom: 1px solid var(--border-color-card); /* Subtle separator between main sections */
}

.page-privacy-policy .content-section-policy:last-of-type {
    border-bottom: none; /* No border for the very last section */
    margin-bottom: 3rem; /* Add some space before the footer */
}


.page-privacy-policy .effective-date {
    font-style: normal; /* Remove italic for a cleaner look */
    font-size: 0.9rem;
    color: var(--text-darker);
    margin-bottom: 2.5rem; /* More space below effective date */
    display: block;
    text-align: left; /* Align to left */
}

.page-privacy-policy .content-section-policy h2 {
    font-size: 1.6rem; /* Refined heading size */
    font-family: var(--monospace-font); /* Consistent with other section titles */
    color: var(--primary-color-current);
    margin-bottom: 1.2rem; /* Adjusted spacing */
    border-bottom: none; /* Remove border for a cleaner look */
    padding-bottom: 0;
    text-align: left;
}

.page-privacy-policy .content-section-policy h3 {
    font-size: 1.2rem; /* Refined subheading size */
    font-family: var(--sans-serif-font); /* Use sans-serif for better readability in body */
    font-weight: 700; /* Bold for emphasis */
    color: var(--text-color);
    margin-top: 2.5rem; /* More space above h3 */
    margin-bottom: 1rem; /* Adjusted spacing */
    text-align: left;
}

.page-privacy-policy .content-section-policy p,
.page-privacy-policy .content-section-policy li {
    color: var(--text-darker);
    font-size: 0.95rem; /* Slightly refined body text size */
    line-height: 1.9; /* Increased line height for readability */
    margin-bottom: 1.2rem; /* Consistent paragraph spacing */
    text-align: left;
}

.page-privacy-policy .content-section-policy ul {
    list-style: none; /* Remove default disc */
    padding-left: 0; /* Remove default padding */
}

.page-privacy-policy .content-section-policy ul li {
    padding-left: 1.8rem; /* Space for custom bullet */
    position: relative;
}

.page-privacy-policy .content-section-policy ul li::before {
    content: '▹'; /* Hacker-style bullet, or use '•' for more minimal */
    position: absolute;
    left: 0;
    color: var(--primary-color-current); /* Use accent color for bullets */
    font-size: 1.1rem; /* Adjust bullet size if needed */
    line-height: inherit; /* Align with list item text */
}

.page-privacy-policy .content-section-policy a {
    color: var(--primary-color-current);
    text-decoration: none; /* Remove underline for cleaner look */
    border-bottom: 1px dotted var(--primary-color-current); /* Subtle dotted underline */
    transition: color 0.3s ease, border-bottom-color 0.3s ease;
}

.page-privacy-policy .content-section-policy a:hover {
    color: var(--text-color);
    border-bottom-color: var(--text-color);
}

/* Ensure overall body transitions for theme switching if not already applied */
body.page-privacy-policy {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.page-privacy-policy .content-section-policy,
.page-privacy-policy .content-section-policy h2,
.page-privacy-policy .content-section-policy h3,
.page-privacy-policy .content-section-policy p,
.page-privacy-policy .content-section-policy li,
.page-privacy-policy .content-section-policy a,
.page-privacy-policy .content-section-policy ul li::before {
    transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease; /* For theme switch */
}

/* Responsive adjustments for privacy policy page */
@media (max-width: 768px) {
    .page-privacy-policy .page-hero {
        padding: 3rem 1rem;
    }
    .page-privacy-policy .page-hero-content h1 {
        font-size: 2rem;
    }
    .page-privacy-policy .content-section-policy {
        padding: 2.5rem 1rem;
    }
    .page-privacy-policy .content-section-policy h2 {
        font-size: 1.4rem;
    }
    .page-privacy-policy .content-section-policy h3 {
        font-size: 1.1rem;
    }
    .page-privacy-policy .content-section-policy p,
    .page-privacy-policy .content-section-policy li {
        font-size: 0.9rem;
    }
}








.theme-toggle-container {
    position: relative;
    width: 60px; /* Width of the toggle background */
    height: 30px; /* Height of the toggle background */
    border-radius: 15px; /* Fully rounded ends */
    cursor: pointer;
    overflow: hidden; /* Important for background effects */
    background: var(--theme-toggle-bg); /* Dynamic background */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.1);
    transition: background var(--transition-speed) ease;
    margin-left: 1.5rem; /* Adjust as needed for spacing in navbar */
    align-self: center; /* Helps align it in flex container like navbar */
}

.theme-toggle-background {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    transition: opacity var(--transition-speed) ease;
}

.theme-toggle-background .star {
    position: absolute;
    background-color: var(--theme-toggle-star-color);
    border-radius: 50%;
    opacity: 0; /* Hidden by default, shown in dark mode */
    transition: opacity 0.5s ease; /* Slower transition for stars */
    animation: twinkle 3s infinite alternate ease-in-out; /* Twinkle animation */
}
body:not(.light-mode) .theme-toggle-background .star { opacity: 1; }
body.light-mode .theme-toggle-background .star { opacity: 0; }

/* Star positions */
.theme-toggle-background .s1 { width: 1px; height: 1px; top: 20%; left: 15%; animation-delay: 0s; }
.theme-toggle-background .s2 { width: 2px; height: 2px; top: 40%; left: 30%; animation-delay: 0.5s; }
.theme-toggle-background .s3 { width: 1px; height: 1px; top: 65%; left: 55%; animation-delay: 1s; }
.theme-toggle-background .s4 { width: 1.5px; height: 1.5px; top: 30%; left: 80%; animation-delay: 1.5s; }
.theme-toggle-background .s5 { width: 1px; height: 1px; top: 75%; left: 20%; animation-delay: 2s; }

.theme-toggle-slider {
    position: absolute;
    top: 2px; /* Padding from edge of container */
    left: 2px; /* Initial position for dark mode */
    width: 26px; /* Diameter of the circle */
    height: 26px;
    border-radius: 50%; /* Makes it a circle */
    background-color: var(--theme-toggle-slider-bg); /* Dynamic background */
    transition: transform var(--transition-speed) ease, background-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

body.light-mode .theme-toggle-slider {
    transform: translateX(30px); /* Moves slider to the right: 60px (container) - 26px (slider) - 2px (left_padding) - 2px (right_virtual_padding) */
    box-shadow: 0 0 10px 2px var(--theme-toggle-slider-bg); /* Sun glow */
}

.theme-icon {
    width: 16px; /* Adjust size as needed */
    height: 16px;
    transition: opacity var(--transition-speed) ease, transform var(--transition-speed) ease, fill var(--transition-speed) ease, stroke var(--transition-speed) ease;
}

.theme-icon-moon {
    display: block;
    fill: var(--theme-toggle-icon-moon-fill);
}
.theme-icon-moon .moon-crater {
    fill: var(--theme-toggle-icon-moon-crater-fill);
    fill-opacity: 0.6;
}

.theme-icon-sun {
    display: none;
}
.theme-icon-sun .sun-core {
    fill: var(--theme-toggle-icon-sun-core-fill);
}
.theme-icon-sun .sun-ray {
    stroke: var(--theme-toggle-icon-sun-ray-stroke);
}


body.light-mode .theme-icon-moon { display: none; }
body.light-mode .theme-icon-sun { display: block; }

@keyframes twinkle {
    0%, 100% { opacity: 0.5; transform: scale(0.8); }
    50% { opacity: 1;  transform: scale(1.1);}
}

/* Responsive placement for theme toggle */
@media (max-width: 768px) {
    .navbar .theme-toggle-container {
        /* Example: Place it next to the mobile menu toggle or at the end of the logo */
        margin-left: auto; /* Pushes it to the right if other items are present */
        margin-right: 0.5rem; /* Space from mobile toggle */
    }
    /* If you move it into the expanded mobile menu: */
    .nav-links.active {
        /* ... existing styles ... */
        /* Add a list item for the toggle if you prefer it inside the menu */
    }
    .nav-links li.theme-toggle-item { /* Create an li with this class if moving inside */
        display: flex;
        justify-content: center;
        padding: 0.5rem 0;
    }
    .nav-links li.theme-toggle-item .theme-toggle-container {
        margin-left: 0; /* Reset margin if inside a list item */
    }
}