@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

@media (max-width: 1180px) {
    .service-title-grid,
    .pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .portfolio-demo-grid,
    .split-layout,
    .contact-layout,
    .intro-layout {
        grid-template-columns: 1fr;
    }

    .pricing-section .container {
        transform: none;
    }
}

@media (max-width: 980px) {
    html {
        overflow-x: hidden;
    }

    body {
        overflow-x: hidden;
    }

    .container,
    .included-layout,
    .portfolio-demo-layout {
        width: min(100% - 28px, 1180px);
    }

    .nav {
        right: 10px;
        width: 42px;
    }

    .hud-nav-connector {
        right: 20px;
    }

    .nav-label {
        display: none;
    }

    .nav-node {
        width: 13px;
        height: 13px;
    }

    .hud-coordinate {
        top: 18px;
        left: 18px;
        max-width: calc(100vw - 96px);
        font-size: 0.66rem;
    }

    .hud-status {
        left: 18px;
        bottom: 18px;
        transform: translate(2px, 2px);
    }

    .language-switcher {
        top: 18px;
        right: 18px;
    }

    .hero {
        padding-top: 104px;
    }

    .hero-content {
        padding-top: 36px;
    }

    .hero-service-pills {
        gap: 12px;
        margin-bottom: 44px;
    }

    .hero-title {
        font-size: clamp(1.28rem, 7vw, 2.4rem);
    }

    .service-title-layout,
    .included-layout,
    .portfolio-demo-layout {
        min-height: auto;
        padding-top: 94px;
        padding-bottom: 72px;
    }

    .service-title-grid,
    .pricing-grid,
    .included-grid,
    .pricing-process {
        grid-template-columns: 1fr;
    }

    .pricing-showcase {
        --pricing-panel-top: auto;
        padding-bottom: 0;
    }

    .pricing-detail-panel {
        position: relative;
        top: auto;
        margin-top: 14px;
    }

    .portfolio-demo-grid {
        gap: 18px;
    }

    .portfolio-browser,
    .portfolio-info-stack {
        min-height: auto;
    }

    .included-card {
        height: auto;
        max-height: none;
        min-height: 300px;
    }

    .contact-section {
        min-height: auto;
    }

    .contact-layout {
        padding: 96px 0 78px;
    }
}

@media (max-width: 640px) {
    .container,
    .included-layout,
    .portfolio-demo-layout {
        width: min(100% - 24px, 1180px);
    }

    .hero-service-pills span {
        min-width: 0;
        width: 100%;
    }

    .hero-actions,
    .city-hero-content .hero-actions {
        width: 100%;
        flex-direction: column;
    }

    .primary-button,
    .secondary-button,
    .portfolio-demo-button,
    .portfolio-contact-button {
        width: 100%;
    }

    .section-title-bar {
        width: min(100% - 24px, 1180px);
    }

    .service-title-card,
    .pricing-card,
    .included-card,
    .profile-card,
    .contact-form,
    .portfolio-info-card {
        padding: 22px;
    }

    .portfolio-card-actions {
        grid-template-columns: 1fr;
    }

    .portfolio-browser-bar {
        min-height: 56px;
        gap: 8px;
        padding: 0 12px;
    }

    .browser-dot {
        width: 10px;
        height: 10px;
        flex-basis: 10px;
    }

    .portfolio-browser-bar strong {
        min-width: 0;
        padding: 0 12px;
        font-size: 0.86rem;
    }
.portfolio-controls {
        gap: 16px;
    }

    .portfolio-nav-button {
        width: 50px;
        height: 50px;
    }

    .hud-contact-line strong {
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .back-to-top {
        right: 25px;
        bottom: 25px;
    }
}