:root {
         /* Light Theme */
         --primary-color: #2563eb;
         --secondary-color: #0ea5e9;
         --accent-color: #06b6d4;
         --dark-color: #1e293b;
         --light-color: #f8fafc;
         --text-primary: #0f172a;
         --text-secondary: #64748b;
         --bg-primary: #ffffff;
         --bg-secondary: #f8fafc;
         --border-color: #e2e8f0;
         --shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
         --gradient-primary: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%);
         --gradient-hero: linear-gradient(135deg, #1e293b 0%, #2563eb 100%);
     }

     [data-theme="dark"] {
         /* Dark Theme */
         --primary-color: #3b82f6;
         --secondary-color: #0ea5e9;
         --accent-color: #06b6d4;
         --dark-color: #0f172a;
         --light-color: #1e293b;
         --text-primary: #f8fafc;
         --text-secondary: #94a3b8;
         --bg-primary: #0f172a;
         --bg-secondary: #1e293b;
         --border-color: #334155;
         --shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
         --gradient-primary: linear-gradient(135deg, #3b82f6 0%, #0ea5e9 100%);
         --gradient-hero: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
     }

     * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
     }

     body {
         font-family: 'Inter', sans-serif;
         line-height: 1.6;
         color: var(--text-primary);
         background-color: var(--bg-primary);
         transition: all 0.3s ease;
         overflow-x: hidden;
     }

     /* Header Styles */
     /* Header Styles */
     .header {
         position: fixed;
         top: 0;
         width: 100%;
         background: rgba(255, 255, 255, 0.95);
         backdrop-filter: blur(20px);
         border-bottom: 1px solid var(--border-color);
         z-index: 1000;
         transition: all 0.3s ease;
     }

     [data-theme="dark"] .header {
         background: rgba(15, 23, 42, 0.95);
     }

     .header.scrolled {
         box-shadow: var(--shadow);
     }

     .nav-container {
         max-width: 1200px;
         margin: 0 auto;
         padding: 1rem 2rem;
         display: flex;
         align-items: center;
         justify-content: space-between;
     }

     .logo {
         display: flex;
         align-items: center;
         gap: 0.5rem;
         font-size: 1.5rem;
         font-weight: 700;
         color: var(--primary-color);
         text-decoration: none;
         transition: transform 0.3s ease;
     }

     .logo:hover {
         transform: scale(1.02);
     }

     .logo-container {
         display: flex;
         align-items: center;
     }

     .logo-icon {
         width: 40px;
         height: 40px;
         background: var(--gradient-primary);
         border-radius: 8px;
         display: flex;
         align-items: center;
         justify-content: center;
         color: white;
     }

     .logo-image {
         width: 40px;
         height: 40px;
         border-radius: 8px;
         object-fit: contain;
     }

     .logo-text {
         font-size: 1.5rem;
         font-weight: 700;
         color: var(--primary-color);
     }

     .nav-menu {
         display: flex;
         list-style: none;
         gap: 1.5rem;
         align-items: center;
         margin: 0;
         padding: 0;
     }

     .nav-menu li {
         margin: 0;
     }

     .nav-link {
         text-decoration: none;
         color: var(--text-primary);
         font-weight: 500;
         transition: all 0.3s ease;
         position: relative;
         padding: 0.5rem 0;
         white-space: nowrap;
     }

     .nav-link:hover {
         color: var(--primary-color);
     }

     .nav-link::after {
         content: '';
         position: absolute;
         bottom: -5px;
         left: 0;
         width: 0;
         height: 2px;
         background: var(--gradient-primary);
         transition: width 0.3s ease;
     }

     .nav-link:hover::after {
         width: 100%;
     }

     .auth-buttons {
         display: flex;
         align-items: center;
         gap: 0.75rem;
         margin-left: 1rem;
     }

     .auth-link {
         text-decoration: none;
         font-weight: 500;
         padding: 0.5rem 1rem;
         border-radius: 6px;
         transition: all 0.3s ease;
         font-size: 0.9rem;
         white-space: nowrap;
     }

     .auth-link.login {
         color: var(--primary-color);
         border: 1px solid var(--primary-color);
         background: transparent;
     }

     .auth-link.login:hover {
         background: var(--primary-color);
         color: white;
     }

     .auth-link.register {
         background: var(--gradient-primary);
         color: white;
         border: 1px solid transparent;
     }

     .auth-link.register:hover {
         transform: translateY(-1px);
         box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
     }

     .workspace-link {
         background: var(--gradient-primary);
         color: white !important;
         padding: 0.5rem 1rem;
         border-radius: 6px;
         text-decoration: none;
         font-weight: 500;
         transition: all 0.3s ease;
         display: inline-flex;
         align-items: center;
         gap: 0.5rem;
         font-size: 0.9rem;
         white-space: nowrap;
     }

     .workspace-link:hover {
         transform: translateY(-1px);
         box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
     }

     .logout-btn {
         background: transparent;
         border: 1px solid var(--border-color);
         color: var(--text-primary);
         padding: 0.5rem 1rem;
         border-radius: 6px;
         cursor: pointer;
         font-weight: 500;
         transition: all 0.3s ease;
         font-size: 0.9rem;
         white-space: nowrap;
     }

     .logout-btn:hover {
         background: #ef4444;
         color: white;
         border-color: #ef4444;
     }

     .header-controls {
         display: flex;
         align-items: center;
         gap: 0.5rem;
     }

     .theme-toggle {
         background: none;
         border: none;
         font-size: 1.2rem;
         color: var(--text-primary);
         cursor: pointer;
         padding: 0.5rem;
         border-radius: 8px;
         transition: all 0.3s ease;
         width: 40px;
         height: 40px;
         display: flex;
         align-items: center;
         justify-content: center;
     }

     .theme-toggle:hover {
         background: var(--bg-secondary);
     }

     .mobile-menu-toggle {
         display: none;
         background: none;
         border: none;
         font-size: 1.5rem;
         color: var(--text-primary);
         cursor: pointer;
         padding: 0.5rem;
         border-radius: 8px;
         transition: all 0.3s ease;
         width: 40px;
         height: 40px;
         align-items: center;
         justify-content: center;
     }

     .mobile-menu-toggle:hover {
         background: var(--bg-secondary);
     }

     /* Responsive Design */
     @media (max-width: 1024px) {
         .nav-menu {
             gap: 1rem;
         }

         .auth-buttons {
             gap: 0.5rem;
             margin-left: 0.5rem;
         }
     }

     @media (max-width: 768px) {
         .nav-menu {
             display: none;
             position: absolute;
             top: 100%;
             left: 0;
             right: 0;
             background: var(--bg-primary);
             border-top: 1px solid var(--border-color);
             flex-direction: column;
             padding: 2rem;
             gap: 1.5rem;
             box-shadow: var(--shadow);
         }

         .nav-menu.active {
             display: flex;
         }

         .nav-menu li {
             width: 100%;
         }

         .nav-link {
             display: block;
             text-align: center;
             padding: 0.75rem 0;
             border-bottom: 1px solid var(--border-color);
         }

         .nav-link:last-child {
             border-bottom: none;
         }

         .mobile-menu-toggle {
             display: flex;
         }

         .auth-buttons {
             flex-direction: column;
             width: 100%;
             gap: 1rem;
             margin-left: 0;
             margin-top: 1rem;
             padding-top: 1rem;
             border-top: 1px solid var(--border-color);
         }

         .auth-link,
         .workspace-link,
         .logout-btn {
             width: 100%;
             text-align: center;
             justify-content: center;
             padding: 0.75rem 1rem;
         }

         .hero-container {
             grid-template-columns: 1fr;
             text-align: center;
             gap: 2rem;
         }

         .hero-content h1 {
             font-size: 2.5rem;
         }

         .stats-grid {
             grid-template-columns: repeat(3, 1fr);
             gap: 1rem;
         }

         .about-container,
         .feature-item {
             grid-template-columns: 1fr;
             gap: 2rem;
         }

         .feature-item:nth-child(even) .feature-content,
         .feature-item:nth-child(even) .feature-image {
             order: unset;
         }

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

         .services-grid {
             grid-template-columns: 1fr;
         }

         .nav-container {
             padding: 1rem 1.5rem;
         }
     }

     @media (max-width: 480px) {
         .hero-content h1 {
             font-size: 2rem;
         }

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

         .nav-container {
             padding: 1rem;
         }

         .logo-text {
             font-size: 1.25rem;
         }

         .logo-icon,
         .logo-image {
             width: 35px;
             height: 35px;
         }
     }

     @media (max-width: 320px) {
         .nav-container {
             padding: 0.75rem 0.5rem;
         }

         .logo {
             gap: 0.4rem;
         }

         .logo-text {
             font-size: 1.1rem;
         }

         .logo-icon,
         .logo-image {
             width: 32px;
             height: 32px;
         }

         .theme-toggle,
         .mobile-menu-toggle {
             width: 36px;
             height: 36px;
             font-size: 1.1rem;
         }

         .header-controls {
             gap: 0.25rem;
         }
     }

     /* Hero Section */
     .hero {
         min-height: 100vh;
         background: var(--gradient-hero);
         display: flex;
         align-items: center;
         position: relative;
         overflow: hidden;
         padding-top: 80px;
         /* Compensar altura do header fixo */
     }

     .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.5;
         pointer-events: none;
         /* Evitar interferência com cliques */
     }

     .hero-container {
         max-width: 1200px;
         margin: 0 auto;
         padding: 0 2rem;
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 4rem;
         align-items: center;
         position: relative;
         z-index: 2;
         width: 100%;
     }

     .hero-content h1 {
         font-size: 3.5rem;
         font-weight: 800;
         color: white;
         margin-bottom: 1.5rem;
         line-height: 1.2;
     }

     .hero-content p {
         font-size: 1.25rem;
         color: rgba(255, 255, 255, 0.9);
         margin-bottom: 2rem;
         line-height: 1.6;
     }

     .stats-grid {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 2rem;
         margin-top: 3rem;
     }

     .stat-item {
         text-align: center;
         color: white;
     }

     .stat-number {
         font-size: 2.5rem;
         font-weight: 800;
         color: var(--secondary-color);
         display: block;
     }

     .stat-label {
         font-size: 0.9rem;
         opacity: 0.8;
     }

     .hero-visual {
         display: flex;
         justify-content: center;
         align-items: center;
     }

     .hero-card {
         background: rgba(255, 255, 255, 0.1);
         backdrop-filter: blur(20px);
         border: 1px solid rgba(255, 255, 255, 0.2);
         border-radius: 20px;
         padding: 3rem;
         text-align: center;
         color: white;
         transform: perspective(1000px) rotateY(-15deg);
         transition: transform 0.3s ease;
         will-change: transform;
         /* Otimização de performance */
     }

     .hero-card:hover {
         transform: perspective(1000px) rotateY(0deg);
     }

     /* Clients Section */
     .clients {
         padding: 4rem 0;
         background: var(--bg-secondary);
         position: relative;
         z-index: 1;
     }

     .clients-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
         gap: 2rem;
         max-width: 1200px;
         margin: 0 auto;
         padding: 0 2rem;
     }

     .client-logo {
         background: var(--bg-primary);
         border-radius: 12px;
         padding: 1.5rem;
         display: flex;
         align-items: center;
         justify-content: center;
         box-shadow: var(--shadow);
         transition: all 0.3s ease;
         min-height: 100px;
     }

     .client-logo:hover {
         transform: translateY(-5px) scale(1.02);
         box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
     }

     .client-logo img {
         max-width: 120px;
         max-height: 60px;
         width: auto;
         height: auto;
         object-fit: contain;
         filter: grayscale(0.8);
         transition: filter 0.3s ease;
     }

     .client-logo:hover img {
         filter: grayscale(0);
     }

     .client-logo span {
         font-weight: 600;
         color: var(--text-secondary);
         font-size: 0.9rem;
         text-align: center;
     }

     /* Services Section */
     .services {
         padding: 6rem 0;
         background: var(--bg-primary);
         position: relative;
         z-index: 1;
     }

     .services .container {
         max-width: 1200px;
         margin: 0 auto;
         padding: 0 2rem;
     }

     .section-header {
         text-align: center;
         margin-bottom: 4rem;
     }

     .section-title {
         font-size: 3rem;
         font-weight: 800;
         color: var(--text-primary);
         margin-bottom: 1rem;
         line-height: 1.2;
     }

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

     .services-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
         gap: 2rem;
         align-items: stretch;
     }

     .service-card {
         background: var(--bg-primary);
         border: 1px solid var(--border-color);
         border-radius: 16px;
         padding: 2rem;
         transition: all 0.3s ease;
         position: relative;
         overflow: hidden;
         display: flex;
         flex-direction: column;
         height: 100%;
     }

     .service-card::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         height: 4px;
         background: var(--gradient-primary);
         transform: scaleX(0);
         transition: transform 0.3s ease;
         transform-origin: left;
     }

     .service-card:hover {
         transform: translateY(-8px);
         box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
         border-color: var(--primary-color);
     }

     [data-theme="dark"] .service-card:hover {
         box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
     }

     .service-card:hover::before {
         transform: scaleX(1);
     }

     .service-icon {
         width: 70px;
         height: 70px;
         background: var(--gradient-primary);
         border-radius: 16px;
         display: flex;
         align-items: center;
         justify-content: center;
         color: white;
         font-size: 1.75rem;
         margin-bottom: 1.5rem;
         transition: transform 0.3s ease;
     }

     .service-card:hover .service-icon {
         transform: scale(1.1) rotate(5deg);
     }

     .service-title {
         font-size: 1.35rem;
         font-weight: 700;
         color: var(--text-primary);
         margin-bottom: 1rem;
         line-height: 1.3;
     }

     .service-description {
         color: var(--text-secondary);
         margin-bottom: 2rem;
         line-height: 1.6;
         flex-grow: 1;
     }

     .service-link {
         color: var(--primary-color);
         text-decoration: none;
         font-weight: 600;
         display: inline-flex;
         align-items: center;
         gap: 0.5rem;
         transition: all 0.3s ease;
         margin-top: auto;
         padding: 0.5rem 0;
         border-radius: 4px;
     }

     .service-link:hover {
         gap: 1rem;
         color: var(--secondary-color);
     }

     .service-link i {
         transition: transform 0.3s ease;
     }

     .service-link:hover i {
         transform: translateX(4px);
     }


     /* About Section */
     .about {
         padding: 6rem 0;
         background: var(--bg-secondary);
     }

     .about-container {
         max-width: 1200px;
         margin: 0 auto;
         padding: 0 2rem;
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 4rem;
         align-items: center;
     }

     .about-content h2 {
         font-size: 2.5rem;
         font-weight: 700;
         color: var(--text-primary);
         margin-bottom: 1.5rem;
     }

     .about-content p {
         color: var(--text-secondary);
         margin-bottom: 2rem;
         font-size: 1.1rem;
     }

     .about-features {
         list-style: none;
     }

     .about-feature {
         display: flex;
         align-items: flex-start;
         gap: 1rem;
         margin-bottom: 2rem;
     }

     .feature-icon {
         width: 40px;
         height: 40px;
         background: var(--gradient-primary);
         border-radius: 8px;
         display: flex;
         align-items: center;
         justify-content: center;
         color: white;
         flex-shrink: 0;
     }

     .feature-content h4 {
         font-weight: 600;
         color: var(--text-primary);
         margin-bottom: 0.5rem;
     }

     .feature-content p {
         color: var(--text-secondary);
         margin: 0;
     }

     .about-image {
         position: relative;
     }


     /* All Services Section */
     .all-services {
         padding: 6rem 0;
         background: var(--bg-secondary);
         position: relative;
         z-index: 1;
     }

     .all-services .container {
         max-width: 1200px;
         margin: 0 auto;
         padding: 0 2rem;
     }

     .all-services .section-header {
         text-align: center;
         margin-bottom: 4rem;
     }

     .all-services .section-title {
         font-size: 3rem;
         font-weight: 800;
         color: var(--text-primary);
         margin-bottom: 1rem;
         line-height: 1.2;
     }

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

     .all-services .services-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
         gap: 2rem;
         align-items: stretch;
     }

     .all-services .service-card {
         background: var(--bg-primary);
         border: 1px solid var(--border-color);
         border-radius: 20px;
         padding: 2.5rem;
         transition: all 0.4s ease;
         position: relative;
         overflow: hidden;
         display: flex;
         flex-direction: column;
         height: 100%;
         cursor: pointer;
     }

     .all-services .service-card::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         height: 5px;
         background: var(--gradient-primary);
         transform: scaleX(0);
         transition: transform 0.4s ease;
         transform-origin: left;
     }

     .all-services .service-card::after {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         background: linear-gradient(135deg, transparent 0%, rgba(37, 99, 235, 0.02) 100%);
         opacity: 0;
         transition: opacity 0.4s ease;
     }

     .all-services .service-card:hover {
         transform: translateY(-12px) scale(1.02);
         box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
         border-color: var(--primary-color);
     }

     [data-theme="dark"] .all-services .service-card:hover {
         box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
     }

     .all-services .service-card:hover::before {
         transform: scaleX(1);
     }

     .all-services .service-card:hover::after {
         opacity: 1;
     }

     .all-services .service-icon {
         width: 80px;
         height: 80px;
         background: var(--gradient-primary);
         border-radius: 20px;
         display: flex;
         align-items: center;
         justify-content: center;
         color: white;
         font-size: 2rem;
         margin-bottom: 2rem;
         transition: all 0.4s ease;
         position: relative;
         z-index: 2;
     }

     .all-services .service-card:hover .service-icon {
         transform: scale(1.15) rotate(10deg);
         box-shadow: 0 10px 25px rgba(37, 99, 235, 0.3);
     }

     .all-services .service-title {
         font-size: 1.4rem;
         font-weight: 700;
         color: var(--text-primary);
         margin-bottom: 1.2rem;
         line-height: 1.3;
         position: relative;
         z-index: 2;
     }

     .all-services .service-description {
         color: var(--text-secondary);
         margin-bottom: 2rem;
         line-height: 1.7;
         flex-grow: 1;
         font-size: 1rem;
         position: relative;
         z-index: 2;
     }

     .all-services .service-link {
         color: var(--primary-color);
         text-decoration: none;
         font-weight: 700;
         display: inline-flex;
         align-items: center;
         gap: 0.5rem;
         transition: all 0.4s ease;
         margin-top: auto;
         padding: 1rem 0;
         border-radius: 8px;
         font-size: 1rem;
         position: relative;
         z-index: 2;
     }

     .all-services .service-link:hover {
         gap: 1.2rem;
         color: var(--secondary-color);
         transform: translateX(8px);
     }

     .all-services .service-link i {
         transition: all 0.4s ease;
         background: var(--gradient-primary);
         color: white;
         width: 24px;
         height: 24px;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 0.8rem;
     }

     .all-services .service-link:hover i {
         transform: translateX(6px) rotate(45deg);
         box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
     }

     /* ===== FEATURES SECTION MELHORADA ===== */

     /* Features Section */
     .features {
         padding: 8rem 0;
         background: var(--bg-primary);
         position: relative;
     }

     .features .container {
         max-width: 1200px;
         margin: 0 auto;
         padding: 0 2rem;
     }

     /* Section Header */
     .features .section-header {
         text-align: center;
         margin-bottom: 5rem;
     }

     .features .section-badge {
         display: inline-flex;
         align-items: center;
         gap: 0.5rem;
         background: rgba(37, 99, 235, 0.1);
         color: var(--primary-color);
         padding: 0.75rem 1.5rem;
         border-radius: 25px;
         font-size: 0.9rem;
         font-weight: 600;
         border: 1px solid rgba(37, 99, 235, 0.2);
         margin-bottom: 1.5rem;
         backdrop-filter: blur(10px);
     }

     .features .section-title {
         font-size: 3.2rem;
         font-weight: 900;
         color: var(--text-primary);
         margin-bottom: 1.5rem;
         line-height: 1.2;
     }

     .features .section-subtitle {
         font-size: 1.3rem;
         color: var(--text-secondary);
         max-width: 700px;
         margin: 0 auto;
         line-height: 1.7;
         font-weight: 400;
     }

     /* Features Container */
     .features-container {
         display: flex;
         flex-direction: column;
         gap: 6rem;
     }

     /* Feature Item */
     .feature-item {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 5rem;
         align-items: center;
         padding: 3rem;
         background: var(--bg-secondary);
         border-radius: 24px;
         border: 1px solid var(--border-color);
         transition: all 0.4s ease;
         position: relative;
         overflow: hidden;
     }

     .feature-item::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         height: 4px;
         background: var(--gradient-primary);
         transform: scaleX(0);
         transition: transform 0.4s ease;
         transform-origin: left;
     }

     .feature-item:hover {
         transform: translateY(-8px);
         box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
         border-color: var(--primary-color);
     }

     [data-theme="dark"] .feature-item:hover {
         box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
     }

     .feature-item:hover::before {
         transform: scaleX(1);
     }

     .feature-item.reverse {
         direction: rtl;
     }

     .feature-item.reverse * {
         direction: ltr;
     }

     .feature-item.reverse .feature-content {
         order: 2;
     }

     .feature-item.reverse .feature-visual {
         order: 1;
     }

     /* Feature Header */
     .feature-header {
         display: flex;
         align-items: center;
         gap: 1rem;
         margin-bottom: 1.5rem;
     }

     .feature-icon {
         width: 60px;
         height: 60px;
         background: var(--gradient-primary);
         border-radius: 16px;
         display: flex;
         align-items: center;
         justify-content: center;
         color: white;
         font-size: 1.5rem;
         transition: transform 0.3s ease;
     }

     .feature-item:hover .feature-icon {
         transform: scale(1.1) rotate(5deg);
     }

     .feature-badge {
         background: rgba(37, 99, 235, 0.1);
         color: var(--primary-color);
         padding: 0.5rem 1rem;
         border-radius: 20px;
         font-size: 0.85rem;
         font-weight: 600;
         border: 1px solid rgba(37, 99, 235, 0.2);
     }

     /* Feature Content */
     .feature-content h3 {
         font-size: 2.2rem;
         font-weight: 800;
         color: var(--text-primary);
         margin-bottom: 1.5rem;
         line-height: 1.3;
     }

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

     /* Feature Highlights */
     .feature-highlights {
         display: flex;
         flex-direction: column;
         gap: 0.75rem;
         margin-top: 1.5rem;
     }

     .highlight-item {
         display: flex;
         align-items: center;
         gap: 0.75rem;
         color: var(--text-secondary);
         font-weight: 500;
     }

     .highlight-item i {
         color: var(--success-color);
         font-size: 1.1rem;
     }

     /* Feature Benefits */
     .feature-benefits {
         list-style: none;
         margin: 0;
         padding: 0;
     }

     .feature-benefit {
         display: flex;
         align-items: flex-start;
         gap: 1rem;
         margin-bottom: 1rem;
         padding: 0.75rem 0;
         border-radius: 8px;
         transition: all 0.3s ease;
     }

     .feature-benefit:hover {
         background: rgba(37, 99, 235, 0.05);
         padding-left: 0.5rem;
         margin-left: -0.5rem;
         margin-right: -0.5rem;
     }

     .feature-benefit i {
         color: var(--success-color);
         font-size: 1.2rem;
         margin-top: 0.1rem;
         flex-shrink: 0;
     }

     .feature-benefit span {
         color: var(--text-secondary);
         font-weight: 500;
         line-height: 1.6;
     }

     /* Feature Visual */
     .feature-visual {
         display: flex;
         justify-content: center;
         align-items: center;
         position: relative;
     }

     .visual-card {
         background: var(--bg-primary);
         border: 1px solid var(--border-color);
         border-radius: 20px;
         padding: 2rem;
         transition: all 0.4s ease;
         position: relative;
         overflow: hidden;
         box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
     }

     [data-theme="dark"] .visual-card {
         box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
     }

     .feature-item:hover .visual-card {
         transform: scale(1.05);
         box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
     }

     [data-theme="dark"] .feature-item:hover .visual-card {
         box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
     }

     /* Visual Card - Branding */
     .visual-card .visual-icon {
         width: 80px;
         height: 80px;
         background: var(--gradient-primary);
         border-radius: 20px;
         display: flex;
         align-items: center;
         justify-content: center;
         color: white;
         font-size: 2rem;
         margin: 0 auto 1.5rem;
     }

     .visual-card .visual-content {
         text-align: center;
         margin-bottom: 2rem;
     }

     .visual-card .visual-content h4 {
         font-size: 1.3rem;
         font-weight: 700;
         color: var(--text-primary);
         margin-bottom: 0.5rem;
     }

     .visual-card .visual-content p {
         color: var(--text-secondary);
         font-size: 0.95rem;
         margin: 0;
     }

     .visual-decoration {
         display: flex;
         justify-content: center;
         gap: 1rem;
     }

     .decoration-dot {
         width: 16px;
         height: 16px;
         border-radius: 50%;
         animation: float 3s ease-in-out infinite;
     }

     .decoration-dot:nth-child(1) {
         animation-delay: 0s;
     }

     .decoration-dot:nth-child(2) {
         animation-delay: 0.5s;
     }

     .decoration-dot:nth-child(3) {
         animation-delay: 1s;
     }

     .decoration-dot:nth-child(4) {
         animation-delay: 1.5s;
     }

     @keyframes float {

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

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

     /* Visual Card - Mobile */
     .visual-card.mobile {
         padding: 1.5rem;
     }

     .mobile-frame {
         width: 200px;
         height: 350px;
         background: #1a1a1a;
         border-radius: 25px;
         padding: 15px;
         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
         position: relative;
     }

     .mobile-screen {
         width: 100%;
         height: 100%;
         background: var(--bg-primary);
         border-radius: 15px;
         overflow: hidden;
         position: relative;
     }

     .mobile-header {
         height: 40px;
         background: var(--bg-secondary);
         display: flex;
         align-items: center;
         justify-content: center;
         border-bottom: 1px solid var(--border-color);
     }

     .mobile-dots {
         display: flex;
         gap: 0.5rem;
     }

     .mobile-dots span {
         width: 6px;
         height: 6px;
         border-radius: 50%;
         background: var(--text-secondary);
         opacity: 0.5;
     }

     .mobile-content {
         padding: 2rem 1rem;
         text-align: center;
         display: flex;
         flex-direction: column;
         justify-content: center;
         height: calc(100% - 40px);
     }

     .mobile-content .mobile-icon {
         width: 60px;
         height: 60px;
         background: var(--gradient-primary);
         border-radius: 15px;
         display: flex;
         align-items: center;
         justify-content: center;
         color: white;
         font-size: 1.5rem;
         margin: 0 auto 1rem;
     }

     .mobile-content h4 {
         font-size: 1rem;
         font-weight: 700;
         color: var(--text-primary);
         margin-bottom: 0.5rem;
     }

     .mobile-content p {
         font-size: 0.8rem;
         color: var(--text-secondary);
         margin: 0;
     }

     /* Visual Card - Website */
     .visual-card.website {
         padding: 1rem;
     }

     .browser-frame {
         width: 280px;
         height: 200px;
         background: var(--bg-primary);
         border-radius: 12px;
         border: 1px solid var(--border-color);
         overflow: hidden;
         box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
     }

     [data-theme="dark"] .browser-frame {
         box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
     }

     .browser-header {
         height: 35px;
         background: var(--bg-secondary);
         display: flex;
         align-items: center;
         padding: 0 1rem;
         border-bottom: 1px solid var(--border-color);
         gap: 1rem;
     }

     .browser-dots {
         display: flex;
         gap: 0.4rem;
     }

     .browser-dots span {
         width: 10px;
         height: 10px;
         border-radius: 50%;
     }

     .browser-dots .red {
         background: #ff5f57;
     }

     .browser-dots .yellow {
         background: #ffbd2e;
     }

     .browser-dots .green {
         background: #28ca42;
     }

     .browser-url {
         display: flex;
         align-items: center;
         gap: 0.5rem;
         background: var(--bg-primary);
         padding: 0.25rem 0.75rem;
         border-radius: 6px;
         border: 1px solid var(--border-color);
         flex: 1;
     }

     .browser-url i {
         color: var(--success-color);
         font-size: 0.8rem;
     }

     .browser-url span {
         color: var(--text-secondary);
         font-size: 0.8rem;
         font-weight: 500;
     }

     .browser-content {
         height: calc(100% - 35px);
         padding: 1rem;
     }

     .website-preview {
         height: 100%;
         display: flex;
         flex-direction: column;
     }

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

     .preview-logo {
         width: 30px;
         height: 20px;
         background: var(--gradient-primary);
         border-radius: 4px;
     }

     .preview-nav {
         display: flex;
         gap: 0.5rem;
     }

     .preview-nav span {
         width: 40px;
         height: 8px;
         background: var(--border-color);
         border-radius: 4px;
     }

     .preview-content {
         flex: 1;
     }

     .preview-hero {
         text-align: center;
         margin-top: 1rem;
     }

     .hero-text {
         width: 80%;
         height: 12px;
         background: var(--border-color);
         border-radius: 6px;
         margin: 0 auto 0.75rem;
     }

     .hero-button {
         width: 60px;
         height: 20px;
         background: var(--gradient-primary);
         border-radius: 10px;
         margin: 0 auto;
     }

     /* Loading Animation */
     .feature-item.loading {
         opacity: 0;
         transform: translateY(30px);
         transition: all 0.6s ease;
     }

     .feature-item.loading.loaded {
         opacity: 1;
         transform: translateY(0);
     }

     /* Responsive Design */
     @media (max-width: 768px) {
         .features {
             padding: 5rem 0;
         }

         .features .section-title {
             font-size: 2.5rem;
         }

         .features-container {
             gap: 4rem;
         }

         .feature-item {
             grid-template-columns: 1fr;
             gap: 2.5rem;
             padding: 2rem;
             text-align: center;
         }

         .feature-item.reverse .feature-content,
         .feature-item.reverse .feature-visual {
             order: unset;
         }

         .feature-content h3 {
             font-size: 1.8rem;
         }

         .mobile-frame {
             width: 160px;
             height: 280px;
         }

         .browser-frame {
             width: 240px;
             height: 160px;
         }
     }

     @media (max-width: 480px) {
         .features {
             padding: 4rem 0;
         }

         .features .section-title {
             font-size: 2rem;
         }

         .feature-item {
             padding: 1.5rem;
         }

         .feature-content h3 {
             font-size: 1.5rem;
         }

         .mobile-frame {
             width: 140px;
             height: 240px;
         }

         .browser-frame {
             width: 200px;
             height: 140px;
         }
     }

     /* Scroll Animation */
     @media (prefers-reduced-motion: no-preference) {
         .feature-item {
             animation: fadeInUp 0.6s ease-out forwards;
         }

         .feature-item:nth-child(1) {
             animation-delay: 0.1s;
         }

         .feature-item:nth-child(2) {
             animation-delay: 0.2s;
         }

         .feature-item:nth-child(3) {
             animation-delay: 0.3s;
         }
     }

     @keyframes fadeInUp {
         from {
             opacity: 0;
             transform: translateY(30px);
         }

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


     /* Testimonials Section */
     .testimonials {
         padding: 6rem 0;
         background: var(--bg-primary);
         position: relative;
         z-index: 1;
     }

     .testimonials .container {
         max-width: 800px;
         margin: 0 auto;
         padding: 0 2rem;
     }

     .testimonials .section-header {
         text-align: center;
         margin-bottom: 4rem;
     }

     .testimonials .section-title {
         font-size: 3rem;
         font-weight: 800;
         color: var(--text-primary);
         margin-bottom: 1rem;
         line-height: 1.2;
     }

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

     .testimonials-carousel {
         position: relative;
         max-width: 700px;
         margin: 0 auto;
     }

     .testimonial-wrapper {
         position: relative;
         overflow: hidden;
         border-radius: 24px;
     }

     .testimonial-slides {
         display: flex;
         transition: transform 0.6s ease-in-out;
     }

     .testimonial-slide {
         min-width: 100%;
         opacity: 0;
         transform: translateX(20px);
         transition: all 0.6s ease;
     }

     .testimonial-slide.active {
         opacity: 1;
         transform: translateX(0);
     }

     .testimonial-card {
         background: var(--bg-secondary);
         border: 1px solid var(--border-color);
         border-radius: 24px;
         padding: 3rem;
         text-align: center;
         position: relative;
         overflow: hidden;
         min-height: 400px;
         display: flex;
         flex-direction: column;
         justify-content: center;
     }

     .testimonial-card::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         background: linear-gradient(135deg, transparent 0%, rgba(37, 99, 235, 0.03) 100%);
         opacity: 1;
     }

     .quote-icon {
         width: 60px;
         height: 60px;
         background: var(--gradient-primary);
         border-radius: 15px;
         display: flex;
         align-items: center;
         justify-content: center;
         color: white;
         font-size: 1.5rem;
         margin: 0 auto 2rem;
         position: relative;
         z-index: 2;
         animation: float 3s ease-in-out infinite;
     }

     @keyframes float {

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

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

     .testimonial-content {
         margin-bottom: 2rem;
         position: relative;
         z-index: 2;
     }

     .testimonial-text {
         color: var(--text-primary);
         font-size: 1.2rem;
         line-height: 1.8;
         font-style: italic;
         margin-bottom: 2rem;
         position: relative;
     }

     .testimonial-text::before {
         content: '"';
         font-size: 5rem;
         color: var(--primary-color);
         opacity: 0.2;
         position: absolute;
         top: -2rem;
         left: 50%;
         transform: translateX(-50%);
         font-family: serif;
     }

     .stars {
         display: flex;
         gap: 0.5rem;
         justify-content: center;
         margin-bottom: 2rem;
     }

     .stars i {
         color: #fbbf24;
         font-size: 1.4rem;
         animation: sparkle 2s ease-in-out infinite;
         animation-delay: calc(var(--i) * 0.1s);
     }

     .stars i:nth-child(1) {
         --i: 0;
     }

     .stars i:nth-child(2) {
         --i: 1;
     }

     .stars i:nth-child(3) {
         --i: 2;
     }

     .stars i:nth-child(4) {
         --i: 3;
     }

     .stars i:nth-child(5) {
         --i: 4;
     }

     @keyframes sparkle {

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

         50% {
             transform: scale(1.2);
         }
     }

     .testimonial-author {
         display: flex;
         align-items: center;
         gap: 1.5rem;
         justify-content: center;
         position: relative;
         z-index: 2;
     }

     .author-avatar {
         position: relative;
     }

     .author-image {
         width: 80px;
         height: 80px;
         border-radius: 50%;
         object-fit: cover;
         border: 4px solid var(--primary-color);
         transition: all 0.3s ease;
     }

     .author-avatar::after {
         content: '';
         position: absolute;
         top: -4px;
         left: -4px;
         right: -4px;
         bottom: -4px;
         border: 2px solid var(--secondary-color);
         border-radius: 50%;
         animation: pulse-ring 2s ease-in-out infinite;
     }

     @keyframes pulse-ring {
         0% {
             transform: scale(1);
             opacity: 1;
         }

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

     .author-info {
         text-align: left;
     }

     .author-name {
         font-size: 1.3rem;
         font-weight: 700;
         color: var(--text-primary);
         margin-bottom: 0.25rem;
     }

     .author-position {
         color: var(--primary-color);
         font-weight: 600;
         font-size: 1rem;
         margin: 0;
     }

     /* Navigation */
     .testimonial-nav {
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
         background: var(--bg-primary);
         border: 2px solid var(--border-color);
         color: var(--text-primary);
         width: 50px;
         height: 50px;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         transition: all 0.3s ease;
         font-size: 1.2rem;
         z-index: 10;
     }

     .testimonial-nav:hover {
         background: var(--primary-color);
         color: white;
         border-color: var(--primary-color);
         transform: translateY(-50%) scale(1.1);
     }

     .testimonial-nav.prev {
         left: -25px;
     }

     .testimonial-nav.next {
         right: -25px;
     }

     /* Dots */
     .testimonial-dots {
         display: flex;
         justify-content: center;
         gap: 1rem;
         margin-top: 2rem;
     }

     .dot {
         width: 12px;
         height: 12px;
         border-radius: 50%;
         border: none;
         background: var(--border-color);
         cursor: pointer;
         transition: all 0.3s ease;
     }

     .dot.active {
         background: var(--primary-color);
         transform: scale(1.3);
     }

     .dot:hover {
         background: var(--secondary-color);
         transform: scale(1.2);
     }

     /* CTA Section */
     .cta {
         padding: 6rem 0;
         background: var(--gradient-hero);
         color: white;
         text-align: center;
         position: relative;
         overflow: hidden;
     }

     .cta-background {
         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="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="2" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
         opacity: 0.5;
     }

     .cta-container {
         max-width: 800px;
         margin: 0 auto;
         padding: 0 2rem;
         position: relative;
         z-index: 2;
     }

     .cta-title {
         font-size: 3rem;
         font-weight: 800;
         margin-bottom: 1.5rem;
         line-height: 1.2;
     }

     .cta-description {
         font-size: 1.2rem;
         margin-bottom: 3rem;
         opacity: 0.9;
         line-height: 1.6;
     }

     .cta-buttons {
         display: flex;
         gap: 1rem;
         justify-content: center;
         flex-wrap: wrap;
     }

     .cta-btn {
         padding: 1rem 2rem;
         border-radius: 12px;
         text-decoration: none;
         font-weight: 600;
         transition: all 0.3s ease;
         display: inline-flex;
         align-items: center;
         gap: 0.5rem;
     }

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

     .cta-btn.primary:hover {
         transform: translateY(-2px);
         box-shadow: 0 10px 25px rgba(255, 255, 255, 0.3);
     }

     .cta-btn.secondary {
         background: rgba(255, 255, 255, 0.1);
         color: white;
         border: 2px solid rgba(255, 255, 255, 0.3);
     }

     .cta-btn.secondary:hover {
         transform: translateY(-2px);
         background: rgba(255, 255, 255, 0.2);
     }

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

         .cta-buttons {
             flex-direction: column;
             align-items: center;
         }

         .cta-btn {
             width: 100%;
             max-width: 280px;
             justify-content: center;
         }
     }

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

         .cta-description {
             font-size: 1.1rem;
         }
     }

     /* FAQ Section */
     .faq {
         padding: 6rem 0;
         background: var(--bg-secondary);
     }

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

     .faq-item {
         background: var(--bg-primary);
         border: 1px solid var(--border-color);
         border-radius: 12px;
         margin-bottom: 1rem;
         overflow: hidden;
     }

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

     .faq-question:hover {
         background: var(--bg-secondary);
     }

     .faq-answer {
         padding: 0 1.5rem;
         max-height: 0;
         overflow: hidden;
         transition: all 0.3s ease;
     }

     .faq-answer.active {
         padding: 0 1.5rem 1.5rem;
         max-height: 200px;
     }

     .faq-answer p {
         color: var(--text-secondary);
         line-height: 1.6;
     }

     /* Footer */
     .footer {
         background: var(--dark-color);
         color: white;
         padding: 4rem 0 2rem;
         position: relative;
     }

     .footer-container {
         max-width: 1200px;
         margin: 0 auto;
         padding: 0 2rem;
         display: grid;
         grid-template-columns: 2fr 1fr 1fr 1.5fr;
         gap: 3rem;
     }

     /* Company Info Section */
     .footer-section.company-info {
         max-width: 350px;
     }

     .footer-logo {
         display: flex;
         align-items: center;
         gap: 0.75rem;
         margin-bottom: 1.5rem;
     }

     .footer-logo .logo-icon {
         width: 45px;
         height: 45px;
         background: var(--gradient-primary);
         border-radius: 10px;
         display: flex;
         align-items: center;
         justify-content: center;
         color: white;
         font-size: 1.2rem;
     }

     .footer-logo h4 {
         margin: 0;
         color: white;
         font-size: 1.5rem;
         font-weight: 700;
     }

     .company-description {
         opacity: 0.9;
         line-height: 1.7;
         margin-bottom: 2rem;
         font-size: 0.95rem;
     }

     /* Section Headers */
     .footer-section h4 {
         font-size: 1.3rem;
         font-weight: 700;
         margin-bottom: 1.5rem;
         color: var(--secondary-color);
         position: relative;
     }

     .footer-section h4::after {
         content: '';
         position: absolute;
         bottom: -5px;
         left: 0;
         width: 30px;
         height: 2px;
         background: var(--gradient-primary);
         border-radius: 1px;
     }

     /* Footer Links */
     .footer-links {
         list-style: none;
         margin: 0;
         padding: 0;
     }

     .footer-links li {
         margin-bottom: 0.75rem;
     }

     .footer-links a {
         color: rgba(255, 255, 255, 0.8);
         text-decoration: none;
         transition: all 0.3s ease;
         font-size: 0.95rem;
         display: block;
         padding: 0.25rem 0;
     }

     .footer-links a:hover {
         color: var(--secondary-color);
         transform: translateX(5px);
     }

     /* Contact Info */
     .contact-info .contact-item {
         margin-bottom: 1.5rem;
     }

     .contact-info h5 {
         font-size: 1rem;
         font-weight: 600;
         color: var(--secondary-color);
         margin-bottom: 0.5rem;
     }

     .contact-info p {
         opacity: 0.9;
         margin: 0;
         line-height: 1.6;
         font-size: 0.95rem;
     }

     /* Social Links */
     .social-links {
         display: flex;
         gap: 1rem;
         flex-wrap: wrap;
     }

     .social-link {
         width: 42px;
         height: 42px;
         background: rgba(255, 255, 255, 0.1);
         border-radius: 10px;
         display: flex;
         align-items: center;
         justify-content: center;
         color: white;
         text-decoration: none;
         transition: all 0.3s ease;
         font-size: 1.1rem;
         border: 1px solid rgba(255, 255, 255, 0.1);
     }

     .social-link:hover {
         background: var(--primary-color);
         transform: translateY(-3px);
         box-shadow: 0 5px 15px rgba(37, 99, 235, 0.4);
     }

     /* Specific social colors on hover */
     .social-link:hover:nth-child(1) {
         background: #1877f2;
     }

     /* Facebook */
     .social-link:hover:nth-child(2) {
         background: #E4405F;
     }

     /* Instagram */
     .social-link:hover:nth-child(3) {
         background: #25D366;
     }

     /* WhatsApp */
     .social-link:hover:nth-child(4) {
         background: #000000;
     }

     /* TikTok */
     .social-link:hover:nth-child(5) {
         background: #0077B5;
     }

     /* LinkedIn */
     .social-link:hover:nth-child(6) {
         background: #0088cc;
     }

     /* Telegram */
     .social-link:hover:nth-child(7) {
         background: #FF0000;
     }

     /* YouTube */

     /* Footer Bottom */
     .footer-bottom {
         border-top: 1px solid rgba(255, 255, 255, 0.1);
         margin-top: 3rem;
         padding-top: 2rem;
         text-align: center;
         opacity: 0.7;
     }

     .footer-bottom p {
         margin: 0;
         font-size: 0.9rem;
     }

     /* Responsive */
     @media (max-width: 1024px) {
         .footer-container {
             grid-template-columns: 1fr 1fr;
             gap: 2.5rem;
         }

         .footer-section.company-info {
             max-width: none;
         }
     }

     @media (max-width: 768px) {
         .footer-container {
             grid-template-columns: 1fr;
             gap: 2rem;
         }

         .footer {
             padding: 3rem 0 1.5rem;
         }

         .social-links {
             justify-content: center;
         }
     }

     @media (max-width: 480px) {
         .footer-container {
             padding: 0 1rem;
         }

         .footer-logo {
             justify-content: center;
             text-align: center;
         }

         .company-description {
             text-align: center;
         }

         .footer-section h4 {
             text-align: center;
         }

         .footer-section h4::after {
             left: 50%;
             transform: translateX(-50%);
         }
     }

     /* Affiliate Program Section */
     .affiliate-program {
         padding: 6rem 0;
         background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
         color: white;
         position: relative;
         overflow: hidden;
     }

     .affiliate-background {
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         z-index: 1;
     }

     .floating-icons {
         position: absolute;
         width: 100%;
         height: 100%;
         opacity: 0.1;
     }

     .floating-icons i {
         position: absolute;
         font-size: 3rem;
         animation: float 8s ease-in-out infinite;
     }

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

     .floating-icons i:nth-child(2) {
         top: 60%;
         left: 80%;
         animation-delay: 2s;
     }

     .floating-icons i:nth-child(3) {
         top: 40%;
         left: 60%;
         animation-delay: 4s;
     }

     @keyframes float {

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

         50% {
             transform: translateY(-30px) rotate(180deg);
         }
     }

     .affiliate-program .container {
         max-width: 1000px;
         margin: 0 auto;
         padding: 0 2rem;
         position: relative;
         z-index: 5;
     }

     .affiliate-content {
         text-align: center;
     }

     /* Intro */
     .affiliate-intro {
         margin-bottom: 4rem;
     }

     .affiliate-badge {
         display: inline-flex;
         align-items: center;
         gap: 0.5rem;
         background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
         color: white;
         padding: 0.75rem 1.5rem;
         border-radius: 50px;
         font-weight: 600;
         font-size: 0.9rem;
         margin-bottom: 2rem;
         animation: pulse 2s infinite;
     }

     .affiliate-title {
         font-size: 3rem;
         font-weight: 900;
         line-height: 1.2;
         margin-bottom: 1.5rem;
     }

     .affiliate-title .highlight {
         background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-clip: text;
     }

     .affiliate-description {
         font-size: 1.2rem;
         opacity: 0.9;
         max-width: 600px;
         margin: 0 auto;
         line-height: 1.6;
     }

     /* Highlights */
     .affiliate-highlights {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
         gap: 2rem;
         margin-bottom: 4rem;
     }

     .highlight-item {
         background: rgba(255, 255, 255, 0.05);
         backdrop-filter: blur(10px);
         border: 1px solid rgba(255, 255, 255, 0.1);
         border-radius: 16px;
         padding: 2rem;
         display: flex;
         align-items: center;
         gap: 1.5rem;
         transition: all 0.3s ease;
     }

     .highlight-item:hover {
         transform: translateY(-5px);
         background: rgba(255, 255, 255, 0.1);
         border-color: rgba(251, 191, 36, 0.3);
     }

     .highlight-icon {
         width: 60px;
         height: 60px;
         background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
         border-radius: 12px;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 1.5rem;
         color: white;
         flex-shrink: 0;
     }

     .highlight-content h4 {
         font-size: 1.2rem;
         font-weight: 700;
         margin-bottom: 0.5rem;
         color: white;
     }

     .highlight-content p {
         opacity: 0.8;
         margin: 0;
         font-size: 0.95rem;
     }

     /* CTA Stats */
     .cta-stats {
         display: flex;
         justify-content: center;
         gap: 3rem;
         margin-bottom: 3rem;
         flex-wrap: wrap;
     }

     .stat-item {
         text-align: center;
     }

     .stat-number {
         display: block;
         font-size: 2.5rem;
         font-weight: 800;
         color: #fbbf24;
         margin-bottom: 0.25rem;
         transition: transform 0.3s ease;
     }

     .stat-number.animated {
         transform: scale(1.05);
     }

     .stat-label {
         font-size: 0.9rem;
         opacity: 0.8;
     }

     /* CTA Buttons */
     .cta-buttons {
         display: flex;
         gap: 1.5rem;
         justify-content: center;
         flex-wrap: wrap;
         margin-bottom: 2rem;
     }

     .affiliate-btn {
         position: relative;
         display: inline-flex;
         align-items: center;
         gap: 0.75rem;
         padding: 1.25rem 2rem;
         border-radius: 12px;
         text-decoration: none;
         font-weight: 700;
         font-size: 1rem;
         transition: all 0.3s ease;
         overflow: hidden;
         white-space: nowrap;
     }

     .affiliate-btn.primary {
         background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
         color: white;
     }

     .affiliate-btn.primary:hover {
         transform: translateY(-3px);
         box-shadow: 0 12px 30px rgba(251, 191, 36, 0.4);
     }

     .affiliate-btn.secondary {
         background: rgba(255, 255, 255, 0.1);
         color: white;
         border: 2px solid rgba(255, 255, 255, 0.3);
     }

     .affiliate-btn.secondary:hover {
         transform: translateY(-3px);
         background: rgba(255, 255, 255, 0.2);
         border-color: rgba(255, 255, 255, 0.5);
     }

     .btn-shine {
         position: absolute;
         top: 0;
         left: -100%;
         width: 100%;
         height: 100%;
         background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
         transition: left 0.6s ease;
     }

     .affiliate-btn.primary:hover .btn-shine {
         left: 100%;
     }

     .cta-guarantee {
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 0.5rem;
         color: #10b981;
         font-weight: 600;
         font-size: 0.9rem;
     }

     .cta-guarantee i {
         font-size: 1.1rem;
     }

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

         .affiliate-highlights {
             grid-template-columns: 1fr;
         }

         .highlight-item {
             text-align: center;
             flex-direction: column;
             gap: 1rem;
         }

         .cta-stats {
             gap: 2rem;
         }

         .cta-buttons {
             flex-direction: column;
             align-items: center;
         }

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

     @media (max-width: 480px) {
         .affiliate-title {
             font-size: 1.8rem;
         }

         .cta-stats {
             gap: 1.5rem;
         }

         .stat-number {
             font-size: 2rem;
         }
     }



     /* Services Page Styles */

     /* Hero Section Compacto */
     .services-hero {
         min-height: 40vh;
         background: var(--gradient-hero);
         display: flex;
         align-items: center;
         position: relative;
         overflow: hidden;
         padding: 120px 0 60px;
     }

     .hero-background {
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         z-index: 1;
     }

     .hero-overlay {
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         background: rgba(0, 0, 0, 0.2);
     }

     .hero-particles {
         position: absolute;
         width: 100%;
         height: 100%;
         background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="serviceGrid" width="15" height="15" patternUnits="userSpaceOnUse"><circle cx="7.5" cy="7.5" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23serviceGrid)"/></svg>');
         opacity: 0.4;
     }

     .services-hero .container {
         position: relative;
         z-index: 5;
         max-width: 800px;
     }

     .hero-content {
         text-align: center;
         color: white;
     }

     /* Breadcrumbs */
     .breadcrumbs {
         display: inline-flex;
         align-items: center;
         background: rgba(255, 255, 255, 0.1);
         backdrop-filter: blur(10px);
         border-radius: 25px;
         padding: 0.5rem 1.25rem;
         margin-bottom: 1.5rem;
         font-size: 0.9rem;
         border: 1px solid rgba(255, 255, 255, 0.15);
     }

     .breadcrumbs a {
         color: rgba(255, 255, 255, 0.9);
         text-decoration: none;
         transition: color 0.3s ease;
     }

     .breadcrumbs a:hover {
         color: var(--secondary-color);
     }

     .breadcrumbs .separator {
         margin: 0 0.75rem;
         color: rgba(255, 255, 255, 0.6);
         font-size: 0.8rem;
     }

     .breadcrumbs .current {
         color: var(--secondary-color);
         font-weight: 600;
     }

     /* Hero Title */
     .hero-title {
         font-size: 3rem;
         font-weight: 800;
         margin-bottom: 1rem;
         line-height: 1.2;
     }

     .hero-subtitle {
         font-size: 1.2rem;
         opacity: 0.9;
         max-width: 600px;
         margin: 0 auto;
         line-height: 1.6;
     }

     /* Responsive */
     @media (max-width: 768px) {
         .services-hero {
             min-height: 35vh;
             padding: 100px 0 40px;
         }

         .hero-title {
             font-size: 2.2rem;
         }

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

     @media (max-width: 480px) {
         .services-hero {
             min-height: 30vh;
             padding: 90px 0 30px;
         }

         .hero-title {
             font-size: 1.8rem;
         }

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

         .breadcrumbs {
             font-size: 0.85rem;
             padding: 0.4rem 1rem;
         }
     }

     /* Services Content */
     .services-content {
         padding: 6rem 0;
         background: var(--bg-primary);
     }

     .services-content .container {
         max-width: 1200px;
         margin: 0 auto;
         padding: 0 2rem;
     }

     .service-item {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 4rem;
         align-items: center;
         margin-bottom: 6rem;
         padding: 3rem;
         background: var(--bg-secondary);
         border-radius: 24px;
         border: 1px solid var(--border-color);
         transition: all 0.4s ease;
         position: relative;
         overflow: hidden;
     }

     .service-item::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         height: 4px;
         background: var(--gradient-primary);
         transform: scaleX(0);
         transition: transform 0.4s ease;
     }

     .service-item:hover {
         transform: translateY(-8px);
         box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
     }

     [data-theme="dark"] .service-item:hover {
         box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
     }

     .service-item:hover::before {
         transform: scaleX(1);
     }

     .service-item.reverse {
         direction: rtl;
     }

     .service-item.reverse * {
         direction: ltr;
     }

     .service-item.reverse .service-content {
         order: 2;
     }

     .service-item.reverse .service-image {
         order: 1;
     }

     /* Service Header */
     .service-header {
         display: flex;
         align-items: center;
         gap: 1rem;
         margin-bottom: 2rem;
     }

     .service-icon {
         width: 60px;
         height: 60px;
         background: var(--gradient-primary);
         border-radius: 15px;
         display: flex;
         align-items: center;
         justify-content: center;
         color: white;
         font-size: 1.5rem;
     }

     .service-badge {
         background: rgba(59, 130, 246, 0.1);
         color: var(--primary-color);
         padding: 0.5rem 1rem;
         border-radius: 20px;
         font-size: 0.85rem;
         font-weight: 600;
         border: 1px solid rgba(59, 130, 246, 0.2);
     }

     /* Service Content */
     .service-title {
         font-size: 2.2rem;
         font-weight: 700;
         color: var(--text-primary);
         margin-bottom: 1rem;
         line-height: 1.3;
     }

     .service-intro {
         font-size: 1.2rem;
         color: var(--primary-color);
         font-style: italic;
         margin-bottom: 2rem;
         line-height: 1.6;
     }

     .service-details p {
         color: var(--text-secondary);
         line-height: 1.7;
         margin-bottom: 2rem;
     }

     .service-features {
         margin: 2rem 0;
     }

     .feature-item {
         display: flex;
         align-items: center;
         gap: 1rem;
         margin-bottom: 1rem;
         padding: 0.75rem 0;
     }

     .feature-item i {
         color: var(--primary-color);
         font-size: 1.1rem;
         flex-shrink: 0;
     }

     .feature-item span {
         color: var(--text-secondary);
         font-weight: 500;
     }

     .service-conclusion {
         color: var(--text-primary);
         font-weight: 500;
         margin-top: 2rem !important;
         padding: 1.5rem;
         background: rgba(59, 130, 246, 0.05);
         border-left: 4px solid var(--primary-color);
         border-radius: 0 8px 8px 0;
     }

     /* Service Image */
     .service-image {
         position: relative;
         overflow: hidden;
         border-radius: 16px;
     }

     .service-image img {
         width: 100%;
         height: auto;
         transition: transform 0.4s ease;
     }

     .service-item:hover .service-image img {
         transform: scale(1.05);
     }

     .image-overlay {
         position: absolute;
         bottom: 0;
         left: 0;
         right: 0;
         background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
         color: white;
         padding: 2rem;
         transform: translateY(100%);
         transition: transform 0.4s ease;
     }

     .service-item:hover .image-overlay {
         transform: translateY(0);
     }

     .overlay-content h4 {
         font-size: 1.2rem;
         font-weight: 600;
         margin-bottom: 0.5rem;
     }

     .overlay-content p {
         font-size: 0.9rem;
         opacity: 0.9;
         margin: 0;
     }

     /* Services CTA */
     .services-cta {
         padding: 6rem 0;
         background: var(--gradient-hero);
         color: white;
         text-align: center;
     }

     .services-cta .container {
         max-width: 800px;
         margin: 0 auto;
         padding: 0 2rem;
     }

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

     .cta-content p {
         font-size: 1.2rem;
         opacity: 0.9;
         margin-bottom: 3rem;
         line-height: 1.6;
     }

     .cta-buttons {
         display: flex;
         gap: 1.5rem;
         justify-content: center;
         flex-wrap: wrap;
     }

     .btn-primary,
     .btn-secondary {
         display: inline-flex;
         align-items: center;
         gap: 0.75rem;
         padding: 1.25rem 2rem;
         border-radius: 12px;
         text-decoration: none;
         font-weight: 600;
         font-size: 1rem;
         transition: all 0.3s ease;
     }

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

     .btn-primary:hover {
         transform: translateY(-3px);
         box-shadow: 0 12px 30px rgba(255, 255, 255, 0.3);
     }

     .btn-secondary {
         background: rgba(255, 255, 255, 0.1);
         color: white;
         border: 2px solid rgba(255, 255, 255, 0.3);
     }

     .btn-secondary:hover {
         transform: translateY(-3px);
         background: rgba(255, 255, 255, 0.2);
     }

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

         .service-item {
             grid-template-columns: 1fr;
             gap: 2rem;
             padding: 2rem;
             margin-bottom: 3rem;
         }

         .service-item.reverse .service-content,
         .service-item.reverse .service-image {
             order: unset;
         }

         .service-title {
             font-size: 1.8rem;
         }

         .cta-buttons {
             flex-direction: column;
             align-items: center;
         }

         .btn-primary,
         .btn-secondary {
             width: 100%;
             max-width: 280px;
             justify-content: center;
         }
     }

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

         .service-item {
             padding: 1.5rem;
         }

         .service-title {
             font-size: 1.5rem;
         }

         .services-hero {
             min-height: 50vh;
         }
     }

     /* Loading animations */
     .loading {
         opacity: 0;
         transform: translateY(30px);
         transition: all 0.6s ease;
     }

     .loading.loaded {
         opacity: 1;
         transform: translateY(0);
     }

     /* ===== PRICING PAGE STYLES MELHORADO ===== */

     /* Pricing Hero Section */
     .pricing-hero {
         min-height: 60vh;
         background: var(--gradient-hero);
         display: flex;
         align-items: center;
         position: relative;
         overflow: hidden;
         padding: 140px 0 80px;
     }

     .pricing-hero .hero-background {
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         z-index: 1;
     }

     .pricing-hero .hero-overlay {
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         background: rgba(0, 0, 0, 0.3);
     }

     .pricing-hero .hero-particles {
         position: absolute;
         width: 100%;
         height: 100%;
         background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="pricingGrid" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1.5" fill="rgba(255,255,255,0.15)"/></pattern></defs><rect width="100" height="100" fill="url(%23pricingGrid)"/></svg>');
         opacity: 0.6;
     }

     .pricing-hero .container {
         position: relative;
         z-index: 5;
         max-width: 900px;
     }

     .pricing-hero .hero-content {
         text-align: center;
         color: white;
     }

     .pricing-hero .breadcrumbs {
         display: inline-flex;
         align-items: center;
         background: rgba(255, 255, 255, 0.15);
         backdrop-filter: blur(15px);
         border-radius: 30px;
         padding: 0.75rem 1.5rem;
         margin-bottom: 2rem;
         font-size: 0.95rem;
         border: 1px solid rgba(255, 255, 255, 0.2);
     }

     .pricing-hero .breadcrumbs a {
         color: rgba(255, 255, 255, 0.9);
         text-decoration: none;
         transition: color 0.3s ease;
         font-weight: 500;
     }

     .pricing-hero .breadcrumbs a:hover {
         color: var(--secondary-color);
     }

     .pricing-hero .breadcrumbs .separator {
         margin: 0 1rem;
         color: rgba(255, 255, 255, 0.6);
         font-size: 0.9rem;
     }

     .pricing-hero .breadcrumbs .current {
         color: var(--secondary-color);
         font-weight: 600;
     }

     .pricing-hero .hero-title {
         font-size: 3.5rem;
         font-weight: 900;
         margin-bottom: 1.5rem;
         line-height: 1.2;
         text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
     }

     .pricing-hero .hero-subtitle {
         font-size: 1.3rem;
         opacity: 0.95;
         max-width: 700px;
         margin: 0 auto;
         line-height: 1.7;
         font-weight: 400;
     }

     /* Pricing Sections */
     .pricing-section {
         padding: 8rem 0;
         background: var(--bg-primary);
         position: relative;
     }

     .pricing-section.services-section {
         background: var(--bg-secondary);
     }

     .pricing-section.horizontal-section {
         background: var(--bg-primary);
     }

     .pricing-section.consultation-section {
         background: var(--bg-secondary);
     }

     /* Section Headers */
     .section-header {
         text-align: center;
         margin-bottom: 5rem;
     }

     .section-badge {
         display: inline-flex;
         align-items: center;
         gap: 0.5rem;
         background: rgba(37, 99, 235, 0.1);
         color: var(--primary-color);
         padding: 0.75rem 1.5rem;
         border-radius: 25px;
         font-size: 0.9rem;
         font-weight: 600;
         border: 1px solid rgba(37, 99, 235, 0.2);
         margin-bottom: 1.5rem;
         backdrop-filter: blur(10px);
     }

     .section-title {
         font-size: 3.2rem;
         font-weight: 900;
         color: var(--text-primary);
         margin-bottom: 1.5rem;
         line-height: 1.2;
     }

     .section-subtitle {
         font-size: 1.3rem;
         color: var(--text-secondary);
         max-width: 700px;
         margin: 0 auto;
         line-height: 1.7;
         font-weight: 400;
     }

     /* Pricing Grid */
     .pricing-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
         gap: 2.5rem;
         align-items: stretch;
     }

     /* Pricing Cards Melhorados */
     .pricing-card {
         background: var(--bg-primary);
         border: 1px solid var(--border-color);
         border-radius: 24px;
         padding: 2.5rem;
         transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
         position: relative;
         overflow: hidden;
         display: flex;
         flex-direction: column;
         height: 100%;
         box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
     }

     .pricing-card::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         height: 5px;
         background: var(--gradient-primary);
         transform: scaleX(0);
         transition: transform 0.4s ease;
         transform-origin: left;
     }

     .pricing-card::after {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         background: linear-gradient(135deg, transparent 0%, rgba(37, 99, 235, 0.02) 100%);
         opacity: 0;
         transition: opacity 0.4s ease;
         pointer-events: none;
     }

     .pricing-card:hover {
         transform: translateY(-12px) scale(1.02);
         box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
         border-color: var(--primary-color);
     }

     [data-theme="dark"] .pricing-card {
         box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
     }

     [data-theme="dark"] .pricing-card:hover {
         box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
     }

     .pricing-card:hover::before {
         transform: scaleX(1);
     }

     .pricing-card:hover::after {
         opacity: 1;
     }

     .pricing-card.featured {
         border-color: var(--primary-color);
         transform: scale(1.05);
         box-shadow: 0 25px 50px rgba(37, 99, 235, 0.25);
         background: linear-gradient(135deg, var(--bg-primary) 0%, rgba(37, 99, 235, 0.02) 100%);
     }

     .pricing-card.featured::before {
         transform: scaleX(1);
         height: 6px;
     }

     .pricing-card.featured:hover {
         transform: scale(1.05) translateY(-12px);
     }

     /* Popular Badge Melhorado */
     .popular-badge {
         position: absolute;
         top: -12px;
         right: 25px;
         background: var(--gradient-primary);
         color: white;
         padding: 0.6rem 1.2rem;
         border-radius: 20px;
         font-size: 0.85rem;
         font-weight: 700;
         display: flex;
         align-items: center;
         gap: 0.4rem;
         z-index: 10;
         box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
         animation: pulse 2s infinite;
     }

     @keyframes pulse {

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

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

     /* Plan Header Melhorado */
     .plan-header {
         text-align: center;
         margin-bottom: 2.5rem;
         position: relative;
         z-index: 2;
     }

     .plan-icon {
         width: 80px;
         height: 80px;
         background: var(--gradient-primary);
         border-radius: 24px;
         display: flex;
         align-items: center;
         justify-content: center;
         color: white;
         font-size: 2rem;
         margin: 0 auto 1.5rem;
         transition: all 0.4s ease;
         box-shadow: 0 8px 25px rgba(37, 99, 235, 0.3);
     }

     .pricing-card:hover .plan-icon {
         transform: scale(1.15) rotate(10deg);
         box-shadow: 0 12px 35px rgba(37, 99, 235, 0.4);
     }

     .plan-name {
         font-size: 1.4rem;
         font-weight: 800;
         color: var(--text-primary);
         margin-bottom: 0.5rem;
         letter-spacing: -0.02em;
     }

     .plan-price {
         display: flex;
         align-items: baseline;
         justify-content: center;
         gap: 0.5rem;
         margin-bottom: 1rem;
     }

     .plan-price .amount {
         font-size: 2.8rem;
         font-weight: 900;
         color: var(--primary-color);
         line-height: 1;
     }

     .plan-price .currency {
         font-size: 1.2rem;
         color: var(--text-secondary);
         font-weight: 600;
     }

     .plan-description {
         color: var(--text-secondary);
         font-size: 1rem;
         margin: 0;
         font-weight: 500;
     }

     /* Features Melhorados */
     .plan-features,
     .service-features,
     .consultation-features {
         margin-bottom: 2.5rem;
         flex-grow: 1;
     }

     .feature-item {
         display: flex;
         align-items: flex-start;
         gap: 1rem;
         margin-bottom: 1rem;
         padding: 0.75rem 0;
         border-radius: 8px;
         transition: all 0.3s ease;
     }

     .feature-item:hover {
         background: rgba(37, 99, 235, 0.05);
         padding-left: 0.5rem;
         margin-left: -0.5rem;
         margin-right: -0.5rem;
     }

     .feature-item.included i {
         color: var(--success-color);
         font-size: 1.2rem;
         margin-top: 0.1rem;
         flex-shrink: 0;
     }

     .feature-item.excluded i {
         color: var(--text-secondary);
         font-size: 1.2rem;
         margin-top: 0.1rem;
         flex-shrink: 0;
         opacity: 0.5;
     }

     .feature-item.excluded {
         opacity: 0.6;
     }

     .feature-item span {
         color: var(--text-secondary);
         font-weight: 500;
         line-height: 1.5;
     }

     .feature-item span strong {
         color: var(--text-primary);
         font-weight: 700;
     }

     /* Action Buttons Melhorados */
     .plan-action,
     .service-action,
     .consultation-action {
         margin-top: auto;
         position: relative;
         z-index: 2;
     }

     .plan-btn,
     .service-btn,
     .consultation-btn {
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 0.75rem;
         width: 100%;
         padding: 1.2rem 2rem;
         background: var(--gradient-primary);
         color: white;
         text-decoration: none;
         border-radius: 16px;
         font-weight: 700;
         font-size: 1rem;
         transition: all 0.4s ease;
         border: none;
         cursor: pointer;
         position: relative;
         overflow: hidden;
     }

     .plan-btn::before,
     .service-btn::before,
     .consultation-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.6s ease;
     }

     .plan-btn:hover,
     .service-btn:hover,
     .consultation-btn:hover {
         transform: translateY(-3px);
         box-shadow: 0 12px 30px rgba(37, 99, 235, 0.4);
         color: white;
     }

     .plan-btn:hover::before,
     .service-btn:hover::before,
     .consultation-btn:hover::before {
         left: 100%;
     }

     .plan-btn.featured,
     .service-btn.featured {
         background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
     }

     .plan-btn.featured:hover,
     .service-btn.featured:hover {
         box-shadow: 0 12px 30px rgba(251, 191, 36, 0.5);
     }

     .consultation-btn {
         background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
     }

     .consultation-btn:hover {
         box-shadow: 0 12px 30px rgba(245, 158, 11, 0.5);
     }

     .consultation-btn.featured {
         background: var(--gradient-primary);
     }

     .consultation-btn.featured:hover {
         box-shadow: 0 12px 30px rgba(37, 99, 235, 0.5);
     }

     /* Service Cards */
     .service-card .service-header {
         text-align: center;
         margin-bottom: 2.5rem;
         position: relative;
         z-index: 2;
     }

     .service-card .service-icon {
         width: 80px;
         height: 80px;
         background: var(--gradient-primary);
         border-radius: 24px;
         display: flex;
         align-items: center;
         justify-content: center;
         color: white;
         font-size: 2rem;
         margin: 0 auto 1.5rem;
         transition: all 0.4s ease;
         box-shadow: 0 8px 25px rgba(37, 99, 235, 0.3);
     }

     .service-card:hover .service-icon {
         transform: scale(1.15) rotate(10deg);
         box-shadow: 0 12px 35px rgba(37, 99, 235, 0.4);
     }

     .service-title {
         font-size: 1.2rem;
         font-weight: 800;
         color: var(--text-primary);
         line-height: 1.3;
         text-align: center;
         margin-bottom: 0.5rem;
         letter-spacing: -0.01em;
     }

     .service-description {
         color: var(--text-secondary);
         font-size: 0.95rem;
         text-align: center;
         margin: 0;
         font-weight: 500;
     }

     /* Horizontal Pricing Melhorado */
     .horizontal-pricing {
         display: flex;
         flex-direction: column;
         gap: 2.5rem;
     }

     .horizontal-card {
         background: var(--bg-primary);
         border: 1px solid var(--border-color);
         border-radius: 24px;
         padding: 2.5rem;
         display: grid;
         grid-template-columns: 1fr 2fr 1fr;
         gap: 2.5rem;
         align-items: center;
         transition: all 0.4s ease;
         box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
         position: relative;
         overflow: hidden;
     }

     .horizontal-card::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         height: 4px;
         background: var(--gradient-primary);
         transform: scaleX(0);
         transition: transform 0.4s ease;
     }

     .horizontal-card:hover {
         transform: translateY(-8px);
         box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
         border-color: var(--primary-color);
     }

     .horizontal-card:hover::before {
         transform: scaleX(1);
     }

     [data-theme="dark"] .horizontal-card {
         box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
     }

     [data-theme="dark"] .horizontal-card:hover {
         box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
     }

     .horizontal-info {
         display: flex;
         align-items: center;
         gap: 1.5rem;
     }

     .horizontal-info .service-icon {
         width: 70px;
         height: 70px;
         background: var(--gradient-primary);
         border-radius: 20px;
         display: flex;
         align-items: center;
         justify-content: center;
         color: white;
         font-size: 1.75rem;
         flex-shrink: 0;
         box-shadow: 0 6px 20px rgba(37, 99, 235, 0.3);
         transition: transform 0.3s ease;
     }

     .horizontal-card:hover .horizontal-info .service-icon {
         transform: scale(1.1) rotate(5deg);
     }

     .service-details h3 {
         font-size: 1.4rem;
         font-weight: 800;
         color: var(--text-primary);
         margin-bottom: 0.5rem;
         letter-spacing: -0.01em;
     }

     .service-details p {
         color: var(--text-secondary);
         margin-bottom: 1rem;
         font-weight: 500;
     }

     .price-display {
         display: flex;
         align-items: baseline;
         gap: 0.5rem;
     }

     .price-display .amount {
         font-size: 1.8rem;
         font-weight: 900;
         color: var(--primary-color);
     }

     .price-display .currency {
         font-size: 1rem;
         color: var(--text-secondary);
         font-weight: 600;
     }

     .horizontal-features {
         display: flex;
         flex-direction: column;
         gap: 0.75rem;
     }

     .horizontal-action {
         text-align: center;
     }

     .horizontal-btn {
         display: inline-flex;
         align-items: center;
         gap: 0.75rem;
         padding: 1rem 2rem;
         background: var(--gradient-primary);
         color: white;
         text-decoration: none;
         border-radius: 16px;
         font-weight: 700;
         transition: all 0.4s ease;
         white-space: nowrap;
         position: relative;
         overflow: hidden;
     }

     .horizontal-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.6s ease;
     }

     .horizontal-btn:hover {
         transform: translateY(-3px);
         box-shadow: 0 12px 30px rgba(37, 99, 235, 0.4);
         color: white;
     }

     .horizontal-btn:hover::before {
         left: 100%;
     }

     /* Consultation Cards Melhorados */
     .consultation-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
         gap: 2.5rem;
         align-items: stretch;
     }

     .consultation-card {
         background: var(--bg-primary);
         border: 1px solid var(--border-color);
         border-radius: 24px;
         padding: 2.5rem;
         transition: all 0.4s ease;
         position: relative;
         overflow: hidden;
         display: flex;
         flex-direction: column;
         height: 100%;
         box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
     }

     .consultation-card::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         height: 5px;
         background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
         transform: scaleX(0);
         transition: transform 0.4s ease;
         transform-origin: left;
     }

     .consultation-card:hover {
         transform: translateY(-12px);
         box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
         border-color: var(--warning-color);
     }

     .consultation-card:hover::before {
         transform: scaleX(1);
     }

     [data-theme="dark"] .consultation-card {
         box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
     }

     [data-theme="dark"] .consultation-card:hover {
         box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
     }

     .consultation-card.featured {
         border-color: var(--primary-color);
         box-shadow: 0 20px 40px rgba(37, 99, 235, 0.2);
     }

     .consultation-card.featured::before {
         background: var(--gradient-primary);
         transform: scaleX(1);
     }

     .consultation-header {
         text-align: center;
         margin-bottom: 2.5rem;
         position: relative;
         z-index: 2;
     }

     .consultation-header .service-icon {
         width: 80px;
         height: 80px;
         background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
         border-radius: 24px;
         display: flex;
         align-items: center;
         justify-content: center;
         color: white;
         font-size: 2rem;
         margin: 0 auto 1.5rem;
         transition: all 0.4s ease;
         box-shadow: 0 8px 25px rgba(245, 158, 11, 0.3);
     }

     .consultation-card.featured .consultation-header .service-icon {
         background: var(--gradient-primary);
         box-shadow: 0 8px 25px rgba(37, 99, 235, 0.3);
     }

     .consultation-card:hover .consultation-header .service-icon {
         transform: scale(1.15) rotate(10deg);
         box-shadow: 0 12px 35px rgba(245, 158, 11, 0.4);
     }

     .consultation-card.featured:hover .consultation-header .service-icon {
         box-shadow: 0 12px 35px rgba(37, 99, 235, 0.4);
     }

     .consultation-header h3 {
         font-size: 1.3rem;
         font-weight: 800;
         color: var(--text-primary);
         margin-bottom: 1rem;
         line-height: 1.3;
         letter-spacing: -0.01em;
     }

     .consultation-badge {
         display: inline-block;
         background: rgba(245, 158, 11, 0.1);
         color: var(--warning-color);
         padding: 0.6rem 1.2rem;
         border-radius: 20px;
         font-size: 0.85rem;
         font-weight: 700;
         border: 1px solid rgba(245, 158, 11, 0.2);
         backdrop-filter: blur(10px);
     }

     .consultation-card.featured .consultation-badge {
         background: rgba(37, 99, 235, 0.1);
         color: var(--primary-color);
         border-color: rgba(37, 99, 235, 0.2);
     }

     /* CTA Section Compacta */
     .pricing-cta {
         padding: 5rem 0;
         /* Reduzido de 8rem para 5rem */
         background: var(--gradient-hero);
         color: white;
         position: relative;
         overflow: hidden;
     }

     .cta-background {
         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="ctaDots" width="25" height="25" patternUnits="userSpaceOnUse"><circle cx="12.5" cy="12.5" r="2" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23ctaDots)"/></svg>');
         opacity: 0.6;
     }

     .floating-elements {
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         pointer-events: none;
     }

     .floating-element {
         position: absolute;
         width: 40px;
         /* Reduzido de 60px para 40px */
         height: 40px;
         background: rgba(255, 255, 255, 0.08);
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         color: rgba(255, 255, 255, 0.25);
         font-size: 1.2rem;
         /* Reduzido de 1.5rem para 1.2rem */
         animation: floatAnimation 6s ease-in-out infinite;
     }

     .floating-element:nth-child(1) {
         animation-delay: 0s;
     }

     .floating-element:nth-child(2) {
         animation-delay: 1.5s;
     }

     .floating-element:nth-child(3) {
         animation-delay: 3s;
     }

     .floating-element:nth-child(4) {
         animation-delay: 4.5s;
     }

     @keyframes floatAnimation {

         0%,
         100% {
             transform: translateY(0px) rotate(0deg);
             opacity: 0.25;
         }

         50% {
             transform: translateY(-20px) rotate(180deg);
             opacity: 0.6;
         }
     }

     .pricing-cta .container {
         position: relative;
         z-index: 2;
         max-width: 1000px;
         /* Reduzido de 900px para 1000px para melhor centralização */
     }

     .cta-content {
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 2.5rem;
         /* Reduzido de 3.5rem para 2.5rem */
     }

     /* CTA Header - Layout Horizontal Centralizado */
     .cta-header {
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 2rem;
         text-align: center;
         width: 100%;
     }

     .cta-icon {
         width: 80px;
         /* Reduzido de 100px para 80px */
         height: 80px;
         background: rgba(255, 255, 255, 0.15);
         border-radius: 24px;
         /* Reduzido de 30px para 24px */
         display: flex;
         align-items: center;
         justify-content: center;
         color: white;
         font-size: 2rem;
         /* Reduzido de 2.5rem para 2rem */
         animation: float 4s ease-in-out infinite;
         backdrop-filter: blur(15px);
         border: 1px solid rgba(255, 255, 255, 0.2);
         flex-shrink: 0;
     }

     @keyframes float {

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

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

     .cta-text h2 {
         font-size: 2.5rem;
         /* Reduzido de 3rem para 2.5rem */
         font-weight: 900;
         margin-bottom: 1rem;
         /* Reduzido de 1.5rem para 1rem */
         line-height: 1.2;
         text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
         text-align: center;
     }

     .cta-text p {
         font-size: 1.2rem;
         /* Reduzido de 1.3rem para 1.2rem */
         opacity: 0.95;
         line-height: 1.6;
         font-weight: 400;
         margin: 0 auto;
         max-width: 500px;
         text-align: center;
     }

     /* CTA Actions */
     .cta-actions {
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 1.5rem;
         /* Reduzido de 3rem para 1.5rem */
     }

     .cta-buttons {
         display: flex;
         gap: 1.5rem;
         justify-content: center;
         flex-wrap: wrap;
     }

     .cta-btn {
         display: inline-flex;
         align-items: center;
         gap: 0.75rem;
         padding: 1.2rem 2rem;
         /* Reduzido de 1.5rem 2.5rem para 1.2rem 2rem */
         border-radius: 14px;
         /* Reduzido de 16px para 14px */
         text-decoration: none;
         font-weight: 700;
         font-size: 1rem;
         /* Reduzido de 1.1rem para 1rem */
         transition: all 0.4s ease;
         position: relative;
         overflow: hidden;
         white-space: nowrap;
     }

     .cta-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.6s ease;
     }

     .cta-btn.primary {
         background: white;
         color: var(--primary-color);
         box-shadow: 0 6px 20px rgba(255, 255, 255, 0.2);
         /* Reduzido de 8px 25px */
     }

     .cta-btn.primary:hover {
         transform: translateY(-3px);
         /* Reduzido de -4px para -3px */
         box-shadow: 0 12px 30px rgba(255, 255, 255, 0.3);
         /* Reduzido de 15px 40px */
         color: var(--primary-color);
     }

     .cta-btn.secondary {
         background: rgba(255, 255, 255, 0.15);
         color: white;
         border: 2px solid rgba(255, 255, 255, 0.3);
         backdrop-filter: blur(15px);
     }

     .cta-btn.secondary:hover {
         transform: translateY(-3px);
         background: rgba(255, 255, 255, 0.25);
         border-color: rgba(255, 255, 255, 0.5);
         color: white;
     }

     .cta-btn:hover::before {
         left: 100%;
     }

     .cta-guarantee {
         display: inline-flex;
         align-items: center;
         gap: 0.75rem;
         color: rgba(255, 255, 255, 0.85);
         font-size: 0.9rem;
         /* Reduzido de 1rem para 0.9rem */
         font-weight: 500;
         background: rgba(255, 255, 255, 0.1);
         padding: 0.75rem 1.5rem;
         /* Reduzido de 1rem 2rem */
         border-radius: 20px;
         /* Reduzido de 25px para 20px */
         backdrop-filter: blur(15px);
         border: 1px solid rgba(255, 255, 255, 0.2);
     }

     .cta-guarantee i {
         font-size: 1rem;
         /* Reduzido de 1.2rem para 1rem */
         color: var(--success-color);
     }

     /* Responsive Design Otimizado */
     @media (max-width: 768px) {
         .pricing-cta {
             padding: 4rem 0;
             /* Reduzido de 5rem para 4rem no mobile */
         }

         .cta-content {
             gap: 2rem;
         }

         .cta-header {
             flex-direction: column;
             text-align: center;
             gap: 1.5rem;
         }

         .cta-text h2 {
             font-size: 2rem;
         }

         .cta-text p {
             font-size: 1.1rem;
         }

         .cta-buttons {
             flex-direction: column;
             align-items: center;
             gap: 1rem;
             width: 100%;
         }

         .cta-btn {
             width: 100%;
             max-width: 280px;
             justify-content: center;
             padding: 1rem 1.5rem;
         }

         .cta-guarantee {
             text-align: center;
             padding: 0.75rem 1rem;
         }
     }

     @media (max-width: 480px) {
         .pricing-cta {
             padding: 3rem 0;
             /* Ainda mais reduzido para mobile pequeno */
         }

         .cta-icon {
             width: 60px;
             height: 60px;
             font-size: 1.5rem;
         }

         .cta-text h2 {
             font-size: 1.7rem;
         }

         .cta-text p {
             font-size: 1rem;
         }

         .cta-guarantee {
             flex-direction: column;
             gap: 0.5rem;
             font-size: 0.85rem;
         }
     }

     /* Otimização para telas muito largas */
     @media (min-width: 1400px) {
         .cta-content {
             max-width: 900px;
             margin: 0 auto;
         }

         .cta-header {
             justify-content: center;
         }
     }

     .floating-elements {
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         pointer-events: none;
     }

     .floating-element {
         position: absolute;
         width: 60px;
         height: 60px;
         background: rgba(255, 255, 255, 0.1);
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         color: rgba(255, 255, 255, 0.3);
         font-size: 1.5rem;
         animation: floatAnimation 6s ease-in-out infinite;
     }

     .floating-element:nth-child(1) {
         animation-delay: 0s;
     }

     .floating-element:nth-child(2) {
         animation-delay: 1.5s;
     }

     .floating-element:nth-child(3) {
         animation-delay: 3s;
     }

     .floating-element:nth-child(4) {
         animation-delay: 4.5s;
     }

     @keyframes floatAnimation {

         0%,
         100% {
             transform: translateY(0px) rotate(0deg);
             opacity: 0.3;
         }

         50% {
             transform: translateY(-30px) rotate(180deg);
             opacity: 0.7;
         }
     }

     .pricing-cta .container {
         position: relative;
         z-index: 2;
         max-width: 900px;
     }

     .cta-content {
         text-align: center;
     }

     .cta-icon {
         width: 100px;
         height: 100px;
         background: rgba(255, 255, 255, 0.15);
         border-radius: 30px;
         display: flex;
         align-items: center;
         justify-content: center;
         color: white;
         font-size: 2.5rem;
         margin: 0 auto 2.5rem;
         animation: float 4s ease-in-out infinite;
         backdrop-filter: blur(15px);
         border: 1px solid rgba(255, 255, 255, 0.2);
     }

     @keyframes float {

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

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

     .cta-content h2 {
         font-size: 3rem;
         font-weight: 900;
         margin-bottom: 1.5rem;
         line-height: 1.2;
         text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
     }

     .cta-content p {
         font-size: 1.3rem;
         opacity: 0.95;
         margin-bottom: 3.5rem;
         line-height: 1.7;
         font-weight: 400;
     }

     .cta-buttons {
         display: flex;
         gap: 2rem;
         justify-content: center;
         flex-wrap: wrap;
         margin-bottom: 3rem;
     }

     .cta-btn {
         display: inline-flex;
         align-items: center;
         gap: 0.75rem;
         padding: 1.5rem 2.5rem;
         border-radius: 16px;
         text-decoration: none;
         font-weight: 700;
         font-size: 1.1rem;
         transition: all 0.4s ease;
         position: relative;
         overflow: hidden;
     }

     .cta-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.6s ease;
     }

     .cta-btn.primary {
         background: white;
         color: var(--primary-color);
         box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);
     }

     .cta-btn.primary:hover {
         transform: translateY(-4px);
         box-shadow: 0 15px 40px rgba(255, 255, 255, 0.3);
         color: var(--primary-color);
     }

     .cta-btn.secondary {
         background: rgba(255, 255, 255, 0.15);
         color: white;
         border: 2px solid rgba(255, 255, 255, 0.3);
         backdrop-filter: blur(15px);
     }

     .cta-btn.secondary:hover {
         transform: translateY(-4px);
         background: rgba(255, 255, 255, 0.25);
         border-color: rgba(255, 255, 255, 0.5);
         color: white;
     }

     .cta-btn:hover::before {
         left: 100%;
     }

     .cta-guarantee {
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 0.75rem;
         color: rgba(255, 255, 255, 0.85);
         font-size: 1rem;
         font-weight: 500;
         background: rgba(255, 255, 255, 0.1);
         padding: 1rem 2rem;
         border-radius: 25px;
         backdrop-filter: blur(15px);
         border: 1px solid rgba(255, 255, 255, 0.2);
         display: inline-flex;
     }

     .cta-guarantee i {
         font-size: 1.2rem;
         color: var(--success-color);
     }

     /* Responsive Design Melhorado */
     @media (max-width: 1024px) {
         .pricing-grid {
             grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
             gap: 2rem;
         }

         .horizontal-card {
             grid-template-columns: 1fr;
             text-align: center;
             gap: 2rem;
         }

         .horizontal-info {
             justify-content: center;
         }
     }

     @media (max-width: 768px) {
         .pricing-hero {
             min-height: 50vh;
             padding: 120px 0 60px;
         }

         .pricing-hero .hero-title {
             font-size: 2.5rem;
         }

         .section-title {
             font-size: 2.5rem;
         }

         .pricing-section {
             padding: 5rem 0;
         }

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

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

         .horizontal-pricing {
             gap: 1.5rem;
         }

         .cta-buttons {
             flex-direction: column;
             align-items: center;
             gap: 1rem;
         }

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

         .pricing-card.featured {
             transform: none;
         }

         .pricing-card.featured:hover {
             transform: translateY(-8px);
         }
     }

     @media (max-width: 480px) {
         .pricing-hero {
             min-height: 40vh;
             padding: 100px 0 40px;
         }

         .pricing-hero .hero-title {
             font-size: 2rem;
         }

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

         .pricing-section {
             padding: 4rem 0;
         }

         .pricing-card,
         .consultation-card {
             padding: 2rem;
         }

         .horizontal-card {
             padding: 2rem;
         }

         .plan-price .amount {
             font-size: 2.2rem;
         }

         .cta-content h2 {
             font-size: 2.2rem;
         }

         .cta-content p {
             font-size: 1.1rem;
         }

         .cta-guarantee {
             flex-direction: column;
             gap: 0.5rem;
             text-align: center;
         }
     }

     /* Micro-animations */
     @media (prefers-reduced-motion: no-preference) {

         .pricing-card,
         .consultation-card,
         .horizontal-card {
             animation: fadeInUp 0.6s ease-out forwards;
         }

         .pricing-card:nth-child(1) {
             animation-delay: 0.1s;
         }

         .pricing-card:nth-child(2) {
             animation-delay: 0.2s;
         }

         .pricing-card:nth-child(3) {
             animation-delay: 0.3s;
         }
     }

     @keyframes fadeInUp {
         from {
             opacity: 0;
             transform: translateY(30px);
         }

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

     /* Loading States */
     .pricing-card:not(.loaded) {
         opacity: 0;
         transform: translateY(30px);
     }

     .pricing-card.loaded {
         opacity: 1;
         transform: translateY(0);
         transition: all 0.6s ease;
     }

     /* Focus States para Acessibilidade */
     .plan-btn:focus,
     .service-btn:focus,
     .consultation-btn:focus,
     .horizontal-btn:focus,
     .cta-btn:focus {
         outline: 3px solid var(--primary-color);
         outline-offset: 2px;
     }

     /* Print Styles */
     @media print {

         .pricing-hero,
         .pricing-cta {
             background: none !important;
             color: black !important;
         }

         .pricing-card,
         .consultation-card {
             break-inside: avoid;
             box-shadow: none !important;
             border: 2px solid #ccc !important;
         }
     }

     /* ===== CONTACT PAGE STYLES (LIMPO E OTIMIZADO) ===== */

     /* Contact Hero Section */
     .contact-hero {
         min-height: 70vh;
         background: var(--gradient-hero);
         display: flex;
         align-items: center;
         position: relative;
         overflow: hidden;
         padding: 140px 0 80px;
     }

     .contact-hero .hero-background {
         position: absolute;
         inset: 0;
         z-index: 1;
     }

     .contact-hero .hero-overlay {
         position: absolute;
         inset: 0;
         background: rgba(0, 0, 0, 0.3);
     }

     .contact-hero .hero-particles {
         position: absolute;
         inset: 0;
         background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="contactGrid" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1.5" fill="rgba(255,255,255,0.15)"/></pattern></defs><rect width="100" height="100" fill="url(%23contactGrid)"/></svg>');
         opacity: 0.6;
     }

     .contact-hero .container {
         position: relative;
         z-index: 5;
         max-width: 900px;
     }

     .contact-hero .hero-content {
         text-align: center;
         color: white;
     }

     .contact-hero .breadcrumbs {
         display: inline-flex;
         align-items: center;
         background: rgba(255, 255, 255, 0.15);
         backdrop-filter: blur(15px);
         border-radius: 30px;
         padding: 0.75rem 1.5rem;
         margin-bottom: 2rem;
         font-size: 0.95rem;
         border: 1px solid rgba(255, 255, 255, 0.2);
     }

     .contact-hero .breadcrumbs a {
         color: rgba(255, 255, 255, 0.9);
         text-decoration: none;
         transition: color 0.3s ease;
         font-weight: 500;
     }

     .contact-hero .breadcrumbs a:hover {
         color: var(--secondary-color);
     }

     .contact-hero .breadcrumbs .separator {
         margin: 0 1rem;
         color: rgba(255, 255, 255, 0.6);
         font-size: 0.9rem;
     }

     .contact-hero .breadcrumbs .current {
         color: var(--secondary-color);
         font-weight: 600;
     }

     .contact-hero .hero-title {
         font-size: 3.5rem;
         font-weight: 900;
         margin-bottom: 1.5rem;
         line-height: 1.2;
         text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
     }

     .contact-hero .hero-subtitle {
         font-size: 1.3rem;
         opacity: 0.95;
         max-width: 700px;
         margin: 0 auto 3rem;
         line-height: 1.7;
         font-weight: 400;
     }

     .hero-features {
         display: flex;
         justify-content: center;
         gap: 3rem;
         flex-wrap: wrap;
     }

     .hero-feature-item {
         display: flex;
         align-items: center;
         gap: 0.75rem;
         background: rgba(255, 255, 255, 0.1);
         backdrop-filter: blur(10px);
         padding: 1rem 1.5rem;
         border-radius: 20px;
         border: 1px solid rgba(255, 255, 255, 0.2);
         color: white;
         font-weight: 500;
     }

     .hero-feature-item i {
         font-size: 1.2rem;
         color: var(--secondary-color);
     }

     /* Contact Sections */
     .contact-info-section,
     .contact-methods-section,
     .contact-map-section {
         padding: 8rem 0;
     }

     .contact-info-section {
         background: var(--bg-primary);
     }

     .contact-methods-section {
         background: var(--bg-secondary);
     }

     .contact-map-section {
         background: var(--bg-primary);
     }

     /* Section Headers */
     .contact-section-header {
         text-align: center;
         margin-bottom: 5rem;
     }

     .contact-section-badge {
         display: inline-flex;
         align-items: center;
         gap: 0.5rem;
         background: rgba(37, 99, 235, 0.1);
         color: var(--primary-color);
         padding: 0.75rem 1.5rem;
         border-radius: 25px;
         font-size: 0.9rem;
         font-weight: 600;
         border: 1px solid rgba(37, 99, 235, 0.2);
         margin-bottom: 1.5rem;
         backdrop-filter: blur(10px);
     }

     .contact-section-title {
         font-size: 3.2rem;
         font-weight: 900;
         color: var(--text-primary);
         margin-bottom: 1.5rem;
         line-height: 1.2;
     }

     .contact-section-subtitle {
         font-size: 1.3rem;
         color: var(--text-secondary);
         max-width: 700px;
         margin: 0 auto;
         line-height: 1.7;
         font-weight: 400;
     }

     /* Contact Cards Grid */
     .contact-cards-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
         gap: 2rem;
     }

     .contact-info-card {
         background: var(--bg-secondary);
         border: 1px solid var(--border-color);
         border-radius: 24px;
         padding: 2.5rem;
         transition: all 0.4s ease;
         position: relative;
         overflow: hidden;
         display: flex;
         flex-direction: column;
         align-items: center;
         text-align: center;
         height: 100%;
     }

     .contact-info-card::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         height: 4px;
         background: var(--gradient-primary);
         transform: scaleX(0);
         transition: transform 0.4s ease;
     }

     .contact-info-card:hover {
         transform: translateY(-8px);
         box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
         border-color: var(--primary-color);
     }

     [data-theme="dark"] .contact-info-card:hover {
         box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
     }

     .contact-info-card:hover::before {
         transform: scaleX(1);
     }

     .contact-card-featured {
         border-color: var(--primary-color);
         box-shadow: 0 15px 30px rgba(37, 99, 235, 0.15);
     }

     .contact-card-featured::before {
         transform: scaleX(1);
     }

     .contact-card-whatsapp {
         border-color: #25d366;
     }

     .contact-card-whatsapp::before {
         background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
     }

     .contact-popular-badge {
         position: absolute;
         top: -10px;
         right: 20px;
         background: var(--gradient-primary);
         color: white;
         padding: 0.5rem 1rem;
         border-radius: 15px;
         font-size: 0.8rem;
         font-weight: 600;
         display: flex;
         align-items: center;
         gap: 0.25rem;
         z-index: 10;
     }

     .contact-card-icon {
         width: 80px;
         height: 80px;
         background: var(--gradient-primary);
         border-radius: 24px;
         display: flex;
         align-items: center;
         justify-content: center;
         color: white;
         font-size: 2rem;
         margin-bottom: 1.5rem;
         transition: transform 0.3s ease;
     }

     .contact-card-whatsapp .contact-card-icon {
         background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
     }

     .contact-info-card:hover .contact-card-icon {
         transform: scale(1.1) rotate(5deg);
     }

     .contact-card-content {
         flex-grow: 1;
         display: flex;
         flex-direction: column;
         justify-content: center;
     }

     .contact-card-content h3 {
         font-size: 1.4rem;
         font-weight: 700;
         color: var(--text-primary);
         margin-bottom: 0.5rem;
     }

     .contact-card-content p {
         color: var(--text-secondary);
         margin-bottom: 1.5rem;
         font-size: 1.1rem;
     }

     .contact-action-link {
         display: inline-flex;
         align-items: center;
         gap: 0.5rem;
         color: var(--primary-color);
         text-decoration: none;
         font-weight: 600;
         padding: 0.75rem 1.5rem;
         border: 2px solid var(--primary-color);
         border-radius: 12px;
         transition: all 0.3s ease;
         margin-top: auto;
     }

     .contact-action-link:hover {
         background: var(--primary-color);
         color: white;
         transform: translateY(-2px);
     }

     .contact-card-whatsapp .contact-action-link {
         color: #25d366;
         border-color: #25d366;
     }

     .contact-card-whatsapp .contact-action-link:hover {
         background: #25d366;
         color: white;
     }

     /* Contact Methods Grid */
     .contact-methods-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
         gap: 2.5rem;
     }

     .contact-method-card {
         background: var(--bg-primary);
         border: 1px solid var(--border-color);
         border-radius: 24px;
         padding: 2.5rem;
         transition: all 0.4s ease;
         position: relative;
         overflow: hidden;
         height: 100%;
     }

     .contact-method-card::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         height: 4px;
         background: var(--gradient-primary);
         transform: scaleX(0);
         transition: transform 0.4s ease;
     }

     .contact-method-card:hover {
         transform: translateY(-8px);
         box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
     }

     .contact-method-card:hover::before {
         transform: scaleX(1);
     }

     .contact-method-emergency::before {
         background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
     }

     .contact-method-header {
         text-align: center;
         margin-bottom: 2rem;
     }

     .contact-method-icon {
         width: 70px;
         height: 70px;
         background: var(--gradient-primary);
         border-radius: 20px;
         display: flex;
         align-items: center;
         justify-content: center;
         color: white;
         font-size: 1.75rem;
         margin: 0 auto 1.5rem;
     }

     .contact-method-emergency .contact-method-icon {
         background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
     }

     .contact-method-header h3 {
         font-size: 1.3rem;
         font-weight: 700;
         color: var(--text-primary);
         margin-bottom: 0.5rem;
     }

     .contact-method-header p {
         color: var(--text-secondary);
         margin: 0;
     }

     /* Social Links */
     .contact-social-links {
         display: flex;
         flex-direction: column;
         gap: 1rem;
     }

     .contact-social-link {
         display: flex;
         align-items: center;
         gap: 1rem;
         padding: 1rem 1.5rem;
         background: var(--bg-secondary);
         border: 1px solid var(--border-color);
         border-radius: 12px;
         text-decoration: none;
         color: var(--text-primary);
         transition: all 0.3s ease;
     }

     .contact-social-link:hover {
         transform: translateX(8px);
         border-color: var(--primary-color);
     }

     .contact-social-facebook:hover {
         border-color: #1877f2;
         background: rgba(24, 119, 242, 0.1);
     }

     .contact-social-instagram:hover {
         border-color: #E4405F;
         background: rgba(228, 64, 95, 0.1);
     }

     .contact-social-linkedin:hover {
         border-color: #0077B5;
         background: rgba(0, 119, 181, 0.1);
     }

     .contact-social-link i {
         width: 24px;
         text-align: center;
         font-size: 1.2rem;
     }

     /* Business Hours */
     .contact-business-hours {
         display: flex;
         flex-direction: column;
         gap: 1rem;
     }

     .contact-hour-item {
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding: 0.75rem 0;
         border-bottom: 1px solid var(--border-color);
     }

     .contact-hour-item:last-child {
         border-bottom: none;
     }

     .contact-day {
         font-weight: 600;
         color: var(--text-primary);
     }

     .contact-time {
         color: var(--text-secondary);
         font-weight: 500;
     }

     /* Emergency Info */
     .contact-emergency-info {
         display: flex;
         flex-direction: column;
         gap: 1rem;
     }

     .contact-emergency-contact,
     .contact-emergency-note {
         display: flex;
         align-items: center;
         gap: 1rem;
         padding: 1rem 1.5rem;
         background: var(--bg-secondary);
         border-radius: 12px;
         border: 1px solid var(--border-color);
     }

     .contact-emergency-contact {
         border-color: #ef4444;
         background: rgba(239, 68, 68, 0.1);
     }

     .contact-emergency-contact i {
         color: #ef4444;
         font-size: 1.2rem;
     }

     .contact-emergency-note i {
         color: var(--primary-color);
         font-size: 1.2rem;
     }

     /* Map Section */
     .contact-map-container {
         display: grid;
         grid-template-columns: 2fr 1fr;
         gap: 3rem;
         align-items: start;
     }

     .contact-map-frame {
         border-radius: 24px;
         overflow: hidden;
         box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
         border: 1px solid var(--border-color);
     }

     [data-theme="dark"] .contact-map-frame {
         box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
     }

     .contact-map-frame iframe {
         width: 100%;
         height: 400px;
         border: none;
     }

     .contact-map-info {
         position: sticky;
         top: 2rem;
     }

     .contact-info-card-map {
         background: var(--bg-secondary);
         border: 1px solid var(--border-color);
         border-radius: 24px;
         padding: 2rem;
     }

     .contact-info-header {
         display: flex;
         align-items: center;
         gap: 1rem;
         margin-bottom: 1.5rem;
     }

     .contact-info-icon {
         width: 50px;
         height: 50px;
         background: var(--gradient-primary);
         border-radius: 12px;
         display: flex;
         align-items: center;
         justify-content: center;
         color: white;
         font-size: 1.2rem;
     }

     .contact-info-header h4 {
         font-size: 1.2rem;
         font-weight: 700;
         color: var(--text-primary);
         margin: 0;
     }

     .contact-info-details {
         margin-bottom: 2rem;
     }

     .contact-detail-item {
         display: flex;
         align-items: center;
         gap: 1rem;
         margin-bottom: 1rem;
         color: var(--text-secondary);
     }

     .contact-detail-item i {
         color: var(--primary-color);
         font-size: 1rem;
         width: 20px;
         text-align: center;
     }

     .contact-directions-btn {
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 0.75rem;
         width: 100%;
         padding: 1rem 1.5rem;
         background: var(--gradient-primary);
         color: white;
         text-decoration: none;
         border-radius: 12px;
         font-weight: 600;
         transition: all 0.3s ease;
     }

     .contact-directions-btn:hover {
         transform: translateY(-2px);
         box-shadow: 0 8px 25px rgba(37, 99, 235, 0.3);
         color: white;
     }

     /* Contact CTA */
     .contact-cta-section {
         padding: 5rem 0;
         background: var(--gradient-hero);
         color: white;
         position: relative;
         overflow: hidden;
     }

     .contact-cta-background {
         position: absolute;
         inset: 0;
         background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="contactCtaDots" width="25" height="25" patternUnits="userSpaceOnUse"><circle cx="12.5" cy="12.5" r="2" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23contactCtaDots)"/></svg>');
         opacity: 0.6;
     }

     .contact-floating-elements {
         position: absolute;
         inset: 0;
         pointer-events: none;
     }

     .contact-floating-element {
         position: absolute;
         width: 40px;
         height: 40px;
         background: rgba(255, 255, 255, 0.08);
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         color: rgba(255, 255, 255, 0.25);
         font-size: 1.2rem;
         animation: contactFloatAnimation 6s ease-in-out infinite;
     }

     .contact-floating-element:nth-child(1) {
         animation-delay: 0s;
     }

     .contact-floating-element:nth-child(2) {
         animation-delay: 1.5s;
     }

     .contact-floating-element:nth-child(3) {
         animation-delay: 3s;
     }

     .contact-floating-element:nth-child(4) {
         animation-delay: 4.5s;
     }

     @keyframes contactFloatAnimation {

         0%,
         100% {
             transform: translateY(0px) rotate(0deg);
             opacity: 0.25;
         }

         50% {
             transform: translateY(-20px) rotate(180deg);
             opacity: 0.6;
         }
     }

     .contact-cta-section .container {
         position: relative;
         z-index: 2;
         max-width: 1000px;
     }

     .contact-cta-content {
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 2.5rem;
     }

     .contact-cta-header {
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 2rem;
         text-align: center;
         width: 100%;
     }

     .contact-cta-icon {
         width: 80px;
         height: 80px;
         background: rgba(255, 255, 255, 0.15);
         border-radius: 24px;
         display: flex;
         align-items: center;
         justify-content: center;
         color: white;
         font-size: 2rem;
         animation: contactCtaFloat 4s ease-in-out infinite;
         backdrop-filter: blur(15px);
         border: 1px solid rgba(255, 255, 255, 0.2);
         flex-shrink: 0;
     }

     @keyframes contactCtaFloat {

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

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

     .contact-cta-text h2 {
         font-size: 2.5rem;
         font-weight: 900;
         margin-bottom: 1rem;
         line-height: 1.2;
         text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
     }

     .contact-cta-text p {
         font-size: 1.2rem;
         opacity: 0.95;
         line-height: 1.6;
         font-weight: 400;
         margin: 0 auto;
         max-width: 500px;
     }

     .contact-cta-actions {
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 1.5rem;
     }

     .contact-cta-buttons {
         display: flex;
         gap: 1.5rem;
         justify-content: center;
         flex-wrap: wrap;
     }

     .contact-cta-btn {
         display: inline-flex;
         align-items: center;
         gap: 0.75rem;
         padding: 1.2rem 2rem;
         border-radius: 14px;
         text-decoration: none;
         font-weight: 700;
         font-size: 1rem;
         transition: all 0.4s ease;
         position: relative;
         overflow: hidden;
         white-space: nowrap;
     }

     .contact-cta-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.6s ease;
     }

     .contact-cta-btn-primary {
         background: white;
         color: var(--primary-color);
         box-shadow: 0 6px 20px rgba(255, 255, 255, 0.2);
     }

     .contact-cta-btn-primary:hover {
         transform: translateY(-3px);
         box-shadow: 0 12px 30px rgba(255, 255, 255, 0.3);
         color: var(--primary-color);
     }

     .contact-cta-btn-secondary {
         background: rgba(255, 255, 255, 0.15);
         color: white;
         border: 2px solid rgba(255, 255, 255, 0.3);
         backdrop-filter: blur(15px);
     }

     .contact-cta-btn-secondary:hover {
         transform: translateY(-3px);
         background: rgba(255, 255, 255, 0.25);
         border-color: rgba(255, 255, 255, 0.5);
         color: white;
     }

     .contact-cta-btn:hover::before {
         left: 100%;
     }

     .contact-cta-guarantee {
         display: inline-flex;
         align-items: center;
         gap: 0.75rem;
         color: rgba(255, 255, 255, 0.85);
         font-size: 0.9rem;
         font-weight: 500;
         background: rgba(255, 255, 255, 0.1);
         padding: 0.75rem 1.5rem;
         border-radius: 20px;
         backdrop-filter: blur(15px);
         border: 1px solid rgba(255, 255, 255, 0.2);
     }

     .contact-cta-guarantee i {
         font-size: 1rem;
         color: var(--success-color);
     }

     /* Responsive Design */
     @media (max-width: 1024px) {
         .contact-map-container {
             grid-template-columns: 1fr;
             gap: 2rem;
         }

         .contact-map-info {
             position: static;
         }

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

     @media (max-width: 768px) {
         .contact-hero {
             min-height: 60vh;
             padding: 120px 0 60px;
         }

         .contact-hero .hero-title {
             font-size: 2.5rem;
         }

         .contact-section-title {
             font-size: 2.5rem;
         }

         .contact-info-section,
         .contact-methods-section,
         .contact-map-section {
             padding: 5rem 0;
         }

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

         .hero-features {
             gap: 1rem;
             flex-direction: column;
             align-items: center;
         }

         .contact-cta-header {
             flex-direction: column;
             gap: 1.5rem;
         }

         .contact-cta-buttons {
             flex-direction: column;
             align-items: center;
             gap: 1rem;
             width: 100%;
         }

         .contact-cta-btn {
             width: 100%;
             max-width: 280px;
             justify-content: center;
             padding: 1rem 1.5rem;
         }
     }

     @media (max-width: 480px) {
         .contact-hero {
             min-height: 50vh;
             padding: 100px 0 40px;
         }

         .contact-hero .hero-title {
             font-size: 2rem;
         }

         .contact-section-title {
             font-size: 2rem;
         }

         .contact-info-section,
         .contact-methods-section,
         .contact-map-section {
             padding: 4rem 0;
         }

         .contact-info-card,
         .contact-method-card {
             padding: 2rem;
         }

         .contact-map-frame iframe {
             height: 300px;
         }

         .contact-cta-section {
             padding: 3rem 0;
         }

         .contact-cta-icon {
             width: 60px;
             height: 60px;
             font-size: 1.5rem;
         }

         .contact-cta-text h2 {
             font-size: 1.8rem;
         }

         .contact-cta-guarantee {
             text-align: center;
             padding: 0.75rem 1rem;
             font-size: 0.85rem;
         }
     }

     /* Animation para carregamento */
     @media (prefers-reduced-motion: no-preference) {

         .contact-info-card,
         .contact-method-card {
             animation: contactFadeInUp 0.6s ease-out forwards;
         }

         .contact-info-card:nth-child(1) {
             animation-delay: 0.1s;
         }

         .contact-info-card:nth-child(2) {
             animation-delay: 0.2s;
         }

         .contact-info-card:nth-child(3) {
             animation-delay: 0.3s;
         }

         .contact-info-card:nth-child(4) {
             animation-delay: 0.4s;
         }
     }

     @keyframes contactFadeInUp {
         from {
             opacity: 0;
             transform: translateY(30px);
         }

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

     /* Estados de foco para acessibilidade */
     .contact-action-link:focus,
     .contact-social-link:focus,
     .contact-directions-btn:focus,
     .contact-cta-btn:focus {
         outline: 3px solid var(--primary-color);
         outline-offset: 2px;
     }

     /* ===== PARTNERSHIPS PAGE STYLES ===== */

     /* Partnerships Hero Section */
     .partnerships-hero {
         min-height: 80vh;
         background: var(--gradient-hero);
         display: flex;
         align-items: center;
         position: relative;
         overflow: hidden;
         padding: 140px 0 80px;
     }

     .partnerships-hero-background {
         position: absolute;
         inset: 0;
         z-index: 1;
     }

     .partnerships-hero-overlay {
         position: absolute;
         inset: 0;
         background: rgba(0, 0, 0, 0.4);
     }

     .partnerships-hero-particles {
         position: absolute;
         inset: 0;
         background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="partnershipsGrid" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1.5" fill="rgba(255,255,255,0.15)"/></pattern></defs><rect width="100" height="100" fill="url(%23partnershipsGrid)"/></svg>');
         opacity: 0.6;
     }

     .partnerships-hero .container {
         position: relative;
         z-index: 5;
         max-width: 1000px;
     }

     .partnerships-hero-content {
         text-align: center;
         color: white;
     }

     .partnerships-breadcrumbs {
         display: inline-flex;
         align-items: center;
         background: rgba(255, 255, 255, 0.15);
         backdrop-filter: blur(15px);
         border-radius: 30px;
         padding: 0.75rem 1.5rem;
         margin-bottom: 2rem;
         font-size: 0.95rem;
         border: 1px solid rgba(255, 255, 255, 0.2);
     }

     .partnerships-breadcrumbs a {
         color: rgba(255, 255, 255, 0.9);
         text-decoration: none;
         transition: color 0.3s ease;
         font-weight: 500;
     }

     .partnerships-breadcrumbs a:hover {
         color: var(--secondary-color);
     }

     .partnerships-separator {
         margin: 0 1rem;
         color: rgba(255, 255, 255, 0.6);
         font-size: 0.9rem;
     }

     .partnerships-current {
         color: var(--secondary-color);
         font-weight: 600;
     }

     .partnerships-hero-title {
         font-size: 4rem;
         font-weight: 900;
         margin-bottom: 1.5rem;
         line-height: 1.2;
         text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
     }

     .partnerships-hero-subtitle {
         font-size: 1.4rem;
         opacity: 0.95;
         max-width: 800px;
         margin: 0 auto 4rem;
         line-height: 1.7;
         font-weight: 400;
     }

     .partnerships-hero-stats {
         display: flex;
         justify-content: center;
         gap: 4rem;
         flex-wrap: wrap;
     }

     .partnerships-stat-item {
         text-align: center;
         background: rgba(255, 255, 255, 0.1);
         backdrop-filter: blur(10px);
         padding: 2rem 1.5rem;
         border-radius: 20px;
         border: 1px solid rgba(255, 255, 255, 0.2);
         min-width: 150px;
     }

     .partnerships-stat-number {
         display: block;
         font-size: 2.5rem;
         font-weight: 900;
         color: var(--secondary-color);
         margin-bottom: 0.5rem;
     }

     .partnerships-stat-label {
         font-size: 0.9rem;
         opacity: 0.9;
         font-weight: 500;
     }

     /* Partnerships Sections */
     .partnerships-benefits-section,
     .partnerships-process-section,
     .partnerships-faq-section {
         padding: 8rem 0;
     }

     .partnerships-benefits-section {
         background: var(--bg-primary);
     }

     .partnerships-process-section {
         background: var(--bg-secondary);
     }

     .partnerships-faq-section {
         background: var(--bg-primary);
     }

     .partnerships-showcase-section {
         padding: 8rem 0;
         position: relative;
         background: var(--bg-secondary);
     }

     .partnerships-showcase-background {
         position: absolute;
         inset: 0;
         background: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, rgba(14, 165, 233, 0.05) 100%);
     }

     .partnerships-showcase-overlay {
         position: absolute;
         inset: 0;
         background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="showcasePattern" width="30" height="30" patternUnits="userSpaceOnUse"><circle cx="15" cy="15" r="2" fill="rgba(37,99,235,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23showcasePattern)"/></svg>');
         opacity: 0.3;
     }

     /* Section Headers */
     .partnerships-section-header {
         text-align: center;
         margin-bottom: 5rem;
         position: relative;
         z-index: 2;
     }

     .partnerships-section-badge {
         display: inline-flex;
         align-items: center;
         gap: 0.5rem;
         background: rgba(37, 99, 235, 0.1);
         color: var(--primary-color);
         padding: 0.75rem 1.5rem;
         border-radius: 25px;
         font-size: 0.9rem;
         font-weight: 600;
         border: 1px solid rgba(37, 99, 235, 0.2);
         margin-bottom: 1.5rem;
         backdrop-filter: blur(10px);
     }

     .partnerships-showcase-badge {
         background: rgba(255, 255, 255, 0.15);
         color: var(--primary-color);
         border-color: rgba(255, 255, 255, 0.2);
     }

     .partnerships-section-title {
         font-size: 3.2rem;
         font-weight: 900;
         color: var(--text-primary);
         margin-bottom: 1.5rem;
         line-height: 1.2;
     }

     .partnerships-showcase-title {
         color: var(--text-primary);
     }

     .partnerships-section-subtitle {
         font-size: 1.3rem;
         color: var(--text-secondary);
         max-width: 700px;
         margin: 0 auto;
         line-height: 1.7;
         font-weight: 400;
     }

     /* Benefits Grid */
     .partnerships-benefits-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
         gap: 2.5rem;
     }

     .partnerships-benefit-card {
         background: var(--bg-secondary);
         border: 1px solid var(--border-color);
         border-radius: 24px;
         padding: 2.5rem;
         transition: all 0.4s ease;
         position: relative;
         overflow: hidden;
         height: 100%;
     }

     .partnerships-benefit-card::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         height: 4px;
         background: var(--gradient-primary);
         transform: scaleX(0);
         transition: transform 0.4s ease;
     }

     .partnerships-benefit-card:hover {
         transform: translateY(-8px);
         box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
         border-color: var(--primary-color);
     }

     [data-theme="dark"] .partnerships-benefit-card:hover {
         box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
     }

     .partnerships-benefit-card:hover::before {
         transform: scaleX(1);
     }

     .partnerships-benefit-featured {
         border-color: var(--primary-color);
         box-shadow: 0 15px 30px rgba(37, 99, 235, 0.15);
     }

     .partnerships-benefit-featured::before {
         transform: scaleX(1);
     }

     .partnerships-popular-badge {
         position: absolute;
         top: -10px;
         right: 20px;
         background: var(--gradient-primary);
         color: white;
         padding: 0.5rem 1rem;
         border-radius: 15px;
         font-size: 0.8rem;
         font-weight: 600;
         display: flex;
         align-items: center;
         gap: 0.25rem;
         z-index: 10;
     }

     .partnerships-benefit-icon {
         width: 80px;
         height: 80px;
         background: var(--gradient-primary);
         border-radius: 24px;
         display: flex;
         align-items: center;
         justify-content: center;
         color: white;
         font-size: 2rem;
         margin-bottom: 1.5rem;
         transition: transform 0.3s ease;
     }

     .partnerships-benefit-card:hover .partnerships-benefit-icon {
         transform: scale(1.1) rotate(5deg);
     }

     .partnerships-benefit-content h3 {
         font-size: 1.4rem;
         font-weight: 700;
         color: var(--text-primary);
         margin-bottom: 1rem;
     }

     .partnerships-benefit-content p {
         color: var(--text-secondary);
         margin-bottom: 1.5rem;
         line-height: 1.6;
     }

     .partnerships-benefit-features {
         display: flex;
         flex-direction: column;
         gap: 0.75rem;
     }

     .partnerships-feature-item {
         display: flex;
         align-items: center;
         gap: 0.75rem;
         color: var(--text-secondary);
         font-weight: 500;
     }

     .partnerships-feature-item i {
         color: var(--success-color);
         font-size: 1rem;
     }

     /* Partners Showcase */
     .partnerships-showcase-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
         gap: 2rem;
         position: relative;
         z-index: 2;
     }

     .partnerships-partner-card {
         background: var(--bg-primary);
         border: 1px solid var(--border-color);
         border-radius: 20px;
         padding: 2rem;
         text-align: center;
         transition: all 0.4s ease;
         height: 100%;
     }

     .partnerships-partner-card:hover {
         transform: translateY(-5px);
         box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
     }

     [data-theme="dark"] .partnerships-partner-card:hover {
         box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
     }

     .partnerships-partner-logo {
         margin-bottom: 1.5rem;
     }

     .partnerships-partner-placeholder {
         width: 120px;
         height: 120px;
         background: var(--gradient-primary);
         border-radius: 20px;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         color: white;
         margin: 0 auto;
         gap: 0.5rem;
     }

     .partnerships-partner-placeholder i {
         font-size: 2rem;
     }

     .partnerships-partner-placeholder span {
         font-size: 0.9rem;
         font-weight: 600;
     }

     .partnerships-partner1 {
         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     }

     .partnerships-partner2 {
         background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
     }

     .partnerships-partner3 {
         background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
     }

     .partnerships-partner4 {
         background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
     }

     .partnerships-partner-info h4 {
         font-size: 1.2rem;
         font-weight: 700;
         color: var(--text-primary);
         margin-bottom: 0.5rem;
     }

     .partnerships-partner-info p {
         color: var(--text-secondary);
         font-size: 0.9rem;
         margin: 0;
     }

     /* Process Timeline */
     .partnerships-process-timeline {
         display: flex;
         flex-direction: column;
         gap: 3rem;
         max-width: 800px;
         margin: 0 auto;
         position: relative;
     }

     .partnerships-process-timeline::before {
         content: '';
         position: absolute;
         left: 30px;
         top: 60px;
         bottom: 60px;
         width: 2px;
         background: var(--gradient-primary);
     }

     .partnerships-timeline-item {
         display: flex;
         align-items: flex-start;
         gap: 2rem;
         position: relative;
     }

     .partnerships-timeline-marker {
         width: 60px;
         height: 60px;
         background: var(--gradient-primary);
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         color: white;
         font-weight: 700;
         font-size: 1.2rem;
         flex-shrink: 0;
         z-index: 2;
         box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
     }

     .partnerships-timeline-content {
         background: var(--bg-primary);
         border: 1px solid var(--border-color);
         border-radius: 16px;
         padding: 2rem;
         flex: 1;
         transition: all 0.3s ease;
     }

     .partnerships-timeline-content:hover {
         transform: translateX(8px);
         box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
     }

     [data-theme="dark"] .partnerships-timeline-content:hover {
         box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
     }

     .partnerships-timeline-content h3 {
         font-size: 1.3rem;
         font-weight: 700;
         color: var(--text-primary);
         margin-bottom: 0.5rem;
     }

     .partnerships-timeline-content p {
         color: var(--text-secondary);
         margin: 0;
         line-height: 1.6;
     }

     /* FAQ Section */
     .partnerships-faq-container {
         max-width: 800px;
         margin: 0 auto;
     }

     .partnerships-faq-item {
         background: var(--bg-secondary);
         border: 1px solid var(--border-color);
         border-radius: 16px;
         margin-bottom: 1rem;
         overflow: hidden;
         transition: all 0.3s ease;
     }

     .partnerships-faq-item:hover {
         border-color: var(--primary-color);
     }

     .partnerships-faq-question {
         width: 100%;
         background: none;
         border: none;
         padding: 1.5rem;
         text-align: left;
         font-size: 1.1rem;
         font-weight: 600;
         color: var(--text-primary);
         cursor: pointer;
         display: flex;
         align-items: center;
         gap: 1rem;
         transition: all 0.3s ease;
     }

     .partnerships-faq-question:hover {
         background: rgba(37, 99, 235, 0.05);
     }

     .partnerships-faq-icon {
         color: var(--primary-color);
         font-size: 1.2rem;
         flex-shrink: 0;
     }

     .partnerships-faq-question span {
         flex: 1;
     }

     .partnerships-faq-toggle {
         color: var(--text-secondary);
         transition: transform 0.3s ease;
         flex-shrink: 0;
     }

     .partnerships-faq-item.active .partnerships-faq-toggle {
         transform: rotate(180deg);
     }

     .partnerships-faq-answer {
         padding: 0 1.5rem;
         max-height: 0;
         overflow: hidden;
         transition: all 0.3s ease;
     }

     .partnerships-faq-item.active .partnerships-faq-answer {
         padding: 0 1.5rem 1.5rem;
         max-height: 200px;
     }

     .partnerships-faq-answer p {
         color: var(--text-secondary);
         line-height: 1.6;
         margin: 0;
     }

     /* Partnership CTA */
     .partnerships-cta-section {
         padding: 5rem 0;
         background: var(--gradient-hero);
         color: white;
         position: relative;
         overflow: hidden;
     }

     .partnerships-cta-background {
         position: absolute;
         inset: 0;
         background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="partnershipsCtaDots" width="25" height="25" patternUnits="userSpaceOnUse"><circle cx="12.5" cy="12.5" r="2" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23partnershipsCtaDots)"/></svg>');
         opacity: 0.6;
     }

     .partnerships-floating-elements {
         position: absolute;
         inset: 0;
         pointer-events: none;
     }

     .partnerships-floating-element {
         position: absolute;
         width: 40px;
         height: 40px;
         background: rgba(255, 255, 255, 0.08);
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         color: rgba(255, 255, 255, 0.25);
         font-size: 1.2rem;
         animation: partnershipsFloatAnimation 6s ease-in-out infinite;
     }

     .partnerships-floating-element:nth-child(1) {
         animation-delay: 0s;
     }

     .partnerships-floating-element:nth-child(2) {
         animation-delay: 1.5s;
     }

     .partnerships-floating-element:nth-child(3) {
         animation-delay: 3s;
     }

     .partnerships-floating-element:nth-child(4) {
         animation-delay: 4.5s;
     }

     @keyframes partnershipsFloatAnimation {

         0%,
         100% {
             transform: translateY(0px) rotate(0deg);
             opacity: 0.25;
         }

         50% {
             transform: translateY(-20px) rotate(180deg);
             opacity: 0.6;
         }
     }

     .partnerships-cta-section .container {
         position: relative;
         z-index: 2;
         max-width: 1000px;
     }

     .partnerships-cta-content {
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 2.5rem;
     }

     .partnerships-cta-header {
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 2rem;
         text-align: center;
         width: 100%;
     }

     .partnerships-cta-icon {
         width: 80px;
         height: 80px;
         background: rgba(255, 255, 255, 0.15);
         border-radius: 24px;
         display: flex;
         align-items: center;
         justify-content: center;
         color: white;
         font-size: 2rem;
         animation: partnershipsCtaFloat 4s ease-in-out infinite;
         backdrop-filter: blur(15px);
         border: 1px solid rgba(255, 255, 255, 0.2);
         flex-shrink: 0;
     }

     @keyframes partnershipsCtaFloat {

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

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

     .partnerships-cta-text h2 {
         font-size: 2.5rem;
         font-weight: 900;
         margin-bottom: 1rem;
         line-height: 1.2;
         text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
     }

     .partnerships-cta-text p {
         font-size: 1.2rem;
         opacity: 0.95;
         line-height: 1.6;
         font-weight: 400;
         margin: 0 auto;
         max-width: 500px;
     }

     .partnerships-cta-actions {
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 1.5rem;
     }

     .partnerships-cta-buttons {
         display: flex;
         gap: 1.5rem;
         justify-content: center;
         flex-wrap: wrap;
     }

     .partnerships-cta-btn {
         display: inline-flex;
         align-items: center;
         gap: 0.75rem;
         padding: 1.2rem 2rem;
         border-radius: 14px;
         text-decoration: none;
         font-weight: 700;
         font-size: 1rem;
         transition: all 0.4s ease;
         position: relative;
         overflow: hidden;
         white-space: nowrap;
     }

     .partnerships-cta-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.6s ease;
     }

     .partnerships-cta-btn-primary {
         background: white;
         color: var(--primary-color);
         box-shadow: 0 6px 20px rgba(255, 255, 255, 0.2);
     }

     .partnerships-cta-btn-primary:hover {
         transform: translateY(-3px);
         box-shadow: 0 12px 30px rgba(255, 255, 255, 0.3);
         color: var(--primary-color);
     }

     .partnerships-cta-btn-secondary {
         background: rgba(255, 255, 255, 0.15);
         color: white;
         border: 2px solid rgba(255, 255, 255, 0.3);
         backdrop-filter: blur(15px);
     }

     .partnerships-cta-btn-secondary:hover {
         transform: translateY(-3px);
         background: rgba(255, 255, 255, 0.25);
         border-color: rgba(255, 255, 255, 0.5);
         color: white;
     }

     .partnerships-cta-btn:hover::before {
         left: 100%;
     }

     .partnerships-cta-guarantee {
         display: inline-flex;
         align-items: center;
         gap: 0.75rem;
         color: rgba(255, 255, 255, 0.85);
         font-size: 0.9rem;
         font-weight: 500;
         background: rgba(255, 255, 255, 0.1);
         padding: 0.75rem 1.5rem;
         border-radius: 20px;
         backdrop-filter: blur(15px);
         border: 1px solid rgba(255, 255, 255, 0.2);
     }

     .partnerships-cta-guarantee i {
         font-size: 1rem;
         color: var(--success-color);
     }

     /* Responsive Design */
     @media (max-width: 1024px) {
         .partnerships-benefits-grid {
             grid-template-columns: 1fr;
             gap: 2rem;
         }

         .partnerships-showcase-grid {
             grid-template-columns: repeat(2, 1fr);
             gap: 1.5rem;
         }
     }

     @media (max-width: 768px) {
         .partnerships-hero {
             min-height: 70vh;
             padding: 120px 0 60px;
         }

         .partnerships-hero-title {
             font-size: 2.8rem;
         }

         .partnerships-section-title {
             font-size: 2.5rem;
         }

         .partnerships-benefits-section,
         .partnerships-process-section,
         .partnerships-faq-section,
         .partnerships-showcase-section {
             padding: 5rem 0;
         }

         .partnerships-hero-stats {
             gap: 2rem;
             flex-direction: column;
             align-items: center;
         }

         .partnerships-stat-item {
             min-width: 200px;
         }

         .partnerships-showcase-grid {
             grid-template-columns: 1fr;
         }

         .partnerships-process-timeline::before {
             display: none;
         }

         .partnerships-timeline-item {
             flex-direction: column;
             text-align: center;
             gap: 1rem;
         }

         .partnerships-cta-header {
             flex-direction: column;
             gap: 1.5rem;
         }

         .partnerships-cta-buttons {
             flex-direction: column;
             align-items: center;
             gap: 1rem;
             width: 100%;
         }

         .partnerships-cta-btn {
             width: 100%;
             max-width: 280px;
             justify-content: center;
             padding: 1rem 1.5rem;
         }
     }

     @media (max-width: 480px) {
         .partnerships-hero {
             min-height: 60vh;
             padding: 100px 0 40px;
         }

         .partnerships-hero-title {
             font-size: 2.2rem;
         }

         .partnerships-section-title {
             font-size: 2rem;
         }

         .partnerships-benefits-section,
         .partnerships-process-section,
         .partnerships-faq-section,
         .partnerships-showcase-section {
             padding: 4rem 0;
         }

         .partnerships-benefit-card,
         .partnerships-timeline-content {
             padding: 2rem;
         }

         .partnerships-cta-section {
             padding: 3rem 0;
         }

         .partnerships-cta-icon {
             width: 60px;
             height: 60px;
             font-size: 1.5rem;
         }

         .partnerships-cta-text h2 {
             font-size: 1.8rem;
         }

         .partnerships-cta-guarantee {
             text-align: center;
             padding: 0.75rem 1rem;
             font-size: 0.85rem;
         }
     }

     /* Animation para carregamento */
     @media (prefers-reduced-motion: no-preference) {

         .partnerships-benefit-card,
         .partnerships-partner-card,
         .partnerships-timeline-item {
             animation: partnershipsFadeInUp 0.6s ease-out forwards;
         }

         .partnerships-benefit-card:nth-child(1) {
             animation-delay: 0.1s;
         }

         .partnerships-benefit-card:nth-child(2) {
             animation-delay: 0.2s;
         }

         .partnerships-benefit-card:nth-child(3) {
             animation-delay: 0.3s;
         }
     }

     @keyframes partnershipsFadeInUp {
         from {
             opacity: 0;
             transform: translateY(30px);
         }

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

     /* Estados de foco para acessibilidade */
     .partnerships-faq-question:focus,
     .partnerships-cta-btn:focus {
         outline: 3px solid var(--primary-color);
         outline-offset: 2px;
     }

     /* ===== WORKSPACE AUTH UNIFIED STYLES ===== */

     .workspace-auth-hero {
         min-height: 100vh;
         background: var(--gradient-hero);
         display: flex;
         align-items: center;
         justify-content: center;
         position: relative;
         overflow: hidden;
         padding: 2rem 0;
     }

     .workspace-auth-hero::before {
         content: '';
         position: absolute;
         inset: 0;
         background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="workspaceAuthGrid" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1.5" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23workspaceAuthGrid)"/></svg>');
         opacity: 0.3;
     }

     .workspace-auth-container {
         position: relative;
         z-index: 2;
         width: 100%;
         max-width: 400px;
         margin: 0 auto;
         padding: 0 1.5rem;
     }

     .workspace-auth-card {
         background: rgba(255, 255, 255, 0.95);
         backdrop-filter: blur(20px);
         border: 1px solid rgba(255, 255, 255, 0.2);
         border-radius: 24px;
         padding: 2rem;
         box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
         transition: all 0.4s ease;
         position: relative;
         overflow: hidden;
     }

     [data-theme="dark"] .workspace-auth-card {
         background: rgba(15, 23, 42, 0.95);
         border-color: rgba(255, 255, 255, 0.1);
     }

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

     /* Tab Navigation */
     .workspace-auth-tabs {
         display: flex;
         background: var(--bg-secondary);
         border-radius: 16px;
         padding: 0.3rem;
         margin-bottom: 2rem;
         border: 1px solid var(--border-color);
     }

     .workspace-auth-tab {
         flex: 1;
         background: none;
         border: none;
         padding: 0.7rem 0.5rem;
         font-weight: 600;
         color: var(--text-secondary);
         cursor: pointer;
         border-radius: 12px;
         transition: all 0.3s ease;
         font-size: 0.85rem;
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 0.4rem;
     }

     .workspace-auth-tab.active {
         color: white;
         background: var(--gradient-primary);
         box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
     }

     .workspace-auth-tab:not(.active):hover {
         color: var(--primary-color);
         background: rgba(37, 99, 235, 0.1);
     }

     /* Forms Container */
     .workspace-auth-forms-container {
         position: relative;
         width: 100%;
         min-height: 400px;
     }

     .workspace-auth-form-wrapper {
         width: 100%;
         opacity: 0;
         visibility: hidden;
         transform: translateX(30px);
         transition: all 0.3s ease;
         position: absolute;
         top: 0;
         left: 0;
     }

     .workspace-auth-form-wrapper.active {
         opacity: 1;
         visibility: visible;
         transform: translateX(0);
         position: relative;
     }

     /* Auth Header */
     .workspace-auth-header {
         text-align: center;
         margin-bottom: 1.5rem;
     }

     .workspace-auth-logo {
         width: 60px;
         height: 60px;
         background: var(--gradient-primary);
         border-radius: 18px;
         display: flex;
         align-items: center;
         justify-content: center;
         color: white;
         font-size: 1.5rem;
         margin: 0 auto 1rem;
         transition: all 0.3s ease;
     }

     .workspace-auth-title {
         font-size: 1.5rem;
         font-weight: 800;
         color: var(--text-primary);
         margin-bottom: 0.3rem;
         line-height: 1.2;
     }

     .workspace-auth-subtitle {
         color: var(--text-secondary);
         font-size: 0.9rem;
         font-weight: 500;
     }

     /* Social Login */
     .workspace-social-login {
         margin-bottom: 1.5rem;
     }

     .workspace-social-btn {
         width: 100%;
         padding: 0.9rem 1rem;
         border: 2px solid var(--border-color);
         border-radius: 12px;
         background: var(--bg-primary);
         color: var(--text-primary);
         font-weight: 600;
         cursor: pointer;
         transition: all 0.3s ease;
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 0.7rem;
         text-decoration: none;
         font-size: 0.9rem;
     }

     .workspace-social-btn:hover {
         border-color: #ea4335;
         background: rgba(234, 67, 53, 0.05);
         transform: translateY(-1px);
         color: #ea4335;
     }

     .workspace-divider {
         display: flex;
         align-items: center;
         margin: 1.2rem 0;
         color: var(--text-secondary);
         font-size: 0.8rem;
     }

     .workspace-divider::before,
     .workspace-divider::after {
         content: '';
         flex: 1;
         height: 1px;
         background: var(--border-color);
     }

     .workspace-divider span {
         padding: 0 0.8rem;
     }

     /* Auth Form */
     .workspace-auth-form {
         display: flex;
         flex-direction: column;
         gap: 1rem;
     }

     .workspace-form-group {
         position: relative;
     }

     .workspace-form-input {
         width: 100%;
         padding: 0.9rem 0.9rem 0.9rem 2.8rem;
         border: 2px solid var(--border-color);
         border-radius: 12px;
         font-size: 0.9rem;
         background: var(--bg-primary);
         color: var(--text-primary);
         transition: all 0.3s ease;
         outline: none;
     }

     .workspace-form-input:focus {
         border-color: var(--primary-color);
         box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
     }

     .workspace-form-input::placeholder {
         color: var(--text-secondary);
     }

     .workspace-form-icon {
         position: absolute;
         left: 0.9rem;
         top: 50%;
         transform: translateY(-50%);
         color: var(--text-secondary);
         font-size: 0.9rem;
         transition: color 0.3s ease;
         pointer-events: none;
     }

     .workspace-form-input:focus+.workspace-form-icon {
         color: var(--primary-color);
     }

     /* Checkbox */
     .workspace-form-checkbox {
         display: flex;
         align-items: center;
         gap: 0.6rem;
         margin: 0.8rem 0;
     }

     .workspace-checkbox-input {
         width: 16px;
         height: 16px;
         accent-color: var(--primary-color);
     }

     .workspace-checkbox-label {
         color: var(--text-secondary);
         font-size: 0.8rem;
         cursor: pointer;
         user-select: none;
         line-height: 1.3;
     }

     .workspace-checkbox-label a {
         color: var(--primary-color);
         text-decoration: none;
     }

     .workspace-checkbox-label a:hover {
         text-decoration: underline;
     }

     /* Auth Button */
     .workspace-auth-btn {
         width: 100%;
         padding: 1rem 1.5rem;
         background: var(--gradient-primary);
         color: white;
         border: none;
         border-radius: 12px;
         font-size: 0.9rem;
         font-weight: 700;
         cursor: pointer;
         transition: all 0.3s ease;
         position: relative;
         overflow: hidden;
         margin-top: 0.5rem;
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 0.5rem;
     }

     .workspace-auth-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.6s ease;
     }

     .workspace-auth-btn:hover {
         transform: translateY(-2px);
         box-shadow: 0 8px 25px rgba(37, 99, 235, 0.3);
     }

     .workspace-auth-btn:hover::before {
         left: 100%;
     }

     /* Error Messages */
     .workspace-alert {
         padding: 0.8rem 1rem;
         border-radius: 10px;
         margin-bottom: 1rem;
         border: 1px solid;
         font-size: 0.85rem;
     }

     .workspace-alert-danger {
         background: rgba(239, 68, 68, 0.1);
         border-color: rgba(239, 68, 68, 0.2);
         color: var(--error-color);
     }

     .workspace-alert ul {
         margin: 0;
         padding-left: 1rem;
     }

     .workspace-alert li {
         font-size: 0.85rem;
         line-height: 1.4;
     }

     /* Theme Toggle */
     .workspace-theme-toggle {
         position: fixed;
         top: 1.5rem;
         right: 1.5rem;
         background: rgba(255, 255, 255, 0.1);
         backdrop-filter: blur(10px);
         border: 1px solid rgba(255, 255, 255, 0.2);
         color: white;
         padding: 0.6rem;
         border-radius: 10px;
         cursor: pointer;
         transition: all 0.3s ease;
         z-index: 1000;
         font-size: 0.9rem;
     }

     .workspace-theme-toggle:hover {
         background: rgba(255, 255, 255, 0.2);
         transform: scale(1.05);
     }

     /* Loading State */
     .workspace-auth-btn.loading {
         pointer-events: none;
         opacity: 0.7;
     }

     .workspace-auth-btn.loading::after {
         content: '';
         position: absolute;
         top: 50%;
         left: 50%;
         width: 18px;
         height: 18px;
         margin: -9px 0 0 -9px;
         border: 2px solid transparent;
         border-top: 2px solid white;
         border-radius: 50%;
         animation: workspaceSpin 1s linear infinite;
     }

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

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

     /* Responsive Design */
     @media (max-width: 768px) {
         .workspace-auth-hero {
             padding: 1rem 0;
         }

         .workspace-auth-container {
             max-width: 100%;
             padding: 0 1rem;
         }

         .workspace-auth-card {
             padding: 1.5rem;
             border-radius: 16px;
             margin: 1rem 0;
         }

         .workspace-auth-title {
             font-size: 1.3rem;
         }

         .workspace-theme-toggle {
             top: 1rem;
             right: 1rem;
             padding: 0.5rem;
         }
     }

     @media (max-width: 480px) {
         .workspace-auth-card {
             padding: 1.2rem;
             margin: 0.5rem 0;
         }

         .workspace-auth-title {
             font-size: 1.2rem;
         }

         .workspace-form-input {
             padding: 0.8rem 0.8rem 0.8rem 2.5rem;
             font-size: 0.85rem;
         }

         .workspace-form-icon {
             left: 0.8rem;
             font-size: 0.85rem;
         }

         .workspace-auth-tab {
             padding: 0.6rem 0.4rem;
             font-size: 0.8rem;
         }
     }

     /* Animation for card entrance */
     @media (prefers-reduced-motion: no-preference) {
         .workspace-auth-card {
             animation: workspaceAuthCardEnter 0.6s ease-out;
         }
     }

     @keyframes workspaceAuthCardEnter {
         from {
             opacity: 0;
             transform: translateY(20px) scale(0.98);
         }

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

     /* ===== WORKSPACE DASHBOARD STYLES ===== */

     /* Dashboard Layout */
     .workspace-dashboard {
         min-height: 100vh;
         background: var(--bg-primary);
         display: flex;
     }

     /* Sidebar */
     .workspace-sidebar {
         width: 280px;
         background: var(--bg-secondary);
         border-right: 1px solid var(--border-color);
         position: fixed;
         height: 100vh;
         left: 0;
         top: 0;
         z-index: 1000;
         transition: all 0.3s ease;
         overflow-y: auto;
     }

     .workspace-sidebar.collapsed {
         width: 80px;
     }

     .workspace-sidebar::-webkit-scrollbar {
         width: 4px;
     }

     .workspace-sidebar::-webkit-scrollbar-track {
         background: transparent;
     }

     .workspace-sidebar::-webkit-scrollbar-thumb {
         background: var(--border-color);
         border-radius: 2px;
     }

     /* Sidebar Header */
     .workspace-sidebar-header {
         padding: 1.5rem;
         border-bottom: 1px solid var(--border-color);
         display: flex;
         align-items: center;
         gap: 1rem;
     }

     .workspace-logo {
         width: 40px;
         height: 40px;
         background: var(--gradient-primary);
         border-radius: 12px;
         display: flex;
         align-items: center;
         justify-content: center;
         color: white;
         font-size: 1.2rem;
         flex-shrink: 0;
     }

     .workspace-brand {
         font-size: 1.3rem;
         font-weight: 800;
         color: var(--text-primary);
         white-space: nowrap;
         transition: opacity 0.3s ease;
     }

     .workspace-sidebar.collapsed .workspace-brand {
         opacity: 0;
         visibility: hidden;
     }

     /* Sidebar Toggle */
     .workspace-sidebar-toggle {
         position: absolute;
         top: 1.8rem;
         right: -12px;
         width: 24px;
         height: 24px;
         background: var(--bg-primary);
         border: 1px solid var(--border-color);
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         font-size: 0.7rem;
         color: var(--text-secondary);
         transition: all 0.3s ease;
         z-index: 1001;
     }

     .workspace-sidebar-toggle:hover {
         background: var(--primary-color);
         color: white;
         border-color: var(--primary-color);
     }

     /* Sidebar Navigation */
     .workspace-sidebar-nav {
         padding: 1.5rem 0;
     }

     .workspace-nav-section {
         margin-bottom: 2rem;
     }

     .workspace-nav-title {
         font-size: 0.75rem;
         font-weight: 700;
         color: var(--text-secondary);
         text-transform: uppercase;
         letter-spacing: 0.5px;
         padding: 0 1.5rem;
         margin-bottom: 1rem;
         transition: opacity 0.3s ease;
     }

     .workspace-sidebar.collapsed .workspace-nav-title {
         opacity: 0;
         visibility: hidden;
     }

     .workspace-nav-list {
         list-style: none;
         margin: 0;
         padding: 0;
     }

     .workspace-nav-item {
         margin-bottom: 0.25rem;
     }

     .workspace-nav-link {
         display: flex;
         align-items: center;
         gap: 1rem;
         padding: 0.75rem 1.5rem;
         color: var(--text-secondary);
         text-decoration: none;
         font-weight: 500;
         transition: all 0.3s ease;
         position: relative;
         border-radius: 0;
     }

     .workspace-nav-link:hover {
         background: rgba(37, 99, 235, 0.1);
         color: var(--primary-color);
     }

     .workspace-nav-link.active {
         background: var(--gradient-primary);
         color: white;
         box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
     }

     .workspace-nav-link.active::before {
         content: '';
         position: absolute;
         left: 0;
         top: 0;
         bottom: 0;
         width: 4px;
         background: white;
     }

     .workspace-nav-icon {
         width: 20px;
         text-align: center;
         font-size: 1.1rem;
         flex-shrink: 0;
     }

     .workspace-nav-text {
         white-space: nowrap;
         transition: opacity 0.3s ease;
     }

     .workspace-sidebar.collapsed .workspace-nav-text {
         opacity: 0;
         visibility: hidden;
     }

     .workspace-nav-badge {
         background: var(--error-color);
         color: white;
         font-size: 0.7rem;
         padding: 0.2rem 0.5rem;
         border-radius: 10px;
         margin-left: auto;
         font-weight: 600;
     }

     /* Main Content */
     .workspace-main {
         flex: 1;
         margin-left: 280px;
         transition: margin-left 0.3s ease;
         min-height: 100vh;
         display: flex;
         flex-direction: column;
     }

     .workspace-sidebar.collapsed+.workspace-main {
         margin-left: 80px;
     }

     /* Top Bar */
     .workspace-topbar {
         background: var(--bg-primary);
         border-bottom: 1px solid var(--border-color);
         padding: 1rem 2rem;
         display: flex;
         align-items: center;
         justify-content: space-between;
         position: sticky;
         top: 0;
         z-index: 999;
         backdrop-filter: blur(20px);
     }

     .workspace-topbar-left {
         display: flex;
         align-items: center;
         gap: 1rem;
     }

     .workspace-breadcrumb {
         font-size: 1.5rem;
         font-weight: 700;
         color: var(--text-primary);
     }

     .workspace-topbar-right {
         display: flex;
         align-items: center;
         gap: 1rem;
     }

     .workspace-search {
         position: relative;
     }

     .workspace-search-input {
         width: 300px;
         padding: 0.75rem 1rem 0.75rem 2.5rem;
         border: 1px solid var(--border-color);
         border-radius: 12px;
         background: var(--bg-secondary);
         color: var(--text-primary);
         font-size: 0.9rem;
         transition: all 0.3s ease;
         outline: none;
     }

     .workspace-search-input:focus {
         border-color: var(--primary-color);
         box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
     }

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

     .workspace-topbar-actions {
         display: flex;
         align-items: center;
         gap: 0.75rem;
     }

     .workspace-action-btn {
         width: 40px;
         height: 40px;
         border: 1px solid var(--border-color);
         border-radius: 10px;
         background: var(--bg-secondary);
         color: var(--text-secondary);
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         transition: all 0.3s ease;
         position: relative;
     }

     .workspace-action-btn:hover {
         background: var(--primary-color);
         color: white;
         border-color: var(--primary-color);
     }

     .workspace-action-btn .badge {
         position: absolute;
         top: -5px;
         right: -5px;
         background: var(--error-color);
         color: white;
         font-size: 0.7rem;
         padding: 0.15rem 0.4rem;
         border-radius: 8px;
         font-weight: 600;
     }

     /* User Menu */
     .workspace-user-menu {
         position: relative;
     }

     .workspace-user-trigger {
         display: flex;
         align-items: center;
         gap: 0.75rem;
         padding: 0.5rem;
         border-radius: 12px;
         cursor: pointer;
         transition: background 0.3s ease;
     }

     .workspace-user-trigger:hover {
         background: var(--bg-secondary);
     }

     .workspace-user-avatar {
         width: 36px;
         height: 36px;
         border-radius: 50%;
         background: var(--gradient-primary);
         display: flex;
         align-items: center;
         justify-content: center;
         color: white;
         font-weight: 600;
         font-size: 0.9rem;
     }

     .workspace-user-info {
         text-align: left;
     }

     .workspace-user-name {
         font-weight: 600;
         color: var(--text-primary);
         font-size: 0.9rem;
         line-height: 1.2;
     }

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

     .workspace-user-dropdown {
         position: absolute;
         top: 100%;
         right: 0;
         margin-top: 0.5rem;
         background: var(--bg-primary);
         border: 1px solid var(--border-color);
         border-radius: 12px;
         box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
         min-width: 200px;
         opacity: 0;
         visibility: hidden;
         transform: translateY(-10px);
         transition: all 0.3s ease;
         z-index: 1000;
     }

     .workspace-user-dropdown.active {
         opacity: 1;
         visibility: visible;
         transform: translateY(0);
     }

     .workspace-dropdown-item {
         display: flex;
         align-items: center;
         gap: 0.75rem;
         padding: 0.75rem 1rem;
         color: var(--text-primary);
         text-decoration: none;
         transition: background 0.3s ease;
         border-radius: 0;
     }

     .workspace-dropdown-item:first-child {
         border-radius: 12px 12px 0 0;
     }

     .workspace-dropdown-item:last-child {
         border-radius: 0 0 12px 12px;
     }

     .workspace-dropdown-item:hover {
         background: var(--bg-secondary);
     }

     .workspace-dropdown-item.danger:hover {
         background: rgba(239, 68, 68, 0.1);
         color: var(--error-color);
     }

     /* Content Area */
     .workspace-content {
         flex: 1;
         padding: 2rem;
         overflow-y: auto;
     }

     /* Dashboard Grid */
     .workspace-dashboard-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
         gap: 1.5rem;
         margin-bottom: 2rem;
     }

     /* Stats Cards */
     .workspace-stats-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
         gap: 1.5rem;
         margin-bottom: 2rem;
     }

     .workspace-stat-card {
         background: var(--bg-secondary);
         border: 1px solid var(--border-color);
         border-radius: 16px;
         padding: 1.5rem;
         transition: all 0.3s ease;
         position: relative;
         overflow: hidden;
     }

     .workspace-stat-card::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         height: 3px;
         background: var(--gradient-primary);
     }

     .workspace-stat-card:hover {
         transform: translateY(-4px);
         box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
     }

     .workspace-stat-header {
         display: flex;
         align-items: center;
         justify-content: space-between;
         margin-bottom: 1rem;
     }

     .workspace-stat-icon {
         width: 48px;
         height: 48px;
         border-radius: 12px;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 1.5rem;
         color: white;
     }

     .workspace-stat-icon.primary {
         background: var(--gradient-primary);
     }

     .workspace-stat-icon.success {
         background: linear-gradient(135deg, #10b981 0%, #059669 100%);
     }

     .workspace-stat-icon.warning {
         background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
     }

     .workspace-stat-icon.danger {
         background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
     }

     .workspace-stat-trend {
         display: flex;
         align-items: center;
         gap: 0.25rem;
         font-size: 0.8rem;
         font-weight: 600;
     }

     .workspace-stat-trend.up {
         color: var(--success-color);
     }

     .workspace-stat-trend.down {
         color: var(--error-color);
     }

     .workspace-stat-value {
         font-size: 2rem;
         font-weight: 800;
         color: var(--text-primary);
         margin-bottom: 0.25rem;
     }

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

     /* Cards */
     .workspace-card {
         background: var(--bg-secondary);
         border: 1px solid var(--border-color);
         border-radius: 16px;
         padding: 1.5rem;
         transition: all 0.3s ease;
     }

     .workspace-card:hover {
         transform: translateY(-2px);
         box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
     }

     .workspace-card-header {
         display: flex;
         align-items: center;
         justify-content: space-between;
         margin-bottom: 1.5rem;
         padding-bottom: 1rem;
         border-bottom: 1px solid var(--border-color);
     }

     .workspace-card-title {
         font-size: 1.2rem;
         font-weight: 700;
         color: var(--text-primary);
     }

     .workspace-card-action {
         color: var(--primary-color);
         text-decoration: none;
         font-weight: 600;
         font-size: 0.9rem;
         transition: color 0.3s ease;
     }

     .workspace-card-action:hover {
         color: var(--secondary-color);
     }

     /* Recent Activity */
     .workspace-activity-list {
         display: flex;
         flex-direction: column;
         gap: 1rem;
     }

     .workspace-activity-item {
         display: flex;
         align-items: center;
         gap: 1rem;
         padding: 1rem;
         border-radius: 12px;
         transition: background 0.3s ease;
     }

     .workspace-activity-item:hover {
         background: rgba(37, 99, 235, 0.05);
     }

     .workspace-activity-icon {
         width: 40px;
         height: 40px;
         border-radius: 10px;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 1rem;
         flex-shrink: 0;
     }

     .workspace-activity-content {
         flex: 1;
     }

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

     .workspace-activity-description {
         color: var(--text-secondary);
         font-size: 0.8rem;
     }

     .workspace-activity-time {
         color: var(--text-secondary);
         font-size: 0.8rem;
         font-weight: 500;
     }

     /* Quick Actions */
     .workspace-quick-actions {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
         gap: 1rem;
     }

     .workspace-quick-action {
         display: flex;
         align-items: center;
         gap: 1rem;
         padding: 1rem;
         background: var(--bg-primary);
         border: 1px solid var(--border-color);
         border-radius: 12px;
         text-decoration: none;
         color: var(--text-primary);
         transition: all 0.3s ease;
     }

     .workspace-quick-action:hover {
         background: var(--primary-color);
         color: white;
         border-color: var(--primary-color);
         transform: translateY(-2px);
     }

     .workspace-quick-action-icon {
         width: 36px;
         height: 36px;
         border-radius: 10px;
         background: var(--bg-secondary);
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 1.1rem;
         transition: background 0.3s ease;
     }

     .workspace-quick-action:hover .workspace-quick-action-icon {
         background: rgba(255, 255, 255, 0.2);
     }

     .workspace-quick-action-text {
         font-weight: 600;
         font-size: 0.9rem;
     }

     /* Responsive Design */
     @media (max-width: 1024px) {
         .workspace-sidebar {
             transform: translateX(-100%);
         }

         .workspace-sidebar.open {
             transform: translateX(0);
         }

         .workspace-main {
             margin-left: 0;
         }

         .workspace-topbar {
             padding: 1rem;
         }

         .workspace-search-input {
             width: 200px;
         }
     }

     @media (max-width: 768px) {
         .workspace-content {
             padding: 1rem;
         }

         .workspace-stats-grid {
             grid-template-columns: 1fr;
             gap: 1rem;
         }

         .workspace-dashboard-grid {
             grid-template-columns: 1fr;
             gap: 1rem;
         }

         .workspace-search {
             display: none;
         }

         .workspace-topbar-right {
             gap: 0.5rem;
         }

         .workspace-user-info {
             display: none;
         }
     }

     @media (max-width: 480px) {
         .workspace-topbar {
             padding: 0.75rem;
         }

         .workspace-content {
             padding: 0.75rem;
         }

         .workspace-stat-card,
         .workspace-card {
             padding: 1rem;
         }

         .workspace-stat-value {
             font-size: 1.5rem;
         }
     }

     /* Dark theme adjustments */
     [data-theme="dark"] .workspace-sidebar {
         background: var(--bg-secondary);
     }

     [data-theme="dark"] .workspace-topbar {
         background: var(--bg-primary);
     }

     [data-theme="dark"] .workspace-stat-card:hover,
     [data-theme="dark"] .workspace-card:hover {
         box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
     }

     /* Animations */
     @keyframes workspaceFadeIn {
         from {
             opacity: 0;
             transform: translateY(20px);
         }

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

     .workspace-stat-card,
     .workspace-card {
         animation: workspaceFadeIn 0.6s ease-out;
     }

     .workspace-stat-card:nth-child(1) {
         animation-delay: 0.1s;
     }

     .workspace-stat-card:nth-child(2) {
         animation-delay: 0.2s;
     }

     .workspace-stat-card:nth-child(3) {
         animation-delay: 0.3s;
     }

     .workspace-stat-card:nth-child(4) {
         animation-delay: 0.4s;
     }

     /* WhatsApp Float */
     .whatsapp-float {
         position: fixed;
         bottom: 20px;
         right: 20px;
         width: 60px;
         height: 60px;
         background: #25d366;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         color: white;
         font-size: 1.5rem;
         text-decoration: none;
         box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
         z-index: 1000;
         transition: all 0.3s ease;
         animation: pulse 2s infinite;
     }

     .whatsapp-float:hover {
         transform: scale(1.1);
         box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
     }

     /* Animations */
     @keyframes fadeInUp {
         from {
             opacity: 0;
             transform: translateY(30px);
         }

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

     @keyframes pulse {

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

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

     @keyframes float {

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

         50% {
             transform: translateY(-20px) rotate(180deg);
             opacity: 1;
         }
     }

     .animate-fade-in-up {
         animation: fadeInUp 0.6s ease-out forwards;
     }

     /* Responsive Design */
     @media (max-width: 768px) {
         .nav-menu {
             display: none;
             position: absolute;
             top: 100%;
             left: 0;
             right: 0;
             background: var(--bg-primary);
             border-top: 1px solid var(--border-color);
             flex-direction: column;
             padding: 2rem;
             gap: 1rem;
         }

         .nav-menu.active {
             display: flex;
         }

         .mobile-menu-toggle {
             display: block;
         }

         .hero-container {
             grid-template-columns: 1fr;
             text-align: center;
             gap: 2rem;
         }

         .hero-content h1 {
             font-size: 2.5rem;
         }

         .stats-grid {
             grid-template-columns: repeat(3, 1fr);
             gap: 1rem;
         }

         .about-container,
         .feature-item {
             grid-template-columns: 1fr;
             gap: 2rem;
         }

         .feature-item:nth-child(even) .feature-content,
         .feature-item:nth-child(even) .feature-image {
             order: unset;
         }

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

         .services-grid {
             grid-template-columns: 1fr;
         }
     }

     @media (max-width: 480px) {
         .hero-content h1 {
             font-size: 2rem;
         }

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

         .nav-container {
             padding: 1rem;
         }
     }

     /* Smooth scrolling */
     html {
         scroll-behavior: smooth;
     }

     /* Focus styles for accessibility */
     *:focus {
         outline: 2px solid var(--primary-color);
         outline-offset: 2px;
     }

     /* Loading animation */
     .loading {
         opacity: 0;
         transform: translateY(20px);
         transition: all 0.6s ease;
     }

     .loading.loaded {
         opacity: 1;
         transform: translateY(0);
     }