* {margin: 0;padding: 0;box-sizing: border-box} .sr-only {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border: 0} :root {--primary-color: #4da6d9;--primary-dark: #3b8bbf;--secondary-color: #87ceeb;--dark-color: #f0f8ff;--darker-color: #e6f3ff;--light-color: #ffffff;--gray-color: #4a5568;--border-color: #9cc5d4;--container-width: 1200px} body {font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;line-height: 1.6;color: #1e3a8a;background-color: var(--dark-color);font-display: swap;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale} .container {width: 100%;max-width: var(--container-width);margin: 0 auto;padding: 0 20px} a {text-decoration: none;color: inherit} .btn {display: inline-block;padding: 12px 28px;border-radius: 4px;font-weight: 600;text-align: center;cursor: pointer;transition: all 0.3s ease} .btn-primary {background-color: var(--primary-color);color: white} .btn-primary:hover {background-color: var(--primary-dark);transform: translateY(-2px);box-shadow: 0 5px 15px rgba(135, 206, 235, 0.4)} .btn-secondary {background-color: transparent;color: #1e3a8a;border: 1px solid #1e3a8a} .btn-secondary:hover {background-color: rgba(30, 58, 138, 0.1);transform: translateY(-2px)} button:focus-visible, .btn:focus-visible, a:focus-visible {outline: 2px dashed var(--secondary-color);outline-offset: 2px} .menu-toggle:focus-visible {outline: none} .visually-hidden {position: absolute !important;width: 1px !important;height: 1px !important;padding: 0 !important;margin: -1px !important;overflow: hidden !important;clip: rect(0, 0, 0, 0) !important;white-space: nowrap !important;border: 0 !important} .section-header {text-align: center;margin-bottom: 60px} .section-header h2 {font-size: 2.5rem;margin-bottom: 16px;color: #1e3a8a;position: relative;display: inline-block} .section-header h2::after {content: '';position: absolute;bottom: -10px;left: 50%;transform: translateX(-50%);width: 60px;height: 3px;background: linear-gradient(90deg, var(--primary-color), var(--secondary-color))} .section-header p {font-size: 1.1rem;color: var(--gray-color);max-width: 600px;margin: 0 auto} header {background-color: var(--darker-color);color: #1e3a8a;position: relative;overflow: hidden} header::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(135deg, rgba(135, 206, 235, 0.1) 0%, rgba(168, 216, 240, 0.1) 100%);z-index: 1} nav {padding: 20px 0;position: relative;z-index: 1002} nav .container {display: flex;justify-content: space-between;align-items: center} .logo {font-size: 1.8rem;font-weight: 700;color: var(--primary-color);text-decoration: none;transition: opacity 0.3s ease;display: flex;align-items: center;gap: 10px} .logo:hover {opacity: 0.8} .logo span {color: #1e3a8a} .logo img {height: 32px;width: auto;border-radius: 4px} .nav-links {display: flex;gap: 28px;align-items: center} .nav-links a:not(.btn) {font-weight: 500;position: relative;padding: 5px 0} .nav-links a:not(.btn)::after {content: '';position: absolute;bottom: 0;left: 0;width: 0;height: 2px;background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));transition: width 0.3s ease} .nav-links a:not(.btn):hover::after {width: 100%} .nav-links .btn {margin-left: 32px;padding: 16px 32px;font-size: 0.9rem;white-space: nowrap} .menu-toggle {display: none;font-size: 1.5rem;cursor: pointer;background: rgba(135, 206, 235, 0.1);border: 1px solid rgba(135, 206, 235, 0.2);color: #1e3a8a;padding: 10px 14px;border-radius: 4px;transition: all 0.3s ease} .menu-toggle:hover {background: rgba(135, 206, 235, 0.2);border-color: rgba(135, 206, 235, 0.4)} .hero {padding: 80px 0 120px;position: relative;z-index: 2} .hero .container {display: flex;align-items: center;gap: 60px} .hero-content {flex: 1} .hero-content h1 {font-size: 4rem;line-height: 1.1;margin-bottom: 24px;font-weight: 800} .hero-content h1 .highlight {color: var(--primary-color);position: relative;display: inline-block} .hero-content p {font-size: 1.2rem;margin-bottom: 32px;color: var(--gray-color);max-width: 500px} .hero-buttons {display: flex;gap: 16px} .hero-image {flex: 1;position: relative} .hero-card {background: linear-gradient(135deg, #87ceeb 0%, #a8d8f0 100%);border-radius: 16px;padding: 40px;display: flex;flex-direction: column;align-items: center;justify-content: center;box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);position: relative;overflow: hidden;height: 400px} .hero-card-icon {font-size: 3rem;margin-bottom: 20px;position: relative;z-index: 1} .hero-card h3 {font-size: 2rem;margin-bottom: 16px;text-align: center;position: relative;z-index: 1} .company-logos {padding: 60px 0;background: linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.05));border-top: 1px solid rgba(255, 255, 255, 0.1);border-bottom: 1px solid rgba(255, 255, 255, 0.1);overflow: hidden;position: relative} .logos-content {text-align: center} .logos-subtitle {font-size: 1.1rem;color: var(--gray-color);margin-bottom: 40px;font-weight: 500;opacity: 0.8} .logos-carousel {display: flex;align-items: center;animation: scroll 40s linear infinite;width: fit-content} .logo-item {flex: 0 0 auto;margin: 0 20px;display: flex;align-items: center;justify-content: center;height: 60px;opacity: 0.7;transition: opacity 0.3s ease, transform 0.3s ease} .logo-item:hover {opacity: 1;transform: scale(1.1)} .logo-item img {height: 40px;width: auto;max-width: 120px;filter: grayscale(100%) brightness(0.8);transition: filter 0.3s ease} .logo-item:hover img {filter: grayscale(0%) brightness(1)} @keyframes scroll {0% {transform: translateX(0)} 100% {transform: translateX(calc(-50% - 20px))} } .logos-carousel:hover {animation-play-state: paused} @media (max-width: 768px) {.company-logos {padding: 40px 0} .logos-subtitle {font-size: 1rem;margin-bottom: 30px} .logo-item {margin: 0 15px;height: 55px} .logo-item img {height: 38px;max-width: 110px} } @media (max-width: 480px) {.company-logos {padding: 30px 0} .logo-item {margin: 0 12px;height: 50px} .logo-item img {height: 35px;max-width: 95px} } .services {padding: 100px 0;background-color: var(--darker-color);position: relative} .services::before {content: '';position: absolute;top: 0;left: 0;right: 0;height: 1px;background: linear-gradient(90deg, transparent, var(--primary-color), transparent)} .services-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 30px} .use-cases-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 30px;align-items: stretch} .use-cases-grid .service-card {opacity: 1;transform: none;transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;display: flex;flex-direction: column;height: 100%;min-height: 320px} .use-cases-grid .service-card .icon {margin-bottom: 24px} .use-cases-grid .service-card h3 {margin-bottom: 20px;flex-shrink: 0} .use-cases-grid .service-card p {flex-grow: 1;display: flex;align-items: flex-start} @media (max-width: 1400px) {.use-cases-grid {grid-template-columns: repeat(2, 1fr);gap: 30px} } @media (max-width: 768px) {.use-cases-grid {grid-template-columns: 1fr;gap: 25px} .use-cases-grid .service-card {min-height: 280px;padding: 35px 25px} } @media (max-width: 480px) {.use-cases-grid .service-card {min-height: 260px;padding: 30px 20px} } .service-card {background-color: rgba(255, 255, 255, 0.05);border-radius: 12px;padding: 40px 30px;text-align: center;transition: all 0.3s ease;border: 1px solid rgba(255, 255, 255, 0.1);position: relative;overflow: hidden;backdrop-filter: blur(10px)} .service-card::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 3px;background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));transform: scaleX(0);transform-origin: left;transition: transform 0.4s ease} .service-card:hover {transform: translateY(-8px);box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);background-color: rgba(255, 255, 255, 0.08);border-color: rgba(59, 130, 246, 0.3)} .service-card:hover::before {transform: scaleX(1)} .service-card .icon {font-size: 2.8rem;color: var(--primary-color);margin-bottom: 20px;position: relative;transition: all 0.3s ease} .service-card .icon::after {content: '';position: absolute;width: 60px;height: 60px;background: rgba(59, 130, 246, 0.15);border-radius: 50%;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: -1;transition: all 0.3s ease} .service-card:hover .icon {transform: scale(1.1);color: var(--secondary-color)} .service-card:hover .icon::after {background: rgba(139, 92, 246, 0.2);transform: translate(-50%, -50%) scale(1.2)} .service-card h3 {font-size: 1.4rem;color: #1e3a8a;margin-bottom: 16px;font-weight: 600} .service-card p {color: var(--gray-color);line-height: 1.6;font-size: 0.95rem} .how-it-works {padding: 100px 0;background-color: var(--dark-color);position: relative} .steps {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 30px;position: relative;max-width: 1200px;margin: 0 auto} .step {text-align: center;padding: 30px;background-color: rgba(255, 255, 255, 0.6);border-radius: 8px;border: 1px solid rgba(135, 206, 235, 0.3);position: relative;z-index: 1;transition: transform 0.3s ease, box-shadow 0.3s ease} .step:hover {transform: translateY(-5px);box-shadow: 0 10px 30px rgba(59, 130, 246, 0.2)} @media (min-width: 769px) {.step:not(:last-child)::after {content: '\f138';font-family: 'Font Awesome 6 Free';font-weight: 900;position: absolute;top: 50%;right: -40px;transform: translateY(-50%);color: rgba(59, 130, 246, 0.8);font-size: 1.5rem;z-index: 2;text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)} .steps {gap: 50px} } @media (max-width: 768px) {.steps {grid-template-columns: 1fr;gap: 60px} .step:not(:last-child)::after {content: '\f063';font-family: 'Font Awesome 6 Free';font-weight: 900;position: absolute;bottom: -40px;left: 50%;transform: translateX(-50%);color: rgba(59, 130, 246, 0.8);font-size: 1.5rem;z-index: 2;text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)} } .step-number {width: 60px;height: 60px;background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));color: white;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 1.5rem;font-weight: 700;margin: 0 auto 20px;position: relative;box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3)} .step h3 {font-size: 1.3rem;margin-bottom: 16px;color: #1e3a8a} .step p {color: var(--gray-color)} .testimonials {padding: 100px 0;background-color: var(--darker-color);position: relative} .testimonials::before {content: '';position: absolute;top: 0;left: 0;right: 0;height: 1px;background: linear-gradient(90deg, transparent, var(--primary-color), transparent)} .testimonial-slider {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 30px;position: relative} .testimonial {background-color: rgba(255, 255, 255, 0.6);border-radius: 8px;padding: 30px;border: 1px solid rgba(135, 206, 235, 0.3);position: relative;opacity: 1;transform: translateY(0) scale(1);transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);filter: blur(0px)} .testimonial.fade-out {opacity: 0;transform: translateY(30px) scale(0.95);filter: blur(3px)} .testimonial.fade-in {opacity: 1;transform: translateY(0) scale(1);filter: blur(0px)} .testimonial.hidden {display: none !important} .quote {margin-bottom: 20px} .quote p {font-style: italic;color: var(--gray-color);position: relative;padding-left: 20px;line-height: 1.6} .quote p::before {content: '"';font-size: 2rem;color: var(--primary-color);position: absolute;left: 0;top: -10px} .quote p strong {color: var(--primary-color);font-weight: 700;font-style: normal} .client {display: flex;align-items: center} .client-info h4 {font-size: 1.1rem;margin-bottom: 4px;color: #1e3a8a} .client-info p {color: var(--gray-color);font-size: 0.9rem} .contact {padding: 100px 0;background-color: var(--dark-color);position: relative} .contact::before {content: '';position: absolute;top: 0;left: 0;right: 0;height: 1px;background: linear-gradient(90deg, transparent, var(--primary-color), transparent)} .hidden {display: none} footer {background-color: var(--darker-color);color: #1e3a8a;padding: 80px 0 20px;position: relative} footer::before {content: '';position: absolute;top: 0;left: 0;right: 0;height: 1px;background: linear-gradient(90deg, transparent, var(--primary-color), transparent)} .footer-content {display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 40px;margin-bottom: 60px} .footer-logo {font-size: 1.8rem;font-weight: 700;margin-bottom: 16px;color: var(--primary-color);text-decoration: none;display: flex;align-items: center;gap: 10px;transition: opacity 0.3s ease} .footer-logo:hover {opacity: 0.8} .footer-logo span {color: #1e3a8a} .footer-logo img {height: 32px;width: auto;border-radius: 4px} .footer-text p {color: var(--gray-color);margin-bottom: 20px} .footer-text p a[href^="mailto:"] {color: var(--primary-color);text-decoration: none;font-weight: 500;transition: color 0.3s ease} .footer-text p a[href^="mailto:"]:hover {color: var(--secondary-color);text-decoration: underline} .footer-text p i.fa-envelope {margin-right: 8px;color: var(--primary-color)} .link-group h3 {font-size: 1.2rem;margin-bottom: 20px;color: #1e3a8a;position: relative;display: inline-block} .link-group h3::after {content: '';position: absolute;bottom: -5px;left: 0;width: 30px;height: 2px;background: linear-gradient(90deg, var(--primary-color), var(--secondary-color))} .link-group a {display: block;margin-bottom: 10px;color: var(--gray-color);transition: color 0.3s ease} .link-group a:hover {color: #1e3a8a} .footer-social h3 {font-size: 1.2rem;margin-bottom: 20px;color: #1e3a8a;position: relative;display: inline-block} .footer-social h3::after {content: '';position: absolute;bottom: -5px;left: 0;width: 30px;height: 2px;background: linear-gradient(90deg, var(--primary-color), var(--secondary-color))} .social-icons {display: flex;gap: 16px} .social-icons a {width: 40px;height: 40px;background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));border-radius: 50%;display: flex;align-items: center;justify-content: center;transition: all 0.3s ease;border: 1px solid rgba(255, 255, 255, 0.1)} .social-icons a:hover {transform: translateY(-3px);background: linear-gradient(135deg, var(--primary-color), var(--secondary-color))} .footer-bottom {text-align: center;padding-top: 20px;border-top: 1px solid rgba(255, 255, 255, 0.05)} .footer-bottom p {color: var(--gray-color);font-size: 0.9rem} .footer-language {min-width: 200px} .footer-language h3 {font-size: 1.2rem;margin-bottom: 20px;color: #1e3a8a;position: relative;display: inline-block} .footer-language h3::after {content: '';position: absolute;bottom: -5px;left: 0;width: 30px;height: 2px;background: linear-gradient(90deg, var(--primary-color), var(--secondary-color))} .language-toggle select {width: 100%;background: rgba(255, 255, 255, 0.95);border: 1px solid rgba(135, 206, 235, 0.4);border-radius: 8px;padding: 12px 16px;color: #1e3a8a;font-size: 14px;font-weight: 500;cursor: pointer;transition: all 0.3s ease;appearance: none;background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%231e3a8a" d="M2 0L0 2h4zm0 5L0 3h4z"/></svg>');background-repeat: no-repeat;background-position: right 12px center;background-size: 12px;padding-right: 40px} .language-toggle select:hover {background-color: rgba(135, 206, 235, 0.2);border-color: rgba(135, 206, 235, 0.7);transform: translateY(-1px);box-shadow: 0 4px 12px rgba(77, 166, 217, 0.2)} .language-toggle select:focus {outline: 2px solid var(--primary-color);outline-offset: 2px;border-color: var(--primary-color)} .language-toggle option {background: var(--light-color);color: #1e3a8a;padding: 8px} @media (max-width: 768px) {.footer-language {min-width: auto;width: 100%;margin-top: 20px} .language-toggle select {font-size: 12px;padding: 10px 14px;padding-right: 36px;background-size: 10px;background-position: right 10px center} } .language-switcher {display: none} #pwa-update-notification {z-index: 10000 !important} .animate {opacity: 0;transform: translateY(20px);transition: opacity 0.6s ease, transform 0.6s ease} .animate.in-view {opacity: 1;transform: translateY(0)} .gradient-text {background: linear-gradient(90deg, #3b82f6, #8b5cf6);-webkit-background-clip: text;background-clip: text;color: transparent;display: inline-block} .contact .hero-buttons {display: flex;gap: 16px;justify-content: center} .glow {position: relative} .glow::after {content: '';position: absolute;top: 50%;left: 50%;width: 100%;height: 100%;transform: translate(-50%, -50%);background: radial-gradient(circle, rgba(59, 130, 246, 0.4) 0%, rgba(59, 130, 246, 0) 70%);z-index: -1;filter: blur(20px)} .grid-bg {position: relative;overflow: hidden} .grid-bg::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);background-size: 20px 20px;z-index: -1} @keyframes float {0%, 100% {transform: translateY(0)} 50% {transform: translateY(-10px)} } @keyframes pulse {0% {box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4)} 70% {box-shadow: 0 0 0 15px rgba(59, 130, 246, 0)} 100% {box-shadow: 0 0 0 0 rgba(59, 130, 246, 0)} } .hero-card.floating {transition: none;animation: float 6s ease-in-out infinite} .pulse {animation: pulse 2s infinite} .hover-card {transition: all 0.3s ease} .hover-card:hover {transform: translateY(-10px);box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3)} ::-webkit-scrollbar {width: 8px} ::-webkit-scrollbar-track {background: #111827} ::-webkit-scrollbar-thumb {background: #3b82f6;border-radius: 4px} ::-webkit-scrollbar-thumb:hover {background: #2563eb} .backdrop-blur {backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px)} .btn-futuristic {position: relative;overflow: hidden;background: linear-gradient(90deg, #3b82f6, #8b5cf6);border: none;color: white;padding: 12px 28px;border-radius: 4px;font-weight: 600;letter-spacing: 0.5px;transition: all 0.3s ease} .btn-futuristic::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);transition: all 0.6s ease} .btn-futuristic:hover::before {left: 100%} .btn-futuristic:hover {box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4);transform: translateY(-2px)} .use-case-icon {font-size: 2.5rem;color: var(--primary-color);margin-bottom: 20px;text-align: center} .use-case-icon i {display: block;margin: 0 auto} .note {margin-top: 40px;padding: 20px;background-color: rgba(59, 130, 246, 0.1);border-left: 4px solid var(--primary-color);border-radius: 8px} .note p {margin: 0;color: var(--gray-color);font-size: 14px;line-height: 1.6} .note em {font-style: italic} .note strong {color: var(--primary-color);font-weight: 600} .about-hero {background: linear-gradient(135deg, var(--darker-color) 0%, var(--dark-color) 100%);padding: 120px 0 80px;text-align: center;position: relative;overflow: hidden} .about-hero::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);z-index: 1} .about-hero-content {position: relative;z-index: 2} .about-hero h1 {font-size: 3.5rem;font-weight: 700;margin-bottom: 20px;background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text} .hero-subtitle {font-size: 1.25rem;color: var(--gray-color);margin-bottom: 2rem} .founder-section {padding: 80px 0;background-color: var(--darker-color)} .founder-card {max-width: 1000px;margin: 0 auto} .company-story {padding: 80px 0;background-color: var(--dark-color)} .story-content {max-width: 800px;margin: 0 auto} .story-text h3 {font-size: 1.8rem;color: var(--primary-color);margin-bottom: 16px;margin-top: 40px} .story-text h3:first-child {margin-top: 0} .story-text p {font-size: 1.1rem;line-height: 1.8;color: var(--gray-color);margin-bottom: 24px} .founder-section {padding: 80px 0;background-color: var(--darker-color)} .founder-card {max-width: 1000px;margin: 0 auto;display: grid;grid-template-columns: 200px 1fr;gap: 60px;align-items: start;background: rgba(255, 255, 255, 0.02);border: 1px solid rgba(255, 255, 255, 0.1);border-radius: 12px;padding: 40px} .founder-image {text-align: center} .founder-avatar {width: 120px;height: 120px;border-radius: 50%;display: block;object-fit: cover;object-position: center;margin: 0 auto;box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);border: 3px solid transparent;background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));background-clip: padding-box} .founder-info h3 {font-size: 2.2rem;color: #1e3a8a;margin-bottom: 8px;font-weight: 700} .founder-title {font-size: 1.2rem;color: var(--primary-color);font-weight: 600;margin-bottom: 24px} .founder-description {font-size: 1.1rem;line-height: 1.8;color: var(--gray-color);margin-bottom: 20px} .linkedin-btn {display: inline-flex;align-items: center;gap: 10px;padding: 12px 24px;background: linear-gradient(135deg, #0077b5, #005582);color: white;text-decoration: none;border-radius: 8px;font-weight: 600;font-size: 1rem;transition: all 0.3s ease;border: 2px solid transparent;margin-top: 10px} .linkedin-btn:hover {background: linear-gradient(135deg, #005582, #0077b5);transform: translateY(-2px);box-shadow: 0 8px 25px rgba(0, 119, 181, 0.3);border-color: rgba(255, 255, 255, 0.2)} .linkedin-btn svg, .linkedin-btn img {width: 20px;height: 20px;fill: currentColor;filter: brightness(0) invert(1)} .mission-values {padding: 80px 0;background-color: var(--dark-color)} .mission-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));gap: 30px;margin-top: 60px} .mission-card {background: rgba(255, 255, 255, 0.02);border: 1px solid rgba(255, 255, 255, 0.1);border-radius: 12px;padding: 30px;text-align: center;transition: all 0.3s ease} .mission-card:hover {transform: translateY(-5px);border-color: var(--primary-color);box-shadow: 0 10px 30px rgba(59, 130, 246, 0.2)} .mission-icon {font-size: 3rem;margin-bottom: 20px} .mission-card h3 {font-size: 1.4rem;color: #1e3a8a;margin-bottom: 16px;font-weight: 600} .mission-card p {color: var(--gray-color);line-height: 1.6} .why-choose {padding: 80px 0;background-color: var(--darker-color)} .choose-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 30px;margin-top: 60px} .choose-item {background: rgba(255, 255, 255, 0.02);border: 1px solid rgba(255, 255, 255, 0.1);border-radius: 12px;padding: 30px;transition: all 0.3s ease} .choose-item:hover {transform: translateY(-5px);border-color: var(--secondary-color);box-shadow: 0 10px 30px rgba(139, 92, 246, 0.2)} .choose-item h3 {font-size: 1.3rem;color: #1e3a8a;margin-bottom: 16px;font-weight: 600} .choose-item p {color: var(--gray-color);line-height: 1.6} .company-stats {padding: 80px 0;background-color: var(--dark-color)} .stats-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 40px;margin-top: 60px} .stat-item {text-align: center;background: rgba(255, 255, 255, 0.8);border: 1px solid rgba(77, 166, 217, 0.3);border-radius: 12px;padding: 40px 20px;transition: all 0.3s ease;backdrop-filter: blur(10px)} .stat-item:hover {transform: translateY(-5px);border-color: var(--primary-color);box-shadow: 0 10px 30px rgba(77, 166, 217, 0.3);background: rgba(255, 255, 255, 0.95)} .stat-number {font-size: 3rem;font-weight: 700;color: var(--primary-color);margin-bottom: 12px;line-height: 1.2} .stat-label {font-size: 1.1rem;color: #1e3a8a;font-weight: 500} .contact-cards-grid {display: grid;grid-template-columns: 1fr 1fr;gap: 2rem;margin-top: 3rem;max-width: 1000px;margin-left: auto;margin-right: auto} .contact-card {background: rgba(255, 255, 255, 0.9);border-radius: 16px;padding: 0;box-shadow: 0 20px 40px rgba(77, 166, 217, 0.1);border: 1px solid rgba(135, 206, 235, 0.3);backdrop-filter: blur(10px);transition: all 0.3s ease;overflow: hidden;display: flex;flex-direction: column;min-height: 550px} .contact-card:hover {transform: translateY(-5px);box-shadow: 0 25px 50px rgba(77, 166, 217, 0.2);border-color: var(--primary-color)} .card-header {padding: 2.5rem 2rem 1.5rem;text-align: center;position: relative;border-bottom: 1px solid rgba(135, 206, 235, 0.3);margin-bottom: 1.5rem} .card-header::after {content: '';position: absolute;bottom: -1px;left: 50%;transform: translateX(-50%);width: 50px;height: 3px;background: linear-gradient(90deg, var(--primary-color), var(--secondary-color))} .card-icon {width: 64px;height: 64px;border-radius: 50%;background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));display: flex;align-items: center;justify-content: center;margin: 0 auto 1.25rem;color: white;font-size: 1.5rem;box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3)} .card-header h3 {font-size: 1.75rem;font-weight: 700;margin-bottom: 0.75rem;color: #1e3a8a;line-height: 1.3} .card-subtitle {font-size: 1.1rem;color: #6b8a96;line-height: 1.5;margin: 0;font-weight: 500} .card-content {padding: 0 2rem;flex: 1;display: flex;flex-direction: column;justify-content: flex-start} .consultation-card .consultation-benefits {text-align: left;padding: 0.5rem 0} .consultation-card .benefit-item {display: flex;align-items: center;gap: 1rem;margin-bottom: 1.25rem;font-size: 1rem;color: #1e3a8a;font-weight: 500} .consultation-card .benefit-item i {color: var(--primary-color);font-size: 1rem;flex-shrink: 0;background: rgba(77, 166, 217, 0.1);width: 28px;height: 28px;border-radius: 50%;display: flex;align-items: center;justify-content: center} .consultation-card .benefit-item span {line-height: 1.4} .contact-form {margin: 0} .form-row {display: grid;grid-template-columns: 1fr 1fr;gap: 1rem;margin-bottom: 1rem} .card-content .form-group {margin-bottom: 1rem} .card-content .form-group label {display: block;font-weight: 600;color: #1e3a8a;margin-bottom: 0.5rem;font-size: 0.9rem} .card-content .form-group input, .card-content .form-group textarea {width: 100%;padding: 0.75rem;border: 2px solid rgba(135, 206, 235, 0.5);border-radius: 8px;font-size: 0.95rem;transition: all 0.3s ease;background: rgba(255, 255, 255, 0.95);color: #1e3a8a;box-sizing: border-box} .card-content .form-group input::placeholder, .card-content .form-group textarea::placeholder {color: rgba(30, 58, 138, 0.7)} .card-content .form-group input:focus, .card-content .form-group textarea:focus {outline: none;border-color: var(--primary-color);box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);background: rgba(255, 255, 255, 1)} .card-content .form-group textarea {resize: vertical;min-height: 100px} .card-footer {padding: 1.5rem 2rem 2.5rem;text-align: center;margin-top: auto} .btn-consultation, .btn-message {background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));color: white;border: none;padding: 0.875rem 2rem;border-radius: 8px;font-weight: 600;font-size: 1rem;text-decoration: none;display: inline-flex;align-items: center;gap: 0.5rem;cursor: pointer;transition: all 0.3s ease;width: 100%;justify-content: center;box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3)} .btn-consultation:hover, .btn-message:hover {transform: translateY(-2px);box-shadow: 0 10px 25px rgba(59, 130, 246, 0.4)} .booking-note, .response-note {font-size: 0.85rem;color: #94a3b8;margin: 0.75rem 0 0;font-style: italic} .story-text p strong, .founder-description strong, .choose-item p strong {color: var(--primary-color);font-weight: 700} .mission-card p strong {color: var(--primary-color);font-weight: 700} @media (max-width: 768px) {.menu-toggle {display: block;z-index: 1001;color: #1e3a8a;position: relative;background: transparent;border: none;font-size: 1.5rem;cursor: pointer;padding: 10px 14px;border-radius: 4px;transition: all 0.3s ease} .menu-toggle:hover {background: transparent;border: none} .menu-toggle:focus-visible {outline: none} .nav-links {position: fixed;top: 0;left: 0;width: 100%;height: 100vh;background: rgba(240, 248, 255, 0.98);backdrop-filter: blur(10px);display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 2rem;transform: translateX(-100%);transition: transform 0.3s ease;z-index: 1000;opacity: 0;visibility: hidden;border-right: 1px solid rgba(135, 206, 235, 0.3)} .nav-links.active {transform: translateX(0);opacity: 1;visibility: visible} .nav-links a {font-size: 1.5rem;padding: 1rem 2rem;border-radius: 8px;transition: all 0.3s ease;color: #1e3a8a;text-align: center;min-width: 200px;border: 1px solid transparent} .nav-links a:hover, .nav-links a:focus {background: transparent;transform: none;outline: none;border-color: transparent} .menu-toggle:focus-visible {outline: none} .nav-links .btn {margin-left: 0;padding: 16px 32px !important;font-size: 1.1rem;display: inline-flex !important;align-items: center;gap: 0.5rem;text-decoration: none;border-radius: 10px;cursor: pointer;color: white !important} .nav-links .btn i {color: white !important} .nav-links a:not(.btn)::after {display: none} .logo {z-index: 1001;position: relative} .hero .container {flex-direction: column;text-align: center;gap: 40px} .hero-content h1 {font-size: 2.5rem} .hero-buttons {flex-direction: column;align-items: center;gap: 12px} } @media (max-width: 768px) {.about-hero h1 {font-size: 2.5rem} .hero-subtitle {font-size: 1.1rem} .contact .hero-buttons {flex-direction: column;align-items: center} .founder-card {grid-template-columns: 1fr;gap: 30px;text-align: center;padding: 30px 20px} .founder-avatar {width: 100px;height: 100px} .founder-info h3 {font-size: 1.8rem} .mission-grid, .choose-grid {grid-template-columns: 1fr;gap: 20px} .stats-grid {grid-template-columns: repeat(2, 1fr);gap: 20px} .mission-card, .choose-item, .stat-item {padding: 20px} .contact-cards-grid {grid-template-columns: 1fr;gap: 1.5rem;margin-top: 2rem} .contact-card {min-height: auto;margin: 0 auto;max-width: 500px;width: 100%} .card-header h3 {font-size: 1.5rem} .card-subtitle {font-size: 1rem} .card-icon {width: 56px;height: 56px;font-size: 1.3rem;margin-bottom: 1rem} .form-row {grid-template-columns: 1fr;gap: 0.5rem} .consultation-card .benefit-item {font-size: 0.95rem;margin-bottom: 1rem} .btn-consultation, .btn-message {padding: 0.75rem 1.5rem;font-size: 0.95rem} } @media (max-width: 480px) {.contact-cards-grid {margin-top: 1.5rem;gap: 1rem} .card-header {padding: 1.25rem 1.25rem 0.75rem} .card-content {padding: 0 1.25rem} .card-footer {padding: 0.75rem 1.25rem 1.25rem} .card-header h3 {font-size: 1.2rem} .card-subtitle {font-size: 0.9rem} .card-content .form-group input, .card-content .form-group textarea {padding: 0.625rem;font-size: 0.9rem} .benefit-item {font-size: 0.85rem} .consultation-card .card-header h3 {font-size: 1.4rem} .consultation-card .card-subtitle {font-size: 1rem} .consultation-card .benefit-item {font-size: 0.95rem;margin-bottom: 0.75rem} .consultation-card .btn-consultation {font-size: 1rem;padding: 0.875rem 1.5rem} } @media (min-width: 1400px) {.contact-cards-grid {max-width: 1200px;gap: 3rem} .contact-card {max-width: 550px} } .form-submit {display: none} .form-card .card-content {padding-bottom: 0} @media (max-width: 768px) {.contact-cards-grid {grid-template-columns: 1fr;gap: 1.5rem;margin-top: 2rem} .contact-card {min-height: auto;margin: 0 auto;max-width: 500px;width: 100%} .card-header h3 {font-size: 1.5rem} .card-subtitle {font-size: 1rem} .card-icon {width: 56px;height: 56px;font-size: 1.3rem;margin-bottom: 1rem} .form-row {grid-template-columns: 1fr;gap: 0.5rem} .consultation-card .benefit-item {font-size: 0.95rem;margin-bottom: 1rem} .btn-consultation, .btn-message {padding: 0.75rem 1.5rem;font-size: 0.95rem} } .pricing-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));gap: 2rem;margin-top: 3rem;padding: 1rem} .pricing-card {background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);border: 1px solid rgba(59, 130, 246, 0.2);border-radius: 16px;padding: 2rem;position: relative;transition: all 0.3s ease;overflow: visible} .pricing-card::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);opacity: 0;transition: opacity 0.3s ease;z-index: 1} .pricing-card:hover {transform: translateY(-8px);border-color: rgba(59, 130, 246, 0.4);box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3)} .pricing-card:hover::before {opacity: 1} .pricing-card > * {position: relative;z-index: 2} .pricing-header {text-align: center;margin-bottom: 1.5rem;position: relative} .pricing-icon {width: 80px;height: 80px;background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));border-radius: 50%;display: flex;align-items: center;justify-content: center;margin: 0 auto 1rem;position: relative} .pricing-icon i {font-size: 2rem;color: #1e3a8a} .pricing-header h3 {font-size: 1.5rem;font-weight: 700;color: #1e3a8a;margin-bottom: 0.5rem} .pricing-badge {background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));color: white;padding: 0.25rem 0.75rem;border-radius: 20px;font-size: 0.75rem;font-weight: 600;text-transform: uppercase;letter-spacing: 0.5px;position: absolute;top: -10px;right: -10px;transform: rotate(15deg)} .pricing-badge.enterprise {background: linear-gradient(135deg, #f59e0b, #d97706)} .pricing-price {text-align: center;margin-bottom: 1.5rem} .price-amount {font-size: 3rem;font-weight: 700;color: var(--primary-color);display: block;line-height: 1} .price-period {color: var(--text-muted);font-size: 0.9rem;margin-top: 0.25rem} .pricing-description {margin-bottom: 1.5rem} .pricing-description p {color: var(--text-muted);line-height: 1.6;text-align: center} .pricing-features ul {list-style: none;padding: 0;margin: 0} .pricing-features li {display: flex;align-items: center;margin-bottom: 0.75rem;color: var(--text-muted)} .pricing-features li i {color: var(--primary-color);margin-right: 0.75rem;width: 16px;flex-shrink: 0} .pricing-cta {margin-top: 2rem;text-align: center} .pricing-cta .btn {width: 100%;padding: 0.75rem 1.5rem;font-weight: 600} .whats-included {padding: 5rem 0;background: linear-gradient(135deg, rgba(59, 130, 246, 0.02) 0%, rgba(139, 92, 246, 0.02) 100%)} .included-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 2rem;margin-top: 3rem} .included-item {text-align: center;padding: 1.5rem} .included-icon {width: 60px;height: 60px;background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));border-radius: 50%;display: flex;align-items: center;justify-content: center;margin: 0 auto 1rem} .included-icon i {font-size: 1.5rem;color: #1e3a8a} .included-item h3 {font-size: 1.25rem;font-weight: 600;color: #1e3a8a;margin-bottom: 0.75rem} .included-item p {color: var(--text-muted);line-height: 1.6} .pricing-faq {padding: 5rem 0} .faq-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));gap: 2rem;margin-top: 3rem} .faq-item {background: rgba(59, 130, 246, 0.05);border: 1px solid rgba(59, 130, 246, 0.1);border-radius: 12px;padding: 1.5rem;transition: all 0.3s ease} .faq-item:hover {background: rgba(59, 130, 246, 0.08);border-color: rgba(59, 130, 246, 0.2);transform: translateY(-2px)} .faq-item h3 {font-size: 1.1rem;font-weight: 600;color: #1e3a8a;margin-bottom: 0.75rem;display: flex;align-items: center} .faq-item h3 i {color: var(--primary-color);margin-right: 0.5rem;font-size: 1rem} .faq-item p {color: var(--text-muted);line-height: 1.6;margin: 0} @media (max-width: 768px) {.pricing-grid {grid-template-columns: 1fr;gap: 1.5rem;padding: 1.5rem 1rem} .pricing-card {padding: 1.5rem;margin: 1.5rem 0} .pricing-badge {top: -12px;right: -12px;transform: rotate(10deg);font-size: 0.7rem;padding: 0.2rem 0.6rem} .price-amount {font-size: 2.5rem} .included-grid {grid-template-columns: 1fr;gap: 1.5rem} .faq-grid {grid-template-columns: 1fr;gap: 1.5rem} main {overflow: visible} .services .container {overflow: visible;padding-left: 20px;padding-right: 20px} } @media (max-width: 480px) {.pricing-grid {padding: 2rem 0.5rem} .pricing-card {padding: 1rem;margin: 2rem 0} .pricing-icon {width: 60px;height: 60px} .pricing-icon i {font-size: 1.5rem} .pricing-badge {top: -10px;right: -10px;transform: rotate(6deg);font-size: 0.65rem;padding: 0.15rem 0.5rem;border-radius: 15px} .price-amount {font-size: 2rem} } .language-switcher {display: none} #pwa-update-notification {z-index: 10000 !important} .animate {opacity: 0;transform: translateY(20px);transition: opacity 0.6s ease, transform 0.6s ease} .animate.in-view {opacity: 1;transform: translateY(0)} .delay-1.in-view {transition-delay: 0.1s} .delay-2.in-view {transition-delay: 0.2s} .delay-3.in-view {transition-delay: 0.3s} .delay-4.in-view {transition-delay: 0.4s} .delay-5.in-view {transition-delay: 0.5s} .delay-6.in-view {transition-delay: 0.6s} .gradient-text {background: linear-gradient(90deg, #3b82f6, #8b5cf6);-webkit-background-clip: text;background-clip: text;color: transparent;display: inline-block} .contact .hero-buttons {display: flex;gap: 16px;justify-content: center} .glow {position: relative} .glow::after {content: '';position: absolute;top: 50%;left: 50%;width: 100%;height: 100%;transform: translate(-50%, -50%);background: radial-gradient(circle, rgba(59, 130, 246, 0.4) 0%, rgba(59, 130, 246, 0) 70%);z-index: -1;filter: blur(20px)} .grid-bg {position: relative;overflow: hidden} .grid-bg::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);background-size: 20px 20px;z-index: -1} @keyframes float {0%, 100% {transform: translateY(0)} 50% {transform: translateY(-10px)} } @keyframes pulse {0% {box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4)} 70% {box-shadow: 0 0 0 15px rgba(59, 130, 246, 0)} 100% {box-shadow: 0 0 0 0 rgba(59, 130, 246, 0)} } .hero-card.floating {transition: none;animation: float 6s ease-in-out infinite} .pulse {animation: pulse 2s infinite} .hover-card {transition: all 0.3s ease} .hover-card:hover {transform: translateY(-10px);box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3)} ::-webkit-scrollbar {width: 8px} ::-webkit-scrollbar-track {background: #111827} ::-webkit-scrollbar-thumb {background: #3b82f6;border-radius: 4px} ::-webkit-scrollbar-thumb:hover {background: #2563eb} .backdrop-blur {backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px)} .btn-futuristic {position: relative;overflow: hidden;background: linear-gradient(90deg, #3b82f6, #8b5cf6);border: none;color: white;padding: 12px 28px;border-radius: 4px;font-weight: 600;letter-spacing: 0.5px;transition: all 0.3s ease} .btn-futuristic::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);transition: all 0.6s ease} .btn-futuristic:hover::before {left: 100%} .btn-futuristic:hover {box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4);transform: translateY(-2px)} .use-case-icon {font-size: 2.5rem;color: var(--primary-color);margin-bottom: 20px;text-align: center} .use-case-icon i {display: block;margin: 0 auto} .note {margin-top: 40px;padding: 20px;background-color: rgba(59, 130, 246, 0.1);border-left: 4px solid var(--primary-color);border-radius: 8px} .note p {margin: 0;color: var(--gray-color);font-size: 14px;line-height: 1.6} .note em {font-style: italic} .note strong {color: var(--primary-color);font-weight: 600} .about-hero {background: linear-gradient(135deg, var(--darker-color) 0%, var(--dark-color) 100%);padding: 120px 0 80px;text-align: center;position: relative;overflow: hidden} .about-hero::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);z-index: 1} .about-hero-content {position: relative;z-index: 2} .about-hero h1 {font-size: 3.5rem;font-weight: 700;margin-bottom: 20px;background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text} .hero-subtitle {font-size: 1.25rem;color: var(--gray-color);margin-bottom: 2rem}