/* © Atia Hegazy — atiaeno.com */
 /* ===== ROYAL SAAS DESIGN SYSTEM ===== */

 /* Text Gradient */
 .text-gradient {
     background: var(--primary-gradient);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .w-100 {
     width: 100%;
     justify-content: center;
 }

 /* ===== HERO SECTION - Emerald/Cream Gradient ===== */
 .hero-section {
     background: var(--bg-hero);
     padding: 8rem 0 5rem;
     position: relative;
     overflow: hidden;
     min-height: 95vh;
     display: flex;
     align-items: center;
 }

 .hero-pattern {
     position: absolute;
     inset: 0;
     background-image:
         radial-gradient(circle at 20% 80%, rgba(6, 95, 70, 0.1) 0%, transparent 50%),
         radial-gradient(circle at 80% 20%, rgba(13, 148, 136, 0.08) 0%, transparent 50%),
         radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.05) 0%, transparent 70%);
     z-index: 0;
 }

 .hero-content {
     position: relative;
     z-index: 2;
 }

 .hero-badge {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     background: rgba(6, 95, 70, 0.1);
     border: 1px solid rgba(6, 95, 70, 0.2);
     color: var(--primary-color);
     padding: 0.5rem 1rem;
     border-radius: var(--radius-full);
     font-size: 0.75rem;
     font-weight: 600;
     margin-bottom: 1.5rem;
 }

 .hero-badge i {
     font-size: 0.625rem;
     color: var(--primary-light);
 }

 .hero-title {
     font-size: 40px !important;
     font-weight: bold;
     margin-bottom: 2.25rem;
     line-height: 1.1;
     color: var(--text-primary);
     letter-spacing: -0.02em;
     margin-top: 26px;
 }

 .hero-subtitle {
     font-size: 1.0625rem;
     margin-bottom: 2rem;
     color: var(--text-secondary);
     line-height: 1.7;
     max-width: 520px;
 }

 .hero-actions {
     display: flex;
     gap: 0.875rem;
     flex-wrap: wrap;
     margin-bottom: 2.5rem;
 }

 .hero-trust {
     display: flex;
     align-items: center;
     gap: 1rem;
 }

 .trust-avatars {
     display: flex;
     align-items: center;
 }

 .trust-avatar {
     width: 36px;
     height: 36px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 0.875rem;
     color: white;
     border: 2px solid white;
     margin-left: -8px;
 }

 .trust-avatar:first-child {
     margin-left: 0;
     background: var(--primary-color);
 }

 .trust-avatar:nth-child(2) {
     background: var(--primary-light);
 }

 .trust-avatar:nth-child(3) {
     background: var(--primary-dark);
 }

 .trust-avatar-more {
     background: var(--bg-muted);
     color: var(--text-secondary);
     font-size: 0.625rem;
     gap: 0.25rem;
 }

 .trust-text {
     font-size: 0.8125rem;
     color: var(--text-secondary);
     margin: 0;
 }

 .trust-text strong {
     color: var(--primary-color);
 }

 /* Hero Visual - Floating Shapes */
 .hero-visual {
     position: relative;
     height: 400px;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .floating-shapes {
     position: absolute;
     inset: 0;
     overflow: hidden;
 }

 .shape {
     position: absolute;
     border-radius: 50%;
     opacity: 0.6;
     animation: float 6s ease-in-out infinite;
 }

 .shape-1 {
     width: 120px;
     height: 120px;
     background: linear-gradient(135deg, rgba(6, 95, 70, 0.3) 0%, rgba(16, 185, 129, 0.1) 100%);
     top: 10%;
     left: 10%;
     animation-delay: 0s;
 }

 .shape-2 {
     width: 80px;
     height: 80px;
     background: linear-gradient(135deg, rgba(13, 148, 136, 0.3) 0%, rgba(20, 184, 166, 0.1) 100%);
     top: 60%;
     left: 5%;
     animation-delay: 1s;
 }

 .shape-3 {
     width: 100px;
     height: 100px;
     background: linear-gradient(135deg, rgba(6, 95, 70, 0.25) 0%, rgba(16, 185, 129, 0.08) 100%);
     top: 20%;
     right: 15%;
     animation-delay: 2s;
 }

 .shape-4 {
     width: 60px;
     height: 60px;
     background: linear-gradient(135deg, rgba(13, 148, 136, 0.25) 0%, rgba(20, 184, 166, 0.08) 100%);
     top: 70%;
     right: 20%;
     animation-delay: 0.5s;
 }

 .shape-5 {
     width: 40px;
     height: 40px;
     background: linear-gradient(135deg, rgba(6, 95, 70, 0.4) 0%, rgba(16, 185, 129, 0.15) 100%);
     top: 40%;
     left: 30%;
     animation-delay: 1.5s;
 }

 .shape-6 {
     width: 50px;
     height: 50px;
     background: linear-gradient(135deg, rgba(13, 148, 136, 0.35) 0%, rgba(20, 184, 166, 0.12) 100%);
     bottom: 15%;
     right: 35%;
     animation-delay: 2.5s;
 }

 .shape-7 {
     width: 35px;
     height: 35px;
     background: linear-gradient(135deg, rgba(6, 95, 70, 0.5) 0%, rgba(16, 185, 129, 0.2) 100%);
     top: 5%;
     right: 40%;
     animation-delay: 3s;
 }

 .shape-8 {
     width: 25px;
     height: 25px;
     background: linear-gradient(135deg, rgba(13, 148, 136, 0.45) 0%, rgba(20, 184, 166, 0.15) 100%);
     bottom: 30%;
     left: 15%;
     animation-delay: 1.8s;
 }

 .dot {
     position: absolute;
     width: 8px;
     height: 8px;
     border-radius: 50%;
     animation: pulse 2s ease-in-out infinite;
 }

 .dot-1 {
     background: var(--primary-color);
     top: 25%;
     left: 20%;
     animation-delay: 0s;
 }

 .dot-2 {
     background: var(--accent-color);
     top: 45%;
     right: 25%;
     animation-delay: 0.5s;
 }

 .dot-3 {
     background: var(--primary-light);
     bottom: 25%;
     left: 40%;
     animation-delay: 1s;
 }

 @keyframes pulse {

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

     50% {
         opacity: 1;
         transform: scale(1.5);
     }
 }

 @keyframes float {

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

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

 .hero-illustration {
     position: relative;
     z-index: 2;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 2rem;
 }

 .hero-illustration img {
     width: 500px;
     height: auto;
     border-radius: 8px;
     margin-top: -52px;
     animation: heroImageFloat 8s ease-in-out infinite;

     transition: transform 0.6s ease, box-shadow 0.6s ease;
 }

 .hero-illustration img:hover {
     transform: translateY(-5px) scale(1.02);
     box-shadow: 0 30px 60px rgba(6, 95, 70, 0.25);
 }

 @keyframes heroImageFloat {

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

     25% {
         transform: translateY(-15px) rotate(1deg);
     }

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

     75% {
         transform: translateY(-20px) rotate(0.8deg);
     }
 }

 .cloud-card {
     grid-column: span 2;
     background: white;
     padding: 1.5rem;
     border-radius: var(--radius-xl);
     box-shadow: var(--shadow-xl);
     display: flex;
     align-items: center;
     gap: 1rem;
     font-size: 1.25rem;
     font-weight: 600;
     color: var(--primary-color);
 }

 .cloud-card i {
     font-size: 2rem;
 }

 .shield-card,
 .chart-card,
 .server-card {
     background: white;
     padding: 1.25rem;
     border-radius: var(--radius-lg);
     box-shadow: var(--shadow-lg);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.5rem;
     color: var(--primary-color);
     animation: float 4s ease-in-out infinite;
 }

 .shield-card {
     animation-delay: 0.5s;
 }

 .chart-card {
     animation-delay: 1s;
 }

 .server-card {
     animation-delay: 1.5s;
 }

 /* ===== STATS SECTION ===== */
 .stats-section {
     background: #7db0a22b;
     padding: 2rem 0;
     position: relative;
     overflow: hidden;
 }

 .stats-section::before {
     content: '';
     position: absolute;
     inset: 0;
     background-image:
         radial-gradient(circle at 15% 50%, rgba(16, 185, 129, 0.08) 0%, transparent 45%),
         radial-gradient(circle at 85% 50%, rgba(5, 150, 105, 0.06) 0%, transparent 45%);
     pointer-events: none;
 }

 .stats-section::after {
     content: none;
 }

 .stats-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 0;
     position: relative;
     z-index: 2;
     max-width: 900px;
     margin: 0 auto;
 }

 .stat-item {
     text-align: center;
     color: var(--text-primary);
     padding: 2.5rem 1rem;
     position: relative;
 }

 .stat-item+.stat-item::before {
     content: '';
     position: absolute;
     left: 0;
     top: 25%;
     height: 50%;
     width: 1px;
     background: rgba(6, 95, 70, 0.15);
 }

 .stat-icon {
     width: 36px;
     height: 36px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 0.875rem;
     font-size: 0.875rem;
     color: var(--primary-color);
 }

 .stat-number {
     font-size: 1.875rem;
     font-weight: 700;
     margin-bottom: 0.25rem;
     letter-spacing: -0.02em;
     line-height: 1;
     color: var(--primary-color);
 }

 .stat-label {
     font-size: 0.75rem;
     color: #7a6c0b;
     text-transform: uppercase;
     letter-spacing: 0.1em;
     font-weight: 500;
 }

 /* ===== FEATURES SECTION - White to Slate ===== */
 .features-section {
     background: var(--bg-features);
     padding: 6rem 0;
 }

 .section-header {
     text-align: center;
     max-width: 640px;
     margin: 0 auto 3.5rem;
 }

 .section-header h2 {
     font-size: 2rem;
     margin-bottom: 1rem;
 }

 .section-header p {
     color: var(--text-secondary);
     font-size: 1rem;
 }

 .section-label {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     color: var(--primary-color);
     font-size: 0.75rem;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.08em;
     margin-bottom: 1rem;
 }

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

 .feature-card {
     background: var(--bg-primary);
     padding: 1.75rem;
     border-radius: var(--radius-lg);
     border: 1px solid var(--border-light);
     transition: all 0.25s ease;
 }

 .feature-card:hover {
     transform: translateY(-4px);
     box-shadow: var(--shadow-xl);
     border-color: rgba(6, 95, 70, 0.2);
 }

 .feature-icon {
     width: 52px;
     height: 52px;
     border-radius: var(--radius-md);
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 1.25rem;
     font-size: 1.125rem;
 }

 .feature-icon.emerald {
     background: linear-gradient(135deg, rgba(6, 95, 70, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
     color: var(--primary-color);
 }

 .feature-icon.gold {
     background: linear-gradient(135deg, rgba(6, 95, 70, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
     color: var(--primary-color);
 }

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

 .feature-content p {
     font-size: 0.875rem;
     color: var(--text-secondary);
     line-height: 1.6;
     margin: 0;
 }

 .features-cta {
     text-align: center;
     margin-top: 3rem;
     padding-top: 2rem;
     border-top: 1px solid var(--border-light);
 }

 .features-cta .btn-outline-custom {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     padding: 0.875rem 2rem;
     font-weight: 600;
     font-size: 0.9375rem;
     border-radius: 8px;
     transition: all 0.3s ease;
 }

 .features-cta .btn-outline-custom:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 25px rgba(6, 95, 70, 0.15);
 }

 /* ===== HOW IT WORKS SECTION - Pure White ===== */
 .how-section {
     background: var(--bg-how-it-works);
     padding: 6rem 0;
 }

 .steps-grid {
     display: flex;
     align-items: stretch;
     justify-content: center;
     gap: 0;
     max-width: 1000px;
     margin: 0 auto;
 }

 .step-card {
     flex: 1;
     text-align: center;
     padding: 2rem;
     position: relative;
 }

 .step-number {
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     font-size: 4rem;
     font-weight: 800;
     color: var(--bg-muted);
     line-height: 1;
     z-index: 0;
 }

 .step-icon {
     width: 72px;
     height: 72px;
     background: var(--primary-gradient);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 1.5rem;
     font-size: 1.5rem;
     color: white;
     position: relative;
     z-index: 1;
     box-shadow: var(--shadow-emerald);
 }

 .step-card:nth-child(1) .step-icon {
     background: linear-gradient(135deg, #d97706 0%, #f59e0b 50%, #fbbf24 100%);
     box-shadow: 0 4px 15px rgba(217, 119, 6, 0.3);
 }

 .step-card:nth-child(2) .step-icon {
     background: linear-gradient(135deg, #059669 0%, #10b981 50%, #34d399 100%);
     box-shadow: 0 4px 15px rgba(5, 150, 105, 0.3);
 }

 .step-card:nth-child(3) .step-icon {
     background: linear-gradient(135deg, #0891b2 0%, #06b6d4 50%, #22d3ee 100%);
     box-shadow: 0 4px 15px rgba(8, 145, 178, 0.3);
 }

 .step-card h4 {
     font-size: 1.125rem;
     margin-bottom: 0.75rem;
     color: var(--text-primary);
 }

 .step-card p {
     font-size: 0.875rem;
     color: var(--text-secondary);
     line-height: 1.6;
     margin: 0;
 }

 .step-connector {
     width: 80px;
     align-self: center;
     height: 2px;
     background: linear-gradient(90deg, var(--border-light) 0%, var(--primary-light) 50%, var(--border-light) 100%);
     position: relative;
 }

 .step-connector::after {
     content: '';
     position: absolute;
     right: 0;
     top: 50%;
     transform: translateY(-50%);
     width: 0;
     height: 0;
     border-left: 8px solid var(--primary-light);
     border-top: 5px solid transparent;
     border-bottom: 5px solid transparent;
 }

 /* ===== SPEED SHOWCASE SECTION ===== */
 .speed-showcase-section {
     background: linear-gradient(180deg, #f8fafc 0%, #ffffff 50%, #f0fdf4 100%);
     padding: 6rem 0;
 }

 .showcase-grid-reverse {
     grid-template-columns: 1.2fr 1fr;
 }

 .badge-3 {
     bottom: -16px;
     right: -16px;
     animation-delay: 0.5s;
 }

 .badge-4 {
     top: -16px;
     left: -16px;
     animation-delay: 2s;
 }

 /* ===== TESTIMONIALS SECTION - Amber/Cream Gradient ===== */
 .testimonials-section {
     background: #edf1ef;
     padding: 6rem 0;
 }

 /* Swiper overrides for testimonials */
 .testimonials-swiper {
     overflow: hidden;
     padding-bottom: 50px;
 }

 .testimonials-swiper .swiper-wrapper {
     display: flex !important;
     flex-direction: row;
 }

 .testimonials-swiper .swiper-slide {
     flex-shrink: 0;
     display: flex !important;
     align-items: stretch;
     height: auto;
 }

 .testimonials-swiper .swiper-slide>* {
     width: 100%;
 }

 .testimonials-swiper .testimonial-card {
     height: auto;
     min-height: 0;
     display: flex;
     flex-direction: column;
 }

 .testimonials-swiper .testimonial-quote {
     flex: 1;
 }

 .testimonials-swiper .swiper-pagination-bullet-active {
     opacity: 1;
     background: var(--primary-color);
 }

 .testimonials-swiper .swiper-button-prev,
 .testimonials-swiper .swiper-button-next {
     color: var(--primary-color);
     background: white;
     width: 44px;
     height: 44px;
     border-radius: 50%;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }

 .testimonials-swiper .swiper-button-prev:after,
 .testimonials-swiper .swiper-button-next:after {
     font-size: 14px;
     font-weight: bold;
 }

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

 .testimonial-card {
     background: white;
     padding: 1.75rem;
     border-radius: var(--radius-lg);
     border: 1px solid var(--border-light);
     transition: all 0.25s ease;
 }

 .testimonial-card.featured {
     border-color: rgba(6, 95, 70, 0.2);
     box-shadow: 0 10px 30px rgba(6, 95, 70, 0.1);
     transform: scale(1.02);
 }

 .testimonial-card:hover {
     transform: translateY(-4px);
     box-shadow: var(--shadow-lg);
 }

 .testimonial-card.featured:hover {
     transform: scale(1.02) translateY(-4px);
 }

 .testimonial-stars {
     display: flex;
     gap: 0.25rem;
     margin-bottom: 1rem;
     color: #f59e0b;
     font-size: 0.875rem;
 }

 .testimonial-quote {
     font-size: 0.9375rem;
     line-height: 1.7;
     margin-bottom: 1.5rem;
     color: var(--text-secondary);
 }

 .testimonial-author {
     display: flex;
     align-items: center;
     gap: 0.875rem;
 }

 .testimonial-avatar {
     width: 44px;
     height: 44px;
     background: #334155;
     border-radius: var(--radius-md);
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 0.8125rem;
     font-weight: 600;
 }

 .testimonial-info h5 {
     margin: 0;
     font-size: 0.9375rem;
     font-weight: 600;
 }

 .testimonial-info p {
     margin: 0;
     color: var(--text-muted);
     font-size: 0.8125rem;
 }

 /* ===== DASHBOARD SHOWCASE SECTION ===== */
 .dashboard-showcase-section {
     background: var(--bg-integrations);
     padding: 6rem 0;
 }

 .showcase-grid {
     display: grid;
     grid-template-columns: 1fr 1.2fr;
     gap: 4rem;
     align-items: center;
     margin-top: 3rem;
 }

 .showcase-text h3 {
     font-size: 2rem;
     font-weight: 800;
     color: var(--text-primary);
     line-height: 1.2;
     margin-bottom: 1.25rem;
 }

 .showcase-text p {
     font-size: 0.9375rem;
     color: var(--text-secondary);
     line-height: 1.75;
     margin-bottom: 1rem;
 }

 .showcase-features-list {
     list-style: none;
     padding: 0;
     margin: 1.5rem 0 2rem 0;
 }

 .showcase-features-list li {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     padding: 0.5rem 0;
     font-size: 0.9375rem;
     color: var(--text-secondary);
     font-weight: 500;
 }

 .showcase-features-list li i {
     color: var(--primary-color);
     font-size: 1rem;
     flex-shrink: 0;
 }

 .showcase-actions {
     display: flex;
     gap: 1rem;
     flex-wrap: wrap;
 }

 .showcase-visual {
     position: relative;
 }

 .showcase-img {
     width: 100%;
     border-radius: 12px;
     box-shadow: 0 20px 60px rgba(15, 23, 42, 0.15);
     border: 1.5px solid #e2e8f0;
     display: block;
 }

 .showcase-float-badge {
     position: absolute;
     background: white;
     border-radius: 8px;
     padding: 0.5rem 0.875rem;
     font-size: 0.75rem;
     font-weight: 600;
     color: #0f172a;
     box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
     border: 1px solid #e2e8f0;
     display: flex;
     align-items: center;
     gap: 0.5rem;
     animation: floatBadge 3s ease-in-out infinite alternate;
     z-index: 2;
 }

 .showcase-float-badge i {
     color: #059669;
 }

 .badge-1 {
     bottom: -16px;
     left: -16px;
     animation-delay: 0s;
 }

 .badge-2 {
     top: -16px;
     right: -16px;
     animation-delay: 1.5s;
 }

 @keyframes floatBadge {
     from {
         transform: translateY(0);
     }

     to {
         transform: translateY(-8px);
     }
 }

 /* ===== PRICING SECTION - Pure White ===== */
 .pricing-section {
     background: #edf1ef;
     padding: 6rem 0;
 }

 .pricing-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 12px;
     max-width: 1400px;
     margin: 0 auto;
 }

 .pricing-card {
     background: white;
     border-radius: var(--radius-xl);
     border: 2px solid var(--border-light);
     padding: 2rem;
     position: relative;
     transition: all 0.25s ease;
     display: flex;
     flex-direction: column;
     min-height: 520px;
     justify-content: space-between;
 }

 .pricing-card .pricing-cta {
     margin-top: auto;
     flex-shrink: 0;
 }

 .pricing-card:hover {
     transform: translateY(-4px);
     box-shadow: var(--shadow-xl);
 }

 .pricing-card.featured {
     border-color: var(--primary-color);
     box-shadow: var(--shadow-emerald);
     transform: scale(1.03);
 }

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

 .pricing-badge {
     display: none;
 }

 .pricing-header {
     text-align: center;
     margin-bottom: 1.5rem;
 }

 .pricing-header h4 {
     font-size: 1.25rem;
     margin-bottom: 0.375rem;
 }

 .pricing-header p {
     font-size: 0.875rem;
     color: var(--text-muted);
     margin: 0;
 }

 .pricing-price {
     text-align: center;
     margin-bottom: 1.5rem;
 }

 .pricing-price .currency {
     font-size: 1.5rem;
     font-weight: 600;
     color: var(--text-primary);
     vertical-align: top;
 }

 .pricing-price .amount {
     font-size: 3.5rem;
     font-weight: 700;
     color: var(--text-primary);
     line-height: 1;
 }

 .pricing-price .period {
     font-size: 1rem;
     color: var(--text-muted);
 }

 .pricing-features {
     list-style: none;
     padding: 0;
     margin: 0 0 1.5rem 0;
 }

 .pricing-features li {
     display: flex;
     align-items: center;
     gap: 0.625rem;
     padding: 0.625rem 0;
     font-size: 0.875rem;
     color: var(--text-secondary);
     border-bottom: 1px solid var(--border-light);
 }

 .pricing-features li:last-child {
     border-bottom: none;
 }

 .pricing-features li i {
     color: var(--primary-color);
     font-size: 0.75rem;
 }

 /* ===== FAQ SECTION - Emerald Tint ===== */
 .faq-section {
     background: var(--bg-faq);
     padding: 6rem 0;
 }

 .faq-list {
     max-width: 720px;
     margin: 0 auto;
 }

 .faq-item {
     background: white;
     border-radius: var(--radius-lg);
     margin-bottom: 0.875rem;
     border: 1px solid var(--border-light);
     overflow: hidden;
     box-shadow: var(--shadow-sm);
 }

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

 .faq-question:hover {
     color: var(--primary-color);
     background: var(--bg-muted);
 }

 .faq-question i {
     font-size: 0.875rem;
     color: var(--primary-color);
     transition: all 0.2s ease;
 }

 .faq-icon.rotate {
     transform: rotate(45deg);
 }

 .faq-answer {
     padding: 0 1.5rem;
     max-height: 0;
     overflow: hidden;
     transition: all 0.3s ease;
     color: var(--text-secondary);
     font-size: 0.875rem;
     line-height: 1.7;
 }

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

 /* ===== CTA SECTION ===== */
 .cta-section {
     background:
         linear-gradient(135deg, #022c22 0%, #064e3b 45%, #065f46 70%, #047857 100%);
     padding: 5rem 0;
     position: relative;
     overflow: hidden;
 }

 .cta-pattern {
     position: absolute;
     inset: 0;
     pointer-events: none;
 }

 /* Glowing orbs */
 .cta-pattern::before {
     content: '';
     position: absolute;
     top: -80px;
     left: -80px;
     width: 400px;
     height: 400px;
     background: radial-gradient(circle, rgba(16, 185, 129, 0.35) 0%, transparent 65%);
     border-radius: 50%;
 }

 .cta-pattern::after {
     content: '';
     position: absolute;
     bottom: -100px;
     right: -60px;
     width: 450px;
     height: 450px;
     background: radial-gradient(circle, rgba(52, 211, 153, 0.25) 0%, transparent 60%);
     border-radius: 50%;
 }

 /* Diagonal lines overlay */
 .cta-section::before {
     content: '';
     position: absolute;
     inset: 0;
     background-image: repeating-linear-gradient(45deg,
             transparent,
             transparent 20px,
             rgba(255, 255, 255, 0.025) 20px,
             rgba(255, 255, 255, 0.025) 21px);
     pointer-events: none;
     z-index: 1;
 }

 .cta-content {
     position: relative;
     z-index: 2;
     text-align: center;
     max-width: 600px;
     margin: 0 auto;
 }

 .cta-content h2 {
     color: white;
     font-size: 2rem;
     margin-bottom: 1rem;
 }

 .cta-content p {
     color: rgba(255, 255, 255, 0.8);
     font-size: 1rem;
     margin-bottom: 2rem;
 }

 .btn-white {
     border-color: rgba(255, 255, 255, 0.3);
     color: white;
 }

 .btn-white:hover {
     background: rgba(255, 255, 255, 0.1);
     border-color: white;
     color: white;
 }

 .cta-guarantee {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.5rem;
     margin-top: 1.5rem;
     color: rgba(255, 255, 255, 0.6);
     font-size: 0.8125rem;
 }

 .cta-guarantee i {
     color: var(--primary-light);
 }

 /* ===== PRICING PAGE - Royal SaaS Style ===== */
 .pricing-hero {
     background: var(--bg-hero);
     padding: 6rem 0 5rem;
     position: relative;
     overflow: hidden;
 }

 .pricing-hero::before {
     content: '';
     position: absolute;
     inset: 0;
     background-image:
         radial-gradient(circle at 20% 80%, rgba(6, 95, 70, 0.06) 0%, transparent 50%),
         radial-gradient(circle at 80% 20%, rgba(13, 148, 136, 0.05) 0%, transparent 50%);
     pointer-events: none;
 }

 .pricing-hero-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 4rem;
     align-items: center;
     position: relative;
     z-index: 2;
 }

 .pricing-hero-text h1 {
     font-family: var(--font-headings);
     font-size: 1.5rem;
     font-weight: 700;
     line-height: 1.2;
     margin-bottom: 1rem;
     color: var(--text-primary);
 }

 .pricing-hero-text>p {
     font-size: 0.9375rem;
     color: var(--text-secondary);
     line-height: 1.7;
     margin-bottom: 1.5rem;
 }

 .pricing-hero-highlights {
     display: flex;
     flex-wrap: wrap;
     gap: 1rem;
     margin-bottom: 2rem;
 }

 .pricing-highlight {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     font-size: 0.8125rem;
     color: var(--text-secondary);
     background: rgba(6, 95, 70, 0.04);
     padding: 0.5rem 0.875rem;
     border-radius: var(--radius-full);
     border: 1px solid rgba(6, 95, 70, 0.08);
 }

 .pricing-highlight i {
     color: var(--primary-color);
     font-size: 0.75rem;
 }

 /* Highlight Badge - Smaller & Cleaner */
 .highlight-badge {
     display: inline-flex;
     align-items: center;
     gap: 0.375rem;
     font-size: 0.75rem;
     color: var(--text-secondary);
     background: rgba(6, 95, 70, 0.04);
     padding: 0.375rem 0.625rem;
     border-radius: var(--radius-full);
     border: 1px solid rgba(6, 95, 70, 0.08);
     font-weight: 500;
 }

 .highlight-badge i {
     color: var(--primary-color);
     font-size: 0.625rem;
 }

 .pricing-hero-cta {
     display: flex;
     gap: 1rem;
     flex-wrap: wrap;
 }

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

 /* Free Plan Card - Royal Style */
 .free-plan-card {
     background: white;
     border-radius: var(--radius-xl);
     border: 1px solid var(--border-light);
     padding: 1.75rem;
     width: 100%;
     max-width: 320px;
     box-shadow: var(--shadow-xl);
     position: relative;
 }

 .free-plan-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: var(--gold-gradient);
     border-radius: var(--radius-xl) var(--radius-xl) 0 0;
 }

 .free-plan-card-header {
     text-align: center;
     margin-bottom: 1.25rem;
 }

 .free-plan-pill {
     display: inline-block;
     background: var(--gold-gradient);
     color: #1f2937;
     font-size: 0.6875rem;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.08em;
     padding: 0.25rem 0.75rem;
     border-radius: var(--radius-full);
     margin-bottom: 0.75rem;
 }

 .free-plan-card-header h3 {
     font-family: var(--font-headings);
     font-size: 1.25rem;
     font-weight: 700;
     margin-bottom: 0.375rem;
     color: var(--text-primary);
 }

 .free-plan-card-header>p {
     font-size: 0.8125rem;
     color: var(--text-muted);
     margin: 0 0 0.75rem;
 }

 .free-plan-price {
     font-family: var(--font-headings);
     font-size: 1.5rem;
     font-weight: 700;
     color: var(--primary-color);
 }

 .free-plan-feature-list {
     list-style: none;
     padding: 0;
     margin: 0 0 1.25rem;
 }

 .free-plan-feature-list li {
     display: flex;
     align-items: center;
     gap: 0.625rem;
     padding: 0.5rem 0;
     font-size: 0.8125rem;
     color: var(--text-secondary);
     border-bottom: 1px solid var(--border-light);
 }

 .free-plan-feature-list li:last-child {
     border-bottom: none;
 }

 .free-plan-feature-list li i {
     color: var(--success-color);
     font-size: 0.75rem;
 }

 .free-plan-note {
     text-align: center;
     font-size: 0.75rem;
     color: var(--text-muted);
     margin-bottom: 1rem;
 }

 /* Pricing Page Section */
 .pricing-page-section {
     background: var(--bg-pricing);
     padding: 5rem 0;
 }

 .pricing-page-section .pricing-grid {
     max-width: 1000px;
     margin: 0 auto;
 }

 /* Pricing FAQ Section */
 .pricing-faq {
     background: var(--bg-faq);
     padding: 5rem 0;
 }

 .pricing-faq .faq-list {
     max-width: 720px;
     margin: 0 auto;
 }

 /* ===== AUTH PAGES (Login, Register, Forgot Password) ===== */
 .auth-page-section {
     background: var(--bg-hero);
     min-height: calc(100vh - 68px);
     padding: 4rem 0;
     position: relative;
     overflow: hidden;
 }

 .auth-page-section::before {
     content: '';
     position: absolute;
     inset: 0;
     background-image:
         radial-gradient(circle at 20% 80%, rgba(6, 95, 70, 0.06) 0%, transparent 50%),
         radial-gradient(circle at 80% 20%, rgba(13, 148, 136, 0.05) 0%, transparent 50%);
     pointer-events: none;
 }

 .auth-card {
     background: white;
     border-radius: var(--radius-xl);
     box-shadow: var(--shadow-xl);
     border: 1px solid var(--border-light);
     overflow: hidden;
     display: grid;
     grid-template-columns: 2fr 3fr;
     max-width: 900px;
     margin: 0 auto;
 }

 .auth-card-left {
     background: var(--primary-gradient);
     padding: 3rem 2rem;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;
     color: white;
 }

 .auth-card-left i {
     font-size: 3rem;
     margin-bottom: 1.5rem;
     opacity: 0.9;
 }

 .auth-card-left h2 {
     font-size: 1.5rem;
     font-weight: 700;
     margin-bottom: 0.75rem;
     color: white;
 }

 .auth-card-left p {
     font-size: 0.875rem;
     opacity: 0.8;
     max-width: 240px;
 }

 .auth-card-right {
     padding: 3rem;
 }

 .auth-brand {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     margin-bottom: 2rem;
     justify-content: center;
 }

 .auth-brand .brand-icon {
     width: 40px;
     height: 40px;
     background: var(--primary-gradient);
     border-radius: var(--radius-md);
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 1rem;
 }

 .auth-brand .brand-text {
     display: flex;
     flex-direction: column;
     line-height: 1.1;
 }

 .auth-brand .brand-name {
     font-size: 1.125rem;
     font-weight: 800;
     color: var(--text-primary);
 }

 .auth-brand .brand-tag {
     font-size: 0.5625rem;
     font-weight: 500;
     color: var(--accent-color);
     text-transform: uppercase;
     letter-spacing: 0.08em;
 }

 .auth-form h3 {
     font-size: 1.375rem;
     font-weight: 700;
     color: var(--text-primary);
     margin-bottom: 0.5rem;
     text-align: center;
 }

 .auth-form .auth-subtitle {
     font-size: 0.875rem;
     color: var(--text-muted);
     margin-bottom: 2rem;
     text-align: center;
 }

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

 .auth-form .input-group-text {
     background: var(--bg-muted);
     border: 1px solid var(--border-color);
     border-right: none;
     color: var(--text-muted);
     padding: 0.625rem 0.875rem;
 }

 .auth-form .form-control {
     border: 1px solid var(--border-color);
     border-left: none;
     padding: 0.625rem 0.875rem;
     font-size: 0.875rem;
 }

 .auth-form .form-control:focus {
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(6, 95, 70, 0.1);
 }

 .auth-form .form-check-label {
     font-size: 0.8125rem;
     color: var(--text-secondary);
 }

 .auth-links {
     margin-top: 1.5rem;
     text-align: center;
 }

 .auth-links p {
     font-size: 0.8125rem;
     color: var(--text-muted);
     margin-bottom: 0.5rem;
 }

 .auth-links a {
     color: var(--primary-color);
     text-decoration: none;
     font-weight: 500;
 }

 .auth-links a:hover {
     text-decoration: underline;
 }

 /* Toggle password button */
 .toggle-password {
     background: var(--bg-muted);
     border: 1px solid var(--border-color);
     border-left: none;
     color: var(--text-muted);
     cursor: pointer;
     padding: 0.625rem 0.875rem;
 }

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

 /* Auth alerts */
 .auth-alert {
     border-radius: var(--radius-md);
     padding: 1rem;
     margin-bottom: 1.5rem;
     font-size: 0.875rem;
 }

 .auth-alert-success {
     background: #d1fae5;
     color: var(--primary-color);
 }

 .auth-alert-danger {
     background: #fee2e2;
     color: #dc2626;
 }

 /* ===== LEGAL PAGES (Privacy, Terms, Refund) ===== */
 .legal-section {
     padding: 6rem 0;
     background: var(--bg-secondary);
 }

 .legal-header {
     text-align: center;
     margin-bottom: 4rem;
     padding-bottom: 2rem;
     border-bottom: 1px solid var(--border-light);
 }

 .legal-header h1 {
     font-family: var(--font-headings);
     font-size: 2.5rem;
     font-weight: 700;
     color: var(--text-primary);
     margin-bottom: 1rem;
 }

 .legal-header .lead {
     font-size: 1rem;
     color: var(--text-secondary);
     margin-bottom: 0.5rem;
     font-weight: 500;
 }

 .legal-header p {
     color: var(--text-muted);
     font-size: 0.9375rem;
 }

 .legal-content {
     max-width: 800px;
     margin: 0 auto;
 }

 .legal-item {
     background: white;
     padding: 2.5rem;
     border-radius: var(--radius-lg);
     box-shadow: var(--shadow-sm);
     border: 1px solid var(--border-light);
     margin-bottom: 1.5rem;
 }

 .legal-item h2 {
     font-family: var(--font-headings);
     font-size: 1.25rem;
     font-weight: 600;
     color: var(--text-primary);
     margin-bottom: 1rem;
     padding-bottom: 0.75rem;
     border-bottom: 2px solid var(--border-gold);
     display: inline-block;
 }

 .legal-item p {
     color: var(--text-secondary);
     line-height: 1.7;
     margin-bottom: 1rem;
     font-size: 0.9375rem;
 }

 .legal-item ul {
     color: var(--text-secondary);
     line-height: 1.7;
     margin-bottom: 1rem;
     padding-left: 1.5rem;
 }

 .legal-item li {
     margin-bottom: 0.5rem;
     font-size: 0.9375rem;
 }

 .legal-contact-box {
     background: var(--bg-muted);
     padding: 1.5rem;
     border-radius: var(--radius-md);
     border: 1px solid var(--border-light);
     margin-top: 1rem;
 }

 .legal-contact-box a {
     color: var(--primary-color);
     text-decoration: none;
     font-weight: 500;
 }

 .legal-contact-box a:hover {
     text-decoration: underline;
 }

 /* ===== ABOUT PAGE ===== */
 .about-hero {
     background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 50%, #ecfdf5 100%);
     padding: 6rem 0;
     position: relative;
 }

 .about-hero-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 4rem;
     align-items: center;
 }

 .about-hero-text .section-label {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     font-size: 0.75rem;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.05em;
     color: var(--primary-color);
     margin-bottom: 1rem;
 }

 .about-hero-text .section-label i {
     font-size: 0.875rem;
 }

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

 .about-hero-text p {
     font-size: 1rem;
     color: var(--text-secondary);
     line-height: 1.7;
 }

 .about-hero-image {
     position: relative;
 }

 .about-hero-image img {
     width: 100%;
     height: auto;
     border-radius: var(--radius-lg);
     box-shadow: var(--shadow-lg);
 }

 /* About Stats */
 .about-stats-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 2rem;
     margin-top: 4rem;
     padding-top: 4rem;
     border-top: 1px solid var(--border-light);
 }

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

 .about-stat-item .stat-number {
     font-size: 2rem;
     font-weight: 700;
     color: var(--primary-color);
     margin-bottom: 0.5rem;
 }

 .about-stat-item .stat-label {
     font-size: 0.875rem;
     color: var(--text-secondary);
 }

 /* Mission Section */
 .mission-section {
     padding: 6rem 0;
     background: var(--bg-primary);
 }

 .mission-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 4rem;
     align-items: center;
 }

 .mission-text .section-label {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     font-size: 0.75rem;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.05em;
     color: var(--primary-color);
     margin-bottom: 1rem;
 }

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

 .mission-text p {
     font-size: 1rem;
     color: var(--text-secondary);
     line-height: 1.7;
     margin-bottom: 1rem;
 }

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

 .mission-card {
     background: white;
     padding: 1.5rem;
     border-radius: var(--radius-lg);
     box-shadow: var(--shadow-sm);
     border: 1px solid var(--border-light);
 }

 .mission-card i {
     font-size: 1.5rem;
     color: var(--primary-color);
     margin-bottom: 1rem;
 }

 .mission-card h4 {
     font-size: 1rem;
     font-weight: 600;
     margin-bottom: 0.5rem;
     color: var(--text-primary);
 }

 .mission-card p {
     font-size: 0.875rem;
     color: var(--text-secondary);
     line-height: 1.5;
 }

 /* Values Section */
 .values-section {
     padding: 6rem 0;
     background: var(--bg-secondary);
 }

 .values-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 2rem;
 }

 .value-card {
     background: white;
     padding: 2rem;
     border-radius: var(--radius-lg);
     box-shadow: var(--shadow-sm);
     border: 1px solid var(--border-light);
     text-align: center;
     transition: transform 0.2s ease;
 }

 .value-card:hover {
     transform: translateY(-4px);
     box-shadow: var(--shadow-md);
 }

 .value-card i {
     width: 60px;
     height: 60px;
     background: linear-gradient(135deg, rgba(6, 95, 70, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
     border-radius: var(--radius-lg);
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 1.5rem;
     font-size: 1.5rem;
     color: var(--primary-color);
 }

 .value-card h3 {
     font-size: 1.125rem;
     font-weight: 600;
     margin-bottom: 0.75rem;
     color: var(--text-primary);
 }

 .value-card p {
     font-size: 0.875rem;
     color: var(--text-secondary);
     line-height: 1.5;
 }

 /* About CTA */
 .about-page .cta-section {
     margin-top: 0;
 }

 /* ===== ABOUT PAGE REDESIGN - Matches Pricing Style ===== */

 /* About Visual Card (Right side of hero) */
 .about-visual-card {
     background: white;
     padding: 3rem;
     border-radius: var(--radius-xl);
     box-shadow: var(--shadow-lg);
     border: 1px solid var(--border-light);
     text-align: center;
     max-width: 400px;
     margin: 0 auto;
 }

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

 .about-visual-card h3 {
     font-size: 1.25rem;
     font-weight: 600;
     color: var(--text-primary);
     margin-bottom: 0.75rem;
 }

 .about-visual-card p {
     font-size: 0.9375rem;
     color: var(--text-secondary);
 }

 /* Contact Form Card - Match Feature Card Style */
 .contact-form-card {
     background: var(--bg-primary);
     padding: 1.75rem;
     border-radius: var(--radius-lg);
     border: 1px solid rgba(6, 95, 70, 0.15);
     transition: all 0.25s ease;
 }

 .contact-form-card h3 {
     font-size: 1rem;
     font-weight: 600;
     color: var(--text-primary);
     margin-bottom: 1rem;
     padding-bottom: 0.75rem;
     border-bottom: 1px solid rgba(6, 95, 70, 0.1);
 }

 .contact-form-card .form-label {
     font-size: 0.75rem;
     font-weight: 500;
     color: var(--text-secondary);
     margin-bottom: 0.375rem;
 }

 .contact-form-card .form-control {
     font-size: 0.8125rem;
     padding: 0.625rem 0.875rem;
 }

 /* Contact Message Box - Light Green Background */
 .contact-message-box {
     background: linear-gradient(135deg, rgba(6, 95, 70, 0.03) 0%, rgba(16, 185, 129, 0.05) 100%) !important;
     border: 1px solid var(--border-light) !important;
     border-radius: var(--radius-md) !important;
     padding: 0.75rem !important;
     font-family: var(--font-body) !important;
     font-size: 0.8125rem !important;
     transition: all 0.2s ease !important;
 }

 .mission-item {
     display: flex;
     align-items: flex-start;
     gap: 1rem;
     background: var(--bg-primary);
     padding: 1.75rem;
     border-radius: var(--radius-lg);
     border: 1px solid rgba(6, 95, 70, 0.15);
     transition: all 0.25s ease;
 }

 .mission-item:hover {
     transform: translateY(-2px);
     box-shadow: var(--shadow-md);
 }

 .mission-item i {
     width: 48px;
     height: 48px;
     background: linear-gradient(135deg, rgba(6, 95, 70, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
     border-radius: var(--radius-md);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.25rem;
     color: var(--primary-color);
     flex-shrink: 0;
 }

 .mission-item h4 {
     font-size: 0.8125rem;
     font-weight: 600;
     color: var(--text-primary);
     margin-bottom: 0.25rem;
 }

 .mission-item p {
     font-size: 0.75rem;
     color: var(--text-secondary);
     line-height: 1.5;
     margin: 0;
 }

 /* Values Grid Modern - Match Features Section Style */
 .values-grid-modern {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1.5rem;
 }

 .value-card-modern {
     background: var(--bg-primary);
     padding: 1.75rem;
     border-radius: var(--radius-lg);
     border: 1px solid rgba(6, 95, 70, 0.15);
     transition: all 0.25s ease;
 }

 .value-card-modern:hover {
     transform: translateY(-4px);
     box-shadow: var(--shadow-xl);
     border-color: rgba(6, 95, 70, 0.2);
 }

 .value-icon-bg {
     width: 52px;
     height: 52px;
     border-radius: var(--radius-md);
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 1.25rem;
     font-size: 1.125rem;
     background: linear-gradient(135deg, rgba(6, 95, 70, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
     color: var(--primary-color);
 }

 .value-card-modern h4 {
     font-size: 1rem;
     font-weight: 600;
     margin-bottom: 0.625rem;
     color: var(--text-primary);
 }

 .value-card-modern p {
     font-size: 0.875rem;
     color: var(--text-secondary);
     line-height: 1.6;
     margin: 0;
 }

 .btn-outline-custom {
     background: #ffffff !important;
     border: 2px solid #057958b8 !important;
     color: #097b5a !important;
 }

 .btn-outline-custom:hover {
     background: #097b5a !important;
     color: #ffffff !important;
 }