/**
 * governr Visual Section - Isometric Grid
 * An isometric 30° grid visual between hero and problem sections
 */

/* ============================================
   Uncontrolled AI Dots Canvas
   Red dots representing uncontrolled AI risk
   ============================================ */

.uncontrolled-ai-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
    pointer-events: none;
    /* Ensure canvas is visible */
    display: block;
}

/* Ensure container has explicit dimensions for canvas */
.governr-visual-container {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 400px;
}

/* ============================================
   Isometric Grid Visual Section
   ============================================ */

.governr-visual-section {
    height: 70vh;
    min-height: 400px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.governr-visual-container {
    width: 100%;
    height: 100%;
    position: relative;
}

/* Isometric Grid using CSS */
.isometric-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Grid lines container */
.isometric-grid-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    transform: translate(-25%, -25%);
}

/* Lines going up-right at 30 degrees */
.grid-lines-ascending {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(
        30deg,
        transparent,
        transparent 59px,
        rgba(var(--accent-rgb), 0.25) 59px,
        rgba(var(--accent-rgb), 0.25) 60px
    );
}

/* Lines going down-right at -30 degrees */
.grid-lines-descending {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(
        -30deg,
        transparent,
        transparent 59px,
        rgba(var(--accent-rgb), 0.25) 59px,
        rgba(var(--accent-rgb), 0.25) 60px
    );
}

/* Light theme - restore original brighter grid lines */
[data-theme="light"] .grid-lines-ascending {
    background-image: repeating-linear-gradient(
        30deg,
        transparent,
        transparent 59px,
        rgba(var(--accent-rgb), 0.5) 59px,
        rgba(var(--accent-rgb), 0.5) 60px
    );
}

[data-theme="light"] .grid-lines-descending {
    background-image: repeating-linear-gradient(
        -30deg,
        transparent,
        transparent 59px,
        rgba(var(--accent-rgb), 0.5) 59px,
        rgba(var(--accent-rgb), 0.5) 60px
    );
}

/* Subtle vignette effect at edges */
.governr-visual-section::before,
.governr-visual-section::after {
    content: '';
    position: absolute;
    top: 0;
    width: 15%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.governr-visual-section::before {
    left: 0;
    background: linear-gradient(to right, var(--bg), transparent);
}

.governr-visual-section::after {
    right: 0;
    background: linear-gradient(to left, var(--bg), transparent);
}

/* Top and bottom fade */
.governr-visual-container::before,
.governr-visual-container::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 15%;
    z-index: 2;
    pointer-events: none;
}

.governr-visual-container::before {
    top: 0;
    background: linear-gradient(to bottom, var(--bg), transparent);
}

.governr-visual-container::after {
    bottom: 0;
    background: linear-gradient(to top, var(--bg), transparent);
}

/* ============================================
   Isometric Cube (separate from grid)
   Covers 4 grid squares (120px x 120px footprint)
   ============================================ */

/* Cube container - positioned in centre, separate from grid */
/* Covers 4 grid squares (2x2) - grid spacing is 60px */
.isometric-cube {
    position: absolute;
    top: calc(50% + 70px);
    left: 50%;
    width: 240px;
    height: 210px;
    transform: translate(-50%, -200%);
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    /* Use transitions for reliable animation */
    transition: transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease-out;
}

/* Animated state - triggered by JavaScript when section is visible */
/* Phase 3: Governr box appears after yellow cubes (3.5s delay) */
.isometric-cube.animate {
    transform: translate(-50%, -50%);
    opacity: 1;
    transition-delay: 3.5s;
}

/* Common face styles */
.cube-face {
    position: absolute;
    backface-visibility: hidden;
}

/* Top face - diamond shape (240px diagonal = 2 grid squares) */
.cube-top {
    width: 240px;
    height: 140px;
    left: 0;
    top: 0;
    background: linear-gradient(135deg, rgba(4, 217, 255, 0.95) 0%, rgba(4, 217, 255, 0.8) 100%);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    box-shadow: 0 0 50px rgba(4, 217, 255, 0.7);
    z-index: 3;
}

/* Left face - parallelogram hanging from left edge of top */
.cube-left {
    width: 120px;
    height: 140px;
    left: 0;
    top: 70px;
    background: linear-gradient(180deg, rgba(4, 217, 255, 0.9) 0%, rgba(4, 217, 255, 0.6) 100%);
    clip-path: polygon(0% 0%, 100% 50%, 100% 100%, 0% 50%);
    z-index: 2;
}

/* Right face - parallelogram hanging from right edge of top */
.cube-right {
    width: 120px;
    height: 140px;
    right: 0;
    top: 70px;
    background: linear-gradient(180deg, rgba(4, 217, 255, 0.75) 0%, rgba(4, 217, 255, 0.45) 100%);
    clip-path: polygon(0% 50%, 100% 0%, 100% 50%, 0% 100%);
    z-index: 1;
}

/* Hide section divider line that appears after visual section */
.governr-visual-section + .section::before,
.governr-visual-section + #threats::before,
section[id="threats"]::before {
    display: none !important;
    height: 0 !important;
    background: none !important;
}

/* ============================================
   Small Cubes Row (4 cubes above main cube)
   Each cube covers 1 grid square (60px grid spacing)
   Positioned using same logic as main cube
   ============================================ */

.small-cubes-row {
    position: absolute;
    /* Position above the main cube - higher up to sit on grid */
    top: calc(19% + 70px);
    left: 50%;
    /* Use same centring approach as main cube */
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    z-index: 99;
    pointer-events: none;
}

/* Individual small cube - covers 1 grid square */
/* Grid spacing is 60px, so 1 square = 120px diagonal (60px each side from centre) */
.small-cube {
    position: absolute;
    width: 120px;
    height: 105px;
    opacity: 0;
    isolation: isolate;
    /* Staggered animation delays - main cube takes 1.2s, so start after */
    transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease-out;
    /* Start position: centred and hidden above */
    transform: translate(-50%, -50%) translateY(-100px);
}

/* Animated state for small cubes */
.small-cubes-row.animate .small-cube {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0);
}

/* Position each cube horizontally with 1 cube gap between */
/* Each cube = 120px (1 grid square), gap = 120px, so spacing = 240px */
/* Positions: -360px, -120px, 120px, 360px for 4 cubes centred */
/* Phase 2: Yellow boxes appear at 2s with staggered delays */
.small-cube-1 {
    left: -360px;
    transition-delay: 2s;
}

.small-cube-2 {
    left: -120px;
    transition-delay: 2.1s;
}

.small-cube-3 {
    left: 120px;
    transition-delay: 2.2s;
}

.small-cube-4 {
    left: 360px;
    transition-delay: 2.3s;
}

/* Common small cube face styles */
.small-cube-face {
    position: absolute;
    backface-visibility: hidden;
}

/* Small cube top face - amber/gold colour */
/* 120px wide to match 1 grid square footprint */
.small-cube-top {
    width: 120px;
    height: 70px;
    left: 0;
    top: 0;
    background: linear-gradient(135deg, rgba(255, 184, 0, 0.95) 0%, rgba(255, 184, 0, 0.8) 100%);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    box-shadow: 0 0 30px rgba(255, 184, 0, 0.6);
    z-index: 3;
}

/* Small cube left face */
.small-cube-left {
    width: 60px;
    height: 70px;
    left: 0;
    top: 35px;
    background: linear-gradient(180deg, rgba(255, 184, 0, 0.9) 0%, rgba(255, 184, 0, 0.6) 100%);
    clip-path: polygon(0% 0%, 100% 50%, 100% 100%, 0% 50%);
    z-index: 2;
}

/* Small cube right face */
.small-cube-right {
    width: 60px;
    height: 70px;
    right: 0;
    top: 35px;
    background: linear-gradient(180deg, rgba(255, 184, 0, 0.75) 0%, rgba(255, 184, 0, 0.45) 100%);
    clip-path: polygon(0% 50%, 100% 0%, 100% 50%, 0% 100%);
    z-index: 1;
}

/* Light theme adjustments for small cubes - darker amber for contrast */
[data-theme="light"] .small-cube-top {
    background: linear-gradient(135deg, rgba(204, 147, 0, 0.95) 0%, rgba(204, 147, 0, 0.8) 100%);
    box-shadow: 0 0 30px rgba(204, 147, 0, 0.5);
}

[data-theme="light"] .small-cube-left {
    background: linear-gradient(180deg, rgba(204, 147, 0, 0.9) 0%, rgba(204, 147, 0, 0.6) 100%);
}

[data-theme="light"] .small-cube-right {
    background: linear-gradient(180deg, rgba(204, 147, 0, 0.75) 0%, rgba(204, 147, 0, 0.45) 100%);
}

/* Ensure no border on visual section itself */
.governr-visual-section {
    border: none;
}

/* Remove any bottom border/line from visual section */
.governr-visual-section::after {
    border: none;
}

/* ============================================
   Data Flow Lines (Small Cubes to Big Cube)
   Lines follow the isometric grid at 30° angles
   ============================================ */

.flow-lines-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease-out;
}

/* Show flow lines when animated */
.flow-lines-container.animate {
    opacity: 1;
}

/* Individual flow line - follows grid direction */
.flow-line {
    position: absolute;
    background: linear-gradient(90deg, 
        #FFB800 0%, 
        #04D9FF 100%
    );
    height: 4px;
    transform-origin: left center;
    box-shadow: 0 0 12px rgba(255, 184, 0, 0.8), 0 0 24px rgba(4, 217, 255, 0.6);
    border-radius: 2px;
    /* Start invisible and scaled to 0 */
    opacity: 0;
    transform: rotate(30deg) scaleX(0);
}

/* Flow line from small cube 1 (leftmost) to big cube */
/* Small cube 1 centre: left = 50% - 360px, top = 19% + 70px */
/* Grid follows 30° and -30° angles (isometric projection) */
/* Using +30° (ascending grid line) to go down-right from top-left */
.flow-line-1 {
    /* Start from bottom middle of right side of small cube 1 */
    /* Small cube 1 centre is at 50% - 360px */
    /* Adjusted to come from bottom-right area of the cube */
    top: calc(19% + 70px + 33px);
    left: calc(50% - 360px + 30px);
    /* Length to reach edge of main cube without extending into it */
    width: 280px;
    /* Phase 4: Flow lines appear after governr box (5.2s delay) */
    transition: opacity 0.4s ease-out 5.2s, transform 0.8s ease-out 5.2s;
}

/* Animated state for flow line - triggered after small cubes finish */
.flow-lines-container.animate .flow-line-1 {
    opacity: 1;
    transform: rotate(30deg) scaleX(1);
}

/* Flow line from small cube 4 (rightmost) to big cube */
/* Small cube 4 centre: left = 50% + 360px, top = 19% + 70px */
/* Using -30° (descending grid line) to go down-left from top-right */
.flow-line-4 {
    /* Start from bottom middle of left side of small cube 4 */
    top: calc(19% + 70px + 33px);
    left: calc(50% + 360px - 315px);
    /* Length to reach edge of main cube without extending into it */
    width: 280px;
    /* Phase 4: Flow lines appear after governr box (5.2s delay) */
    transition: opacity 0.4s ease-out 5.2s, transform 0.8s ease-out 5.2s;
    /* Start with -30° rotation and flipped for right-to-left direction */
    transform: rotate(-30deg) scaleX(0);
    transform-origin: right center;
    /* Reversed gradient: cyan to amber */
    background: linear-gradient(90deg, 
        #04D9FF 0%, 
        #FFB800 100%
    );
}

/* Animated state for flow line 4 */
.flow-lines-container.animate .flow-line-4 {
    opacity: 1;
    transform: rotate(-30deg) scaleX(1);
}

/* Flow line from small cube 2 (second from left) to meet flow line 1 */
/* Small cube 2 centre: left = 50% - 120px */
/* Using -30° (descending grid line) to go down-left from top-right */
.flow-line-2 {
    /* Start from left side of small cube 2 */
    top: calc(19% + 70px + 33px);
    left: calc(50% - 120px - 130px);
    /* Length to meet flow line 1 */
    width: 100px;
    /* Phase 4: Flow lines appear after governr box (5.2s delay) */
    transition: opacity 0.4s ease-out 5.2s, transform 0.8s ease-out 5.2s;
    /* -30° rotation for right-to-left, top-to-bottom direction */
    transform: rotate(-30deg) scaleX(0);
    transform-origin: right center;
    /* Pale yellow to amber gradient (pale yellow at start, amber at meeting point) */
    background: linear-gradient(90deg, 
        #FFE566 0%, 
        #FFB800 100%
    );
}

/* Animated state for flow line 2 */
.flow-lines-container.animate .flow-line-2 {
    opacity: 1;
    transform: rotate(-30deg) scaleX(1);
}

/* Flow line from small cube 3 (third from left, second from right) */
/* Small cube 3 centre: left = 50% + 120px */
/* Using +30° (ascending grid line) to go down-right from top-left */
/* Mirrors flow line 2 but going left-to-right */
.flow-line-3 {
    /* Start from right side of small cube 3 */
    top: calc(19% + 70px + 33px);
    left: calc(50% + 120px + 27px);
    /* Length to meet flow line 4 */
    width: 100px;
    /* Phase 4: Flow lines appear after governr box (5.2s delay) */
    transition: opacity 0.4s ease-out 5.2s, transform 0.8s ease-out 5.2s;
    /* +30° rotation for left-to-right, top-to-bottom direction */
    transform: rotate(30deg) scaleX(0);
    transform-origin: left center;
    /* Amber to pale yellow gradient (pale yellow where it meets line 4) */
    background: linear-gradient(90deg, 
        #FFB800 0%, 
        #FFE566 100%
    );
}

/* Animated state for flow line 3 */
.flow-lines-container.animate .flow-line-3 {
    opacity: 1;
    transform: rotate(30deg) scaleX(1);
}

/* Hide vertical flow line for now */
.flow-line-vertical {
    display: none;
}

/* ============================================
   Floor Label - "governr" text on grid floor
   Positioned to the left of the main cube
   ============================================ */

.floor-label {
    position: absolute;
    /* Position to the left side of the main cube on the floor */
    /* Main cube is at top: calc(50% + 70px), left: 50% */
    /* Position label below and to the left of the cube */
    top: calc(50% + 120px);
    left: calc(50% - 200px);
    z-index: 150;
    pointer-events: none;
    /* Phase 3: Governr label appears with governr box (3.5s delay) */
    opacity: 0;
    transition: opacity 0.6s ease-out 3.5s;
}

/* Show floor label when animated */
.floor-label.animate {
    opacity: 1;
}

.floor-label-text {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #04D9FF;
    text-transform: lowercase;
    letter-spacing: 0.2em;
    white-space: nowrap;
    /* Rotate 30° to follow the ascending grid line */
    transform: rotate(30deg);
    /* Glow effect */
    text-shadow: 
        0 0 10px rgba(4, 217, 255, 0.8),
        0 0 20px rgba(4, 217, 255, 0.6),
        0 0 40px rgba(4, 217, 255, 0.4),
        0 0 60px rgba(4, 217, 255, 0.3);
    /* Subtle ambient occlusion effect on floor */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Light theme - darker cyan for contrast */
[data-theme="light"] .floor-label-text {
    color: #04B8D9;
    text-shadow: 
        0 0 10px rgba(4, 184, 217, 0.6),
        0 0 20px rgba(4, 184, 217, 0.4),
        0 0 40px rgba(4, 184, 217, 0.2);
}

/* Light theme adjustments for flow lines */
[data-theme="light"] .flow-line {
    background: linear-gradient(90deg, 
        rgba(204, 147, 0, 1) 0%, 
        rgba(4, 217, 255, 1) 100%
    );
    box-shadow: 0 0 8px rgba(204, 147, 0, 0.6), 0 0 16px rgba(4, 217, 255, 0.5);
}

/* Light theme - reversed colours for line 2 */
[data-theme="light"] .flow-line-2 {
    background: linear-gradient(90deg, 
        rgba(4, 217, 255, 1) 0%, 
        rgba(204, 147, 0, 1) 100%
    );
}

/* Light theme - reverse colours for line 4 */
[data-theme="light"] .flow-line-4 {
    background: linear-gradient(90deg, 
        #04D9FF 0%, 
        #FFB800 100%
    );
}

/* ============================================
   Small Cube Label - Label text below small cubes
   Similar to governr floor label but smaller and amber
   ============================================ */

.small-cube-label {
    position: absolute;
    /* Position to the left side of the cube on the grid floor */
    /* Moved 100px right and 50px down from original position */
    top: calc(50% + 50px);
    left: calc(-100px + 100px);
    transform: translateY(-50%);
    z-index: 200;
    pointer-events: none;
    /* Animate with parent cube */
    opacity: 0;
    transition: opacity 0.4s ease-out;
}

/* Show label when animated */
.small-cubes-row.animate .small-cube .small-cube-label {
    opacity: 1;
}

.small-cube-label-text {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #FFB800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    white-space: nowrap;
    /* Rotate 30° to follow the ascending grid line */
    transform: rotate(30deg);
    /* Glow effect - amber colour */
    text-shadow: 
        0 0 6px rgba(255, 184, 0, 0.8),
        0 0 12px rgba(255, 184, 0, 0.6),
        0 0 20px rgba(255, 184, 0, 0.4);
}

/* Light theme - darker amber for contrast */
[data-theme="light"] .small-cube-label-text {
    color: #CC9300;
    text-shadow: 
        0 0 4px rgba(204, 147, 0, 0.5),
        0 0 8px rgba(204, 147, 0, 0.3);
}

/* Specific positioning for Security label on cube 3 */
.small-cube-3 .small-cube-label {
    left: calc(-80px + 50px);
    top: calc(50% + 40px);
}

/* Upward-rotated label variant - rotates -30deg (up) instead of 30deg (down) */
.small-cube-label-up .small-cube-label-text {
    transform: rotate(-30deg);
}

/* Specific positioning for Compliance label on cube 2 */
.small-cube-2 .small-cube-label {
    left: calc(-100px + 160px);
    top: calc(50% + 40px);
}

/* Specific positioning for Performance label on cube 4 */
/* Moved 20px up and 20px right from default position */
.small-cube-4 .small-cube-label {
    left: calc(-100px + 150px);
    top: calc(50% + 40px);
}



/* ============================================
   Info Cards (Left and Right sides)
   Compact cards with slide-in animations
   ============================================ */

/* Container for info cards */
.visual-info-cards {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    pointer-events: none;
}

/* Left side cards container */
.visual-info-cards-left {
    left: 3%;
    align-items: flex-start;
}

/* Right side cards container - positioned level with blue cube */
.visual-info-cards-right {
    right: 3%;
    align-items: flex-end;
    top: calc(50% + 70px);
    transform: translateY(-50%);
}

/* Individual info card */
.info-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    background: rgba(10, 10, 20, 0.85);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
    white-space: nowrap;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Left cards start off-screen to the left */
.visual-info-cards-left .info-card {
    transform: translateX(-120%);
}

/* Right cards start off-screen to the right */
.visual-info-cards-right .info-card {
    transform: translateX(120%);
}

/* Animated state - slide in */
.visual-info-cards-left .info-card.animate {
    opacity: 1;
    transform: translateX(0);
}

.visual-info-cards-right .info-card.animate {
    opacity: 1;
    transform: translateX(0);
}

/* Staggered animation delays - timed with relevant visual elements */
/* Phase 1: Red card (Uncontrolled AI) - appears immediately with red dots */
.visual-info-cards-left .info-card:nth-child(1) {
    transition-delay: 0s;
}

/* Phase 2: Amber card (Limited manual governance) - appears with yellow cubes */
.visual-info-cards-left .info-card:nth-child(2) {
    transition-delay: 2s;
}

/* Right side cards - staggered delays after blue cube appears */
/* Blue cube appears at 3.5s, cards appear after with gaps between each */

/* Phase 4: Blue card (brings together enterprise AI) - 0.5s after blue cube */
.visual-info-cards-right .info-card:nth-child(1) {
    transition-delay: 4s;
}

/* Phase 4.5: Teal card (link and apply business context) - 0.5s after blue card */
.visual-info-cards-right .info-card:nth-child(2) {
    transition-delay: 4.5s;
}

/* Phase 5: Cyan card (governr proof-of-control) - 0.5s after teal card */
.visual-info-cards-right .info-card:nth-child(3) {
    transition-delay: 5s;
}

/* Card indicator dot */
.info-card-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Red card (Uncontrolled AI) */
.info-card-red {
    border-color: rgba(255, 82, 82, 0.3);
}

.info-card-red .info-card-indicator {
    background: #FF5252;
    box-shadow: 0 0 10px rgba(255, 82, 82, 0.6);
}

/* Amber card (Limited manual governance) */
.info-card-amber {
    border-color: rgba(255, 184, 0, 0.3);
}

.info-card-amber .info-card-indicator {
    background: #FFB800;
    box-shadow: 0 0 10px rgba(255, 184, 0, 0.6);
}

/* Blue card (Brings together enterprise AI) */
.info-card-blue {
    border-color: rgba(4, 217, 255, 0.3);
    white-space: normal;
    max-width: 300px;
    text-align: right;
}

.info-card-blue .info-card-indicator {
    background: #04D9FF;
    box-shadow: 0 0 10px rgba(4, 217, 255, 0.6);
    order: 2;
}

.info-card-blue .info-card-text {
    order: 1;
}

/* Teal card (Link and apply business context) */
.info-card-teal {
    border-color: rgba(20, 184, 166, 0.3);
    white-space: normal;
    max-width: 300px;
    text-align: right;
}

.info-card-teal .info-card-indicator {
    background: #14B8A6;
    box-shadow: 0 0 10px rgba(20, 184, 166, 0.6);
    order: 2;
}

.info-card-teal .info-card-text {
    order: 1;
}

/* Cyan card (Automated proof-of-control) */
.info-card-cyan {
    border-color: rgba(4, 217, 255, 0.3);
    /* Wider for longer text */
    white-space: normal;
    max-width: 320px;
    text-align: right;
}

.info-card-cyan .info-card-indicator {
    background: #04D9FF;
    box-shadow: 0 0 10px rgba(4, 217, 255, 0.6);
    order: 2; /* Move indicator to the right */
}

.info-card-cyan .info-card-text {
    order: 1;
}

/* Card text */
.info-card-text {
    line-height: 1.3;
}

/* Light theme adjustments */
[data-theme="light"] .info-card {
    background: rgba(255, 255, 255, 0.9);
    color: rgba(0, 0, 0, 0.85);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .info-card-red {
    border-color: rgba(200, 60, 60, 0.3);
}

[data-theme="light"] .info-card-amber {
    border-color: rgba(180, 130, 0, 0.3);
}

[data-theme="light"] .info-card-cyan {
    border-color: rgba(4, 180, 200, 0.3);
}

[data-theme="light"] .info-card-blue {
    border-color: rgba(59, 130, 246, 0.3);
}

[data-theme="light"] .info-card-teal {
    border-color: rgba(20, 184, 166, 0.3);
}

/* Hide on mobile and tablet */
@media (max-width: 1024px) {
    .visual-info-cards {
        display: none;
    }
}

/* ============================================
   Responsive Design
   ============================================ */

@media (max-width: 768px) {
    .governr-visual-section {
        height: 50vh;
        min-height: 300px;
    }
    
    /* Scale down small cubes on tablet */
    .small-cubes-row {
        gap: 40px;
    }
    
    .small-cube {
        width: 90px;
        height: 80px;
    }
    
    .small-cube-top {
        width: 90px;
        height: 52px;
    }
    
    .small-cube-left,
    .small-cube-right {
        width: 45px;
        height: 52px;
    }
    
    .small-cube-left {
        top: 26px;
    }
    
    .small-cube-right {
        top: 26px;
    }
    
    /* Reduce grid line spacing on mobile - dark mode (more transparent) */
    .grid-lines-ascending {
        background-image: repeating-linear-gradient(
            30deg,
            transparent,
            transparent 39px,
            rgba(var(--accent-rgb), 0.25) 39px,
            rgba(var(--accent-rgb), 0.25) 40px
        );
    }
    
    .grid-lines-descending {
        background-image: repeating-linear-gradient(
            -30deg,
            transparent,
            transparent 39px,
            rgba(var(--accent-rgb), 0.25) 39px,
            rgba(var(--accent-rgb), 0.25) 40px
        );
    }
    
    /* Light theme mobile - brighter grid lines */
    [data-theme="light"] .grid-lines-ascending {
        background-image: repeating-linear-gradient(
            30deg,
            transparent,
            transparent 39px,
            rgba(var(--accent-rgb), 0.5) 39px,
            rgba(var(--accent-rgb), 0.5) 40px
        );
    }
    
    [data-theme="light"] .grid-lines-descending {
        background-image: repeating-linear-gradient(
            -30deg,
            transparent,
            transparent 39px,
            rgba(var(--accent-rgb), 0.5) 39px,
            rgba(var(--accent-rgb), 0.5) 40px
        );
    }
}

@media (max-width: 480px) {
    .governr-visual-section {
        height: 40vh;
        min-height: 250px;
    }
    
    /* Further scale down small cubes on mobile */
    .small-cubes-row {
        gap: 25px;
    }
    
    .small-cube {
        width: 60px;
        height: 52px;
    }
    
    .small-cube-top {
        width: 60px;
        height: 35px;
    }
    
    .small-cube-left,
    .small-cube-right {
        width: 30px;
        height: 35px;
    }
    
    .small-cube-left {
        top: 17px;
    }
    
    .small-cube-right {
        top: 17px;
    }
    
    /* Further reduce grid line spacing on small mobile - dark mode (more transparent) */
    .grid-lines-ascending {
        background-image: repeating-linear-gradient(
            30deg,
            transparent,
            transparent 29px,
            rgba(var(--accent-rgb), 0.12) 29px,
            rgba(var(--accent-rgb), 0.12) 30px
        );
    }
    
    .grid-lines-descending {
        background-image: repeating-linear-gradient(
            -30deg,
            transparent,
            transparent 29px,
            rgba(var(--accent-rgb), 0.12) 29px,
            rgba(var(--accent-rgb), 0.12) 30px
        );
    }
    
    /* Light theme small mobile - brighter grid lines */
    [data-theme="light"] .grid-lines-ascending {
        background-image: repeating-linear-gradient(
            30deg,
            transparent,
            transparent 29px,
            rgba(var(--accent-rgb), 0.4) 29px,
            rgba(var(--accent-rgb), 0.4) 30px
        );
    }
    
    [data-theme="light"] .grid-lines-descending {
        background-image: repeating-linear-gradient(
            -30deg,
            transparent,
            transparent 29px,
            rgba(var(--accent-rgb), 0.4) 29px,
            rgba(var(--accent-rgb), 0.4) 30px
        );
    }
}