* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
        }

        /* Inline wordmark: inherit color; small “15”; baseline row + slight lift so it reads superscript-like */
        .brand-15blue {
            display: inline-flex;
            align-items: baseline;
            flex-wrap: nowrap;
            gap: 0;
            line-height: inherit;
            font-weight: inherit;
            color: inherit;
            white-space: nowrap;
            vertical-align: baseline;
        }
        .brand-15blue .brand-15sup,
        .brand-15blue .brand-blue-part {
            font-weight: inherit;
            margin: 0;
            line-height: inherit;
        }
        .brand-15blue .brand-15sup {
            font-size: 0.625em;
            flex: 0 0 auto;
            margin-right: -0.055em;
            line-height: 1;
            position: relative;
            /* top em = .brand-15sup font-size (0.625× inherited text) → scales with paragraph size/weight; same stack everywhere ≈ same look */
            top: -0.42em;
        }
        .brand-15blue .brand-blue-part {
            flex: 0 0 auto;
            font-size: 1em;
        }
    
        :root {
            --text-on-blue: #ffffff;
            --text-on-blue-supporting: #ffffff;
        }

        html {
            background-color: #1565C0; /* Match gradient bright end — nearly invisible on overscroll */
            height: 100%;
            overflow-x: hidden;
        }
    
        body {
            min-height: 100vh;
            position: relative;
            pointer-events: all;
            overscroll-behavior: none;
            -webkit-overflow-scrolling: touch;
        }
    
        body, .content-wrapper {
            min-height: 100vh;
            position: relative;
            pointer-events: all;
        }
    
        .gradient-backdrop, .background-image, #nodesCanvas, .water-shimmer {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }
    
        .gradient-backdrop {
            background: linear-gradient(13.9deg, #1565C0, #0A1F4A);
            z-index: -2;
        }

        .water-shimmer {
            background: linear-gradient(
                135deg,
                transparent 0%,
                rgba(255, 255, 255, 0.03) 25%,
                transparent 50%,
                rgba(0, 0, 0, 0.05) 75%,
                transparent 100%
            );
            background-size: 200% 200%;
            animation: waterShimmer 15s ease-in-out infinite;
            z-index: -1;
            opacity: 0.6;
        }

        @keyframes waterShimmer {
            0% {
                background-position: 0% 0%;
            }
            25% {
                background-position: 100% 50%;
            }
            50% {
                background-position: 100% 100%;
            }
            75% {
                background-position: 0% 50%;
            }
            100% {
                background-position: 0% 0%;
            }
        }
    
        .background-image {
            display: none;
        }
    
        .content-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            z-index: 1;
        }
    
        .logo-container {
            margin-top: 5vh;
            text-align: center;
        }
    
        .logo {
            height: 65px;
            width: auto;
            filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6));
            opacity: 0;
            animation: fadeInWithBlur 1s ease forwards, pulse 4s ease-in-out infinite;
        }
    
        @keyframes fadeInWithBlur {
            0% { opacity: 0; filter: blur(10px) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6)); transform: translateY(20px); }
            100% { opacity: 1; filter: blur(0) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6)); transform: translateY(0); }
        }
    
        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.01); }
        }
    
        .subtitle, .content-card h2, .content-card h3, .content-card-2 h2, .content-card-2 h3 {
            text-align: center;
            background: linear-gradient(135deg, #FFFFFF 0%, #E8F4F8 50%, #D0E8F0 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: none;
            letter-spacing: -0.02em;
            font-weight: 600;
        }

        .content-card h2, .content-card-2 h2 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            margin-top: 0;
        }

        .content-card h3, .content-card-2 h3 {
            font-size: 1.75rem;
            margin-bottom: 1.5rem;
            margin-top: 0.5rem;
            font-weight: 500;
        }

        .subtitle {
            margin-top: 2rem;
            font-size: 1.6rem;
            max-width: 900px;
            padding: 0 2rem;
            font-weight: 600;
            min-height: 0;
            line-height: 1.6;
        }

        .subtitle p {
            margin-top: 1.5rem;
            opacity: 0.9;
            text-align: center;
            color: rgba(255, 255, 255, 0.96);
            background: none;
            -webkit-background-clip: border-box;
            background-clip: border-box;
            -webkit-text-fill-color: rgba(255, 255, 255, 0.96);
        }

        .whitepaper-link {
            text-align: center;
            margin: 2rem auto;
            max-width: 600px;
            padding: 0 2rem;
        }

        .whitepaper-link a {
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            padding: 1rem 2rem;
            background: rgba(255, 255, 255, 0.12);
            backdrop-filter: blur(20px) saturate(180%);
            border: 1.5px solid rgba(255, 255, 255, 0.3);
            border-radius: 16px;
            color: white;
            text-decoration: none;
            font-size: 1.15rem;
            font-weight: 600;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15),
                        inset 0 1px 0 rgba(255, 255, 255, 0.2);
            letter-spacing: 0.01em;
        }

        /* Value Proposition Cards */
        .vp-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 1.5rem;
            margin: 2.5rem 0;
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
        }

        .vp-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(20px) saturate(180%);
            border: 2px solid rgba(255, 255, 255, 0.25);
            border-radius: 20px;
            padding: 2.5rem 2rem;
            text-align: center;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2),
                        inset 0 1px 0 rgba(255, 255, 255, 0.3);
            position: relative;
            overflow: hidden;
        }

        .vp-expand-cue {
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            right: 0.95rem;
            bottom: 0.8rem;
            width: 1.1rem;
            height: 1.1rem;
            opacity: 1;
            z-index: 5;
            pointer-events: none;
            transition: opacity 0.2s ease;
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }

        .vp-expand-cue::before {
            content: '';
            display: block;
            width: 0.7rem;
            height: 0.7rem;
            border-right: 2.4px solid rgba(255, 255, 255, 0.92);
            border-bottom: 2.4px solid rgba(255, 255, 255, 0.92);
            transform: rotate(45deg) translateZ(0);
            -webkit-transform: rotate(45deg) translateZ(0);
            transform-origin: center;
            -webkit-transform-origin: center;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            transition: transform 0.2s ease, border-color 0.2s ease;
        }

        .vp-card:hover .vp-expand-cue {
            opacity: 1;
        }

        .vp-card:hover .vp-expand-cue::before {
            border-right-color: rgba(255, 255, 255, 1);
            border-bottom-color: rgba(255, 255, 255, 1);
            transform: translateY(1px) rotate(45deg) translateZ(0);
            -webkit-transform: translateY(1px) rotate(45deg) translateZ(0);
        }

        .vp-card.active .vp-expand-cue::before {
            transform: rotate(-135deg) translateZ(0);
            -webkit-transform: rotate(-135deg) translateZ(0);
        }

        .vp-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.3));
            opacity: 0;
            transition: opacity 0.3s;
        }

        .vp-card:hover {
            transform: translateY(-8px);
            border-color: rgba(255, 255, 255, 0.4);
            box-shadow: 0 12px 48px rgba(0, 0, 0, 0.3),
                        inset 0 1px 0 rgba(255, 255, 255, 0.4);
        }

        .vp-card:hover::before {
            opacity: 0.8;
        }

        .vp-number {
            font-size: 4.5rem;
            font-weight: 800;
            line-height: 1;
            margin-bottom: 0.5rem;
            background: linear-gradient(135deg, #FFFFFF 0%, #E8F4F8 50%, #D0E8F0 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .vp-number.counting {
            animation: numberPulse 0.5s ease-in-out;
        }

        @keyframes numberPulse {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.1);
            }
        }

        .vp-icon {
            font-size: 4rem;
            margin-bottom: 0.5rem;
            line-height: 1;
        }

        .vp-label {
            font-size: 1.1rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            margin-bottom: 0.75rem;
            color: rgba(255, 255, 255, 0.95);
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        }

        .vp-detail {
            font-size: 0.95rem;
            color: var(--text-on-blue-supporting);
            line-height: 1.5;
            margin-top: 0.5rem;
        }

        .vp-baseline {
            font-size: 0.75rem;
            color: var(--text-on-blue-supporting) !important;
            -webkit-text-fill-color: var(--text-on-blue-supporting) !important;
            background: none !important;
            background-clip: unset !important;
            text-align: center;
            margin-top: 0.35rem;
            letter-spacing: 0;
            opacity: 1;
        }

        /* Features Section */
        .features-section {
            margin: 3rem 0;
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
            padding: 0 2rem;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
            margin-top: 2rem;
        }

        .feature-item {
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(15px) saturate(180%);
            border: 1.5px solid rgba(255, 255, 255, 0.2);
            border-radius: 16px;
            padding: 2rem 1.5rem;
            text-align: center;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15),
                        inset 0 1px 0 rgba(255, 255, 255, 0.2);
        }

        .feature-item:hover {
            transform: translateY(-4px);
            border-color: rgba(255, 255, 255, 0.3);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2),
                        inset 0 1px 0 rgba(255, 255, 255, 0.3);
            background: rgba(255, 255, 255, 0.12);
        }

        .feature-icon {
            font-size: 3rem;
            margin-bottom: 1rem;
            line-height: 1;
        }

        .feature-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.95);
            margin-bottom: 0.75rem;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
            letter-spacing: -0.01em;
        }

        .feature-description {
            font-size: 0.95rem;
            color: var(--text-on-blue-supporting);
            line-height: 1.5;
        }

        /* VP Card Click Handler */
        .vp-card {
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .vp-card-wrapper {
            display: flex;
            flex-direction: column;
        }

        /* Dynamic Explanation Styles */
        .vp-explanation-section-desktop {
            margin-top: 3rem;
            max-width: 900px;
            margin-left: auto;
            margin-right: auto;
        }

        .vp-explanation {
            display: none;
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 16px;
            padding: 2rem;
            margin-top: 1rem;
            animation: fadeInUp 0.4s ease-out;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            max-height: 0;
            transition: max-height 0.4s ease-out, padding 0.4s ease-out, margin 0.4s ease-out;
        }

        .vp-explanation.active {
            display: block;
            max-height: 2000px;
        }
        
        /* Override language visibility rules when explanation is active */
        body:not(.japanese) .vp-explanation.active[data-lang="en"] {
            display: block !important;
        }
        
        body.japanese .vp-explanation.active[data-lang="ja"] {
            display: block !important;
        }
        
        /* Ensure inactive explanations respect language rules - always hidden */
        body:not(.japanese) .vp-explanation[data-lang="ja"]:not(.active) {
            display: none !important;
        }
        
        body.japanese .vp-explanation[data-lang="en"]:not(.active) {
            display: none !important;
        }
        
        /* Critical: Hide inactive Japanese explanations even when body.japanese sets them to display */
        body.japanese .vp-explanation[data-lang="ja"]:not(.active) {
            display: none !important;
        }

        .vp-explanation p {
            font-size: 0.9rem;
            line-height: 1.8;
            color: rgba(255, 255, 255, 0.9);
            margin: 0 0 1rem 0;
        }

        .vp-explanation p:last-child {
            margin-bottom: 0;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .vp-card.active {
            border-color: rgba(255, 255, 255, 0.5) !important;
            background: rgba(255, 255, 255, 0.15) !important;
            box-shadow: 0 12px 48px rgba(0, 0, 0, 0.3),
                        inset 0 1px 0 rgba(255, 255, 255, 0.5),
                        0 0 0 2px rgba(255, 255, 255, 0.2) !important;
            transform: translateY(-2px);
        }

        /* Desktop: Show explanations in separate section below */
        @media (min-width: 769px) {
            .vp-card-wrapper .vp-explanation {
                display: none !important;
            }

            .vp-explanation-section-desktop {
                display: block;
            }

            .vp-explanation-section-desktop .vp-explanation {
                display: none;
            }

            .vp-explanation-section-desktop .vp-explanation.active {
                display: block;
                max-height: none;
            }
            
            /* Override language visibility for active desktop explanations */
            body:not(.japanese) .vp-explanation-section-desktop .vp-explanation.active[data-lang="en"] {
                display: block !important;
            }
            
            body.japanese .vp-explanation-section-desktop .vp-explanation.active[data-lang="ja"] {
                display: block !important;
            }
            
            /* Ensure inactive desktop explanations respect language rules */
            body:not(.japanese) .vp-explanation-section-desktop .vp-explanation[data-lang="ja"]:not(.active) {
                display: none !important;
            }
            
            body.japanese .vp-explanation-section-desktop .vp-explanation[data-lang="en"]:not(.active) {
                display: none !important;
            }
            
            /* Critical: Hide inactive Japanese desktop explanations even when body.japanese sets them to display */
            body.japanese .vp-explanation-section-desktop .vp-explanation[data-lang="ja"]:not(.active) {
                display: none !important;
            }
        }

        /* Mobile: Show explanations directly under each card */
        @media (max-width: 768px) {
            .vp-explanation-section-desktop {
                display: none;
            }

            .vp-card-wrapper .vp-explanation {
                order: 2;
            }

            .vp-explanation.active {
                display: block;
                padding: 1.5rem;
                margin-top: 1rem;
            }
            
            /* Override language visibility for active mobile explanations */
            body:not(.japanese) .vp-card-wrapper .vp-explanation.active[data-lang="en"] {
                display: block !important;
            }
            
            body.japanese .vp-card-wrapper .vp-explanation.active[data-lang="ja"] {
                display: block !important;
            }
            
            /* Ensure inactive mobile explanations respect language rules */
            body:not(.japanese) .vp-card-wrapper .vp-explanation[data-lang="ja"]:not(.active) {
                display: none !important;
            }
            
            body.japanese .vp-card-wrapper .vp-explanation[data-lang="en"]:not(.active) {
                display: none !important;
            }
            
            /* Critical: Hide inactive Japanese mobile explanations even when body.japanese sets them to display */
            body.japanese .vp-card-wrapper .vp-explanation[data-lang="ja"]:not(.active) {
                display: none !important;
            }
        }

        @media (max-width: 768px) {
            .features-section {
                margin: 2rem 0;
                padding: 0 1.5rem;
            }

            .features-grid {
                grid-template-columns: 1fr;
                gap: 1.25rem;
                margin-top: 1.5rem;
            }

            .feature-item {
                padding: 1.5rem 1.25rem;
            }

            .feature-icon {
                font-size: 2.5rem;
                margin-bottom: 0.75rem;
            }

            .feature-title {
                font-size: 1.1rem;
            }

            .feature-description {
                font-size: 0.9rem;
            }

            .vp-grid {
                grid-template-columns: 1fr;
                gap: 1.25rem;
                margin: 2rem 0;
            }

            .vp-card {
                padding: 2rem 1.5rem;
            }

            .vp-number {
                font-size: 3.5rem;
            }

            .vp-icon {
                font-size: 3rem;
            }

            .vp-label {
                font-size: 1rem;
            }

            .vp-baseline {
                font-size: 0.7rem;
            }
        }

        .whitepaper-link a:hover {
            background: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 255, 255, 0.45);
            transform: translateY(-3px) scale(1.02);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2),
                        inset 0 1px 0 rgba(255, 255, 255, 0.3);
        }

        .whitepaper-link a::after {
            content: '→';
            font-size: 1.38rem;
            transition: transform 0.3s ease;
        }

        .whitepaper-link a:hover::after {
            transform: translateX(4px);
        }

        .cta-caption {
            text-align: center;
            color: var(--text-on-blue-supporting);
            font-size: 1.75rem;
            letter-spacing: 0.01em;
            margin-top: 0.25rem;
        }

        .whitepaper-caption {
            text-align: center !important;
            margin: 0 0 0.8rem;
            color: var(--text-on-blue-supporting) !important;
            font-size: 0.98rem !important;
            line-height: 1.45;
        }

        /* Demo Button Styles */
        .demo-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            padding: 1rem 2.5rem;
            background: rgba(255, 255, 255, 0.12);
            backdrop-filter: blur(20px) saturate(180%);
            border: 1.5px solid rgba(255, 255, 255, 0.3);
            border-radius: 16px;
            color: white;
            text-decoration: none;
            font-size: 1.2rem;
            font-weight: 600;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15),
                        inset 0 1px 0 rgba(255, 255, 255, 0.2);
            letter-spacing: 0.01em;
            margin: 0.5rem;
        }

        .demo-button:hover {
            background: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 255, 255, 0.45);
            transform: translateY(-3px) scale(1.02);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2),
                        inset 0 1px 0 rgba(255, 255, 255, 0.3);
            color: white;
        }

        .demo-button:active {
            transform: translateY(-1px) scale(0.98);
        }

        .policy-note-ja {
            margin: 1rem auto 0;
            max-width: 920px;
            padding: 1.5rem 1.6rem 1.35rem;
            border-radius: 16px;
            text-align: left;
            border: 1px solid rgba(0, 212, 255, 0.35);
            background: linear-gradient(135deg, rgba(7, 18, 43, 0.88), rgba(24, 48, 94, 0.82));
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
        }

        .policy-note-kicker {
            margin-bottom: 0.55rem;
            font-size: 0.8rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: #7fdcff;
        }

        .policy-note-ja h3 {
            margin: 0 0 0.8rem;
            font-size: 1.26rem;
            line-height: 1.5;
            font-weight: 700;
            color: #c9eeff;
            letter-spacing: 0.02em;
        }

        .policy-note-ja p {
            margin: 0;
            font-size: 1rem;
            line-height: 1.8;
            color: rgba(255, 255, 255, 0.94);
        }

        .policy-note-teaser {
            color: rgba(255, 255, 255, 0.96);
        }

        .policy-note-details {
            margin-top: 1rem;
            padding-top: 0.95rem;
            border-top: 1px solid rgba(255, 255, 255, 0.16);
        }

        .policy-note-details summary {
            list-style: none;
            display: inline-flex;
            align-items: center;
            cursor: pointer;
            font-size: 0.96rem;
            font-weight: 700;
            color: #8ee7ff;
            user-select: none;
        }

        .policy-note-details summary::-webkit-details-marker {
            display: none;
        }

        .policy-note-readmore-open {
            display: none;
        }

        .policy-note-details[open] .policy-note-readmore-closed {
            display: none;
        }

        .policy-note-details[open] .policy-note-readmore-open {
            display: inline;
        }

        .policy-note-body {
            margin-top: 1rem;
            display: grid;
            gap: 0.95rem;
        }

        .policy-note-body p {
            font-size: 0.98rem;
            line-height: 1.9;
            color: rgba(255, 255, 255, 0.93);
        }

        .policy-note-body strong {
            color: #ffffff;
            font-weight: 700;
        }

        @media (max-width: 768px) {
            .policy-note-ja {
                padding: 1.2rem 1.15rem 1.1rem;
            }

            .policy-note-ja h3 {
                font-size: 1.08rem;
                line-height: 1.55;
            }

            .policy-note-ja p,
            .policy-note-body p {
                font-size: 0.95rem;
                line-height: 1.85;
            }
        }

        .subtitle h3 {
            display: inline-block;
            font-size: 1.7rem;
            background: linear-gradient(135deg, #FFFFFF 0%, #E8F4F8 50%, #D0E8F0 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
            text-align: center;
            letter-spacing: -0.02em;
            font-weight: 600;
            line-height: 1.6;
        }
        
        .content-section {
            margin-top: 2.2rem;
            width: 100%;
            max-width: 1200px;
            padding: 0 2rem;
            display: flex;
            flex-direction: column;
            gap: 3rem;
        }
        
        @media (max-width: 900px) {
            .content-section {
                margin-top: 2.4rem;
            }
        }
    
        .content-card, .content-card-2 {
            background: linear-gradient(
                180deg,
                rgba(28, 95, 185, 0.62) 0%,
                rgba(16, 58, 128, 0.70) 48%,
                rgba(10, 38, 88, 0.76) 100%
            );
            -webkit-backdrop-filter: blur(28px) saturate(180%);
            backdrop-filter: blur(28px) saturate(180%);
            border-radius: 24px;
            padding: 3rem;
            border: none;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14),
                        inset 0 0 0 1px rgba(100, 165, 235, 0.28),
                        inset 0 1px 0 rgba(130, 185, 245, 0.16);
            color: white;
            overflow: hidden;
            z-index: 2;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            position: relative;
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }

        .content-card::before, .content-card-2::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 250%;
            height: 250%;
            transform: translate(-50%, -50%);
            background: radial-gradient(
                circle at 50% 0%,
                rgba(79, 158, 247, 0.08) 0%,
                rgba(50, 120, 210, 0.05) 14%,
                rgba(30, 80, 170, 0.03) 28%,
                transparent 68%
            );
            animation: shimmerRadial 6s ease-in-out infinite;
            pointer-events: none;
            z-index: 0;
            border-radius: 50%;
            filter: blur(40px);
            -webkit-filter: blur(40px);
        }

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


        .content-card:hover, .content-card-2:hover {
            transform: translateY(-2px);
            background: linear-gradient(
                180deg,
                rgba(35, 105, 195, 0.66) 0%,
                rgba(20, 65, 140, 0.74) 48%,
                rgba(12, 42, 95, 0.80) 100%
            );
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18), 
                        inset 0 1px 0 rgba(140, 190, 250, 0.20);
            border-color: rgba(100, 165, 235, 0.32);
        }

          /* Apply initial state to content cards */
        .content-card, .content-card-2 {
            transform: translateY(50px);
            transition: transform 0.6s ease-out;
        }

          /* When the element is in view, make it fully visible and reset the transform */
        .content-card.in-view, .content-card-2.in-view {
            transform: translateY(0);
        }

        @keyframes subtleEaseIn {
            0% { transform: translateY(0); }
            100% { transform: translateY(-6px); }
        }

        /* Define a subtle upward translation with a smooth transition */
        .content-card.ease,
        .content-card-2.ease {
        transition: transform 0.3s ease-out;
        transform: translateY(-2px);
        }

        .content-card-2 {
            padding: 3.5rem;
        }
    
        .content-card p, .content-card-2 p {
            font-size: 1.15rem;
            color: rgba(255, 255, 255, 0.95);
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
            line-height: 1.75;
            padding: 0.75rem 0;
            letter-spacing: 0.01em;
            text-align: left;
        }
    
        .content-card a, .content-card-2 a {
            color: white;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 10px;
            border-radius: 8px;
            transition: background-color 0.3s ease;
            z-index: 3;
        }
    
        .content-card a:hover, .content-card-2 a:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }
    
        .content-card .card-image, .content-card-2 .card-image {
            width: 100%;
            max-width: 500px;
            height: auto;
            display: block;
            margin: 2rem auto;
        }

        .vision-video {
            margin: 2rem auto 0;
            width: 100%;
            max-width: 552px;
            aspect-ratio: 16 / 9;
            overflow: hidden;
            border-radius: 16px;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
        }

        @media (min-width: 900px) {
            .vision-video {
                max-width: 745px;
            }
        }

        .vision-video iframe {
            width: 100%;
            height: 100%;
            border: none;
            display: block;
        }

        /* Match .screenshot-wrapper sizing inside .product-screenshots-slider */
        .product-features-intro-video {
            margin: 0.75rem auto 2.75rem;
            max-width: 1200px;
            width: 100%;
            box-sizing: border-box;
            padding: 0 1rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .product-features-intro-video .vision-video {
            margin: 0;
            width: 100%;
            max-width: 552px;
            aspect-ratio: 16 / 9;
            border-radius: 16px;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
        }

        /* Safari-stable embed sizing for the Bedrock walkthrough video */
        .product-features-intro-video .bedrock-video-embed {
            position: relative;
            width: 100%;
            max-width: 552px;
            aspect-ratio: 16 / 9;
            overflow: hidden;
            border-radius: 16px;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
        }

        .product-features-intro-video .bedrock-video-embed iframe {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border: 0;
            display: block;
        }

        @media (min-width: 900px) {
            .product-features-intro-video .vision-video {
                max-width: 745px;
            }
            .product-features-intro-video .bedrock-video-embed {
                max-width: 745px;
            }
        }

        @media (max-width: 768px) {
            .product-features-intro-video {
                padding: 0 0.25rem;
            }

            .product-features-intro-video .vision-video {
                max-width: 95vw;
                aspect-ratio: 16 / 9;
            }
            .product-features-intro-video .bedrock-video-embed {
                max-width: 95vw;
            }
        }


        .back-to-top {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(20px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.25);
            border-radius: 50%;
            width: 56px;
            height: 56px;
            cursor: pointer;
            display: none;
            align-items: center;
            justify-content: center;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 1100;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15),
                        inset 0 1px 0 rgba(255, 255, 255, 0.2);
            pointer-events: all;
        }

        /* Testimonials slider styling */
        .testimonials-slider {
            position: relative;
            max-width: 1200px;
            margin: 3rem auto;
            overflow: hidden;
            border-radius: 24px;
            padding: 0 60px;
            width: 100%;
            box-sizing: border-box;
        }

        .testimonials-container {
            display: flex;
            align-items: flex-start;
            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            width: 100%;
            border-radius: 24px;
            will-change: transform;
        }


        .testimonial-slide {
            width: 100%;
            min-width: 100%;
            padding: 0 1.5rem;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            flex-shrink: 0;
        }

        @media (min-width: 900px) {
            .testimonial-slide {
                width: 50%;
                min-width: 50%;
                padding: 0 1rem;
            }
        }

        .testimonial-content {
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(20px) saturate(150%);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 20px;
            padding: 2rem;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            width: 100%;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            min-height: auto;
            text-align: left;
        }

        .testimonial-quote {
            font-size: 1.1rem;
            line-height: 1.7;
            color: rgba(255, 255, 255, 0.95);
            font-style: italic;
            margin-bottom: 1.5rem;
            position: relative;
            text-align: left;
        }

        .testimonial-quote::before {
            content: '"';
            font-size: 3rem;
            position: absolute;
            top: -0.5rem;
            left: -1rem;
            color: rgba(255, 255, 255, 0.2);
            font-family: Georgia, serif;
            line-height: 1;
        }

        .testimonial-quote::after {
            content: '"';
            font-size: 3rem;
            position: absolute;
            bottom: -1.5rem;
            right: -0.5rem;
            color: rgba(255, 255, 255, 0.2);
            font-family: Georgia, serif;
            line-height: 1;
        }

        .testimonial-author {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            gap: 1rem;
            width: 100%;
            max-width: 100%;
            padding-top: 1.25rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            margin-top: 0.5rem;
        }

        .testimonial-author img {
            width: 84px;
            height: 84px;
            min-width: 84px;
            min-height: 84px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            filter: grayscale(60%) saturate(40%);
            display: block;
            flex-shrink: 0;
            transition: filter 0.3s ease, transform 0.3s ease;
        }

        .testimonial-author a {
            display: inline-block;
            cursor: pointer;
        }

        .testimonial-author a:hover img {
            filter: grayscale(20%) saturate(80%);
            transform: scale(1.05);
        }

        .testimonial-author-info {
            display: flex;
            flex-direction: column;
            gap: 0.3rem;
            text-align: left;
            flex-grow: 1;
        }

        .testimonial-author-name {
            font-size: 1rem;
            font-weight: 600;
            color: white;
        }

        .testimonial-author-role {
            font-size: 0.9rem;
            color: var(--text-on-blue-supporting);
            line-height: 1.3;
        }

        .slider-wrapper {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 0;
        }

        .slider-nav-container {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1rem;
            order: 2;
            width: 100%;
            padding: 1rem 0 0.5rem 0;
        }

        .testimonials-container {
            order: 1;
            width: 100%;
            margin-bottom: 0;
        }

        .slider-nav {
            position: static;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            color: white;
            font-size: 1.5rem;
            line-height: 1;
            flex-shrink: 0;
            margin: 0;
            padding: 0;
        }

        .slider-nav:hover:not(:disabled) {
            background: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 255, 255, 0.4);
            transform: scale(1.1);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
        }

        .slider-nav:active:not(:disabled) {
            transform: scale(0.95);
        }

        .slider-nav:disabled {
            opacity: 0.3;
            cursor: not-allowed;
            transform: none;
        }

        .slider-nav#prevBtn,
        .slider-nav#nextBtn {
            position: static;
        }

        .slider-position-container {
            width: 100%;
            height: 4px;
            background: rgba(255, 255, 255, 0.15);
            border-radius: 2px;
            margin-top: 1rem;
            overflow: hidden;
            position: relative;
            cursor: default;
            order: 3;
        }

        .slider-position-bar {
            height: 100%;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 2px;
            transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            width: 0%;
            pointer-events: none;
        }

        @media (max-width: 768px) {
            .testimonials-slider {
                margin: 2rem auto;
                padding: 0 1rem;
            }

            .testimonial-slide {
                padding: 0 0.25rem;
                width: 100%;
                min-width: 100%;
            }

            .testimonial-content {
                padding: 1.5rem 1rem;
                width: 100%;
                max-width: 100%;
                margin: 0 auto;
            }

            .testimonial-quote {
                font-size: 0.95rem;
                line-height: 1.6;
                margin-bottom: 1.25rem;
                padding: 0 0.25rem;
            }

            .testimonial-quote::before {
                font-size: 2.5rem;
                top: -0.3rem;
                left: -0.5rem;
            }

            .testimonial-quote::after {
                font-size: 2.5rem;
                bottom: -1rem;
                right: -0.3rem;
            }

            .testimonial-author {
                flex-direction: column;
                align-items: center;
                text-align: center;
                gap: 0.75rem;
                padding-top: 1rem;
                margin-top: 0.5rem;
            }

            .testimonial-author img {
                width: 96px;
                height: 96px;
                min-width: 96px;
                min-height: 96px;
                margin: 0 auto;
            }

            .testimonial-author-info {
                text-align: center;
                align-items: center;
            }

            .testimonial-author-name {
                font-size: 0.95rem;
            }

            .testimonial-author-role {
                font-size: 0.85rem;
                line-height: 1.3;
            }

            .slider-nav {
                width: 44px;
                height: 44px;
                font-size: 1.2rem;
            }

            .slider-position-container {
                margin-top: 0.75rem;
            }
        }

        /* Product screenshots slider */
        .product-screenshots-slider {
            position: relative;
            max-width: 1200px;
            margin: 3rem auto;
            overflow: hidden;
            border-radius: 24px;
            width: 100%;
            box-sizing: border-box;
            --screenshot-crop-top: 18px;
        }

        .screenshots-wrapper {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 0;
            position: relative;
        }

        .screenshots-nav-container {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1rem;
            order: 2;
            width: 100%;
            padding: 1rem 0 0.5rem 0;
        }

        .screenshots-container {
            order: 1;
            width: 100%;
            display: grid;
            /* All slides occupy the same grid cell — stacked */
            grid-template-columns: 1fr;
        }

        .screenshot-slide {
            grid-row: 1;
            grid-column: 1;
            width: 100%;
            padding: 0 1rem;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 0;
            position: relative;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.5s ease;
        }

        .screenshot-slide.active {
            opacity: 1;
            pointer-events: auto;
        }

        .screenshot-wrapper {
            position: relative;
            width: 100%;
            max-width: 552px;
            aspect-ratio: 4 / 3;
            overflow: hidden;
            border-radius: 16px;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
            background: rgba(0, 0, 0, 0.1);
            cursor: zoom-in;
        }

        /* Dark scrim between image and caption */
        .screenshot-wrapper::before {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 2;
            background: linear-gradient(
                to bottom,
                rgba(0, 0, 0, 0.18) 0%,
                rgba(0, 0, 0, 0.52) 40%,
                rgba(0, 0, 0, 0.52) 60%,
                rgba(0, 0, 0, 0.18) 100%
            );
        }

        /* Film grain sits above scrim */
        .screenshot-wrapper::after {
            content: "";
            position: absolute;
            inset: -2px;
            pointer-events: none;
            z-index: 3;
            opacity: 0.08;
            mix-blend-mode: soft-light;
            background-image:
                radial-gradient(circle at 22% 34%, rgba(255, 255, 255, 0.12) 0 0.5px, transparent 1px),
                radial-gradient(circle at 68% 58%, rgba(0, 0, 0, 0.14) 0 0.6px, transparent 1px),
                radial-gradient(circle at 47% 76%, rgba(255, 255, 255, 0.1) 0 0.45px, transparent 1px),
                radial-gradient(circle at 38% 24%, rgba(0, 0, 0, 0.12) 0 0.55px, transparent 1px);
            background-size: 180px 180px, 220px 220px, 160px 160px, 200px 200px;
            animation: filmGrainDrift 2.8s steps(16, end) infinite;
        }

        @keyframes filmGrainDrift {
            0% {
                transform: translate3d(0, 0, 0);
                opacity: 0.06;
            }
            20% {
                transform: translate3d(-2px, 1px, 0);
                opacity: 0.09;
            }
            45% {
                transform: translate3d(1px, -2px, 0);
                opacity: 0.07;
            }
            70% {
                transform: translate3d(-1px, 2px, 0);
                opacity: 0.1;
            }
            100% {
                transform: translate3d(2px, -1px, 0);
                opacity: 0.05;
            }
        }

        @media (min-width: 900px) {
            .screenshot-wrapper {
                max-width: 745px;
            }
        }

        .screenshot-image {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center calc(50% - var(--screenshot-crop-top));
            display: block;
            transition: transform 0.3s ease-out, cursor 0.3s ease;
            user-select: none;
            z-index: 1;
        }

        .screenshot-image.auto-zoom {
            transform-origin: var(--zoom-origin-x, 50%) var(--zoom-origin-y, 50%);
            animation: screenshotKenBurns var(--zoom-duration, 14000ms) linear forwards;
        }

        @keyframes screenshotKenBurns {
            from {
                transform: translate(var(--pan-x-start, 0%), var(--pan-y-start, 0%)) scale(var(--zoom-start, 1.14));
                filter: brightness(0.5) contrast(1.06);
            }
            to {
                transform: translate(var(--pan-x-end, 0%), var(--pan-y-end, 0%)) scale(var(--zoom-end, 1));
                filter: brightness(1) contrast(1);
            }
        }

        .screenshot-caption {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: calc(100% - 3rem);
            max-width: 640px;
            text-align: center;
            font-size: 1.5rem;
            line-height: 1.35;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.98);
            opacity: 0;
            pointer-events: none;
            z-index: 5;
            text-shadow: 0 3px 16px rgba(0, 0, 0, 0.58), 0 0 3px rgba(0, 0, 0, 0.42);
            animation: none;
        }

        .screenshot-slide.active .screenshot-caption {
            opacity: 1;
        }

        .screenshot-caption.cursor-visible::after,
        .vision-item.cursor-visible::after {
            content: " |";
            animation: cursorBlink 1s steps(1, end) infinite;
        }

        @keyframes cursorBlink {
            0%, 49% { opacity: 1; }
            50%, 100% { opacity: 0; }
        }

        .screenshot-wrapper.zoomed .screenshot-image {
            cursor: zoom-out;
            animation: none !important;
        }

        .screenshot-wrapper.zoomed {
            cursor: zoom-out;
            overflow: auto;
        }

        .screenshots-nav {
            position: static;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            color: white;
            font-size: 1.5rem;
            line-height: 1;
            flex-shrink: 0;
            margin: 0;
            padding: 0;
        }

        .screenshots-nav:hover:not(:disabled) {
            background: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 255, 255, 0.4);
            transform: scale(1.1);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
        }

        .screenshots-nav:active:not(:disabled) {
            transform: scale(0.95);
        }

        .screenshots-nav:disabled {
            opacity: 0.3;
            cursor: not-allowed;
            transform: none;
        }

        .screenshots-position-container {
            width: 100%;
            height: 4px;
            background: rgba(255, 255, 255, 0.15);
            border-radius: 2px;
            margin-top: 1rem;
            overflow: hidden;
            position: relative;
            cursor: default;
            order: 3;
        }

        .screenshots-position-bar {
            height: 100%;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 2px;
            transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            width: 0%;
            pointer-events: none;
        }

        @media (max-width: 768px) {
            .product-screenshots-slider {
                margin: 2rem auto;
                padding: 0 0.25rem;
            }

            .screenshot-slide {
                padding: 0;
                opacity: 0;
                transition: opacity 0.45s ease;
            }

            .screenshot-slide.active {
                opacity: 1;
            }

            .screenshot-wrapper {
                max-width: 95vw;
                aspect-ratio: 3 / 4;
            }

            .screenshot-wrapper::before {
                display: none;
            }

            .screenshots-nav {
                width: 44px;
                height: 44px;
                font-size: 1.2rem;
            }

            .screenshots-position-container {
                margin-top: 0.75rem;
            }

            .screenshot-caption {
                width: calc(100% - 2.6rem);
                padding: 0 0.65rem;
                font-size: 1.34rem;
            }
        }

        /* Vision image with overlaid items */
        .vision-image-container {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            max-width: 400px;
            margin: 0 auto;
        }

        .vision-image-container img {
            animation: visionPulse 4s ease-in-out infinite;
        }

        @keyframes visionPulse {
            0%, 100% {
                transform: scale(1);
                opacity: 1;
            }
            50% {
                transform: scale(1.0025);
                opacity: 0.85;
            }
        }

        .vision-items-overlay {
            position: absolute;
            top: 43%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 90%;
            max-width: 350px;
            z-index: 2;
        }

        .vision-item {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            padding: 0;
            background: linear-gradient(90deg, #FFFFFF 0%, #E8F4F8 25%, #D0E8F0 50%, #E8F4F8 75%, #FFFFFF 100%);
            background-size: 200% 100%;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            border: none;
            border-radius: 0;
            text-align: center;
            font-size: 1.6rem;
            font-weight: 700;
            text-shadow: none;
            box-shadow: none;
            opacity: 0;
            animation: gradientShift 8s ease-in-out infinite;
            transition: opacity 0.35s ease;
            white-space: normal;
            line-height: 1.5;
            transform-origin: center center;
        }

        .vision-item.vision-visible {
            opacity: 1;
        }

        @keyframes gradientShift {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }

        /* Language visibility for vision items */
        .vision-items-overlay[data-lang="ja"] {
            display: none !important;
        }

        body.japanese .vision-items-overlay[data-lang="en"] {
            display: none !important;
        }

        body.japanese .vision-items-overlay[data-lang="ja"] {
            display: block !important;
        }

        /* New styling for the partner section */
        .partner-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            justify-items: center;
            align-items: start;
            gap: 2rem;
            margin-top: 2rem;
            max-width: 1000px;
            margin-left: auto;
            margin-right: auto;
            padding: 0 1rem;
        }

        .partner {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            max-width: 280px;
            text-align: center;
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            padding: 1.5rem 1rem;
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-sizing: border-box;
        }

        /* Updated styling for partner description text */
        .partner p {
            display: -webkit-box;
            -webkit-line-clamp: 3;       /* Allow up to 3 lines for better readability */
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.5;
            margin: 0;
            width: 100%;
            max-width: 100%;
            word-wrap: break-word;
            padding: 0;
        }

        .partner:hover {
            transform: translateY(-6px) scale(1.03);
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 255, 255, 0.2);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        }

        .partner img {
            width: 128px;
            height: 128px;
            max-width: 128px;
            margin-bottom: 1rem;
            padding: 0.75rem;
            border-radius: 50%;
            background: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.06);
            object-fit: contain;
            filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
            transition: filter 0.3s ease, transform 0.3s ease;
        }

        .partner:hover img {
            filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.25));
            transform: scale(1.05);
        }

        .partner img.partner-logo-tai {
            /* Keep bubble size identical; shrink only the logo content area */
            padding: 1.05rem;
        }
    
        .back-to-top:hover {
            background: rgba(255, 255, 255, 0.25);
            transform: translateY(-4px) scale(1.05);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2),
                        inset 0 1px 0 rgba(255, 255, 255, 0.3);
            border-color: rgba(255, 255, 255, 0.35);
        }
    
        .back-to-top.visible {
            display: flex;
        }
    
        .arrow-up {
            border: solid white;
            border-width: 0 3px 3px 0;
            display: inline-block;
            padding: 6px;
            transform: rotate(-135deg);
        }
    
        @media (max-width: 768px) {
            .vision-item {
                padding: 0;
                font-size: 1.38rem;
                font-weight: 700;
            }

            .vision-items-overlay {
                top: 43%;
                width: 85%;
                max-width: 300px;
            }

            /* .background-image disabled (display: none) — shark watermark removed */
            .subtitle { 
                font-size: 1.3rem; 
                min-height: 0;
            }
            .subtitle h3 {
                font-size: 1.3rem;
            }
            .subtitle p {
                font-size: 1rem;
                margin-top: 1rem;
            }
            .logo { width: clamp(200px, 62vw, 320px); height: auto; }
            .language-selector { 
                top: auto;
                bottom: calc(env(safe-area-inset-bottom, 0px) + 0.9rem);
                left: 0.9rem;
                transform: scale(0.82);
                transform-origin: bottom left;
                padding: 0.4rem 0.75rem;
                min-height: 36px;
                z-index: 1100;
            }
            .language-selector:hover {
                transform: scale(0.82);
                transform-origin: bottom left;
            }
            .language-selector:active,
            .language-selector:focus {
                transform: scale(0.82);
                transform-origin: bottom left;
                outline: none;
            }
            .usecase-selector-container {
                transform: none;
                margin: 1.2rem auto 1.6rem;
            }
            .usecase-option {
                font-size: 0.72rem;
                padding: 0.4rem 0.5rem;
            }
            .whitepaper-link a {
                font-size: 1rem;
                padding: 0.875rem 1.5rem;
            }
            .cta-caption {
                font-size: 1.66rem;
            }
            .whitepaper-caption {
                font-size: 0.9rem !important;
            }
            .content-card, .content-card-2 {
                padding: 2rem 1.5rem;
                border-radius: 20px;
            }
            .content-card h2, .content-card-2 h2 {
                font-size: 2rem;
            }
            .content-card h3, .content-card-2 h3 {
                font-size: 1.5rem;
            }
            .partner-grid {
                grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
                gap: 1.5rem;
                padding: 0 0.5rem;
            }
            .partner {
                max-width: 100%;
                padding: 1.25rem 0.875rem;
            }
            .partner p {
                -webkit-line-clamp: 4;
                font-size: 0.95rem;
            }
        }

        .video-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1.4rem;
            margin: 1.5rem 0 2rem;
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
        }

        .video-grid > div,
        .video-grid > div > div {
            width: 100%;
        }

        @media (max-width: 900px) {
            .video-grid {
                grid-template-columns: 1fr;
                gap: 1.1rem;
            }
        }

        .usecase-brief {
            max-width: 920px;
            margin: 1.2rem auto 0.9rem;
            padding: 1.25rem 1.4rem;
            border-radius: 14px;
            background: rgba(255, 255, 255, 0.07);
            border: 1px solid rgba(255, 255, 255, 0.16);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
        }

        .usecase-brief p {
            margin: 0.35rem 0;
            text-align: left;
            font-size: 1.02rem;
            line-height: 1.65;
        }

        .venture-studio-brief {
            margin-top: 0.5rem;
        }

        .venture-studio-video {
            margin: 1.5rem auto 2rem;
        }

        .academic-explainer-video {
            margin: 1.5rem auto 2rem;
        }

        .venture-studio-outcomes {
            margin-top: 0.5rem;
            margin-bottom: 0.75rem;
        }

        .venture-studio-outcomes .bullet-list {
            font-size: 0.97rem;
            line-height: 1.65;
            margin: 0.75rem auto;
        }

        .venture-studio-outcomes .bullet-list li {
            margin-bottom: 0.6rem;
        }

        .venture-studio-outcomes .bullet-list li::before {
            font-size: 1.05rem;
        }

        .venture-studio-impact {
            margin-top: 0.25rem;
            margin-bottom: 1.75rem;
        }

        #venture-studios .venture-studio-impact + h2 {
            margin-top: 1.25rem;
        }
    
        .info-table, .info-table-single, .team-table {
            width: 100%;
            max-width: 900px;
            margin: 2rem auto;
            border-collapse: separate;
            border-spacing: 0;
            font-size: 1.15rem;
            line-height: 1.75;
        }
    
        .info-table td, .info-table-single td, .team-table td {
            padding: 1rem 1.25rem;
            vertical-align: top;
        }

        .info-table-single td {
            padding: 1.5rem 0;
        }
    
        .info-table td:first-child, .info-table-single td:first-child {
            text-align: right;
            width: 8%;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.9);
        }
    
        .info-table td:last-child, .info-table-single td:last-child {
            text-align: left;
            width: 92%;
            padding-left: 1.5rem;
        }
    
        /* .bullet-list {
            list-style-position: outside;
            font-size: 1.1rem;
            line-height: 2rem;
            padding-left: 0; 
            margin: 0 auto; 
            max-width: 800px; 
        }

        .bullet-list li {
            padding-left: 25px; 
            margin-bottom: 10px;
            text-align: left; 
        } 
       */

       .bullet-list {
            list-style: none;
            font-size: 1.2rem;
            line-height: 1.8;
            padding-left: 0;
            margin: 1.5rem auto;
            max-width: 800px;
        }

        .bullet-list li {
            position: relative;
            padding-left: 2rem;
            margin-bottom: 1rem;
            text-align: left;
            transition: transform 0.2s ease, padding-left 0.2s ease;
        }

        .bullet-list li::before {
            content: '→';
            position: absolute;
            left: 0;
            color: rgba(255, 255, 255, 0.8);
            font-weight: bold;
            font-size: 1.3rem;
            transition: transform 0.2s ease, color 0.2s ease;
        }

        .bullet-list li:hover {
            transform: translateX(4px);
            padding-left: 2.2rem;
        }

        .bullet-list li:hover::before {
            transform: translateX(4px);
            color: rgba(255, 255, 255, 1);
        }

    
        .linkedin-container {
            text-align: center;
            margin-top: 10px;
        }
    
        .linkedin-container img {
            max-width: 30px;
            animation: linkedinPulse 2s ease-in-out infinite;
            transition: transform 0.3s ease;
        }
    
        .linkedin-container img:hover {
            transform: scale(1.2);
            animation: none;
        }
    
        #nodesCanvas {
            z-index: -1;
            opacity: 0.22;
        }

        .team-table {
            width: 100%;
            max-width: 900px;
            margin: 2rem auto;
            border-collapse: separate;
            border-spacing: 1.5rem;
        }

        .team-table tr {
            display: flex;
            flex-wrap: wrap;
            gap: 2rem;
            justify-content: center;
        }

        .team-table td {
            flex: 1 1 250px;
            max-width: 300px;
            padding: 1.5rem;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .team-table td p {
            text-align: center;
        }
    
        .team-image {
            max-width: 132px;
            width: 100%;
            height: auto;
            margin-bottom: 1rem;
            border-radius: 50%;
            filter: grayscale(100%);
            transition: filter 0.3s ease, transform 0.3s ease;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .team-table td a {
            display: inline-block;
            cursor: pointer;
        }

        .team-table td a:hover .team-image {
            filter: grayscale(40%);
            transform: scale(1.08);
        }

        .team-table td:hover .team-image {
            filter: grayscale(60%);
            transform: scale(1.05);
        }
    
        @media (max-width: 480px) {
            .team-table { max-width: 100%; }
            .team-table td { padding: 10px; }
            .team-image { max-width: 88px; }
        }

        @media (max-width: 480px) {
            .content-card p, .content-card-2 p, .card-text p {
                font-size: 1rem; /* Smaller font size for mobile */
                line-height: 1.4; /* Adjust line height for tighter spacing */
                padding: 8px 0;
            }

            .bullet-list {
                font-size: 1rem;
            }

            .info-table, .info-table-single, .team-table {
                font-size: 1rem;
            }

            .card-text {
                font-size: 1rem;
            }

            /* Optionally adjust the heading sizes too */
            .content-card h2, .content-card-2 h2 {
            font-size: 1.5rem;
            }
            .content-card h3, .content-card-2 h3 {
            font-size: 1rem;
            }
        }
    
        .job-title {
            font-size: 0.9rem;
            font-style: italic;
            display: block;
        }


        .card-text {
            max-width: 900px;
            margin: 0 auto;
            padding: 0;
            font-size: 1.15rem;
            line-height: 1.75;
        }

        .card-text ul {
            list-style: none;
            padding-left: 0;
            margin: 1.5rem 0;
        }

        .card-text ul li {
            position: relative;
            padding-left: 2rem;
            margin-bottom: 1rem;
            line-height: 1.75;
        }

        .card-text ul li::before {
            content: '→';
            position: absolute;
            left: 0;
            color: rgba(255, 255, 255, 0.8);
            font-weight: bold;
            font-size: 1.3rem;
        }

        /* Language selector styles */
        .language-selector {
            position: fixed;
            top: 1.5rem;
            left: 1.5rem;
            z-index: 1001;
            background: rgba(255, 255, 255, 0.12);
            backdrop-filter: blur(20px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.25);
            border-radius: 24px;
            padding: 0.5rem 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            color: white;
            font-weight: 600;
            min-height: 40px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1),
                        inset 0 1px 0 rgba(255, 255, 255, 0.2);
            letter-spacing: 0.01em;
        }

        .language-selector .flag-en + span {
            margin-left: 0; /* Remove gap when flag is hidden */
        }

        .language-selector:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px) scale(1.02);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15),
                        inset 0 1px 0 rgba(255, 255, 255, 0.25);
            border-color: rgba(255, 255, 255, 0.35);
        }

        body.language-switch-disabled .language-selector {
            display: none !important;
        }

        @media (max-width: 768px) {
            .language-selector {
                top: 0.75rem !important;
                right: 0.75rem !important;
                bottom: auto !important;
                left: auto !important;
                width: auto !important;
                height: 34px !important;
                min-height: 34px !important;
                max-height: 34px !important;
                padding: 0.35rem 0.7rem !important;
                transform: none !important;
                transform-origin: top right !important;
                z-index: 1100;
            }

            .language-selector:hover,
            .language-selector:active,
            .language-selector:focus {
                transform: none !important;
                outline: none;
            }
        }

        .usecase-selector-container {
            position: static;
            z-index: 1001;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.35rem;
            margin: 0.8rem auto 0.35rem !important;
        }

        .usecase-selector-caption {
            margin: 0;
            padding-right: 0;
            color: var(--text-on-blue-supporting);
            font-size: 0.72rem;
            letter-spacing: 0.02em;
            text-transform: uppercase;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
        }

        .usecase-selector {
            display: inline-flex;
            gap: 0.35rem;
            padding: 0.35rem;
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.25);
            background: rgba(255, 255, 255, 0.12);
            backdrop-filter: blur(20px) saturate(180%);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.15);
        }

        .usecase-option {
            border: 0;
            border-radius: 16px;
            background: transparent;
            color: var(--text-on-blue-supporting);
            padding: 0.45rem 0.75rem;
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.25s ease;
        }

        .usecase-option.active {
            background: rgba(255, 255, 255, 0.22);
            color: #ffffff;
        }

        .vision-industry-brief {
            max-width: 820px;
            margin: 0.25rem auto 1.5rem;
            text-align: left;
        }

        .partner p {
            text-align: center;
        }

        .site-footer {
            margin-top: 1.25rem;
            padding: 1rem 1rem 1.4rem;
            color: var(--text-on-blue-supporting);
            font-size: 0.9rem;
            line-height: 1.55;
            text-align: center;
            border-top: 1px solid rgba(255, 255, 255, 0.16);
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
            display: block !important;
            width: 100%;
            position: relative;
            z-index: 1;
        }

        .footer-inner {
            max-width: 920px;
            margin: 0 auto;
            display: block;
            width: 100%;
            box-sizing: border-box;
            text-align: center;
        }

        .footer-topline {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.65rem;
            flex-wrap: wrap;
            margin-bottom: 0.55rem;
            font-weight: 600;
            width: 100%;
        }

        .footer-topline a,
        .site-footer a {
            color: #ffffff;
            text-decoration: underline;
            text-underline-offset: 2px;
        }

        .footer-inner p {
            margin: 0.22rem 0;
            text-align: center;
        }

        /* Supporting copy on blue backgrounds — keep high contrast */
        .hero-subline,
        .section-dek,
        .blog-midfunnel-label,
        .case-study-situation,
        .case-study-quote,
        .case-study-attribution,
        .faq-answer,
        .survey-cta-body {
            color: var(--text-on-blue-supporting) !important;
            -webkit-text-fill-color: var(--text-on-blue-supporting) !important;
            background: none !important;
            background-clip: unset !important;
        }

        /* Safari/mobile-safe language visibility for footer blocks */
        body:not(.japanese) .site-footer .footer-inner[data-lang="en"] {
            display: block !important;
        }

        body:not(.japanese) .site-footer .footer-inner[data-lang="ja"] {
            display: none !important;
        }

        body.japanese .site-footer .footer-inner[data-lang="en"] {
            display: none !important;
        }

        body.japanese .site-footer .footer-inner[data-lang="ja"] {
            display: block !important;
        }

        @media (max-width: 768px) {
            .site-footer {
                font-size: 0.84rem;
                line-height: 1.45;
                padding: 0.9rem 0.8rem 1.2rem;
            }
            .footer-topline {
                gap: 0.5rem;
                margin-bottom: 0.45rem;
            }
            .footer-inner p {
                margin: 0.18rem 0;
                text-align: center;
            }
        }

        [data-usecase="npo"],
        [data-usecase="industry"] {
            display: none !important;
        }

        body.usecase-academic [data-usecase="academic"] {
            display: block !important;
        }

        body.usecase-academic [data-usecase="npo"],
        body.usecase-academic [data-usecase="industry"] {
            display: none !important;
        }

        body.usecase-npo [data-usecase="academic"] {
            display: none !important;
        }

        body.usecase-npo [data-usecase="npo"] {
            display: block !important;
        }

        body.usecase-npo [data-usecase="industry"] {
            display: none !important;
        }

        body.usecase-industry [data-usecase="academic"],
        body.usecase-industry [data-usecase="npo"] {
            display: none !important;
        }

        body.usecase-industry [data-usecase="industry"] {
            display: block !important;
        }

        body.usecase-industry .content-card[data-usecase="industry"],
        body.usecase-industry div[data-usecase="industry"].blog-carousel-wrapper,
        body.usecase-industry div[data-usecase="industry"] {
            display: block !important;
        }

        /* Venture Studios card is a block-level content-card */
        body.usecase-industry #venture-studios {
            display: block !important;
        }

        /* Blog card has no industry content — hide empty shell for Enterprise */
        body.usecase-industry #blog {
            display: none !important;
        }

        /* Enterprise vision video wrapper */
        body.usecase-industry .vision-video[data-usecase="industry"] {
            display: block !important;
        }

        /* Elements that need flex restored */
        body.usecase-industry .blog-carousel-wrapper[data-usecase="industry"],
        body.usecase-industry .usecase-brief[data-usecase="industry"],
        body.usecase-industry .vision-items-overlay[data-usecase="industry"] {
            display: block !important;
        }

        body.usecase-industry .blog-carousel[data-usecase="industry"] {
            display: flex !important;
        }

        body:not(.japanese).usecase-academic a[data-usecase="academic"][data-lang="en"],
        body:not(.japanese).usecase-npo a[data-usecase="npo"][data-lang="en"],
        body:not(.japanese).usecase-industry a[data-usecase="industry"][data-lang="en"],
        body.japanese.usecase-academic a[data-usecase="academic"][data-lang="ja"],
        body.japanese.usecase-npo a[data-usecase="npo"][data-lang="ja"],
        body.japanese.usecase-industry a[data-usecase="industry"][data-lang="ja"] {
            display: inline-flex !important;
        }

        body.usecase-npo .usecase-option[data-usecase-option="academic"],
        body.usecase-npo .usecase-option[data-usecase-option="industry"],
        body.usecase-industry .usecase-option[data-usecase-option="academic"],
        body.usecase-industry .usecase-option[data-usecase-option="npo"] {
            background: transparent;
            color: rgba(255, 255, 255, 0.85);
        }

        body.usecase-npo .usecase-option[data-usecase-option="npo"],
        body.usecase-industry .usecase-option[data-usecase-option="industry"] {
            background: rgba(255, 255, 255, 0.22);
            color: #ffffff;
        }

        @media (max-width: 900px) {
            .usecase-selector-container {
                position: static;
                transform: none;
                align-items: center;
                margin: 0.6rem auto 0.35rem !important;
                padding: 0 1rem;
            }

            .usecase-selector-caption {
                font-size: 0.64rem;
                padding-right: 0;
            }

            .usecase-selector {
                transform: none;
            }
        }

        @media (max-width: 480px) {
            .usecase-selector-container {
                margin: 0.5rem auto 0.35rem !important;
            }
        }

        .language-flag {
            width: 17px;
            height: 17px;
            border-radius: 50%;
            display: inline-block;
        }

        .flag-jp {
            background: linear-gradient(to right, white 100%);
            position: relative;
        }

        .flag-jp::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 10px;
            height: 10px;
            background: #BC002D;
            border-radius: 50%;
        }

        .flag-en {
            background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MCAzMCIgd2lkdGg9IjE3IiBoZWlnaHQ9IjE3Ij4KICA8Y2xpcFBhdGggaWQ9InQiPgogICAgPHBhdGggZD0iTTAsMCB2MzAgaDYwIHYtMzAgeiIvPgogIDwvY2xpcFBhdGg+CiAgPGNsaXBQYXRoIGlkPSJzIj4KICAgIDxwYXRoIGQ9Ik0wLDAgdjMwIGg2MCB2LTMwIHoiIGNsaXAtcGF0aD0idXJsKCN0KSIvPgogIDwvY2xpcFBhdGg+CiAgPGcgY2xpcC1wYXRoPSJ1cmwoI3MpIj4KICAgIDxwYXRoIGQ9Ik0wLDAgdjMwIGg2MCB2LTMwIHoiIGZpbGw9IiMwMTIxNjkiLz4KICAgIDxwYXRoIGQ9Ik0wLDAgTDYwLDMwIE02MCwwIEwwLDMwIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iNiIvPgogICAgPHBhdGggZD0iTTAsMCBMNjAsMzAgTTYwLDAgTDAsMzAiIHN0cm9rZT0iI2M4MTAyZSIgc3Ryb2tlLXdpZHRoPSI0Ii8+CiAgICA8cGF0aCBkPSJNMzAsMCB2MzAgTTAsMTUgaDYwIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMTAiLz4KICAgIDxwYXRoIGQ9Ik0zMCwwIHYzMCBNMCwxNSBoNjAiIHN0cm9rZT0iI2M4MTAyZSIgc3Ryb2tlLXdpZHRoPSI2Ii8+CiAgPC9nPgo8L3N2Zz4K') center/contain no-repeat;
            transform: scaleY(1.5);
        }

        /* Hidden content for language switching */
        [data-lang="ja"] {
            display: none !important;
        }

        body:not(.japanese) [data-lang="ja"] {
            display: none !important;
        }

        body.japanese [data-lang="en"] {
            display: none !important;
        }

        body.japanese [data-lang="ja"] {
            display: block !important;
        }

        body.japanese [data-lang="ja"].inline {
            display: inline !important;
        }

        body.japanese.usecase-academic [data-usecase="npo"],
        body.japanese.usecase-academic [data-usecase="industry"],
        body.japanese.usecase-npo [data-usecase="academic"],
        body.japanese.usecase-npo [data-usecase="industry"],
        body.japanese.usecase-industry [data-usecase="academic"],
        body.japanese.usecase-industry [data-usecase="npo"] {
            display: none !important;
        }

        body.japanese.usecase-academic a[data-usecase="academic"][data-lang="ja"],
        body.japanese.usecase-npo a[data-usecase="npo"][data-lang="ja"],
        body.japanese.usecase-industry a[data-usecase="industry"][data-lang="ja"] {
            display: inline-flex !important;
        }

        /* Specific rules for heading elements */
        body.japanese h1[data-lang="ja"],
        body.japanese h2[data-lang="ja"],
        body.japanese h3[data-lang="ja"] {
            display: block !important;
        }

        /* Ensure English headings are hidden in Japanese mode */
        body.japanese h1[data-lang="en"],
        body.japanese h2[data-lang="en"],
        body.japanese h3[data-lang="en"] {
            display: none !important;
        }

        /* Ensure Japanese headings are hidden in English mode */
        h1[data-lang="ja"],
        h2[data-lang="ja"],
        h3[data-lang="ja"] {
            display: none !important;
        }

        body.japanese.usecase-academic [data-usecase="npo"],
        body.japanese.usecase-academic [data-usecase="industry"],
        body.japanese.usecase-npo [data-usecase="academic"],
        body.japanese.usecase-npo [data-usecase="industry"],
        body.japanese.usecase-industry [data-usecase="academic"],
        body.japanese.usecase-industry [data-usecase="npo"] {
            display: none !important;
        }

        /* Language must override usecase rules (e.g. vp-detail with both data-lang and data-usecase) */
        body:not(.japanese) [data-lang="ja"][data-usecase],
        body:not(.japanese) [data-usecase][data-lang="ja"] {
            display: none !important;
        }

        body.japanese [data-lang="en"][data-usecase],
        body.japanese [data-usecase][data-lang="en"] {
            display: none !important;
        }

        body:not(.japanese).usecase-academic [data-lang="en"][data-usecase="academic"],
        body:not(.japanese).usecase-npo [data-lang="en"][data-usecase="npo"],
        body:not(.japanese).usecase-industry [data-lang="en"][data-usecase="industry"],
        body.japanese.usecase-academic [data-lang="ja"][data-usecase="academic"],
        body.japanese.usecase-npo [data-lang="ja"][data-usecase="npo"],
        body.japanese.usecase-industry [data-lang="ja"][data-usecase="industry"] {
            display: block !important;
        }

        /* =========================
           Shared styles: Privacy Policy page
           Scoped to avoid impacting the homepage.
           ========================= */
        body.privacy-policy-page {
            font-family: Arial, sans-serif;
            margin: 40px;
            padding: 0;
            line-height: 1.6;
            background-color: #f4f4f4;
            color: #333;
            min-height: auto;
            position: static;
            pointer-events: auto;
            overscroll-behavior: auto;
            -webkit-overflow-scrolling: auto;
        }

        body.privacy-policy-page .container {
            max-width: 800px;
            margin: auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        body.privacy-policy-page h1,
        body.privacy-policy-page h2 {
            color: #2C56B5;
        }

        body.privacy-policy-page a {
            color: #2C56B5;
            text-decoration: none;
        }

        body.privacy-policy-page a:hover {
            text-decoration: underline;
        }

        body.privacy-policy-page .language-selector {
            top: 2rem;
            right: 2rem;
            left: auto;
            background: rgba(44, 86, 181, 0.9);
            border-radius: 25px;
            padding: 8px 16px;
            gap: 8px;
            color: white;
            font-weight: 500;
            min-height: 40px;
        }

        body.privacy-policy-page .language-selector:hover {
            background: rgba(44, 86, 181, 1);
            transform: translateY(-2px);
        }

        body.privacy-policy-page .language-flag {
            width: 20px;
            height: 20px;
        }

        body.privacy-policy-page .flag-jp::after {
            width: 12px;
            height: 12px;
        }

        body.privacy-policy-page .container h1 {
            font-size: 2rem;
            margin-bottom: 0.6rem;
        }

        body.privacy-policy-page .container h2 {
            font-size: 1.25rem;
            margin-top: 1.35rem;
            margin-bottom: 0.4rem;
            color: #1c3f86;
        }

        body.privacy-policy-page .container p {
            margin-bottom: 0.65rem;
        }

        body.privacy-policy-page .container ul {
            margin: 0.35rem 0 0.85rem 1.2rem;
        }

        body.privacy-policy-page .container li {
            margin-bottom: 0.35rem;
        }

        @media (max-width: 768px) {
            body.privacy-policy-page {
                margin: 16px;
            }

            body.privacy-policy-page .container {
                padding: 18px 16px;
                border-radius: 10px;
            }

            body.privacy-policy-page .container h1 {
                font-size: 1.6rem;
            }

            body.privacy-policy-page .container h2 {
                font-size: 1.1rem;
                margin-top: 1.1rem;
            }
        }

.case-study-img {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 1.2rem;
  display: block;
}

.case-study-card .case-study-headline {
  font-size: 1.55rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.015em !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  text-align: left !important;
  margin: 0 0 1rem !important;
}

.case-study-card .case-study-situation {
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  padding: 0 !important;
}

.blog-read-link {
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

@media (max-width: 600px) {
  .case-study-card .case-study-headline {
    font-size: 1.3rem !important;
  }
}

@media (max-width: 600px) {
  .case-study-img {
    max-height: 160px;
    border-radius: 8px;
    margin-bottom: 0.9rem;
  }
}

/* Venture Studios merged carousel — center 3 cards on wide screens */
#venture-studios .blog-carousel {
  justify-content: center;
}
@media (min-width: 900px) {
  #venture-studios .blog-carousel {
    overflow-x: visible;
    flex-wrap: wrap;
    scroll-snap-type: none;
  }
  #venture-studios .blog-carousel .blog-card {
    flex: 0 0 280px;
  }
  #venture-studios .carousel-nav {
    display: none;
  }
}

/* Mobile footer safe-area + back-to-top clearance */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .site-footer {
    padding-bottom: calc(1.4rem + env(safe-area-inset-bottom));
  }
}

@media (max-width: 600px) {
  .back-to-top {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
    right: 1rem;
  }
  /* Keep footer text centered and clear of the fixed ↑ button */
  .footer-inner {
    max-width: calc(100% - 5rem);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}

/* FAQ summary language spans — must be inline, not block */
.faq-item summary span[data-lang] {
  display: inline !important;
}
body.japanese .faq-item summary span[data-lang="en"] {
  display: none !important;
}
body:not(.japanese) .faq-item summary span[data-lang="ja"] {
  display: none !important;
}
body.japanese .faq-item summary span[data-lang="ja"] {
  display: inline !important;
}


/* =====================================================================
   15Blue — DRAFT redesign layer (2026-09-26)
   ---------------------------------------------------------------------
   Loaded AFTER styles.css and the inline <style> block in
   index_draft.html, so it only overrides/extends — production
   styles.css is untouched. Remove this file + the draft <link> to
   revert to the current look.

   Sections
     0. Tokens
     1. Base / typography / backdrop
     2. Hero (AI imagery)
     3. Content cards (glass v2, gradient hairline, cursor spotlight)
     4. Headings + text rhythm
     5. Buttons / CTAs
     6. Value-proposition cards (AI imagery)
     7. About block, product card, misc components
     8. Scroll reveal + progress bar
     9. Footer, back-to-top, focus states
    10. Responsive + reduced motion
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. Tokens
   --------------------------------------------------------------------- */
:root {
    --hx-font-sans: 'Inter', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Surfaces */
    --hx-ink-950: #030a1c;
    --hx-ink-900: #050d24;
    --hx-ink-800: #081a44;
    --hx-ink-700: #0b2a6b;
    --hx-brand: #1565c0;           /* existing brand blue, kept */
    --hx-blue: #3b82f6;
    --hx-blue-bright: #60a5fa;
    --hx-cyan: #22d3ee;
    --hx-teal: #2dd4bf;
    --hx-violet: #a78bfa;
    --hx-gold: #fcd34d;            /* reserved for tiny highlights only */

    /* Text hierarchy (by tone, not flat grey) */
    --hx-text-1: #f5f8ff;
    --hx-text-2: #c9d7f0;
    --hx-text-3: #93a7cc;

    /* Signature gradients */
    --hx-grad-brand: linear-gradient(135deg, #2563eb 0%, #3b82f6 40%, #06b6d4 100%);
    --hx-grad-accent: linear-gradient(90deg, #3b82f6 0%, #22d3ee 50%, #a78bfa 100%);
    --hx-grad-text: linear-gradient(180deg, #ffffff 0%, #e3efff 45%, #9fd0ff 100%);
    --hx-grad-text-accent: linear-gradient(100deg, #ffffff 0%, #bfe3ff 35%, #67e8f9 70%, #c4b5fd 100%);

    /* Hairlines */
    --hx-line: rgba(148, 190, 255, 0.14);
    --hx-line-strong: rgba(148, 190, 255, 0.28);

    /* Layered depth (8 / 16 / 24+ blur stack) */
    --hx-shadow-1: 0 1px 2px rgba(1, 6, 22, 0.30), 0 4px 8px rgba(1, 6, 22, 0.18);
    --hx-shadow-2: 0 2px 4px rgba(1, 6, 22, 0.22), 0 8px 16px rgba(1, 6, 22, 0.22), 0 16px 32px rgba(1, 6, 22, 0.20);
    --hx-shadow-3: 0 2px 4px rgba(1, 6, 22, 0.20), 0 8px 16px rgba(1, 6, 22, 0.22), 0 24px 48px rgba(1, 6, 22, 0.30), 0 48px 96px rgba(1, 6, 22, 0.28);
    --hx-glow-blue: 0 10px 30px -8px rgba(59, 130, 246, 0.65);
    --hx-glow-cyan: 0 14px 40px -10px rgba(34, 211, 238, 0.60);

    /* Motion */
    --hx-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --hx-ease-ui: cubic-bezier(0.25, 1, 0.5, 1);
    --hx-dur-ui: 220ms;
    --hx-dur-reveal: 900ms;

    --hx-radius-lg: 28px;
    --hx-radius-md: 18px;
    --hx-radius-sm: 12px;
}

/* ---------------------------------------------------------------------
   1. Base / typography / backdrop
   --------------------------------------------------------------------- */
* {
    font-family: var(--hx-font-sans);
}

html {
    background-color: var(--hx-ink-900);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    color: var(--hx-text-1);
    font-feature-settings: 'cv11', 'ss01', 'ss03';
}

::selection {
    background: rgba(34, 211, 238, 0.35);
    color: #fff;
}

/* Deep-ocean backdrop: navy base + two soft aurora pools (cyan / violet)
   + the existing brand blue at the bottom edge. Fixed, so it costs one
   paint, not per-scroll work. */
.gradient-backdrop {
    background:
        radial-gradient(1100px 760px at 88% -8%, rgba(34, 211, 238, 0.13), transparent 62%),
        radial-gradient(900px 720px at -12% 38%, rgba(124, 58, 237, 0.14), transparent 60%),
        radial-gradient(1200px 900px at 50% 120%, rgba(21, 101, 192, 0.55), transparent 65%),
        linear-gradient(180deg, var(--hx-ink-900) 0%, var(--hx-ink-800) 55%, #0a2358 100%);
}

/* Subtle film grain to kill gradient banding (inline SVG noise, ~1KB) */
.water-shimmer {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.5'/></svg>");
    background-size: 160px 160px;
    animation: none;
    opacity: 0.035;
}

#nodesCanvas {
    opacity: 0.55;
}

/* ---------------------------------------------------------------------
   2. Hero (AI imagery)
   --------------------------------------------------------------------- */
.hx-hero {
    position: relative;
    width: 100%;
    min-height: min(94vh, 900px);
    /* bleed under the translucent fixed header */
    margin-top: calc(-1 * var(--site-header-height, 72px));
    padding: calc(var(--site-header-height, 72px) + 4.5rem) 1.5rem 5.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    isolation: isolate;
    overflow: hidden;
}

.hx-hero__media {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    /* fade the image into the page backdrop instead of a hard edge */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
}

.hx-hero__media img {
    position: absolute;
    inset: -4% -2%;
    width: 104%;
    height: 108%;
    object-fit: cover;
    object-position: 50% 60%;
    /* no opacity fade: the image is a likely LCP candidate, so it paints
       immediately and only settles from a slight zoom (Ken Burns). */
    transform: scale(1.06) translate3d(0, var(--hx-parallax, 0px), 0);
    animation: hxHeroIn 2.2s var(--hx-ease-out) forwards;
    will-change: transform;
}

@keyframes hxHeroIn {
    to { transform: scale(1) translate3d(0, var(--hx-parallax, 0px), 0); }
}

/* vignette + readability scrim behind the headline */
.hx-hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 55% at 50% 45%, rgba(3, 10, 28, 0.55) 0%, rgba(3, 10, 28, 0.15) 60%, transparent 100%),
        linear-gradient(180deg, rgba(3, 10, 28, 0.55) 0%, transparent 22%);
}

/* slow-drifting aurora glow on top of the image */
.hx-hero__aurora {
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(30% 25% at 30% 40%, rgba(59, 130, 246, 0.28), transparent 70%),
        radial-gradient(28% 22% at 72% 55%, rgba(34, 211, 238, 0.20), transparent 70%),
        radial-gradient(22% 20% at 55% 30%, rgba(167, 139, 250, 0.18), transparent 70%);
    /* radial gradients are already soft — no filter:blur() (a full-bleed
       blur layer halved frame rate in profiling) */
    animation: hxAurora 18s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes hxAurora {
    0%   { transform: translate3d(-3%, 0, 0) rotate(0deg); }
    100% { transform: translate3d(3%, -2%, 0) rotate(6deg); }
}

/* faint engineering grid, masked to the centre */
.hx-hero__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(148, 190, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 190, 255, 0.06) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(55% 50% at 50% 42%, #000 0%, transparent 100%);
    mask-image: radial-gradient(55% 50% at 50% 42%, #000 0%, transparent 100%);
}

.hx-hero__inner {
    position: relative;
    max-width: 980px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hx-hero .logo-container {
    margin: 0 0 1.6rem;
}

.hx-hero .logo {
    height: clamp(44px, 5vw, 64px);
    filter: drop-shadow(0 6px 24px rgba(59, 130, 246, 0.45)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6));
}

.hx-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1.5rem;
    padding: 0.45rem 0.95rem 0.45rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--hx-text-2);
    background: rgba(8, 22, 56, 0.55);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    box-shadow: inset 0 0 0 1px var(--hx-line-strong), inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--hx-shadow-1);
}

.hx-eyebrow__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--hx-cyan);
    box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.6);
    animation: hxPing 2.4s var(--hx-ease-out) infinite;
    flex: 0 0 auto;
}

@keyframes hxPing {
    0%   { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.55); }
    70%  { box-shadow: 0 0 0 10px rgba(34, 211, 238, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0); }
}

.hx-title {
    margin: 0;
    font-size: clamp(2.6rem, 1.2rem + 5.2vw, 5.4rem);
    line-height: 1.02;
    font-weight: 700;
    letter-spacing: -0.045em;
    color: var(--hx-text-1);
    text-wrap: balance;
}

.hx-title .hx-title__accent {
    background: var(--hx-grad-text-accent);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* one sweep on load rather than an infinite repaint loop */
    animation: hxShimmerText 2.4s var(--hx-ease-out) 0.5s both;
}

body.japanese .hx-title {
    font-size: clamp(2.1rem, 1rem + 4vw, 4.2rem);
    letter-spacing: -0.02em;
    line-height: 1.18;
}

@keyframes hxShimmerText {
    0%   { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

.hx-lede {
    max-width: 640px;
    margin: 1.5rem auto 0;
    font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.3rem);
    line-height: 1.6;
    color: var(--hx-text-2);
    text-wrap: pretty;
}

.hx-lede strong {
    color: var(--hx-text-1);
    font-weight: 600;
}

.hx-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.85rem;
    margin-top: 2.2rem;
}

/* hero stat strip — reuses the VP numbers */
.hx-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 3.2rem;
    padding: 0.35rem;
    border-radius: 20px;
    background: rgba(6, 16, 42, 0.5);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    box-shadow: inset 0 0 0 1px var(--hx-line), inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--hx-shadow-2);
    width: min(620px, 100%);
}

.hx-stat {
    padding: 0.95rem 1rem;
    position: relative;
}

.hx-stat + .hx-stat::before {
    content: '';
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--hx-line-strong), transparent);
}

.hx-stat__num {
    display: block;
    font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    background: var(--hx-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hx-stat__label {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--hx-text-3);
}

.hx-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 1.6rem;
    transform: translateX(-50%);
    width: 26px;
    height: 42px;
    border-radius: 14px;
    box-shadow: inset 0 0 0 1.5px rgba(201, 215, 240, 0.45);
    display: block;
    opacity: 0.8;
    transition: opacity var(--hx-dur-ui) ease, box-shadow var(--hx-dur-ui) ease;
}

.hx-scroll-cue::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 8px;
    width: 4px;
    height: 8px;
    margin-left: -2px;
    border-radius: 2px;
    background: var(--hx-cyan);
    animation: hxScrollDot 1.8s var(--hx-ease-out) infinite;
}

.hx-scroll-cue:hover {
    opacity: 1;
    box-shadow: inset 0 0 0 1.5px rgba(34, 211, 238, 0.8);
}

@keyframes hxScrollDot {
    0%   { transform: translateY(0); opacity: 1; }
    80%  { transform: translateY(14px); opacity: 0; }
    100% { transform: translateY(0); opacity: 0; }
}

/* hero entrance choreography (staggered) */
.hx-rise {
    opacity: 0;
    transform: translateY(16px);
    animation: hxRise 0.9s var(--hx-ease-out) forwards;
    animation-delay: calc(var(--hx-i, 0) * 70ms + 40ms);
}

@keyframes hxRise {
    to { opacity: 1; transform: none; }
}

/* the pillars orbit video now follows the hero */
.hero-pillars-visual {
    margin-top: 0.5rem;
}

/* ---------------------------------------------------------------------
   3. Content cards — glass v2
   --------------------------------------------------------------------- */
.content-section {
    gap: clamp(3rem, 2rem + 3vw, 5.5rem);
    margin-top: 3rem;
}

.content-card,
.content-card-2 {
    --mx: 50%;
    --my: 0%;
    background:
        linear-gradient(180deg, rgba(18, 44, 100, 0.66) 0%, rgba(9, 24, 60, 0.74) 55%, rgba(6, 16, 42, 0.80) 100%);
    -webkit-backdrop-filter: blur(26px) saturate(160%);
    backdrop-filter: blur(26px) saturate(160%);
    border-radius: var(--hx-radius-lg);
    padding: clamp(1.6rem, 1rem + 3vw, 3.75rem);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        var(--hx-shadow-3);
    transition:
        transform var(--hx-dur-reveal) var(--hx-ease-out),
        opacity var(--hx-dur-reveal) var(--hx-ease-out),
        filter var(--hx-dur-reveal) var(--hx-ease-out),
        box-shadow 400ms var(--hx-ease-ui);
}

/* Replace the pulsing radial shimmer with a cursor-tracked spotlight +
   a fixed top-edge glow (Linear/Stripe-style). --mx/--my are set by
   draft-enhance.js; default is top-centre. */
.content-card::before,
.content-card-2::before {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: none;
    border-radius: inherit;
    filter: none;
    -webkit-filter: none;
    animation: none;
    opacity: 1;
    background:
        radial-gradient(520px circle at var(--mx) var(--my), rgba(96, 165, 250, 0.10), transparent 60%),
        radial-gradient(70% 40% at 50% 0%, rgba(96, 165, 250, 0.10), transparent 70%);
    transition: opacity 400ms ease;
}

/* Gradient hairline border (mask-composite ring) */
.content-card::after,
.content-card-2::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(160deg, rgba(148, 197, 255, 0.45) 0%, rgba(148, 197, 255, 0.10) 30%, rgba(34, 211, 238, 0.06) 70%, rgba(167, 139, 250, 0.30) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
    z-index: 0;
}

/* Decorative layers sit at z-index:-1 inside the card's own stacking
   context (isolation), i.e. above the card background but below all
   content — no need to touch children's positioning. */
.content-card,
.content-card-2 {
    isolation: isolate;
}

.content-card::before,
.content-card-2::before,
.content-card::after,
.content-card-2::after {
    z-index: -1;
}

/* Big sections should not bounce: kill the scroll "ease" jiggle and the
   whole-section hover lift; interaction lives on inner components. */
.content-card:hover,
.content-card-2:hover {
    transform: translateY(0);
    background:
        linear-gradient(180deg, rgba(20, 48, 108, 0.68) 0%, rgba(10, 26, 64, 0.76) 55%, rgba(6, 16, 42, 0.82) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        var(--hx-shadow-3);
}

.content-card.ease,
.content-card-2.ease {
    transform: translateY(0);
}

/* ---------------------------------------------------------------------
   4. Headings + text rhythm
   --------------------------------------------------------------------- */
.content-card h2,
.content-card-2 h2 {
    font-size: clamp(2rem, 1.3rem + 2.4vw, 3.3rem);
    font-weight: 700;
    letter-spacing: -0.038em;
    line-height: 1.08;
    margin-bottom: 1.25rem;
    background: var(--hx-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-wrap: balance;
}

/* accent rule under every section title */
.content-card h2::after,
.content-card-2 h2::after {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    margin: 1.05rem auto 0;
    border-radius: 3px;
    background: var(--hx-grad-accent);
    box-shadow: 0 0 18px rgba(34, 211, 238, 0.45);
}

body.japanese .content-card h2,
body.japanese .content-card-2 h2 {
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.content-card h3,
.content-card-2 h3 {
    font-size: clamp(1.15rem, 1rem + 0.7vw, 1.55rem);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.4;
    color: var(--hx-text-2);
    -webkit-text-fill-color: var(--hx-text-2);
    background: none;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    text-wrap: balance;
}

.content-card p,
.content-card-2 p {
    font-size: 1.075rem;
    line-height: 1.75;
    color: var(--hx-text-2);
    text-shadow: none;
    letter-spacing: 0;
}

.content-card p b,
.content-card p strong,
.content-card-2 p b,
.content-card-2 p strong {
    color: var(--hx-text-1);
    font-weight: 600;
}

/* inline text links inside cards (not buttons) get an animated underline */
.content-card p a:not(.demo-button),
.content-card-2 p a:not(.demo-button),
.faq-answer a {
    padding: 0;
    color: #9fd0ff;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 300ms var(--hx-ease-ui), color var(--hx-dur-ui) ease;
}

.content-card p a:not(.demo-button):hover,
.content-card-2 p a:not(.demo-button):hover,
.faq-answer a:hover {
    background-color: transparent;
    background-size: 100% 1px;
    color: #fff;
}

.section-dek {
    color: var(--hx-text-2) !important;
    -webkit-text-fill-color: var(--hx-text-2) !important;
    text-shadow: none;
}

/* ---------------------------------------------------------------------
   5. Buttons / CTAs
   --------------------------------------------------------------------- */
/* .hx-btn is new markup, so it can own its display; .demo-button's
   display is left alone because the usecase/lang visibility rules in
   styles.css toggle it with !important. */
.hx-btn {
    display: inline-flex;
}

.demo-button,
.content-card a.demo-button,
.content-card-2 a.demo-button,
.hx-btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.95rem 1.85rem;
    border: 0;
    border-radius: 999px;
    background: var(--hx-grad-brand);
    color: #fff;
    -webkit-text-fill-color: #fff;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(3, 10, 28, 0.25);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        var(--hx-glow-blue),
        0 2px 6px rgba(1, 6, 22, 0.35);
    transition:
        transform var(--hx-dur-ui) var(--hx-ease-ui),
        box-shadow 300ms var(--hx-ease-ui),
        filter var(--hx-dur-ui) ease;
    cursor: pointer;
}

/* light sweep */
.demo-button::after,
.hx-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.38) 50%, transparent 75%);
    transform: translateX(-130%);
    transition: transform 750ms var(--hx-ease-out);
}

.demo-button:hover,
.content-card a.demo-button:hover,
.content-card-2 a.demo-button:hover,
.hx-btn:hover {
    transform: translateY(-2px);
    background: var(--hx-grad-brand);
    background-color: transparent;
    filter: saturate(1.1) brightness(1.06);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        var(--hx-glow-cyan),
        0 4px 10px rgba(1, 6, 22, 0.35);
}

.demo-button:hover::after,
.hx-btn:hover::after {
    transform: translateX(130%);
}

.demo-button:active,
.hx-btn:active {
    transform: translateY(0) scale(0.98);
    transition-duration: 80ms;
}

/* arrow glyph nudges on hover */
.hx-btn .hx-btn__arrow {
    display: inline-block;
    transition: transform var(--hx-dur-ui) var(--hx-ease-ui);
}

.hx-btn:hover .hx-btn__arrow {
    transform: translateX(3px);
}

/* secondary / ghost */
.hx-btn--ghost {
    background: rgba(8, 22, 56, 0.45);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    box-shadow: inset 0 0 0 1px var(--hx-line-strong), inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--hx-shadow-1);
}

.hx-btn--ghost:hover {
    background: rgba(14, 34, 80, 0.6);
    box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 28px -10px rgba(34, 211, 238, 0.45);
}

.hero-cta-row {
    margin: 0.5rem auto 0;
}

.hero-cta {
    font-size: 0.98rem !important;
    padding: 0.9rem 1.8rem !important;
}

.survey-cta-btn {
    background: var(--hx-grad-brand) !important;
    border-radius: 999px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), var(--hx-glow-blue);
    transition: transform var(--hx-dur-ui) var(--hx-ease-ui), box-shadow 300ms var(--hx-ease-ui) !important;
}

.survey-cta-btn:hover {
    background: var(--hx-grad-brand) !important;
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), var(--hx-glow-cyan);
}

/* pill tabs (use case selector, case studies, FAQ) */
.usecase-selector {
    background: rgba(6, 16, 42, 0.55);
    border: 0;
    box-shadow: inset 0 0 0 1px var(--hx-line-strong), inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--hx-shadow-1);
    border-radius: 999px;
}

.usecase-option {
    border-radius: 999px;
    color: var(--hx-text-2);
    transition: background var(--hx-dur-ui) ease, color var(--hx-dur-ui) ease, box-shadow var(--hx-dur-ui) ease;
}

.usecase-option:hover {
    color: #fff;
    background: rgba(148, 190, 255, 0.10);
}

.usecase-option.active,
body.usecase-npo .usecase-option[data-usecase-option="npo"],
body.usecase-industry .usecase-option[data-usecase-option="industry"] {
    background: var(--hx-grad-brand);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 18px -6px rgba(59, 130, 246, 0.7);
}

.usecase-selector-caption {
    color: var(--hx-text-3);
    letter-spacing: 0.14em;
    font-weight: 600;
}

.case-tab-btn,
.faq-tab-btn {
    background: rgba(6, 16, 42, 0.45);
    border-color: var(--hx-line-strong);
    color: var(--hx-text-2);
    transition: background var(--hx-dur-ui) ease, color var(--hx-dur-ui) ease, border-color var(--hx-dur-ui) ease, transform var(--hx-dur-ui) var(--hx-ease-ui);
}

.case-tab-btn:hover,
.faq-tab-btn:hover {
    color: #fff;
    border-color: rgba(125, 211, 252, 0.55);
    transform: translateY(-1px);
}

.case-tab-btn.active,
.faq-tab-btn.active {
    background: var(--hx-grad-brand);
    border-color: transparent;
    box-shadow: 0 6px 18px -6px rgba(59, 130, 246, 0.7);
}

/* carousel arrows */
.carousel-nav-btn,
.screenshots-nav {
    background: rgba(6, 16, 42, 0.55);
    border-color: var(--hx-line-strong);
    transition: background var(--hx-dur-ui) ease, border-color var(--hx-dur-ui) ease, transform var(--hx-dur-ui) var(--hx-ease-ui), box-shadow var(--hx-dur-ui) ease;
}

.carousel-nav-btn:hover,
.screenshots-nav:hover {
    background: rgba(59, 130, 246, 0.35);
    border-color: rgba(125, 211, 252, 0.6);
    transform: scale(1.08);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
}

.carousel-progress-bar,
.screenshots-position-bar {
    background: var(--hx-grad-accent);
}

/* ---------------------------------------------------------------------
   6. Value-proposition cards (AI imagery)
   --------------------------------------------------------------------- */
.vp-grid {
    gap: 1.25rem;
}

.vp-card {
    --vp-img: none;
    background:
        linear-gradient(180deg, rgba(6, 16, 42, 0.66) 0%, rgba(6, 16, 42, 0.88) 70%),
        var(--vp-img) center / auto 112% no-repeat,
        #071434;
    border: 0;
    border-radius: 22px;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: inset 0 0 0 1px var(--hx-line-strong), inset 0 1px 0 rgba(255, 255, 255, 0.10), var(--hx-shadow-2);
    transition:
        transform 450ms var(--hx-ease-out),
        box-shadow 450ms var(--hx-ease-out),
        background-size 900ms var(--hx-ease-out);
}

.vp-card-speed    { --vp-img: url('assets/images/generated-ai/card-innovation-pipeline-01.webp'); }
.vp-card-cost     { --vp-img: url('assets/images/generated-ai/card-academia-industry-ecosystem-01.webp'); }
.vp-card-capacity { --vp-img: url('assets/images/generated-ai/card-organizational-network-01.webp'); }

/* top accent bar becomes the brand gradient */
.vp-card::before {
    height: 3px;
    background: var(--hx-grad-accent);
    opacity: 0.55;
}

.vp-card:hover {
    transform: translateY(-6px);
    background-size: 100% 100%, auto 124%, auto;
    box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.16), var(--hx-shadow-3), var(--hx-glow-cyan);
}

.vp-card:hover::before {
    opacity: 1;
}

.vp-card.active,
.vp-card.vp-card-speed.active,
.vp-card.vp-card-cost.active,
.vp-card.vp-card-capacity.active {
    background:
        linear-gradient(180deg, rgba(10, 30, 76, 0.50) 0%, rgba(6, 16, 42, 0.82) 70%),
        var(--vp-img) center / auto 124% no-repeat,
        #071434 !important;
    box-shadow: inset 0 0 0 1.5px rgba(125, 211, 252, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.2), var(--hx-shadow-3), var(--hx-glow-cyan) !important;
}

@media (min-width: 769px) {
    .vp-grid { align-items: stretch; }
    .vp-card-wrapper { display: flex; flex-direction: column; }
    .vp-card-wrapper > .vp-card { flex: 1 1 auto; }
}

.vp-number {
    font-size: clamp(3.2rem, 2.4rem + 2.6vw, 4.8rem);
    font-weight: 750;
    letter-spacing: -0.05em;
    font-variant-numeric: tabular-nums;
    background: var(--hx-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 6px 22px rgba(56, 189, 248, 0.35));
}

.vp-label {
    letter-spacing: 0.14em !important;
    font-weight: 700;
    color: #7dd3fc;
    -webkit-text-fill-color: #7dd3fc;
}

.vp-detail {
    color: var(--hx-text-1);
}

.vp-baseline {
    color: var(--hx-text-3);
}

.vp-explanation {
    border-radius: var(--hx-radius-md);
}

/* ---------------------------------------------------------------------
   7. About block, product card, misc components
   --------------------------------------------------------------------- */
.hero-about-block {
    max-width: 720px;
    padding: clamp(1.6rem, 1rem + 2.5vw, 2.8rem);
    overflow: hidden;
}

/* frosted glass stays translucent so the sticky pillars animation still
   glows through it (original intent); the AI accent image lives on
   ::after and is masked out towards the bottom so there is no seam. */
.hero-about-block::before {
    background: linear-gradient(180deg, rgba(10, 28, 70, 0.62) 0%, rgba(8, 22, 56, 0.72) 50%, rgba(6, 16, 42, 0.80) 100%);
    box-shadow: inset 0 0 0 1px var(--hx-line-strong), inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--hx-shadow-3);
}

.hero-about-block::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    aspect-ratio: 3 / 2;
    border-radius: inherit;
    background: url('assets/images/generated-ai/pillars-convergence-accent-01.webp') center top / cover no-repeat;
    opacity: 0.42;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.6) 45%, transparent 85%);
    mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.6) 45%, transparent 85%);
    z-index: -1;
    pointer-events: none;
}

.hero-about-eyebrow {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    color: #a5f3fc;
    background: rgba(34, 211, 238, 0.10);
    box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.35);
    letter-spacing: 0.16em;
    font-size: 0.72rem;
}

.hero-about-heading {
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem);
    letter-spacing: -0.03em;
    line-height: 1.18;
    background: var(--hx-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-wrap: balance;
}

.hero-about-body {
    color: var(--hx-text-2);
}

.hero-about-body strong {
    color: #7dd3fc;
}

/* "Leveraging academic potential" card gets the ecosystem image as a header band */
.content-card-2 {
    background:
        linear-gradient(180deg, rgba(6, 16, 42, 0.20) 0%, rgba(9, 24, 60, 0.86) 340px, rgba(6, 16, 42, 0.86) 100%),
        url('assets/images/generated-ai/card-academia-industry-ecosystem-01.webp') center top / 100% auto no-repeat,
        linear-gradient(180deg, rgba(18, 44, 100, 0.66) 0%, rgba(6, 16, 42, 0.80) 100%);
}

.content-card-2:hover {
    background:
        linear-gradient(180deg, rgba(6, 16, 42, 0.12) 0%, rgba(9, 24, 60, 0.86) 340px, rgba(6, 16, 42, 0.86) 100%),
        url('assets/images/generated-ai/card-academia-industry-ecosystem-01.webp') center top / 100% auto no-repeat,
        linear-gradient(180deg, rgba(20, 48, 108, 0.68) 0%, rgba(6, 16, 42, 0.82) 100%);
}

/* media frames: videos, screenshots, vision image */
.vision-video,
.content-card-2 iframe,
.screenshot-wrapper,
.blog-card-img {
    box-shadow: 0 0 0 1px var(--hx-line-strong), var(--hx-shadow-2) !important;
}

.vision-video {
    border-radius: 20px;
}

.vision-item {
    transition: transform var(--hx-dur-ui) var(--hx-ease-ui), background var(--hx-dur-ui) ease;
}

.vision-item b {
    color: #7dd3fc;
}

/* blog cards */
.blog-card {
    background: linear-gradient(180deg, rgba(10, 26, 64, 0.75), rgba(6, 16, 42, 0.9));
    border: 0;
    box-shadow: inset 0 0 0 1px var(--hx-line), var(--hx-shadow-2);
    transition: transform 450ms var(--hx-ease-out), box-shadow 450ms var(--hx-ease-out);
}

.blog-card::before {
    animation: none;
    opacity: 0;
}

.blog-card .blog-card-img {
    transition: transform 900ms var(--hx-ease-out), filter 600ms ease;
    box-shadow: none !important;
}

.blog-card:hover {
    transform: translateY(-6px);
    box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.5), var(--hx-shadow-3), var(--hx-glow-cyan);
}

.blog-card:hover .blog-card-img {
    transform: scale(1.05);
    filter: saturate(1.15);
}

/* link copy already ends in "→"; nudge the whole link instead of adding one */
.blog-read-link {
    transition: transform var(--hx-dur-ui) var(--hx-ease-ui), color var(--hx-dur-ui) ease !important;
}

.blog-card:hover .blog-read-link,
.blog-read-link:hover {
    transform: translateX(4px);
    color: #a5f3fc !important;
    -webkit-text-fill-color: #a5f3fc !important;
    text-decoration: none !important;
}

/* case studies / quotes */
.case-study-card {
    background: rgba(6, 16, 42, 0.45) !important;
    border: 0 !important;
    box-shadow: inset 0 0 0 1px var(--hx-line), var(--hx-shadow-1);
    border-radius: 20px !important;
}

.case-study-quote,
.blog-midfunnel-cta {
    border-left-color: var(--hx-cyan);
    background: linear-gradient(90deg, rgba(34, 211, 238, 0.10), rgba(34, 211, 238, 0.02));
}

.survey-cta-block {
    background:
        radial-gradient(80% 120% at 50% 0%, rgba(34, 211, 238, 0.14), transparent 70%),
        linear-gradient(135deg, rgba(59, 130, 246, 0.14), rgba(59, 130, 246, 0.04));
    border-color: rgba(125, 211, 252, 0.3);
    border-radius: 22px;
}

.survey-cta-eyebrow {
    color: #7dd3fc;
    font-weight: 700;
}

/* FAQ */
.faq-item {
    border-bottom-color: var(--hx-line);
    transition: background var(--hx-dur-ui) ease;
}

.faq-item summary {
    transition: color var(--hx-dur-ui) ease, padding-left 300ms var(--hx-ease-ui);
    color: var(--hx-text-1);
    -webkit-text-fill-color: var(--hx-text-1);
}

.faq-item summary:hover {
    color: #a5f3fc;
    -webkit-text-fill-color: #a5f3fc;
    padding-left: 0.35rem;
}

.faq-item summary::after {
    content: '+';
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #7dd3fc;
    -webkit-text-fill-color: #7dd3fc;
    background: rgba(59, 130, 246, 0.12);
    box-shadow: inset 0 0 0 1px var(--hx-line-strong);
    transition: transform 350ms var(--hx-ease-out), background var(--hx-dur-ui) ease;
}

.faq-item[open] summary::after {
    content: '+';
    transform: translateY(-50%) rotate(45deg);
    background: rgba(34, 211, 238, 0.2);
}

.faq-answer {
    color: var(--hx-text-2);
    font-size: 0.98rem;
    line-height: 1.7;
}

/* team + partners */
.team-image {
    box-shadow: 0 0 0 2px rgba(148, 190, 255, 0.25), var(--hx-shadow-2);
    transition: transform 450ms var(--hx-ease-out), box-shadow 450ms var(--hx-ease-out);
}

.team-table td:hover .team-image,
.team-table td a:hover .team-image {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.8), 0 0 0 7px rgba(34, 211, 238, 0.12), var(--hx-shadow-3);
}

.job-title {
    color: var(--hx-text-3);
    letter-spacing: 0.01em;
}

.partner {
    border-radius: 20px;
    transition: transform 450ms var(--hx-ease-out), box-shadow 450ms var(--hx-ease-out), background var(--hx-dur-ui) ease;
}

.partner:hover {
    transform: translateY(-5px);
    box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.4), var(--hx-shadow-2);
}

/* testimonials */
.testimonial-content {
    border-radius: 22px;
}

/* ---------------------------------------------------------------------
   8. Scroll reveal + progress bar
   --------------------------------------------------------------------- */
/* Only hide-before-reveal when the enhancement script is running
   (html.hx-js is set synchronously in <head>), so no-JS visitors and
   crawlers always see content. */
html.hx-js .content-card:not(.in-view),
html.hx-js .content-card-2:not(.in-view) {
    opacity: 0;
    transform: translateY(48px) scale(0.985);
    filter: blur(4px);
}

html.hx-js .content-card.in-view,
html.hx-js .content-card-2.in-view {
    opacity: 1;
    transform: none;
    filter: none;
}

/* child-level stagger for grids inside revealed cards */
html.hx-js .hx-stagger > * {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 800ms var(--hx-ease-out), transform 800ms var(--hx-ease-out);
    transition-delay: calc(var(--hx-i, 0) * 90ms);
}

html.hx-js .in-view .hx-stagger > *,
html.hx-js .hx-stagger.in-view > * {
    opacity: 1;
    transform: none;
}

.hx-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 1300;
    pointer-events: none;
    background: var(--hx-grad-accent);
    transform-origin: 0 50%;
    transform: scaleX(var(--hx-progress, 0));
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.6);
}

/* ---------------------------------------------------------------------
   9. Footer, back-to-top, focus states
   --------------------------------------------------------------------- */
.site-footer {
    position: relative;
    background: linear-gradient(180deg, transparent, rgba(3, 10, 28, 0.65));
}

.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(125, 211, 252, 0.5), transparent);
}

.site-footer a {
    transition: color var(--hx-dur-ui) ease;
}

.site-footer a:hover {
    color: #a5f3fc;
}

.back-to-top {
    background: rgba(6, 16, 42, 0.6);
    border: 0;
    box-shadow: inset 0 0 0 1px var(--hx-line-strong), var(--hx-shadow-2);
    transition: transform var(--hx-dur-ui) var(--hx-ease-ui), box-shadow var(--hx-dur-ui) ease, background var(--hx-dur-ui) ease;
}

.back-to-top:hover {
    background: var(--hx-grad-brand);
    transform: translateY(-3px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), var(--hx-glow-cyan);
}

/* Visible, consistent keyboard focus everywhere */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #67e8f9;
    outline-offset: 3px;
    border-radius: 10px;
}

.demo-button:focus-visible,
.hx-btn:focus-visible,
.usecase-option:focus-visible {
    outline: 2px solid #67e8f9;
    outline-offset: 3px;
    border-radius: 999px;
}

/* ---------------------------------------------------------------------
   10. Responsive + reduced motion
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
    .hx-hero {
        min-height: auto;
        padding-top: calc(var(--site-header-height, 60px) + 3rem);
        padding-bottom: 5rem;
    }
}

@media (max-width: 600px) {
    .hx-hero {
        padding-left: 1.1rem;
        padding-right: 1.1rem;
    }

    .hx-hero__media img {
        object-position: 50% 70%;
    }

    .hx-eyebrow {
        font-size: 0.7rem;
        letter-spacing: 0.02em;
    }

    .hx-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 320px;
    }

    .hx-actions .hx-btn {
        justify-content: center;
    }

    .hx-stats {
        margin-top: 2.4rem;
    }

    .hx-stat {
        padding: 0.8rem 0.35rem;
    }

    .hx-stat__label {
        font-size: 0.62rem;
        letter-spacing: 0.08em;
    }

    .hx-scroll-cue {
        display: none;
    }

    .content-card,
    .content-card-2 {
        border-radius: 22px;
    }

    .content-card h2::after,
    .content-card-2 h2::after {
        margin-top: 0.8rem;
        width: 44px;
    }

    .demo-button,
    .content-card a.demo-button,
    .content-card-2 a.demo-button {
        padding: 0.85rem 1.4rem;
        font-size: 0.95rem;
    }
}

@media (hover: none) {
    /* no sticky hover states on touch */
    .vp-card:hover,
    .blog-card:hover,
    .partner:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hx-hero__media img,
    .hx-rise {
        animation: none;
        opacity: 1;
        transform: none;
        filter: none;
    }

    .hx-hero__aurora,
    .hx-eyebrow__dot,
    .hx-scroll-cue::before,
    .hx-title .hx-title__accent {
        animation: none;
    }

    html.hx-js .content-card:not(.in-view),
    html.hx-js .content-card-2:not(.in-view),
    html.hx-js .hx-stagger > * {
        opacity: 1;
        transform: none;
        filter: none;
    }

    .demo-button::after,
    .hx-btn::after {
        display: none;
    }
}

/* =====================================================================
   11. Motion polish v2 (2026-09-26b)
   ---------------------------------------------------------------------
   Appended layer — overrides only. Principles:
     - animate transform/opacity only (compositor), never layout props
     - every curve is a named cubic-bezier token below
     - will-change only on elements that are about to move, released after
     - everything collapses to static under prefers-reduced-motion
   ===================================================================== */
:root {
    --hx-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);     /* reveals, large moves   */
    --hx-ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);    /* UI feedback            */
    --hx-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);      /* loops, morphs          */
    --hx-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* tiny overshoot: micro  */
    --hx-ease-emph: cubic-bezier(0.2, 0, 0, 1);            /* emphasized decelerate  */
}

/* ---- 11.1 Scroll reveal: cheaper + cascading ------------------------- */
/* filter:blur() on a backdrop-filtered card forces an offscreen pass per
   frame and disables the glass while it animates — drop it and let
   transform+opacity carry the reveal. */
html.hx-js .content-card:not(.in-view),
html.hx-js .content-card-2:not(.in-view) {
    filter: none;
    transform: translate3d(0, 44px, 0) scale(0.985);
    will-change: opacity, transform;
}

html.hx-js .content-card.in-view,
html.hx-js .content-card-2.in-view {
    transition:
        transform 1100ms var(--hx-ease-out-expo),
        opacity 900ms var(--hx-ease-out-expo),
        box-shadow 400ms var(--hx-ease-out-quart);
}

/* heading + dek cascade in just after their card */
html.hx-js .content-card > h2,
html.hx-js .content-card-2 > h2,
html.hx-js .content-card > h3,
html.hx-js .content-card-2 > h3 {
    transition:
        opacity 900ms var(--hx-ease-out-expo),
        transform 1000ms var(--hx-ease-out-expo);
}

html.hx-js .content-card:not(.in-view) > h2,
html.hx-js .content-card-2:not(.in-view) > h2,
html.hx-js .content-card:not(.in-view) > h3,
html.hx-js .content-card-2:not(.in-view) > h3 {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
}

html.hx-js .content-card.in-view > h2,
html.hx-js .content-card-2.in-view > h2 { transition-delay: 120ms; }
html.hx-js .content-card.in-view > h3,
html.hx-js .content-card-2.in-view > h3 { transition-delay: 220ms; }

/* accent rule under section titles draws itself outward on reveal */
html.hx-js .content-card h2::after,
html.hx-js .content-card-2 h2::after {
    transform: scaleX(0);
    transform-origin: 50% 50%;
    transition: transform 1200ms var(--hx-ease-out-expo) 380ms;
}

html.hx-js .content-card.in-view h2::after,
html.hx-js .content-card-2.in-view h2::after {
    transform: scaleX(1);
}

/* grid children: a slightly longer, softer cascade */
html.hx-js .hx-stagger > * {
    transform: translate3d(0, 24px, 0);
    transition:
        opacity 900ms var(--hx-ease-out-expo),
        transform 1000ms var(--hx-ease-out-expo);
    transition-delay: calc(var(--hx-i, 0) * 80ms + 120ms);
}

html.hx-js .in-view .hx-stagger > *,
html.hx-js .hx-stagger.in-view > * {
    transform: none;
}

/* ---- 11.2 Hero depth ------------------------------------------------- */
/* draft-enhance.js drifts the headline block up slightly slower than the
   page and fades it as the hero leaves — layered depth against the
   parallaxed AI image behind it. */
.hx-hero__inner {
    transform: translate3d(0, var(--hx-hero-shift, 0px), 0);
    opacity: var(--hx-hero-fade, 1);
}

.hx-hero .logo {
    /* was: blur-in + an infinite 1% scale "pulse" that re-rasterised the
       logo every frame and read as jitter */
    animation: hxLogoIn 1.2s var(--hx-ease-out-expo) 0.05s both;
}

@keyframes hxLogoIn {
    from { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.97); }
    to   { opacity: 1; transform: none; }
}

.hx-rise {
    transform: translate3d(0, 18px, 0);
    animation-duration: 1.1s;
    animation-timing-function: var(--hx-ease-out-expo);
    animation-delay: calc(var(--hx-i, 0) * 85ms + 120ms);
}

/* eyebrow status dot: soft breathing halo instead of a hard ping */
.hx-eyebrow__dot {
    position: relative;
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.7);
    animation: none;
}

.hx-eyebrow__dot::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.55) 0%, rgba(34, 211, 238, 0) 70%);
    animation: hxBreath 3.2s var(--hx-ease-in-out) infinite;
    will-change: transform, opacity;
}

@keyframes hxBreath {
    0%, 100% { transform: scale(0.6); opacity: 0.25; }
    50%      { transform: scale(1.35); opacity: 1; }
}

/* scroll cue: dot glides with an in-out curve and a soft glow */
.hx-scroll-cue::before {
    box-shadow: 0 0 8px rgba(34, 211, 238, 0.8);
    animation: hxScrollDot2 2.2s var(--hx-ease-in-out) infinite;
}

@keyframes hxScrollDot2 {
    0%   { transform: translate3d(0, 0, 0); opacity: 0; }
    18%  { opacity: 1; }
    70%  { transform: translate3d(0, 15px, 0); opacity: 0; }
    100% { transform: translate3d(0, 15px, 0); opacity: 0; }
}

/* pillars orbit: own paint/layout scope + a soft light pool under it */
.hero-pillars-visual {
    contain: layout paint;
}

.hero-pillars-visual::before {
    content: '';
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(59, 130, 246, 0.16), rgba(34, 211, 238, 0.05) 55%, transparent 100%);
    pointer-events: none;
}

/* ---- 11.3 Cards: depth + tactile hover ------------------------------- */
/* vp cards: pointer-driven 3D tilt (vars set by draft-enhance.js on fine
   pointers only) layered on the existing lift */
.vp-card {
    --hx-rx: 0deg;
    --hx-ry: 0deg;
    --hx-lift: 0px;
    transform: perspective(1100px) rotateX(var(--hx-rx)) rotateY(var(--hx-ry)) translate3d(0, var(--hx-lift), 0);
    transition:
        transform 600ms var(--hx-ease-out-expo),
        box-shadow 500ms var(--hx-ease-out-expo),
        background-size 1100ms var(--hx-ease-out-expo);
}

.vp-card:hover {
    --hx-lift: -6px;
    transform: perspective(1100px) rotateX(var(--hx-rx)) rotateY(var(--hx-ry)) translate3d(0, var(--hx-lift), 0);
    will-change: transform;
}

.vp-card.active {
    --hx-lift: -2px;
    transform: perspective(1100px) rotateX(var(--hx-rx)) rotateY(var(--hx-ry)) translate3d(0, var(--hx-lift), 0);
}

@media (hover: none) {
    .vp-card:hover,
    .blog-card:hover {
        --hx-lift: 0px;
        transform: none;
    }
}

.vp-card.hx-tilting {
    transition:
        transform 160ms var(--hx-ease-out-quart),
        box-shadow 500ms var(--hx-ease-out-expo),
        background-size 1100ms var(--hx-ease-out-expo);
}

/* layered, coloured contact shadow for lifted cards */
.vp-card:hover,
.blog-card:hover {
    box-shadow:
        inset 0 0 0 1px rgba(125, 211, 252, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 1px 2px rgba(1, 6, 22, 0.25),
        0 6px 12px -2px rgba(1, 6, 22, 0.30),
        0 22px 44px -12px rgba(1, 6, 22, 0.55),
        0 40px 80px -24px rgba(21, 101, 192, 0.45),
        0 18px 50px -18px rgba(34, 211, 238, 0.55);
}

.partner,
.team-image {
    transition:
        transform 600ms var(--hx-ease-out-expo),
        box-shadow 600ms var(--hx-ease-out-expo),
        background 220ms ease;
}

/* ---- 11.4 Buttons: spring + ripple ----------------------------------- */
.demo-button,
.content-card a.demo-button,
.content-card-2 a.demo-button,
.hx-btn {
    transition:
        transform 420ms var(--hx-ease-spring),
        box-shadow 420ms var(--hx-ease-out-expo),
        filter 220ms ease;
}

.hx-btn .hx-btn__arrow {
    transition: transform 420ms var(--hx-ease-spring);
}

.hx-btn:hover .hx-btn__arrow {
    transform: translate3d(4px, 0, 0);
}

.usecase-option,
.case-tab-btn,
.faq-tab-btn {
    transition:
        background 260ms var(--hx-ease-out-quart),
        color 200ms ease,
        border-color 200ms ease,
        box-shadow 260ms var(--hx-ease-out-quart),
        transform 380ms var(--hx-ease-spring);
}

.usecase-option:active,
.case-tab-btn:active,
.faq-tab-btn:active {
    transform: scale(0.96);
    transition-duration: 90ms;
}

/* ripple host: draft-enhance.js adds .hx-ripple-host to interactive pills */
.hx-ripple-host {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.hx-ripple {
    position: absolute;
    left: 0;
    top: 0;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.16) 45%, rgba(255, 255, 255, 0) 70%);
    transform: translate3d(var(--x, 0), var(--y, 0), 0) scale(0);
    animation: hxRipple 700ms var(--hx-ease-out-expo) forwards;
    will-change: transform, opacity;
}

@keyframes hxRipple {
    0%   { transform: translate3d(var(--x, 0), var(--y, 0), 0) scale(0); opacity: 1; }
    100% { transform: translate3d(var(--x, 0), var(--y, 0), 0) scale(var(--s, 30)); opacity: 0; }
}

.back-to-top {
    transition:
        transform 420ms var(--hx-ease-spring),
        box-shadow 300ms ease,
        background 300ms ease,
        opacity 400ms var(--hx-ease-out-expo),
        visibility 400ms;
}

.carousel-nav-btn,
.screenshots-nav {
    transition:
        background 240ms ease,
        border-color 240ms ease,
        transform 420ms var(--hx-ease-spring),
        box-shadow 300ms ease;
}

.carousel-nav-btn:active,
.screenshots-nav:active {
    transform: scale(0.94);
    transition-duration: 90ms;
}

/* ---- 11.5 Retire dated loops ----------------------------------------- */
/* typewriter caret: smooth fade instead of a hard 1-bit strobe */
.screenshot-caption.cursor-visible::after,
.vision-item.cursor-visible::after {
    animation: hxCaret 1.1s var(--hx-ease-in-out) infinite;
}

@keyframes hxCaret {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.1; }
}

/* vision image: slow float instead of an opacity "blink" */
.vision-image-container img {
    animation: hxFloat 9s var(--hx-ease-in-out) infinite;
}

@keyframes hxFloat {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, -6px, 0); }
}

/* LinkedIn icons: no perpetual pulse; spring lift on hover */
.linkedin-container img {
    animation: none;
    transition: transform 420ms var(--hx-ease-spring), filter 220ms ease;
}

.linkedin-container img:hover {
    transform: translate3d(0, -2px, 0) scale(1.15);
    filter: drop-shadow(0 4px 12px rgba(34, 211, 238, 0.55));
}

/* FAQ disclosure: expand icon uses spring rotation */
.faq-item summary::after {
    transition: transform 480ms var(--hx-ease-spring), background 220ms ease;
}

.hx-progress {
    will-change: transform;
}

/* ---- 11.5b Beat the inline <style> block in index.html ---------------- */
/* index.html's inline styles load after this sheet, so equal-specificity
   rules there were silently winning. `body` adds one type selector of
   specificity — enough to win without !important. */

/* Blog cards: the inline ::before ran an infinite 220%-size blur(30px)
   "shimmer" on every card; its keyframes animate opacity, which defeated
   the redesign's opacity:0 — an invisible but constantly re-blurred GPU
   layer per card. Remove it outright. */
body .blog-card::before {
    animation: none;
    display: none;
}

body .blog-card {
    transition:
        transform 600ms var(--hx-ease-out-expo),
        box-shadow 600ms var(--hx-ease-out-expo);
}

body .blog-card:hover {
    transform: translate3d(0, -6px, 0);
    border-color: transparent;
    box-shadow:
        inset 0 0 0 1px rgba(125, 211, 252, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 1px 2px rgba(1, 6, 22, 0.25),
        0 6px 12px -2px rgba(1, 6, 22, 0.30),
        0 22px 44px -12px rgba(1, 6, 22, 0.55),
        0 40px 80px -24px rgba(21, 101, 192, 0.45),
        0 18px 50px -18px rgba(34, 211, 238, 0.55);
}

/* Pill tabs: the inline `transition: all 0.2s` + flat #4f9ef7 active state
   replaced the redesign's gradient pills — restore them with real curves. */
body .case-tab-btn,
body .faq-tab-btn {
    background: rgba(6, 16, 42, 0.45);
    border-color: var(--hx-line-strong);
    color: var(--hx-text-2);
    transition:
        background 260ms var(--hx-ease-out-quart),
        color 200ms ease,
        border-color 200ms ease,
        box-shadow 260ms var(--hx-ease-out-quart),
        transform 380ms var(--hx-ease-spring);
}

body .case-tab-btn:hover,
body .faq-tab-btn:hover {
    color: #fff;
    border-color: rgba(125, 211, 252, 0.55);
    transform: translate3d(0, -1px, 0);
}

body .case-tab-btn.active,
body .faq-tab-btn.active {
    background: var(--hx-grad-brand);
    border-color: transparent;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 18px -6px rgba(59, 130, 246, 0.7);
}

body .case-tab-btn:active,
body .faq-tab-btn:active {
    transform: scale(0.96);
    transition-duration: 90ms;
}

body .carousel-nav-btn {
    background: rgba(6, 16, 42, 0.55);
    border-color: var(--hx-line-strong);
    transition:
        background 240ms ease,
        border-color 240ms ease,
        opacity 240ms ease,
        transform 420ms var(--hx-ease-spring),
        box-shadow 300ms ease;
}

body .carousel-nav-btn:hover {
    background: rgba(59, 130, 246, 0.35);
    border-color: rgba(125, 211, 252, 0.6);
    transform: scale(1.08);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
}

body .carousel-nav-btn:active {
    transform: scale(0.94);
    transition-duration: 90ms;
}

/* ---- 11.6 Reduced motion --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    /* re-assert the section-10 resets, which this later layer would
       otherwise out-cascade */
    .hx-rise {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .hx-scroll-cue::before {
        animation: none;
    }

    html.hx-js .content-card:not(.in-view),
    html.hx-js .content-card-2:not(.in-view),
    html.hx-js .hx-stagger > * {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }

    .vp-card.active {
        transform: none;
    }

    .hx-hero .logo {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .hx-hero__inner {
        transform: none;
        opacity: 1;
    }

    html.hx-js .content-card:not(.in-view) > h2,
    html.hx-js .content-card-2:not(.in-view) > h2,
    html.hx-js .content-card:not(.in-view) > h3,
    html.hx-js .content-card-2:not(.in-view) > h3 {
        opacity: 1;
        transform: none;
    }

    html.hx-js .content-card h2::after,
    html.hx-js .content-card-2 h2::after {
        transform: none;
        transition: none;
    }

    html.hx-js .content-card:not(.in-view),
    html.hx-js .content-card-2:not(.in-view) {
        will-change: auto;
    }

    .hx-eyebrow__dot::after,
    .vision-image-container img,
    .screenshot-caption.cursor-visible::after,
    .vision-item.cursor-visible::after {
        animation: none;
    }

    .vp-card,
    .vp-card:hover {
        transform: none;
    }

    .hx-ripple {
        display: none;
    }

    /* legacy infinite loops that previously ignored the preference.
       The "Why 15Blue" breakdown spinners (.anim-rotate-cw/-ccw, .bd-orb)
       are deliberately NOT listed: they run for everyone (2026-10-04). */
    .vision-item,
    .screenshot-wrapper::after,
    .screenshot-wrapper::before {
        animation: none !important;
    }

    body .blog-card:hover,
    body .case-tab-btn:hover,
    body .carousel-nav-btn:hover {
        transform: none;
    }
}

/* ── Streamlined copy (2026-09-26): FAQ groups + inline FAQ references ── */
.faq-section .faq-intro {
    text-align: center;
    color: var(--hx-text-3);
    font-size: 0.98rem;
    margin: -0.25rem auto 1.75rem;
    max-width: 560px;
}

.faq-group {
    max-width: 820px;
    margin: 0 auto 2rem;
}

.content-card .faq-group-title {
    text-align: left;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7dd3fc;
    -webkit-text-fill-color: #7dd3fc;
    background: none;
    margin: 0 0 0.35rem;
    max-width: none;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--hx-line);
}

body.japanese .content-card .faq-group-title {
    letter-spacing: 0.06em;
    text-transform: none;
}

.faq-group-audience .faq-group-title {
    margin-bottom: 1rem;
}

.faq-group-audience .faq-tabs {
    margin-bottom: 0.75rem;
}

.faq-item {
    scroll-margin-top: 120px;
}

.faq-group-title .brand-15blue {
    text-transform: none;
    letter-spacing: 0.02em;
}

.faq-item:target summary {
    color: #a5f3fc;
    -webkit-text-fill-color: #a5f3fc;
}

a.faq-ref {
    display: inline-block;
    margin-left: 0.4em;
    font-size: 0.9em;
    font-weight: 600;
    color: #7dd3fc;
    -webkit-text-fill-color: #7dd3fc;
    text-decoration: none;
    border-bottom: 1px dashed rgba(125, 211, 252, 0.55);
    transition: color var(--hx-dur-ui, 200ms) ease, border-color var(--hx-dur-ui, 200ms) ease;
}

a.faq-ref::after {
    content: ' →';
}

a.faq-ref:hover,
a.faq-ref:focus-visible {
    color: #a5f3fc;
    -webkit-text-fill-color: #a5f3fc;
    border-bottom-color: #a5f3fc;
}

@media (max-width: 700px) {
    .faq-group {
        margin-bottom: 1.5rem;
    }

    a.faq-ref {
        display: block;
        margin: 0.4rem 0 0;
    }
}

/* =====================================================================
   POLISH 2026-09-26 (h): mobile header logo hand-off, hero logo glow,
   "Why 15Blue" contrast. Appended last so it wins the cascade; the
   About-block rules use #about because index.html's inline <style>
   (loaded after this file) styles .hero-about-block at equal specificity.
   ===================================================================== */

/* ---- 1. Mobile: header logo hidden over the hero, fades in past it ----
   scripts.js toggles html.hx-past-hero once the user scrolls 80% of the
   way through .hx-hero. Gated on html.hx-js (set inline in <head>) so the
   logo never flashes in before the script runs; without JS it simply
   stays visible. Opacity + visibility only: no layout shift, and the
   hidden link drops out of the tab order. */
@media (max-width: 768px) {
    html.hx-js .site-header__logo {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
            opacity 350ms cubic-bezier(0.25, 1, 0.5, 1),
            visibility 0s linear 350ms;
    }

    html.hx-js.hx-past-hero .site-header__logo,
    html.hx-js .site-header.is-open .site-header__logo {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition:
            opacity 350ms cubic-bezier(0.25, 1, 0.5, 1),
            visibility 0s linear 0s;
    }
}

/* ---- 2. Hero logo: ~27% larger + slow breathing glow ----
   The SVG is a 3.37:1 wordmark, so "larger" is expressed as height:
   44px -> 56px on phones, 64px -> 82px on desktop. width:auto makes the
   box hug the painted glyphs (the legacy mobile .logo rule forced a wide
   letterboxed box), so the glow layers line up with the letters.
   Glow = two composited layers animated on opacity/transform only
   (no per-frame filter re-rasterisation, which read as jitter before):
     ::before  soft blue/cyan halo behind the wordmark
     ::after   "internal" light: a gradient masked to the logo's own
               shape, screened over the letters so they glow from within */
.hx-hero .logo-container {
    position: relative;
    isolation: isolate;
    margin: 0 0 1.8rem;
}

.hx-hero .logo {
    display: block;
    width: auto;
    height: clamp(56px, 30px + 4.2vw, 82px);
    filter: drop-shadow(0 0 18px rgba(59, 130, 246, 0.42)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.55));
}

.hx-hero .logo-container::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 150%;
    height: 280%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(59, 130, 246, 0.50) 0%, rgba(34, 211, 238, 0.16) 55%, rgba(34, 211, 238, 0) 100%);
    transform: translate3d(-50%, -50%, 0) scale(0.92);
    opacity: 0.3;
    z-index: -1;
    pointer-events: none;
    animation: hxLogoBreathe 4.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    will-change: opacity, transform;
}

.hx-hero .logo-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 120% at 50% 40%, rgba(255, 255, 255, 0.95) 0%, rgba(165, 243, 252, 0.75) 45%, rgba(96, 165, 250, 0.35) 100%);
    -webkit-mask: url('logo_15Blue_01_blue.svg') center / contain no-repeat;
    mask: url('logo_15Blue_01_blue.svg') center / contain no-repeat;
    mix-blend-mode: screen;
    opacity: 0;
    pointer-events: none;
    animation: hxLogoInnerGlow 4.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    will-change: opacity;
}

@keyframes hxLogoBreathe {
    0%, 100% { opacity: 0.3; transform: translate3d(-50%, -50%, 0) scale(0.92); }
    50%      { opacity: 1;   transform: translate3d(-50%, -50%, 0) scale(1.04); }
}

@keyframes hxLogoInnerGlow {
    0%, 100% { opacity: 0; }
    50%      { opacity: 0.32; }
}

/* ---- 3. "Why 15Blue" card: higher contrast, accent edge, text depth ----
   Darker, more opaque glass (the pillars bulb still glows through the
   blur, just no longer washes out the copy), a brand-blue accent edge,
   a solid eyebrow pill (the bulb light was blooming right behind it),
   and soft shadows under the text. The heading uses gradient-clipped
   text, where text-shadow would bleed through the transparent fill, so
   it gets filter: drop-shadow() instead. */
#about.hero-about-block::before {
    background: linear-gradient(
        180deg,
        rgba(8, 26, 66, 0.84) 0%,
        rgba(6, 20, 54, 0.88) 50%,
        rgba(5, 14, 40, 0.92) 100%
    );
    box-shadow:
        inset 3px 0 0 rgba(59, 130, 246, 0.55),
        inset 0 0 0 1px rgba(148, 190, 255, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 18px 48px -12px rgba(1, 6, 22, 0.75),
        0 0 0 1px rgba(59, 130, 246, 0.10);
}

#about.hero-about-block::after {
    opacity: 0.28;
}

#about .hero-about-eyebrow {
    color: #cffafe;
    background: rgba(5, 18, 46, 0.88);
    box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.55), 0 0 18px rgba(34, 211, 238, 0.18);
    text-shadow: 0 0 10px rgba(34, 211, 238, 0.45);
}

#about .hero-about-heading {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}

#about .hero-about-body {
    color: #dfe8f7;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

#about .hero-about-body strong {
    color: #8fdcff;
}

#about .hero-about-body-closer {
    color: #ffffff;
}

/* ---- Reduced motion: no breathing, no fades ---- */
@media (prefers-reduced-motion: reduce) {
    .hx-hero .logo-container::before {
        animation: none;
        opacity: 0.7;
        transform: translate3d(-50%, -50%, 0);
    }

    .hx-hero .logo-container::after {
        animation: none;
        opacity: 0;
    }

    /* instant show/hide (covers every state selector above) */
    html.hx-js .site-header__logo {
        transition: none !important;
    }
}

/* =====================================================================
   Battery / CPU pass (2026-09-26j) — no visual change intended
   ===================================================================== */

/* Off-screen blocks (scripts.js toggles .hx-offscreen via
   IntersectionObserver, 200px margin): freeze their CSS loops. Paused, not
   removed, so they resume from the same frame when scrolled back. */
.hx-offscreen,
.hx-offscreen::before,
.hx-offscreen::after,
.hx-offscreen *,
.hx-offscreen *::before,
.hx-offscreen *::after {
    animation-play-state: paused !important;
}

/* Invisible-by-design items still animating on screen:
   - only .vision-visible is shown (others are opacity:0), yet all six ran
     an infinite background-position shift on clipped text = a main-thread
     repaint per item per frame;
   - only the .active screenshot slide is shown (others opacity:0), yet
     every slide's film-grain overlay kept stepping. */
.vision-item:not(.vision-visible),
.screenshot-slide:not(.active) .screenshot-wrapper::before,
.screenshot-slide:not(.active) .screenshot-wrapper::after {
    animation-play-state: paused;
}

/* Ambient network canvas: size to the LARGE viewport so the mobile URL bar
   collapsing/expanding doesn't resize the full-screen canvas box (scripts.js
   now skips the bitmap reallocation when the box is unchanged). The canvas
   is scale(1.2)'d past the edges already, so the few extra px are unseen. */
@supports (height: 100lvh) {
    #nodesCanvas {
        height: 100lvh;
    }
}