/* ==========================================
   MOBILE RESPONSIVE STYLES
   ========================================== */

/* Prevent horizontal scroll */
body {
    overflow-x: hidden;
}

/* Hide mobile-specific line breaks on desktop */
.mobile-break {
    display: none;
}

/* Remove fixed width constraints */
@media (max-width: 1440px) {
    .web {
        min-width: 100%;
        width: 100%;
        overflow-x: hidden;
    }

    .web .conteiner {
        width: 100%;
        max-width: 100%;
    }

    .web .hero,
    .web .div-2,
    .web .results,
    .web .contacts,
    .web .information {
        width: 100% !important;
        max-width: 100% !important;
    }

    .web .cases-section {
        width: 100%;
        max-width: 100%;
    }

    .web .info-cards {
        width: 100%;
        max-width: 100%;
    }

    .web .text-wrapper {
        width: 100%;
        max-width: 100%;
    }

    .web .navigation {
        width: calc(100% - 32px);
        max-width: 1200px;
    }
}

/* ==========================================
   TABLET STYLES (768px - 1024px)
   ========================================== */
@media (max-width: 1024px) {
    .web .navigation {
        width: calc(100% - 32px);
        padding: 12px 16px;
    }

    .web .navbar {
        gap: 16px;
    }

    .web .text-wrapper {
        width: 100%;
        font-size: 28px;
    }

    .web .div-3 {
        flex-direction: column;
        gap: 40px;
    }

    .web .animation-new {
        width: 100%;
        max-width: 500px;
        height: 500px;
    }

    .web .offer {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 20px;
        position: relative;
    }

    .web .cards-offers,
    .web .cards-offers-2,
    .web .cards-offers-3 {
        position: relative;
        width: 100%;
        max-width: 540px;
        transform: none;
        top: auto;
        left: auto;
        right: auto;
        margin: 0 auto;
    }

    .web .info-cards .div-3 {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }

    .web .card-benefit {
        width: calc(50% - 10px);
        min-width: 300px;
    }

    .web .cards {
        flex-wrap: wrap;
        justify-content: center;
    }

    .web .results {
        width: 100% !important;
        padding: 0 20px !important;
    }

    .web .footer-2 {
        flex-direction: column;
        gap: 40px;
        padding: 40px 40px;
    }

    .web .links {
        flex-wrap: wrap;
        gap: 32px;
    }
}

/* ==========================================
   MOBILE STYLES (max-width: 768px)
   ========================================== */
@media (max-width: 768px) {
    /* Mobile line break */
    .mobile-break {
        display: inline !important;
    }

    /* Base layout */
    .web .conteiner {
        gap: 60px;
        top: 70px;
    }

    /* Page background adjustments */
    .page-background {
        height: 100% !important;
    }

    .page-background img {
        height: 100% !important;
        object-fit: cover !important;
    }

    /* Navigation - Mobile */
    .web .navigation {
        width: calc(100% - 24px);
        padding: 12px 16px;
        gap: 12px;
        top: 8px;
        transition: opacity 0.3s ease;
    }

    .web .navigation .navbar {
        display: none;
    }

    .web .navigation .buttons {
        display: none;
    }

    /* Mobile menu button */
    .mobile-menu-btn {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 8px;
        gap: 5px;
        margin-left: auto;
    }

    .mobile-menu-btn span {
        display: block;
        width: 24px;
        height: 2px;
        background: var(--bluetexttext);
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    .mobile-menu-btn.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

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

    .mobile-menu-btn.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    /* Mobile menu overlay */
    .mobile-menu {
        position: fixed;
        top: 16px;
        left: 16px;
        right: 16px;
        bottom: 16px;
        width: auto;
        height: auto;
        max-width: 390px;
        margin: 0 auto;
        background: rgba(20, 24, 36, 0.38);
        backdrop-filter: blur(48px) saturate(140%) brightness(0.85);
        -webkit-backdrop-filter: blur(48px) saturate(140%) brightness(0.85);
        z-index: 1001;
        display: none;
        flex-direction: column;
        opacity: 0;
        transition: opacity 0.3s ease, transform 0.3s ease;
        padding: 0;
        border-radius: 24px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
        overflow: hidden;
    }

    .mobile-menu.open {
        display: flex;
        opacity: 1;
    }

    /* Hide main navigation when menu is open */
    .mobile-menu.open ~ .navigation,
    body:has(.mobile-menu.open) .navigation {
        opacity: 0;
        pointer-events: none;
    }

    /* Mobile menu header */
    .mobile-menu-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 24px;
        width: 100%;
        flex-shrink: 0;
    }

    .mobile-menu-logo {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mobile-menu-logo .union {
        width: 30px;
        height: 25px;
    }

    .mobile-menu-logo .klippin {
        font-family: "Albert Sans", Helvetica;
        font-weight: 700;
        color: var(--bluetexttext);
        font-size: 18px;
    }

    .mobile-menu-close {
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        min-width: 44px;
    }

    .mobile-menu-close svg {
        width: 24px;
        height: 24px;
    }

    /* Mobile menu navigation links */
    .mobile-menu-links {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        flex: 1;
        min-height: 0;
        gap: 0;
        width: 100%;
        padding: 20px 24px;
        padding-top: 10px;
        overflow-y: auto;
    }

    .mobile-menu-links .mobile-nav-link {
        font-family: var(--body-med-font-family);
        font-weight: 500;
        font-size: 16px;
        color: var(--bluetexttext);
        padding: 14px 24px;
        text-decoration: none;
        text-align: center;
        width: auto;
        transition: opacity 0.2s ease;
    }

    .mobile-menu-links .mobile-nav-link:hover,
    .mobile-menu-links .mobile-nav-link:focus {
        opacity: 0.8;
    }

    /* Mobile menu buttons */
    .mobile-menu-buttons {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
        padding: 24px 20px;
        padding-bottom: 28px;
        flex-shrink: 0;
    }

    .mobile-menu-btn-primary {
        width: 100%;
        min-height: 52px;
        border-radius: 12px;
        background: linear-gradient(180deg, #4d88ff, #2f67ff);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 16px rgba(47, 103, 255, 0.3);
        overflow: hidden;
    }

    .web .mobile-menu-btn-primary .button {
        color: white;
        font-family: 'Inter', Helvetica;
        font-size: 16px;
        font-weight: 600;
    }

    .mobile-menu-btn-secondary {
        width: 100%;
        min-height: 52px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .web .mobile-menu-btn-secondary .button {
        color: var(--bluetexttext);
        font-family: 'Inter', Helvetica;
        font-size: 16px;
        font-weight: 600;
    }

    /* Hero section */
    .web .hero {
        padding: 120px 20px 60px;
        gap: 24px;
    }

    .web .text {
        max-width: 100%;
    }

    .web .activate-our-always {
        font-size: 14px;
        line-height: 140%;
    }

    .web .hero .hero-content h1 span {
        font-size: 28px !important;
        line-height: 130% !important;
    }

    .web .hero .hero-content p {
        font-size: 14px !important;
        line-height: 150% !important;
    }

    .web .hero .hero-content p br {
        display: none;
    }

    /* Hero buttons - horizontal layout */
    .web .hero .buttons,
    .web .hero .hero-content .buttons {
        flex-direction: row !important;
        flex-wrap: nowrap;
        width: 100%;
        justify-content: center;
        align-items: center;
        gap: 12px;
        margin-top: 24px !important;
    }

    .web .hero .hero-content .nav-button,
    .web .hero .hero-content .nav-button-primary {
        width: auto;
        min-width: 140px;
        max-width: 170px;
        flex: 1;
        padding: 10px 16px;
    }

    /* Ensure button text is centered */
    .web .nav-button,
    .web .nav-button-primary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .web .nav-button .button,
    .web .nav-button-primary .button {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 100%;
        font-size: 14px;
    }

    /* Contact section buttons - horizontal row */
    .web .contacts .buttons,
    .web .information .buttons {
        flex-direction: row;
        flex-wrap: nowrap;
        width: 100%;
        justify-content: center;
        align-items: center;
        gap: 12px;
    }

    .web .contacts .nav-button,
    .web .contacts .nav-button-primary,
    .web .information .nav-button,
    .web .information .nav-button-primary {
        width: auto;
        min-width: 140px;
        max-width: 170px;
        flex: 1;
        white-space: nowrap;
    }

    /* Orbit section - make it bigger, close to screen height */
    .web .orbit-bg {
        height: 70vh;
        min-height: 500px;
    }

    #orbit-animation {
        height: 70vh !important;
        min-height: 500px !important;
    }

    /* Orbit image container */
    .orbit-container {
        min-height: 70vh !important;
        display: flex !important;
        justify-content: center !important;
    }

    .orbit-image {
        min-height: 70vh !important;
        height: 70vh !important;
        width: auto !important;
        max-width: none !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    /* Hide orbit shadows on mobile for cleaner look */
    .orbit-shadow-top,
    .orbit-shadow-bottom {
        height: 80px !important;
    }

    /* Section headings */
    .web .text-wrapper,
    .web .text-wrapper-5,
    .web .text-wrapper-8 {
        font-size: 22px !important;
        line-height: 130% !important;
        padding: 0 16px;
    }

    /* Offers section */
    .web .div-2 {
        padding: 0 16px;
        gap: 24px;
    }

    .web .div-3 {
        flex-direction: column;
        gap: 24px;
    }

    .web .animation-new {
        width: 100% !important;
        max-width: 100% !important;
        height: 520px !important;
        margin: 0 auto;
        overflow: hidden;
    }

    .web .animation-new .blob {
        width: 100% !important;
        height: 100% !important;
        left: 0 !important;
        top: 0 !important;
        transform: none !important;
    }

    .web .animation-new .blob img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .web .animation-new > div img {
        width: 360px !important;
    }

    /* ---- Platform icon containers: fixed square, flex-centred ---- */
    .web .animation-new .twitter-dark,
    .web .animation-new .insta-dark,
    .web .animation-new .facebook-dark,
    .web .animation-new .youtube-dark {
        width: 52px !important;
        height: 52px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
        transform: none !important;
    }

    /* TikTok: also remove the inline translateY(-50%) */
    .web .animation-new .tiktok-dark {
        width: 52px !important;
        height: 52px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
        transform: none !important;
    }

    /* Inner images for Twitter / Instagram / YouTube: reset from absolute */
    .web .animation-new .twitter-dark .group-5,
    .web .animation-new .insta-dark .group,
    .web .animation-new .youtube-dark .group-2 {
        position: relative !important;
        width: 44px !important;
        height: 44px !important;
        top: auto !important;
        left: auto !important;
        margin: 0 !important;
        aspect-ratio: 1 !important;
        object-fit: contain !important;
    }

    /* Facebook inner wrapper + image */
    .web .animation-new .facebook-dark .group-3 {
        width: 44px !important;
        height: 44px !important;
        position: relative !important;
        margin: 0 !important;
        flex: none !important;
        aspect-ratio: 1 !important;
    }

    .web .animation-new .facebook-dark .vector-5 {
        position: relative !important;
        width: 44px !important;
        height: 44px !important;
        top: auto !important;
        left: auto !important;
        aspect-ratio: 1 !important;
        object-fit: contain !important;
    }

    /* TikTok inner wrapper + image */
    .web .animation-new .tiktok-dark .group-4 {
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        flex: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
    }

    .web .animation-new .tiktok-dark .vector-stroke-4 {
        position: relative !important;
        width: 44px !important;
        height: 44px !important;
        top: auto !important;
        left: auto !important;
        aspect-ratio: 1 !important;
        object-fit: contain !important;
    }

    /* ---- Icon positions ---- */
    .web .animation-new .twitter-dark {
        left: 1% !important;
        top: 32% !important;
        right: auto !important;
        bottom: auto !important;
    }

    .web .animation-new .insta-dark {
        right: 1% !important;
        top: 20% !important;
        left: auto !important;
        bottom: auto !important;
    }

    .web .animation-new .tiktok-dark {
        right: 1% !important;
        top: 47% !important;
        left: auto !important;
        bottom: auto !important;
    }

    .web .animation-new .facebook-dark {
        left: 4% !important;
        bottom: 14% !important;
        right: auto !important;
        top: auto !important;
    }

    .web .animation-new .youtube-dark {
        right: 1% !important;
        bottom: 8% !important;
        left: auto !important;
        top: auto !important;
    }

    /* ---- Counter badge containers: auto-sized, no bg SVG ---- */
    .web .animation-new .counter,
    .web .animation-new .info-wrapper,
    .web .animation-new .counter-2 {
        width: auto !important;
        height: auto !important;
        background-image: none !important;
        background-size: unset !important;
    }

    /* Inner badge boxes: let them auto-size to content */
    .web .animation-new .info,
    .web .animation-new .info-2,
    .web .animation-new .info-3 {
        flex: none !important;
        width: auto !important;
        height: auto !important;
        padding: 10px 14px !important;
        gap: 6px !important;
    }

    /* Profile counter 270 — upper right, scale from top-right */
    .web .animation-new .info-wrapper {
        right: 8% !important;
        top: 14% !important;
        left: auto !important;
        bottom: auto !important;
        transform: scale(0.82) !important;
        transform-origin: top right !important;
    }

    /* Likes counter 300 — left middle, scale from top-left */
    .web .animation-new .counter {
        left: 0% !important;
        top: 52% !important;
        right: auto !important;
        bottom: auto !important;
        transform: scale(0.82) !important;
        transform-origin: top left !important;
    }

    /* Engagement counter 480 — right lower, scale from bottom-right */
    .web .animation-new .counter-2 {
        right: 6% !important;
        bottom: 26% !important;
        left: auto !important;
        top: auto !important;
        transform: scale(0.82) !important;
        transform-origin: bottom right !important;
    }

    /* Offer cards */
    .web .offer {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .web .cards-offers,
    .web .cards-offers-2,
    .web .cards-offers-3 {
        position: relative;
        width: 100%;
        transform: none !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
    }

    .web .glass {
        width: 100%;
    }

    .web .text-wrapper-4 {
        font-size: 16px;
    }

    .web .icon-big-one,
    .web .icon-big-two,
    .web .icon-big-three {
        width: 40px;
        height: 40px;
    }

    .web .p {
        font-size: 14px;
    }

    /* Benefits cards - two column grid on mobile */
    .web .info-cards {
        width: 100%;
        padding: 0 16px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .web .info-cards .div-3 {
        display: contents;
    }

    .web .card-benefit {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .web .card-benefit .card {
        width: 100%;
        left: 0;
        padding: 16px;
        min-height: 180px;
        display: flex;
        flex-direction: column;
    }

    .web .card-benefit .img-3 {
        width: 32px;
        height: 32px;
        margin-bottom: 12px;
    }

    .web .card-benefit .info-4 {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .web .text-wrapper-6 {
        font-size: 16px;
        line-height: 130%;
    }

    .web .text-wrapper-7 {
        font-size: 12px;
        line-height: 150%;
    }

    /* Cases gallery */
    .web .cases-section {
        width: 100% !important;
        padding: 0 !important;
    }

    .web .cases-title {
        font-size: 22px !important;
        line-height: 130% !important;
        padding: 0 16px;
    }

    .web .cases-subtitle {
        font-size: 14px !important;
        padding: 0 16px;
    }

    .web .cases-gallery {
        padding: 16px 40px !important;
    }

    .web .cases-shadow-left,
    .web .cases-shadow-right {
        width: 40px;
    }

    .web .case-card {
        width: 160px;
        height: 280px;
        border-radius: 12px;
    }

    .web .case-card--wide {
        width: 190px;
    }

    /* KPI/Results section */
    .web .results {
        width: 100% !important;
        padding: 0 16px !important;
    }

    .web .results .text-wrapper-8 {
        font-size: 22px !important;
        line-height: 130% !important;
        margin-bottom: 24px !important;
    }

    /* KPI Cards Container with glass effect and blue border */
    .web .cards,
    .web .kpi-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 16px !important;
        padding: 20px !important;
        background: linear-gradient(135deg, 
            rgba(77, 136, 255, 0.15) 0%, 
            rgba(47, 103, 255, 0.08) 100%) !important;
        backdrop-filter: blur(40px) saturate(150%) !important;
        -webkit-backdrop-filter: blur(40px) saturate(150%) !important;
        border-radius: 32px !important;
        border: 2px solid rgba(93, 174, 255, 0.5) !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
                    0 0 60px rgba(77, 136, 255, 0.25),
                    inset 0 1px 0 rgba(255, 255, 255, 0.15),
                    inset 0 -1px 0 rgba(0, 0, 0, 0.3) !important;
        position: relative !important;
        overflow: hidden !important;
    }

    /* Wave.gif background for KPI panel */
    .web .cards::before,
    .web .kpi-grid::before {
        content: '' !important;
        position: absolute !important;
        top: -50% !important;
        left: -50% !important;
        width: 200% !important;
        height: 200% !important;
        background: url('../img/wave.gif') center / cover no-repeat !important;
        opacity: 0.35 !important;
        mix-blend-mode: lighten !important;
        transform: rotate(-8deg) !important;
        pointer-events: none !important;
        z-index: 0 !important;
    }

    /* Subtle top glow overlay */
    .web .cards::after,
    .web .kpi-grid::after {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: radial-gradient(circle at top, 
            rgba(93, 174, 255, 0.1) 0%, 
            transparent 70%) !important;
        pointer-events: none !important;
        z-index: 0 !important;
    }

    /* Individual KPI cards */
    .web .card-KPI-wrapper,
    .web .card-KPI-4,
    .web .card-KPI-6,
    .kpi-card {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 140px !important;
        border-radius: 20px !important;
        position: relative !important;
        z-index: 1 !important;
    }

    /* Card inner containers with glass effect */
    .web .card-KPI-2,
    .web .card-KPI-3,
    .web .card-KPI-5,
    .web .card-KPI-7,
    .kpi-card > div {
        width: 100% !important;
        height: 140px !important;
        position: relative !important;
        left: 0 !important;
        background: rgba(15, 25, 55, 0.45) !important;
        backdrop-filter: blur(24px) saturate(130%) brightness(110%) !important;
        -webkit-backdrop-filter: blur(24px) saturate(130%) brightness(110%) !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        border-radius: 20px !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
                    inset 1px 0 0 rgba(255, 255, 255, 0.15),
                    inset 0 -1px 1px rgba(0, 0, 0, 0.2),
                    inset -1px 0 1px rgba(0, 0, 0, 0.15),
                    0 4px 20px rgba(0, 0, 0, 0.3) !important;
    }

    /* Card text containers */
    .web .text-2,
    .web .text-3 {
        width: 100% !important;
        height: 100% !important;
        left: 0 !important;
        top: 0 !important;
        bottom: auto !important;
        padding: 20px 16px !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        border-radius: 20px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    .web .text-wrapper-9 {
        font-size: 15px !important;
        font-weight: 400 !important;
        opacity: 0.9 !important;
    }

    .web .text-wrapper-10,
    .kpi-value {
        font-size: 44px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
    }

    /* Hide decorative elements inside individual cards on mobile */
    .kpi-card .spline,
    .kpi-card .spline-2,
    .kpi-card .spline-3,
    .kpi-card .spline-4,
    .web .results .spline,
    .web .results .spline-2,
    .web .results .spline-3,
    .web .results .spline-4,
    .web .results .ellipse-3,
    .web .results .ellipse-4,
    .web .results .ellipse-5,
    .web .results .ellipse-6 {
        display: none !important;
    }

    /* Disable ripple/click effects on mobile */
    .ripple {
        display: none !important;
    }

    .nav-button:active,
    .nav-button-primary:active {
        transform: none !important;
    }

    /* Contacts section */
    .web .contacts {
        gap: 60px;
    }

    .web .information {
        padding: 0 16px;
    }

    .web .text-wrapper-11 {
        width: 100%;
        font-size: 14px;
        line-height: 150%;
    }

    /* Footer */
    .web .footer-2 {
        flex-direction: column;
        gap: 32px;
        padding: 32px 20px;
        width: 100%;
        margin-left: 0;
    }

    .web .left-section {
        width: 100%;
        align-items: flex-start;
        text-align: left;
    }

    .web .text-logo {
        align-items: flex-start;
    }

    .web .text-wrapper-12 {
        text-align: left;
    }

    .web .links {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 24px;
    }

    .web .quick-links {
        width: calc(33.333% - 16px);
        min-width: 0;
    }

    .web .quick-links:last-child {
        width: 100%;
    }

    .web .text-wrapper-13 {
        font-size: 14px;
    }

    .web .text-wrapper-14,
    .web .text-wrapper-15 {
        font-size: 13px;
    }

    /* Dialog adjustments */
    .submit-dialog-panel,
    .submit-dialog-ok-panel {
        width: calc(100% - 24px);
        max-width: 380px;
        padding: 16px;
    }

    /* Hide decorative shadows on mobile */
    .web .shadow-2,
    .web .shadow-3,
    .web .shadow-4,
    .web .shadow-5 {
        display: none;
    }

    /* Constrain decorative backgrounds */
    .bg-spots {
        width: 100% !important;
        overflow: hidden !important;
    }

    /* Prevent 100vw from causing horizontal overflow */
    .web .footer-2 {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .web .cases-gallery-wrapper {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .web .orbit-wrapper {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Scroll margin for fixed header */
    section[id] {
        scroll-margin-top: 80px;
    }
}

/* ==========================================
   SMALL MOBILE STYLES (max-width: 480px)
   ========================================== */
@media (max-width: 480px) {
    .web .hero {
        padding: 100px 16px 40px;
    }

    .web .hero .hero-content h1 span {
        font-size: 24px !important;
    }

    .web .text-wrapper,
    .web .text-wrapper-5,
    .web .text-wrapper-8 {
        font-size: 20px !important;
    }

    .web .animation-new {
        max-width: 100% !important;
        height: 460px !important;
    }

    .web .animation-new > div img {
        width: 300px !important;
    }

    /* Smaller icons on small screens */
    .web .animation-new .twitter-dark,
    .web .animation-new .insta-dark,
    .web .animation-new .facebook-dark,
    .web .animation-new .youtube-dark,
    .web .animation-new .tiktok-dark {
        width: 44px !important;
        height: 44px !important;
    }

    .web .animation-new .twitter-dark .group-5,
    .web .animation-new .insta-dark .group,
    .web .animation-new .youtube-dark .group-2,
    .web .animation-new .facebook-dark .vector-5,
    .web .animation-new .tiktok-dark .vector-stroke-4 {
        width: 36px !important;
        height: 36px !important;
    }

    .web .animation-new .facebook-dark .group-3,
    .web .animation-new .tiktok-dark .group-4 {
        width: 36px !important;
        height: 36px !important;
    }

    /* Tighten icon positions */
    .web .animation-new .twitter-dark {
        left: 0% !important;
        top: 30% !important;
    }

    .web .animation-new .insta-dark {
        right: 0% !important;
        top: 18% !important;
    }

    .web .animation-new .tiktok-dark {
        right: 0% !important;
        top: 45% !important;
    }

    .web .animation-new .facebook-dark {
        left: 2% !important;
        bottom: 12% !important;
    }

    .web .animation-new .youtube-dark {
        right: 0% !important;
        bottom: 6% !important;
    }

    /* Smaller badge scale on small screens */
    .web .animation-new .info-wrapper {
        right: 6% !important;
        top: 12% !important;
        transform: scale(0.72) !important;
        transform-origin: top right !important;
    }

    .web .animation-new .counter {
        left: 0% !important;
        top: 50% !important;
        transform: scale(0.72) !important;
        transform-origin: top left !important;
    }

    .web .animation-new .counter-2 {
        right: 4% !important;
        bottom: 24% !important;
        transform: scale(0.72) !important;
        transform-origin: bottom right !important;
    }

    /* Benefits cards - keep two columns but smaller */
    .web .info-cards .div-3 {
        gap: 8px;
    }

    .web .card-benefit .card {
        padding: 12px;
        min-height: 160px;
    }

    .web .card-benefit .img-3 {
        width: 28px;
        height: 28px;
        margin-bottom: 10px;
    }

    .web .text-wrapper-6 {
        font-size: 14px !important;
    }

    .web .text-wrapper-7 {
        font-size: 11px !important;
        line-height: 140%;
    }

    .kpi-card,
    .web .card-KPI-wrapper,
    .web .card-KPI-4,
    .web .card-KPI-6 {
        max-width: 100%;
    }

    .web .text-wrapper-10,
    .kpi-value {
        font-size: 28px !important;
    }

    .web .quick-links {
        width: calc(33.333% - 16px);
        min-width: 0;
        text-align: left;
        align-items: flex-start;
    }

    .web .links {
        justify-content: flex-start;
        gap: 24px;
    }

    .web .buttons-2 {
        align-items: center;
    }
}

/* ==========================================
   LANDSCAPE MOBILE
   ========================================== */
@media (max-width: 768px) and (orientation: landscape) {
    .web .hero {
        padding: 100px 40px 40px;
    }

    .web .div-3 {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .web .animation-new {
        max-width: 300px;
        height: 350px;
    }

    .web .offer {
        flex: 1;
        min-width: 300px;
    }

    .web .cards {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .kpi-card {
        max-width: 280px !important;
    }
}

/* ==========================================
   UTILITY CLASSES
   ========================================== */

/* Hide on mobile */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Hide on desktop */
@media (min-width: 769px) {
    .hide-desktop {
        display: none !important;
    }

    .mobile-menu-btn {
        display: none !important;
    }

    .mobile-menu {
        display: none !important;
    }
}

/* Touch-friendly tap targets */
@media (max-width: 768px) {
    .nav-button,
    .nav-button-primary,
    .btn-submit {
        min-height: 44px;
        min-width: 44px;
    }

    a, button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* Improve readability on small screens */
@media (max-width: 480px) {
    body {
        font-size: 14px;
    }

    .web .p,
    .web .text-wrapper-7,
    .web .text-wrapper-11,
    .web .text-wrapper-12 {
        font-size: 13px;
        line-height: 160%;
    }
}

/* Fix for iOS Safari viewport issues */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 768px) {
        .mobile-menu {
            bottom: 16px;
        }
    }
}

/* Animation for mobile menu */
@media (max-width: 768px) {
    .mobile-menu {
        transform: scale(0.96) translateY(-10px);
        transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .mobile-menu.open {
        transform: scale(1) translateY(0);
    }
}