* {margin: 0;padding: 0;box-sizing: border-box;} :root {--primary-blue: #0066CC;--primary-green: #2C5530;--secondary-gold: #FFD700;--accent-cyan: #00D4FF;--dark-bg: #0A0E1A;--light-bg: #F8FAFC;--text-primary: #1A202C;--text-secondary: #4A5568;--text-light: #CBD5E0;--white: #FFFFFF;--gradient-primary: linear-gradient(135deg,#0066CC 0%,#2C5530 100%);--gradient-secondary: linear-gradient(135deg,#00D4FF 0%,#0066CC 100%);--gradient-accent: linear-gradient(135deg,#FFD700 0%,#FF8C00 100%);--font-primary: 'Inter',-apple-system,BlinkMacSystemFont,sans-serif;--font-weight-light: 300;--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-weight-extrabold: 800;--space-xs: 0.5rem;--space-sm: 1rem;--space-md: 1.5rem;--space-lg: 2rem;--space-xl: 3rem;--space-2xl: 4rem;--space-3xl: 6rem;--border-radius: 0.75rem;--border-radius-lg: 1rem;--border-radius-xl: 1.5rem;--shadow-sm: 0 2px 4px rgba(0,0,0,0.05);--shadow-md: 0 4px 12px rgba(0,0,0,0.1);--shadow-lg: 0 8px 25px rgba(0,0,0,0.15);--shadow-xl: 0 20px 40px rgba(0,0,0,0.2);--transition-fast: 0.2s ease;--transition-normal: 0.3s ease;--transition-slow: 0.5s ease;} html {scroll-behavior: smooth;font-size: 16px;} body {font-family: var(--font-primary);font-weight: var(--font-weight-regular);line-height: 1.6;color: var(--text-primary);background-color: var(--white);overflow-x: hidden;} .container {max-width: 1200px;margin: 0 auto;padding: 0 var(--space-lg);} .gradient-text {background: var(--gradient-primary);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;font-weight: var(--font-weight-bold);} .highlight {color: var(--accent-cyan);font-weight: var(--font-weight-semibold);} .section-header {text-align: center;margin-bottom: var(--space-3xl);} .section-tag {display: inline-block;background: var(--gradient-secondary);color: var(--white);padding: var(--space-xs) var(--space-md);border-radius: 2rem;font-size: 0.875rem;font-weight: var(--font-weight-medium);text-transform: uppercase;letter-spacing: 0.05em;margin-bottom: var(--space-sm);} .section-title {font-size: 2.5rem;font-weight: var(--font-weight-bold);color: var(--text-primary);margin-bottom: var(--space-md);line-height: 1.2;} .section-subtitle {font-size: 1.125rem;color: var(--text-secondary);max-width: 600px;margin: 0 auto;line-height: 1.7;} .navbar {position: fixed;top: 0;width: 100%;background: rgba(255,255,255,0.95);backdrop-filter: blur(20px);border-bottom: 1px solid rgba(255,255,255,0.2);z-index: 1000;transition: all var(--transition-normal);} .nav-container {max-width: 1200px;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;padding: 6px var(--space-lg);} .nav-logo {display: flex;align-items: center;gap: var(--space-sm);} .logo-img {height: 30px;width: auto;} .logo-text-container {display: flex;flex-direction: column;align-items: flex-start;} .logo-text {font-size: 1rem;font-weight: var(--font-weight-bold);color: var(--primary-blue);line-height: 1.1;} .logo-subtitle {font-size: 0.75rem;font-weight: var(--font-weight-medium);color: var(--text-secondary);line-height: 1;margin-top: 2px;} .nav-menu {display: flex;gap: var(--space-xl);align-items: center;} .nav-link {text-decoration: none;color: var(--text-primary);font-weight: var(--font-weight-medium);transition: color var(--transition-fast);position: relative;} .nav-link:hover {color: var(--primary-blue);} .nav-link.cta-nav {background: var(--gradient-primary);color: var(--white);padding: 4px 8px;border-radius: var(--border-radius);font-size: 0.75rem;transition: all var(--transition-normal);} .nav-link.cta-nav:hover {transform: translateY(-2px);box-shadow: var(--shadow-md);} .hamburger {display: none;flex-direction: column;cursor: pointer;gap: 4px;} .bar {width: 25px;height: 3px;background: var(--text-primary);transition: var(--transition-fast);border-radius: 2px;} .hero {min-height: 100vh;display: flex;align-items: center;position: relative;overflow: hidden;background: linear-gradient(135deg,#0A0E1A 0%,#1A202C 50%,#2C5530 100%);color: var(--white);} .hero-background {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;} .hero-bg-image {width: 100%;height: 100%;object-fit: cover;opacity: 0.3;mix-blend-mode: overlay;} .hero-content {position: relative;z-index: 2;max-width: 1200px;margin: 0 auto;padding: var(--space-2xl) var(--space-lg);display: grid;grid-template-columns: 1fr 1fr;gap: var(--space-3xl);align-items: center;} .hero-title {font-size: 3.5rem;font-weight: var(--font-weight-extrabold);line-height: 1.1;margin-bottom: var(--space-lg);} .hero-subtitle {font-size: 1.25rem;line-height: 1.7;color: var(--text-light);margin-bottom: var(--space-xl);max-width: 500px;} .hero-buttons {display: flex;gap: var(--space-md);margin-bottom: var(--space-xl);} .btn-primary,.btn-secondary {display: inline-flex;align-items: center;gap: var(--space-xs);padding: 8px 16px;border-radius: var(--border-radius);font-weight: var(--font-weight-semibold);font-size: 0.85rem;text-decoration: none;transition: all var(--transition-normal);border: 2px solid transparent;} .btn-primary {background: var(--gradient-accent);color: var(--dark-bg);} .btn-primary:hover {transform: translateY(-3px);box-shadow: var(--shadow-lg);} .btn-secondary {background: linear-gradient(135deg,#FFD700 0%,#FFA500 100%);color: var(--dark-bg);border: 2px solid #FFD700;box-shadow: 0 4px 15px rgba(255,215,0,0.3);font-weight: var(--font-weight-bold);} .btn-secondary:hover {background: linear-gradient(135deg,#FFA500 0%,#FF8C00 100%);color: var(--dark-bg);transform: translateY(-3px);box-shadow: 0 8px 25px rgba(255,215,0,0.5);} .btn-tertiary {display: inline-flex;align-items: center;gap: var(--space-xs);padding: var(--space-md) var(--space-xl);border-radius: var(--border-radius);font-weight: var(--font-weight-semibold);text-decoration: none;transition: all var(--transition-normal);border: 2px solid #00D4FF;background: linear-gradient(135deg,#00D4FF 0%,#0099CC 100%);color: var(--white);box-shadow: 0 4px 15px rgba(0,212,255,0.3);} .btn-tertiary:hover {background: linear-gradient(135deg,#0099CC 0%,#007399 100%);color: var(--white);transform: translateY(-3px);box-shadow: 0 8px 25px rgba(0,212,255,0.5);} .hero-stats {display: flex;gap: var(--space-xl);} .stat {text-align: center;} .stat-number {display: block;font-size: 2rem;font-weight: var(--font-weight-bold);color: var(--secondary-gold);line-height: 1;} .stat-label {font-size: 0.875rem;color: var(--text-light);text-transform: uppercase;letter-spacing: 0.05em;} .hero-visual {display: flex;justify-content: center;align-items: center;position: relative;} .floating-cards {display: grid;grid-template-columns: repeat(2,1fr);gap: var(--space-lg);max-width: 400px;} .tech-card {background: rgba(255,255,255,0.1);backdrop-filter: blur(20px);border: 1px solid rgba(255,255,255,0.2);border-radius: var(--border-radius-lg);padding: var(--space-lg);text-align: center;transition: all var(--transition-slow);animation: float 6s ease-in-out infinite;} .tech-card:nth-child(2) {animation-delay: -2s;} .tech-card:nth-child(3) {animation-delay: -4s;} .tech-card:nth-child(4) {animation-delay: -1s;} .tech-card:hover {transform: scale(1.05) translateY(-10px);background: rgba(255,255,255,0.2);} .tech-card i {font-size: 2rem;color: var(--accent-cyan);margin-bottom: var(--space-sm);} .tech-card span {display: block;font-size: 0.875rem;font-weight: var(--font-weight-medium);color: var(--white);} @keyframes float {0%,100% {transform: translateY(0px);} 50% {transform: translateY(-20px);}} .scroll-indicator {position: absolute;bottom: var(--space-xl);left: 50%;transform: translateX(-50%);z-index: 2;} .scroll-arrow {animation: bounce 2s infinite;color: var(--white);font-size: 1.5rem;} @keyframes bounce {0%,20%,50%,80%,100% {transform: translateY(0);} 40% {transform: translateY(-10px);} 60% {transform: translateY(-5px);}} .about-section {padding: var(--space-3xl) 0;background: var(--light-bg);} .about-grid {display: grid;grid-template-columns: repeat(auto-fit,minmax(300px,1fr));gap: var(--space-xl);margin-top: var(--space-xl);} .about-card {background: var(--white);padding: var(--space-xl);border-radius: var(--border-radius-lg);box-shadow: var(--shadow-sm);text-align: center;transition: all var(--transition-normal);border: 1px solid rgba(0,0,0,0.05);} .about-card:hover {transform: translateY(-5px);box-shadow: var(--shadow-lg);} .about-icon {width: 80px;height: 80px;background: var(--gradient-primary);border-radius: 50%;display: flex;align-items: center;justify-content: center;margin: 0 auto var(--space-lg);} .about-icon i {font-size: 2rem;color: var(--white);} .about-card h3 {font-size: 1.5rem;font-weight: var(--font-weight-semibold);color: var(--text-primary);margin-bottom: var(--space-md);} .about-card p {color: var(--text-secondary);line-height: 1.7;} .solutions-section {padding: var(--space-3xl) 0;background: var(--white);} .solutions-grid {display: grid;grid-template-columns: repeat(auto-fit,minmax(280px,1fr));gap: var(--space-lg);margin-top: var(--space-xl);} .solution-card {background: var(--white);border-radius: var(--border-radius-xl);overflow: hidden;box-shadow: var(--shadow-md);transition: all var(--transition-normal);border: 1px solid rgba(0,0,0,0.05);min-height: 400px;display: flex;flex-direction: column;} .solution-card:hover {transform: translateY(-10px);box-shadow: var(--shadow-xl);} .solution-image {width: 100%;height: 200px;overflow: hidden;position: relative;background: linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);display: flex;align-items: center;justify-content: center;} .solution-image img {width: 100%;height: 100%;object-fit: contain;object-position: center;transition: transform var(--transition-slow);padding: 10px;} .solution-card:hover .solution-image img {transform: scale(1.1);} .solution-content {padding: var(--space-lg);flex: 1;display: flex;flex-direction: column;justify-content: space-between;} .solution-category {font-size: 0.875rem;font-weight: var(--font-weight-medium);color: var(--primary-blue);text-transform: uppercase;letter-spacing: 0.05em;margin-bottom: var(--space-sm);} .solution-content h3 {font-size: 1.25rem;font-weight: var(--font-weight-bold);color: var(--text-primary);margin-bottom: var(--space-sm);} .solution-content p {color: var(--text-secondary);line-height: 1.6;margin-bottom: var(--space-md);flex: 1;} .solution-tags {display: flex;flex-wrap: wrap;gap: 0.5rem;margin-bottom: var(--space-md);} .tag {background: rgba(0,102,204,0.1);color: var(--primary-blue);padding: 0.25rem 0.75rem;border-radius: var(--border-radius-full);font-size: 0.75rem;font-weight: var(--font-weight-medium);border: 1px solid rgba(0,102,204,0.2);} .solution-link {display: inline-flex;align-items: center;gap: 0.5rem;color: var(--primary-blue);text-decoration: none;font-weight: var(--font-weight-medium);transition: color var(--transition-normal);margin-top: auto;} .solution-link:hover {color: var(--accent-cyan);} .solution-link i {transition: transform var(--transition-normal);} .solution-link:hover i {transform: translateX(5px);} .solution-title {font-size: 1.25rem;font-weight: var(--font-weight-bold);color: var(--text-primary);margin-bottom: var(--space-sm);} .solution-description {color: var(--text-secondary);line-height: 1.6;margin-bottom: var(--space-md);font-size: 0.9rem;} .solution-features {display: flex;flex-wrap: wrap;gap: var(--space-xs);margin-bottom: var(--space-md);} .feature-tag {background: rgba(0,102,204,0.1);color: var(--primary-blue);padding: var(--space-xs) var(--space-sm);border-radius: var(--border-radius);font-size: 0.75rem;font-weight: var(--font-weight-medium);} .solution-link {display: inline-flex;align-items: center;gap: var(--space-xs);color: var(--primary-blue);text-decoration: none;font-weight: var(--font-weight-semibold);transition: all var(--transition-fast);} .solution-link:hover {color: var(--primary-green);transform: translateX(5px);} .tech-section {padding: var(--space-3xl) 0;background: var(--dark-bg);color: var(--white);} .tech-section .section-title {color: var(--white);} .tech-section .section-subtitle {color: var(--text-light);} .tech-grid {display: grid;grid-template-columns: repeat(auto-fit,minmax(300px,1fr));gap: var(--space-xl);margin-top: var(--space-xl);} .tech-item {background: rgba(255,255,255,0.05);backdrop-filter: blur(20px);border: 1px solid rgba(255,255,255,0.1);border-radius: var(--border-radius-lg);padding: var(--space-xl);text-align: center;transition: all var(--transition-normal);} .tech-item:hover {background: rgba(255,255,255,0.1);transform: translateY(-5px);} .tech-icon {width: 80px;height: 80px;background: var(--gradient-secondary);border-radius: 50%;display: flex;align-items: center;justify-content: center;margin: 0 auto var(--space-lg);} .tech-icon i {font-size: 2rem;color: var(--white);} .tech-item h3 {font-size: 1.25rem;font-weight: var(--font-weight-semibold);color: var(--white);margin-bottom: var(--space-md);} .tech-item p {color: var(--text-light);line-height: 1.7;} .sectors-section {padding: var(--space-3xl) 0;background: var(--light-bg);} .sectors-tabs {display: flex;justify-content: center;gap: var(--space-sm);margin: var(--space-xl) 0;} .sector-tab {padding: var(--space-md) var(--space-xl);border: none;background: var(--white);color: var(--text-secondary);border-radius: var(--border-radius);font-weight: var(--font-weight-medium);cursor: pointer;transition: all var(--transition-fast);box-shadow: var(--shadow-sm);} .sector-tab.active,.sector-tab:hover {background: var(--gradient-primary);color: var(--white);transform: translateY(-2px);} .sectors-content {margin-top: var(--space-xl);} .sector-panel {display: none;} .sector-panel.active {display: block;animation: fadeInUp 0.5s ease;} .sector-grid {display: grid;grid-template-columns: repeat(auto-fit,minmax(300px,1fr));gap: var(--space-xl);} .sector-card {background: var(--white);padding: var(--space-xl);border-radius: var(--border-radius-lg);box-shadow: var(--shadow-sm);transition: all var(--transition-normal);border-left: 4px solid var(--primary-blue);} .sector-card:hover {transform: translateY(-5px);box-shadow: var(--shadow-lg);border-left-color: var(--primary-green);} .sector-icon {width: 60px;height: 60px;background: var(--gradient-primary);border-radius: 50%;display: flex;align-items: center;justify-content: center;margin-bottom: var(--space-lg);} .sector-icon i {font-size: 1.5rem;color: var(--white);} .sector-card h3 {font-size: 1.25rem;font-weight: var(--font-weight-semibold);color: var(--text-primary);margin-bottom: var(--space-md);} .sector-card p {color: var(--text-secondary);line-height: 1.7;margin-bottom: var(--space-md);} .sector-card ul {list-style: none;} .sector-card li {color: var(--text-secondary);padding: var(--space-xs) 0;position: relative;padding-left: var(--space-md);} .sector-card li::before {content: "✓";position: absolute;left: 0;color: var(--primary-green);font-weight: var(--font-weight-bold);} .sector {background-color: #f8f9fa;padding: 2rem;border-radius: 8px;text-align: center;transition: transform 0.3s ease,box-shadow 0.3s ease;} .sector:hover {transform: translateY(-5px);box-shadow: 0 10px 25px rgba(0,0,0,0.1);} .sector h3 {color: #2c5530;margin-bottom: 1rem;} .carrusel {text-align: center;padding: 4rem 2rem;background-color: #f8f9fa;} .carrusel h2 {margin-bottom: 3rem;color: #2c5530;} .slider {display: flex;overflow-x: auto;scroll-snap-type: x mandatory;gap: 2rem;padding: 1rem 0;} .slide {flex: 0 0 auto;width: 250px;scroll-snap-align: center;transition: transform 0.3s ease;} .slide:hover {transform: scale(1.05);} .contact-section {padding: var(--space-3xl) 0;background: var(--dark-bg);color: var(--white);} .contact-grid {display: grid;grid-template-columns: 1fr 1fr;gap: var(--space-3xl);align-items: start;} .contact-info h2 {font-size: 2.5rem;font-weight: var(--font-weight-bold);margin-bottom: var(--space-lg);line-height: 1.2;} .contact-info p {font-size: 1.125rem;color: var(--text-light);margin-bottom: var(--space-xl);line-height: 1.7;} .contact-methods {display: flex;flex-direction: column;gap: var(--space-md);} .contact-method {display: flex;align-items: center;gap: var(--space-md);color: var(--text-light);} .contact-method i {width: 20px;color: var(--accent-cyan);} .contact-form {background: rgba(255,255,255,0.05);backdrop-filter: blur(20px);border: 1px solid rgba(255,255,255,0.1);border-radius: var(--border-radius-xl);padding: var(--space-xl);} .form-group {margin-bottom: var(--space-lg);} .form-group label {display: block;margin-bottom: var(--space-xs);font-weight: var(--font-weight-medium);color: var(--white);} .form-group input,.form-group select,.form-group textarea {width: 100%;padding: var(--space-md);border: 1px solid rgba(255,255,255,0.2);border-radius: var(--border-radius);background: rgba(255,255,255,0.1);color: var(--white);font-family: var(--font-primary);transition: all var(--transition-fast);} .form-group input::placeholder,.form-group textarea::placeholder {color: var(--text-light);} .form-group input:focus,.form-group select:focus,.form-group textarea:focus {outline: none;border-color: var(--accent-cyan);background: rgba(255,255,255,0.15);} .form-group select {cursor: pointer;appearance: none;background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat: no-repeat;background-position: right 1rem center;background-size: 1rem;padding-right: 3rem;} .form-group select option {background-color: var(--dark-bg);color: var(--white);padding: 0.5rem;} .form-group select optgroup {background-color: var(--primary-blue);color: var(--white);font-weight: var(--font-weight-bold);font-style: normal;} .btn-submit {width: 100%;padding: var(--space-md);background: var(--gradient-accent);color: var(--dark-bg);border: none;border-radius: var(--border-radius);font-weight: var(--font-weight-semibold);font-size: 1rem;cursor: pointer;transition: all var(--transition-normal);display: flex;align-items: center;justify-content: center;gap: var(--space-xs);} .btn-submit:hover {transform: translateY(-2px);box-shadow: var(--shadow-lg);} .footer {background: #000;color: var(--white);padding: var(--space-3xl) 0 var(--space-lg);} .footer-content {display: grid;grid-template-columns: repeat(auto-fit,minmax(250px,1fr));gap: var(--space-xl);margin-bottom: var(--space-xl);} .footer-section h3 {font-size: 1.125rem;font-weight: var(--font-weight-semibold);margin-bottom: var(--space-lg);color: var(--white);} .footer-section ul {list-style: none;} .footer-section ul li {margin-bottom: var(--space-sm);} .footer-section ul li a {color: var(--text-light);text-decoration: none;transition: color var(--transition-fast);} .footer-section ul li a:hover {color: var(--accent-cyan);} .footer-logo {height: 40px;margin-bottom: var(--space-md);} .social-links {display: flex;gap: var(--space-md);margin-top: var(--space-lg);} .social-links a {width: 40px;height: 40px;background: rgba(255,255,255,0.1);border-radius: 50%;display: flex;align-items: center;justify-content: center;color: var(--text-light);transition: all var(--transition-normal);} .social-links a:hover {background: var(--primary-blue);color: var(--white);transform: translateY(-2px);} .footer-bottom {padding-top: var(--space-lg);border-top: 1px solid rgba(255,255,255,0.1);text-align: center;color: var(--text-light);} @keyframes fadeInUp {from {opacity: 0;transform: translateY(30px);} to {opacity: 1;transform: translateY(0);}} .fade-in-up {animation: fadeInUp 0.6s ease forwards;} @media (max-width: 1024px) {.hero-content {grid-template-columns: 1fr;text-align: center;} .hero-title {font-size: 3rem;} .contact-grid {grid-template-columns: 1fr;gap: var(--space-xl);}} @media (max-width: 768px) {.nav-menu {position: fixed;left: -100%;top: 70px;flex-direction: column;background-color: rgba(255,255,255,0.98);backdrop-filter: blur(20px);width: 100%;text-align: center;transition: 0.3s;box-shadow: var(--shadow-lg);padding: var(--space-xl) 0;} .nav-menu.active {left: 0;} .hamburger {display: flex;} .hamburger.active .bar:nth-child(2) {opacity: 0;} .hamburger.active .bar:nth-child(1) {transform: translateY(7px) rotate(45deg);} .hamburger.active .bar:nth-child(3) {transform: translateY(-7px) rotate(-45deg);} .hero-title {font-size: 2.5rem;} .hero-buttons {flex-direction: column;align-items: center;} .hero-stats {justify-content: center;flex-wrap: wrap;gap: var(--space-lg);} .section-title {font-size: 2rem;} .floating-cards {grid-template-columns: 1fr;max-width: 250px;} .sectors-tabs {flex-direction: column;align-items: center;}} @media (max-width: 480px) {.container {padding: 0 var(--space-sm);} .hero-title {font-size: 2rem;} .section-title {font-size: 1.75rem;} .solutions-grid,.about-grid,.tech-grid,.sector-grid {grid-template-columns: 1fr;} .hero-content {padding: var(--space-lg);}} .solution-image img,.hero-bg-image {content-visibility: auto;contain-intrinsic-size: 200px;} @media (prefers-reduced-motion: reduce) {*,*::before,*::after {animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important;} .scroll-arrow {animation: none;} .tech-card {animation: none;}} button:focus,input:focus,select:focus,textarea:focus,a:focus {outline: 2px solid var(--accent-cyan);outline-offset: 2px;} @media print {.navbar,.hero-visual,.contact-section,.footer {display: none;} .hero {min-height: auto;padding: var(--space-lg);} body {background: white;color: black;}} .client-access-section {background: linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%);padding: var(--space-3xl) 0;position: relative;overflow: hidden;} .client-access-section::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(0,102,204,0.05)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');opacity: 0.3;z-index: 1;} .client-access-section .container {position: relative;z-index: 2;} .access-grid {display: grid;grid-template-columns: repeat(auto-fit,minmax(350px,1fr));gap: var(--space-xl);margin-top: var(--space-2xl);} .access-card {background: white;border-radius: var(--border-radius-lg);padding: var(--space-xl);box-shadow: var(--shadow-lg);border: 1px solid rgba(0,102,204,0.1);transition: all 0.3s ease;position: relative;overflow: hidden;} .access-card::before {content: '';position: absolute;top: 0;left: 0;right: 0;height: 4px;background: var(--gradient-primary);transform: scaleX(0);transform-origin: left;transition: transform 0.3s ease;} .access-card:hover {transform: translateY(-8px);box-shadow: 0 20px 40px rgba(0,102,204,0.15);} .access-card:hover::before {transform: scaleX(1);} .access-icon {width: 80px;height: 80px;background: var(--gradient-primary);border-radius: 50%;display: flex;align-items: center;justify-content: center;margin: 0 auto var(--space-lg);position: relative;} .access-icon::after {content: '';position: absolute;inset: -4px;background: conic-gradient(from 0deg,transparent,var(--primary-blue),transparent);border-radius: 50%;z-index: -1;animation: rotate 3s linear infinite;opacity: 0;transition: opacity 0.3s ease;} .access-card:hover .access-icon::after {opacity: 1;} @keyframes rotate {from {transform: rotate(0deg);} to {transform: rotate(360deg);}} .access-icon i {font-size: 2rem;color: white;} .access-card h3 {font-size: 1.5rem;font-weight: var(--font-weight-bold);color: var(--text-primary);margin-bottom: var(--space-md);text-align: center;} .access-card p {color: var(--text-secondary);text-align: center;margin-bottom: var(--space-lg);line-height: 1.6;} .access-features {margin-bottom: var(--space-xl);} .access-features ul {list-style: none;} .access-features li {display: flex;align-items: center;gap: var(--space-sm);padding: var(--space-xs) 0;color: var(--text-secondary);font-size: 0.95rem;} .access-features li i {color: var(--primary-green);font-size: 0.9rem;width: 16px;} .btn-access {width: 100%;padding: var(--space-md) var(--space-lg);background: var(--gradient-primary);color: white;border: none;border-radius: var(--border-radius);font-weight: var(--font-weight-semibold);font-size: 1rem;cursor: pointer;transition: all 0.3s ease;display: flex;align-items: center;justify-content: center;gap: var(--space-sm);position: relative;overflow: hidden;} .btn-access::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: left 0.5s ease;} .btn-access:hover::before {left: 100%;} .btn-access:hover {transform: translateY(-2px);box-shadow: 0 8px 25px rgba(0,102,204,0.3);} .btn-access:active {transform: translateY(0);} .support-info {margin-top: var(--space-3xl);text-align: center;} .support-card {background: white;border-radius: var(--border-radius-lg);padding: var(--space-xl);box-shadow: var(--shadow-md);border: 2px solid var(--secondary-gold);display: inline-block;max-width: 500px;} .support-card h4 {color: var(--text-primary);margin-bottom: var(--space-md);font-size: 1.25rem;display: flex;align-items: center;justify-content: center;gap: var(--space-sm);} .support-card h4 i {color: var(--secondary-gold);} .support-card p {color: var(--text-secondary);margin-bottom: var(--space-lg);} .support-contacts {display: flex;flex-direction: column;gap: var(--space-sm);} .support-contacts span {display: flex;align-items: center;justify-content: center;gap: var(--space-sm);color: var(--text-primary);font-weight: var(--font-weight-medium);} .support-contacts i {color: var(--primary-blue);} .nav-link.client-access {background: var(--gradient-secondary);color: white !important;padding: 4px 8px;border-radius: var(--border-radius);font-weight: var(--font-weight-semibold);font-size: 0.75rem;transition: all 0.3s ease;} .nav-link.client-access:hover {transform: translateY(-2px);box-shadow: var(--shadow-md);} @media (max-width: 768px) {.access-grid {grid-template-columns: 1fr;gap: var(--space-lg);} .access-card {padding: var(--space-lg);} .support-contacts {align-items: center;} .client-access-section {padding: var(--space-2xl) 0;}} .cyber-security-card {border: 2px solid #FF6B35;background: linear-gradient(135deg,rgba(255,107,53,0.05) 0%,rgba(255,107,53,0.1) 100%);position: relative;overflow: hidden;} .cyber-security-card::before {content: '';position: absolute;top: 0;left: 0;right: 0;height: 4px;background: linear-gradient(90deg,#FF6B35,#FF8C42,#FF6B35);animation: securityPulse 3s ease-in-out infinite;} @keyframes securityPulse {0%,100% {opacity: 0.7;} 50% {opacity: 1;}} .cyber-security-visual {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 200px;background: linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);position: relative;overflow: hidden;} .security-shield {font-size: 4rem;color: #FF6B35;margin-bottom: 1rem;animation: shieldGlow 2s ease-in-out infinite alternate;} @keyframes shieldGlow {from {text-shadow: 0 0 20px rgba(255,107,53,0.5);transform: scale(1);} to {text-shadow: 0 0 30px rgba(255,107,53,0.8);transform: scale(1.05);}} .security-elements {display: flex;gap: 15px;position: absolute;bottom: 20px;} .security-dot {width: 8px;height: 8px;background: #FF6B35;border-radius: 50%;animation: securityBlink 1.5s ease-in-out infinite;} .security-dot:nth-child(2) {animation-delay: 0.5s;} .security-dot:nth-child(3) {animation-delay: 1s;} @keyframes securityBlink {0%,100% {opacity: 0.3;} 50% {opacity: 1;}} .partner-badge {background: linear-gradient(135deg,#FF6B35,#FF8C42);color: white;padding: 4px 12px;border-radius: 20px;font-size: 0.8rem;font-weight: bold;display: inline-block;margin-bottom: 8px;text-shadow: 0 1px 2px rgba(0,0,0,0.2);} .cyber-link {background: linear-gradient(135deg,#FF6B35,#FF8C42) !important;color: white !important;border: none !important;} .cyber-link:hover {background: linear-gradient(135deg,#e55a2b,#e57835) !important;transform: translateY(-2px);box-shadow: 0 8px 25px rgba(255,107,53,0.3);} .cyber-link i {color: white;} .cyber-security-card:hover {transform: translateY(-5px);box-shadow: 0 15px 40px rgba(255,107,53,0.2);} .cyber-security-card:hover .security-shield {animation-duration: 1s;} .cyber-security-card:hover .security-dot {animation-duration: 0.8s;} .whatsapp-chat-cta {margin: 2rem 0;display: flex;justify-content: center;} .btn-whatsapp-chat {display: inline-flex;align-items: center;gap: 1rem;padding: 1rem 2rem;background: linear-gradient(135deg,#25D366 0%,#128C7E 100%);color: white;text-decoration: none;border-radius: 50px;box-shadow: 0 8px 25px rgba(37,211,102,0.3);transition: all 0.3s ease;position: relative;overflow: hidden;border: none;cursor: pointer;font-family: var(--font-primary);font-weight: var(--font-weight-semibold);min-width: 320px;justify-content: space-between;} .btn-whatsapp-chat:hover {transform: translateY(-2px);box-shadow: 0 12px 35px rgba(37,211,102,0.4);color: white;text-decoration: none;} .btn-whatsapp-chat:active {transform: translateY(0);} .btn-whatsapp-chat .chat-icon-wrapper {position: relative;width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;background: rgba(255,255,255,0.1);border-radius: 50%;flex-shrink: 0;} .btn-whatsapp-chat .chat-icon-wrapper i {font-size: 20px;z-index: 2;position: relative;} .btn-whatsapp-chat .chat-pulse {position: absolute;top: -2px;left: -2px;right: -2px;bottom: -2px;border: 2px solid rgba(255,255,255,0.4);border-radius: 50%;animation: whatsapp-pulse 2s infinite;} @keyframes whatsapp-pulse {0% {transform: scale(0.95);opacity: 1;} 70% {transform: scale(1.1);opacity: 0.4;} 100% {transform: scale(1.15);opacity: 0;}} .btn-whatsapp-chat .chat-text {display: flex;flex-direction: column;align-items: flex-start;flex-grow: 1;margin-left: 0.5rem;} .btn-whatsapp-chat .chat-title {font-size: 1.1rem;font-weight: var(--font-weight-bold);margin-bottom: 0.2rem;line-height: 1.2;} .btn-whatsapp-chat .chat-subtitle {font-size: 0.85rem;opacity: 0.9;font-weight: var(--font-weight-regular);line-height: 1.2;} .btn-whatsapp-chat .chat-arrow {font-size: 16px;opacity: 0.8;transition: transform 0.3s ease;flex-shrink: 0;} .btn-whatsapp-chat:hover .chat-arrow {transform: translateX(5px);opacity: 1;} @media (max-width: 768px) {.whatsapp-chat-cta {margin: 1.5rem 0;} .btn-whatsapp-chat {padding: 0.875rem 1.5rem;min-width: 280px;gap: 0.75rem;} .btn-whatsapp-chat .chat-icon-wrapper {width: 35px;height: 35px;} .btn-whatsapp-chat .chat-icon-wrapper i {font-size: 18px;} .btn-whatsapp-chat .chat-title {font-size: 1rem;} .btn-whatsapp-chat .chat-subtitle {font-size: 0.8rem;}} @media (max-width: 480px) {.btn-whatsapp-chat {min-width: 260px;padding: 0.75rem 1.25rem;} .btn-whatsapp-chat .chat-title {font-size: 0.95rem;} .btn-whatsapp-chat .chat-subtitle {font-size: 0.75rem;}}