/* ================================
   CSS Custom Properties (Design Tokens)
   ================================ */
:root {
    /* Colors - Purple Gaming Theme - UPDATED for AA Contrast */
    --color-primary: #4F46E5;
    /* Darker Indigo for >4.5:1 contrast with white */
    --color-primary-light: #818CF8;
    --color-primary-dark: #4338CA;
    --color-accent: #3730A3;

    /* Backgrounds */
    --bg-dark: #080816;
    --bg-darker: #050510;
    --bg-light: #f5f5f7;
    --bg-card: rgba(20, 20, 40, 0.6);
    --bg-card-light: #ffffff;
    --bg-glass: rgba(79, 70, 229, 0.1);

    /* Text */
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.9);
    /* Increased opacity for contrast */
    --text-muted: rgba(255, 255, 255, 0.7);
    --text-dark: #080816;
    --text-dark-secondary: #444444;
    /* Darkened from #666 for better visibility */

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #4F46E5 0%, #818CF8 50%, #4338CA 100%);
    --gradient-dark: linear-gradient(180deg, #080816 0%, #0a0a1a 100%);
    --gradient-glow: radial-gradient(circle at center, rgba(117, 117, 242, 0.3) 0%, transparent 70%);

    /* Typography */
    --font-primary: 'Montserrat', sans-serif;
    --font-heading: 'Montserrat', sans-serif;
    --font-subheading: 'Montserrat', sans-serif;

    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 5rem;
    --space-3xl: 10rem;
    /* 160px */

    /* Section Spacing (Polished Formula) */
    --padding-mobile: 80px;
    --padding-tablet: 120px;
    --padding-desktop: 160px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;
    --transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Shadows */
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 40px rgba(117, 117, 242, 0.4);

    /* Layout */
    --max-width: 1400px;
    --max-width-hero: 1400px;
    --nav-height: 80px;

    /* Typography Line Heights */
    --line-height-header: 1.1;
    --line-height-body: 1.6;
}

/* ================================
   Reset & Base Styles
   ================================ */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    scroll-snap-type: y proximity;
}

body {
    font-family: var(--font-primary);
    background-color: var(--bg-light);
    color: var(--text-dark);
    line-height: var(--line-height-body);
    overflow-x: hidden;
    position: relative;
    z-index: 0;
    /* Create stacking context */
}

/* Rough Paper Texture Overlay */
.paper-texture {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* Apply user's requested filter */
    filter: url(#roughpaper);
    /* Make it subtle and blend with background color */
    opacity: 0.4;
    mix-blend-mode: multiply;
    pointer-events: none;
    background: #ffffff;
    /* Base for filter to act on */
}

/* Scanlines Effect */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(0, 240, 255, 0.03) 3px);
    pointer-events: none;
    z-index: 9999;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-base);
}

ul,
ol {
    list-style: none;
}

img,
video {
    max-width: 100%;
    max-width: 100%;
    display: block;
}

h1,
.hero-title {
    font-family: var(--font-heading);
    letter-spacing: -0.02em;
    text-transform: uppercase;
    font-weight: 900;
    line-height: var(--line-height-header);
}

h2,
.section-title {
    font-family: var(--font-primary);
    letter-spacing: -0.02em;
    text-transform: none;
    font-weight: 300;
    line-height: 1.2;
    font-size: clamp(2rem, 4vw, 3rem);
}

h3,
h4,
h5,
h6,
.section-subtitle,
.stat-label,
.tab-btn {
    font-family: var(--font-subheading);
    letter-spacing: 0.1em;
    font-weight: 600;
    text-transform: uppercase;
}

/* ================================
   Section Container
   ================================ */
.section-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

/* ================================
   Navigation
   ================================ */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: var(--space-md) var(--space-lg);
    transition: all 0.4s ease;
    background: transparent;
}

.navbar.scrolled {
    top: var(--space-sm);
    left: var(--space-lg);
    right: var(--space-lg);
    background: rgba(200, 210, 255, 0.25);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    padding: var(--space-sm) var(--space-lg);
}

.navbar.scrolled .nav-link {
    color: var(--text-dark-secondary);
    text-shadow: none;
}

.navbar.scrolled .nav-link:hover {
    color: var(--text-dark);
}

/* Blue brackets on light background */
.navbar.scrolled .nav-link::before,
.navbar.scrolled .nav-link::after {
    color: var(--color-primary);
}

.navbar.scrolled .nav-logo .logo-icon {
    filter: none;
}

.navbar.scrolled .nav-logo .logo-text {
    filter: none;
}

/* Dark section override - keeps glass but uses white text */
.navbar.scrolled.dark-section {
    background: rgba(8, 8, 22, 0.6);
    border: 1px solid rgba(117, 117, 242, 0.3);
}

.navbar.scrolled.dark-section .nav-link {
    color: var(--text-primary);
    text-shadow: none;
}

.navbar.scrolled.dark-section .nav-link:hover {
    color: var(--text-primary);
}

/* White brackets on dark background sections */
.navbar.scrolled.dark-section .nav-link::before,
.navbar.scrolled.dark-section .nav-link::after {
    color: #ffffff;
}

.navbar.scrolled.dark-section .nav-logo .logo-icon,
.navbar.scrolled.dark-section .nav-logo .logo-text {
    filter: brightness(0) invert(1);
}

.nav-container {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-left,
.nav-right {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    flex: 1;
}

.nav-right {
    justify-content: flex-end;
}

.nav-link {
    font-family: var(--font-subheading);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    position: relative;
    padding: var(--space-xs) 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: all 0.5s ease;
    /* Slower active transition */
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Remove Underline */
.nav-link::after {
    display: none;
}

.nav-link:hover {
    color: #ffffff;
}

/* Bracket Hover Effect */
.nav-link::before {
    content: '[';
    display: inline-block;
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.3s ease;
    margin-right: 5px;
    color: #ffffff;
}

.nav-link:hover::before {
    opacity: 1;
    transform: translateX(0);
}

.nav-link::after {
    /* Redefine for right bracket */
    content: ']';
    display: inline-block;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
    margin-left: 5px;
    color: #ffffff;
    width: auto;
    height: auto;
    background: none;
    position: static;
}

.nav-link:hover::after {
    display: inline-block;
    opacity: 1;
    transform: translateX(0);
    width: auto;
}

.nav-cta {
    background: var(--color-primary);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.nav-cta::before,
.nav-cta::after {
    display: none !important;
    content: none !important;
}

.nav-cta:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(83, 83, 229, 0.3);
}

.nav-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.nav-logo .logo-icon {
    height: 32px;
    width: auto;
    filter: brightness(0) invert(1);
    transition: filter 0.4s ease;
}

.nav-logo .logo-text {
    height: 14px;
    width: auto;
    filter: brightness(0) invert(1);
    transition: filter 0.4s ease;
}

/* ================================
   Section Spacing (Global)
   ================================ */
section {
    padding-top: var(--padding-mobile);
    padding-bottom: var(--padding-mobile);
}

@media (min-width: 768px) {
    section {
        padding-top: var(--padding-tablet);
        padding-bottom: var(--padding-tablet);
    }
}

@media (min-width: 1024px) {
    section {
        padding-top: var(--padding-desktop);
        padding-bottom: var(--padding-desktop);
    }
}

/* ================================
   Hero Section - Full Screen Video
   ================================ */
.hero {
    min-height: 100vh;
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    scroll-snap-align: start;
    cursor: url('assets/cursor_sword.svg') 0 0, auto;
}

.hero a,
.hero button,
.hero .btn {
    cursor: url('assets/cursor_sword.svg') 0 0, pointer;
}

.hero-video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Removed overlay to keep video fully visible */
    background: transparent;
    pointer-events: none;
    z-index: 1;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    /* Visible gradient at bottom of hero */
    background: linear-gradient(to bottom,
            transparent 0%,
            rgba(245, 245, 247, 0.1) 30%,
            rgba(245, 245, 247, 0.4) 60%,
            rgba(245, 245, 247, 0.75) 85%,
            #f5f5f7 100%);
    z-index: 2;
    pointer-events: none;
}

.hero-content {
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
    position: relative;
    z-index: 3;
    animation: fadeInUp 1s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-title {
    font-family: var(--font-primary);
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 600;
    /* Increased weight */
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin-bottom: var(--space-lg);
    color: #ffffff;
    /* Pure white */
    /* Strong text shadow for contrast without overlay */
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.9),
        0 8px 32px rgba(0, 0, 0, 0.8),
        0 0 10px rgba(0, 0, 0, 0.5);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.cta-heading {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-family: var(--font-primary);
    font-weight: 400;
    font-style: normal;
    text-transform: none;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin-bottom: var(--space-md);
    color: var(--text-primary);
}

.cta-subheading {
    font-size: 1rem;
    font-family: var(--font-primary);
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-xl);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.consultation-cta {
    padding: var(--space-xl) var(--space-lg);
}

.cta-card-container {
    background: var(--bg-dark);
    border-radius: var(--radius-xl);
    padding: var(--space-3xl) var(--space-xl);
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.cta-button-sched {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: #ffffff;
    padding: 12px 32px;
    border-radius: 4px;
    /* Boxy pixel style */
    font-family: 'VT323', monospace;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
    /* Pixel-art pressed effect shadow */
    margin-top: var(--space-md);
}

.cta-button-sched:hover {
    background: var(--color-primary-light);
    transform: translateY(2px);
    /* Press down effect */
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}



.title-line {
    display: block;
}

.title-highlight {
    display: block;
    color: var(--text-primary);
    font-weight: inherit;
}

.hero-subtitle {
    font-size: 0.95rem;
    color: #ffffff;
    /* maximize contrast */
    font-weight: 500;
    /* thicker text */
    max-width: 600px;
    margin: var(--space-lg) auto var(--space-xl);
    line-height: 1.6;
    animation: fadeInUp 1s ease-out 0.2s backwards;
    /* Strong shadow */
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.9),
        0 4px 12px rgba(0, 0, 0, 0.7);
}

.hero-buttons {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
    animation: fadeInUp 1s ease-out 0.4s backwards;
}

/* ================================
   Buttons
   ================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-lg);
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: var(--transition-base);
    border: none;
    outline: none;
    letter-spacing: 0.02em;
}

.btn-primary {
    background: #ffffff;
    color: #1a1a1a;
    border: none;
    font-weight: 600;
}

.btn-primary:hover {
    background: #f0f0f0;
    color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(4px);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: #fff;
    transform: translateY(-2px);
}

.btn-outline {
    background: transparent;
    color: var(--text-dark);
    border: 2px solid var(--text-dark);
}

.btn-outline:hover {
    background: var(--text-dark);
    color: var(--text-primary);
    transform: translateY(-3px);
}

.btn-large {
    padding: var(--space-lg) var(--space-2xl);
    font-size: 1.1rem;
}

/* ================================
   Scroll Indicator
   ================================ */
.scroll-indicator {
    position: absolute;
    bottom: var(--space-xl);
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    z-index: 10;
    animation: fadeInUp 1s ease-out 0.6s backwards;
}

.scroll-text {
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.scroll-arrow {
    width: 44px;
    height: 44px;
    border: 1.5px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: transparent;
    transition: all 0.3s ease;

    animation: bounce 2s infinite;
}

.scroll-arrow svg {
    transform: rotate(0deg);
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

/* ================================
   Logo Scroll / Marquee
   ================================ */
.logo-scroll {
    /* Transparent to show body texture */
    background: transparent;
    padding: var(--space-2xl) 0 var(--space-lg);
    overflow: hidden;
    scroll-snap-align: start;
}

.logo-scroll-label {
    text-align: center;
    font-size: 0.85rem;
    /* Smaller */
    color: #888899;
    /* Less opacity/gray */
    font-weight: 600;
    margin-bottom: var(--space-lg);
    /* Tighter to logos */
    letter-spacing: 1.5px;
    text-transform: uppercase;
    /* Matching example */
}

.logo-marquee {
    position: relative;
    width: 100%;
    margin-bottom: 0;
    overflow: hidden;
    /* Fade edges with gradient mask */
    -webkit-mask-image: linear-gradient(to right,
            transparent 0%,
            rgba(0, 0, 0, 0.3) 5%,
            black 15%,
            black 85%,
            rgba(0, 0, 0, 0.3) 95%,
            transparent 100%);
    mask-image: linear-gradient(to right,
            transparent 0%,
            rgba(0, 0, 0, 0.3) 5%,
            black 15%,
            black 85%,
            rgba(0, 0, 0, 0.3) 95%,
            transparent 100%);
}

.logo-track {
    display: flex;
    gap: var(--space-3xl);
    animation: marquee 40s linear infinite;
    /* Slower smoothness */
    width: max-content;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.logo-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm) var(--space-md);
    filter: grayscale(100%);
    opacity: 0.5;
    transition: none;
}

.logo-placeholder {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-dark-secondary);
    white-space: nowrap;
    opacity: 0.8;
}

.logo-placeholder-small {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dark-secondary);
    white-space: nowrap;
}

/* ================================
   Classic RPG Inventory UI (Clean)
   ================================ */
.inventory-section {
    /* Transparent to show body texture */
    background: transparent;
    padding: var(--space-xl) 0 var(--space-lg);
    color: var(--text-dark);
}

/* Split Header Layout */
.section-header.split-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    text-align: left;
    /* Reset center align */
    gap: 40px;
    margin-bottom: 20px;
    /* Reduced margin to bring content closer */
    flex-wrap: wrap;
    max-width: 1200px;
    /* Ensure strictly same width as content */
    margin-left: auto;
    margin-right: auto;
}

.section-header.split-header .section-title {
    font-family: var(--font-primary);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 300;
    color: var(--text-dark);
    flex: 1;
    min-width: 280px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0;
}

.section-header.split-header .section-description {
    flex: 1.2;
    min-width: 300px;
    text-align: left;
}

.section-header.split-header .section-description p {
    font-size: 1rem;
    color: var(--text-dark-secondary);
    line-height: 1.7;
    margin: 0;
    max-width: 500px;
}

/* Responsive fix for header */
@media (max-width: 768px) {
    .section-header.split-header {
        flex-direction: column;
        text-align: left;
    }

    .section-header.split-header .section-description {
        text-align: left;
    }

    .section-header.split-header .section-description p {
        margin-left: 0;
    }
}

/* Main Container */
.inventory-display.classic-rpg-ui {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /* Space between edges */
    align-items: flex-start;
    /* Align top */
    gap: 0;
    max-width: 1200px;
    /* Align matches Header */
    margin: 0 auto;

    /* Removed Box Styling */
    background: transparent;
    border: none;
    box-shadow: none;

    font-family: var(--font-main);
    /* Reset to main font for container */
    overflow: visible;
}

/* Left: Character Art */
.character-panel {
    flex: 0 0 auto;
    /* Stop resizing it weirdly */
    width: 50%;
    /* Take half space roughly */
    min-width: 400px;
    display: flex;
    align-items: flex-start;
    /* Top align */
    justify-content: flex-start;
    /* Left Align */
    background: transparent;
    border: none;
    padding: 0;
    margin-right: 0;
    /* Slight overlap or tightening */
    z-index: 1;
    position: relative;
    /* For absolute logo positioning */
}

.character-bg-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-5deg);
    width: 800px;
    max-width: none;
    height: auto;
    opacity: 1;
    z-index: -1;
    pointer-events: none;
    /* Tint to purple --color-primary #7575F2 */
    filter: brightness(0) saturate(100%) invert(54%) sepia(90%) saturate(3000%) hue-rotate(220deg) brightness(95%) contrast(95%);
}


/* The Knight Image */
.pixel-art-character {
    width: 100%;
    height: auto;
    max-height: 850px;
    /* Increased to avoid clipping */
    object-fit: contain;
    object-position: left bottom;
    /* Anchor to bottom */

    /* Removed mask-image to prevent cutting off cape/spear */
    /* Removed mask - doing fade via container overlay instead */
    /* Composite Mask: Fades bottom (fog) AND left edge (cape blending) */
    -webkit-mask-image:
        linear-gradient(to bottom, black 70%, transparent 100%),
        linear-gradient(to right, transparent 0%, black 15%, black 100%);
    mask-image:
        linear-gradient(to bottom, black 70%, transparent 100%),
        linear-gradient(to right, transparent 0%, black 15%, black 100%);

    /* Ensure only the intersection of opaque areas remains visible */
    -webkit-mask-composite: source-in;
    mask-composite: intersect;

    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.25));
    /* Adjust margin to align pixel art edge with text */
    margin-left: -50px;
    /* Pull slightly left to create dynamic overlap */
    position: relative;
    z-index: 2;
}

/* Ensure container doesn't clip and no overlays exist */
.character-panel {
    overflow: visible !important;
    position: relative;
}

.character-panel::after,
.character-panel::before {
    content: none !important;
    display: none !important;
    background: none !important;
}

/* Gradient Fade Overlay - Fixes the "broken" mask look by smoothly covering bottom */


/* Removed Hover Effect */

/* Right Panel: Inventory Mesh */
.inventory-main {
    flex: 1;
    min-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* Align Grid to Right Edge */
    padding: 150px 0 0 0;
    /* Adjusted from 280px to center relative to the image */
    background: transparent;
    border: none;
    z-index: 2;
}

/* Removed Header Styles explicitly */
.inventory-header {
    display: none;
}

/* Grid Layout */
.inventory-mesh.grid-hex {
    display: grid;
    /* 3 Columns of 160px width approx */
    grid-template-columns: repeat(3, 160px);
    gap: 15px 15px;
    justify-content: end;
    /* Grid items align right */

    /* Pull grid away from edge, closer to knight */
    margin-right: 120px;

    max-width: none;
}

/* Inventory CTA Button - Aligned with Grid */
.inventory-cta {
    margin-top: 15px;
    /* Was 30px */
    margin-right: 140px;
    /* Align with Hex Grid (120px + slight adjustment for center feel) */
    z-index: 5;
    position: relative;
    display: flex;
    justify-content: flex-end;
}

.hex-link-styled {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Force Center */
    width: auto !important;
    gap: 10px;

    /* Match cta-button-sched (Brown Theme) */
    background: #3C2415 !important;
    color: #F5ECD7 !important;
    padding: 14px 32px !important;
    /* Force Padding */
    border-radius: 6px !important;
    font-family: var(--font-primary) !important;
    font-size: 0.9rem !important;
    /* Reduced from 1rem */
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 1.5px !important;
    text-decoration: none !important;
    border: 2px solid #5C3A1E !important;
    box-shadow: 0 4px 15px rgba(60, 36, 21, 0.3) !important;

    transition: all 0.3s ease;
}

.hex-link-styled:hover {
    background: #5C3A1E !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(60, 36, 21, 0.5) !important;
    border-color: #7a4f2e !important;
}

.hex-link-styled::after {
    content: '';
}

/* HEAGON SLOTS */
/* HEAGON SLOTS - Borderless 3D Style */
.inventory-slot.hex-slot {
    width: 160px;
    height: 180px;

    /* Match Section Background with Shine */
    background: linear-gradient(145deg, #ffffff, var(--bg-light, #f5f5f7));

    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

    border: none;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0;
    transition: transform 0.2s ease, background 0.2s ease, filter 0.2s ease;

    /* Soft Shadow to define edges */
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.08));
    box-shadow: none;

    /* Scroll entrance animation */
    opacity: 0;
    transform: scale(0.7) translateY(20px);
}

/* Staggered entrance delays */
.inventory-slot.hex-slot:nth-child(1) {
    transition-delay: 0.1s;
}

.inventory-slot.hex-slot:nth-child(2) {
    transition-delay: 0.2s;
}

.inventory-slot.hex-slot:nth-child(3) {
    transition-delay: 0.3s;
}

.inventory-slot.hex-slot:nth-child(4) {
    transition-delay: 0.4s;
}

.inventory-slot.hex-slot:nth-child(5) {
    transition-delay: 0.5s;
}

.inventory-slot.hex-slot:nth-child(6) {
    transition-delay: 0.6s;
}

/* When visible (triggered by JS) */
.inventory-slot.hex-slot.hex-visible {
    opacity: 1;
    transform: scale(1) translateY(0);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: hexPulse 1.5s ease-in-out 1s 1;
}

/* Gentle pulse to hint clickability */
@keyframes hexPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

/* Remove Pseudo-border */
.inventory-slot.hex-slot::before {
    content: none;
    display: none;
}

/* Hover: Gradient Pressed Effect - Updated for Contrast */
.inventory-slot.hex-slot:hover {
    /* Gradient: Brown to Gold */
    background: linear-gradient(to bottom, #3C2415 0%, #C9A96E 100%) !important;

    /* Slight downward movement */
    transform: translateY(2px);
    z-index: 10;

    /* Inner shadow mainly at the top/left to suggest light source is top-left */
    box-shadow: inset 2px 4px 8px rgba(0, 0, 0, 0.3);

    /* Reduced drop shadow closer to surface */
    filter: drop-shadow(0 2px 6px rgba(60, 36, 21, 0.4));
}

/* Invert icons to white on hover */
.inventory-slot.hex-slot:hover img,
.inventory-slot.hex-slot:hover .item-icon-svg {
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
    transform: scale(1.1);
    transition: all 0.2s ease;
}



/* Override Rarity Classes (Ensure no random bg colors) */
.inventory-slot.hex-slot.rarity-common,
.inventory-slot.hex-slot.rarity-rare,
.inventory-slot.hex-slot.rarity-epic,
.inventory-slot.hex-slot.rarity-legendary {
    background: var(--bg-light, #f5f5f7);
}

.inventory-slot.hex-slot .item-icon {
    z-index: 2;
    position: relative;
    font-size: 3.5rem;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
    opacity: 0.9;
}

/* SVG Icons Styling */
.item-icon-svg {
    z-index: 2;
    position: relative;
    width: 60px;
    height: 60px;
    object-fit: contain;

    /* Default: Black */
    filter: brightness(0) opacity(0.85);

    opacity: 1;
    transition: filter 0.2s ease;
}

.inventory-slot.hex-slot:hover .item-icon-svg {
    /* Hover: Slightly darker/pressed */
    filter: brightness(0) opacity(0.7);
    opacity: 1;
}

/* Honeycomb Offset for Row 2 */
/* We use margins instead of transform so hover-scale doesn't break position */
.inventory-slot.hex-slot:nth-child(n+4) {
    margin: 0;
    /* Reset flex hack */
    margin-top: -45px;
    margin-left: 80px;
    /* Shift row 2 visually */
}

/* Reset margin for the first item of the second row if we want a grid feel,
   but for 6 items in 2 rows, we want row 2 to interlock with row 1 */

/* Default Border color */
.inventory-slot.hex-slot.rarity-common {
    background: #777;
}

.inventory-slot.hex-slot.rarity-rare {
    background: #3b82f6;
}

.inventory-slot.hex-slot.rarity-epic {
    background: #a855f7;
}

.inventory-slot.hex-slot.rarity-legendary {
    background: #eab308;
}

.inventory-slot.hex-slot .item-icon {
    z-index: 2;
    position: relative;
    font-size: 3rem;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
}

.inventory-slot.hex-slot:hover {
    transform: scale(1.1);
    z-index: 10;
}

.inventory-slot.hex-slot:hover::before {
    background: #25252e;
}

/* Rarity Borders - Subtle glow on hover or constant? Let's use border colors */
.inventory-slot.rarity-common {
    border-bottom: 3px solid #777;
}

.inventory-slot.rarity-rare {
    border-bottom: 3px solid #3b82f6;
}

.inventory-slot.rarity-epic {
    border-bottom: 3px solid #a855f7;
}

.inventory-slot.rarity-legendary {
    border-bottom: 3px solid #eab308;
}

/* Icons */
.item-icon {
    font-size: 2.5rem;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* ================================
   RPG Skill Tree Section (Light Tech Theme)
   ================================ */
.inventory-display {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.inventory-group {
    background: #f0f0f5;
    /* Light inventory background */
    border: 2px solid #d1d1d6;
    border-radius: 12px;
    padding: 1.5rem;
    min-width: 250px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.group-title {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #666;
    border-bottom: 2px solid #d1d1d6;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    text-align: center;
    font-weight: 700;
}

.inventory-grid {
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* Slot Styling */
.inventory-slot {
    width: 64px;
    height: 64px;
    background: #2b2b3b;
    /* Dark slot interior */
    border: 2px solid #444;
    border-radius: 6px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.inventory-slot:hover {
    transform: scale(1.1);
    z-index: 10;
    border-color: white;
}

.inventory-slot.empty {
    background: #20202a;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.8);
    cursor: default;
}

.inventory-slot.empty:hover {
    transform: none;
    border-color: #444;
}

/* Rarity / Tiers */
.inventory-slot.rare {
    border-color: #3b82f6;
    /* Blue */
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.3), inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.inventory-slot.rare:hover {
    border-color: #60a5fa;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.6);
}

.inventory-slot.legendary {
    border-color: #f59e0b;
    /* Gold */
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.3), inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.inventory-slot.legendary:hover {
    border-color: #fbbf24;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.6);
}

/* Icons within Slots */
.item-icon {
    font-size: 1.8rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

/* ================================
   RPG Skill Tree Section (Light Tech Theme)
   ================================ */
.skill-tree-section {
    background: var(--bg-light);
    padding: var(--space-3xl) 0;
    color: var(--text-dark);
    overflow: hidden;
    position: relative;
    /* Optional grid background pattern */
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
}

.skill-tree-section .section-title {
    color: var(--text-dark);
}

.skill-tree-section .section-subtitle {
    color: var(--text-dark-secondary);
}

.skill-tree-display {
    position: relative;
    width: 1000px;
    height: 400px;
    margin: 0 auto;
    /* Scale down on smaller screens */
    transform-origin: top center;
}

@media (max-width: 1024px) {
    .skill-tree-display {
        transform: scale(0.8);
    }
}

@media (max-width: 768px) {
    .skill-tree-display {
        transform: scale(0.5);
        margin-left: -20%;
        /* Center the scaled content */
    }
}

/* Connection Lines */
.skill-connections {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.connection-line {
    stroke: #d1d1d6;
    /* Light gray base */
    stroke-width: 2;
    fill: none;
    transition: stroke 0.3s ease;
}

/* Hover effect on lines could be cool later */

/* Skill Nodes (Hexagon) */
.skill-node {
    position: absolute;
    width: 120px;
    height: 140px;
    /* Wrapper area */
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    z-index: 1;
    cursor: pointer;
    /* Center anchor */
    transform: translate(-50%, -50%);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* The Hexagon Border (Background) */
.skill-node::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 104px;
    height: 120px;
    /* ~1.15 aspect ratio for hexagon */
    background: #d1d1d6;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    transition: background 0.3s;
    z-index: 1;
}

/* The Hexagon Content (White Inner) */
.hex-inner {
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 116px;
    background: white;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.skill-node:hover {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: none;
    border: none;
}

.skill-node:hover::before {
    background: var(--color-primary);
}

/* Icon inside node */
.node-icon {
    font-size: 2.5rem;
    pointer-events: none;
    z-index: 3;
}

/* Label below node */
.node-label {
    position: absolute;
    top: 125px;
    /* Push below hex */
    width: 140px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.9);
    padding: 2px 4px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.skill-node:hover .node-label {
    color: var(--color-primary);
}


/* ================================
   Skill Modal Overlay (Diablo Item Style)
   ================================ */
.skill-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(2px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s;
}

.skill-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.skill-modal-content {
    background: #110e0a;
    /* Deep "Diablo" Brown/Black */
    color: #a99b86;
    /* Parchment Text */
    width: 90%;
    max-width: 380px;
    border: 2px solid #584a39;
    /* Bronze/Iron Border */
    border-top-color: #7a6a52;
    border-bottom-color: #382e24;
    padding: 1.5rem;
    position: relative;
    box-shadow:
        0 0 0 2px #000,
        /* Inner black stroke */
        0 10px 40px rgba(0, 0, 0, 0.9);
    transform: scale(0.95);
    transition: transform 0.2s cubic-bezier(0.1, 0.9, 0.2, 1);
    text-align: left;
    /* Align left like item stats */
    font-family: 'Georgia', 'Times New Roman', serif;
    /* Serif for RPG feel */
}

.skill-modal-overlay.active .skill-modal-content {
    transform: scale(1);
}

.skill-modal-close {
    position: absolute;
    top: 5px;
    right: 10px;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #584a39;
    transition: color 0.2s;
    font-family: sans-serif;
}

.skill-modal-close:hover {
    color: #bfb09d;
}

.skill-modal-header {
    margin-bottom: 15px;
    border-bottom: 1px solid #382e24;
    padding-bottom: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
}

.skill-modal-icon {
    display: block;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    width: auto;
    height: auto;
    filter: none;
}

.skill-modal-title {
    font-size: 1.4rem;
    font-weight: 400;
    /* Regular serif weight */
    color: #ff8000;
    /* Legendary Orange */
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.2;
    margin-top: 5px;
    text-shadow: 0 0 5px rgba(255, 128, 0, 0.3);
}

.skill-modal-body {
    padding-top: 10px;
}

/* Description as "Flavor Text" at bottom or top? Let's treat it as Item Effect */
.skill-modal-body p {
    color: #e0d6c5;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 15px;
    font-style: italic;
    border-bottom: 1px solid #382e24;
    padding-bottom: 15px;
}

/* Tags as Item Stats */
.skill-modal-tags {
    display: flex;
    flex-direction: column;
    /* List format */
    gap: 6px;
    justify-content: flex-start;
}

.skill-modal-tags span {
    font-size: 0.9rem;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    color: #8c8ecf;
    /* Magic Blue Property */
    font-family: 'Georgia', serif;
    display: flex;
    align-items: center;
}

/* Add bullet points to tags */
.skill-modal-tags span::before {
    content: '◆';
    font-size: 0.7rem;
    margin-right: 8px;
    color: #584a39;
}

/* ================================
   Three Ways Section
   ================================ */
.three-ways {
    background: var(--bg-light);
    padding: var(--space-3xl) 0;
    scroll-snap-align: start;
}

.section-header {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.section-tag {
    display: inline-block;
    padding: var(--space-xs) var(--space-md);
    background: rgba(117, 117, 242, 0.1);
    border: 1px solid rgba(117, 117, 242, 0.3);
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: var(--space-md);
}

.section-title {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 500;
    margin-bottom: var(--space-md);
    color: var(--text-dark);
}

h1,
.h1 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: var(--space-md);
    color: var(--text-dark);
}

h2,
.h2 {
    font-family: var(--font-heading);
    font-weight: 600;
    /* Perplexity: 600 */
    line-height: 1.2;
    margin-bottom: var(--space-sm);
    color: var(--text-dark);
}

h3,
.h3 {
    font-family: var(--font-heading);
    font-weight: 600;
    /* Perplexity: 500-600 */
    line-height: 1.3;
    margin-bottom: var(--space-xs);
    color: var(--text-dark);
}

p,
.body-text {
    font-family: var(--font-primary);
    font-weight: 400;
    line-height: 1.6;
    /* Perplexity: 1.5-1.7 */
    margin-bottom: var(--space-md);
    color: var(--text-dark-secondary);
}

.section-subtitle {
    font-size: 1.1rem;
    color: var(--text-dark-secondary);
    max-width: 600px;
    margin: 0 auto;
}

.ways-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.way-card {
    background: var(--bg-card-light);
    border: 1px solid #e5e5e5;
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    text-align: center;
    transition: var(--transition-base);
}

.way-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border-color: var(--color-primary);
}

.way-image {
    margin-bottom: var(--space-md);
}

.way-image-placeholder {
    width: 100%;
    height: 180px;
    background: #e5e5e5;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
}

.way-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
    color: var(--text-dark);
}

.way-description {
    font-size: 0.95rem;
    color: var(--text-dark-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-md);
    /* Space for tags */
}

.way-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: auto;
    /* Push to bottom if card height varies */
}

.way-tag {
    font-size: 0.75rem;
    padding: 4px 10px;
    background: rgba(117, 117, 242, 0.08);
    /* Very light purple */
    border: 1px solid rgba(117, 117, 242, 0.2);
    border-radius: 99px;
    color: #555;
    font-weight: 500;
}

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

/* ================================
   Projects Section - Character Select Style
   ================================ */
.projects {
    background: var(--bg-dark);
    height: 100vh;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    cursor: url('assets/cursor_sword.svg') 0 0, auto;
    position: relative;
    /* For transition gradient */
}



.projects a,
.projects .character-card {
    cursor: url('assets/cursor_sword.svg') 0 0, pointer;
}

.projects .section-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-top: var(--space-2xl);
    max-width: 100%;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.projects .section-header {
    display: flex;
    align-items: flex-end;
    margin-top: 100px;
    margin-bottom: var(--space-xl);
    padding: 0 var(--space-xl);
    text-align: left;
    width: 100%;
    max-width: none;
    position: relative;
}

.projects .section-title {
    font-size: clamp(4.5rem, 13vw, 10rem);
    /* Massive Scale */
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.05em;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    color: transparent;
    margin-bottom: 20px;
    padding-bottom: 20px;
    width: 100%;
}

.projects .section-subtitle {
    position: absolute;
    right: var(--space-xl);
    top: 50%;
    transform: translateY(-50%);
    bottom: auto;
    text-align: right;
    max-width: 600px;
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin: 0;
}

.character-select {
    display: flex;
    gap: 0;
    flex: 1;
    min-height: 0;
    width: 120vw;
    margin-left: -10vw;
}

.character-card {
    position: relative;
    flex: 1;
    height: 100%;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.2, 0, 0.2, 1);
    transform: skewX(-10deg);
    box-shadow: 2px 0 0 rgba(0, 0, 0, 0.2);
    transform-origin: center;
    z-index: 1;
}

.character-card:first-child {
    margin-left: 0;
}

.character-card:last-child {
    box-shadow: none;
}

.character-image {
    position: absolute;
    top: 0;
    left: -20%;
    width: 140%;
    height: 100%;
    background: linear-gradient(135deg, #3a3a5c 0%, #1a1a2e 100%);
    filter: grayscale(100%) brightness(0.7);
    transition: all 0.5s ease;
    transform: skewX(10deg);
}

.character-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    opacity: 0.5;
}

.character-info {
    position: absolute;
    top: 0;
    left: -25%;
    width: 150%;
    height: 100%;
    padding: var(--space-lg);
    background: rgba(0, 0, 0, 0.85);
    transform: skewX(10deg);
    opacity: 0;
    transform-origin: center;
    transition: all 0.4s ease;
    pointer-events: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 20;
}

.character-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.character-role {
    font-size: 0.85rem;
    color: var(--color-primary-light);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Hover Effects */
.character-card:hover {
    flex: 1.5;
    z-index: 10;
}

.character-card:hover .character-image {
    filter: grayscale(0%) brightness(1);
}

.character-card:hover .character-info {
    transform: skewX(10deg);
    opacity: 1;
}

.character-card:hover .character-placeholder {
    opacity: 0.8;
}

/* ================================
   Case Study Modal
   ================================ */
.case-study-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.case-study-modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(8, 8, 22, 0.95);
    backdrop-filter: blur(10px);
}

.modal-content {
    position: relative;
    background: var(--bg-dark);
    border: 1px solid rgba(117, 117, 242, 0.2);
    border-radius: var(--radius-xl);
    max-width: 900px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    padding: var(--space-2xl);
    transform: translateY(30px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.case-study-modal.active .modal-content {
    transform: translateY(0) scale(1);
}

.modal-close {
    position: absolute;
    top: var(--space-lg);
    right: var(--space-lg);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-primary);
    transition: var(--transition-base);
}

.modal-close:hover {
    background: rgba(117, 117, 242, 0.3);
    transform: rotate(90deg);
}

.modal-header {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.modal-tag {
    display: inline-block;
    padding: var(--space-xs) var(--space-md);
    background: rgba(117, 117, 242, 0.2);
    border: 1px solid rgba(117, 117, 242, 0.4);
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-primary-light);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: var(--space-md);
}

.modal-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.modal-genre {
    font-size: 1rem;
    color: var(--text-secondary);
}

.modal-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
}

.modal-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: linear-gradient(135deg, #3a3a5c 0%, #1a1a2e 100%);
}

.modal-image-placeholder {
    width: 100%;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
}

.modal-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.modal-section h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-primary-light);
    margin-bottom: var(--space-sm);
}

.modal-section p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

.modal-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    margin-top: var(--space-sm);
}

.modal-stat {
    text-align: center;
    padding: var(--space-md);
    background: rgba(117, 117, 242, 0.1);
    border-radius: var(--radius-md);
    border: 1px solid rgba(117, 117, 242, 0.2);
}

.modal-stat-number {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary-light);
    margin-bottom: 4px;
}

.modal-stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

@media (max-width: 768px) {
    .modal-body {
        grid-template-columns: 1fr;
    }

    .modal-stats {
        grid-template-columns: 1fr;
    }
}

/* ================================
   Testimonials Section
   ================================ */
/* ================================
   Testimonials Section - Bento Grid
   ================================ */
.testimonials {
    background: var(--bg-light);
    padding: var(--space-2xl) 0;
    scroll-snap-align: start;
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(280px, auto);
    gap: var(--space-lg);
    max-width: 100%;
    margin: 0 auto;
}

.bento-card {
    background: #ffffff;
    border-radius: 24px;
    padding: var(--space-xl);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid #e5e5e5;
    display: flex;
    flex-direction: column;
}

.bento-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

/* Spans for 6-col grid */
.bento-span-4 {
    grid-column: span 4;
}

.bento-span-3 {
    grid-column: span 3;
}

.bento-span-2 {
    grid-column: span 2;
}

/* Content Styling */
.bento-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.bento-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-lg);
}

.bento-quote {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-dark);
    margin-bottom: auto;
    letter-spacing: -0.02em;
}

.bento-short-quote {
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-dark);
    letter-spacing: -0.01em;
}

.bento-text {
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--text-dark-secondary);
}

.bento-stat-block {
    margin-bottom: var(--space-md);
}

.bento-stat-value {
    display: block;
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--text-dark);
    letter-spacing: -0.03em;
    margin-bottom: var(--space-xs);
}

.bento-stat-label {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dark-secondary);
}

.bento-stars {
    color: #FFB100;
    letter-spacing: 2px;
    font-size: 1.1rem;
}

.bento-author {
    margin-top: var(--space-xl);
}

.author-info {
    display: flex;
    flex-direction: column;
}

.author-name {
    font-weight: 700;
    color: var(--text-dark);
    font-size: 1.1rem;
}

.author-title {
    font-size: 0.9rem;
    color: var(--text-dark-secondary);
}

/* Responsive */
@media (max-width: 1024px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 700px;
    }

    .bento-span-4,
    .bento-span-3,
    .bento-span-2 {
        grid-column: span 1;
    }

    .bento-span-4 {
        grid-column: span 2;
    }
}

@media (max-width: 600px) {
    .bento-grid {
        grid-template-columns: 1fr;
    }

    .bento-span-4 {
        grid-column: span 1;
    }
}

/* ================================
   Testimonials Header Redesign
   ================================ */
.testimonials {
    background: var(--bg-dark) !important;
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
}

.testimonials .section-header {
    display: flex;
    align-items: flex-end;
    margin-top: var(--space-lg);
    margin-bottom: var(--space-md);
    padding: 0 var(--space-lg);
    width: 100%;
    max-width: none;
    position: relative;
    z-index: 2;
    /* Ensure header sits above texture */
}

.testimonials .section-title {
    font-family: var(--font-primary);
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-primary-light) !important;
    margin-right: auto;
    margin-left: 0;
    text-align: left;
    width: auto;
    text-shadow: 0 0 15px rgba(117, 117, 242, 0.8), 0 0 30px rgba(117, 117, 242, 0.4);
    animation: glitchFlicker 5s infinite;
}

.testimonials .section-subtitle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    max-width: 400px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.1rem;
    margin: 0;
}

/* ================================
   RPG Dialogue Box - Testimonials
   ================================ */
.rpg-dialogue-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    gap: var(--space-lg);
    padding: 0 var(--space-lg);
    /* Removed large top padding to allow flex center */
    position: relative;
    width: 100%;
}

/* Wrapper for positioning character and box together */
.dialogue-wrapper {
    position: relative;
    max-width: 1100px;
    width: 100%;
    padding-right: 250px;
    /* Space for character */
}

/* Name Badge - positioned at top-left */
.dialogue-name-badge {
    position: absolute;
    top: -20px;
    left: 20px;
    background: var(--color-primary);
    padding: 8px 24px;
    border-radius: 4px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 2px;
    box-shadow: 0 4px 15px rgba(117, 117, 242, 0.4);
}

.dialogue-name {
    font-family: 'VT323', monospace;
    font-size: 1.6rem;
    color: #ffffff;
    text-shadow: none;
    line-height: 1;
}

.dialogue-studio {
    font-family: 'VT323', monospace;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1;
}

.rpg-dialogue-box {
    background: rgba(8, 8, 22, 0.98);
    border: 4px solid var(--color-primary);
    border-radius: 8px;
    padding: var(--space-lg) var(--space-2xl);
    padding-top: 50px;
    min-height: 200px;
    display: flex;
    align-items: flex-start;
    box-shadow:
        0 0 0 2px rgba(8, 8, 22, 1),
        0 0 0 6px rgba(117, 117, 242, 0.3),
        0 12px 40px rgba(0, 0, 0, 0.5),
        inset 0 0 40px rgba(117, 117, 242, 0.05);
    position: relative;
}

/* Inner border effect */
.rpg-dialogue-box::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border: 2px solid rgba(117, 117, 242, 0.2);
    border-radius: 4px;
    pointer-events: none;
}

/* Character Portrait - RIGHT side, overlapping */
.dialogue-character {
    position: absolute;
    right: -30px;
    bottom: -20px;
    width: 320px;
    height: 400px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 5;
}

.character-silhouette {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
    filter: invert(1) drop-shadow(0 0 15px #7575f2) drop-shadow(0 0 30px rgba(117, 117, 242, 0.6));
    opacity: 1;
    animation: glitchFlicker 4s infinite;
}

.dialogue-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.dialogue-text-wrapper {
    position: relative;
}

.dialogue-text {
    font-family: 'VT323', monospace;
    font-size: 2rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
}

.dialogue-cursor {
    display: none;
    /* Removed typing animation per user request */
}

/* Navigation Arrows */
.dialogue-nav {
    background: rgba(8, 8, 22, 0.8);
    border: 3px solid var(--color-primary);
    border-radius: 50%;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-primary);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.dialogue-nav:hover {
    background: var(--color-primary);
    color: #ffffff;
    box-shadow: 0 0 25px rgba(117, 117, 242, 0.6);
    transform: scale(1.1);
}

.dialogue-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Dialogue Indicators */
.dialogue-indicators {
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: var(--space-sm);
}

.indicator {
    width: 14px;
    height: 14px;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid var(--color-primary);
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.indicator.active {
    background: var(--color-primary);
    box-shadow: 0 0 12px rgba(117, 117, 242, 0.6);
}

.indicator:hover {
    background: var(--color-primary-light);
}

/* Responsive */
@media (max-width: 900px) {
    .dialogue-wrapper {
        padding-right: 120px;
    }

    .dialogue-character {
        width: 150px;
        height: 200px;
        right: -20px;
    }

    .character-silhouette {
        max-height: 200px;
    }

    .dialogue-text {
        font-size: 1.5rem;
    }
}

@media (max-width: 600px) {
    .dialogue-wrapper {
        padding-right: 0;
        padding-bottom: 60px;
    }

    .rpg-dialogue-box {
        padding: var(--space-lg);
        padding-top: 40px;
        min-height: 150px;
    }

    .dialogue-character {
        position: absolute;
        right: 10px;
        bottom: -40px;
        width: 100px;
        height: 130px;
    }

    .character-silhouette {
        max-height: 130px;
    }

    .dialogue-name-badge {
        left: 15px;
        padding: 6px 16px;
    }

    .dialogue-name {
        font-size: 1.3rem;
    }

    .dialogue-text {
        font-size: 1.3rem;
    }

    .dialogue-nav {
        width: 44px;
        height: 44px;
    }

    .rpg-dialogue-container {
        gap: var(--space-sm);
    }
}

/* ================================
   Stats Section
/* ================================
   Stats Section (Glitch Background Match)
   ================================ */
.stats {
    background: var(--bg-dark);
    padding: var(--space-xl) 0 40px;
    scroll-snap-align: start;
    color: white;
    position: relative;
    z-index: 2;
    overflow: hidden;
    /* For pseudo elements */
}

/* Glitch Background Pseudo-elements for Stats */
.stats::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(117, 117, 242, 0.03) 3px,
            transparent 4px);
    pointer-events: none;
    z-index: 0;
    animation: scanlines 8s linear infinite;
}

.stats::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
    opacity: 0.4;
    animation: noiseMove 0.5s steps(10) infinite;
}

/* Ensure content sits above background */
.stats-header,
.stats-grid {
    position: relative;
    z-index: 2;
}

.stats-header {
    margin-bottom: var(--space-xl);
}

.stats-title {
    font-family: var(--font-primary);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 300;
    letter-spacing: -0.02em;
    color: #ffffff !important;
    /* Force white on dark bg */
    max-width: 100%;
}

.stats-grid {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xl);
}

.stat-item {
    flex: 1;
}

.stat-divider {
    width: 1px;
    height: 100px;
    background: rgba(255, 255, 255, 0.1);
    align-self: center;
}

.stat-number {
    font-size: clamp(2rem, 10vw, 5rem);
    font-weight: 800;
    line-height: 1;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    color: transparent;
}

.stat-suffix {
    font-size: clamp(1.5rem, 6vw, 3rem);
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    color: transparent;
}

.stat-label {
    display: block;
    margin-top: 8px;
    font-size: 0.95rem;
    color: var(--text-secondary);
    font-weight: 400;
}

/* Wrapper to keep number and suffix on same line */
.stat-value {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
}

/* ================================
   CTA Section
   ================================ */
.cta {
    background: var(--bg-light);
    padding: var(--space-3xl) 0;
    scroll-snap-align: start;
}

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

.cta-title {
    font-family: var(--font-primary);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 300;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-md);
    color: var(--text-dark);
}

.cta-text {
    font-size: 1.1rem;
    color: var(--text-dark-secondary);
    margin-bottom: var(--space-xl);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.cta-buttons {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* ================================
   Footer
   ================================ */
.footer {
    background: var(--bg-dark);
    padding-top: 0;
    border-top: none;
    color: #ffffff;
    scroll-snap-align: start;
    position: relative;
    overflow: hidden;
}

/* Footer Glitch Background - matches Contact section */
.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(117, 117, 242, 0.03) 3px,
            transparent 4px);
    pointer-events: none;
    z-index: 1;
    animation: scanlines 8s linear infinite;
}

.footer::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 1;
    opacity: 0.5;
    animation: noiseMove 0.5s steps(10) infinite;
}

.footer-container,
.footer-bottom {
    position: relative;
    z-index: 2;
}

/* Logos Removed in HTML, keeping rule empty just in case */
.footer-logos {
    display: none;
}

.footer-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-3xl) var(--space-lg);
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-3xl);
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

/* Invert Logo to White */
.footer-logo .logo-icon,
.footer-logo .logo-text {
    height: 36px;
    width: auto;
    filter: brightness(0) invert(1);
}

.footer-logo .logo-text {
    height: 20px;
}


.footer-tagline {
    color: #aaaaaa;
    font-size: 0.95rem;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.footer-column h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--space-md);
    color: #ffffff;
}

.footer-column a {
    display: block;
    color: #cccccc;
    font-size: 0.9rem;
    margin-bottom: var(--space-sm);
    transition: var(--transition-fast);
}

.footer-column a:hover {
    color: var(--color-primary);
    transform: translateX(5px);
}

.footer-bottom {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-lg) var(--space-lg);
    border-top: 1px solid #333;
    text-align: center;
    color: #666666;
    font-size: 0.85rem;
}

/* ================================
   Responsive Styles
   ================================ */
@media (max-width: 1024px) {
    .footer-container {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .footer-links {
        grid-template-columns: repeat(3, 1fr);
    }

    .ways-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    .project-side {
        display: none;
    }
}

@media (max-width: 768px) {
    :root {
        --nav-height: 70px;
    }

    .nav-left,
    .nav-right {
        gap: var(--space-md);
    }

    .nav-link {
        font-size: 0.85rem;
    }

    .nav-logo .logo-icon {
        height: 32px;
    }

    .nav-logo .logo-text {
        height: 18px;
    }

    .hero-content {
        padding: 0 var(--space-sm);
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .btn {
        width: 100%;
        max-width: 280px;
    }

    .ways-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        flex-direction: column;
        gap: var(--space-lg);
    }

    .stat-divider {
        width: 100%;
        height: 1px;
    }

    .testimonial-small-grid {
        grid-template-columns: 1fr;
    }

    .footer-links {
        grid-template-columns: repeat(2, 1fr);
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 480px) {

    .nav-left,
    .nav-right {
        gap: var(--space-sm);
    }

    .nav-link {
        display: none;
    }

    .nav-cta {
        display: inline-flex;
    }

    .nav-logo .logo-text {
        display: none;
    }

    .footer-links {
        grid-template-columns: 1fr;
    }

    .stat-item {
        padding: var(--space-md);
    }
}

/* ================================
   RPG Contact Section
   ================================ */
.rpg-contact {
    padding: var(--space-2xl) var(--space-lg);
    background: var(--bg-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 100vh;
    scroll-snap-align: start;
    position: relative;
    overflow: hidden;
}

/* Glitch Background Layer */
.rpg-contact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(117, 117, 242, 0.03) 3px,
            transparent 4px);
    pointer-events: none;
    z-index: 1;
    animation: scanlines 8s linear infinite;
}

/* Glitch Noise Overlay */
.rpg-contact::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 1;
    opacity: 0.5;
    animation: noiseMove 0.5s steps(10) infinite;
}

/* Scanlines animation */
@keyframes scanlines {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 0 100px;
    }
}

/* Noise movement */
@keyframes noiseMove {
    0% {
        transform: translate(0, 0);
    }

    10% {
        transform: translate(-2%, -2%);
    }

    20% {
        transform: translate(2%, 2%);
    }

    30% {
        transform: translate(-1%, 1%);
    }

    40% {
        transform: translate(1%, -1%);
    }

    50% {
        transform: translate(-2%, 2%);
    }

    60% {
        transform: translate(2%, -2%);
    }

    70% {
        transform: translate(0, 1%);
    }

    80% {
        transform: translate(-1%, 0);
    }

    90% {
        transform: translate(1%, 1%);
    }

    100% {
        transform: translate(0, 0);
    }
}

/* Glitch flicker effect on container */
.rpg-container {
    position: relative;
    z-index: 2;
    animation: glitchFlicker 4s ease-in-out infinite;
}

@keyframes glitchFlicker {

    0%,
    100% {
        opacity: 1;
    }

    92% {
        opacity: 1;
    }

    93% {
        opacity: 0.8;
        transform: translateX(2px);
    }

    94% {
        opacity: 1;
        transform: translateX(-2px);
    }

    95% {
        opacity: 0.9;
        transform: translateX(0);
    }

    96% {
        opacity: 1;
    }
}

.rpg-container {
    width: 100%;
    max-width: 1400px;
    display: flex;
    align-items: center;
    gap: var(--space-xl);
}

.rpg-box {
    flex: 1;
    min-width: 300px;
    /* Prevent squishing */
    background: rgba(8, 8, 22, 0.95);
    border: 3px solid var(--color-primary);
    border-radius: 8px;
    padding: var(--space-lg);
    box-shadow:
        0 0 0 4px var(--bg-dark),
        0 0 0 6px var(--color-primary-dark),
        0 8px 32px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
}

.rpg-ascii {
    font-family: 'VT323', monospace;
    white-space: pre;
    color: var(--color-primary);
    font-size: 5px;
    line-height: 1.0;
    letter-spacing: 0.5px;
    opacity: 0.8;
    text-align: center;
    flex-shrink: 0;
    text-shadow: 0 0 5px var(--color-primary-dark);
}

.rpg-text-area {
    min-height: 80px;
    margin-bottom: var(--space-lg);
    font-family: 'VT323', monospace;
    font-size: 1.8rem;
    line-height: 1.2;
    color: var(--text-primary);
    font-weight: 400;
}

.rpg-cursor {
    display: inline-block;
    width: 10px;
    height: 3px;
    background: var(--color-primary);
    margin-left: 4px;
    vertical-align: baseline;
    animation: blink 1s step-end infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.rpg-options {
    display: grid;
    grid-template-columns: 1fr;
    /* Stack vertically */
    gap: var(--space-sm);
    row-gap: var(--space-xs);
}

.rpg-option {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    text-align: left;
    cursor: pointer;
    font-family: 'VT323', monospace;
    padding: var(--space-xs) var(--space-sm);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
}

.rpg-option:hover {
    color: var(--color-primary-light);
    text-shadow: 0 0 8px rgba(117, 117, 242, 0.6);
}

.rpg-selector {
    opacity: 0;
    margin-right: 8px;
    color: var(--color-primary);
    transition: opacity 0.2s ease;
}

.rpg-option:hover .rpg-selector {
    opacity: 1;
}

/* Form Styles */
.rpg-form {
    display: none;
    flex-direction: column;
    gap: var(--space-md);
    margin-top: var(--space-md);
}

.rpg-form.active {
    display: flex;
    animation: fadeIn 0.3s ease;
}

.rpg-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    border-bottom: 2px solid var(--color-primary-dark);
    color: var(--text-primary);
    padding: var(--space-md);
    font-family: 'VT323', monospace;
    font-size: 1.5rem;
    outline: none;
    transition: all 0.2s;
    border-radius: 4px 4px 0 0;
}

.rpg-input:focus {
    border-color: var(--color-primary);
    background: rgba(117, 117, 242, 0.1);
}

.form-actions {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-sm);
}

.rpg-submit,
.rpg-back {
    background: transparent;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    padding: var(--space-sm) var(--space-xl);
    cursor: pointer;
    font-weight: 600;
    font-family: 'VT323', monospace;
    font-size: 1.2rem;
    text-transform: uppercase;
    transition: all 0.2s;
}

.rpg-submit:hover,
.rpg-back:hover {
    background: var(--color-primary);
    color: white;
    box-shadow: 0 0 10px var(--color-primary-dark);
}

@media (max-width: 1024px) {
    .rpg-container {
        flex-direction: column;
    }

    .rpg-ascii {
        display: none;
    }

    .rpg-options {
        grid-template-columns: 1fr;
    }

    .rpg-text-area {
        font-size: 1.2rem;
    }
}

@media (max-width: 768px) {
    .rpg-options {
        grid-template-columns: 1fr;
    }

    .rpg-text-area {
        font-size: 2rem;
    }
}

/* Nav RPG Mode */
.nav-rpg-mode {
    background: rgba(8, 8, 22, 0.95) !important;
    transition: background 0.3s ease;
}

.nav-rpg-mode .nav-link,
.nav-rpg-mode .logo-text {
    font-family: 'VT323', monospace !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff !important;
}

/* Hide default logo in RPG mode */
.nav-rpg-mode .logo-icon,
.nav-rpg-mode .logo-text {
    display: none !important;
}

/* Default state for RPG text */
.logo-rpg-text {
    display: none;
    font-family: 'VT323', monospace;
    font-weight: 700;
    font-size: 2rem;
    color: #fff;
    letter-spacing: 2px;
}

/* Show RPG text in RPG mode */
.nav-rpg-mode .logo-rpg-text {
    display: block !important;
}

.nav-rpg-mode .nav-cta {
    font-family: 'VT323', monospace !important;
    background: transparent !important;
    border: 2px solid white !important;
    color: white !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    text-transform: uppercase;
    padding: 0.5rem 1.5rem !important;
}

.nav-rpg-mode .nav-cta:hover {
    background: white !important;
    color: black !important;
    box-shadow: 0 0 10px white !important;
}

/* ================================
   Consultation CTA Section
   ================================ */
.consultation-cta {
    background: var(--bg-light);
    padding: var(--space-3xl) var(--space-lg);
    display: flex;
    justify-content: center;
    scroll-snap-align: start;
    position: relative;
    /* For transition gradient */
}

/* Smooth Transition: Consultation (Light) -> Contact (Dark) */
.consultation-cta::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to bottom,
            rgba(8, 8, 22, 0) 0%,
            rgba(8, 8, 22, 0) 40%,
            rgba(8, 8, 22, 0.05) 55%,
            rgba(8, 8, 22, 0.2) 70%,
            rgba(8, 8, 22, 0.5) 85%,
            var(--bg-dark) 100%);
    pointer-events: none;
    z-index: 2;
}

.cta-card-container {
    width: 100%;
    max-width: 1200px;
    background: #080816;
    /* Dark Brand Background */
    border: 1px solid rgba(117, 117, 242, 0.3);
    /* Subtle Purple Border */
    border-radius: 24px;
    padding: 80px 40px;
    text-align: center;
    color: white;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

/* Subtle Glow Effect */
.cta-card-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
    opacity: 0.5;
}

.cta-heading {
    font-family: 'Inter', sans-serif;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 300;
    /* Thin Style */
    margin: 0;
    line-height: 1.2;
    color: white;
    text-shadow: 0 0 15px rgba(117, 117, 242, 0.3);
    /* Slightly softer glow for thin text */
}

.cta-subheading {
    font-size: 1.1rem;
    max-width: 650px;
    margin: 0 auto;
    color: #a0a0b0;
    line-height: 1.6;
}

.cta-button-sched {
    margin-top: 20px;
    background: #3C2415;
    color: #F5ECD7;
    padding: 18px 36px;
    border-radius: 6px;
    font-family: var(--font-primary);
    font-weight: 600;
    text-decoration: none;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(60, 36, 21, 0.3);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border: 2px solid #5C3A1E;
    display: inline-block;
}

.cta-button-sched:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(60, 36, 21, 0.4);
    background: #5C3A1E;
    color: #ffffff;
}

@media (max-width: 768px) {
    .cta-card-container {
        padding: 60px 24px;
        border-radius: 16px;
    }
}

/* ================================
   Philosophy Section
   ================================ */
.philosophy-container {
    text-align: center;
    max-width: 900px;
    margin: var(--space-xl) auto 0;
    padding: 0 var(--space-md) var(--space-md);
    animation: fadeInUp 1s ease-out;
}

.philosophy-title {
    font-family: var(--font-primary);
    font-weight: 600;
    /* Bolder to pop out as a heading */
    font-size: clamp(2rem, 4vw, 3rem);
    color: var(--text-dark);
    margin-bottom: var(--space-lg);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.philosophy-text {
    font-size: 1.15rem;
    /* Standard readable size */
    line-height: 1.8;
    color: var(--text-dark-secondary);
    font-weight: 400;
    max-width: 800px;
    margin: 0 auto;
}

/* Make the highlight span match the philosophy text exactly */
.philosophy-highlight {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    font-weight: inherit;
}

/* ================================
   Profile Banner (Scroll Expansion)
   ================================ */
.banner-section {
    padding: 30px 0 0 !important;
    /* Closer to text above */
    overflow: hidden;
}

.banner-expansion-wrapper {
    width: 90%;
    /* Start boxed */
    max-width: 1400px;
    margin: 0 auto;
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    transform-origin: center bottom;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);

    /* JS Triggered Smooth Transition (Dept Agency Style) */
    transition: all 1.5s cubic-bezier(0.16, 1, 0.3, 1);
    /* Elegant easing */
    will-change: width, border-radius;
}

/* Glitch Overlays for Banner (Match Stats/Projects) */
.banner-expansion-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(117, 117, 242, 0.03) 3px,
            transparent 4px);
    pointer-events: none;
    z-index: 2;
    /* On top of image and gradient */
    animation: scanlines 8s linear infinite;
}

.banner-expansion-wrapper::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 2;
    opacity: 0.4;
    animation: noiseMove 0.5s steps(10) infinite;
}

.banner-expansion-wrapper.expanded {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
}

.banner-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    min-height: 400px;
    aspect-ratio: 2800 / 400;
}

.banner-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 300px;
    /* Taller for smoother falloff */
    /* Premium Non-Linear 'Scrim' Gradient for smoothness */
    background: linear-gradient(to top,
            var(--bg-dark) 0%,
            rgba(8, 8, 22, 0.987) 8.1%,
            rgba(8, 8, 22, 0.951) 15.5%,
            rgba(8, 8, 22, 0.896) 22.5%,
            rgba(8, 8, 22, 0.825) 29%,
            rgba(8, 8, 22, 0.741) 35.3%,
            rgba(8, 8, 22, 0.648) 41.2%,
            rgba(8, 8, 22, 0.55) 47.1%,
            rgba(8, 8, 22, 0.45) 52.9%,
            rgba(8, 8, 22, 0.352) 58.8%,
            rgba(8, 8, 22, 0.259) 64.7%,
            rgba(8, 8, 22, 0.175) 71%,
            rgba(8, 8, 22, 0.104) 77.5%,
            rgba(8, 8, 22, 0.049) 84.5%,
            rgba(8, 8, 22, 0.013) 91.9%,
            transparent 100%);
    pointer-events: none;
}



/* Scroll Reveal Utility */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease, transform 1s cubic-bezier(0.2, 1, 0.3, 1);
    will-change: opacity, transform;
}

/* ================================
   Expertise Section - Knight Image Gradient
   ================================ */
.character-panel {
    position: relative;
    display: block;
    width: fit-content;
    margin: 0 auto;
    border-radius: 300px 300px 0 0;
    /* Arch shape */
    overflow: hidden;
    /* Clip gradient */
}

.character-panel img {
    display: block;
    width: 100%;
    height: auto;
}

.character-panel::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    /* Soft fade height */
    /* Scrim Gradient to Light Background */
    background: linear-gradient(to bottom,
            rgba(245, 245, 247, 0) 0%,
            rgba(245, 245, 247, 0.013) 8.1%,
            rgba(245, 245, 247, 0.049) 15.5%,
            rgba(245, 245, 247, 0.104) 22.5%,
            rgba(245, 245, 247, 0.175) 29%,
            rgba(245, 245, 247, 0.259) 35.3%,
            rgba(245, 245, 247, 0.352) 41.2%,
            rgba(245, 245, 247, 0.45) 47.1%,
            rgba(245, 245, 247, 0.55) 52.9%,
            rgba(245, 245, 247, 0.648) 58.8%,
            rgba(245, 245, 247, 0.741) 64.7%,
            rgba(245, 245, 247, 0.825) 71%,
            rgba(245, 245, 247, 0.896) 77.5%,
            rgba(245, 245, 247, 0.951) 84.5%,
            rgba(245, 245, 247, 0.987) 91.9%,
            var(--bg-light) 100%);
    pointer-events: none;
    z-index: 2;
}

.reveal-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ================================
   Scroll Snap Control Overrides
   ================================ */

/* Disable snapping globally for all major sections */
section,
.hero,
.inventory-section,
.stats,
.testimonials,
.consultation-cta,
.banner-section,
footer {
    scroll-snap-align: none !important;
}

/* "One at the end of Projects page" - Snap bottom of projects to viewport bottom */
#projects {
    scroll-snap-align: end !important;
}

/* "One that centers the Contacts page" - Snap center of contact section to viewport */
#contact {
    scroll-snap-align: center !important;
}

/* ================================
   Typography Overrides (Feedback Fixes)
   ================================ */
/* Make section titles BLACK but keep THIN look as requested */
.section-title,
.philosophy-title,
.section-header.split-header .section-title {
    color: #000000 !important;
    font-weight: 300 !important;
    /* Revert to thin */
    opacity: 1 !important;
    /* Removed uppercase transform */
}

/* ================================
   Projects Glitch Updates (User Request)
   ================================ */

/* Apply Dark Glitch Background to Projects */
#projects {
    background: var(--bg-dark);
    position: relative;
    overflow: hidden;
    /* Ensure text is white on dark background */
    color: white;
}

/* Override title color for dark background */
#projects .section-title {
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(117, 117, 242, 0.5);
    /* Subtle glow */
    /* Add occasional glitch to Title */
    animation: glitchFlicker 5s infinite;
}

/* Glitch Background Pseudo-elements (duplicated from .rpg-contact for safety) */
#projects::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(117, 117, 242, 0.03) 3px,
            transparent 4px);
    pointer-events: none;
    z-index: 0;
    animation: scanlines 8s linear infinite;
}

#projects::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
    opacity: 0.4;
    animation: noiseMove 0.5s steps(10) infinite;
}

/* Push content above overlays */
#projects .section-container,
#projects .character-select {
    position: relative;
    z-index: 2;
}

/* Glitch Animation for Stats Numbers & Plus Signs */
.stat-number,
.stat-suffix {
    animation: glitchFlicker 3s infinite alternate-reverse;
    /* Slightly different timing for variation */
    display: inline-block;
    /* Required for transform animation */
}

/* ================================
   Section Title Color Override
   ================================ */
/* Ensure "Our Expertise" and "Our Philosophy" use default font but stay black */
#services .section-title,
.philosophy-title {
    /* Use default font (same as Projects) */
    /* Just ensure color is black, not blue or white */
    color: #000000 !important;
    /* Make headings bolder to pop out */
    font-weight: 600 !important;
    /* Make all three the same size for uniformity */
    font-size: clamp(2rem, 4vw, 3rem) !important;
    /* Don't transform to uppercase */
    text-transform: none !important;
}

/* Force Testimonials Title Blue (Match Projects) */
#testimonials .section-title {
    color: var(--color-primary-light) !important;
    text-shadow: 0 0 15px rgba(117, 117, 242, 0.8), 0 0 30px rgba(117, 117, 242, 0.4);
}

/* ================================
   Testimonials Glitch Background
   ================================ */
.testimonials::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(117, 117, 242, 0.03) 3px,
            transparent 4px);
    pointer-events: none;
    z-index: 0;
    animation: scanlines 8s linear infinite;
}

.testimonials::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
    opacity: 0.4;
    animation: noiseMove 0.5s steps(10) infinite;
}

/* Ensure content is above background */
.testimonials .section-container {
    position: relative;
    z-index: 2;
}

/* ================================
   Navbar Paper Mode (User Request)
   ================================ */
.nav-paper-mode .nav-cta {
    background: #3C2415 !important;
    color: #F5ECD7 !important;
    border: 2px solid #5C3A1E !important;
    box-shadow: 0 4px 12px rgba(60, 36, 21, 0.3) !important;
    font-family: var(--font-primary) !important;
    /* Ensure it stays sans-serif/primary unless RPG mode overrides it? */
    /* Wait, RPG mode uses VT323. Paper mode should probably match the paper button font (Primary). */
}

.nav-paper-mode .nav-cta:hover {
    background: #5C3A1E !important;
    color: #ffffff !important;
}

/* Navbar Logo - Brown in Paper Mode */
.nav-paper-mode .nav-logo img,
.nav-paper-mode .nav-logo .logo-icon,
.nav-paper-mode .nav-logo .logo-text {
    /* Approx filter for #3C2415 (Dark Brown) from White base */
    /* Notes: brightness(0) = black. invert(1) = white. */
    /* Target color: #3C2415 (HSL: 26, 45%, 19%) */
    /* Sepia(1) gives tan. brightness(0.2) darkens. saturate(2) boosts color. */
    filter: brightness(0.3) sepia(1) saturate(3) hue-rotate(-25deg) !important;
}

/* Knight Background Logo - Brown/Gold Gradient */
.knight-bg-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140%;
    /* Larger than knight */
    height: 140%;
    z-index: -1;
    opacity: 0.15;
    /* Subtle */
    pointer-events: none;

    /* Colorize SVG using mask */
    mask-image: url('assets/Logo.svg');
    -webkit-mask-image: url('assets/Logo.svg');
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;

    background: linear-gradient(to bottom, #3C2415, #C9A96E);
}

/* Hide original IMG inside, we use the div background */
.knight-bg-logo img {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Inventory CTA (Text Link Style) */
.inventory-cta {
    margin-top: 5rem;
    text-align: right;
    width: 100%;
}

.hex-link-styled {
    display: inline-block;
    padding: 10px 0;
    /* Remove horizontal padding for pure text look */
    font-size: 1.2rem;
    font-weight: 600;
    font-family: var(--font-primary);
    color: #3C2415;
    /* Brown to match paper aesthetic */
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform-origin: right center;
}

.hex-link-styled:hover {
    transform: scale(1.15);
    /* Pop */
    color: #5C3A1E;
    /* Lighter Brown */
    text-shadow: 0 0 15px rgba(92, 58, 30, 0.4);
    /* Brown/Gold Glow */
    cursor: pointer;
}

/* ================================
   Services Page - Real Players Design
   ================================ */
.services-overview-page {
    background-color: #EFEDE8;
    /* Warmer, rougher paper base */
    font-family: var(--font-primary);
    color: #3C2415;
    overflow-x: hidden;
    min-height: 100vh;
}

body.services-overview-page .paper-texture {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    background-image: url('assets/background-texture-seamless-strange-medieval-parch_upscayl_4x_upscayl-standard-4x.png');
    background-repeat: repeat;
    background-size: 500px;
    opacity: 0.05;
    /* Reduced texture visibility significantly */
    mix-blend-mode: multiply;
}

/* Navbar Fix - Fixed at top */
.services-overview-page .navbar {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    margin-bottom: 0;
    padding-top: 20px;
    padding-bottom: 20px;
    background: #EFEDE8 !important;
    /* Force Beige Background */
    box-shadow: 0 4px 20px rgba(60, 36, 21, 0.05);
}

/* Force Brown Theme on Navbar Elements */
.services-overview-page .navbar .logo-text,
.services-overview-page .navbar .logo-icon {
    filter: brightness(0) saturate(100%) invert(13%) sepia(30%) saturate(2222%) hue-rotate(345deg) brightness(98%) contrast(92%) !important;
}

/* Fix Navbar Button Color - White Text on Brown */
.services-overview-page .navbar .nav-cta,
.services-overview-page .navbar .btn-primary {
    background-color: #3C2415 !important;
    color: #ffffff !important;
    border: none !important;
}

.navbar.nav-paper-mode .nav-cta,
.navbar.nav-paper-mode .btn-primary {
    background-color: #3C2415 !important;
    color: #ffffff !important;
    border: none !important;
}

.navbar.nav-paper-mode .nav-cta:hover,
.navbar.nav-paper-mode .btn-primary:hover {
    background-color: #5C3A1E !important;
    color: #ffffff !important;
    transform: translateY(-2px);
}

.services-overview-page .navbar .nav-link {
    color: #3C2415 !important;
}

/* Adjust container to prevent overlap */
.services-overview-page .container {
    padding-top: 140px !important;
}

.services-container {
    max-width: 1200px;
    margin: 0 auto 20px;
    padding: 0 20px;
    text-align: center;
}

.services-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Footer Fix - Transparent & No Border */
.services-overview-page .footer,
.services-overview-page .footer-light,
.services-overview-page .footer-container,
.services-overview-page .footer-bottom {
    background: transparent !important;
    background-color: transparent !important;
    border-top: none !important;
    /* Removed line */
}

/* Force HTML/Body background */
html:has(.services-overview-page),
body.services-overview-page {
    background-color: #EFEDE8 !important;
}

/* =========================================
   New Sticky Scroll Services Layout
   ========================================= */

/* GLOBAL FIX FOR STICKY SCROLL */
html,
body,
.services-overview-page,
main {
    overflow-x: clip;
    /* Avoid scrollbars but don't break sticky */
    overflow-y: visible !important;
    /* Critical for sticky */
}

/* Ensure container doesn't clip */
.services-overview-page .container {
    overflow: visible !important;
}

/* Main Container Layout */
.sticky-scroll-layout {
    display: flex;
    flex-direction: column;
    gap: 60px;
    position: relative;
    /* Ensure height is tracked for sticky */
    height: 100%;
}

@media (min-width: 900px) {
    .sticky-scroll-layout {
        flex-direction: row;
        align-items: flex-start;
        gap: 80px;
    }
}

/* Sidebar Styles */
.services-sidebar {
    width: 100%;
    z-index: 10;
    padding-bottom: 20px;
}

@media (min-width: 900px) {
    .services-sidebar {
        position: -webkit-sticky;
        position: sticky;
        top: 140px;
        /* Navbar Offset */
        width: 250px;
        flex-shrink: 0;
        max-height: calc(100vh - 140px);
        overflow-y: auto;
        /* Scroll sidebar if too tall */
        padding-right: 20px;
    }
}

.sidebar-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #5C3A1E;
    margin-bottom: 25px;
    opacity: 0.6;
    font-weight: 700;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    border-left: 2px solid rgba(60, 36, 21, 0.1);
}

.sidebar-link {
    display: block;
    padding: 12px 0 12px 20px;
    font-size: 1rem;
    color: rgba(60, 36, 21, 0.5);
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    font-weight: 500;
}

.sidebar-link:hover {
    color: #3C2415;
}

.sidebar-link.active {
    color: #C05621;
    font-weight: 700;
}

.sidebar-link.active::before {
    content: '';
    position: absolute;
    left: -2px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #C05621;
}

/* Content Flow Styles */
.services-content-flow {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 120px;
    /* Fixed gap ensures precise spacing regardless of 4K screen height */
    min-width: 0;
    /* Flexbox fix */
}

.service-detail-block {
    scroll-margin-top: 150px;
    min-height: auto;
    /* Prevent aggressive vertical stretching on huge displays */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Service Block Internal Grid */
.service-block-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

@media (min-width: 900px) {
    .service-block-grid {
        grid-template-columns: 1.2fr 1fr;
        /* Text larger than visual */
        gap: 60px;
        align-items: center;
    }
}

/* Text Content Styling */
.service-label {
    display: inline-block;
    font-size: 0.9rem;
    color: #C05621 !important;
    /* Force Rust */
    margin-bottom: 15px;
    font-family: monospace;
    /* Technical feel */
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

.service-tagline {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    line-height: 1.1;
    color: #3C2415;
    margin-bottom: 25px;
}

.service-body {
    font-size: 1.1rem;
    line-height: 1.7;
    color: rgba(60, 36, 21, 0.9);
    margin-bottom: 30px;
}

.good-for-box {
    background: rgba(192, 86, 33, 0.08);
    border-left: 4px solid #C05621 !important;
    /* Force Rust */
    padding: 20px;
    margin-bottom: 40px;
    border-radius: 0 8px 8px 0;
}

.good-for-box strong {
    display: block;
    color: #3C2415;
    margin-bottom: 5px;
    font-size: 1rem;
}

.good-for-box p {
    margin: 0;
    font-size: 0.95rem;
    color: #5C3A1E;
    font-style: italic;
}

/* Deliverables List */
.deliverables-section h4 {
    font-size: 1rem;
    text-transform: uppercase;
    color: #3C2415;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.deliverables-list {
    list-style: none;
    padding: 0;
    column-count: 1;
}

@media (min-width: 1200px) {
    .deliverables-list {
        column-count: 2;
        column-gap: 30px;
    }
}

.deliverables-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.5;
    display: flex;
    align-items: baseline;
}

.deliverables-list li::before {
    content: '•';
    color: #C05621 !important;
    /* Force Rust */
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* =========================================
   Visual Images (Right Column)
   ========================================= */
.service-visual-content {
    background: #f0f0f0;
    /* Fallback placeholder color */
    border-radius: 16px;
    aspect-ratio: 1/1;
    /* Square visuals */
    overflow: hidden;
    position: relative;
    box-shadow: 0 15px 40px rgba(60, 36, 21, 0.15);
    /* Soft shadow */
    transition: all 0.3s ease;
}

.service-visual-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.service-visual-content:hover img {
    transform: scale(1.05);
}

/* Header Clean up */
.centered-header {
    text-align: center;
}

.sub-headline {
    font-size: 1.2rem;
    color: #5C3A1E;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 600;
}

/* Header Styles */
.centered-header {
    text-align: center;
}

.big-headline {
    font-size: clamp(3rem, 6vw, 5rem);
    letter-spacing: -2px;
    line-height: 1;
    color: #3C2415;
    margin-bottom: 15px;
}

.sub-headline {
    font-size: 1.2rem;
    color: #5C3A1E;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 600;
}

/* Force Brown Logo */
.services-overview-page .navbar .logo-text,
.services-overview-page .navbar .logo-icon {
    /* Brown Filter */
    filter: brightness(0) saturate(100%) invert(13%) sepia(30%) saturate(2222%) hue-rotate(345deg) brightness(98%) contrast(92%) !important;
}

/* Force Brown Button */
.services-overview-page .navbar .nav-cta,
.services-overview-page .navbar .btn-primary {
    background-color: #3C2415 !important;
    color: #fff !important;
    border: none !important;
}

.services-overview-page .navbar .nav-link {
    color: #3C2415 !important;
}

/* Intro Section */
.services-intro-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: 100px;
    align-items: center;
}

@media (min-width: 900px) {
    .services-intro-grid {
        grid-template-columns: 1.2fr 0.8fr;
    }
}

.services-new-title {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5vw, 4rem);
    color: #3C2415;
    line-height: 1.1;
    margin-bottom: 20px;
}

.intro-blurb {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #5C3A1E;
    max-width: 600px;
}

/* Intro Animation - Community Map */
.intro-visual {
    height: 300px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.community-map-anim {
    width: 300px;
    height: 300px;
    position: relative;
}

.map-node {
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(60, 36, 21, 0.15);
    /* Brown shadow */
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: floatNode 6s ease-in-out infinite;
}

.map-node img {
    width: 24px;
    height: 24px;
    /* Apply Dark Brown Filter to match theme */
    filter: brightness(0) saturate(100%) invert(13%) sepia(30%) saturate(2222%) hue-rotate(345deg) brightness(98%) contrast(92%);
}

.node-reddit {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.node-discord {
    top: 10%;
    right: 20%;
    animation-delay: 1s;
}

.node-youtube {
    bottom: 20%;
    left: 20%;
    animation-delay: 2s;
}

.node-tiktok {
    bottom: 30%;
    right: 10%;
    animation-delay: 3s;
}

.map-pulse-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    border: 1px solid rgba(60, 36, 21, 0.2);
    /* Brown ring */
    border-radius: 50%;
    animation: mapPulse 4s linear infinite;
}

@keyframes floatNode {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

@keyframes mapPulse {
    0% {
        width: 50px;
        height: 50px;
        opacity: 1;
        border-color: rgba(60, 36, 21, 0.5);
    }

    100% {
        width: 350px;
        height: 350px;
        opacity: 0;
        border-color: rgba(60, 36, 21, 0);
    }
}

/* Services Stack */
.services-stack {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.service-wide-card {
    background: rgba(255, 255, 255, 0.7);
    /* Semi-transparent to let texture show */
    backdrop-filter: blur(5px);
    border: 1px solid rgba(60, 36, 21, 0.08);
    border-radius: 16px;
    padding: 40px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

@media (min-width: 900px) {
    .service-wide-card {
        grid-template-columns: 1fr 1fr;
        /* 50/50 Grid */
        padding: 60px;
        gap: 80px;
        align-items: center;
    }

    /* Alternate Visual side if desired, but user said 'left for copy, right for icon' so keeping standard */
}

.service-wide-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
    border-color: rgba(79, 70, 229, 0.2);
}

/* Typography */
.service-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #4F46E5;
    /* Brand Blue/Purple */
    font-weight: 700;
    margin-bottom: 15px;
}

.service-tagline {
    font-family: var(--font-heading);
    font-size: 2rem;
    line-height: 1.2;
    color: #3C2415;
    margin-bottom: 20px;
}

.service-body {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #5C3A1E;
    margin-bottom: 30px;
}

.good-for-box {
    background: rgba(60, 36, 21, 0.03);
    border-left: 3px solid #4F46E5;
    padding: 20px;
    border-radius: 0 8px 8px 0;
    margin-bottom: 30px;
}

.good-for-box strong {
    display: block;
    color: #3C2415;
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.good-for-box p {
    margin: 0;
    font-size: 1rem;
    color: #5C3A1E;
}

.deliverables-list h4 {
    font-size: 0.9rem;
    text-transform: uppercase;
    color: #3C2415;
    margin-bottom: 15px;
}

.deliverables-list ul {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.deliverables-list li {
    font-size: 0.95rem;
    color: #5C3A1E;
    padding-left: 20px;
    position: relative;
}

.deliverables-list li::before {
    content: '•';
    color: #4F46E5;
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* Visual Columns */
.service-visual-col {
    height: 300px;
    background: #fafafa;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* --- ANIMATIONS per Service --- */

/* 1. Reddit Thread Stack */
.reddit-thread-stack {
    width: 200px;
    height: 240px;
    position: relative;
    overflow: hidden;
}

.thread-box {
    width: 100%;
    height: 50px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    position: absolute;
    bottom: -60px;
    left: 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    animation: threadScroll 6s linear infinite;
}

.thread-box::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 15px;
    width: 30px;
    height: 4px;
    background: #ddd;
    border-radius: 2px;
}

.thread-box::after {
    content: '';
    position: absolute;
    left: 10px;
    top: 25px;
    width: 100px;
    height: 4px;
    background: #eee;
    border-radius: 2px;
}

.thread-box:nth-child(1) {
    animation-delay: 0s;
}

.thread-box:nth-child(2) {
    animation-delay: 2s;
}

.thread-box:nth-child(3) {
    animation-delay: 4s;
}

.thread-box.active {
    border-color: #4F46E5;
    background: #EEF2FF;
}

@keyframes threadScroll {
    0% {
        transform: translateY(0);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translateY(-300px);
        opacity: 0;
    }
}

/* 2. server-room-anim */
.server-room-anim {
    width: 200px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.server-channel {
    width: 100%;
    height: 40px;
    background: #fff;
    border-radius: 6px;
    position: relative;
    border: 1px solid #eee;
}

.server-channel::before {
    content: '#';
    color: #ccc;
    position: absolute;
    left: 10px;
    top: 10px;
    font-weight: bold;
}

.server-channel.active {
    border-color: #4F46E5;
    background: #fff;
}

.msg-bubble {
    position: absolute;
    right: -20px;
    top: -10px;
    width: 30px;
    height: 20px;
    background: #4F46E5;
    border-radius: 10px;
    animation: popIn 2s infinite;
}

.member-dots {
    display: flex;
    gap: 5px;
    margin-top: 10px;
    padding-left: 10px;
}

.member-dots span {
    width: 8px;
    height: 8px;
    background: #10B981;
    border-radius: 50%;
    animation: pulseDot 1.5s infinite;
}

.member-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.member-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes popIn {

    0%,
    100% {
        transform: scale(0);
    }

    50% {
        transform: scale(1);
    }
}

@keyframes pulseDot {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

/* 3. YouTube Video Grid */
.video-grid-anim {
    display: flex;
    gap: 10px;
    align-items: center;
}

.vid-thumb {
    width: 60px;
    height: 90px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
    transition: 0.3s;
}

.vid-thumb.main-vid {
    width: 100px;
    height: 140px;
    border-color: #4F46E5;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(79, 70, 229, 0.1);
    animation: gentlePulse 3s infinite;
}

.play-btn {
    width: 30px;
    height: 20px;
    background: #ff0000;
    border-radius: 4px;
    position: relative;
}

.play-btn::after {
    content: '';
    position: absolute;
    left: 12px;
    top: 5px;
    border-left: 8px solid #fff;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

@keyframes gentlePulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.03);
    }
}

/* 4. TikTok Phone */
.phone-frame-anim {
    width: 140px;
    height: 240px;
    background: #000;
    border-radius: 20px;
    padding: 5px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    animation: phoneBounce 4s ease-in-out infinite;
}

.phone-screen {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(45deg, #f3f3f3, #fff);
}

.tiktok-ui-right {
    position: absolute;
    right: 5px;
    bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.tiktok-ui-right::before,
.tiktok-ui-right::after,
.tiktok-ui-right div {
    content: '';
    width: 20px;
    height: 20px;
    background: #eee;
    border-radius: 50%;
}

.tiktok-ui-bottom {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 80px;
    height: 10px;
    background: #eee;
    border-radius: 5px;
}

@keyframes phoneBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

/* 5. Constellation */
.constellation-anim {
    width: 100%;
    height: 100%;
    border-radius: 12px;
}

.star {
    animation: starFade 2s infinite alternate;
}

@keyframes starFade {
    from {
        opacity: 0.3;
    }

    to {
        opacity: 0.8;
    }
}

/* 6. Content Stack */
.content-stack-anim {
    position: relative;
    width: 150px;
    height: 200px;
}

.stack-card {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: 0.5s;
}

.card-1 {
    transform: rotate(-5deg);
    z-index: 1;
    animation: shuffle1 4s infinite;
}

.card-2 {
    transform: rotate(5deg);
    z-index: 2;
    animation: shuffle2 4s infinite;
}

.card-3 {
    transform: rotate(0deg);
    z-index: 3;
    animation: shuffle3 4s infinite;
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 10px;
}

.card-3::before,
.card-3::after {
    content: '';
    width: 100%;
    height: 10px;
    background: #eee;
    border-radius: 2px;
}

@keyframes shuffle1 {
    0% {
        transform: rotate(-5deg);
    }

    50% {
        transform: rotate(-10deg) translateX(-5px);
    }

    100% {
        transform: rotate(-5deg);
    }
}

@keyframes shuffle2 {
    0% {
        transform: rotate(5deg);
    }

    50% {
        transform: rotate(10deg) translateX(5px);
    }

    100% {
        transform: rotate(5deg);
    }
}

@keyframes shuffle3 {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: translateY(-2px);
    }

    100% {
        transform: rotate(0deg);
    }
}

/* Nav Paper Mode Overrides */
.nav-paper-mode .nav-link {
    color: #3C2415 !important;
    font-family: var(--font-primary) !important;
}

.nav-paper-mode .nav-link:hover,
.nav-paper-mode .nav-link.active {
    color: #5C3A1E !important;
    text-decoration: underline !important;
}

/* Navbar Logo Force Brown - Corrected Filter (Less Red) */
.nav-paper-mode .logo-text,
.nav-paper-mode .logo-icon {
    /* Corrected filter for #3C2415 */
    filter: brightness(0) saturate(100%) invert(13%) sepia(30%) saturate(2222%) hue-rotate(345deg) brightness(98%) contrast(92%) !important;
}

/* Navbar Button Force Brown */
.nav-paper-mode .nav-cta,
.nav-paper-mode .btn-primary {
    background-color: #3C2415 !important;
    color: #fff !important;
    border: none !important;
    box-shadow: none !important;
}

.nav-paper-mode .nav-cta:hover {
    background-color: #5C3A1E !important;
}

/* CTA Brown Button (Bottom) */
.cta-brown {
    background-color: #3C2415 !important;
    color: #fff !important;
    border: none !important;
    padding: 12px 30px !important;
    border-radius: 4px !important;
}

.cta-brown:hover {
    background-color: #5C3A1E !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(60, 36, 21, 0.3);
}

/* Footer Light Theme */
.footer-light {
    background: transparent !important;
    color: #3C2415;
    border-top: none;
    padding: 0;
    /* Zero padding */
    margin-top: 0;
    /* Zero margin */
    font-family: var(--font-primary);
}

.footer-light .footer-container {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    align-items: start;
}

.footer-light .footer-brand {
    max-width: 250px;
}

.footer-light .footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

/* Apply Strong Brown Filter to Footer Logo as well */
.footer-light .logo-icon,
.footer-light .logo-text {
    /* Corrected filter for #3C2415 */
    filter: brightness(0) saturate(100%) invert(13%) sepia(30%) saturate(2222%) hue-rotate(345deg) brightness(98%) contrast(92%) !important;
}

.footer-light .footer-tagline {
    font-size: 0.8rem;
    color: #5C3A1E;
    margin: 0;
}

.footer-light .footer-links {
    display: flex;
    gap: 40px;
}

.footer-light .footer-column h4 {
    font-family: var(--font-heading);
    font-size: 1rem;
    margin-bottom: 10px;
    color: #3C2415;
    text-transform: uppercase;
}

.footer-light .footer-column a {
    display: block;
    margin-bottom: 6px;
    color: #5C3A1E;
    text-decoration: none;
    font-size: 0.9rem;
}

.footer-light .footer-column a:hover {
    color: #8B4513;
    text-decoration: underline;
}

.footer-light .footer-bottom {
    border-top: none;
    margin-top: 10px;
    padding-top: 0;
    padding-bottom: 20px;
    /* Slight padding at very bottom */
    text-align: center;
    color: #5C3A1E;
    font-size: 0.8rem;
}


/* ================================
   About Page - Retro TV
   ================================ */
.about-page {
    background: #111;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'VT323', monospace;
}

.tv-container {
    width: 90vw;
    height: 80vh;
    max-width: 1200px;
    background: #2b2b2b;
    border-radius: 30px;
    padding: 20px;
    box-shadow:
        inset 0 0 20px rgba(0, 0, 0, 0.8),
        0 0 50px rgba(0, 0, 0, 0.5);
    position: relative;
    border: 4px solid #444;
}

.tv-frame {
    width: 100%;
    height: 100%;
    background: #000;
    border-radius: 20px;
    /* CRT Screen Curvature */
    position: relative;
    overflow: hidden;
    padding: 40px;
    display: flex;
    flex-direction: column;
}

.tv-screen {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
    overflow-y: auto;
    /* Allow internal scrolling if content overflows */
    padding-right: 10px;
}

/* Scanlines & Glow */
.scanlines-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(0deg,
            rgba(0, 0, 0, 0.1),
            rgba(0, 0, 0, 0.1) 1px,
            transparent 1px,
            transparent 2px);
    pointer-events: none;
    z-index: 10;
}

.crt-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.4) 100%);
    pointer-events: none;
    z-index: 11;
}

/* Content Styles */
.retro-header {
    text-align: center;
    margin-bottom: 40px;
    border-bottom: 2px solid #0f0;
    padding-bottom: 20px;
}

.retro-glitch-title {
    color: #0f0;
    /* Terminal Green */
    font-size: 4rem;
    text-shadow: 0 0 10px #0f0;
    margin: 0;
    animation: textGlitch 3s infinite;
}

.system-status {
    color: #0f0;
    font-size: 1.5rem;
    margin-top: 10px;
}

.status-ok {
    color: #fff;
    font-weight: bold;
    animation: blink 1s infinite;
}

.company-bio-box {
    color: #ccc;
    font-size: 1.5rem;
    margin-bottom: 50px;
    line-height: 1.4;
    text-align: center;
}

/* Employee Grid */
.employee-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.employee-card {
    background: rgba(0, 255, 0, 0.05);
    /* Very subtle green tint */
    border: 2px solid #0f0;
    padding: 20px;
    text-align: center;
    width: 250px;
    transition: transform 0.3s;
}

.employee-card:hover {
    transform: scale(1.05);
    background: rgba(0, 255, 0, 0.1);
}

.employee-img-wrapper {
    width: 100%;
    height: 200px;
    background: #000;
    border: 1px solid #0f0;
    margin-bottom: 20px;
    overflow: hidden;
    position: relative;
}

.employee-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) contrast(1.2) brightness(0.8);
    /* Make vectors look pixelated/retro */
    image-rendering: pixelated;
}

.pixel-knight {
    object-fit: contain;
}

.retro-name {
    color: #fff;
    font-size: 1.8rem;
    margin-bottom: 5px;
}

.retro-role {
    color: #0f0;
    font-size: 1.2rem;
}

/* Animations */
@keyframes textGlitch {
    0% {
        transform: translate(0);
        text-shadow: 2px 2px #f0f;
    }

    2% {
        transform: translate(-2px, 2px);
        text-shadow: -2px -2px #0ff;
    }

    4% {
        transform: translate(2px, -2px);
        text-shadow: 2px 2px #f0f;
    }

    6% {
        transform: translate(0);
        text-shadow: none;
    }

    100% {
        transform: translate(0);
        text-shadow: none;
    }
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* Navbar Force Mode Overrides - Increased Specificity */
#navbar.nav-rpg-mode {
    background: #000 !important;
    border-bottom: none !important;
}

#navbar.nav-rpg-mode .nav-link {
    color: #fff !important;
    font-family: 'VT323', monospace !important;
    font-size: 1.7rem !important;
}

#navbar.nav-rpg-mode .nav-link.active {
    color: #fff !important;
    text-decoration: underline !important;
}

#navbar.nav-rpg-mode .logo-text {
    color: #fff !important;
    font-family: 'VT323', monospace !important;
    font-size: 2rem !important;
}

#navbar.nav-rpg-mode .logo-icon {
    filter: brightness(0) invert(1) !important;
    /* White Filter */
}

#navbar.nav-rpg-mode .nav-cta {
    font-size: 1.8rem !important;
    font-weight: bold !important;
    letter-spacing: 1px !important;
    border: 2px solid #fff !important;
    color: #fff !important;
    background: transparent !important;
}

#navbar.nav-rpg-mode .nav-cta:hover {
    background: #fff !important;
    color: #000 !important;
}

/* Paper Mode (Services) - reuse .nav-paper-mode */
.services-page .nav-paper-mode {
    background: transparent !important;
    /* Let scroll show */
    /* Or parchment color if sticky */
}

/* ================================
   About Page - Full Screen TV Glitch Style
   ================================ */
.about-glitch-page {
    background-color: #000;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tv-screen-container {
    position: relative;
    width: 96vw;
    height: 94vh;
    background: radial-gradient(circle at 50% 50%, #0a0a20 0%, #000 120%);
    border: 3px solid #4F46E5;
    border-radius: 20px;
    box-shadow:
        0 0 40px rgba(79, 70, 229, 0.6),
        inset 0 0 100px rgba(79, 70, 229, 0.3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: screenFlicker 0.1s infinite;
}

/* Subtle Screen Flicker */
@keyframes screenFlicker {
    0% {
        opacity: 0.99;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.98;
    }
}

/* Inner Glow Line */
.tv-screen-container::after {
    content: '';
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    bottom: 12px;
    border: 1px solid rgba(79, 70, 229, 0.4);
    border-radius: 12px;
    pointer-events: none;
    z-index: 50;
    box-shadow: inset 0 0 20px rgba(79, 70, 229, 0.2);
}

/* Scanlines Overlay - Stronger */
.scanline-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(0deg,
            rgba(0, 0, 0, 0.15),
            rgba(0, 0, 0, 0.15) 2px,
            transparent 2px,
            transparent 4px);
    pointer-events: none;
    z-index: 40;
    animation: scrollScanlines 5s linear infinite;
    mix-blend-mode: overlay;
}

@keyframes scrollScanlines {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 0 100px;
    }
}

/* Background Noise Overlay */
.noise-layer {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 35;
    animation: noiseMove 0.2s steps(4) infinite;
    opacity: 0.1;
}

/* Content Wrapper */
.tv-content {
    position: relative;
    z-index: 10;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 60px 100px;
    overflow-y: auto;
    /* Custom Scrollbar */
    scrollbar-width: thin;
    scrollbar-color: #4F46E5 rgba(0, 0, 0, 0.3);
}

.tv-content::-webkit-scrollbar {
    width: 8px;
}

.tv-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
}

.tv-content::-webkit-scrollbar-thumb {
    background: #4F46E5;
    border-radius: 4px;
    box-shadow: 0 0 10px #4F46E5;
    border: 2px solid transparent;
    background-clip: content-box;
    /* Makes it look thinner/cleaner */
}

.tv-content::-webkit-scrollbar-thumb:hover {
    background: #818CF8;
    box-shadow: 0 0 15px #818CF8;
}

/* Navbar inside TV */
.tv-navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    border-bottom: 1px solid rgba(79, 70, 229, 0.3);
    font-family: 'VT323', monospace;
    z-index: 30;
    background: rgba(0, 0, 0, 0.3);
}

.tv-nav-left,
.tv-nav-right {
    display: flex;
    align-items: center;
    gap: 30px;
}

.tv-logo-text {
    font-size: 1.8rem;
    color: #4F46E5;
    text-shadow: 0 0 5px #4F46E5;
    font-weight: 700;
    letter-spacing: 2px;
}

.tv-nav-link {
    color: #818CF8;
    text-decoration: none;
    font-size: 1.4rem;
    text-transform: uppercase;
    transition: all 0.2s;
}

.tv-nav-link:hover,
.tv-nav-link.active {
    color: #fff;
    text-shadow: 0 0 10px #4F46E5;
}

/* Header Text - Stronger Glitch */
.glitch-header {
    font-family: 'VT323', monospace;
    font-size: 3.5rem;
    color: #fff;
    margin-top: 40px;
    margin-bottom: 60px;
    position: relative;
    text-shadow: 3px 0 #f0f, -3px 0 #0ff;
    animation: textGlitch 2s infinite alternate-reverse;
    line-height: 1.1;
}

@keyframes textGlitch {
    0% {
        text-shadow: 2px 0 #f0f, -2px 0 #0ff;
        opacity: 1;
    }

    2% {
        text-shadow: -2px 0 #f0f, 2px 0 #0ff;
        transform: translateX(2px);
    }

    4% {
        text-shadow: 1px 0 #f0f, -1px 0 #0ff;
        transform: translateX(-2px);
    }

    6% {
        text-shadow: 2px 0 #f0f, -2px 0 #0ff;
        transform: translateX(0);
    }

    100% {
        text-shadow: 2px 0 #f0f, -2px 0 #0ff;
        opacity: 1;
    }
}

.tv-cursor {
    display: inline-block;
    width: 20px;
    height: 4px;
    background: #4F46E5;
    animation: blink 0.5s step-end infinite;
}

/* Options */
.tv-options {
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 900px;
}

.tv-option {
    font-family: 'VT323', monospace;
    font-size: 2rem;
    color: #a0a0ff;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed rgba(79, 70, 229, 0.3);
    padding-bottom: 10px;
    transition: all 0.2s;
}

.tv-option:hover {
    color: #fff;
    text-shadow: 0 0 15px #4F46E5, 0 0 30px #4F46E5;
    border-bottom-style: solid;
    border-color: #4F46E5;
    padding-left: 20px;
}

.tv-tag {
    font-size: 1.2rem;
    border: 1px solid #4F46E5;
    padding: 6px 14px;
    border-radius: 6px;
    color: #4F46E5;
    box-shadow: 0 0 5px rgba(79, 70, 229, 0.3);
}

.tv-option:hover .tv-tag {
    background: #4F46E5;
    color: #fff;
    box-shadow: 0 0 15px #4F46E5;
}

/* Background Logos */
.bg-glitch-logo {
    position: absolute;
    width: 700px;
    height: 700px;
    background: url('assets/Logo.svg') no-repeat center/contain;
    opacity: 0.04;
    pointer-events: none;
    z-index: 1;
    filter: drop-shadow(0 0 20px #4F46E5);
}

.bg-glitch-logo.left {
    left: -150px;
    top: 20%;
}

.bg-glitch-logo.right {
    right: -150px;
    bottom: 0;
    transform: scaleX(-1);
}

/* ================================
   TV Views & Navigation
   ================================ */
.tv-view {
    display: none;
    flex-direction: column;
    width: 100%;
    height: 100%;
    animation: viewGlitch 0.4s steps(4);
}

.tv-view.active {
    display: flex;
}

@keyframes viewGlitch {
    0% {
        opacity: 0;
        transform: translateX(-10px);
    }

    50% {
        opacity: 1;
        transform: translateX(5px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Back Button */
.tv-back-btn {
    margin-top: 40px;
    font-family: 'VT323', monospace;
    font-size: 1.5rem;
    color: #4F46E5;
    cursor: pointer;
    border: 1px dashed #4F46E5;
    padding: 10px 20px;
    align-self: flex-start;
    transition: all 0.2s;
    text-transform: uppercase;
}

.tv-back-btn:hover {
    background: #4F46E5;
    color: #fff;
    box-shadow: 0 0 15px #4F46E5;
}

/* Team Grid */
.tv-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

.tv-member-card {
    border: 2px solid rgba(79, 70, 229, 0.4);
    background: rgba(0, 0, 20, 0.6);
    padding: 30px 20px;
    text-align: center;
    transition: all 0.3s;
}

.tv-member-card:hover {
    border-color: #fff;
    box-shadow: 0 0 20px rgba(79, 70, 229, 0.4);
    transform: translateY(-5px);
}

.tv-member-img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    margin-bottom: 20px;
    filter: sepia(100%) hue-rotate(190deg) saturate(300%) contrast(1.2) drop-shadow(0 0 5px #4F46E5);
    transition: filter 0.3s;
}

.tv-member-card:hover .tv-member-img {
    filter: drop-shadow(0 0 8px #fff);
}

.tv-card-inner h3 {
    font-family: 'VT323';
    font-size: 1.8rem;
    color: #fff;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.tv-role {
    font-family: 'VT323';
    color: #818CF8;
    font-size: 1.2rem;
    letter-spacing: 2px;
}

/* Contact / Text Block */
.tv-text-block {
    font-family: 'VT323';
    font-size: 1.6rem;
    color: #a0a0ff;
    line-height: 1.4;
    max-width: 800px;
}

.tv-text-block p {
    margin-bottom: 10px;
}

.tv-big-link {
    display: inline-block;
    font-size: 3rem;
    color: #fff;
    text-decoration: none;
    margin: 30px 0;
    text-shadow: 0 0 10px #4F46E5;
    transition: all 0.3s;
    border-bottom: 2px solid #4F46E5;
}

.tv-big-link:hover {
    letter-spacing: 2px;
    text-shadow: 0 0 20px #f0f;
    border-color: #f0f;
}

.tv-social-grid {
    display: flex;
    gap: 30px;
    margin-top: 20px;
}

.tv-social-link {
    font-size: 1.4rem;
    color: #4F46E5;
    text-decoration: none;
    transition: color 0.2s;
}

.tv-social-link:hover {
    color: #fff;
    text-shadow: 0 0 5px #4F46E5;
}

/* ================================
   Glitch Marquee (Landing Transition)
   ================================ */
.glitch-marquee-wrapper {
    width: 100%;
    background: #080816;
    /* Match --bg-dark */
    padding: 120px 0;
    margin: 0;
    overflow: hidden;
    position: relative;
    z-index: 20;
}

/* Texture Integration (Match Stats/Testimonials) */
.glitch-marquee-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(117, 117, 242, 0.03) 3px, transparent 4px);
    pointer-events: none;
    z-index: 1;
}

.glitch-marquee-wrapper::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 1;
    opacity: 0.4;
    animation: noiseMove 0.5s steps(10) infinite;
}

.glitch-marquee-bar {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 12px 0;
    width: 100%;
    display: flex;
    overflow: hidden;
    position: relative;
    z-index: 5;
}

.glitch-track {
    display: flex;
    flex-wrap: nowrap;
    /* Enforce single line */
    animation: marqueeScroll 30s linear infinite;
    width: max-content;
}

.glitch-text {
    font-family: 'VT323', monospace;
    font-size: 1.5rem;
    color: #4F46E5;
    padding-right: 20px;
    /* Spacing between repeats */
    font-weight: 400;
    letter-spacing: 4px;
    white-space: nowrap;
    display: inline-block;
    text-shadow: 0 0 8px rgba(79, 70, 229, 0.8), 0 0 15px rgba(79, 70, 229, 0.4);
    /* Stronger Glow */
    animation: marqueeFlicker 5s infinite;
}

@keyframes marqueeScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Subtle Flicker */
@keyframes marqueeFlicker {

    0%,
    94% {
        opacity: 1;
        text-shadow: 0 0 5px rgba(79, 70, 229, 0.5);
        transform: skewX(0);
    }

    95% {
        opacity: 0.8;
        text-shadow: 2px 0 rgba(255, 0, 255, 0.4), -2px 0 rgba(0, 255, 255, 0.4);
        transform: skewX(3deg);
    }

    96% {
        opacity: 1;
        text-shadow: 0 0 5px rgba(79, 70, 229, 0.5);
        transform: skewX(0);
    }

    98% {
        opacity: 0.9;
        transform: skewX(-1deg);
    }

    100% {
        opacity: 1;
        text-shadow: 0 0 5px rgba(79, 70, 229, 0.5);
        transform: skewX(0);
    }
}

/* FINAL OVERRIDES - SCOPED TO PAPER MODE/SERVICES */
/* Fix Invisible Navbar Button ONLY for Services Page */
#navbar.nav-paper-mode .nav-cta,
.services-overview-page #navbar .nav-cta,
.services-overview-page #navbar .btn-primary,
.nav-paper-mode .btn-primary {
    background-color: #3C2415 !important;
    color: #ffffff !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    opacity: 1 !important;
    visibility: visible !important;
}

#navbar.nav-paper-mode .nav-cta:hover,
.services-overview-page #navbar .nav-cta:hover,
.services-overview-page #navbar .btn-primary:hover {
    background-color: #5C3A1E !important;
    color: #ffffff !important;
}

/* Fix Blue Highlights - Force Rust Orange */
.services-overview-page .service-label,
.services-overview-page .sidebar-link.active,
.services-overview-page .deliverables-list li::before {
    color: #C05621 !important;
}

.services-overview-page .sidebar-link.active::before {
    background-color: #C05621 !important;
}

.services-overview-page .good-for-box {
    border-left-color: #C05621 !important;
}

/* Fix Services Footer Background/Glitch */
.services-overview-page .footer {
    background: transparent !important;
    background-color: transparent !important;
    color: #3C2415 !important;
    box-shadow: none !important;
    border: none !important;
    position: relative !important;
}

/* Disable Glitch Overlays */
.services-overview-page .footer::before,
.services-overview-page .footer::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    animation: none !important;
    background: none !important;
}

/* Footer Typography & Colors */
.services-overview-page .footer h4 {
    color: #3C2415 !important;
}

.services-overview-page .footer a {
    color: rgba(60, 36, 21, 0.7) !important;
}

.services-overview-page .footer a:hover {
    color: #C05621 !important;
}

.services-overview-page .footer-tagline,
.services-overview-page .footer p {
    color: rgba(60, 36, 21, 0.6) !important;
}

.services-overview-page .footer-bottom {
    border-top: 1px solid rgba(60, 36, 21, 0.1) !important;
    color: rgba(60, 36, 21, 0.6) !important;
}

/* Fix Footer Logo Color to Brown */
.services-overview-page .footer .logo-icon,
.services-overview-page .footer .logo-text {
    filter: brightness(0) saturate(100%) invert(13%) sepia(30%) saturate(2222%) hue-rotate(345deg) brightness(98%) contrast(92%) !important;
}

/* =========================================
   About Us - Storytelling Page Styles
   ========================================= */

/* Main Container Adjustments */
.about-main-container {
    padding-top: 100px;
    max-width: 1400px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 100px;
}

/* Full Screen Sections */
.about-section {
    min-height: 90vh;
    /* Almost full height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 0;
    position: relative;
}

.slide-in {
    opacity: 0;
    transform: translateY(30px);
    animation: slideInUp 0.8s forwards;
    animation-delay: 0.2s;
    /* Simplistic load animation */
}

@keyframes slideInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.about-title {
    font-family: var(--font-heading);
    font-size: clamp(3rem, 5vw, 4.5rem);
    color: #3C2415;
    margin-bottom: 40px;
    text-align: left;
}

.section-heading-about {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    color: #3C2415;
    margin-bottom: 10px;
    text-align: center;
}

.section-subheading-about {
    text-align: center;
    font-size: 1.2rem;
    color: #5C3A1E;
    max-width: 600px;
    margin: 0 auto 60px;
    font-style: italic;
}

/* Story Text Block */
.story-content {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgba(60, 36, 21, 0.9);
}

.story-content p {
    margin-bottom: 25px;
}

.btn-story-continue {
    display: inline-block;
    margin-top: 40px;
    padding: 15px 30px;
    border: 2px solid #5C3A1E;
    color: #5C3A1E;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.3s ease;
    background: transparent;
}

.btn-story-continue:hover {
    background: #5C3A1E;
    color: #fff;
    transform: translateY(-5px);
}

.continue-wrapper {
    text-align: center;
    margin-top: 40px;
}

/* Values Grid */
.values-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .values-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.value-card {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(60, 36, 21, 0.1);
    padding: 40px;
    border-radius: 8px;
    transition: transform 0.3s;
}

.value-card:hover {
    transform: translateY(-10px);
    background: #fff;
    box-shadow: 0 10px 30px rgba(60, 36, 21, 0.05);
}

.value-card h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: #C05621;
    /* Rust Highlight */
    margin-bottom: 15px;
}

.value-card p {
    margin: 0;
    color: #5C3A1E;
    line-height: 1.6;
}

/* Timeline */
.timeline-container {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 0;
}

/* Vertical Line */
.timeline-line {
    position: absolute;
    left: 20px;
    /* Mobile Left Aligned */
    top: 0;
    bottom: 0;
    width: 2px;
    background: #C05621;
    /* Rust */
    opacity: 0.3;
}

@media (min-width: 768px) {
    .timeline-line {
        left: 50%;
        transform: translateX(-50%);
    }
}

.timeline-item {
    position: relative;
    margin-bottom: 60px;
    width: 100%;
    padding-left: 60px;
    /* Space for line on mobile */
    box-sizing: border-box;
    opacity: 0;
    animation: fadeIn 0.5s forwards;
    animation-delay: 0.3s;
    /* Delay for default view */
}

/* Stagger Animations */
.timeline-item:nth-child(2) {
    animation-delay: 0.2s;
}

/* First item */
.timeline-item:nth-child(3) {
    animation-delay: 0.4s;
}

.timeline-item:nth-child(4) {
    animation-delay: 0.6s;
}

.timeline-item:nth-child(5) {
    animation-delay: 0.8s;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

@media (min-width: 768px) {
    .timeline-item {
        width: 50%;
        padding-left: 0;
    }

    .timeline-item.left {
        left: 0;
        padding-right: 40px;
        text-align: right;
    }

    .timeline-item.right {
        left: 50%;
        padding-left: 40px;
        text-align: left;
    }
}

/* Year Bubble */
.year-marker {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    background: #C05621;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: monospace;
    font-weight: 700;
    z-index: 2;
    font-size: 1.1rem;
}

@media (min-width: 768px) {
    .year-marker {
        left: auto;
        right: -20px;
        /* For Left items */
    }

    .timeline-item.right .year-marker {
        right: auto;
        left: -20px;
    }
}

.timeline-content h3 {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    color: #3C2415;
    margin: 0 0 10px 0;
}

.year-small {
    font-size: 0.9rem;
    color: #C05621;
    font-family: monospace;
    opacity: 0.8;
    margin-left: 10px;
}

.timeline-content p {
    color: #5C3A1E;
    line-height: 1.5;
}

/* Founder Block */
.founder-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

@media (min-width: 900px) {
    .founder-grid {
        grid-template-columns: 1.2fr 0.8fr;
    }
}

.founder-text h3 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: #3C2415;
    margin-bottom: 20px;
}

.founder-role {
    display: block;
    font-size: 1rem;
    font-family: monospace;
    color: #C05621;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 5px;
}

.founder-text p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #5C3A1E;
    margin-bottom: 20px;
}

/* Glitch Image */
.glitch-img-container {
    position: relative;
    width: 100%;
    aspect-ratio: 3/4;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 20px 50px rgba(60, 36, 21, 0.2);
}

.founder-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.founder-img.base {
    position: relative;
    z-index: 1;
}

.founder-img.glitch-overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    opacity: 0;
    mix-blend-mode: hard-light;
    /* Glitchy blend */
    animation: founderGlitch 6s infinite steps(1);
    /* Random flicker */
}

@keyframes founderGlitch {

    0%,
    92%,
    94%,
    96%,
    98% {
        opacity: 0;
        transform: translateX(0);
    }

    92.1% {
        opacity: 1;
        transform: translateX(5px);
        filter: hue-rotate(90deg);
    }

    94.1% {
        opacity: 0.8;
        transform: translateX(-5px) scale(1.02);
        filter: invert(1);
    }

    96.1% {
        opacity: 1;
        transform: translateX(2px);
    }

    98.1% {
        opacity: 0.5;
        transform: translateY(5px);
    }
}

/* Old TV Overlay */
.tv-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    background: repeating-linear-gradient(0deg,
            rgba(0, 0, 0, 0.1),
            rgba(0, 0, 0, 0.1) 1px,
            transparent 1px,
            transparent 2px);
    pointer-events: none;
    opacity: 0.3;
}

/* CTA Box */
.cta-big-box {
    background: #3C2415;
    color: #fff;
    padding: 80px 40px;
    text-align: center;
    border-radius: 20px;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.cta-big-box h2 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: #C05621;
    /* Rust Highlight */
}

.cta-big-box p {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto 40px;
    opacity: 0.9;
    color: rgba(255, 255, 255, 0.8);
}

.cta-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-primary-about {
    background: #C05621;
    color: #fff;
    padding: 15px 30px;
    text-decoration: none;
    font-weight: 700;
    border-radius: 4px;
    transition: 0.3s;
    border: 2px solid #C05621;
}

.btn-primary-about:hover {
    background: #fff;
    color: #C05621;
}

.btn-secondary-about {
    border: 2px solid #fff;
    color: #fff;
    padding: 15px 30px;
    text-decoration: none;
    font-weight: 700;
    border-radius: 4px;
    transition: 0.3s;
    background: transparent;
}

.btn-secondary-about:hover {
    background: #fff;
    color: #3C2415;
}

/* Marquee Logo Tint Adjustment (White to Dark Gray) */
.logo-item img {
    filter: brightness(0.2) opacity(0.9);
    width: auto;
    height: 50px;
    object-fit: contain;
}

/* Fix Clever Plays Logo (No Tint) */
.logo-item img[src*="CLEVER"] {
    filter: none !important;
    opacity: 1 !important;
}

/* Disable all pointer events to prevent any hover state */
.logo-item,
.logo-item img {
    pointer-events: none !important;
    transition: none !important;
    transform: none !important;
}

/* Pillar Cards - Subtle Animation */
.philosophy-container .reveal-on-scroll>div[style*="border"] {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.philosophy-container .reveal-on-scroll>div[style*="border"]:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(60, 36, 21, 0.08);
}

/* Fix h4 inside philosophy - prevent uppercase */
.philosophy-container h4 {
    text-transform: none !important;
    font-family: var(--font-primary) !important;
    font-weight: 600;
}

/* Diablo Style Icons for Modal */
.diablo-icon {
    width: 80px;
    height: 80px;
    /* Make white + Gold Glow */
    filter: brightness(0) invert(1) drop-shadow(0 0 5px #e3b04b);
    display: block;
    margin: 0 auto 20px;
    transition: transform 0.3s ease;
}

.diablo-icon:hover {
    transform: scale(1.1);
    filter: brightness(0) invert(1) drop-shadow(0 0 10px #ffaa00);
}

/* =========================================
   Project Cards & Modal Refinements
   ========================================= */

/* Platform Badges */
.platform-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.platform-badge {
    background: rgba(117, 117, 242, 0.1);
    border: 1px solid rgba(117, 117, 242, 0.4);
    color: #fff;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 0 10px rgba(117, 117, 242, 0.1);
    backdrop-filter: blur(4px);
}

/* Modal Image Frame - Full Visibility */
.modal-image {
    background: #050510;
    border: 1px solid #333;
    padding: 0;
    height: auto !important;
    /* Override 300px */
    aspect-ratio: 16/9;
    position: relative;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    display: flex;
    /* Ensure img fills */
}

.modal-image img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    display: block;
}

.modal-image-placeholder {
    display: none;
    /* Hide if still present */
}

/* Card Screen Effect */
.character-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(0deg,
            rgba(0, 0, 0, 0.1),
            rgba(0, 0, 0, 0.1) 1px,
            transparent 1px,
            transparent 3px);
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: overlay;
    opacity: 0.7;
}

/* Card Hover Text Background */
.character-info {
    /* Stronger background for readability */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 20%, rgba(0, 0, 0, 0.7) 80%, transparent 100%);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 1);
    padding-bottom: 25px;
    /* Add breathing room */
}

/* Card Pulse/Glow Animation */
@keyframes card-screen-pulse {
    0% {
        box-shadow: 0 0 5px rgba(100, 100, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.1);
    }

    50% {
        box-shadow: 0 0 15px rgba(100, 100, 255, 0.25);
        border-color: rgba(100, 100, 255, 0.3);
    }

    100% {
        box-shadow: 0 0 5px rgba(100, 100, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.1);
    }
}

.character-card {
    /* Add animation */
    animation: card-screen-pulse 5s infinite ease-in-out;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.character-card:hover {
    animation: none;
    /* Stop pulse on hover, specific hover state takes over */
    border-color: rgba(117, 117, 242, 0.8);
    box-shadow: 0 0 30px rgba(117, 117, 242, 0.4);
    z-index: 10;
    /* Pop out */
}

/* =========================================
   FIXES: Stats & Image Visibility
   ========================================= */

/* 1. Modal Stats - Remove Boxes, Make Big */
.modal-stat {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: none !important;
}

.modal-stat-number {
    font-size: 3.5rem !important;
    /* Huge */
    font-weight: 800;
    line-height: 1;
    margin-bottom: 10px;
    background: linear-gradient(180deg, #fff 0%, #7575F2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 20px rgba(117, 117, 242, 0.5);
    /* Glow */
}

.modal-stat-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #ccc;
    letter-spacing: 1.5px;
    text-align: center;
}

/* Vertical Divider for Stats */
.modal-stat:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -20px;
    /* Adjust based on grid gap */
    top: 20%;
    height: 60%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(117, 117, 242, 0.3), transparent);
}

/* 2. Card Image z-index */
.character-image {
    z-index: 1;
}

.character-image img {
    opacity: 1 !important;
    display: block;
}

/* 3. Adjust Card Overlay to not hide image */
.character-card::after {
    opacity: 0.15 !important;
    /* Reduce from 0.7 to 0.15 */
    z-index: 5;
    mix-blend-mode: normal !important;
    background: repeating-linear-gradient(0deg,
            rgba(255, 255, 255, 0.05),
            rgba(255, 255, 255, 0.05) 1px,
            transparent 1px,
            transparent 3px);
}

/* 4. Additional Glitch Effect */
@keyframes item-glitch {
    0% {
        transform: translate(0);
    }

    20% {
        transform: translate(-3px, 3px);
    }

    40% {
        transform: translate(-3px, -3px);
    }

    60% {
        transform: translate(3px, 3px);
    }

    80% {
        transform: translate(3px, -3px);
    }

    100% {
        transform: translate(0);
    }
}

.character-card:hover::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 20;
    background: linear-gradient(45deg, rgba(255, 0, 0, 0.1), rgba(0, 0, 255, 0.1));
    mix-blend-mode: screen;
    opacity: 0.5;
    animation: item-glitch 0.3s cubic-bezier(.25, .46, .45, .94) both infinite;
    pointer-events: none;
}

/* =========================================
   FIXES: Banner Layout & Grayscale Revert
   ========================================= */

/* 1. Modal Banner Layout */
.modal-content {
    padding: 0 !important;
    /* Remove padding to let banner touch edges */
    overflow-x: hidden;
    overflow-y: auto;
    /* Allow scrolling if content is long */
    display: flex;
    flex-direction: column;
    max-width: 800px;
}

.modal-image-banner {
    width: 100%;
    height: 350px;
    /* Good cover height */
    position: relative;
    background: #050510;
    flex-shrink: 0;
}

.modal-image-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    /* Force cover per request */
    object-position: top center;
    /* Focus on top part usually better for key art */
    display: block;
}

/* Restore padding for content */
.modal-header {
    padding: 30px 40px 10px;
}

.modal-body {
    padding: 0 40px 40px;
    display: block !important;
    /* Remove grid columns */
}

.modal-details {
    width: 100%;
}

/* Close Button Floating */
.modal-close {
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    border-radius: 50%;
    padding: 0;
    color: #fff;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    z-index: 10;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.9);
    color: #000;
}

/* 2. Revert Card Grayscale (Gray default -> Color hover) */
.character-image {
    filter: grayscale(100%) brightness(0.7) !important;
    transition: filter 0.4s ease;
}

.character-card:hover .character-image {
    filter: none !important;
}

/* 3. Stats Alignment Fix */
.modal-stats {
    align-items: flex-start !important;
    /* Fix misalignment */
    display: flex !important;
    justify-content: space-between;
    gap: 20px;
    margin-top: 30px;
}

.modal-stat {
    flex: 1;
    justify-content: flex-start;
}

@media (max-width: 768px) {
    .modal-stats {
        flex-direction: column !important;
        gap: 15px !important;
        margin-top: 20px !important;
    }

    .modal-stat {
        width: 100% !important;
        padding: 15px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .modal-stat .modal-stat-number {
        font-size: 2.2rem !important;
        margin-bottom: 5px !important;
        text-align: center !important;
    }

    .modal-stat .modal-stat-label {
        font-size: 0.7rem !important;
        text-align: center !important;
    }
}

/* 4. Modal Banner Screen Effects */
.modal-image-banner::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(0deg,
            rgba(255, 255, 255, 0.05),
            rgba(255, 255, 255, 0.05) 1px,
            transparent 1px,
            transparent 3px);
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: overlay;
    opacity: 0.3;
}

.modal-image-banner::before {
    content: "";
    /* Vignette */
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.8);
    z-index: 3;
    pointer-events: none;
    mix-blend-mode: multiply;
}

/* Subtle Flicker */
@keyframes screen-hum {
    0% {
        filter: brightness(1) contrast(1.1);
    }

    50% {
        filter: brightness(0.95) contrast(1.1);
    }

    100% {
        filter: brightness(1) contrast(1.1);
    }
}

.modal-image-banner img {
    animation: screen-hum 0.15s infinite;
    /* Fast flicker? Or slow hum? 4s is slow. 0.15s is weird glitch. Let's do slow. */
    animation-duration: 4s;
}

/* =========================================
   Edge Card & Glitch Logic
   ========================================= */

/* 1. Fix Leftmost/Rightmost Card Text Cutoff */
/* Revert width to 150% to cover skew edges, use padding to push text into view */
.character-card:first-child .character-info {
    left: -25% !important;
    width: 150% !important;
    align-items: flex-end !important;
    text-align: right !important;
    padding-right: 30% !important;
    padding-left: 0 !important;
}

.character-card:last-child .character-info {
    left: -25% !important;
    width: 150% !important;
    align-items: flex-start !important;
    text-align: left !important;
    padding-left: 30% !important;
    padding-right: 0 !important;
}

/* 2. Signal Lost Glitch Effect */
.signal-lost .character-image {
    animation: glitch-anim 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
    filter: contrast(2) brightness(1.2) grayscale(1) !important;
    /* Removed green flash/hue-rotate */
}

.signal-lost::after {
    opacity: 0.8 !important;
    background: repeating-linear-gradient(0deg,
            rgba(255, 255, 255, 0.2),
            rgba(255, 255, 255, 0.2) 2px,
            transparent 2px,
            transparent 4px) !important;
    mix-blend-mode: hard-light !important;
}

@keyframes glitch-anim {
    0% {
        transform: translate(0);
    }

    20% {
        transform: translate(-5px, 5px) skewX(-10deg);
    }

    40% {
        transform: translate(5px, -5px) skewX(10deg);
    }

    60% {
        transform: translate(-5px, 0) skewX(-5deg);
    }

    80% {
        transform: translate(5px, 0) skewX(5deg);
    }

    100% {
        transform: translate(0);
    }
}

/* =========================================
   USER REQUEST OVERRIDES (Step 7038)
   ========================================= */

/* 1. Contact Section: Bigger Terminal & Text */
.rpg-box {
    max-width: 900px !important;
    /* Increased width */
    padding: 50px !important;
    /* More padding */
}

/* Increase font size for readability */
.rpg-text-area,
.rpg-text,
.rpg-option,
.rpg-input,
textarea.rpg-input {
    font-size: 1.3rem !important;
    line-height: 1.6;
}

.rpg-selector {
    font-size: 1.3rem !important;
}

/* 2. Testimonials Header Spacing */
/* Force side-by-side layout with large gap */
#testimonials .section-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 80px;
    /* "More space" */
    text-align: left;
    margin-bottom: 60px;
}

#testimonials .section-title {
    margin-bottom: 0 !important;
    /* Remove bottom margin since we use gap */
    white-space: nowrap;
}

/* Responsive adjustment */
@media (max-width: 800px) {
    #testimonials .section-header {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
    }

    .rpg-box {
        padding: 20px !important;
    }
}

/* =========================================
   USER REQUEST OVERRIDES (Step 7081 - REVISED)
   ========================================= */

/* 1. Contact Section: Even Bigger Terminal & Text */
.rpg-box {
    max-width: 1000px !important;
    /* Increased again */
    padding: 60px !important;
}

/* Much bigger font for readability */
.rpg-text-area,
.rpg-text,
.rpg-option,
.rpg-input,
textarea.rpg-input {
    font-size: 1.8rem !important;
    /* 1.3 -> 1.8 */
    line-height: 1.5;
    font-weight: 500;
    letter-spacing: 1px;
}

.rpg-selector {
    font-size: 1.8rem !important;
}

/* 2. Testimonials Header Spacing & Alignment */
/* Push title left and subtitle far right */
#testimonials .section-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between !important;
    /* This pushes them apart */
    gap: 40px;
    text-align: left;
    margin-bottom: 60px;
    width: 100%;
}

#testimonials .section-title {
    margin-bottom: 0 !important;
    white-space: nowrap;
    flex-shrink: 0;
}

#testimonials .section-subtitle {
    text-align: right !important;
    /* Right align the text block itself */
    margin-left: auto !important;
    /* Ensure it stays right */
    max-width: 500px;
    line-height: 1.4;
}

/* Responsive adjustment */
@media (max-width: 900px) {
    #testimonials .section-header {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
    }

    #testimonials .section-subtitle {
        text-align: left !important;
        margin-left: 0 !important;
    }

    .rpg-box {
        padding: 30px !important;
    }

    .rpg-text-area,
    .rpg-option,
    .rpg-input {
        font-size: 1.4rem !important;
    }
}

/* =========================================
   USER REQUEST OVERRIDES (Step 7095 - FINAL)
   ========================================= */

/* Refine Testimonials Header Layout */
#testimonials .section-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    /* Center align on Y axis */
    justify-content: space-between !important;
    /* Push apart on X axis */
    gap: 40px !important;
    width: 100%;
    margin-bottom: 80px;
}

/* Constrain subtitle width as requested ("smaller container") */
#testimonials .section-subtitle {
    text-align: right !important;
    margin-left: auto !important;
    max-width: 300px !important;
    /* Forces tighter wrapping */
    line-height: 1.5 !important;
    flex-shrink: 0;
    /* Prevent squishing */
}

/* Ensure Title stays put */
#testimonials .section-title {
    margin-bottom: 0 !important;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Responsive adjustment */
@media (max-width: 900px) {
    #testimonials .section-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 20px !important;
    }

    #testimonials .section-subtitle {
        text-align: left !important;
        margin-left: 0 !important;
        max-width: 100% !important;
        /* Allow full width primarily for mobile */
    }
}

/* =========================================
   USER REQUEST OVERRIDES (Step 7111 - NUDGE)
   ========================================= */

/* Nudge Override to align Testimonials Subtitle to the right edge of content below */
@media (min-width: 900px) {
    #testimonials .section-subtitle {
        margin-right: -50px !important;
        /* Pull right visually */
        position: relative;
        left: 30px;
        /* Additional push if needed */
        max-width: 320px !important;
        /* Allow slightly more width if needed */
    }
}

/* =========================================
   USER REQUEST OVERRIDES (Step 7139 - REFINED Y-AXIS)
   ========================================= */

/* Push subtitle down to align visually with large title */
@media (min-width: 900px) {
    #testimonials .section-subtitle {
        margin-top: 45px !important;
        /* Further lowered */
    }
}

/* =========================================
   USER REQUEST OVERRIDES (Step 7216 - REFINED CONTACT)
   ========================================= */

/* Make Contact Terminal huge width but compact height */
.rpg-box {
    max-width: 1250px !important;
    width: 95% !important;
    margin: 0 auto !important;
    padding: 30px !important;
    /* SIGNIFICANTLY REDUCED PADDING */
    min-height: auto !important;
    /* Allow it to shrink */
}

/* Reduce gap between Question and Answers */
.rpg-text-area {
    margin-bottom: 5px !important;
    /* Tighten gap */
}

.rpg-options {
    margin-top: 5px !important;
    /* Tighten gap */
}

/* Optimize font for wider layout */
.rpg-text-area,
.rpg-text,
.rpg-option,
.rpg-input,
textarea.rpg-input {
    font-size: 1.5rem !important;
    /* Slightly smaller for better fit */
    line-height: 1.4 !important;
    /* Tighter lines */
    max-width: 100% !important;
    letter-spacing: 0.5px !important;
    /* Slightly tighter tracking */
}

/* Enhanced Contact Terminal UI (Global/Desktop) */
.rpg-option {
    display: block;
    /* Create distinct clickable blocks */
    background: rgba(117, 117, 242, 0.15);
    /* Theme Blue Tint */
    border: 1px solid rgba(117, 117, 242, 0.5);
    padding: 15px 25px;
    /* Comfortable click area */
    margin-bottom: 12px;
    border-radius: 8px;
    /* Rounded corners */

    color: #fff;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    /* Ensure font size matches scale but allow override */
    font-size: inherit;
}

.rpg-option:hover {
    background: rgba(117, 117, 242, 0.3);
    transform: translateX(5px);
    /* Subtle interaction feedback */
    box-shadow: 0 6px 12px rgba(117, 117, 242, 0.2);
    border-color: #7575f2;
}

.rpg-option:active {
    transform: scale(0.98) translateX(5px);
}

/* Animate the arrow span */
.rpg-selector {
    color: #7575f2;
    margin-right: 12px;
    display: inline-block;
    transition: transform 0.2s ease;
}

.rpg-option:hover .rpg-selector {
    transform: translateX(4px);
}

/* =========================================
   User Request (Step 7245 - Loading Screen)
   ========================================= */

#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #050510;
    /* Dark Theme BG */
    z-index: 99999;
    /* Top priority */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
    opacity: 1;
    visibility: visible;
}

#loader-wrapper.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    z-index: 100000;
}

.loader-logo {
    width: 80px;
    height: 80px;
    animation: loaderPulse 2s infinite ease-in-out;
}

.loader-bar-bg {
    width: 150px;
    height: 3px;
    background: rgba(117, 117, 242, 0.2);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.loader-bar-fill {
    width: 50%;
    height: 100%;
    background: #7575f2;
    /* Brand Purple */
    position: absolute;
    left: 0;
    top: 0;
    animation: loaderProgress 1.5s infinite linear;
}

@keyframes loaderPulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
        filter: drop-shadow(0 0 10px #7575f2);
    }

    100% {
        transform: scale(1);
        opacity: 0.8;
    }
}

@keyframes loaderProgress {
    0% {
        left: -100%;
        width: 50%;
    }

    50% {
        left: 25%;
        width: 50%;
    }

}

/* Enhanced Section Sub-Headings (Global) - Tasteful Size */
.philosophy-title,
.section-title.philosophy-title,
#services .section-title,
h2.philosophy-title,
h3.philosophy-title {
    font-size: clamp(1.8rem, 2.5vw, 2.8rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 2rem !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
    opacity: 1 !important;
    color: var(--text-dark) !important;
    display: block !important;
    width: 100% !important;
}

/* =========================================
   USER REQUEST (Step 7304 - Mobile Fixes)
   ========================================= */

/* Default Hide */
.hamburger,
.mobile-menu {
    display: none;
}

/* Mobile View Only */
@media (max-width: 768px) {

    /* Navbar Adjustment */
    .nav-left,
    .nav-right {
        display: none !important;
    }

    /* Show Hamburger */
    .hamburger {
        display: flex !important;
        flex-direction: column;
        gap: 6px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 5px;
        z-index: 100002;
        /* Above menu */
        color: #fff;
        /* Default white */
    }

    .hamburger span {
        width: 30px;
        height: 3px;
        background: currentColor;
        transition: 0.3s;
        border-radius: 2px;
    }

    .navbar.scrolled .hamburger {
        color: #fff;
    }

    /* Visible on scroll */
    .nav-container {
        justify-content: space-between !important;
        padding: 0 20px !important;
    }

    /* Mobile Menu Overlay */
    .mobile-menu {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(5, 5, 16, 0.98);
        /* Deep dark BG */
        z-index: 100000;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transform: translateY(-100%);
        /* Hidden top */
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Mobile Menu Overlay */
    .mobile-menu {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(5, 5, 16, 0.98);
        /* Deep dark BG */
        z-index: 100000;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transform: translateY(-100%);
        /* Hidden top */
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .mobile-menu.active {
        transform: translateY(0);
        display: flex !important;
    }

    /* Fix Stacking */
    .mobile-menu-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 30px;
        width: 100%;
    }

    .mobile-link {
        font-size: 1.8rem;
        /* Smaller size */
        color: #fff;
        margin: 0;
        text-decoration: none;
        font-family: 'Exo 2', sans-serif;
        text-transform: uppercase;
        letter-spacing: 1px;
        opacity: 0;
        transform: translateY(20px);
        transition: 0.3s;
        display: block;
        /* Ensure it's a block */
    }

    .mobile-menu.active .mobile-link {
        opacity: 1;
        transform: translateY(0);
        /* Stagger done via JS or just CSS delay? Simple for now */
    }

    /* Hex Grid Fix - Left Align */
    .inventory-display.classic-rpg-ui {
        flex-direction: column !important;
        height: auto !important;
        padding-top: 0 !important;
        /* Left align content */
        align-items: flex-start !important;
    }

    .character-panel {
        display: none !important;
        /* Hide character for space */
    }

    .inventory-main {
        width: 100% !important;
        padding: 0 !important;
        display: flex !important;
        /* Enable Flex for alignment */
        flex-direction: column !important;
        /* Left align content */
        align-items: flex-start !important;
    }

    .inventory-mesh.grid-hex {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
        justify-items: center !important;

        /* Grid Container Sizing */
        width: 100% !important;
        max-width: 320px !important;

        /* Left Align Grid */
        margin: 0 !important;
        padding: 0 !important;

        /* Nuclear resets */
        transform: none !important;
        position: static !important;
        left: auto !important;
        right: auto !important;
        float: none !important;
    }

    /* Remove potential ghosts pushing content */
    .inventory-mesh.grid-hex::before,
    .inventory-mesh.grid-hex::after {
        display: none !important;
        content: none !important;
    }

    .inventory-slot.hex-slot {
        width: 85px !important;
        height: 98px !important;
        margin: 0 !important;
        background: transparent !important;
        clip-path: none !important;

        /* Grid handles positioning, flex handles content */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .inventory-slot.hex-slot img {
        width: 60% !important;
        height: 60% !important;
        object-fit: contain !important;
    }

    /* Button Fix */
    .inventory-cta {
        margin-top: 30px !important;
        width: 100% !important;
        text-align: center !important;
    }

    .hex-link-styled {
        display: block !important;
        width: 80% !important;
        margin: 0 auto !important;
        font-size: 1.1rem !important;
        padding: 15px 20px !important;
        white-space: normal !important;
        /* Allow wrap */
        line-height: 1.3 !important;

    }

    /* Fix Projects Header Overlay - Vertical Layout Split */
    #projects .section-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 15px !important;
        margin-bottom: 30px !important;
        padding-bottom: 0 !important;
        padding: 0 10px !important;
        width: 100% !important;
    }

    #projects .section-title {
        font-size: 3.5rem !important;
        writing-mode: vertical-rl !important;
        text-orientation: mixed !important;
        transform: none !important;
        /* Top-to-Bottom flow */

        flex: 0 0 auto !important;
        position: static !important;
        opacity: 1 !important;
        margin: 0 !important;
        color: #fff !important;
        -webkit-text-stroke: 0 !important;
        width: auto !important;
        line-height: 1 !important;
        text-align: center !important;
    }

    #projects .section-subtitle {
        text-align: left !important;
        position: static !important;
        /* Let flex handle */
        margin: 0 !important;
        z-index: 2 !important;
        font-size: 1rem !important;
        padding: 0 !important;
        flex: 1 !important;
        max-width: none !important;
    }

    /* Mobile - Swipeable Project Cards (Carousel) */
    .character-select {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;

        /* Break out of container to full screen width */
        width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;

        height: 65vh !important;
        /* Substantial height */
        padding-bottom: 0 !important;
        gap: 0 !important;

        /* Hide Scrollbar */
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    .character-select::-webkit-scrollbar {
        display: none !important;
    }

    .character-card {
        min-width: 100vw !important;
        width: 100vw !important;
        height: 100% !important;
        scroll-snap-align: center !important;
        margin: 0 !important;
        padding: 15px 20px !important;
        box-sizing: border-box !important;

        /* Reset Desktop Styles */
        transform: none !important;
        clip-path: none !important;
        border: none !important;
        background: transparent !important;
        position: relative !important;
        opacity: 1 !important;
        overflow: visible !important;
        /* Stop clipping rounded corners and shadows */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: none !important;
    }

    /* Ensure image fills card */
    .character-image {
        width: 100% !important;
        height: 100% !important;
        clip-path: none !important;
        transform: none !important;
        border: 1px solid rgba(129, 140, 248, 0.4) !important;
        border-radius: 12px !important;
        box-shadow: 0 0 15px rgba(129, 140, 248, 0.15) !important;
        position: relative !important;
        overflow: hidden !important;
        margin: 0 !important;
        left: 0 !important;
    }

    .character-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 12px !important;
        filter: brightness(0.9);
        display: block !important;
        transform: none !important;
    }

    /* Info Overlay - readable at bottom */
    .character-info,
    .character-card:first-child .character-info,
    .character-card:last-child .character-info {
        position: absolute !important;
        bottom: 15px !important;
        left: 20px !important;
        /* matches card left padding */
        width: calc(100% - 40px) !important;
        padding: 30px 10px 20px !important;
        background: linear-gradient(to top, rgba(5, 5, 16, 0.95), rgba(5, 5, 16, 0)) !important;
        text-align: center !important;
        border-bottom-left-radius: 12px !important;
        border-bottom-right-radius: 12px !important;
        transform: none !important;
        z-index: 5 !important;
        opacity: 1 !important;
        pointer-events: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .character-name {
        font-size: 1.8rem !important;
        font-family: 'Exo 2', sans-serif !important;
        color: #fff !important;
        margin-bottom: 5px !important;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
        text-align: center !important;
    }

    .character-role {
        font-size: 1.1rem !important;
        color: #ccc !important;
        font-weight: 400 !important;
        text-align: center !important;
    }

    /* Mobile Spacing Fixes (Remove huge gaps) */
    .hero {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        height: 100vh !important;
        height: 100dvh !important;
        /* Ensure full screen centering */
        padding-bottom: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    #projects {
        padding-top: 10px !important;
        margin-top: 0 !important;
    }

    .hero-footer {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        padding: 20px 0 !important;
        width: 100% !important;
        margin-top: 0 !important;
        justify-content: center !important;
    }

    /* Adjust stats spacing */
    .stats {
        flex-wrap: wrap !important;
        gap: 15px !important;
        justify-content: center !important;
        padding: 10px !important;
    }

    /* Fix Testimonials / Real Voices on Mobile */
    #testimonials .section-container {
        padding: 0 10px !important;
        width: 100% !important;
    }

    #testimonials .rpg-dialogue-container {
        display: flex !important;
        flex-direction: column !important;
        /* Stack vertically if needed, or keep row with absolute buttons */
        align-items: center !important;
        position: relative !important;
        width: 100% !important;
        margin-top: 20px !important;
        padding-bottom: 20px !important;
    }

    #testimonials .dialogue-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
    }

    #testimonials .rpg-dialogue-box {
        width: 100% !important;
        height: auto !important;
        min-height: 200px !important;
        padding: 30px 20px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    #testimonials .dialogue-text {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        text-align: center !important;
        white-space: normal !important;
        width: 100% !important;
    }

    /* Hide Character Portrait - Not needed on mobile */
    .dialogue-character {
        display: none !important;
    }

    /* Absolute positioning for arrows */
    #testimonials .dialogue-nav {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 40px !important;
        height: 40px !important;
        background: rgba(5, 5, 16, 0.9) !important;
        border: 1px solid #7575f2 !important;
        z-index: 20 !important;
        border-radius: 50% !important;
    }

    #testimonials .dialogue-prev {
        left: -10px !important;
        /* Allow slight overlap or push out? Maybe inside box? */
        /* Let's put slightly inside so visible on small screens */
        left: 0 !important;
    }

    #testimonials .dialogue-next {
        right: 0 !important;
    }

    /* Name Badge Adjust */
    .dialogue-name-badge {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        margin: 0 auto 10px !important;
        /* Center above box */
        transform: none !important;
        display: inline-block !important;
    }

    /* Fix Real Voices Header - Absolute Positioning (Nuclear option) */
    #testimonials .section-header {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-end !important;
        /* Push Title to Right */
        align-items: center !important;
        position: relative !important;
        width: 100% !important;
        min-height: 250px !important;
        /* Ensure height */
        margin-bottom: 30px !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }

    #testimonials .section-title {
        font-size: 3.5rem !important;
        writing-mode: vertical-rl !important;
        text-orientation: mixed !important;
        transform: none !important;

        position: relative !important;
        margin: 0 !important;
        color: #fff !important;
        -webkit-text-stroke: 0 !important;
        width: auto !important;
        line-height: 1 !important;
        text-align: center !important;
        z-index: 1 !important;
    }

    #testimonials .section-subtitle {
        position: absolute !important;
        left: 20px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;

        text-align: left !important;
        width: 60% !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 2 !important;
        font-size: 1rem !important;
    }

    /* Fix Contact Terminal (Buttons vs Text) */
    #contact .rpg-box {
        padding: 25px 20px !important;
    }

    #contact .rpg-text {
        margin-bottom: 30px !important;
        font-size: 1.1rem !important;
        line-height: 1.6 !important;
        color: #eee !important;
        text-align: center !important;
        display: block !important;
        width: 100% !important;
    }

    #contact .rpg-options {
        display: flex;
        /* REMOVED !important: Allow JS to toggle display:none */
        flex-direction: column !important;
        gap: 15px !important;
        align-items: center !important;
        width: 100% !important;
    }

    #contact .rpg-option {
        display: block !important;
        width: 100% !important;
        max-width: 320px !important;
        /* Button size constraint */
        background: rgba(117, 117, 242, 0.15) !important;
        border: 1px solid rgba(117, 117, 242, 0.5) !important;
        padding: 15px 20px !important;
        margin: 0 !important;
        border-radius: 8px !important;
        color: #fff !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        text-align: center !important;
        transition: all 0.2s ease !important;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2) !important;
    }

    #contact .rpg-option:active {
        transform: scale(0.98) !important;
        background: rgba(117, 117, 242, 0.3) !important;
    }

    /* Add 'Action' indicator */
    #contact .rpg-option::before {
        content: '► ' !important;
        color: #7575f2 !important;
        margin-right: 8px !important;
        font-size: 0.9em !important;
    }

    /* Fix Form Layout - Stack Buttons */
    #contact .form-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        width: 100% !important;
        margin-top: 20px !important;
    }

    #contact .rpg-submit,
    #contact .rpg-back {
        width: 100% !important;
        padding: 15px !important;
        text-align: center !important;
        display: block !important;
    }

    /* Philosophy Grid Swipeable (Cards) */
    .philosophy-grid {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        gap: 20px !important;

        /* Break out full width */
        width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        padding: 0 20px 30px 20px !important;
        /* Extra bottom padding for scrollbar */
        /* Left/Right padding */

        scroll-snap-type: none !important;
        /* No snap as requested */
        -webkit-overflow-scrolling: touch !important;

        /* Reset Grid styles */
        grid-template-columns: none !important;
        transition-delay: 0s !important;
        margin-bottom: 20px !important;
    }

    /* Scrollbar Styling for Indicator */
    .philosophy-grid::-webkit-scrollbar {
        display: block !important;
        height: 4px !important;
        /* Thin line */
        background: transparent !important;
    }

    .philosophy-grid::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 2px !important;
        margin: 0 20px !important;
        /* Inset from edges */
    }

    .philosophy-grid::-webkit-scrollbar-thumb {
        background: rgba(117, 117, 242, 0.5) !important;
        /* Theme Color */
        border-radius: 2px !important;
    }

    .philosophy-grid>div {
        min-width: 78vw !important;
        /* Reduced width for better "peek" */
        /* Nearly full width cards */
        width: 78vw !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        opacity: 1 !important;
        /* Ensure visible */
    }

    /* Remove Scroll Snap from Projects Carousel */
    .character-select {
        scroll-snap-type: none !important;
    }

    .character-card {
        scroll-snap-align: none !important;
    }

    /* Hide Scroll Indicator on Mobile */
    .scroll-indicator {
        display: none !important;
    }

    /* Fix Overlay Issues (Black Line) */
    .glitch-marquee-wrapper,
    .logo-scroll {
        position: relative !important;
        z-index: 1 !important;
    }

    /* Ensure Navbar is top */
    .navbar {
        z-index: 10000 !important;
    }

    /* Fix Mobile Navbar Gap (Black Bar) */
    .navbar.scrolled {
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        border-radius: 0 !important;
        border: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        padding: 15px 20px !important;
    }

    /* Hide Services Sidebar on Mobile (User Request) */
    .services-sidebar {
        display: none !important;
    }

    /* Ensure hamburger is visible on paper mode (Brown) */
    .nav-paper-mode .hamburger {
        color: #5D4037 !important;
    }

    .nav-paper-mode .hamburger span {
        background-color: #5D4037 !important;
    }

    /* Revert to white when open (on dark overlay) */
    .nav-paper-mode .hamburger.active span {
        background-color: #fff !important;
    }

    /* Reset layout to single column stack */
    .sticky-scroll-layout {
        display: block !important;
    }

    .services-content-flow {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Hero Section Mobile Layout */
    .hero-sub-layout {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 24px !important;
        margin-top: 20px !important;
    }

    .hero-subtitle {
        max-width: 100% !important;
        font-size: 1rem !important;
    }

    .hero-buttons {
        width: 100%;
    }

    .hero-buttons .btn {
        width: auto !important;
        min-width: 150px;
        justify-content: center;
        padding: 12px 25px !important;
        font-size: 0.9rem !important;
    }
}

/* =========================================
   Quick Fixes for Contact Terminal Readability
   ========================================= */

/* Use pixel font again but ensure it's large and readable */
#contact .rpg-text-area,
#rpg-text,
#contact .rpg-option,
#contact .rpg-input {
    font-family: 'VT323', monospace !important;
    letter-spacing: 0.05em !important;
}

/* Increase font size significantly to compensate for pixel font readability */
#contact .rpg-text-area,
#rpg-text {
    font-size: 1.8rem !important;
    /* Larger than sans-serif equivalent to match visual weight */
    line-height: 1.4 !important;
    color: #ffffff !important;
    margin-bottom: 1rem !important;
    /* Reduced space between question and options as requested */
    display: block !important;
}

/* Adjust box padding for larger text */
#contact .rpg-box {
    padding: 3rem !important;
    /* More breathing room */
    min-height: 350px !important;
    max-width: 900px !important;
    /* Wider on desktop */
    margin: 0 auto !important;
}

/* Adjust options */
#contact .rpg-option {
    font-size: 1.5rem !important;
    /* Increased for readability with pixel font */
    padding: 1rem 1.5rem !important;
    margin-bottom: 0.8rem !important;
    text-align: left !important;
}

/* Adjust input fields */
#contact .rpg-input {
    font-size: 1.1rem !important;
    padding: 1rem !important;
    height: auto !important;
}

/* =========================================
   Step 3: Testimonial Logos Styling
   ========================================= */

.dialogue-name-badge {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 15px !important;
}

.dialogue-info-col {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
}

.dialogue-logo {
    width: 60px !important;
    height: 60px !important;
    object-fit: contain !important;
    /* White Filter to match dark theme + character silhouette assumption */
    filter: brightness(0) invert(1) !important;
    opacity: 0.9 !important;
}

.dialogue-name,
.dialogue-studio {
    margin: 0 !important;
    line-height: 1.2 !important;
}

/* =========================================
   User Request: Mobile Stats Layout (2 Columns)
   ========================================= */
@media (max-width: 768px) {
    .stats-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 20px 10px !important;
        width: 100% !important;
        justify-items: center !important;
        padding: 0 10px !important;

        /* Reset any flexbox properties */
        flex-wrap: wrap !important;
    }

    .stat-item {
        width: 100% !important;
        margin: 0 !important;
        text-align: center !important;
        padding: 0 !important;

        /* Use block layout to allow inline spans to sit together */
        display: block !important;
    }

    /* Hide dividers in grid layout to avoid layout breakage */
    .stat-divider {
        display: none !important;
    }

    /* Keep Number and Suffix Inline */
    .stat-number {
        font-size: clamp(2.5rem, 8vw, 3.5rem) !important;
        line-height: 1 !important;
        margin-bottom: 0 !important;
        display: inline-block !important;
        /* Sit next to suffix */
        color: #ffffff !important;
    }

    .stat-suffix {
        font-size: 2rem !important;
        /* Slightly smaller than number */
        font-weight: 700 !important;
        margin-left: 2px !important;
        display: inline-block !important;
        /* Sit next to number */
        color: #818CF8 !important;
        /* Primary Light */
        transform: translateY(-2px);
        /* Slight optical alignment */
    }

    .stat-label {
        display: block !important;
        /* Force new line */
        font-size: 0.85rem !important;
        letter-spacing: 1px !important;
        text-transform: uppercase !important;
        color: rgba(255, 255, 255, 0.7) !important;
        margin-top: 5px !important;
        width: 100% !important;
    }

    /* =========================================
       User Request: FIX TEXT CENTERING AND VISIBILITY (NUCLEAR)
       ========================================= */
    .character-info {
        background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 60%, transparent 100%) !important;
        padding: 40px 10px 30px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        /* STRICT CENTER */
        justify-content: flex-end !important;

        text-align: center !important;
        /* STRICT CENTER */
        width: 100% !important;
        left: 0 !important;
        bottom: 0 !important;
    }

    .character-name {
        font-size: clamp(1.2rem, 5vw, 1.5rem) !important;
        line-height: 1.2 !important;
        margin-bottom: 10px !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9) !important;

        /* STRICT WRAPPING */
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;

        /* Center and Constrain */
        width: 100% !important;
        max-width: 90% !important;
        margin-left: auto !important;
        margin-right: auto !important;

        display: block !important;
        text-align: center !important;
    }

    .character-role {
        font-size: 0.9rem !important;
        text-transform: uppercase !important;
        letter-spacing: 2px !important;
        color: #818CF8 !important;
        /* Primary Light */
        font-weight: 600 !important;
        opacity: 1 !important;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;
        text-align: center !important;
        width: 100% !important;
    }

    /* =========================================
       User Request: FIX MOBILE CONTACT TERMINAL
       ========================================= */
    #contact .section-container,
    #contact .rpg-container {
        padding: 0 10px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #contact .rpg-box {
        padding: 25px 15px !important;
        /* More space for text */
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        min-height: auto !important;
        margin: 0 !important;
    }

    #contact .rpg-text,
    #contact .rpg-text-area {
        font-size: 1.1rem !important;
        line-height: 1.4 !important;
        margin-bottom: 20px !important;
        text-align: left !important;
        width: 100% !important;
        white-space: normal !important;
        font-family: 'VT323', monospace !important;
    }

    #contact .rpg-options {
        display: flex;
        /* REMOVED !important to allow JS hiding */
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 15px !important;
        width: 100% !important;
    }

    #contact .rpg-option {
        width: 100% !important;
        max-width: 100% !important;
        text-align: left !important;
        padding: 15px !important;
        font-size: 1.1rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        white-space: normal !important;
        height: auto !important;
        font-family: 'VT323', monospace !important;
    }

    #contact .rpg-option::before {
        margin-right: 12px !important;
        flex-shrink: 0 !important;
    }
}

/* =========================================
   User Request: Desktop Project Reorder
   ========================================= */
@media (min-width: 769px) {
    .character-select {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        /* Keep as row for desktop skew effect */
        justify-content: center !important;
    }

    /* 1. Atre (First) */
    .character-card[data-project="atre"] {
        order: 1 !important;
    }

    /* Shift Text ONLY to preserve overlay */
    .character-card[data-project="atre"] .character-name,
    .character-card[data-project="atre"] .character-role {
        transform: translateX(12vw) !important;
        display: block !important;
    }

    /* 2. Astral */
    .character-card[data-project="astral"] {
        order: 2 !important;
    }

    /* 3. Diplomacy */
    .character-card[data-project="diplomacy"] {
        order: 3 !important;
    }

    /* Verify Diplomacy Center */
    .character-card[data-project="diplomacy"] .character-info {
        text-align: center !important;
        align-items: center !important;
    }

    /* 4. Vail */
    .character-card[data-project="vail"] {
        order: 4 !important;
    }

    /* 5. Galactic (Last) */
    .character-card[data-project="galactic"] {
        order: 5 !important;
    }

    /* Shift Text Center (Reset) */
    .character-card[data-project="galactic"] .character-name,
    .character-card[data-project="galactic"] .character-role {
        transform: translateX(0) !important;
        display: block !important;
    }

    /* Fix "What We Do" Heading Position (Move Right & Down) */
    .split-header .section-title {
        position: relative !important;
        left: 80px !important;
        top: 70px !important;
    }
}

/* Modal Description Formatting - Enable newlines */
#csModalChallenge {
    white-space: pre-line !important;
    line-height: 1.7;
    margin-bottom: 2rem;
}

/* FIX RPG CURSOR POSITION (Inline with text) */
.rpg-cursor {
    display: none !important;
}

#rpg-text::after {
    content: '|';
    display: inline;
    animation: rpg-blink 1s step-end infinite;
    margin-left: 1px;
}

@keyframes rpg-blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* Service Page Label styling - Increased size for readability */
.service-label {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    display: block !important;
    margin-bottom: 0.5rem !important;
    color: #a0a0b0 !important;
    text-transform: uppercase;
}

/* Service Divider - Subtle separation */
.service-detail-block {
    position: relative;
    padding-bottom: 15px !important;
    margin-bottom: 15px !important;
}

.service-detail-block:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    /* Center it a bit */
    width: 80%;
    height: 1px;
    background: linear-gradient(to right,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.08) 20%,
            rgba(0, 0, 0, 0.08) 80%,
            rgba(0, 0, 0, 0) 100%);
}

/* Mobile Fixes - Inventory CTA Button & Layout */
@media (max-width: 768px) {
    .inventory-main {
        min-width: 0 !important;
        width: 100% !important;
        align-items: center !important;
        padding-top: 100px !important;
        /* Reduced from 280px but enough to clear char */
    }

    .inventory-mesh.grid-hex {
        margin-right: 0 !important;
        justify-content: center !important;
        gap: 10px !important;
    }

    .inventory-cta {
        margin-right: 0 !important;
        margin-left: 0 !important;
        justify-content: center !important;
        width: 100% !important;
        padding: 0 20px !important;
        margin-top: 40px !important;
    }

    .hex-link-styled {
        width: 100% !important;
        max-width: 300px !important;
        justify-content: center !important;
        font-size: 0.9rem !important;
    }
}

/* Modal Fixes - High Z-Index & Mobile Positioning */
.case-study-modal {
    z-index: 10000 !important;
}

.modal-close {
    z-index: 10001 !important;
}

@media (max-width: 768px) {
    .modal-close {
        top: max(30px, env(safe-area-inset-top) + 20px) !important;
        right: 20px !important;
        background: rgba(20, 20, 20, 0.9) !important;
        width: 44px;
        height: 44px;
        border: 1px solid rgba(255, 255, 255, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    }
}

/* Mobile Stats Marquee Styles */
.stats-marquee-mobile {
    display: none;
    /* Hidden on desktop */
    overflow: hidden;
    width: 100%;
    padding: 20px 0;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.stats-track {
    display: flex;
    gap: 40px;
    width: max-content;
    animation: statsScroll 12s linear infinite;
    align-items: center;
}

@keyframes statsScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@media (max-width: 900px) {

    /* Cover large phones/tablets */
    .stats-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 30px 15px !important;
        text-align: center !important;
        margin-top: 20px !important;
    }

    .stats-marquee-mobile {
        display: none !important;
    }

    .stats-grid .stat-divider {
        display: none !important;
    }

    .stats-grid .stat-number {
        font-size: 2.5rem !important;
        background: none !important;
        -webkit-text-fill-color: #818CF8 !important;
        color: #818CF8 !important;
    }

    .stats-grid .stat-suffix {
        font-size: 1.8rem !important;
        background: none !important;
        -webkit-text-fill-color: #818CF8 !important;
        color: #818CF8 !important;
    }

    .stats-grid .stat-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Make the 5th stat span both columns so it perfectly centers at the bottom */
    .stats-grid .stat-item:last-child {
        grid-column: 1 / -1 !important;
        margin-top: 10px !important;
    }

    /* Force proper centering on the labels when they line break */
    .stats-grid .stat-label {
        text-align: center !important;
        margin-top: 5px !important;
    }
}

/* Disable Scroll Snap on Mobile */
@media (max-width: 900px) {

    html,
    body {
        scroll-snap-type: none !important;
        scroll-behavior: auto !important;
    }

    section,
    .section-container,
    .hero,
    .projects,
    div:not(.character-select):not(.character-card) {
        scroll-snap-align: none !important;
        scroll-snap-stop: normal !important;
    }

    /* Swipe Indicator Styles */
    .mobile-swipe-indicator {
        display: flex !important;
        align-items: center;
        justify-content: center;
        margin-top: 15px;
        gap: 8px;
        color: var(--text-secondary);
        font-size: 0.85rem;
        opacity: 0.8;
        animation: swipePulse 2s infinite ease-in-out;
    }

    .mobile-swipe-indicator svg {
        width: 18px;
        height: 18px;
        fill: currentColor;
    }

    @keyframes swipePulse {

        0%,
        100% {
            transform: translateX(0);
            opacity: 0.6;
        }

        50% {
            transform: translateX(10px);
            opacity: 1;
        }
    }
}

/* =========================================
   Mobile Overrides for Hero image & Projects 
   ========================================= */
@media (max-width: 900px) {

    /* Swap hero video for image */
    .hero-video {
        display: none !important;
    }

    .hero-image-mobile {
        display: block !important;
        width: 100%;
        height: 100%;
        object-fit: cover !important;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
    }

    /* Remove animation on projects section & colorize on mobile */
    .character-card,
    .character-image,
    .character-image img {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
        -webkit-filter: grayscale(0%) brightness(1) saturate(1) !important;
        filter: grayscale(0%) brightness(1) saturate(1) !important;
    }

    .character-card::before,
    .character-card::after {
        animation: none !important;
        transition: none !important;
        display: none !important;
    }

    /* Target Profile Banner Animation overloads on mobile */
    .banner-expansion-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        transition: none !important;
        transform: none !important;
        animation: none !important;
    }

    .banner-expansion-wrapper::before,
    .banner-expansion-wrapper::after {
        animation: none !important;
        display: none !important;
    }

    .banner-img {
        object-position: center !important;
        aspect-ratio: auto !important;
        min-height: 0 !important;
        height: auto !important;
        width: 100% !important;
    }

    /* Keep the gradient small and only at the very bottom to act as a soft transition rather than a full dark overlay */
    .banner-gradient {
        height: 60px !important;
        background: linear-gradient(to top, var(--bg-dark) 0%, rgba(8, 8, 22, 0.4) 50%, transparent 100%) !important;
    }

    /* --- CRITICAL MOBILE PERFORMANCE FIXES --- */
    /* 
       Disabling the fixed SVG filter and mix-blend-mode overlay. 
       These operations force the mobile GPU to recalculate every pixel on every scroll frame, 
       causing massive lag, especially over dark sections.
    */
    .paper-texture {
        display: none !important;
        opacity: 0 !important;
        filter: none !important;
        mix-blend-mode: normal !important;
    }

    /* 
       Removing all fixed SVG background noise layers, scanline animations, and pseudo-element overloads. 
       These overlapping layers of transparency + SVG filters completely destroy FPS on older mobile chips.
    */
    body::before,
    body::after,
    .stats::before,
    .stats::after,
    #projects::before,
    #projects::after,
    #services::before,
    #services::after,
    .rpg-contact::before,
    .rpg-contact::after,
    .footer::before,
    .footer::after,
    .glitch-marquee-wrapper::before,
    .glitch-marquee-wrapper::after,
    .testimonials::before,
    .testimonials::after,
    .section-container::before,
    .section-container::after,
    .bento-box-item::before,
    .bento-box-item::after {
        display: none !important;
        background: none !important;
        animation: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}