:root{--primary-color: #2563eb;--primary-dark: #1d4ed8;--primary-light: #3b82f6;--secondary-color: #64748b;--accent-color: #10b981;--warning-color: #f59e0b;--error-color: #ef4444;--gradient-primary: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);--gradient-secondary: linear-gradient(135deg, #64748b 0%, #475569 100%);--gradient-hero: linear-gradient(135deg, #1e40af 0%, #3730a3 50%, #581c87 100%);--white: #ffffff;--gray-50: #f8fafc;--gray-100: #f1f5f9;--gray-200: #e2e8f0;--gray-300: #cbd5e1;--gray-400: #94a3b8;--gray-500: #64748b;--gray-600: #475569;--gray-700: #334155;--gray-800: #1e293b;--gray-900: #0f172a;--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;--font-size-xs: 0.75rem;--font-size-sm: 0.875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.25rem;--font-size-5xl: 3rem;--spacing-xs: 0.25rem;--spacing-sm: 0.5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--spacing-3xl: 4rem;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);--shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--border-radius-sm: 0.375rem;--border-radius-md: 0.5rem;--border-radius-lg: 0.75rem;--border-radius-xl: 1rem;--transition-fast: 150ms ease-in-out;--transition-base: 250ms ease-in-out;--transition-slow: 500ms ease-in-out} *{box-sizing: border-box;margin: 0;padding: 0} html{scroll-behavior: smooth} body{font-family: var(--font-family);font-size: var(--font-size-base);line-height: 1.6;color: var(--gray-800);background-color: var(--gray-50);overflow-x: hidden} .loading-screen{position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background: var(--gradient-hero);display: flex;align-items: center;justify-content: center;z-index: 9999;transition: opacity var(--transition-slow), visibility var(--transition-slow)} .loading-screen.fade-out{opacity: 0;visibility: hidden} .loading-content{text-align: center;color: var(--white)} .loading-content .logo{margin-bottom: var(--spacing-xl)} .loading-content .logo-icon{font-size: 4rem;display: block;margin-bottom: var(--spacing-md)} .loading-content .logo-text{font-size: var(--font-size-3xl);font-weight: 700;display: block} .loading-spinner{width: 40px;height: 40px;border: 3px solid rgba(255, 255, 255, 0.3);border-top: 3px solid var(--white);border-radius: 50%;animation: spin 1s linear infinite;margin: var(--spacing-xl) auto} @keyframes spin{0%{transform: rotate(0deg)} 100%{transform: rotate(360deg)} } .loading-content p{font-size: var(--font-size-lg);opacity: 0.9;margin-top: var(--spacing-md)} .main-content{opacity: 1;transition: opacity var(--transition-slow)} .main-content.hidden{opacity: 0;visibility: hidden;position: absolute} .container{max-width: 1200px;margin: 0 auto;padding: 0 var(--spacing-md)} @media (min-width: 768px){.container{padding: 0 var(--spacing-xl)} } .header{background: var(--white);border-bottom: 1px solid var(--gray-200);position: sticky;top: 0;z-index: 1000;backdrop-filter: blur(10px);background: rgba(255, 255, 255, 0.95)} .header-content{display: flex;align-items: center;justify-content: space-between;padding: var(--spacing-md) 0} .logo{display: flex;align-items: center;gap: var(--spacing-sm);font-weight: 700;color: var(--gray-800);text-decoration: none} .logo-icon{font-size: var(--font-size-2xl)} .logo-text{font-size: var(--font-size-xl)} .logo-subtitle{font-size: var(--font-size-sm);color: var(--gray-500);font-weight: 500} .header-status{display: flex;align-items: center;gap: var(--spacing-md)} .status-indicator{display: flex;align-items: center;gap: var(--spacing-xs);font-size: var(--font-size-sm);color: var(--gray-600)} .status-dot{width: 8px;height: 8px;border-radius: 50%;background: var(--accent-color);animation: pulse 2s infinite} @keyframes pulse{0%, 100%{opacity: 1} 50%{opacity: 0.5} } .hero{background: var(--gradient-hero);color: var(--white);padding: var(--spacing-3xl) 0;min-height: 80vh;display: flex;align-items: center;position: relative;overflow: hidden} .hero::before{content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: url('data:image/svg+xml,<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(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');opacity: 0.3} .hero .container{display: grid;grid-template-columns: 1fr;gap: var(--spacing-3xl);align-items: center;position: relative;z-index: 1} @media (min-width: 1024px){.hero .container{grid-template-columns: 1.2fr 0.8fr} } .construction-badge{display: inline-flex;align-items: center;gap: var(--spacing-sm);background: rgba(255, 255, 255, 0.1);backdrop-filter: blur(10px);padding: var(--spacing-sm) var(--spacing-md);border-radius: var(--border-radius-lg);font-size: var(--font-size-sm);font-weight: 500;margin-bottom: var(--spacing-xl);border: 1px solid rgba(255, 255, 255, 0.2)} .badge-icon{font-size: var(--font-size-base)} .hero-title{font-size: var(--font-size-4xl);font-weight: 700;line-height: 1.2;margin-bottom: var(--spacing-lg)} @media (min-width: 768px){.hero-title{font-size: var(--font-size-5xl)} } .gradient-text{background: linear-gradient(135deg, #a855f7 0%, #ec4899 50%, #f59e0b 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text} .hero-subtitle{font-size: var(--font-size-lg);line-height: 1.7;opacity: 0.9;margin-bottom: var(--spacing-2xl);max-width: 600px} .hero-actions{display: flex;flex-wrap: wrap;gap: var(--spacing-md);margin-bottom: var(--spacing-2xl)} .system-info{display: grid;grid-template-columns: 1fr;gap: var(--spacing-sm);opacity: 0.8} @media (min-width: 768px){.system-info{grid-template-columns: repeat(3, 1fr)} } .info-item{display: flex;flex-direction: column;gap: var(--spacing-xs)} .info-label{font-size: var(--font-size-xs);text-transform: uppercase;letter-spacing: 0.05em;opacity: 0.7} .info-value{font-size: var(--font-size-sm);font-weight: 600} .hero-visual{display: flex;justify-content: center;align-items: center} .architecture-diagram{display: flex;flex-direction: column;align-items: center;gap: var(--spacing-md)} .diagram-node{display: flex;flex-direction: column;align-items: center;gap: var(--spacing-xs);padding: var(--spacing-lg);background: rgba(255, 255, 255, 0.1);backdrop-filter: blur(10px);border-radius: var(--border-radius-lg);border: 1px solid rgba(255, 255, 255, 0.2);min-width: 120px;transition: all var(--transition-base)} .diagram-node:hover{transform: translateY(-4px);background: rgba(255, 255, 255, 0.15)} .node-icon{font-size: var(--font-size-2xl)} .node-label{font-size: var(--font-size-sm);font-weight: 500} .diagram-arrow{font-size: var(--font-size-xl);opacity: 0.7} .btn{display: inline-flex;align-items: center;gap: var(--spacing-sm);padding: var(--spacing-md) var(--spacing-lg);border-radius: var(--border-radius-md);font-size: var(--font-size-base);font-weight: 500;text-decoration: none;border: none;cursor: pointer;transition: all var(--transition-base);position: relative;overflow: hidden} .btn::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} .btn:hover::before{left: 100%} .btn-primary{background: var(--white);color: var(--primary-color);box-shadow: var(--shadow-md)} .btn-primary:hover{background: var(--gray-50);transform: translateY(-2px);box-shadow: var(--shadow-lg)} .btn-secondary{background: rgba(255, 255, 255, 0.1);color: var(--white);border: 1px solid rgba(255, 255, 255, 0.3);backdrop-filter: blur(10px)} .btn-secondary:hover{background: rgba(255, 255, 255, 0.2);transform: translateY(-2px)} .btn-outline{background: transparent;color: var(--primary-color);border: 2px solid var(--primary-color)} .btn-outline:hover{background: var(--primary-color);color: var(--white);transform: translateY(-2px)} .btn-sm{padding: var(--spacing-sm) var(--spacing-md);font-size: var(--font-size-sm)} .btn-outline-white{background: rgba(255, 255, 255, 0.1);color: var(--white);border: 2px solid rgba(255, 255, 255, 0.3);backdrop-filter: blur(10px)} .btn-outline-white:hover{background: rgba(255, 255, 255, 0.2);border-color: rgba(255, 255, 255, 0.5);transform: translateY(-2px)} .btn-lg{padding: var(--spacing-lg) var(--spacing-2xl);font-size: var(--font-size-lg)} .platform-section{padding: var(--spacing-3xl) 0;background: var(--white)} .platform-hero{margin-bottom: var(--spacing-3xl)} .platform-stats{display: grid;grid-template-columns: repeat(2, 1fr);gap: var(--spacing-xl);max-width: 800px;margin: 0 auto} @media (min-width: 768px){.platform-stats{grid-template-columns: repeat(4, 1fr)} } .stat-item{text-align: center;padding: var(--spacing-xl);background: var(--gray-50);border-radius: var(--border-radius-lg);border: 1px solid var(--gray-200)} .stat-number{display: block;font-size: var(--font-size-3xl);font-weight: 700;color: var(--primary-color);margin-bottom: var(--spacing-sm)} .stat-label{font-size: var(--font-size-sm);color: var(--gray-600);font-weight: 500} .platform-features{display: grid;grid-template-columns: 1fr;gap: var(--spacing-xl);margin-bottom: var(--spacing-3xl)} @media (min-width: 1024px){.platform-features{grid-template-columns: repeat(3, 1fr)} } .feature-card{background: var(--white);border-radius: var(--border-radius-xl);padding: var(--spacing-2xl);box-shadow: var(--shadow-base);border: 1px solid var(--gray-200);transition: all var(--transition-base);position: relative;overflow: hidden} .feature-card::before{content: '';position: absolute;top: 0;left: 0;right: 0;height: 4px;background: var(--gradient-secondary)} .feature-card.primary::before{background: var(--gradient-primary)} .feature-card:hover{transform: translateY(-8px);box-shadow: var(--shadow-xl)} .feature-icon{font-size: var(--font-size-4xl);margin-bottom: var(--spacing-lg)} .feature-card h3{font-size: var(--font-size-xl);font-weight: 600;margin-bottom: var(--spacing-md);color: var(--gray-800)} .feature-card p{color: var(--gray-600);line-height: 1.6;margin-bottom: var(--spacing-lg)} .feature-card ul{list-style: none;margin: 0} .feature-card li{padding: var(--spacing-xs) 0;color: var(--gray-700);font-size: var(--font-size-sm)} .feature-card li::before{content: '✨';margin-right: var(--spacing-sm)} .platform-workflow{background: var(--gray-50);border-radius: var(--border-radius-xl);padding: var(--spacing-2xl);text-align: center} .workflow-title{font-size: var(--font-size-2xl);font-weight: 600;margin-bottom: var(--spacing-2xl);color: var(--gray-800)} .workflow-steps{display: flex;flex-direction: column;align-items: center;gap: var(--spacing-lg);max-width: 800px;margin: 0 auto} @media (min-width: 768px){.workflow-steps{flex-direction: row;justify-content: space-between} } .workflow-step{display: flex;flex-direction: column;align-items: center;text-align: center;flex: 1;max-width: 200px} .step-number{width: 60px;height: 60px;border-radius: 50%;background: var(--gradient-primary);color: var(--white);display: flex;align-items: center;justify-content: center;font-size: var(--font-size-xl);font-weight: 700;margin-bottom: var(--spacing-md)} .step-content h4{font-size: var(--font-size-lg);font-weight: 600;margin-bottom: var(--spacing-sm);color: var(--gray-800)} .step-content p{color: var(--gray-600);font-size: var(--font-size-sm);line-height: 1.5} .workflow-arrow{font-size: var(--font-size-2xl);color: var(--primary-color);display: none} @media (min-width: 768px){.workflow-arrow{display: block;margin: 0 var(--spacing-md);transform: translateY(-10px)} } .demo-section{padding: var(--spacing-3xl) 0;background: var(--gray-50)} .demo-grid{display: grid;grid-template-columns: 1fr;gap: var(--spacing-3xl);align-items: center} @media (min-width: 1024px){.demo-grid{grid-template-columns: 1.2fr 0.8fr} } .demo-content h2{font-size: var(--font-size-3xl);font-weight: 700;margin-bottom: var(--spacing-lg);color: var(--gray-800)} .demo-content p{font-size: var(--font-size-lg);color: var(--gray-600);line-height: 1.7;margin-bottom: var(--spacing-2xl)} .demo-features{margin-bottom: var(--spacing-2xl)} .demo-feature{display: flex;align-items: center;gap: var(--spacing-md);margin-bottom: var(--spacing-md);font-size: var(--font-size-base);color: var(--gray-700)} .feature-check{font-size: var(--font-size-lg)} .cta-buttons{display: flex;flex-wrap: wrap;gap: var(--spacing-md)} .demo-form-container{display: flex;justify-content: center} .demo-form{background: var(--white);border-radius: var(--border-radius-xl);padding: var(--spacing-2xl);box-shadow: var(--shadow-lg);border: 1px solid var(--gray-200);width: 100%;max-width: 400px} .demo-form h3{font-size: var(--font-size-xl);font-weight: 600;margin-bottom: var(--spacing-lg);text-align: center;color: var(--gray-800)} .quick-access-grid{display: grid;grid-template-columns: 1fr 1fr;gap: var(--spacing-md)} .access-btn{background: var(--white);border: 2px solid var(--gray-200);border-radius: var(--border-radius-lg);padding: var(--spacing-lg);cursor: pointer;transition: all var(--transition-base);text-align: center;display: flex;flex-direction: column;align-items: center;gap: var(--spacing-sm)} .access-btn:hover{transform: translateY(-4px);box-shadow: var(--shadow-md);border-color: var(--primary-color)} .access-icon{font-size: var(--font-size-2xl);margin-bottom: var(--spacing-sm)} .access-content h4{font-size: var(--font-size-base);font-weight: 600;margin-bottom: var(--spacing-xs);color: var(--gray-800)} .access-content p{font-size: var(--font-size-xs);color: var(--gray-600);margin: 0} .login-btn:hover{border-color: var(--primary-color);background: rgba(37, 99, 235, 0.05)} .register-btn:hover{border-color: var(--accent-color);background: rgba(16, 185, 129, 0.05)} .partner-btn:hover{border-color: var(--warning-color);background: rgba(245, 158, 11, 0.05)} .support-btn:hover{border-color: var(--secondary-color);background: rgba(100, 116, 139, 0.05)} .section-title{display: flex;align-items: center;justify-content: center;gap: var(--spacing-md);font-size: var(--font-size-3xl);font-weight: 700;color: var(--gray-800);margin-bottom: var(--spacing-md)} .section-icon{font-size: var(--font-size-2xl)} .section-subtitle{font-size: var(--font-size-lg);color: var(--gray-600);max-width: 600px;margin: 0 auto} .forms-section{padding: var(--spacing-3xl) 0;background: var(--white)} .forms-grid{display: grid;grid-template-columns: 1fr;gap: var(--spacing-xl);margin-bottom: var(--spacing-2xl)} @media (min-width: 768px){.forms-grid{grid-template-columns: repeat(2, 1fr)} } @media (min-width: 1024px){.forms-grid{grid-template-columns: repeat(3, 1fr)} } .form-card{background: var(--white);border-radius: var(--border-radius-xl);padding: var(--spacing-xl);box-shadow: var(--shadow-base);border: 1px solid var(--gray-200);transition: all var(--transition-base);position: relative;overflow: hidden} .form-card::before{content: '';position: absolute;top: 0;left: 0;right: 0;height: 4px;background: var(--gradient-primary)} .form-card:hover{transform: translateY(-4px);box-shadow: var(--shadow-lg)} .form-card.loading-card{animation: pulse-loading 2s infinite} @keyframes pulse-loading{0%, 100%{opacity: 1} 50%{opacity: 0.7} } .card-header{display: flex;align-items: flex-start;gap: var(--spacing-md);margin-bottom: var(--spacing-lg)} .card-icon{font-size: var(--font-size-2xl);flex-shrink: 0} .loading-icon{animation: spin 2s linear infinite} .card-header h3{font-size: var(--font-size-xl);font-weight: 600;color: var(--gray-800);margin: 0} .card-content{color: var(--gray-600);line-height: 1.6;margin-bottom: var(--spacing-lg)} .card-actions{display: flex;gap: var(--spacing-sm)} .forms-actions{display: flex;justify-content: center;gap: var(--spacing-md)} .access-section{padding: var(--spacing-3xl) 0;background: var(--gray-50)} .access-grid{display: grid;grid-template-columns: 1fr;gap: var(--spacing-xl)} @media (min-width: 1024px){.access-grid{grid-template-columns: repeat(3, 1fr)} } .access-card{background: var(--white);border-radius: var(--border-radius-xl);padding: var(--spacing-xl);box-shadow: var(--shadow-base);border: 1px solid var(--gray-200);transition: all var(--transition-base)} .access-card:hover{transform: translateY(-4px);box-shadow: var(--shadow-lg)} .access-card .card-header{align-items: center;margin-bottom: var(--spacing-lg)} .access-card .card-header h3{flex: 1} .status-badge{padding: var(--spacing-xs) var(--spacing-sm);border-radius: var(--border-radius-sm);font-size: var(--font-size-xs);font-weight: 600;text-transform: uppercase;letter-spacing: 0.05em} .status-badge.active{background: rgba(16, 185, 129, 0.1);color: var(--accent-color)} .access-card ul{list-style: none;margin: var(--spacing-md) 0} .access-card li{padding: var(--spacing-xs) 0;color: var(--gray-600);font-size: var(--font-size-sm)} .access-card li::before{content: '✓';color: var(--accent-color);font-weight: 600;margin-right: var(--spacing-sm)} .tech-section{padding: var(--spacing-3xl) 0;background: var(--white)} .tech-grid{display: grid;grid-template-columns: 1fr;gap: var(--spacing-xl)} @media (min-width: 768px){.tech-grid{grid-template-columns: repeat(2, 1fr)} } @media (min-width: 1024px){.tech-grid{grid-template-columns: repeat(4, 1fr)} } .tech-card{text-align: center;padding: var(--spacing-xl);border-radius: var(--border-radius-lg);background: var(--gray-50);transition: all var(--transition-base)} .tech-card:hover{background: var(--white);box-shadow: var(--shadow-md);transform: translateY(-4px)} .tech-icon{font-size: var(--font-size-4xl);margin-bottom: var(--spacing-lg)} .tech-card h3{font-size: var(--font-size-xl);font-weight: 600;margin-bottom: var(--spacing-md);color: var(--gray-800)} .tech-card p{color: var(--gray-600);line-height: 1.6} .status-section{padding: var(--spacing-2xl) 0;background: var(--gray-800);color: var(--white)} .status-grid{display: grid;grid-template-columns: 1fr;gap: var(--spacing-lg)} @media (min-width: 768px){.status-grid{grid-template-columns: repeat(2, 1fr)} } @media (min-width: 1024px){.status-grid{grid-template-columns: repeat(4, 1fr)} } .status-item{display: flex;align-items: center;gap: var(--spacing-md)} .status-item .status-indicator{width: 12px;height: 12px;border-radius: 50%;flex-shrink: 0} .status-item .status-indicator.active{background: var(--accent-color);box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3)} .status-content h4{font-size: var(--font-size-base);font-weight: 600;margin-bottom: var(--spacing-xs)} .status-content p{font-size: var(--font-size-sm);opacity: 0.8} .footer{background: var(--gray-900);color: var(--white);padding: var(--spacing-3xl) 0 var(--spacing-xl) 0} .footer-content{display: grid;grid-template-columns: 1fr;gap: var(--spacing-2xl);margin-bottom: var(--spacing-2xl)} @media (min-width: 768px){.footer-content{grid-template-columns: 1fr 1fr} } .footer-brand p{margin-top: var(--spacing-md);color: var(--gray-400)} .footer-links{display: grid;grid-template-columns: 1fr;gap: var(--spacing-xl)} @media (min-width: 768px){.footer-links{grid-template-columns: repeat(2, 1fr)} } .footer-section h4{font-size: var(--font-size-lg);font-weight: 600;margin-bottom: var(--spacing-md)} .footer-section ul{list-style: none} .footer-section li{margin-bottom: var(--spacing-sm)} .footer-section a{color: var(--gray-400);text-decoration: none;transition: color var(--transition-base)} .footer-section a:hover{color: var(--white)} .social-links{display: flex;flex-direction: column;gap: var(--spacing-sm)} .social-link{display: flex;align-items: center;gap: var(--spacing-sm);color: var(--gray-400);text-decoration: none;padding: var(--spacing-sm);border-radius: var(--border-radius-sm);transition: all var(--transition-base)} .social-link:hover{color: var(--white);background: rgba(255, 255, 255, 0.1);transform: translateX(4px)} .social-icon{font-size: var(--font-size-lg)} .social-link.facebook:hover{background: rgba(24, 119, 242, 0.2)} .social-link.instagram:hover{background: rgba(225, 48, 108, 0.2)} .social-link.linkedin:hover{background: rgba(0, 119, 181, 0.2)} .footer-bottom{display: flex;flex-direction: column;gap: var(--spacing-md);padding-top: var(--spacing-xl);border-top: 1px solid var(--gray-800);color: var(--gray-400);font-size: var(--font-size-sm)} @media (min-width: 768px){.footer-bottom{flex-direction: row;justify-content: space-between;align-items: center} } .footer-status{display: flex;align-items: center;gap: var(--spacing-md)} .timestamp{color: var(--gray-300)} @media (max-width: 767px){.hero{padding: var(--spacing-2xl) 0;min-height: 70vh} .hero-title{font-size: var(--font-size-3xl)} .hero-actions{flex-direction: column} .btn{justify-content: center} .section-title{font-size: var(--font-size-2xl);flex-direction: column} .architecture-diagram{transform: scale(0.8)} } @media print{.loading-screen, .hero-visual, .status-section, .footer{display: none} .hero{background: none;color: var(--gray-800);padding: var(--spacing-lg) 0} .btn{display: none} }