:root {
            --color-primary: #081B4B;
            --color-primary-light: #0F2A6B;
            --color-primary-dark: #051234;
            --color-accent: #FF6A13;
            --color-accent-light: #FF8533;
            --color-accent-dark: #E55A00;
            --color-white: #FFFFFF;
            --color-gray-50: #F8FAFC;
            --color-gray-100: #F1F5F9;
            --color-gray-200: #E2E8F0;
            --color-gray-300: #CBD5E1;
            --color-gray-400: #94A3B8;
            --color-gray-500: #64748B;
            --color-gray-600: #475569;
            --color-gray-700: #334155;
            --color-gray-800: #1E293B;
            --color-gray-900: #0F172A;
            --font-heading: 'Manrope', 'Inter', system-ui, sans-serif;
            --font-body: 'Inter', system-ui, sans-serif;
            --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
            --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
            --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
            --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.25rem);
            --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
            --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
            --text-3xl: clamp(1.875rem, 1.5rem + 1.5vw, 2.5rem);
            --text-4xl: clamp(2.25rem, 1.8rem + 2vw, 3.5rem);
            --text-5xl: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
            --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
            --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
            --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem;
            --max-width: 1280px;
            --radius-sm: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-xl: 1.5rem; --radius-full: 9999px;
            --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
            --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
            --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
            --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
            --shadow-accent: 0 10px 40px -10px rgb(255 106 19 / 0.3);
            --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease;
            --z-nav: 100; --z-modal: 200; --z-toast: 300;
        }
        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
        body { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.7; color: var(--color-gray-700); background-color: var(--color-white); overflow-x: hidden; }
        img { max-width: 100%; height: auto; display: block; }
        a { color: inherit; text-decoration: none; }
        button { font-family: inherit; cursor: pointer; border: none; background: none; }
        ul, ol { list-style: none; }
        h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; color: var(--color-primary); letter-spacing: -0.02em; }
        .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding-left: var(--space-6); padding-right: var(--space-6); }
        @media (min-width: 640px) { .container { padding-left: var(--space-8); padding-right: var(--space-8); } }
        @media (min-width: 1024px) { .container { padding-left: var(--space-12); padding-right: var(--space-12); } }
        .section { padding-top: var(--space-20); padding-bottom: var(--space-20); }
        @media (min-width: 768px) { .section { padding-top: var(--space-24); padding-bottom: var(--space-24); } }
        .section-header { text-align: center; max-width: 640px; margin: 0 auto var(--space-12); }
        .section-label { display: inline-block; font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-accent); margin-bottom: var(--space-4); }
        .section-title { font-size: var(--text-3xl); font-weight: 800; color: var(--color-primary); margin-bottom: var(--space-4); }
        .section-subtitle { font-size: var(--text-lg); color: var(--color-gray-500); line-height: 1.7; }
        @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }
        @keyframes pulse-soft { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
        /* .animate-on-scroll elements are visible by default. main.js opts an
           element INTO the hidden starting state (.reveal-armed) only once
           it has confirmed IntersectionObserver is available and is
           actively watching that element, and force-reveals everything via
           a safety timeout regardless. A real scrolling user sees the exact
           same fade-in-on-scroll effect either way; this only prevents
           content from staying invisible for no-JS visitors, crawlers, or
           any IntersectionObserver edge case. */
        .animate-on-scroll.reveal-armed { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }
        .animate-on-scroll.reveal-armed.is-visible { opacity: 1; transform: translateY(0); }
        .delay-100 { transition-delay: 0.1s; } .delay-200 { transition-delay: 0.2s; } .delay-300 { transition-delay: 0.3s; }
        .delay-400 { transition-delay: 0.4s; } .delay-500 { transition-delay: 0.5s; }
        .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-4) var(--space-8); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 600; border-radius: var(--radius-full); transition: all var(--transition-base); white-space: nowrap; min-height: 48px; }
        .btn-primary { background: var(--color-accent); color: var(--color-white); box-shadow: var(--shadow-accent); }
        .btn-primary:hover { background: var(--color-accent-dark); transform: translateY(-2px); box-shadow: 0 14px 28px -8px rgb(255 106 19 / 0.4); }
        .btn-primary:active { transform: translateY(0); }
        .btn-secondary { background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-gray-300); }
        .btn-secondary:hover { border-color: var(--color-accent); color: var(--color-accent); background: rgb(255 106 19 / 0.04); }
        .btn-white { background: var(--color-white); color: var(--color-primary); }
        .btn-white:hover { background: var(--color-gray-50); transform: translateY(-2px); }
        .btn-lg { padding: var(--space-5) var(--space-10); font-size: var(--text-base); min-height: 56px; }
        .nav { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav); background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid transparent; transition: all var(--transition-base); }
        .nav.is-scrolled { border-bottom-color: var(--color-gray-200); box-shadow: var(--shadow-sm); }
        .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
        .nav-logo { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-heading); font-weight: 800; font-size: var(--text-lg); color: var(--color-primary); white-space: nowrap; }
        .nav-logo-icon { width: 36px; height: 36px; background: var(--color-primary); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--color-white); font-size: 1.25rem; flex-shrink: 0; }
        .nav-links { display: none; align-items: center; gap: var(--space-1); }
        @media (min-width: 1200px) { .nav-links { display: flex; } }
        .nav-link { padding: var(--space-2); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 500; color: var(--color-gray-600); border-radius: var(--radius-md); transition: all var(--transition-fast); white-space: nowrap; }
        .nav-link:hover { color: var(--color-primary); background: var(--color-gray-100); }
        .nav-cta { display: none; }
        @media (min-width: 1200px) { .nav-cta { display: inline-flex; } }
        .nav-toggle { display: flex; flex-direction: column; gap: 5px; padding: var(--space-2); z-index: calc(var(--z-nav) + 1); }
        .nav-toggle span { display: block; width: 24px; height: 2px; background: var(--color-primary); border-radius: 2px; transition: all var(--transition-base); }
        .nav-toggle.is-active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
        .nav-toggle.is-active span:nth-child(2) { opacity: 0; }
        .nav-toggle.is-active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
        @media (min-width: 1200px) { .nav-toggle { display: none; } }
        .mobile-menu { position: fixed; inset: 0; background: var(--color-white); z-index: calc(var(--z-nav) - 1); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-6); opacity: 0; pointer-events: none; transition: opacity var(--transition-base); }
        .mobile-menu.is-open { opacity: 1; pointer-events: all; }
        .mobile-menu a:not(.btn) { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 700; color: var(--color-primary); transition: color var(--transition-fast); }
        .mobile-menu a:not(.btn):hover { color: var(--color-accent); }
        @media (max-width: 1023px) { .mobile-menu { overflow-y: auto; padding: var(--space-16) var(--space-6); } }
        @media (max-width: 400px) { .mobile-menu { gap: var(--space-4); } .mobile-menu a:not(.btn) { font-size: var(--text-xl); } }
        .hero { position: relative; padding-top: calc(72px + var(--space-16)); padding-bottom: var(--space-24); background: linear-gradient(180deg, var(--color-gray-50) 0%, var(--color-white) 100%); overflow: hidden; }
        .hero-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
        .hero-bg::before { content: ''; position: absolute; top: -20%; right: -10%; width: 600px; height: 600px; background: radial-gradient(circle, rgb(255 106 19 / 0.08) 0%, transparent 70%); border-radius: 50%; }
        .hero-bg::after { content: ''; position: absolute; bottom: -10%; left: -5%; width: 400px; height: 400px; background: radial-gradient(circle, rgb(8 27 75 / 0.04) 0%, transparent 70%); border-radius: 50%; }
        .hero-grid { display: grid; gap: var(--space-12); align-items: center; }
        @media (min-width: 1024px) { .hero-grid { grid-template-columns: 1fr 1fr; gap: var(--space-16); } }
        .hero-content { position: relative; z-index: 1; }
        .hero-badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); background: rgb(255 106 19 / 0.08); border: 1px solid rgb(255 106 19 / 0.15); border-radius: var(--radius-full); font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; color: var(--color-accent); margin-bottom: var(--space-6); }
        .hero-badge-dot { width: 6px; height: 6px; background: var(--color-accent); border-radius: 50%; animation: pulse-soft 2s ease infinite; }
        .hero-title { font-size: var(--text-4xl); font-weight: 800; color: var(--color-primary); line-height: 1.1; margin-bottom: var(--space-6); }
        .hero-title-accent { color: var(--color-accent); position: relative; display: inline-block; }
        .hero-title-accent::after { content: ''; position: absolute; bottom: 4px; left: 0; right: 0; height: 8px; background: rgb(255 106 19 / 0.15); border-radius: 4px; z-index: -1; }
        .hero-description { font-size: var(--text-lg); color: var(--color-gray-500); max-width: 520px; margin-bottom: var(--space-8); line-height: 1.8; }
        .hero-ctas {
			 display: flex;
			gap: 16px;
			align-items: stretch;
		}
        .hero-visual { position: relative; display: flex; justify-content: center; align-items: center; }
        .hero-image-wrapper { position: relative; width: 100%; max-width: 480px; }
        .hero-image { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); }
        .hero-float-card { position: absolute; background: var(--color-white); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: var(--space-3); animation: float 4s ease-in-out infinite; border: 1px solid var(--color-gray-100); }
        .hero-float-card:nth-child(2) { top: 10%; right: -5%; animation-delay: 0s; }
        .hero-float-card:nth-child(3) { bottom: 20%; left: -8%; animation-delay: 1.5s; }
        .hero-float-card:nth-child(4) { bottom: 5%; right: 5%; animation-delay: 3s; }
        .hero-float-icon { width: 40px; height: 40px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; }
        .hero-float-icon.blue { background: rgb(8 27 75 / 0.08); }
        .hero-float-icon.orange { background: rgb(255 106 19 / 0.1); }
        .hero-float-icon.green { background: rgb(34 197 94 / 0.1); }
        .hero-float-text { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); white-space: nowrap; }
        .hero-float-sub { font-size: var(--text-xs); color: var(--color-gray-400); }
        @media (max-width: 640px) { .hero-float-card { display: none; } }
        .about { background: var(--color-white); }
        .about-grid { display: grid; gap: var(--space-12); align-items: start; }
        @media (min-width: 1024px) { .about-grid { grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; } }
        .about-text { font-size: var(--text-lg); color: var(--color-gray-600); line-height: 1.8; }
        .about-text p + p { margin-top: var(--space-4); }
        .profile-card { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%); border-radius: var(--radius-xl); padding: var(--space-8); color: var(--color-white); position: relative; overflow: hidden; }
        .profile-card::before { content: ''; position: absolute; top: -50%; right: -50%; width: 100%; height: 100%; background: radial-gradient(circle, rgb(255 106 19 / 0.15) 0%, transparent 70%); }
        .profile-header { display: flex; align-items: center; gap: var(--space-5); margin-bottom: var(--space-6); position: relative; }
        .profile-avatar { width: 72px; height: 72px; border-radius: var(--radius-full); background: var(--color-white); display: flex; align-items: center; justify-content: center; font-size: 2rem; flex-shrink: 0; border: 3px solid var(--color-accent); }
        .profile-name { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700; color: var(--color-white); }
        .profile-role { font-size: var(--text-sm); color: rgb(255 255 255 / 0.7); margin-top: var(--space-1); }
        .profile-bio { font-size: var(--text-base); line-height: 1.7; color: rgb(255 255 255 / 0.85); position: relative; }
        .profile-stats { display: flex; gap: var(--space-8); margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid rgb(255 255 255 / 0.1); position: relative; }
        .profile-stat-value { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 800; color: var(--color-accent); }
        .profile-stat-label { font-size: var(--text-xs); color: rgb(255 255 255 / 0.6); text-transform: uppercase; letter-spacing: 0.05em; }
        .services { background: var(--color-gray-50); }
        .services-grid { display: grid; gap: var(--space-6); }
        @media (min-width: 768px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }
        .service-card { background: var(--color-white); border-radius: var(--radius-xl); padding: var(--space-8); border: 1px solid var(--color-gray-200); transition: all var(--transition-base); position: relative; overflow: hidden; }
        .service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--color-accent); transform: scaleX(0); transition: transform var(--transition-base); }
        .service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); border-color: transparent; }
        .service-card:hover::before { transform: scaleX(1); }
        .service-icon { width: 56px; height: 56px; border-radius: var(--radius-lg); background: rgb(255 106 19 / 0.08); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: var(--space-5); transition: all var(--transition-base); }
        .service-card:hover .service-icon { background: var(--color-accent); transform: scale(1.05); }
        .service-title { font-size: var(--text-xl); font-weight: 700; color: var(--color-primary); margin-bottom: var(--space-3); }
        .service-description { font-size: var(--text-sm); color: var(--color-gray-500); line-height: 1.7; margin-bottom: var(--space-5); }
        .service-features { display: flex; flex-direction: column; gap: var(--space-2); }
        .service-feature { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-gray-600); }
        .service-feature-check { width: 18px; height: 18px; border-radius: 50%; background: rgb(34 197 94 / 0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .service-feature-check svg { width: 10px; height: 10px; stroke: #16a34a; }
        .industries-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-top: var(--space-12); }
        @media (min-width: 640px) { .industries-grid { grid-template-columns: repeat(3, 1fr); } }
        @media (min-width: 1024px) { .industries-grid { grid-template-columns: repeat(4, 1fr); } }
        .industry-card { background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); padding: var(--space-5); text-align: center; transition: all var(--transition-base); }
        .industry-card:hover { border-color: var(--color-accent); transform: translateY(-2px); box-shadow: var(--shadow-md); }
        .industry-icon { font-size: 1.75rem; margin-bottom: var(--space-3); }
        .industry-name { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); }

        /* ---------- Portfolio / Website Showcase ---------- */
        .portfolio { background: var(--color-white); }
        .portfolio-grid { display: grid; gap: var(--space-8); }
        @media (min-width: 640px) { .portfolio-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (min-width: 1024px) { .portfolio-grid { grid-template-columns: repeat(3, 1fr); } }
        @media (min-width: 1400px) { .portfolio-grid { grid-template-columns: repeat(4, 1fr); } }
        .portfolio-card { display: flex; flex-direction: column; height: 100%; background: var(--color-white); border-radius: var(--radius-xl); border: 1px solid var(--color-gray-200); overflow: hidden; transition: all var(--transition-base); box-shadow: var(--shadow-sm); }
        .portfolio-card:hover, .portfolio-card:focus-visible { transform: translateY(-6px); box-shadow: var(--shadow-xl); border-color: transparent; }
        .portfolio-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
        .portfolio-image-wrap { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-gray-100); }
        .portfolio-image-wrap::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--color-gray-100) 25%, var(--color-gray-200) 37%, var(--color-gray-100) 63%); background-size: 400% 100%; animation: portfolio-shimmer 1.4s ease infinite; }
        .portfolio-image-wrap.is-loaded::before { display: none; }
        .portfolio-image-wrap img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform var(--transition-slow); opacity: 0; }
        .portfolio-image-wrap.is-loaded img { opacity: 1; transition: transform var(--transition-slow), opacity var(--transition-slow); }
        .portfolio-card:hover .portfolio-image-wrap img { transform: scale(1.08); }
        .portfolio-featured-badge { position: absolute; top: var(--space-3); left: var(--space-3); z-index: 2; background: var(--color-accent); color: var(--color-white); font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 700; padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: 0.05em; box-shadow: var(--shadow-md); }
        .portfolio-content { display: flex; flex-direction: column; flex: 1; padding: var(--space-6); }
        .portfolio-category { display: inline-block; align-self: flex-start; font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-accent); background: rgb(255 106 19 / 0.08); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); margin-bottom: var(--space-3); }
        .portfolio-title { font-size: var(--text-lg); font-weight: 700; color: var(--color-primary); margin-bottom: var(--space-2); }
        .portfolio-description { font-size: var(--text-sm); color: var(--color-gray-500); line-height: 1.6; margin-bottom: var(--space-5); flex: 1; }
        .portfolio-description:empty { margin-bottom: var(--space-2); }
        .portfolio-cta { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); margin-top: auto; transition: gap var(--transition-fast), color var(--transition-fast); }
        .portfolio-card:hover .portfolio-cta { color: var(--color-accent); gap: var(--space-3); }
        .portfolio-cta svg { flex-shrink: 0; }
        @keyframes portfolio-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
        @media (prefers-reduced-motion: reduce) { .portfolio-image-wrap::before { animation: none; } }

        .process { background: var(--color-white); }
        .process-grid { display: grid; gap: var(--space-6); position: relative; }
        @media (min-width: 768px) { .process-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (min-width: 1024px) { .process-grid { grid-template-columns: repeat(5, 1fr); } }
        .process-step { position: relative; text-align: center; padding: var(--space-6); }
        @media (min-width: 1024px) { .process-step:not(:last-child)::after { content: ''; position: absolute; top: 40px; right: -50%; width: 100%; height: 2px; background: linear-gradient(90deg, var(--color-gray-300) 0%, transparent 100%); } }
        .process-number { width: 64px; height: 64px; border-radius: var(--radius-full); background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%); color: var(--color-white); font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-5); position: relative; z-index: 1; box-shadow: 0 8px 24px -8px rgb(8 27 75 / 0.3); }
        .process-title { font-size: var(--text-lg); font-weight: 700; color: var(--color-primary); margin-bottom: var(--space-2); }
        .process-description { font-size: var(--text-sm); color: var(--color-gray-500); line-height: 1.6; }
        .why-us { background: linear-gradient(180deg, var(--color-gray-50) 0%, var(--color-white) 100%); }
        .why-grid { display: grid; gap: var(--space-6); }
        @media (min-width: 640px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (min-width: 1024px) { .why-grid { grid-template-columns: repeat(4, 1fr); } }
        .why-card { background: var(--color-white); border-radius: var(--radius-xl); padding: var(--space-8); border: 1px solid var(--color-gray-200); transition: all var(--transition-base); }
        .why-card:hover { border-color: var(--color-accent); box-shadow: var(--shadow-lg); transform: translateY(-4px); }
        .why-icon { width: 48px; height: 48px; border-radius: var(--radius-md); background: rgb(255 106 19 / 0.08); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-5); transition: all var(--transition-base); }
        .why-card:hover .why-icon { background: var(--color-accent); }
        .why-title { font-size: var(--text-base); font-weight: 700; color: var(--color-primary); margin-bottom: var(--space-2); line-height: 1.4; }
        .why-description { font-size: var(--text-sm); color: var(--color-gray-500); line-height: 1.6; }
        .results { background: var(--color-primary); color: var(--color-white); position: relative; overflow: hidden; }
        .results::before { content: ''; position: absolute; top: -50%; right: -20%; width: 600px; height: 600px; background: radial-gradient(circle, rgb(255 106 19 / 0.1) 0%, transparent 70%); border-radius: 50%; }
        .results .section-label { color: var(--color-accent-light); }
        .results .section-title { color: var(--color-white); }
        .results .section-subtitle { color: rgb(255 255 255 / 0.6); }
        .results-grid { display: grid; gap: var(--space-6); }
        @media (min-width: 640px) { .results-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (min-width: 1024px) { .results-grid { grid-template-columns: repeat(5, 1fr); } }
        .result-card { text-align: center; padding: var(--space-6); position: relative; z-index: 1; }
        .result-icon { width: 64px; height: 64px; border-radius: var(--radius-full); background: rgb(255 255 255 / 0.08); border: 1px solid rgb(255 255 255 / 0.1); display: flex; align-items: center; justify-content: center; font-size: 1.75rem; margin: 0 auto var(--space-5); transition: all var(--transition-base); }
        .result-card:hover .result-icon { background: var(--color-accent); border-color: var(--color-accent); transform: scale(1.05); }
        .result-title { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; color: var(--color-white); margin-bottom: var(--space-2); }
        .result-description { font-size: var(--text-sm); color: rgb(255 255 255 / 0.6); line-height: 1.6; }
        .technologies { background: var(--color-white); overflow: hidden; }
        .tech-grid { margin: 0 calc(var(--space-6) * -1); }
        .tech-marquee { width: 100%; overflow: hidden; padding: var(--space-6) 0 var(--space-8); mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); }
        .tech-track { display: flex; width: max-content; animation: tech-marquee 52s linear infinite; will-change: transform; }
        .tech-group { display: flex; align-items: stretch; gap: var(--space-10); padding-right: var(--space-10); flex-shrink: 0; }
        .tech-item { display: grid; grid-template-rows: 88px minmax(2.8em, auto); place-items: center; gap: 18px; width: 200px; min-height: 186px; padding: var(--space-6); background: transparent; border: 0; border-radius: var(--radius-xl); font-family: var(--font-heading); font-size: var(--text-base); font-weight: 700; letter-spacing: -0.01em; color: var(--color-gray-600); text-align: center; transition: color var(--transition-base), transform var(--transition-base), background var(--transition-base); }
        .tech-logo-area { display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; }
        .tech-logo { width: 84px; height: 84px; object-fit: contain; }
        .tech-item--form-builder-platform .tech-logo { width: 104px; height: 104px; }
        .tech-name { display: flex; align-items: start; justify-content: center; width: 100%; }
        .tech-item:hover { color: var(--color-primary); background: var(--color-gray-50); transform: translateY(-6px); }
        /* .tech-marquee:hover .tech-track { animation-play-state: paused; } */
        /* ENFORCE CONTINUOUS SCROLLING */
         .tech-track {
         display: flex;
         width: max-content;
         animation: tech-marquee 52s linear infinite;
         will-change: transform;
         animation-play-state: running !important;
         }

         .tech-marquee:hover .tech-track,
         .tech-track:hover,
         .tech-item:hover,
         .tech-item:active {
         animation-play-state: running !important;
         }
        @keyframes tech-marquee { from { transform: translateX(-50%); } to { transform: translateX(0); } }
        @media (max-width: 639px) { .tech-grid { margin: 0 calc(var(--space-4) * -1); } .tech-group { gap: var(--space-7); padding-right: var(--space-7); } .tech-item { grid-template-rows: 70px minmax(2.8em, auto); width: 155px; min-height: 158px; gap: 14px; padding: var(--space-4); font-size: var(--text-sm); } .tech-logo-area { width: 70px; height: 70px; } .tech-logo { width: 68px; height: 68px; } .tech-logo { width: 88px; height: 88px; } .tech-item--form-builder-platform .tech-logo { width: 82px; height: 82px; } .tech-track { animation-duration: 48s; } }
        @media (prefers-reduced-motion: reduce) { .tech-marquee { overflow-x: auto; mask-image: none; } .tech-track { animation: none; } }
        .faq { background: var(--color-gray-50); }
        .faq-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-4); }
        .faq-item { background: var(--color-white); border-radius: var(--radius-lg); border: 1px solid var(--color-gray-200); overflow: hidden; transition: all var(--transition-base); }
        .faq-item:hover { border-color: var(--color-gray-300); }
        .faq-item.is-open { border-color: var(--color-accent); box-shadow: var(--shadow-md); }
        .faq-question { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--space-5) var(--space-6); font-family: var(--font-heading); font-size: var(--text-base); font-weight: 600; color: var(--color-primary); text-align: left; transition: color var(--transition-fast); }
        .faq-question:hover { color: var(--color-accent); }
        .faq-icon { width: 24px; height: 24px; border-radius: var(--radius-full); background: var(--color-gray-100); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all var(--transition-base); margin-left: var(--space-4); }
        .faq-item.is-open .faq-icon { background: var(--color-accent); transform: rotate(45deg); }
        .faq-item.is-open .faq-icon svg { stroke: var(--color-white); }
        .faq-answer { max-height: 0; overflow: hidden; transition: max-height var(--transition-slow), padding var(--transition-slow); }
        .faq-item.is-open .faq-answer { max-height: 500px; padding: 0 var(--space-6) var(--space-6); }
        .faq-answer p { font-size: var(--text-sm); color: var(--color-gray-500); line-height: 1.7; }
        .contact { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%); color: var(--color-white); position: relative; overflow: hidden; }
        .contact::before { content: ''; position: absolute; top: -30%; left: -20%; width: 500px; height: 500px; background: radial-gradient(circle, rgb(255 106 19 / 0.12) 0%, transparent 70%); border-radius: 50%; }
        .contact::after { content: ''; position: absolute; bottom: -30%; right: -20%; width: 400px; height: 400px; background: radial-gradient(circle, rgb(255 255 255 / 0.03) 0%, transparent 70%); border-radius: 50%; }
        .contact-inner { position: relative; z-index: 1; text-align: center; }
        .contact-title { font-size: var(--text-3xl); font-weight: 800; color: var(--color-white); margin-bottom: var(--space-4); }
        .contact-description { font-size: var(--text-lg); color: rgb(255 255 255 / 0.7); max-width: 600px; margin: 0 auto var(--space-10); line-height: 1.7; }
        .contact-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin-bottom: var(--space-16); }
        .contact-info-grid { display: grid; gap: var(--space-6); max-width: 800px; margin: 0 auto; }
        @media (min-width: 640px) { .contact-info-grid { grid-template-columns: repeat(3, 1fr); } }
        .contact-info-item { background: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.08); border-radius: var(--radius-xl); padding: var(--space-6); text-align: center; transition: all var(--transition-base); }
        .contact-info-item:hover { background: rgb(255 255 255 / 0.1); border-color: rgb(255 255 255 / 0.15); transform: translateY(-4px); }
        .contact-info-icon { width: 48px; height: 48px; border-radius: var(--radius-full); background: var(--color-accent); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; margin: 0 auto var(--space-4); }
        .contact-info-label { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: rgb(255 255 255 / 0.5); margin-bottom: var(--space-2); }
        .contact-info-value { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 600; color: var(--color-white); word-break: break-word; }
        .footer { background: var(--color-primary-dark); color: rgb(255 255 255 / 0.6); padding-top: var(--space-16); padding-bottom: var(--space-8); }
        .footer-grid { display: grid; gap: var(--space-10); margin-bottom: var(--space-12); }
        @media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
        .footer-brand { max-width: 320px; }
        .footer-logo { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-heading); font-weight: 800; font-size: var(--text-lg); color: var(--color-white); margin-bottom: var(--space-4); }
        .footer-tagline { font-size: var(--text-sm); line-height: 1.7; margin-bottom: var(--space-6); }
        .footer-heading { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 700; color: var(--color-white); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-5); }
        .footer-links { display: flex; flex-direction: column; gap: var(--space-3); }
        .footer-link { font-size: var(--text-sm); color: rgb(255 255 255 / 0.5); transition: color var(--transition-fast); }
        .footer-link:hover { color: var(--color-accent); }
        .footer-bottom { padding-top: var(--space-8); border-top: 1px solid rgb(255 255 255 / 0.08); display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; }
        @media (min-width: 640px) { .footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; } }
        .footer-copyright { font-size: var(--text-xs); color: rgb(255 255 255 / 0.4); }
        .footer-legal { display: flex; gap: var(--space-6); }
        .footer-legal a { font-size: var(--text-xs); color: rgb(255 255 255 / 0.4); transition: color var(--transition-fast); }
        .footer-legal a:hover { color: var(--color-accent); }
        .scroll-top { position: fixed; bottom: var(--space-6); right: var(--space-6); width: 48px; height: 48px; border-radius: var(--radius-full); background: var(--color-accent); color: var(--color-white); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transform: translateY(10px); transition: all var(--transition-base); z-index: 50; }
        .scroll-top.is-visible { opacity: 1; pointer-events: all; transform: translateY(0); }
        .scroll-top:hover { background: var(--color-accent-dark); transform: translateY(-2px); }
        .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
        :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
        @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } }

        /* ---------- Real brand assets (replacing emoji placeholders) ---------- */
        /* The nav logo badge was styled as a solid navy square behind an emoji;
           the real logo mark already has its own colors on a transparent
           background, so the badge background needs to be removed or the
           navy linework in the icon disappears against it. */
        .nav-logo-icon { background: none; object-fit: contain; }
        .profile-avatar { object-fit: cover; }
        .hero-image { object-position: top center; }
        .contact-info-icon svg { display: block; }
        .footer-logo img { flex-shrink: 0; }
		
		.hero-ctas .btn {
			flex: 1;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			white-space: nowrap;
		}
		
		/* Mobile Hero Buttons */
		@media (max-width: 768px) {
			.hero-ctas {
				flex-wrap: wrap;
			}

			.hero-ctas .btn-secondary {
				order: 1;
				width: auto;
				flex: 1;
			}

			.hero-ctas .btn-primary {
				order: 2;
				flex: 0 0 100%;
			}
		}