:root {
     /* Professional Blue & Teal Color Scheme */
     --primary-color: #0ea5e9;
     --primary-dark: #0284c7;
     --primary-light: #38bdf8;
     --secondary-color: #06b6d4;
     --secondary-dark: #0891b2;
     --accent-color: #8b5cf6;
     --accent-light: #a78bfa;
     --success-color: #10b981;
     --warning-color: #f59e0b;
     --error-color: #ef4444;
     --text-primary: #1e293b;
     --text-secondary: #64748b;
     --text-light: #94a3b8;
     --bg-primary: #ffffff;
     --bg-secondary: #f8fafc;
     --bg-tertiary: #f1f5f9;
     --bg-gradient: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 50%, #8b5cf6 100%);
     --bg-gradient-light: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, rgba(6, 182, 212, 0.1) 50%, rgba(139, 92, 246, 0.1) 100%);
     --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
     --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
     --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
     --shadow-colored: 0 10px 15px -3px rgba(14, 165, 233, 0.2), 0 4px 6px -2px rgba(6, 182, 212, 0.1);
     --border-radius: 16px;
     --border-radius-sm: 8px;
     --border-radius-lg: 24px;
     --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }

 * {
     box-sizing: border-box;
 }

 body {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
     background: var(--bg-secondary);
     color: var(--text-primary);
     line-height: 1.6;
     margin: 0;
     padding: 0;
     font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
 }

 /* Modern Navbar */
 .modern-navbar {
     background: var(--bg-primary);
     backdrop-filter: blur(10px);
     border-bottom: 1px solid rgba(14, 165, 233, 0.1);
     box-shadow: var(--shadow-md);
     position: sticky;
     top: 0;
     z-index: 1000;
 }

 .navbar-brand .navbar-item {
     font-weight: 700;
     font-size: 1.75rem;
     background: var(--bg-gradient);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     letter-spacing: -0.025em;
 }

 .navbar-item {
     color: var(--text-primary) !important;
     font-weight: 600;
     transition: var(--transition-fast);
     border-radius: var(--border-radius-sm);
     margin: 0 4px;
     position: relative;
 }

 .navbar-item:hover {
     background: var(--bg-gradient-light) !important;
     color: var(--primary-color) !important;
     transform: translateY(-1px);
 }

 /* Modern Container */
 .modern-container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 2rem 1rem;
     min-height: calc(100vh - 140px);
 }

 /* Hero Section */
 .hero-section {
     text-align: center;
     margin-bottom: 3rem;
     padding: 2rem 0;
 }

 .hero-title {
     font-size: 3.5rem;
     font-weight: 700;
     background: var(--bg-gradient);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     margin-bottom: 1rem;
     line-height: 1.2;
     letter-spacing: -0.025em;
 }

 .hero-subtitle {
     font-size: 1.375rem;
     color: var(--text-secondary);
     font-weight: 400;
     max-width: 600px;
     margin: 0 auto 2rem;
     line-height: 1.7;
 }

 /* Modern Cards */
 .modern-card {
     background: var(--bg-primary);
     border-radius: var(--border-radius);
     box-shadow: var(--shadow-lg);
     border: 1px solid rgba(14, 165, 233, 0.1);
     transition: var(--transition);
     overflow: hidden;
     backdrop-filter: blur(10px);
 }

 .modern-card:hover {
     box-shadow: var(--shadow-colored);
     transform: translateY(-4px);
     border-color: var(--primary-color);
 }

 /* Info Panel */
 .info-panel {
     background: var(--bg-gradient-light);
     border: 1px solid rgba(14, 165, 233, 0.2);
     border-radius: var(--border-radius);
     padding: 1.5rem;
     margin-bottom: 2rem;
     backdrop-filter: blur(10px);
     box-shadow: var(--shadow-sm);
 }

 .info-item {
     display: inline-flex;
     align-items: center;
     margin-right: 2rem;
     font-weight: 600;
     color: var(--text-primary);
 }

 .info-item i {
     margin-right: 0.5rem;
     color: var(--primary-color);
     font-size: 1.1rem;
 }

 /* Modern Tabs */
 .modern-tabs {
     background: var(--bg-primary);
     border-radius: var(--border-radius);
     padding: 0.5rem;
     margin-bottom: 2rem;
     box-shadow: var(--shadow-md);
     display: flex;
     gap: 0.5rem;
     border: 1px solid rgba(14, 165, 233, 0.1);
 }

 .modern-tab {
     flex: 1;
     padding: 1rem 2rem;
     border-radius: var(--border-radius-sm);
     background: transparent;
     border: none;
     font-weight: 600;
     color: var(--text-secondary);
     cursor: pointer;
     transition: var(--transition-fast);
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.5rem;
     position: relative;
 }

 .modern-tab.active {
     background: var(--bg-gradient);
     color: white;
     box-shadow: var(--shadow-md);
     transform: translateY(-1px);
 }

 .modern-tab:hover:not(.active) {
     background: var(--bg-gradient-light);
     color: var(--primary-color);
     transform: translateY(-1px);
 }

 /* Tab Content */
 .tab-content {
     display: none;
 }

 .tab-content.active {
     display: block;
     animation: fadeIn 0.3s ease-in-out;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* Modern Buttons */
 .modern-btn {
     background: var(--bg-gradient);
     color: white;
     border: none;
     border-radius: var(--border-radius-sm);
     padding: 0.75rem 2rem;
     font-weight: 600;
     font-size: 1rem;
     cursor: pointer;
     transition: var(--transition);
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     text-decoration: none;
     box-shadow: var(--shadow-md);
     position: relative;
     overflow: hidden;
 }

 .modern-btn:hover {
     transform: translateY(-2px);
     box-shadow: var(--shadow-colored);
 }

 .modern-btn:active {
     transform: translateY(0);
 }

 .modern-btn.secondary {
     background: var(--bg-primary);
     color: var(--primary-color);
     border: 2px solid var(--primary-color);
     box-shadow: var(--shadow-sm);
 }

 .modern-btn.secondary:hover {
     background: var(--primary-color);
     color: white;
 }

 .modern-btn.danger {
     background: linear-gradient(135deg, var(--error-color) 0%, #dc2626 100%);
 }

 .modern-btn.success {
     background: linear-gradient(135deg, var(--success-color) 0%, #059669 100%);
 }

 .modern-btn:disabled {
     opacity: 0.6;
     cursor: not-allowed;
     transform: none;
 }

 /* Footer */
 .modern-footer {
     background: var(--bg-primary);
     border-top: 1px solid rgba(14, 165, 233, 0.1);
     padding: 2rem 0;
     text-align: center;
     color: var(--text-secondary);
     margin-top: auto;
     box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.05);
 }

 /* Responsive Design */
 @media (max-width: 768px) {
     .hero-title {
         font-size: 2.5rem;
     }

     .hero-subtitle {
         font-size: 1.125rem;
     }

     .modern-container {
         padding: 1rem;
     }

     .info-item {
         display: block;
         margin-bottom: 0.5rem;
         margin-right: 0;
     }

     .modern-tabs {
         flex-direction: column;
     }
 }

 /* Loading Animation */
 .loading-spinner {
     width: 20px;
     height: 20px;
     border: 2px solid rgba(255, 255, 255, 0.2);
     border-top: 2px solid var(--primary-light);
     border-radius: 50%;
     animation: spin 1s linear infinite;
 }

 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 /* Utility Classes */
 .glass-effect {
     backdrop-filter: blur(10px);
     background: rgba(255, 255, 255, 0.8);
     border: 1px solid rgba(14, 165, 233, 0.2);
 }

 .gradient-text {
     background: var(--bg-gradient);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     font-weight: 700;
 }

 /* Toast Notifications */
 .toast-container {
     position: fixed;
     top: 20px;
     right: 20px;
     z-index: 10000;
     pointer-events: none;
 }

 .toast {
     background: var(--bg-primary);
     border: 1px solid rgba(14, 165, 233, 0.2);
     border-radius: var(--border-radius);
     padding: 1rem 1.5rem;
     margin-bottom: 0.5rem;
     box-shadow: var(--shadow-lg);
     display: flex;
     align-items: center;
     gap: 0.75rem;
     min-width: 300px;
     transform: translateX(400px);
     opacity: 0;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     pointer-events: auto;
     backdrop-filter: blur(10px);
 }

 .toast.show {
     transform: translateX(0);
     opacity: 1;
 }

 .toast.success {
     border-left: 4px solid var(--success-color);
     background: rgba(16, 185, 129, 0.05);
 }

 .toast.error {
     border-left: 4px solid var(--error-color);
     background: rgba(239, 68, 68, 0.05);
 }

 .toast.info {
     border-left: 4px solid var(--primary-color);
     background: var(--bg-gradient-light);
 }

 .toast-icon {
     font-size: 1.25rem;
     flex-shrink: 0;
 }

 .toast.success .toast-icon {
     color: var(--success-color);
 }

 .toast.error .toast-icon {
     color: var(--error-color);
 }

 .toast.info .toast-icon {
     color: var(--primary-color);
 }

 .toast-content {
     flex: 1;
 }

 .toast-title {
     font-weight: 600;
     color: var(--text-primary);
     margin-bottom: 0.25rem;
 }

 .toast-message {
     color: var(--text-secondary);
     font-size: 0.875rem;
 }

 .toast-close {
     background: none;
     border: none;
     color: var(--text-secondary);
     cursor: pointer;
     padding: 0.25rem;
     border-radius: 4px;
     transition: var(--transition);
 }

 .toast-close:hover {
     background: rgba(0, 0, 0, 0.1);
 }

 @media (max-width: 768px) {
     .toast-container {
         top: 10px;
         right: 10px;
         left: 10px;
     }

     .toast {
         min-width: auto;
         width: 100%;
     }
 }



 .text-container {
     padding: 2rem;
 }

 .modern-textarea {
     width: 100%;
     min-height: 300px;
     border: 2px solid rgba(14, 165, 233, 0.2);
     border-radius: var(--border-radius);
     padding: 1.5rem;
     font-size: 1.1rem;
     font-family: 'Inter', sans-serif;
     background: var(--bg-primary);
     color: var(--text-primary);
     resize: vertical;
     transition: var(--transition);
     outline: none;
     backdrop-filter: blur(5px);
 }

 .modern-textarea:focus {
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px var(--bg-gradient-light);
 }

 .textarea-footer {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-top: 1rem;
     padding-top: 1rem;
     border-top: 1px solid rgba(14, 165, 233, 0.1);
 }

 .char-counter {
     font-size: 0.875rem;
     color: var(--text-secondary);
     font-weight: 600;
 }

 .char-counter.warning {
     color: var(--warning-color);
 }

 .char-counter.danger {
     color: var(--error-color);
 }

 .button-group {
     display: flex;
     gap: 1rem;
 }

 .links-container {
     margin-top: 1rem;
     padding: 1rem;
     background: var(--bg-gradient-light);
     border-radius: var(--border-radius-sm);
     border: 1px solid rgba(14, 165, 233, 0.2);
     backdrop-filter: blur(5px);
 }

 .detected-link {
     display: block;
     color: var(--primary-color);
     text-decoration: none;
     margin-bottom: 0.5rem;
     font-weight: 600;
     transition: var(--transition);
 }

 .detected-link:hover {
     color: var(--primary-light);
     text-decoration: underline;
 }

 /* File Tab Styles */
 .file-container {
     padding: 2rem;
 }

 .upload-zone {
     border: 3px dashed rgba(14, 165, 233, 0.3);
     border-radius: var(--border-radius);
     padding: 3rem 2rem;
     text-align: center;
     background: var(--bg-gradient-light);
     transition: var(--transition);
     cursor: pointer;
     position: relative;
     overflow: hidden;
     backdrop-filter: blur(5px);
 }

 .upload-zone:hover {
     border-color: var(--primary-color);
     background: var(--bg-gradient-light);
     transform: scale(1.01);
     box-shadow: var(--shadow-md);
 }

 .upload-zone.dragover {
     border-color: var(--primary-color);
     background: var(--bg-gradient-light);
     transform: scale(1.02);
     box-shadow: var(--shadow-colored);
     border-style: solid;
 }

 .upload-icon {
     font-size: 4rem;
     color: var(--primary-color);
     margin-bottom: 1rem;
     display: block;
     transition: var(--transition);
 }

 .upload-zone.dragover .upload-icon {
     transform: scale(1.1);
     color: var(--primary-light);
 }

 .upload-text {
     font-size: 1.25rem;
     font-weight: 600;
     color: var(--text-primary);
     margin-bottom: 0.5rem;
 }

 .upload-subtext {
     color: var(--text-secondary);
     font-size: 0.875rem;
 }

 .upload-zone.dragover .upload-text {
     color: var(--primary-color);
 }

 .progress-container {
     margin-top: 1rem;
     display: none;
 }

 .progress-bar {
     width: 100%;
     height: 8px;
     background: var(--bg-tertiary);
     border-radius: 4px;
     overflow: hidden;
 }

 .progress-fill {
     height: 100%;
     background: var(--bg-gradient);
     transition: width 0.3s ease;
     border-radius: 4px;
     box-shadow: 0 0 10px rgba(14, 165, 233, 0.3);
 }

 .progress-text {
     text-align: center;
     margin-top: 0.5rem;
     font-size: 0.875rem;
     color: var(--text-secondary);
     font-weight: 500;
 }

 /* File Selection and Download Controls */
 .file-controls {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 1rem;
     padding: 1rem;
     background: var(--bg-gradient-light);
     border-radius: var(--border-radius);
     border: 1px solid rgba(14, 165, 233, 0.2);
     backdrop-filter: blur(5px);
 }

 .selection-info {
     display: flex;
     align-items: center;
     gap: 1rem;
 }

 .select-all-btn {
     background: transparent;
     border: 2px solid var(--primary-color);
     color: var(--primary-color);
     padding: 0.75rem 1.25rem;
     border-radius: var(--border-radius-sm);
     cursor: pointer;
     font-weight: 600;
     transition: var(--transition);
 }

 .select-all-btn:hover {
     background: var(--primary-color);
     color: white;
     transform: translateY(-1px);
     box-shadow: var(--shadow-md);
 }

 .download-controls {
     display: flex;
     gap: 0.5rem;
 }

 .download-btn {
     background: var(--success-color);
     color: white;
     border: none;
     padding: 0.5rem 1rem;
     border-radius: 6px;
     cursor: pointer;
     font-weight: 500;
     transition: var(--transition);
     display: flex;
     align-items: center;
     gap: 0.5rem;
 }

 .download-btn:hover {
     background: var(--success-color);
     transform: translateY(-1px);
 }

 .download-btn:disabled {
     opacity: 0.5;
     cursor: not-allowed;
     transform: none;
 }

 .email-btn {
     background: var(--primary-color);
 }

 .email-btn:hover {
     background: var(--primary-dark);
 }

 .danger-btn {
     background: var(--error-color);
 }

 .danger-btn:hover {
     background: #dc2626;
 }

 /* File Preview Grid */
 .file-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
     gap: 1.5rem;
     margin-top: 2rem;
     padding: 1.5rem;
     background: var(--bg-gradient-light);
     border-radius: var(--border-radius);
     min-height: 200px;
     backdrop-filter: blur(5px);
     border: 1px solid rgba(14, 165, 233, 0.1);
 }

 .file-grid.empty {
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--text-secondary);
     font-style: italic;
 }

 .file-item {
     background: var(--bg-primary);
     border-radius: var(--border-radius);
     padding: 1rem;
     box-shadow: var(--shadow-md);
     transition: var(--transition);
     position: relative;
     cursor: pointer;
     border: 2px solid transparent;
     backdrop-filter: blur(10px);
 }

 .file-item:hover {
     transform: translateY(-4px);
     box-shadow: var(--shadow-colored);
     border-color: var(--primary-color);
 }

 .file-item.selected {
     border-color: var(--primary-color);
     background: var(--bg-gradient-light);
 }

 .file-checkbox {
     position: absolute;
     top: 0.5rem;
     left: 0.5rem;
     width: 20px;
     height: 20px;
     cursor: pointer;
     z-index: 5;
 }

 .file-preview {
     width: 100%;
     height: 120px;
     border-radius: 8px;
     overflow: hidden;
     margin-bottom: 1rem;
     background: var(--bg-secondary);
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .file-preview img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .file-icon {
     font-size: 3rem;
     color: var(--primary-color);
 }

 .file-info {
     text-align: center;
 }

 .file-name {
     font-weight: 600;
     color: var(--text-primary);
     margin-bottom: 0.25rem;
     font-size: 0.875rem;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 .file-size {
     color: var(--text-secondary);
     font-size: 0.75rem;
 }

 .file-actions {
     position: absolute;
     top: 0.5rem;
     right: 0.5rem;
     display: flex;
     gap: 0.25rem;
     opacity: 0;
     transition: var(--transition);
 }

 .file-item:hover .file-actions {
     opacity: 1;
 }

 .action-btn {
     width: 32px;
     height: 32px;
     border-radius: 50%;
     border: none;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 0.875rem;
     transition: var(--transition);
 }

 .action-btn.delete {
     background: var(--error-color);
     color: white;
 }

 .action-btn.download {
     background: var(--success-color);
     color: white;
 }

 .action-btn:hover {
     transform: scale(1.1);
 }

 /* Email Modal */
 .modal-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.5);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 9999;
     opacity: 0;
     visibility: hidden;
     transition: var(--transition);
 }

 .modal-overlay.show {
     opacity: 1;
     visibility: visible;
 }

 .modal-content {
     background: var(--bg-primary);
     border-radius: var(--border-radius);
     padding: 2rem;
     max-width: 500px;
     width: 90%;
     max-height: 80vh;
     overflow-y: auto;
 }

 .modal-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 1.5rem;
 }

 .modal-title {
     font-size: 1.5rem;
     font-weight: 600;
     color: var(--text-primary);
 }

 .modal-close {
     background: none;
     border: none;
     font-size: 1.5rem;
     cursor: pointer;
     color: var(--text-secondary);
 }

 .form-group {
     margin-bottom: 1rem;
 }

 .form-label {
     display: block;
     font-weight: 500;
     margin-bottom: 0.5rem;
     color: var(--text-primary);
 }

 .form-input {
     width: 100%;
     padding: 0.75rem;
     border: 2px solid rgba(102, 126, 234, 0.2);
     border-radius: 8px;
     font-size: 1rem;
     transition: var(--transition);
 }

 .form-input:focus {
     outline: none;
     border-color: var(--primary-color);
 }

 /* Messages */
 .message {
     padding: 1rem 1.5rem;
     border-radius: 8px;
     margin: 1rem 0;
     display: none;
     align-items: center;
     gap: 0.75rem;
     font-weight: 500;
 }

 .message.success {
     background: rgba(72, 187, 120, 0.1);
     color: var(--success-color);
     border: 1px solid rgba(72, 187, 120, 0.2);
 }

 .message.error {
     background: rgba(245, 101, 101, 0.1);
     color: var(--error-color);
     border: 1px solid rgba(245, 101, 101, 0.2);
 }

 .message.warning {
     background: rgba(237, 137, 54, 0.1);
     color: var(--warning-color);
     border: 1px solid rgba(237, 137, 54, 0.2);
 }

 /* Full Screen Preview */
 .fullscreen-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.9);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 9999;
     opacity: 0;
     visibility: hidden;
     transition: var(--transition);
 }

 .fullscreen-overlay.show {
     opacity: 1;
     visibility: visible;
 }

 .fullscreen-content {
     max-width: 90%;
     max-height: 90%;
     position: relative;
 }

 .fullscreen-image {
     max-width: 100%;
     max-height: 100%;
     border-radius: var(--border-radius);
 }

 .fullscreen-close {
     position: absolute;
     top: -50px;
     right: 0;
     background: var(--bg-primary);
     border: none;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.25rem;
     color: var(--text-primary);
 }

 /* Loading States */
 .loading-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(255, 255, 255, 0.9);
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: var(--border-radius);
     z-index: 10;
 }

 .loading-spinner-large {
     width: 40px;
     height: 40px;
     border: 4px solid rgba(102, 126, 234, 0.2);
     border-top: 4px solid var(--primary-color);
     border-radius: 50%;
     animation: spin 1s linear infinite;
 }

 /* Responsive Design */
 @media (max-width: 768px) {

     .text-container,
     .file-container {
         padding: 1rem;
     }

     .file-grid {
         grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
         gap: 1rem;
     }

     .button-group {
         flex-direction: column;
     }

     .textarea-footer {
         flex-direction: column;
         gap: 1rem;
         align-items: stretch;
     }

     .file-controls {
         flex-direction: column;
         gap: 1rem;
     }

     .download-controls {
         justify-content: center;
     }
 }


 .error-container {
     min-height: 70vh;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding: 2rem;
 }

 .error-content {
     max-width: 600px;
     margin: 0 auto;
 }

 .error-number {
     font-size: 8rem;
     font-weight: 700;
     background: var(--bg-gradient);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     line-height: 1;
     margin-bottom: 1rem;
     animation: bounce 2s infinite;
 }

 @keyframes bounce {

     0%,
     20%,
     50%,
     80%,
     100% {
         transform: translateY(0);
     }

     40% {
         transform: translateY(-20px);
     }

     60% {
         transform: translateY(-10px);
     }
 }

 .error-title {
     font-size: 2.5rem;
     font-weight: 700;
     color: var(--text-primary);
     margin-bottom: 1rem;
     line-height: 1.2;
 }

 .error-subtitle {
     font-size: 1.25rem;
     color: var(--text-secondary);
     margin-bottom: 2rem;
     line-height: 1.6;
 }

 .error-illustration {
     margin: 2rem 0;
     position: relative;
 }

 .floating-icon {
     font-size: 3rem;
     color: var(--primary-color);
     opacity: 0.3;
     position: absolute;
     animation: float 3s ease-in-out infinite;
 }

 .floating-icon:nth-child(1) {
     top: 20px;
     left: 20%;
     animation-delay: 0s;
 }

 .floating-icon:nth-child(2) {
     top: 60px;
     right: 20%;
     animation-delay: 1s;
 }

 .floating-icon:nth-child(3) {
     bottom: 40px;
     left: 30%;
     animation-delay: 2s;
 }

 .floating-icon:nth-child(4) {
     bottom: 20px;
     right: 30%;
     animation-delay: 1.5s;
 }

 @keyframes float {

     0%,
     100% {
         transform: translateY(0px);
     }

     50% {
         transform: translateY(-20px);
     }
 }

 .error-actions {
     display: flex;
     gap: 1rem;
     justify-content: center;
     flex-wrap: wrap;
     margin-top: 2rem;
 }

 .error-btn {
     background: var(--bg-gradient);
     color: white;
     border: none;
     border-radius: var(--border-radius-sm);
     padding: 1rem 2rem;
     font-weight: 600;
     font-size: 1rem;
     cursor: pointer;
     transition: var(--transition);
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     text-decoration: none;
     box-shadow: var(--shadow-md);
 }

 .error-btn:hover {
     transform: translateY(-2px);
     box-shadow: var(--shadow-colored);
     color: white;
 }

 .error-btn.secondary {
     background: var(--bg-primary);
     color: var(--primary-color);
     border: 2px solid var(--primary-color);
     box-shadow: var(--shadow-sm);
 }

 .error-btn.secondary:hover {
     background: var(--primary-color);
     color: white;
 }

 .helpful-links {
     margin-top: 3rem;
     padding: 2rem;
     background: var(--bg-gradient-light);
     border-radius: var(--border-radius);
     border: 1px solid rgba(14, 165, 233, 0.2);
 }

 .helpful-title {
     font-size: 1.5rem;
     font-weight: 600;
     color: var(--text-primary);
     margin-bottom: 1.5rem;
     text-align: center;
 }

 .links-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 1rem;
 }

 .link-item {
     background: var(--bg-primary);
     border-radius: var(--border-radius-sm);
     padding: 1.5rem;
     text-align: center;
     transition: var(--transition);
     border: 2px solid transparent;
     text-decoration: none;
     color: var(--text-primary);
 }

 .link-item:hover {
     transform: translateY(-4px);
     box-shadow: var(--shadow-lg);
     border-color: var(--primary-color);
     color: var(--text-primary);
 }

 .link-icon {
     font-size: 2rem;
     color: var(--primary-color);
     margin-bottom: 1rem;
 }

 .link-title {
     font-weight: 600;
     margin-bottom: 0.5rem;
 }

 .link-desc {
     font-size: 0.875rem;
     color: var(--text-secondary);
 }

 .search-box {
     margin: 2rem 0;
     position: relative;
     max-width: 400px;
     margin-left: auto;
     margin-right: auto;
 }

 .search-input {
     width: 100%;
     padding: 1rem 1rem 1rem 3rem;
     border: 2px solid rgba(14, 165, 233, 0.2);
     border-radius: 50px;
     font-size: 1rem;
     background: var(--bg-primary);
     color: var(--text-primary);
     transition: var(--transition);
     outline: none;
 }

 .search-input:focus {
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
 }

 .search-icon {
     position: absolute;
     left: 1rem;
     top: 50%;
     transform: translateY(-50%);
     color: var(--text-secondary);
     font-size: 1.2rem;
 }

 @media (max-width: 768px) {
     .error-number {
         font-size: 5rem;
     }

     .error-title {
         font-size: 2rem;
     }

     .error-subtitle {
         font-size: 1.125rem;
     }

     .error-actions {
         flex-direction: column;
         align-items: center;
     }

     .error-btn {
         width: 100%;
         max-width: 300px;
         justify-content: center;
     }

     .floating-icon {
         display: none;
     }
 }


 .error-container {
     min-height: 70vh;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding: 2rem;
 }

 .error-content {
     max-width: 600px;
     margin: 0 auto;
 }

 .error-number {
     font-size: 8rem;
     font-weight: 700;
     background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     line-height: 1;
     margin-bottom: 1rem;
     animation: pulse 2s infinite;
 }

 @keyframes pulse {

     0%,
     100% {
         transform: scale(1);
         opacity: 1;
     }

     50% {
         transform: scale(1.05);
         opacity: 0.8;
     }
 }

 .error-title {
     font-size: 2.5rem;
     font-weight: 700;
     color: var(--text-primary);
     margin-bottom: 1rem;
     line-height: 1.2;
 }

 .error-subtitle {
     font-size: 1.25rem;
     color: var(--text-secondary);
     margin-bottom: 2rem;
     line-height: 1.6;
 }

 .error-illustration {
     margin: 2rem 0;
     position: relative;
     height: 120px;
 }

 .floating-icon {
     font-size: 3rem;
     color: var(--error-color);
     opacity: 0.3;
     position: absolute;
     animation: float 3s ease-in-out infinite;
 }

 .floating-icon:nth-child(1) {
     top: 20px;
     left: 20%;
     animation-delay: 0s;
 }

 .floating-icon:nth-child(2) {
     top: 60px;
     right: 20%;
     animation-delay: 1s;
 }

 .floating-icon:nth-child(3) {
     bottom: 40px;
     left: 30%;
     animation-delay: 2s;
 }

 .floating-icon:nth-child(4) {
     bottom: 20px;
     right: 30%;
     animation-delay: 1.5s;
 }

 @keyframes float {

     0%,
     100% {
         transform: translateY(0px);
     }

     50% {
         transform: translateY(-20px);
     }
 }

 .error-actions {
     display: flex;
     gap: 1rem;
     justify-content: center;
     flex-wrap: wrap;
     margin-top: 2rem;
 }

 .error-btn {
     background: var(--bg-gradient);
     color: white;
     border: none;
     border-radius: var(--border-radius-sm);
     padding: 1rem 2rem;
     font-weight: 600;
     font-size: 1rem;
     cursor: pointer;
     transition: var(--transition);
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     text-decoration: none;
     box-shadow: var(--shadow-md);
 }

 .error-btn:hover {
     transform: translateY(-2px);
     box-shadow: var(--shadow-colored);
     color: white;
 }

 .error-btn.secondary {
     background: var(--bg-primary);
     color: var(--primary-color);
     border: 2px solid var(--primary-color);
     box-shadow: var(--shadow-sm);
 }

 .error-btn.secondary:hover {
     background: var(--primary-color);
     color: white;
 }

 .status-section {
     margin-top: 3rem;
     padding: 2rem;
     background: rgba(239, 68, 68, 0.1);
     border-radius: var(--border-radius);
     border: 1px solid rgba(239, 68, 68, 0.3);
 }

 .status-title {
     font-size: 1.5rem;
     font-weight: 600;
     color: var(--text-primary);
     margin-bottom: 1.5rem;
     text-align: center;
 }

 .status-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 1.5rem;
 }

 .status-item {
     background: var(--bg-primary);
     border-radius: var(--border-radius-sm);
     padding: 1.5rem;
     text-align: center;
     border-left: 4px solid var(--error-color);
 }

 .status-icon {
     font-size: 2rem;
     color: var(--error-color);
     margin-bottom: 1rem;
 }

 .status-item-title {
     font-weight: 600;
     color: var(--text-primary);
     margin-bottom: 0.5rem;
 }

 .status-desc {
     color: var(--text-secondary);
     font-size: 0.875rem;
     line-height: 1.6;
 }

 .refresh-timer {
     margin-top: 2rem;
     padding: 1rem;
     background: rgba(14, 165, 233, 0.1);
     border-radius: var(--border-radius-sm);
     border: 1px solid rgba(14, 165, 233, 0.3);
     text-align: center;
 }

 .timer-text {
     color: var(--primary-color);
     font-weight: 600;
     font-size: 1.1rem;
 }

 .timer-countdown {
     font-size: 1.5rem;
     font-weight: 700;
     color: var(--primary-color);
     margin-top: 0.5rem;
 }

 @media (max-width: 768px) {
     .error-number {
         font-size: 5rem;
     }

     .error-title {
         font-size: 2rem;
     }

     .error-subtitle {
         font-size: 1.125rem;
     }

     .error-actions {
         flex-direction: column;
         align-items: center;
     }

     .error-btn {
         width: 100%;
         max-width: 300px;
         justify-content: center;
     }

     .floating-icon {
         display: none;
     }
 }


 .how-it-works-hero {
     text-align: center;
     margin-bottom: 4rem;
     padding: 3rem 2rem;
     background: var(--bg-gradient-light);
     border-radius: var(--border-radius);
     backdrop-filter: blur(10px);
     border: 1px solid rgba(14, 165, 233, 0.2);
 }

 .how-it-works-title {
     font-size: 3.5rem;
     font-weight: 700;
     margin-bottom: 1rem;
     background: var(--bg-gradient);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     letter-spacing: -0.025em;
 }

 .how-it-works-subtitle {
     font-size: 1.25rem;
     color: var(--text-secondary);
     max-width: 700px;
     margin: 0 auto;
     line-height: 1.6;
 }

 .steps-container {
     margin: 4rem 0;
 }

 .steps-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
     gap: 3rem;
     margin: 3rem 0;
 }

 .step-card {
     background: var(--bg-primary);
     border-radius: var(--border-radius);
     padding: 2.5rem;
     box-shadow: var(--shadow-lg);
     text-align: center;
     transition: var(--transition);
     border: 2px solid transparent;
     position: relative;
     overflow: hidden;
 }

 .step-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 4px;
     background: var(--bg-gradient);
 }

 .step-card:hover {
     transform: translateY(-8px);
     box-shadow: var(--shadow-xl);
     border-color: var(--primary-color);
 }

 .step-number {
     width: 80px;
     height: 80px;
     border-radius: 50%;
     background: var(--bg-gradient);
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 2rem;
     font-size: 2rem;
     font-weight: 700;
     color: white;
     box-shadow: var(--shadow-md);
 }

 .step-icon {
     font-size: 3rem;
     color: var(--primary-color);
     margin-bottom: 1.5rem;
 }

 .step-title {
     font-size: 1.75rem;
     font-weight: 600;
     color: var(--text-primary);
     margin-bottom: 1rem;
 }

 .step-description {
     color: var(--text-secondary);
     line-height: 1.7;
     font-size: 1.1rem;
 }

 .features-section {
     margin: 5rem 0;
     padding: 3rem 2rem;
     background: rgba(102, 126, 234, 0.03);
     border-radius: var(--border-radius);
 }

 .section-title {
     text-align: center;
     font-size: 2.5rem;
     font-weight: 700;
     margin-bottom: 3rem;
     color: var(--text-primary);
 }

 .features-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 2rem;
     margin-top: 3rem;
 }

 .feature-card {
     background: var(--bg-primary);
     border-radius: var(--border-radius);
     padding: 2rem;
     border-left: 4px solid var(--primary-color);
     transition: var(--transition);
     box-shadow: var(--shadow-sm);
 }

 .feature-card:hover {
     transform: translateX(8px);
     box-shadow: var(--shadow-md);
 }


 .feature-title {
     font-weight: 600;
     color: var(--text-primary);
     margin-bottom: 0.75rem;
     font-size: 1.25rem;
 }

 .feature-text {
     color: var(--text-secondary);
     line-height: 1.6;
 }

 .security-section {
     margin: 5rem 0;
     padding: 3rem;
     background: linear-gradient(135deg, rgba(72, 187, 120, 0.1) 0%, rgba(56, 161, 105, 0.1) 100%);
     border-radius: var(--border-radius);
     border: 1px solid rgba(72, 187, 120, 0.2);
 }

 .security-title {
     text-align: center;
     font-size: 2rem;
     font-weight: 600;
     color: var(--success-color);
     margin-bottom: 2rem;
 }

 .security-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 2rem;
 }

 .security-item {
     display: flex;
     align-items: center;
     gap: 1rem;
     padding: 1rem;
     background: rgba(255, 255, 255, 0.5);
     border-radius: 8px;
 }

 .security-icon {
     color: var(--success-color);
     font-size: 1.5rem;
 }

 .cta-section {
     text-align: center;
     margin: 5rem 0;
     padding: 4rem 2rem;
     background: var(--bg-gradient);
     border-radius: var(--border-radius);
     color: white;
 }

 .cta-title {
     font-size: 2.5rem;
     font-weight: 700;
     margin-bottom: 1rem;
 }

 .cta-text {
     font-size: 1.2rem;
     margin-bottom: 2rem;
     opacity: 0.9;
     max-width: 600px;
     margin-left: auto;
     margin-right: auto;
 }

 .cta-button {
     background: white;
     color: var(--primary-color);
     padding: 1.25rem 3rem;
     border-radius: 50px;
     text-decoration: none;
     font-weight: 600;
     font-size: 1.1rem;
     display: inline-flex;
     align-items: center;
     gap: 0.75rem;
     transition: var(--transition);
     box-shadow: var(--shadow-lg);
 }

 .cta-button:hover {
     transform: translateY(-3px);
     box-shadow: var(--shadow-xl);
     color: var(--primary-color);
 }

 @media (max-width: 768px) {
     .how-it-works-title {
         font-size: 2rem;
     }

     .steps-grid {
         grid-template-columns: 1fr;
         gap: 2rem;
     }

     .step-card {
         padding: 2rem;
     }

     .cta-section {
         padding: 3rem 1rem;
     }
 }


 .faq-hero {
     text-align: center;
     margin-bottom: 4rem;
     padding: 3rem 2rem;
     background: var(--bg-gradient-light);
     border-radius: var(--border-radius);
     backdrop-filter: blur(10px);
     border: 1px solid rgba(14, 165, 233, 0.2);
 }

 .faq-title {
     font-size: 3rem;
     font-weight: 700;
     margin-bottom: 1rem;
     background: var(--bg-gradient);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .faq-subtitle {
     font-size: 1.25rem;
     color: var(--text-secondary);
     max-width: 600px;
     margin: 0 auto;
     line-height: 1.6;
 }

 .faq-search {
     max-width: 500px;
     margin: 2rem auto;
     position: relative;
 }

 .search-input {
     width: 100%;
     padding: 1rem 1rem 1rem 3rem;
     border: 2px solid rgba(102, 126, 234, 0.2);
     border-radius: 50px;
     font-size: 1.1rem;
     background: var(--bg-primary);
     color: var(--text-primary);
     transition: var(--transition);
     outline: none;
 }

 .search-input:focus {
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
 }

 .search-icon {
     position: absolute;
     left: 1rem;
     top: 50%;
     transform: translateY(-50%);
     color: var(--text-secondary);
     font-size: 1.2rem;
 }

 .faq-categories {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 1.5rem;
     margin: 3rem 0;
 }

 .category-card {
     background: var(--bg-primary);
     border-radius: var(--border-radius);
     padding: 1.5rem;
     text-align: center;
     cursor: pointer;
     transition: var(--transition);
     border: 2px solid transparent;
     box-shadow: var(--shadow-sm);
 }

 .category-card:hover {
     transform: translateY(-4px);
     box-shadow: var(--shadow-lg);
     border-color: var(--primary-color);
 }

 .category-card.active {
     border-color: var(--primary-color);
     background: rgba(102, 126, 234, 0.05);
 }

 .category-icon {
     font-size: 2.5rem;
     color: var(--primary-color);
     margin-bottom: 1rem;
 }

 .category-title {
     font-weight: 600;
     color: var(--text-primary);
     margin-bottom: 0.5rem;
 }

 .category-count {
     color: var(--text-secondary);
     font-size: 0.9rem;
 }

 .faq-container {
     max-width: 800px;
     margin: 0 auto;
 }

 .faq-item {
     background: var(--bg-primary);
     border-radius: var(--border-radius);
     margin-bottom: 1.5rem;
     box-shadow: var(--shadow-sm);
     transition: var(--transition);
     overflow: hidden;
 }

 .faq-item:hover {
     box-shadow: var(--shadow-md);
 }

 .faq-question {
     padding: 1.5rem 2rem;
     cursor: pointer;
     display: flex;
     justify-content: space-between;
     align-items: center;
     background: var(--bg-primary);
     border: none;
     width: 100%;
     text-align: left;
     font-size: 1.1rem;
     font-weight: 600;
     color: var(--text-primary);
     transition: var(--transition);
 }

 .faq-question:hover {
     background: rgba(102, 126, 234, 0.05);
 }

 .faq-question.active {
     background: rgba(102, 126, 234, 0.1);
     color: var(--primary-color);
 }

 .faq-icon {
     font-size: 1.2rem;
     transition: var(--transition);
 }

 .faq-question.active .faq-icon {
     transform: rotate(180deg);
 }

 .faq-answer {
     padding: 0 2rem 1.5rem;
     color: var(--text-secondary);
     line-height: 1.7;
     display: none;
     animation: fadeIn 0.3s ease-in-out;
 }

 .faq-answer.show {
     display: block;
 }

 .faq-answer p {
     margin-bottom: 1rem;
 }

 .faq-answer ul {
     margin: 1rem 0;
     padding-left: 1.5rem;
 }

 .faq-answer li {
     margin-bottom: 0.5rem;
 }

 .highlight {
     background: rgba(255, 235, 59, 0.3);
     padding: 0.2rem 0.4rem;
     border-radius: 4px;
 }

 .contact-section {
     text-align: center;
     margin: 4rem 0;
     padding: 3rem 2rem;
     background: var(--bg-gradient);
     border-radius: var(--border-radius);
     color: white;
 }

 .contact-title {
     font-size: 2rem;
     font-weight: 600;
     margin-bottom: 1rem;
 }

 .contact-text {
     font-size: 1.1rem;
     margin-bottom: 2rem;
     opacity: 0.9;
 }

 .contact-button {
     background: white;
     color: var(--primary-color);
     padding: 1rem 2rem;
     border-radius: 50px;
     text-decoration: none;
     font-weight: 600;
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     transition: var(--transition);
 }

 .contact-button:hover {
     transform: translateY(-2px);
     box-shadow: var(--shadow-lg);
     color: var(--primary-color);
 }

 @media (max-width: 768px) {
     .faq-title {
         font-size: 2rem;
     }

     .faq-question {
         padding: 1rem 1.5rem;
         font-size: 1rem;
     }

     .faq-answer {
         padding: 0 1.5rem 1rem;
     }

     .contact-section {
         padding: 2rem 1rem;
     }
 }



 .feedback-hero {
     text-align: center;
     margin-bottom: 3rem;
 }

 .feedback-title {
     font-size: 2.5rem;
     font-weight: 700;
     margin-bottom: 1rem;
     background: var(--bg-gradient);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .feedback-subtitle {
     font-size: 1.25rem;
     color: var(--text-secondary);
     max-width: 600px;
     margin: 0 auto;
 }

 .feedback-form {
     max-width: 600px;
     margin: 0 auto;
     padding: 2rem;
 }

 .form-group {
     margin-bottom: 2rem;
 }

 .form-label {
     display: block;
     font-weight: 600;
     color: var(--text-primary);
     margin-bottom: 0.5rem;
     font-size: 1rem;
 }

 .form-input,
 .form-textarea {
     width: 100%;
     padding: 1rem;
     border: 2px solid rgba(102, 126, 234, 0.2);
     border-radius: var(--border-radius);
     font-size: 1rem;
     font-family: 'Inter', sans-serif;
     background: var(--bg-primary);
     color: var(--text-primary);
     transition: var(--transition);
     outline: none;
 }

 .form-input:focus,
 .form-textarea:focus {
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
 }

 .form-textarea {
     min-height: 150px;
     resize: vertical;
 }

 .form-button {
     width: 100%;
     background: var(--bg-gradient);
     color: white;
     border: none;
     border-radius: var(--border-radius);
     padding: 1rem 2rem;
     font-size: 1.1rem;
     font-weight: 600;
     cursor: pointer;
     transition: var(--transition);
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.5rem;
 }

 .form-button:hover {
     transform: translateY(-2px);
     box-shadow: var(--shadow-lg);
 }

 .form-button:disabled {
     opacity: 0.6;
     cursor: not-allowed;
     transform: none;
 }

 .feedback-types {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 1rem;
     margin-bottom: 2rem;
 }

 .feedback-type {
     background: rgba(102, 126, 234, 0.05);
     border: 2px solid rgba(102, 126, 234, 0.2);
     border-radius: var(--border-radius);
     padding: 1rem;
     text-align: center;
     cursor: pointer;
     transition: var(--transition);
 }

 .feedback-type:hover {
     border-color: var(--primary-color);
     background: rgba(102, 126, 234, 0.1);
 }

 .feedback-type.selected {
     border-color: var(--primary-color);
     background: rgba(102, 126, 234, 0.1);
 }

 .feedback-type-icon {
     font-size: 2rem;
     color: var(--primary-color);
     margin-bottom: 0.5rem;
 }

 .feedback-type-title {
     font-weight: 600;
     color: var(--text-primary);
     margin-bottom: 0.25rem;
 }

 .feedback-type-desc {
     font-size: 0.875rem;
     color: var(--text-secondary);
 }

 .success-message {
     background: rgba(72, 187, 120, 0.1);
     border: 1px solid rgba(72, 187, 120, 0.3);
     color: var(--success-color);
     padding: 1.5rem;
     border-radius: var(--border-radius);
     text-align: center;
     margin-bottom: 2rem;
     display: none;
 }

 .error-message {
     background: rgba(245, 101, 101, 0.1);
     border: 1px solid rgba(245, 101, 101, 0.3);
     color: var(--error-color);
     padding: 1.5rem;
     border-radius: var(--border-radius);
     text-align: center;
     margin-bottom: 2rem;
     display: none;
 }

 .contact-info {
     background: rgba(102, 126, 234, 0.05);
     border-radius: var(--border-radius);
     padding: 2rem;
     margin-top: 3rem;
     text-align: center;
 }

 .contact-title {
     font-size: 1.5rem;
     font-weight: 600;
     color: var(--text-primary);
     margin-bottom: 1rem;
 }

 .contact-text {
     color: var(--text-secondary);
     margin-bottom: 1.5rem;
 }

 .contact-methods {
     display: flex;
     justify-content: center;
     gap: 2rem;
     flex-wrap: wrap;
 }

 .contact-method {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     color: var(--primary-color);
     text-decoration: none;
     font-weight: 500;
     transition: var(--transition);
 }

 .contact-method:hover {
     color: var(--primary-dark);
 }

 @media (max-width: 768px) {
     .feedback-title {
         font-size: 2rem;
     }

     .feedback-form {
         padding: 1rem;
     }

     .contact-methods {
         flex-direction: column;
         align-items: center;
         gap: 1rem;
     }
 }



 .coming-soon-hero {
     text-align: center;
     margin-bottom: 4rem;
     padding: 4rem 2rem;
     background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
     border-radius: var(--border-radius);
     position: relative;
     overflow: hidden;
 }

 .coming-soon-hero::before {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
     animation: pulse 4s ease-in-out infinite;
 }

 @keyframes pulse {

     0%,
     100% {
         transform: scale(1);
         opacity: 0.5;
     }

     50% {
         transform: scale(1.1);
         opacity: 0.8;
     }
 }

 .coming-soon-title {
     font-size: 3.5rem;
     font-weight: 700;
     margin-bottom: 1rem;
     background: var(--bg-gradient);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     position: relative;
     z-index: 2;
 }

 .coming-soon-subtitle {
     font-size: 1.5rem;
     color: var(--text-secondary);
     max-width: 700px;
     margin: 0 auto 2rem;
     line-height: 1.6;
     position: relative;
     z-index: 2;
 }

 .launch-badge {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     background: var(--bg-gradient);
     color: white;
     padding: 0.75rem 1.5rem;
     border-radius: 50px;
     font-weight: 600;
     font-size: 1rem;
     box-shadow: var(--shadow-lg);
     position: relative;
     z-index: 2;
     animation: bounce 2s infinite;
 }

 @keyframes bounce {

     0%,
     20%,
     50%,
     80%,
     100% {
         transform: translateY(0);
     }

     40% {
         transform: translateY(-10px);
     }

     60% {
         transform: translateY(-5px);
     }
 }

 .features-preview {
     margin: 4rem 0;
 }

 .section-title {
     text-align: center;
     font-size: 2.5rem;
     font-weight: 700;
     margin-bottom: 3rem;
     color: var(--text-primary);
 }

 /* .how-it-works-body .features-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
     gap: 2rem;
     margin: 3rem 0;
 } */

 .feature-card {
     background: var(--bg-primary);
     border-radius: var(--border-radius);
     padding: 2.5rem;
     box-shadow: var(--shadow-md);
     text-align: center;
     transition: var(--transition);
     border: 2px solid transparent;
     position: relative;
     overflow: hidden;
 }

 .feature-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 4px;
     background: var(--bg-gradient);
 }

 .feature-card:hover {
     transform: translateY(-8px);
     box-shadow: var(--shadow-xl);
     border-color: var(--primary-color);
 }

 .feature-icon {
     width: 80px;
     height: 80px;
     border-radius: 50%;
     background: var(--bg-gradient);
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 2rem;
     font-size: 2rem;
     color: white;
     box-shadow: var(--shadow-md);
 }

 .feature-title {
     font-size: 1.75rem;
     font-weight: 600;
     color: var(--text-primary);
     margin-bottom: 1rem;
 }

 .feature-description {
     color: var(--text-secondary);
     line-height: 1.7;
     font-size: 1.1rem;
     margin-bottom: 1.5rem;
 }

 .feature-status {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     background: rgba(102, 126, 234, 0.1);
     color: var(--primary-color);
     padding: 0.5rem 1rem;
     border-radius: 20px;
     font-weight: 500;
     font-size: 0.875rem;
 }

 .status-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: var(--primary-color);
     animation: blink 1.5s infinite;
 }

 @keyframes blink {

     0%,
     50% {
         opacity: 1;
     }

     51%,
     100% {
         opacity: 0.3;
     }
 }

 .timeline-section {
     margin: 5rem 0;
     padding: 3rem 2rem;
     background: rgba(102, 126, 234, 0.03);
     border-radius: var(--border-radius);
 }

 .timeline {
     max-width: 800px;
     margin: 0 auto;
     position: relative;
 }

 .timeline::before {
     content: '';
     position: absolute;
     left: 50%;
     top: 0;
     bottom: 0;
     width: 2px;
     background: var(--bg-gradient);
     transform: translateX(-50%);
 }

 .timeline-item {
     display: flex;
     align-items: center;
     margin-bottom: 3rem;
     position: relative;
 }

 .timeline-item:nth-child(odd) {
     flex-direction: row-reverse;
 }

 .timeline-content {
     flex: 1;
     background: var(--bg-primary);
     padding: 2rem;
     border-radius: var(--border-radius);
     box-shadow: var(--shadow-sm);
     margin: 0 2rem;
     position: relative;
 }

 .timeline-content::before {
     content: '';
     position: absolute;
     top: 50%;
     width: 0;
     height: 0;
     border: 10px solid transparent;
     transform: translateY(-50%);
 }

 .timeline-item:nth-child(odd) .timeline-content::before {
     left: -20px;
     border-right-color: var(--bg-primary);
 }

 .timeline-item:nth-child(even) .timeline-content::before {
     right: -20px;
     border-left-color: var(--bg-primary);
 }

 .timeline-date {
     font-weight: 600;
     color: var(--primary-color);
     font-size: 1.1rem;
     margin-bottom: 0.5rem;
 }

 .timeline-title {
     font-size: 1.25rem;
     font-weight: 600;
     color: var(--text-primary);
     margin-bottom: 0.5rem;
 }

 .timeline-desc {
     color: var(--text-secondary);
     line-height: 1.6;
 }

 .timeline-dot {
     width: 20px;
     height: 20px;
     border-radius: 50%;
     background: var(--bg-gradient);
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     z-index: 2;
     box-shadow: 0 0 0 4px var(--bg-secondary);
 }

 .newsletter-section {
     text-align: center;
     margin: 5rem 0;
     padding: 4rem 2rem;
     background: var(--bg-gradient);
     border-radius: var(--border-radius);
     color: white;
 }

 .newsletter-title {
     font-size: 2.5rem;
     font-weight: 700;
     margin-bottom: 1rem;
 }

 .newsletter-text {
     font-size: 1.2rem;
     margin-bottom: 2rem;
     opacity: 0.9;
     max-width: 600px;
     margin-left: auto;
     margin-right: auto;
 }

 .newsletter-form {
     display: flex;
     max-width: 400px;
     margin: 0 auto;
     gap: 1rem;
 }

 .newsletter-input {
     flex: 1;
     padding: 1rem;
     border: none;
     border-radius: 8px;
     font-size: 1rem;
     outline: none;
 }

 .newsletter-btn {
     background: white;
     color: var(--primary-color);
     border: none;
     border-radius: 8px;
     padding: 1rem 2rem;
     font-weight: 600;
     cursor: pointer;
     transition: var(--transition);
     white-space: nowrap;
 }

 .newsletter-btn:hover {
     transform: translateY(-2px);
     box-shadow: var(--shadow-lg);
 }

 .social-proof {
     margin: 4rem 0;
     text-align: center;
 }

 .stats-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 2rem;
     margin: 2rem 0;
 }

 .stat-item {
     background: var(--bg-primary);
     padding: 2rem;
     border-radius: var(--border-radius);
     box-shadow: var(--shadow-sm);
 }

 .stat-number {
     font-size: 3rem;
     font-weight: 700;
     background: var(--bg-gradient);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     margin-bottom: 0.5rem;
 }

 .stat-label {
     color: var(--text-secondary);
     font-weight: 500;
 }

 @media (max-width: 768px) {
     .coming-soon-title {
         font-size: 2.5rem;
     }

     .features-grid {
         grid-template-columns: 1fr;
         gap: 1.5rem;
     }

     .timeline::before {
         left: 20px;
     }

     .timeline-item {
         flex-direction: row !important;
         padding-left: 50px;
     }

     .timeline-content {
         margin: 0;
     }

     .timeline-content::before {
         left: -20px !important;
         right: auto !important;
         border-right-color: var(--bg-primary) !important;
         border-left-color: transparent !important;
     }

     .timeline-dot {
         left: 20px;
     }

     .newsletter-form {
         flex-direction: column;
     }

     .newsletter-section {
         padding: 3rem 1rem;
     }
 }