:root {
    /* Cache buster: 123456 */
    --c-bg: #010808;
    --c-text: #FFFFFF;
    --c-text-muted: rgba(255, 255, 255, 0.6);
    --c-lime: #CCFF00;
    --c-accent: #00FFAA;
    --c-violet: #BD93F9;
    --c-glass: rgba(255, 255, 255, 0.04);
    --c-glass-border: rgba(255, 255, 255, 0.08);
    --f-display: 'Space Grotesk', sans-serif;
    --f-body: 'Inter', sans-serif;
    --br-block: 24px;
    --br-button: 12px;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 12px;
}
.text-center{
    text-align: center;
}
.w-200px { width: 200px; }
.w-48px { width: 48px; }
.h-48px { height: 48px; }
.w-40px { width: 40px; }
.h-40px { height: 40px; }
.w-12px { width: 12px; }
.h-12px { height: 12px; }

.infinity-logo {
    width: 24px;
    height: 24px;
    fill: #FFFFFF;
}

/* Refined Logo & Header */
.top-nav {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: auto;
    width: 100%;
}

.logo-block-top {
    display: none; /* Removed redundant top pill */
}

/* Ecosystem Visual Box */
.ecosystem-container {
    position: relative;
    width: 100%;
    height: 300px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ecosystem-grid-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        linear-gradient(rgba(204, 255, 0, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(204, 255, 0, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.5;
}

.eco-node {
    position: absolute;
    width: 40px;
    height: 40px;
    background: var(--c-glass);
    border: 1px solid var(--c-glass-border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    z-index: 2;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.eco-node:hover {
    border-color: var(--c-lime);
    box-shadow: 0 0 15px rgba(204, 255, 0, 0.3);
    transform: scale(1.1);
}

.eco-node.central {
    width: 60px;
    height: 60px;
    background: var(--c-lime);
    border: none;
    color: var(--c-bg);
    font-size: 1.2rem;
    box-shadow: 0 0 30px rgba(204, 255, 0, 0.4);
}

.eco-line {
    position: absolute;
    background: var(--c-lime);
    opacity: 0.2;
    z-index: 1;
}

/* Fixed Layout Consistency */
.layout-v2 {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

.sidebar {
    width: 33.333%;
    flex: 0 0 33.333%;
    height: calc(100vh - 16px);
    position: sticky;
    top: 8px;
    z-index: 10;
    padding: 8px;
    padding-right: 4px; /* Half gap */
    padding-top: 92px;
    display: flex;
    flex-direction: column;
}

.sidebar-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
}

.sidebar-wrapper > .bento-block:not(:first-child) {
    flex-grow: 1;
}

.main-content-area {
    width: 66.666%;
    flex: 0 0 66.666%;
    height: calc(100vh - 16px);
    position: sticky;
    top: 8px;
    z-index: 10;
    padding: 8px;
    padding-left: 4px; /* Half gap */
    padding-top: 92px;
    padding-bottom: 8px;
    overflow-y: auto;
    box-sizing: border-box;
}

.main-content-area::after {
    content: "";
    display: block;
    height: 8px;
    width: 100%;
    clear: both;
}

/* Histogram Utility Classes */
.w-85pct { width: 85%; }
.w-12pct { width: 12%; }
.h-66pct { height: 56%; }
.h-100pct { height: 100%; }
.h-150px { height: 150px; }

/* Tag Styles Refinement */
.tag-cloud {
    display: flex; 
    flex-wrap: wrap; 
    gap: 12px;
    margin-top: 16px;
}

.tag-default, .tag-white {
    font-size: 0.8rem; 
    background: rgba(255,255,255,0.05); 
    padding: 8px 16px; 
    border-radius: 20px; 
    color: white;
    border: 1px solid rgba(255,255,255,0.1);
    transition: all 0.3s ease;
}

.tag-purple, .tag-purple-v2 {
    font-size: 0.8rem; 
    background: rgba(189,147,249,0.1); 
    border: 1px solid rgba(189,147,249,0.3); 
    padding: 8px 16px; 
    border-radius: 20px; 
    color: #bd93f9;
    transition: all 0.3s ease;
}

.tag-cyan, .tag-cyan-v2 {
    font-size: 0.8rem; 
    background: rgba(0,245,255,0.1); 
    border: 1px solid rgba(0,245,255,0.3); 
    padding: 8px 16px; 
    border-radius: 20px; 
    color: #00f5ff;
    transition: all 0.3s ease;
}

.tag-lime-outline {
    font-size: 0.8rem;
    background: rgba(204, 255, 0, 0.05);
    border: 1px solid rgba(204, 255, 0, 0.3);
    padding: 8px 16px;
    border-radius: 8px;
    color: var(--c-lime);
    transition: all 0.3s ease;
}

.tag-default:hover, .tag-purple:hover, .tag-cyan:hover, .tag-lime-outline:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,0.1);
}

.pb-block {
    padding: 48px;
    border-radius: var(--br-block);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 80px 1fr;
    gap: 20px;
    align-items: center;
}

@media (max-width: 768px) {
    .comparison-grid {
        grid-template-columns: 1fr;
    }
    .comparison-grid svg {
        transform: rotate(90deg);
        margin: 10px 0;
    }
}

.pb-block > *:first-child, .bento-block > *:first-child {
    margin-top: 0;
}
.perspective-grid {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        linear-gradient(rgba(204, 255, 0, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(204, 255, 0, 0.05) 1px, transparent 1px);
    background-size: 60px 60px;
    transform: perspective(600px) rotateX(60deg) translateY(-100px);
    mask-image: linear-gradient(to top, transparent, black 80%);
    z-index: -1;
    pointer-events: none;
    animation: simpleGridPan 20s linear infinite;
}

@keyframes simpleGridPan {
    from { background-position: 0 0; }
    to { background-position: 0 60px; }
}

/* Depth of Field Blur Decor */
.dof-blob {
    position: absolute;
    width: 300px;
    height: 300px;
    background: var(--c-lime);
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.1;
    z-index: -1;
}

/* Custom Visual Components */
.visual-box {
    width: 100%;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.prism-scene {
    position: relative;
    width: 100%;
    max-width: 300px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prism-core {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    transform: rotate(45deg);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px);
    z-index: 2;
}

.ray-in {
    position: absolute;
    left: 0;
    width: 45%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4));
}

.ray-out {
    position: absolute;
    right: 0;
    width: 50%;
    height: 4px;
    background: var(--c-lime);
    box-shadow: 0 0 15px var(--c-lime);
    transform: rotate(-10deg) translateX(10px);
    border-radius: 2px;
}

.roi-chart {
    display: flex;
    align-items: flex-end;
    gap: 15px;
    height: 120px;
    width: 100%;
    padding: 0 20px;
}

.roi-bar {
    flex: 1;
    background: var(--c-lime);
    border-radius: 4px 4px 0 0;
    position: relative;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.roi-bar::after {
    content: attr(data-val);
    position: absolute;
    top: -24px;
    width: 100%;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
}

.roi-bar.muted {
    background: #444;
}

.floating-ui-container {
    perspective: 1000px;
    width: 100%;
    height: 250px;
    position: relative;
}

.ui-layer {
    position: absolute;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 15px;
    backdrop-filter: blur(10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
    animation: simpleFloat 6s ease-in-out infinite;
}

@keyframes simpleFloat {
    0%, 100% { transform: translateY(0) rotateX(15deg); }
    50% { transform: translateY(-15px) rotateX(10deg); }
}

/* Hover effects for blocks */
.pb-block.glass {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.pb-block.glass:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-4px);
}

.pb-block.no-hover:hover {
    background: var(--c-glass);
    border-color: var(--c-glass-border);
    transform: none;
}

* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

body {
    margin: 0;
    background-color: var(--c-bg);
    color: var(--c-text);
    font-family: var(--f-body);
    overflow: hidden;
    height: 100vh;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--c-lime);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #b8e600;
}

/* Background Flowfield */
.background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    transition: filter 0.5s ease;
}

.flowfield {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    filter: blur(8px);
    width: 15%;
    transform: translate(-50%, -50%) scale(7);
}

/* Glass Template */
.glass {
    background: var(--c-glass);
    backdrop-filter: blur(24px);
    border: 1px solid var(--c-glass-border);
    border-radius: var(--br-block);
}

/* V2 Layout */
.layout-v2 {
    display: flex;
    height: 100vh;
    padding: 8px; /* Standard margin */
}

/* World & Navigation */
.app-world {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: transparent;
}

.view-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    transition: transform 1.2s cubic-bezier(0.85, 0, 0.15, 1);
    will-change: transform;
    background: transparent;
}

.page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow-y: auto;
    background: transparent; /* Fix background visibility */
}

/* Home is at 0,0 */
.page-home {
    transform: translate(0, 0);
}

/* Projects scattered around */
.page-project {
    padding: 0; /* Remove default padding for hero sections */
}

/* Shared UI */
.fixed-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    pointer-events: none;
    padding: 8px; /* Match layout-v2 padding */
}

@media (max-width: 768px) {
    .fixed-nav {
        padding: 16px 22px 16px 16px;
    }
}

.fixed-nav .top-nav {
    pointer-events: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0;
}

.header-logo {
    background: rgba(255, 255, 255, 0.03);
    padding: 0 48px;
    border-radius: 20px;
    border: 1px solid var(--c-glass-border);
    backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    width: calc(33.333% - 12px) !important;
    margin-left: 8px;
    height: 84px;
    pointer-events: auto;
}

.header-logo:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 32px;
    pointer-events: auto;
    padding-right: 32px; /* Increased to move menu icon away from scrollbar */
    height: 84px;
}

/* Language Switcher */
.lang-switcher {
    display: flex;
    gap: 8px;
    align-items: center;
    font-family: var(--f-display);
    font-size: 0.8rem;
    font-weight: 700;
}

.lang-link {
    color: var(--c-text-muted);
    text-decoration: none;
    transition: color 0.3s ease;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.05);
    background: rgba(255,255,255,0.02);
}

.lang-link:hover {
    color: var(--c-text);
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
}

.lang-link.active {
    color: var(--c-lime);
    border-color: var(--c-lime);
    background: rgba(204, 255, 0, 0.05);
}

@media (max-width: 1024px) {
    .fixed-nav {
        padding: 12px 16px;
    }
    .header-logo {
        width: auto !important;
        margin-left: 0 !important;
        padding: 0 20px;
        height: 60px;
        border-radius: 16px;
    }
    .nav-right {
        height: 60px;
        gap: 16px;
        padding-right: 0;
    }
    .top-nav {
        justify-content: space-between;
    }
    .lang-switcher {
        display: none; /* Hide in main nav on mobile to save space, keep in drawer */
    }
}

@media (max-width: 768px) {
    .fixed-nav {
        padding: 8px 12px;
    }
    .header-logo {
        padding: 0 16px;
        height: 54px;
        border-radius: 12px;
    }
    .nav-right {
        height: 54px;
        gap: 12px;
    }
}

.back-to-home {
    position: fixed;
    top: 40px;
    left: 40px;
    z-index: 100;
    pointer-events: auto;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1.4rem;
    color: white;
    text-decoration: none;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.5s ease;
}

.back-to-home.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Project Detail Bento Style */
.project-bento-layout {
    padding: 0;
    padding-bottom: 8px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(140px, auto);
    gap: 8px;
    box-sizing: border-box;
}

/* Removed duplicate pb-block definition to avoid conflicts */

/* Width Spans */
.span-4 { grid-column: span 4; }
.span-3 { grid-column: span 3; }
.span-2 { grid-column: span 2; }
.span-1 { grid-column: span 1; }

/* Height Spans */
.row-2 { grid-row: span 2; }
.row-3 { grid-row: span 3; }

.pb-block.pb-title {
    padding: 48px;
    background: rgba(204, 255, 0, 0.02);
    min-height: 400px;
}

.pb-hero-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
    position: relative;
    z-index: 2;
}

.pb-hero-label {
    color: var(--c-lime);
    margin-bottom: 16px;
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

.pb-hero-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.1;
    font-weight: 700;
    max-width: 900px;
    margin: 0;
    font-family: var(--f-display);
}

.pb-hero-subtitle {
    font-size: 1.3rem;
    opacity: 0.9;
    max-width: 800px;
    line-height: 1.5;
    margin: 0;
}

.pb-hero-desc {
    font-size: 1.1rem;
    opacity: 0.7;
    max-width: 700px;
    margin: 0;
}

.pb-box-flex {
    background: rgba(255, 255, 255, 0.02);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 450px;
}

.pb-box-flex h2 {
    font-size: 1.8rem;
    margin-bottom: 24px;
    font-family: var(--f-display);
}

.pb-box-flex p {
    opacity: 0.9;
    line-height: 1.6;
    margin-bottom: 24px;
    font-size: 1.2rem;
}

.pb-visual-centered {
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 450px;
}

.pb-box-dark {
    padding: 60px;
    background: rgba(0, 0, 0, 0.3);
}

.pb-box-dark h2 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 12px;
    font-family: var(--f-display);
}

.pb-box-dark .centered-body {
    opacity: 0.9;
    font-size: 1.2rem;
    margin-bottom: 24px;
    text-align: center;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.pb-box-light-transparent {
    background: rgba(255, 255, 255, 0.01);
    padding: 60px;
}

.pb-box-light-transparent h2 {
    font-size: 1.8rem;
    margin-bottom: 40px;
    text-align: center;
    font-family: var(--f-display);
}

.pb-box-light-transparent p {
    opacity: 0.7;
    text-align: center;
}

.frise-container-padding {
    padding: 60px 0 0 0;
}

.pb-box-standard-padded {
    padding: 60px;
}

.pb-box-standard-padded h2 {
    font-size: 2rem;
    margin-bottom: 24px;
    text-align: center;
    font-family: var(--f-display);
}

.pb-box-standard-padded .centered-desc {
    opacity: 0.7;
    text-align: center;
    margin-bottom: 54px;
}

.diag-card-custom {
    padding: 32px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    text-align: center;
    transition: all 0.3s ease;
}

.diag-card-custom h4 {
    font-size: 1rem;
    margin-bottom: 12px;
    font-family: var(--f-display);
}

.diag-card-custom p {
    font-size: 0.9rem;
    opacity: 0.8;
    line-height: 1.4;
}

.pb-impact-section h2 {
    font-size: 1.8rem;
    margin-bottom: 32px;
    font-family: var(--f-display);
}

.data-hero-subtitle {
    max-width: 600px;
    margin-top: 20px;
}

.dataviz-island-container {
    width: 100%;
    height: 100%;
}

.dataviz-card-custom {
    padding: 32px;
    background: none !important;
    border-radius: 24px;
    text-align: left;
    min-height: 480px;
    display: flex;
    flex-direction: column;
}

.dataviz-card-custom h3 {
    font-size: 1.6rem;
    font-family: var(--f-display);
    font-weight: 700;
    margin-bottom: 24px;
}

.chart-area-v2-container {
    position: relative;
    height: 180px;
    margin-bottom: 32px;
    margin-top: 40px;
}

.data-pill-row {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 40px;
}

.data-pill-row.top {
    top: -35px;
    left: 0;
}

.data-pill-row.bottom {
    bottom: -45px;
    left: 0;
}

.svg-sankey-custom {
    overflow: visible;
    width: 100%;
    height: 100%;
}

.mini-kpi-v2-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}

.mini-kpi-v2-header span {
    opacity: 0.5;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mini-kpi-v2-value {
    font-size: 1.8rem;
    font-weight: 700;
    font-family: var(--f-display);
}

.mini-kpi-v2-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    margin-top: 4px;
}

.mini-kpi-v2-footer .trend {
    color: #00FFAA;
    font-weight: 700;
}

.mini-kpi-v2-footer .prev-val {
    opacity: 0.3;
}

.chart-area-v3-container {
    position: relative;
    height: 260px;
    margin: 10px auto 30px auto;
    width: 260px;
}

.svg-pulse-custom {
    overflow: visible;
    width: 100%;
    height: 100%;
}

.pb-box-expertise-content h2 {
    font-size: 3rem;
    margin-bottom: 24px;
}

.pb-box-expertise-content .body-lead {
    font-size: 1.2rem;
    opacity: 0.8;
    margin-bottom: 48px;
}

.pb-box-expertise-content p {
    opacity: 0.8;
    margin-bottom: 24px;
}

.pb-box-expertise-content p:last-child {
    margin-bottom: 0;
}

.crm-card-label {
    font-weight: 700;
    display: block;
    font-size: 0.9rem;
}

.dashboard-showcase-container {
    width: 100%;
    min-height: 100%;
    border-radius: 12px;
    padding: 32px;
    color: white;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.dashboard-showcase-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 16px;
    margin-bottom: 32px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.dash-col-header {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.dash-kpi-bar-container {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    position: relative;
    margin-bottom: 24px;
}

.dash-kpi-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-radius: 2px;
}

.dash-volume-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 24px;
}

.dash-volume-info span:first-child {
    font-size: 10px;
    opacity: 0.5;
    display: block;
    text-transform: uppercase;
}

.dash-volume-info .val {
    font-size: 28px;
    font-weight: 700;
    color: white;
}

.dash-volume-info .trend {
    font-size: 10px;
    display: block;
}

.dash-sl-row {
    margin-bottom: 32px;
}

.dash-sl-label {
    font-size: 10px;
    opacity: 0.5;
    display: block;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.dash-sl-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.dash-sl-value {
    font-size: 22px;
    font-weight: 700;
}

.dash-days-labels {
    display: flex;
    justify-content: end;
    font-size: 8px;
    opacity: 0.4;
    padding: 0 5px;
    flex-direction: row-reverse;
}

.dash-days-labels span {
    padding: 0 5px;
}

.dash-sl-trend {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    display: block;
    margin-top: 4px;
}

.dash-drivers-section span:first-child {
    font-size: 10px;
    opacity: 0.5;
    text-transform: uppercase;
}

/* Dashboard Trend Colors */
.trend-lime { color: var(--c-lime); }
.trend-cyan { color: #00f5ff; }
.trend-purple { color: #bd93f9; }
.trend-red { color: #ff5555; }

/* Dashboard KPI Bar Fills */
.dash-kpi-bar-fill-lime { background: var(--c-lime); width: 85%; box-shadow: 0 0 10px var(--c-glow-lime); }
.dash-kpi-bar-fill-cyan { background: #00f5ff; width: 75%; box-shadow: 0 0 10px rgba(0, 245, 255, 0.3); }
.dash-kpi-bar-fill-purple { background: #bd93f9; width: 92%; box-shadow: 0 0 10px rgba(189, 147, 249, 0.3); }
.dash-kpi-bar-fill-red { background: #ff5555; width: 68%; box-shadow: 0 0 10px rgba(255, 85, 85, 0.3); }

.driver-item-row {
    margin-top: 8px;
}

.driver-item-label {
    font-size: 9px;
    margin-bottom: 4px;
    opacity: 0.8;
}

.driver-item-bar-bg {
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    margin-top: 6px;
    position: relative;
    overflow: hidden;
}

.driver-item-bar-bg::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-radius: 2px;
    transition: width 1s ease;
}

/* Specific bar widths for Top Drivers */
.dash-driver-bar-lime-90::after { width: 90%; background: var(--c-lime); }
.dash-driver-bar-lime-85::after { width: 85%; background: var(--c-lime); }
.dash-driver-bar-lime-75::after { width: 75%; background: var(--c-lime); }
.dash-driver-bar-lime-65::after { width: 65%; background: var(--c-lime); }

.dash-driver-bar-cyan-95::after { width: 95%; background: #00f5ff; }
.dash-driver-bar-cyan-75::after { width: 75%; background: #00f5ff; }
.dash-driver-bar-cyan-65::after { width: 65%; background: #00f5ff; }
.dash-driver-bar-cyan-45::after { width: 45%; background: #00f5ff; }

.dash-driver-bar-purple-60::after { width: 60%; background: #bd93f9; }
.dash-driver-bar-purple-55::after { width: 55%; background: #bd93f9; }
.dash-driver-bar-purple-51::after { width: 51%; background: #bd93f9; }
.dash-driver-bar-purple-43::after { width: 43%; background: #bd93f9; }

.dash-driver-bar-red-40::after { width: 40%; background: #ff5555; }
.dash-driver-bar-red-35::after { width: 35%; background: #ff5555; }
.dash-driver-bar-red-31::after { width: 31%; background: #ff5555; }
.dash-driver-bar-red-29::after { width: 29%; background: #ff5555; }

.data-cta-wrapper {
    background: linear-gradient(135deg, #0a192f 0%, #020617 100%);
    overflow: hidden;
    position: relative;
}

.perspective-grid-cta {
    opacity: 0.4;
    transform: perspective(1000px) rotateX(65deg) translateY(-100px) scale(2);
}

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

.cta-title-large {
    font-size: 3rem;
    margin-bottom: 40px;
    font-family: var(--f-display);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.results-grid-v2-margin {
    margin-top: 40px;
}

.res-card-v2-1 {
    padding: 32px 32px 32px 0;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.res-card-v2-2 {
    padding: 32px 0 32px 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.res-card-v2-3 {
    padding: 32px 32px 32px 0;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.res-card-v2-4 {
    padding: 32px 0 32px 32px;
}

.res-card-v2 h4 {
    font-weight: 700;
    margin-bottom: 8px;
    font-family: var(--f-display);
}

.res-card-v2 p {
    font-size: 0.9rem;
    opacity: 0.8;
}

.faq-section-padding h2 {
    font-size: 2rem;
    margin-bottom: 40px;
    font-family: var(--f-display);
}

.pb-title h1 .accent {
    color: var(--c-lime);
}

.pb-lead .lead {
    font-size: 1.6rem;
    line-height: 1.2;
    font-weight: 500;
    color: white;
    margin: 0;
}

.pb-specs {
    flex-direction: column !important;
    gap: 32px;
    align-items: flex-start;
}

.pb-workstreams .pb-head {
    margin-bottom: 32px;
}

.pb-workstreams h2 {
    font-family: var(--f-display);
    font-size: 2.5rem;
    margin: 0 0 8px 0;
}

.pb-testimonial {
    flex-direction: row !important;
    align-items: center;
    gap: 40px;
    background: white !important;
    color: black;
}

.pb-testimonial blockquote {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 24px 0;
}

.pb-testimonial .author {
    font-weight: 700;
    font-size: 0.9rem;
}

.pb-testimonial .testimonial-img {
    width: 200px;
    height: 100%;
    border-radius: 16px;
    background: #f0f0f0;
    flex-shrink: 0;
}

.pb-cta {
    align-items: center;
    text-align: center;
}

.pb-cta h2 {
    font-family: var(--f-display);
    font-size: 3rem;
    margin-bottom: 32px;
}

.btn-big {
    padding: 16px 42px;
    background: transparent;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--br-button);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.4s ease, border-color 0.4s ease, transform 0.3s ease;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-family: var(--f-display);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-big:hover {
    color: black;
    border-color: var(--c-lime);
    transform: translateY(-2px);
}

.btn-big .liquid-bg {
    position: absolute;
    top: var(--y, 50%);
    left: var(--x, 50%);
    width: 0;
    height: 0;
    background: var(--c-lime);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1), height 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: -1;
    pointer-events: none;
}

.btn-big:hover .liquid-bg {
    width: 1000px;
    height: 1000px;
}

/* Additional Dashline sections */
.workstreams-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    background: var(--c-glass-border);
    margin-top: 40px;
}

.workstream-item {
    background: var(--c-bg);
    padding: 32px;
    display: flex;
    align-items: center;
    gap: 16px;
    font-weight: 600;
}

.workstream-item .w-icon {
    opacity: 0.5;
}

.testimonial-section {
    background: white;
    color: black;
    padding: 120px 80px;
    text-align: left;
}

.testimonial-card {
    display: flex;
    gap: 60px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.testimonial-img {
    width: 400px;
    height: 500px;
    background: #f0f0f0;
    border-radius: 24px;
    overflow: hidden;
    flex-shrink: 0;
}

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

.testimonial-content blockquote {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 32px 0;
}

.pb-hero-crm {
    background: rgba(255,255,255,0.02);
}

.hero-crm-content {
    display: flex; 
    flex-direction: column; 
    gap: 32px; 
    position: relative; 
    z-index: 2;
}

.hero-crm-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem); 
    line-height: 1.1;
}

.hero-crm-subtitle {
    font-size: 1.3rem; 
    opacity: 0.8; 
    max-width: 800px; 
    line-height: 1.5;
}

.pb-section-impact {
    background: rgba(255,255,255,0.01);
}

.impact-title {
    font-size: 3rem; 
    margin-bottom: 24px; 
    line-height: 1.1; 
    font-family: var(--f-display);
}

.impact-lead {
    font-size: 1.2rem; 
    opacity: 0.9; 
    margin-bottom: 48px; 
    max-width: 900px; 
    line-height: 1.6;
}

.benefit-grid {
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
    gap: 48px 64px;
}

.benefit-card {
    border-left: 3px solid var(--c-lime); 
    padding-left: 28px; 
    transition: all 0.3s ease;
}

.benefit-card h4 {
    margin-bottom: 12px; 
    color: white; 
    font-size: 1.4rem; 
    font-family: var(--f-display); 
    font-weight: 700;
}

.benefit-card p {
    font-size: 1rem; 
    opacity: 0.8; 
    line-height: 1.6;
}

.crm-anim-svg {
    width: 130%; 
    height: auto; 
    transform: scale(1.1); 
    filter: drop-shadow(0 0 30px rgba(204, 255, 0, 0.1));
}

.pb-section-diagnostic {
    padding: 64px 40px;
}

.diag-header {
    text-align: center; 
    margin-bottom: 64px;
}

.diag-header h2 {
    font-size: 3rem;
}

.diag-card {
    padding: 32px; 
    border: 1px solid rgba(255,255,255,0.05); 
    border-radius: 24px; 
    text-align: center; 
    transition: all 0.3s ease;
}

.diag-card h4 {
    font-size: 1.1rem; 
    margin-bottom: 12px;
}

.diag-card p {
    font-size: 0.9rem; 
    opacity: 0.8; 
    line-height: 1.4;
}

.tech-excellence-box {
    background: rgba(255,255,255,0.03); 
    padding: 48px;
}

.tech-excellence-title {
    font-size: 3rem; 
    margin-bottom: 24px;
}

.tech-excellence-lead {
    font-size: 1.2rem; 
    opacity: 0.8; 
    margin-bottom: 48px;
}

.tech-grid-v2-item h4 {
    margin-bottom: 12px;
}

.tech-grid-v2-item p {
    font-size: 0.9rem; 
    opacity: 0.8; 
    line-height: 1.4;
}

.crm-card-label-large {
    font-weight: 700; 
    display: block; 
    font-size: 0.9rem;
}

.pb-faq-box {
    padding: 60px;
}

.faq-title-v3 {
    font-size: 2rem; 
    margin-bottom: 40px;
}

.pb-cta-crm {
    min-height: 500px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    position: relative; 
    overflow: hidden; 
    background: linear-gradient(135deg, rgba(204, 255, 0, 0.05) 0%, transparent 100%);
}

.cta-crm-content {
    position: relative; 
    z-index: 5; 
    text-align: center;
}

.cta-crm-content h2 {
    font-size: clamp(2.5rem, 6vw, 4.5rem); 
    margin-bottom: 32px; 
    line-height: 1;
}

/* Animations fixes already used but added for safety if missing */
.draw-path {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: draw 3s ease-out forwards;
}

@keyframes draw {
    to { stroke-dashoffset: 0; }
}

.bar-anim {
    transform-origin: bottom;
    animation: bar-grow 2s ease-out forwards;
}

@keyframes bar-grow {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}
.pb-hero-gtm {
    background: rgba(204, 255, 0, 0.02);
}

.hero-gtm-label {
    color: var(--c-lime); 
    margin-bottom: 16px; 
    display: block;
}

.hero-gtm-title {
    font-size: clamp(2.2rem, 5vw, 3.5rem); 
    line-height: 1.1; 
    margin-bottom: 24px;
}

.hero-gtm-subtitle {
    font-size: 1.4rem; 
    opacity: 0.9; 
    margin-bottom: 32px; 
    font-weight: 500;
}

.hero-gtm-lead {
    font-size: 1.15rem; 
    line-height: 1.6; 
    opacity: 0.8; 
    max-width: 900px;
}

.pb-section-dark {
    background: rgba(0,0,0,0.2);
}

.section-title-md {
    font-size: 2.5rem; 
    margin-bottom: 24px; 
    line-height: 1.1;
}

.section-subtitle-text {
    opacity: 0.9; 
    margin-bottom: 24px;
    font-size: 1.2rem;
}

.problem-card-col {
    display: flex; 
    flex-direction: column; 
    gap: 24px;
}

.problem-card {
    padding: 24px; 
    border-left: 2px solid #ff5555; 
    background: rgba(255,85,85,0.03);
}

.problem-card h4 {
    margin-bottom: 8px; 
    color: white;
}

.problem-card p {
    font-size: 0.95rem; 
    opacity: 0.7;
}

.pb-section-soft {
    background: rgba(255,255,255,0.01);
}

.section-title-lg {
    font-size: 3rem; 
    margin-bottom: 48px; 
    text-align: left;
}

.benefits-grid-v3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.benefit-card-v3 {
    text-align: center; 
    padding: 40px; 
    background: rgba(255,255,255,0.02); 
    border-radius: 20px; 
    border: 1px solid rgba(255,255,255,0.05);
}

.benefit-card-v3 h4 {
    margin-bottom: 12px; 
    color: white;
}

.benefit-card-v3 p {
    font-size: 0.9rem; 
    opacity: 0.7;
}

.pb-section-padded {
    padding: 64px 48px;
}

.future-sales-title {
    font-size: 2.8rem; 
    margin-bottom: 32px;
}

.future-sales-lead {
    opacity: 0.9; 
    font-size: 1.2rem;
    margin-bottom: 32px;
}

.result-item-full {
    display: flex; 
    gap: 20px; 
    margin-bottom: 32px;
}

.result-item-content h4 {
    color: white; 
    margin-bottom: 8px;
}

.result-item-content p {
    font-size: 0.95rem; 
    opacity: 0.8; 
    line-height: 1.5;
}

.text-num {
    color: var(--c-lime); 
    font-weight: 700;
}

.pb-section-highlight {
    background: rgba(204, 255, 0, 0.01); 
    border: 1px solid rgba(204, 255, 0, 0.1);
}

.comparison-header-text {
    text-align: center; 
    font-size: 2.2rem; 
    margin-bottom: 50px; 
    font-family: var(--f-display);
}

.comparison-grid-container {
    max-width: 1000px; 
    margin: 0 auto;
}

.comp-header-traditional {
    text-align: center; 
    padding: 24px; 
    background: rgba(255,255,255,0.05); 
    border-radius: 16px; 
    font-weight: 700; 
    color: white; 
    font-size: 1.1rem; 
    border: 1px solid rgba(255,255,255,0.1);
}

.comp-header-gtm {
    text-align: center; 
    padding: 24px; 
    background: var(--c-lime); 
    border-radius: 16px; 
    font-weight: 700; 
    color: black; 
    font-size: 1.1rem;
}

.comp-cell-traditional {
    padding: 20px; 
    background: rgba(255,255,255,0.02); 
    border-radius: 16px; 
    border: 1px solid rgba(255,255,255,0.05); 
    text-align: center; 
    font-size: 0.95rem; 
    opacity: 0.8; 
    height: 100%; 
    display: flex; 
    align-items: center; 
    justify-content: center;
}

.comp-cell-gtm {
    padding: 20px; 
    background: rgba(255,255,255,0.02); 
    border-radius: 16px; 
    border: 1px solid var(--c-lime); 
    text-align: center; 
    font-size: 0.95rem; 
    color: white; 
    height: 100%; 
    display: flex; 
    align-items: center; 
    justify-content: center;
}

.comp-arrow-box {
    display: flex; 
    justify-content: center;
}

.meth-step-label-cyan {
    font-size: 0.8rem; 
    font-weight: 700; 
    color: #00f5ff; 
    margin-bottom: 12px; 
    letter-spacing: 0.1em; 
    text-transform: uppercase;
}

.meth-step-label-purple {
    font-size: 0.8rem; 
    font-weight: 700; 
    color: #bd93f9; 
    margin-bottom: 12px; 
    letter-spacing: 0.1em; 
    text-transform: uppercase;
}

.meth-step-label-lime {
    font-size: 0.8rem; 
    font-weight: 700; 
    color: var(--c-lime); 
    margin-bottom: 12px; 
    letter-spacing: 0.1em; 
    text-transform: uppercase;
}

.meth-card {
    padding: 32px; 
    background: rgba(255,255,255,0.02); 
    border-radius: 16px; 
    border: 1px solid rgba(255,255,255,0.05);
}

.meth-card-span-2 {
    grid-column: span 2;
}

.meth-card h4 {
    margin-bottom: 12px; 
    color: white;
}

.meth-card p {
    font-size: 0.9rem; 
    opacity: 0.6;
}

.pb-section-gtm-cycle {
    background: rgba(255,255,255,0.01); 
    padding: 60px;
}

.section-title-sm {
    font-size: 1.8rem; 
    margin-bottom: 40px; 
    text-align: center;
}

.section-subtitle-centered {
    opacity: 0.7; 
    text-align: center;
}

.pb-section-gtm-frise {
    padding: 60px 0 0 0;
}

.accordion-content-intro {
    margin-bottom: 15px;
}

.accordion-list {
    list-style: disc; 
    padding-left: 20px; 
    opacity: 0.8;
}

.accordion-list-item {
    margin-bottom: 8px;
}

.card-h-350 {
    height: 350px;
}

.p-category-label {
    font-size: 0.7rem; 
    opacity: 0.6; 
    text-transform: uppercase; 
    letter-spacing: 0.1em; 
    margin-top: 8px; 
    display: block;
}

.next-project-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.01), transparent);
}

.display-text-cs {
    font-size: 3.2rem;
}

.hero-cs-title {
    font-size: clamp(2.5rem, 5vw, 4rem); 
    margin-bottom: 24px; 
    line-height: 1.1;
}

.hero-cs-subtitle {
    font-size: 1.5rem; 
    opacity: 0.9; 
    margin-bottom: 32px; 
    font-weight: 500;
}

.hero-cs-lead {
    max-width: 800px; 
    font-size: 1.2rem; 
    line-height: 1.6; 
    opacity: 0.8;
}

.section-grid-2col {
    display: grid; 
    grid-template-columns: 1fr 1.2fr; 
    gap: 64px; 
    align-items: start;
}

.section-grid-2col-alt {
    display: grid; 
    grid-template-columns: 1.2fr 1fr; 
    gap: 64px; 
    align-items: center;
}

.section-grid-2col-stacked {
    display: grid; 
    grid-template-columns: 1fr 1.5fr; 
    gap: 64px; 
    align-items: start;
}

.section-title-sm-cs {
    font-size: 2.5rem; 
    margin-bottom: 24px; 
    line-height: 1.1;
}

.section-lead-sm {
    font-size: 1.1rem; 
    opacity: 0.8; 
    margin-bottom: 40px;
}

.border-lime-left {
    border-left: 2px solid var(--c-lime); 
    padding-left: 24px;
}

.comp-box {
    padding: 40px; 
    background: rgba(0,0,0,0.2); 
    border-radius: 20px; 
    border: 1px solid rgba(255,255,255,0.05);
}

.comp-box-title {
    text-align: center; 
    margin-bottom: 40px; 
    font-size: 0.9rem; 
    opacity: 0.5; 
    letter-spacing: 0.1em; 
    text-transform: uppercase;
}

.comp-grid-2col {
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 32px;
}

.workflow-col {
    display: flex; 
    flex-direction: column; 
    gap: 16px;
}

.workflow-header-red {
    text-align: center; 
    color: #ff5555; 
    font-weight: 700; 
    font-size: 0.8rem; 
    margin-bottom: 8px;
}

.workflow-header-lime {
    text-align: center; 
    color: var(--c-lime); 
    font-weight: 700; 
    font-size: 0.8rem; 
    margin-bottom: 8px;
}

.workflow-step-red {
    padding: 12px; 
    background: rgba(255,85,85,0.05); 
    border: 1px solid rgba(255,85,85,0.2); 
    border-radius: 8px; 
    font-size: 0.85rem; 
    text-align: center;
}

.workflow-step-lime-outline {
    padding: 12px; 
    background: rgba(204,255,0,0.05); 
    border: 1px solid var(--c-lime); 
    border-radius: 8px; 
    font-size: 0.85rem; 
    text-align: center; 
    font-weight: 600;
}

.workflow-step-lime-solid {
    padding: 12px; 
    background: var(--c-lime); 
    color: black; 
    border-radius: 8px; 
    font-size: 0.85rem; 
    text-align: center; 
    font-weight: 800;
}

.workflow-arrow {
    text-align: center; 
    opacity: 0.3;
}

.workflow-arrow-lime {
    text-align: center; 
    color: var(--c-lime); 
    opacity: 0.5;
}

.kpi-card-cs-v2 {
    padding: 32px 20px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.kpi-val-xl {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 12px;
    font-family: var(--f-display);
}

.kpi-val-md {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.2;
    font-family: var(--f-display);
}

.kpi-label-sm {
    font-size: 0.8rem;
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.border-subtle {
    border: 1px solid rgba(255,255,255,0.1);
}

.radial-container {
    display: flex; 
    align-items: center; 
    justify-content: center; 
    position: relative;
}

.bg-accent-soft {
    background: rgba(204,255,0,0.02) !important;
}

.expertise-item-label {
    font-weight: 700; 
    font-size: 0.8rem; 
    letter-spacing: 0.1em; 
    margin-bottom: 20px; 
    opacity: 0.4;
}

.expertise-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 40px;
}

.expertise-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-top: 40px;
}

.kpi-card-span-2 {
    grid-column: span 2;
}

/* Ensure mobile responsiveness for the 2-col grid */
@media (max-width: 768px) {
    .expertise-grid-2col {
        grid-template-columns: 1fr !important;
    }
    .kpi-card-span-2 {
        grid-column: span 1 !important;
    }
}

.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.tag-default, .tag-cyan, .tag-lime-outline, .tag-purple {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-block;
    transition: all 0.3s ease;
}

.tag-default {
    background: rgba(255,255,255,0.06);
    color: white;
    border: 1px solid rgba(255,255,255,0.1);
}

.tag-cyan {
    background: rgba(0,245,255,0.05);
    color: #00f5ff;
    border: 1px solid rgba(0,245,255,0.3);
}

.tag-lime-outline {
    background: rgba(204,255,0,0.05);
    color: var(--c-lime);
    border: 1px solid var(--c-lime);
}

.tag-purple {
    background: rgba(189,147,249,0.05);
    color: #bd93f9;
    border: 1px solid rgba(189,147,249,0.3);
}

.tag-default:hover, .tag-cyan:hover, .tag-lime-outline:hover, .tag-purple:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.chart-box-cs {
    padding: 40px; 
    background: rgba(255,255,255,0.02); 
    border-radius: 20px;
}

.chart-title-cs {
    text-align: center; 
    margin-bottom: 32px; 
    font-size: 0.8rem; 
    opacity: 0.4; 
    letter-spacing: 0.1em;
}

.bar-container {
    display: flex; 
    flex-direction: column; 
    gap: 24px;
}

.bar-header {
    display: flex; 
    justify-content: space-between; 
    margin-bottom: 8px; 
    font-size: 0.85rem;
}

.bar-bg {
    height: 12px; 
    background: rgba(255,255,255,0.05); 
    border-radius: 6px; 
    overflow: hidden;
}

.bar-red {
    height: 100%; 
    background: #ff5555;
    box-shadow: 0 0 15px rgba(255, 85, 85, 0.3);
}

.bar-lime-glow {
    height: 100%;
    background: var(--c-lime);
    box-shadow: 0 0 20px var(--c-glow-lime);
}

/* Histogram Bars */
.histogram-axis {
    display: flex;
    align-items: flex-end;
    gap: 40px;
    height: 200px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    position: relative;
    margin-top: 40px;
}

.bar-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    height: 100%;
}

.bar-old {
    width: 40px;
    height: 70%;
    background: rgba(255,255,255,0.1);
    border-radius: 4px 4px 0 0;
    position: relative;
    transition: all 0.6s ease;
}

.bar-new {
    width: 40px;
    height: 100%;
    background: var(--c-lime);
    border-radius: 4px 4px 0 0;
    box-shadow: 0 0 20px var(--c-border-lime);
    position: relative;
    transition: all 0.6s ease;
}

.bar-val-old, .bar-val-new {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.75rem;
    font-weight: 700;
}

.bar-label-old, .bar-label-new {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
    opacity: 0.5;
    white-space: nowrap;
}

/* Comparison Bars (Big Data) */
.comparison-container-cs {
    background: rgba(255,255,255,0.02);
    padding: 40px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.05);
    width: 100%;
}

.comparison-chart-axis {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 40px;
    height: 200px;
    border-bottom: 2px solid rgba(255,255,255,0.1);
    padding-bottom: 0;
    margin-top: 40px;
}

.comparison-bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    height: 100%;
    justify-content: flex-end;
    position: relative;
    width: 60px;
}

.comparison-bar-old {
    width: 44px;
    height: 15%;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 4px 4px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.6s ease;
}

.comparison-bar-new {
    width: 44px;
    height: 100%;
    background: var(--c-lime);
    border-radius: 4px 4px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30px var(--c-glow-lime);
    transition: all 0.6s ease;
}

.comparison-val-label, .comparison-val-label-new {
    position: absolute;
    top: -25px;
    font-size: 0.8rem;
    font-weight: 800;
}

.comparison-val-label-new {
    color: var(--c-lime);
}

.comparison-label-text {
    position: absolute;
    bottom: -30px;
    font-size: 0.7rem;
    opacity: 0.5;
    letter-spacing: 0.1em;
}

.diagram-container {
    padding: 40px; 
    background: radial-gradient(circle at center, rgba(0, 245, 255, 0.08) 0%, rgba(204, 255, 0, 0.04) 60%, rgba(0,0,0,0.2) 100%); 
    border-radius: 24px; 
    border: 1px solid rgba(255,255,255,0.08);
    position: relative;
    overflow: hidden;
}

.diagram-title {
    text-align: center; 
    margin-bottom: 40px; 
    font-size: 0.8rem; 
    opacity: 0.4; 
    letter-spacing: 0.1em; 
    text-transform: uppercase;
}

.diagram-flow {
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    position: relative; 
    gap: 20px;
}

.input-stack-wider {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 150px;
}

.input-tag-label {
    font-size: 0.65rem;
    opacity: 0.4;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
    text-transform: uppercase;
    font-weight: 700;
}

.input-tag-sm.tag-crm { border-color: #00f5ff; color: #00f5ff; }
.input-tag-sm.tag-erp { border-color: #CCFF00; color: #CCFF00; }
.input-tag-sm.tag-cyan { border-color: #00f5ff; color: #00f5ff; }
.input-tag-sm.tag-purple { border-color: #bd93f9; color: #bd93f9; }
.input-tag-sm.tag-lime-outline { border-color: #CCFF00; color: #CCFF00; }

.output-stack-v2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 150px;
}

.output-box-v2 {
    padding: 16px;
    background: var(--c-lime);
    color: black;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 900;
    text-align: center;
    box-shadow: 0 0 20px var(--c-glow-lime);
    text-transform: uppercase;
}

.output-visual-bars {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.bar-p, .bar-p-m, .bar-p-sm {
    height: 4px;
    background: var(--c-lime);
    border-radius: 2px;
    opacity: 0.8;
}

.bar-p { width: 100%; }
.bar-p-m { width: 70%; }
.bar-p-sm { width: 40%; }

.kpi-mini-row {
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr; 
    gap: 20px;
}

/* Vertical Diagram Flow (Big Data SaaS) */
.diagram-flow-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.input-stack-vertical {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    width: 100%;
    max-width: 500px;
}

.hub-vertical-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.output-stack-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.hub-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.hub-label {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    opacity: 0.8;
}

.brace-brain-container {
    display: flex;
    align-items: center;
    gap: 20px;
}

.kpi-val-mini-lime {
    font-size: 2.2rem; 
    font-weight: 800; 
    color: var(--c-lime); 
    margin-bottom: 4px;
}

.kpi-val-mini-cyan {
    font-size: 2.2rem; 
    font-weight: 800; 
    color: #00fffb; 
    margin-bottom: 4px;
}

.kpi-val-mini-purple {
    font-size: 2.2rem; 
    font-weight: 800; 
    color: #bd93f9; 
    margin-bottom: 4px;
}

.kpi-label-mini {
    font-size: 0.75rem; 
    opacity: 0.5; 
    line-height: 1.2;
}

.histogram-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 32px;
    background: rgba(255,255,255,0.02);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.08);
}

.histogram-axis {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 40px;
    height: 180px;
    width: 100%;
    border-bottom: 2px solid rgba(255,255,255,0.1);
    position: relative;
    padding-bottom: 0;
    margin-top: 40px;
    margin-bottom: 30px;
}

.histogram-grid {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
    opacity: 0.1;
}

.bar-wrapper {
    flex: 0 0 44px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    height: 100%;
}

.bar-old {
    width: 100%;
    height: 70%;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 4px 4px 0 0;
    position: relative;
    transition: all 0.6s ease;
}

.bar-new {
    width: 100%;
    height: 100%;
    background: var(--c-lime);
    border-radius: 4px 4px 0 0;
    box-shadow: 0 0 20px var(--c-glow-lime);
    position: relative;
    transition: all 0.6s ease;
}

.bar-val-old, .bar-val-new {
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem;
    font-weight: 800;
    white-space: nowrap;
}

.bar-val-new { color: var(--c-lime); }

.bar-label-old, .bar-label-new {
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    opacity: 0.5;
    letter-spacing: 0.1em;
    font-weight: 700;
}

.bar-label-new {
    position: absolute; 
    bottom: -25px; 
    left: 50%; 
    transform: translateX(-50%); 
    font-size: 0.65rem; 
    color: var(--c-lime); 
    font-weight: 800; 
    letter-spacing: 1px; 
    white-space: nowrap;
}

.histogram-summary {
    margin-top: 24px; 
    font-size: 0.85rem; 
    opacity: 0.7; 
    color: var(--c-lime); 
    font-weight: 600;
}

.line-chart-title {
    text-align: center; 
    margin-bottom: 32px; 
    font-size: 0.75rem; 
    opacity: 0.4; 
    letter-spacing: 0.1em;
}

.chart-labels-row {
    display: flex; 
    justify-content: space-between; 
    margin-top: 12px; 
    font-size: 0.6rem; 
    opacity: 0.3;
}

.bento-block {
    width: 100%;
    padding: 48px;
    border-radius: var(--br-block);
    position: relative;
    overflow: hidden;
}

.block-logo {
    height: 100px;
    display: flex;
    align-items: center;
}

.block-logo .logo {
    font-family: var(--f-display);
    font-weight: 700;
    letter-spacing: -0.01em;
    font-size: 1.4rem;
}

.block-title {
    flex-grow: 1;
    display: flex;
    align-items: center;
    padding: 48px;
}

.display-text {
    font-family: var(--f-display);
    font-size: 3.8rem;
    line-height: 0.9;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.05em;
}

.text-lime {
    color: var(--c-lime);
}

.block-desc {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: left;
}

.badge-v2 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--c-text-muted);
    margin-bottom: 24px;
}

.badge-v2 .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-lime);
    box-shadow: 0 0 10px var(--c-lime);
}

.body-text {
    font-size: 1.2rem;
    line-height: 1.4;
    margin: 0 0 40px 0;
}

.btn-premium {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 42px;
    background: transparent;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--br-button);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none !important;
    transition: color 0.4s ease, border-color 0.4s ease, transform 0.3s ease;
    position: relative;
    font-family: var(--f-display);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    overflow: hidden;
    z-index: 1;
}

.btn-premium:hover {
    color: black;
    border-color: var(--c-lime);
    transform: translateY(-2px);
}

.btn-premium .liquid-bg {
    position: absolute;
    top: var(--y, 50%);
    left: var(--x, 50%);
    width: 0;
    height: 0;
    background: var(--c-lime);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1), height 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: -1;
    pointer-events: none;
}

.btn-premium:hover .liquid-bg {
    width: 1000px;
    height: 1000px;
}

.btn-premium svg {
    transition: transform 0.4s ease;
}

.btn-premium:hover svg {
    transform: translateX(4px);
}

.btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 28px;
    border-radius: var(--br-button);
    text-decoration: none !important;
    font-weight: 500;
    font-size: 0.85rem;
    transition: color 0.4s ease, border-color 0.4s ease, transform 0.3s ease;
    backdrop-filter: blur(10px);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-cta:hover {
    color: black;
    border-color: var(--c-lime);
    transform: translateY(-2px);
}

.btn-cta .liquid-bg {
    position: absolute;
    top: var(--y, 50%);
    left: var(--x, 50%);
    width: 0;
    height: 0;
    background: var(--c-lime);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1), height 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: -1;
    pointer-events: none;
}

.btn-cta:hover .liquid-bg {
    width: 1000px;
    height: 1000px;
}

/* Main Visual Area */
.main-visual {
    flex-grow: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Page Links & Buttons */
.nav-link-v2 {
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--c-text);
    letter-spacing: 0.1em;
    transition: color 0.3s ease;
}

.nav-link-v2:hover {
    color: var(--c-lime);
}

.btn-pill {
    padding: 14px 36px;
    background: transparent;
    color: white;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: var(--br-button);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.4s ease, border-color 0.4s ease, transform 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-pill:hover {
    color: black;
    border-color: var(--c-lime);
    transform: translateY(-2px);
}

.btn-pill .liquid-bg {
    position: absolute;
    top: var(--y, 50%);
    left: var(--x, 50%);
    width: 0;
    height: 0;
    background: var(--c-lime);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1), height 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: -1;
    pointer-events: none;
}

.btn-pill:hover .liquid-bg {
    width: 1000px;
    height: 1000px;
}

.btn-audit {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 16px 42px;
    border-radius: var(--br-button);
    backdrop-filter: blur(10px);
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.4s ease, border-color 0.4s ease, transform 0.3s ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-audit:hover {
    color: black;
    border-color: var(--c-lime);
    transform: translateY(-2px);
}

.btn-audit .liquid-bg {
    position: absolute;
    top: var(--y, 50%);
    left: var(--x, 50%);
    width: 0;
    height: 0;
    background: var(--c-lime);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1), height 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: -1;
    pointer-events: none;
}

.btn-audit:hover .liquid-bg {
    width: 1000px;
    height: 1000px;
}

.btn-liquid span, .btn-big span, .btn-premium span, .btn-cta span, .btn-pill span, .btn-audit span {
    text-decoration: none !important;
    position: relative;
    z-index: 2;
}
.btn-liquid {
    position: relative;
    padding: 14px 36px;
    background: transparent;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--br-button);
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none !important;
    cursor: pointer;
    overflow: hidden;
    transition: color 0.4s ease, border-color 0.4s ease, transform 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.btn-liquid:hover {
    color: black;
    border-color: var(--c-lime);
    transform: translateY(-2px);
}

.btn-liquid .liquid-bg {
    position: absolute;
    top: var(--y, 50%);
    left: var(--x, 50%);
    width: 0;
    height: 0;
    background: var(--c-lime);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1), height 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: -1;
    pointer-events: none;
}

.btn-liquid:hover .liquid-bg {
    width: 1000px;
    height: 1000px;
}

.menu-btn {
    width: 58px;
    height: 58px;
    background: var(--c-bg);
    border: 1px solid var(--c-glass-border);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 20px rgba(0,0,0,0.6);
}

.menu-btn .line {
    width: 24px;
    height: 2px;
    background: white;
    transition: all 0.3s ease;
    border-radius: 4px;
}

.menu-btn .line:nth-child(2) {
    width: 16px;
}

.menu-btn:hover .line:nth-child(2) {
    width: 24px;
}

/* Projects Grid Visual - defined at the bottom for override consistency */


.back-to-home:hover {
    color: var(--c-lime);
}

.back-to-home:hover {
    color: var(--c-lime);
}

.static-card {
    height: 200px;
    border-radius: var(--br-block);
    border: 1px solid var(--c-glass-border);
    background: var(--c-glass);
    backdrop-filter: blur(10px);
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none; /* Remove link underlining */
    color: inherit; /* Keep text white */
}

/* Specific Project Drawer Wide Styling */
.project-drawer {
    width: 66.66vw;
}

@media (max-width: 1024px) {
    .project-drawer { width: 100vw; }
}

.project-body {
    margin-top: 40px;
    max-width: 800px;
}

.project-body .body-text {
    font-size: 1.4rem;
    line-height: 1.5;
    opacity: 0.9;
}

.static-card:hover {
    transform: translateY(-8px);
    border-color: var(--c-lime);
    background: rgba(204, 255, 0, 0.05);
}

.static-card .p-num {
    font-family: var(--f-display);
    font-size: 0.7rem;
    color: var(--c-text-muted);
    letter-spacing: 0.1em;
}

.static-card h3 {
    font-family: var(--f-display);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.02em;
    word-break: break-word;
    overflow-wrap: break-word;
}

.p1 { background: linear-gradient(135deg, rgba(204, 255, 0, 0.05), transparent); }
.p2 { background: linear-gradient(135deg, rgba(0, 102, 255, 0.05), transparent); }
.p3 { background: linear-gradient(135deg, rgba(255, 0, 102, 0.05), transparent); }
.p4 { background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), transparent); }
.p5 { background: linear-gradient(135deg, rgba(0, 255, 170, 0.05), transparent); }
.p6 { background: linear-gradient(135deg, rgba(139, 92, 246, 0.05), transparent); }

/* Sidebar z-index adjustment to stay on top of carousel */
.sidebar {
    position: sticky;
    top: 8px;
    z-index: 50;
}

/* Drawers & Overlay */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 16, 16, 0.6);
    backdrop-filter: blur(12px);
    z-index: 1900; /* Below drawer */
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.overlay.active {
    display: block;
    opacity: 1;
}

.drawer {
    position: fixed;
    top: 0;
    right: -100%;
    bottom: 0;
    width: 35vw;
    z-index: 2000;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: right 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    background: transparent;
    pointer-events: none;
}

.drawer.active {
    right: 0;
    pointer-events: all;
}

.drawer-header {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    padding: 0 32px;
    height: 84px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    border: 1px solid var(--c-glass-border);
}

.close-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    color: white;
    border: 1px solid var(--c-glass-border);
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    order: 2;
}

.close-btn:hover {
    background: var(--c-lime);
    color: var(--c-bg);
    border-color: var(--c-lime);
}

.infinity-logo {
    width: 24px;
    height: 24px;
    fill: #FFFFFF;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-text, .header-logo, .no-underline {
    text-decoration: none !important;
}

.logo-text {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 1px;
    color: #FFFFFF;
}

.header-logo, .header-logo:hover, .nav-link-v2, .side-nav a, .side-nav a:hover {
    text-decoration: none !important;
}

/* Original .drawer-header .logo was unused after renaming to .logo-text */
.drawer-header .logo-container {
    order: 1;
}

.drawer-content {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(20px);
    flex: 1;
    border-radius: 20px;
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--c-glass-border);
}

/* Menu Drawer Content */
.side-nav {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.side-nav a {
    color: white;
    text-decoration: none;
    font-family: var(--f-display);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    transition: opacity 0.3s ease;
}

.side-nav a:hover {
    color: var(--c-lime);
    opacity: 1;
}

.drawer-footer {
    margin-top: auto;
}

.contact-info {
    margin-bottom: 40px;
    font-size: 1.1rem;
}

.contact-info p { opacity: 0.8; margin: 4px 0; }

.contact-info a {
    display: block;
    color: white;
    text-decoration: none;
    opacity: 0.6;
    margin-top: 12px;
    transition: color 0.3s ease, opacity 0.3s ease;
}

.contact-info a:hover {
    color: var(--c-lime);
    opacity: 1;
}

.social-links {
    display: flex;
    gap: 24px;
    border-top: 1px solid var(--c-glass-border);
    padding-top: 32px;
}

.social-links a { 
    color: white; 
    text-decoration: none; 
    font-size: 0.85rem; 
    opacity: 0.5;
    transition: opacity 0.3s ease, color 0.3s ease;
}

.social-links a:hover { opacity: 1; color: var(--c-lime); }

/* Contact Drawer Content */
.drawer-title {
    font-family: var(--f-display);
    font-size: 1.6rem;
    margin: 0 0 32px 0;
    line-height: 1;
    letter-spacing: -0.02em;
}

.contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.contact-form .input-wrapper.full-width {
    grid-column: span 2;
}

.contact-form input, .contact-form textarea {
    width: 100%;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: white;
    font-family: inherit;
    font-size: 0.9rem;
    outline: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-form input:focus, .contact-form textarea:focus {
    border-color: var(--c-lime);
    background: rgba(204, 255, 0, 0.05);
}

.contact-form textarea {
    height: 140px;
    resize: none;
}

/* Real-time Validation Borders */
.contact-form input.is-valid, .contact-form textarea.is-valid {
    border-color: rgba(204, 255, 0, 0.5) !important;
}

.contact-form input.is-invalid, .contact-form textarea.is-invalid {
    border-color: rgba(255, 75, 43, 0.5) !important;
}

.btn-submit {
    padding: 18px 42px;
    background: var(--c-lime);
    color: var(--c-bg);
    border: none;
    border-radius: var(--br-button);
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-family: var(--f-display);
    position: relative;
    overflow: hidden;
    z-index: 1;
    cursor: pointer;
    margin-top: 10px;
}

.btn-submit.full-width {
    grid-column: span 2;
    width: 100%;
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(204, 255, 0, 0.2);
}

.btn-submit .liquid-bg {
    display: none; /* Removed for more consistent solid style */
}

.form-fine-print {
    font-size: 0.8rem;
    opacity: 0.5;
    margin: 24px 0 8px 0;
}

.form-fine-print a { color: white; }

.form-footer a { text-decoration: none; font-weight: 600; font-family: var(--f-body); }

.schedule-block {
    margin-top: auto;
    padding: 24px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--c-glass-border);
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.schedule-icon {
    width: 48px;
    height: 48px;
    background: var(--c-lime);
    color: var(--c-bg);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.schedule-block span { flex-grow: 1; font-weight: 600; }
.arrow-btn { 
    background: white; 
    border: none; 
    width: 36px; 
    height: 36px; 
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

/* Blur effect when drawer is open */
body.drawer-open .background {
    filter: blur(20px);
}

/* Mobile Adjustments */
/* Language Switcher */
.lang-switcher {
    display: flex;
    gap: 16px;
    margin-bottom: 40px;
    font-size: 0.9rem;
    font-weight: 700;
}

.lang-switcher a {
    color: var(--c-text-muted);
    text-decoration: none;
    transition: color 0.3s ease;
}

.lang-switcher a:hover {
    color: white;
}

.lang-switcher .active {
    color: var(--c-lime);
}

/* Solution Grid within Bento blocks */
.solution-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 24px;
}

.sol-item h4 {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 8px 0;
}

.sol-item p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--c-text-muted);
}

.sol-item .accent {
    font-family: var(--f-display);
    font-size: 1.5rem;
    color: var(--c-lime);
    opacity: 0.5;
}

/* Result blocks */
.result-items {
    display: flex;
    justify-content: space-around;
    width: 100%;
}

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

.r-val {
    display: block;
    font-family: var(--f-display);
    font-size: 4rem;
    font-weight: 700;
    color: var(--c-lime);
}

.r-lbl {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.6;
}

/* Subtitle for Titles */
.subtitle {
    font-size: 1.5rem;
    margin-top: 16px;
    font-weight: 500;
}

/* General Layout Fixes for multi-page */
.app-world {
    height: auto;
    min-height: 100vh;
}

body {
    overflow-y: auto;
    height: auto;
}


/* CRM SVG Animation */
#crm-anim {
    width: 100%;
    height: auto;
    max-width: 1000px;
    display: block;
    margin: 0 auto;
}

#anim-2 {
    opacity: 0;
    animation: fadeIn 0.3s forwards;
}

#anim-out {
    opacity: 1;
    animation: none;
}

/* --- CRM ANIMATION (RESTORED & LOOPING) --- */
#crm-anim-group {
    animation: crmMasterLoop 12s infinite;
}

@keyframes crmMasterLoop {
    0%, 100% { opacity: 0; transform: translate3d(5%, 0, 0); }
    5%, 90% { opacity: 1; transform: translate3d(0, 0, 0); }
    95% { opacity: 0; transform: translate3d(-5%, 0, 0); }
}

#Mark-Mayeso, #Dinesh-Manju, #Florentin-Gautama, #Stan-Uduak, #Taneli-Jachin, #Sorrel-Karyna, #Achard-Chrysanthos, #Marlene-Akpofure,
#Active-now-tag, #Confirmed-tag, #Pending-tag-1, #Pending-tag-2, 
#Active-now-tag-2, #Confirmed-tag-2, #Pending-tag-3, #Pending-tag-4,
#chart-stats, #Workflow-block-1, #Workflow-block-2, #Workflow-block-3 {
    opacity: 0;
    animation-duration: 12s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}

/* Sequential appearances within the 12s master loop */
#Mark-Mayeso, #Active-now-tag { animation-name: crmStep1; }
#Dinesh-Manju, #Confirmed-tag { animation-name: crmStep2; }
#Florentin-Gautama, #Pending-tag-1 { animation-name: crmStep3; }
#Stan-Uduak, #Pending-tag-2 { animation-name: crmStep4; }
#Taneli-Jachin, #Active-now-tag-2 { animation-name: crmStep5; }
#Sorrel-Karyna, #Confirmed-tag-2 { animation-name: crmStep6; }
#Achard-Chrysanthos, #Pending-tag-3 { animation-name: crmStep7; }
#Marlene-Akpofure, #Pending-tag-4 { animation-name: crmStep8; }

#chart-stats { animation-name: crmStep9; }
#Workflow-block-1 { animation-name: crmStep10; }
#Workflow-block-2 { animation-name: crmStep11; }
#Workflow-block-3 { animation-name: crmStep12; }

@keyframes crmStep1 { 0%, 2% { opacity: 0; } 5%, 90% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes crmStep2 { 0%, 5% { opacity: 0; } 10%, 90% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes crmStep3 { 0%, 10% { opacity: 0; } 15%, 90% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes crmStep4 { 0%, 15% { opacity: 0; } 20%, 90% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes crmStep5 { 0%, 20% { opacity: 0; } 25%, 90% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes crmStep6 { 0%, 25% { opacity: 0; } 30%, 90% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes crmStep7 { 0%, 30% { opacity: 0; } 35%, 90% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes crmStep8 { 0%, 35% { opacity: 0; } 40%, 90% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes crmStep9 { 0%, 45% { opacity: 0; } 50%, 90% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes crmStep10 { 0%, 55% { opacity: 0; } 60%, 90% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes crmStep11 { 0%, 65% { opacity: 0; } 70%, 90% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes crmStep12 { 0%, 75% { opacity: 0; } 80%, 90% { opacity: 1; } 95%, 100% { opacity: 0; } }

/* Dataviz Page Animations */
.dataviz-diagram {
    width: 100%;
    max-width: 500px;
    height: auto;
}

.dataviz-diagram .node {
    animation: nodeFloat 4s ease-in-out infinite;
}

.dataviz-diagram .node:nth-child(2n) { animation-delay: -1s; }
.dataviz-diagram .node:nth-child(3n) { animation-delay: -2s; }

@keyframes nodeFloat {
    0%, 100% { transform: translate(var(--tx, 0), var(--ty, 0)) translateY(0); }
    50% { transform: translate(var(--tx, 0), var(--ty, 0)) translateY(-5px); }
}

/* Explicitly handle transform on nodes since they have translate already */
.dataviz-diagram .yellow:nth-child(1) { --tx: 300px; --ty: 60px; transform: translate(300px, 60px); }
.dataviz-diagram .yellow:nth-child(2) { --tx: 380px; --ty: 85px; transform: translate(380px, 85px); }
.dataviz-diagram .yellow:nth-child(3) { --tx: 450px; --ty: 150px; transform: translate(450px, 150px); }
.dataviz-diagram .yellow:nth-child(4) { --tx: 180px; --ty: 110px; transform: translate(180px, 110px); }

.dataviz-diagram .cyan:nth-child(5) { --tx: 520px; --ty: 210px; transform: translate(520px, 210px); }
.dataviz-diagram .cyan:nth-child(6) { --tx: 540px; --ty: 300px; transform: translate(540px, 300px); }
.dataviz-diagram .cyan:nth-child(7) { --tx: 520px; --ty: 390px; transform: translate(520px, 390px); }
.dataviz-diagram .cyan:nth-child(8) { --tx: 450px; --ty: 470px; transform: translate(450px, 470px); }

.dataviz-diagram .orange:nth-child(9) { --tx: 360px; --ty: 520px; transform: translate(360px, 520px); }
.dataviz-diagram .orange:nth-child(10) { --tx: 280px; --ty: 540px; transform: translate(280px, 540px); }
.dataviz-diagram .orange:nth-child(11) { --tx: 180px; --ty: 520px; transform: translate(180px, 520px); }
.dataviz-diagram .orange:nth-child(12) { --tx: 100px; --ty: 470px; transform: translate(100px, 470px); }

.dataviz-diagram .green:nth-child(13) { --tx: 50px; --ty: 390px; transform: translate(50px, 390px); }
.dataviz-diagram .green:nth-child(14) { --tx: 50px; --ty: 280px; transform: translate(50px, 280px); }
.dataviz-diagram .green:nth-child(15) { --tx: 80px; --ty: 180px; transform: translate(80px, 180px); }

.connection-lines line {
    stroke-dasharray: 4 4;
    animation: dashMove 10s linear infinite;
}

@keyframes dashMove {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: 50; }
}

.draw-path {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: drawLine 3s ease-out forwards;
}

@keyframes drawLine {
    to { stroke-dashoffset: 0; }
}

.dashboard-v2-container .bar-anim {
    transform-origin: baseline;
    animation: barEntry 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0.8;
}

@keyframes barEntry {
    from { height: 0; opacity: 0; }
}

.dashboard-v2-container .dash-col {
    position: relative;
    padding: 20px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.03);
    border-radius: 8px;
    transition: transform 0.3s ease, background 0.3s ease;
}

.dashboard-v2-container .dash-col:hover {
    transform: translateY(-5px);
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.1);
}

.dashboard-v2-container h3 {
    font-family: var(--f-display);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 700;
    opacity: 0.9;
}

/* --- DATAVIZ TYPES VISUALS --- */
.dataviz-card {
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 1px solid rgba(255,255,255,0.05);
    background: #000 !important;
}

.dataviz-card:hover {
    transform: translateY(-10px);
    border-color: rgba(255,255,255,0.2);
    box-shadow: 0 30px 60px rgba(0,0,0,0.8);
}

.data-pill-v2 {
    background: rgba(255, 255, 255, 0.08);
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-family: var(--f-display);
    font-weight: 700;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(4px);
}

.mini-kpi-v2 {
    background: rgba(255, 255, 255, 0.02);
    padding: 20px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.data-table-mini-v2 {
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 16px;
}

.data-table-mini-v2 .row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.9rem;
    font-weight: 500;
    font-family: var(--f-display);
}

.data-table-mini-v2 .row span:last-child {
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* Ridge Animation V2 */
.ridge-item-v2, .ridge-item-v2-main {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: ridgeRevealV2 3s ease-out forwards;
}

.ridge-item-v2-main {
    animation: ridgeRevealV2 3s ease-out forwards, ridgeGlowV2 4s infinite alternate;
}

@keyframes ridgeRevealV2 {
    to { stroke-dashoffset: 0; }
}

@keyframes ridgeGlowV2 {
    from { filter: drop-shadow(0 0 2px rgba(0, 255, 170, 0.2)); }
    to { filter: drop-shadow(0 0 10px rgba(0, 255, 170, 0.6)); }
}

/* Sankey Flow Animation V2 */
.flow-bands-v2 path {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
    animation: flowExpandV2 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.flow-bands-v2 path:nth-child(1) { animation-delay: 0.1s; }
.flow-bands-v2 path:nth-child(2) { animation-delay: 0.2s; }
.flow-bands-v2 path:nth-child(3) { animation-delay: 0.3s; }
.flow-bands-v2 path:nth-child(4) { animation-delay: 0.4s; }
.flow-bands-v2 path:nth-child(5) { animation-delay: 0.5s; }

@keyframes flowExpandV2 {
    to { opacity: var(--target-opacity, 0.7); transform: scaleX(1); }
}

.flow-bands-v2 path:nth-child(3) { --target-opacity: 1; }
.flow-bands-v2 path:not(:nth-child(3)) { --target-opacity: 0.6; }

/* Pulse Animation V3 (REMOVED ANIMATIONS TO MATCH IMAGE STATIC VERSION) */
.dots-inner-pulse-v2 circle, .dots-outer-orbit-v2 circle {
    /* Animations removed */
}

.dots-outer-orbit-v2 {
    transform-origin: center;
}

/* --- REVOPS VISUALS --- */

/* Venn Diagram */
.venn-circle {
    mix-blend-mode: screen;
    animation: vennPulse 6s ease-in-out infinite;
}
@keyframes vennPulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.03); opacity: 0.8; }
}
.venn-center {
    animation: centerPulse 3s ease-in-out infinite;
}
@keyframes centerPulse {
    0%, 100% { filter: drop-shadow(0 0 10px var(--c-lime)); transform: scale(1); }
    50% { filter: drop-shadow(0 0 25px var(--c-lime)); transform: scale(1.05); }
}

/* Horizontal Frise (AARRR) */
.frise-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Force icons alignment even if text lengths vary */
    width: 100%;
    padding: 60px 0;
    position: relative;
    margin: 20px 0;
}
.frise-line-bg {
    position: absolute;
    top: 71px; /* Center of 24px dot starting at 60px padding */
    left: 0;
    width: 100%;
    height: 2px;
    background: rgba(255,255,255,0.1);
    z-index: 1;
}
.frise-line-progress {
    position: absolute;
    top: 71px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--c-lime);
    z-index: 2;
    animation: friseLineMove 10s linear infinite;
}
@keyframes friseLineMove {
    0%, 10% { width: 0; opacity: 1; }
    80% { width: 100%; opacity: 1; }
    90%, 100% { width: 100%; opacity: 0; }
}
.frise-step {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    flex: 1;
    text-align: center;
}
.frise-dot {
    width: 24px;
    height: 24px;
    background: #000;
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
/* Precision sync based on linear line progress (10% to 80% time for 0 to 100% width) */
.frise-step:nth-child(3) .frise-dot { animation: friseDot1 10s linear infinite; }
.frise-step:nth-child(4) .frise-dot { animation: friseDot2 10s linear infinite; }
.frise-step:nth-child(5) .frise-dot { animation: friseDot3 10s linear infinite; }
.frise-step:nth-child(6) .frise-dot { animation: friseDot4 10s linear infinite; }
.frise-step:nth-child(7) .frise-dot { animation: friseDot5 10s linear infinite; }

@keyframes friseDot1 {
    0%, 16.9% { background: #000; border-color: rgba(255,255,255,0.1); box-shadow: none; }
    17%, 89% { background: var(--c-lime); border-color: var(--c-lime); box-shadow: 0 0 15px var(--c-lime); }
    90%, 100% { background: #000; border-color: rgba(255,255,255,0.1); box-shadow: none; }
}
@keyframes friseDot2 {
    0%, 30.9% { background: #000; border-color: rgba(255,255,255,0.1); box-shadow: none; }
    31%, 89% { background: var(--c-lime); border-color: var(--c-lime); box-shadow: 0 0 15px var(--c-lime); }
    90%, 100% { background: #000; border-color: rgba(255,255,255,0.1); box-shadow: none; }
}
@keyframes friseDot3 {
    0%, 44.9% { background: #000; border-color: rgba(255,255,255,0.1); box-shadow: none; }
    45%, 89% { background: var(--c-lime); border-color: var(--c-lime); box-shadow: 0 0 15px var(--c-lime); }
    90%, 100% { background: #000; border-color: rgba(255,255,255,0.1); box-shadow: none; }
}
@keyframes friseDot4 {
    0%, 58.9% { background: #000; border-color: rgba(255,255,255,0.1); box-shadow: none; }
    59%, 89% { background: var(--c-lime); border-color: var(--c-lime); box-shadow: 0 0 15px var(--c-lime); }
    90%, 100% { background: #000; border-color: rgba(255,255,255,0.1); box-shadow: none; }
}
@keyframes friseDot5 {
    0%, 72.9% { background: #000; border-color: rgba(255,255,255,0.1); box-shadow: none; }
    73%, 89% { background: var(--c-lime); border-color: var(--c-lime); box-shadow: 0 0 15px var(--c-lime); }
    90%, 100% { background: #000; border-color: rgba(255,255,255,0.1); box-shadow: none; }
}

.frise-label {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1rem;
    color: white;
    text-transform: uppercase;
}
.frise-step:nth-child(3) .frise-label { animation: friseLabel1 10s linear infinite; }
.frise-step:nth-child(4) .frise-label { animation: friseLabel2 10s linear infinite; }
.frise-step:nth-child(5) .frise-label { animation: friseLabel3 10s linear infinite; }
.frise-step:nth-child(6) .frise-label { animation: friseLabel4 10s linear infinite; }
.frise-step:nth-child(7) .frise-label { animation: friseLabel5 10s linear infinite; }

@keyframes friseLabel1 { 0%, 16.9% { color: white; } 17%, 89% { color: var(--c-lime); } 90%, 100% { color: white; } }
@keyframes friseLabel2 { 0%, 30.9% { color: white; } 31%, 89% { color: var(--c-lime); } 90%, 100% { color: white; } }
@keyframes friseLabel3 { 0%, 44.9% { color: white; } 45%, 89% { color: var(--c-lime); } 90%, 100% { color: white; } }
@keyframes friseLabel4 { 0%, 58.9% { color: white; } 59%, 89% { color: var(--c-lime); } 90%, 100% { color: white; } }
@keyframes friseLabel5 { 0%, 72.9% { color: white; } 73%, 89% { color: var(--c-lime); } 90%, 100% { color: white; } }

/* 6 Steps Version for GTM */
.frise-6-steps .frise-step:nth-child(3) .frise-dot { animation: friseDot6_1 10s linear infinite; }
.frise-6-steps .frise-step:nth-child(4) .frise-dot { animation: friseDot6_2 10s linear infinite; }
.frise-6-steps .frise-step:nth-child(5) .frise-dot { animation: friseDot6_3 10s linear infinite; }
.frise-6-steps .frise-step:nth-child(6) .frise-dot { animation: friseDot6_4 10s linear infinite; }
.frise-6-steps .frise-step:nth-child(7) .frise-dot { animation: friseDot6_5 10s linear infinite; }
.frise-6-steps .frise-step:nth-child(8) .frise-dot { animation: friseDot6_6 10s linear infinite; }

@keyframes friseDot6_1 {
    0%, 16.9% { background: #000; border-color: rgba(255,255,255,0.1); box-shadow: none; }
    17%, 89% { background: var(--c-lime); border-color: var(--c-lime); box-shadow: 0 0 15px var(--c-lime); }
    90%, 100% { background: #000; border-color: rgba(255,255,255,0.1); box-shadow: none; }
}
@keyframes friseDot6_2 {
    0%, 27.9% { background: #000; border-color: rgba(255,255,255,0.1); box-shadow: none; }
    28%, 89% { background: var(--c-lime); border-color: var(--c-lime); box-shadow: 0 0 15px var(--c-lime); }
    90%, 100% { background: #000; border-color: rgba(255,255,255,0.1); box-shadow: none; }
}
@keyframes friseDot6_3 {
    0%, 38.9% { background: #000; border-color: rgba(255,255,255,0.1); box-shadow: none; }
    39%, 89% { background: var(--c-lime); border-color: var(--c-lime); box-shadow: 0 0 15px var(--c-lime); }
    90%, 100% { background: #000; border-color: rgba(255,255,255,0.1); box-shadow: none; }
}
@keyframes friseDot6_4 {
    0%, 49.9% { background: #000; border-color: rgba(255,255,255,0.1); box-shadow: none; }
    50%, 89% { background: var(--c-lime); border-color: var(--c-lime); box-shadow: 0 0 15px var(--c-lime); }
    90%, 100% { background: #000; border-color: rgba(255,255,255,0.1); box-shadow: none; }
}
@keyframes friseDot6_5 {
    0%, 60.9% { background: #000; border-color: rgba(255,255,255,0.1); box-shadow: none; }
    61%, 89% { background: var(--c-lime); border-color: var(--c-lime); box-shadow: 0 0 15px var(--c-lime); }
    90%, 100% { background: #000; border-color: rgba(255,255,255,0.1); box-shadow: none; }
}
@keyframes friseDot6_6 {
    0%, 72.9% { background: #000; border-color: rgba(255,255,255,0.1); box-shadow: none; }
    73%, 89% { background: var(--c-lime); border-color: var(--c-lime); box-shadow: 0 0 15px var(--c-lime); }
    90%, 100% { background: #000; border-color: rgba(255,255,255,0.1); box-shadow: none; }
}

.frise-6-steps .frise-step:nth-child(3) .frise-label { animation: friseLabel6_1 10s linear infinite; }
.frise-6-steps .frise-step:nth-child(4) .frise-label { animation: friseLabel6_2 10s linear infinite; }
.frise-6-steps .frise-step:nth-child(5) .frise-label { animation: friseLabel6_3 10s linear infinite; }
.frise-6-steps .frise-step:nth-child(6) .frise-label { animation: friseLabel6_4 10s linear infinite; }
.frise-6-steps .frise-step:nth-child(7) .frise-label { animation: friseLabel6_5 10s linear infinite; }
.frise-6-steps .frise-step:nth-child(8) .frise-label { animation: friseLabel6_6 10s linear infinite; }

@keyframes friseLabel6_1 { 0%, 16.9% { color: white; } 17%, 89% { color: var(--c-lime); } 90%, 100% { color: white; } }
@keyframes friseLabel6_2 { 0%, 27.9% { color: white; } 28%, 89% { color: var(--c-lime); } 90%, 100% { color: white; } }
@keyframes friseLabel6_3 { 0%, 38.9% { color: white; } 39%, 89% { color: var(--c-lime); } 90%, 100% { color: white; } }
@keyframes friseLabel6_4 { 0%, 49.9% { color: white; } 50%, 89% { color: var(--c-lime); } 90%, 100% { color: white; } }
@keyframes friseLabel6_5 { 0%, 60.9% { color: white; } 61%, 89% { color: var(--c-lime); } 90%, 100% { color: white; } }
@keyframes friseLabel6_6 { 0%, 72.9% { color: white; } 73%, 89% { color: var(--c-lime); } 90%, 100% { color: white; } }

@keyframes hourglass-show-frame { 0%, 75% { opacity: 1; } 76%, 100% { opacity: 0; } }
@keyframes hourglass-show-top { 0%, 25% { opacity: 1; } 26%, 100% { opacity: 0; } }
@keyframes hourglass-show-mid { 0%, 25% { opacity: 0; } 26%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
@keyframes hourglass-show-bottom { 0%, 50% { opacity: 0; } 51%, 75% { opacity: 1; } 76%, 100% { opacity: 0; } }
@keyframes hourglass-flip { 0%, 75% { opacity: 0; transform: rotate(0deg); } 75.1%, 100% { opacity: 1; transform: rotate(180deg); } }

.frise-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.frise-desc {
    font-size: 0.85rem;
    opacity: 0.6;
    max-width: 140px;
}

/* RevOps Ecosystem (Improved) */
.ecosystem-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 40px 0;
    position: relative;
    width: 100%;
}

.eco-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    z-index: 2;
}

.eco-tag-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 16px 24px;
    border-radius: 12px;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 0.9rem;
    color: white;
    text-align: center;
    min-width: 160px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    cursor: default;
}

.eco-tag-card:hover {
    background: rgba(204, 255, 0, 0.05);
    border-color: var(--c-lime);
    box-shadow: 0 0 20px rgba(204, 255, 0, 0.1);
    transform: translateX(5px);
}

.eco-column-left .eco-tag-card:hover {
    transform: translateX(-5px);
}

.eco-hub-wrapper {
    position: relative;
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.eco-hub-glow {
    position: absolute;
    width: 140%;
    height: 140%;
    background: radial-gradient(circle, rgba(204, 255, 0, 0.2) 0%, transparent 70%);
    animation: hubPulse 4s ease-in-out infinite;
}

.eco-hub-main {
    width: 100px;
    height: 100px;
    background: var(--c-lime);
    color: var(--c-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1.2rem;
    box-shadow: 0 0 30px rgba(204, 255, 0, 0.4);
    z-index: 3;
    letter-spacing: 1px;
}

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

.eco-svg-connectors {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.eco-line-new {
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 1;
    fill: none;
    stroke-dasharray: 4 4;
}

/* What is RevOps Grid (Connectors) */
.revops-definition-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    width: 100%;
    position: relative;
    padding-top: 40px;
}

.revops-definition-grid::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15.50%;
    right: 15.50%;
    height: 2px;
    background: rgba(255,255,255,0.2);
}

.revops-definition-grid::after {
    content: '';
    position: absolute;
    top: -20px;
    left: 50%;
    width: 2px;
    height: 20px;
    background: rgba(255,255,255,0.2);
    transform: translateX(-50%);
}

.def-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}

/* Vertical line from top horizontal bar to each column header */
.def-col::before {
    content: '';
    position: absolute;
    top: -40px;
    left: 50%;
    width: 2px;
    height: 40px;
    background: rgba(255,255,255,0.2);
    transform: translateX(-50%);
}

.def-header {
    background: white;
    color: black;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    font-weight: 700;
    font-family: var(--f-display);
    z-index: 2;
    position: relative;
}

/* Vertical line under headers to items */
.def-header::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: 2px;
    height: 20px;
    background: rgba(255,255,255,0.2);
    transform: translateX(-50%);
}

.def-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 16px;
    border-radius: 12px;
    font-size: 0.9rem;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.def-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: 2px;
    height: 20px;
    background: rgba(255,255,255,0.2);
    transform: translateX(-50%);
}
.def-item:hover {
    background: var(--c-lime);
    color: var(--c-bg);
    transform: translateY(-5px);
}

@keyframes rotate { to { transform: rotate(360deg); } }

.circle-outer {
    stroke: rgba(255,255,255,0.1);
    stroke-width: 1;
    fill: none;
    transition: all 0.3s ease;
}

.circle-inner {
    transition: all 0.3s ease;
}

/* Projects Grid Visual */
.projects-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px; /* Matching layout-v2 padding gaps */
    padding: 0;
}

.main-visual {
    width: 66.666%;
    flex: 0 0 66.666%;
    height: calc(100vh - 16px);
    position: sticky;
    top: 8px;
    z-index: 10;
    padding: 8px;
    padding-left: 4px; /* Half gap */
    padding-top: 92px;
    padding-bottom: 8px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
}

/* Results Grid v2 */
.results-grid-v2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    width: 100%;
}

.benefit-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.benefit-item h4 {
    font-family: var(--f-display);
    color: var(--c-lime);
    font-size: 1.1rem;
}

.benefit-item p {
    font-size: 0.9rem;
    opacity: 0.8;
}

.diagnostic-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.feature-main-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 64px;
    align-items: center;
}

.dataviz-types-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.kpi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.mg-50{
    margin-top:50px;
}

.dashboard-showcase-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    flex-grow: 1;
}

.benefits-grid-v3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

/* ==========================================================================
   RESPONSIVE - TABLET & MOBILE
   ========================================================================== */

/* Tablet Version (1024px and below) */
@media (max-width: 1024px) {
    body {
        overflow-y: auto;
        height: auto;
    }

    .layout-v2 {
        flex-direction: column;
        height: auto;
        gap: 24px;
    }

    .page-home .layout-v2 {
        padding-bottom: 0 !important;
    }

    .top-nav {
        flex-direction: column !important;
        align-items: flex-start !important;
        height: auto !important;
        gap: 12px;
        position: relative !important;
    }

    .header-logo {
        width: 100% !important;
        padding: 0 32px !important;
        margin: 0 !important;
        position: relative;
        left: 0 !important;
        margin-bottom: 24px !important;
        box-sizing: border-box !important;
        height: 84px !important;
        display: flex !important;
        align-items: center !important;
    }

    .nav-right {
        position: absolute !important;
        top: 42px !important;
        transform: translateY(-50%) !important;
        right: 32px !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding-right: 0 !important;
    }

    /* Shift content down more for the fixed header */
    .sidebar {
        width: 100% !important;
        flex: none !important;
        padding: 8px !important;
        padding-top: 130px !important;
        height: auto !important;
        position: static !important;
    }

    .main-content-area, .main-visual {
        width: 100% !important;
        padding: 8px !important;
        padding-top: 20px !important;
        overflow-y: visible !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: static !important;
    }

    /* Tablet projects grid */
    .projects-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        padding: 0 !important;
        margin-bottom: 32px !important;
        width: 100% !important;
        max-width: none !important;
    }

    .static-card {
        height: auto !important;
        min-height: 280px;
        width: 100% !important;
        box-sizing: border-box;
    }

    .project-bento-layout {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Bento Spans for Tablet */
    .span-4, .span-3 { grid-column: span 2 !important; }
    
    .drawer {
        width: 80vw;
    }
    
    .display-text {
        font-size: 3.5rem;
    }

    .pb-title h1 {
        font-size: 4rem;
    }

    .pb-testimonial {
        flex-direction: column !important;
        text-align: center;
    }
    
    .pb-testimonial .testimonial-img {
        width: 100%;
        height: 300px;
    }

    .results-grid-v2,
    .diagnostic-grid,
    .dataviz-types-grid,
    .kpi-grid,
    .benefits-grid-v3,
    .feature-main-grid,
    .dashboard-showcase-grid,
    .section-grid-2col,
    .section-grid-2col-alt,
    .section-grid-2col-stacked,
    .expertise-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        width: 100% !important;
    }

    .problem-card-col {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 16px !important;
    }

    .problem-card-col > div {
        flex: 1 !important;
        min-width: 200px !important;
    }

    .histogram-container, .diagram-container {
        width: 100% !important;
        max-width: 650px !important;
        margin: 0 auto !important;
    }

    .results-grid-v2 > div,
    .expertise-grid > div {
        grid-column: span 1 !important;
    }

    .predictive-impact-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    .predictive-impact-grid > div:last-child {
        width: 100% !important;
        max-width: 500px;
        margin: 0 auto;
    }

    .centered-histogram-container {
        width: 100% !important;
        max-width: 500px;
        margin: 0 auto;
    }

    svg {
        max-width: 100% !important;
        height: auto !important;
    }

    .tech-grid-v2 {
        grid-template-columns: 1fr !important;
        gap: 60px !important;
    }
    
    .tech-grid-v2::before, .tech-grid-v2::after {
        display: none !important;
    }

    /* Harmonize RevOps Results Grid */
    .results-grid-v2 div {
        padding: 30px !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.05) !important;
        text-align: center;
    }

    .results-grid-v2 div:last-child {
        border-bottom: none !important;
    }

    .feature-main-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    .feature-main-grid > div:last-child {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .btn-submit.full-width {
        width: 100% !important;
        display: block !important;
        box-sizing: border-box !important;
        grid-column: 1 / -1 !important;
        max-width: none !important;
        text-align: center !important;
        padding: 20px !important;
    }

    .btn-submit.full-width span {
        width: 100% !important;
        display: block !important;
    }

    .contact-form {
        grid-template-columns: 1fr !important;
        justify-items: stretch !important;
    }
    
    .dashboard-showcase-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Center RevOps & GTM cycle visuals on tablet */
    .frise-container {
        width: 100%;
        max-width: 500px; /* Narrower to feel centered */
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-left: 40px !important;
        gap: 30px;
        background: rgba(255,255,255,0.02);
        padding: 40px !important;
        border-radius: 24px;
    }

    .frise-line-bg, .frise-line-progress {
        left: 51px !important; /* Center for 24px dot (40+11) or adjustment */
        top: 0;
        width: 2px;
        height: 100%;
    }

    /* Target small dots specifically for GTM on tablet */
    .pb-section-gtm-frise .frise-line-bg, 
    .pb-section-gtm-frise .frise-line-progress {
        left: 45px !important; /* 40px padding + 5px center for 12px dot - slight adjustment */
    }

    .frise-step {
        flex-direction: row;
        text-align: left;
        align-items: center;
        gap: 20px !important;
        width: 100%;
    }
}

/* Mobile Version (768px and below) */
@media (max-width: 768px) {
    .chaos-order-v2 {
        flex-direction: column !important;
    }
    
    .chaos-side {
        border-right: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .nav-right .nav-link-v2, 
    .nav-right .btn-liquid {
        display: none !important; /* Simplified mobile nav */
    }

    .top-nav {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px;
    }

    .header-logo {
        width: 100% !important;
        height: 84px !important;
        padding: 0 24px !important;
        left: 0 !important;
        margin: 0 !important;
        margin-bottom: 24px !important;
        background: rgba(255, 255, 255, 0.03);
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
    }

    .nav-right {
        position: absolute !important;
        top: 42px !important;
        transform: translateY(-50%) !important;
        right: 24px !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding-right: 0 !important;
    }

    .drawer-header {
        padding: 32px;
    }

    .side-nav {
        gap: 20px;
    }

    .side-nav a {
        font-size: 1.5rem;
    }

    .contact-info{
        font-size: 1rem;
    }

    .header-logo .logo-text {
        font-size: 1.3rem;
    }

    .main-visual {
        overflow: visible !important;
    }

    .display-text {
        font-size: 2.5rem;
    }

    /* DataViz mobile visual hide */
    .dataviz-visual-hide-mobile {
        display: none !important;
    }

    .sidebar {
        padding: 8px !important;
        padding-top: 110px !important;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .main-content-area, .main-visual {
        padding: 8px !important;
        padding-top: 24px !important;
        width: 100% !important;
    }

    .pb-block, .bento-block {
        padding: 40px 20px !important;
        width: 100% !important;
    }

    .projects-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding: 0 !important;
        margin-bottom: 32px !important;
        width: 100% !important;
        max-width: none !important;
    }

    .static-card {
        height: auto !important;
        min-height: 220px;
    }

    .static-card h3 {
        font-size: 1.2rem !important;
        margin: 15px 0 !important;
    }

    .project-bento-layout {
        grid-template-columns: 1fr !important;
        grid-auto-rows: auto !important;
    }

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

    .row-2, .row-3 {
        grid-row: auto !important;
    }

    .pb-title h1 {
        font-size: 2.4rem;
    }

    .pb-lead .lead {
        font-size: 1.1rem;
    }

    .contact-form {
        grid-template-columns: 1fr !important;
        justify-items: stretch !important;
    }

    .btn-submit.full-width {
        width: 100% !important;
        display: block !important;
        box-sizing: border-box !important;
        grid-column: 1 / -1 !important;
        max-width: none !important;
        text-align: center !important;
        padding: 20px !important;
    }

    .btn-submit.full-width span {
        width: 100% !important;
        display: block !important;
    }

    .drawer, .drawer-wide {
        width: 100vw !important;
        right: -100vw;
    }

    .drawer-content {
        padding: 30px 20px;
    }

    .ecosystem-visual {
        flex-direction: column;
        gap: 40px;
    }

    .eco-svg-connectors {
        display: none;
    }

    .revops-definition-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .revops-definition-grid::before,
    .revops-definition-grid::after {
        display: none;
    }

    .def-col::before {
        display: none;
    }

    .results-grid-v2,
    .diagnostic-grid,
    .dataviz-types-grid,
    .kpi-grid,
    .benefits-grid-v3,
    .feature-main-grid,
    .dashboard-showcase-grid,
    .expertise-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        width: 100% !important;
    }

    .pb-block {
        overflow: hidden !important;
    }

    .pb-block > div[style*="padding: 40px"] {
        padding: 0 !important;
    }

    #gtm-stack-machine .results-grid-v2 {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    #gtm-stack-machine .results-grid-v2 > div {
        width: 100% !important;
        grid-column: span 1 !important;
    }

    .predictive-impact-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    .predictive-impact-grid > div:last-child {
        width: 100% !important;
        max-width: none !important;
    }

    .kpi-mini-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .centered-histogram-container {
        width: 100% !important;
        max-width: none !important;
    }

    .centering-wrapper, 
    .centered-histogram-container > div {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }

    .expertise-grid span {
        display: inline-block !important;
        max-width: 100% !important;
        word-break: break-word !important;
        white-space: normal !important;
    }

    .feature-main-grid > div {
        width: 100% !important;
    }

    /* Reset spans in all grids for mobile */
    .results-grid-v2 > div,
    .expertise-grid > div {
        grid-column: span 1 !important;
    }

    .diagnostic-grid div,
    .dataviz-card,
    .mini-kpi-v2 {
        padding: 24px !important;
    }

    /* Harmonize RevOps Results Grid Mobile */
    .results-grid-v2 div {
        padding: 24px !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.05) !important;
        text-align: center;
        background: rgba(255,255,255,0.03) !important;
    }

    /* Use tablet frise base, just adjust padding if needed */
    .frise-container {
        padding: 30px 20px !important;
        gap: 32px;
        max-width: none;
    }
    
    .frise-line-bg, .frise-line-progress {
        left: 31px !important; /* Center for 24px dot (20px padding + 11px) */
    }
    
    /* Small dots for GTM on mobile */
    .pb-section-gtm-frise .frise-line-bg,
    .pb-section-gtm-frise .frise-line-progress {
        left: 25px !important; /* 20px padding + 5px */
    }
    
    @keyframes friseLineMove {
        0%, 10% { height: 0; opacity: 1; }
        80% { height: 100%; opacity: 1; }
        90%, 100% { height: 100%; opacity: 0; }
    }
    
    .frise-step {
        flex-direction: row;
        text-align: left;
        align-items: center;
        gap: 20px !important;
        width: 100%;
    }

    .frise-dot {
        flex-shrink: 0;
    }

    .frise-content {
        align-items: flex-start;
        gap: 4px;
        flex: 1;
    }

    .frise-step .frise-desc {
        font-size: 0.85rem;
        max-width: none !important;
    }

    .methodology-block {
        background: rgba(0,0,0,0.6) !important;
        border-color: rgba(204, 255, 0, 0.2) !important;
    }

    .methodology-block h2 {
        font-size: 2.2rem !important;
    }
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes crmSlideInRight {
    from { transform: translate3d(20%, 0, 0); visibility: visible; }
    to { transform: translate3d(0, 0, 0); }
}

.benefit-card {
    transition: all 0.4s ease;
}

.benefit-card:hover {
    background: rgba(204, 255, 0, 0.05) !important;
    transform: translateY(-8px);
}

.diag-card:hover {
    border-color: var(--c-lime) !important;
    background: rgba(204, 255, 0, 0.03) !important;
    transform: translateY(-5px);
}

.cta-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(204, 255, 0, 0.15) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    pointer-events: none;
    animation: pulseGlow 4s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}

.badge-v2 {
    background: rgba(255,255,255,0.05);
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.1);
    font-size: 0.7rem;
    font-weight: 600;
    color: white;
    margin-right: 8px;
    margin-bottom: 8px;
}

/* Dataviz Page Styles */
.chaos-order-v2 {
    display: flex;
    min-height: 400px;
    width: 100%;
}

/* CRM Optimization Skills */
.tech-grid-v2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    position: relative;
    gap: 40px;
}

.tech-grid-v2::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255,255,255,0.05);
}

.tech-grid-v2::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(255,255,255,0.05);
}

.crm-stack-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
}

.crm-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 16px 32px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 240px;
    animation: crmFloat 6s ease-in-out infinite;
    backdrop-filter: blur(10px);
}

.crm-card:nth-child(2) { animation-delay: -2s; }
.crm-card:nth-child(3) { animation-delay: -4s; }

@keyframes crmFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.crm-dot { width: 12px; height: 12px; border-radius: 50%; }
.dot-sf { background: #00A1E0; box-shadow: 0 0 10px rgba(0, 161, 224, 0.4); }
.dot-hs { background: #FF7A59; box-shadow: 0 0 10px rgba(255, 122, 89, 0.4); }
.dot-zh { background: #E51A24; box-shadow: 0 0 10px rgba(229, 26, 36, 0.4); }
.dot-at { background: #000000; box-shadow: 0 0 10px rgba(45, 9, 11, 0.4); }
.chaos-side, .order-side {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    gap: 30px;
}
.chaos-side {
    background: rgba(255,255,255,0.02);
    border-right: 1px solid rgba(255,255,255,0.1);
}
.chaos-label, .order-label {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 2px;
    opacity: 0.5;
}
.excel-mockup {
    width: 200px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0.3;
}
.excel-row {
    height: 12px;
    background: white;
    border-radius: 2px;
}
.excel-row.header { height: 18px; margin-bottom: 4px; }

.dashboard-mockup {
    width: 200px;
    height: 120px;
    background: rgba(204, 255, 0, 0.05);
    border: 1px solid var(--c-lime);
    border-radius: 8px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.dash-circle {
    width: 40px;
    height: 40px;
    border: 2px solid var(--c-lime);
    border-radius: 50%;
    margin: 0 auto;
}
.dash-bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 40px;
    justify-content: center;
}
.bar {
    width: 15px;
    background: var(--c-lime);
    border-radius: 2px 2px 0 0;
}

.mission-card {
    text-align: center;
    padding: 30px;
    transition: transform 0.3s ease;
}
.mission-card:hover { transform: translateY(-10px); }
.mission-icon { font-size: 2rem; margin-bottom: 20px; }

.tools-grid-v2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}
.tool-logo-item {
    text-align: center;
}
.tool-icon-circle {
    width: 60px;
    height: 60px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--c-lime);
}

/* Accordion */
.accordion-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.accordion-item {
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    overflow: hidden;
}
.accordion-item summary {
    padding: 24px;
    font-family: var(--f-display);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.accordion-item summary::after { content: '+'; font-size: 1.2rem; }
.accordion-item[open] summary::after { content: '-'; }
.accordion-content {
    padding: 0 24px 24px 24px;
    opacity: 0.9;
    line-height: 1.6;
}

/* Data CTA Tech Grid */
.data-cta-grid {
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.tech-grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(204, 255, 0, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(204, 255, 0, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(circle, black 0%, transparent 80%);
    z-index: 1;
}

@keyframes pathAnim {
    from { stroke-dashoffset: 1000; }
    to { stroke-dashoffset: 0; }
}
.path-anim {
    stroke-dasharray: 1000;
    animation: pathAnim 5s ease alternate infinite;
}

/* Form Success States */
.success-icon-wrapper svg {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: draw-check 0.8s ease-out 0.5s forwards;
}

@keyframes draw-check {
    to {
        stroke-dashoffset: 0;
    }
}

/* GTM Expansion specific */
.pyramid-container {
    padding: 40px; 
    background: rgba(0,0,0,0.2); 
    border-radius: 20px; 
    border: 1px solid rgba(255,255,255,0.05); 
    display: flex; 
    flex-direction: column; 
    align-items: center;
}

.pyramid-visual {
    width: 100%; 
    max-width: 300px; 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
    align-items: center;
}

.pyramid-tier {
    height: 60px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: 800;
    color: black;
}

.tier-flagship {
    width: 30%; 
    background: #00f5ff; 
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%); 
    align-items: flex-end; 
    padding-bottom: 5px; 
    font-size: 0.7rem;
}

.tier-equinox {
    width: 65%; 
    background: var(--c-lime); 
    clip-path: polygon(25% 0%, 75% 0%, 100% 100%, 0% 100%); 
    font-size: 0.8rem;
}

.tier-line {
    width: 100%; 
    background: rgba(189, 147, 249, 0.1);
    border: 1px solid rgba(189, 147, 249, 0.2);
    clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%); 
    font-size: 0.85rem; 
    color: #bd93f9;
}

.donut-chart-container-cs {
    padding: 40px; 
    background: rgba(255,255,255,0.02); 
    border-radius: 20px; 
    display: flex; 
    flex-direction: column; 
    align-items: center;
}

.donut-chart-box {
    width: 180px; 
    height: 180px; 
    position: relative;
}

.donut-label-center {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-direction: column;
}

.legend-grid-cs {
    margin-top: 24px; 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
    width: 100%; 
    font-size: 0.7rem;
}

.legend-item-cs {
    display: flex; 
    align-items: center; 
    gap: 8px;
}

.legend-dot-cs {
    width: 8px; 
    height: 8px; 
    border-radius: 50%;
}

.display-text-cs-xl {
    font-size: clamp(2.5rem, 8vw, 4rem); 
    line-height: 1;
}

/* Legal Pages */
.legal-page-layout {
    /* No padding-top to keep alignment exactly matching other subpages */
}

.legal-pb-block {
    padding: 64px !important; 
    text-align: left !important; 
    align-items: flex-start !important; 
    justify-content: flex-start !important;
}

.legal-title-v2 {
    font-family: var(--f-display); 
    font-size: 3.5rem; 
    margin-bottom: 48px;
}

.legal-content-v2 {
    opacity: 0.9; 
    line-height: 1.6; 
    max-width: 800px;
}

.legal-section-v2 {
    margin-bottom: 40px;
}

.legal-section-v2 h2 {
    font-family: var(--f-display); 
    color: white; 
    margin-bottom: 16px;
}

/* --- GTM ENGINEERING & SHARED REVOPS COMPONENTS --- */
.pb-hero-gtm {
    padding: 80px 48px;
    background: radial-gradient(circle at top right, rgba(204,255,0,0.05), transparent 40%),
                rgba(255,255,255,0.01);
}

.hero-gtm-label {
    color: var(--c-lime);
    font-weight: 800;
    letter-spacing: 0.2em;
}

.hero-gtm-title {
    font-family: var(--f-display);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 1.1;
    margin: 24px 0;
    font-weight: 700;
}

.hero-gtm-subtitle {
    font-size: 1.25rem;
    opacity: 0.8;
    margin-bottom: 32px;
}

.hero-gtm-lead {
    max-width: 800px;
    line-height: 1.8;
    opacity: 0.9;
}

.problem-card-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.problem-card {
    padding: 24px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
}

.problem-card h4 {
    color: var(--c-lime);
    margin-bottom: 8px;
}

.benefits-grid-v3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
}

.benefit-card-v3 {
    padding: 32px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.benefit-card-v3:hover {
    background: rgba(255,255,255,0.05);
    transform: translateY(-5px);
}

.results-grid-v2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 48px;
}

.result-item-full {
    padding: 32px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 20px;
}

.text-num {
    color: var(--c-lime);
    font-family: var(--f-display);
    font-weight: 800;
    margin-right: 8px;
}

/* Comparison GTM */
.comparison-grid-container {
    display: grid;
    grid-template-columns: 1fr 60px 1fr;
    gap: 20px;
    align-items: center;
    margin-top: 40px;
}

.comp-header-traditional, .comp-header-gtm {
    padding: 12px;
    text-align: center;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
}

.comp-header-traditional { color: rgba(255,255,255,0.4); }

.comp-cell-traditional, .comp-cell-gtm {
    padding: 24px;
    background: rgba(255,255,255,0.02);
    border-radius: 12px;
    font-size: 0.9rem;
    text-align: center;
}

.comp-cell-traditional { opacity: 0.6; }
.comp-cell-gtm { border: 1px solid rgba(204,255,0,0.2); }

/* Methodology GTM */
.meth-card {
    padding: 32px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
}

.meth-step-label-cyan { color: #00f5ff; font-weight: 800; margin-bottom: 12px; }
.meth-step-label-purple { color: #bd93f9; font-weight: 800; margin-bottom: 12px; }
.meth-step-label-lime { color: var(--c-lime); font-weight: 800; margin-bottom: 12px; }

/* GTM Frise / Cycle */
.frise-container {
    padding: 60px 0;
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.frise-line-bg {
    position: absolute;
    top: 65px; /* 60px padding + 6px (center of 12px dot) - 1px for line height half */
    left: 0;
    width: 100%;
    height: 2px;
    background: rgba(255,255,255,0.1);
    z-index: 1;
}

.frise-line-progress {
    position: absolute;
    top: 65px;
    left: 0;
    width: 50%;
    height: 2px;
    background: var(--c-lime);
    box-shadow: 0 0 10px var(--c-glow-lime);
    z-index: 2;
}

.frise-step {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100px;
}

.frise-dot {
    width: 12px;
    height: 12px;
    background: var(--c-bg);
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.frise-step:nth-child(-n+4) .frise-dot {
    border-color: var(--c-lime);
    background: var(--c-lime);
    box-shadow: 0 0 10px var(--c-glow-lime);
}

.frise-label {
    font-size: 1rem;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 8px;
    color: white;
}

.frise-desc {
    font-size: 0.85rem;
    opacity: 0.7;
    text-align: center;
}

/* Horizontal Bar Chart (GED) */
.bar-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 32px;
}

.bar-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    margin-bottom: 12px;
    letter-spacing: 0.05em;
}

.bar-bg {
    height: 12px;
    background: rgba(255,255,255,0.05);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.bar-red {
    height: 100%;
    background: #ff5555;
    border-radius: 6px;
}

.bar-lime-glow {
    height: 100%;
    background: var(--c-lime);
    border-radius: 6px;
    box-shadow: 0 0 15px var(--c-glow-lime);
}

.w-85pct { width: 85%; }
.w-12pct { width: 12%; }

/* KPI Highlighting */
.kpi-card-highlight {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

.cyan .kpi-card-highlight:hover {
    background: rgba(255,255,255,0.03);
    border-color: ##00f5ff;
    transform: translateY(-5px);
}

.purple .kpi-card-highlight:hover {
    background: rgba(255,255,255,0.03);
    border-color: #bd93f9;
    transform: translateY(-5px);
}

/* Tag Variants */
.tag-cyan {
    background: rgba(0, 245, 255, 0.1);
    color: #00f5ff;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    border: 1px solid rgba(0, 245, 255, 0.2);
    white-space: nowrap;
}

.tag-lime-outline {
    background: transparent;
    color: var(--c-lime);
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    border: 1px solid var(--c-lime);
    white-space: nowrap;
}

.tag-purple {
    background: rgba(189, 147, 249, 0.1);
    color: #bd93f9;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    border: 1px solid rgba(189, 147, 249, 0.2);
    white-space: nowrap;
}

.text-purple{
    color: #bd93f9;
}

.text-cyan {
    color: #00f5ff;
}

/* Heights for charts */
.h-full { height: 100% !important; }
.h-85pct { height: 85% !important; }
.h-70pct { height: 70% !important; }
.h-66pct { height: 56% !important; }
.h-45pct { height: 45% !important; }
.h-12pct { height: 12% !important; }

/* Hub Architecture Nodes */
.hub-architecture-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px;
    background: rgba(255,255,255,0.02);
    border-radius: 20px;
    margin-top: 32px;
    position: relative;
}

.hub-architecture-container::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 80px;
    right: 80px;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(204,255,0,0.5), transparent);
    z-index: 0;
}

.hub-node {
    z-index: 1;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
}

.hub-node-source { background: rgba(0, 245, 255, 0.2); border: 1px solid #00f5ff; color: #00f5ff; }
.hub-node-center { background: rgba(204, 255, 0, 0.2); border: 1px solid var(--c-lime); color: var(--c-lime); box-shadow: 0 0 20px var(--c-glow-lime); }
.hub-node-target { background: rgba(189, 147, 249, 0.2); border: 1px solid #bd93f9; color: #bd93f9; }

/* Success state Drawer contact */
.contact-success-v2 {
    height: 100%; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    opacity: 0; 
    transform: translateY(20px); 
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.success-icon-box {
    margin-bottom: 24px;
}

.success-title-v2 {
    font-size: 2rem; 
    margin-bottom: 12px; 
    color: var(--c-lime);
}

.success-subtitle-v2 {
    opacity: 0.7; 
    font-size: 1.1rem;
}

.nav-link-v2-uppercase {
    text-transform: uppercase;
}

@keyframes simple-pulse {
    0% {
        transform: scale(0.6);
        opacity: 0.9;
    }
    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}