/* Cloud Responsive Styles */
@media (max-width: 1280px) {
    .hero-content h1 {
        font-size: clamp(5rem, 12vw, 8rem);
    }

    section {
        padding: 28rem 2rem;
    }

    #compute, #storage, #ai {
        padding: 28rem 2rem;
    }

    .compute-image, .storage-image, .ai-image {
        width: calc(45vw - 3rem);
        max-width: 550px;
    }

    #capabilities h2 {
        margin-left: calc((100% - 800px) / 2 - 200px);
    }

    #capabilities .solutions-top-row,
    #capabilities .solutions-bottom-row {
        max-width: 800px;
    }

    .feature-large {
        padding: 3rem;
        gap: 3rem;
    }

    .pricing-grid {
        max-width: 900px;
    }
}

@media (max-width: 1024px) {
    .hero {
        padding: 6rem 2rem 4rem 2rem;
    }

    .hero-content {
        max-width: 520px;
        padding: 2.5rem;
    }

    .hero-content h1 {
        font-size: clamp(4rem, 10vw, 6rem);
    }

    .nav-links-desktop {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    section {
        padding: 22rem 1.5rem;
    }

    #compute, #storage, #ai {
        padding: 22rem 1.5rem;
    }

    .compute-image, .storage-image, .ai-image {
        width: calc(42vw - 2rem);
        max-width: 450px;
    }

    .image-section {
        padding: 18rem 1.5rem 16rem 1.5rem;
    }

    #capabilities h2 {
        font-size: clamp(3rem, 9vw, 5rem);
        margin-left: calc((100% - 700px) / 2 - 150px);
    }

    #capabilities .solutions-top-row,
    #capabilities .solutions-bottom-row {
        max-width: 700px;
        gap: 1.5rem;
    }

    .feature-large {
        padding: 2.5rem;
        gap: 2.5rem;
    }

    .pricing-section {
        padding: 16rem 1.5rem 14rem 1.5rem;
    }

    .pricing-section h2 {
        font-size: clamp(3rem, 9vw, 5rem);
    }

    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
    }

    .pricing-card.featured {
        transform: none;
    }

    .pricing-card.featured:hover {
        transform: translateY(-4px);
    }
}

@media (max-width: 834px) {
    .hero {
        padding: 5rem 1.5rem 3rem 1.5rem;
    }

    .hero-content {
        padding: 2rem;
    }

    .hero-content h1 {
        font-size: clamp(3rem, 12vw, 5rem);
    }

    section {
        padding: 16rem 1rem;
    }

    #compute, #storage, #ai {
        padding: 16rem 1rem;
    }

    .compute-image, .storage-image, .ai-image {
        position: relative;
        width: 100%;
        max-width: none;
        left: auto;
        right: auto;
        top: auto;
        transform: none;
        margin-bottom: 3rem;
    }

    #compute > h2, #storage > h2, #ai > h2 {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #compute > .section-subtitle, #storage > .section-subtitle, #ai > .section-subtitle {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #compute .feature-large, #storage .feature-large, #ai .feature-large {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .feature-large {
        grid-template-columns: 1fr;
        padding: 2rem;
        gap: 2rem;
    }

    .image-section {
        padding: 12rem 1rem 10rem 1rem;
    }

    #capabilities h2 {
        font-size: clamp(2.5rem, 10vw, 4rem);
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    #capabilities .solutions-top-row {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2rem;
    }

    #capabilities .solutions-bottom-row {
        grid-template-columns: 1fr;
    }

    .solutions-image-card {
        display: none;
    }

    .waitlist-section {
        padding: 6rem 1.5rem;
    }

    .waitlist-layout {
        flex-direction: column;
        gap: 2rem;
    }

    .waitlist-image-card {
        width: 100%;
        max-width: 400px;
        height: 300px;
    }

    .waitlist-logo {
        width: 120px;
        height: 120px;
    }

    .waitlist-container {
        margin-left: 0;
        padding: 2.5rem 1.5rem;
        max-width: 100%;
    }

    .waitlist-container h2 {
        font-size: 2rem;
    }

    .waitlist-input {
        min-width: 100%;
    }

    .waitlist-form .btn-primary {
        width: 100%;
    }
}