/* Global Typography */
    body { font-family: 'Inter', sans-serif; }
    h1, h2, h3, h4, h5, h6, .font-heading { font-family: 'Montserrat', sans-serif; }

    /* Clip Paths */
    .hero-clip-dark { clip-path: polygon(35% 0, 100% 0, 100% 100%, 15% 100%); }
    .hero-clip-orange { clip-path: polygon(40% 0, 100% 0, 100% 100%, 0% 100%); }
    .service-card-angle { clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%); }
    .banner-orange-angle { clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%); }
    .bg-accent-angle { clip-path: polygon(25% 0, 100% 0, 100% 100%, 0% 100%); }
    .about-slant { clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%); }
    @media (max-width: 1024px) { .about-slant { clip-path: none; } }

    /* Animations */
    .animate-fade-up { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
    .animate-fade-up.visible { opacity: 1; transform: translateY(0); }
    .animate-fade-in { opacity: 0; transition: all 1s ease; }
    .animate-fade-in.visible { opacity: 1; }

    .service-card { transition: all 0.4s ease; cursor: pointer; }
    .service-card:hover { transform: translateY(-5px); }
    .service-card .icon-wrapper { transition: all 0.4s ease; color: #E44B2F; }
    .service-card:hover .icon-wrapper { transform: scale(1.1); color: #082C3D; }

    .play-btn { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); animation: pulse-white 2s infinite; }
    @keyframes pulse-white {
        0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }
        70% { box-shadow: 0 0 0 15px rgba(255, 255, 255, 0); }
        100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
    }

    .person-fade {
        -webkit-mask-image: linear-gradient(to left, black 55%, transparent 100%), linear-gradient(to top, black 70%, transparent 100%);
        -webkit-mask-composite: source-in, source-in;
        mask-image: linear-gradient(to left, black 55%, transparent 100%), linear-gradient(to top, black 70%, transparent 100%);
        mask-composite: intersect;
    }

    /* HERO SLIDER STYLES */
    .hero-slider-container { position: absolute; width: 100%; height: 100%; overflow: hidden; inset: 0; z-index: 0; }
    .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease-in-out; }
    .hero-slide.active { opacity: 1; }
    .hero-slide img { width: 100%; height: 100%; object-fit: cover; }

    .slide-number {
        transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        cursor: pointer; font-weight: 600; font-size: 13px;
        padding: 8px 10px; border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 4px; display: inline-block; color: rgba(255, 255, 255, 0.6);
    }
    .slide-number.active { color: #E44B2F; border-color: #E44B2F; transform: scale(1.05); }
    .slide-number:not(.active):hover { color: #E44B2F; border-color: #E44B2F; }
    .progress-bar { transition: all 0.6s ease; }

    .slider-counter { position: absolute; bottom: 100px; right: 40px; z-index: 45; font-family: 'Courier New', monospace; font-size: 11px; color: rgba(255, 255, 255, 0.5); }
    .slider-counter .current { color: #E44B2F; font-size: 13px; font-weight: bold; }

    .scroll-indicator { position: absolute; bottom: 50px; right: 48px; z-index: 45; display: flex; flex-direction: column; align-items: center; gap: 8px; }
    .scroll-indicator .icon { width: 20px; height: 28px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 10px; display: flex; align-items: center; justify-content: center; }
    .scroll-indicator .dot { width: 3px; height: 3px; background: rgba(255, 255, 255, 0.6); border-radius: 50%; animation: scroll-bounce 2s infinite; }
    @keyframes scroll-bounce { 0%, 100% { transform: translateY(0); opacity: 0.6; } 50% { transform: translateY(6px); opacity: 1; } }
    .scroll-indicator .text { font-size: 9px; letter-spacing: 1px; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; }

    .stats-below { display: flex; gap: 32px; margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
    .stat-number { font-size: 18px; font-weight: 600; color: white; line-height: 1; margin-bottom: 4px; font-family: 'Montserrat', sans-serif; }
    .stat-label { font-size: 12px; color: rgba(255, 255, 255, 0.7); font-weight: 400; }

    @media (max-width: 768px) {
        .slider-counter { bottom: 90px; right: 16px; }
        .scroll-indicator { bottom: 40px; right: 20px; }
        .stats-below { gap: 20px; flex-wrap: wrap; }
    }
    @media (min-width: 1025px) and (max-width: 1279px) { .absolute.right-12.top-1\/2 { display: none !important; } }
    @media (min-width: 1280px) { .absolute.right-12.top-1\/2 { display: flex !important; } }

    /* Hide scrollbars but keep functionality */
    .hide-scroll::-webkit-scrollbar { display: none; }
    .hide-scroll { -ms-overflow-style: none; scrollbar-width: none; scroll-behavior: smooth; }

    /* Draggable slider active state */
    .hide-scroll.active { cursor: grabbing; cursor: -webkit-grabbing; scroll-behavior: auto; }

    .quote-box-gradient { background: linear-gradient(135deg, rgba(228, 75, 47, 0.85) 0%, rgba(8, 44, 61, 0.95) 100%); backdrop-filter: blur(4px); }
    .industry-grid { border-top: 1px solid rgba(255, 255, 255, 0.1); border-left: 1px solid rgba(255, 255, 255, 0.1); }
    .industry-card { border-right: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }

    .reveal-up { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
    .reveal-up.visible { opacity: 1; transform: translateY(0); }
    .reveal-delay-1 { transition-delay: 0.1s; }
    .reveal-delay-2 { transition-delay: 0.2s; }
    .reveal-delay-3 { transition-delay: 0.3s; }

    @media (min-width: 1024px) {
        .slant-slash { clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%); }
        .tab-parallelogram { clip-path: polygon(15% 0, 100% 0, 85% 100%, 0 100%); }
        .triangle-br { clip-path: polygon(100% 0, 100% 100%, 0 100%); }
    }

    .hover-pop { transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
    .feature-item:hover .hover-pop { transform: scale(1.2); color: #E44B2F; }

    .reveal-fade { opacity: 0; transform: translateY(20px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
    .reveal-fade.visible { opacity: 1; transform: translateY(0); }
    .client-card { transition: all 0.3s ease; }
    .client-card:hover { transform: translateY(-3px); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05); }

    .client-marquee {
        display: flex;
        gap: 12px;
        width: max-content;
        animation: clientScroll 25s linear infinite;
    }

    @keyframes clientScroll {
        from { transform: translateX(0); }
        to { transform: translateX(calc(-50% - 6px)); }
    }

    .client-marquee:hover { animation-play-state: paused; }

    /* Premium Hover Border Draw Animation */
    .draw-border-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; }
    .draw-border-rect {
        fill: none;
        stroke: #E44B2F;
        stroke-width: 1.5px;
        stroke-dasharray: 1800;
        stroke-dashoffset: 1800;
        transition: stroke-dashoffset 0.9s cubic-bezier(0.25, 1, 0.5, 1);
    }
    .group:hover .draw-border-rect { stroke-dashoffset: 0; }

    .number-pill {
        position: absolute; top: 20px; left: 20px; z-index: 20;
        color: rgba(255,255,255,0.85); font-weight: 700; font-size: 13px;
        letter-spacing: 0.15em; font-family: 'Montserrat', sans-serif;
    }

    /* Icon pill — sibling of the diagonal band, NOT clipped by it */
    .icon-pill {
        position: absolute; top: -30px; left: 24px; width: 56px; height: 56px;
        border-radius: 9999px; background: #fff; display: flex; align-items: center; justify-content: center;
        box-shadow: 0 8px 20px -6px rgba(8,44,61,0.25), 0 2px 6px rgba(0,0,0,0.08), inset 0 0 0 1px rgba(8,44,61,0.06);
        z-index: 40; transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
    }
    .group:hover .icon-pill { transform: scale(1.06); box-shadow: 0 10px 24px -6px rgba(228,75,47,0.35), 0 2px 6px rgba(0,0,0,0.1), inset 0 0 0 1px rgba(228,75,47,0.15); }
    .icon-pill img { width: 24px; height: 24px; object-fit: contain; position: relative; z-index: 2; transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); }
    .group:hover .icon-pill img { transform: scale(1.1); }
    .icon-pill-svg { position: absolute; inset: -3px; width: calc(100% + 6px); height: calc(100% + 6px); pointer-events: none; overflow: visible; transform: rotate(-90deg); }
    .icon-pill-circle { fill: none; stroke: #E44B2F; stroke-width: 2px; stroke-linecap: round; stroke-dasharray: 185; stroke-dashoffset: 185; transition: stroke-dashoffset 0.8s cubic-bezier(0.65, 0, 0.35, 1); }
    .group:hover .icon-pill-circle { stroke-dashoffset: 0; }

    /* Diagonal color band behind the pill — fades toward its edge instead of a hard cut */
    .diagonal-band { position: absolute; top: 0; left: 0; width: 100%; height: 105px; z-index: 10; pointer-events: none; margin-top: -1px; clip-path: polygon(0 0, 100% 0, 0 100%); }

    @media (max-width: 1023px) {
        .hero-clip-dark, section.relative.h-\[100vh\] { min-height: 100dvh; }
        section.relative.h-\[100vh\] .absolute.bottom-0.right-\[10\%\] { right: -5% !important; height: 55% !important; opacity: 0.25; z-index: 5 !important; }
    }
    @media (max-width: 640px) {
        section.relative.h-\[100vh\] .absolute.bottom-0.right-\[10\%\] { display: none; }
    }
    @media (max-width: 1023px) {
        section.relative.h-\[100vh\] { height: auto !important; min-height: 100dvh !important; padding-top: 6rem; padding-bottom: 3rem; }
        section.relative.h-\[100vh\] .absolute.bottom-0.right-\[10\%\] {
            right: -10% !important; left: auto !important; top: 0 !important; bottom: 0 !important;
            height: 100% !important; width: auto !important; z-index: 1 !important; opacity: 0.15 !important;
        }
    }