:root {
    /* Dark Theme Color System */
    --dark-bg-primary: #0d0d0d;
    --dark-bg-secondary: #1a1a1a;
    --dark-bg-elevated: #262626;
    --dark-bg-card: #1f1f1f;
    
    --dark-text-primary: #f5f5f5;
    --dark-text-secondary: #a0a0a0;
    --dark-text-muted: #737373;
    
    --dark-border-primary: #404040;
    --dark-border-secondary: #2a2a2a;
    
    --accent-orange: #DD4124;
    --accent-orange-hover: #C53A20;
    --accent-orange-subtle: rgba(221, 65, 36, 0.1);
    
    /* Legacy variables for compatibility */
    --m5-black: #0d0d0d;
    --m5-charcoal: #1a1a1a;
    --m5-gray-dark: #f5f5f5;
    --m5-gray: #a0a0a0;
    --m5-gray-light: #737373;
    --m5-white: #f5f5f5;
    --m5-accent: #DD4124;
    --m5-accent-hover: #C53A20;
    --m5-border: #404040;
    --m5-blue: #23394e;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--dark-text-primary);
    background: var(--dark-bg-secondary);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    cursor: default;
}

/* Scrollbar Styling - Override Neodigm yellow scrollbar */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb {
    background: var(--accent-orange);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-orange-hover);
    background-clip: content-box;
}

/* Firefox scrollbar styling */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--accent-orange) rgba(0, 0, 0, 0.05);
}

/* Override Neodigm yellow highlight colors */
::selection {
    background: var(--accent-orange);
    color: white;
}

::-moz-selection {
    background: var(--accent-orange);
    color: white;
}

/* Neodigm widget overrides */
neodigm-widget *,
neodigm-widget *::selection,
neodigm-widget *::-moz-selection {
    background: var(--accent-orange) !important;
    color: white !important;
}

/* Override any yellow colors from Neodigm */
[style*="yellow"],
[style*="#ffff"],
[style*="#ff0"],
.neodigm-yellow,
.n55-yellow {
    background: var(--accent-orange) !important;
    border-color: var(--accent-orange) !important;
}

/* Footer headings - make unselectable */
.footer__column h4 {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* MachVive hero title - make unselectable */
.machvive-title {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Sticky note marker text - make unselectable */
.masonry-item h4 {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Interactive Cursor */
.brand-card-enhanced, .tool-card-enhanced, .metric-card, .engagement-detail {
    cursor: pointer;
}

.nav__link, .contact__email {
    cursor: pointer;
    transition: color 0.2s ease;
}

.nav__link:hover, .contact__email:hover {
    color: var(--m5-accent);
}

/* Scroll Progress Bar */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--m5-accent), var(--m5-blue));
    z-index: 1001;
    transform-origin: left;
    transform: scaleX(0);
}

/* Navigation - MachVive Style */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: transparent;
    transition: all 0.4s ease;
    box-shadow: none;
}

.nav--scrolled {
    background: rgba(13, 13, 13, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav__logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: #fafafa;
    transition: color 0.3s ease;
}

.nav__logo:hover {
    color: #DD4124;
}

.nav__logo-text {
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: -0.02em;
}

.nav__logo-mark {
    background: #DD4124;
    color: white;
    padding: 0.4rem 0.6rem;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1;
    border-radius: 3px;
}

.nav__logo-img {
    height: 60px;
    width: auto;
    transition: opacity 0.3s ease;
    margin: -5px 0;
}

.nav__logo:hover .nav__logo-img {
    opacity: 0.8;
}

.brand-blue {
    color: var(--m5-blue);
}

.text-gray {
    color: var(--m5-gray);
}

/* Fix white dots appearing next to section headings */
.brands__header,
.tools__header,
.brands__title,
.tools__title,
.brands__header *,
.tools__header *,
.brands__title *,
.tools__title * {
    list-style: none;
    list-style-type: none;
    text-decoration: none;
}

.brands__header::before,
.tools__header::before,
.brands__title::before,
.tools__title::before,
.brands__header *::before,
.tools__header *::before,
.brands__title *::before,
.tools__title *::before {
    content: "";
    display: none;
}


.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 2rem;
}

.hero-logo-section {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-logo {
    width: min(300px, 90%);
    height: auto;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 2rem;
    transition: all 0.3s ease;
}

.hero-logo:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.hero-text-section {
    text-align: left;
}

.hero-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 300;
    margin: 0 0 0.5rem 0;
    color: #fafafa;
    line-height: 1.1;
}

.hero-subtitle {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    color: #DD4124;
    line-height: 1.1;
}

.hero-tagline {
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    font-weight: 300;
    margin: 0 0 1.5rem 0;
    color: #fafafa;
    line-height: 1.1;
}

.hero-description {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    font-weight: 300;
    line-height: 1.4;
}

.hero-underline {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    margin-top: 4rem;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }
    
    .hero-text-section {
        text-align: center;
    }
    
    .hero-logo {
        width: min(250px, 80%);
        margin: 0 auto;
    }
}

.nav__menu {
    display: flex;
    list-style: none;
    gap: 0;
    align-items: center;
}

/* Clean MachVive nav links */
.nav__link {
    color: #888;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 400;
    transition: color 0.3s ease;
    padding: 0.75rem 1.5rem;
    position: relative;
}

.nav__link:hover {
    color: #fafafa;
}

/* GitHub link special styling */
.nav__link.github-link {
    margin-left: 1rem;
    padding: 0.5rem;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.nav__link.github-link:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}

.nav__toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

.nav__toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--m5-gray-dark);
    margin: 5px 0;
    transition: all 0.3s ease;
}

/* MachVive Style Hero Section */
.machvive-hero {
    padding: 60px 20px;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Enhanced whiteboard background with better integration */
.machvive-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 30% 70%, rgba(221, 65, 36, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.05) 0%, transparent 40%),
        url('img/whiteboard.jpg');
    background-size: 
        100% 100%,
        100% 100%,
        cover;
    background-position: center;
    background-attachment: fixed;
    opacity: 0.18;
    mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%);
    pointer-events: none;
    z-index: 0;
}

/* Enhanced spotlight effect */
.machvive-hero::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1200px;
    height: 600px;
    background: radial-gradient(ellipse at center, 
        rgba(255, 255, 255, 0.12) 0%, 
        rgba(255, 255, 255, 0.08) 25%,
        rgba(221, 65, 36, 0.03) 40%,
        rgba(255, 255, 255, 0.04) 60%,
        transparent 80%
    );
    pointer-events: none;
    z-index: 1;
}

.machvive-hero-wrapper {
    position: relative;
    z-index: 2;
}

.machvive-hero-content {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.machvive-content-section {
    position: relative;
    z-index: 2;
}




.machvive-title {
    display: none;
    font-weight: 200;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--dark-text-primary);
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

.machvive-title strong {
    color: #DD4124 !important;
    font-weight: 400;
    -webkit-text-fill-color: #DD4124 !important;
    text-shadow: 0 0 20px rgba(221, 65, 36, 0.8) !important;
}

.machvive-title-line {
    display: block;
    opacity: 1;
}


/* Section Base */
.section {
    padding: 4rem 2rem;
    position: relative;
}

/* Subtle grid overlay */
.section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.3;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.container--narrow {
    max-width: 900px;
}

/* About Sections - Convert to light theme */
#about {
    padding: 0;
}

.about-section {
    padding: 6rem 2rem;
    position: relative;
}

/* Built for Traction - Light theme with grid and spotlight */
.about-section--light {
    background: var(--dark-bg-secondary);
    position: relative;
    overflow: hidden;
}

/* Light grid background pattern */
.about-section--light::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: 
        linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%),
        linear-gradient(180deg, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-image: 
        linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%),
        linear-gradient(180deg, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-composite: intersect;
    -webkit-mask-composite: intersect;
    pointer-events: none;
    z-index: 0;
}

/* Spotlight effect for traction section */
.about-section--light::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 400px;
    background: radial-gradient(ellipse at center, 
        rgba(255, 255, 255, 0.08) 0%, 
        rgba(255, 255, 255, 0.05) 20%,
        rgba(255, 255, 255, 0.03) 35%,
        rgba(255, 255, 255, 0.01) 50%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 1;
}

/* Convert dark sections to light gray */
.about-section--dark {
    background: var(--m5-light-bg);
    color: var(--m5-gray-dark);
    margin: 0 calc(-50vw + 50%);
    padding-left: calc(50vw - 50% + 2rem);
    padding-right: calc(50vw - 50% + 2rem);
    position: relative;
    overflow: hidden;
    margin-top: -4rem;
    padding-top: 10rem;
    z-index: 2;
}

/* Fix mobile overflow for full-width sections */
@media (max-width: 900px) {
    .about-section--dark {
        margin: 0;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

.about-section--dark::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 10% 50%, rgba(221, 65, 36, 0.03) 0%, transparent 40%),
        radial-gradient(circle at 90% 50%, rgba(35, 57, 78, 0.03) 0%, transparent 40%);
    pointer-events: none;
    animation: aboutLightShift 15s ease-in-out infinite;
}

@keyframes aboutLightShift {
    0%, 100% { transform: scale(1) translateX(0); }
    50% { transform: scale(1.1) translateX(-50px); }
}

.about-section--dark h3 {
    color: var(--m5-gray-dark);
}

.about-section--dark h3 span {
    color: #DD4124;
}

.about-section--dark p {
    color: var(--m5-gray);
}

.about-section__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.about-section__grid--reverse {
    direction: rtl;
}

.about-section__grid--reverse > * {
    direction: ltr;
}

.about-section__content h3 {
    font-size: 2.75rem;
    font-weight: 300;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.about-section__content h3 span {
    font-weight: 600;
    color: var(--m5-accent);
}

.about-section__content p {
    font-size: 1.0625rem;
    line-height: 1.7;
}

/* Modern Glass Conference Window */
.masonry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1.5rem;
    grid-auto-flow: dense;
    padding: 3rem 2rem;
    position: relative;
    z-index: 2;
    min-height: 600px;
    overflow: visible;
    
    /* Glass window perspective */
    transform: perspective(1200px) rotateY(-5deg) rotateX(2deg);
    transform-origin: center center;
    
    /* Modern glass appearance */
    background: 
        /* Faint grid reflection */
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        /* Glass tint */
        linear-gradient(135deg, 
            rgba(255, 255, 255, 0.1) 0%, 
            rgba(255, 255, 255, 0.05) 25%,
            rgba(0, 0, 0, 0.02) 50%,
            rgba(255, 255, 255, 0.08) 75%,
            rgba(255, 255, 255, 0.12) 100%
        );
    background-size: 40px 40px, 40px 40px, 100% 100%;
    
    /* Glass material properties */
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    
    /* Realistic glass shadows and reflections */
    box-shadow: 
        /* Main shadow */
        0 25px 50px rgba(0, 0, 0, 0.25),
        /* Reflection highlight */
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        /* Bottom reflection */
        inset 0 -1px 0 rgba(255, 255, 255, 0.1),
        /* Side reflections */
        inset 1px 0 0 rgba(255, 255, 255, 0.1),
        inset -1px 0 0 rgba(255, 255, 255, 0.05);
}

/* Whiteboard schematic drawings on glass */
.masonry-grid::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        /* SVG schematic shapes - More visible */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(221,65,36,0.25)" stroke-width="3"><rect x="50" y="80" width="80" height="60" rx="4"/><text x="90" y="115" font-family="monospace" font-size="12" fill="rgba(221,65,36,0.22)" text-anchor="middle">TECH</text></g></svg>'),
        
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(37,99,235,0.25)" stroke-width="3"><circle cx="300" cy="120" r="35"/><text x="300" y="125" font-family="monospace" font-size="10" fill="rgba(37,99,235,0.22)" text-anchor="middle">MARKET</text></g></svg>'),
        
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(221,65,36,0.22)" stroke-width="3"><path d="M80 250 L120 250 L110 270 L90 270 Z"/><text x="105" y="265" font-family="monospace" font-size="10" fill="rgba(221,65,36,0.20)" text-anchor="middle">GO</text></g></svg>'),
        
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(37,99,235,0.22)" stroke-width="3"><line x1="200" y1="60" x2="200" y2="340"/><line x1="60" y1="200" x2="340" y2="200"/><polyline points="190,70 200,60 210,70"/><polyline points="330,190 340,200 330,210"/></g></svg>'),
        
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(221,65,36,0.23)" stroke-width="3"><polyline points="120,300 160,280 200,290 240,260 280,270"/><circle cx="120" cy="300" r="4" fill="rgba(221,65,36,0.18)"/><circle cx="160" cy="280" r="4" fill="rgba(221,65,36,0.18)"/><circle cx="200" cy="290" r="4" fill="rgba(221,65,36,0.18)"/><circle cx="240" cy="260" r="4" fill="rgba(221,65,36,0.18)"/><circle cx="280" cy="270" r="4" fill="rgba(221,65,36,0.18)"/></g></svg>'),
        
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(37,99,235,0.22)" stroke-width="3"><rect x="250" y="200" width="100" height="80" rx="8"/><line x1="270" y1="220" x2="330" y2="220"/><line x1="270" y1="240" x2="320" y2="240"/><line x1="270" y1="260" x2="310" y2="260"/></g></svg>'),
        
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(221,65,36,0.21)" stroke-width="3"><path d="M60 150 L100 130 L140 150 L120 190 L80 190 Z"/><text x="100" y="165" font-family="monospace" font-size="9" fill="rgba(221,65,36,0.19)" text-anchor="middle">PLAN</text></g></svg>'),
        
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(37,99,235,0.24)" stroke-width="3"><rect x="270" y="330" width="20" height="35" rx="2" fill="rgba(37,99,235,0.08)"/><rect x="295" y="315" width="20" height="50" rx="2" fill="rgba(37,99,235,0.10)"/><rect x="320" y="300" width="20" height="65" rx="2" fill="rgba(37,99,235,0.12)"/><line x1="260" y1="370" x2="350" y2="370" stroke-width="2"/><line x1="260" y1="370" x2="260" y2="290" stroke-width="2"/><text x="280" y="385" font-family="monospace" font-size="8" fill="rgba(37,99,235,0.20)" text-anchor="middle">JAN</text><text x="305" y="385" font-family="monospace" font-size="8" fill="rgba(37,99,235,0.20)" text-anchor="middle">FEB</text><text x="330" y="385" font-family="monospace" font-size="8" fill="rgba(37,99,235,0.20)" text-anchor="middle">MAR</text></g></svg>'),
        
        /* Additional schematic elements */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(221,65,36,0.20)" stroke-width="2"><circle cx="100" cy="350" r="25"/><text x="100" y="355" font-family="monospace" font-size="8" fill="rgba(221,65,36,0.18)" text-anchor="middle">MVP</text></g></svg>'),
        
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(37,99,235,0.21)" stroke-width="2"><path d="M350 80 L380 80 L380 120 L350 120 Z"/><path d="M355 90 L375 90"/><path d="M355 100 L370 100"/><path d="M355 110 L365 110"/></g></svg>'),
        
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(221,65,36,0.19)" stroke-width="2"><path d="M30 30 L80 50 L120 30 L150 60 L180 40"/><circle cx="30" cy="30" r="3" fill="rgba(221,65,36,0.15)"/><circle cx="80" cy="50" r="3" fill="rgba(221,65,36,0.15)"/><circle cx="120" cy="30" r="3" fill="rgba(221,65,36,0.15)"/><circle cx="150" cy="60" r="3" fill="rgba(221,65,36,0.15)"/><circle cx="180" cy="40" r="3" fill="rgba(221,65,36,0.15)"/></g></svg>'),
        
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(37,99,235,0.20)" stroke-width="2"><ellipse cx="350" cy="250" rx="40" ry="25"/><text x="350" y="255" font-family="monospace" font-size="8" fill="rgba(37,99,235,0.18)" text-anchor="middle">SCALE</text></g></svg>'),
        
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(221,65,36,0.18)" stroke-width="2"><path d="M200 350 L220 330 L240 350 L220 370 Z"/><text x="220" y="355" font-family="monospace" font-size="7" fill="rgba(221,65,36,0.16)" text-anchor="middle">?</text></g></svg>'),
        
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(37,99,235,0.19)" stroke-width="2"><path d="M50 200 L90 200"/><path d="M70 180 L70 220"/><path d="M60 190 L80 190"/><path d="M60 210 L80 210"/></g></svg>'),
        
        /* User journey flow */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(221,65,36,0.24)" stroke-width="3"><circle cx="30" cy="100" r="15"/><text x="30" y="105" font-family="monospace" font-size="8" fill="rgba(221,65,36,0.20)" text-anchor="middle">A</text><path d="M45 100 L70 100"/><circle cx="85" cy="100" r="15"/><text x="85" y="105" font-family="monospace" font-size="8" fill="rgba(221,65,36,0.20)" text-anchor="middle">B</text><path d="M100 100 L125 100"/><circle cx="140" cy="100" r="15"/><text x="140" y="105" font-family="monospace" font-size="8" fill="rgba(221,65,36,0.20)" text-anchor="middle">C</text></g></svg>'),
        
        /* Conversion funnel */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(37,99,235,0.23)" stroke-width="2"><path d="M320 50 L380 50 L370 90 L330 90 Z"/><text x="355" y="75" font-family="monospace" font-size="7" fill="rgba(37,99,235,0.19)" text-anchor="middle">LEADS</text><path d="M330 90 L370 90 L365 120 L335 120 Z"/><text x="350" y="110" font-family="monospace" font-size="6" fill="rgba(37,99,235,0.19)" text-anchor="middle">QUAL</text><path d="M335 120 L365 120 L355 140 L345 140 Z"/><text x="350" y="135" font-family="monospace" font-size="5" fill="rgba(37,99,235,0.19)" text-anchor="middle">SALE</text></g></svg>'),
        
        /* Org chart structure */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(221,65,36,0.21)" stroke-width="2"><rect x="170" y="300" width="30" height="20" rx="3"/><text x="185" y="315" font-family="monospace" font-size="6" fill="rgba(221,65,36,0.18)" text-anchor="middle">CEO</text><line x1="185" y1="300" x2="185" y2="280"/><line x1="155" y1="280" x2="215" y2="280"/><rect x="140" y="260" width="30" height="15" rx="2"/><text x="155" y="272" font-family="monospace" font-size="5" fill="rgba(221,65,36,0.18)" text-anchor="middle">CTO</text><rect x="200" y="260" width="30" height="15" rx="2"/><text x="215" y="272" font-family="monospace" font-size="5" fill="rgba(221,65,36,0.18)" text-anchor="middle">CMO</text><line x1="155" y1="280" x2="155" y2="275"/><line x1="215" y1="280" x2="215" y2="275"/></g></svg>'),
        
        /* Timeline with milestones */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(37,99,235,0.22)" stroke-width="2"><line x1="40" y1="350" x2="160" y2="350"/><circle cx="60" cy="350" r="5" fill="rgba(37,99,235,0.15)"/><text x="60" y="340" font-family="monospace" font-size="6" fill="rgba(37,99,235,0.18)" text-anchor="middle">Q1</text><circle cx="100" cy="350" r="5" fill="rgba(37,99,235,0.15)"/><text x="100" y="340" font-family="monospace" font-size="6" fill="rgba(37,99,235,0.18)" text-anchor="middle">Q2</text><circle cx="140" cy="350" r="5" fill="rgba(37,99,235,0.15)"/><text x="140" y="340" font-family="monospace" font-size="6" fill="rgba(37,99,235,0.18)" text-anchor="middle">Q3</text></g></svg>'),
        
        /* Process workflow arrows */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(221,65,36,0.20)" stroke-width="2"><rect x="280" y="140" width="40" height="25" rx="3"/><text x="300" y="157" font-family="monospace" font-size="6" fill="rgba(221,65,36,0.17)" text-anchor="middle">PROC</text><path d="M320 152 L340 152"/><polyline points="335,147 340,152 335,157"/><rect x="345" y="140" width="40" height="25" rx="3"/><text x="365" y="157" font-family="monospace" font-size="6" fill="rgba(221,65,36,0.17)" text-anchor="middle">OUT</text></g></svg>'),
        
        /* Strategy matrix */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(37,99,235,0.21)" stroke-width="2"><rect x="10" y="320" width="80" height="60" rx="4"/><line x1="50" y1="320" x2="50" y2="380"/><line x1="10" y1="350" x2="90" y2="350"/><text x="30" y="340" font-family="monospace" font-size="5" fill="rgba(37,99,235,0.17)" text-anchor="middle">HIGH</text><text x="70" y="340" font-family="monospace" font-size="5" fill="rgba(37,99,235,0.17)" text-anchor="middle">LOW</text><text x="30" y="370" font-family="monospace" font-size="5" fill="rgba(37,99,235,0.17)" text-anchor="middle">COST</text><text x="70" y="370" font-family="monospace" font-size="5" fill="rgba(37,99,235,0.17)" text-anchor="middle">VALUE</text></g></svg>'),
        
        /* Revenue projection curve */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(221,65,36,0.22)" stroke-width="2"><path d="M320 380 Q340 360 360 340 Q380 320 400 300"/><circle cx="320" cy="380" r="3" fill="rgba(221,65,36,0.16)"/><circle cx="340" cy="360" r="3" fill="rgba(221,65,36,0.16)"/><circle cx="360" cy="340" r="3" fill="rgba(221,65,36,0.16)"/><circle cx="380" cy="320" r="3" fill="rgba(221,65,36,0.16)"/><text x="350" y="390" font-family="monospace" font-size="6" fill="rgba(221,65,36,0.18)" text-anchor="middle">REV</text></g></svg>'),
        
        /* Feature roadmap boxes */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(37,99,235,0.20)" stroke-width="2"><rect x="180" y="180" width="25" height="20" rx="2"/><text x="192" y="195" font-family="monospace" font-size="5" fill="rgba(37,99,235,0.16)" text-anchor="middle">V1</text><rect x="210" y="180" width="25" height="20" rx="2"/><text x="222" y="195" font-family="monospace" font-size="5" fill="rgba(37,99,235,0.16)" text-anchor="middle">V2</text><rect x="240" y="180" width="25" height="20" rx="2"/><text x="252" y="195" font-family="monospace" font-size="5" fill="rgba(37,99,235,0.16)" text-anchor="middle">V3</text><line x1="205" y1="190" x2="210" y2="190"/><line x1="235" y1="190" x2="240" y2="190"/></g></svg>'),
        
        /* SWOT analysis grid */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(221,65,36,0.23)" stroke-width="2"><rect x="60" y="60" width="120" height="100" rx="4"/><line x1="120" y1="60" x2="120" y2="160"/><line x1="60" y1="110" x2="180" y2="110"/><text x="90" y="90" font-family="monospace" font-size="6" fill="rgba(221,65,36,0.19)" text-anchor="middle">STRENGTHS</text><text x="150" y="90" font-family="monospace" font-size="6" fill="rgba(221,65,36,0.19)" text-anchor="middle">WEAK</text><text x="90" y="140" font-family="monospace" font-size="6" fill="rgba(221,65,36,0.19)" text-anchor="middle">OPPORT</text><text x="150" y="140" font-family="monospace" font-size="6" fill="rgba(221,65,36,0.19)" text-anchor="middle">THREAT</text></g></svg>'),
        
        /* Network diagram */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(37,99,235,0.21)" stroke-width="2"><circle cx="200" cy="200" r="15" fill="rgba(37,99,235,0.12)"/><circle cx="160" cy="160" r="10" fill="rgba(37,99,235,0.10)"/><circle cx="240" cy="160" r="10" fill="rgba(37,99,235,0.10)"/><circle cx="160" cy="240" r="10" fill="rgba(37,99,235,0.10)"/><circle cx="240" cy="240" r="10" fill="rgba(37,99,235,0.10)"/><line x1="200" y1="200" x2="160" y2="160"/><line x1="200" y1="200" x2="240" y2="160"/><line x1="200" y1="200" x2="160" y2="240"/><line x1="200" y1="200" x2="240" y2="240"/><text x="200" y="205" font-family="monospace" font-size="6" fill="rgba(37,99,235,0.18)" text-anchor="middle">HUB</text></g></svg>'),
        
        /* Mind map branches */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(221,65,36,0.22)" stroke-width="2"><circle cx="300" cy="300" r="20" fill="rgba(221,65,36,0.08)"/><text x="300" y="305" font-family="monospace" font-size="7" fill="rgba(221,65,36,0.18)" text-anchor="middle">IDEA</text><path d="M280 300 Q250 300 220 280"/><path d="M320 300 Q350 300 380 320"/><path d="M300 280 Q300 250 280 220"/><path d="M300 320 Q300 350 320 380"/><circle cx="220" cy="280" r="8"/><circle cx="380" cy="320" r="8"/><circle cx="280" cy="220" r="8"/><circle cx="320" cy="380" r="8"/></g></svg>'),
        
        /* Pie chart segments */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(37,99,235,0.24)" stroke-width="3"><circle cx="100" cy="100" r="40"/><path d="M100 100 L100 60 A40 40 0 0 1 128 72 Z" fill="rgba(37,99,235,0.12)"/><path d="M100 100 L128 72 A40 40 0 0 1 140 100 Z" fill="rgba(37,99,235,0.08)"/><path d="M100 100 L140 100 A40 40 0 0 1 100 140 Z" fill="rgba(37,99,235,0.15)"/><text x="100" y="160" font-family="monospace" font-size="7" fill="rgba(37,99,235,0.20)" text-anchor="middle">MARKET</text></g></svg>'),
        
        /* Workflow swimlanes */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(221,65,36,0.20)" stroke-width="2"><rect x="30" y="30" width="180" height="25" rx="3"/><rect x="30" y="60" width="180" height="25" rx="3"/><rect x="30" y="90" width="180" height="25" rx="3"/><line x1="30" y1="55" x2="210" y2="55"/><line x1="30" y1="85" x2="210" y2="85"/><text x="40" y="47" font-family="monospace" font-size="6" fill="rgba(221,65,36,0.17)" text-anchor="start">DESIGN</text><text x="40" y="77" font-family="monospace" font-size="6" fill="rgba(221,65,36,0.17)" text-anchor="start">DEV</text><text x="40" y="107" font-family="monospace" font-size="6" fill="rgba(221,65,36,0.17)" text-anchor="start">TEST</text><rect x="120" y="35" width="30" height="15" rx="2" fill="rgba(221,65,36,0.10)"/><rect x="80" y="65" width="40" height="15" rx="2" fill="rgba(221,65,36,0.10)"/><rect x="160" y="95" width="25" height="15" rx="2" fill="rgba(221,65,36,0.10)"/></g></svg>'),
        
        /* Decision tree */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(37,99,235,0.22)" stroke-width="2"><rect x="170" y="40" width="30" height="20" rx="3"/><text x="185" y="55" font-family="monospace" font-size="6" fill="rgba(37,99,235,0.18)" text-anchor="middle">START</text><line x1="185" y1="60" x2="185" y2="80"/><path d="M185 80 L155 100"/><path d="M185 80 L215 100"/><circle cx="155" cy="100" r="12"/><text x="155" y="105" font-family="monospace" font-size="5" fill="rgba(37,99,235,0.16)" text-anchor="middle">YES</text><circle cx="215" cy="100" r="12"/><text x="215" y="105" font-family="monospace" font-size="5" fill="rgba(37,99,235,0.16)" text-anchor="middle">NO</text></g></svg>'),
        
        /* Value proposition canvas */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(221,65,36,0.21)" stroke-width="2"><circle cx="350" cy="150" r="35"/><rect x="300" y="150" width="35" height="50" rx="4"/><line x1="335" y1="175" x2="350" y2="175"/><text x="350" y="160" font-family="monospace" font-size="6" fill="rgba(221,65,36,0.17)" text-anchor="middle">VALUE</text><text x="318" y="180" font-family="monospace" font-size="6" fill="rgba(221,65,36,0.17)" text-anchor="middle">PROP</text></g></svg>'),
        
        /* Orange gear element */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(221,65,36,0.25)" stroke-width="2"><circle cx="180" cy="350" r="30"/><path d="M180 320 L185 325 L175 325 Z"/><path d="M210 350 L205 355 L205 345 Z"/><path d="M180 380 L175 375 L185 375 Z"/><path d="M150 350 L155 345 L155 355 Z"/><path d="M201 329 L206 324 L196 334 Z"/><path d="M201 371 L196 376 L206 366 Z"/><path d="M159 371 L164 376 L154 366 Z"/><path d="M159 329 L154 334 L164 324 Z"/><circle cx="180" cy="350" r="18" stroke="rgba(221,65,36,0.20)"/><circle cx="180" cy="350" r="8" fill="rgba(221,65,36,0.12)"/><text x="180" y="355" font-family="monospace" font-size="6" fill="rgba(221,65,36,0.20)" text-anchor="middle">PROC</text></g></svg>');
        
    background-size: 
        450px 450px, 420px 420px, 470px 470px, 490px 490px, 440px 440px, 460px 460px, 410px 410px, 400px 400px,
        380px 380px, 370px 370px, 390px 390px, 420px 420px, 360px 360px, 350px 350px,
        430px 430px, 395px 395px, 370px 370px, 405px 405px, 385px 385px, 410px 410px, 390px 390px, 375px 375px, 400px 400px,
        410px 410px, 385px 385px, 425px 425px, 395px 395px, 380px 380px, 405px 405px, 390px 390px, 375px 375px, 400px 400px;
    background-position: 
        5% 15%, 70% 10%, 15% 70%, 75% 75%, 45% 85%, 85% 45%, 8% 35%, 90% 90%,
        25% 5%, 95% 25%, 0% 50%, 60% 65%, 40% 25%, 20% 40%,
        12% 55%, 88% 20%, 30% 90%, 65% 55%, 78% 88%, 52% 35%, 35% 18%, 90% 65%, 18% 88%,
        70% 80%, 85% 85%, 75% 95%, 90% 75%, 65% 90%, 80% 95%, 95% 80%, 85% 95%, 75% 85%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 1;
    border-radius: 6px;
    opacity: 1;
}

/* Variation for second masonry grid - Focus on Operations & Execution */
.about-section:nth-child(2) .masonry-grid::before {
    background-image:
        /* Operations-focused schematics */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(221,65,36,0.20)" stroke-width="2"><rect x="30" y="30" width="180" height="25" rx="3"/><rect x="30" y="60" width="180" height="25" rx="3"/><rect x="30" y="90" width="180" height="25" rx="3"/><line x1="30" y1="55" x2="210" y2="55"/><line x1="30" y1="85" x2="210" y2="85"/><text x="40" y="47" font-family="monospace" font-size="6" fill="rgba(221,65,36,0.17)" text-anchor="start">DESIGN</text><text x="40" y="77" font-family="monospace" font-size="6" fill="rgba(221,65,36,0.17)" text-anchor="start">DEV</text><text x="40" y="107" font-family="monospace" font-size="6" fill="rgba(221,65,36,0.17)" text-anchor="start">TEST</text><rect x="120" y="35" width="30" height="15" rx="2" fill="rgba(221,65,36,0.10)"/><rect x="80" y="65" width="40" height="15" rx="2" fill="rgba(221,65,36,0.10)"/><rect x="160" y="95" width="25" height="15" rx="2" fill="rgba(221,65,36,0.10)"/></g></svg>'),
        
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(37,99,235,0.22)" stroke-width="2"><rect x="170" y="40" width="30" height="20" rx="3"/><text x="185" y="55" font-family="monospace" font-size="6" fill="rgba(37,99,235,0.18)" text-anchor="middle">START</text><line x1="185" y1="60" x2="185" y2="80"/><path d="M185 80 L155 100"/><path d="M185 80 L215 100"/><circle cx="155" cy="100" r="12"/><text x="155" y="105" font-family="monospace" font-size="5" fill="rgba(37,99,235,0.16)" text-anchor="middle">YES</text><circle cx="215" cy="100" r="12"/><text x="215" y="105" font-family="monospace" font-size="5" fill="rgba(37,99,235,0.16)" text-anchor="middle">NO</text></g></svg>'),
        
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(221,65,36,0.24)" stroke-width="2"><circle cx="60" cy="300" r="25"/><path d="M60 275 L65 280 L55 280 Z"/><path d="M85 300 L80 305 L80 295 Z"/><path d="M60 325 L55 320 L65 320 Z"/><path d="M35 300 L40 295 L40 305 Z"/><path d="M79 281 L84 276 L74 286 Z"/><path d="M79 319 L74 324 L84 314 Z"/><path d="M41 319 L46 324 L36 314 Z"/><path d="M41 281 L36 286 L46 276 Z"/><circle cx="60" cy="300" r="15" stroke="rgba(221,65,36,0.18)"/><circle cx="60" cy="300" r="6" fill="rgba(221,65,36,0.10)"/><text x="60" y="305" font-family="monospace" font-size="5" fill="rgba(221,65,36,0.18)" text-anchor="middle">OPS</text></g></svg>'),
        
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(37,99,235,0.21)" stroke-width="2"><circle cx="200" cy="200" r="15" fill="rgba(37,99,235,0.12)"/><circle cx="160" cy="160" r="10" fill="rgba(37,99,235,0.10)"/><circle cx="240" cy="160" r="10" fill="rgba(37,99,235,0.10)"/><circle cx="160" cy="240" r="10" fill="rgba(37,99,235,0.10)"/><circle cx="240" cy="240" r="10" fill="rgba(37,99,235,0.10)"/><line x1="200" y1="200" x2="160" y2="160"/><line x1="200" y1="200" x2="240" y2="160"/><line x1="200" y1="200" x2="160" y2="240"/><line x1="200" y1="200" x2="240" y2="240"/><text x="200" y="205" font-family="monospace" font-size="6" fill="rgba(37,99,235,0.18)" text-anchor="middle">TEAM</text></g></svg>'),
        
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(221,65,36,0.20)" stroke-width="2"><rect x="280" y="140" width="40" height="25" rx="3"/><text x="300" y="157" font-family="monospace" font-size="6" fill="rgba(221,65,36,0.17)" text-anchor="middle">PROC</text><path d="M320 152 L340 152"/><polyline points="335,147 340,152 335,157"/><rect x="345" y="140" width="40" height="25" rx="3"/><text x="365" y="157" font-family="monospace" font-size="6" fill="rgba(221,65,36,0.17)" text-anchor="middle">OUT</text></g></svg>'),
        
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(37,99,235,0.24)" stroke-width="3"><rect x="270" y="330" width="20" height="35" rx="2" fill="rgba(37,99,235,0.08)"/><rect x="295" y="315" width="20" height="50" rx="2" fill="rgba(37,99,235,0.10)"/><rect x="320" y="300" width="20" height="65" rx="2" fill="rgba(37,99,235,0.12)"/><line x1="260" y1="370" x2="350" y2="370" stroke-width="2"/><line x1="260" y1="370" x2="260" y2="290" stroke-width="2"/><text x="280" y="385" font-family="monospace" font-size="8" fill="rgba(37,99,235,0.20)" text-anchor="middle">Q1</text><text x="305" y="385" font-family="monospace" font-size="8" fill="rgba(37,99,235,0.20)" text-anchor="middle">Q2</text><text x="330" y="385" font-family="monospace" font-size="8" fill="rgba(37,99,235,0.20)" text-anchor="middle">Q3</text></g></svg>'),
        
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(221,65,36,0.21)" stroke-width="2"><rect x="170" y="300" width="30" height="20" rx="3"/><text x="185" y="315" font-family="monospace" font-size="6" fill="rgba(221,65,36,0.18)" text-anchor="middle">CEO</text><line x1="185" y1="300" x2="185" y2="280"/><line x1="155" y1="280" x2="215" y2="280"/><rect x="140" y="260" width="30" height="15" rx="2"/><text x="155" y="272" font-family="monospace" font-size="5" fill="rgba(221,65,36,0.18)" text-anchor="middle">CTO</text><rect x="200" y="260" width="30" height="15" rx="2"/><text x="215" y="272" font-family="monospace" font-size="5" fill="rgba(221,65,36,0.18)" text-anchor="middle">COO</text><line x1="155" y1="280" x2="155" y2="275"/><line x1="215" y1="280" x2="215" y2="275"/></g></svg>'),
        
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(37,99,235,0.20)" stroke-width="2"><rect x="180" y="180" width="25" height="20" rx="2"/><text x="192" y="195" font-family="monospace" font-size="5" fill="rgba(37,99,235,0.16)" text-anchor="middle">V1</text><rect x="210" y="180" width="25" height="20" rx="2"/><text x="222" y="195" font-family="monospace" font-size="5" fill="rgba(37,99,235,0.16)" text-anchor="middle">V2</text><rect x="240" y="180" width="25" height="20" rx="2"/><text x="252" y="195" font-family="monospace" font-size="5" fill="rgba(37,99,235,0.16)" text-anchor="middle">V3</text><line x1="205" y1="190" x2="210" y2="190"/><line x1="235" y1="190" x2="240" y2="190"/></g></svg>'),
        
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(221,65,36,0.19)" stroke-width="2"><path d="M30 30 L80 50 L120 30 L150 60 L180 40"/><circle cx="30" cy="30" r="3" fill="rgba(221,65,36,0.15)"/><circle cx="80" cy="50" r="3" fill="rgba(221,65,36,0.15)"/><circle cx="120" cy="30" r="3" fill="rgba(221,65,36,0.15)"/><circle cx="150" cy="60" r="3" fill="rgba(221,65,36,0.15)"/><circle cx="180" cy="40" r="3" fill="rgba(221,65,36,0.15)"/><text x="100" y="20" font-family="monospace" font-size="6" fill="rgba(221,65,36,0.17)" text-anchor="middle">PERF</text></g></svg>'),
        
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(37,99,235,0.22)" stroke-width="2"><line x1="40" y1="350" x2="160" y2="350"/><circle cx="60" cy="350" r="5" fill="rgba(37,99,235,0.15)"/><text x="60" y="340" font-family="monospace" font-size="6" fill="rgba(37,99,235,0.18)" text-anchor="middle">PLAN</text><circle cx="100" cy="350" r="5" fill="rgba(37,99,235,0.15)"/><text x="100" y="340" font-family="monospace" font-size="6" fill="rgba(37,99,235,0.18)" text-anchor="middle">DO</text><circle cx="140" cy="350" r="5" fill="rgba(37,99,235,0.15)"/><text x="140" y="340" font-family="monospace" font-size="6" fill="rgba(37,99,235,0.18)" text-anchor="middle">CHECK</text></g></svg>');
    background-size: 700px 700px, 680px 680px, 660px 660px, 720px 720px, 640px 640px, 740px 740px, 620px 620px, 600px 600px, 690px 690px, 580px 580px, 710px 710px;
    background-position: 10% 20%, 75% 25%, 20% 75%, 70% 75%, 85% 80%, 75% 90%, 90% 85%, 80% 95%, 65% 85%, 95% 75%, 85% 95%;
}

/* Variation for third masonry grid - Focus on Strategy & Growth */
.about-section:nth-child(3) .masonry-grid::before {
    background-image:
        /* Strategy-focused schematics */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(221,65,36,0.23)" stroke-width="2"><rect x="60" y="60" width="120" height="100" rx="4"/><line x1="120" y1="60" x2="120" y2="160"/><line x1="60" y1="110" x2="180" y2="110"/><text x="90" y="90" font-family="monospace" font-size="6" fill="rgba(221,65,36,0.19)" text-anchor="middle">STRENGTHS</text><text x="150" y="90" font-family="monospace" font-size="6" fill="rgba(221,65,36,0.19)" text-anchor="middle">WEAK</text><text x="90" y="140" font-family="monospace" font-size="6" fill="rgba(221,65,36,0.19)" text-anchor="middle">OPPORT</text><text x="150" y="140" font-family="monospace" font-size="6" fill="rgba(221,65,36,0.19)" text-anchor="middle">THREAT</text></g></svg>'),
        
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(37,99,235,0.24)" stroke-width="3"><circle cx="100" cy="100" r="40"/><path d="M100 100 L100 60 A40 40 0 0 1 128 72 Z" fill="rgba(37,99,235,0.12)"/><path d="M100 100 L128 72 A40 40 0 0 1 140 100 Z" fill="rgba(37,99,235,0.08)"/><path d="M100 100 L140 100 A40 40 0 0 1 100 140 Z" fill="rgba(37,99,235,0.15)"/><text x="100" y="160" font-family="monospace" font-size="7" fill="rgba(37,99,235,0.20)" text-anchor="middle">MARKET</text></g></svg>'),
        
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(221,65,36,0.21)" stroke-width="2"><circle cx="350" cy="150" r="35"/><rect x="300" y="150" width="35" height="50" rx="4"/><line x1="335" y1="175" x2="350" y2="175"/><text x="350" y="160" font-family="monospace" font-size="6" fill="rgba(221,65,36,0.17)" text-anchor="middle">VALUE</text><text x="318" y="180" font-family="monospace" font-size="6" fill="rgba(221,65,36,0.17)" text-anchor="middle">PROP</text></g></svg>'),
        
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(37,99,235,0.23)" stroke-width="2"><path d="M320 50 L380 50 L370 90 L330 90 Z"/><text x="355" y="75" font-family="monospace" font-size="7" fill="rgba(37,99,235,0.19)" text-anchor="middle">LEADS</text><path d="M330 90 L370 90 L365 120 L335 120 Z"/><text x="350" y="110" font-family="monospace" font-size="6" fill="rgba(37,99,235,0.19)" text-anchor="middle">QUAL</text><path d="M335 120 L365 120 L355 140 L345 140 Z"/><text x="350" y="135" font-family="monospace" font-size="5" fill="rgba(37,99,235,0.19)" text-anchor="middle">SALE</text></g></svg>'),
        
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(221,65,36,0.22)" stroke-width="2"><path d="M320 380 Q340 360 360 340 Q380 320 400 300"/><circle cx="320" cy="380" r="3" fill="rgba(221,65,36,0.16)"/><circle cx="340" cy="360" r="3" fill="rgba(221,65,36,0.16)"/><circle cx="360" cy="340" r="3" fill="rgba(221,65,36,0.16)"/><circle cx="380" cy="320" r="3" fill="rgba(221,65,36,0.16)"/><text x="350" y="390" font-family="monospace" font-size="6" fill="rgba(221,65,36,0.18)" text-anchor="middle">REV</text></g></svg>'),
        
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(37,99,235,0.21)" stroke-width="2"><rect x="10" y="320" width="80" height="60" rx="4"/><line x1="50" y1="320" x2="50" y2="380"/><line x1="10" y1="350" x2="90" y2="350"/><text x="30" y="340" font-family="monospace" font-size="5" fill="rgba(37,99,235,0.17)" text-anchor="middle">HIGH</text><text x="70" y="340" font-family="monospace" font-size="5" fill="rgba(37,99,235,0.17)" text-anchor="middle">LOW</text><text x="30" y="370" font-family="monospace" font-size="5" fill="rgba(37,99,235,0.17)" text-anchor="middle">COST</text><text x="70" y="370" font-family="monospace" font-size="5" fill="rgba(37,99,235,0.17)" text-anchor="middle">VALUE</text></g></svg>'),
        
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(221,65,36,0.23)" stroke-width="2"><circle cx="300" cy="50" r="28"/><path d="M300 22 L306 28 L294 28 Z"/><path d="M328 50 L322 56 L322 44 Z"/><path d="M300 78 L294 72 L306 72 Z"/><path d="M272 50 L278 44 L278 56 Z"/><path d="M320 30 L326 24 L314 36 Z"/><path d="M320 70 L314 76 L326 64 Z"/><path d="M280 70 L286 76 L274 64 Z"/><path d="M280 30 L274 36 L286 24 Z"/><circle cx="300" cy="50" r="16" stroke="rgba(221,65,36,0.19)"/><circle cx="300" cy="50" r="7" fill="rgba(221,65,36,0.11)"/><text x="300" y="55" font-family="monospace" font-size="5" fill="rgba(221,65,36,0.19)" text-anchor="middle">STAKE</text></g></svg>'),
        
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(37,99,235,0.22)" stroke-width="2"><line x1="40" y1="350" x2="160" y2="350"/><circle cx="60" cy="350" r="5" fill="rgba(37,99,235,0.15)"/><text x="60" y="340" font-family="monospace" font-size="6" fill="rgba(37,99,235,0.18)" text-anchor="middle">NOW</text><circle cx="100" cy="350" r="5" fill="rgba(37,99,235,0.15)"/><text x="100" y="340" font-family="monospace" font-size="6" fill="rgba(37,99,235,0.18)" text-anchor="middle">SOON</text><circle cx="140" cy="350" r="5" fill="rgba(37,99,235,0.15)"/><text x="140" y="340" font-family="monospace" font-size="6" fill="rgba(37,99,235,0.18)" text-anchor="middle">LATER</text></g></svg>'),
        
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(221,65,36,0.22)" stroke-width="2"><circle cx="300" cy="300" r="20" fill="rgba(221,65,36,0.08)"/><text x="300" y="305" font-family="monospace" font-size="7" fill="rgba(221,65,36,0.18)" text-anchor="middle">VISION</text><path d="M280 300 Q250 300 220 280"/><path d="M320 300 Q350 300 380 320"/><path d="M300 280 Q300 250 280 220"/><path d="M300 320 Q300 350 320 380"/><circle cx="220" cy="280" r="8"/><circle cx="380" cy="320" r="8"/><circle cx="280" cy="220" r="8"/><circle cx="320" cy="380" r="8"/></g></svg>'),
        
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(37,99,235,0.20)" stroke-width="2"><rect x="50" y="50" width="80" height="60" rx="4"/><text x="90" y="85" font-family="monospace" font-size="9" fill="rgba(37,99,235,0.18)" text-anchor="middle">GOALS</text><path d="M90 110 L90 140"/><polyline points="85,135 90,140 95,135"/><rect x="50" y="140" width="80" height="60" rx="4"/><text x="90" y="175" font-family="monospace" font-size="9" fill="rgba(37,99,235,0.18)" text-anchor="middle">ACTION</text></g></svg>'),
        
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><g fill="none" stroke="rgba(221,65,36,0.24)" stroke-width="3"><circle cx="30" cy="100" r="15"/><text x="30" y="105" font-family="monospace" font-size="8" fill="rgba(221,65,36,0.20)" text-anchor="middle">WIN</text><path d="M45 100 L70 100"/><circle cx="85" cy="100" r="15"/><text x="85" y="105" font-family="monospace" font-size="8" fill="rgba(221,65,36,0.20)" text-anchor="middle">$$$</text><path d="M100 100 L125 100"/><circle cx="140" cy="100" r="15"/><text x="140" y="105" font-family="monospace" font-size="8" fill="rgba(221,65,36,0.20)" text-anchor="middle">EXIT</text></g></svg>');
    background-size: 650px 650px, 670px 670px, 630px 630px, 660px 660px, 620px 620px, 680px 680px, 600px 600px, 690px 690px, 610px 610px, 640px 640px, 655px 655px, 625px 625px;
    background-position: 15% 30%, 80% 15%, 25% 80%, 75% 75%, 85% 85%, 90% 75%, 70% 90%, 80% 95%, 65% 80%, 95% 90%, 75% 95%, 85% 80%;
}

/* Reflection animation */
@keyframes glassReflection {
    0%, 100% { 
        background-position: 0% 0%, 0% 0%, 0% 0%;
        opacity: 0.6;
    }
    50% { 
        background-position: 100% 100%, 100% 100%, 50% 50%;
        opacity: 0.8;
    }
}

.masonry-grid::after {
    content: '';
    position: absolute;
    top: 10%;
    left: 10%;
    right: 10%;
    bottom: 10%;
    background: linear-gradient(
        135deg,
        transparent 0%,
        rgba(255, 255, 255, 0.05) 40%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.05) 60%,
        transparent 100%
    );
    animation: glassReflection 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 3;
    border-radius: 10px;
}

.masonry-item {
    padding: 1.5rem;
    position: relative;
    border: none;
    border-radius: 3px;
    z-index: 4;
    transform: rotate(-1deg);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    /* Realistic sticky note on glass effect */
    box-shadow: 
        /* Note shadow on glass */
        0 4px 15px rgba(0, 0, 0, 0.15),
        /* Slight elevation */
        0 8px 25px rgba(0, 0, 0, 0.1),
        /* Tape shadow */
        0 1px 3px rgba(0, 0, 0, 0.2);
    
    /* Crumpled sticky note background with texture */
    background: 
        /* Crumple shadows and texture */
        radial-gradient(ellipse at 15% 25%, rgba(0, 0, 0, 0.08) 2px, transparent 4px),
        radial-gradient(ellipse at 85% 75%, rgba(0, 0, 0, 0.06) 3px, transparent 6px),
        radial-gradient(ellipse at 60% 40%, rgba(0, 0, 0, 0.05) 2px, transparent 4px),
        radial-gradient(ellipse at 30% 80%, rgba(0, 0, 0, 0.04) 1px, transparent 3px),
        /* Wrinkle lines */
        linear-gradient(125deg, transparent 0%, transparent 45%, rgba(0, 0, 0, 0.06) 45%, rgba(0, 0, 0, 0.06) 47%, transparent 47%),
        linear-gradient(75deg, transparent 0%, transparent 60%, rgba(0, 0, 0, 0.04) 60%, rgba(0, 0, 0, 0.04) 62%, transparent 62%),
        /* Base yellow color */
        #FFFF88;
    background-size: 
        20px 25px, 30px 20px, 15px 18px, 12px 15px,
        80px 60px, 70px 90px,
        100% 100%;
}

/* Tape effect on top of sticky notes */
.masonry-item::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 14px;
    background: linear-gradient(45deg, 
        rgba(255, 255, 255, 0.85) 0%,
        rgba(245, 245, 245, 0.9) 50%,
        rgba(255, 255, 255, 0.8) 100%
    );
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05);
    z-index: 5;
}

/* Hover effect - note lifts off glass */
.masonry-item:hover {
    transform: rotate(0deg) translateY(-5px) scale(1.02);
    box-shadow: 
        0 15px 30px rgba(0, 0, 0, 0.2),
        0 25px 50px rgba(0, 0, 0, 0.15);
}

.masonry-item:hover::before {
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}


/* Conference room notes variety */
.masonry-item:nth-child(1) {
    background: #FFFF88;
    transform: rotate(1.8deg);
}

.masonry-item:nth-child(2) {
    background: rgba(255, 255, 255, 0.9);
    transform: rotate(-1.2deg);
    border: 1px solid rgba(200, 200, 200, 0.3);
    /* Handwritten marker note on glass */
    backdrop-filter: blur(2px);
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.1),
        0 4px 15px rgba(0, 0, 0, 0.05);
}

.masonry-item:nth-child(2)::before {
    background: linear-gradient(45deg, 
        rgba(100, 150, 200, 0.3) 0%,
        rgba(120, 170, 220, 0.4) 50%,
        rgba(100, 150, 200, 0.2) 100%
    );
    /* Marker tape effect */
}

.masonry-item:nth-child(3) {
    background: #FFEB3B;
    transform: rotate(2.2deg);
}

.masonry-item:nth-child(4) {
    background: rgba(255, 255, 255, 0.85);
    transform: rotate(-1.5deg);
    border: 1px solid rgba(180, 180, 180, 0.4);
    backdrop-filter: blur(3px);
    /* Another marker note */
    box-shadow: 
        0 3px 10px rgba(0, 0, 0, 0.12),
        0 5px 20px rgba(0, 0, 0, 0.08);
}

.masonry-item:nth-child(4)::before {
    background: linear-gradient(45deg, 
        rgba(200, 100, 150, 0.3) 0%,
        rgba(220, 120, 170, 0.4) 50%,
        rgba(200, 100, 150, 0.2) 100%
    );
    /* Pink marker tape */
}

.masonry-item:nth-child(5) {
    background: #FFB3BA;
    transform: rotate(0.9deg);
}

.about-section--dark .masonry-item {
    background: var(--m5-white);
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}


.masonry-item:nth-child(1) { 
    grid-row: span 2; 
    background-color: var(--m5-white);
    transform: rotate(-2deg);
    clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 0 100%);
}

.masonry-item:nth-child(1)::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 15px;
    height: 15px;
    background: linear-gradient(-45deg, #D8D8D8 0%, #ECECEC 100%);
    clip-path: polygon(0 0, 100% 100%, 0 100%);
    box-shadow: -2px 2px 4px rgba(0,0,0,0.15);
}

.masonry-item:nth-child(2) { 
    background-color: #FAFAFA;
    transform: rotate(1deg);
    clip-path: polygon(12px 100%, 0 calc(100% - 12px), 0 0, 100% 0, 100% 100%);
}

.masonry-item:nth-child(2)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 12px;
    height: 12px;
    background: linear-gradient(45deg, #E0E0E0 0%, #F0F0F0 100%);
    clip-path: polygon(0 0, 100% 100%, 0 100%);
    box-shadow: 2px -2px 4px rgba(0,0,0,0.15);
}

.masonry-item:nth-child(3) { 
    grid-column: span 2; 
    background-color: #F8F8F8;
    transform: rotate(-1deg);
    clip-path: polygon(0 18px, 18px 0, 100% 0, 100% 100%, 0 100%);
}

.masonry-item:nth-child(3)::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, #D5D5D5 0%, #EDEDED 100%);
    clip-path: polygon(0 0, 100% 0, 0 100%);
    box-shadow: 2px 2px 4px rgba(0,0,0,0.15);
}

.masonry-item:nth-child(4) { 
    background-color: #FCFCFC;
    transform: rotate(2deg);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}

.masonry-item:nth-child(4)::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 14px;
    height: 14px;
    background: linear-gradient(-135deg, #D8D8D8 0%, #EEEEEE 100%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    box-shadow: -2px -2px 4px rgba(0,0,0,0.15);
}

.masonry-item:nth-child(5) { 
    grid-row: span 2; 
    background-color: var(--m5-white);
    transform: rotate(-1.5deg);
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}

.masonry-item:nth-child(5)::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 16px;
    height: 16px;
    background: linear-gradient(-45deg, #D6D6D6 0%, #EBEBEB 100%);
    clip-path: polygon(0 0, 100% 100%, 0 100%);
    box-shadow: -2px 2px 4px rgba(0,0,0,0.15);
}

.masonry-item:hover {
    transform: translateY(-4px) rotate(0deg) scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
    z-index: 10;
}

.masonry-item h4 {
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
    color: var(--accent-orange);
    font-family: 'Kalam', 'Comic Sans MS', 'Marker Felt', cursive;
    line-height: 1.3;
    letter-spacing: 0.02em;
    transform: rotate(-0.5deg);
}

/* Staggered marker colors for headlines */
.masonry-item:nth-child(1) h4 {
    color: #DD4124; /* Orange */
    text-shadow: 0 1px 2px rgba(221, 65, 36, 0.3);
}

.masonry-item:nth-child(2) h4 {
    color: #666; /* Gray */
    text-shadow: 0 1px 2px rgba(102, 102, 102, 0.3);
}

.masonry-item:nth-child(3) h4 {
    color: #2563eb; /* Blue */
    text-shadow: 0 1px 2px rgba(37, 99, 235, 0.3);
}

.masonry-item:nth-child(4) h4 {
    color: #DD4124; /* Orange */
    text-shadow: 0 1px 2px rgba(221, 65, 36, 0.3);
}

.masonry-item:nth-child(5) h4 {
    color: #666; /* Gray */
    text-shadow: 0 1px 2px rgba(102, 102, 102, 0.3);
}

.masonry-item p {
    font-size: 0.875rem;
    color: #333;
    line-height: 1.5;
}

/* Enhanced Brands Section - MachVive Style */
.brands-enhanced {
    padding: 6rem 2rem;
    position: relative;
    overflow: hidden;
    background: var(--dark-bg-secondary);
}

/* Grid background pattern for brands */
.brands-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: 
        linear-gradient(90deg, transparent 0%, black 15%, black 85%, transparent 100%),
        linear-gradient(180deg, transparent 0%, black 15%, black 85%, transparent 100%);
    -webkit-mask-image: 
        linear-gradient(90deg, transparent 0%, black 15%, black 85%, transparent 100%),
        linear-gradient(180deg, transparent 0%, black 15%, black 85%, transparent 100%);
    mask-composite: intersect;
    -webkit-mask-composite: intersect;
    pointer-events: none;
    z-index: 0;
}

/* Spotlight effect for brands section */
.brands-enhanced::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1000px;
    height: 600px;
    background: radial-gradient(ellipse at center, 
        rgba(255, 255, 255, 0.06) 0%, 
        rgba(255, 255, 255, 0.04) 20%,
        rgba(255, 255, 255, 0.02) 35%,
        rgba(255, 255, 255, 0.01) 50%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 1;
}

@keyframes brandsGradientShift {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.1) rotate(90deg); }
    50% { transform: scale(0.9) rotate(180deg); }
    75% { transform: scale(1.05) rotate(270deg); }
}

.brands-enhanced .particle,
.tools-enhanced .particle {
    display: none;
}

.brands__header {
    text-align: left;
    margin-bottom: 4rem;
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
}

.brands__title {
    font-size: 2.75rem;
    font-weight: 300;
    margin-bottom: 1rem;
    line-height: 1.2;
    color: var(--dark-text-primary);
    text-align: left;
}


@keyframes shimmer {
    0% { transform: translateX(-50%) scaleX(0); }
    50% { transform: translateX(-50%) scaleX(1); }
    100% { transform: translateX(-50%) scaleX(0); }
}

.brands__subtitle {
    font-size: 1.125rem;
    color: var(--dark-text-secondary);
    max-width: 600px;
    margin: 0;
    text-align: left;
}

.brands__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

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

/* Brand cards */
.brand-card-enhanced {
    /* Modern glass appearance */
    background: 
        linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px),
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.1) 0%, 
            rgba(255, 255, 255, 0.05) 25%,
            rgba(0, 0, 0, 0.02) 50%,
            rgba(255, 255, 255, 0.08) 75%,
            rgba(255, 255, 255, 0.12) 100%
        );
    background-size: 50px 50px, 50px 50px, 100% 100%;
    background-attachment: fixed;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border-radius: 12px;
    /* Realistic glass shadows and reflections */
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.12),
        0 25px 50px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1),
        inset 1px 0 0 rgba(255, 255, 255, 0.1),
        inset -1px 0 0 rgba(255, 255, 255, 0.05);
}

.brand-card-enhanced:hover {
    transform: translateY(-8px) rotateY(5deg) rotateX(2deg);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.25),
        0 35px 80px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(255, 255, 255, 0.15),
        inset 1px 0 0 rgba(255, 255, 255, 0.15),
        inset -1px 0 0 rgba(255, 255, 255, 0.08);
    border-color: rgba(221, 65, 36, 0.3);
    backdrop-filter: blur(25px) saturate(200%);
    -webkit-backdrop-filter: blur(25px) saturate(200%);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.brand-card-enhanced:nth-child(1) {
    --brand-color: #DD4124;
    --status-color: #2A7A4F;
}

.brand-card-enhanced:nth-child(2) {
    --brand-color: #23394e;
    --status-color: #F26B38;
}

.card-header {
    padding: 3rem 3rem 0;
    position: relative;
}

.brand-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 1.5rem;
    position: relative;
}

.brand-icon:has(img) {
    width: 500px;
    height: 225px;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

.brand-icon svg {
    width: 100%;
    height: 100%;
    stroke: var(--brand-color, #DD4124);
    fill: none;
    stroke-width: 1.5;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.brand-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.brand-card-enhanced:hover .brand-icon svg,
.brand-card-enhanced:hover .brand-icon img {
    opacity: 1;
    transform: scale(1.1);
}

.brand-card__logo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: left center;
}

.brand-card__logo-text {
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--m5-gray-dark);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.brand-card__logo-text::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--brand-color, #DD4124), transparent);
    transition: left 0.4s ease;
}

.brand-card__logo-mark {
    background: var(--brand-color, #DD4124);
    color: var(--m5-white);
    padding: 0.4rem 0.6rem;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1;
    border-radius: 3px;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.brand-card__logo-mark::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.4s ease;
}

/* Brand Logo Hover Effects */
.brand-card-enhanced:hover .brand-card__logo {
    transform: scale(1.05) translateY(-2px);
}

.brand-card-enhanced:hover .brand-card__logo-text {
    color: var(--brand-color, #DD4124);
    font-weight: 500;
}

.brand-card-enhanced:hover .brand-card__logo-text::after {
    left: 0;
}

.brand-card-enhanced:hover .brand-card__logo-mark {
    transform: scale(1.1) rotateZ(2deg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    background: linear-gradient(135deg, var(--brand-color, #DD4124), color-mix(in srgb, var(--brand-color, #DD4124) 80%, white));
}

.brand-card-enhanced:hover .brand-card__logo-mark::before {
    left: 100%;
}

/* Individual brand color customization */
.brand-card-enhanced:nth-child(1) {
    --brand-color: #DD4124;
}

.brand-card-enhanced:nth-child(2) {
    --brand-color: #2A4F7A;
}

.brand-card__title {
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: 1rem;
    color: var(--m5-gray-dark);
    line-height: 1.3;
}

.brand-card__description {
    color: var(--m5-gray);
    line-height: 1.6;
    margin-bottom: 2rem;
}

.card-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 1.5rem 3rem;
    background: var(--m5-light-bg);
    border-top: 1px solid var(--m5-border);
    border-bottom: 1px solid var(--m5-border);
    margin-bottom: 2rem;
}

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

.stat-value {
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--brand-color, #DD4124);
    display: block;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.stat-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--m5-gray);
}

.card-content {
    padding: 0 3rem 3rem;
}

.brand-features {
    margin-bottom: 2rem;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.25rem;
}

.feature-icon {
    width: 40px;
    height: 40px;
    background: var(--m5-light-bg);
    border: 1px solid var(--m5-border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
}

.feature-icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--brand-color, #DD4124);
}

.feature-content h4 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--m5-gray-dark);
    margin-bottom: 0.25rem;
}

.feature-content p {
    font-size: 0.875rem;
    color: var(--m5-gray);
    line-height: 1.4;
}

.feature-metric {
    font-size: 0.75rem;
    color: var(--brand-color, #DD4124);
    font-weight: 600;
    margin-top: 0.25rem;
}

.card-cta {
    padding: 2rem 3rem;
    background: var(--m5-light-bg);
    border-top: 1px solid var(--m5-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brand-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--m5-gray-dark);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9375rem;
    transition: all 0.3s ease;
}

.brand-card__link:hover {
    gap: 0.75rem;
    color: var(--brand-color, #DD4124);
}

.card-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--m5-gray);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--status-color, #2A7A4F);
    position: relative;
}

.status-dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--status-color, #2A7A4F);
    opacity: 0.3;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.3; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.1; }
    100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.3; }
}

/* Tools Section - MachVive Style */
.tools-enhanced {
    padding: 6rem 2rem;
    position: relative;
    overflow: hidden;
    background: var(--dark-bg-secondary);
}

/* Grid background pattern for tools */
.tools-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 70px 70px;
    mask-image: 
        linear-gradient(90deg, transparent 0%, black 15%, black 85%, transparent 100%),
        linear-gradient(180deg, transparent 0%, black 15%, black 85%, transparent 100%);
    -webkit-mask-image: 
        linear-gradient(90deg, transparent 0%, black 15%, black 85%, transparent 100%),
        linear-gradient(180deg, transparent 0%, black 15%, black 85%, transparent 100%);
    mask-composite: intersect;
    -webkit-mask-composite: intersect;
    pointer-events: none;
    z-index: 0;
}

/* Spotlight effect for tools section */
.tools-enhanced::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 900px;
    height: 500px;
    background: radial-gradient(ellipse at center, 
        rgba(255, 255, 255, 0.05) 0%, 
        rgba(255, 255, 255, 0.03) 20%,
        rgba(255, 255, 255, 0.02) 35%,
        rgba(255, 255, 255, 0.01) 50%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 1;
}

@keyframes toolsGradientShift {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.1) rotate(90deg); }
    50% { transform: scale(0.9) rotate(180deg); }
    75% { transform: scale(1.05) rotate(270deg); }
}

.tools__header {
    text-align: left;
    margin-bottom: 4rem;
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
}

.tools__title {
    font-size: 2.75rem;
    font-weight: 300;
    margin-bottom: 1rem;
    line-height: 1.2;
    color: var(--dark-text-primary);
    text-align: left;
}

.tools__subtitle {
    font-size: 1.125rem;
    color: var(--dark-text-secondary);
    max-width: 600px;
    margin: 0;
    text-align: left;
}

.tools__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

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

.tool-card-enhanced {
    /* Modern glass appearance */
    background: 
        linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px),
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.1) 0%, 
            rgba(255, 255, 255, 0.05) 25%,
            rgba(0, 0, 0, 0.02) 50%,
            rgba(255, 255, 255, 0.08) 75%,
            rgba(255, 255, 255, 0.12) 100%
        );
    background-size: 50px 50px, 50px 50px, 100% 100%;
    background-attachment: fixed;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border-radius: 16px;
    /* Realistic glass shadows and reflections */
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.12),
        0 25px 50px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1),
        inset 1px 0 0 rgba(255, 255, 255, 0.1),
        inset -1px 0 0 rgba(255, 255, 255, 0.05);
}

.open-source-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(42, 122, 79, 0.9);
    color: white;
    padding: 6px 16px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.open-source-badge svg {
    width: 16px;
    height: 16px;
    fill: white;
}

.tool-card-enhanced:hover {
    transform: translateY(-8px) rotateY(-3deg) rotateX(1deg);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.25),
        0 35px 80px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(255, 255, 255, 0.15),
        inset 1px 0 0 rgba(255, 255, 255, 0.15),
        inset -1px 0 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(25px) saturate(200%);
    -webkit-backdrop-filter: blur(25px) saturate(200%);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tool-card-enhanced:nth-child(1) {
    --tool-color: #DD4124;
    --status-color: #2A7A4F;
}

.tool-card-enhanced:nth-child(2) {
    --tool-color: #dc3545;
    --status-color: #dc3545;
}

.tool-header {
    padding: 3rem 3rem 0;
    position: relative;
}

.tool-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 1.5rem;
    position: relative;
}

.tool-icon:has(img) {
    width: 400px;
    height: 180px;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

.tool-icon:has(.tool-logo-text) {
    width: 400px;
    height: 180px;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

.tool-logo-text {
    font-size: 3rem;
    font-weight: 700;
    color: var(--dark-text-primary);
    text-align: center;
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.tool-icon svg {
    width: 100%;
    height: 100%;
    stroke: var(--tool-color, #DD4124);
    fill: none;
    stroke-width: 1.5;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.tool-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.tool-card-enhanced:hover .tool-icon svg {
    opacity: 1;
    transform: scale(1.1);
}

.tool-card-enhanced:hover .tool-icon img {
    opacity: 1;
    transform: scale(1.1);
}

.tool-card-enhanced:hover .tool-logo-text {
    transform: scale(1.05);
    color: var(--tool-color, #DD4124);
}

.tool-content {
    padding: 0 3rem 3rem;
}

.tool-card__title {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 1rem;
    color: var(--m5-gray-dark);
    line-height: 1.3;
}

.tool-card__description {
    color: var(--m5-gray);
    line-height: 1.6;
    margin-bottom: 2rem;
}

.tool-features {
    margin-bottom: 2rem;
}

.tool-feature-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.25rem;
}

.tool-feature-icon {
    width: 40px;
    height: 40px;
    background: var(--m5-light-bg);
    border: 1px solid var(--m5-border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
}

.tool-feature-icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--tool-color, #DD4124);
}

.tool-feature-content h4 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--m5-gray-dark);
    margin-bottom: 0.25rem;
}

.tool-feature-content p {
    font-size: 0.875rem;
    color: var(--m5-gray);
    line-height: 1.4;
}

.tool-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 1.5rem 3rem;
    background: var(--m5-light-bg);
    border-top: 1px solid var(--m5-border);
    border-bottom: 1px solid var(--m5-border);
    margin-bottom: 2rem;
}

.tool-stat-item {
    text-align: center;
}

.tool-stat-value {
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--tool-color, #DD4124);
    display: block;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.tool-stat-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--m5-gray);
}

.tool-cta {
    padding: 2rem 3rem;
    background: var(--m5-light-bg);
    border-top: 1px solid var(--m5-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tool-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--m5-gray-dark);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9375rem;
    transition: all 0.3s ease;
}

.tool-card__link:hover {
    gap: 0.75rem;
    color: var(--tool-color, #DD4124);
}

.tool-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--m5-gray);
}

.tool-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--status-color, #2A7A4F);
    position: relative;
}

.tool-status-dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--status-color, #2A7A4F);
    opacity: 0.3;
    animation: pulse 2s infinite;
}

/* How We Embed Section - MachVive Style */
.engagement-model {
    padding: 6rem 2rem;
    background: var(--dark-bg-secondary);
    position: relative;
    overflow: hidden;
}

/* Grid background pattern for engagement model */
.engagement-model::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 90px 90px;
    mask-image: 
        linear-gradient(90deg, transparent 0%, black 15%, black 85%, transparent 100%),
        linear-gradient(180deg, transparent 0%, black 15%, black 85%, transparent 100%);
    -webkit-mask-image: 
        linear-gradient(90deg, transparent 0%, black 15%, black 85%, transparent 100%),
        linear-gradient(180deg, transparent 0%, black 15%, black 85%, transparent 100%);
    mask-composite: intersect;
    -webkit-mask-composite: intersect;
    pointer-events: none;
    z-index: 0;
}

/* Spotlight effect for engagement model */
.engagement-model::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1200px;
    height: 700px;
    background: radial-gradient(ellipse at center, 
        rgba(255, 255, 255, 0.04) 0%, 
        rgba(255, 255, 255, 0.03) 20%,
        rgba(255, 255, 255, 0.02) 35%,
        rgba(255, 255, 255, 0.01) 50%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 1;
}

.engagement-model__header {
    text-align: left;
    margin-bottom: 4rem;
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
}

.engagement-model__title {
    font-size: 2.75rem;
    font-weight: 300;
    margin-bottom: 1rem;
    line-height: 1.2;
    color: var(--dark-text-primary);
    text-align: left;
}

.engagement-model__subtitle {
    font-size: 1.125rem;
    color: var(--dark-text-secondary);
    max-width: 600px;
    margin: 0;
    text-align: left;
}

/* Timeline */
.engagement-timeline {
    max-width: 1200px;
    margin: 0 auto 5rem;
    position: relative;
    padding: 4rem 0;
}

.timeline-stages {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

.timeline-stage {
    flex: 1;
    text-align: center;
}

.timeline-node {
    width: 60px;
    height: 60px;
    margin: 0 auto 1.5rem;
    background: var(--dark-bg-card);
    border: 2px solid var(--dark-border-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s ease;
}

.timeline-stage:nth-child(odd) .timeline-node {
    border-color: #DD4124;
}

.timeline-stage:nth-child(even) .timeline-node {
    border-color: #23394e;
}

.timeline-node:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.timeline-node svg {
    width: 24px;
    height: 24px;
    stroke: var(--m5-gray);
}

.timeline-stage h3 {
    font-size: 1.125rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--m5-gray-dark);
}

.timeline-stage p {
    font-size: 0.875rem;
    color: var(--m5-gray);
    line-height: 1.5;
    max-width: 200px;
    margin: 0 auto;
}

/* Metrics */
.engagement-metrics {
    max-width: 1000px;
    margin: 0 auto 5rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

.metric-card {
    /* Modern glass appearance */
    background: 
        linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px),
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.1) 0%, 
            rgba(255, 255, 255, 0.05) 25%,
            rgba(0, 0, 0, 0.02) 50%,
            rgba(255, 255, 255, 0.08) 75%,
            rgba(255, 255, 255, 0.12) 100%
        );
    background-size: 50px 50px, 50px 50px, 100% 100%;
    background-attachment: fixed;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 2rem;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
    border-radius: 8px;
    /* Realistic glass shadows and reflections */
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.12),
        0 25px 50px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1),
        inset 1px 0 0 rgba(255, 255, 255, 0.1),
        inset -1px 0 0 rgba(255, 255, 255, 0.05);
}

.metric-card:hover {
    transform: translateY(-5px);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.25),
        0 35px 80px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(255, 255, 255, 0.15),
        inset 1px 0 0 rgba(255, 255, 255, 0.15),
        inset -1px 0 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(25px) saturate(200%);
    -webkit-backdrop-filter: blur(25px) saturate(200%);
}

.metric-value {
    font-size: 2.5rem;
    font-weight: 200;
    line-height: 1;
    margin-bottom: 0.5rem;
    color: #DD4124;
}

.metric-label {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--m5-gray);
}

/* Engagement Details */
.engagement-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
    margin-top: 5rem;
    margin-bottom: -4rem;
    text-align: left;
    position: relative;
    z-index: 10;
}

.engagement-detail {
    /* Modern glass appearance */
    background: 
        linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px),
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.1) 0%, 
            rgba(255, 255, 255, 0.05) 25%,
            rgba(0, 0, 0, 0.02) 50%,
            rgba(255, 255, 255, 0.08) 75%,
            rgba(255, 255, 255, 0.12) 100%
        );
    background-size: 50px 50px, 50px 50px, 100% 100%;
    background-attachment: fixed;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 2.5rem;
    transition: all 0.3s ease;
    border-radius: 8px;
    /* Realistic glass shadows and reflections */
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.12),
        0 25px 50px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1),
        inset 1px 0 0 rgba(255, 255, 255, 0.1),
        inset -1px 0 0 rgba(255, 255, 255, 0.05);
}

.engagement-detail:hover {
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.25),
        0 35px 80px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(255, 255, 255, 0.15),
        inset 1px 0 0 rgba(255, 255, 255, 0.15),
        inset -1px 0 0 rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
    backdrop-filter: blur(25px) saturate(200%);
    -webkit-backdrop-filter: blur(25px) saturate(200%);
}

.engagement-detail h3 {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 1rem;
    color: var(--dark-text-primary);
}

.engagement-detail p {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--dark-text-secondary);
    margin-bottom: 1.5rem;
}

.engagement-detail ul {
    list-style: none;
}

.engagement-detail li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--dark-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.engagement-detail li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--m5-accent);
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1;
}

/* Philosophy Section - Keep dark for contrast */
.philosophy {
    background: var(--m5-black);
    color: var(--m5-white);
    position: relative;
    overflow: hidden;
    padding: 6rem 2rem;
    margin-top: -6rem;
    padding-top: 10rem;
    z-index: 5;
}

/* Whiteboard parallax background */
.philosophy::before {
    content: '';
    position: absolute;
    top: -10%;
    left: -5%;
    width: 110%;
    height: 110%;
    background-image: url('img/whiteboard.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    opacity: 0.15;
    z-index: 0;
    will-change: transform;
}

.philosophy__content {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.philosophy__title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 300;
    letter-spacing: -0.02em;
    margin-bottom: 3rem;
    text-align: center;
    position: relative;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
}


.philosophy__text {
    font-size: 1.125rem;
    line-height: 1.8;
    margin-bottom: 2rem;
    position: relative;
}

.philosophy__text strong {
    color: #DD4124;
    font-weight: 500;
    position: relative;
    transition: all 0.3s ease;
}

.philosophy__text strong::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: #DD4124;
    transition: width 0.3s ease;
}

.philosophy__text strong:hover::after {
    width: 100%;
}

/* Contact Section - Light theme */
.contact {
    text-align: center;
    padding: 10rem 2rem;
    background: var(--dark-bg-secondary);
    position: relative;
    overflow: hidden;
}

.contact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(rgba(200, 200, 200, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(200, 200, 200, 0.03) 1px, transparent 1px);
    background-size: 50px 50px, 50px 50px;
    mask-image: linear-gradient(90deg, 
        transparent 0%, 
        black 15%, 
        black 85%, 
        transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, 
        transparent 0%, 
        black 15%, 
        black 85%, 
        transparent 100%);
    pointer-events: none;
    z-index: 0;
}

.contact__title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 300;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
    color: var(--dark-text-primary);
    position: relative;
    z-index: 1;
}

.contact__title .forward-text {
    color: var(--m5-accent);
    display: inline-block;
    position: relative;
    overflow: hidden;
}

.contact__title .forward-text::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--m5-white);
    transition: none;
}

.contact__title .forward-text.animate::before {
    animation: slideReveal 0.6s ease-out forwards;
}

@keyframes slideReveal {
    to {
        left: 100%;
    }
}

.contact__subtitle {
    font-size: 1.25rem;
    color: var(--dark-text-secondary);
    margin-bottom: 3rem;
    position: relative;
    z-index: 1;
}

.contact__email {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--m5-accent);
    text-decoration: none;
    font-weight: 500;
    font-size: 1.25rem;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.contact__email:hover {
    transform: translateY(-2px);
    gap: 0.75rem;
}

/* Footer - Light theme */
.footer {
    background: var(--m5-light-bg);
    padding: 4rem 2rem 2rem;
    position: relative;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
}

.footer__content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 4rem;
    margin-bottom: 3rem;
}

.footer__brand h3 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.footer__logo-text {
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--m5-gray-dark);
}

.footer__logo-mark {
    background: linear-gradient(135deg, #DD4124 0%, #23394e 100%);
    color: var(--m5-white);
    padding: 0.5rem 0.75rem;
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 3px;
}

.footer__description {
    line-height: 1.6;
    margin-bottom: 1rem;
    color: var(--m5-gray);
}

.footer__column h4 {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1.5rem;
    color: var(--m5-gray-dark);
}

.footer__links {
    list-style: none;
}

.footer__links li {
    margin-bottom: 0.75rem;
}

.footer__links a {
    color: var(--m5-gray);
    text-decoration: none;
    font-size: 0.9375rem;
    transition: all 0.2s ease;
    position: relative;
    display: inline-block;
}

.footer__links a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--m5-accent);
    transition: width 0.3s ease;
}

.footer__links a:hover {
    color: var(--m5-gray-dark);
}

.footer__links a:hover::after {
    width: 100%;
}

.footer__bottom {
    padding-top: 2rem;
    border-top: 1px solid var(--m5-border);
    text-align: center;
    font-size: 0.875rem;
    color: var(--m5-gray);
}

/* Mobile menu responsive styles */
@media (max-width: 900px) {
    /* Fix potential overflow issues */
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }
    
    .nav__container {
        padding: 1rem;
        max-width: 100%;
    }
    
    .nav__menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 300px;
        height: 100vh;
        background: var(--dark-bg-primary);
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 1.5rem;
        padding: 6rem 2rem 2rem;
        transition: right 0.3s ease;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
        z-index: 999;
        overflow-y: auto;
    }

    .nav__menu--open {
        right: 0;
    }

    .nav__menu li {
        width: 100%;
    }

    .nav__link {
        display: block;
        width: 100%;
        text-align: center;
        padding: 1rem;
        color: var(--dark-text-primary);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        font-size: 1rem;
    }

    .nav__link:hover {
        background: rgba(221, 65, 36, 0.1);
        color: var(--accent-orange);
    }

    .nav__toggle {
        display: block;
        z-index: 1001;
        position: relative;
    }

    .nav__toggle span {
        background: var(--dark-text-primary);
    }

    .nav__toggle--open span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .nav__toggle--open span:nth-child(2) {
        opacity: 0;
    }

    .nav__toggle--open span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }
    
    /* Add overlay for mobile menu */
    body.menu-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 998;
    }

    .about-section__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .about-section__grid--reverse {
        direction: ltr;
    }

    .brands__grid,
    .tools__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .brand-card-enhanced,
    .tool-card-enhanced {
        max-width: 500px;
        margin: 0 auto;
    }

    .card-stats,
    .tool-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
        padding: 1rem 1.5rem;
    }

    .stat-value,
    .tool-stat-value {
        font-size: 1.25rem;
    }

    .card-cta,
    .tool-cta {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

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

    .timeline-stages {
        flex-direction: column;
        gap: 2rem;
    }

    .footer__content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
}

/* Fade In Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards;
}

/* Comprehensive Mobile Responsive Design */
@media (max-width: 900px) {
    /* Base adjustments */
    body {
        font-size: 14px;
    }

    .container {
        padding: 0 1rem;
        max-width: 100%;
    }

    /* Hero Section */
    .machvive-hero {
        padding: 60px 20px;
        min-height: 80vh;
        text-align: center;
        max-width: 100vw;
        overflow: hidden;
        position: relative;
    }
    
    /* Hide gears on mobile to improve readability */
    .machvive-hero .js-gear {
        display: none !important;
    }
    
    /* Make whiteboard more visible and properly sized on mobile */
    .machvive-hero::before {
        opacity: 0.25 !important;
        background-size: cover !important;
        background-position: center center !important;
        background-attachment: scroll !important;
    }
    
    .machvive-hero::after {
        width: 90%;
        height: 80%;
        transform: translate(-50%, -50%);
    }

    .machvive-title {
        font-size: clamp(2.2rem, 7vw, 3.5rem);
        line-height: 1.3;
        margin-bottom: 2rem;
        font-weight: 300;
        letter-spacing: -0.02em;
    }

    .machvive-title-line {
        display: block;
        margin-bottom: 0.3rem;
    }

    /* About Section */
    .about-section {
        padding: 4rem 1rem;
    }

    .about-section__grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .about-section__title {
        font-size: clamp(1.8rem, 5vw, 2.2rem);
        margin-bottom: 1.5rem;
        font-weight: 400;
        line-height: 1.4;
    }

    .about-section__text {
        font-size: 1rem;
        line-height: 1.7;
    }
    
    .about-section__content h3 {
        font-size: clamp(1.8rem, 5vw, 2.2rem);
        font-weight: 400;
        margin-bottom: 1rem;
    }
    
    .about-section__content p {
        font-size: 1rem;
        line-height: 1.7;
    }

    /* Masonry Items */
    .masonry-container {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 0 1rem;
    }
    
    .masonry-grid {
        padding: 2rem 1rem;
        gap: 2rem;
        /* Allow markers to overflow on mobile */
        overflow: visible;
    }

    .masonry-item {
        padding: 1.5rem;
        margin-bottom: 1rem;
    }

    .masonry-item h4 {
        font-size: 0.8rem;
        margin-bottom: 0.5rem;
    }

    .masonry-item p {
        font-size: 0.875rem;
        line-height: 1.5;
    }

    /* Brands and Tools */
    .brands-enhanced,
    .tools-enhanced {
        padding: 3rem 1rem;
    }

    .brands__header,
    .tools__header {
        padding-left: 0;
        text-align: center;
        margin-bottom: 2rem;
    }
    
    .brands__title,
    .tools__title {
        font-size: clamp(1.8rem, 5vw, 2.2rem);
        font-weight: 400;
        margin-bottom: 0.5rem;
    }
    
    .brands__subtitle,
    .tools__subtitle {
        font-size: 1rem;
        line-height: 1.6;
        opacity: 0.8;
    }
    
    .brand-card__description,
    .tool-card__description {
        font-size: 0.9rem;
        line-height: 1.6;
        margin: 1rem 0;
    }


    .brands__subtitle,
    .tools__subtitle {
        font-size: 1rem;
        text-align: center;
    }

    .brand-card-enhanced,
    .tool-card-enhanced {
        max-width: 100%;
        margin: 0;
    }

    .card-header,
    .tool-header {
        padding: 2rem 2rem 0;
    }

    .card-content,
    .tool-content {
        padding: 0 2rem 2rem;
    }

    .card-stats,
    .tool-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
        padding: 1rem 2rem;
    }

    .stat-value,
    .tool-stat-value {
        font-size: 1.25rem;
    }

    .card-cta,
    .tool-cta {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
        padding: 1.5rem 2rem;
    }

    /* Tool Icon Adjustments */
    .tool-icon:has(img) {
        width: 60vw !important;
        height: 20vw !important;
        max-width: 400px;
        max-height: 150px;
        margin-bottom: 1rem;
    }
    
    /* Brand Icon Adjustments */
    .brand-icon:has(img) {
        width: 280px !important;
        height: 120px !important;
        margin: 0 auto 1.5rem auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .brand-icon img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
    }

    .tool-logo-text {
        font-size: 2rem;
    }

    /* Engagement Model */
    .engagement-model {
        padding: 4rem 1rem;
    }

    .engagement-model__header {
        text-align: center;
        padding-left: 0;
        margin-bottom: 3rem;
    }

    .engagement-model__title {
        font-size: clamp(1.75rem, 6vw, 2.5rem);
        text-align: center;
    }

    .engagement-model__subtitle {
        font-size: 1rem;
        text-align: center;
    }

    .engagement-details {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-top: 3rem;
        margin-bottom: -2rem;
        padding: 0 1rem;
    }

    .engagement-detail {
        padding: 2rem 1.5rem;
        margin: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .engagement-detail h3 {
        font-size: 1.25rem;
        margin-bottom: 1rem;
    }

    .engagement-detail p {
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: 1rem;
    }

    .engagement-detail li {
        font-size: 0.875rem;
        margin-bottom: 0.5rem;
    }

    .engagement-metrics {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .metric-card {
        padding: 1.5rem;
    }

    .metric-value {
        font-size: 1.5rem;
    }

    .metric-label {
        font-size: 0.75rem;
    }

    /* Philosophy Section */
    .philosophy {
        padding: 3rem 1.5rem;
        position: relative;
        z-index: 10;
    }
    
    /* Make whiteboard suitable for mobile in philosophy */
    .philosophy::before {
        opacity: 0.15;
        background-size: cover;
        background-position: center center;
        background-attachment: scroll;
    }

    .philosophy__title {
        font-size: clamp(1.8rem, 5vw, 2.2rem);
        margin-bottom: 1.5rem;
        position: relative;
        z-index: 15;
        font-weight: 400;
        line-height: 1.4;
    }

    .philosophy__text {
        font-size: 1rem;
        line-height: 1.7;
        margin-bottom: 1.5rem;
        position: relative;
        z-index: 15;
    }

    /* Contact Section */
    .contact {
        padding: 3rem 1rem;
    }

    .contact__title {
        font-size: clamp(1.8rem, 5vw, 2.2rem);
        font-weight: 400;
        margin-bottom: 1rem;
    }
    
    .contact__text {
        font-size: 1rem;
        line-height: 1.7;
        margin: 0 auto 1.5rem auto;
    }
    
    .contact__email {
        font-size: 1.1rem;
        margin: 1rem auto;
    }

    .contact__subtitle {
        font-size: 1rem;
        margin-bottom: 2rem;
    }

    .contact__email {
        font-size: 1.125rem;
        padding: 1rem 2rem;
    }

    /* Footer */
    .footer {
        padding: 3rem 1rem 1rem;
    }

    .footer__content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    .footer__brand {
        order: 1;
    }

    .footer__column {
        order: 2;
    }

    .footer__column h4 {
        font-size: 0.875rem;
        margin-bottom: 1rem;
    }

    .footer__links a {
        font-size: 0.875rem;
        line-height: 1.8;
    }

    .footer__description {
        font-size: 0.875rem;
        line-height: 1.6;
        margin-bottom: 1rem;
    }

    .footer__bottom {
        padding: 2rem 0 1rem;
        font-size: 0.75rem;
    }

    /* Neodigm widget mobile adjustments */
    neodigm-widget {
        width: 80% !important;
        max-width: 200px;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .machvive-hero {
        padding: 30px 10px;
        min-height: 60vh;
    }

    .machvive-title {
        font-size: clamp(1.5rem, 10vw, 2.5rem);
    }

    .tool-icon:has(img) {
        width: 200px;
        height: 60px;
    }

    .tool-logo-text {
        font-size: 1.5rem;
    }
    
    /* Brand Icon Adjustments for small screens */
    .brand-icon:has(img) {
        width: 240px !important;
        height: 100px !important;
        margin: 0 auto 1rem auto;
    }

    .brands-enhanced,
    .tools-enhanced,
    .engagement-model,
    .philosophy,
    .contact {
        padding: 3rem 0.75rem;
    }

    .card-header,
    .tool-header {
        padding: 1.5rem 1.5rem 0;
    }

    .card-content,
    .tool-content {
        padding: 0 1.5rem 1.5rem;
    }

    .card-cta,
    .tool-cta {
        padding: 1rem 1.5rem;
    }

    .engagement-detail {
        padding: 1.5rem 1rem;
        margin: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .engagement-details {
        padding: 0 0.5rem;
        gap: 1.5rem;
    }

    .engagement-metrics {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Ripped Tape Effect for Brand Card Titles */
.brand-card__title-wrapper {
    position: relative;
    margin-bottom: 1rem;
    transform: rotate(-1deg);
}

.ripped-tape {
    position: relative;
    display: inline-block;
    padding: 6px 20px 6px 16px;
    font-size: 13px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-family: 'Inter', sans-serif;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    
    /* Heavy wear pattern with brand color */
    background: 
        /* Scratches */
        linear-gradient(95deg, transparent 15%, rgba(255,255,255,0.12) 16%, transparent 18%),
        linear-gradient(-25deg, transparent 35%, rgba(255,255,255,0.1) 36%, transparent 37%),
        /* Scuff marks */
        radial-gradient(ellipse at 20% 20%, rgba(255,255,255,0.15) 0%, transparent 25%),
        radial-gradient(ellipse at 60% 70%, rgba(255,255,255,0.12) 0%, transparent 20%),
        radial-gradient(ellipse at 80% 30%, rgba(255,255,255,0.08) 0%, transparent 15%),
        radial-gradient(ellipse at 40% 50%, rgba(255,255,255,0.06) 0%, transparent 18%),
        /* Base orange color */
        radial-gradient(ellipse at center, #DD4124 0%, #B73820 100%);
    
    box-shadow: 
        0 2px 5px rgba(0, 0, 0, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    
    transition: all 0.3s ease;
}

/* Left edge gradient for depth */
.ripped-tape::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 20px;
    background: linear-gradient(90deg, rgba(0,0,0,0.15) 0%, transparent 100%);
}

/* Arrow end for tab effect */
.ripped-tape::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 6px;
    border-color: transparent transparent transparent #C63C28;
    filter: drop-shadow(2px 0 2px rgba(0, 0, 0, 0.2));
}

/* Paper texture overlay */
.ripped-tape .texture-noise {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.15;
    background-image: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(255,255,255,0.02) 2px,
            rgba(255,255,255,0.02) 3px
        );
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* Different rotation angles for variety */
.brand-card-enhanced:nth-child(1) .brand-card__title-wrapper {
    transform: rotate(-2deg);
}

.brand-card-enhanced:nth-child(2) .brand-card__title-wrapper {
    transform: rotate(1deg);
}

/* Marketing card blue tape variant */
.brand-card-enhanced:nth-child(2) .ripped-tape {
    /* Heavy wear pattern with blue color */
    background: 
        /* Scratches */
        linear-gradient(95deg, transparent 15%, rgba(255,255,255,0.12) 16%, transparent 18%),
        linear-gradient(-25deg, transparent 35%, rgba(255,255,255,0.1) 36%, transparent 37%),
        /* Scuff marks */
        radial-gradient(ellipse at 20% 20%, rgba(255,255,255,0.15) 0%, transparent 25%),
        radial-gradient(ellipse at 60% 70%, rgba(255,255,255,0.12) 0%, transparent 20%),
        radial-gradient(ellipse at 80% 30%, rgba(255,255,255,0.08) 0%, transparent 15%),
        radial-gradient(ellipse at 40% 50%, rgba(255,255,255,0.06) 0%, transparent 18%),
        /* Base blue color */
        radial-gradient(ellipse at center, #23394e 0%, #1a2b3a 100%);
}

/* Blue arrow end for marketing card */
.brand-card-enhanced:nth-child(2) .ripped-tape::after {
    border-color: transparent transparent transparent #1a2b3a;
}

/* Tool Card Title Wrapper */
.tool-card__title-wrapper {
    position: relative;
    margin-bottom: 1rem;
    transform: rotate(-1deg);
}

.tool-card__title {
    font-size: 16px !important;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}

/* MachVive white and black tape */
.machvive-tape {
    /* Heavy wear pattern with white/black colors */
    background: 
        /* Scratches */
        linear-gradient(95deg, transparent 15%, rgba(0,0,0,0.12) 16%, transparent 18%),
        linear-gradient(-25deg, transparent 35%, rgba(0,0,0,0.1) 36%, transparent 37%),
        /* Scuff marks */
        radial-gradient(ellipse at 20% 20%, rgba(0,0,0,0.15) 0%, transparent 25%),
        radial-gradient(ellipse at 60% 70%, rgba(0,0,0,0.12) 0%, transparent 20%),
        radial-gradient(ellipse at 80% 30%, rgba(0,0,0,0.08) 0%, transparent 15%),
        radial-gradient(ellipse at 40% 50%, rgba(0,0,0,0.06) 0%, transparent 18%),
        /* Base white color */
        radial-gradient(ellipse at center, #ffffff 0%, #f5f5f5 100%);
    
    color: #1a1a1a !important;
    
    box-shadow: 
        0 2px 5px rgba(0, 0, 0, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* White tape left edge gradient */
.machvive-tape::before {
    background: linear-gradient(90deg, rgba(0,0,0,0.1) 0%, transparent 100%);
}

/* White tape arrow end */
.machvive-tape::after {
    border-color: transparent transparent transparent #e5e5e5;
}

/* Web Tool Toys red and white tape */
.webtoys-tape {
    /* Heavy wear pattern with red/white colors */
    background: 
        /* Scratches */
        linear-gradient(95deg, transparent 15%, rgba(255,255,255,0.25) 16%, transparent 18%),
        linear-gradient(-25deg, transparent 35%, rgba(255,255,255,0.2) 36%, transparent 37%),
        /* Scuff marks */
        radial-gradient(ellipse at 20% 20%, rgba(255,255,255,0.3) 0%, transparent 25%),
        radial-gradient(ellipse at 60% 70%, rgba(255,255,255,0.25) 0%, transparent 20%),
        radial-gradient(ellipse at 80% 30%, rgba(255,255,255,0.15) 0%, transparent 15%),
        radial-gradient(ellipse at 40% 50%, rgba(255,255,255,0.1) 0%, transparent 18%),
        /* Base red color */
        radial-gradient(ellipse at center, #dc3545 0%, #c82333 100%);
    
    color: rgba(255, 255, 255, 0.95) !important;
    
    box-shadow: 
        0 2px 5px rgba(0, 0, 0, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Red tape left edge gradient */
.webtoys-tape::before {
    background: linear-gradient(90deg, rgba(0,0,0,0.15) 0%, transparent 100%);
}

/* Red tape arrow end */
.webtoys-tape::after {
    border-color: transparent transparent transparent #c82333;
}

/* Tool card rotation variety */
.tool-card-enhanced:nth-child(1) .tool-card__title-wrapper {
    transform: rotate(-2deg);
}

.tool-card-enhanced:nth-child(2) .tool-card__title-wrapper {
    transform: rotate(1deg);
}

/* Hover effects */
.brand-card-enhanced:hover .ripped-tape {
    transform: scale(1.02);
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Hover effects for tool cards */
.tool-card-enhanced:hover .ripped-tape {
    transform: scale(1.02);
}

.tool-card-enhanced:hover .machvive-tape {
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

.tool-card-enhanced:hover .webtoys-tape {
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Mobile adjustments for ripped tape */
@media (max-width: 900px) {
    .ripped-tape {
        font-size: 11px !important;
        padding: 5px 16px 5px 12px;
        letter-spacing: 0.5px;
    }
    
    .ripped-tape::after {
        border-width: 8px 0 8px 5px;
        right: -5px;
    }
    
    .brand-card__title-wrapper,
    .tool-card__title-wrapper {
        margin-bottom: 0.75rem;
    }
    
    .tool-card__title {
        font-size: 14px !important;
    }
}