:root {
    --bg-color: #05050A;
    --text-color: #E0E0E0;
    --accent-purple: #7B2CBF;
    --accent-blue: #3A0CA3;
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-hover: rgba(255, 255, 255, 0.08);
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Global Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Scroll Reveal Animation - Safe Mode */
.reveal {
    transition: all 1s ease-out;
    /* Default is visible to prevent missing content if JS fails */
    opacity: 1;
    transform: translateY(0);
}

.reveal.reveal-hidden {
    opacity: 0;
    transform: translateY(50px);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Base Styles */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-body);
    overflow-x: hidden;
    line-height: 1.6;
    /* Global Grid Pattern */
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    background-position: center top;
    background-attachment: fixed;
    /* Ensures grid stays fixed and top row is always full */
}

/* Background Gradients */
body::before {
    content: '';
    position: fixed;
    top: -10%;
    right: -10%;
    width: 80vw;
    height: 80vw;
    background: radial-gradient(circle, var(--accent-purple) 0%, transparent 60%);
    opacity: 0.5;
    filter: blur(120px);
    z-index: -1;
    animation: floatBlob 15s infinite alternate;
}

body::after {
    content: '';
    position: fixed;
    bottom: -10%;
    left: -10%;
    width: 80vw;
    height: 80vw;
    background: radial-gradient(circle, var(--accent-blue) 0%, transparent 60%);
    opacity: 0.4;
    filter: blur(130px);
    z-index: -1;
    animation: floatBlob 20s infinite alternate-reverse;
}

@keyframes floatBlob {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(30px, 30px);
    }
}

.nav-links {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 4rem;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
}

/* Side Elements */
.side-element {
    position: absolute;
    /* Changed from fixed to absolute */
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8rem;
    letter-spacing: 2px;
    color: #666;
    writing-mode: vertical-rl;
    z-index: 10;
    text-transform: uppercase;
    font-weight: 500;
}

.side-element.left {
    left: 4rem;
    writing-mode: vertical-rl;
    transform: translateY(-50%) rotate(180deg);
}

.side-element.right {
    right: 4rem;
    /* The instruction implies removing previous layout, but the provided snippet shows these properties remaining.
       Assuming the intent is to add the new scroll indicator elements, and these properties are still relevant for the container. */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.side-element .line {
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, transparent, #555, transparent);
}

.social-btn-side {
    color: #666;
    font-size: 0.9rem;
    transition: 0.3s;
    writing-mode: horizontal-tb;
    /* Ensure text isn't rotated inside flex column if needed */
}

.social-btn-side:hover {
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.scroll-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.scroll-line {
    width: 1px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.scroll-dot {
    width: 100%;
    height: 30%;
    background: #fff;
    position: absolute;
    top: 0;
    animation: scrollDrop 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

@keyframes scrollDrop {
    0% {
        top: -30%;
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        top: 100%;
        opacity: 0;
    }

}

.scroll-indicator span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    letter-spacing: 2px;
    font-size: 0.75rem;
    color: #888;
}

/* Typography */
h1,
h2,
h3,
h4 {
    font-family: var(--font-heading);
    color: #fff;
    font-weight: 600;
}

h1 {
    font-size: 3.5rem;
    letter-spacing: -1px;
}

h2 {
    font-size: 2.5rem;
    letter-spacing: -0.5px;
}

p {
    color: #aaa;
    font-size: 1rem;
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s;
}

a:hover {
    color: #fff;
}

.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.1);
    color: #dfdfdf;
    font-size: 0.8rem;
    margin-bottom: 1rem;
    border: 1px solid var(--glass-border);
}

.badge::before {
    content: '●';
    color: #FFEE58;
    margin-right: 6px;
    font-size: 0.7rem;
}

/* Navbar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 4rem;
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.nav-logo-img {
    height: 32px;
    width: auto;
    display: block;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    z-index: 2;
    text-decoration: none;
    /* Keep above if overlap */
}

.logo-icon {
    width: 24px;
    height: 24px;
    background: white;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.2);
}

/* Navbar Actions */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    z-index: 2;
}

/* Nav Socials removed from header, but keeping class for footer if needed or legacy. 
   Actually footer uses .footer-socials now. 
*/


/* CTA Button on Navbar */
.btn-primary {
    padding: 0.6rem 1.4rem;
    background: #fff;
    color: #000;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: 0.3s;
    border: 1px solid transparent;
}

.btn-primary:hover {
    background: transparent;
    border-color: #fff;
    color: #fff;
}

/* Hero */
.hero {
    padding: 6rem 2rem;
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero-content {
    max-width: 800px;
    margin-bottom: 2rem;
    text-align: center;
    z-index: 2;
}

.hero-content h1 {
    margin-bottom: 1rem;
    font-size: 4rem;
    background: linear-gradient(to bottom, #fff, #bbb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle {
    font-size: 1.1rem;
    color: #888;
    font-weight: 300;
    max-width: 600px;
    margin: 0 auto;
    letter-spacing: 0.5px;
}

/* Scattered Hero Layout */
.hero-scattered {
    position: relative;
    width: 100%;
    min-height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-content-centered {
    text-align: center;
    z-index: 10;
    position: relative;
}

.hero-content-centered h1 {
    font-size: 5rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    background: linear-gradient(to bottom, #fff, #ccc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.floating-item {
    position: absolute;
    mix-blend-mode: lighten;
    /* Blend nicely with dark bg */
    pointer-events: none;
    -webkit-mask-image: radial-gradient(circle, black 40%, transparent 70%);
    mask-image: radial-gradient(circle, black 40%, transparent 70%);
}

.hero-cta {
    margin-top: 2rem;
}

/* Main Shape (Right of Text) */
.shape-main {
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
    width: 400px;
    z-index: 5;
    animation: animMain 12s ease-in-out infinite;
    filter: brightness(1.2);
}

/* Cube (Top Left Diagonal) */
.shape-cube-1 {
    top: 5%;
    left: 12%;
    width: 180px;
    z-index: 2;
    animation: animCube 10s ease-in-out infinite alternate;
    opacity: 0.9;
}

/* Torus (Bottom Left Diagonal) */
.shape-torus-1 {
    bottom: 2%;
    left: 18%;
    top: auto;
    right: auto;
    width: 220px;
    z-index: 1;
    animation: animTorus 14s ease-in-out infinite;
    filter: blur(1px);
    opacity: 0.85;
}

/* Unique Animations */
@keyframes animMain {

    0%,
    100% {
        transform: translateY(-50%) translate(0, 0) rotate(0deg);
    }

    50% {
        transform: translateY(-50%) translate(20px, -20px) rotate(5deg);
    }
}

@keyframes animCube {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }

    100% {
        transform: translate(-15px, 15px) rotate(10deg) scale(1.05);
    }
}

@keyframes animTorus {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    33% {
        transform: translate(15px, 15px) rotate(-10deg);
    }

    66% {
        transform: translate(-10px, -5px) rotate(5deg);
    }
}

@keyframes floatComplex {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    33% {
        transform: translate(20px, -30px) rotate(5deg);
    }

    66% {
        transform: translate(-20px, 20px) rotate(-5deg);
    }
}

/* FAQ */
.faq {
    padding: 6rem 4rem;
    max-width: 900px;
    margin: 0 auto;
}

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

.mb-large {
    margin-bottom: 4rem;
}

.accordion {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.accordion-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    overflow: hidden;
    transition: 0.3s;
}

.accordion-item.active {
    background: rgba(123, 44, 191, 0.1);
    border-color: rgba(123, 44, 191, 0.3);
}

.accordion-header {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    font-weight: 500;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    padding: 0 1.5rem;
    color: #aaa;
    font-size: 0.9rem;
    transition: 0.4s ease;
}

.accordion-item.active .accordion-content {
    max-height: 200px;
    padding-bottom: 1.5rem;
}

/* Logos */
.logos-slider {
    padding: 3rem 0;
    border-top: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
}

.logo-track {
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #555;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Users Section */
.users-section {
    padding: 6rem 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
    max-width: 1200px;
    margin: 0 auto;
}

.users-content {
    flex: 1;
}

.users-content p {
    margin-top: 2rem;
    color: #aaa;
    line-height: 1.8;
}

.trusted-badge {
    margin-top: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 0.5rem 1rem;
    border-radius: 30px;
    width: fit-content;
}

.avatars img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #000;
    margin-left: -10px;
}

.avatars img:first-child {
    margin-left: 0;
}

.trusted-badge .text {
    display: flex;
    flex-direction: column;
    font-size: 0.7rem;
    line-height: 1.2;
}

.trusted-badge strong {
    color: #fff;
}

.users-cards {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.user-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    padding: 1.5rem;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transform: translateX(20px);
    transition: 0.3s;
}

.user-card:hover {
    transform: translateX(15px);
    background: var(--glass-hover);
}

.user-card.highlight {
    background: linear-gradient(90deg, rgba(58, 12, 163, 0.2), transparent);
    border-left: 2px solid var(--accent-purple);
    transform: translateX(0);
    box-shadow: 0 0 20px rgba(123, 44, 191, 0.2);
}

.user-info {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.service-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.service-icon svg {
    width: 24px;
    height: 24px;
}

.user-info img {
    width: 48px;
    height: 48px;
    border-radius: 8px;
}

.user-info h4 {
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
}

.user-info span {
    font-size: 0.8rem;
    color: #888;
}

.tags span {
    display: inline-block;
    font-size: 0.7rem;
    padding: 2px 8px;
    background: #222;
    border-radius: 4px;
    color: #aaa;
    margin-left: 0.3rem;
}

/* Footer */
footer {
    margin-top: 4rem;
    padding: 4rem 4rem 0;
    background: var(--bg-color);
    position: relative;
    z-index: 5;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4rem;
}

.footer-cta {
    max-width: 300px;
}

.footer-cta h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.footer-btn {
    padding: 0.6rem 1.2rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    margin-top: 1rem;
    cursor: pointer;
    transition: 0.3s;
}

.footer-btn:hover {
    background: #fff;
    color: #000;
}

.footer-links {
    display: flex;
    gap: 4rem;
}

.footer-links .col {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-links h4 {
    font-size: 0.9rem;
    color: #fff;
    margin-bottom: 1rem;
}

.footer-links a,
.footer-links p {
    font-size: 0.85rem;
    color: #777;
}

.footer-brand h1 {
    font-size: 6rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.1);
    width: 100%;
    display: block;
    line-height: 1;
    margin-bottom: 1rem;
    /* Space between H1 and Copyright */
}

.footer-copyright {
    text-align: center;
    color: #666;
    font-size: 0.8rem;
    position: static;
    display: block;
    padding-bottom: 1rem;
    /* Reduced to fit socials below */
    width: 100%;
}

.footer-socials {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    padding-bottom: 3rem;
    width: 100%;
}

.footer-socials .social-icon {
    color: #666;
    width: 20px;
    height: 20px;
    transition: 0.3s;
}

.footer-socials .social-icon:hover {
    color: #fff;
    transform: translateY(-3px);
}

/* Marquee Animation */
.marquee-container {
    width: 100%;
    overflow: hidden;
    padding: 3rem 0;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 4rem;
    /* Angle it slightly for dynamism */
    transform: skewY(-2deg);
}

.marquee-container::before,
.marquee-container::after {
    content: "";
    position: absolute;
    top: 0;
    width: 200px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.marquee-container::before {
    left: 0;
    background: linear-gradient(to right, var(--bg-color), transparent);
}

.marquee-container::after {
    right: 0;
    background: linear-gradient(to left, var(--bg-color), transparent);
}

.marquee-content {
    display: flex;
    animation: marqueeScroll 40s linear infinite;
    white-space: nowrap;
}

.marquee-item {
    font-size: 5rem;
    font-weight: 800;
    color: transparent;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.1);
    margin: 0 4rem;
    text-transform: uppercase;
    font-family: var(--font-heading);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
    cursor: default;
}

.marquee-item:hover {
    color: #fff;
    -webkit-text-stroke: 0px transparent;
    text-shadow: 0 0 30px rgba(123, 44, 191, 0.8);
    transform: scale(1.05);
}

/* Remove the dot separator styles as we are using large spacing */
.marquee-item::after {
    content: none;
}

@keyframes marqueeScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Mobile Menu Button (Hamburger) */
.mobile-menu-btn {
    display: none;
    /* Globally hidden - tabs used instead */
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    cursor: pointer;
    z-index: 200;
    position: relative;
    /* CRITICAL FIX: needed for z-index to work */
}

.mobile-menu-btn span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #fff;
    transition: 0.3s;
}

/* Hamburger to X Animation */
.mobile-menu-btn.open span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.mobile-menu-btn.open span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-btn.open span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}


/* --- RESPONSIVE DESIGN --- */

/* Tablet & Smaller Laptops */
@media (max-width: 1024px) {
    .navbar {
        padding: 1.5rem 2rem;
    }

    h1 {
        font-size: 3rem;
    }

    .hero-content-centered h1 {
        font-size: 4rem;
    }

    .users-section,
    .faq,
    footer {
        padding: 4rem 2rem 0;
    }

    .side-element {
        display: flex;
    }

    .footer-brand h1 {
        font-size: 4.5rem;
    }

    .marquee-item {
        font-size: 3rem;
    }
}

/* Mobile Devices */
/* Mobile Devices */
@media (max-width: 768px) {

    /* 1. HIDE Hamburger */
    .mobile-menu-btn {
        display: none !important;
    }



    .nav-links a {
        font-size: 0.85rem !important;
        color: #fff !important;
        opacity: 0.9 !important;
        display: inline-block !important;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 0.5rem;
    }

    /* Hide Nav Actions (Get Started) */
    nav .nav-actions,
    .navbar .nav-actions {
        display: none !important;
    }

    /* Show Menu When Active */
    .nav-links.active {
        transform: translateY(0);
    }

    .nav-links a {
        font-size: 1.5rem !important;
        /* Big links */
        color: #fff !important;
        opacity: 0.8 !important;
        display: block !important;
    }

    /* Hide Nav Actions (Get Started) */
    nav .nav-actions,
    .navbar .nav-actions {
        display: none !important;
    }

    .nav-links a {
        display: inline-block !important;
        font-size: 0.8rem !important;
        font-weight: 500 !important;
        color: #888 !important;
        opacity: 1 !important;
        text-transform: uppercase;
        letter-spacing: 1px;
        text-decoration: none !important;
        white-space: nowrap !important;
        padding: 0.3rem 0.5rem;
        transition: 0.3s;
    }

    .nav-links a:hover,
    .nav-links a.active {
        color: #fff !important;
    }

    /* Navbar Container - Compact Version */
    .navbar {
        padding: 0.8rem 1rem !important;
        /* MUCH slimmer padding */
        flex-direction: column !important;
        gap: 0.8rem !important;
        /* Smaller gap */
        justify-content: flex-start !important;
        align-items: center !important;
        height: auto !important;
        background: rgba(5, 5, 10, 0.98);
    }

    .logo {
        margin: 0 !important;
        display: block !important;
        z-index: 2;
        transform: scale(0.9);
        /* Slightly smaller logo to save space */
    }

    /* Links - Responsive Compact Row */
    .nav-links {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        /* Allow wrapping so they don't get cut off */
        justify-content: center !important;
        align-items: center !important;
        gap: 0.5rem 1rem !important;
        /* Row gap 0.5rem, Col gap 1rem */
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
        transform: none !important;
        /* Fix: Reset desktop transform */
        overflow: visible !important;
    }

    .nav-links a {
        display: inline-block !important;
        font-size: 0.75rem !important;
        padding: 0.3rem 0.4rem !important;
        letter-spacing: 0.5px !important;
        white-space: nowrap !important;
        flex: 0 1 auto !important;
        /* Allow shrinking but prefer natural size */
    }

    /* ... (rest of nav links styles remain similar via inheritance or existing rules, 
       but we specifically changed container spacing above) ... */

    /* 2. CENTER CONTENT */
    body {
        text-align: center;
    }

    .hero-content-centered h1,
    .users-content h2,
    .footer-cta h3,
    h1,
    h2,
    h3,
    p {
        text-align: center !important;
    }

    .hero-content-centered {
        padding: 0 1rem;
        width: 100%;
        margin-top: 3rem;
        /* Restored "Old" Spacing */
        position: relative;
        z-index: 2;
    }

    .hero-content-centered h1 {
        font-size: 2.2rem !important;
        /* Decreased to be more manageable */
        line-height: 1.2;
        margin-bottom: 1rem;
    }

    /* Hide Side Text (Established / Explore More) */
    .side-element span,
    .scroll-indicator span {
        display: none !important;
    }

    .users-section {
        flex-direction: column;
        padding: 4rem 1.5rem;
        align-items: center;
    }

    .users-content {
        align-items: center;
        text-align: center;
        width: 100%;
    }

    .contact-container {
        grid-template-columns: 1fr;
    }

    /* 3. FOOTER FIXES */
    footer {
        padding: 3rem 1.5rem 0;
        overflow-x: hidden;
    }

    .footer-top {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 3rem;
    }

    .footer-links {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        width: 100%;
    }

    .footer-links .col {
        align-items: center;
        text-align: center;
        width: 100%;
    }

    .footer-brand h1 {
        font-size: 3rem;
        margin-bottom: 1rem;
    }

    .footer-copyright {
        padding-bottom: 0.5rem;
    }

    /* 4. FOOTER SOCIALS */
    .footer-socials {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 1.5rem !important;
        width: 100%;
        padding-bottom: 2rem;
        margin-top: 1rem;
    }

    .footer-socials .social-icon {
        width: 24px;
        height: 24px;
        display: inline-block;
    }

    /* 5. SHAPES RESTORED (Balanced) */
    .side-element {
        display: flex !important;
    }

    /* Left Shape (Cube) - Much Smaller & Subtle */
    .shape-cube-1 {
        display: block !important;
        transform: scale(0.25) !important;
        /* Reduced significantly */
        opacity: 0.15 !important;
        /* Very faded */
        top: 15% !important;
        left: -5% !important;
    }

    /* Right Shape (Torus) - Much Smaller & Subtle */
    .shape-torus-1 {
        display: block !important;
        transform: scale(0.25) !important;
        /* Reduced significantly */
        opacity: 0.15 !important;
        bottom: auto !important;
        top: 55% !important;
        right: -5% !important;
    }

    /* Main Shape (Blob) - Much Smaller & Subtle */
    .shape-main {
        display: block !important;
        right: -25% !important;
        width: 250px !important;
        transform: scale(0.3) translateY(-50%) !important;
        /* Reduced from 0.4 */
        opacity: 0.1 !important;
        top: 30% !important;
    }

    .floating-item {
        /* General fallback for others */
        transform: scale(0.3);
        opacity: 0.2;
    }

    /* Cards */
    .user-card {
        text-align: left !important;
        transform: none !important;
    }

    .marquee-container {
        transform: rotate(-2deg) scale(1);
        margin-bottom: 2rem;
    }

    .marquee-item {
        font-size: 2rem;
        margin: 0 1rem;
    }
}