.blog-mobile-topic-rail {
    display: none;
}

.mobile-conversion-bar {
    display: none;
}

.hero-title--mobile,
.hero-subtitle--mobile,
.hero-actions--mobile,
.mobile-hero-after {
    display: none;
}

@media (max-width: 768px) {
    :root {
        --page-padding: 16px;
        --page-content-padding: 16px;
        --section-padding: 56px;
    }

    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    body.mobile-nav-open {
        overflow: hidden;
        touch-action: none;
    }

    main {
        overflow-x: hidden;
    }

    h1 {
        font-size: 2rem;
        line-height: 1.15;
    }

    h2 {
        font-size: 1.55rem;
        line-height: 1.22;
    }

    h3 {
        font-size: 1.15rem;
        line-height: 1.28;
    }

    p {
        font-size: 1rem;
        line-height: 1.62;
    }

    a,
    button,
    input,
    select,
    textarea {
        min-height: 44px;
    }

    .container,
    .trust-container,
    .process-container,
    .cta-container,
    .services-overview-container,
    .pricing-calculator-container,
    .why-choose-container,
    .faq-page-hero__inner,
    .faq-guide-grid,
    .faq-section,
    .projects-overview .container,
    .featured-projects .container,
    .all-projects .container {
        width: 100%;
        max-width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }

    .case-studies-container,
    .founder-container,
    .why-us-section {
        width: 100%;
        max-width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }

    .project-detail-container {
        width: 100%;
        max-width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }

    .hero-section {
        min-height: auto;
        padding: 42px 16px 48px;
        background: linear-gradient(180deg, rgba(245, 247, 220, 0.96), rgba(255, 255, 255, 0.98));
        overflow: hidden;
    }

    .hero-section--mobile-refined {
        display: block;
        min-height: auto;
        padding-top: 40px;
        padding-bottom: 28px;
        overflow: hidden;
    }

    .hero-image {
        inset: auto -44% 6% auto;
        width: 108%;
        height: 100%;
        max-width: none;
        opacity: 0.24;
        transform: rotate(-2deg);
        -webkit-mask-image: linear-gradient(135deg, transparent 0%, rgba(0, 0, 0, 0.18) 16%, rgba(0, 0, 0, 0.72) 42%, black 100%);
        mask-image: linear-gradient(135deg, transparent 0%, rgba(0, 0, 0, 0.18) 16%, rgba(0, 0, 0, 0.72) 42%, black 100%);
    }

    .hero-image img {
        -webkit-mask: none;
        mask: none;
        animation: none;
        object-position: right bottom;
    }

    .hero-content {
        position: relative;
        width: 100%;
        max-width: 100%;
        min-height: 0;
        padding: 0;
        z-index: 2;
    }

    .hero-logo {
        display: none !important;
    }

    .hero-title--desktop,
    .hero-subtitle--desktop,
    .hero-actions--desktop {
        display: block;
    }

    .hero-section--mobile-refined .hero-title--desktop,
    .hero-section--mobile-refined .hero-subtitle--desktop,
    .hero-section--mobile-refined .hero-actions--desktop {
        display: none;
    }

    .hero-section--mobile-refined .hero-title--mobile,
    .hero-section--mobile-refined .hero-subtitle--mobile,
    .hero-section--mobile-refined .hero-actions--mobile {
        display: block;
    }

    .hero-content h1 {
        max-width: 22rem;
        min-height: 0;
        margin-bottom: 18px;
        font-size: 2.05rem;
        line-height: 1.12;
        letter-spacing: 0;
    }

    .hero-section--mobile-refined .hero-content h1 {
        max-width: 100%;
        margin-bottom: 16px;
        font-size: clamp(1.95rem, 8.2vw, 2.2rem);
        line-height: 1.15;
        text-wrap: balance;
    }

    .hero-content h1::before {
        display: none;
    }

    .hero-section--mobile-refined .highlight {
        display: inline;
        padding: 0;
        border-radius: 0;
        background: linear-gradient(to top, rgba(237, 231, 66, 0.5) 0 32%, transparent 32% 100%);
        box-shadow: none;
        font-weight: inherit;
    }

    .hero-content p {
        max-width: 22rem;
        min-height: 0;
        margin-bottom: 24px;
        font-size: 1rem;
        line-height: 1.58;
    }

    .hero-section--mobile-refined .hero-content p {
        max-width: 100%;
        margin-bottom: 24px;
        color: rgba(22, 27, 64, 0.86);
    }

    .hero-actions--mobile .hero-cta-group {
        gap: 12px;
        width: 100%;
    }

    .hero-actions--mobile .hero-callback-actions,
    .hero-actions--mobile .hero-callback-primary {
        width: 100%;
    }

    .hero-actions--mobile .hero-callback-primary {
        min-height: 54px;
    }

    .hero-actions--mobile .hero-consultation-ratings {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 12px;
    }

    .hero-actions--mobile .rating-item {
        padding: 10px;
        box-shadow: none;
        border: 1px solid rgba(22, 27, 64, 0.08);
        background: rgba(255, 255, 255, 0.78);
    }

    .hero-actions--mobile .rating-content {
        align-items: flex-start;
        gap: 7px;
    }

    .hero-actions--mobile .rating-text {
        display: grid;
        gap: 1px;
        font-size: 0.78rem;
        line-height: 1.25;
    }

    @media (max-width: 380px) {
        .hero-section--mobile-refined {
            padding-top: 36px;
            padding-bottom: 28px;
        }

        .hero-section--mobile-refined .hero-content h1 {
            font-size: 1.9rem;
        }

        .hero-image {
            right: -48%;
            bottom: 4%;
            width: 116%;
            height: 96%;
            opacity: 0.22;
        }
    }

    .hero-cta-group,
    .hero-consultation-form-wrapper,
    .hero-consultation-wrapper,
    .hero-consultation-table,
    .hero-consultation-row,
    .hero-consultation-form {
        width: 100%;
        max-width: 100%;
    }

    .hero-secondary-cta,
    .hero-section-cta-button,
    .consultation-link,
    .cta-button,
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-cta,
    .service-detail-btn,
    .service-cta-button,
    .submit-button {
        min-height: 48px;
        border-radius: 8px;
    }

    .hero-consultation-ratings {
        display: grid;
        gap: 10px;
    }

    .rating-item {
        margin: 0;
        border-radius: 8px;
    }

    .trust-section,
    .services-section,
    .process-section,
    .case-studies-section,
    .founder-section,
    .collaborations-section,
    .why-us-section,
    .cta-section,
    .faq-section,
    .services-overview,
    .pricing-calculator-section,
    .service-deliverables,
    .tech-stack-section,
    .service-process,
    .service-pricing,
    .service-faq,
    .consultation-benefits,
    .consultation-form-section,
    .consultation-cta,
    .about-overview,
    .about-founder,
    .about-mission-vision,
    .about-values,
    .about-approach,
    .about-timeline,
    .about-different,
    .projects-overview,
    .featured-projects,
    .all-projects,
    .projects-cta {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .process-section {
        padding-top: 36px;
    }

    .process-section .process-header {
        margin-bottom: 24px;
    }

    .process-section .process-timeline {
        margin-top: 0;
    }

    .trust-header,
    .process-header,
    .section-header,
    .faq-header,
    .values-header,
    .approach-header,
    .timeline-header {
        text-align: left;
    }

    .trust-header h2,
    .process-header h2,
    .services-section h2,
    .section-header h2,
    .faq-title,
    .cta-content h2 {
        font-size: 1.55rem;
        line-height: 1.22;
        letter-spacing: 0;
    }

    .trust-stats,
    .services-container,
    .services-grid,
    .deliverables-grid,
    .tech-stack-grid,
    .process-steps,
    .benefits-grid,
    .values-grid,
    .approach-steps,
    .mission-vision-grid,
    .projects-grid,
    .blog-grid,
    .why-us-grid,
    .collaborations-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .case-studies-header,
    .case-studies-metrics,
    .founder-content {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    .trust-stat-item,
    .service-overview-card,
    .deliverable-item,
    .tech-item,
    .benefit-card,
    .value-item,
    .approach-step,
    .mission-card,
    .vision-card,
    .project-card,
    .faq-guide-card,
    .faq-help-card,
    .cta-card,
    .why-us-card {
        border-radius: 8px;
    }

    .why-us-item,
    .case-metric {
        border-radius: 8px;
    }

    .why-us-header {
        text-align: left;
    }

    .why-us-header h2 {
        font-size: 1.55rem;
        line-height: 1.22;
        letter-spacing: 0;
    }

    .services-section {
        text-align: left;
        padding-left: 16px;
        padding-right: 16px;
    }

    .services-subheading {
        margin-bottom: 22px;
        font-size: 1rem;
    }

    .service-item {
        cursor: default;
        perspective: none;
    }

    .service-card,
    .service-card.flipped {
        height: auto;
        transform: none !important;
        transform-style: flat;
    }

    .service-card-front,
    .service-card-back {
        position: relative;
        height: auto;
        min-height: 0;
        transform: none !important;
        backface-visibility: visible;
        -webkit-backface-visibility: visible;
        border-radius: 8px;
    }

    .service-card-front {
        align-items: flex-start;
        text-align: left;
        padding: 24px 20px 16px;
        border-radius: 8px 8px 0 0;
    }

    .service-card-back {
        padding: 18px 20px 22px;
        border-radius: 0 0 8px 8px;
        background: var(--dark-blue);
    }

    .service-card-front p {
        flex-grow: 0;
    }

    .service-learn-more {
        display: none;
    }

    .service-deliverables li {
        align-items: flex-start;
    }

    .service-hero,
    .services-hero,
    .faq-page-hero {
        padding: 68px 16px 54px;
    }

    .service-hero-content,
    .services-hero-content {
        max-width: 100%;
        text-align: left;
    }

    .service-hero-content h1,
    .services-hero-content h1,
    .faq-page-hero h1 {
        font-size: 2rem;
        line-height: 1.16;
        letter-spacing: 0;
    }

    .service-hero-cta,
    .faq-hero-actions,
    .cta-buttons,
    .project-cta-buttons,
    .projects-overview__cta,
    .service-overview-footer {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        width: 100%;
    }

    .problem-solution .container-narrow,
    .faq-page-hero__inner,
    .faq-layout,
    .faq-page-layout,
    .projects-overview .container,
    .projects-filter-panel,
    .about-founder-content,
    .pricing-calculator-container {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 24px;
    }

    .service-pricing-toolbar,
    .currency-switcher,
    .faq-topic-pills,
    .project-filters,
    .project-filters__container,
    .projects-filter-panel__filters,
    .blog-mobile-topic-rail {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
        scroll-snap-type: x proximity;
    }

    .service-pricing-toolbar > *,
    .currency-switcher > *,
    .faq-topic-pills > *,
    .project-filters > *,
    .project-filters__container > *,
    .blog-mobile-topic-rail > * {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .project-filter {
        min-height: 44px;
        white-space: nowrap;
    }

    .project-hero-grid,
    .project-story__grid,
    .features-grid,
    .project-meta,
    .project-hero-actions {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .project-detail-hero,
    .project-content-section,
    .related-projects,
    .project-cta-section {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .faq-sticky-help {
        position: static;
    }

    .faq-search-box {
        min-height: 52px;
    }

    .faq-search-box input {
        min-width: 0;
        font-size: 1rem;
    }

    .consultation-form,
    .calculator-lead-grid {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .consultation-form input,
    .calculator-lead-form input,
    .calculator-lead-form select,
    .calculator-lead-form textarea {
        min-height: 52px;
        font-size: 1rem;
    }

    .form-container {
        border-radius: 8px;
        padding: 24px 18px;
    }

    .blog-mobile-topic-rail {
        margin: 0 0 20px;
    }

    .blog-mobile-topic-rail a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 14px;
        border-radius: 999px;
        border: 1px solid rgba(22, 27, 64, 0.16);
        color: var(--dark-blue);
        font-weight: 700;
        text-decoration: none;
        background: #ffffff;
    }

    .blog-sidebar {
        margin-top: 24px;
    }

    .blog-sidebar > div {
        border-radius: 8px;
    }

    .mobile-conversion-bar {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: 12px;
        z-index: 930;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        padding: 8px;
        border: 1px solid rgba(22, 27, 64, 0.12);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 14px 34px rgba(8, 12, 28, 0.18);
        transform: translateY(calc(100% + 24px));
        transition: transform 0.24s ease;
        backdrop-filter: blur(12px);
    }

    body.mobile-show-conversion-bar:not(.mobile-nav-open):not(.mobile-footer-visible) .mobile-conversion-bar {
        transform: translateY(0);
    }

    .mobile-conversion-bar a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 46px;
        border-radius: 8px;
        font-weight: 800;
        text-decoration: none;
        white-space: nowrap;
    }

    .mobile-conversion-bar__primary {
        background: var(--yellow);
        color: var(--dark-blue) !important;
    }

    .mobile-conversion-bar__secondary {
        padding: 0 14px;
        border: 1px solid rgba(22, 27, 64, 0.14);
        color: var(--dark-blue) !important;
        background: #ffffff;
    }
}

@media (max-width: 420px) {
    .mobile-header-cta {
        display: none;
    }

    .hero-content h1,
    .service-hero-content h1,
    .services-hero-content h1,
    .faq-page-hero h1 {
        font-size: 1.82rem;
    }

    .hero-content p {
        font-size: 0.96rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-nav-backdrop,
    .mobile-nav-drawer {
        transition: none !important;
    }
}