@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200;font-display:swap;src:url('./fonts/PlusJakartaSans-ExtraLight.woff2') format('woff2')}@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:300;font-display:swap;src:url('./fonts/PlusJakartaSans-Light.woff2') format('woff2')}@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url('./fonts/PlusJakartaSans-Regular.woff2') format('woff2')}@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url('./fonts/PlusJakartaSans-Medium.woff2') format('woff2')}@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url('./fonts/PlusJakartaSans-SemiBold.woff2') format('woff2')}@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url('./fonts/PlusJakartaSans-Bold.woff2') format('woff2')}@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url('./fonts/PlusJakartaSans-ExtraBold.woff2') format('woff2')}

        .xm-content {
            --primary-orange: #FF6A00;
            --dark-orange: #E85A00;
            --black: #0B0B0D;
            --dark-gray: #17171A;
            --medium-gray: #2A2A30;
            --light-gray: #F4F4F6;
            --white: #FFFFFF;
            --gradient-glow: linear-gradient(135deg, #FF6A00 0%, #FF8C00 50%, #FFA500 100%);
        }

        .xm-content * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .xm-content {
            scroll-behavior: smooth;
            scroll-padding-top: 80px;
        }

        .xm-content {
            font-family: 'Inter', sans-serif;
            background-color: var(--black);
            color: var(--white);
            line-height: 1.6;
            overflow-x: hidden;
        }

        .xm-content h1, .xm-content h2, .xm-content h3, .xm-content h4, .xm-content h5, .xm-content h6 {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            line-height: 1.2;
        }

        /* Header */
        .xm-content header {
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
            padding: 1rem 0;
            transition: all 0.3s ease;
        }

        .xm-content header.scrolled {
            background: rgba(11, 11, 13, 0.95);
            backdrop-filter: blur(20px);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
            padding: 0.5rem 0;
        }

        .xm-content .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        .xm-content nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .xm-content .logo {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--white);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .xm-content .logo span {
            color: var(--primary-orange);
        }

        .xm-content .nav-links {
            display: flex;
            list-style: none;
            gap: 2rem;
            align-items: center;
        }

        .xm-content .nav-links a {
            color: var(--white);
            text-decoration: none;
            font-weight: 500;
            font-size: 0.95rem;
            transition: color 0.3s;
            position: relative;
        }

        .xm-content .nav-links a:hover {
            color: var(--primary-orange);
        }

        .xm-content .nav-links a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--primary-orange);
            transition: width 0.3s;
        }

        .xm-content .nav-links a:hover::after {
            width: 100%;
        }

        .xm-content .cta-button {
            background: var(--gradient-glow);
            color: var(--white);
            padding: 0.75rem 1.5rem;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            transition: transform 0.3s, box-shadow 0.3s;
            border: none;
            cursor: pointer;
            font-size: 0.95rem;
        }

        .xm-content .cta-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(255, 106, 0, 0.4);
        }

        .xm-content .mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            color: var(--white);
            font-size: 1.5rem;
            cursor: pointer;
        }

        /* Hero Section */
        .xm-content .hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            padding-top: 80px;
            position: relative;
            overflow: hidden;
        }

        .xm-content .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                radial-gradient(circle at 20% 50%, rgba(255, 106, 0, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(255, 106, 0, 0.1) 0%, transparent 50%);
            pointer-events: none;
        }

        .xm-content .hero-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
        }

        .xm-content .hero-content {
            position: relative;
            z-index: 2;
        }

        .xm-content .badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: rgba(255, 106, 0, 0.1);
            border: 1px solid rgba(255, 106, 0, 0.3);
            padding: 0.5rem 1rem;
            border-radius: 50px;
            font-size: 0.9rem;
            color: var(--primary-orange);
            margin-bottom: 1.5rem;
        }

        .xm-content .hero h1 {
            font-size: 3.5rem;
            margin-bottom: 1.5rem;
            background: linear-gradient(135deg, var(--white) 0%, var(--light-gray) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .xm-content .hero p {
            font-size: 1.25rem;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 2rem;
            max-width: 600px;
        }

        .xm-content .hero-buttons {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .xm-content .btn-secondary {
            background: transparent;
            color: var(--white);
            border: 2px solid rgba(255, 255, 255, 0.3);
            padding: 0.75rem 1.5rem;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.3s;
        }

        .xm-content .btn-secondary:hover {
            border-color: var(--primary-orange);
            color: var(--primary-orange);
        }

        .xm-content .hero-visual {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .xm-content .hero-image-container {
            position: relative;
            width: 100%;
            max-width: 600px;
        }

        .xm-content .floating-card {
            position: absolute;
            background: rgba(23, 23, 26, 0.9);
            border: 1px solid rgba(255, 106, 0, 0.2);
            border-radius: 16px;
            padding: 1rem;
            backdrop-filter: blur(10px);
            animation: float 6s ease-in-out infinite;
        }

        .xm-content .floating-card:nth-child(1) {
            top: 10%;
            left: -10%;
            animation-delay: 0s;
        }

        .xm-content .floating-card:nth-child(2) {
            bottom: 20%;
            right: -5%;
            animation-delay: 2s;
        }

        .xm-content .floating-card:nth-child(3) {
            top: 50%;
            right: -10%;
            animation-delay: 4s;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }

        .xm-content .code-block {
            font-family: 'Courier New', monospace;
            font-size: 0.8rem;
            color: var(--primary-orange);
        }

        .xm-content .trust-badges {
            display: flex;
            gap: 2rem;
            margin-top: 3rem;
            flex-wrap: wrap;
        }

        .xm-content .trust-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.7);
        }

        .xm-content .trust-item svg {
            color: var(--primary-orange);
        }

        /* Stats Bar */
        .xm-content .stats-bar {
            background: var(--dark-gray);
            padding: 3rem 0;
            border-top: 1px solid rgba(255, 106, 0, 0.1);
            border-bottom: 1px solid rgba(255, 106, 0, 0.1);
        }

        .xm-content .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 2rem;
            text-align: center;
        }

        .xm-content .stat-item h3 {
            font-size: 2.5rem;
            color: var(--primary-orange);
            margin-bottom: 0.5rem;
        }

        .xm-content .stat-item p {
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.95rem;
        }

        /* Section Styles */
        .xm-content section {
            padding: 6rem 0;
        }

        .xm-content .section-header {
            text-align: center;
            margin-bottom: 4rem;
        }

        .xm-content .section-header h2 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            color: var(--white);
        }

        .xm-content .section-header p {
            color: rgba(255, 255, 255, 0.7);
            font-size: 1.1rem;
            max-width: 600px;
            margin: 0 auto;
        }

        .xm-content .highlight {
            color: var(--primary-orange);
        }

        /* About Section */
        .xm-content .about-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: start;
        }

        .xm-content .about-timeline {
            position: relative;
            padding-left: 2rem;
        }

        .xm-content .timeline-line {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 2px;
            background: linear-gradient(to bottom, var(--primary-orange), transparent);
        }

        .xm-content .timeline-item {
            position: relative;
            margin-bottom: 2rem;
            padding-left: 2rem;
        }

        .xm-content .timeline-item::before {
            content: '';
            position: absolute;
            left: -1.5rem;
            top: 0.5rem;
            width: 12px;
            height: 12px;
            background: var(--primary-orange);
            border-radius: 50%;
            border: 3px solid var(--black);
        }

        .xm-content .timeline-item h4 {
            color: var(--primary-orange);
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .xm-content .timeline-item h3 {
            font-size: 1.3rem;
            margin-bottom: 0.5rem;
        }

        .xm-content .timeline-item p {
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.95rem;
        }

        .xm-content .about-cards {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem;
            margin-top: 2rem;
        }

        .xm-content .info-card {
            background: var(--dark-gray);
            border: 1px solid rgba(255, 106, 0, 0.1);
            border-radius: 16px;
            padding: 1.5rem;
            transition: transform 0.3s, border-color 0.3s;
        }

        .xm-content .info-card:hover {
            transform: translateY(-5px);
            border-color: rgba(255, 106, 0, 0.3);
        }

        .xm-content .info-card h4 {
            color: var(--primary-orange);
            margin-bottom: 0.5rem;
            font-size: 1.1rem;
        }

        .xm-content .founder-message {
            background: linear-gradient(135deg, rgba(255, 106, 0, 0.1) 0%, rgba(23, 23, 26, 0.5) 100%);
            border-left: 4px solid var(--primary-orange);
            padding: 2rem;
            border-radius: 0 16px 16px 0;
            margin-top: 2rem;
        }

        .xm-content .founder-message h4 {
            color: var(--primary-orange);
            margin-bottom: 1rem;
        }

        .xm-content .founder-message p {
            font-style: italic;
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.8;
        }

        /* Services Section */
        .xm-content .services {
            background: var(--dark-gray);
        }

        .xm-content .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }

        .xm-content .service-card {
            background: var(--black);
            border: 1px solid rgba(255, 106, 0, 0.1);
            border-radius: 20px;
            padding: 2rem;
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
        }

        .xm-content .service-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: var(--gradient-glow);
            transform: scaleX(0);
            transition: transform 0.3s;
        }

        .xm-content .service-card:hover::before {
            transform: scaleX(1);
        }

        .xm-content .service-card:hover {
            transform: translateY(-10px);
            border-color: rgba(255, 106, 0, 0.3);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }

        .xm-content .service-icon {
            width: 60px;
            height: 60px;
            background: rgba(255, 106, 0, 0.1);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
            color: var(--primary-orange);
            font-size: 1.5rem;
        }

        .xm-content .service-card h3 {
            font-size: 1.3rem;
            margin-bottom: 1rem;
        }

        .xm-content .service-card p {
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.95rem;
            margin-bottom: 1.5rem;
        }

        .xm-content .service-features {
            list-style: none;
            margin-bottom: 1.5rem;
        }

        .xm-content .service-features li {
            padding: 0.3rem 0;
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .xm-content .service-features li::before {
            content: '✓';
            color: var(--primary-orange);
            font-weight: bold;
        }

        .xm-content .service-cta {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--primary-orange);
            text-decoration: none;
            font-weight: 600;
            font-size: 0.9rem;
            transition: gap 0.3s;
        }

        .xm-content .service-cta:hover {
            gap: 1rem;
        }

        /* Process Section */
        .xm-content .process-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 1.5rem;
        }

        .xm-content .process-step {
            text-align: center;
            position: relative;
        }

        .xm-content .process-step:not(:last-child)::after {
            content: '→';
            position: absolute;
            right: -1rem;
            top: 2rem;
            color: var(--primary-orange);
            font-size: 1.5rem;
        }

        .xm-content .step-number {
            width: 60px;
            height: 60px;
            background: var(--gradient-glow);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 1.5rem;
            margin: 0 auto 1rem;
            position: relative;
        }

        .xm-content .step-number::before {
            content: '';
            position: absolute;
            inset: -5px;
            border-radius: 50%;
            border: 2px solid rgba(255, 106, 0, 0.3);
        }

        .xm-content .process-step h3 {
            font-size: 1.1rem;
            margin-bottom: 0.5rem;
        }

        .xm-content .process-step p {
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.9rem;
        }

        /* Why Us Section */
        .xm-content .why-us {
            background: linear-gradient(135deg, var(--dark-gray) 0%, var(--black) 100%);
        }

        .xm-content .why-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 2rem;
        }

        .xm-content .why-card {
            display: flex;
            gap: 1.5rem;
            padding: 2rem;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 16px;
            border: 1px solid rgba(255, 106, 0, 0.1);
            transition: all 0.3s;
        }

        .xm-content .why-card:hover {
            background: rgba(255, 106, 0, 0.05);
            border-color: rgba(255, 106, 0, 0.3);
        }

        .xm-content .why-icon {
            width: 50px;
            height: 50px;
            background: rgba(255, 106, 0, 0.1);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary-orange);
            font-size: 1.5rem;
            flex-shrink: 0;
        }

        .xm-content .why-content h3 {
            font-size: 1.2rem;
            margin-bottom: 0.5rem;
        }

        .xm-content .why-content p {
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.95rem;
        }

        /* Projects Section */
        .xm-content .projects-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
        }

        .xm-content .project-card {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            aspect-ratio: 4/3;
            cursor: pointer;
            group: project;
        }

        .xm-content .project-image {
            width: 100%;
            height: 100%;
            background: var(--dark-gray);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
            transition: transform 0.5s;
        }

        .xm-content .project-card:hover .project-image {
            transform: scale(1.1);
        }

        .xm-content .project-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(11, 11, 13, 0.95) 0%, transparent 100%);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 2rem;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .xm-content .project-card:hover .project-overlay {
            opacity: 1;
        }

        .xm-content .project-category {
            color: var(--primary-orange);
            font-size: 0.85rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 0.5rem;
        }

        .xm-content .project-title {
            font-size: 1.3rem;
            margin-bottom: 0.5rem;
        }

        .xm-content .project-tags {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .xm-content .project-tag {
            background: rgba(255, 106, 0, 0.2);
            color: var(--primary-orange);
            padding: 0.25rem 0.75rem;
            border-radius: 50px;
            font-size: 0.8rem;
        }

        .xm-content .project-cta-card {
            background: var(--gradient-glow);
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 2rem;
            aspect-ratio: 4/3;
        }

        .xm-content .project-cta-card h3 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }

        /* Testimonials */
        .xm-content .testimonials {
            background: var(--dark-gray);
        }

        .xm-content .testimonial-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
        }

        .xm-content .testimonial-card {
            background: var(--black);
            border-radius: 20px;
            padding: 2rem;
            border: 1px solid rgba(255, 106, 0, 0.1);
            position: relative;
        }

        .xm-content .testimonial-card::before {
            content: '"';
            position: absolute;
            top: 1rem;
            right: 2rem;
            font-size: 4rem;
            color: rgba(255, 106, 0, 0.1);
            font-family: serif;
            line-height: 1;
        }

        .xm-content .testimonial-text {
            color: rgba(255, 255, 255, 0.9);
            font-size: 1rem;
            line-height: 1.8;
            margin-bottom: 1.5rem;
            font-style: italic;
        }

        .xm-content .testimonial-author {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .xm-content .author-avatar {
            width: 50px;
            height: 50px;
            background: var(--gradient-glow);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            color: var(--white);
        }

        .xm-content .author-info h4 {
            font-size: 1rem;
            margin-bottom: 0.25rem;
        }

        .xm-content .author-info p {
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.85rem;
        }

        /* FAQ Section */
        .xm-content .faq-container {
            max-width: 800px;
            margin: 0 auto;
        }

        .xm-content .faq-item {
            background: var(--dark-gray);
            border-radius: 12px;
            margin-bottom: 1rem;
            overflow: hidden;
            border: 1px solid rgba(255, 106, 0, 0.1);
        }

        .xm-content .faq-question {
            width: 100%;
            padding: 1.5rem;
            background: none;
            border: none;
            color: var(--white);
            font-family: 'Space Grotesk', sans-serif;
            font-size: 1.1rem;
            font-weight: 600;
            text-align: left;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: color 0.3s;
        }

        .xm-content .faq-question:hover {
            color: var(--primary-orange);
        }

        .xm-content .faq-question::after {
            content: '+';
            font-size: 1.5rem;
            color: var(--primary-orange);
            transition: transform 0.3s;
        }

        .xm-content .faq-item.active .faq-question::after {
            transform: rotate(45deg);
        }

        .xm-content .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }

        .xm-content .faq-answer-content {
            padding: 0 1.5rem 1.5rem;
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.8;
        }

        .xm-content .faq-item.active .faq-answer {
            max-height: 500px;
        }

        /* Contact Section */
        .xm-content .contact {
            background: linear-gradient(135deg, var(--black) 0%, var(--dark-gray) 100%);
            position: relative;
        }

        .xm-content .contact::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 80% 20%, rgba(255, 106, 0, 0.1) 0%, transparent 50%);
        }

        .xm-content .contact-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            position: relative;
            z-index: 2;
        }

        .xm-content .contact-info h3 {
            font-size: 2rem;
            margin-bottom: 1rem;
        }

        .xm-content .contact-info > p {
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 2rem;
        }

        .xm-content .contact-methods {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .xm-content .contact-method {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1.5rem;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 16px;
            border: 1px solid rgba(255, 106, 0, 0.1);
            transition: all 0.3s;
        }

        .xm-content .contact-method:hover {
            border-color: rgba(255, 106, 0, 0.3);
            transform: translateX(10px);
        }

        .xm-content .contact-icon {
            width: 50px;
            height: 50px;
            background: rgba(255, 106, 0, 0.1);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary-orange);
            font-size: 1.5rem;
        }

        .xm-content .contact-details h4 {
            margin-bottom: 0.25rem;
        }

        .xm-content .contact-details p {
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.9rem;
        }

        .xm-content .whatsapp-cta-large {
            background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
            color: var(--white);
            padding: 2rem;
            border-radius: 20px;
            text-align: center;
            margin-top: 2rem;
        }

        .xm-content .whatsapp-cta-large h4 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }

        .xm-content .whatsapp-cta-large p {
            margin-bottom: 1.5rem;
            opacity: 0.9;
        }

        .xm-content .contact-form-container {
            background: var(--black);
            padding: 3rem;
            border-radius: 24px;
            border: 1px solid rgba(255, 106, 0, 0.1);
        }

        .xm-content .form-group {
            margin-bottom: 1.5rem;
        }

        .xm-content .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            color: rgba(255, 255, 255, 0.9);
            font-weight: 500;
        }

        .xm-content .form-group input,
        .xm-content .form-group textarea,
        .xm-content .form-group select {
            width: 100%;
            padding: 1rem;
            background: var(--dark-gray);
            border: 1px solid rgba(255, 106, 0, 0.2);
            border-radius: 12px;
            color: var(--white);
            font-family: 'Inter', sans-serif;
            transition: border-color 0.3s;
        }

        .xm-content .form-group input:focus,
        .xm-content .form-group textarea:focus,
        .xm-content .form-group select:focus {
            outline: none;
            border-color: var(--primary-orange);
        }

        .xm-content .form-group textarea {
            min-height: 120px;
            resize: vertical;
        }

        .xm-content .submit-btn {
            width: 100%;
            background: var(--gradient-glow);
            color: var(--white);
            border: none;
            padding: 1rem;
            border-radius: 12px;
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .xm-content .submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(255, 106, 0, 0.4);
        }

        /* Footer */
        .xm-content footer {
            background: var(--black);
            border-top: 1px solid rgba(255, 106, 0, 0.1);
            padding: 4rem 0 2rem;
        }

        .xm-content .footer-grid {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 3rem;
            margin-bottom: 3rem;
        }

        .xm-content .footer-brand p {
            color: rgba(255, 255, 255, 0.7);
            margin: 1rem 0;
            font-size: 0.95rem;
        }

        .xm-content .social-links {
            display: flex;
            gap: 1rem;
        }

        .xm-content .social-links a {
            width: 40px;
            height: 40px;
            background: rgba(255, 106, 0, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--white);
            text-decoration: none;
            transition: all 0.3s;
        }

        .xm-content .social-links a:hover {
            background: var(--primary-orange);
            transform: translateY(-3px);
        }

        .xm-content .footer-links h4 {
            color: var(--primary-orange);
            margin-bottom: 1.5rem;
            font-size: 1.1rem;
        }

        .xm-content .footer-links ul {
            list-style: none;
        }

        .xm-content .footer-links li {
            margin-bottom: 0.75rem;
        }

        .xm-content .footer-links a {
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            transition: color 0.3s;
            font-size: 0.95rem;
        }

        .xm-content .footer-links a:hover {
            color: var(--primary-orange);
        }

        .xm-content .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding-top: 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .xm-content .footer-bottom p {
            color: rgba(255, 255, 255, 0.5);
            font-size: 0.9rem;
        }

        .xm-content .footer-bottom-links {
            display: flex;
            gap: 2rem;
        }

        .xm-content .footer-bottom-links a {
            color: rgba(255, 255, 255, 0.5);
            text-decoration: none;
            font-size: 0.9rem;
            transition: color 0.3s;
        }

        .xm-content .footer-bottom-links a:hover {
            color: var(--primary-orange);
        }

        /* Floating WhatsApp Button */
        .xm-content .floating-whatsapp {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            width: 60px;
            height: 60px;
            background: #25D366;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--white);
            font-size: 1.8rem;
            text-decoration: none;
            box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
            transition: transform 0.3s, box-shadow 0.3s;
            z-index: 999;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
            70% { box-shadow: 0 0 0 20px rgba(37, 211, 102, 0); }
            100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
        }

        .xm-content .floating-whatsapp:hover {
            transform: scale(1.1) translateY(-5px);
            box-shadow: 0 8px 30px rgba(37, 211, 102, 0.6);
        }

        /* Mobile Responsive */
        @media (max-width: 1024px) {
            .xm-content .hero-grid,
            .xm-content .about-grid,
            .xm-content .contact-grid {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

            .xm-content .process-grid {
                grid-template-columns: repeat(3, 1fr);
            }

            .xm-content .process-step:nth-child(3)::after {
                display: none;
            }

            .xm-content .projects-grid,
            .xm-content .testimonial-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .xm-content .footer-grid {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 768px) {
            .xm-content .nav-links {
                display: none;
            }

            .xm-content .mobile-menu-btn {
                display: block;
            }

            .xm-content .hero h1 {
                font-size: 2.2rem;
            }

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

            .xm-content .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .xm-content .process-grid {
                grid-template-columns: 1fr;
            }

            .xm-content .process-step::after {
                display: none;
            }

            .xm-content .why-grid,
            .xm-content .projects-grid,
            .xm-content .testimonial-grid {
                grid-template-columns: 1fr;
            }

            .xm-content .about-cards {
                grid-template-columns: 1fr;
            }

            .xm-content .footer-grid {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

            .xm-content .footer-bottom {
                flex-direction: column;
                text-align: center;
            }

            .xm-content .floating-whatsapp {
                bottom: 1rem;
                right: 1rem;
                width: 50px;
                height: 50px;
                font-size: 1.5rem;
            }
        }

        /* Animations */
        .xm-content .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s, transform 0.6s;
        }

        .xm-content .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Modal */
        .xm-content .modal {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.9);
            z-index: 2000;
            align-items: center;
            justify-content: center;
            padding: 2rem;
        }

        .xm-content .modal.active {
            display: flex;
        }

        .xm-content .modal-content {
            background: var(--dark-gray);
            border-radius: 24px;
            max-width: 800px;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            position: relative;
            border: 1px solid rgba(255, 106, 0, 0.2);
        }

        .xm-content .modal-close {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: none;
            border: none;
            color: var(--white);
            font-size: 2rem;
            cursor: pointer;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: background 0.3s;
        }

        .xm-content .modal-close:hover {
            background: rgba(255, 106, 0, 0.1);
        }

        .xm-content .modal-body {
            padding: 3rem;
        }

        .xm-content .modal-body h2 {
            margin-bottom: 1.5rem;
            color: var(--primary-orange);
        }

        .xm-content .modal-body img {
            width: 100%;
            border-radius: 12px;
            margin-bottom: 1.5rem;
            background: var(--black);
            aspect-ratio: 16/9;
            object-fit: cover;
        }

        .xm-content .modal-body p {
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.8;
            margin-bottom: 1rem;
        }

        .xm-content .modal-tags {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
            margin-top: 1.5rem;
        }

        /* Scrollbar */
        .xm-content ::-webkit-scrollbar {
            width: 10px;
        }

        .xm-content ::-webkit-scrollbar-track {
            background: var(--black);
        }

        .xm-content ::-webkit-scrollbar-thumb {
            background: var(--primary-orange);
            border-radius: 5px;
        }

        .xm-content ::-webkit-scrollbar-thumb:hover {
            background: var(--dark-orange);
        }
    

:root{--primary-orange:#ff6a00;--dark-orange:#e85a00;--black:#0a1620;--dark-gray:#11232f;--medium-gray:#203440;--light-gray:#f4f4f6;--white:#fff;--gradient-glow:linear-gradient(135deg,#ff6a00,#ff8c00,#ffa500)}
html{background:#0a1620;scroll-padding-top:100px}body{margin:0;background:#0a1620;color:white;font:400 16px/1.6 'Plus Jakarta Sans',sans-serif;overflow-x:hidden}*{box-sizing:border-box}a{color:inherit}button,input,select,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid #ff9a46;outline-offset:5px}[hidden]{display:none!important}
.xm-header{position:absolute;z-index:100;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:1680px;margin:auto;padding:25px 40px}.xm-logo{display:flex;align-items:center;text-decoration:none;gap:10px;font-size:28px;font-weight:800;letter-spacing:-1.3px;line-height:1.1}.xm-logo span{color:#ff6a00;font-size:42px}.xm-logo small{display:block;font-size:9px;font-weight:500;letter-spacing:4px;margin-top:7px}.xm-links{display:flex;gap:24px;align-items:center}.xm-links a{text-decoration:none;font-size:14px}.xm-links a:hover{color:#ff9a46}.xm-quote{padding:12px 22px;background:#ff6a00;border-radius:50px;text-decoration:none;font-size:14px}.xm-toggle{display:none;background:none;border:1px solid #ffffff40;border-radius:50%;color:white;width:46px;height:46px}.xm-mobile{position:fixed;inset:0;z-index:99;padding:120px 30px 100px;background:#0a1620fa;display:flex;flex-direction:column;gap:22px;font-size:24px}.xm-mobile a{text-decoration:none}.hero-field{min-height:100svh;overflow:hidden}sr7-module{display:block}sr7-module:not(.sr7-initialised) sr7-txt{visibility:hidden}
.xm-content{font:400 16px/1.7 'Plus Jakarta Sans',sans-serif;color:white}.xm-content h1,.xm-content h2,.xm-content h3,.xm-content h4,.xm-content .logo{font-family:'Plus Jakarta Sans',sans-serif}.xm-content .container{max-width:1440px}.xm-content section{scroll-margin-top:30px}.xm-content .section-header h2{font-size:clamp(30px,4vw,56px);letter-spacing:-1.5px}.xm-content .section-header{margin-bottom:64px}.xm-content .stats-bar{background:linear-gradient(#0a1620,#11232f);border-top:0;padding:75px 0}.xm-content .about,.xm-content .why-us,.xm-content .testimonials{background:#0a1620}.xm-content .services,.xm-content .faq{background:#112b38;border-radius:40px;max-width:1680px;margin:0 auto}.xm-content .service-card,.xm-content .why-card,.xm-content .testimonial-card{background:#10232e;border-color:#ffffff12;border-radius:24px}.xm-content .service-card:hover{border-color:#ff6a0066}.xm-content .service-icon{background:linear-gradient(135deg,#ff6a0026,#ff6a0008)}.xm-content .process,.xm-content .projects,.xm-content .contact{background:#0a1620}.xm-content .project-card{border-radius:24px;overflow:hidden}.xm-content footer{background:#08121b}.xm-content .form-note{font-size:12px;color:#ffffff80;margin-top:14px}.xm-content .contact-form input,.xm-content .contact-form select,.xm-content .contact-form textarea{color-scheme:dark}.xm-content .faq-question{font-family:inherit}.xm-content .faq-answer{transition:none}.xm-content .faq-item.active .faq-answer{max-height:900px}
.xm-wa{position:fixed;right:24px;bottom:22px;z-index:90;display:flex;align-items:center;gap:9px;padding:13px 22px;border-radius:50px;background:#ff6a00;color:white;text-decoration:none;font-size:14px;box-shadow:0 5px 35px #0005}.xm-dialog{max-width:640px;width:calc(100% - 32px);border:1px solid #ff6a0040;background:#11232f;color:white;border-radius:24px;padding:40px;font-family:inherit}.xm-dialog::backdrop{background:#000b}.xm-dialog h2{font-size:30px;line-height:1.3}.xm-dialog p{color:#ffffffb3}.xm-dialog button{float:right;background:none;border:0;color:white;font-size:28px;cursor:pointer}.xm-dialog a{display:inline-block;background:#ff6a00;padding:12px 22px;border-radius:30px;text-decoration:none;margin-top:20px}
@media(min-width:1100px){.xm-content .about-content{position:relative}.xm-content .service-grid{align-items:stretch}}
@media(max-width:1100px){.xm-links,.xm-header>.xm-quote{display:none}.xm-toggle{display:block}.xm-header{padding:22px 25px}.xm-logo{font-size:23px}.xm-logo span{font-size:35px}.xm-content .services,.xm-content .faq{border-radius:24px}.xm-content .container{padding:0 24px}}
@media(max-width:600px){.xm-content .section-header{margin-bottom:36px}.xm-content section{padding-top:65px;padding-bottom:65px}.xm-wa{right:16px;bottom:16px;font-size:13px;padding:10px 16px}.xm-content footer{padding-bottom:85px}.xm-content .contact-form{padding:24px}.xm-dialog{padding:24px}}
@media(prefers-reduced-motion:reduce){.xm-content *{animation:none!important;transition:none!important}.xm-content .fade-in{opacity:1;transform:none}}

.xm-content{--black:#0a1620;--dark-gray:#11232f;--medium-gray:#203440}
.xm-content .services-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1100px){.xm-content .services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.xm-content .services-grid{grid-template-columns:minmax(0,1fr)}}