@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-v12-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-v12-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-v12-latin-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-v12-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
:root { --brand-primary: #cf5b2e; --brand-secondary: #a855f7; --accent-cyan: #22d3ee; --bg-primary: #0a0a0f; --bg-secondary: #12121a; --bg-tertiary: #1a1a24; --text-primary: #ffffff; --text-secondary: #a1a1aa; --text-muted: #71717a; --border-color: rgba(255, 255, 255, 0.08); } html[data-theme="light"] { --bg-primary: #ffffff; --bg-secondary: #f8fafc; --bg-tertiary: #f1f5f9; --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #94a3b8; --border-color: rgba(0, 0, 0, 0.08); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; overflow-x: hidden; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg-primary); color: var(--text-primary); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.imwp-modern { background: var(--bg-primary) !important; } a { text-decoration: none; color: inherit; transition: color 0.3s ease; } img { max-width: 100%; height: auto; display: block; } ul, ol { list-style: none; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .imwp-hero-bg { z-index: 0; pointer-events: none; } .imwp-orb { -webkit-transform: translateZ(0); transform: translateZ(0); will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .imwp-hero-content { position: relative; z-index: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } .imwp-nav { z-index: 9999; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .imwp-dropdown-menu { z-index: 10000; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .imwp-mobile-menu { z-index: 9998; -webkit-transform: translateZ(0); transform: translateZ(0); } .imwp-print-item, .imwp-print-card, .imwp-marketing-card, .imwp-service-card, .imwp-process-step { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .imwp-brands-section { width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); padding: 1rem 0 0 0; overflow: hidden; opacity: 0; transition: opacity 1s ease; } .imwp-brands-section.initialized { opacity: 1; } .imwp-brands-track, .imwp-brand-logo { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; } .imwp-section { position: relative; z-index: 1; isolation: isolate; } .imwp-hero { position: relative; isolation: isolate; } .imwp-services-grid, .imwp-print-grid, .imwp-marketing-grid { overflow: visible; } .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary), var(--accent-cyan)); z-index: 99999; transition: width 0.1s ease; width: 0%; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.5rem; font-size: 0.9rem; font-weight: 600; border-radius: 0.5rem; cursor: pointer; transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); border: none; text-decoration: none; white-space: nowrap; } .btn-primary { background: linear-gradient(135deg, var(--brand-primary) 0%, #e06b3e 100%); color: white; box-shadow: 0 4px 15px rgba(207, 91, 46, 0.3); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(207, 91, 46, 0.4); } .btn-outline { background: transparent; color: var(--text-primary); border: 2px solid var(--border-color); } .btn-outline:hover { border-color: var(--brand-primary); color: var(--brand-primary); } .btn-lg { padding: 1rem 2rem; font-size: 1rem; } .btn-secondary { background: transparent; color: var(--text-primary); border: 2px solid rgba(255, 255, 255, 0.3); } .btn-secondary:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.5); } html[data-theme="light"] .btn-secondary { border-color: rgba(0, 0, 0, 0.2); } html[data-theme="light"] .btn-secondary:hover { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.3); } .btn svg { width: 18px; height: 18px; } .imwp-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; padding: 1rem 1.5rem; transition: all 0.3s ease; background: transparent; } .imwp-nav.scrolled { background: rgba(10, 10, 15, 0.98); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-color); padding: 0.75rem 1.5rem; -webkit-transform: translateZ(0); transform: translateZ(0); } html[data-theme="light"] .imwp-nav.scrolled { background: rgba(255, 255, 255, 0.98); } .imwp-nav-inner { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .imwp-nav-logo img { height: 65px; transition: height 0.3s ease; } .imwp-nav.scrolled .imwp-nav-logo img { height: 50px; } .logo-light { display: none !important; } .logo-dark { display: block !important; } html[data-theme="light"] .logo-light { display: block !important; } html[data-theme="light"] .logo-dark { display: none !important; } .imwp-nav-menu { display: flex; align-items: center; gap: 2rem; } .imwp-nav-link { font-size: 0.9375rem; font-weight: 500; color: var(--text-secondary); transition: color 0.3s ease; display: flex; align-items: center; gap: 0.35rem; } .imwp-nav-link:hover { color: var(--brand-primary); } .imwp-nav-link svg { width: 14px; height: 14px; transition: transform 0.3s ease; } .imwp-nav-dropdown { position: relative; } .imwp-dropdown-menu { position: absolute; top: 100%; left: 0; transform: translateY(10px); background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 1rem; padding: 2rem; min-width: 720px; max-width: calc(100vw - 2rem); max-height: calc(100vh - 100px); overflow-y: auto; opacity: 0; visibility: hidden; transition: all 0.3s ease; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4); z-index: 1000; } html[data-theme="light"] .imwp-dropdown-menu { background: #ffffff; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15); } .imwp-nav-dropdown:hover .imwp-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(5px); } .imwp-nav-dropdown:hover .imwp-nav-link svg { transform: rotate(180deg); } .imwp-dropdown-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .imwp-dropdown-category { min-width: 180px; } .imwp-dropdown-category-label { display: block; font-size: 0.7rem; font-weight: 700; color: var(--brand-primary); text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--brand-primary); } .imwp-dropdown-link { display: block; font-size: 0.85rem; color: var(--text-secondary); padding: 0.5rem 0; transition: all 0.2s ease; border-radius: 4px; } .imwp-dropdown-link:hover { color: var(--text-primary); padding-left: 0.75rem; background: rgba(207, 91, 46, 0.1); } .imwp-nav-actions { display: flex; align-items: center; gap: 1rem; } .theme-toggle { width: 40px; height: 40px; border-radius: 0.5rem; border: 1px solid var(--border-color); background: transparent; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .theme-toggle:hover { border-color: var(--brand-primary); color: var(--brand-primary); } .theme-toggle svg { width: 20px; height: 20px; } .theme-toggle .sun-icon { display: none; } .theme-toggle .moon-icon { display: block; } html[data-theme="light"] .theme-toggle .sun-icon { display: block; } html[data-theme="light"] .theme-toggle .moon-icon { display: none; } .imwp-menu-toggle { display: none; width: 40px; height: 40px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: transparent; border: 1px solid var(--border-color); border-radius: 0.5rem; cursor: pointer; padding: 0; } .imwp-menu-toggle span { display: block; width: 20px; height: 2px; background: var(--text-primary); transition: all 0.3s ease; } .imwp-menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translateY(7px); } .imwp-menu-toggle.active span:nth-child(2) { opacity: 0; } .imwp-menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translateY(-7px); } .imwp-mobile-menu { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg-primary); z-index: 9998; padding: 5rem 1.5rem 2rem; opacity: 0; visibility: hidden; transition: all 0.3s ease; overflow-y: auto; } .imwp-mobile-menu.active { opacity: 1; visibility: visible; } .imwp-mobile-menu-content { display: flex; flex-direction: column; gap: 0; align-items: stretch; max-width: 400px; margin: 0 auto; } .imwp-mobile-link { font-size: 1.25rem; font-weight: 600; color: var(--text-primary); transition: color 0.3s ease; padding: 1rem 0; border-bottom: 1px solid var(--border-color); display: block; text-align: center; } .imwp-mobile-link:hover { color: var(--brand-primary); } .imwp-mobile-services { border-bottom: 1px solid var(--border-color); } .imwp-mobile-services-toggle { width: 100%; background: transparent; border: none; font-size: 1.25rem; font-weight: 600; color: var(--text-primary); padding: 1rem 0; display: flex; align-items: center; justify-content: center; gap: 0.5rem; cursor: pointer; transition: color 0.3s ease; } .imwp-mobile-services-toggle:hover { color: var(--brand-primary); } .imwp-mobile-services-toggle svg { width: 20px; height: 20px; transition: transform 0.3s ease; } .imwp-mobile-services.active .imwp-mobile-services-toggle svg { transform: rotate(180deg); } .imwp-mobile-services-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; background: var(--bg-secondary); margin: 0 -1.5rem; padding: 0 1.5rem; } .imwp-mobile-services.active .imwp-mobile-services-content { max-height: 2000px; padding: 1rem 1.5rem 1.5rem; } .imwp-mobile-category { margin-bottom: 1.25rem; } .imwp-mobile-category:last-child { margin-bottom: 0; } .imwp-mobile-category-label { display: block; font-size: 0.7rem; font-weight: 700; color: var(--brand-primary); text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--brand-primary); } .imwp-mobile-category a { display: block; font-size: 0.9rem; color: var(--text-secondary); padding: 0.5rem 0; transition: all 0.2s ease; } .imwp-mobile-category a:hover { color: var(--text-primary); padding-left: 0.5rem; } .imwp-mobile-menu .btn { margin-top: 1.5rem; text-align: center; } .imwp-hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 8rem 1.5rem 4rem; position: relative; overflow: hidden; background: linear-gradient(135deg, var(--bg-primary) 0%, #1a0f20 50%, #0f1a25 100%); } html[data-theme="light"] .imwp-hero { background: linear-gradient(135deg, #f8fafc 0%, #e0e7ff 50%, #fdf4ff 100%); } .imwp-hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .imwp-orb { position: absolute; border-radius: 50%; filter: blur(100px); -webkit-filter: blur(100px); opacity: 0.5; animation: float 15s ease-in-out infinite; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; contain: strict; pointer-events: none; } .imwp-orb-1 { width: 400px; height: 400px; background: var(--brand-primary); top: -100px; right: 10%; } .imwp-orb-2 { width: 300px; height: 300px; background: var(--brand-secondary); bottom: 10%; left: 5%; animation-delay: -5s; } .imwp-orb-3 { width: 200px; height: 200px; background: var(--accent-cyan); top: 40%; right: 20%; animation-delay: -10s; } @keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-20px) rotate(5deg); } 50% { transform: translateY(10px) rotate(-5deg); } 75% { transform: translateY(-15px) rotate(3deg); } } .imwp-hero-content { position: relative; z-index: 1; max-width: 900px; } .imwp-hero-title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; line-height: 1.15; margin-bottom: 1.5rem; color: var(--text-primary); } .imwp-hero-title .highlight { background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary), var(--accent-cyan)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .typing-cursor { display: inline-block; width: 3px; height: 1em; background: var(--brand-primary); margin-left: 2px; animation: blink 1s step-end infinite; vertical-align: middle; } @keyframes blink { 50% { opacity: 0; } } .imwp-hero-subtitle { font-size: 1.125rem; color: var(--text-secondary); max-width: 600px; margin: 0 auto 2.5rem; line-height: 1.7; } .imwp-hero-actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 3rem; } .scroll-indicator { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: var(--text-muted); font-size: 0.75rem; z-index: 5; opacity: 0.7; animation: bounce 2s ease-in-out infinite; } @keyframes bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(5px); } } .mouse { width: 24px; height: 36px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 12px; position: relative; } html[data-theme="light"] .mouse { border-color: rgba(0, 0, 0, 0.2); } .wheel { width: 4px; height: 8px; background: var(--brand-primary); border-radius: 2px; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); animation: scroll-wheel 2s ease-in-out infinite; } @keyframes scroll-wheel { 0%, 100% { transform: translateX(-50%) translateY(0); opacity: 1; } 50% { transform: translateX(-50%) translateY(8px); opacity: 0.3; } } .imwp-logos-section { width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); padding: 2.5rem 0; background: var(--bg-secondary); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); overflow: hidden; } .imwp-logos-title { text-align: center; font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.15em; margin: 0 0 1.5rem; padding: 0 1.5rem; } .imwp-logos-wrapper { position: relative; width: 100%; overflow: hidden; } .imwp-logos-blur { position: absolute; top: 0; bottom: 0; width: 100px; z-index: 10; pointer-events: none; } .imwp-logos-blur-left { left: 0; background: linear-gradient(to right, var(--bg-secondary) 0%, transparent 100%); } .imwp-logos-blur-right { right: 0; background: linear-gradient(to left, var(--bg-secondary) 0%, transparent 100%); } .imwp-logos-marquee { overflow: hidden; width: 100%; } .imwp-logos-track { display: flex; gap: 3rem; animation: marquee 30s linear infinite; width: max-content; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .imwp-logos-marquee:hover .imwp-logos-track { animation-play-state: paused; } .imwp-logo-item { font-size: 1.1rem; font-weight: 700; color: var(--text-muted); opacity: 0.6; transition: all 0.3s ease; white-space: nowrap; padding: 0.5rem 0; } .imwp-logo-item:hover { opacity: 1; color: var(--brand-primary); transform: scale(1.1); } .imwp-brands-section { width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); padding: 1rem 0 0 0; overflow: hidden; } .imwp-brands-section .imwp-section-header { padding: 0 1.5rem; } .imwp-brands-track-wrapper { overflow: hidden; margin-top: 3rem; } .imwp-brands-track { display: flex; align-items: center; gap: 4rem; animation: scrollBrands 30s linear infinite; width: max-content; } .imwp-brands-track:hover { animation-play-state: paused; } @keyframes scrollBrands { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .imwp-brand-logo { height: 50px; opacity: 0.7; transition: opacity 0.3s ease; flex-shrink: 0; } .imwp-brand-logo:hover { opacity: 1; } .tech-physics-container { position: relative; width: 100%; max-width: 1200px; min-height: 400px; margin: 0 auto; overflow: hidden; border-radius: 1rem; } .tech-physics-container.desktop-grid { height: auto; min-height: 300px; } .tech-physics-header { position: absolute; top: 0; left: 0; right: 0; text-align: center; padding: 1.5rem 1rem; z-index: 100; pointer-events: none; } .tech-pill { display: inline-flex; align-items: center; justify-content: center; width: fit-content; padding: 14px 24px; background: rgba(30, 30, 35, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 50px; border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); cursor: pointer; user-select: none; -webkit-user-select: none; white-space: nowrap; transition: all 0.3s ease; z-index: 1; flex-shrink: 0; } .desktop-grid .tech-physics-header { position: relative; padding: 2rem 1rem 1rem; } .desktop-grid .tech-pills-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25rem; padding: 1.5rem 2rem 2rem; justify-items: center; align-items: center; } .desktop-grid .tech-pill { position: relative !important; top: auto !important; left: auto !important; opacity: 1 !important; transform: none !important; } .mobile-marquee .tech-pill { position: relative !important; top: auto !important; left: auto !important; opacity: 1 !important; transform: none !important; flex-shrink: 0; } .marquee-track { display: flex; gap: 1rem; padding: 0.5rem 0; width: max-content; } .marquee-left { animation: marqueeScrollLeft 25s linear infinite; } .marquee-right { animation: marqueeScrollRight 25s linear infinite; } @keyframes marqueeScrollLeft { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes marqueeScrollRight { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } } .mobile-marquee { display: flex; flex-direction: column; gap: 1rem; overflow: hidden; padding: 1rem; height: auto !important; } .tech-pill-logo { width: auto; height: 24px; max-width: 140px; flex-shrink: 0; object-fit: contain; pointer-events: none; } .tech-pill:hover { filter: brightness(1.1); border-color: rgba(207, 91, 46, 0.5); box-shadow: 0 8px 30px rgba(207, 91, 46, 0.2); } .tech-pill:active, .tech-pill.dragging { cursor: grabbing; z-index: 10; filter: brightness(1.15); border-color: rgba(207, 91, 46, 0.7); box-shadow: 0 12px 40px rgba(207, 91, 46, 0.35); } html[data-theme="light"] .tech-pill { background: rgba(255, 255, 255, 0.9); border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); } html[data-theme="light"] .tech-pill:hover { border-color: rgba(207, 91, 46, 0.4); box-shadow: 0 8px 30px rgba(207, 91, 46, 0.15); } html[data-theme="light"] .tech-pill:active, html[data-theme="light"] .tech-pill.dragging { border-color: rgba(207, 91, 46, 0.6); box-shadow: 0 12px 40px rgba(207, 91, 46, 0.25); } .openai-dark { display: block; } .openai-light { display: none; } html[data-theme="light"] .openai-dark { display: none; } html[data-theme="light"] .openai-light { display: block; } .imwp-section { width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); padding: 5rem 1.5rem; background: var(--bg-primary); position: relative; } .imwp-section-alt { background: var(--bg-secondary); } .imwp-container { max-width: 1200px; margin: 0 auto; padding: 0; width: 100%; } .imwp-section-header { text-align: center; max-width: 700px; margin: 0 auto 3.5rem; } .imwp-section-label { display: inline-block; font-size: 0.8rem; font-weight: 600; color: var(--brand-primary); text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 0.75rem; padding: 0.5rem 1rem; background: rgba(207, 91, 46, 0.1); border-radius: 2rem; } .imwp-section-title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; color: var(--text-primary); margin: 0 0 1rem; line-height: 1.2; } .imwp-text-left { text-align: left; } .imwp-section-subtitle { font-size: 1rem; color: var(--text-secondary); margin: 0; line-height: 1.7; } .imwp-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .imwp-service-card { background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border-color); border-radius: 1rem; padding: 1.75rem; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); position: relative; overflow: hidden; } html[data-theme="light"] .imwp-service-card { background: #fff; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); } .imwp-service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary)); transform: scaleX(0); transition: transform 0.4s ease; } .imwp-service-card:hover { transform: translateY(-8px); border-color: var(--brand-primary); box-shadow: 0 20px 40px rgba(207, 91, 46, 0.2); } .imwp-service-card:hover::before { transform: scaleX(1); } .imwp-service-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)); border-radius: 0.875rem; margin-bottom: 1.25rem; box-shadow: 0 8px 20px rgba(207, 91, 46, 0.3); } .imwp-service-icon svg { width: 26px; height: 26px; color: white; } .imwp-service-title { font-size: 1.125rem; font-weight: 600; color: var(--text-primary); margin: 0 0 0.5rem; } .imwp-service-desc { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; margin: 0 0 1rem; } .imwp-service-link { font-size: 0.85rem; font-weight: 600; color: var(--brand-primary); text-decoration: none; transition: all 0.3s ease; } .imwp-service-link:hover { letter-spacing: 0.05em; } .imwp-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } .imwp-about-text { font-size: 1rem; color: var(--text-secondary); line-height: 1.8; margin-bottom: 2rem; } .imwp-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .imwp-stat-item { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-color); border-radius: 1rem; padding: 1.25rem; text-align: center; transition: all 0.3s ease; } .imwp-stat-item:hover { border-color: var(--brand-primary); transform: translateY(-3px); } html[data-theme="light"] .imwp-stat-item { background: #fff; } .imwp-stat-number { font-size: 1.75rem; font-weight: 700; color: var(--brand-primary); } .imwp-stat-suffix { font-size: 1.25rem; font-weight: 700; color: var(--brand-primary); } .imwp-stat-label { display: block; font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem; } .imwp-about-visual { position: relative; } .imwp-about-image-wrapper { position: relative; border-radius: 1.25rem; overflow: hidden; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3); } .imwp-about-img { width: 100%; height: auto; display: block; transition: transform 0.5s ease; } .imwp-about-image-wrapper:hover .imwp-about-img { transform: scale(1.05); } .imwp-about-image-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(207, 91, 46, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%); pointer-events: none; } .imwp-floating-card { position: absolute; bottom: -30px; left: -30px; background: var(--bg-tertiary); backdrop-filter: blur(20px); border: 1px solid var(--border-color); border-radius: 1rem; padding: 1.5rem; max-width: 280px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); z-index: 5; } .imwp-floating-card-icon { width: 40px; height: 40px; background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: white; margin-bottom: 0.75rem; } .imwp-floating-card-title { font-size: 1rem; font-weight: 600; color: var(--text-primary); display: block; margin-bottom: 0.75rem; } .imwp-check-list li { font-size: 0.85rem; color: var(--text-secondary); padding: 0.25rem 0 0.25rem 1.5rem; position: relative; } .imwp-check-list li::before { content: '✓'; position: absolute; left: 0; color: var(--brand-primary); font-weight: bold; } .imwp-marketing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } .imwp-marketing-card { background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border-color); border-radius: 1.5rem; padding: 2rem; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); } html[data-theme="light"] .imwp-marketing-card { background: #ffffff; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); } .imwp-marketing-card:hover { transform: translateY(-8px); border-color: rgba(207, 91, 46, 0.5); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); } .imwp-marketing-icon { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%); border-radius: 1rem; margin-bottom: 1.5rem; } .imwp-marketing-icon svg { width: 30px; height: 30px; color: white; } .imwp-marketing-icon-ai { background: linear-gradient(135deg, #22d3ee 0%, #a855f7 50%, #cf5b2e 100%); animation: ai-glow 3s ease-in-out infinite; } @keyframes ai-glow { 0%, 100% { box-shadow: 0 0 20px rgba(168, 85, 247, 0.4); } 50% { box-shadow: 0 0 30px rgba(34, 211, 238, 0.6); } } .imwp-marketing-title { font-size: 1.375rem; font-weight: 600; color: var(--text-primary); margin: 0 0 1rem; } .imwp-marketing-desc { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.7; margin: 0 0 1.25rem; } .imwp-simple-list li { font-size: 0.9375rem; color: var(--text-secondary); padding: 0.5rem 0; border-bottom: 1px solid var(--border-color); } .imwp-simple-list li:last-child { border-bottom: none; } .imwp-marketing-cta { margin-top: 3rem; text-align: center; padding: 2rem; background: rgba(207, 91, 46, 0.1); border-radius: 1rem; border: 1px solid rgba(207, 91, 46, 0.2); } .imwp-marketing-cta p { font-size: 1.125rem; color: var(--text-primary); margin: 0 0 1.5rem; } .imwp-print-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } .imwp-print-card { background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border-color); border-radius: 1.5rem; padding: 2rem; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); } html[data-theme="light"] .imwp-print-card { background: #ffffff; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); } .imwp-print-card:hover { transform: translateY(-4px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); } .imwp-print-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; } .imwp-print-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%); border-radius: 0.875rem; flex-shrink: 0; } .imwp-print-icon svg { width: 28px; height: 28px; color: white; } .imwp-print-title { font-size: 1.5rem; font-weight: 600; color: var(--text-primary); margin: 0; } .imwp-print-desc { font-size: 1rem; color: var(--text-secondary); margin: 0 0 1.5rem; } .imwp-print-items { display: flex; flex-direction: column; gap: 1rem; } .imwp-print-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem; background: rgba(255, 255, 255, 0.02); border-radius: 0.75rem; border: 1px solid var(--border-color); transition: all 0.3s ease; } html[data-theme="light"] .imwp-print-item { background: #ffffff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); border-color: rgba(0, 0, 0, 0.1); } .imwp-print-item:hover { border-color: rgba(207, 91, 46, 0.3); background: rgba(207, 91, 46, 0.05); } .imwp-print-item-icon { font-size: 1.5rem; line-height: 1; } .imwp-print-item strong { display: block; font-size: 1rem; color: var(--text-primary); margin-bottom: 0.25rem; } .imwp-print-item p { font-size: 0.875rem; color: var(--text-secondary); margin: 0; line-height: 1.5; } .imwp-print-cta { margin-top: 3rem; } .imwp-print-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 2rem; background: linear-gradient(135deg, rgba(207, 91, 46, 0.15) 0%, rgba(168, 85, 247, 0.1) 100%); border-radius: 1.25rem; border: 1px solid rgba(207, 91, 46, 0.2); } .imwp-print-cta h3 { font-size: 1.25rem; font-weight: 600; color: var(--text-primary); margin: 0 0 0.5rem; } .imwp-print-cta p { font-size: 1rem; color: var(--text-secondary); margin: 0; } .imwp-process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; position: relative; } .imwp-process-grid::before { content: ''; position: absolute; top: 38px; left: 12%; right: 12%; height: 3px; background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary), var(--accent-cyan)); opacity: 0.4; } .imwp-process-step { text-align: center; display: flex; flex-direction: column; align-items: center; } .imwp-process-number { width: 76px; height: 76px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)); border-radius: 50%; font-size: 1.25rem; font-weight: 700; color: white; margin: 0 auto 1rem; position: relative; z-index: 1; box-shadow: 0 8px 25px rgba(207, 91, 46, 0.4); } .imwp-process-title { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin: 0 0 0.5rem; } .imwp-process-desc { font-size: 0.9rem; line-height: 1.6; color: var(--text-secondary); margin: 0; max-width: 220px; } .imwp-cta-section { width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); padding: 6rem 1.5rem; background: linear-gradient(135deg, var(--bg-primary) 0%, #1a0f20 50%, #0f1a25 100%); text-align: center; overflow: hidden; position: relative; } html[data-theme="light"] .imwp-cta-section { background: linear-gradient(135deg, #f8fafc 0%, #e0e7ff 50%, #fdf4ff 100%); } .imwp-cta-content { position: relative; z-index: 1; max-width: 700px; margin: 0 auto; } .imwp-cta-title { font-size: clamp(1.75rem, 5vw, 2.75rem); font-weight: 700; color: var(--text-primary); margin: 0 0 1rem; } .imwp-cta-subtitle { font-size: 1rem; color: var(--text-secondary); max-width: 500px; margin: 0 auto 2rem; } .imwp-cta-actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; } .imwp-cta-decor { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .imwp-cta-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.4; animation: float 10s ease-in-out infinite; } .imwp-cta-orb-1 { width: 350px; height: 350px; background: var(--brand-primary); top: -150px; right: -50px; } .imwp-cta-orb-2 { width: 280px; height: 280px; background: var(--brand-secondary); bottom: -120px; left: -50px; animation-delay: -5s; } .imwp-footer { width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); background: var(--bg-secondary); padding: 4rem 1.5rem 1.5rem; border-top: 1px solid var(--border-color); } .imwp-footer-content { max-width: 1200px; margin: 0 auto; } .imwp-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2rem; } .imwp-footer-brand { max-width: 300px; } .imwp-footer-logo img { height: 45px; margin-bottom: 1rem; } .imwp-footer-tagline { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 1.5rem; } .imwp-footer-social { display: flex; gap: 0.75rem; } .imwp-social-link { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-color); border-radius: 0.5rem; color: var(--text-secondary); transition: all 0.3s ease; } .imwp-social-link:hover { background: var(--brand-primary); border-color: var(--brand-primary); color: white; transform: translateY(-2px); } .imwp-social-link svg { width: 18px; height: 18px; } .imwp-footer-heading { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin: 0 0 1.25rem; } .imwp-footer-links ul { display: flex; flex-direction: column; gap: 0.75rem; } .imwp-footer-links a { font-size: 0.9rem; color: var(--text-secondary); transition: color 0.3s ease; } .imwp-footer-links a:hover { color: var(--brand-primary); } .imwp-footer-contact { display: flex; flex-direction: column; gap: 1rem; } .imwp-footer-contact a, .imwp-footer-location { display: flex; align-items: center; gap: 0.75rem; font-size: 0.9rem; color: var(--text-secondary); text-decoration: none; transition: color 0.3s ease; } .imwp-footer-contact a:hover { color: var(--brand-primary); } .imwp-footer-contact svg { width: 20px; height: 20px; min-width: 20px; min-height: 20px; max-width: 20px; max-height: 20px; color: var(--brand-primary); flex-shrink: 0; } .imwp-contact-item { display: flex; align-items: center; gap: 0.75rem; font-size: 0.9rem; color: var(--text-secondary); } .imwp-contact-item svg { width: 20px; height: 20px; color: var(--brand-primary); flex-shrink: 0; } .imwp-contact-item a { color: var(--text-secondary); transition: color 0.3s ease; } .imwp-contact-item a:hover { color: var(--brand-primary); } .imwp-footer-contact-row { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border-color); } .imwp-footer-contact-row .imwp-footer-heading { margin-bottom: 0.5rem; } .imwp-footer-contact-items { display: flex; flex-wrap: wrap; gap: 1.5rem; color: var(--text-secondary); font-size: 0.875rem; } .imwp-footer-bottom { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1.5rem; padding-top: 2rem; border-top: 1px solid var(--border-color); font-size: 0.85rem; color: var(--text-muted); text-align: center; } .imwp-footer-copyright { color: var(--text-muted); } .imwp-footer-legal { display: flex; justify-content: center; align-items: center; gap: 0.5rem; } .footer-separator { margin: 0 0.25rem; opacity: 0.5; } .imwp-footer-legal a { color: var(--text-muted); transition: color 0.3s ease; } .imwp-footer-legal a:hover { color: var(--brand-primary); } .imwp-page-hero { padding: 10rem 2rem 5rem; background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%); text-align: center; } html[data-theme="light"] .imwp-page-hero { background: linear-gradient(135deg, #f8fafc 0%, #e0e7ff 100%); } .imwp-page-title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; color: var(--text-primary); margin: 0 0 1rem; line-height: 1.2; background: linear-gradient(135deg, var(--text-primary) 0%, var(--brand-primary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .imwp-page-subtitle { font-size: 1.125rem; color: var(--text-secondary); max-width: 600px; margin: 0 auto; line-height: 1.7; } .fade-up { opacity: 1; transform: none; } @keyframes liquid-wobble { 0% { filter: brightness(1); } 25% { filter: brightness(1.15); } 50% { filter: brightness(1.05); } 75% { filter: brightness(1.1); } 100% { filter: brightness(1); } } .tech-pill.liquid-wobble { animation: liquid-wobble 0.3s ease-out; } @media (max-width: 768px) { .imwp-brands-section { overflow: hidden !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } .tech-pill { display: none !important; } .tech-physics-container:not(.mobile-marquee) { display: none !important; } .tech-physics-container.mobile-marquee { display: flex !important; height: auto !important; min-height: 180px; flex-direction: column; gap: 12px; padding: 20px 0; overflow: hidden; } .marquee-track { display: flex; gap: 12px; width: max-content; } .marquee-left { animation: marqueeScrollLeft 20s linear infinite; } .marquee-right { animation: marqueeScrollRight 25s linear infinite; } .marquee-track .tech-pill { display: flex !important; position: relative !important; left: auto !important; visibility: visible !important; transform: none !important; flex-shrink: 0; padding: 10px 16px; } .marquee-track .tech-pill-logo { height: 20px; max-width: 90px; } @keyframes marqueeScrollLeft { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes marqueeScrollRight { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } } } .tech-bubble span { font-weight: 500; } .imwp-cta-section { padding: 4rem 1.5rem; background: linear-gradient(135deg, rgba(207, 91, 46, 0.08), rgba(168, 85, 247, 0.08)); } .imwp-cta-container { text-align: center; max-width: 800px; margin: 0 auto; } .imwp-cta-title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; color: var(--text-primary); margin: 0 0 1rem; } .imwp-cta-text { font-size: 1.125rem; color: var(--text-secondary); line-height: 1.7; margin: 0 0 2rem; } .imwp-footer-contact-items a { color: inherit; text-decoration: none; transition: color 0.3s ease; } .imwp-footer-contact-items a:hover { color: var(--brand-primary); }
@media (max-width: 1100px) { .imwp-dropdown-menu { min-width: 600px; padding: 1.5rem; } .imwp-dropdown-grid { gap: 1.5rem; } .imwp-dropdown-category { min-width: 150px; } .imwp-dropdown-link { font-size: 0.8rem; } } @media (max-width: 900px) { .imwp-dropdown-menu { position: fixed; top: 70px; left: 1rem; right: 1rem; transform: none; min-width: auto; max-height: 70vh; overflow-y: auto; padding: 1.5rem; } .imwp-nav-dropdown:hover .imwp-dropdown-menu { transform: none; } .imwp-dropdown-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } } @media (max-width: 600px) { .imwp-dropdown-grid { grid-template-columns: 1fr; gap: 1.5rem; } .imwp-dropdown-menu { padding: 1rem; } .imwp-dropdown-category { min-width: auto; } } @media (max-width: 1024px) { .imwp-services-grid { grid-template-columns: repeat(2, 1fr); } .imwp-about-grid { grid-template-columns: 1fr; gap: 2rem; } .imwp-marketing-grid { grid-template-columns: 1fr; } .imwp-print-grid { grid-template-columns: 1fr; } .imwp-print-cta-inner { flex-direction: column; text-align: center; } .imwp-process-grid { grid-template-columns: repeat(2, 1fr); } .imwp-process-grid::before { display: none; } .imwp-footer-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .imwp-nav-menu { display: none; } .imwp-menu-toggle { display: flex; } .imwp-nav-actions .btn { display: none; } .imwp-nav-logo img { height: 45px; } .imwp-hero { min-height: auto; padding: 6rem 1rem 5rem; } .imwp-section, .imwp-page-hero, .imwp-cta-section, .imwp-hero, .imwp-logos-section, .imwp-footer { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; box-sizing: border-box; } .imwp-hero-title { font-size: 1.75rem; } .imwp-hero-subtitle { font-size: 1rem; } .imwp-hero-actions { flex-direction: column; align-items: center; gap: 1.25rem; margin-bottom: 2rem; } .imwp-hero-actions .btn { width: auto; min-width: 200px; max-width: 280px; } .scroll-indicator { display: none; } .imwp-section { padding: 3.5rem 1rem; } .imwp-services-grid { grid-template-columns: 1fr; } .imwp-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } .imwp-stat-number { font-size: 1.5rem; } .imwp-process-grid { grid-template-columns: 1fr; gap: 1.5rem; } .imwp-process-number { width: 60px; height: 60px; font-size: 1rem; } .imwp-floating-card { position: relative; bottom: auto; left: auto; margin: 1rem auto 0; max-width: 100%; width: 100%; } .imwp-cta-section { padding: 4rem 1rem; } .imwp-cta-actions { flex-direction: column; align-items: center; } .imwp-cta-actions .btn { width: auto; min-width: 200px; max-width: 280px; } .imwp-orb-1, .imwp-orb-2, .imwp-orb-3 { width: 150px; height: 150px; filter: blur(40px); } .imwp-footer-grid { grid-template-columns: 1fr; gap: 2rem; } .imwp-footer-brand { max-width: 100%; } .imwp-footer-bottom { flex-direction: column; justify-content: center; align-items: center; gap: 1.25rem; text-align: center; } .imwp-footer-legal { justify-content: center; width: 100%; } .imwp-page-hero { padding: 7rem 1rem 3rem; } } @media (max-width: 480px) { .imwp-hero-title { font-size: 1.5rem; } .imwp-section-title { font-size: 1.25rem; } .imwp-stats-grid { grid-template-columns: 1fr; } .btn-lg { padding: 0.875rem 1.5rem; font-size: 0.9rem; } .imwp-hero-actions .btn, .imwp-cta-actions .btn { min-width: 180px; max-width: 250px; } }

#tech-bubbles-section { opacity: 0; transition: opacity 0.5s ease; position: relative; z-index: 10; padding-bottom: 0.5rem; } #tech-bubbles-section.initialized { opacity: 1; } .tech-bubbles-container { position: relative; width: 100%; max-width: 100%; min-height: 410px; margin: 0 auto; overflow: visible; border-radius: 1rem; isolation: isolate; z-index: 1; perspective: 1000px; perspective-origin: 50% 50%; } .tech-bubbles-backgrounds { display: none; } .tech-bubble-bg { position: absolute; background: rgba(30, 30, 35, 0.95); border-radius: 50px; will-change: transform; } html[data-theme="light"] .tech-bubble-bg { background: rgba(255, 255, 255, 0.92); } .tech-bubbles-header { text-align: center; padding: 2rem 1rem 0.5rem; position: relative; z-index: 200; pointer-events: none; margin-bottom: -80px; transform: translateZ(1px); } .tech-bubbles-header .imwp-section-title { margin-bottom: 0.5rem; font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; color: var(--text-primary); position: relative; z-index: 100; } .tech-bubbles-header .imwp-section-subtitle { font-size: 1.25rem; font-weight: 500; color: var(--text-secondary); position: relative; z-index: 100; } .tech-bubble { display: inline-flex; align-items: center; justify-content: center; width: fit-content; padding: 12px 20px; background: linear-gradient(180deg, rgba(70, 70, 80, 0.98) 0%, rgba(45, 45, 52, 0.98) 35%, rgba(25, 25, 30, 0.98) 100%); border-radius: 50px; border: 1px solid transparent; border-top-color: rgba(255, 255, 255, 0.35); border-left-color: rgba(255, 255, 255, 0.15); border-right-color: rgba(0, 0, 0, 0.2); border-bottom-color: rgba(0, 0, 0, 0.4); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 3px 8px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.15), inset 0 2px 3px rgba(255, 255, 255, 0.2), inset 0 -3px 6px rgba(0, 0, 0, 0.3), inset 2px 0 4px rgba(0, 0, 0, 0.1), inset -2px 0 4px rgba(0, 0, 0, 0.1); cursor: grab; user-select: none; -webkit-user-select: none; white-space: nowrap; z-index: 2; flex-shrink: 0; position: absolute; will-change: transform, box-shadow; gap: 8px; color: #ffffff; font-size: 18px; font-weight: 500; line-height: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); transform-style: preserve-3d; transition: border-radius 0.3s ease-out; isolation: isolate; } .tech-bubble::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%); border-radius: 50px 50px 100px 100px; pointer-events: none; z-index: 2; transform: translateZ(1px); } .tech-bubble::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(40, 40, 48, 0.98) 0%, rgba(20, 20, 25, 0.98) 100%); border-radius: inherit; transform: translateZ(-8px); z-index: -1; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 0, 0, 0.4); pointer-events: none; } html[data-theme="light"] .tech-bubble::after { background: linear-gradient(180deg, rgba(210, 210, 215, 0.98) 0%, rgba(180, 180, 190, 0.98) 100%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 10px rgba(0, 0, 0, 0.15); } .tech-bubble.wobble { animation: collisionRipple 0.5s ease-out; } @keyframes collisionRipple { 0% { border-radius: 50px; } 15% { border-radius: 35px 60px 38px 65px / 60px 35px 65px 38px; } 30% { border-radius: 65px 38px 60px 35px / 38px 65px 35px 60px; } 45% { border-radius: 42px 55px 45px 58px / 55px 42px 58px 45px; } 60% { border-radius: 55px 45px 50px 50px / 45px 55px 50px 50px; } 80% { border-radius: 50px 50px 52px 48px / 50px 50px 48px 52px; } 100% { border-radius: 50px; } } .tech-bubble.landed { transition: border-radius 0.4s ease-out; } .tech-bubble-logo { width: auto; height: 24px; min-height: 24px; max-height: 24px; max-width: 132px; flex-shrink: 0; object-fit: contain; pointer-events: none; } .tech-bubble:hover { filter: brightness(1.15); border-color: rgba(207, 91, 46, 0.5); box-shadow: 0 8px 35px rgba(207, 91, 46, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 20px rgba(207, 91, 46, 0.2); } .tech-bubble:active, .tech-bubble.dragging { cursor: grabbing; z-index: 100; filter: brightness(1.2); border-color: rgba(207, 91, 46, 0.7); box-shadow: 0 15px 50px rgba(207, 91, 46, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 30px rgba(207, 91, 46, 0.3); animation: none; } html[data-theme="light"] .tech-bubble { background: linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(250, 250, 252, 0.99) 35%, rgba(235, 235, 240, 0.99) 100%); border: 1px solid transparent; border-top-color: rgba(255, 255, 255, 1); border-left-color: rgba(255, 255, 255, 0.8); border-right-color: rgba(0, 0, 0, 0.08); border-bottom-color: rgba(0, 0, 0, 0.15); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15), 0 3px 8px rgba(0, 0, 0, 0.1), 0 0 40px rgba(0, 0, 0, 0.05), inset 0 2px 3px rgba(255, 255, 255, 0.9), inset 0 -3px 6px rgba(0, 0, 0, 0.08), inset 2px 0 4px rgba(0, 0, 0, 0.03), inset -2px 0 4px rgba(0, 0, 0, 0.03); color: #1a1a1a !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9); } html[data-theme="light"] .tech-bubble::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%); } html[data-theme="light"] .tech-bubble:hover { border-color: rgba(207, 91, 46, 0.4); box-shadow: 0 8px 35px rgba(207, 91, 46, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 20px rgba(207, 91, 46, 0.15); } html[data-theme="light"] .tech-bubble:active, html[data-theme="light"] .tech-bubble.dragging { border-color: rgba(207, 91, 46, 0.6); box-shadow: 0 15px 50px rgba(207, 91, 46, 0.3), inset 0 1px 0 rgba(255, 255, 255, 1), 0 0 30px rgba(207, 91, 46, 0.2); } html[data-theme="light"] .tech-bubble-logo.invert-on-light { filter: invert(1); } .tech-bubble-logo.invert-on-dark { filter: invert(1); } html[data-theme="light"] .tech-bubble-logo.invert-on-dark { filter: none; } .physics-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } .tech-bubbles-container.mobile-carousel { display: flex; flex-direction: column; gap: 1.5rem; overflow: visible; padding: 1rem 0 2rem; height: auto; min-height: 280px; } .tech-bubbles-container.mobile-marquee { min-height: 180px; height: auto; overflow: hidden; position: relative; padding: 1rem 0; } .tech-bubbles-container.mobile-marquee .tech-bubbles-header { display: block; position: relative; padding: 0.5rem 1rem 1rem; text-align: center; z-index: 10; } .marquee-wrapper { display: flex; flex-direction: column; gap: 12px; overflow: hidden; perspective: 800px; } .marquee-row { overflow: hidden; width: 100%; position: relative; } .marquee-track { display: flex; gap: 12px; width: max-content; will-change: transform; } .marquee-row-1 .marquee-track { animation: marqueeScrollLeft 25s linear infinite; } .marquee-row-2 .marquee-track { animation: marqueeScrollRight 30s linear infinite; } @keyframes marqueeScrollLeft { 0% { transform: translateX(0); } 100% { transform: translateX(-33.333%); } } @keyframes marqueeScrollRight { 0% { transform: translateX(-33.333%); } 100% { transform: translateX(0); } } .pill-3d { position: relative; padding: 10px 16px; font-size: 12px; border-radius: 50px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; flex-shrink: 0; transform-style: preserve-3d; transform: rotateX(8deg) translateZ(0); background: linear-gradient(180deg, rgba(60, 60, 70, 1) 0%, rgba(35, 35, 45, 1) 50%, rgba(25, 25, 35, 1) 100%); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), inset 0 -2px 4px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(124, 58, 237, 0.15); border: 1px solid rgba(255, 255, 255, 0.12); border-top-color: rgba(255, 255, 255, 0.2); border-bottom-color: rgba(0, 0, 0, 0.3); } [data-theme="light"] .pill-3d { background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(245, 245, 250, 1) 50%, rgba(235, 235, 245, 1) 100%); box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.9), inset 0 -2px 4px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08), 0 0 15px rgba(124, 58, 237, 0.1); border-color: rgba(0, 0, 0, 0.08); border-top-color: rgba(255, 255, 255, 0.8); border-bottom-color: rgba(0, 0, 0, 0.1); } .pill-3d .bubble-logo { width: 18px; height: 18px; } .pill-3d .bubble-text { font-weight: 600; font-size: 11px; letter-spacing: 0.3px; } .tech-bubbles-container.mobile-carousel { min-height: 280px; height: auto; overflow: visible; position: relative; padding: 1rem 0 2rem; } .tech-bubbles-container.mobile-carousel .tech-bubbles-header { display: block; position: relative; padding: 0.5rem 1rem 1.5rem; text-align: center; z-index: 10; } .mobile-3d-carousel { display: flex; flex-direction: column; gap: 50px; padding: 20px 0 30px; overflow: visible; } .mobile-3d-row { perspective: 800px; perspective-origin: 50% 50%; height: 70px; display: flex; justify-content: center; align-items: center; overflow: visible; position: relative; } .mobile-3d-track { position: relative; width: 100px; height: 50px; transform-style: preserve-3d; will-change: transform; } .mobile-3d-pill { position: absolute; left: 50%; top: 50%; margin-left: -70px; margin-top: -26px; width: 140px; padding: 16px 22px; font-size: 13px; font-weight: 700; letter-spacing: 0.3px; border-radius: 55px; display: flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; backface-visibility: visible; transform-style: preserve-3d; cursor: pointer; will-change: transform, opacity, box-shadow; transition: opacity 0.08s ease-out, border-color 0.08s ease-out; background: linear-gradient(180deg, rgba(120, 120, 140, 0.3) 0%, transparent 8%), linear-gradient(165deg, rgba(85, 85, 105, 0.98) 0%, rgba(55, 55, 75, 0.98) 20%, rgba(40, 40, 60, 0.98) 50%, rgba(25, 25, 45, 0.98) 80%, rgba(15, 15, 30, 0.98) 100%); box-shadow: inset 0 3px 6px rgba(255, 255, 255, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.4), inset 0 -4px 10px rgba(0, 0, 0, 0.5), inset 0 -1px 2px rgba(0, 0, 0, 0.3), inset 3px 0 8px rgba(0, 0, 0, 0.15), inset -3px 0 8px rgba(0, 0, 0, 0.15), 0 6px 16px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.3); border: 3px solid rgba(255, 255, 255, 0.12); } [data-theme="light"] .mobile-3d-pill { background: linear-gradient(145deg, rgba(255, 255, 255, 1) 0%, rgba(245, 245, 250, 1) 30%, rgba(235, 235, 245, 1) 70%, rgba(225, 225, 235, 1) 100%); box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.9), inset 0 -3px 6px rgba(0, 0, 0, 0.08), 0 6px 15px rgba(0, 0, 0, 0.15); border-color: rgba(0, 0, 0, 0.08); } .mobile-3d-pill .bubble-logo { width: 22px; height: 22px; flex-shrink: 0; } .mobile-3d-pill .bubble-text { font-weight: 600; font-size: 13px; letter-spacing: 0.3px; } .mobile-marquee-row { overflow: hidden; width: 100%; position: relative; mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%); padding: 10px 0; } .mobile-marquee-track { display: flex; gap: 12px; width: max-content; will-change: transform; } .mobile-marquee-track.scroll-left { animation: mobileScrollLeft 20s linear infinite; } .mobile-marquee-track.scroll-right { animation: mobileScrollRight 25s linear infinite; } @keyframes mobileScrollLeft { 0% { transform: translateX(0); } 100% { transform: translateX(-33.333%); } } @keyframes mobileScrollRight { 0% { transform: translateX(-33.333%); } 100% { transform: translateX(0); } } .mobile-marquee-wrapper { display: flex; flex-direction: column; gap: 16px; padding: 20px 0 30px; overflow: visible; } .mobile-marquee-pill { padding: 14px 20px; font-size: 13px; font-weight: 600; border-radius: 50px; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; flex-shrink: 0; cursor: pointer; background: linear-gradient(180deg, rgba(65, 65, 80, 1) 0%, rgba(45, 45, 60, 1) 40%, rgba(30, 30, 45, 1) 100%); box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.2), inset 0 -3px 6px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(0, 0, 0, 0.4), 0 3px 6px rgba(0, 0, 0, 0.3); border: 2px solid rgba(255, 255, 255, 0.12); transition: box-shadow 0.3s ease-out, border-color 0.3s ease-out, transform 0.3s ease-out; } [data-theme="light"] .mobile-marquee-pill { background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(248, 248, 252, 1) 40%, rgba(240, 240, 248, 1) 100%); box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.9), inset 0 -2px 4px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08); border-color: rgba(0, 0, 0, 0.1); } .mobile-marquee-pill .bubble-logo { width: 22px; height: 22px; flex-shrink: 0; } .mobile-marquee-pill .bubble-text { font-weight: 600; font-size: 13px; letter-spacing: 0.3px; } .mobile-pill-3d { padding: 10px 16px; font-size: 12px; border-radius: 50px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; flex-shrink: 0; cursor: pointer; background: linear-gradient(180deg, rgba(55, 55, 65, 1) 0%, rgba(35, 35, 45, 1) 50%, rgba(25, 25, 35, 1) 100%); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), inset 0 -2px 4px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3); border: 2px solid rgba(255, 255, 255, 0.1); transition: box-shadow 0.2s ease-out, border-color 0.2s ease-out, transform 0.2s ease-out; } [data-theme="light"] .mobile-pill-3d { background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(245, 245, 250, 1) 50%, rgba(235, 235, 245, 1) 100%); box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.9), inset 0 -2px 4px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08); border-color: rgba(0, 0, 0, 0.1); } .mobile-pill-3d.pill-glowing { transform: scale(1.05); box-shadow: 0 0 25px rgba(255, 140, 50, 0.6), 0 0 50px rgba(255, 100, 30, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.25), inset 0 -2px 4px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.4); border-color: rgba(255, 150, 80, 0.8); } [data-theme="light"] .mobile-pill-3d.pill-glowing { box-shadow: 0 0 20px rgba(255, 140, 50, 0.5), 0 0 40px rgba(255, 100, 30, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.9), 0 6px 20px rgba(0, 0, 0, 0.15); border-color: rgba(255, 150, 80, 0.7); } .mobile-pill-3d .bubble-logo { width: 18px; height: 18px; } .mobile-pill-3d .bubble-text { font-weight: 600; font-size: 11px; letter-spacing: 0.3px; } .mobile-marquee-wrapper .mobile-pill-3d, .mobile-marquee-wrapper .tech-bubble, .mobile-marquee-track .tech-bubble { transform: none !important; position: relative !important; left: auto !important; top: auto !important; } .carousel-row { perspective: 800px; height: 60px; display: flex; justify-content: center; align-items: center; overflow: visible; } .carousel-track { position: relative; width: 120px; height: 44px; transform-style: preserve-3d; } .carousel-row-1 .carousel-track { animation: carouselSpin 20s linear infinite; } .carousel-row-2 .carousel-track { animation: carouselSpin 25s linear infinite reverse; } @keyframes carouselSpin { from { transform: scaleZ(0.35) rotateY(0deg); } to { transform: scaleZ(0.35) rotateY(-360deg); } } .carousel-track .tech-bubble { position: absolute; left: 50%; top: 0; padding: 16px 24px; font-size: 14px; font-weight: 600; white-space: nowrap; transform-origin: center center -180px; transform-style: preserve-3d; background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%), linear-gradient(160deg, rgba(85, 85, 100, 0.98) 0%, rgba(55, 55, 70, 0.98) 30%, rgba(35, 35, 50, 0.98) 60%, rgba(20, 20, 30, 0.98) 100%); border: 2px solid rgba(168, 85, 247, 0.5); border-top-color: rgba(200, 150, 255, 0.4); border-radius: 50px; box-shadow: 0 0 20px rgba(168, 85, 247, 0.35), 0 0 40px rgba(168, 85, 247, 0.2), 0 10px 25px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 3px 8px rgba(255, 255, 255, 0.25), inset 0 1px 2px rgba(255, 255, 255, 0.4), inset 0 -5px 12px rgba(0, 0, 0, 0.5), inset 0 -2px 4px rgba(0, 0, 0, 0.3), inset 4px 0 10px rgba(0, 0, 0, 0.15), inset -4px 0 10px rgba(0, 0, 0, 0.15); } html[data-theme="light"] .carousel-track .tech-bubble { background: linear-gradient(160deg, rgba(255, 255, 255, 0.99) 0%, rgba(245, 245, 250, 0.99) 40%, rgba(230, 230, 238, 0.99) 100%); border: 1px solid rgba(207, 91, 46, 0.4); box-shadow: 0 0 15px rgba(207, 91, 46, 0.2), 0 0 30px rgba(207, 91, 46, 0.1), 0 8px 20px rgba(0, 0, 0, 0.15), inset 0 1px 2px rgba(255, 255, 255, 0.9), inset 0 -2px 4px rgba(0, 0, 0, 0.08); } .carousel-track .tech-bubble::before, .carousel-track .tech-bubble::after { content: none !important; display: none !important; } .carousel-track .tech-bubble { backface-visibility: hidden; -webkit-backface-visibility: hidden; } @keyframes sparkle-fade { 0% { opacity: 1; transform: translate(var(--x, 0), var(--y, 0)) scale(1); } 100% { opacity: 0; transform: translate(var(--x, 0), var(--y, 0)) scale(0.3); } } .trail-sparkle { z-index: 10; } .carousel-track .tech-bubble-logo { height: 18px; max-width: 70px; } .carousel-track .tech-bubble:nth-child(1) { transform: translateX(-50%) rotateY(0deg) translateZ(180px); } .carousel-track .tech-bubble:nth-child(2) { transform: translateX(-50%) rotateY(45deg) translateZ(180px); } .carousel-track .tech-bubble:nth-child(3) { transform: translateX(-50%) rotateY(90deg) translateZ(180px); } .carousel-track .tech-bubble:nth-child(4) { transform: translateX(-50%) rotateY(135deg) translateZ(180px); } .carousel-track .tech-bubble:nth-child(5) { transform: translateX(-50%) rotateY(180deg) translateZ(180px); } .carousel-track .tech-bubble:nth-child(6) { transform: translateX(-50%) rotateY(225deg) translateZ(180px); } .carousel-track .tech-bubble:nth-child(7) { transform: translateX(-50%) rotateY(270deg) translateZ(180px); } .carousel-track .tech-bubble:nth-child(8) { transform: translateX(-50%) rotateY(315deg) translateZ(180px); } .carousel-track .tech-bubble:nth-child(9) { transform: translateX(-50%) rotateY(22.5deg) translateZ(180px); } .carousel-track .tech-bubble:nth-child(10) { transform: translateX(-50%) rotateY(67.5deg) translateZ(180px); } .carousel-track .tech-bubble:nth-child(11) { transform: translateX(-50%) rotateY(112.5deg) translateZ(180px); } .carousel-track .tech-bubble:nth-child(12) { transform: translateX(-50%) rotateY(157.5deg) translateZ(180px); } .carousel-track .tech-bubble:nth-child(13) { transform: translateX(-50%) rotateY(202.5deg) translateZ(180px); } .carousel-track .tech-bubble:nth-child(14) { transform: translateX(-50%) rotateY(247.5deg) translateZ(180px); } .carousel-track .tech-bubble:nth-child(15) { transform: translateX(-50%) rotateY(292.5deg) translateZ(180px); } .carousel-track .tech-bubble:nth-child(16) { transform: translateX(-50%) rotateY(337.5deg) translateZ(180px); } .carousel-track .tech-bubble:nth-child(17) { transform: translateX(-50%) rotateY(11.25deg) translateZ(180px); } .carousel-track .tech-bubble:nth-child(18) { transform: translateX(-50%) rotateY(56.25deg) translateZ(180px); } .carousel-track .tech-bubble { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); transition: box-shadow 0.15s ease-out; } .tech-bubbles-container.mobile-marquee .marquee-row { display: block; } @media (max-width: 767px) { .tech-bubbles-container:not(.mobile-carousel):not(.mobile-marquee) { display: none; } .tech-bubble { position: relative; } .tech-bubbles-header { margin-bottom: 0; padding-bottom: 1rem; position: relative; z-index: 1; } .tech-bubbles-header .imwp-section-title { text-shadow: none; } .tech-bubbles-header .imwp-section-subtitle { text-shadow: none; } } @media (min-width: 768px) { .tech-bubbles-container.mobile-marquee { display: none; } .tech-bubble { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1); border: 2px solid rgba(255, 255, 255, 0.15); } .tech-bubble:hover { box-shadow: 0 6px 25px rgba(207, 91, 46, 0.25), 0 3px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15); border-color: rgba(207, 91, 46, 0.4); } .tech-bubble:active, .tech-bubble.dragging { box-shadow: 0 8px 30px rgba(207, 91, 46, 0.35), 0 4px 15px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2); border-color: rgba(207, 91, 46, 0.6); } html[data-theme="light"] .tech-bubble { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8); border: 2px solid rgba(0, 0, 0, 0.08); } html[data-theme="light"] .tech-bubble:hover { box-shadow: 0 6px 25px rgba(207, 91, 46, 0.15), 0 3px 12px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9); } }