:root {
     /* Theme Variables */
     --primary-color: #6ab000;

     /* Neon Lime */
     --primary-glow: rgba(106, 176, 0, 0.3);
     --secondary-color: #000000;
     --accent-color: #ff3e00;
     --text-color: #1a1a1a;
     --text-muted: #666;
     --bg-color: #ffffff;
     /* Distinct Steel Gray */
     --bg-secondary: #f8f9fa;
     /* Darker Cool Gray */
     --card-bg: #ffffff;
     /* subtle Off-White/Blue-Gray */
     --border-color: #e1e8ed;
     --shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
     /* Neumorphic-ish shadow */

     /* Hero Background (Consistent with main site) */
     --hero-bg: var(--bg-color);
     --hero-text: var(--text-color);

     /* Typography */
     --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
     --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

     --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

     /* Text contrast adjustment for light mode */
     --primary-text-visible: #556B00;
     --text-gradient-bg: linear-gradient(135deg, #1a1a1a 0%, #556B00 100%);
 }

 [data-theme="dark"] {
     --primary-color: #D4F000;
     /* Restore Neon Lime for Dark Mode */
     --text-color: #ffffff;
     --text-muted: #aaa;
     --bg-color: #100000;
     --bg-secondary: #01151b;
     --card-bg: #1e1e1e;
     --border-color: #160101;
     --shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
     --primary-text-visible: var(--primary-color);
     --text-gradient-bg: linear-gradient(135deg, #ffffff 0%, #D4F000 100%);
 }

 /* Global Reset & Logical Flow */
 *,
 *::before,
 *::after {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 html,
 body {
     overflow-x: hidden;
     width: 100%;
     max-width: 100%;
     margin: 0;
     padding: 0;
     position: relative;
     /* Helps contain absolute elements */
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: var(--font-body);
     background-color: var(--bg-color);
     color: var(--text-color);
     line-height: 1.6;
     overflow-x: hidden;
     width: 100%;
     max-width: 100%;
     transition: background-color 0.3s ease, color 0.3s ease;
     padding-top: 80px;
     /* Compensation for fixed header */
 }

 body.dashboard-page {
     padding-top: 0;
 }

 /* Strict Alignment Rules */
 html[dir="ltr"] body {
     text-align: left;
 }

 html[dir="rtl"] body {
     text-align: right;
     direction: rtl;
 }

 /* Ensure all flex/grid containers respect direction */
 [dir="rtl"] .flex-between {
     flex-direction: row-reverse;
     /* Or just let natural flow handle it if built correctly */
 }

 /* Universal alignment fix for RTL */
 [dir="rtl"] h1,
 [dir="rtl"] h2,
 [dir="rtl"] h3,
 [dir="rtl"] h4,
 [dir="rtl"] p,
 [dir="rtl"] a,
 [dir="rtl"] li,
 [dir="rtl"] span {
     text-align: right;
 }

 /* Fluid Typography */
 h1 {
     font-family: var(--font-heading);
     font-size: clamp(2.5rem, 5vw, 4.5rem);
     font-weight: 800;
     line-height: 1.1;
     margin-bottom: 0.5em;
 }

 h2 {
     font-family: var(--font-heading);
     font-size: clamp(2rem, 4vw, 3rem);
     font-weight: 700;
     margin-bottom: 0.5em;
 }

 h3 {
     font-family: var(--font-heading);
     font-size: clamp(1.5rem, 3vw, 2rem);
     font-weight: 600;
     margin-bottom: 0.5em;
 }

 h4 {
     font-family: var(--font-heading);
     font-size: 1.25rem;
     font-weight: 600;
     margin-bottom: 0.5em;
 }

 p {
     font-size: clamp(1rem, 1.5vw, 1.125rem);
     margin-bottom: 1rem;
 }

 a {
     text-decoration: none;
     color: inherit;
     transition: var(--transition);
 }

 img {
     max-width: 100%;
     display: block;
 }

 ul {
     list-style: none;
 }

 /* Layout Utilities (Logical) */
 .container {
     width: 90%;
     max-width: 1400px;
     margin-inline: auto;
     padding-inline: 20px;
     box-sizing: border-box;
     /* Ensure padding includes in width */
 }

 /* Ensure no element exceeds screen width */
 *,
 *::before,
 *::after {
     max-width: 100%;
     box-sizing: border-box;
 }

 .text-center {
     text-align: center !important;
 }

 .section {
     padding-block: 80px;
 }

 /* Buttons */
 .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     padding-block: 12px;
     padding-inline: 32px;
     background-color: var(--primary-color);
     color: var(--secondary-color);
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     border-radius: 50px;
     border: none;
     cursor: pointer;
     transition: var(--transition);
     position: relative;
     overflow: hidden;
     white-space: nowrap;
     font-size: 0.9rem;
 }

 .btn:hover {
     box-shadow: 0 0 20px var(--primary-glow);
     transform: translateY(-2px);
 }

 .btn-outline {
     background: transparent;
     border: 2px solid var(--text-color);
     color: var(--text-color);
 }

 .btn-outline:hover {
     background: var(--text-color);
     color: var(--bg-color);
 }

 .icon-btn {
     background: none;
     border: none;
     font-size: 1.2rem;
     color: var(--text-color);
     cursor: pointer;
     transition: transform 0.3s;
     padding: 8px;
 }

 .icon-btn:hover {
     color: var(--primary-color);
     transform: rotate(15deg);
 }

 /* ... (skip to header) ... */

 /* Navigation Bar */
 header {
     background-color: var(--bg-color);
     border-bottom: 1px solid var(--border-color);
     position: fixed;
     width: 100%;
     top: 0;
     left: 0;
     z-index: 1000;
     padding-block: 15px;
 }

 nav {
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 /* RTL: Swap navigation elements positions */
 [dir="rtl"] nav {
     flex-direction: row-reverse;
 }

 .logo {
     font-family: var(--font-heading);
     font-size: 1.5rem;
     font-weight: 900;
     display: flex;
     align-items: center;
     gap: 10px;
     text-transform: uppercase;
     letter-spacing: -1px;
     margin-inline-end: 30px;
 }

 .nav-links {
     display: flex;
     gap: 30px;
     align-items: center;
     margin-inline: auto;
 }

 .nav-links li {
     position: relative;
 }

 /* Important for nested ul menus */
 .nav-item,
 .nav-links a {
     font-weight: 600;
     position: relative;
 }

 .nav-links a:hover,
 .nav-links a.active {
     color: var(--primary-color);
 }

 .nav-links a.active::after {
     content: '';
     position: absolute;
     bottom: -5px;
     left: 0;
     width: 100%;
     height: 2px;
     background-color: var(--primary-color);
     border-radius: 2px;
 }

 /* Dropdown (Restored) */
 .dropdown {
     position: relative;
 }

 .dropdown-content {
     display: none;
     position: absolute;
     top: 100%;
     left: 50%;
     /* LTR default */
     transform: translateX(-50%);
     background-color: var(--card-bg);
     min-width: 200px;
     box-shadow: var(--shadow);
     padding: 10px 0;
     border-radius: 8px;
     z-index: 100;
     border: 1px solid var(--border-color);
     opacity: 0;
     animation: fadeIn 0.3s forwards;
     white-space: nowrap;
 }

 [dir="rtl"] .dropdown-content {
     left: auto;
     right: 50%;
     transform: translateX(50%);
 }

 @keyframes fadeIn {
     to {
         opacity: 1;
     }
 }

 .dropdown:hover .dropdown-content {
     display: block;
 }

 .dropdown-content li a,
 .dropdown-content a {
     display: block;
     padding: 12px 20px;
     color: var(--text-color);
 }

 .dropdown-content li a:hover,
 .dropdown-content a:hover {
     background-color: var(--bg-secondary);
     color: var(--primary-text-visible);
 }

 .nav-actions,
 .desktop-actions {
     display: flex;
     align-items: center;
     gap: 15px;
 }

 .mobile-controls {
     display: none;
 }

 /* Hamburger */
 .hamburger {
     display: none;
     flex-direction: column;
     gap: 5px;
     background: none;
     border: none;
     cursor: pointer;
     margin-inline-start: auto;
     margin-inline-end: 20px;
     /* Space between hamburger and edge/content */
 }

 .hamburger span {
     width: 25px;
     height: 3px;
     background-color: var(--text-color);
     transition: 0.3s;
 }

 /* == HERO SECTIONS == */

 /* 1. Classic Hero (Restored) */
 .hero-classic {
     height: 85vh;
     display: flex;
     align-items: center;
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
     position: relative;
 }

 .hero-classic::before {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0.1) 100%);
 }

 [dir="rtl"] .hero-classic::before {
     background: linear-gradient(270deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0.1) 100%);
 }

 .hero-classic-content {
     position: relative;
     z-index: 2;
     color: white;
     max-width: 650px;
     padding: 20px;
 }

 /* 2. Modern Hero (New) */
 .hero-modern {
     background: var(--hero-bg);
     color: var(--hero-text);
     padding-block-start: 120px;
     padding-block-end: 80px;
     border-end-start-radius: 50px;
     border-end-end-radius: 50px;
     overflow: hidden;
     position: relative;
     text-align: center;
 }

 .hero-modern::before {
     content: "";
     position: absolute;
     inset: 0;
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
     opacity: 0.4;
     pointer-events: none;
 }

 .hero-modern::after {
     content: "";
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, transparent 60%);
     pointer-events: none;
 }

 .hero-content {
     max-width: 800px;
     margin-inline: auto;
     position: relative;
     z-index: 2;
     margin-bottom: 60px;
 }

 .gradient-text {
     background: var(--text-gradient-bg);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
     display: inline-block;
 }

 /* == CARDS & GRIDS (Restored) == */

 /* Standard Product Grid */
 .products-grid {
     display: grid;
     /* Changed minmax 280px -> 250px to fit smaller screens better */
     grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
     gap: 20px;
     /* Reduced gap for mobile */
     width: 100%;
 }

 @media (max-width: 480px) {
     .products-grid {
         grid-template-columns: 1fr;
         /* Force single column on very small screens */
     }
 }

 .product-card {
     background-color: var(--card-bg);
     border-radius: 20px;
     overflow: hidden;
     transition: var(--transition);
     border: 1px solid var(--border-color);
     position: relative;
     display: flex;
     flex-direction: column;
     height: 100%;
     text-align: start;
 }

 .product-card:hover {
     transform: translateY(-10px);
     box-shadow: var(--shadow);
     border-color: var(--primary-color);
 }

 .product-image {
     height: 280px;
     width: 100%;
     position: relative;
     overflow: hidden;
 }

 .product-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.5s ease;
 }

 .product-card:hover .product-image img {
     transform: scale(1.1);
 }

 .product-info {
     padding: 25px;
     flex-grow: 1;
     display: flex;
     flex-direction: column;
 }

 .price {
     color: var(--primary-text-visible);
     font-weight: 800;
     font-size: 1.4rem;
 }

 /* Horizontal Scroll Deck (New) */
 .cards-scroll-container {
     display: flex;
     gap: 20px;
     overflow-x: auto;
     padding-block: 40px;
     padding-inline: 10%;
     /* Visual centering breath */
     scroll-snap-type: x mandatory;
     scrollbar-width: none;
     -webkit-overflow-scrolling: touch;
     mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
     justify-content: flex-start;
     /* FIX: Allows scrolling to start */
     white-space: nowrap;
 }

 .cards-scroll-container::-webkit-scrollbar {
     display: none;
 }

 .scroll-card {
     flex: 0 0 280px;
     height: 400px;
     border-radius: 30px;
     position: relative;
     overflow: hidden;
     scroll-snap-align: center;
     transition: transform 0.4s ease, box-shadow 0.4s ease;
     cursor: pointer;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
     background: #000;
 }

 .scroll-card img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.6s ease;
     opacity: 0.8;
 }

 .scroll-card:hover {
     transform: translateY(-15px) rotateX(5deg);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
     z-index: 10;
 }

 .scroll-card:hover img {
     transform: scale(1.1);
     opacity: 1;
 }

 .card-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent 60%);
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     padding: 25px;
     text-align: start;
     /* Ensures left in LTR, right in RTL */
     width: 100%;
 }

 /* Utility Cards & Footer */
 .section-header {
     margin-bottom: 60px;
     text-align: center;
 }

 .section-underline {
     width: 60px;
     height: 4px;
     background: var(--primary-color);
     margin: 0 auto;
 }

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

 /* Professional Info Card */
 .info-card {
     background: var(--card-bg);
     padding: 30px;
     border-radius: 20px;
     border: 1px solid var(--border-color);
     transition: var(--transition);
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     text-align: start;
     /* Logical property for LTR/RTL */
 }

 .info-card h3 {
     margin-top: 10px;
 }

 .info-card:hover {
     border-color: var(--primary-color);
     transform: translateY(-5px);
     box-shadow: var(--shadow);
 }

 /* Animation Utils (Enhanced) */
 [data-animate] {
     opacity: 0;
     transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
 }

 [data-animate].animate-init {
     opacity: 1;
     transform: none;
 }

 /* Initial States */
 [data-animate="fade-up"] {
     transform: translateY(50px);
 }

 [data-animate="fade-down"] {
     transform: translateY(-50px);
 }

 [data-animate="fade-left"] {
     transform: translateX(50px);
 }

 [data-animate="fade-right"] {
     transform: translateX(-50px);
 }

 [data-animate="zoom-in"] {
     transform: scale(0.9);
 }

 [data-animate="flip-up"] {
     transform: rotateX(45deg) translateY(30px);
     transform-origin: top;
 }

 /* Active States (applied by JS) */
 .animate-active {
     opacity: 1 !important;
     transform: translate(0) scale(1) rotate(0) !important;
 }

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

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

 /* Services Grid */
 .services-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 30px;
 }

 .service-card {
     background: var(--card-bg);
     padding: 40px 30px;
     border-radius: 15px;
     text-align: center;
     /* Centered designs usually stay centered in RTL */
     border: 1px solid var(--border-color);
     transition: var(--transition);
     height: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
 }

 .service-card:hover {
     transform: translateY(-10px);
     border-color: var(--primary-color);
 }

 .service-icon {
     font-size: 2.5rem;
     color: var(--primary-color);
     margin-bottom: 20px;
 }

 /* Pricing Grid */
 .pricing-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 30px;
     margin-top: 50px;
 }

 .pricing-card {
     background: var(--card-bg);
     border: 1px solid var(--border-color);
     border-radius: 20px;
     padding: 40px;
     text-align: center;
     transition: var(--transition);
     position: relative;
 }

 .pricing-card.popular {
     border: 2px solid var(--primary-color);
     transform: scale(1.05);
     z-index: 2;
     padding-right: 20px;
     /* Fix text touching edge */
 }

 /* Mobile wrap fix for Latest Arrivals header */
 @media (max-width: 768px) {
     .mobile-wrap-header {
         flex-wrap: wrap;
         gap: 20px;
         align-items: flex-start !important;
     }

     .mobile-wrap-header .btn {
         margin-left: 0;
         width: 100%;
         /* Optional: full width button on mobile */
     }
 }

 .price-tag {
     font-size: clamp(2rem, 5vw, 3rem);
     /* Responsive sizing */
     font-weight: 900;
     margin: 20px 0;
     color: var(--text-color);
     line-height: 1;
     /* Tighter line height prevents vertical gap issues */
     word-break: break-all;
     /* Prevent overflow */
 }

 .price-tag span {
     font-size: 1rem;
     font-weight: 400;
     opacity: 0.7;
 }

 /* Dashboard */
 .dashboard-layout {
     display: grid;
     grid-template-columns: 280px 1fr;
     min-height: 100vh;
 }

 .sidebar {
     background: var(--card-bg);
     border-right: 1px solid var(--border-color);
     padding: 30px;
     display: flex;
     flex-direction: column;
 }

 /* Sidebar Menu Text Visibility Fix */
 .sidebar-menu li a {
     color: var(--text-color);
     font-weight: 600;
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 12px 15px;
     border-radius: 8px;
     transition: all 0.3s ease;
     text-decoration: none;
     margin-bottom: 5px;
 }

 .sidebar-menu li a i {
     width: 20px;
     text-align: center;
 }

 .sidebar-menu li a:hover,
 .sidebar-menu li a.active {
     background: rgba(0, 0, 0, 0.05);
     color: var(--primary-color);
     /* Result: Dark Green in Day (Visible), Neon in Dark */
 }

 /* Specific Dark Mode overrides for Sidebar if needed */
 [data-theme="dark"] .sidebar-menu li a:hover,
 [data-theme="dark"] .sidebar-menu li a.active {
     background: rgba(255, 255, 255, 0.1);
     color: var(--primary-color);
 }

 [dir="rtl"] .sidebar {
     border-right: none;
     border-left: 1px solid var(--border-color);
 }

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

 .timeline::after {
     content: '';
     position: absolute;
     width: 2px;
     background-color: var(--border-color);
     top: 0;
     bottom: 0;
     left: 50%;
     margin-left: -1px;
 }

 .timeline-item {
     padding: 10px 40px;
     position: relative;
     width: 50%;
     box-sizing: border-box;
 }

 .timeline-item::after {
     content: '';
     position: absolute;
     width: 20px;
     height: 20px;
     right: -10px;
     background-color: var(--card-bg);
     border: 4px solid var(--primary-color);
     top: 15px;
     border-radius: 50%;
     z-index: 1;
 }

 .left {
     left: 0;
     text-align: right;
 }

 .right {
     left: 50%;
 }

 .left::after {
     right: -10px;
 }

 .right::after {
     left: -10px;
 }

 [dir="rtl"] .timeline::after {
     right: 50%;
 }

 [dir="rtl"] .left {
     text-align: right;
     /* Timeline override: keeps structure but text aligns right */
 }

 /* Global Card Alignment Fix */
 .info-card,
 .product-card,
 .service-card,
 .feature-card,
 .log-card {
     text-align: start !important;
     /* Force logical start */
     width: 100%;
     /* Ensure fluid width */
 }

 [dir="rtl"] .info-card,
 [dir="rtl"] .product-card,
 [dir="rtl"] .service-card,
 [dir="rtl"] .feature-card,
 [dir="rtl"] .log-card {
     text-align: right !important;
 }

 /* Ensure images don't overflow */
 img,
 video,
 iframe {
     max-width: 100%;
     height: auto;
 }

 /* Forms */
 input,
 textarea,
 select {
     width: 100%;
     padding: 15px;
     border: 1px solid var(--border-color);
     border-radius: 10px;
     background: var(--bg-secondary);
     color: var(--text-color);
     font-family: inherit;
     margin-bottom: 15px;
 }

 input:focus,
 textarea:focus {
     border-color: var(--primary-color);
     outline: none;
 }

 /* Mobile */
 @media (max-width: 992px) {
     .dashboard-layout {
         grid-template-columns: 1fr;
     }

     .sidebar {
         display: none;
     }
 }

 /* Global: Hide mobile menu elements by default so they don't break desktop */
 .mobile-nav-header,
 .mobile-nav-actions {
     display: none;
 }

 @media (max-width: 1100px) {

     /* Hide desktop nav actions (Login, Register, Toggles) but keep Hamburger & Cart */
     .nav-actions .btn,
     .nav-actions .rtl-toggle,
     .nav-actions .theme-toggle {
         display: none;
     }

     .nav-links {
         display: none;
     }

     /* Mobile Menu Active State */
     .nav-links.active {
         display: flex;
         flex-direction: column;
         position: fixed;
         /* Fixed to cover screen */
         top: 0;
         left: 0;
         width: 100%;
         height: 100vh;
         background: #eaeff2;
         /* Light gray per image */
         padding: 0;
         z-index: 9999;
         overflow-y: auto;
         gap: 0;
         /* Reset gap, control via margins */
         box-shadow: none;
     }

     /* Mobile Header Styling */
     .mobile-nav-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding: 20px 30px;
         background: var(--bg-secondary);
         border-bottom: 1px solid var(--border-color);
         margin-bottom: 30px;
     }

     .mobile-logo {
         display: flex;
         font-size: 1.3rem;
         font-weight: 800;
         color: var(--primary-color);
         align-items: center;
         gap: 10px;
     }

     .mobile-close-btn {
         display: flex !important;
         background: none;
         border: none;
         font-size: 1.5rem;
         color: var(--text-color);
         cursor: pointer;
         padding: 5px;
     }

     /* Mobile Links Styling */
     .nav-links.active>li:not(.mobile-nav-header):not(.mobile-nav-actions) {
         text-align: center;
         margin-bottom: 20px;
         font-size: 1.1rem;
         font-weight: 500;
         color: #333;
     }

     .nav-links.active .dropdown-content {
         position: static;
         box-shadow: none;
         background: transparent;
         padding-left: 20px;
         display: none;
         /* Hide submenus by default */
         margin-top: 10px;
         opacity: 1;
         animation: none;
         width: 100%;
         transform: none;
         border: none;
     }

     .nav-links.active .dropdown:hover .dropdown-content {
         display: block;
         /* Example hover behavior, ideally click for mobile */
         animation: none;
     }

     .nav-links.active .dropdown>a {
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 8px;
     }

     /* Mobile Actions Styling */
     .mobile-nav-actions {
         display: flex !important;
         justify-content: center;
         align-items: center;
         gap: 20px;
         margin-top: 10px;
         padding: 25px 20px;
         border-top: 1px solid var(--border-color);
         background: var(--bg-secondary);
     }

     /* Ensure icons in mobile actions are visible */
     .mobile-nav-actions .icon-btn {
         background: white;
         width: 40px;
         height: 40px;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
     }

     .hamburger {
         display: flex;
     }

     .cards-scroll-container {
         justify-content: flex-start;
         padding-inline: 20px;
     }

     .scroll-card {
         flex: 0 0 80%;
         height: 350px;
     }

     /* Glassmorphism Pricing Section */
     .pricing-section-glass {
         background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('Assets/gym-bg2.jpg');
         background-size: cover;
         background-position: center;
         padding: 100px 0;
         color: white;
     }

     .pricing-card-glass {
         background: rgba(30, 30, 30, 0.6);
         backdrop-filter: blur(15px);
         -webkit-backdrop-filter: blur(15px);
         border: 1px solid rgba(255, 255, 255, 0.1);
         padding: 40px;
         border-radius: 2px;
         text-align: left;
         transition: all 0.4s ease;
         display: flex;
         flex-direction: column;
         height: 100%;
     }

     .pricing-card-glass:hover {
         background: rgba(30, 30, 30, 0.8);
         transform: translateY(-10px);
         border-color: rgba(255, 255, 255, 0.2);
     }

     .glass-price {
         font-size: clamp(2.5rem, 6vw, 3.5rem);
         /* Responsive sizing */
         font-weight: 700;
         margin: 20px 0 5px;
         line-height: 1;
         word-break: break-word;
         /* Ensure it wraps if needed */
     }

     .glass-price span {
         font-size: 1rem;
         font-weight: 400;
         opacity: 0.7;
     }

     .glass-features {
         list-style: none;
         margin: 30px 0;
         padding: 0;
         border-top: 1px solid rgba(255, 255, 255, 0.1);
         padding-top: 20px;
         flex-grow: 1;
     }

     .glass-features li {
         margin-bottom: 12px;
         font-size: 0.9rem;
         opacity: 0.8;
         display: flex;
         align-items: center;
     }

     .glass-features li::before {
         content: '•';
         color: var(--primary-color);
         /* Use site primary color instead of white for the dot */
         font-size: 1.2rem;
         margin-right: 10px;
     }

     .btn-glass {
         background: rgba(255, 255, 255, 0.1);
         color: white;
         border: 1px solid rgba(255, 255, 255, 0.2);
         width: 100%;
         border-radius: 30px;
         padding: 12px;
         transition: all 0.4s ease;
     }

     .btn-glass:hover {
         background: var(--primary-color);
         color: black;
         border-color: var(--primary-color);
     }

     /* Mobile Timeline */
     .timeline::after {
         left: 31px;
     }

     [dir="rtl"] .timeline::after {
         left: auto;
         right: 31px;
     }

     .timeline-item {
         width: 100%;
         padding-left: 70px;
         padding-right: 25px;
     }

     [dir="rtl"] .timeline-item {
         padding-left: 25px;
         padding-right: 70px;
     }

     .timeline-item::after {
         left: 21px;
     }

     [dir="rtl"] .timeline-item::after {
         left: auto;
         right: 21px;
     }

     .left {
         text-align: left;
     }

     [dir="rtl"] .timeline::after {
         right: 31px;
     }

     [dir="rtl"] .timeline-item {
         padding-right: 70px;
         padding-left: 25px;
     }

     [dir="rtl"] .timeline-item::after {
         right: 21px;
     }

     .mobile-controls {
         display: block;
     }

     /* Ensure check */

     .hero-classic h1 {
         font-size: 3rem;
     }
 }

 /* ========================================= */
 /* --- NEW MEMBERSHIP SECTION DESIGN --- */
 /* ========================================= */

 .membership-section {
     position: relative;
     padding: 100px 0;
     /* You will paste your specific image as 'Assets/membership-bg.jpg' */
     background: url('Assets/membership-bg.jpg') no-repeat center center;
     background-size: cover;
     color: white;
     overflow: hidden;
 }

 /* Dark overlay to match the moody look of the reference */
 .membership-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(to right, #000000 0%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.2) 100%);
     z-index: 1;
 }

 .membership-container {
     position: relative;
     z-index: 2;
     padding-right: 20px;
     /* Fix text touching edge */
 }

 /* Mobile wrap fix for Latest Arrivals header */
 @media (max-width: 768px) {
     .mobile-wrap-header {
         flex-wrap: wrap;
         gap: 20px;
         align-items: flex-start !important;
     }

     .mobile-wrap-header .btn {
         margin-left: 0;
         width: 100%;
         /* Optional: full width button on mobile */
     }
 }

 .membership-header {
     margin-bottom: 60px;
     max-width: 600px;
 }

 .membership-header h2 {
     font-size: 2.5rem;
     margin-bottom: 10px;
 }

 .membership-header p {
     opacity: 0.7;
     font-size: 1rem;
     font-weight: 300;
 }

 .membership-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 30px;
 }

 /* Card Design */
 .mem-card {
     background: rgba(255, 255, 255, 0.03);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border: 1px solid rgba(255, 255, 255, 0.08);
     padding: 40px 30px;
     border-radius: 4px;
     display: flex;
     flex-direction: column;
     transition: all 0.4s ease;
 }

 .mem-card:hover {
     transform: translateY(-10px);
     background: rgba(20, 20, 20, 0.8);
     border-color: rgba(255, 255, 255, 0.2);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
 }

 .mem-title {
     font-size: 1.1rem;
     font-weight: 700;
     margin-bottom: 5px;
     color: white;
 }

 .mem-subtitle {
     font-size: 0.8rem;
     color: #999;
     text-transform: uppercase;
     letter-spacing: 1px;
     margin-bottom: 20px;
     display: block;
 }

 .mem-price {
     font-size: clamp(2rem, 5vw, 3.5rem);
     /* Responsive sizing */
     font-weight: 700;
     color: white;
     line-height: 1;
     margin-top: 10px;
     word-break: break-all;
     /* Prevent overflow */
 }

 .mem-period {
     font-size: 1rem;
     font-weight: 400;
     color: #999;
 }

 .mem-divider {
     width: 100%;
     height: 1px;
     background: rgba(255, 255, 255, 0.1);
     margin: 30px 0;
 }

 .mem-features {
     list-style: none;
     margin-bottom: 40px;
     flex-grow: 1;
 }

 .mem-features li {
     margin-bottom: 15px;
     font-size: 0.9rem;
     color: #ccc;
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .mem-features li i {
     font-size: 0.7rem;
     color: white;
 }

 /* Buttons */
 .mem-btn {
     width: 100%;
     padding: 15px;
     border-radius: 50px;
     text-align: center;
     text-transform: uppercase;
     font-weight: 600;
     font-size: 0.85rem;
     letter-spacing: 0.5px;
     transition: 0.3s;
     background: rgba(255, 255, 255, 0.1);
     color: white;
     border: 1px solid rgba(255, 255, 255, 0.05);
 }

 .mem-btn:hover,
 .mem-btn.active {
     background: #a17a74;
     /* Muted Rose/Brown from reference image */
     color: white;
     border-color: #a17a74;
 }

 /* Responsive Adjustments */
 @media (max-width: 768px) {
     .membership-section {
         padding: 60px 0;
     }

     .mem-card {
         margin-bottom: 20px;
     }
 }

 /* == STANDARDIZED CARD STYLES == */

 /* Category Overlay Card */
 .category-card {
     height: 350px;
     position: relative;
     border-radius: 20px;
     overflow: hidden;
     /* improved consistency */
     border: 1px solid var(--border-color);
 }

 .category-content {
     position: absolute;
     inset: 0;
     background: linear-gradient(to top, black, transparent);
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     padding: 30px;
 }

 /* Blog Card */
 .blog-card {
     background: var(--card-bg);
     border-radius: 10px;
     overflow: hidden;
     box-shadow: var(--shadow);
     height: 100%;
     display: flex;
     flex-direction: column;
     transition: var(--transition);
     border: 1px solid var(--border-color);
 }

 .blog-card:hover {
     transform: translateY(-5px);
     border-color: var(--primary-color);
 }

 .blog-image {
     height: 200px;
     width: 100%;
 }

 .blog-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .blog-content {
     padding: 25px;
     display: flex;
     flex-direction: column;
     flex-grow: 1;
 }

 .blog-category {
     color: var(--primary-text-visible);
     font-size: 0.8rem;
     font-weight: bold;
     margin-bottom: 10px;
     text-transform: uppercase;
 }

 @media (max-width: 768px) {

     .nav-links {
         display: none;
     }

     .nav-actions .btn,
     .nav-actions .icon-btn,
     .nav-actions .theme-toggle,
     .nav-actions .rtl-toggle {
         display: none;
     }

     .nav-actions {
         display: flex;
         margin-left: auto;
         gap: 15px;
         /* Ensure gap */
     }

     .nav-links.active {
         display: flex;
         flex-direction: column;
         position: absolute;
         top: 100%;
         left: 0;
         right: 0;
         background: var(--bg-color);
         padding: 30px;
         border-bottom: 1px solid var(--border-color);
         box-shadow: var(--shadow);
         gap: 15px;
         box-shadow: var(--shadow);
         gap: 15px;
         z-index: 1000;
     }

     /* Ensure text is visible in mobile menu for all themes */
     .nav-links.active a {
         color: var(--text-color);
     }

     /* Specific override for dark mode if needed, though var(--text-color) is white in dark */
     [data-theme="dark"] .nav-links.active a {
         color: #ffffff;
     }

     /* Styles for injected mobile controls */
     .mobile-only-actions {
         display: flex;
         /* Flex row for controls */
         justify-content: center;
         gap: 20px;
         margin-top: 20px;
         padding-top: 20px;
         border-top: 1px solid var(--border-color);
         width: 100%;
     }

     /* Ensure specific buttons inside look good */
     .mobile-only-actions .btn {
         display: inline-flex !important;
         /* Force show */
         width: auto;
     }

     .mobile-only-actions .icon-btn {
         display: inline-flex !important;
         /* Force show */
         font-size: 1.5rem;
         /* Larger for touch */
     }

     /* Make sure mobile controls in menu (if any) are visible or handled by JS */

     .hamburger {
         display: flex;
         z-index: 1001;
     }
 }

 /* --- Cart Sidebar --- */
 .cart-overlay {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.5);
     z-index: 1001;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.3s ease;
 }

 .cart-overlay.active {
     opacity: 1;
     pointer-events: all;
 }

 .cart-sidebar {
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     width: 350px;
     background: var(--bg-color);
     z-index: 1002;
     transform: translateX(100%);
     transition: transform 0.3s ease;
     box-shadow: -5px 0 30px rgba(0, 0, 0, 0.2);
     display: flex;
     flex-direction: column;
     padding: 30px;
     color: var(--text-color);
 }

 [dir="rtl"] .cart-sidebar {
     right: auto;
     left: 0;
     transform: translateX(-100%);
 }

 .cart-sidebar.active {
     transform: translateX(0);
 }

 .cart-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 20px;
     padding-bottom: 20px;
     border-bottom: 1px solid var(--border-color);
 }

 .cart-header h3 {
     margin: 0;
 }

 .cart-items {
     flex-grow: 1;
     overflow-y: auto;
     display: flex;
     flex-direction: column;
     gap: 20px;
 }

 .cart-item {
     display: flex;
     gap: 15px;
     align-items: center;
 }

 .cart-item img {
     width: 60px;
     height: 60px;
     border-radius: 8px;
     object-fit: cover;
 }

 .cart-item h4 {
     font-size: 1rem;
     margin-bottom: 5px;
 }

 .cart-item p {
     font-size: 0.9rem;
     opacity: 0.7;
     margin: 0;
 }

 .cart-footer {
     border-top: 1px solid var(--border-color);
     padding-top: 20px;
     margin-top: 20px;
 }

 .cart-total {
     font-size: 1.2rem;
     color: var(--primary-text-visible);
 }

 .cart-badge {
     position: absolute;
     top: 0;
     right: 0;
     background: var(--accent-color);
     color: white;
     font-size: 0.6rem;
     width: 16px;
     height: 16px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     transform: translate(25%, -25%);
 }

 /* --- Sportive Page Loader --- */
 .page-loader {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: #000;
     z-index: 10000;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     transition: clip-path 0.8s ease-in-out, opacity 0.5s ease-out 0.5s;
     clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
 }

 .page-loader.hidden {
     clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
     opacity: 0;
     pointer-events: none;
 }

 [dir="rtl"] .page-loader.hidden {
     clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
 }

 .loader-content {
     text-align: center;
     color: white;
     position: relative;
     z-index: 2;
     padding-right: 20px;
     /* Fix text touching edge */
 }

 /* Mobile wrap fix for Latest Arrivals header */
 @media (max-width: 768px) {
     .mobile-wrap-header {
         flex-wrap: wrap;
         gap: 20px;
         align-items: flex-start !important;
     }

     .mobile-wrap-header .btn {
         margin-left: 0;
         width: 100%;
         /* Optional: full width button on mobile */
     }
 }

 .loader-icon {
     font-size: 4rem;
     color: var(--primary-color);
     margin-bottom: 20px;
     animation: loader-bounce 1s infinite alternate cubic-bezier(0.5, 0.05, 0.1, 0.3);
 }

 .loader-text {
     font-size: 1.5rem;
     font-weight: 900;
     text-transform: uppercase;
     letter-spacing: 5px;
     margin-bottom: 30px;
     background: linear-gradient(90deg, #fff, var(--primary-color));
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .loader-progress-track {
     width: 200px;
     height: 6px;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 3px;
     overflow: hidden;
     margin: 0 auto;
     position: relative;
 }

 .loader-progress-bar {
     width: 0%;
     height: 100%;
     background: var(--primary-color);
     position: absolute;
     top: 0;
     left: 0;
     animation: loader-progress 1.5s ease-in-out infinite;
     box-shadow: 0 0 10px var(--primary-color);
 }

 @keyframes loader-bounce {
     from {
         transform: translateY(0) scale(1);
         opacity: 0.8;
     }

     to {
         transform: translateY(-20px) scale(1.1);
         opacity: 1;
         text-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
     }
 }

 @keyframes loader-progress {
     0% {
         left: -100%;
         width: 50%;
     }

     50% {
         left: 25%;
         width: 50%;
     }

     100% {
         left: 100%;
         width: 50%;
     }
 }

 /* == NEW SPLIT HERO ANIMATION == */
 .hero-split {
     min-height: 95vh;
     display: flex;
     align-items: center;
     background: var(--bg-color);
     position: relative;
     overflow: hidden;
     padding-top: 80px;
 }

 /* Background blob for visual interest */
 .hero-split::before {
     content: '';
     position: absolute;
     top: -20%;
     right: -10%;
     width: 700px;
     height: 700px;
     background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%);
     opacity: 0.4;
     z-index: 0;
     pointer-events: none;
 }

 .hero-split .container {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 50px;
     align-items: center;
     position: relative;
     z-index: 1;
 }

 .hero-text-content {
     z-index: 2;
     padding-right: 20px;
 }

 [dir="rtl"] .hero-text-content {
     padding-right: 0;
     padding-left: 20px;
 }

 .hero-visual {
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
     perspective: 1000px;
 }

 /* The dotted circle ring */
 .hero-circle {
     position: absolute;
     width: 550px;
     height: 550px;
     border-radius: 50%;
     border: 2px dashed var(--border-color);
     animation: rotateCircle 30s linear infinite;
     z-index: 1;
 }

 /* Inner glow circle */
 .hero-circle::before {
     content: '';
     position: absolute;
     inset: 50px;
     background: var(--card-bg);
     border-radius: 50%;
     opacity: 0.5;
     z-index: -1;
     box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
 }

 .floating-product {
     width: 600px;
     max-width: 120%;
     z-index: 2;
     /* Initial tilt to match dynamic style */
     transform: rotate(-15deg) translateY(0);
     animation: floatHero 6s ease-in-out infinite;
     filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.4));
     transition: transform 0.3s ease;
 }

 /* Interactive hover effect */
 .hero-visual:hover .floating-product {
     transform: rotate(-10deg) scale(1.05);
 }

 @keyframes floatHero {

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

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

 @keyframes rotateCircle {
     from {
         transform: rotate(0deg);
     }

     to {
         transform: rotate(360deg);
     }
 }

 /* Play button pulse */
 .play-btn-pulse {
     position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 50px;
     height: 50px;
     background: white;
     border-radius: 50%;
     color: var(--primary-color);
     box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
     animation: pulse-white 2s infinite;
     margin-right: 15px;
 }

 @keyframes pulse-white {
     0% {
         transform: scale(0.95);
         box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
     }

     70% {
         transform: scale(1);
         box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
     }

     100% {
         transform: scale(0.95);
         box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
     }
 }

 /* == ELABORATE FOOTER == */
 .footer-elaborate {
     background: #0a0a0a;
     color: #e0e0e0;
     padding: 80px 0 30px;
     font-size: 0.95rem;
     position: relative;
     overflow: hidden;
 }

 /* Footer subtle background pattern */
 .footer-elaborate::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 5px;
     background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
 }

 .footer-top {
     display: grid;
     grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
     gap: 50px;
     margin-bottom: 60px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     padding-bottom: 60px;
 }

 .footer-col h4 {
     color: white;
     margin-bottom: 30px;
     font-size: 1.2rem;
     font-weight: 700;
     letter-spacing: 0.5px;
 }

 .footer-links li {
     margin-bottom: 15px;
 }

 .footer-links a {
     color: #999;
     transition: all 0.3s ease;
     display: inline-block;
 }

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

 [dir="rtl"] .footer-links a:hover {
     transform: translateX(-5px);
 }

 .footer-newsletter p {
     color: #999;
     margin-bottom: 20px;
 }

 .newsletter-form {
     display: flex;
     gap: 10px;
 }

 .newsletter-form input {
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.1);
     color: white;
     margin-bottom: 0;
     border-radius: 5px;
 }

 .newsletter-form button {
     background: var(--primary-color);
     color: black;
     border: none;
     padding: 0 20px;
     border-radius: 5px;
     font-weight: bold;
     cursor: pointer;
     transition: 0.3s;
 }

 .newsletter-form button:hover {
     transform: translateY(-2px);
     box-shadow: 0 5px 15px rgba(212, 240, 0, 0.3);
 }

 .footer-bottom {
     display: flex;
     justify-content: space-between;
     align-items: center;
     color: #666;
     font-size: 0.9rem;
     flex-wrap: wrap;
     gap: 20px;
 }

 .social-links {
     display: flex;
     gap: 15px;
 }

 .social-links a {
     width: 45px;
     height: 45px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.05);
     display: flex;
     align-items: center;
     justify-content: center;
     transition: 0.3s;
     color: white;
 }

 .social-links a:hover {
     background: var(--primary-color);
     color: black;
     transform: translateY(-3px);
 }

 /* RESPONSIVE & RTL OVERRIDES */
 @media (max-width: 992px) {
     .hero-split .container {
         grid-template-columns: 1fr;
         text-align: center;
     }

     .hero-text-content {
         padding-right: 0;
         margin-bottom: 50px;
         order: 1;
         /* Visual first */
     }

     .hero-visual {
         order: 2;
         margin-bottom: 40px;
     }

     .hero-circle {
         width: 80vw;
         height: 80vw;
         max-width: 350px;
         max-height: 350px;
     }

     .floating-product {
         width: 85%;
         max-width: 400px;
         height: auto;
     }

     .footer-top {
         grid-template-columns: 1fr 1fr;
     }
 }

 @media (max-width: 576px) {
     .footer-top {
         grid-template-columns: 1fr;
     }

     .footer-bottom {
         flex-direction: column;
         text-align: center;
     }

     .hero-split {
         padding-top: 100px;
     }
 }

 /* == SPORTIVE JOURNEY: SPRINT TRACK (Horizontal Layout) == */
 .timeline {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     /* 4 Columns side-by-side */
     gap: 20px;
     max-width: 1200px;
     margin: 100px auto;
     padding: 60px 0 20px;
     position: relative;
 }

 /* The Horizontal "Track" Line */
 .timeline::before {
     content: '';
     position: absolute;
     top: 0;
     left: 20px;
     right: 20px;
     height: 6px;
     background: var(--border-color);
     z-index: 0;
     border-radius: 3px;
     opacity: 0.3;
 }

 /* Simulated Progress (Active Track) */
 .timeline::after {
     content: '';
     position: absolute;
     top: 0;
     left: 20px;
     width: 60%;
     /* Shows simulated progress through time */
     height: 6px;
     background: linear-gradient(90deg, var(--primary-color), transparent);
     z-index: 0;
     border-radius: 3px;
     box-shadow: 0 0 20px var(--primary-glow);
 }

 /* Timeline Item - Vertical Column */
 .timeline-item {
     width: 100%;
     padding: 30px 10px 0;
     position: relative;
     /* Reset any left/right specific positioning */
     left: auto !important;
     right: auto !important;
     text-align: left;
     display: flex;
     flex-direction: column;
 }

 /* The Checkpoint Marker (Top of Card) */
 .timeline-item::after {
     content: '';
     position: absolute;
     top: -7px;
     /* Center on 6px line */
     left: 20px;
     width: 20px;
     height: 20px;
     background: var(--bg-color);
     border: 4px solid var(--primary-color);
     border-radius: 50%;
     z-index: 2;
     box-shadow: 0 0 10px var(--primary-glow);
     transition: 0.3s;
 }

 .timeline-item:hover::after {
     background: var(--primary-color);
     box-shadow: 0 0 25px var(--primary-color);
     transform: scale(1.3);
 }

 /* Vertical Drop Line (Connector) */
 .timeline-item::before {
     content: '';
     position: absolute;
     top: 13px;
     left: 29px;
     /* Center of dot */
     width: 2px;
     height: 30px;
     /* Connects line to card */
     background: linear-gradient(to bottom, var(--primary-color), transparent);
     z-index: 0;
     opacity: 0.5;
 }

 /* Card Content Styling */
 .timeline-content {
     background: var(--card-bg);
     border: 1px solid var(--border-color);
     padding: 30px 20px;
     position: relative;
     border-radius: 16px;
     transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     height: 100%;
     /* Equal height cards */
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     /* Bottom align text */
     overflow: visible;
     /* Allow year to hang out */
     margin-top: 10px;
 }

 .timeline-content:hover {
     transform: translateY(-15px);
     border-color: var(--primary-color);
     box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3);
 }

 /* Year Styling - Big Floating Number */
 .timeline-year {
     font-size: 4rem;
     position: absolute;
     top: -40px;
     right: 10px;
     color: transparent;
     -webkit-text-stroke: 1px var(--text-muted);
     opacity: 0.8;
     font-weight: 900;
     z-index: 1;
     transition: 0.4s;
     font-style: italic;
     font-family: var(--font-heading);
 }

 .timeline-content:hover .timeline-year {
     color: rgba(0, 0, 0, 0);
     -webkit-text-stroke: 1px var(--primary-color);
     transform: translateY(-10px) skewX(-10deg);
     opacity: 0.8;
 }

 /* Typography */
 .timeline-title {
     font-size: 1.5rem;
     font-weight: 800;
     margin-bottom: 10px;
     color: var(--primary-text-visible);
     position: relative;
     z-index: 2;
     text-transform: uppercase;
 }

 .timeline-text {
     font-size: 0.95rem;
     color: var(--text-muted);
     position: relative;
     z-index: 2;
     line-height: 1.5;
 }

 /* Decorative corner accent on hover */
 .timeline-content::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 0%;
     height: 4px;
     background: var(--primary-color);
     transition: 0.4s;
 }

 .timeline-content:hover::after {
     width: 100%;
 }

 /* Mobile Responsive - Falls back to vertical track */
 @media screen and (max-width: 900px) {
     .timeline {
         grid-template-columns: 1fr;
         /* Vertical Stack */
         gap: 0;
         padding-left: 20px;
         /* Space for vertical track */
         margin: 50px 0;
         padding-top: 0;
     }

     /* Hide horizontal lines */
     .timeline::before,
     .timeline::after {
         content: '';
         /* Reuse for vertical track */
         top: 0;
         bottom: 0;
         height: auto;
         left: 20px;
         width: 4px;
         background: var(--border-color);
         box-shadow: none;
     }

     /* Reset Item Styling for Vertical */
     .timeline-item {
         padding: 0 0 50px 40px;
     }

     /* Adjust Dot Position */
     .timeline-item::after {
         left: 12px;
         /* Align with 4px border at left:20px */
         top: 0;
         width: 20px;
         height: 20px;
     }

     /* Adjust Connector Position */
     .timeline-item::before {
         width: 30px;
         height: 2px;
         top: 9px;
         left: 32px;
         background: var(--primary-color);
     }
 }

 /* === FAQ Accordion Styles === */
 .faq-container {
     display: flex;
     flex-direction: column;
     gap: 15px;
     max-width: 800px;
     margin: 0 auto;
 }

 .faq-item {
     border-bottom: 1px solid var(--border-color);
     padding-bottom: 10px;
 }

 .faq-question {
     display: flex;
     justify-content: space-between;
     align-items: center;
     cursor: pointer;
     padding: 15px 0;
     transition: color 0.3s;
 }

 .faq-question h4 {
     margin: 0;
     font-size: 1.1rem;
     font-weight: 700;
     transition: color 0.3s ease;
     /* Use high contrast text in day mode if needed */
     color: var(--text-color);
 }

 .faq-item.active .faq-question h4 {
     color: var(--primary-text-visible);
 }

 .faq-icon {
     font-size: 0.9rem;
     transition: transform 0.3s ease;
     color: var(--primary-text-visible);
 }

 .faq-item.active .faq-icon {
     transform: rotate(45deg);
     color: var(--accent-color);
 }

 .faq-answer {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
     opacity: 0;
 }

 .faq-answer p {
     margin: 0;
     padding-bottom: 20px;
     opacity: 0.8;
     line-height: 1.6;
     color: var(--text-muted);
 }

 .faq-item.active .faq-answer {
     max-height: 200px;
     /* Arbitrary large height */
     opacity: 1;
 }

 /* === Professional Grid System === */
 .pro-grid-2 {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
     gap: 30px;
 }

 .pro-grid-3 {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 30px;
 }

 .pro-grid-4 {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 25px;
 }

 /* Feature Card (Why Choose Us) */
 .feature-card {
     background: var(--card-bg);
     padding: 35px 25px;
     border-radius: 16px;
     text-align: center;
     transition: all 0.3s ease;
     border: 1px solid var(--border-color);
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
     height: 100%;
 }

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

 .feature-icon {
     font-size: 2.5rem;
     color: var(--primary-color);
     margin-bottom: 20px;
     display: inline-block;
 }

 /* Log Card (Performance Log) */
 .log-card {
     background: var(--card-bg);
     border-radius: 16px;
     overflow: hidden;
     border: 1px solid var(--border-color);
     transition: all 0.3s ease;
     display: flex;
     flex-direction: column;
     height: 100%;
 }

 .log-card:hover {
     transform: translateY(-5px);
     box-shadow: var(--shadow);
     border-color: var(--primary-color);
 }

 .log-img {
     height: 200px;
     width: 100%;
     position: relative;
 }

 .log-img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: 0.5s;
 }

 .log-card:hover .log-img img {
     transform: scale(1.05);
 }

 .log-content {
     padding: 25px;
     display: flex;
     flex-direction: column;
     flex-grow: 1;
 }

 .log-category {
     color: var(--primary-text-visible);
     font-weight: bold;
     font-size: 0.8rem;
     margin-bottom: 5px;
     text-transform: uppercase;
 }

 /* Step Card (Methodology) */
 .step-card {
     position: relative;
     padding: 40px 30px;
     background: var(--card-bg);
     border-radius: 16px;
     border: 1px solid var(--border-color);
     text-align: center;
     transition: 0.3s;
     height: 100%;
 }

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

 .step-number {
     font-size: 4rem;
     font-weight: 900;
     color: var(--primary-color);
     /* Visible by default requested */
     opacity: 1;
     line-height: 1;
     margin-bottom: 15px;
     transition: 0.3s;
 }

 .step-card:hover .step-number {
     color: var(--primary-color);
     opacity: 1;
 }

 /* Event Card (Upcoming Events) */
 .event-card {
     display: flex;
     background: var(--card-bg);
     border-radius: 16px;
     border: 1px solid var(--border-color);
     overflow: hidden;
     transition: 0.3s;
     align-items: center;
 }

 .event-card:hover {
     transform: translateX(5px);
     border-left: 4px solid var(--primary-color);
     box-shadow: var(--shadow);
 }

 .event-date {
     background: #111;
     color: var(--primary-color);
     padding: 20px;
     text-align: center;
     min-width: 100px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     height: 100%;
     align-self: stretch;
 }

 .event-day {
     font-size: 1.8rem;
     font-weight: 800;
     line-height: 1;
 }

 .event-month {
     font-size: 0.9rem;
     font-weight: bold;
     text-transform: uppercase;
 }

 .event-details {
     padding: 20px;
     flex-grow: 1;
 }

 /* === Membership Container (Home 2) === */
 .mem-cards-container {
     display: flex;
     justify-content: center;
     gap: 30px;
     flex-wrap: wrap;
     margin-top: 40px;
 }

 .mem-card {
     flex: 1;
     min-width: 300px;
     max-width: 350px;
     background: rgba(30, 30, 35, 0.95);
     border-radius: 20px;
     padding: 30px;
     text-align: center;
     border: 1px solid rgba(255, 255, 255, 0.1);
     transition: all 0.3s ease;
     position: relative;
 }

 .mem-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
     border-color: rgba(255, 255, 255, 0.2);
 }

 .mem-card.popular {
     border: 2px solid var(--primary-color);
     transform: scale(1.03);
 }

 .mem-card.popular:hover {
     transform: scale(1.03) translateY(-8px);
 }

 /* Popular Banner */
 .popular-banner {
     position: absolute;
     top: 15px;
     left: 50%;
     transform: translateX(-50%);
     background: rgba(100, 80, 150, 0.6);
     color: #bbb;
     font-size: 0.7rem;
     font-weight: 600;
     text-transform: uppercase;
     padding: 5px 15px;
     border-radius: 20px;
     letter-spacing: 1px;
 }

 /* Membership Title - High visibility white */
 .mem-title {
     color: #ffffff;
     font-size: 1.4rem;
     font-weight: 700;
     margin-bottom: 10px;
     margin-top: 10px;
 }

 /* Membership Description - Readable gray */
 .mem-desc {
     color: rgba(255, 255, 255, 0.7);
     font-size: 0.95rem;
     line-height: 1.5;
     margin-bottom: 20px;
 }

 /* Membership Image Container */
 .mem-img-container {
     width: 100%;
     height: 180px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 20px;
     background: rgba(0, 0, 0, 0.2);
     border-radius: 15px;
     overflow: hidden;
 }

 .mem-img {
     max-width: 100%;
     max-height: 100%;
     object-fit: contain;
     transition: transform 0.5s ease;
 }

 .mem-card:hover .mem-img {
     transform: scale(1.05);
 }

 /* Membership Price - Bold and prominent */
 .mem-price {
     color: #ffffff;
     font-size: 2.5rem;
     font-weight: 800;
     margin-bottom: 5px;
 }

 .mem-price span {
     font-size: 1rem;
     font-weight: 400;
     color: rgba(255, 255, 255, 0.6);
 }

 /* Membership Price Sub-text */
 .mem-price-sub {
     color: rgba(255, 255, 255, 0.5);
     font-size: 0.85rem;
     margin-bottom: 10px;
 }

 /* Membership Button */
 .mem-btn {
     display: inline-block;
     width: 100%;
     background: rgba(80, 80, 90, 0.8);
     color: #ffffff;
     font-size: 0.9rem;
     font-weight: 600;
     text-transform: uppercase;
     padding: 14px 30px;
     border-radius: 8px;
     border: none;
     cursor: pointer;
     transition: all 0.3s ease;
     margin-top: 15px;
 }

 .mem-btn:hover {
     background: rgba(100, 100, 110, 0.9);
     transform: translateY(-2px);
 }

 .mem-card.popular .mem-btn {
     background: rgba(80, 80, 90, 0.8);
 }

 /* Membership Footer Link */
 .mem-footer-link {
     color: rgba(100, 150, 255, 0.8);
     font-size: 0.85rem;
     margin-top: 15px;
     cursor: pointer;
     transition: color 0.3s ease;
 }

 .mem-footer-link:hover {
     color: rgba(130, 180, 255, 1);
     text-decoration: underline;
 }

 @media (max-width: 900px) {
     .mem-cards-container {
         flex-direction: column;
         align-items: center;
     }

     .mem-card {
         width: 100%;
     }
 }

 /* === Membership Section Background (Home 2) === */
 .mem-section-bg {
     background: rgba(10, 10, 10, 0.7);
     /* Dark semi-transparent black */
     backdrop-filter: blur(20px);
     /* Glassy blur effect */
     -webkit-backdrop-filter: blur(20px);
     /* Safari support */
     padding: 80px 0;
     margin: 40px 0;
     border-radius: 20px;
     /* Separates it from valid surrounding content */
     border: 1px solid rgba(255, 255, 255, 0.1);
     /* Glass edge */
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
     /* Depth */
 }

 .mem-section-bg .container {
     position: relative;
     z-index: 2;
     padding-right: 20px;
     /* Fix text touching edge */
 }

 /* Mobile wrap fix for Latest Arrivals header */
 @media (max-width: 768px) {
     .mobile-wrap-header {
         flex-wrap: wrap;
         gap: 20px;
         align-items: flex-start !important;
     }

     .mobile-wrap-header .btn {
         margin-left: 0;
         width: 100%;
         /* Optional: full width button on mobile */
     }
 }

 /* Ensure text hierarchy clearly stands out on black */
 .mem-section-bg h2 {
     color: #ffffff;
     text-align: center;
     font-size: 2.5rem;
     margin-bottom: 10px;
 }

 .mem-section-bg .section-header {
     text-align: center;
     margin-bottom: 50px;
 }

 /* === App Integration Highlight (Home 2) === */
 .app-section-wrapper {
     padding: 80px 0;
 }

 .app-tech-card {
     background: linear-gradient(145deg, #1a1a1a, #0d0d0d);
     border-radius: 30px;
     padding: 60px;
     position: relative;
     overflow: hidden;
     color: white;
     /* Force white text even in light mode */
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
     border: 1px solid rgba(255, 255, 255, 0.05);
 }

 /* Decorative background glow */
 .app-tech-card::before {
     content: '';
     position: absolute;
     top: -50%;
     right: -20%;
     width: 600px;
     height: 600px;
     background: radial-gradient(circle, rgba(var(--primary-rgb), 0.15) 0%, transparent 70%);
     filter: blur(50px);
     filter: blur(50px);
     pointer-events: none;
     max-width: 100%;
     /* Prevent it from pushing width */
 }

 /* Critical: Ensure this card doesn't overflow parent */
 .app-section-wrapper {
     overflow: hidden;
     width: 100%;
 }

 .app-content {
     position: relative;
     z-index: 2;
     flex: 1;
     min-width: 300px;
 }

 .app-visual {
     flex: 1;
     min-width: 300px;
     max-width: 100%;
     position: relative;
 }

 /* Mobile wrap fix for Latest Arrivals header */
 @media (max-width: 1100px) {
     .mobile-wrap-header {
         flex-wrap: wrap;
         gap: 20px;
         align-items: flex-start !important;
     }

     .mobile-wrap-header .btn {
         margin-left: 0;
         width: 100%;
         /* Optional: full width button on mobile */
     }
 }

 .app-badge {
     display: inline-block;
     color: var(--primary-color);
     /* Neon is safe on this dark card */
     font-weight: 800;
     letter-spacing: 2px;
     text-transform: uppercase;
     margin-bottom: 20px;
     font-size: 0.9rem;
     background: rgba(var(--primary-rgb), 0.1);
     padding: 8px 16px;
     border-radius: 20px;
 }

 .app-tech-card h2 {
     font-size: 3rem;
     margin-bottom: 30px;
     color: white;
 }

 .app-tech-card p {
     color: #ccc;
     font-size: 1.1rem;
     margin-bottom: 40px;
     max-width: 500px;
 }

 .app-features li {
     display: flex;
     align-items: center;
     gap: 15px;
     margin-bottom: 20px;
     font-size: 1.1rem;
     color: #eee;
 }

 .app-features i {
     color: var(--primary-color);
     background: rgba(255, 255, 255, 0.1);
     width: 40px;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     font-size: 1rem;
 }

 .app-btn {
     display: inline-block;
     background: var(--primary-color);
     color: black;
     /* Text on neon background */
     padding: 15px 40px;
     border-radius: 50px;
     font-weight: 800;
     text-transform: uppercase;
     margin-top: 20px;
     transition: 0.3s;
     box-shadow: 0 10px 20px rgba(var(--primary-rgb), 0.3);
 }

 .app-btn:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(var(--primary-rgb), 0.5);
     color: black;
 }

 /* Phone Mockup Styling */
 .phone-mockup {
     background: #000;
     border: 8px solid #222;
     border-radius: 40px;
     padding: 20px;
     max-width: 320px;
     margin: 0 auto;
     box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
     position: relative;
     z-index: 2;
     transform: rotate(-5deg);
     transition: 0.5s;
     width: 100%;
     /* Default width */
 }

 @media (max-width: 480px) {
     .phone-mockup {
         max-width: 85% !important;
         /* Scale relative to container */
         border-width: 4px;
         margin-bottom: 20px;
         /* Ensure space at bottom */
     }
 }

 .phone-mockup:hover {
     transform: rotate(0deg) scale(1.02);
 }

 @media (max-width: 900px) {
     .app-tech-card {
         padding: 40px 25px;
         text-align: center;
         overflow: visible;
         /* Prevent clipping */
         display: flex;
         flex-direction: column;
         align-items: center;
     }

     .app-visual {
         margin-top: 40px;
         width: 100%;
         display: flex;
         justify-content: center;
         margin-bottom: 20px;
     }

     .app-badge {
         margin-left: auto;
         margin-right: auto;
     }

     .app-features li {
         justify-content: center;
     }

     .app-tech-card h2 {
         font-size: 2.2rem;
         /* Responsive font size */
     }

     .phone-mockup {
         margin-top: 50px;
         transform: rotate(0);
         max-width: 90%;
         /* Prevent overflow on very narrow screens */
         margin-left: auto;
         margin-right: auto;
     }
 }

 @media (max-width: 480px) {
     .app-tech-card {
         padding: 30px 15px;
     }

     .app-tech-card .flex-between {
         gap: 30px !important;
     }

     .app-content {
         padding-right: 0;
         text-align: center;
     }

     .app-features li {
         justify-content: center;
     }

     .app-tech-card h2 {
         font-size: 1.8rem;
     }

     .app-content,
     .app-visual {
         min-width: 100% !important;
     }

     .phone-mockup {
         transform: none;
         margin-top: 30px;
     }
 }

 /* Modern Theme Tweaks */
 body.theme-modern .hero-modern {
     background: var(--hero-bg);
     border-bottom: 1px solid var(--border-color);
 }

 body.theme-modern .hero-modern::after {
     background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%);
 }

 /* Hide injected mobile controls on desktop */
 @media (min-width: 769px) {
     .mobile-only-actions {
         display: none !important;
     }
 }

 /* Wishlist Button - Force Visibility */
 .wishlist-btn {
     position: absolute;
     top: 15px;
     right: 15px;
     background-color: #1a1a1a !important;
     /* Dark dark gray */
     border: 1px solid rgba(255, 255, 255, 0.1);
     width: 40px;
     height: 40px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: 0.3s;
     color: var(--primary-color) !important;
     /* Neon color */
     z-index: 20;
     padding: 0;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
 }

 .wishlist-btn i {
     font-size: 1.2rem;
     color: inherit;
     font-weight: normal;
 }

 .wishlist-btn:hover {
     background-color: var(--primary-color) !important;
     color: black !important;
     transform: scale(1.1);
 }

 /* FAQ Accordion */
 .faq-answer {
     display: none;
     padding-top: 15px;
     border-top: 1px solid rgba(128, 128, 128, 0.1);
     margin-top: 15px;
     animation: slideDown 0.3s ease-out;
 }

 .faq-item.active .faq-answer {
     display: block;
 }

 /* === ANIMATED HERO SECTIONS === */

 /* 1. Technical Grid Hero (for Services) */
 .animated-hero-grid {
     position: relative;
     background: var(--bg-secondary);
     padding: 100px 0;
     text-align: center;
     overflow: hidden;
     z-index: 1;
 }

 .animated-hero-grid::before {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background-image:
         linear-gradient(rgba(128, 128, 128, 0.1) 1px, transparent 1px),
         linear-gradient(90deg, rgba(128, 128, 128, 0.1) 1px, transparent 1px);
     background-size: 50px 50px;
     z-index: -1;
     animation: gridMove 20s linear infinite;
     transform: perspective(500px) rotateX(60deg);
 }

 .animated-hero-grid::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: radial-gradient(circle, transparent 0%, var(--bg-secondary) 80%);
     pointer-events: none;
     z-index: -1;
 }

 @keyframes gridMove {
     0% {
         transform: perspective(500px) rotateX(60deg) translateY(0);
     }

     100% {
         transform: perspective(500px) rotateX(60deg) translateY(50px);
     }
 }

 /* 2. Glowing Pulse Hero (for About/FAQ) */
 .animated-hero-glow {
     position: relative;
     background-color: #050505;
     background-image:
         radial-gradient(circle at 50% 50%, rgba(212, 240, 0, 0.1) 0%, transparent 50%),
         linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8));
     /* Lively Mesh Pattern */
     background:
         linear-gradient(rgba(10, 10, 10, 0.9), rgba(10, 10, 10, 0.9)),
         repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(212, 240, 0, 0.1) 20px),
         repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(212, 240, 0, 0.1) 20px);
     background-size: 100% 100%, 40px 40px, 40px 40px;
     animation: meshMove 20s linear infinite;
     padding: 100px 0;
     text-align: center;
     overflow: hidden;
     color: white;
     z-index: 1;
 }

 @keyframes meshMove {
     0% {
         background-position: 0 0, 0 0, 0 0;
     }

     100% {
         background-position: 0 0, 0 40px, 40px 0;
     }
 }

 .glow-circle {
     position: absolute;
     border-radius: 50%;
     background: var(--primary-color);
     opacity: 0.15;
     filter: blur(80px);
     z-index: -1;
     animation: floatGlow 10s ease-in-out infinite alternate;
 }

 .glow-circle-1 {
     width: 400px;
     height: 400px;
     top: -100px;
     left: -100px;
     animation-delay: 0s;
 }

 .glow-circle-2 {
     width: 300px;
     height: 300px;
     bottom: -50px;
     right: -50px;
     background: var(--accent-color);
     animation-delay: -5s;
 }

 @keyframes floatGlow {
     0% {
         transform: scale(1) translate(0, 0);
     }

     100% {
         transform: scale(1.2) translate(50px, 30px);
     }
 }

 /* 3. Kinetic Shapes Hero (for Contact) */
 .animated-hero-shapes {
     position: relative;
     background-color: #111;
     /* Diagonal Speed Lines */
     background-image: repeating-linear-gradient(45deg,
             rgba(50, 50, 50, 0.1) 0px,
             rgba(50, 50, 50, 0.1) 2px,
             transparent 2px,
             transparent 10px);
     background-size: 20px 20px;
     animation: speedLines 2s linear infinite;
     padding: 100px 0;
     text-align: center;
     overflow: hidden;
     color: white;
     z-index: 1;
 }

 @keyframes speedLines {
     0% {
         background-position: 0 0;
     }

     100% {
         background-position: 20px 20px;
     }
 }

 @keyframes speedLines {
     0% {
         background-position: 0 0;
     }

     100% {
         background-position: 20px 20px;
     }
 }

 .kinetic-shape {
     position: absolute;
     border: 2px solid var(--border-color);
     z-index: -1;
     opacity: 0.3;
 }

 .shape-square {
     width: 100px;
     height: 100px;
     top: 20%;
     left: 10%;
     animation: rotateShape 15s linear infinite;
 }

 .shape-triangle {
     width: 0;
     height: 0;
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-bottom: 86.6px solid var(--border-color);
     background: transparent;
     border-top: none;
     top: 60%;
     right: 15%;
     animation: rotateShape 20s linear infinite reverse;
 }

 .shape-circle {
     width: 150px;
     height: 150px;
     border-radius: 50%;
     top: 30%;
     right: 30%;
     border: 2px dashed var(--primary-color);
     animation: rotateShape 25s linear infinite;
 }

 @keyframes rotateShape {
     from {
         transform: rotate(0deg);
     }

     to {
         transform: rotate(360deg);
     }
 }

 /* === Help Center Accordion === */
 .help-accordion {
     display: flex;
     flex-direction: column;
     gap: 15px;
 }

 .help-item {
     background: var(--card-bg);
     border-radius: 10px;
     overflow: hidden;
     transition: var(--transition);
     border: 1px solid transparent;
 }

 .help-item.active {
     border-color: var(--primary-color);
     background: var(--bg-secondary);
 }

 .help-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 20px;
     cursor: pointer;
     font-weight: 500;
 }

 .help-arrow {
     transition: transform 0.3s;
     font-size: 0.8rem;
     opacity: 0.7;
 }

 .help-item.active .help-arrow {
     transform: rotate(90deg);
     color: var(--primary-color);
     opacity: 1;
 }

 .help-content {
     display: none;
     padding: 0 20px 20px 20px;
     animation: slideDown 0.3s ease-out;
 }

 .help-item.active .help-content {
     display: block;
 }

 .faq-item i.fa-plus {
     transition: transform 0.3s ease;
 }

 .faq-item.active i.fa-plus,
 .faq-item.active i.fa-chevron-down {
     transform: rotate(180deg);
     /* Standard rotation for open state */
     color: var(--primary-color);
 }

 .faq-item.active i.fa-plus {
     transform: rotate(45deg);
     /* Specific for plus to x */
 }

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

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

 /* === INTERACTIVE MOCKUP CHARTS === */

 /* General Chart Container */
 .mockup-chart-container {
     background: var(--card-bg);
     border: 1px solid var(--border-color);
     border-radius: 16px;
     padding: 30px 30px 50px 30px;
     position: relative;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
 }

 .chart-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 20px;
 }

 .chart-controls button {
     background: transparent;
     border: 1px solid var(--border-color);
     color: var(--text-muted);
     padding: 5px 10px;
     border-radius: 5px;
     cursor: pointer;
     font-size: 0.8rem;
     transition: 0.3s;
 }

 .chart-controls button.active,
 .chart-controls button:hover {
     background: var(--primary-color);
     color: black;
     border-color: var(--primary-color);
 }

 /* 1. Interactive Bar Chart */
 .bar-chart-wrap {
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     height: 200px;
     padding-top: 30px;
     /* Space for tooltips */
     gap: 10px;
 }

 .interactive-bar {
     flex: 1;
     background: rgba(128, 128, 128, 0.2);
     border-radius: 4px;
     position: relative;
     transition: height 0.5s ease;
     cursor: pointer;
     min-width: 20px;
 }

 .interactive-bar:hover {
     background: var(--primary-color);
     box-shadow: 0 0 10px var(--primary-glow);
 }

 .bar-tooltip {
     position: absolute;
     top: -30px;
     left: 50%;
     transform: translateX(-50%);
     background: #000;
     color: #fff;
     padding: 4px 8px;
     border-radius: 4px;
     font-size: 0.75rem;
     white-space: nowrap;
     opacity: 0;
     pointer-events: none;
     transition: 0.3s;
     z-index: 10;
 }

 .interactive-bar:hover .bar-tooltip {
     opacity: 1;
     top: -40px;
 }

 .bar-label {
     margin-top: 10px;
     text-align: center;
     font-size: 0.8rem;
     color: var(--text-muted);
     position: absolute;
     bottom: -35px;
     width: 100%;
 }

 /* 2. Donut Chart */
 .donut-chart-wrap {
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
     height: 250px;
 }

 .donut-circle {
     width: 180px;
     height: 180px;
     border-radius: 50%;
     background: conic-gradient(var(--primary-color) 0% 35%,
             var(--accent-color) 35% 65%,
             var(--text-muted) 65% 100%);
     position: relative;
     transition: transform 0.3s;
 }

 .donut-inner {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 120px;
     height: 120px;
     background: var(--card-bg);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     z-index: 2;
     padding-right: 20px;
     /* Fix text touching edge */
 }

 /* Mobile wrap fix for Latest Arrivals header */
 @media (max-width: 1100px) {
     .mobile-wrap-header {
         flex-wrap: wrap;
         gap: 20px;
         align-items: flex-start !important;
     }

     .mobile-wrap-header .btn {
         margin-left: 0;
         width: 100%;
         /* Optional: full width button on mobile */
     }
 }

 .donut-legend {
     display: flex;
     justify-content: center;
     gap: 15px;
     margin-top: 20px;
     flex-wrap: wrap;
 }

 .legend-item {
     display: flex;
     align-items: center;
     font-size: 0.8rem;
     color: var(--text-muted);
 }

 .legend-dot {
     width: 10px;
     height: 10px;
     border-radius: 50%;
     margin-right: 8px;
 }

 /* 3. SVG Line Chart */
 .line-chart-svg {
     width: 100%;
     height: 200px;
     overflow: visible;
 }

 .chart-line-path {
     fill: none;
     stroke: var(--primary-color);
     stroke-width: 3;
     stroke-linecap: round;
     stroke-linejoin: round;
     filter: drop-shadow(0 0 5px var(--primary-glow));
     stroke-dasharray: 1000;
     stroke-dashoffset: 1000;
     animation: dash 2s ease-out forwards;
 }

 .chart-point {
     fill: var(--bg-color);
     stroke: var(--primary-color);
     stroke-width: 2;
     r: 4;
     transition: all 0.3s;
     cursor: pointer;
 }

 .chart-point:hover {
     r: 6;
     fill: var(--primary-color);
     stroke: white;
 }

 @keyframes dash {
     to {
         stroke-dashoffset: 0;
     }
 }

 /* RTL Overrides for Charts */
 [dir="rtl"] .bar-tooltip {
     /* TranslateX works regardless of RTL if using % but lets verify logic */
     transform: translateX(50%);
     /* Flip logic for RTL? No, left:50% still centers. translateX(-50%) moves left. RTL might need adjustment. */
 }

 /* Actually typically transform logic stays same for left:50%. But let's check text alignment */

 [dir="rtl"] .chart-header {
     flex-direction: row;
     /* Flex direction handles it, but alignment might need help */
 }

 /* Responsive Charts */
 @media (max-width: 600px) {
     .bar-chart-wrap {
         gap: 5px;
     }

     .bar-label {
         font-size: 0.6rem;
     }

     .donut-circle {
         width: 150px;
         height: 150px;
     }

     .donut-inner {
         width: 100px;
         height: 100px;
     }

 }

 /* === STATS GRID STYLING === */
 .stats-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
     margin-bottom: 30px;
 }

 .stat-card {
     background: var(--card-bg);
     border: 1px solid var(--border-color);
     border-radius: 16px;
     padding: 20px;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     overflow: hidden;
 }

 .stat-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
     opacity: 0;
     transition: opacity 0.3s;
 }

 .stat-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
     border-color: var(--primary-color);
 }

 .stat-card:hover::before {
     opacity: 1;
 }

 @media (max-width: 1200px) {
     .stats-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (max-width: 600px) {
     .stats-grid {
         grid-template-columns: 1fr;
     }
 }

 /* === DASHBOARD LAYOUT UPDATES === */
 /* === DASHBOARD LAYOUT & SIDEBAR REDESIGN === */
 .dashboard-layout {
     display: flex;
     flex-direction: row;
     /* Explicitly set row */
     flex-wrap: nowrap;
     /* Prevent wrapping implies side-by-side */
     min-height: 100vh;
 }

 .dashboard-main {
     flex: 1;
     /* Grow to fill remaining space */
     width: 100%;
     /* Full width of container */
     margin-left: 280px;
     /* Push content right to accommodate fixed sidebar */
     padding: 30px;
     overflow-x: hidden;
     /* Handle internal overflow primarily */
 }

 .sidebar {
     width: 280px;
     background: var(--card-bg);
     border-right: 1px solid var(--border-color);
     position: fixed;
     /* Fixed stability requested */
     left: 0;
     top: 60px;
     /* Exact height of fixed header */
     height: calc(100vh - 60px);
     /* Fill remaining viewport height */
     overflow-y: auto;
     /* Scroll inside sidebar if too tall */
     flex-shrink: 0;
     transition: all 0.3s ease;
     padding: 30px 20px;
     box-shadow: 2px 0 20px rgba(0, 0, 0, 0.03);
     z-index: 90;
 }

 .dashboard-footer {
     margin-left: 280px;
     transition: margin-left 0.3s ease;
 }

 @media (max-width: 900px) {
     .dashboard-footer {
         margin-left: 0;
     }
 }

 /* Scrollbar refinement for sidebar */
 .sidebar::-webkit-scrollbar {
     width: 5px;
 }

 .sidebar::-webkit-scrollbar-thumb {
     background: var(--border-color);
     border-radius: 10px;
 }

 .sidebar h3 {
     font-size: 0.9rem;
     text-transform: uppercase;
     letter-spacing: 1.5px;
     color: var(--text-muted);
     margin-bottom: 25px;
     padding-left: 15px;
     font-weight: 700;
 }

 .sidebar-menu {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .sidebar-menu li {
     margin-bottom: 10px;
 }

 .sidebar-menu li a {
     display: flex;
     align-items: center;
     padding: 14px 20px;
     color: var(--text-color);
     text-decoration: none;
     border-radius: 12px;
     font-weight: 500;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     overflow: hidden;
 }

 .sidebar-menu li a i {
     width: 25px;
     margin-right: 15px;
     font-size: 1.1rem;
     transition: 0.3s;
     opacity: 0.7;
 }

 .sidebar-menu li a:hover {
     background: var(--bg-secondary);
     color: var(--primary-color);
     transform: translateX(5px);
 }

 .sidebar-menu li a:hover i {
     color: var(--primary-color);
     opacity: 1;
 }

 .sidebar-menu li a.active {
     background: var(--primary-color);
     color: #fff;
     /* Force white text for active item contrast */
     box-shadow: 0 4px 15px var(--primary-glow);
 }

 .sidebar-menu li a.logout-link {
     margin-top: 30px;
     border: 1px solid var(--border-color);
     color: var(--accent-color);
 }

 .sidebar-menu li a.logout-link:hover {
     background: var(--accent-color);
     color: #fff;
     border-color: var(--accent-color);
 }

 .sidebar-menu li a.active i {
     color: #fff;
     opacity: 1;
 }

 /* Dashboard Sections */
 .dashboard-section {
     display: none;
     animation: fadeInSlide 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
 }

 .dashboard-section.active {
     display: block;
 }

 @keyframes fadeInSlide {
     from {
         opacity: 0;
         transform: translateY(20px);
     }

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

 /* Responsive Dashboard */
 @media (max-width: 900px) {
     .dashboard-layout {
         flex-direction: column;
         padding-top: 0;
     }

     .sidebar {
         display: flex !important;
         width: 100%;
         height: auto;
         position: relative;
         /* Not sticky on mobile to scroll with page */
         top: 0;
         border-right: none;
         border-bottom: 1px solid var(--border-color);
         padding: 20px;
         overflow-x: auto;
         /* allow horiz scroll for quick menu if needed */
         display: flex;
         flex-direction: column;
     }

     .dashboard-main {
         margin-left: 0;
         width: 100%;
         padding: 20px;
     }

     .sidebar h3 {
         display: none;
         /* Save space on mobile */
     }

     .sidebar-menu {
         display: flex;
         gap: 10px;
         overflow-x: auto;
         padding-bottom: 5px;
     }

     .sidebar-menu li {
         margin-bottom: 0;
         min-width: fit-content;
     }

     .sidebar-menu li a {
         padding: 10px 15px;
         font-size: 0.9rem;
         background: var(--bg-secondary);
     }

     .sidebar-menu li a:hover {
         transform: none;
     }
 }

 /* === RTL DASHBOARD SUPPORT === */
 [dir="rtl"] .dashboard-layout {
     flex-direction: row-reverse;
 }

 [dir="rtl"] .sidebar {
     border-right: none;
     border-left: 1px solid var(--border-color);
 }

 [dir="rtl"] .sidebar h3 {
     padding-left: 0;
     padding-right: 15px;
 }

 [dir="rtl"] .sidebar-menu li a {
     flex-direction: row;
 }

 [dir="rtl"] .sidebar-menu li a i {
     margin-right: 0;
     margin-left: 15px;
 }

 [dir="rtl"] .sidebar-menu li a:hover {
     transform: translateX(-5px);
 }

 /* === ENHANCED DASHBOARD RTL SUPPORT === */
 [dir="rtl"] .chart-header {
     flex-direction: row;
 }

 [dir="rtl"] .legend-dot {
     margin-right: 0;
     margin-left: 8px;
 }

 [dir="rtl"] .product-card div[style*="margin-left: auto"] {
     margin-left: 0 !important;
     margin-right: auto !important;
 }

 /* Flip chart controls border radius */
 [dir="rtl"] .chart-controls button:first-child {
     border-radius: 0 5px 5px 0;
 }

 [dir="rtl"] .chart-controls button:last-child {
     border-radius: 5px 0 0 5px;
 }

 /* Mobile Centering for Dashboard Charts */
 @media (max-width: 600px) {

     .dashboard-section .stats-grid,
     .dashboard-section div[style*="display: grid"] {
         display: flex !important;
         flex-direction: column;
         width: 100%;
     }

     .chart-header {
         flex-direction: column;
         gap: 15px;
         align-items: flex-start;
         width: 100%;
     }

     .mockup-chart-container,
     .product-card,
     .dashboard-section .stats-grid .stat-card {
         width: 100%;
         max-width: 100%;
         margin-left: 0;
         margin-right: 0;
     }

     /* Chart Overflow Fixes */
     .mockup-chart-container {
         padding: 15px !important;
         /* Reduce padding to give content space */
     }

     .interactive-bar {
         min-width: 8px !important;
         /* Allow shrinking */
     }

     .bar-chart-wrap {
         gap: 2px !important;
         /* Tighter gaps */
         padding-right: 5px;
         /* Safety buffer */
     }

     /* Personal Bests Grid: 2 columns on mobile instead of 4 squished ones */
     .personal-bests-grid {
         grid-template-columns: repeat(2, 1fr) !important;
         gap: 15px;
     }

     /* System Health Grid: 1 column on mobile (Admin Dashboard) */
     .system-health-grid {
         grid-template-columns: 1fr !important;
     }

     /* Stack Header Items on Mobile (Title vs Button) */
     .dashboard-header-flex {
         flex-direction: column;
         align-items: flex-start;
         gap: 15px;
     }
 }

 /* Base style for Personal Bests Grid (Desktop) */
 .personal-bests-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 20px;
 }

 /* Base style for System Health Grid (Desktop) */
 .system-health-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
 }

 /* Base style for Dashboard Header Flex (Desktop) */
 .dashboard-header-flex {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 30px;
 }

 /* RTL Responsive */
 @media (max-width: 900px) {
     [dir="rtl"] .dashboard-layout {
         flex-direction: column;
     }

     [dir="rtl"] .sidebar {
         border-left: none;
         border-bottom: 1px solid var(--border-color);
     }
 }

 /* === ABOUT PAGE GRID === */
 .about-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 50px;
     align-items: center;
 }

 .about-img {
     border-radius: 20px;
     height: 500px;
     width: 100%;
     object-fit: cover;
     box-shadow: var(--shadow);
 }

 @media (max-width: 900px) {
     .about-grid {
         grid-template-columns: 1fr;
         gap: 30px;
     }

     .about-img {
         height: auto;
         max-height: 400px;
         width: 100%;
     }
 }

 /* Mobile Touch Glow for RTL Toggle */
 @media (max-width: 768px) {

     /* Prevent sticky hover on mobile */
     .rtl-toggle:hover {
         color: var(--text-color);
         transform: none;
         box-shadow: none;
     }

     /* Only glow on active interaction (press) */
     .rtl-toggle:active {
         color: var(--primary-color);
         text-shadow: 0 0 15px var(--primary-color), 0 0 30px var(--primary-glow);
         transform: scale(0.95);
     }
 }

 /* ========================================
   AUTHENTICATION PAGES (Login & Register)
   ======================================== */

 /* Auth Container - Full page wrapper */
 .auth-container {
     min-height: calc(100vh - 80px);
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 40px 20px;
     position: relative;
     overflow: hidden;
     /* Background set by theme-specific rules below */
 }

 /* Decorative background elements */
 .auth-container::before {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: radial-gradient(circle, rgba(212, 240, 0, 0.03) 0%, transparent 50%);
     animation: authGlow 15s ease-in-out infinite;
     pointer-events: none;
 }

 .auth-container::after {
     content: '';
     position: absolute;
     bottom: -30%;
     right: -30%;
     width: 60%;
     height: 60%;
     background: radial-gradient(circle, rgba(85, 139, 0, 0.08) 0%, transparent 60%);
     pointer-events: none;
 }

 @keyframes authGlow {

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

     50% {
         transform: translate(5%, 5%) rotate(180deg);
     }
 }

 /* Auth Box - The form container */
 .auth-box {
     background: rgba(30, 30, 40, 0.85);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 24px;
     padding: 50px 40px;
     width: 100%;
     max-width: 450px;
     position: relative;
     z-index: 2;
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
 }

 .auth-box h2 {
     color: #ffffff;
     font-size: 2rem;
     font-weight: 800;
     margin-bottom: 30px;
     text-align: center;
     letter-spacing: 1px;
 }

 /* Auth Input Fields */
 .auth-box .auth-input,
 .auth-container .auth-input {
     width: 100%;
     padding: 15px 18px;
     margin-bottom: 20px;
     background: rgba(255, 255, 255, 0.08);
     border: 1px solid rgba(255, 255, 255, 0.15);
     border-radius: 12px;
     color: #ffffff;
     font-size: 1rem;
     outline: none;
     transition: all 0.3s ease;
 }

 .auth-box .auth-input:focus,
 .auth-container .auth-input:focus {
     border-color: var(--primary-color);
     background: rgba(255, 255, 255, 0.12);
     box-shadow: 0 0 0 3px rgba(212, 240, 0, 0.15);
 }

 .auth-box .auth-input::placeholder,
 .auth-container .auth-input::placeholder {
     color: rgba(255, 255, 255, 0.5);
 }

 /* Auth form labels and text */
 .auth-box label,
 .auth-container label {
     color: rgba(255, 255, 255, 0.85);
 }

 /* Light theme auth overrides */
 body:not([data-theme="dark"]) .auth-box {
     background: #ffffff;
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
     border: 1px solid #eee;
 }

 body:not([data-theme="dark"]) .auth-box p,
 body:not([data-theme="dark"]) .auth-container p {
     color: #666;
 }

 body:not([data-theme="dark"]) .auth-container {
     background-color: #f4f7f6;
     background-image:
         linear-gradient(rgba(106, 176, 0, 0.03) 1px, transparent 1px),
         linear-gradient(90deg, rgba(106, 176, 0, 0.03) 1px, transparent 1px);
     background-size: 20px 20px;
 }

 /* Common Auth Item styling */
 .auth-box .auth-input {
     border-radius: 12px;
     padding: 14px 18px;
     font-size: 0.95rem;
 }

 .auth-box a,
 .auth-container a:not(.btn) {
     color: var(--primary-color);
     font-weight: 600;
 }

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


 /* Auth Button */
 .auth-box .btn {
     background: var(--primary-color);
     color: #000000;
     font-weight: 700;
     padding: 15px 30px;
     border-radius: 12px;
     font-size: 1rem;
     text-transform: uppercase;
     letter-spacing: 1px;
     transition: all 0.3s ease;
     border: none;
     cursor: pointer;
 }

 .auth-box .btn:hover {
     transform: translateY(-3px);
     box-shadow: 0 10px 30px rgba(212, 240, 0, 0.3);
 }

 /* Checkbox styling */
 .auth-box input[type="checkbox"] {
     width: auto;
     margin-right: 8px;
     accent-color: var(--primary-color);
 }

 /* Register page specific - Different background */
 .auth-container[style*="gym-bg2"] {
     background: none !important;
 }

 /* Register page specific - distinct from login page
    Background and decorative elements set by theme-specific rules below */

 /* ========================================
   LIGHT/DAY THEME - Auth Pages
   ======================================== */

 /* Light theme - Login page background */
 body:not([data-theme="dark"]) .auth-container {
     background-color: #f8fafc;
     background-image: linear-gradient(rgba(106, 176, 0, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(106, 176, 0, 0.05) 1px, transparent 1px);
     background-size: 30px 30px;
 }

 body:not([data-theme="dark"]) .auth-container::before {
     background: radial-gradient(circle, rgba(106, 176, 0, 0.05) 0%, transparent 50%);
 }

 body:not([data-theme="dark"]) .auth-container::after {
     background: radial-gradient(circle, rgba(106, 176, 0, 0.08) 0%, transparent 60%);
 }

 /* Light theme - Register page background */
 body:not([data-theme="dark"]) .auth-container.register-bg {}

 body:not([data-theme="dark"]) .auth-container.register-bg::before {
     background: radial-gradient(circle, rgba(156, 39, 176, 0.08) 0%, transparent 50%);
 }

 body:not([data-theme="dark"]) .auth-container.register-bg::after {
     background: radial-gradient(circle, rgba(186, 104, 200, 0.1) 0%, transparent 60%);
 }

 /* Light theme - Auth box styling */
 body:not([data-theme="dark"]) .auth-box {
     background: rgba(255, 255, 255, 0.92);
     border: 1px solid rgba(0, 0, 0, 0.1);
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
 }

 body:not([data-theme="dark"]) .auth-box h2 {
     color: #1a1a1a;
 }

 /* Light theme - Input fields */
 body:not([data-theme="dark"]) .auth-box .auth-input,
 body:not([data-theme="dark"]) .auth-container .auth-input {
     background: rgba(0, 0, 0, 0.05);
     border: 1px solid rgba(0, 0, 0, 0.15);
     color: #1a1a1a;
 }

 body:not([data-theme="dark"]) .auth-box .auth-input:focus,
 body:not([data-theme="dark"]) .auth-container .auth-input:focus {
     border-color: var(--primary-color);
     background: rgba(0, 0, 0, 0.08);
     box-shadow: 0 0 0 3px rgba(85, 139, 0, 0.15);
 }

 body:not([data-theme="dark"]) .auth-box .auth-input::placeholder,
 body:not([data-theme="dark"]) .auth-container .auth-input::placeholder {
     color: rgba(0, 0, 0, 0.5);
 }

 /* Light theme - Labels and text */
 body:not([data-theme="dark"]) .auth-box label,
 body:not([data-theme="dark"]) .auth-container label {
     color: rgba(0, 0, 0, 0.85);
 }

 body:not([data-theme="dark"]) .auth-box p,
 body:not([data-theme="dark"]) .auth-container p {
     color: rgba(0, 0, 0, 0.7);
 }

 /* Light theme - Links */
 body:not([data-theme="dark"]) .auth-box a:not(.btn),
 body:not([data-theme="dark"]) .auth-container a:not(.btn) {
     color: #2e7d32;
 }

 body:not([data-theme="dark"]) .auth-box a:not(.btn):hover,
 body:not([data-theme="dark"]) .auth-container a:not(.btn):hover {
     color: #1b5e20;
 }

 /* ========================================
   DARK/NIGHT THEME - Auth Pages (Override)
   ======================================== */

 body[data-theme="dark"] .auth-container {
     background: radial-gradient(circle at center, rgba(106, 176, 0, 0.08) 0%, #000 100%);
 }

 body[data-theme="dark"] .auth-container::before {
     background: radial-gradient(circle, rgba(212, 240, 0, 0.03) 0%, transparent 50%);
 }

 body[data-theme="dark"] .auth-container::after {
     background: radial-gradient(circle, rgba(85, 139, 0, 0.08) 0%, transparent 60%);
 }

 body[data-theme="dark"] .auth-container.register-bg {
     background: radial-gradient(circle at center, rgba(170, 0, 255, 0.05) 0%, #000 100%);
 }

 body[data-theme="dark"] .auth-container.register-bg::before {
     background: radial-gradient(circle, rgba(180, 0, 180, 0.05) 0%, transparent 50%);
 }

 body[data-theme="dark"] .auth-container.register-bg::after {
     background: radial-gradient(circle, rgba(120, 0, 200, 0.1) 0%, transparent 60%);
 }

 body[data-theme="dark"] .auth-box {
     background: rgba(30, 30, 40, 0.85);
     border: 1px solid rgba(255, 255, 255, 0.1);
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
 }

 body[data-theme="dark"] .auth-box h2 {
     color: #ffffff;
 }

 body[data-theme="dark"] .auth-box .auth-input,
 body[data-theme="dark"] .auth-container .auth-input {
     background: rgba(255, 255, 255, 0.08);
     border: 1px solid rgba(255, 255, 255, 0.15);
     color: #ffffff;
 }

 body[data-theme="dark"] .auth-box .auth-input:focus,
 body[data-theme="dark"] .auth-container .auth-input:focus {
     border-color: var(--primary-color);
     background: rgba(255, 255, 255, 0.12);
     box-shadow: 0 0 0 3px rgba(212, 240, 0, 0.15);
 }

 body[data-theme="dark"] .auth-box .auth-input::placeholder,
 body[data-theme="dark"] .auth-container .auth-input::placeholder {
     color: rgba(255, 255, 255, 0.5);
 }

 body[data-theme="dark"] .auth-box label,
 body[data-theme="dark"] .auth-container label {
     color: rgba(255, 255, 255, 0.85);
 }

 body[data-theme="dark"] .auth-box p,
 body[data-theme="dark"] .auth-container p {
     color: rgba(255, 255, 255, 0.75);
 }

 body[data-theme="dark"] .auth-box a:not(.btn),
 body[data-theme="dark"] .auth-container a:not(.btn) {
     color: var(--primary-color);
 }

 body[data-theme="dark"] .auth-box a:not(.btn):hover,
 body[data-theme="dark"] .auth-container a:not(.btn):hover {
     color: #D4F000;
 }

 /* Mobile responsive */
 @media (max-width: 576px) {
     .auth-box {
         padding: 35px 25px;
         margin: 20px;
         border-radius: 20px;
     }

     .auth-box h2 {
         font-size: 1.6rem;
     }

     .auth-container {
         padding: 20px 15px;
     }
 }

 /* Social Login Styles */
 .auth-divider {
     display: flex;
     align-items: center;
     text-align: center;
     margin: 25px 0;
     color: var(--text-muted);
     font-size: 0.85rem;
     font-weight: 600;
 }

 .auth-divider::before,
 .auth-divider::after {
     content: '';
     flex: 1;
     border-bottom: 1px solid var(--border-color);
 }

 .auth-divider span {
     padding: 0 15px;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 .social-auth {
     display: flex;
     flex-direction: column;
     gap: 15px;
 }

 .social-btn {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 12px;
     padding: 14px;
     border-radius: 12px;
     border: 1px solid var(--border-color);
     background: var(--card-bg);
     color: var(--text-color);
     font-weight: 600;
     font-size: 0.95rem;
     cursor: pointer;
     transition: var(--transition);
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
 }

 .social-btn:hover {
     background: var(--bg-secondary);
     border-color: var(--primary-color);
     transform: translateY(-2px);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }

 .social-btn img {
     width: 20px;
     height: 20px;
 }

 .social-btn.facebook i {
     color: #1877f2;
     font-size: 1.2rem;
 }

 body[data-theme="dark"] .social-btn {
     background: rgba(255, 255, 255, 0.05);
     border-color: rgba(255, 255, 255, 0.1);
     color: white;
 }

 body[data-theme="dark"] .social-btn:hover {
     background: rgba(255, 255, 255, 0.1);
     border-color: var(--primary-color);
 }

 .minimal-header {
     position: sticky;
     top: 0;
     background: var(--bg-color);
     border-bottom: 1px solid var(--border-color);
     padding: 10px 20px;
     z-index: 1001;
     display: flex;
     align-items: center;
     justify-content: space-between;
     transition: var(--transition);
 }

 .auth-header {
     position: fixed;
     width: 100%;
     top: 0;
     left: 0;
     background: transparent;
     border: none;
     padding: 20px;
     z-index: 1001;
     display: flex;
     align-items: center;
     justify-content: space-between;
     pointer-events: none;
 }

 .auth-header * {
     pointer-events: auto;
 }

 /* Sportive Auth Enhancements */
 .auth-box {
     position: relative;
     overflow: hidden;
     border: 1px solid var(--border-color);
 }

 .auth-box::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 4px;
     background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
 }

 .auth-box h2 {
     font-family: var(--font-heading);
     letter-spacing: -0.5px;
     text-transform: uppercase;
     font-weight: 900;
 }


 .auth-container {
     position: relative;
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     background-size: cover !important;
     background-position: center !important;
     transition: var(--transition);
 }

 body[data-theme='dark'] .auth-container {
     background: radial-gradient(circle at center, rgba(106, 176, 0, 0.08) 0%, #000 100%);
 }

 body[data-theme='dark'] .auth-box {
     background: rgba(16, 16, 16, 0.85);
     backdrop-filter: blur(10px);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
 }

 .auth-container::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('https://www.transparenttextures.com/patterns/carbon-fibre.png');
     opacity: 0.05;
     pointer-events: none;
     z-index: 0;
 }

 body[data-theme='dark'] .auth-container::after {
     opacity: 0.15;
 }

 .auth-box {
     z-index: 1;
 }

 @media (max-width: 1100px) {

     .minimal-header .logo,
     .auth-header .logo {
         font-size: 1.2rem;
     }

     .auth-header {
         padding: 15px;
     }
 }

 /* About Page Centering */
 .about-page section h1,
 .about-page section h2,
 .about-page section h3 {
     text-align: center;
 }

 .about-page .about-grid div {
     text-align: center;
 }