:root { --color-primary: #4A90D9; --color-primary-dark: #3A7BC8; --color-primary-light: #6BA3E0; --color-primary-bg: rgba(74, 144, 217, 0.08); --color-secondary: #E8655A; --color-secondary-dark: #D4524A; --color-secondary-light: #EE8078; --color-secondary-bg: rgba(232, 101, 90, 0.08); --color-dark: #1A2B4A; --color-dark-soft: #2C3E5A; --color-text: #374151; --color-text-light: #6B7280; --color-text-muted: #9CA3AF; --color-border: #E5E7EB; --color-border-light: #F3F4F6; --color-bg: #FFFFFF; --color-bg-alt: #F5F7FA; --color-bg-dark: #0F172A; --color-bg-dark-soft: #1E293B; --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); --gradient-secondary: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%); --gradient-hero: linear-gradient(135deg, #0F172A 0%, #1A2B4A 50%, #1E3A5F 100%); --gradient-dark: linear-gradient(180deg, var(--color-bg-dark) 0%, var(--color-bg-dark-soft) 100%); --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; --text-6xl: 3.75rem; --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; --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-full: 9999px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15); --shadow-primary: 0 8px 25px rgba(74, 144, 217, 0.25); --shadow-secondary: 0 8px 25px rgba(232, 101, 90, 0.25); --color-success: #10b981; --color-success-bg: #ecfdf5; --color-danger: #ef4444; --color-danger-bg: #fef2f2; --color-warning: #f59e0b; --color-warning-bg: #fffbeb; --color-info: #3b82f6; --color-info-bg: #eff6ff; --color-whatsapp: #25D366; --gradient-success: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); --gradient-danger: linear-gradient(135deg, #eb3349 0%, #f45c43 100%); --gradient-warning: linear-gradient(135deg, #f7971e 0%, #ffd200 100%); --gradient-info: linear-gradient(135deg, #2196f3 0%, #21cbf3 100%); --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1); --easing-standard: cubic-bezier(0.4, 0, 0.2, 1); --easing-decelerate: cubic-bezier(0, 0, 0.2, 1); --easing-accelerate: cubic-bezier(0.4, 0, 1, 1); --container-max: 1200px; --container-narrow: 800px; --navbar-height: 80px; --glow-primary: rgba(74, 144, 217, 0.4); --glow-primary-strong: rgba(74, 144, 217, 0.6); --glow-primary-subtle: rgba(74, 144, 217, 0.15); --glow-secondary: rgba(232, 101, 90, 0.4); --glow-secondary-strong: rgba(232, 101, 90, 0.6); --glow-secondary-subtle: rgba(232, 101, 90, 0.15); --glow-cyan: rgba(56, 189, 248, 0.4); --glow-white: rgba(255, 255, 255, 0.15); --glass-bg: rgba(255, 255, 255, 0.06); --glass-bg-light: rgba(255, 255, 255, 0.08); --glass-bg-medium: rgba(255, 255, 255, 0.12); --glass-bg-strong: rgba(255, 255, 255, 0.18); --glass-border: rgba(255, 255, 255, 0.1); --glass-border-light: rgba(255, 255, 255, 0.06); --glass-border-strong: rgba(255, 255, 255, 0.2); --glass-blur: blur(20px); --glass-blur-strong: blur(40px); --glass-light-bg: rgba(255, 255, 255, 0.7); --glass-light-border: rgba(255, 255, 255, 0.5); --glass-light-shadow: 0 8px 32px rgba(0, 0, 0, 0.06); --gradient-neon: linear-gradient(135deg, #4A90D9 0%, #38BDF8 50%, #6BA3E0 100%); --gradient-neon-reverse: linear-gradient(135deg, #38BDF8 0%, #4A90D9 100%); --gradient-warm: linear-gradient(135deg, #E8655A 0%, #F59E0B 100%); --gradient-hero-premium: linear-gradient(135deg, #0B1120 0%, #0F172A 25%, #1A2B4A 60%, #1E3A5F 100%); --gradient-mesh-1: radial-gradient(ellipse at 20% 50%, rgba(74, 144, 217, 0.25) 0%, transparent 55%); --gradient-mesh-2: radial-gradient(ellipse at 80% 20%, rgba(232, 101, 90, 0.15) 0%, transparent 55%); --gradient-mesh-3: radial-gradient(ellipse at 60% 80%, rgba(56, 189, 248, 0.12) 0%, transparent 50%); --gradient-section-alt: linear-gradient(180deg, #F8FAFF 0%, #F0F4FA 100%); --gradient-card-border: linear-gradient(135deg, rgba(74, 144, 217, 0.5), rgba(232, 101, 90, 0.3), rgba(74, 144, 217, 0.2)); --gradient-text-primary: linear-gradient(135deg, #4A90D9 0%, #38BDF8 100%); --gradient-text-warm: linear-gradient(135deg, #E8655A 0%, #F59E0B 100%); --gradient-footer: linear-gradient(180deg, #080E1A 0%, #0F172A 30%, #131D32 100%); --shadow-glow-primary: 0 0 20px rgba(74, 144, 217, 0.3), 0 0 60px rgba(74, 144, 217, 0.1); --shadow-glow-secondary: 0 0 20px rgba(232, 101, 90, 0.3), 0 0 60px rgba(232, 101, 90, 0.1); --shadow-glow-card: 0 8px 30px rgba(74, 144, 217, 0.08), 0 0 1px rgba(74, 144, 217, 0.15); --shadow-glow-card-hover: 0 20px 50px rgba(74, 144, 217, 0.15), 0 0 1px rgba(74, 144, 217, 0.3); --shape-primary: rgba(74, 144, 217, 0.08); --shape-secondary: rgba(232, 101, 90, 0.06); --shape-cyan: rgba(56, 189, 248, 0.07); --text-7xl: 4.5rem; --text-8xl: 6rem; --transition-glow: 400ms ease; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; font-size: 16px; } body { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.7; color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-primary-dark); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; color: var(--color-dark); } h1 { font-size: var(--text-6xl); font-weight: 800; letter-spacing: -0.02em; } h2 { font-size: var(--text-4xl); font-weight: 700; letter-spacing: -0.01em; } h3 { font-size: var(--text-2xl); } h4 { font-size: var(--text-xl); } p { margin-bottom: var(--space-4); } p:last-child { margin-bottom: 0; } ul, ol { list-style: none; } .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-6); } .container--narrow { max-width: var(--container-narrow); } .section--decorated { position: relative; overflow: hidden; } .deco-shape { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; } .deco-shape--blob-1 { width: 400px; height: 400px; background: radial-gradient(circle, var(--shape-primary) 0%, transparent 70%); filter: blur(60px); top: -100px; right: -100px; animation: floatShape1 20s ease-in-out infinite; } .deco-shape--blob-2 { width: 350px; height: 350px; background: radial-gradient(circle, var(--shape-secondary) 0%, transparent 70%); filter: blur(50px); bottom: -80px; left: -80px; animation: floatShape2 25s ease-in-out infinite; } .deco-shape--blob-3 { width: 250px; height: 250px; background: radial-gradient(circle, var(--shape-cyan) 0%, transparent 70%); filter: blur(40px); top: 50%; left: 60%; animation: floatShape3 18s ease-in-out infinite; } .deco-shape--circle-sm { width: 12px; height: 12px; background: var(--gradient-neon); opacity: 0.3; animation: floatShape1 12s ease-in-out infinite; } .deco-shape--circle-md { width: 24px; height: 24px; border: 2px solid rgba(74, 144, 217, 0.2); background: transparent; animation: floatShape2 15s ease-in-out infinite; } .deco-shape--circle-lg { width: 60px; height: 60px; border: 2px solid rgba(232, 101, 90, 0.15); background: transparent; animation: floatShape3 20s ease-in-out infinite; } .deco-shape--dots { width: 200px; height: 200px; border-radius: 0; background-image: radial-gradient(circle, rgba(74, 144, 217, 0.15) 1px, transparent 1px); background-size: 20px 20px; opacity: 0.5; } .deco-shape--cross { width: 20px; height: 20px; border-radius: 0; background: transparent; } .deco-shape--cross::before, .deco-shape--cross::after { content: ''; position: absolute; background: rgba(74, 144, 217, 0.25); } .deco-shape--cross::before { width: 100%; height: 2px; top: 50%; transform: translateY(-50%); } .deco-shape--cross::after { width: 2px; height: 100%; left: 50%; transform: translateX(-50%); } .deco-shape--ring { width: 120px; height: 120px; border: 3px solid transparent; background: linear-gradient(var(--color-bg), var(--color-bg)) padding-box, var(--gradient-neon) border-box; animation: spin 30s linear infinite, floatShape1 15s ease-in-out infinite; } .section--dark .deco-shape--blob-1 { background: radial-gradient(circle, rgba(74, 144, 217, 0.12) 0%, transparent 70%); } .section--dark .deco-shape--blob-2 { background: radial-gradient(circle, rgba(232, 101, 90, 0.08) 0%, transparent 70%); } .relative-z1 { position: relative; z-index: 1; } .section { padding: var(--space-24) 0; } .section--alt { background: var(--gradient-section-alt); position: relative; overflow: hidden; } .section--alt::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 10% 80%, rgba(74, 144, 217, 0.04) 0%, transparent 50%), radial-gradient(ellipse at 90% 20%, rgba(232, 101, 90, 0.03) 0%, transparent 50%); pointer-events: none; } .section--dark { background: var(--gradient-dark); color: #fff; position: relative; overflow: hidden; } .section--dark::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 50%, rgba(74, 144, 217, 0.1) 0%, transparent 50%), radial-gradient(ellipse at 80% 50%, rgba(232, 101, 90, 0.06) 0%, transparent 50%); pointer-events: none; } .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; } .section__header { text-align: center; margin-bottom: var(--space-16); } .section__header h2 { margin-bottom: var(--space-4); position: relative; } .section__header h2::after { content: ''; display: block; width: 80px; height: 4px; background: var(--gradient-warm); border-radius: var(--radius-full); margin: var(--space-4) auto 0; box-shadow: 0 0 15px var(--glow-secondary-subtle); } .section__header p { font-size: var(--text-lg); color: var(--color-text-light); max-width: 600px; margin: 0 auto; } .section__header h2 { background: var(--gradient-text-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .section--dark .section__header h2, .section--dark h2 { background: linear-gradient(135deg, #FFFFFF 0%, #CBD5E1 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .page-header h1 { background: linear-gradient(135deg, #FFFFFF 0%, #94A3B8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .section__label { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-4); background: var(--color-primary-bg); border-radius: var(--radius-full); font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-primary); margin-bottom: var(--space-4); } .section--dark .section__label { background: var(--glass-bg-light); color: rgba(255, 255, 255, 0.8); border: 1px solid var(--glass-border); } .navbar { position: fixed; top: 0; left: 0; right: 0; height: var(--navbar-height); background: rgba(255, 255, 255, 0.02); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border-bottom: 1px solid transparent; z-index: 1000; transition: all var(--transition-slow); } .navbar.scrolled { background: rgba(255, 255, 255, 0.92); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-bottom-color: rgba(74, 144, 217, 0.08); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(74, 144, 217, 0.04); } .navbar__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; } .navbar__logo img { height: 44px; width: auto; } .navbar__menu { display: flex; align-items: center; gap: var(--space-1); } .navbar__link { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 500; color: var(--color-dark); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); transition: all var(--transition-fast); position: relative; } .navbar__link:hover, .navbar__link.active { color: var(--color-primary); background: var(--color-primary-bg); } .navbar__link.active::after { content: ''; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); width: 20px; height: 3px; background: var(--color-primary); border-radius: var(--radius-full); } .navbar__cta.btn { font-size: var(--text-sm); padding: var(--space-2) var(--space-6); background: var(--gradient-neon); box-shadow: 0 2px 10px var(--glow-primary-subtle); } .navbar__cta.btn:hover { box-shadow: 0 4px 20px var(--glow-primary); } .navbar__lang { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-light); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--color-border); transition: all var(--transition-fast); display: flex; align-items: center; gap: var(--space-1); } .navbar__lang:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-bg); } .lang-icon { font-size: var(--text-sm); } .navbar__toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; background: none; border: none; cursor: pointer; padding: 6px; border-radius: var(--radius-md); transition: background var(--transition-fast); } .navbar__toggle:hover { background: var(--color-bg-alt); } .navbar__toggle-line { display: block; width: 100%; height: 2px; background: var(--color-dark); border-radius: 2px; transition: all var(--transition-base); transform-origin: center; } .navbar__toggle.active .navbar__toggle-line:nth-child(1) { transform: translateY(7px) rotate(45deg); } .navbar__toggle.active .navbar__toggle-line:nth-child(2) { opacity: 0; transform: scaleX(0); } .navbar__toggle.active .navbar__toggle-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .navbar:not(.scrolled) .navbar__link { color: rgba(255, 255, 255, 0.8); } .navbar:not(.scrolled) .navbar__link:hover, .navbar:not(.scrolled) .navbar__link.active { color: #fff; background: var(--glass-bg-light); } .navbar:not(.scrolled) .navbar__lang { color: rgba(255, 255, 255, 0.7); border-color: rgba(255, 255, 255, 0.2); } .navbar:not(.scrolled) .navbar__lang:hover { color: #fff; border-color: rgba(255, 255, 255, 0.4); } .navbar:not(.scrolled) .navbar__toggle-line { background: #fff; } .hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--gradient-hero-premium); padding: var(--navbar-height) 0 0; overflow: hidden; } .hero::before { content: ''; position: absolute; inset: 0; background: var(--gradient-mesh-1), var(--gradient-mesh-2), var(--gradient-mesh-3); pointer-events: none; animation: heroMeshShift 15s ease-in-out infinite alternate; } .hero::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(74, 144, 217, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(74, 144, 217, 0.03) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; opacity: 0.5; } .hero__particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .hero__particle { position: absolute; width: 4px; height: 4px; background: rgba(255, 255, 255, 0.15); border-radius: 50%; animation: float-particle linear infinite; } .hero__particle--glow { width: 6px; height: 6px; background: rgba(74, 144, 217, 0.4); box-shadow: 0 0 10px rgba(74, 144, 217, 0.3); } .hero__shapes { position: absolute; inset: 0; pointer-events: none; z-index: 1; } .hero__content { position: relative; text-align: center; z-index: 2; max-width: 950px; padding: var(--space-8); } .hero__badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-6); background: var(--glass-bg); border: 1px solid var(--glass-border-strong); border-radius: var(--radius-full); color: rgba(255, 255, 255, 0.85); font-size: var(--text-sm); font-weight: 500; margin-bottom: var(--space-8); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: 0 0 30px rgba(74, 144, 217, 0.08); animation: heroFadeDown 0.8s ease 0.2s both; } .hero__badge-dot { width: 8px; height: 8px; background: #34D399; border-radius: 50%; animation: pulse-dot 2s ease-in-out infinite; box-shadow: 0 0 10px rgba(52, 211, 153, 0.4); } .hero h1 { color: #fff; font-size: var(--text-7xl); font-weight: 800; margin-bottom: var(--space-6); line-height: 1.05; letter-spacing: -0.03em; animation: heroFadeUp 0.8s ease 0.4s both; } .hero h1 .text-secondary { background: var(--gradient-warm); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero__typed-wrapper { display: block; min-height: 1.2em; } .hero__typed { background: var(--gradient-text-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; position: relative; } .hero__typed::after { content: '|'; animation: blink-cursor 0.7s step-end infinite; -webkit-text-fill-color: var(--color-primary-light); font-weight: 300; } .hero__subtitle { color: rgba(255, 255, 255, 0.65); font-size: var(--text-xl); max-width: 620px; margin: 0 auto var(--space-10); line-height: 1.7; animation: heroFadeUp 0.8s ease 0.6s both; } .hero__buttons { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; animation: heroFadeUp 0.8s ease 0.8s both; } .back-to-top { position: fixed; bottom: 30px; right: 30px; width: 48px; height: 48px; background: var(--gradient-neon); color: #fff; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px var(--glow-primary); opacity: 0; visibility: hidden; transform: translateY(20px); transition: all var(--transition-base); z-index: 999; } .back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { transform: translateY(-4px); box-shadow: 0 8px 30px var(--glow-primary-strong); } .footer { background: var(--gradient-footer); color: rgba(255, 255, 255, 0.7); padding: var(--space-20) 0 0; position: relative; overflow: hidden; } .footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--color-primary), var(--color-secondary), transparent); } .footer::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 10% 90%, rgba(74, 144, 217, 0.06) 0%, transparent 50%), radial-gradient(ellipse at 90% 10%, rgba(232, 101, 90, 0.04) 0%, transparent 50%); pointer-events: none; } .footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: var(--space-10); padding-bottom: var(--space-16); border-bottom: 1px solid rgba(255, 255, 255, 0.1); position: relative; z-index: 1; } .footer__logo { display: inline-block; margin-bottom: var(--space-4); } .footer__logo img { height: 40px; width: auto; filter: none; opacity: 1; } .footer__text { font-size: var(--text-sm); line-height: 1.7; margin-bottom: var(--space-6); } .footer__social { display: flex; gap: var(--space-3); } .footer__social-link { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.7); transition: all var(--transition-fast); } .footer__social-link:hover { background: var(--gradient-neon); border-color: transparent; color: #fff; transform: translateY(-3px); box-shadow: 0 8px 25px var(--glow-primary); } .footer__title { color: #fff; font-size: var(--text-base); font-weight: 600; margin-bottom: var(--space-6); position: relative; padding-bottom: var(--space-3); } .footer__title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 2px; background: var(--gradient-warm); border-radius: var(--radius-full); box-shadow: 0 0 10px var(--glow-secondary-subtle); } .footer__list { display: flex; flex-direction: column; gap: var(--space-3); } .footer__list a { color: rgba(255, 255, 255, 0.6); font-size: var(--text-sm); transition: all var(--transition-fast); display: inline-flex; align-items: center; } .footer__list a:hover { color: rgba(255, 255, 255, 0.95); transform: translateX(6px); text-shadow: 0 0 20px var(--glow-primary-subtle); } .footer__list--contact li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); } .footer__list--contact svg { flex-shrink: 0; margin-top: 2px; color: var(--color-primary-light); } .footer__list--contact a { color: rgba(255, 255, 255, 0.6); } .footer__list--contact a:hover { color: var(--color-primary-light); transform: none; } .footer__bottom { padding: var(--space-6) 0; text-align: center; font-size: var(--text-sm); color: rgba(255, 255, 255, 0.4); position: relative; z-index: 1; } .text-center { text-align: center; } .text-primary { color: var(--color-primary); } .text-secondary { color: var(--color-secondary); } .text-light { color: var(--color-text-light); } .text-white { color: #fff; } .mt-4 { margin-top: var(--space-4); } .mt-8 { margin-top: var(--space-8); } .mb-4 { margin-bottom: var(--space-4); } .mb-8 { margin-bottom: var(--space-8); } .t-caption { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); } .t-stat { font-variant-numeric: tabular-nums; } .t-mono { font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'Consolas', monospace; font-variant-numeric: tabular-nums; } .t-lead { font-size: var(--text-lg); color: var(--color-text-light); } .mb-sm { margin-bottom: var(--space-2); } .mb-md { margin-bottom: var(--space-4); } .mb-lg { margin-bottom: var(--space-6); } .mb-xl { margin-bottom: var(--space-8); } .mt-lg { margin-top: var(--space-8); } .p-lg { padding: var(--space-10); } .btn--whatsapp { background: var(--color-whatsapp); box-shadow: 0 8px 25px rgba(37, 211, 102, 0.25); color: #fff; } .btn--whatsapp:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(37, 211, 102, 0.35); color: #fff; } .card--padded { padding: var(--space-10); } .card--highlight { background: var(--color-primary-bg); border-color: var(--color-primary); } .card--accent-primary { border-left: 4px solid var(--color-primary); } .card--accent-secondary { border-left: 4px solid var(--color-secondary); } .partners__logo-item { min-width: 150px; text-align: center; padding: var(--space-3) var(--space-5); background: var(--color-bg-alt); border-radius: var(--radius-lg); font-weight: 600; color: var(--color-text-muted); font-size: var(--text-sm); } .error-page h2 { margin-bottom: var(--space-4); } .error-page p { font-size: var(--text-lg); margin-bottom: var(--space-8); } @keyframes blink-cursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.5); } } @keyframes float-particle { 0% { transform: translateY(100vh) translateX(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-100vh) translateX(100px); opacity: 0; } } @keyframes floatShape1 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(20px, -20px) scale(1.05); } 66% { transform: translate(-10px, 15px) scale(0.95); } } @keyframes floatShape2 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(-15px, 25px) scale(1.03); } 66% { transform: translate(20px, -10px) scale(0.97); } } @keyframes floatShape3 { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(30px, -20px) rotate(10deg); } } @keyframes heroMeshShift { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0.8; transform: scale(1.05); } } .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-8); font-family: var(--font-heading); font-size: var(--text-base); font-weight: 600; border: 2px solid transparent; border-radius: var(--radius-full); cursor: pointer; transition: all var(--transition-base), box-shadow var(--transition-glow); text-decoration: none; line-height: 1.5; position: relative; overflow: hidden; z-index: 1; } .btn::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, transparent 50%); opacity: 0; transition: opacity var(--transition-fast); z-index: -1; } .btn:hover::before { opacity: 1; } .btn--primary { background: var(--gradient-neon); color: #fff; box-shadow: 0 4px 15px var(--glow-primary-subtle), 0 0 0 0 var(--glow-primary); } .btn--primary:hover { transform: translateY(-3px); box-shadow: 0 8px 30px var(--glow-primary), 0 0 40px var(--glow-primary-subtle); color: #fff; } .btn--secondary { background: var(--gradient-warm); color: #fff; box-shadow: 0 4px 15px var(--glow-secondary-subtle), 0 0 0 0 var(--glow-secondary); } .btn--secondary:hover { transform: translateY(-3px); box-shadow: 0 8px 30px var(--glow-secondary), 0 0 40px var(--glow-secondary-subtle); color: #fff; } .btn--outline { background: var(--glass-bg); color: #fff; border-color: var(--glass-border-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); } .btn--outline:hover { background: var(--glass-bg-medium); border-color: rgba(255, 255, 255, 0.5); color: #fff; transform: translateY(-3px); box-shadow: 0 8px 30px rgba(255, 255, 255, 0.08); } .btn--outline-dark { background: transparent; color: var(--color-primary); border-color: rgba(74, 144, 217, 0.3); } .btn--outline-dark:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; transform: translateY(-3px); box-shadow: var(--shadow-glow-primary); } .btn--lg { padding: var(--space-4) var(--space-12); font-size: var(--text-lg); } .btn--sm { padding: var(--space-2) var(--space-5); font-size: var(--text-sm); } .btn--block { width: 100%; } .card { background: var(--glass-light-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: var(--radius-2xl); padding: var(--space-8); box-shadow: var(--shadow-glow-card); transition: all var(--transition-base), box-shadow var(--transition-glow); position: relative; overflow: hidden; border: 1px solid rgba(74, 144, 217, 0.1); } .card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--gradient-card-border); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity var(--transition-base); pointer-events: none; } .card:hover { transform: translateY(-6px); box-shadow: var(--shadow-glow-card-hover); border-color: transparent; } .card:hover::before { opacity: 1; } .card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gradient-neon); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--easing-decelerate); } .card:hover::after { transform: scaleX(1); } .card__icon { width: 72px; height: 72px; border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-6); font-size: 2rem; transition: all var(--transition-base); position: relative; } .card__icon svg.svg-icon { width: 36px; height: 36px; } .card__icon--primary { background: linear-gradient(135deg, rgba(74, 144, 217, 0.12) 0%, rgba(56, 189, 248, 0.08) 100%); color: var(--color-primary); box-shadow: 0 0 0 0 var(--glow-primary-subtle); } .card__icon--secondary { background: linear-gradient(135deg, rgba(232, 101, 90, 0.12) 0%, rgba(245, 158, 11, 0.08) 100%); color: var(--color-secondary); box-shadow: 0 0 0 0 var(--glow-secondary-subtle); } .card:hover .card__icon--primary { transform: scale(1.1); box-shadow: 0 0 25px var(--glow-primary-subtle); background: var(--gradient-neon); color: #fff; } .card:hover .card__icon--secondary { transform: scale(1.1); box-shadow: 0 0 25px var(--glow-secondary-subtle); background: var(--gradient-warm); color: #fff; } .card__title { font-size: var(--text-xl); font-weight: 700; margin-bottom: var(--space-3); color: var(--color-dark); } .card__text { color: var(--color-text-light); font-size: var(--text-sm); line-height: 1.7; } .card__link { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-5); font-weight: 600; font-size: var(--text-sm); color: var(--color-primary); transition: all var(--transition-fast); } .card__link:hover { gap: var(--space-3); color: var(--color-primary-dark); text-shadow: 0 0 20px var(--glow-primary-subtle); } .card__link svg { transition: transform var(--transition-fast); } .card__link:hover svg { transform: translateX(4px); } .section--dark .card { background: var(--glass-bg-light); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); } .section--dark .card:hover { background: var(--glass-bg-medium); border-color: var(--glass-border-strong); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3), 0 0 40px var(--glow-primary-subtle); } .section--dark .card__title { color: #fff; } .section--dark .card__text { color: rgba(255, 255, 255, 0.7); } .card-shine { position: relative; overflow: hidden; } .card-shine::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient( 45deg, transparent 35%, rgba(74, 144, 217, 0.06) 45%, rgba(255, 255, 255, 0.1) 50%, rgba(74, 144, 217, 0.06) 55%, transparent 65% ); transform: translateX(-100%); transition: none; pointer-events: none; } .card-shine:hover::before { animation: cardShine 0.8s ease; } .service-detail { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; padding: var(--space-16) 0; border-bottom: 1px solid var(--color-border-light); } .service-detail:nth-child(even) { direction: rtl; } .service-detail:nth-child(even) > * { direction: ltr; } .service-detail:last-child { border-bottom: none; } .service-detail__icon { width: 80px; height: 80px; border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; margin-bottom: var(--space-6); } .service-detail__icon svg.svg-icon { width: 44px; height: 44px; transition: all var(--transition-base); } .service-detail__features { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-6) 0; } .service-detail__feature { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text); } .service-detail__feature::before { content: ''; width: 20px; height: 20px; min-width: 20px; border-radius: 50%; background: var(--color-primary-bg); display: flex; align-items: center; justify-content: center; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%234A90D9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E"); background-size: 14px; background-position: center; background-repeat: no-repeat; } .service-detail__visual { display: flex; align-items: center; justify-content: center; min-height: 300px; background: var(--color-bg-alt); border-radius: var(--radius-2xl); padding: var(--space-8); position: relative; overflow: hidden; } .service-detail__visual-icon { font-size: 8rem; opacity: 0.15; position: absolute; } .service-detail__visual-icon svg.svg-icon { width: 120px; height: 120px; } .service-detail__visual-graphic svg.svg-icon { width: 80px; height: 80px; } .service-detail__visual-graphic { width: 200px; height: 200px; border-radius: var(--radius-2xl); display: flex; align-items: center; justify-content: center; font-size: 5rem; position: relative; z-index: 1; } .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); } .stat { text-align: center; padding: var(--space-8) var(--space-4); background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-2xl); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); transition: all var(--transition-base); } .stat:hover { background: var(--glass-bg-medium); border-color: var(--glass-border-strong); transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), 0 0 30px var(--glow-primary-subtle); } .stat__icon { width: 56px; height: 56px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-4); font-size: 1.5rem; background: var(--gradient-neon); color: #fff; } .stat__icon svg.svg-icon { width: 28px; height: 28px; box-shadow: 0 4px 15px var(--glow-primary-subtle); } .stat__number { font-family: var(--font-heading); font-size: var(--text-5xl); font-weight: 800; line-height: 1; margin-bottom: var(--space-2); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; background: var(--gradient-text-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .stat__number .stat__suffix { font-size: var(--text-3xl); background: var(--gradient-text-warm); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .stat__label { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.6); font-weight: 500; text-transform: uppercase; letter-spacing: 1px; } .stat__number.counting { text-shadow: 0 0 40px var(--glow-primary), 0 0 80px var(--glow-primary-subtle); } .testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); } .testimonial { background: var(--glass-light-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: var(--radius-2xl); padding: var(--space-8); border: 1px solid rgba(74, 144, 217, 0.08); position: relative; transition: all var(--transition-base); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03); } .testimonial::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--gradient-card-border); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity var(--transition-base); pointer-events: none; } .testimonial:hover { transform: translateY(-6px); box-shadow: var(--shadow-glow-card-hover); } .testimonial:hover::before { opacity: 1; } .testimonial__stars { display: flex; gap: 2px; margin-bottom: var(--space-4); color: #FBBF24; filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.3)); } .testimonial__text { font-size: var(--text-sm); color: var(--color-text); line-height: 1.8; margin-bottom: var(--space-6); font-style: italic; } .testimonial__text::before { content: ''; display: block; width: 40px; height: 40px; margin-bottom: var(--space-3); background: var(--gradient-neon); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z'/%3E%3C/svg%3E") no-repeat center; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z'/%3E%3C/svg%3E") no-repeat center; mask-size: contain; -webkit-mask-size: contain; opacity: 0.3; } .testimonial__author { display: flex; align-items: center; gap: var(--space-3); } .testimonial__avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--gradient-neon); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: var(--text-lg); box-shadow: 0 4px 15px var(--glow-primary-subtle); border: 2px solid rgba(255, 255, 255, 0.5); } .testimonial__name { font-weight: 600; font-size: var(--text-sm); color: var(--color-dark); } .testimonial__role { font-size: var(--text-xs); color: var(--color-text-muted); } .why__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8); } .why__item { text-align: center; padding: var(--space-8) var(--space-4); } .why__icon { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-6); font-size: 2rem; background: var(--color-primary-bg); color: var(--color-primary); } .why__icon svg.svg-icon { width: 36px; height: 36px; transition: all var(--transition-base); } .why__item:hover .why__icon { transform: scale(1.1) rotate(5deg); box-shadow: var(--shadow-primary); background: var(--color-primary); color: #fff; } .why__item h4 { margin-bottom: var(--space-3); } .why__item p { font-size: var(--text-sm); color: var(--color-text-light); } .partners__track { display: flex; gap: var(--space-12); animation: scroll-partners 30s linear infinite; width: max-content; } .partners__logo { height: 40px; opacity: 0.5; filter: grayscale(100%); transition: all var(--transition-base); flex-shrink: 0; } .partners__logo:hover { opacity: 1; filter: grayscale(0%); } .partners__wrapper { overflow: hidden; padding: var(--space-8) 0; mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); } @keyframes scroll-partners { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .cta-section { padding: var(--space-24) 0; background: var(--gradient-hero-premium); text-align: center; position: relative; overflow: hidden; } .cta-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 50%, rgba(74, 144, 217, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 70% 50%, rgba(232, 101, 90, 0.1) 0%, transparent 50%); pointer-events: none; } .cta-section::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(74, 144, 217, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(74, 144, 217, 0.03) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; opacity: 0.3; } .cta-section h2 { color: #fff; margin-bottom: var(--space-4); position: relative; z-index: 1; background: linear-gradient(135deg, #FFFFFF 0%, #CBD5E1 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .cta-section h2::after { display: none; } .cta-section p { color: rgba(255, 255, 255, 0.7); font-size: var(--text-lg); max-width: 600px; margin: 0 auto var(--space-10); position: relative; z-index: 1; } .cta-section .btn { position: relative; z-index: 1; } .form-group { margin-bottom: var(--space-5); } .form-group label { display: block; font-weight: 600; font-size: var(--text-sm); color: var(--color-dark); margin-bottom: var(--space-2); } .form-group label .required { color: var(--color-secondary); } .form-control { width: 100%; padding: var(--space-3) var(--space-4); font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text); background: var(--color-bg); border: 2px solid var(--color-border); border-radius: var(--radius-lg); transition: all var(--transition-fast); outline: none; } .form-control:focus { border-color: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-bg); } .form-control::placeholder { color: var(--color-text-muted); } .form-control--error { border-color: var(--color-secondary); } .form-control--error:focus { box-shadow: 0 0 0 4px var(--color-secondary-bg); } textarea.form-control { min-height: 140px; resize: vertical; } select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%236B7280' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 24px; padding-right: var(--space-10); } .form-error { font-size: var(--text-xs); color: var(--color-secondary); margin-top: var(--space-1); } .form-check { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-bg); border: 2px solid var(--color-border); border-radius: var(--radius-lg); cursor: pointer; transition: all var(--transition-fast); font-size: var(--text-sm); } .form-check:hover { border-color: var(--color-primary); background: var(--color-primary-bg); } .form-check input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--color-primary); flex-shrink: 0; } .form-check.checked { border-color: var(--color-primary); background: var(--color-primary-bg); } .form-check__svg { flex-shrink: 0; color: var(--color-text-muted); transition: color var(--transition-fast); } .form-check__circle { stroke-dasharray: 63; stroke-dashoffset: 63; transition: stroke-dashoffset 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .form-check__checkmark { stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset 0.3s ease 0.2s; } .form-check.checked .form-check__svg { color: var(--color-primary); } .form-check.checked .form-check__circle { stroke-dashoffset: 0; } .form-check.checked .form-check__checkmark { stroke-dashoffset: 0; } .confetti-particle { position: fixed; width: 8px; height: 8px; border-radius: 2px; pointer-events: none; z-index: 9999; animation: confettiBurst 1s ease-out forwards; } @keyframes confettiBurst { 0% { transform: translate(0, 0) rotate(0) scale(var(--scale, 1)); opacity: 1; } 100% { transform: translate(var(--dx, 0), calc(var(--dy, 0) + 80px)) rotate(var(--rot, 360deg)) scale(0); opacity: 0; } } .alert { padding: var(--space-4) var(--space-6); border-radius: var(--radius-lg); font-size: var(--text-sm); font-weight: 500; margin-bottom: var(--space-6); display: flex; align-items: center; gap: var(--space-3); } .alert--success { background: rgba(52, 211, 153, 0.1); color: #059669; border: 1px solid rgba(52, 211, 153, 0.3); } .alert--error { background: rgba(232, 101, 90, 0.1); color: var(--color-secondary-dark); border: 1px solid rgba(232, 101, 90, 0.3); } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); } .portfolio__filters { display: flex; justify-content: center; gap: var(--space-3); margin-bottom: var(--space-10); flex-wrap: wrap; } .portfolio__filter { padding: var(--space-2) var(--space-5); background: var(--color-bg); border: 2px solid var(--color-border); border-radius: var(--radius-full); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 500; color: var(--color-text-light); cursor: pointer; transition: all var(--transition-fast); } .portfolio__filter:hover { border-color: var(--color-primary); color: var(--color-primary); box-shadow: 0 0 20px var(--glow-primary-subtle); } .portfolio__filter.active { background: var(--gradient-neon); border-color: transparent; color: #fff; box-shadow: 0 4px 20px var(--glow-primary); } .portfolio__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } .portfolio__project { border: 1px solid var(--color-border); border-radius: var(--radius-xl); overflow: hidden; background: var(--color-bg); display: flex; flex-direction: column; box-shadow: var(--shadow-md); } .portfolio__preview { display: block; aspect-ratio: 1497/695; overflow: hidden; background: #1a2b4a; } .portfolio__preview img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; } .portfolio__details { padding: var(--space-6); display: flex; flex-direction: column; flex: 1; align-items: flex-start; } .portfolio__number { color: var(--color-text-light); font-size: var(--text-sm); margin-bottom: var(--space-2); } .portfolio__details h2 { font-size: var(--text-xl); line-height: 1.4; margin-bottom: var(--space-3); } .portfolio__details p { font-size: var(--text-sm); color: var(--color-text-light); margin-bottom: var(--space-5); } .portfolio__details .btn { margin-top: auto; } .portfolio__item { border-radius: var(--radius-xl); overflow: hidden; position: relative; aspect-ratio: 4/3; background: var(--color-bg-alt); cursor: pointer; transition: all var(--transition-base); } .portfolio__item:hover { box-shadow: var(--shadow-glow-card-hover); transform: translateY(-4px); } .portfolio__item-bg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 4rem; background: var(--gradient-primary); opacity: 0.8; } .portfolio__item-overlay { position: absolute; inset: 0; background: rgba(26, 43, 74, 0.85); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: all var(--transition-base); padding: var(--space-6); text-align: center; } .portfolio__item:hover .portfolio__item-overlay { opacity: 1; } .portfolio__item-overlay h4 { color: #fff; margin-bottom: var(--space-2); } .portfolio__item-overlay p { color: rgba(255, 255, 255, 0.7); font-size: var(--text-sm); margin-bottom: var(--space-4); } .blog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); } .blog__card { background: var(--color-bg); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--color-border-light); transition: all var(--transition-base); } .blog__card:hover { transform: translateY(-5px); box-shadow: var(--shadow-xl); } .blog__card-image { width: 100%; aspect-ratio: 16/9; background: var(--gradient-primary); display: flex; align-items: center; justify-content: center; font-size: 3rem; color: rgba(255, 255, 255, 0.3); position: relative; overflow: hidden; } .blog__card-category { position: absolute; top: var(--space-4); left: var(--space-4); padding: var(--space-1) var(--space-3); background: var(--color-secondary); color: #fff; font-size: var(--text-xs); font-weight: 600; border-radius: var(--radius-full); text-transform: uppercase; } .blog__card-body { padding: var(--space-6); } .blog__card-date { font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-2); } .blog__card-body h4 { margin-bottom: var(--space-3); font-size: var(--text-lg); transition: color var(--transition-fast); } .blog__card:hover h4 { color: var(--color-primary); } .blog__card-body p { font-size: var(--text-sm); color: var(--color-text-light); line-height: 1.7; } .contact__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-12); } .contact__info-item { display: flex; gap: var(--space-4); padding: var(--space-5) 0; border-bottom: 1px solid var(--color-border-light); } .contact__info-item:last-child { border-bottom: none; } .contact__info-icon { width: 48px; height: 48px; min-width: 48px; border-radius: var(--radius-lg); background: var(--color-primary-bg); color: var(--color-primary); display: flex; align-items: center; justify-content: center; } .contact__info-label { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: var(--space-1); } .contact__info-value { font-weight: 500; color: var(--color-dark); } .contact__info-value a { color: var(--color-dark); } .contact__info-value a:hover { color: var(--color-primary); } .quote-progress { height: 4px; background: var(--color-border); border-radius: 2px; margin-bottom: var(--space-8); overflow: hidden; } .quote-progress__bar { height: 100%; background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); border-radius: 2px; transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } .quote-steps { display: flex; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-12); position: relative; } .quote-steps::before { content: ''; position: absolute; top: 20px; left: 25%; right: 25%; height: 2px; background: var(--color-border); } .quote-step { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); flex: 1; max-width: 180px; position: relative; z-index: 1; } .quote-step__number { width: 40px; height: 40px; border-radius: 50%; background: var(--color-bg); border: 2px solid var(--color-border); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 700; font-size: var(--text-sm); color: var(--color-text-muted); transition: all var(--transition-base); } .quote-step.active .quote-step__number { background: var(--color-primary); border-color: var(--color-primary); color: #fff; box-shadow: var(--shadow-primary); } .quote-step.completed .quote-step__number { background: #34D399; border-color: #34D399; color: #fff; } .quote-step__label { font-size: var(--text-xs); font-weight: 500; color: var(--color-text-muted); text-align: center; transition: color var(--transition-fast); } .quote-step.active .quote-step__label { color: var(--color-primary); font-weight: 600; } .quote-step.completed .quote-step__label { color: #059669; } .form-heading { margin-bottom: var(--space-6); } .form-heading--tight { margin-bottom: var(--space-2); } .quote-panel { display: none; } .quote-panel.active { display: block; animation: quoteSpringIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .quote-panel--exit-left { animation: quoteExitLeft 0.3s ease-in both; } .quote-panel--exit-right { animation: quoteExitRight 0.3s ease-in both; } .quote-panel--enter-right { animation: quoteEnterRight 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .quote-panel--enter-left { animation: quoteEnterLeft 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; } @keyframes quoteSpringIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes quoteExitLeft { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-40px); } } @keyframes quoteExitRight { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(40px); } } @keyframes quoteEnterRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } @keyframes quoteEnterLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } } .quote-actions { display: flex; justify-content: space-between; margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-border-light); } .quote-summary { background: var(--color-bg-alt); border-radius: var(--radius-xl); padding: var(--space-8); } .quote-summary__item { display: flex; justify-content: space-between; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border-light); font-size: var(--text-sm); } .quote-summary__item:last-child { border-bottom: none; } .quote-summary__label { font-weight: 600; color: var(--color-dark); } .quote-summary__value { color: var(--color-text); } .services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); } .about__intro { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center; } .about__image-block { position: relative; border-radius: var(--radius-2xl); overflow: hidden; background: var(--gradient-hero); min-height: 400px; display: flex; align-items: center; justify-content: center; } .about__image-text { font-family: var(--font-heading); font-size: var(--text-6xl); font-weight: 800; color: rgba(255, 255, 255, 0.08); text-align: center; } .about__values { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); } .about__value { text-align: center; padding: var(--space-8) var(--space-4); background: var(--color-bg); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); transition: all var(--transition-base); border: 1px solid var(--color-border-light); } .about__value:hover { transform: translateY(-5px); box-shadow: var(--shadow-xl); } .about__value-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--color-primary-bg); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-4); font-size: 1.5rem; } .about__value-icon svg.svg-icon { width: 30px; height: 30px; transition: all var(--transition-base); } .about__value h4 { margin-bottom: var(--space-2); } .about__value p { font-size: var(--text-sm); color: var(--color-text-light); } .team__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); } .team__member { text-align: center; padding: var(--space-6); background: var(--color-bg); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); transition: all var(--transition-base); border: 1px solid var(--color-border-light); } .team__member:hover { transform: translateY(-5px); box-shadow: var(--shadow-xl); } .team__avatar { width: 80px; height: 80px; border-radius: 50%; margin: 0 auto var(--space-4); display: flex; align-items: center; justify-content: center; font-size: var(--text-2xl); font-weight: 700; color: #fff; } .team__member:nth-child(odd) .team__avatar { background: var(--gradient-primary); } .team__member:nth-child(even) .team__avatar { background: var(--gradient-secondary); } .team__name { font-weight: 600; font-size: var(--text-base); color: var(--color-dark); margin-bottom: var(--space-1); } .team__role { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .page-header { background: var(--gradient-hero-premium); padding: calc(var(--navbar-height) + var(--space-20)) 0 var(--space-20); text-align: center; position: relative; overflow: hidden; } .page-header::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(74, 144, 217, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(74, 144, 217, 0.03) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; opacity: 0.4; } .page-header h1 { font-size: var(--text-5xl); margin-bottom: var(--space-4); position: relative; z-index: 1; } .page-header p { color: rgba(255, 255, 255, 0.65); font-size: var(--text-lg); max-width: 600px; margin: 0 auto; position: relative; z-index: 1; } .error-page { min-height: 70vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--space-16) 0; } .error-page__code { font-family: var(--font-heading); font-size: 10rem; font-weight: 800; line-height: 1; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: var(--space-4); } @keyframes fadeSlideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes cardShine { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .quote-progress__bar { transition: none; } .quote-panel.active, .quote-panel--exit-left, .quote-panel--exit-right, .quote-panel--enter-right, .quote-panel--enter-left { animation: none; } .confetti-particle { display: none; } .form-check__circle, .form-check__checkmark { transition: none; } .form-check.checked .form-check__circle { stroke-dashoffset: 0; } .form-check.checked .form-check__checkmark { stroke-dashoffset: 0; } } .service-detail__icon--primary { background: var(--color-primary-bg); color: var(--color-primary); } .service-detail__icon--secondary { background: var(--color-secondary-bg); color: var(--color-secondary); } .service-detail__visual-graphic--primary { background: var(--color-primary-bg); color: var(--color-primary); } .service-detail__visual-graphic--secondary { background: var(--color-secondary-bg); color: var(--color-secondary); } .services-nav { position: sticky; top: var(--navbar-height); z-index: 900; background: var(--color-bg); border-bottom: 1px solid var(--color-border-light); box-shadow: var(--shadow-sm); } .services-nav__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2); padding-top: var(--space-3); padding-bottom: var(--space-3); } .services-nav__link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: var(--space-2) var(--space-5); border-radius: var(--radius-full); font-family: var(--font-heading); font-weight: 600; font-size: var(--text-sm); color: var(--color-text); background: var(--color-bg-alt); border: 1px solid var(--color-border-light); transition: color var(--transition-base), background var(--transition-base), border-color var(--transition-base), transform var(--transition-fast); } .services-nav__link:hover { color: var(--color-primary); border-color: var(--color-primary); transform: translateY(-2px); } .services-nav__link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .services-nav__dot { width: 8px; height: 8px; border-radius: var(--radius-full); display: inline-block; } .services-nav__dot--primary { background: var(--color-primary); } .services-nav__dot--secondary { background: var(--color-secondary); } #services-digital, #services-other { scroll-margin-top: calc(var(--navbar-height) + var(--space-20)); } .services-cat-head { max-width: 720px; margin: 0 auto var(--space-12); text-align: center; } .services-cat-head__eyebrow { display: inline-block; margin-bottom: var(--space-4); padding: var(--space-1) var(--space-4); border-radius: var(--radius-full); font-family: var(--font-heading); font-weight: 700; font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; } .services-cat-head__eyebrow--primary { color: var(--color-primary); background: var(--color-primary-bg); } .services-cat-head__eyebrow--secondary { color: var(--color-secondary); background: var(--color-secondary-bg); } .services-cat-head__title { margin-bottom: var(--space-3); font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: 700; color: var(--color-dark); } .services-cat-head__subtitle { font-size: var(--text-lg); line-height: 1.6; color: var(--color-text-light); } .services-section--alt { background: var(--color-bg-alt); } .other-services { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-6); } .other-service { display: flex; flex-direction: column; padding: var(--space-8); background: var(--color-bg); border: 1px solid var(--color-border-light); border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm); transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); } .other-service:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); border-color: var(--color-border); } .other-service__icon { width: 64px; height: 64px; margin-bottom: var(--space-5); border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; } .other-service__icon svg.svg-icon { width: 36px; height: 36px; } .other-service__icon--primary { background: var(--color-primary-bg); color: var(--color-primary); } .other-service__icon--secondary { background: var(--color-secondary-bg); color: var(--color-secondary); } .other-service__title { margin-bottom: var(--space-3); font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700; color: var(--color-dark); } .other-service__desc { margin-bottom: var(--space-5); font-size: var(--text-sm); line-height: 1.6; color: var(--color-text-light); } .other-service__features { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: flex; flex-direction: column; gap: var(--space-3); } .other-service__feature { position: relative; padding-left: var(--space-8); font-size: var(--text-sm); line-height: 1.5; color: var(--color-text); } .other-service__feature::before { content: ''; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: var(--radius-full); background-color: var(--color-primary); -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center / 14px no-repeat; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center / 14px no-repeat; } .other-service__cta { margin-top: auto; align-self: flex-start; } @media (max-width: 768px) { .services-cat-head__title { font-size: var(--text-3xl); } .other-service { padding: var(--space-6); } } @media (prefers-reduced-motion: reduce) { .services-nav__link, .other-service { transition: none; } .services-nav__link:hover, .other-service:hover { transform: none; } } .reveal { opacity: 0; transform: translateY(20px); transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .reveal.revealed { opacity: 1; transform: translateY(0); } .reveal-left { opacity: 0; transform: translateX(-30px); transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .reveal-left.revealed { opacity: 1; transform: translateX(0); } .reveal-right { opacity: 0; transform: translateX(30px); transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .reveal-right.revealed { opacity: 1; transform: translateX(0); } .reveal-scale { opacity: 0; transform: scale(0.9); transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .reveal-scale.revealed { opacity: 1; transform: scale(1); } .stagger-children > *:nth-child(1) { transition-delay: 0ms; } .stagger-children > *:nth-child(2) { transition-delay: 80ms; } .stagger-children > *:nth-child(3) { transition-delay: 160ms; } .stagger-children > *:nth-child(4) { transition-delay: 240ms; } .stagger-children > *:nth-child(5) { transition-delay: 320ms; } .stagger-children > *:nth-child(6) { transition-delay: 400ms; } .stagger-children > *:nth-child(7) { transition-delay: 480ms; } .stagger-children > *:nth-child(8) { transition-delay: 560ms; } .stagger-children > *:nth-child(9) { transition-delay: 640ms; } .hero__badge { animation: heroFadeDown 0.8s ease 0.2s both; } .hero h1 { animation: heroFadeUp 0.8s ease 0.4s both; } .hero__subtitle { animation: heroFadeUp 0.8s ease 0.6s both; } .hero__buttons { animation: heroFadeUp 0.8s ease 0.8s both; } @keyframes heroFadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes heroFadeDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } .float { animation: float 6s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } } .pulse-glow { animation: pulseGlow 2s ease-in-out infinite; } @keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(74, 144, 217, 0.4); } 50% { box-shadow: 0 0 0 15px rgba(74, 144, 217, 0); } } .gradient-shift { background-size: 200% 200%; animation: gradientShift 8s ease infinite; } @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .animated-underline { position: relative; display: inline-block; } .animated-underline::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: var(--color-primary); transition: width var(--transition-base); } .animated-underline:hover::after { width: 100%; } .shimmer { background: linear-gradient( 90deg, var(--color-bg-alt) 0%, #fff 50%, var(--color-bg-alt) 100% ); background-size: 200% 100%; animation: shimmer 1.5s infinite; } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .spin-slow { animation: spin 20s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .bounce { animation: bounce 2s ease infinite; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } } .card-shine { position: relative; overflow: hidden; } .card-shine::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient( 45deg, transparent 40%, rgba(255, 255, 255, 0.08) 50%, transparent 60% ); transform: translateX(-100%) rotate(0); transition: none; pointer-events: none; } .card-shine:hover::before { animation: cardShine 0.6s ease; } @keyframes cardShine { from { transform: translateX(-100%); } to { transform: translateX(100%); } } .page-transition-enter { animation: pageEnter 0.5s ease; } @keyframes pageEnter { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .stat__number.counting { text-shadow: 0 0 30px rgba(74, 144, 217, 0.3); } .parallax { will-change: transform; } .hover-tilt { transition: transform var(--transition-base); transform-style: preserve-3d; perspective: 1000px; } .hover-tilt:hover { transform: perspective(1000px) rotateX(2deg) rotateY(2deg) translateY(-4px); } .hover-glow { transition: box-shadow var(--transition-glow); } .hover-glow:hover { box-shadow: var(--shadow-glow-primary); } .hover-glow--secondary:hover { box-shadow: var(--shadow-glow-secondary); } .hover-scale { transition: transform var(--transition-base); } .hover-scale:hover { transform: scale(1.03); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1; transform: none; } html { scroll-behavior: auto; } } @media (max-width: 1024px) { :root { --text-6xl: 2.75rem; --text-5xl: 2.25rem; --text-4xl: 1.875rem; } .navbar__menu { position: fixed; top: 0; right: -100%; width: 320px; height: 100vh; background: var(--color-bg); flex-direction: column; align-items: flex-start; padding: calc(var(--navbar-height) + var(--space-8)) var(--space-8) var(--space-8); box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1); transition: right var(--transition-base); gap: var(--space-2); overflow-y: auto; z-index: 999; } .navbar__menu.open { right: 0; } .navbar__link { font-size: var(--text-base); padding: var(--space-3) var(--space-4); width: 100%; border-radius: var(--radius-lg); } .navbar__link.active::after { display: none; } .navbar__cta { width: 100%; text-align: center; margin-top: var(--space-4); } .navbar__lang { margin-top: var(--space-2); } .navbar__toggle { display: flex; } .nav-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transition: all var(--transition-base); z-index: 998; } .nav-overlay.active { opacity: 1; visibility: visible; } .stats { grid-template-columns: repeat(2, 1fr); } .why__grid { grid-template-columns: repeat(2, 1fr); } .testimonials__grid { grid-template-columns: repeat(2, 1fr); } .footer__grid { grid-template-columns: repeat(2, 1fr); } .service-detail { grid-template-columns: 1fr; gap: var(--space-8); } .service-detail:nth-child(even) { direction: ltr; } .about__intro { grid-template-columns: 1fr; } .about__values { grid-template-columns: repeat(2, 1fr); } .team__grid { grid-template-columns: repeat(2, 1fr); } .contact__grid { grid-template-columns: 1fr; } .portfolio__grid { grid-template-columns: repeat(2, 1fr); } .blog__grid { grid-template-columns: repeat(2, 1fr); } .services-grid { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { :root { --text-6xl: 2.25rem; --text-5xl: 2rem; --text-4xl: 1.5rem; --text-3xl: 1.25rem; --navbar-height: 70px; } .section { padding: var(--space-16) 0; } .section__header { margin-bottom: var(--space-10); } .hero { min-height: auto; padding-top: calc(var(--navbar-height) + var(--space-12)); padding-bottom: var(--space-12); } .hero__content { padding: var(--space-4); } .hero h1 { font-size: var(--text-4xl); } .hero__subtitle { font-size: var(--text-base); } .hero__buttons { flex-direction: column; align-items: center; } .hero__buttons .btn { width: 100%; max-width: 300px; } .stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } .stat { padding: var(--space-4); } .stat__number { font-size: var(--text-3xl); } .why__grid { grid-template-columns: 1fr; gap: var(--space-4); } .testimonials__grid { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr; gap: var(--space-8); } .portfolio__grid { grid-template-columns: 1fr; } .blog__grid { grid-template-columns: 1fr; } .about__values { grid-template-columns: 1fr; } .team__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } .quote-steps { gap: var(--space-1); } .quote-step__label { display: none; } .quote-steps::before { left: 15%; right: 15%; } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .page-header { padding: calc(var(--navbar-height) + var(--space-10)) 0 var(--space-10); } .page-header h1 { font-size: var(--text-3xl); } .container { padding: 0 var(--space-4); } .btn--lg { padding: var(--space-3) var(--space-8); font-size: var(--text-base); } .service-detail__visual { min-height: 200px; } .cta-section { padding: var(--space-12) 0; } .error-page__code { font-size: 6rem; } .deco-shape--blob-1, .deco-shape--blob-2, .deco-shape--blob-3 { display: none; } .deco-shape--circle-sm, .deco-shape--circle-md { opacity: 0.2; } .card, .testimonial, .stat { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .hero h1 { font-size: var(--text-4xl); letter-spacing: -0.02em; } } @media (max-width: 480px) { :root { --text-6xl: 1.875rem; --text-5xl: 1.625rem; --text-4xl: 1.375rem; } .navbar__logo img { height: 36px; } .stats { grid-template-columns: 1fr 1fr; } .team__grid { grid-template-columns: 1fr; } .portfolio__filters { gap: var(--space-2); } .portfolio__filter { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); } .quote-actions { flex-direction: column; gap: var(--space-3); } .quote-actions .btn { width: 100%; } .back-to-top { bottom: 20px; right: 20px; width: 40px; height: 40px; } .deco-shape { display: none; } .card, .testimonial, .stat { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--color-bg); } .section--dark .stat { background: var(--glass-bg-light); } } @media (min-width: 1400px) { :root { --container-max: 1320px; } .hero h1 { font-size: 4.5rem; } } .svg-icon { display: block; width: 100%; height: 100%; overflow: visible; } .svg-icon__bracket, .svg-icon__gear, .svg-icon__pulse, .svg-icon__draw, .svg-icon__float, .svg-icon__shimmer, .svg-icon__scan, .svg-icon__sweep, .svg-icon__wave, .svg-icon__blink { animation-play-state: paused; } .svg-icon--animate .svg-icon__bracket, .svg-icon--animate .svg-icon__gear, .svg-icon--animate .svg-icon__pulse, .svg-icon--animate .svg-icon__draw, .svg-icon--animate .svg-icon__float, .svg-icon--animate .svg-icon__shimmer, .svg-icon--animate .svg-icon__scan, .svg-icon--animate .svg-icon__sweep, .svg-icon--animate .svg-icon__wave, .svg-icon--animate .svg-icon__blink { animation-play-state: running; } @keyframes iconGearRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes iconPulse { 0%, 100% { opacity: 0.4; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.1); } } @keyframes iconDraw { to { stroke-dashoffset: 0; } } @keyframes iconFloat { 0%, 100% { transform: translateY(0); opacity: 0.7; } 50% { transform: translateY(-6px); opacity: 1; } } @keyframes iconShimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(200%); } } @keyframes iconScan { 0% { transform: translateY(-10px); opacity: 0; } 50% { opacity: 0.8; } 100% { transform: translateY(10px); opacity: 0; } } @keyframes iconSweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes iconWave { 0% { opacity: 0; transform: scale(0.8); } 50% { opacity: 1; } 100% { opacity: 0; transform: scale(1.2); } } @keyframes iconBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } @keyframes iconBracketLeft { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-2px); } } @keyframes iconBracketRight { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2px); } } .svg-icon--animate .svg-icon__gear { animation: iconGearRotate 8s linear infinite; transform-origin: center; } .svg-icon--animate .svg-icon__pulse { animation: iconPulse 2s ease-in-out infinite; } .svg-icon--animate .svg-icon__draw { animation: iconDraw 1.5s ease forwards; } .svg-icon--animate .svg-icon__float { animation: iconFloat 3s ease-in-out infinite; } .svg-icon--animate .svg-icon__shimmer { animation: iconShimmer 3s ease infinite; } .svg-icon--animate .svg-icon__scan { animation: iconScan 2s ease-in-out infinite; } .svg-icon--animate .svg-icon__sweep { animation: iconSweep 4s linear infinite; transform-origin: center; } .svg-icon--animate .svg-icon__wave { animation: iconWave 2s ease-in-out infinite; } .svg-icon--animate .svg-icon__blink { animation: iconBlink 1s step-end infinite; } .svg-icon--animate .svg-icon__bracket { animation: iconBracketLeft 2s ease-in-out infinite; } .svg-icon--animate .svg-icon__float:nth-child(2) { animation-delay: 0.3s; } .svg-icon--animate .svg-icon__float:nth-child(3) { animation-delay: 0.6s; } .svg-icon--animate .svg-icon__float:nth-child(4) { animation-delay: 0.9s; } .svg-icon--animate .svg-icon__float:nth-child(5) { animation-delay: 1.2s; } .svg-icon--animate .svg-icon__wave:nth-child(2) { animation-delay: 0.4s; } .svg-icon--animate .svg-icon__wave:nth-child(3) { animation-delay: 0.8s; } .svg-icon--animate .svg-icon__wave:nth-child(4) { animation-delay: 1.2s; } .svg-icon--animate .svg-icon__pulse:nth-of-type(2) { animation-delay: 0.5s; } .svg-icon--animate .svg-icon__pulse:nth-of-type(3) { animation-delay: 1s; } .svg-icon--animate .svg-icon__pulse:nth-of-type(4) { animation-delay: 1.5s; } .svg-icon--animate .svg-icon__pulse:nth-of-type(5) { animation-delay: 0.3s; } .svg-icon--animate .svg-icon__pulse:nth-of-type(6) { animation-delay: 0.8s; } .svg-icon--animate .svg-icon__draw:nth-of-type(2) { animation-delay: 0.2s; } .svg-icon--animate .svg-icon__draw:nth-of-type(3) { animation-delay: 0.4s; } .svg-icon--animate .svg-icon__draw:nth-of-type(4) { animation-delay: 0.6s; } .svg-icon--animate .svg-icon__draw:nth-of-type(5) { animation-delay: 0.8s; } .svg-icon--animate .svg-icon__blink:nth-of-type(2) { animation-delay: 0.2s; } .svg-icon--animate .svg-icon__blink:nth-of-type(3) { animation-delay: 0.4s; } .svg-icon--web_dev .svg-icon__bracket:first-of-type { animation-name: iconBracketLeft; } .svg-icon--web_dev .svg-icon__bracket:nth-of-type(2) { animation-name: iconBracketRight; } .svg-icon--software .svg-icon__gear { transform-origin: 25px 20px; } .svg-icon--stat_uptime .svg-icon__sweep { transform-origin: 24px 24px; } .svg-icon--marketing .svg-icon__draw:nth-of-type(1) { animation-delay: 0s; } .svg-icon--marketing .svg-icon__draw:nth-of-type(2) { animation-delay: 0.3s; } .svg-icon--marketing .svg-icon__draw:nth-of-type(3) { animation-delay: 0.6s; } .svg-icon--marketing .svg-icon__draw:nth-of-type(4) { animation-delay: 0.9s; } .svg-icon--value_excellence .svg-icon__draw { animation-duration: 2s; } .svg-icon--mission .svg-icon__draw { animation-duration: 1s; animation-delay: 0.3s; } .svg-icon--vision .svg-icon__float:nth-of-type(1) { animation-delay: 0s; } .svg-icon--vision .svg-icon__float:nth-of-type(2) { animation-delay: 0.2s; } .svg-icon--vision .svg-icon__float:nth-of-type(3) { animation-delay: 0.4s; } .svg-icon--vision .svg-icon__float:nth-of-type(4) { animation-delay: 0.6s; } .svg-icon--vision .svg-icon__float:nth-of-type(5) { animation-delay: 0.8s; } .svg-icon--training .svg-icon__float:nth-of-type(1) { animation-delay: 0s; } .svg-icon--training .svg-icon__float:nth-of-type(2) { animation-delay: 0.4s; } .svg-icon--training .svg-icon__float:nth-of-type(3) { animation-delay: 0.8s; } .svg-icon--training .svg-icon__float:nth-of-type(4) { animation-delay: 1.2s; } .svg-icon--training .svg-icon__float:nth-of-type(5) { animation-delay: 1.6s; } .svg-icon--cloud .svg-icon__float:nth-of-type(1) { animation-delay: 0s; } .svg-icon--cloud .svg-icon__float:nth-of-type(2) { animation-delay: 1.5s; } .svg-icon--why_support .svg-icon__wave:nth-of-type(1) { animation-delay: 0s; } .svg-icon--why_support .svg-icon__wave:nth-of-type(2) { animation-delay: 0.3s; } .svg-icon--why_support .svg-icon__wave:nth-of-type(3) { animation-delay: 0.6s; } .svg-icon--why_support .svg-icon__wave:nth-of-type(4) { animation-delay: 0.9s; } .svg-icon--value_impact .svg-icon__wave:nth-of-type(1) { animation-delay: 0s; animation-duration: 2.5s; } .svg-icon--value_impact .svg-icon__wave:nth-of-type(2) { animation-delay: 0.5s; animation-duration: 2.5s; } .svg-icon--value_impact .svg-icon__wave:nth-of-type(3) { animation-delay: 1s; animation-duration: 2.5s; } .svg-icon--stat_team .svg-icon__draw:nth-of-type(1) { animation-delay: 0s; } .svg-icon--stat_team .svg-icon__draw:nth-of-type(2) { animation-delay: 0.3s; } .svg-icon--stat_team .svg-icon__draw:nth-of-type(3) { animation-delay: 0.6s; } .svg-icon--stat_projects .svg-icon__float:nth-of-type(1) { animation-delay: 0s; } .svg-icon--stat_projects .svg-icon__float:nth-of-type(2) { animation-delay: 0.2s; } .svg-icon--stat_projects .svg-icon__float:nth-of-type(3) { animation-delay: 0.4s; } .svg-icon--stat_projects .svg-icon__float:nth-of-type(4) { animation-delay: 0.6s; } .svg-icon--stat_projects .svg-icon__float:nth-of-type(5) { animation-delay: 0.8s; } .svg-icon--stat_projects .svg-icon__float:nth-of-type(6) { animation-delay: 1s; } .svg-icon--value_innovation .svg-icon__float:nth-of-type(1) { animation-delay: 0s; } .svg-icon--value_innovation .svg-icon__float:nth-of-type(2) { animation-delay: 0.3s; } .svg-icon--value_innovation .svg-icon__float:nth-of-type(3) { animation-delay: 0.6s; } .svg-icon--value_innovation .svg-icon__float:nth-of-type(4) { animation-delay: 0.9s; } .svg-icon--value_innovation .svg-icon__float:nth-of-type(5) { animation-delay: 1.2s; } .svg-icon--why_expertise .svg-icon__shimmer { animation-duration: 4s; } .svg-icon--design .svg-icon__draw { animation-duration: 2.5s; } .svg-icon-wrapper:hover .svg-icon { filter: drop-shadow(0 0 6px rgba(74, 144, 217, 0.3)); transition: filter 0.3s ease; } @media (prefers-reduced-motion: reduce) { .svg-icon *, .svg-icon__bracket, .svg-icon__gear, .svg-icon__pulse, .svg-icon__draw, .svg-icon__float, .svg-icon__shimmer, .svg-icon__scan, .svg-icon__sweep, .svg-icon__wave, .svg-icon__blink { animation: none !important; transition: none !important; } } .cursor-dot { position: fixed; top: 0; left: 0; width: 8px; height: 8px; background: var(--color-primary, #4A90D9); border-radius: 50%; pointer-events: none; z-index: 99999; opacity: 0; transition: width 0.2s, height 0.2s, background 0.2s, opacity 0.3s; mix-blend-mode: difference; } .cursor-ring { position: fixed; top: 0; left: 0; width: 40px; height: 40px; border: 2px solid rgba(74, 144, 217, 0.4); border-radius: 50%; pointer-events: none; z-index: 99998; opacity: 0; transition: width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), height 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s, opacity 0.3s; } .cursor-ring--hover { width: 60px; height: 60px; border-color: rgba(232, 101, 90, 0.5); opacity: 0.5 !important; } body.has-custom-cursor, body.has-custom-cursor a, body.has-custom-cursor button, body.has-custom-cursor input, body.has-custom-cursor textarea, body.has-custom-cursor select, body.has-custom-cursor .btn, body.has-custom-cursor .card, body.has-custom-cursor .navbar__link, body.has-custom-cursor .portfolio__item { cursor: none; } .scroll-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 99999; transform-origin: left; transform: scaleX(0); pointer-events: none; will-change: transform; } .card__glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; z-index: 2; } .card, .testimonial, .stat, .why__item, .about__value, .team__member, .portfolio__item { transform-style: preserve-3d; will-change: transform; } .card__icon, .stat__icon, .why__icon, .about__value-icon, .team__avatar { transition: transform 0.3s ease; will-change: transform; } .text-scramble-char { color: var(--color-secondary, #E8655A); font-weight: inherit; display: inline; } .back-to-top-wrapper { position: fixed; bottom: 30px; right: 30px; z-index: 999; width: 52px; height: 52px; } .back-to-top__ring { position: absolute; top: -2px; left: -2px; width: 52px; height: 52px; pointer-events: none; } .back-to-top-wrapper .back-to-top { position: absolute; top: 2px; left: 2px; bottom: auto; right: auto; width: 48px; height: 48px; } .section-divider { position: relative; width: 100%; overflow: hidden; line-height: 0; margin-top: -1px; margin-bottom: -1px; z-index: 2; } .section-divider svg { width: 100%; height: auto; display: block; min-height: 70px; vertical-align: bottom; } .wave-layer { transition: fill 0.3s ease; } .wave-layer--back { opacity: 0.3; } .wave-layer--mid { opacity: 0.5; } .wave-layer--front { opacity: 1; } .section-divider--hero-to-light { background: #1E3A5F; } .section-divider--hero-to-light .wave-layer--back { fill: rgba(74, 144, 217, 0.25); } .section-divider--hero-to-light .wave-layer--mid { fill: rgba(230, 238, 250, 0.6); } .section-divider--hero-to-light .wave-layer--front { fill: #ffffff; } .section-divider--dark-to-light { background: #1A2B4A; } .section-divider--dark-to-light .wave-layer--back { fill: rgba(74, 144, 217, 0.2); } .section-divider--dark-to-light .wave-layer--mid { fill: rgba(230, 238, 250, 0.55); } .section-divider--dark-to-light .wave-layer--front { fill: #ffffff; } .section-divider--light-to-dark { background: #ffffff; } .section-divider--light-to-dark .wave-layer--back { fill: rgba(26, 43, 74, 0.15); } .section-divider--light-to-dark .wave-layer--mid { fill: rgba(15, 23, 42, 0.4); } .section-divider--light-to-dark .wave-layer--front { fill: #0F172A; } .wave-animated .wave-layer--back { animation: waveFlow 8s ease-in-out infinite alternate; } .wave-animated .wave-layer--mid { animation: waveFlow 6s ease-in-out infinite alternate-reverse; } .wave-animated .wave-layer--front { animation: waveFlowSubtle 10s ease-in-out infinite alternate; } @keyframes waveFlow { 0% { transform: translateX(0); } 100% { transform: translateX(-30px); } } @keyframes waveFlowSubtle { 0% { transform: translateX(0); } 100% { transform: translateX(15px); } } .section-seam { position: relative; width: 100%; height: var(--space-12); display: flex; align-items: center; justify-content: center; overflow: hidden; pointer-events: none; } .section-seam::before { content: ''; width: min(640px, 72%); height: 1px; background: linear-gradient( 90deg, transparent 0%, var(--color-primary) 28%, var(--color-secondary) 72%, transparent 100% ); opacity: 0.55; } .section-seam::after { content: ''; position: absolute; width: 160px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent); animation: seamShimmer 7s ease-in-out infinite; } @keyframes seamShimmer { 0% { transform: translateX(-240px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(240px); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .section-seam::after { animation: none; opacity: 0; } } .page-transition { position: fixed; inset: 0; z-index: 100000; background: linear-gradient(135deg, #1A2B4A 0%, #4A90D9 50%, #22D1EE 100%); transform: scaleX(0); transform-origin: left; pointer-events: none; } .page-transition--enter { animation: pageTransitionEnter 0.4s cubic-bezier(0.65, 0, 0.35, 1) forwards; pointer-events: all; } .page-transition--exit { animation: pageTransitionExit 0.4s cubic-bezier(0.65, 0, 0.35, 1) forwards; } @keyframes pageTransitionEnter { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } } @keyframes pageTransitionExit { from { transform: scaleX(1); transform-origin: right; } to { transform: scaleX(0); transform-origin: right; } } .testimonials-carousel { position: relative; overflow: hidden; margin: 0 -16px; padding: 0 16px; } .testimonials-carousel__track { display: flex; gap: var(--space-8, 2rem); transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); cursor: grab; user-select: none; -webkit-user-select: none; } .testimonials-carousel__track.is-dragging { cursor: grabbing; transition: none; } .testimonials-carousel__track .testimonial { min-width: calc(33.333% - 1.34rem); flex-shrink: 0; } .testimonials-carousel__dots { display: flex; justify-content: center; gap: 8px; margin-top: var(--space-8, 2rem); } .testimonials-carousel__dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(74, 144, 217, 0.3); background: transparent; cursor: pointer; transition: all 0.3s ease; padding: 0; } .testimonials-carousel__dot.active { background: var(--gradient-neon, linear-gradient(135deg, #4A90D9, #22D1EE)); border-color: transparent; transform: scale(1.2); box-shadow: 0 0 12px rgba(74, 144, 217, 0.5); } .confetti-particle { position: fixed; width: 8px; height: 8px; border-radius: 2px; pointer-events: none; z-index: 100000; animation: confettiFall 1.5s ease-out forwards; } @keyframes confettiFall { 0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); } 100% { opacity: 0; transform: translate(var(--confetti-x, 100px), var(--confetti-y, -200px)) rotate(720deg) scale(0); } } .quote-panel { display: none; } .quote-panel.active { display: block; animation: panelEnter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .quote-panel.exit-left { display: block; animation: panelExitLeft 0.3s ease forwards; } .quote-panel.exit-right { display: block; animation: panelExitRight 0.3s ease forwards; } @keyframes panelEnter { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } @keyframes panelExitLeft { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-30px); } } @keyframes panelExitRight { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(30px); } } .quote-progress-bar { height: 4px; background: rgba(74, 144, 217, 0.1); border-radius: 999px; overflow: hidden; margin-bottom: var(--space-8, 2rem); } .quote-progress-bar__fill { height: 100%; background: linear-gradient(90deg, #4A90D9, #22D1EE, #E8655A); border-radius: 999px; transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); width: 25%; } .form-check__svg { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); width: 18px; height: 18px; pointer-events: none; opacity: 0; transition: opacity 0.2s; } .form-check.checked .form-check__svg { opacity: 1; } .form-check__svg .checkmark-path { stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset 0.3s ease; } .form-check.checked .form-check__svg .checkmark-path { stroke-dashoffset: 0; } @media (max-width: 1024px) { .testimonials-carousel__track .testimonial { min-width: calc(50% - 1rem); } } @media (max-width: 768px) { .cursor-dot, .cursor-ring { display: none !important; } body.has-custom-cursor, body.has-custom-cursor a, body.has-custom-cursor button { cursor: auto !important; } body.has-custom-cursor .btn { cursor: pointer !important; } .testimonials-carousel__track .testimonial { min-width: 100%; } .section-divider svg { min-height: 35px; } } @media (max-width: 480px) { .back-to-top-wrapper { bottom: 20px; right: 20px; width: 44px; height: 44px; } .back-to-top__ring { width: 44px; height: 44px; } .back-to-top-wrapper .back-to-top { width: 40px; height: 40px; } .section-divider svg { min-height: 20px; } } .spa-loader { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 100001; background: linear-gradient(90deg, var(--color-primary, #4A90D9), #22D1EE, var(--color-secondary, #E8655A)); transform: scaleX(0); transform-origin: left; pointer-events: none; opacity: 0; transition: opacity 0.2s; } .spa-loader--active { opacity: 1; animation: spaLoaderPulse 1.5s ease-in-out infinite; } .spa-loader--done { opacity: 0; transform: scaleX(1); } @keyframes spaLoaderPulse { 0% { transform: scaleX(0); } 50% { transform: scaleX(0.7); } 100% { transform: scaleX(0.9); } } .btn { position: relative; overflow: hidden; } .ripple-effect { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.3); transform: scale(0); animation: rippleExpand 0.6s ease-out forwards; pointer-events: none; z-index: 1; } @keyframes rippleExpand { to { transform: scale(1); opacity: 0; } } .btn:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible { outline: 2px solid var(--color-primary, #4A90D9); outline-offset: 2px; } ::selection { background: rgba(74, 144, 217, 0.2); color: inherit; } :root[data-theme="dark"] ::selection { background: rgba(96, 165, 250, 0.3); } .cursor-ring--text { width: 4px; height: 24px; border-radius: 2px; border-width: 1px; border-color: var(--color-primary, #4A90D9); } .cursor-ring--view { width: 50px; height: 50px; border-color: rgba(34, 209, 238, 0.5); background: rgba(34, 209, 238, 0.05); } .cursor-ring--drag { width: 45px; height: 45px; border-style: dashed; border-color: rgba(232, 101, 90, 0.4); } .reveal-rotate { opacity: 0; transform: rotate(-5deg) translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal-rotate.revealed { opacity: 1; transform: rotate(0) translateY(0); } @media (prefers-reduced-motion: reduce) { .scroll-progress, .page-transition, .spa-loader, .cursor-dot, .cursor-ring { display: none; } .text-scramble-char { color: inherit; } .quote-panel.active { animation: none; } .testimonials-carousel__track { transition: none; } .confetti-particle { display: none; } .wave-animated .wave-layer { animation: none; } .ripple-effect { display: none; } .reveal-rotate { opacity: 1; transform: none; } } .theme-toggle { background: none; border: none; padding: 6px; cursor: pointer; color: inherit; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; transition: background var(--transition-fast), color var(--transition-fast); position: relative; } .theme-toggle:hover { background: var(--glass-bg-light); } .theme-toggle__icon { width: 20px; height: 20px; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease; } .theme-toggle__sun, .theme-toggle__moon { position: absolute; width: 20px; height: 20px; } .theme-toggle__sun { opacity: 1; transform: rotate(0deg) scale(1); } .theme-toggle__moon { opacity: 0; transform: rotate(-90deg) scale(0.5); } :root[data-theme="dark"] .theme-toggle__sun { opacity: 0; transform: rotate(90deg) scale(0.5); } :root[data-theme="dark"] .theme-toggle__moon { opacity: 1; transform: rotate(0deg) scale(1); } .sound-toggle { background: none; border: none; padding: 6px; cursor: pointer; color: inherit; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; transition: background var(--transition-fast); position: relative; } .sound-toggle:hover { background: var(--glass-bg-light); } .sound-toggle svg { width: 18px; height: 18px; } .sound-toggle__on { display: block; } .sound-toggle__off { display: none; } .sound-toggle.muted .sound-toggle__on { display: none; } .sound-toggle.muted .sound-toggle__off { display: block; } .navbar__toggles { display: flex; align-items: center; gap: 4px; margin-left: 8px; } :root[data-theme="dark"] { --color-primary: #60a5fa; --color-primary-dark: #3b82f6; --color-primary-light: #93c5fd; --color-primary-bg: rgba(96, 165, 250, 0.1); --color-secondary: #f59e0b; --color-secondary-dark: #d97706; --color-secondary-light: #fbbf24; --color-secondary-bg: rgba(245, 158, 11, 0.1); --color-dark: #e2e8f0; --color-dark-soft: #cbd5e1; --color-text: #e2e8f0; --color-text-light: #94a3b8; --color-text-muted: #64748b; --color-border: #1e293b; --color-border-light: #1e293b; --color-bg: #0a0e1a; --color-bg-alt: #111827; --color-bg-dark: #060a14; --color-bg-dark-soft: #0f172a; --gradient-primary: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); --gradient-secondary: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); --gradient-hero: linear-gradient(135deg, #020617 0%, #0a0e1a 50%, #111827 100%); --gradient-dark: linear-gradient(180deg, #060a14 0%, #0f172a 100%); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6); --shadow-primary: 0 8px 25px rgba(96, 165, 250, 0.2); --shadow-secondary: 0 8px 25px rgba(245, 158, 11, 0.2); --color-success: #34d399; --color-success-bg: rgba(52, 211, 153, 0.1); --color-danger: #f87171; --color-danger-bg: rgba(248, 113, 113, 0.1); --color-warning: #fbbf24; --color-warning-bg: rgba(251, 191, 36, 0.1); --color-info: #60a5fa; --color-info-bg: rgba(96, 165, 250, 0.1); --glow-primary: rgba(96, 165, 250, 0.3); --glow-primary-strong: rgba(96, 165, 250, 0.5); --glow-primary-subtle: rgba(96, 165, 250, 0.1); --glow-secondary: rgba(245, 158, 11, 0.3); --glow-secondary-strong: rgba(245, 158, 11, 0.5); --glow-secondary-subtle: rgba(245, 158, 11, 0.1); --glow-cyan: rgba(56, 189, 248, 0.3); --glass-bg: rgba(15, 23, 42, 0.6); --glass-bg-light: rgba(30, 41, 59, 0.4); --glass-bg-medium: rgba(30, 41, 59, 0.6); --glass-bg-strong: rgba(30, 41, 59, 0.8); --glass-border: rgba(255, 255, 255, 0.06); --glass-border-light: rgba(255, 255, 255, 0.04); --glass-border-strong: rgba(255, 255, 255, 0.12); } :root[data-theme="dark"] .navbar.scrolled { background: rgba(10, 14, 26, 0.95); border-bottom-color: rgba(255, 255, 255, 0.06); } :root[data-theme="dark"] .navbar.scrolled .navbar__link { color: #94a3b8; } :root[data-theme="dark"] .navbar.scrolled .navbar__link:hover, :root[data-theme="dark"] .navbar.scrolled .navbar__link.active { color: #e2e8f0; } :root[data-theme="dark"] .card { background: rgba(15, 23, 42, 0.7); border-color: rgba(255, 255, 255, 0.06); } :root[data-theme="dark"] .card:hover { border-color: rgba(96, 165, 250, 0.2); box-shadow: 0 8px 30px rgba(96, 165, 250, 0.1); } :root[data-theme="dark"] .page-header { background: var(--gradient-hero); } :root[data-theme="dark"] .stats-section { background: var(--gradient-dark); } :root[data-theme="dark"] .stat { background: rgba(15, 23, 42, 0.5); border-color: rgba(255, 255, 255, 0.06); } :root[data-theme="dark"] .why__item { background: rgba(15, 23, 42, 0.5); border-color: rgba(255, 255, 255, 0.06); } :root[data-theme="dark"] .footer { background: #020617; } :root[data-theme="dark"] .testimonial { background: rgba(15, 23, 42, 0.6); border-color: rgba(255, 255, 255, 0.06); } :root[data-theme="dark"] .cta-section { background: var(--gradient-dark); } :root[data-theme="dark"] .partners-section { background: var(--color-bg-alt); } :root[data-theme="dark"] .form-control { background: rgba(15, 23, 42, 0.5); border-color: rgba(255, 255, 255, 0.1); color: var(--color-text); } :root[data-theme="dark"] .form-control:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15); } :root[data-theme="dark"] .section-divider--hero-to-light { background: #111827; } :root[data-theme="dark"] .section-divider--hero-to-light .wave-layer--back { fill: rgba(96, 165, 250, 0.15); } :root[data-theme="dark"] .section-divider--hero-to-light .wave-layer--mid { fill: rgba(15, 23, 42, 0.6); } :root[data-theme="dark"] .section-divider--hero-to-light .wave-layer--front { fill: #0a0e1a; } :root[data-theme="dark"] .section-divider--dark-to-light { background: #060a14; } :root[data-theme="dark"] .section-divider--dark-to-light .wave-layer--back { fill: rgba(96, 165, 250, 0.1); } :root[data-theme="dark"] .section-divider--dark-to-light .wave-layer--mid { fill: rgba(15, 23, 42, 0.5); } :root[data-theme="dark"] .section-divider--dark-to-light .wave-layer--front { fill: #0a0e1a; } :root[data-theme="dark"] .section-divider--light-to-dark { background: #0a0e1a; } :root[data-theme="dark"] .section-divider--light-to-dark .wave-layer--back { fill: rgba(6, 10, 20, 0.3); } :root[data-theme="dark"] .section-divider--light-to-dark .wave-layer--mid { fill: rgba(6, 10, 20, 0.6); } :root[data-theme="dark"] .section-divider--light-to-dark .wave-layer--front { fill: #060a14; } :root[data-theme="dark"] .section { background: var(--color-bg); } :root[data-theme="dark"] .section--decorated { background: var(--color-bg); } :root[data-theme="dark"] .service-detail { border-color: rgba(255, 255, 255, 0.06); } :root[data-theme="dark"] .scroll-progress { background: linear-gradient(90deg, var(--color-primary), var(--glow-cyan), var(--color-secondary)); } :root[data-theme="dark"] .about__value { background: rgba(15, 23, 42, 0.5); border-color: rgba(255, 255, 255, 0.06); } :root[data-theme="dark"] .team__member { background: rgba(15, 23, 42, 0.5); border-color: rgba(255, 255, 255, 0.06); } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.4s; animation-timing-function: ease-in-out; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-primary: #60a5fa; --color-primary-dark: #3b82f6; --color-primary-light: #93c5fd; --color-primary-bg: rgba(96, 165, 250, 0.1); --color-secondary: #f59e0b; --color-secondary-dark: #d97706; --color-secondary-light: #fbbf24; --color-secondary-bg: rgba(245, 158, 11, 0.1); --color-dark: #e2e8f0; --color-dark-soft: #cbd5e1; --color-text: #e2e8f0; --color-text-light: #94a3b8; --color-text-muted: #64748b; --color-border: #1e293b; --color-border-light: #1e293b; --color-bg: #0a0e1a; --color-bg-alt: #111827; --color-bg-dark: #060a14; --color-bg-dark-soft: #0f172a; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4); --glass-bg: rgba(15, 23, 42, 0.6); --glass-bg-light: rgba(30, 41, 59, 0.4); --glass-bg-medium: rgba(30, 41, 59, 0.6); --glass-bg-strong: rgba(30, 41, 59, 0.8); --glass-border: rgba(255, 255, 255, 0.06); --glass-border-light: rgba(255, 255, 255, 0.04); --glass-border-strong: rgba(255, 255, 255, 0.12); } } @media (prefers-reduced-motion: reduce) { .theme-toggle__sun, .theme-toggle__moon { transition: none; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } @supports (animation-timeline: view()) { .reveal, .reveal-left, .reveal-right, .reveal-scale { animation: revealScroll linear both; animation-timeline: view(); animation-range: entry 0% entry 50%; } @keyframes revealScroll { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .reveal-left { animation-name: revealScrollLeft; } @keyframes revealScrollLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } } .reveal-right { animation-name: revealScrollRight; } @keyframes revealScrollRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } .reveal-scale { animation-name: revealScrollScale; } @keyframes revealScrollScale { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } } } @supports (animation-timeline: scroll()) { [data-speed="slow"] { animation: parallaxSlow linear both; animation-timeline: scroll(); } [data-speed="medium"] { animation: parallaxMedium linear both; animation-timeline: scroll(); } [data-speed="fast"] { animation: parallaxFast linear both; animation-timeline: scroll(); } @keyframes parallaxSlow { from { transform: translateY(0); } to { transform: translateY(-20px); } } @keyframes parallaxMedium { from { transform: translateY(0); } to { transform: translateY(-40px); } } @keyframes parallaxFast { from { transform: translateY(0); } to { transform: translateY(-60px); } } } @media (prefers-reduced-motion: reduce) { @supports (animation-timeline: view()) { .reveal, .reveal-left, .reveal-right, .reveal-scale { animation: none; opacity: 1; transform: none; } } @supports (animation-timeline: scroll()) { [data-speed="slow"], [data-speed="medium"], [data-speed="fast"] { animation: none; transform: none; } } }