.scroll-in-logo-grid-container .logo-grid-title{text-align:center;font-size:2.5rem;font-weight:700;margin-bottom:16px;color:var(--text)}.scroll-in-logo-grid-container .logo-grid-subtitle{text-align:center;font-size:1.2rem;color:var(--muted);max-width:700px;margin:0 auto 50px;line-height:1.5}.logo-grid{display:grid;grid-template-columns:repeat(var(--columns, 4),1fr);gap:1px;background:var(--line);border:1px solid var(--line);max-width:1200px;margin:0 auto}.logo-grid .logo-item{min-height:150px;opacity:0;transition:transform .3s ease,opacity .3s ease}.logo-grid .logo-item.slide-up{transform:translateY(50px)}.logo-grid .logo-item.slide-up.animate{transform:translateY(0);opacity:1}.logo-grid .logo-item.slide-left{transform:translate(50px)}.logo-grid .logo-item.slide-left.animate{transform:translate(0);opacity:1}.logo-grid .logo-item.slide-right{transform:translate(-50px)}.logo-grid .logo-item.slide-right.animate{transform:translate(0);opacity:1}.logo-grid .logo-item.fade{transform:scale(.95)}.logo-grid .logo-item.fade.animate{transform:scale(1);opacity:1}.logo-card{position:relative;background:var(--cell-bg);border-radius:0;padding:30px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;transition:background-color .3s}.logo-card:hover{background:var(--cell-bg-hover)}.logo-card:hover .logo-name{opacity:1}.logo-card:hover img{transform:scale(1.05)}.logo-card img{max-width:70%;max-height:70px;object-fit:contain;margin-bottom:15px;transition:transform .3s,filter .3s}.logo-card .logo-name{opacity:0;font-family:Fragment Mono,SF Mono,monospace;font-size:.625rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;transition:opacity .3s;text-align:center;position:absolute;color:var(--muted);bottom:.6em}.logo-carousel{max-width:100%;margin:0 auto;padding:0 20px;display:none;position:relative}.logo-carousel .logo-name{opacity:1;font-family:Fragment Mono,SF Mono,monospace;font-size:.6875rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;text-align:center;color:var(--muted);margin-top:12px;width:100%}.logo-carousel .carousel-container{overflow:hidden;width:100%;max-width:300px;margin:0 auto}.logo-carousel .carousel-track{display:flex;transition:transform .5s ease;width:100%}.logo-carousel .carousel-item{min-width:100%;flex:0 0 100%;padding:20px}.logo-carousel .carousel-item .logo-card{margin:0 auto;max-width:100%;height:150px;border:1px solid var(--line)}.logo-carousel .carousel-nav{position:absolute;top:50%;transform:translateY(-50%);background:transparent;color:var(--text);width:40px;height:40px;border-radius:0;border:1px solid var(--line-strong);font-size:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10;transition:background-color .3s,color .3s}.logo-carousel .carousel-nav:hover{background:var(--text);color:var(--bg)}.logo-carousel .carousel-nav.prev{left:0}.logo-carousel .carousel-nav.next{right:0}.logo-carousel .carousel-dots{display:flex;justify-content:center;gap:8px;margin-top:20px}.logo-carousel .carousel-dots .carousel-dot{width:8px;height:8px;border-radius:0;border:none;background-color:#333;cursor:pointer;padding:0;transition:background-color .3s,transform .3s}.logo-carousel .carousel-dots .carousel-dot.active{background:var(--text)}.logo-carousel .carousel-dots .carousel-dot:hover:not(.active){background-color:#555}.desktop-view{display:grid}.mobile-view{display:none}@media (max-width: 768px){.scroll-in-logo-grid-container .logo-grid-title{font-size:2rem}.scroll-in-logo-grid-container .logo-grid-subtitle{font-size:1rem;margin-bottom:30px}.desktop-view{display:none!important}.mobile-view{display:block!important}.logo-carousel .carousel-item .logo-card{padding:20px 15px}.logo-carousel .carousel-item .logo-card img{max-height:60px}}@media (max-width: 480px){.logo-carousel .carousel-nav{width:32px;height:32px;font-size:16px}.logo-carousel .carousel-container{max-width:250px}.logo-carousel .carousel-item .logo-card{height:130px;padding:15px}.logo-carousel .carousel-item .logo-card img{max-height:50px}}:root[data-theme=dark] img.mono-dark{filter:invert(1) brightness(1.7)}:root[data-theme=dark] .logo-card:hover img.mono-dark{filter:invert(1) brightness(2)}:root[data-theme=light] img.mono-light{filter:invert(1) brightness(.4)}:root[data-theme=light] .logo-card:hover img.mono-light{filter:invert(1) brightness(.6)}
