.hero-bg-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(18, 18, 18, 0.3) 0%, rgba(18, 18, 18, 0.7) 100%);
    z-index: 1;
}

.sexy-text-bg {
    position: relative;
}
.sexy-text-bg::before {
    content: ''; position: absolute; top: -50%; left: -20%; width: 140%; height: 200%;
    background: radial-gradient(circle, var(--brand-primary) 0%, transparent 60%);
    opacity: 0.05; z-index: -1; pointer-events: none;
    filter: blur(60px);
}
[data-theme="light"] .sexy-text-bg::before { opacity: 0.08; }

.team-image-wrapper {
    width: 140px; height: 140px; border-radius: 50%; padding: 4px;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    margin: 0 auto 1.5rem; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative; overflow: hidden;
}
.team-member-card:hover .team-image-wrapper { transform: scale(1.05); box-shadow: 0 15px 30px rgba(0, 102, 255, 0.3); }
.team-image-wrapper img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 4px solid var(--bg-primary); transition: border-color 0.3s; }

.team-social-links a {
    width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background-color: var(--bg-secondary); color: var(--text-secondary);
    transition: all 0.3s ease; border: 1px solid transparent;
}
.team-social-links a:hover {
    background-color: var(--brand-primary); color: #ffffff !important;
    transform: translateY(-4px) scale(1.05); box-shadow: 0 8px 20px rgba(0, 102, 255, 0.3); border-color: var(--brand-primary);
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
}
.animate-float { animation: float 6s ease-in-out infinite; }


.timeline-pro-item {
    position: relative;
    z-index: 10;
}
.timeline-content {
    background: var(--bg-primary); border: 1px solid var(--card-border-color);
    border-radius: 1.5rem; box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); position: relative;
    will-change: transform;
}
@supports (backdrop-filter: blur(16px)) {
    .timeline-content { background: rgba(var(--bg-primary-rgb), 0.85); backdrop-filter: blur(16px); }
    [data-theme="dark"] .timeline-content { background: rgba(30, 30, 30, 0.6); }
}

.tilt-effect {
    transform-style: preserve-3d;
}
.tilt-effect > * {
    transform: translateZ(20px);
}

.value-card:hover .value-icon-wrapper {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
    transform: scale(1.1) translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 102, 255, 0.3);
}


.marquee-container {
    direction: ltr; overflow: hidden; white-space: nowrap; display: flex; position: relative; width: 100%;
}
.marquee-container::before, .marquee-container::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 100px; z-index: 2; pointer-events: none;
}
.marquee-container::before { left: 0; background: linear-gradient(to right, var(--bg-primary), transparent); }
.marquee-container::after { right: 0; background: linear-gradient(to left, var(--bg-primary), transparent); }

.marquee-content { display: flex; animation: scroll-left 45s linear infinite; width: max-content; }
@keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }


.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 200px;
    gap: 1rem;
}
.bento-item { border-radius: 1.5rem; overflow: hidden; position: relative; }
.bento-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.bento-item:hover img { transform: scale(1.05); }
.bento-item::after {
    content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
    opacity: 0; transition: opacity 0.3s; pointer-events: none;
}
.bento-item:hover::after { opacity: 1; }

@media (max-width: 767px) {
    .bento-grid { grid-template-columns: 1fr; grid-auto-rows: 250px; }
    .bento-tall { grid-row: span 1 !important; }
    .bento-wide { grid-column: span 1 !important; }
}
.bento-tall { grid-row: span 2; }
.bento-wide { grid-column: span 2; }