.landing-page {
    padding-top: 10px;
}

/* Hero Section with Parallax */
.hero-section {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    padding: 48px 20px 56px;
}

/* Single Product Styles */
.product-showcase {
    background: linear-gradient(135deg, rgba(20, 0, 40, 0.7), rgba(40, 0, 60, 0.9));
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 0 25px rgba(255, 0, 255, 0.3);
    position: relative;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

.product-image-container {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.3);
    border: 1px solid rgba(255, 0, 255, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: glow-pulse 3s infinite ease-in-out;
    touch-action: pan-y;
    user-select: none;
    position: relative;
    overflow: hidden;
}

@keyframes glow-pulse {
    0% {
        box-shadow: 0 0 15px rgba(255, 0, 255, 0.3);
    }
    50% {
        box-shadow: 0 0 25px rgba(0, 255, 255, 0.5);
    }
    100% {
        box-shadow: 0 0 15px rgba(255, 0, 255, 0.3);
    }
}

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

.product-image {
    width: 100%;
    border-radius: 5px;
    max-height: 600px;
    object-fit: contain;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.no-image {
    background: linear-gradient(135deg, #2a0055, #4a0077);
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    border-radius: 5px;
    color: #fff;
}

/* Trust Labels Under Image */
.trust-labels {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-top: 10px;
    margin-bottom: 0; /* Added to reduce space below trust labels */
}

.trust-label {
    display: flex;
    align-items: center;
    font-family: Arial, sans-serif;
    font-size: 0.9rem;
    color: #fff;
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
}

.trust-label i {
    margin-right: 5px;
    font-size: 1rem; /* Default size for mobile */
}

.trust-label:nth-child(1) i {
    color: #ff00ff;
    text-shadow: 0 0 5px #ff00ff;
}

.trust-label:nth-child(2) i {
    color: #00ffff;
    text-shadow: 0 0 5px #00ffff;
}

.trust-label:nth-child(3) i {
    color: #ff00ff;
    text-shadow: 0 0 5px #ff00ff;
}

@media (min-width: 768px) {
    .trust-label {
        font-size: 1rem;
    }
    .trust-label i {
        font-size: 1.2rem; /* Larger size for desktop */
        margin-right: 8px;
    }
    .trust-labels {
        gap: 20px;
    }
}

.product-details {
    font-family: Arial, sans-serif;
    padding: 10px;
}

@media (min-width: 768px) {
    .product-details {
        margin-left: -20px;
    }
}

.description-wrapper {
    background: rgba(0, 0, 0, 0.2);
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.2);
}

.description-text {
    overflow-wrap: break-word;
    color: #fff;
    word-break: break-word; /* Ensure text wraps properly */
}

.description-text strong {
    color: #ff00ff;
    text-shadow: 0 0 5px #ff00ff;
}

.price-container {
    font-size: 2rem;
    font-weight: bold;
    color: #00ffff;
    text-shadow: 0 0 8px #00ffff;
}

/* Star Rating Styles */
.star-rating {
    font-size: 1.8rem;
    margin-left: 10px;
    display: flex;
    align-items: center;
}

.star-rating i {
    margin-right: 2px;
}

.star-rating span {
    font-size: 0.9rem;
    color: #fff;
    margin-left: 5px;
}

/* Responsive adjustments for star ratings */
@media (max-width: 767px) {
    .star-rating {
        font-size: 1.5rem;
        margin-left: 8px;
    }
    .star-rating span {
        font-size: 0.8rem;
    }
}

@media (max-width: 576px) {
    .star-rating {
        font-size: 1.2rem;
        margin-left: 5px;
    }

    .star-rating i {
        margin-right: 1px;
    }
    .star-rating span {
        font-size: 0.7rem;
    }
}

.features ul li {
    display: flex;
    align-items: center; /* Changed to center to keep icon and text aligned */
    margin-bottom: 10px;
    font-size: 1.1rem;
    white-space: nowrap; /* Prevent text from wrapping */
}

.features ul li i {
    margin-right: 10px;
    color: #ff00ff;
    flex-shrink: 0;
    margin-top: 0; /* Remove top margin to align with text */
    width: 24px; /* Slightly increased width to give more space */
    text-align: center;
}

.features ul li span {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Thumbnail Gallery Styles - Enhanced for mobile */
.thumbnail-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 0;
}

.thumbnail-item {
    display: inline-block;
    margin: 0 5px;
    border: 2px solid transparent;
    border-radius: 5px;
    overflow: hidden;
    width: 60px;
    height: 60px;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    position: relative;
    opacity: 0.7;
    box-shadow: none;
    will-change: box-shadow, border-color, opacity;
    touch-action: manipulation; /* Reduce touch event optimizations */
}

.thumbnail-item.no-transition {
    transition: none !important;
}

/* Force repaint on mobile by applying a transform hack */
@media (max-width: 767px) {
    .thumbnail-item:not(.active) {
        transform: translateZ(0); /* Force hardware acceleration to trigger repaint */
    }
}

.thumbnail-item:hover, .thumbnail-item.active {
    border-color: #ff00ff;
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.7);
    opacity: 1;
}

.thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 3px;
}

/* Mobile-specific improvements for thumbnail gallery */
@media (max-width: 767px) {
    .thumbnail-item {
        width: 60px;
        height: 60px;
        position: relative;
    }

    .thumbnail-item::before {
        content: '';
        position: absolute;
        top: -5px;
        left: -5px;
        right: -5px;
        bottom: -5px;
        z-index: -1;
    }

    .thumbnail-gallery {
        gap: 12px;
        padding: 5px 0;
    }

    .product-image-container {
        -webkit-user-select: none;
        user-select: none;
        touch-action: pan-y;
    }

    .product-image-container::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 10px;
        right: 10px;
        height: 40px;
        background: linear-gradient(90deg,
            rgba(255, 0, 255, 0.2) 0%,
            rgba(0, 0, 0, 0) 20%,
            rgba(0, 0, 0, 0) 80%,
            rgba(0, 255, 255, 0.2) 100%);
        border-radius: 20px;
        transform: translateY(-50%);
        opacity: 0;
        pointer-events: none;
        animation: swipe-hint 3s ease-in-out 1s;
    }
}

@keyframes swipe-hint {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.7; }
}

/* Further mobile optimization for very small screens */
@media (max-width: 320px) {
    .thumbnail-item {
        width: 50px;
        height: 50px;
    }

    .thumbnail-gallery {
        gap: 8px;
    }
}

/* Why Choose Section */
.why-choose {
    background: none;
    padding: 50px 0;
}

/* Refined content panel. Calmer than the hero / promoter "feature" boxes
   (subtle gradient + hairline border + soft shadow, no grid or heavy glow) so
   stacked sections read as one intentional system, not heavy "box soup".
   A slim magenta->cyan tab at the top gives every panel the brand signature. */
.landing-box {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    padding: clamp(2.25rem, 4.5vw, 3.5rem) clamp(1.4rem, 3vw, 2.75rem);
    background: linear-gradient(180deg, rgba(34, 4, 60, 0.92), rgba(19, 2, 36, 0.92));
    border: 1px solid rgba(187, 134, 252, 0.22);
}

/* Visible by default (no-JS fallback) */
.feature-item {
    display: flex;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Animation only when JS enables it */
.animate-on-scroll .feature-item {
    opacity: 0;
    transform: translateY(20px);
}

.animate-on-scroll .feature-item.visible {
    opacity: 1;
    transform: translateY(0);
}

.feature-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(28, 0, 42, 0.66), rgba(14, 0, 24, 0.66));
    border: 1px solid rgba(255, 0, 255, 0.2);
    border-radius: 16px;
    padding: 2rem 1.6rem;
    box-shadow: inset 0 0 40px rgba(153, 0, 255, 0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    width: 100%;
    height: 100%;
    min-height: 300px; /* Ensure consistent height */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.feature-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, var(--rave-primary, #ff00ff), var(--rave-secondary, #00ffff));
    opacity: 0.85;
}

.feature-card:hover {
    transform: translateY(-5px);
    border-color: rgba(187, 134, 252, 0.5);
    box-shadow: 0 14px 34px rgba(153, 0, 255, 0.28);
}

.feature-card i {
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    margin: 0 auto 1.5rem;
    border-radius: 22px;
    font-size: 2.9rem !important;
    background: linear-gradient(155deg, rgba(255, 0, 255, 0.12), rgba(0, 255, 255, 0.07));
    border: 1px solid rgba(255, 0, 255, 0.28);
    box-shadow: inset 0 0 20px rgba(255, 0, 255, 0.1);
    text-shadow: none;
}

.feature-card h3 {
    font-size: 1.8rem;
    text-shadow: 0 0 8px #ff00ff;
    min-height: 4.3rem; /* reserve two lines so 1- and 2-line titles align */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.feature-card p {
    margin: 0;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    word-break: break-word; /* Ensure text wraps properly */
}

/* CTA Animation */
.cta-button {
    animation: pulse-cta 2s infinite ease-in-out;
}

@keyframes pulse-cta {
    0% {
        box-shadow: 0 0 10px #ff00ff;
    }
    50% {
        box-shadow: 0 0 20px #00ffff;
    }
    100% {
        box-shadow: 0 0 10px #ff00ff;
    }
}

/* Testimonial Section */
.testimonial-section {
    background: none;
    padding: 50px 0;
}

/* Testimonial Carousel Styles */
.testimonial-carousel {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    overflow: hidden; /* Contain the slider content */
    padding: 0 60px; /* Space for controls */
}

.testimonial-slider {
    display: flex;
    transition: transform 0.5s ease;
    width: 100%;
    position: relative;
    min-height: 180px; /* Ensure container has height for absolute positioned children */
}

.testimonial-item {
    flex: 0 0 100%; /* Each item takes full width of the carousel */
    min-width: 100%; /* Ensure items don't shrink */
    padding: 20px;
    box-sizing: border-box;
    animation: fadeIn 0.5s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Prevent content from spilling out */
    position: relative;
}

/* Progressive enhancement: Show first testimonial by default (no JS fallback) */
.testimonial-item {
    opacity: 0;
    position: absolute;
    pointer-events: none;
}

.testimonial-item:first-child {
    opacity: 1;
    position: relative;
    pointer-events: auto;
}

/* When JS carousel is initialized, it controls visibility via active class */
.testimonial-slider.js-initialized .testimonial-item {
    opacity: 0;
    position: absolute;
    pointer-events: none;
}

.testimonial-slider.js-initialized .testimonial-item.active {
    opacity: 1;
    position: relative;
    pointer-events: auto;
}

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

.testimonial-text {
    font-family: Arial, sans-serif;
    font-size: 1.1rem;
    color: #fff;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    margin-bottom: 10px;
    word-break: break-word; /* Updated to ensure proper wrapping */
    text-align: center;
}

.blockquote-footer {
    color: #00ffff !important; /* Bright blue with !important to prevent override */
    text-shadow: none;
    font-size: 1.1rem;
    font-weight: 700;
    margin-top: 10px;
    font-style: italic;
    letter-spacing: 0.5px;
    background: transparent; /* Remove background */
    padding: 0; /* Remove padding */
    border-radius: 0;
    display: inline-block;
    border: none; /* Remove border */
    word-break: break-word; /* Ensure text wraps properly */
}

/* Add more specific selectors to ensure our styles take precedence */
.testimonial-item .blockquote-footer,
.testimonial-carousel .blockquote-footer,
footer.blockquote-footer {
    color: #00ffff !important;
    background: transparent;
    border: none;
}

.testimonial-controls {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    z-index: 10;
    width: 100%;
    padding: 0;
}

.testimonial-prev, .testimonial-next {
    background: rgba(255, 0, 255, 0.3);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: white;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
    position: absolute;
    z-index: 20;
}

.testimonial-prev:hover, .testimonial-next:hover {
    background: rgba(255, 0, 255, 0.6);
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.8);
    transform: scale(1.1);
}

.testimonial-prev {
    left: 5px;
}

.testimonial-next {
    right: 5px;
}

/* Pulsing dots to indicate more testimonials */
.testimonial-dots {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0 10px;
}

.testimonial-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 0, 255, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
}

.testimonial-dot.active {
    background: rgba(255, 0, 255, 1);
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.8);
    animation: pulse-dot 1.5s infinite ease-in-out;
}

.testimonial-dot.more-dot {
    background: rgba(0, 255, 255, 0.4);
    position: relative;
    cursor: default;
}

.testimonial-dot.more-dot:after {
    content: "...";
    position: absolute;
    top: -8px;
    left: 0;
    color: #00ffff;
    font-size: 14px;
    text-shadow: 0 0 5px #00ffff;
}

@keyframes pulse-dot {
    0% {
        box-shadow: 0 0 5px rgba(255, 0, 255, 0.5);
    }
    50% {
        box-shadow: 0 0 15px rgba(0, 255, 255, 0.7);
    }
    100% {
        box-shadow: 0 0 5px rgba(255, 0, 255, 0.5);
    }
}

/* Comparison Section */
.comparison-section {
    background: rgba(20, 0, 40, 0.5);
    padding: 50px 0;
}

/* Visible by default (no-JS fallback) */
.comparison-item {
    background: rgba(40, 0, 40, 0.7);
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.2);
    border: 1px solid rgba(255, 0, 255, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.5s ease;
    opacity: 1;
    transform: translateY(0);
}

/* Animation only when JS enables it */
.animate-on-scroll .comparison-item {
    opacity: 0;
    transform: translateY(20px);
}

.animate-on-scroll .comparison-item.visible {
    opacity: 1;
    transform: translateY(0);
}

.comparison-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 25px rgba(255, 0, 255, 0.4);
}

.comparison-item div {
    transition: text-shadow 0.3s ease;
}

.comparison-item:hover div {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

.comparison-item p {
    word-break: break-word; /* Ensure text wraps properly */
}

.glow-icon {
    text-shadow: 0 0 10px currentColor;
    margin-right: 10px; /* Added slight spacing between icon and text */
}

/* Adjust spacing for smaller screens */
@media (max-width: 767px) {
    .glow-icon {
        margin-right: 8px; /* Slightly reduced spacing for mobile */
    }
}

@media (max-width: 576px) {
    .glow-icon {
        margin-right: 6px; /* Further reduced for smaller screens */
    }
}

@media (max-width: 320px) {
    .glow-icon {
        margin-right: 5px; /* Minimal spacing for smallest screens */
    }
}

.neon-text-sub {
    color: #fff;
    text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff;
    font-size: 1.2rem;
    margin-bottom: 5px;
}

/* FAQ Section */
.faq-section {
    background: rgba(20, 0, 40, 0.5);
    padding: 50px 0;
}

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

/* Adjust FAQ width for iPad Pro and Nest devices */
@media (min-width: 768px) and (max-width: 1024px) {
    .faq-list {
        max-width: 90%; /* Allow FAQ to span more on iPad Pro and Nest devices */
    }
}

@media (min-width: 1025px) {
    .faq-list {
        max-width: 1200px; /* Increased width for desktop screens */
    }
}

.faq-item {
    background-color: rgba(40, 0, 40, 0.7);
    border-radius: 15px;
    margin-bottom: 15px;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.2);
}

.faq-question {
    padding: 15px;
    cursor: pointer;
    background: rgba(40, 0, 80, 0.2);
    border-radius: 8px;
    margin-bottom: 5px;
    font-weight: bold;
    position: relative;
    transition: all 0.3s ease;
}

.faq-question .arrow {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}

.faq-answer {
    padding: 0 15px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-answer p {
    padding: 15px 0;
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

/* Final CTA Section */
.final-cta {
    background: none;
    padding: 50px 0;
}

.final-cta p {
    word-break: break-word; /* Ensure text wraps properly */
}

/* Multiple Products Grid */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
}

.product-card {
    background: rgba(20, 0, 40, 0.5);
    border-radius: 15px;
    padding: 20px;
    transition: transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.2);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 25px rgba(255, 0, 255, 0.4);
}

.product-card .product-image-container {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 15px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card .product-image {
    max-height: 200px;
    max-width: 100%;
    object-fit: contain;
}

.product-card .product-name {
    font-size: 1.5rem;
    margin-bottom: 10px;
    text-shadow: 0 0 8px #ff00ff;
}

.product-card .product-price {
    font-size: 1.7rem;
    margin-bottom: 5px;
    color: #00ffff;
    text-shadow: 0 0 8px #00ffff;
}

.product-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-info {
    margin-bottom: 15px;
    flex-grow: 1;
}

.product-actions {
    margin-top: auto;
}

.no-products {
    grid-column: 1 / -1;
    text-align: center;
    padding: 50px;
    font-size: 1.2rem;
}

.no-products p {
    word-break: break-word; /* Ensure text wraps properly */
}

/* Sticky CTA for Mobile */
.sticky-cta {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: none;
    animation: bounce 2s infinite ease-in-out;
}

.sticky-cta .btn {
    font-size: 1rem;
    padding: 10px 20px;
}

@keyframes bounce {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(-10px);
    }
}

/* Responsive Adjustments */
@media (max-width: 767px) {
    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 20px;
    }

    .hero-section {
        padding: 32px 16px 36px;
    }

    .product-showcase {
        padding: 3px; /* Reduced outer padding to allow inner content to span more */
    }

    .product-image-container {
        margin-bottom: 10px; /* Reduced to minimize space */
        max-height: 400px; /* Adjusted height to better fit mobile screens */
        padding: 5px; /* Reduced padding to minimize space around image */
    }

    .product-image {
        max-height: 390px; /* Adjusted to fit within container */
        width: 100%; /* Ensure image takes full width */
        object-fit: contain;
    }

    .no-image {
        height: 400px; /* Match the adjusted height */
    }

    .why-choose h2 {
        font-size: 2rem;
    }

    .description-text {
        font-size: 1.05rem; /* Slightly larger for better readability */
        line-height: 1.5; /* Adjusted for better readability */
        padding: 2px; /* Minimal padding */
        margin: 0; /* Remove any margin that might cause issues */
    }

    .features ul li {
        font-size: 1rem;
        align-items: center; /* Better alignment for icons and text */
        margin-bottom: 8px; /* Reduced spacing for tighter fit */
    }

    .features ul li i {
        margin-right: 8px;
        font-size: 1rem; /* Slightly larger icon for visibility */
        margin-top: 0; /* Remove top margin to align with text */
        width: 20px; /* Adjusted width to fit better */
    }

    .features ul li span {
        font-size: 0.95rem; /* Slightly reduced to fit on one line */
    }

    .sticky-cta {
        display: block;
    }

    .description-wrapper {
        padding: 1px; /* Reduced inner padding to allow text to span more */
    }

    .thumbnail-item {
        width: 60px;
        height: 60px;
    }

    /* Adjust comparison section list items for mobile */
    .comparison-item {
        padding: 5px; /* Minimal padding */
    }

    .comparison-item p {
        font-size: 1.05rem; /* Slightly larger for better readability */
        line-height: 1.5;
        margin: 0; /* Remove margin to prevent overflow */
        padding: 0 2px; /* Minimal padding to allow text to span more */
    }

    /* Adjust feature-card paragraph for mobile */
    .feature-card {
        padding: 10px; /* Reduced padding */
    }

    .feature-card p {
        font-size: 1.05rem; /* Slightly larger for better readability */
        line-height: 1.5;
        padding: 0 2px; /* Minimal padding to allow text to span more */
    }

    /* Adjust testimonial text for mobile */
    .testimonial-text {
        font-size: 1.2rem; /* Prominent size */
        max-height: none; /* Remove max-height to avoid scrollbar */
        overflow-y: visible; /* Remove scrollbar */
        line-height: 1.5;
        padding-right: 0; /* Remove padding-right since no scrollbar */
        padding-left: 2px; /* Minimal padding */
        padding-bottom: 2px;
        margin-bottom: 20px; /* Space between testimonial and name */
        font-weight: 600; /* Added weight to make testimonial stand out */
        text-shadow: 0 0 3px rgba(255, 255, 255, 0.3); /* Subtle shadow to enhance prominence */
    }

    /* Adjust FAQ section for mobile to span more */
    .faq-item {
        padding: 5px; /* Reduced padding to allow content to span more */
    }

    .faq-question {
        padding: 1rem 1.2rem; /* Reduced padding to allow text to span more */
    }

    .faq-answer p {
        padding: 1rem 1.2rem; /* Reduced padding to allow text to span more */
        font-size: 1.05rem; /* Slightly larger for better readability */
        line-height: 1.5;
    }

    /* Adjust hero-content for mobile to make text span more */
    .hero-content {
        max-width: 100%; /* Allow full width */
        padding: 0 2px; /* Reduced inner padding to allow text to span closer to edges */
    }

    .hero-content .lead {
        font-size: 1.05rem; /* Slightly larger for better readability */
        line-height: 1.5; /* Adjusted for better readability */
        padding: 0; /* Remove padding to allow text to span wider */
        width: 100%; /* Ensure it takes full available width */
        word-break: break-word; /* Ensure text wraps properly */
    }
}

@media (max-width: 576px) {
    .hero-section {
        padding: 28px 12px 32px;
    }

    .hero-content .lead {
        font-size: 1rem; /* Adjusted for smaller screens */
        line-height: 1.4; /* Adjusted for better readability */
        padding: 0; /* Ensure no padding restricts width */
    }

    .product-details h2 {
        font-size: 1.5rem;
    }

    .price-container {
        font-size: 1.5rem;
    }

    .features ul li {
        font-size: 0.95rem; /* Slightly reduced for smaller screens */
        margin-bottom: 6px; /* Further reduced spacing */
    }

    .features ul li i {
        margin-right: 8px;
        font-size: 0.95rem; /* Adjusted icon size */
        margin-top: 0;
        width: 18px; /* Adjusted width to fit better */
    }

    .features ul li span {
        font-size: 0.9rem; /* Further reduced to fit on one line */
    }

    .description-text {
        font-size: 1rem; /* Adjusted for smaller screens */
        line-height: 1.4; /* Adjusted for better readability */
        padding: 1px; /* Minimal padding for smaller screens */
    }

    .star-rating {
        font-size: 1.7rem;
    }

    .product-image-container {
        margin-bottom: 8px; /* Further reduced to minimize space */
        max-height: 300px; /* Adjusted height for smaller screens */
        padding: 3px; /* Reduced padding to minimize space around image */
    }

    .product-image {
        max-height: 290px; /* Adjusted to fit within container */
        width: 100%; /* Ensure image takes full width */
        object-fit: contain;
    }

    .no-image {
        height: 300px; /* Match the adjusted height */
    }

    .thumbnail-item {
        width: 50px;
        height: 50px;
    }

    /* Adjust comparison section for smaller screens */
    .comparison-item {
        padding: 3px; /* Reduced padding */
    }

    .comparison-item p {
        font-size: 1rem; /* Adjusted for smaller screens */
        line-height: 1.4;
        padding: 0 1px; /* Reduced padding */
    }

    /* Adjust feature-card paragraph for smaller screens */
    .feature-card {
        padding: 8px; /* Reduced padding */
    }

    .feature-card p {
        font-size: 1rem; /* Adjusted for smaller screens */
        line-height: 1.4;
        padding: 0 1px; /* Reduced padding */
    }

    /* Adjust testimonial text for smaller screens */
    .testimonial-text {
        font-size: 1.15rem; /* Slightly smaller but still prominent */
        line-height: 1.4;
        padding-right: 0;
        padding-left: 1px; /* Reduced padding */
        padding-bottom: 1px;
        margin-bottom: 18px; /* Space between testimonial and name */
        font-weight: 600;
        text-shadow: 0 0 3px rgba(255, 255, 255, 0.3);
    }

    /* Adjust FAQ section for smaller screens */
    .faq-item {
        padding: 3px; /* Further reduced padding */
    }

    .faq-question {
        padding: 0.8rem 1rem; /* Further reduced padding */
    }

    .faq-answer p {
        padding: 0.8rem 1rem; /* Further reduced padding */
        font-size: 1rem; /* Adjusted for smaller screens */
        line-height: 1.4;
    }

    .blockquote-footer {
        font-size: 0.85rem; /* Smaller than testimonial text */
        padding: 0;
        margin-top: 12px; /* Space between testimonial and name */
        letter-spacing: 0.2px; /* Reduced letter spacing */
        max-width: none; /* Remove width constraint */
        margin-left: 0;
        margin-right: 0;
        text-shadow: none;
        background: transparent;
        border: none;
        font-weight: 700; /* Bold weight */
    }

    .testimonial-carousel {
        padding: 0 10px; /* Reduced padding */
    }

    .testimonial-prev, .testimonial-next {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }
}

@media (max-width: 320px) {
    .hero-section {
        padding: 24px 10px 28px;
    }

    .features ul li {
        font-size: 0.9rem; /* Further reduced for very small screens */
        margin-bottom: 5px; /* Further reduced spacing */
    }

    .features ul li i {
        margin-right: 6px;
        font-size: 0.9rem;
        width: 16px; /* Adjusted width to fit better */
    }

    .features ul li span {
        font-size: 0.85rem; /* Further reduced to fit on one line */
    }

    .description-text {
        font-size: 0.95rem; /* Further reduced for very small screens */
        line-height: 1.3; /* Adjusted for very small screens */
        padding: 0; /* No padding for smallest screens */
    }

    /* Adjust comparison section for very small screens */
    .comparison-item {
        padding: 2px; /* Minimal padding */
    }

    .comparison-item p {
        font-size: 0.95rem; /* Further reduced for very small screens */
        line-height: 1.3;
        padding: 0; /* No padding for smallest screens */
    }

    /* Adjust feature-card paragraph for very small screens */
    .feature-card {
        padding: 5px; /* Minimal padding */
    }

    .feature-card p {
        font-size: 0.95rem; /* Further reduced for very small screens */
        line-height: 1.3;
        padding: 0; /* No padding for smallest screens */
    }

    /* Adjust testimonial text for very small screens */
    .testimonial-text {
        font-size: 1.1rem; /* Slightly smaller but still prominent */
        line-height: 1.3;
        padding-left: 0;
        padding-bottom: 0;
        margin-bottom: 15px; /* Space between testimonial and name */
        font-weight: 600;
        text-shadow: 0 0 3px rgba(255, 255, 255, 0.3);
    }

    /* Adjust FAQ section for very small screens */
    .faq-item {
        padding: 2px; /* Minimal padding */
    }

    .faq-question {
        padding: 0.6rem 0.8rem; /* Minimal padding */
    }

    .faq-answer p {
        padding: 0.6rem 0.8rem; /* Minimal padding */
        font-size: 0.95rem; /* Further reduced for very small screens */
        line-height: 1.3;
    }

    .blockquote-footer {
        font-size: 0.8rem; /* Smaller than testimonial text */
        padding: 0;
        margin-top: 10px; /* Space between testimonial and name */
        letter-spacing: 0.1px; /* Reduced letter spacing */
        font-weight: 700; /* Bold weight */
        text-shadow: none;
        background: transparent;
        border: none;
    }

    .testimonial-carousel {
        padding: 0 5px; /* Minimal padding for smallest screens */
    }

    .product-image-container {
        margin-bottom: 5px; /* Minimal space below image */
        max-height: 250px; /* Adjusted height for very small screens */
        padding: 2px; /* Minimal padding to minimize space around image */
    }

    .product-image {
        max-height: 240px; /* Adjusted to fit within container */
        width: 100%; /* Ensure image takes full width */
        object-fit: contain;
    }

    .no-image {
        height: 250px; /* Match the adjusted height */
    }
}

/* Updated adjustments for iPad Pro and Nest devices (768px to 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .hero-section {
        padding: 60px 10px 10px; /* Further reduced padding to minimize vertical space */
        min-height: auto; /* Allow hero section to size based on content */
    }

    .product-showcase {
        padding: 10px; /* Further reduced padding to minimize vertical space */
    }

    .product-image-container {
        max-height: 50vh; /* Reduced from 70vh to better fit content and reduce space below */
        padding: 5px; /* Kept minimal padding to maximize image size */
        margin-bottom: 5px; /* Kept minimal to reduce empty space below */
    }

    .product-image {
        max-height: 50vh; /* Match the container height */
        width: 100%;
        object-fit: contain;
    }

    .no-image {
        height: 50vh; /* Match the adjusted height */
    }

    /* Ensure single-column layout */
    .product-showcase .row {
        flex-direction: column; /* Force single-column layout */
    }

    .product-showcase .col-md-6 {
        width: 100%; /* Ensure full width for each column */
        max-width: none;
    }

    /* Adjust product-details to maintain balance with larger image */
    .product-details {
        padding: 5px; /* Kept minimal padding */
    }

    .product-details h2 {
        font-size: 1.8rem; /* Kept reduced size */
    }

    .price-container {
        font-size: 1.8rem; /* Kept reduced size */
    }

    .star-rating {
        font-size: 0.9rem; /* Kept reduced size */
    }

    .star-rating span {
        font-size: 0.8rem; /* Kept reduced size */
    }

    .description-text {
        font-size: 1rem; /* Kept reduced size */
        line-height: 1.4; /* Kept adjusted for readability */
    }

    .features ul li {
        font-size: 1rem; /* Kept reduced size */
        margin-bottom: 8px; /* Kept reduced spacing */
    }

    .features ul li i {
        margin-right: 8px;
        font-size: 0.95rem; /* Kept reduced size */
        width: 20px; /* Kept adjusted width */
    }

    .features ul li span {
        font-size: 0.95rem; /* Kept reduced size */
    }
}

/* New class for larger font size in comparison section */
.comparison-item .larger-text {
    font-size: 1.2rem;
}

/* ============================================ */
/* MULTI-PRODUCT LANDING PAGE STYLES */
/* ============================================ */

/* Hero CTA Buttons */
/* Hero CTA buttons - same pattern as featured-info buttons */
.hero-cta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
    max-width: 650px;
    margin: 0 auto;
}

.hero-cta .btn {
    width: 100%;
}

/* Featured Product Highlight (Multi-product hero) */
.featured-highlight {
    background: linear-gradient(180deg, rgba(26, 0, 51, 0.78), rgba(8, 0, 18, 0.92));
    border: 1px solid rgba(187, 134, 252, 0.32);
    border-radius: 18px;
    padding: 40px;
    box-shadow: inset 0 0 70px rgba(153, 0, 255, 0.12), 0 24px 60px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 2;
}

.featured-image-wrapper {
    position: relative;
    display: inline-block;
}

.featured-hero-image {
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.4);
    transition: transform 0.3s ease;
}

.featured-hero-image:hover {
    transform: scale(1.02);
}

.featured-badge-hero {
    position: absolute;
    top: 15px;
    left: 15px;
    background: linear-gradient(135deg, #ff00ff, #ff66ff);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: bold;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.6);
    animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
    0%, 100% { box-shadow: 0 0 15px rgba(255, 0, 255, 0.6); }
    50% { box-shadow: 0 0 25px rgba(255, 0, 255, 0.9); }
}

.featured-info {
    padding: 20px;
}

.featured-info h2 {
    font-size: 2rem;
}

/* Make featured product buttons equal width and stacked */
.featured-info .d-flex.gap-3 {
    flex-direction: column;
    align-items: stretch;
}

.featured-info .d-flex.gap-3 form,
.featured-info .d-flex.gap-3 .btn {
    width: 100%;
}

.featured-info .d-flex.gap-3 form .btn {
    width: 100%;
}

.price-tag {
    display: inline-block;
}

.price-tag .price-value {
    color: #00ffff;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
}

/* Featured product link styles */
.featured-image-link,
.featured-name-link {
    text-decoration: none;
    color: inherit;
}

.featured-image-link:hover,
.featured-name-link:hover {
    text-decoration: none;
    color: inherit;
}

/* More Products Section */
.more-products-section {
    background: linear-gradient(135deg, rgba(15, 0, 30, 0.9), rgba(30, 0, 50, 0.95));
}

.more-products-section .product-card {
    background: rgba(30, 0, 50, 0.7);
}

/* Featured Badge on Product Cards */
.featured-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, #ff00ff, #ff66ff);
    color: white;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
    z-index: 5;
}

/* Quick Add Form */
.quick-add-form {
    width: 100%;
}

.quick-add-form button {
    width: 100%;
}

/* ============================================ */
/* CATEGORY SECTION STYLES */
/* ============================================ */

.category-section {
    background: none;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 25px;
    max-width: 900px;
    margin: 0 auto;
}

.category-card {
    background: linear-gradient(180deg, rgba(40, 4, 66, 0.55), rgba(22, 2, 40, 0.55));
    border-radius: 16px;
    padding: 2rem 1.25rem;
    text-align: center;
    text-decoration: none;
    color: white;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    border: 1px solid rgba(187, 134, 252, 0.2);
}

.category-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(153, 0, 255, 0.22);
    border-color: rgba(187, 134, 252, 0.5);
    color: white;
    text-decoration: none;
}

/* Icon sits in a refined neon tile rather than as a large glowing glyph. */
.category-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-bottom: 1rem;
    border-radius: 16px;
    color: var(--rave-secondary, #00ffff);
    background: linear-gradient(155deg, rgba(255, 0, 255, 0.12), rgba(0, 255, 255, 0.07));
    border: 1px solid rgba(255, 0, 255, 0.28);
    box-shadow: inset 0 0 16px rgba(255, 0, 255, 0.1);
    text-shadow: none;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.category-icon i {
    font-size: 1.55rem !important;
    filter: drop-shadow(0 0 6px rgba(0, 255, 255, 0.4));
}

.category-card:hover .category-icon {
    color: var(--rave-secondary, #00ffff);
    border-color: rgba(0, 255, 255, 0.5);
}

.category-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
    text-shadow: 0 0 6px rgba(255, 0, 255, 0.3);
}

.category-count {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Responsive adjustments for category grid */
@media (max-width: 767px) {
    .category-grid {
        /* Use flexbox to center odd last item */
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }

    .category-grid .category-card {
        /* Two columns with gap accounted for */
        flex: 0 0 calc(50% - 8px);
        max-width: calc(50% - 8px);
        padding: 20px 15px;
    }

    .category-icon i {
        font-size: 2rem !important;
    }

    .category-name {
        font-size: 0.95rem;
    }
}

@media (max-width: 400px) {
    .category-grid .category-card {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Responsive adjustments for featured highlight */
@media (max-width: 767px) {
    .featured-highlight {
        padding: 20px;
    }

    .featured-highlight .row {
        flex-direction: column;
    }

    .featured-highlight .col-md-5,
    .featured-highlight .col-md-7 {
        width: 100%;
        text-align: center;
    }

    .featured-info {
        padding: 15px 0;
    }

    .featured-info h2 {
        font-size: 1.5rem;
    }

    .featured-info .d-flex {
        justify-content: center;
    }

    .hero-cta {
        max-width: 90%;
    }

    .hero-section .btn-amazon.btn-lg,
    .featured-info .btn-amazon.btn-lg,
    .actions .btn-amazon.btn-lg {
        padding: 12px 20px;
        font-size: 1rem;
        white-space: nowrap;
    }
}

/* View All Button */
.more-products-section .btn-outline-light {
    border-width: 2px;
    transition: all 0.3s ease;
}

.more-products-section .btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

/* ============================================ */
/* MULTI-PRODUCT CATEGORY GRID STYLES (.mp-*)  */
/* All styles prefixed to avoid conflicts      */
/* ============================================ */

/* Container for entire multi-product section */
.mp-products-section {
    background: none;
    padding: 60px 0;
}

/* Individual category block */
.mp-category-section {
    margin-bottom: 50px;
}

.mp-category-section:last-child {
    margin-bottom: 0;
}

.mp-category-header {
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 0, 255, 0.3);
}

.mp-category-title {
    font-size: 1.8rem;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
    margin-bottom: 5px;
}

.mp-category-description {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    margin: 0;
}

/* Product grid - auto-fit for responsive */
.mp-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

/* Product card with fixed-height image */
.mp-product-card {
    background: rgba(30, 0, 50, 0.7);
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.2);
    border: 1px solid rgba(255, 0, 255, 0.1);
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 20px;
}

.mp-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 25px rgba(255, 0, 255, 0.4);
    border-color: rgba(255, 0, 255, 0.3);
}

/* Fixed height image container */
.mp-product-card__image {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mp-product-card__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
    transition: transform 0.3s ease;
}

.mp-product-card:hover .mp-product-card__img {
    transform: scale(1.05);
}

.mp-product-card__badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(135deg, #ff00ff, #ff66ff);
    color: white;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
    z-index: 5;
}

.mp-product-card__no-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2a0055, #4a0077);
    color: rgba(255, 255, 255, 0.5);
    font-size: 1rem;
}

/* Product info section */
.mp-product-card__info {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.mp-product-card__title {
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: 8px;
    text-shadow: 0 0 5px rgba(255, 0, 255, 0.3);
    line-height: 1.3;
}

.mp-product-card__description {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-grow: 1;
}

.mp-product-card__price {
    font-size: 1.7rem;
    font-weight: bold;
    color: #00ffff;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
    margin-bottom: 10px;
}

/* Variant indicator */
.mp-product-card__variants {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #ff00ff;
    margin-bottom: 10px;
}

.mp-product-card__variants i {
    font-size: 0.9rem;
    text-shadow: 0 0 5px rgba(255, 0, 255, 0.5);
}

.mp-product-card__variants span {
    font-family: Arial, sans-serif;
    text-shadow: 0 0 5px rgba(255, 0, 255, 0.3);
}

/* CTA button container */
.mp-product-card__cta {
    margin-top: auto;
    padding-top: 0;
}

.mp-product-card__cta .btn {
    width: 100%;
}

/* Link wrapper for card */
.mp-product-card__link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.mp-product-card__link:hover {
    text-decoration: none;
    color: inherit;
}

/* View All Products link */
.mp-view-all {
    text-align: center;
    margin-top: 40px;
}

.mp-view-all .btn {
    border-width: 2px;
    transition: all 0.3s ease;
}

.mp-view-all .btn:hover {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

/* Responsive adjustments for multi-product grid */
@media (max-width: 767px) {
    .mp-products-section {
        padding: 40px 0;
    }

    .mp-product-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 20px;
    }

    .mp-category-section {
        margin-bottom: 40px;
    }

    .mp-category-title {
        font-size: 1.5rem;
    }

    .mp-product-card__info {
        padding: 15px;
    }

    .mp-product-card__title {
        font-size: 1.1rem;
    }

    .mp-product-card__price {
        font-size: 1.3rem;
    }
}

@media (max-width: 576px) {
    /* Mobile: Horizontal scroll carousel for product grids */
    .mp-product-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 12px;
        padding: 0 15px 15px 0;
        margin: 0 -15px;
        padding-left: 15px;
        /* Hide scrollbar but keep functionality */
        scrollbar-width: none;  /* Firefox */
        -ms-overflow-style: none;  /* IE/Edge */
    }

    .mp-product-grid::-webkit-scrollbar {
        display: none;  /* Chrome/Safari */
    }

    .mp-product-grid .mp-product-card {
        flex: 0 0 78%;  /* Show ~78% of card, peek next */
        scroll-snap-align: start;
        min-width: 0;  /* Prevent flex item overflow */
    }

    /* Single product in category should be centered, not carousel */
    .mp-product-grid .mp-product-card:only-child {
        flex: 0 0 auto;
        width: 85%;
        max-width: 320px;
        margin: 0 auto;
    }

    /* Reduce image height for carousel cards */
    .mp-product-grid .mp-product-card__image {
        height: 180px;
    }

    .mp-category-title {
        font-size: 1.3rem;
    }
}

/* Uncategorized products section */
.mp-uncategorized-section {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 0, 255, 0.2);
}

/* Hero quick chips — single uniform style so the row reads as one
   discovery rail (no "current page" / "filter" confusion). Tonight + Weekend
   lead by position, not by colour. The subtle pulsing dot prefix on those
   two signals time-sensitivity without breaking visual unity. */
.hero-quick-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    max-width: 760px;
    margin: 0.5rem auto 0;
}
.hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 38px;
    padding: 0.5rem 1.2rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 0, 255, 0.35);
    color: #fff;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.hero-chip:hover,
.hero-chip:focus-visible {
    background: rgba(255, 0, 255, 0.22);
    border-color: #ff00ff;
    box-shadow: 0 0 12px rgba(255, 0, 255, 0.45);
    color: #fff;
    outline: none;
    transform: translateY(-1px);
}
.hero-chip:focus-visible {
    outline: 2px solid #00ffff;
    outline-offset: 2px;
}
/* Time-sensitive chips (Tonight / This Weekend) — leading pulse dot. The
   pulse is the affordance for "live"; no background fill so the chip
   doesn't read as the current selection. */
.hero-chip--live::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #ff00ff;
    box-shadow: 0 0 6px rgba(255, 0, 255, 0.9);
    animation: hero-chip-live-pulse 1.6s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes hero-chip-live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(0.7); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-chip--live::before { animation: none; }
}
/* Phones: the two time chips (the city chips live in the city door below
   the hero) are too wide to sit side by side in the hero box, so they stack,
   centred, each a full 44px tap target; nothing scrolls or is cut off. */
@media (max-width: 575.98px) {
    .hero-quick-chips {
        gap: var(--spacing-sm);
    }
    .hero-chip {
        font-size: 0.78rem;
        padding: 0.4rem 0.85rem;
        min-height: 44px;
        letter-spacing: 0.025em;
    }
    .hero-chip--live { padding-left: 0.7rem; }
    .hero-chip--live::before { width: 5px; height: 5px; }
}

/* ============================================================
   Multi-product hero "box" — the atmospheric framed treatment
   shared visually with the /promoters/ recruitment hero
   (Orbitron headline + magenta/cyan dual glow + accent bar).
   ============================================================ */
.landing-hero-box {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    border-radius: 22px;
    padding: clamp(2.75rem, 7vw, 4.75rem) 1.5rem;
    border: 1px solid rgba(187, 134, 252, 0.32);
    background:
        radial-gradient(60% 55% at 18% 5%, rgba(255, 0, 255, 0.20), transparent 62%),
        radial-gradient(55% 50% at 86% 18%, rgba(0, 255, 255, 0.14), transparent 60%),
        radial-gradient(90% 80% at 50% 115%, rgba(153, 0, 255, 0.26), transparent 70%),
        linear-gradient(180deg, rgba(26, 0, 51, 0.78), rgba(8, 0, 18, 0.92));
    box-shadow: inset 0 0 70px rgba(153, 0, 255, 0.14);
}

.landing-hero-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 0, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(70% 70% at 50% 30%, #000 25%, transparent 78%);
    mask-image: radial-gradient(70% 70% at 50% 30%, #000 25%, transparent 78%);
    pointer-events: none;
}

.landing-hero-box .hero-content {
    position: relative;
    z-index: 2;
    margin: 0 auto;
}

.landing-hero-eyebrow {
    font-family: 'Orbitron', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--rave-secondary, #00ffff);
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
    margin: 0 0 1rem;
}

.landing-hero-title {
    font-family: 'Orbitron', sans-serif;
    font-weight: 800;
    letter-spacing: 0.02em;
    font-size: clamp(2rem, 6.4vw, 3.4rem);
    line-height: 1.08;
    color: #fff;
    margin: 0;
    text-shadow: 0 0 12px rgba(255, 0, 255, 0.6), 0 0 28px rgba(0, 255, 255, 0.32);
}

/* Below 360px "underground" at the 2rem minimum is wider than the hero's
   content box and ran out past its edge; a smaller floor keeps the word whole. */
@media (max-width: 359.98px) {
    .landing-hero-title {
        font-size: 1.6rem;
    }
}

.landing-hero-bar {
    display: block;
    width: 64px;
    height: 3px;
    margin: 1.3rem auto 1.4rem;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--rave-primary, #ff00ff), var(--rave-secondary, #00ffff));
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.55);
}

.landing-hero-sub {
    font-family: Arial, Helvetica, sans-serif;
    color: rgba(255, 255, 255, 0.8);
    font-size: clamp(1.02rem, 2.4vw, 1.25rem);
    line-height: 1.55;
    max-width: 620px;
    margin: 0 auto;
    text-shadow: none;
}

/* ============================================================
   Prominent promoter recruitment CTA section (homepage).
   Atmospheric box matching the hero / promoter-page treatment.
   ============================================================ */
.landing-promoter-cta {
    position: relative;
    overflow: hidden;
    max-width: 1080px;
    margin: 4rem auto;
    border-radius: 22px;
    padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
    text-align: center;
    border: 1px solid rgba(187, 134, 252, 0.32);
    background:
        radial-gradient(60% 55% at 18% 5%, rgba(255, 0, 255, 0.20), transparent 62%),
        radial-gradient(55% 50% at 86% 18%, rgba(0, 255, 255, 0.14), transparent 60%),
        radial-gradient(90% 80% at 50% 115%, rgba(153, 0, 255, 0.26), transparent 70%),
        linear-gradient(180deg, rgba(26, 0, 51, 0.78), rgba(8, 0, 18, 0.92));
    box-shadow: inset 0 0 70px rgba(153, 0, 255, 0.14);
}

.landing-promoter-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 0, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(70% 70% at 50% 30%, #000 25%, transparent 78%);
    mask-image: radial-gradient(70% 70% at 50% 30%, #000 25%, transparent 78%);
    pointer-events: none;
}

.landing-promoter-cta > * {
    position: relative;
    z-index: 1;
}

.landing-promoter-cta .lpc-title {
    font-family: 'Orbitron', sans-serif;
    font-weight: 800;
    letter-spacing: 0.02em;
    font-size: clamp(1.6rem, 4.6vw, 2.6rem);
    line-height: 1.12;
    color: #fff;
    margin: 0;
    text-shadow: 0 0 12px rgba(255, 0, 255, 0.6), 0 0 28px rgba(0, 255, 255, 0.32);
}

.landing-promoter-cta .lpc-sub {
    font-family: Arial, Helvetica, sans-serif;
    color: rgba(255, 255, 255, 0.8);
    font-size: clamp(1rem, 2.3vw, 1.18rem);
    line-height: 1.55;
    max-width: 640px;
    margin: 0 auto 1.8rem;
}

.landing-promoter-cta .lpc-points {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    max-width: 700px;
    margin: 0 auto 2rem;
}

.landing-promoter-cta .lpc-point {
    flex: 1 1 170px;
    padding: 0.25rem 1rem;
}

.landing-promoter-cta .lpc-point + .lpc-point {
    border-left: 1px solid rgba(187, 134, 252, 0.18);
}

.landing-promoter-cta .lpc-point-num {
    display: block;
    font-family: 'Orbitron', sans-serif;
    font-weight: 800;
    font-size: 1.6rem;
    color: #fff;
    text-shadow: 0 0 12px rgba(0, 255, 255, 0.4);
}

.landing-promoter-cta .lpc-point-label {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 600px) {
    .landing-promoter-cta .lpc-point + .lpc-point { border-left: none; }
}

/* Keep every landing panel the same max width so the column of boxes lines
   up edge-to-edge down the page. */
.landing-hero-box,
.landing-promoter-cta,
.landing-page .container.landing-box {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}

/* Give the centered content-section headings the same magenta->cyan accent
   bar as the hero / promoter headings, for one consistent brand signature. */
.landing-page .section-title::after {
    content: '';
    display: block;
    width: 64px;
    height: 3px;
    margin: 1rem auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--rave-primary, #ff00ff), var(--rave-secondary, #00ffff));
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.55);
}

/* ============================================================
   Doors under the hero: the city picker (a select and a Go button
   below the md breakpoint, pills from md up) and the way in for
   promoters, then the trust line counting the upcoming listings.
   ============================================================ */
.landing-doors {
    width: 100%;
    max-width: 1080px;
    margin: var(--spacing-lg) auto 0;
}

.landing-doors-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.landing-door {
    flex: 1 1 260px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    border-radius: var(--radius-xl);
    background: linear-gradient(180deg, rgba(34, 4, 60, 0.92), rgba(19, 2, 36, 0.92));
    border: 1px solid rgba(187, 134, 252, 0.22);
}

.landing-door--cities {
    flex-grow: 2;
}

.landing-door-heading {
    margin: 0;
    font-family: var(--font-primary);
    text-transform: uppercase;
    letter-spacing: 0.24em;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--rave-secondary);
    text-shadow: 0 0 10px var(--rave-cyan-glow-medium);
}

.landing-door-picker {
    display: flex;
    gap: var(--spacing-sm);
    width: 100%;
    max-width: 420px;
}

/* 16px text keeps iOS from zooming into the select on focus. The arrow is
   Bootstrap's own shape, redrawn in cyan to read on the dark panel. */
.landing-door-select {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 48px;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--rave-text-primary);
    background-color: var(--rave-dark);
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2300ffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    border: 1px solid var(--rave-glow-medium);
    border-radius: var(--radius-lg);
}

.landing-door-select:focus {
    color: var(--rave-text-primary);
    background-color: var(--rave-dark);
    border-color: var(--rave-primary);
    box-shadow: 0 0 0 3px var(--rave-cyan-glow-soft);
}

.landing-door-select option {
    background-color: var(--rave-dark);
    color: var(--rave-text-primary);
}

.landing-door-pills {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-sm);
}

.landing-door-pill {
    min-height: 44px;
}

.landing-door-cta,
.landing-door-go,
.landing-see-all-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.6rem 1.6rem;
    font-size: 1rem;
}

.landing-door-go {
    flex: 0 0 auto;
    min-width: 64px;
    padding: 0.6rem 1.2rem;
    border-radius: var(--radius-lg);
}

/* The global .text-center .btn-rave rule makes a centred button a full-width
   block; this one stays a button, full width only up to a phone's width. */
.landing-see-all .landing-see-all-link {
    display: inline-flex;
    width: 100%;
    max-width: 360px;
}

.landing-trust-line {
    margin: var(--spacing-md) 0 0;
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--rave-text-muted);
    text-align: center;
}

/* The rail of our own events on sale: a cyan-edged panel so it reads apart
   from the grid of every listing below it. */
.landing-native-rail {
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-lg) var(--spacing-md);
    border: 1px solid var(--rave-cyan-glow-soft);
    border-radius: var(--radius-xl);
    background: var(--rave-surface-panel);
}

.landing-native-rail-line {
    margin: 0 0 var(--spacing-lg);
    font-family: var(--font-body);
    font-size: clamp(0.95rem, 3.5vw, 1.05rem);
    color: var(--rave-text-muted);
}

@media (max-width: 575.98px) {
    .landing-door {
        padding: var(--spacing-md);
    }

    .landing-native-rail {
        padding: var(--spacing-md) var(--spacing-sm);
    }
}