Premium Features Showcase Section============================================*/

   /* Decor text for features section */
   .decor-text-features {
       top: 10%;
       right: -5%;
       font-size: 14vw;
       opacity: 0.5;
       -webkit-text-stroke: 2px rgba(92, 35, 217, 0.15);
       transform: rotate(5deg);
       animation: floatBigTextRight 22s ease-in-out infinite;
   }

   /* Feature Showcase Grid */
   .features-showcase-grid {
       display: grid;
       grid-template-columns: repeat(1, 1fr);
       gap: var(--space-6);
   }

   @media (min-width: 640px) {
       .features-showcase-grid {
           grid-template-columns: repeat(2, 1fr);
       }
   }

   @media (min-width: 1024px) {
       .features-showcase-grid {
           grid-template-columns: repeat(3, 1fr);
       }
   }

   /* Feature Showcase Card */
   .feature-showcase-card {
       position: relative;
       background: var(--bg-glass);
       border: 1px solid var(--border-subtle);
       border-radius: var(--radius-2xl);
       padding: var(--space-8);
       text-align: center;
       transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
       overflow: hidden;
   }

   .feature-showcase-card::before {
       content: '';
       position: absolute;
       inset: 0;
       background: var(--gradient-primary);
       opacity: 0;
       transition: opacity 0.4s ease;
       z-index: 0;
   }

   .feature-showcase-card:hover {
       transform: translateY(-8px);
       border-color: var(--accent-primary);
       box-shadow: 0 20px 40px -10px rgba(92, 35, 217, 0.3);
   }

   .feature-showcase-card:hover::before {
       opacity: 0.05;
   }

   .feature-showcase-icon {
       position: relative;
       z-index: 1;
       width: 72px;
       height: 72px;
       margin: 0 auto var(--space-5);
       display: flex;
       align-items: center;
       justify-content: center;
       background: var(--gradient-primary);
       border-radius: var(--radius-xl);
       box-shadow: var(--glow-primary);
       transition: transform 0.3s ease;
   }

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

   .feature-showcase-icon svg {
       color: white;
   }

   .feature-showcase-title {
       position: relative;
       z-index: 1;
       font-family: var(--font-display);
       font-size: var(--text-lg);
       font-weight: var(--font-semibold);
       margin-bottom: var(--space-2);
   }

   .feature-showcase-desc {
       position: relative;
       z-index: 1;
       color: var(--text-secondary);
       font-size: var(--text-sm);
       margin-bottom: var(--space-5);
       line-height: var(--leading-relaxed);
   }

   .feature-demo-btn {
       position: relative;
       z-index: 1;
   }

   .feature-coming-soon {
       opacity: 0.5;
       cursor: not-allowed;
   }

   /* ============================================
   Feature Modal Overlay
   ============================================ */

   .feature-modal-overlay {
       position: fixed;
       inset: 0;
       background: rgba(10, 10, 10, 0.95);
       backdrop-filter: blur(10px);
       -webkit-backdrop-filter: blur(10px);
       z-index: 9999;
       display: flex;
       align-items: center;
       justify-content: center;
       padding: var(--space-6);
       opacity: 0;
       visibility: hidden;
       transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   }

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

   .feature-modal {
       position: relative;
       background: var(--bg-secondary);
       border: 1px solid var(--border-subtle);
       border-radius: var(--radius-2xl);
       width: 100%;
       max-width: 900px;
       max-height: 90vh;
       overflow-y: auto;
       padding: var(--space-8);
       transform: scale(0.9) translateY(20px);
       transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   }

   .feature-modal-overlay.active .feature-modal {
       transform: scale(1) translateY(0);
   }

   .feature-modal-close {
       position: absolute;
       top: var(--space-4);
       right: var(--space-4);
       width: 44px;
       height: 44px;
       display: flex;
       align-items: center;
       justify-content: center;
       background: var(--bg-glass);
       border: 1px solid var(--border-subtle);
       border-radius: var(--radius-full);
       color: var(--text-secondary);
       cursor: pointer;
       transition: all 0.3s ease;
       z-index: 10;
   }

   .feature-modal-close:hover {
       background: var(--accent-primary);
       color: white;
       border-color: var(--accent-primary);
   }

   .feature-modal-header {
       text-align: center;
       margin-bottom: var(--space-8);
       padding-right: var(--space-12);
   }

   .feature-modal-header h3 {
       font-family: var(--font-display);
       font-size: var(--text-2xl);
       font-weight: var(--font-bold);
       margin-bottom: var(--space-2);
       background: var(--gradient-primary);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
   }

   .feature-modal-header p {
       color: var(--text-secondary);
       font-size: var(--text-base);
   }

   /* ============================================
   Lightbox Demo Styles
   ============================================ */

   .lightbox-demo {
       position: relative;
   }

   .lightbox-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: var(--space-4);
   }

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

   .lightbox-thumb {
       aspect-ratio: 1/1;
       border-radius: var(--radius-lg);
       overflow: hidden;
       cursor: pointer;
       transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
       position: relative;
   }

   .lightbox-thumb::after {
       content: '';
       position: absolute;
       inset: 0;
       background: rgba(0, 0, 0, 0);
       transition: all 0.4s ease;
       pointer-events: none;
   }

   /* Effect 1: Rotate & Scale */
   .lightbox-thumb[data-index="0"]:hover {
       transform: scale(1.1) rotate(3deg);
       box-shadow: 0 15px 40px rgba(102, 126, 234, 0.5);
   }

   /* Effect 2: Skew & Glow */
   .lightbox-thumb[data-index="1"]:hover {
       transform: scale(1.05) skewX(-3deg);
       box-shadow: 0 0 50px rgba(240, 147, 251, 0.6);
   }

   /* Effect 3: Zoom In with Blur Border */
   .lightbox-thumb[data-index="2"]:hover {
       transform: scale(1.15);
       box-shadow: 0 0 0 4px rgba(79, 172, 254, 0.8), 0 20px 40px rgba(79, 172, 254, 0.4);
       border-radius: var(--radius-xl);
   }

   /* Effect 4: 3D Tilt Effect */
   .lightbox-thumb[data-index="3"]:hover {
       transform: perspective(500px) rotateY(-10deg) scale(1.05);
       box-shadow: 20px 10px 40px rgba(67, 233, 123, 0.4);
   }

   /* Effect 5: Bounce & Warm Glow */
   .lightbox-thumb[data-index="4"]:hover {
       transform: scale(1.08) translateY(-8px);
       box-shadow: 0 25px 50px rgba(250, 112, 154, 0.5);
       animation: bounceGlow 0.6s ease;
   }

   @keyframes bounceGlow {

       0%,
       100% {
           transform: scale(1.08) translateY(-8px);
       }

       50% {
           transform: scale(1.1) translateY(-12px);
       }
   }

   /* Effect 6: Ripple & Pulse */
   .lightbox-thumb[data-index="5"]:hover {
       transform: scale(1.05);
       box-shadow: 0 0 0 0 rgba(161, 140, 209, 0.7);
       animation: ripplePulse 1s ease infinite;
   }

   @keyframes ripplePulse {
       0% {
           box-shadow: 0 0 0 0 rgba(161, 140, 209, 0.7);
       }

       70% {
           box-shadow: 0 0 0 15px rgba(161, 140, 209, 0);
       }

       100% {
           box-shadow: 0 0 0 0 rgba(161, 140, 209, 0);
       }
   }

   /* Effect 7: Golden Flip 3D */
   .lightbox-thumb[data-index="6"]:hover {
       transform: perspective(600px) rotateX(10deg) scale(1.05);
       box-shadow: 0 20px 40px rgba(255, 193, 7, 0.4), 0 0 30px rgba(255, 193, 7, 0.2);
   }

   /* Effect 8: Neon Glow Cyan */
   .lightbox-thumb[data-index="7"]:hover {
       transform: scale(1.08);
       box-shadow:
           0 0 20px rgba(0, 255, 255, 0.5),
           0 0 40px rgba(0, 255, 255, 0.3),
           0 0 60px rgba(0, 255, 255, 0.2);
       animation: neonPulse 1.5s ease-in-out infinite alternate;
   }

   @keyframes neonPulse {
       from {
           box-shadow:
               0 0 20px rgba(0, 255, 255, 0.5),
               0 0 40px rgba(0, 255, 255, 0.3),
               0 0 60px rgba(0, 255, 255, 0.2);
       }

       to {
           box-shadow:
               0 0 30px rgba(0, 255, 255, 0.7),
               0 0 50px rgba(0, 255, 255, 0.5),
               0 0 80px rgba(0, 255, 255, 0.3);
       }
   }

   /* Effect 9: Magenta Spin Twist */
   .lightbox-thumb[data-index="8"]:hover {
       transform: scale(1.1) rotate(5deg);
       box-shadow:
           -10px 10px 30px rgba(255, 0, 150, 0.4),
           10px -10px 30px rgba(150, 0, 255, 0.4);
       animation: magentaTwist 0.8s ease;
   }

   @keyframes magentaTwist {
       0% {
           transform: scale(1) rotate(0deg);
       }

       50% {
           transform: scale(1.15) rotate(-3deg);
       }

       100% {
           transform: scale(1.1) rotate(5deg);
       }
   }

   /* Overlay text effect on hover */
   .lightbox-thumb:hover .lightbox-thumb-placeholder span {
       transform: scale(1.3);
       text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
   }

   .lightbox-thumb-placeholder {
       width: 100%;
       height: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: var(--text-3xl);
       font-weight: var(--font-bold);
       color: white;
       text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
       position: relative;
   }

   .lightbox-thumb-placeholder span {
       transition: all 0.4s ease;
   }

   /* Lightbox image style */
   .lightbox-thumb-img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: all 0.4s ease;
   }

   .lightbox-thumb:hover .lightbox-thumb-img {
       transform: scale(1.1);
   }

   /* Lightbox Fullscreen View */
   .lightbox-fullscreen {
       position: fixed;
       inset: 0;
       background: rgba(0, 0, 0, 0.98);
       z-index: 10000;
       display: flex;
       align-items: center;
       justify-content: center;
       opacity: 0;
       visibility: hidden;
       transition: all 0.3s ease;
   }

   .lightbox-fullscreen.active {
       opacity: 1;
       visibility: visible;
   }

   .lightbox-image-container {
       position: relative;
       width: 80%;
       max-width: 800px;
       aspect-ratio: 1/1;
   }

   .lightbox-image {
       width: 100%;
       height: 100%;
       border-radius: var(--radius-xl);
       transition: all 0.4s ease;
   }

   .lightbox-counter {
       position: absolute;
       bottom: -40px;
       left: 50%;
       transform: translateX(-50%);
       font-size: var(--text-sm);
       color: var(--text-muted);
   }

   .lightbox-nav {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       width: 56px;
       height: 56px;
       display: flex;
       align-items: center;
       justify-content: center;
       background: rgba(255, 255, 255, 0.1);
       border: 1px solid rgba(255, 255, 255, 0.2);
       border-radius: var(--radius-full);
       color: white;
       cursor: pointer;
       transition: all 0.3s ease;
   }

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

   .lightbox-prev {
       left: var(--space-6);
   }

   .lightbox-next {
       right: var(--space-6);
   }

   .lightbox-close {
       position: absolute;
       top: var(--space-6);
       right: var(--space-6);
       width: 48px;
       height: 48px;
       display: flex;
       align-items: center;
       justify-content: center;
       background: rgba(255, 255, 255, 0.1);
       border: 1px solid rgba(255, 255, 255, 0.2);
       border-radius: var(--radius-full);
       color: white;
       cursor: pointer;
       transition: all 0.3s ease;
   }

   .lightbox-close:hover {
       background: #ef4444;
       border-color: #ef4444;
   }

   @media (max-width: 768px) {
       .lightbox-nav {
           width: 44px;
           height: 44px;
       }

       .lightbox-prev {
           left: var(--space-2);
       }

       .lightbox-next {
           right: var(--space-2);
       }

       .lightbox-image-container {
           width: 95%;
       }
   }

   /* ============================================
   Scroll Animations Demo Styles
   ============================================ */

   .feature-modal-scroll {
       max-width: 700px;
       padding: 0;
       overflow: hidden;
   }

   .feature-modal-scroll .feature-modal-header {
       padding: var(--space-6);
       border-bottom: 1px solid var(--border-subtle);
       position: sticky;
       top: 0;
       background: var(--bg-secondary);
       z-index: 10;
   }

   .scroll-demo-container {
       max-height: 60vh;
       overflow-y: auto;
       scroll-behavior: smooth;
       position: relative;
   }

   .scroll-demo-section {
       min-height: 300px;
       display: flex;
       align-items: center;
       justify-content: center;
       padding: var(--space-8);
       position: relative;
   }

   .scroll-demo-intro {
       min-height: 200px;
   }

   .scroll-arrow-hint {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: var(--space-2);
       color: var(--text-muted);
       animation: bounceArrow 2s ease-in-out infinite;
   }

   @keyframes bounceArrow {

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

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

   .scroll-effect {
       text-align: center;
       width: 100%;
   }

   .scroll-effect-badge {
       display: inline-block;
       padding: var(--space-2) var(--space-4);
       background: var(--gradient-primary);
       border-radius: var(--radius-full);
       font-size: var(--text-xs);
       font-weight: var(--font-bold);
       text-transform: uppercase;
       letter-spacing: 0.1em;
       margin-bottom: var(--space-6);
       color: white;
   }

   .scroll-effect-box {
       width: 100px;
       height: 100px;
       border-radius: var(--radius-lg);
       display: inline-block;
       margin: var(--space-2);
   }

   /* Fade Effect */
   .scroll-box-1 {
       background: linear-gradient(135deg, #667eea, #764ba2);
   }

   .scroll-box-2 {
       background: linear-gradient(135deg, #f093fb, #f5576c);
   }

   .scroll-box-3 {
       background: linear-gradient(135deg, #4facfe, #00f2fe);
   }

   .scroll-fade .scroll-effect-box {
       opacity: 0;
       transform: translateY(30px);
       transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
   }

   .scroll-fade.scroll-visible .scroll-effect-box {
       opacity: 1;
       transform: translateY(0);
   }

   .scroll-fade .scroll-box-2 {
       transition-delay: 0.15s;
   }

   .scroll-fade .scroll-box-3 {
       transition-delay: 0.3s;
   }

   /* Slide Effect */
   .scroll-slide-left {
       width: 150px;
       height: 80px;
       background: linear-gradient(135deg, #43e97b, #38f9d7);
       transform: translateX(-100px);
       opacity: 0;
       transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
   }

   .scroll-slide-right {
       width: 150px;
       height: 80px;
       background: linear-gradient(135deg, #fa709a, #fee140);
       transform: translateX(100px);
       opacity: 0;
       transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
   }

   [data-scroll-effect="slide"].scroll-visible .scroll-slide-left,
   [data-scroll-effect="slide"].scroll-visible .scroll-slide-right {
       transform: translateX(0);
       opacity: 1;
   }

   /* Scale Effect */
   .scroll-scale {
       width: 120px;
       height: 120px;
       background: linear-gradient(135deg, #a18cd1, #fbc2eb);
       transform: scale(0);
       transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
   }

   [data-scroll-effect="scale"].scroll-visible .scroll-scale {
       transform: scale(1);
   }

   /* Rotate Effect */
   .scroll-rotate {
       width: 100px;
       height: 100px;
       background: linear-gradient(135deg, #ff6b6b, #feca57);
       transform: rotate(-180deg) scale(0);
       opacity: 0;
       transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
   }

   [data-scroll-effect="rotate"].scroll-visible .scroll-rotate {
       transform: rotate(0deg) scale(1);
       opacity: 1;
   }

   /* === NEW SCROLL ANIMATION STYLES === */

   /* Common Wrapper Style */
   .scroll-effect-wrapper {
       width: 100%;
       height: 100%;
       perspective: 1000px;
       /* Essential for 3D effects */
   }

   /* 4. Flip Effect */
   .scroll-flip-card {
       perspective: 1000px;
   }

   .scroll-flip-inner {
       position: relative;
       width: 100%;
       height: 100%;
       text-align: center;
       transition: transform 0.8s;
       transform-style: preserve-3d;
       transform: rotateY(180deg);
   }

   [data-scroll-effect="flip"].scroll-visible .scroll-flip-inner {
       transform: rotateY(0deg);
   }

   .scroll-flip-front,
   .scroll-flip-back {
       position: absolute;
       width: 100%;
       height: 100%;
       backface-visibility: hidden;
       border-radius: var(--radius-md);
       overflow: hidden;
   }

   .scroll-flip-back {
       background: var(--gradient-primary);
       transform: rotateY(180deg);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 2rem;
   }

   /* 5. Scale Up (Elastic) */
   [data-scroll-effect="scale"].scroll-visible .scroll-scale-img {
       transform: scale(1) !important;
   }

   /* 6. Blur Reveal */
   [data-scroll-effect="blur"].scroll-visible .scroll-blur-img {
       filter: blur(0px) !important;
   }

   /* 7. Rotate 3D */
   [data-scroll-effect="rotate"].scroll-visible .scroll-rotate-img {
       transform: perspective(500px) rotateY(0deg) !important;
   }

   /* 8. Skew Slide */
   [data-scroll-effect="skew"].scroll-visible .scroll-skew-img {
       transform: skewX(0deg) translateX(0) !important;
       opacity: 1 !important;
   }

   /* Data Viz Scroll Layout */
   .data-scroll-layout {
       display: flex;
       gap: var(--space-4);
       height: 100%;
       overflow: hidden;
       padding: var(--space-4);
   }

   .data-scroll-col {
       flex: 1;
       display: flex;
       flex-direction: column;
       gap: var(--space-4);
       /* will-change: transform; - Optimized in JS via loop */
   }

   /* Chart Mode Card Styles */
   .data-preview-card.chart-mode {
       background: rgba(30, 30, 30, 0.4);
       border: 1px solid rgba(255, 255, 255, 0.05);
       border-radius: var(--radius-lg);
       padding: var(--space-4);
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       height: 160px;
       /* Fixed height for loop calculation */
       backdrop-filter: blur(5px);
   }

   .data-card-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: var(--space-2);
   }

   .data-card-label {
       font-family: var(--font-display);
       font-weight: 600;
       font-size: 0.8rem;
       text-transform: uppercase;
   }

   .data-card-val-sm {
       font-family: var(--font-mono);
       font-size: 0.9rem;
       opacity: 0.8;
   }

   .data-card-viz {
       flex: 1;
       position: relative;
       display: flex;
       align-items: flex-end;
       overflow: hidden;
   }

   /* Mini Chart Components */
   .chart-viz-bar {
       display: flex;
       align-items: flex-end;
       justify-content: space-between;
       width: 100%;
       height: 100%;
       gap: 4px;
   }

   .chart-bar-col {
       flex: 1;
       border-radius: 2px 2px 0 0;
       transition: height 1s ease;
   }

   .chart-viz-donut {
       width: 100%;
       height: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
       position: relative;
   }

   .chart-viz-donut svg {
       width: 80px;
       height: 80px;
       transform: rotate(-90deg);
   }

   .chart-donut-stroke {
       stroke-dasharray: var(--donut-target);
       /* e.g. 70, 100 */
       transition: stroke-dasharray 1.5s ease-out;
   }

   .chart-viz-donut span {
       position: absolute;
       font-weight: bold;
       font-size: 1.2rem;
   }

   .chart-viz-line {
       width: 100%;
       height: 100%;
       display: flex;
       align-items: flex-end;
   }

   .chart-viz-line svg {
       width: 100%;
       height: 100%;
       overflow: visible;
   }

   /* Parallax Section */
   .scroll-parallax-section {
       min-height: 350px;
       position: relative;
       overflow: hidden;
   }

   .scroll-parallax-bg-img {
       position: absolute;
       top: -75%;
       left: 0;
       width: 100%;
       height: 250%;
       object-fit: cover;
       transition: transform 0.02s linear;
       will-change: transform;
   }

   .scroll-parallax-overlay {
       position: absolute;
       inset: 0;
       background: linear-gradient(135deg, rgba(10, 10, 10, 0.5), rgba(92, 35, 217, 0.3));
   }

   .scroll-parallax-content {
       position: relative;
       z-index: 2;
       text-align: center;
   }

   .scroll-parallax-text {
       font-family: var(--font-display);
       font-size: var(--text-5xl);
       font-weight: var(--font-black);
       color: white;
       text-shadow: 0 4px 30px rgba(92, 35, 217, 0.5);
       opacity: 0;
       transform: scale(0.5);
       transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
   }

   [data-scroll-effect="parallax"].scroll-visible .scroll-parallax-text {
       opacity: 1;
       transform: scale(1);
   }

   .scroll-parallax-subtitle {
       color: rgba(255, 255, 255, 0.7);
       font-size: var(--text-sm);
       margin-top: var(--space-2);
       opacity: 0;
       transform: translateY(10px);
       transition: all 0.6s ease 0.3s;
   }

   [data-scroll-effect="parallax"].scroll-visible .scroll-parallax-subtitle {
       opacity: 1;
       transform: translateY(0);
   }

   /* Stagger Grid */
   .scroll-stagger-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: var(--space-3);
       max-width: 300px;
       margin: 0 auto;
   }

   .scroll-stagger-item {
       width: 80px;
       height: 80px;
       border-radius: var(--radius-md);
       background: var(--gradient-primary);
       opacity: 0;
       transform: translateY(20px) scale(0.8);
       transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
   }

   [data-scroll-effect="stagger"].scroll-visible .scroll-stagger-item {
       opacity: 1;
       transform: translateY(0) scale(1);
   }

   [data-scroll-effect="stagger"].scroll-visible .scroll-stagger-item:nth-child(1) {
       transition-delay: 0s;
   }

   [data-scroll-effect="stagger"].scroll-visible .scroll-stagger-item:nth-child(2) {
       transition-delay: 0.1s;
   }

   [data-scroll-effect="stagger"].scroll-visible .scroll-stagger-item:nth-child(3) {
       transition-delay: 0.2s;
   }

   [data-scroll-effect="stagger"].scroll-visible .scroll-stagger-item:nth-child(4) {
       transition-delay: 0.3s;
   }

   [data-scroll-effect="stagger"].scroll-visible .scroll-stagger-item:nth-child(5) {
       transition-delay: 0.4s;
   }

   [data-scroll-effect="stagger"].scroll-visible .scroll-stagger-item:nth-child(6) {
       transition-delay: 0.5s;
   }

   /* Final Section */
   .scroll-demo-outro {
       min-height: 250px;
       background: linear-gradient(135deg, rgba(92, 35, 217, 0.1), rgba(16, 185, 129, 0.1));
   }

   .scroll-final {
       opacity: 0;
       transform: scale(0.8);
       transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
   }

   [data-scroll-effect="final"].scroll-visible {
       opacity: 1;
       transform: scale(1);
   }

   .scroll-final-text {
       font-size: var(--text-2xl);
       font-weight: var(--font-bold);
       margin-bottom: var(--space-6);
       background: var(--gradient-primary);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
   }

   .scroll-restart-btn {
       display: inline-flex;
       align-items: center;
       gap: var(--space-2);
   }

   .scroll-final-subtitle {
       color: var(--text-secondary);
       margin-bottom: var(--space-4);
   }

   /* ============================================
   Enhanced Scroll Effects - Images & New Effects
   ============================================ */

   /* Fade In Images */
   .scroll-fade-images {
       display: flex;
       gap: var(--space-4);
       justify-content: center;
       flex-wrap: wrap;
   }

   .scroll-fade-img {
       width: 120px;
       height: 120px;
       object-fit: cover;
       border-radius: var(--radius-lg);
       opacity: 0;
       transform: translateY(30px);
       transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
   }

   .scroll-fade.scroll-visible .scroll-fade-img {
       opacity: 1;
       transform: translateY(0);
   }

   .scroll-fade.scroll-visible .scroll-box-2 {
       transition-delay: 0.15s;
   }

   .scroll-fade.scroll-visible .scroll-box-3 {
       transition-delay: 0.3s;
   }

   /* Slide In Images */
   .scroll-slide-container {
       display: flex;
       gap: var(--space-6);
       justify-content: center;
   }

   .scroll-slide-img {
       width: 140px;
       height: 140px;
       object-fit: cover;
       border-radius: var(--radius-lg);
       opacity: 0;
       transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
   }

   .scroll-slide-img.scroll-slide-left {
       transform: translateX(-100px);
   }

   .scroll-slide-img.scroll-slide-right {
       transform: translateX(100px);
       transition-delay: 0.2s;
   }

   [data-scroll-effect="slide"].scroll-visible .scroll-slide-img {
       transform: translateX(0);
       opacity: 1;
   }

   /* Flip Card Effect */
   .scroll-flip-card {
       width: 180px;
       height: 180px;
       perspective: 1000px;
       margin: 0 auto;
   }

   .scroll-flip-inner {
       width: 100%;
       height: 100%;
       position: relative;
       transform-style: preserve-3d;
       transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
   }

   [data-scroll-effect="flip"].scroll-visible .scroll-flip-inner {
       transform: rotateY(180deg);
   }

   .scroll-flip-front,
   .scroll-flip-back {
       position: absolute;
       width: 100%;
       height: 100%;
       backface-visibility: hidden;
       border-radius: var(--radius-xl);
       overflow: hidden;
   }

   .scroll-flip-front {
       background: var(--bg-glass);
   }

   .scroll-flip-img {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }

   .scroll-flip-back {
       background: var(--gradient-primary);
       transform: rotateY(180deg);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: var(--text-xl);
       font-weight: var(--font-bold);
       color: white;
   }

   /* Blur Reveal Effect */
   .scroll-blur-container {
       width: 180px;
       height: 180px;
       margin: 0 auto;
       border-radius: var(--radius-xl);
       overflow: hidden;
   }

   .scroll-blur-img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       filter: blur(20px);
       transform: scale(1.2);
       opacity: 0.5;
       transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
   }

   [data-scroll-effect="blur"].scroll-visible .scroll-blur-img {
       filter: blur(0);
       transform: scale(1);
       opacity: 1;
   }

   /* Text Typing Effect */
   .scroll-typing-text {
       display: flex;
       gap: var(--space-2);
       justify-content: center;
       flex-wrap: wrap;
       font-size: var(--text-2xl);
       font-weight: var(--font-bold);
   }

   .scroll-word {
       opacity: 0;
       transform: translateY(20px);
       transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
   }

   .scroll-word-highlight {
       background: var(--gradient-primary);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
   }

   [data-scroll-effect="typing"].scroll-visible .scroll-word {
       opacity: 1;
       transform: translateY(0);
   }

   [data-scroll-effect="typing"].scroll-visible .scroll-word:nth-child(1) {
       transition-delay: 0s;
   }

   [data-scroll-effect="typing"].scroll-visible .scroll-word:nth-child(2) {
       transition-delay: 0.1s;
   }

   [data-scroll-effect="typing"].scroll-visible .scroll-word:nth-child(3) {
       transition-delay: 0.2s;
   }

   [data-scroll-effect="typing"].scroll-visible .scroll-word:nth-child(4) {
       transition-delay: 0.3s;
   }

   [data-scroll-effect="typing"].scroll-visible .scroll-word:nth-child(5) {
       transition-delay: 0.4s;
   }

   /* Extended Stagger Grid (9 items) */
   .scroll-stagger-grid {
       grid-template-columns: repeat(3, 1fr);
       max-width: 320px;
   }

   .scroll-stagger-item {
       width: 90px;
       height: 90px;
       object-fit: cover;
   }

   [data-scroll-effect="stagger"].scroll-visible .scroll-stagger-item:nth-child(7) {
       transition-delay: 0.6s;
   }

   [data-scroll-effect="stagger"].scroll-visible .scroll-stagger-item:nth-child(8) {
       transition-delay: 0.7s;
   }

   [data-scroll-effect="stagger"].scroll-visible .scroll-stagger-item:nth-child(9) {
       transition-delay: 0.8s;
   }

   /* ============================================
   Form Demo Styles
   ============================================ */

   .feature-modal-form {
       max-width: 600px;
   }

   .form-demo-container {
       padding: var(--space-4);
   }

   /* Steps Indicator */
   .form-steps-indicator {
       display: flex;
       align-items: center;
       justify-content: space-between;
       margin-bottom: var(--space-8);
       position: relative;
       padding: 0 var(--space-4);
   }

   .step-indicator {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: var(--space-2);
       position: relative;
       z-index: 2;
       opacity: 0.5;
       transition: all 0.3s ease;
   }

   .step-indicator.active {
       opacity: 1;
   }

   .step-indicator.active .step-circle {
       background: var(--gradient-primary);
       border-color: transparent;
       box-shadow: 0 0 15px rgba(139, 92, 246, 0.5);
       transform: scale(1.1);
   }

   .step-circle {
       width: 32px;
       height: 32px;
       border-radius: 50%;
       background: var(--bg-secondary);
       border: 2px solid var(--border-medium);
       display: flex;
       align-items: center;
       justify-content: center;
       font-weight: bold;
       font-family: var(--font-display);
       transition: all 0.3s ease;
   }

   .step-label {
       font-size: var(--text-xs);
       font-weight: var(--font-medium);
       letter-spacing: 0.05em;
       text-transform: uppercase;
   }

   .step-line {
       flex: 1;
       height: 2px;
       background: var(--border-subtle);
       margin: 0 10px;
       position: relative;
       top: -14px;
       z-index: 1;
   }

   .step-line.active {
       background: var(--accent-primary);
   }

   /* Form Steps */
   .form-step {
       display: none;
       animation: fadeIn 0.4s ease-out;
   }

   .form-step.active {
       display: block;
   }

   .form-group {
       margin-bottom: var(--space-6);
   }

   .form-label {
       display: block;
       margin-bottom: var(--space-2);
       font-size: var(--text-sm);
       color: var(--text-secondary);
       font-weight: var(--font-medium);
   }

   .form-input {
       width: 100%;
       padding: var(--space-3) var(--space-4);
       background: rgba(255, 255, 255, 0.05);
       border: 1px solid var(--border-subtle);
       border-radius: var(--radius-md);
       color: var(--text-primary);
       font-family: inherit;
       font-size: var(--text-base);
       transition: all 0.2s ease;
   }

   .form-input:focus {
       outline: none;
       border-color: var(--accent-primary);
       background: rgba(255, 255, 255, 0.1);
       box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
   }

   .form-input.invalid {
       border-color: #ef4444;
       box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
   }

   .form-input.valid {
       border-color: #10b981;
   }

   .form-hint {
       font-size: var(--text-xs);
       color: var(--text-muted);
       margin-top: var(--space-2);
   }

   .validation-message {
       font-size: var(--text-xs);
       color: #ef4444;
       margin-top: var(--space-1);
       min-height: 1.2em;
   }

   /* Option Cards (Radio) */
   .form-options-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: var(--space-3);
   }

   .option-card {
       position: relative;
       cursor: pointer;
   }

   .option-card input {
       position: absolute;
       opacity: 0;
   }

   .option-content {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: var(--space-2);
       padding: var(--space-4);
       background: rgba(255, 255, 255, 0.05);
       border: 1px solid var(--border-subtle);
       border-radius: var(--radius-lg);
       transition: all 0.2s ease;
       text-align: center;
   }

   .option-card:hover .option-content {
       background: rgba(255, 255, 255, 0.1);
       transform: translateY(-2px);
   }

   .option-card input:checked+.option-content {
       background: rgba(139, 92, 246, 0.15);
       border-color: var(--accent-primary);
       box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
   }

   .option-icon {
       font-size: 24px;
   }

   .option-title {
       font-size: var(--text-sm);
       font-weight: var(--font-medium);
   }

   /* Checkbox Group */
   .checkbox-group {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: var(--space-3);
   }

   .checkbox-item {
       display: flex;
       align-items: center;
       gap: var(--space-3);
       padding: var(--space-3);
       background: rgba(255, 255, 255, 0.05);
       border-radius: var(--radius-md);
       cursor: pointer;
       transition: all 0.2s ease;
   }

   .checkbox-item:hover {
       background: rgba(255, 255, 255, 0.1);
   }

   .checkbox-item input {
       width: 16px;
       height: 16px;
       accent-color: var(--accent-primary);
   }

   /* Navigation */
   .form-navigation {
       display: flex;
       justify-content: space-between;
       margin-top: var(--space-8);
       padding-top: var(--space-6);
       border-top: 1px solid var(--border-subtle);
   }

   /* Summary Step */
   .form-summary {
       text-align: center;
       padding: var(--space-6);
       background: rgba(16, 185, 129, 0.1);
       border: 1px solid rgba(16, 185, 129, 0.3);
       border-radius: var(--radius-lg);
       margin-bottom: var(--space-6);
       animation: pulseGlow 2s infinite;
   }

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

       .checkbox-group {
           grid-template-columns: 1fr;
       }
   }

   /* ============================================
   Form Variants & Tabs
   ============================================ */

   .form-tabs {
       display: flex;
       justify-content: center;
       gap: var(--space-2);
       margin: var(--space-6) 0;
       padding: var(--space-2);
       background: rgba(255, 255, 255, 0.05);
       border-radius: 100px;
       display: inline-flex;
   }

   .form-tab {
       padding: var(--space-2) var(--space-4);
       border-radius: 100px;
       border: none;
       background: transparent;
       color: var(--text-secondary);
       font-size: var(--text-xs);
       font-weight: var(--font-medium);
       cursor: pointer;
       transition: all 0.2s ease;
   }

   .form-tab:hover {
       color: var(--text-primary);
   }

   .form-tab.active {
       background: var(--bg-secondary);
       color: var(--text-primary);
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
   }

   .form-variant {
       display: none;
       animation: fadeIn 0.3s ease-out;
   }

   .form-variant.active {
       display: block;
   }

   /* ============================================
   Chat Variant
   ============================================ */
   .chat-interface {
       height: 400px;
       display: flex;
       flex-direction: column;
       background: rgba(0, 0, 0, 0.2);
       border-radius: var(--radius-lg);
       overflow: hidden;
       border: 1px solid var(--border-subtle);
   }

   .chat-messages {
       flex: 1;
       overflow-y: auto;
       padding: var(--space-4);
       display: flex;
       flex-direction: column;
       gap: var(--space-3);
   }

   .chat-message {
       max-width: 80%;
       padding: var(--space-3) var(--space-4);
       border-radius: 18px;
       font-size: var(--text-sm);
       line-height: 1.4;
       animation: slideUp 0.3s ease-out;
   }

   .chat-message.bot {
       align-self: flex-start;
       background: var(--bg-secondary);
       border-bottom-left-radius: 4px;
       color: var(--text-primary);
   }

   .chat-message.user {
       align-self: flex-end;
       background: var(--accent-primary);
       border-bottom-right-radius: 4px;
       color: white;
   }

   .chat-input-area {
       padding: var(--space-3);
       background: var(--bg-secondary);
       border-top: 1px solid var(--border-subtle);
       display: flex;
       gap: var(--space-2);
   }

   .chat-input-area input {
       flex: 1;
       background: transparent;
       border: none;
       padding: var(--space-2);
       color: var(--text-primary);
       outline: none;
   }

   .btn-icon {
       width: 36px;
       height: 36px;
       border-radius: 50%;
       border: none;
       background: var(--accent-primary);
       color: white;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       transition: transform 0.2s;
   }

   .btn-icon:hover {
       transform: scale(1.05);
   }

   .btn-icon:disabled {
       opacity: 0.5;
       cursor: not-allowed;
   }

   /* ============================================
   Zen / Typeform Variant
   ============================================ */
   .zen-container {
       height: 400px;
       position: relative;
       overflow: hidden;
       background: radial-gradient(circle at center, rgba(139, 92, 246, 0.05), transparent 70%);
   }

   .zen-progress {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 4px;
       background: rgba(255, 255, 255, 0.1);
   }

   .zen-progress-bar {
       height: 100%;
       background: var(--accent-primary);
       width: 0%;
       transition: width 0.3s ease;
   }

   .zen-slides {
       height: 100%;
       position: relative;
   }

   .zen-slide {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       display: flex;
       flex-direction: column;
       justify-content: center;
       padding: var(--space-8);
       opacity: 0;
       transform: translateY(20px);
       pointer-events: none;
       transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
   }

   .zen-slide.active {
       opacity: 1;
       transform: translateY(0);
       pointer-events: all;
   }

   .zen-slide.prev {
       opacity: 0;
       transform: translateY(-20px);
   }

   .zen-number {
       display: flex;
       align-items: center;
       gap: var(--space-2);
       font-size: var(--text-sm);
       color: var(--accent-primary);
       margin-bottom: var(--space-4);
       text-transform: uppercase;
       letter-spacing: 0.1em;
   }

   .zen-question {
       font-size: var(--text-2xl);
       margin-bottom: var(--space-6);
       line-height: 1.2;
   }

   .zen-input {
       background: transparent;
       border: none;
       border-bottom: 2px solid var(--border-subtle);
       font-size: var(--text-xl);
       padding: var(--space-2) 0;
       width: 100%;
       color: var(--text-primary);
       border-radius: 0;
       transition: border-color 0.3s;
   }

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

   .zen-hint {
       margin-top: var(--space-4);
       font-size: var(--text-sm);
       color: var(--text-muted);
   }

   .zen-hint strong {
       color: var(--text-secondary);
   }

   .zen-controls {
       position: absolute;
       bottom: var(--space-6);
       right: var(--space-6);
       display: flex;
       gap: var(--space-2);
   }

   .zen-nav-btn {
       width: 40px;
       height: 40px;
       border-radius: 4px;
       border: 1px solid var(--border-subtle);
       background: rgba(255, 255, 255, 0.05);
       color: var(--text-primary);
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       transition: all 0.2s;
   }

   .zen-nav-btn:hover:not(:disabled) {
       background: var(--bg-secondary);
       border-color: var(--text-secondary);
   }


   .zen-nav-btn:disabled {
       opacity: 0.3;
       cursor: not-allowed;
   }

   /* ============================================
   Backgrounds Demo Styles
   ============================================ */

   /* ============================================
   Backgrounds Demo Styles
   ============================================ */

   .feature-modal-backgrounds {
       padding: 0;
       overflow: hidden;
       position: relative;
       max-width: 900px;
       height: 600px;
       background: #000;
   }

   .backgrounds-demo-wrapper {
       position: relative;
       width: 100%;
       height: 100%;
       overflow: hidden;
       /* Hide scrollbars during parallax */
   }

   /* Common Background Effect Container */
   .background-effect {
       position: absolute;
       inset: 0;
       opacity: 0;
       transition: opacity 0.8s ease;
       z-index: 1;
       overflow: hidden;
       will-change: opacity;
   }

   .background-effect.active {
       opacity: 1;
       z-index: 2;
   }

   /* 1. Organic Effect - Advanced */
   /* 1. Organic Effect - Transformed to Interactive Water */
   .bg-organic {
       background: radial-gradient(circle at bottom, #0ea5e9, #0f172a);
       overflow: hidden;
       --mouse-x: 50%;
       --mouse-y: 50%;
   }

   .organic-orb {
       position: absolute;
       border-radius: 50%;
       filter: blur(60px);
       opacity: 0.8;
       mix-blend-mode: hard-light;
       will-change: transform;
       transition: transform 0.1s linear;
       /* Smooth mouse following */
   }

   .orb-1 {
       top: 50%;
       left: 50%;
       width: 800px;
       height: 800px;
       background: radial-gradient(circle, rgba(56, 189, 248, 0.8), rgba(59, 130, 246, 0));
       transform: translate(-50%, -50%) translate(calc((var(--mouse-x) - 50%) * -20px), calc((var(--mouse-y) - 50%) * -20px));
   }

   .orb-2 {
       top: 20%;
       left: 20%;
       width: 600px;
       height: 600px;
       background: radial-gradient(circle, rgba(6, 182, 212, 0.6), transparent);
       transform: translate(-50%, -50%) translate(calc((var(--mouse-x) - 50%) * 40px), calc((var(--mouse-y) - 50%) * 40px));
   }

   .orb-3 {
       bottom: 20%;
       right: 20%;
       width: 600px;
       height: 600px;
       background: radial-gradient(circle, rgba(14, 165, 233, 0.6), transparent);
       transform: translate(-50%, -50%) translate(calc((var(--mouse-x) - 50%) * 60px), calc((var(--mouse-y) - 50%) * 60px));
   }

   .organic-noise {
       position: absolute;
       inset: 0;
       opacity: 0.15;
       mix-blend-mode: overlay;
       background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='1'/%3E%3C/svg%3E");
       pointer-events: none;
   }

   /* Water Ripple Effect */
   .water-ripple {
       position: absolute;
       border-radius: 50%;
       border: 2px solid rgba(255, 255, 255, 0.5);
       opacity: 0;
       transform: scale(0);
       pointer-events: none;
       animation: rippleAnim 2s linear forwards;
   }

   @keyframes rippleAnim {
       0% {
           transform: scale(0);
           opacity: 0.5;
           border-width: 4px;
       }

       100% {
           transform: scale(4);
           opacity: 0;
           border-width: 0px;
       }
   }

   @keyframes organicFloat {

       /* Kept for fallback/other uses if needed */
       0% {
           transform: translate(0, 0);
       }

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

   /* 2. Aurora Effect - Refined & Complex */
   .bg-aurora {
       background: #0f172a;
   }

   .aurora-light {
       position: absolute;
       width: 150%;
       height: 150%;
       opacity: 0.8;
       /* Increased from 0.45 */
       mix-blend-mode: hard-light;
       filter: blur(60px);
       /* Reduced light slightly for clarity */
       border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
       animation: auroraComplex 15s infinite ease-in-out alternate;
       /* Faster */
   }

   .light-1 {
       top: -20%;
       left: -20%;
       background: radial-gradient(circle, #22d3ee, #3b82f6, transparent);
       animation-duration: 18s;
   }

   .light-2 {
       bottom: -20%;
       right: -20%;
       background: radial-gradient(circle, #c084fc, #db2777, transparent);
       animation-duration: 25s;
       animation-delay: -5s;
   }

   .light-3 {
       top: 40%;
       left: 40%;
       width: 70%;
       height: 70%;
       background: radial-gradient(circle, #34d399, #0ea5e9, transparent);
       animation-duration: 22s;
       animation-delay: -8s;
   }

   .aurora-stars {
       position: absolute;
       inset: 0;
       background-image:
           radial-gradient(1px 1px at 10% 10%, white 100%, transparent),
           radial-gradient(1px 1px at 20% 40%, white 100%, transparent),
           radial-gradient(2px 2px at 50% 50%, white 100%, transparent),
           radial-gradient(1px 1px at 80% 80%, white 100%, transparent);
       background-size: 400px 400px;
       opacity: 0.3;
   }

   @keyframes auroraComplex {
       0% {
           transform: rotate(0deg) scale(1) translate(0, 0);
           border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
       }

       33% {
           transform: rotate(10deg) scale(1.1) translate(20px, -20px);
           border-radius: 20% 80% 30% 70% / 60% 40% 30% 70%;
       }

       66% {
           transform: rotate(-5deg) scale(1.15) translate(-20px, 20px);
           border-radius: 80% 20% 60% 40% / 40% 60% 70% 30%;
       }

       100% {
           transform: rotate(0deg) scale(1) translate(0, 0);
           border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
       }
   }

   /* 3. Neon Effect - Advanced (Retro Wave) */
   .bg-neon {
       background: #050011;
       /* Deep Purple Black */
       perspective: 400px;
       overflow: hidden;
   }

   .neon-sky {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 50%;
       /* Horizon line */
       background: linear-gradient(to bottom, #0f0c29, #302b63, #24243e);
       z-index: 1;
       overflow: hidden;
   }

   .neon-sun {
       position: absolute;
       bottom: -60px;
       /* Half submerged */
       left: 50%;
       transform: translateX(-50%);
       width: 240px;
       height: 240px;
       border-radius: 50%;
       background: linear-gradient(to top, #ff9d00, #ff0055);
       box-shadow: 0 0 40px #ff0055, 0 0 80px #ff9d00;
       /* Sun stripes */
       -webkit-mask-image: linear-gradient(to top, transparent 5%, black 10%, transparent 15%, black 20%, transparent 25%, black 30%, black 100%);
       mask-image: linear-gradient(to top, transparent 5%, black 10%, transparent 15%, black 20%, transparent 25%, black 30%, black 100%);
   }

   .neon-ground {
       position: absolute;
       bottom: 0;
       left: 0;
       width: 100%;
       height: 50%;
       background: #080010;
       z-index: 2;
       transform-style: preserve-3d;
   }

   .neon-grid-plane {
       position: absolute;
       top: 0;
       left: -50%;
       /* Extend to cover rotation */
       width: 200%;
       height: 200%;
       background-image:
           linear-gradient(rgba(200, 0, 255, 0.4) 1px, transparent 1px),
           linear-gradient(90deg, rgba(200, 0, 255, 0.4) 1px, transparent 1px);
       background-size: 60px 60px;
       transform: rotateX(60deg);
       transform-origin: center top;
       animation: neonGridOutrun 2s linear infinite;
       box-shadow: 0 -20px 40px rgba(200, 0, 255, 0.4);
       /* Glow at horizon */
   }

   .neon-overlay {
       position: absolute;
       inset: 0;
       background: radial-gradient(circle, transparent 60%, black 100%);
       /* Vignette */
       z-index: 3;
       pointer-events: none;
   }

   /* Scanlines */
   .neon-overlay::after {
       content: '';
       position: absolute;
       inset: 0;
       background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
       background-size: 100% 4px, 6px 100%;
       pointer-events: none;
   }

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

       100% {
           background-position: 0 60px;
       }
   }

   /* 4. Mesh Effect - Liquid Gradient Interactive */
   .bg-mesh {
       background: #ffffff;
       overflow: hidden;
       --tx-1: 0%;
       --ty-1: 0%;
       --tx-2: 0%;
       --ty-2: 0%;
       --tx-3: 0%;
       --ty-3: 0%;
       --tx-4: 0%;
       --ty-4: 0%;
   }

   .mesh-gradient {
       position: absolute;
       inset: -20%;
       width: 140%;
       height: 140%;
       background:
           radial-gradient(at calc(0% + var(--tx-1)) calc(0% + var(--ty-1)), hsla(253, 16%, 7%, 1) 0, transparent 55%),
           radial-gradient(at calc(50% + var(--tx-2)) calc(0% + var(--ty-2)), hsla(225, 39%, 30%, 1) 0, transparent 55%),
           radial-gradient(at calc(100% + var(--tx-3)) calc(0% + var(--ty-3)), hsla(339, 49%, 30%, 1) 0, transparent 55%),
           radial-gradient(at calc(0% + var(--tx-4)) calc(50% + var(--ty-4)), hsla(339, 49%, 30%, 1) 0, transparent 55%),
           radial-gradient(at calc(100% + var(--tx-1)) calc(50% + var(--ty-1)), hsla(239, 39%, 30%, 1) 0, transparent 55%),
           radial-gradient(at calc(0% + var(--tx-2)) calc(100% + var(--ty-2)), hsla(339, 49%, 30%, 1) 0, transparent 55%),
           radial-gradient(at calc(50% + var(--tx-3)) calc(100% + var(--ty-3)), hsla(225, 39%, 30%, 1) 0, transparent 55%),
           radial-gradient(at calc(100% + var(--tx-4)) calc(100% + var(--ty-4)), hsla(253, 16%, 7%, 1) 0, transparent 55%);
       background-size: 100% 100%;
       filter: blur(60px) contrast(1.2);
       opacity: 0.9;
   }

   .mesh-glass {
       position: absolute;
       inset: 0;
       background: rgba(255, 255, 255, 0.1);
       backdrop-filter: blur(30px);
       z-index: 2;
   }

   /* No keyframes needed for mesh liquid effect as it's JS driven */

   /* 5. Particles Effect */
   .bg-particles {
       background: #0f172a;
       overflow: hidden;
   }

   .particles-container {
       position: absolute;
       inset: 0;
   }

   .particle {
       position: absolute;
       background: white;
       border-radius: 50%;
       opacity: 0;
       animation: particleFloat 10s infinite linear;
   }

   .p1 {
       width: 4px;
       height: 4px;
       left: 10%;
       animation-duration: 8s;
       animation-delay: 0s;
   }

   .p2 {
       width: 6px;
       height: 6px;
       left: 20%;
       animation-duration: 12s;
       animation-delay: -2s;
   }

   .p3 {
       width: 3px;
       height: 3px;
       left: 35%;
       animation-duration: 10s;
       animation-delay: -4s;
   }

   .p4 {
       width: 5px;
       height: 5px;
       left: 50%;
       animation-duration: 14s;
       animation-delay: -1s;
   }

   .p5 {
       width: 4px;
       height: 4px;
       left: 65%;
       animation-duration: 9s;
       animation-delay: -6s;
   }

   .p6 {
       width: 7px;
       height: 7px;
       left: 80%;
       animation-duration: 11s;
       animation-delay: -3s;
   }

   .p7 {
       width: 3px;
       height: 3px;
       left: 90%;
       animation-duration: 13s;
       animation-delay: -5s;
   }

   .p8 {
       width: 5px;
       height: 5px;
       left: 15%;
       animation-duration: 15s;
       animation-delay: -7s;
   }

   .p9 {
       width: 4px;
       height: 4px;
       left: 40%;
       animation-duration: 10s;
       animation-delay: -2s;
   }

   .p10 {
       width: 6px;
       height: 6px;
       left: 70%;
       animation-duration: 12s;
       animation-delay: -8s;
   }

   .p11 {
       width: 3px;
       height: 3px;
       left: 25%;
       animation-duration: 9s;
       animation-delay: -1s;
   }

   .p12 {
       width: 5px;
       height: 5px;
       left: 55%;
       animation-duration: 14s;
       animation-delay: -4s;
   }

   .p13 {
       width: 4px;
       height: 4px;
       left: 85%;
       animation-duration: 11s;
       animation-delay: -6s;
   }

   .p14 {
       width: 6px;
       height: 6px;
       left: 5%;
       animation-duration: 16s;
       animation-delay: -3s;
   }

   .p15 {
       width: 3px;
       height: 3px;
       left: 95%;
       animation-duration: 13s;
       animation-delay: -9s;
   }

   @keyframes particleFloat {
       0% {
           transform: translateY(120vh) scale(0);
           opacity: 0;
       }

       10% {
           opacity: 0.8;
       }

       90% {
           opacity: 0.8;
       }

       100% {
           transform: translateY(-20vh) scale(1);
           opacity: 0;
       }
   }

   /* Content & Controls - Refined */
   .backgrounds-content {
       position: absolute;
       bottom: 0;
       left: 0;
       width: 100%;
       padding: 3rem;
       z-index: 10;
       background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 50%, transparent 100%);
       color: white;
       display: flex;
       flex-direction: column;
       align-items: center;
       text-align: center;
       text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
   }

   .backgrounds-badge {
       padding: 0.25rem 0.75rem;
       background: rgba(255, 255, 255, 0.1);
       border: 1px solid rgba(255, 255, 255, 0.2);
       border-radius: 50px;
       font-size: 0.75rem;
       text-transform: uppercase;
       letter-spacing: 0.1em;
       margin-bottom: 1rem;
       backdrop-filter: blur(4px);
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   }

   .backgrounds-title {
       font-size: 3rem;
       font-weight: 700;
       margin-bottom: 0.5rem;
       color: white;
   }

   .backgrounds-subtitle {
       font-size: 1.1rem;
       color: rgba(255, 255, 255, 0.8);
       max-width: 600px;
       margin-bottom: 2rem;
   }

   .backgrounds-controls {
       display: flex;
       gap: 1rem;
       background: rgba(20, 20, 20, 0.6);
       padding: 0.5rem;
       border-radius: 50px;
       backdrop-filter: blur(10px);
       border: 1px solid rgba(255, 255, 255, 0.1);
       box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
   }

   .bg-control-btn {
       background: transparent;
       border: none;
       color: rgba(255, 255, 255, 0.6);
       padding: 0.75rem 1.5rem;
       border-radius: 50px;
       font-weight: 500;
       cursor: pointer;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       display: flex;
       align-items: center;
       gap: 0.5rem;
       position: relative;
       overflow: hidden;
   }

   .bg-control-btn:hover {
       color: white;
       background: rgba(255, 255, 255, 0.05);
   }

   .bg-control-btn.active {
       background: white;
       color: black;
       box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
   }

   .btn-btn-icon {
       font-size: 1.2rem;
   }

   /* ============================================
   Counters Demo Styles
   ============================================ */

   .counters-demo-container {
       padding: var(--space-4);
       display: flex;
       flex-direction: column;
       gap: var(--space-8);
       max-height: 70vh;
       overflow-y: auto;
   }

   .counter-demo-section {
       padding: var(--space-4);
       border-radius: var(--radius-xl);
       background: rgba(255, 255, 255, 0.03);
       border: 1px solid rgba(255, 255, 255, 0.05);
   }

   .counter-demo-title {
       font-size: var(--text-lg);
       font-weight: var(--font-semibold);
       margin-bottom: var(--space-6);
       color: var(--text-secondary);
       text-align: center;
       border-bottom: 1px solid rgba(255, 255, 255, 0.05);
       padding-bottom: var(--space-2);
   }

   /* Style 1: Simple Grid */
   .counters-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: var(--space-4);
       text-align: center;
   }

   .counter-item {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: var(--space-2);
   }

   .counter-value {
       font-family: var(--font-display);
       font-size: var(--text-4xl);
       font-weight: var(--font-black);
       color: white;
       line-height: 1;
   }

   .counter-label {
       font-size: var(--text-sm);
       color: var(--text-muted);
   }

   /* Style 2: Big Impact */
   .counter-big-card {
       display: flex;
       align-items: center;
       gap: var(--space-6);
       padding: var(--space-6);
       background: linear-gradient(135deg, rgba(92, 35, 217, 0.1), rgba(16, 185, 129, 0.05));
       border-radius: var(--radius-xl);
       border: 1px solid rgba(92, 35, 217, 0.2);
   }

   .counter-big-icon {
       width: 64px;
       height: 64px;
       display: flex;
       align-items: center;
       justify-content: center;
       background: var(--gradient-primary);
       border-radius: var(--radius-full);
       color: white;
       flex-shrink: 0;
       box-shadow: var(--glow-primary);
   }

   .counter-big-content {
       display: flex;
       flex-direction: column;
   }

   .counter-big-value {
       font-family: var(--font-display);
       font-size: var(--text-5xl);
       font-weight: var(--font-black);
       color: white;
       line-height: 1;
   }

   .counter-big-label {
       font-size: var(--text-base);
       color: var(--text-secondary);
       margin-top: var(--space-2);
   }

   /* Style 3: Cards Grid */
   .counters-cards-grid {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: var(--space-4);
   }

   .counter-card-item {
       background: var(--bg-glass);
       border: 1px solid var(--border-subtle);
       border-radius: var(--radius-lg);
       padding: var(--space-6);
       text-align: center;
       transition: transform 0.3s ease;
   }

   .counter-card-item:hover {
       transform: translateY(-4px);
       border-color: var(--accent-primary);
   }

   .counter-card-value {
       font-family: var(--font-display);
       font-size: var(--text-3xl);
       font-weight: var(--font-bold);
       margin-bottom: var(--space-2);
   }

   .counter-card-text {
       font-size: var(--text-sm);
       color: var(--text-secondary);
   }

   .counters-demo-actions {
       display: flex;
       justify-content: center;
       margin-top: var(--space-4);
   }

   /* Mobile Adjustments */
   @media (max-width: 640px) {
       .counters-grid {
           grid-template-columns: repeat(1, 1fr);
           gap: var(--space-6);
       }

       .counter-big-card {
           flex-direction: column;
           text-align: center;
       }

       .counters-cards-grid {
           grid-template-columns: 1fr;
       }
   }

   /* ============================================
   Theme Demo Styles - Advanced
   ============================================ */
   .theme-demo-container {
       padding: var(--space-4);
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: var(--space-6);
   }

   .theme-preview-wrapper {
       width: 100%;
       max-width: 800px;
       margin: 0 auto;
       perspective: 1000px;
   }

   /* Mock Device Container */
   .theme-device-mockup {
       background: var(--th-bg, #0f172a);
       color: var(--th-text, #f8fafc);
       border-radius: var(--radius-xl);
       border: 1px solid var(--border-subtle);
       overflow: hidden;
       position: relative;
       box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
       font-family: var(--th-font-body, 'Inter', sans-serif);
       transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
       min-height: 400px;
       display: flex;
       flex-direction: column;
   }

   /* Theme 1: Midnight (Default) */
   [data-theme="dark"] {
       --th-bg: #0f172a;
       --th-surface: #1e293b;
       --th-text: #f8fafc;
       --th-text-muted: #94a3b8;
       --th-accent: #6366f1;
       --th-border: #334155;
       --th-radius: 12px;
       --th-font-display: 'Inter', sans-serif;
       --th-font-body: 'Inter', sans-serif;
   }

   /* Theme 2: Elegant (Light) */
   [data-theme="light"] {
       --th-bg: #fdfbf7;
       --th-surface: #ffffff;
       --th-text: #1c1917;
       --th-text-muted: #57534e;
       --th-accent: #d97706;
       --th-border: #e7e5e4;
       --th-radius: 24px;
       --th-font-display: 'Playfair Display', serif;
       --th-font-body: 'Plus Jakarta Sans', sans-serif;
   }

   [data-theme="light"] .mock-title {
       font-style: italic;
   }

   /* Theme 3: Future (Cyber) */
   [data-theme="future"] {
       --th-bg: #050505;
       --th-surface: #111111;
       --th-text: #00ff41;
       --th-text-muted: #008f11;
       --th-accent: #ff00ff;
       --th-border: #00ff41;
       --th-radius: 0px;
       --th-font-display: 'Courier Prime', monospace;
       --th-font-body: 'Courier Prime', monospace;
   }

   [data-theme="future"] .mock-btn,
   [data-theme="future"] .mock-card,
   [data-theme="future"] .mock-logo-icon,
   [data-theme="future"] .mock-nav span {
       border: 1px solid var(--th-border);
       box-shadow: 0 0 5px rgba(0, 255, 65, 0.2);
   }

   /* Mock Components Styles */
   /* Theme 4: Nature (Forest) */
   [data-theme="forest"] {
       --th-bg: #052e16;
       --th-surface: #14532d;
       --th-text: #ecfccb;
       --th-text-muted: #a3e635;
       --th-accent: #4ade80;
       --th-border: #166534;
       --th-radius: 16px;
       --th-font-display: 'Outfit', sans-serif;
       --th-font-body: 'Outfit', sans-serif;
   }

   /* Theme 5: Retro */
   [data-theme="retro"] {
       --th-bg: #fff7ed;
       --th-surface: #ffedd5;
       --th-text: #431407;
       --th-text-muted: #9a3412;
       --th-accent: #ea580c;
       --th-border: #fb923c;
       --th-radius: 0px;
       --th-font-display: 'Courier New', monospace;
       --th-font-body: 'Courier New', monospace;
   }

   [data-theme="retro"] .mock-btn,
   [data-theme="retro"] .mock-card,
   [data-theme="retro"] .theme-device-mockup {
       border: 2px solid var(--th-border);
       box-shadow: 4px 4px 0 var(--th-border);
   }

   /* Mock Components Styles */
   .mock-header {
       padding: var(--space-4) var(--space-6);
       display: flex;
       justify-content: space-between;
       align-items: center;
       border-bottom: 1px solid var(--th-border);
       transition: all 0.5s ease;
   }

   .mock-logo {
       display: flex;
       align-items: center;
       gap: var(--space-2);
       font-weight: bold;
       font-family: var(--th-font-display);
   }

   .mock-logo-icon {
       width: 24px;
       height: 24px;
       background: var(--th-accent);
       border-radius: var(--th-radius);
       transition: all 0.5s ease;
   }

   .mock-nav {
       display: flex;
       gap: 4px;
   }

   .mock-nav span {
       width: 24px;
       height: 4px;
       background: var(--th-text-muted);
       border-radius: 2px;
       opacity: 0.5;
   }

   .mock-hero {
       padding: var(--space-8) var(--space-6);
       text-align: center;
       flex: 1;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
   }

   .mock-badge {
       text-transform: uppercase;
       font-size: 10px;
       letter-spacing: 0.1em;
       color: var(--th-accent);
       margin-bottom: var(--space-3);
       font-weight: bold;
   }

   .mock-title {
       font-family: var(--th-font-display, inherit);
       font-size: 2rem;
       line-height: 1.1;
       margin-bottom: var(--space-3);
       color: var(--th-text);
       transition: all 0.5s ease;
   }

   .mock-text {
       font-size: 0.9rem;
       color: var(--th-text-muted);
       max-width: 400px;
       margin-bottom: var(--space-6);
       line-height: 1.5;
       transition: color 0.5s ease;
   }

   .mock-actions {
       display: flex;
       gap: var(--space-3);
   }

   .mock-btn {
       padding: 0.6em 1.2em;
       border-radius: var(--th-radius);
       font-size: 0.85rem;
       font-weight: 600;
       cursor: pointer;
       transition: all 0.3s ease;
       border: none;
       font-family: var(--th-font-body);
   }

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

   .mock-btn.primary:hover {
       filter: brightness(1.1);
       transform: translateY(-2px);
   }

   .mock-btn.secondary {
       background: transparent;
       border: 1px solid var(--th-border);
       color: var(--th-text);
   }

   .mock-btn.secondary:hover {
       background: var(--th-surface);
   }

   /* Mock Features Grid */
   .mock-features {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: var(--space-4);
       padding: var(--space-6);
       background: var(--th-surface);
       border-top: 1px solid var(--th-border);
       transition: all 0.5s ease;
   }

   .mock-card {
       padding: var(--space-3);
       border-radius: var(--th-radius);
       background: var(--th-bg);
       text-align: center;
       transition: all 0.5s ease;
   }

   .mock-card.active {
       border: 1px solid var(--th-accent);
   }

   .mock-icon {
       font-size: 1.5rem;
       margin-bottom: var(--space-2);
   }

   .mock-card h4 {
       font-size: 0.75rem;
       color: var(--th-text);
       font-weight: 600;
   }



   .theme-selector {
       display: flex;
       gap: var(--space-4);
       margin-top: var(--space-6);
       overflow-x: auto;
       padding-bottom: var(--space-2);
       justify-content: center;
       width: 100%;
       scrollbar-width: none;
       /* Hide scrollbar Firefox */
   }

   .theme-selector::-webkit-scrollbar {
       display: none;
       /* Hide scrollbar Chrome */
   }

   .theme-option {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: var(--space-2);
       background: transparent;
       border: none;
       cursor: pointer;
       opacity: 0.6;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }

   .theme-option:hover {
       opacity: 0.8;
       transform: translateY(-2px);
   }

   .theme-option.active {
       opacity: 1;
       transform: translateY(-4px);
   }

   .theme-swatch {
       width: 48px;
       height: 48px;
       border-radius: 50%;
       border: 2px solid rgba(255, 255, 255, 0.1);
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
       position: relative;
       transition: all 0.3s ease;
   }

   .theme-option.active .theme-swatch {
       border-color: white;
       box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
       transform: scale(1.1);
   }

   .theme-label {
       font-size: var(--text-xs);
       color: var(--text-secondary);
       font-weight: var(--font-medium);
       transition: color 0.3s ease;
   }

   .theme-option.active .theme-label {
       color: var(--text-primary);
   }

   .theme-hint {
       margin-top: var(--space-4);
       font-size: var(--text-xs);
       color: var(--text-muted);
       display: flex;
       align-items: center;
       justify-content: center;
   }



   .feature-compact-card {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: var(--space-4);
       background: var(--surface-card);
       border: 1px solid var(--border-subtle);
       border-radius: var(--radius-lg);
       cursor: pointer;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       position: relative;
       overflow: hidden;
   }

   .feature-compact-card:hover {
       transform: translateX(5px);
       border-color: var(--accent-primary);
       background: var(--surface-hover);
   }

   /* .feature-compact-card.active styles removed for independence */

   .feature-compact-header {
       display: flex;
       align-items: center;
       gap: var(--space-3);
   }

   .feature-compact-icon {
       width: 40px;
       height: 40px;
       display: flex;
       align-items: center;
       justify-content: center;
       background: var(--bg-secondary);
       border-radius: var(--radius-md);
       color: var(--text-secondary);
       transition: all 0.3s ease;
   }

   /* Active icon style removed */

   .feature-compact-info h4 {
       margin: 0;
       font-size: var(--text-base);
       font-weight: 600;
       color: var(--text-primary);
   }

   .feature-compact-info p {
       margin: 0;
       font-size: var(--text-xs);
       color: var(--text-muted);
   }

   /* 5. Data Viz (Opposite Scroll) */
   .data-scroll-layout {
       display: flex;
       gap: 20px;
       padding: 0 40px;
       height: 100%;
       width: 400px;
       /* Fixed width */
       overflow: hidden;
       /* Masking for top/bottom fade */
       mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
       -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
   }

   .data-scroll-col {
       flex: 1;
       display: flex;
       flex-direction: column;
       gap: 15px;
       /* Transformation handled by JS */
   }

   .data-preview-card {
       background: rgba(30, 41, 59, 0.9);
       border: 1px solid rgba(255, 255, 255, 0.1);
       border-radius: 16px;
       padding: 20px;
       display: flex;
       flex-direction: column;
       /* Charts stack vertically */
       gap: 12px;
       min-height: 120px;
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
       backdrop-filter: blur(5px);
       position: relative;
       /* Context for glare */
       overflow: hidden;
       /* Contain glare */
   }

   /* Premium Glare Effect */
   .data-preview-card::after {
       content: '';
       position: absolute;
       top: 0;
       left: -150%;
       width: 100%;
       height: 100%;
       background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2) 50%, transparent);
       transform: skewX(-20deg);
       pointer-events: none;
       transition: left 0s;
   }

   /* Trigger Glare on Visible Entry */
   .data-preview-card.chart-visible::after {
       animation: glareSweep 2s ease-in-out forwards;
       animation-delay: 0.5s;
   }

   @keyframes glareSweep {
       0% {
           left: -150%;
       }

       100% {
           left: 150%;
       }
   }

   /* Live Data Jitter */
   .live-active .chart-bar-col {
       animation: barJitter 2s infinite ease-in-out alternate;
   }

   /* Varied delays for randomness */
   .live-active .chart-bar-col:nth-child(2) {
       animation-delay: 0.2s;
   }

   .live-active .chart-bar-col:nth-child(3) {
       animation-delay: 0.5s;
   }

   .live-active .chart-bar-col:nth-child(4) {
       animation-delay: 0.3s;
   }

   @keyframes barJitter {
       0% {
           transform: scaleY(1);
       }

       100% {
           transform: scaleY(0.9);
       }
   }

   .data-card-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       width: 100%;
   }

   .data-card-val-sm {
       font-size: 1.1rem;
       font-weight: 700;
       color: white;
   }

   .data-card-label {
       font-size: 0.75rem;
       font-weight: 600;
       color: var(--text-muted);
       text-transform: uppercase;
       letter-spacing: 0.5px;
   }

   /* Charts */
   .data-card-viz {
       flex: 1;
       display: flex;
       align-items: center;
       justify-content: center;
       width: 100%;
       min-height: 60px;
   }

   /* Bar Chart */
   .chart-viz-bar {
       display: flex;
       justify-content: space-between;
       align-items: flex-end;
       width: 100%;
       height: 50px;
       gap: 4px;
   }

   .chart-bar-col {
       flex: 1;
       border-radius: 4px;
       transform: scaleY(0);
       /* Init Hidden */
       transform-origin: bottom;
       transition: transform 0.3s ease;
   }

   .chart-visible .chart-bar-col {
       animation: barGrow 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
   }

   @keyframes barGrow {
       from {
           transform: scaleY(0);
       }

       to {
           transform: scaleY(1);
       }
   }

   /* Donut Chart */
   .chart-viz-donut {
       width: 60px;
       height: 60px;
       position: relative;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .chart-viz-donut svg {
       width: 100%;
       height: 100%;
       transform: rotate(-90deg);
   }

   .chart-donut-stroke {
       stroke-dasharray: 0, 100;
       /* Init Hidden */
       transition: stroke-dasharray 0.3s ease;
       animation: donutFill 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
   }

   @keyframes donutFill {
       from {
           stroke-dasharray: 0, 100;
       }

       to {
           stroke-dasharray: var(--donut-target);
       }
   }

   .chart-viz-donut span {
       position: absolute;
       font-size: 0.8rem;
       font-weight: 700;
   }

   /* Line Chart */
   .chart-viz-line {
       width: 100%;
       height: 50px;
   }

   .chart-viz-line svg {
       width: 100%;
       height: 100%;
       overflow: visible;
   }

   .chart-line-stroke {
       stroke-dasharray: 500;
       stroke-dashoffset: 500;
       /* Init Hidden */
       transition: stroke-dashoffset 0.3s ease;
   }

   .chart-visible .chart-line-stroke {
       animation: lineDraw 1.5s ease-out forwards;
   }

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

   .feature-compact-btn {
       width: 48px;
       height: 48px;
       border-radius: 50%;
       border: 1px solid var(--border-subtle);
       background: transparent;
       color: var(--text-muted);
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       transition: all 0.2s;
   }

   .feature-compact-btn:hover {
       background: var(--accent-primary);
       border-color: var(--accent-primary);
       color: white;
   }

   /* --- Right: Live Carousel --- */
   .live-preview-container {
       position: relative;
       border-radius: var(--radius-xl);
       overflow: hidden;
       background: #0f172a;
       /* Dark base for previews */
       border: 1px solid var(--border-subtle);
       box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3);
       aspect-ratio: 16/10;
   }

   .live-carousel {
       position: relative;
       width: 100%;
       height: 100%;
   }

   .carousel-slide {
       position: absolute;
       inset: 0;
       opacity: 0;
       transition: opacity 0.6s ease;
       display: flex;
       align-items: center;
       justify-content: center;
       pointer-events: none;
       /* Let clicks pass usually, unless interactive */
   }

   .carousel-slide.active {
       opacity: 1;
       pointer-events: auto;
   }

   /* Progress Bar */
   .carousel-progress {
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
       height: 4px;
       background: rgba(255, 255, 255, 0.1);
   }

   .carousel-bar {
       height: 100%;
       background: var(--accent-primary);
       width: 0%;
       transition: width 0.1s linear;
   }

   /* --- Mini Visuals --- */

   /* 1. Scroll */
   .preview-scroll-visual {
       width: 60%;
       height: 80%;
       position: relative;
       perspective: 1000px;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       gap: 20px;
   }

   .scroll-card {
       width: 100%;
       height: 60px;
       background: rgba(255, 255, 255, 0.1);
       border-radius: 8px;
       transform: rotateX(20deg) translateY(50px);
       opacity: 0;
       animation: scrollRevealPreview 3s infinite;
   }

   .scroll-line {
       position: absolute;
       left: 50%;
       top: 0;
       bottom: 0;
       width: 2px;
       background: linear-gradient(to bottom, transparent, var(--accent-primary), transparent);
   }

   .c1 {
       animation-delay: 0s;
       width: 80%;
   }

   .c2 {
       animation-delay: 0.5s;
       width: 90%;
   }

   .c3 {
       animation-delay: 1s;
       width: 70%;
   }

   @keyframes scrollRevealPreview {
       0% {
           transform: rotateX(20deg) translateY(50px);
           opacity: 0;
       }

       30% {
           transform: rotateX(0deg) translateY(0);
           opacity: 1;
       }

       80% {
           transform: rotateX(0deg) translateY(0);
           opacity: 1;
       }

       100% {
           transform: rotateX(-20deg) translateY(-50px);
           opacity: 0;
       }
   }

   /* 2. Theme (Mini) */
   .mini-mock[data-theme="future"] {
       width: 70%;
       height: 80%;
       transform: scale(0.9);
   }

   /* 3. Backgrounds (Frame) */
   .preview-bg-frame {
       width: 100%;
       height: 100%;
       position: relative;
       overflow: hidden;
   }

   .preview-overlay-text {
       position: absolute;
       top: 20px;
       /* Moved to top */
       right: 20px;
       font-family: var(--font-display);
       color: rgba(255, 255, 255, 0.5);
       font-size: 2rem;
       font-weight: 700;
   }

   /* 4. Chat */
   .preview-chat-ui {
       width: 60%;
       display: flex;
       flex-direction: column;
       gap: 15px;
   }

   .chat-message {
       padding: 12px 16px;
       border-radius: 12px;
       font-size: 14px;
       max-width: 80%;
       opacity: 0;
       animation: chatPop 4s infinite;
   }

   .chat-message.bot {
       background: var(--surface-card);
       align-self: flex-start;
       border-bottom-left-radius: 2px;
       animation-delay: 0.5s;
   }

   .chat-message.user {
       background: var(--accent-primary);
       color: white;
       align-self: flex-end;
       border-bottom-right-radius: 2px;
       animation-delay: 2s;
   }

   @keyframes chatPop {
       0% {
           opacity: 0;
           transform: translateY(10px);
       }

       10%,
       90% {
           opacity: 1;
           transform: translateY(0);
       }

       100% {
           opacity: 0;
           transform: translateY(-10px);
       }
   }

   /* 5. Counters */
   .preview-counters-grid {
       text-align: center;
       color: var(--accent-primary);
   }

   .counter-big-icon {
       font-size: 4rem;
       margin-bottom: 0.5rem;
       animation: bounce 2s infinite;
   }

   .counter-value {
       font-size: 3rem;
       font-weight: 800;
       color: white;
   }

   .counter-label {
       color: var(--text-muted);
       font-size: 1.2rem;
   }

   @keyframes bounce {

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

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

   /* --- High Fidelity Carousel Upgrades (Premium) --- */

   /* Wrapper to scale down complex components to fit carousel */
   .preview-scale-wrapper {
       width: 100%;
       height: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
       transform: scale(0.9);
       /* DYNAMIC SCALE UP: Filled the void */
       transform-origin: center center;
       padding: 0;
   }

   /* 1. Stagger Grid Preview */
   .preview-stagger-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 15px;
       width: 280px;
   }

   .preview-stagger-grid .scroll-stagger-item {
       width: 100%;
       aspect-ratio: 1;
       border-radius: 12px;
       /* Softer corners */
       background: #2a2a2a;
       object-fit: cover;
       opacity: 0;
       transform: translateY(30px) scale(0.9);
       transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
       box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
   }

   .preview-stagger-grid .scroll-stagger-item.animate-in {
       opacity: 1;
       transform: translateY(0) scale(1);
       box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
       /* Lift effect */
   }

   /* 2. Theme Mockup Preview */
   .preview-mockup {
       width: 320px;
       height: 500px;
       flex-shrink: 0;
       box-shadow:
           0 30px 60px -10px rgba(0, 0, 0, 0.6),
           0 0 0 1px rgba(255, 255, 255, 0.1) inset;
       /* Inner border for realism */
       border-radius: var(--th-radius, 12px);
       background: var(--th-bg, #0f172a);
       transition: background 0.6s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.6s ease;
       overflow: hidden;
       position: relative;
       border: 1px solid var(--th-border, rgba(255, 255, 255, 0.1));
   }

   /* 3. Live Aurora / Particles Preview */
   .preview-bg-frame.bg-network {
       background: #0f172a;
       position: absolute;
       inset: 10px;
       width: calc(100% - 20px);
       height: calc(100% - 20px);
       overflow: hidden;
       border-radius: 20px;
       box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
   }

   .immersion-canvas {
       width: 100%;
       height: 100%;
       display: block;
   }

   /* 4. Smart Form (Bento Composition) */
   .smart-form-container {
       width: 100%;
       height: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
       background: #0f172a;
   }

   .smart-bento-grid {
       width: 500px;
       height: 420px;
       display: grid;
       grid-template-columns: 1fr 1fr;
       grid-template-rows: 1fr 1fr;
       gap: 16px;
       padding: 12px;
   }

   .bento-card {
       background: rgba(30, 41, 59, 0.6);
       border: 1px solid rgba(255, 255, 255, 0.1);
       border-radius: 16px;
       backdrop-filter: blur(10px);
       overflow: hidden;
       position: relative;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
       animation: bentoFloat 4s ease-in-out infinite;
   }

   .bento-card.chat {
       /* grid-column: 1 / -1; removed to allow side-by-side */
       grid-column: 1;
       grid-row: 1 / span 2;
       background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));
       display: flex;
       flex-direction: column;
       justify-content: flex-start;
       /* Changed from center to accommodate header */
       padding: 16px;
   }

   .bento-card.login {
       grid-column: 2;
       grid-row: 1;
       animation-delay: 1s;
       padding: 16px;
       display: flex;
       flex-direction: column;
       justify-content: center;
       gap: 10px;
   }

   .bento-card.rating {
       grid-column: 2;
       grid-row: 2;
       animation-delay: 2s;
       background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(30, 41, 59, 0.6));
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
   }

   @keyframes bentoFloat {

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

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

   /* Internal Elements */
   .bento-chat-msg {
       background: rgba(255, 255, 255, 0.1);
       padding: 8px 12px;
       border-radius: 12px;
       border-bottom-left-radius: 2px;
       font-size: 0.85rem;
       margin-bottom: 10px;
       width: fit-content;
   }

   .bento-chat-msg.user {
       background: var(--accent-primary);
       color: white;
       align-self: flex-end;
       border-bottom-left-radius: 12px;
       border-bottom-right-radius: 2px;
   }

   .bento-input {
       height: 32px;
       background: rgba(0, 0, 0, 0.3);
       border-radius: 8px;
       border: 1px solid rgba(255, 255, 255, 0.1);
   }

   .bento-btn {
       height: 32px;
       background: white;
       color: black;
       border-radius: 8px;
       font-weight: 700;
       font-size: 0.7rem;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   /* Animation Utils */
   .fade-enter {
       animation: fadeIn 0.4s ease forwards;
   }

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

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

   /* --- Theme Option C: Explosion --- */
   .preview-theme-burst {
       width: 320px;
       height: 480px;
       background: #1e293b;
       border-radius: 24px;
       position: relative;
       overflow: hidden;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       border: 1px solid rgba(255, 255, 255, 0.1);
   }

   .theme-burst-btn {
       width: 80px;
       height: 80px;
       border-radius: 50%;
       background: var(--accent-primary);
       border: none;
       cursor: pointer;
       z-index: 10;
       box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
       transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 2rem;
   }

   .theme-burst-btn:active {
       transform: scale(0.9);
   }

   .theme-ripple {
       position: absolute;
       border-radius: 50%;
       transform: scale(0);
       opacity: 1;
       pointer-events: none;
       animation: rippleExpand 0.8s ease-out forwards;
   }

   @keyframes rippleExpand {
       to {
           transform: scale(30);
           opacity: 0;
       }
   }

   /* Form Elements (Continue) */
   .mini-label {
       font-size: 0.7rem;
       color: var(--text-muted);
       margin-bottom: 6px;
       display: block;
       text-transform: uppercase;
       letter-spacing: 0.5px;
   }

   .mini-input-box {
       height: 36px;
       background: rgba(0, 0, 0, 0.3);
       border-radius: 8px;
       display: flex;
       align-items: center;
       padding: 0 12px;
       border: 1px solid rgba(255, 255, 255, 0.1);
       margin-bottom: 12px;
   }

   .mini-typing-cursor {
       width: 2px;
       height: 16px;
       background: var(--accent-primary);
       animation: blink 1s infinite;
   }

   @keyframes blink {
       50% {
           opacity: 0;
       }
   }

   .mini-btn {
       height: 36px;
       background: var(--accent-primary);
       border-radius: 8px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 0.8rem;
       font-weight: 600;
       color: white;
       box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
   }

   /* Fake Input "Typing" */
   .mini-input-text {
       font-size: 0.9rem;
       color: white;
   }

   .preview-aurora .light-1 {
       top: -10%;
       left: -10%;
       width: 70%;
       height: 70%;
       background: radial-gradient(circle, #4f46e5, transparent);
       animation-delay: 0s;
   }

   .preview-aurora .light-2 {
       bottom: -10%;
       right: -10%;
       width: 80%;
       height: 80%;
       background: radial-gradient(circle, #22c55e, transparent);
       animation-delay: -2s;
   }

   .preview-aurora .light-3 {
       top: 30%;
       left: 30%;
       width: 60%;
       height: 60%;
       background: radial-gradient(circle, #db2777, transparent);
       animation-delay: -4s;
       mix-blend-mode: lighten;
   }

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

       100% {
           transform: translate(40px, -40px) scale(1.1);
       }
   }

   /* 4. Chat Preview */
   .preview-chat {
       width: 320px;
       height: 480px;
       background: rgba(30, 41, 59, 0.95);
       /* Semi-transparent */
       backdrop-filter: blur(12px);
       /* Glassmorphism */
       border-radius: 24px;
       overflow: hidden;
       display: flex;
       flex-direction: column;
       border: 1px solid rgba(255, 255, 255, 0.15);
       box-shadow: 0 25px 50px -5px rgba(0, 0, 0, 0.5);
   }

   .preview-chat .chat-messages {
       flex: 1;
       padding: 24px;
       display: flex;
       flex-direction: column;
       justify-content: flex-end;
       gap: 12px;
   }

   .preview-chat .chat-message {
       opacity: 0;
       transform: translateY(20px) scale(0.9);
       padding: 14px 18px;
       border-radius: 18px;
       font-size: 14px;
       line-height: 1.5;
       max-width: 85%;
       box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
   }

   .preview-chat .chat-message.show {
       opacity: 1;
       transform: translateY(0) scale(1);
       transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
   }

   .preview-chat .chat-message.bot {
       background: rgba(255, 255, 255, 0.08);
       color: white;
       align-self: flex-start;
       border-bottom-left-radius: 4px;
   }

   .preview-chat .chat-message.user {
       background: var(--accent-primary, #6366f1);
       color: white;
       align-self: flex-end;
       border-bottom-right-radius: 4px;
       box-shadow: 0 5px 15px rgba(99, 102, 241, 0.4);
       /* Glow for user msg */
   }

   /* 5. Counter Preview */
   .preview-counter {
       padding: 50px;
       background: rgba(30, 41, 59, 0.8);
       backdrop-filter: blur(10px);
       border-radius: 30px;
       text-align: center;
       border: 1px solid rgba(255, 255, 255, 0.1);
       box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
       min-width: 280px;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
   }

   .preview-counter .counter-big-icon {
       font-size: 5rem;
       margin-bottom: 1.5rem;
       display: inline-block;
       filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.2));
       animation: bounce 2s infinite cubic-bezier(0.28, 0.84, 0.42, 1);
   }

   .preview-counter .counter-big-value {
       font-size: 5rem;
       /* Bigger */
       font-weight: 800;
       line-height: 1;
       background: linear-gradient(135deg, #fff, #94a3b8);
       -webkit-background-clip: text;
       background-clip: text;
       -webkit-text-fill-color: transparent;
       margin-bottom: 0.5rem;
       font-variant-numeric: tabular-nums;
       letter-spacing: -2px;
   }

   /* Carousel Transitions - Premium Feel */
   .carousel-slide {
       transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
       transform: scale(0.95) translateY(10px);
       /* Start slightly small/lower */
   }

   .carousel-slide.active {
       opacity: 1;
       transform: scale(1) translateY(0);
       /* Bloom into place */
   }

   /* --- DOM Cloning Carousel Styles --- */
   .clone-container {
       width: 100%;
       height: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
       overflow: hidden;
   }

   .clone-scale-wrapper {
       transform: scale(0.6);
       /* Sweet spot for modal content */
       transform-origin: center center;
       /* Let content determine size naturally */
   }

   .carousel-clone {
       /* Cloned elements inherit their original styles */
       pointer-events: none;
       /* Disable interaction in carousel */
   }

   /* Specific adjustments for cloned content types */
   .carousel-clone.theme-device-mockup {
       /* Theme mockups are already sized well */
       min-width: 400px;
   }

   .carousel-clone.chat-interface {
       /* Chat needs explicit size */
       width: 400px;
       height: 550px;
   }

   .carousel-clone.scroll-fade-images {
       /* Parallax grid */
       width: 450px;
   }

   /* Ensure chat messages appear properly in clone */
   .carousel-clone .chat-message {
       opacity: 0;
       transform: translateY(20px) scale(0.9);
       transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
   }

   .carousel-clone .chat-message.show {
       opacity: 1;
       transform: translateY(0) scale(1);
   }

   /* ============================================
   Feature Showcase Split Layout (High Specificity)
   ============================================ */
   .feature-showcase .feature-split-layout {
       display: grid !important;
       grid-template-columns: 400px 1fr !important;
       gap: var(--space-8) !important;
       align-items: start;
   }

   .feature-showcase .feature-list {
       display: flex !important;
       flex-direction: column !important;
       gap: var(--space-3) !important;
   }

   @media (max-width: 1024px) {
       .feature-showcase .feature-split-layout {
           grid-template-columns: 1fr !important;
           gap: var(--space-6) !important;
       }

       .feature-showcase .live-preview-container {
           min-height: 400px;
       }
   }

   /* ============================================
   Feature Showcase Split Layout (Restored)
   ============================================ */
   .feature-showcase .feature-split-layout {
       display: grid !important;
       grid-template-columns: 400px 1fr !important;
       gap: 3rem !important;
       align-items: start;
   }

   .feature-showcase .feature-list {
       display: flex !important;
       flex-direction: column !important;
       gap: 1rem !important;
       width: 100% !important;
       /* Ensure list takes full column width */
   }

   .feature-showcase .live-preview-container {
       width: 100% !important;
       height: 100% !important;
       min-height: 600px;
       /* Ensure height for carousel */
   }

   @media (max-width: 1024px) {
       .feature-showcase .feature-split-layout {
           grid-template-columns: 1fr !important;
           gap: 2rem !important;
       }
   }

   /* ============================================
   GIANT TABS LAYOUT (25/75 Split - Maximized Preview)
   ============================================ */
   .feature-showcase .feature-split-layout {
       display: grid !important;
       grid-template-columns: 280px 1fr !important;
       /* Narrower tabs, maximum content space */
       gap: 2.5rem !important;
       align-items: stretch !important;
       /* Stretch to fill height */
   }

   /* LEFT: Interactive Tabs */
   .feature-list {
       display: flex !important;
       flex-direction: column !important;
       gap: 1rem !important;
       justify-content: center;
       /* Center tabs vertically */
   }

   /* Tab Item Style */
   .feature-compact-card {
       border-left: 3px solid transparent;
       border-radius: var(--radius-lg);
       background: transparent;
       /* Cleaner look */
       border: none;
       /* Remove old border */
       transition: all 0.3s ease;
       padding: 1.5rem;
       opacity: 0.6;
   }

   .feature-compact-card:hover {
       background: var(--surface-hover);
       opacity: 0.8;
       transform: translateX(5px);
   }

   .feature-compact-card.active {
       background: var(--surface-card);
       border-left: 3px solid var(--accent-primary);
       opacity: 1;
       box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3);
       transform: translateX(10px);
   }

   .feature-compact-card.active .feature-compact-icon {
       background: var(--accent-primary);
       color: white;
   }

   /* RIGHT: Content Area (Invisible 3D Stage) */
   .live-preview-container {
       height: auto !important;
       min-height: 700px !important;
       width: 100% !important;
       max-width: none !important;
       position: relative;
       /* overflow: hidden;  <-- Remove to allow 3D pop */
       background: transparent;
       /* Invisible Stage */
       border-radius: 0;
       border: none;
       box-shadow: none;
       perspective: 1200px;
       /* Deep 3D Space */
   }

   /* Tab Content Logic */
   .carousel-slide {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       opacity: 0;
       transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
       /* Smoother */
       transform: scale(0.9) translateZ(-50px);
       /* Push back */
       pointer-events: none;
       z-index: 0;
       display: flex;
       align-items: center;
       justify-content: center;
       transform-style: preserve-3d;
   }

   .carousel-slide.active {
       opacity: 1;
       transform: scale(1) translateZ(0);
       pointer-events: auto;
       z-index: 10;
   }

   /* Enhance Active Shadow for Pop */
   .carousel-slide.active .carousel-generic-size {
       box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.1);
   }

   /* Scale Wrapper Update (GIANT SIZE) */
   .clone-scale-wrapper {
       transform: scale(0.85);
       /* BIGGER IS BETTER */
       transform-origin: center center;
       width: 117%;
       /* 1 / 0.85 */
       height: 117%;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   @media (max-width: 1024px) {
       .feature-showcase .feature-split-layout {
           grid-template-columns: 1fr !important;
           gap: 2rem !important;
       }

       .feature-list {
           flex-direction: row !important;
           /* Horizontal tabs on mobile */
           overflow-x: auto;
           padding-bottom: 1rem;
       }

       .feature-compact-card {
           min-width: 250px;
           /* Cards slide on mobile */
       }
   }

   /* --- Preview See More Button --- */
   /* --- Persistent Overlay Button (Fixed Position) --- */
   .preview-overlay-btn {
       position: absolute;
       bottom: 30px;
       right: 30px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 0.75rem;
       padding: 0 1.5rem;
       /* Height controlled by line-height/flex */
       height: 50px;
       /* Premium Glass Effect */
       background: var(--bg-glass);
       backdrop-filter: blur(20px);
       -webkit-backdrop-filter: blur(20px);
       border: 1px solid var(--border-subtle);
       border-radius: 100px;
       color: var(--text-primary);
       font-weight: 500;
       font-size: 0.95rem;
       cursor: pointer;
       z-index: 50;
       /* Higher than slides */
       transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
       width: 240px;
       /* Fixed width for stability - User Request */
       box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3);
       overflow: hidden;
       pointer-events: auto;
   }

   .preview-overlay-btn:hover {
       background: var(--bg-glass-strong);
       border-color: var(--border-medium);
       transform: translateY(-2px);
       box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.4);
   }

   .preview-overlay-btn .static-text {
       flex-shrink: 0;
       font-weight: 600;
       color: rgba(255, 255, 255, 0.9);
   }

   .preview-overlay-btn .dynamic-text-wrapper {
       flex-grow: 1;
       display: flex;
       justify-content: flex-start;
       overflow: hidden;
       height: 20px;
       /* Constrain height */
       position: relative;
       mask-image: linear-gradient(to right, black 90%, transparent 100%);
   }

   .preview-overlay-btn .dynamic-text {
       display: block;
       color: var(--accent-primary, #6366f1);
       font-weight: 700;
       white-space: nowrap;
       transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.5s ease;
       transform: translateY(0);
       opacity: 1;
       width: 100%;
   }

   /* Animation State */
   .preview-overlay-btn .dynamic-text.hidden {
       transform: translateY(100%);
       opacity: 0;
   }

   .preview-overlay-btn .dynamic-text.incoming {
       transform: translateY(-100%);
       opacity: 0;
   }

   .preview-overlay-btn svg {
       flex-shrink: 0;
       transition: transform 0.3s ease;
   }

   .preview-overlay-btn:hover svg {
       transform: translateX(4px);
   }

   .preview-see-more-btn:hover {
       background: white;
       color: var(--bg-primary);
       transform: translateY(-2px);
       box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
   }

   .preview-see-more-btn svg {
       transition: transform 0.3s ease;
   }

   .preview-see-more-btn:hover svg {
       transform: translateX(3px);
   }

   /* --- Uniform Sizing for Carousel --- */
   /* --- Uniform Sizing for Carousel (STANDARD FRAME) --- */
   .carousel-generic-size {
       width: 620px !important;
       height: 760px !important;
       max-width: 100%;
       border-radius: 24px;
       /* More rounded */
       overflow: hidden;
       position: relative;
       box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.6);
       background: #0f172a;
       display: flex;
       /* Center content */
       align-items: center;
       justify-content: center;
   }

   /* Force Cloned Children to Fill Frame */
   .carousel-clone.theme-device-mockup,
   .carousel-clone.chat-interface,
   .carousel-clone.scroll-fade-images,
   .carousel-clone.preview-bg-frame,
   .carousel-clone.counter-big-card {
       width: 100% !important;
       height: 100% !important;
       min-width: 0 !important;
       min-height: 0 !important;
       margin: 0 !important;
       border: none !important;
       border-radius: 0 !important;
       /* Frame handles radius */
       transform: none !important;
       /* Remove internal scaling */
       box-shadow: none !important;
       /* Frame handles shadow */
   }

   /* Internal fix for Mockup inside clone */
   .carousel-clone .theme-header {
       padding: 1rem;
   }

   .carousel-clone .theme-hero {
       padding: 2rem 1rem;
   }

   /* --- 3. Neon Background Preview --- */
   .preview-bg-frame.bg-neon {
       background: #050505;
       position: absolute;
       inset: 0;
       width: 100%;
       height: 100%;
       overflow: hidden;
       display: flex;
       align-items: center;
       justify-content: center;
       perspective: 1000px;
   }

   .neon-grid {
       position: absolute;
       width: 200%;
       height: 200%;
       background-image:
           linear-gradient(rgba(92, 35, 217, 0.3) 1px, transparent 1px),
           linear-gradient(90deg, rgba(92, 35, 217, 0.3) 1px, transparent 1px);
       background-size: 40px 40px;
       transform: rotateX(60deg) translateY(-20%) translateZ(-100px);
       animation: neonGridMove 20s linear infinite;
       mask-image: linear-gradient(to bottom, transparent 0%, black 40%, black 100%);
   }

   .neon-circle {
       width: 150px;
       height: 150px;
       border-radius: 50%;
       border: 4px solid #fff;
       box-shadow:
           0 0 20px #fff,
           0 0 40px #5C23D9,
           0 0 80px #5C23D9,
           0 0 120px #5C23D9,
           inset 0 0 40px rgba(92, 35, 217, 0.5);
       animation: neonPulse 3s infinite alternate ease-in-out;
       position: relative;
       z-index: 10;
   }

   @keyframes neonGridMove {
       0% {
           transform: rotateX(60deg) translateY(0) translateZ(-100px);
       }

       100% {
           transform: rotateX(60deg) translateY(40px) translateZ(-100px);
       }
   }

   @keyframes neonPulse {
       0% {
           transform: scale(1);
           box-shadow: 0 0 20px #fff, 0 0 40px #5C23D9, 0 0 60px #5C23D9;
       }

       100% {
           transform: scale(1.1);
           box-shadow: 0 0 30px #fff, 0 0 60px #5C23D9, 0 0 90px #5C23D9, 0 0 140px #5C23D9;
       }
   }

   /* --- 6. Particles Background Preview (New) --- */
   .preview-bg-frame.bg-particles {
       background: #0f172a;
       /* Dark Blue Base */
       position: absolute;
       inset: 0;
       width: 100%;
       height: 100%;
       overflow: hidden;
       border-radius: 20px;
       box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
   }

   .particle-dot {
       position: absolute;
       width: 6px;
       height: 6px;
       background: white;
       border-radius: 50%;
       opacity: 0;
       /* Start hidden for fade-in */
       animation: particleFloat linear infinite;
       filter: blur(1px);
   }

   @keyframes particleFloat {
       0% {
           transform: translateY(0) scale(0.8);
           opacity: 0;
       }

       20% {
           opacity: 0.8;
       }

       80% {
           opacity: 0.8;
       }

       100% {
           transform: translateY(-60px) scale(1.2);
           /* Drift Up */
           opacity: 0;
       }
   }

   /* --- 7. Infinite Scroll Preview (New) --- */
   .preview-infinite-scroll {
       display: flex;
       gap: 20px;
       padding: 20px;
       box-sizing: border-box;
       overflow: hidden;
       /* Hide overflow */
       background: #0f172a;
       position: relative;
       border-radius: 20px;
   }

   /* Vignette Overlay for smooth edges */
   .preview-infinite-scroll::after {
       content: '';
       position: absolute;
       inset: 0;
       pointer-events: none;
       background: linear-gradient(to bottom, #0f172a 0%, transparent 20%, transparent 80%, #0f172a 100%);
       z-index: 2;
   }

   .scroll-col {
       flex: 1;
       display: flex;
       flex-direction: column;
       gap: 20px;
       will-change: transform;
   }

   .scroll-col.col-left {
       animation: scrollVertical 20s linear infinite;
   }

   /* Right column moves slower/different phase */
   .scroll-col.col-right {
       animation: scrollVertical 25s linear infinite reverse;
   }

   .scroll-preview-card {
       width: 100%;
       border-radius: 12px;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
       flex-shrink: 0;
       /* Prevent squashing */
   }

   @keyframes scrollVertical {
       0% {
           transform: translateY(0);
       }

       100% {
           transform: translateY(-50%);
       }

   }

   /* Assumes content is doubled for loop */
   .chart-bar-col {
       transform-origin: bottom;
       animation: barBreathe 3s infinite alternate ease-in-out;
   }

   @keyframes barBreathe {
       0% {
           transform: scaleY(1);
       }

       50% {
           transform: scaleY(1.3);
       }

       100% {
           transform: scaleY(0.9);
       }
   }

   /* PULSE LIVE STATUS ANIMATION */
   .chart-viz-pulse {
       width: 100%;
       height: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
       position: relative;
       background: rgba(255, 255, 255, 0.03);
       border-radius: 12px;
   }

   .pulse-dot {
       width: 24px;
       height: 24px;
       border-radius: 50%;
       position: relative;
       z-index: 2;
   }

   .pulse-ring {
       position: absolute;
       width: 24px;
       height: 24px;
       border-radius: 50%;
       border: 3px solid;
       /* color set inline */
       opacity: 0;
       z-index: 1;
       animation: pulseRing 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
   }

   @keyframes pulseRing {
       0% {
           transform: scale(0.5);
           opacity: 1;
       }

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

   /* FORM UX ANIMATIONS */
   @keyframes messagePop {
       0% {
           opacity: 0;
           transform: translateY(10px) scale(0.9);
       }

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

   .chat-message.show {
       animation: messagePop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
   }

   .chat-input-area button {
       animation: sendPulse 2s infinite;
   }

   @keyframes sendPulse {
       0% {
           transform: scale(1);
           box-shadow: 0 0 0 0 rgba(124, 77, 255, 0.7);
       }

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

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

   .typing-indicator {
       padding: 10px;
       background: rgba(255, 255, 255, 0.1);
       border-radius: 12px;
       display: inline-flex;
       gap: 4px;
       margin-bottom: 10px;
       align-self: flex-start;
       animation: messagePop 0.3s ease forwards;
   }

   .typing-dot {
       width: 6px;
       height: 6px;
       background: #bbb;
       border-radius: 50%;
       animation: typingBounce 1.4s infinite ease-in-out both;
   }

   .typing-dot:nth-child(1) {
       animation-delay: -0.32s;
   }

   .typing-dot:nth-child(2) {
       animation-delay: -0.16s;
   }

   @keyframes typingBounce {

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

       40% {
           transform: scale(1);
       }
   }

   /* PAUSE BUTTON STYLE */
   .hover-pause-btn {
       position: absolute;
       bottom: 30px;
       left: 30px;
       /* Opposite side */
       display: flex;
       align-items: center;
       gap: 12px;
       padding: 12px 20px;
       background: rgba(15, 23, 42, 0.6);
       backdrop-filter: blur(12px);
       border: 1px solid rgba(255, 255, 255, 0.1);
       border-radius: 100px;
       color: rgba(255, 255, 255, 0.8);
       font-weight: 500;
       cursor: default;
       /* Not clickable */
       transition: all 0.3s ease;
       z-index: 20;
       pointer-events: auto;
   }

   .hover-pause-btn:hover {
       background: rgba(15, 23, 42, 0.9);
       border-color: rgba(16, 185, 129, 0.5);
       color: #fff;
       transform: translateY(-2px);
       box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
   }

   .hover-pause-btn svg {
       opacity: 0.7;
   }

   .hover-pause-btn:hover svg {
       opacity: 1;
       color: #10b981;
   }

   @media (max-width: 768px) {
       .hover-pause-btn {
           bottom: 90px;
           left: 50%;
           transform: translateX(-50%);
           width: max-content;
           padding: 8px 16px;
           font-size: 14px;
       }

       .hover-pause-btn:hover {
           transform: translateX(-50%) translateY(-2px);
       }
   }

   /* CHAT PREVIEW ENHANCEMENTS */
   .chat-chips-container {
       display: flex;
       gap: 8px;
       padding: 0 16px;
       margin-bottom: 10px;
       justify-content: flex-end;
       animation: messagePop 0.3s ease forwards;
   }

   .chat-chip {
       background: rgba(124, 77, 255, 0.15);
       border: 1px solid rgba(124, 77, 255, 0.3);
       color: #ceb3ff;
       padding: 6px 12px;
       border-radius: 16px;
       font-size: 12px;
       cursor: default;
       transition: all 0.2s;
   }

   .chat-message .highlight {
       color: #10b981;
       /* Green highlight for numbers/money */
       font-weight: 600;
       background: rgba(16, 185, 129, 0.1);
       padding: 0 4px;
       border-radius: 4px;
   }

   .mock-nav span {
       transition: opacity 0.3s ease;
   }

   /* FORM CARD ANIMATIONS */

   /* Login Card */
   .bento-input.filled::after {
       content: '••••••••';
       color: var(--text-primary);
       font-size: 10px;
       letter-spacing: 2px;
       line-height: 24px;
       padding-left: 8px;
       animation: typeDots 0.5s steps(8) forwards;
   }

   @keyframes typeDots {
       from {
           width: 0;
           opacity: 0;
       }

       to {
           width: 100%;
           opacity: 1;
       }
   }

   .bento-btn {
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }

   .bento-btn.loading {
       width: 24px;
       height: 24px;
       border-radius: 50%;
       color: transparent;
       border: 2px solid rgba(255, 255, 255, 0.3);
       border-top-color: #fff;
       animation: spin 1s linear infinite;
       padding: 0;
   }

   .bento-btn.success {
       background: #10b981 !important;
       width: 100%;
       border-radius: 4px;
       color: #fff;
       animation: successPulse 0.4s ease;
   }

   @keyframes successPulse {
       0% {
           transform: scale(0.9);
       }

       50% {
           transform: scale(1.05);
       }

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

   /* Review Card */
   .bento-card.rating .stars {
       display: inline-flex;
       gap: 2px;
   }

   .star-pop {
       opacity: 0;
       transform: scale(0);
       animation: starPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
   }

   @keyframes starPop {
       to {
           opacity: 1;
           transform: scale(1);
       }
   }