/* Base Styles & Resets */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: system-ui, -apple-system, sans-serif;
    line-height: 1.7;
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth theme transitions */
    font-size: 16px; /* Base font size */
    background-color: #000000; /* Added base background color */
}

main {
    max-width: 1100px; /* Slightly adjusted max-width */
    margin: 0 auto;
    padding: 40px 20px; /* More vertical padding */
}

section.game-screen {
    min-height: 100vh; /* Ensure sections take up viewport height for scrolling game */
    padding: 40px 20px; /* Updated padding */
    border-bottom: 1px solid #008000; /* Updated separator */
    position: relative; /* For potential absolute positioning of game elements */
    display: flex; /* Use flexbox for layout within sections */
    flex-direction: column;
    justify-content: center; /* Center content vertically */
}

#screen-1 {
    position: relative;
    overflow: hidden; /* Ensure background doesn't spill out */
}

#screen-1::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url('') center center/cover no-repeat;
    opacity: 0.1; /* Adjust for desired fade */
    pointer-events: none; /* Allow clicks through */
}
/* Ensure content overlays the background */
#screen-1 > * {
    position: relative;
    z-index: 1;
}



h1, h2, h3, h4, h5, h6 { /* Added h5, h6 */
    margin-bottom: 0.8em; /* Slightly less margin */
    line-height: 1.3; /* Slightly more line height */
    font-weight: 700; /* Bold headings */
}

p {
    margin-bottom: 1.2em; /* More spacing after paragraphs */
    max-width: 70ch; /* Updated readability */
}

a {
    text-decoration: none;
    transition: color 0.2s ease, border-bottom-color 0.2s ease; /* Kept transition */
    border-bottom: 1px solid transparent; /* Prepare for hover effect */
}

ul, ol {
    margin-bottom: 1.2em;
    padding-left: 25px; /* Slightly more indent */
}

li {
    margin-bottom: 0.5em;
}

/* --- Default Theme: Modern Hybrid (theme-modern) --- */
body.theme-modern {
    background-color: #121212; /* Very Dark Grey/Off-Black */
    color: #E0E0E0; /* Light Grey */
}

body.theme-modern h1 {
    font-size: 2.8rem; /* Larger H1 */
    margin-bottom: 1em;
}
body.theme-modern h2 {
    font-size: 2rem; /* Larger H2 */
    margin-bottom: 1em;
    border-bottom: 1px solid #282828; /* Subtle separator below H2 */
    padding-bottom: 0.3em;
}
body.theme-modern h3 {
    font-size: 1.5rem;
    color: #FFFFFF; /* White */
}

body.theme-modern a:not(.cta-button) { /* Exclude buttons from this style */
    color: #39FF14; /* Accent Green */
    border-bottom: 1px solid rgba(57, 255, 20, 0.3); /* Subtle underline */
}

body.theme-modern a:not(.cta-button):hover {
    color: #FFFFFF; /* White on hover */
    border-bottom-color: #39FF14; /* Solid green underline on hover */
    text-decoration: none; /* Remove default underline */
}

body.theme-modern .cta-button {
    display: inline-block;
    padding: 0.8em 1.6em;
    border-radius: 6px;
    font-weight: 500;
    margin: 0.5em;
    transition: all 0.2s ease;
    cursor: pointer;
    text-align: center;
}

body.theme-modern .cta-button.primary {
    background-color: #39FF14;
    color: #121212;
    border: 1px solid #39FF14;
}

body.theme-modern .cta-button.primary:hover {
    background-color: #181818; /* Slightly lighter dark */
    color: #39FF14;
    box-shadow: 0 0 12px rgba(57, 255, 20, 0.5); /* Enhanced glow */
    text-decoration: none;
    transform: translateY(-2px); /* Slight lift */
}

body.theme-modern .cta-button.secondary {
    background-color: transparent;
    color: #E0E0E0;
    border: 1px solid #555; /* Slightly more visible border */
}

body.theme-modern .cta-button.secondary:hover {
    border-color: #39FF14;
    color: #39FF14;
    background-color: rgba(57, 255, 20, 0.05); /* Very subtle green background */
    box-shadow: 0 0 12px rgba(57, 255, 20, 0.4); /* Enhanced glow */
    text-decoration: none;
    transform: translateY(-2px); /* Slight lift */
}

body.theme-modern .expertise-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

body.theme-modern .expertise-cards .card {
    background-color: #1A1A1A;
    border-radius: 10px; /* Slightly more rounded */
    padding: 2em; /* More padding */
    border: 1px solid #282828;
    transition: all 0.3s ease; /* Smoother transition */
}

body.theme-modern .expertise-cards .card:hover {
    border-color: #39FF14;
    transform: translateY(-5px); /* More lift */
    box-shadow: 0 6px 20px rgba(57, 255, 20, 0.15); /* Enhanced shadow */
}

body.theme-modern .expertise-cards .card h3 {
    margin-bottom: 0.6em;
    color: #FFFFFF;
}

body.theme-modern .expertise-cards .card p {
    font-size: 0.95em;
    color: #B0B0B0; /* Lighter grey for card text */
    margin-bottom: 1em;
}

body.theme-modern .expertise-cards .card a {
    font-weight: 500;
    font-size: 0.9em;
}

body.theme-modern .logo-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    align-items: center;
    margin-top: 2em;
}

body.theme-modern .visual-placeholder {
    background-color: #1F1F1F; /* Slightly different placeholder bg */
    border: 1px dashed #555; /* More visible dashed border */
    padding: 30px;
    text-align: center;
    color: #777; /* Lighter placeholder text */
    min-height: 200px; /* Taller placeholder */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2em auto; /* Centered with more margin */
    border-radius: 8px;
    width: 80%; /* Limit width */
    font-style: italic;
}

body.theme-modern .visual-placeholder.logo {
    min-height: 60px;
    padding: 15px;
    width: 120px; /* Adjust as needed */
    background-color: #282828;
    border: 1px solid #444;
    border-radius: 4px;
    font-style: normal;
}

/* --- Gamification Layer Placeholder --- */
#game-layer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 15vh; /* Example height */
    /* Styles will be heavily theme-dependent */
    z-index: 10;
    pointer-events: none; /* Allow clicks to pass through */
    overflow: hidden;
    opacity: 0; /* Initially hidden for fade-in */
    transition: opacity 0.5s ease-in-out; /* Smooth fade-in transition */
}

/* Class to make the game layer visible */
#game-layer.game-layer-visible {
    opacity: 1;
}

#game-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 8px; /* Example height */
    z-index: 20;
    /* Styles will be theme-dependent */
}

#game-canvas {
    display: block; /* Or position absolute/relative within #game-layer */
    width: 100%;
    height: 0px; /* Set height to 0 to prevent layout interference */
}

/* --- Header Styles --- */
#main-header {
    padding: 10px 25px; /* Updated padding */
    background-color: rgba(0,0,0,0.8); /* Updated semi-transparent dark */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    position: sticky;
    top: 0;
    z-index: 1000; /* Updated z-index */
    display: flex;
    justify-content: space-between;
    align-items: center; /* Vertically align items */
    border-bottom: 1px solid #00FF00; /* Updated border */
}

.header-left-section {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

/* Shared logo+name style */
.logo-container-header,
.desktop-logo-container {
    display: flex;
    align-items: center;
    gap: 12px;
}
.logo-image,
.logo-image.logo-header {
    max-height: 38px;
    max-width: 38px;
    height: auto;
    width: auto;
    object-fit: contain;
    border: 1px solid #00FF00;
}
.site-title {
    font-weight: normal;
    color: #00FF00;
    font-size: 1.25em;
    line-height: 1.1;
    font-family: 'Perfect DOS VGA 437', monospace;
    margin-left: 8px;
}

/* --- Mobile Navigation & Burger --- */

/* Burger button styling */
#mobile-menu-toggle {
    background: transparent;
    border: 1px solid #00FF00;
    cursor: pointer;
    padding: 5px;
    width: 40px;
    height: 40px;
    display: none; /* Hidden by default, enabled via media query */
    flex-direction: column;
    justify-content: space-around;
    z-index: 1001; /* Ensure it's above other header content */
}

.burger-line {
    display: block;
    width: 30px;
    height: 3px;
    background: #00FF00;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Burger animation to 'X' */
#mobile-menu-toggle.active .burger-line:nth-child(1) {
    transform: translateY(11px) rotate(45deg);
}
#mobile-menu-toggle.active .burger-line:nth-child(2) {
    opacity: 0;
}
#mobile-menu-toggle.active .burger-line:nth-child(3) {
    transform: translateY(-11px) rotate(-45deg);
}


/* Mobile navigation panel */
#mobile-nav {
    position: fixed;
    top: 0;
    right: -100%; /* Start off-screen */
    width: 80%;
    max-width: 320px;
    height: 100vh;
    background: #000;
    z-index: 1000;
    transition: right 0.3s ease-in-out;
    overflow-y: auto;
    border-left: 2px solid #00FF00;
    box-shadow: -2px 0 10px rgba(0,255,0,0.5);
    padding-top: 80px; /* Space for header */
    display: block; /* Always block, but positioned off-screen */
}

/* This class slides the menu in */
#mobile-nav[aria-hidden="false"] {
    right: 0;
}

#mobile-nav ul {
    list-style: none;
    padding: 20px;
    margin: 0;
}

#mobile-nav li {
    padding: 0;
    border-bottom: 1px solid #008000;
}
#mobile-nav li:last-child {
    border-bottom: none;
}

#mobile-nav a {
    display: block;
    padding: 12px 8px;
    font-size: 1.1em;
    color: #00FF00;
    font-family: 'Perfect DOS VGA 437', monospace;
}
#mobile-nav a:hover {
    background-color: #00FF00;
    color: #000000;
}


/* --- Responsive Header & Nav --- */

/* Desktop Styles (Default) */
@media (min-width: 769px) {
    .desktop-logo-container { display: flex; }
    .mobile-header-top { display: none !important; }
    #main-nav { display: flex !important; }
    #mobile-menu-toggle, #mobile-nav { display: none !important; }
}

/* Mobile Styles */
@media (max-width: 768px) {
    #main-header {
        flex-wrap: wrap;
    }
    .desktop-logo-container { 
        display: none !important; 
    }
    .mobile-header-top { 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
        width: 100%;
        padding: 10px 15px; 
    }
    #main-nav { 
        display: none !important; 
    }
    #mobile-menu-toggle { 
        display: flex; 
    }
    #mobile-nav { 
        display: block; /* Ensure it's a block to be positioned */
    }

    .cta-reinforcement-visual-image-new,
    .poe-profile,
    .hero-reinforcing-visual,
    .social-proof-kickers-svg,
    #game-layer {
        display: none !important;
    }
    
    /* Only hide game canvas, not content sections */
    .game-screen {
        min-height: 0 !important; /* Changed from auto to 0 for wider browser support */
        padding: 20px 15px !important;
    }
}


#main-nav ul {
    list-style: none; /* Remove default bullets */
    display: flex; /* Arrange items horizontally */
    gap: 15px; /* Updated gap */
    padding: 0;
    margin: 0;
    align-items: center; /* Added align-items */
}

#main-nav li {
   position: relative; /* Added position */
}

#main-nav a {
    font-family: 'Perfect DOS VGA 437', monospace; /* Updated font-family */
    color: #00FF00; /* Updated color */
    text-decoration: none; /* Updated text-decoration */
    padding: 6px 9px; /* Updated padding */
    display: block; /* Updated display */
    font-size: 1em;
    transition: background-color 0.2s ease, color 0.2s ease; /* Keep color/bg transition */
}

#main-nav a:hover, #main-nav li.dropdown:hover > a { /* Added hover styles */
    background-color: #00FF00;
    color: #000000;
}

/* Remove the distracting movement on hover */
#main-nav a {
    /* ... existing styles ... */
    transition: background-color 0.2s ease, color 0.2s ease; /* Keep color/bg transition */
}


#main-nav .nav-producthub strong { /* Added nav-producthub strong style */
    font-weight: normal;
}

#main-nav .dropdown-content { /* Added dropdown content styles */
    display: none;
    position: absolute;
    background-color: #000000;
    border: 1px solid #00FF00;
    min-width: 170px;
    z-index: 1001;
    /* Add padding to create a safe hover area around the menu */
    padding: 10px 0;
    margin-top: 2px;
    box-shadow: 0 0 12px rgba(0,255,0,0.6);
}

#main-nav .dropdown-content li { /* Added dropdown content li style */
    width: 100%;
}

#main-nav .dropdown-content a { /* Added dropdown content a style */
    padding: 9px 13px;
    white-space: nowrap;
}

#main-nav li.dropdown:hover .dropdown-content { /* Added dropdown hover style */
    display: block;
}

#main-nav .language-switcher a, #main-footer .language-switcher-footer a { /* Added language switcher styles */
    display: flex;
    align-items: center;
    gap: 6px;
}

#main-nav .language-switcher .lang-icon, #main-footer .language-switcher-footer .lang-icon { /* Added language switcher icon styles */
    font-size: 1.15em;
}

.dropdown-arrow { /* Added dropdown arrow style */
    display: inline-block;
    margin-left: 5px;
    font-size: 0.8em;
}


/* --- Theme Switcher Styles --- */
#theme-switcher {
    /* Removed fixed positioning, now part of header flex */
    background: none;
    padding: 0;
}

#theme-switcher span {
    color: #A0A0A0; /* Lighter grey */
    margin-right: 8px;
    font-size: 0.9em;
}

#theme-switcher button {
    background: #333;
    color: #E0E0E0;
    border: 1px solid #555;
    padding: 4px 8px; /* Slightly larger */
    font-size: 0.85em;
    cursor: pointer;
    margin-left: 5px;
    border-radius: 4px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

#theme-switcher button:hover {
    background: #444;
    border-color: #777;
}

#theme-switcher button.active { /* Style for the currently active theme button */
    background: #39FF14;
    color: #121212;
    border-color: #39FF14;
}


/* --- Footer Placeholder Styles --- */
#main-footer {
    padding: 30px 20px; /* Updated padding */
    text-align: center;
    color: #008000; /* Updated color */
    border-top: 1px solid #00FF00; /* Updated border */
    margin-top: 50px; /* Updated margin-top */
    font-size: 0.85em; /* Updated font-size */
    background-color: #000; /* Added background color */
}

#footer-nav ul { /* Added footer nav styles */
    list-style: none;
    padding: 0;
    margin: 12px 0;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Mobile header container */
.mobile-header-top {
    display: none; /* Hidden by default, shown in media query */
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* Mobile view styles */
@media (max-width: 768px) {
    .mobile-header-top {
        display: flex;
    }
    
    #main-nav {
        display: none !important;
    }

    .cta-reinforcement-visual-image-new,
    #game-layer {
        display: none !important;
    }
    
    /* Only hide game canvas, not content sections */
    .game-screen {
        min-height: 0 !important; /* Changed from auto to 0 for wider browser support */
        padding: 20px 15px !important;
    }
}


/* Desktop view - hide mobile elements */
@media (min-width: 769px) {
    #mobile-menu-toggle, 
    #mobile-nav {
        display: none;
    }
}

#footer-nav a { /* Added footer nav link styles */
    color: #00FF00;
}

#footer-nav a:hover { /* Added footer nav link hover styles */
    background-color: #00FF00;
    color: #000;
}

.footer-newsletter { /* Added footer newsletter styles */
    margin: 15px auto;
    max-width: 380px;
}

.footer-newsletter h4 { /* Added footer newsletter h4 styles */
    margin-bottom: 8px;
    color: #00FF00;
    font-size: 1.05em;
}

.footer-newsletter input[type="email"] { /* Added footer newsletter input styles */
    padding: 7px 9px;
    border-radius: 0;
    border: 1px solid #008000;
    background-color: #000;
    color: #00FF00;
    margin-right: 5px;
    font-family: 'Perfect DOS VGA 437', monospace;
}

.footer-newsletter input[type="email"]::placeholder { /* Added footer newsletter placeholder styles */
    color: #008000;
}

.footer-newsletter .cta-button.small { /* Added footer newsletter button styles */
    padding: 7px 11px;
    font-size: 0.9em;
}

.footer-social { /* Added footer social styles */
    margin-top: 15px;
    margin-bottom: 10px;
}

.footer-social a { /* Added footer social link styles */
    margin: 0 8px;
    display: inline-block;
}


/* Add more base styles as needed */

/* Styles for small inline icons like in diagnosis lists */
.diagnosis-icon {
    max-width: 40px; /* Slightly smaller than before */
    max-height: 40px;
    vertical-align: middle; /* Align with the middle of the text */
    margin-left: 8px; /* Space between text and icon */
    display: inline-block; /* Ensure it behaves well inline */
}

/* Styles for n8n_business_model diagram */
.n8n-diagram-h1 { /* Renamed from h1 to avoid conflict */
  text-align: center;
  margin-bottom: 40px;
  color: #00FF00; /* Ensure color is set */
  font-family: 'Courier New', Courier, monospace; /* Ensure font */
  text-shadow: 0 0 5px #00FF00, 0 0 10px #00FF00; /* Ensure shadow */
}

.n8n-diagram-paths-container {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  background-color: black; /* Match diagram background */
  padding: 20px 0; /* Add some padding */
}

.n8n-diagram-path {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.n8n-diagram-node {
  position: relative;
  padding: 15px 25px;
  border: 1px solid #00FF00;
  margin: 12px 0;
  width: 220px;
  text-align: center;
  box-shadow: 0 0 8px #00FF00;
  color: #00FF00; /* Ensure color */
  font-family: 'Courier New', Courier, monospace; /* Ensure font */
}

.n8n-diagram-node::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 12px;
  background-color: #00FF00;
}

.n8n-diagram-node:first-child::before {
  display: none;
}

.n8n-diagram-indicator.red-x {
  color: red;
  margin-right: 8px;
  vertical-align: middle; /* Add vertical alignment */
}

.n8n-diagram-indicator.green-check {
  color: lime;
  margin-right: 8px;
  vertical-align: middle; /* Add vertical alignment */
}

.n8n-diagram-node-content {
  display: flex;
  align-items: center; /* Keep this for overall centering */
  justify-content: center;
}

/* Explicitly style spans within the node content for alignment */
.n8n-diagram-node-content span {
    display: inline-block; /* Treat spans as blocks for better control */
    line-height: 1.2; /* Explicit line-height */
    vertical-align: middle; /* Re-apply vertical align */
}

/* Styles for partnership_vs_other diagram */
.partnership-diagram-h1 { /* Renamed from h1 */
  text-align: center;
  margin-bottom: 40px;
  font-size: 1.8em; /* Adjusted size */
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #00FF00; /* Ensure color */
  font-family: 'Perfect DOS VGA 437', monospace; /* APPLY PIXEL FONT */
  text-shadow: 0 0 5px #00FF00, 0 0 10px #00FF00; /* Ensure shadow */
}

.partnership-diagram-container {
  display: flex;
  justify-content: space-around;
  gap: 20px;
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
  padding: 20px 10px; /* Add padding */
  background-color: black; /* Match diagram background */
}

.partnership-diagram-column {
  background-color: #000000; /* CHANGE BACKGROUND TO BLACK */
  border: 1px solid #00FF00;
  padding: 20px;
  width: 30%; /* Default width */
  min-width: 200px; /* Prevent excessive squeezing */
  box-shadow: 0 0 10px #00FF00;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.2s ease-in-out;
  color: #00FF00; /* Ensure color */
  font-family: 'Perfect DOS VGA 437', monospace; /* APPLY PIXEL FONT */
}

.partnership-diagram-column:hover {
  transform: scale(1.02);
}

.partnership-diagram-column h2 { /* Style h2 within the diagram */
  margin-top: 0;
  font-size: 1.3em; /* Adjusted size */
  text-align: center;
  margin-bottom: 15px;
  color: #00FF00; /* Ensure color */
  font-family: 'Perfect DOS VGA 437', monospace; /* APPLY PIXEL FONT */
  border-bottom: none; /* Remove potential inherited border */
  padding-bottom: 0; /* Remove potential inherited padding */
}

.partnership-diagram-icon {
  font-size: 2.5em;
  display: block;
  text-align: center;
  margin-bottom: 20px;
}

.partnership-diagram-column ul {
  list-style-type: none;
  padding-left: 0;
  width: 100%;
  max-width: 280px;
  margin-bottom: 0; /* Remove inherited margin */
}

.partnership-diagram-column li {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  min-height: 1.5em;
  font-size: 0.95em; /* Slightly smaller list text */
  color: #32CD32; /* CHANGE LIST ITEM COLOR TO SECONDARY GREEN */
  /* Remove line-height: 1.4em; Let flexbox handle alignment */
}

.partnership-diagram-column li::before {
  content: '';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.4em;
  height: 1.4em;
  margin-right: 12px;
  border-radius: 50%;
  font-weight: bold;
  font-size: 0.95em;
  flex-shrink: 0; /* Prevent icon shrinking */
}

.partnership-diagram-column .pro::before {
  background-color: #00FF00;
  color: black;
  content: "✔";
}

.partnership-diagram-column .con::before {
  background-color: #FF0000;
  color: white;
  content: "✘";
}

/* Responsive adjustments for embedded diagram */
@media (max-width: 768px) {
  .partnership-diagram-container {
    flex-direction: column;
    align-items: center;
  }
  .partnership-diagram-column {
    width: 90%; /* Adjust width for stacked view */
    margin-bottom: 20px;
  }
  .partnership-diagram-icon {
    font-size: 2.2em;
  }
}

.typed-cursor {
  color: #00ff00;
  font-weight: bold;
  /* Remove default animation if any */
  animation: blinkTyper 1.0s infinite; /* Updated animation name and duration */
}

@keyframes blinkTyper { /* Updated keyframes */
  50% { opacity: 0; }
}

/* This class will be added dynamically */
.typed-cursor.blink3 {
  animation: blink3 1.5s steps(6, end) forwards;
}

.author-avatar {
    width: 38px;
    height: 38px;
    /* border-radius: 50%; */
    object-fit: contain;
    margin-right: 0.7em;
    vertical-align: middle;
    border: 1px solid #00ff00;
    box-shadow: none;
}

.cover-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto 1.5em auto;
    border: 1px solid #00FF00; /* Optional: green border for theme */
    border-radius: 0px;         /* Optional: rounded corners 8px */
    box-shadow: 0 0 24px #00FF0080; /* Optional: green glow */
    background: #000;           /* Optional: fallback background */
}

/* --- Testimonials --- */
.testimonial-section {
    margin-top: 4em;
    margin-bottom: 4em;
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.testimonial-card {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 2em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1; /* Allow nodes to grow */
    min-width: 280px; /* Prevent nodes from becoming too narrow */
    max-width: 350px; /* Prevent nodes from becoming too wide */
}

.testimonial-body {
    flex-grow: 1;
}

.testimonial-card p {
    font-style: italic;
    color: #555;
    margin-bottom: 1.5em;
    color: #b0b0b0;
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: auto; /* Pushes author to the bottom */
    padding-top: 1.5em;
    border-top: 1px solid #eee;
}

.testimonial-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ccc;
}

.author-details .author-name {
    font-weight: bold;
    color: #333;
}

.author-details .author-title {
    color: #777;
    font-size: 0.9em;
}


/* --- FAQ Section --- */
.faq-section {
    margin-top: 4em;
    margin-bottom: 4em;
}

.faq-item {
    border-bottom: 1px solid #eee;
}

.faq-question {
    padding: 1.5em 1em;
    cursor: pointer;
    font-weight: 600;
    font-size: 1.1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-question:hover {
    background-color: #f9f9f9;
}

.faq-question::after {
    content: '\25BC'; /* Down arrow */
    font-size: 0.8em;
    transition: transform 0.2s;
}

.faq-item.active .faq-question::after {
    transform: rotate(180deg);
}

.faq-answer {
    padding: 0 1.5em;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    color: #555;
}

.faq-item.active .faq-answer {
    max-height: 300px; /* Adjust as needed */
    padding-bottom: 1.5em;
}

.faq-answer p {
    margin: 0;
    padding-top: 1em;
}

/* --- Enhancements for ProductHub Quick Navigation Cards --- */
.hub-nav-card:hover {
    background-color: #00FF00; /* Bright green background on hover - for example */
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.8), 0 0 8px rgba(0, 255, 0, 0.6) inset; /* More intense glow */
    transform: translateY(-3px); /* Slightly more lift */
}

/* Make text inside the card black on hover for high contrast */
.hub-nav-card:hover .arsenal-card-header .arsenal-card-icon svg,
.hub-nav-card:hover .arsenal-card-title,
.hub-nav-card:hover .arsenal-card-description {
    color: #000000 !important; /* Important to override existing green */
    text-shadow: none; /* Remove any green text-shadow that might reduce contrast */
}

/* Ensure SVG icon path also turns black if it's using fill: currentColor */
.hub-nav-card:hover .arsenal-card-header .arsenal-card-icon svg path {
    fill: #000000 !important;
}

/* --- Animated Background for Hub Navigation --- */
#hub-navigation {
    position: relative; /* Ensure this is set for z-index and pseudo-element positioning */
    overflow: hidden;   /* Clip the pseudo-element during animation */
    /* background-color: #000; /* Optional: ensure a base dark background if not already set by .game-screen */
}

@keyframes skyfallBackground {
    from {
        opacity: 0.8;
        transform: translateY(-100%);
    }
    to {
        opacity: 0;
        transform: translateY(0);
    }
}

#hub-navigation::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Behind .content-overlay (z-index: 1) and cards */
    
    /* Abstract Gradient - adjust colors to fit the DOOM theme */
    background-image: linear-gradient(
        to bottom,
        rgba(0, 255, 0, 0.3) 0%,    /* Lighter green, more transparent at the top */
        rgba(0, 180, 0, 0.2) 30%,
        rgba(0, 100, 0, 0.1) 70%,
        rgba(0, 0, 0, 0) 100%       /* Fading to fully transparent black at the bottom */
    );
    
    opacity: 0; /* Initially hidden */
    transform: translateY(-100%); /* Start off-screen at the top */
    
    /* Animation for appearing "from the sky" and fading */
    animation: skyfallBackground 2.5s ease-out forwards;
}

body.theme-doom #screen-1::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
}

/* --- FAQ Section --- */
.faq-section {
    /* background-color: #0A0A0A; Optional: slightly different background */
    padding: 40px 20px; /* Consistent padding */
    border-bottom: 1px solid #008000; /* Consistent separator */
}

.faq-section h2 {
    font-size: 1.8em;
    margin-bottom: 1em;
    color: #00FF00; /* Consistent color */
    position: relative;
    display: inline-block;
}

.faq-section h2::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -4px;
    left: 0;
    background: linear-gradient(to right, transparent, #00FF00, transparent);
}

.faq-section .faq-item {
    margin-bottom: 1.5em;
    padding: 10px 0;
    border-top: 1px solid #333;
}

.faq-section .faq-item:first-child {
    border-top: none;
}

.faq-section .faq-question {
    font-weight: 500;
    color: #39FF14; /* Accent color for questions */
    cursor: pointer;
    position: relative;
    display: inline-block;
}

.faq-section .faq-question::after {
    content: '▼';
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8em;
    color: #39FF14;
    transition: transform 0.3s ease;
}

.faq-section .faq-answer {
    display: none;
    padding: 10px 0;
    color: #E0E0E0;
    border-top: 1px solid #008000;
}

.faq-section .faq-item.active .faq-answer {
    display: block;
}

.faq-section .faq-item.active .faq-question::after {
    transform: translateY(-50%) rotate(180deg);
}

/* --- System Diagram Styles --- */
.system-diagram-wrapper {
    padding: 2em 0;
    position: relative;
    overflow: hidden;
    margin: 2em 0;
    border: 1px solid #008000;
    background-color: rgba(0, 5, 0, 0.85);
    box-shadow: 0 0 15px rgba(0,128,0,0.4);
}

.system-diagram-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    background-image:
        linear-gradient(to right, rgba(0, 128, 0, 0.1) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 128, 0, 0.1) 1px, transparent 1px);
    background-size: 40px 40px;
    animation: animatedGrid 20s linear infinite;
    z-index: 0;
    opacity: 0.3;
}

@keyframes animatedGrid {
    from {
        transform: translate(0, 0);
    }
    to {
        transform: translate(-50%, -50%);
    }
}

.system-diagram-container {
    display: flex;
    justify-content: center; /* Center items horizontally */
    align-items: stretch; /* Make items same height */
    gap: 20px;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    position: relative;
    z-index: 1;
    padding: 1em;
}

.system-node {
    color: #00FF00;
    border: 1px solid #008000;
    background-color: rgba(5, 5, 5, 0.85);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    padding: 1.5em;
    text-align: center;
    box-shadow: 0 0 12px rgba(0,128,0,0.3), inset 0 0 8px rgba(0,80,0,0.4);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1; /* Allow nodes to grow */
    min-width: 280px; /* Prevent nodes from becoming too narrow */
    max-width: 350px; /* Prevent nodes from becoming too wide */
}

.system-node:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 0 18px rgba(0,255,0,0.6), inset 0 0 10px rgba(0,128,0,0.5);
    border-color: #00FF00;
}

.system-node.strategy {
    /* Special styling for the strategy node to make it stand out */
    border-width: 2px;
    border-color: #00FF00;
}

.system-node h3 {
    font-size: 1.3em;
    margin-bottom: 0.5em;
    color: #00FF00;
    text-transform: uppercase;
    border-bottom: 1px solid #008000;
    padding-bottom: 0.5em;
}

.system-node p {
    font-size: 0.95em;
    color: #32CD32;
    margin: 0;
    line-height: 1.6;
}

/* Responsive adjustments for the new flexbox layout */
@media (max-width: 960px) { /* Adjusted breakpoint for better wrapping */
    .system-diagram-container {
        flex-direction: column;
        align-items: center; /* Center items when stacked */
    }
    .system-node {
        width: 90%; /* Take more width when stacked */
        max-width: 500px; /* Allow wider nodes when stacked */
    }
}

/* --- Interactive Widget Styles --- */
.interactive-widget-container {
    background-color: #1a1a1a;
    border: 1px solid #282828;
    border-radius: 10px;
    padding: 2em;
    margin: 2.5em 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.widget-title {
    color: #39FF14;
    margin-top: 0;
    margin-bottom: 1em;
    font-size: 1.5rem;
    text-align: center;
}

.interactive-widget-container p {
    text-align: center;
    margin-bottom: 1.5em;
    color: #b0b0b0;
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
}

.interactive-widget-container form {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.interactive-widget-container label {
    display: block;
    font-weight: 500;
    color: #e0e0e0;
    margin-bottom: 0.5em;
}

.interactive-widget-container input[type="number"],
.interactive-widget-container input[type="text"] {
    width: 100%;
    padding: 0.8em;
    background-color: #252525;
    border: 1px solid #444;
    border-radius: 5px;
    color: #e0e0e0;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.interactive-widget-container input[type="number"]:focus,
.interactive-widget-container input[type="text"]:focus {
    outline: none;
    border-color: #39FF14;
    box-shadow: 0 0 8px rgba(57, 255, 20, 0.3);
}

.interactive-widget-container button {
    background-color: #39FF14;
    color: #121212;
    border: none;
    padding: 0.9em 1.5em;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
    margin-top: 1em;
}

.interactive-widget-container button:hover {
    background-color: #5eff3b;
    transform: translateY(-2px);
}

.widget-result {
    margin-top: 1.5em;
    padding: 1.2em;
    background-color: #252525;
    border-radius: 5px;
    text-align: center;
    font-size: 1.1rem;
    color: #ffffff;
    border-left: 4px solid #39FF14;
    display: none; /* Hidden by default, shown with JS */
}

.widget-result strong {
    color: #39FF14;
}

/* Specific for Equity Calculator */
.equity-calculator-widget .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2em;
}

.equity-calculator-widget .form-column h4 {
    color: #ffffff;
    margin-bottom: 1em;
    border-bottom: 1px solid #444;
    padding-bottom: 0.5em;
}

/* Specific for Quiz Widget */
.quiz-widget p {
    text-align: left;
    font-weight: bold;
    margin-top: 1.5em;
    margin-bottom: 0.8em;
}

.quiz-widget label {
    display: block;
    background-color: #252525;
    padding: 0.8em 1.2em;
    border-radius: 5px;
    margin-bottom: 0.5em;
    cursor: pointer;
    transition: background-color 0.2s;
    border: 1px solid #444;
}

.quiz-widget label:hover {
    background-color: #333;
}

.quiz-widget input[type="radio"] {
    margin-right: 10px;
}

/* === CONSOLIDATED BLOG STYLES === */

/* --- Styles for blog post headers --- */
.blog-post-article h1 {
    font-size: 2.6rem;
    color: #FFFFFF;
    text-align: center;
    margin-bottom: 0.5em;
}

.blog-post-meta {
    text-align: center;
    margin-bottom: 2em;
    color: #B0B0B0;
    font-size: 0.95em;
}

.blog-post-meta .author-name {
    color: #39FF14;
    font-weight: 500;
}

.blog-post-meta .post-date,
.blog-post-meta .reading-time {
    margin: 0 0.5em;
}

/* --- General content styling for blog posts --- */
.blog-post-content {
    max-width: 720px;
    margin: 0 auto;
}

.blog-post-content h2 {
    font-size: 2rem;
    color: #FFFFFF;
    border-bottom: 1px solid #282828;
    padding-bottom: 0.3em;
    margin-top: 2em;
}

.blog-post-content h3 {
    font-size: 1.5rem;
    color: #E0E0E0;
    margin-top: 1.5em;
}

.blog-post-content p, 
.blog-post-content ul, 
.blog-post-content ol {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #E0E0E0;
}

.blog-post-content a {
    color: #39FF14;
    border-bottom: 1px solid rgba(57, 255, 20, 0.3);
}

.blog-post-content a:hover {
    color: #FFFFFF;
    border-bottom-color: #39FF14;
}

.blog-post-content blockquote {
    border-left: 3px solid #39FF14;
    margin: 1.5em 0;
    padding: 0.5em 1.5em;
    background-color: #1a1a1a;
    color: #c0c0c0;
    font-style: italic;
}

.blog-post-content code {
    background-color: #252525;
    color: #39FF14;
    padding: 0.2em 0.4em;
    border-radius: 4px;
    font-family: 'Courier New', Courier, monospace;
}

.blog-post-content pre {
    background-color: #1e1e1e;
    border: 1px solid #282828;
    padding: 1em;
    border-radius: 8px;
    overflow-x: auto;
    margin: 1.5em 0;
}

.blog-post-content pre code {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    color: #d4d4d4; /* A common color for code in dark themes */
}

/* --- Call to Action Box --- */
.cta-box {
    background-color: #1a1a1a;
    border: 1px solid #39FF14;
    border-radius: 8px;
    padding: 2em;
    margin: 3em auto;
    text-align: center;
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.2);
}

.cta-box h3 {
    color: #FFFFFF;
    margin-top: 0;
}

.cta-box p {
    color: #b0b0b0;
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
}

/* --- Financial Modeling Calculator Specific Styles --- */
.financial-calculator-widget .form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5em 2em;
}

.financial-calculator-widget .form-group {
    display: flex;
    flex-direction: column;
}

.financial-calculator-widget .form-group label {
    color: #e0e0e0;
    margin-bottom: 0.5em;
    font-size: 0.9rem;
}

.financial-calculator-widget .form-group input {
    background-color: #252525;
    border: 1px solid #444;
    color: #e0e0e0;
    padding: 0.7em;
    border-radius: 5px;
}

.financial-calculator-widget .widget-result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
    margin-top: 1.5em;
    padding: 1.2em;
    background-color: #252525;
    border-radius: 5px;
    border-left: 4px solid #39FF14;
    display: none; /* Hidden by default */
}

.financial-calculator-widget .result-item {
    text-align: center;
}

.financial-calculator-widget .result-item .label {
    font-size: 0.9rem;
    color: #b0b0b0;
}

.financial-calculator-widget .result-item .value {
    font-size: 1.4rem;
    font-weight: bold;
    color: #39FF14;
}

/* --- Mindset Quiz Specific Styles --- */
.mindset-quiz-widget .quiz-question {
    background: #252525;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 1.5em;
    margin-bottom: 1.5em;
}

.mindset-quiz-widget .quiz-question p {
    font-weight: bold;
    color: #ffffff;
    margin-top: 0;
}

.mindset-quiz-widget .quiz-options label {
    display: block;
    background-color: #333;
    padding: 0.8em 1.2em;
    border-radius: 5px;
    margin-bottom: 0.5em;
    cursor: pointer;
    transition: background-color 0.2s;
    border: 1px solid #555;
}

.mindset-quiz-widget .quiz-options label:hover {
    background-color: #444;
}

.mindset-quiz-widget .quiz-options input[type="radio"] {
    margin-right: 10px;
    accent-color: #39FF14;
}

.mindset-quiz-widget .widget-result h4 {
    color: #39FF14;
}
.mindset-quiz-widget .widget-result p {
    color: #e0e0e0;
}

/* --- Blog Page Specific Styles --- */
.blog-page article h1 { font-size: 2.5rem; text-align: center; margin-bottom: 1.5em; }
.blog-page article h2 { font-size: 1.8rem; margin-top: 2.5em; margin-bottom: 1em; border-bottom: 1px solid #282828; padding-bottom: 0.3em; }
.blog-page article h3 { font-size: 1.4rem; margin-top: 1.8em; margin-bottom: 0.8em; }
.blog-page article p, .blog-page article li { font-size: 1.05rem; line-height: 1.8; }
.blog-page .cta-button { display: block; max-width: 400px; margin: 2.5em auto; padding: 1em 2em; font-size: 1.1em; text-align: center; }
.blog-page strong { font-weight: 700; }
.blog-page ul { list-style-type: disc; margin-left: 20px; }
.blog-page li { margin-bottom: 0.8em; }
.blog-page code { background-color: #2a2a2a; padding: 0.2em 0.4em; border-radius: 3px; font-family: monospace; font-size: 0.9em; }
.blog-page .key-takeaway { font-weight: bold; color: #39FF14; }
.blog-page .comparison-table { width: 100%; margin: 2em 0; border-collapse: collapse; }
.blog-page .comparison-table th, .blog-page .comparison-table td { border: 1px solid #444; padding: 0.8em; text-align: left; }
.blog-page .comparison-table th { background-color: #2a2a2a; font-weight: bold; }
.blog-page .comparison-table .col-developer { background-color: rgba(255, 69, 0, 0.1); }
.blog-page .comparison-table .col-marketer { background-color: rgba(57, 255, 20, 0.1); }
.blog-page .comparison-table .pro-point { color: #39FF14; }
.blog-page .comparison-table .con-point { color: #FF4500; }
.blog-page .intro-pain { font-size: 1.1em; font-style: italic; color: #FF4500; margin: 1.5em 0; padding: 1em; border-left: 3px solid #FF4500; background-color: rgba(255, 69, 0, 0.05); }
.blog-page .lesson-box { border: 1px solid #444; padding: 1.5em; margin: 1.5em 0; border-radius: 6px; background-color: #1a1a1a; }
.blog-page .lesson-box h3 { font-size: 1.2em; margin-top: 0; margin-bottom: 0.5em; }
.blog-page .lesson-box .corp-reality { color: #FF4500; font-style: italic; }
.blog-page .lesson-box .startup-reality { color: #39FF14; font-weight: bold; }
.blog-page .lesson-box p { margin-bottom: 0.5em; }
.blog-page .important-note { background-color: #1a1a1a; border-left: 4px solid #39FF14; padding: 1em 1.5em; margin: 1.5em 0; font-size: 1.05em; }
.blog-page .code-block { background-color: #2a2a2a; padding: 1em; border-radius: 5px; margin: 1.5em 0; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word; }
.blog-page .code-block pre { margin: 0; }
.blog-page .code-block code { background-color: transparent; padding: 0; font-size: 0.95em; }
.blog-page .tool-card { background-color: #1a1a1a; border: 1px solid #444; border-radius: 6px; padding: 1.5em; margin: 1.5em 0; }
.blog-page .tool-card h3 { margin-top: 0; border-bottom: 1px solid #333; padding-bottom: 0.5em; }
.blog-page .tool-card .tool-link { font-weight: bold; }
.blog-page .tool-card .pros, .blog-page .tool-card .cons { margin-top: 1em; }
.blog-page .tool-card .pros li { color: #39FF14; }
.blog-page .tool-card .cons li { color: #FF4500; }
.blog-page .technical-deep-dive { background-color: #1a1a1a; border: 1px solid #444; border-radius: 6px; padding: 1.5em; margin: 1.5em 0; }
.blog-page .technical-deep-dive h3 { margin-top: 0; }
.blog-page .key-learning { font-style: italic; background-color: rgba(57, 255, 20, 0.05); border-left: 3px solid #39FF14; padding: 1em; margin: 1.5em 0; }
.blog-page .key-concept { background-color: #1a1a1a; border-left: 4px solid #39FF14; padding: 1em 1.5em; margin: 1.5em 0; }
.blog-page .validation-step { border: 1px solid #444; padding: 1.5em; margin: 2em 0; border-radius: 6px; }
.blog-page .validation-step h3 { margin-top: 0; }
.blog-page .validation-step .tool-recommendation { font-weight: bold; color: #39FF14; }
.blog-page .common-mistake { color: #FF4500; font-style: italic; }
.blog-page .key-question { font-weight: bold; color: #39FF14; }
.blog-page .red-flag { color: #FF4500; font-style: italic; }
.blog-page .platform-card { background-color: #1a1a1a; border: 1px solid #444; border-radius: 6px; padding: 1.5em; margin: 1.5em 0; }
.blog-page .platform-card h3 { margin-top: 0; }
.blog-page .model-component { border: 1px solid #444; padding: 1.5em; margin: 1.5em 0; border-radius: 6px; background-color: #1a1a1a; }
.blog-page .model-component h3 { margin-top: 0; }
.blog-page .model-card { background-color: #1a1a1a; border: 1px solid #444; border-radius: 6px; padding: 1.5em; margin: 1.5em 0; }
.blog-page .model-card h3 { margin-top: 0; }
.blog-page .model-card .pros, .blog-page .model-card .cons { margin-top: 1em; }
.blog-page .model-card .pros li { color: #39FF14; }
.blog-page .model-card .cons li { color: #FF4500; }
.blog-page .key-shift { font-weight: bold; color: #39FF14; }
.blog-page .mindset-block { border: 1px solid #444; padding: 1.5em; margin: 1.5em 0; border-radius: 6px; background-color: #1a1a1a; }
.blog-page .mindset-block h3 { margin-top: 0; }
.blog-page .mindset-block .corporate-trap { color: #FF4500; font-style: italic; }
.blog-page .mindset-block .solopreneur-reality { color: #39FF14; }
.blog-page .step-box { border: 1px solid #444; padding: 1.5em; margin: 1.5em 0; border-radius: 6px; background-color: #1a1a1a; }
.blog-page .step-box h3 { margin-top: 0; }
.blog-page .code-example { background-color: #2a2a2a; padding: 1em; border-radius: 5px; margin: 1.5em 0; overflow-x: auto; }
.blog-page .code-example code { background-color: transparent; padding: 0; }