/* ==========================================================================
   CUSTOM DESIGN TOKENS FOR MEGAMOVE (DARK THEME)
   ========================================================================== */

:root {
    /* Theme Color Mapping */
    --mm-bg: #090D16;
    --mm-surface: #121824;
    --mm-surface-alt: #1B2335;
    --mm-accent: #0DF5E3;       /* Vibrant Neon Teal/Cyan */
    --mm-accent-hover: #09CFC0;
    --mm-ink-bright: #FFFFFF;
    --mm-ink-dim: #9EABB8;
    --mm-ink-dark: #090D16;
    --mm-border: #222E45;
    --mm-gradient: linear-gradient(135deg, #0DF5E3 0%, #0077FF 100%);

    /* Fonts Config */
    --font-display: 'Oswald', sans-serif;
    --font-body: 'Poppins', sans-serif;
    --font-case: uppercase;

    /* Styling Adjustments */
    --mm-radius: 16px; /* Soft Style Option */
    --mm-shadow: 0 25px 50px -12px rgba(13, 245, 227, 0.25), 
                 0 15px 30px -10px rgba(0, 0, 0, 0.8); /* Deep Shadow Depth Option */
    --mm-container-max: 1140px; /* Container Width Option */
}

/* ==========================================================================
   GLOBAL LAYOUT & STRUCTURE
   ========================================================================== */

/* Abstract Grid Background Overlay */
.mm-decorative-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Custom Container Constraint */
.mm-frame-shell {
    max-width: var(--mm-container-max);
    width: 100%;
}

/* Ensure content overlays background grid */
main, header, footer {
    position: relative;
    z-index: 10;
}

/* ==========================================================================
   IMAGE GALLERY & PRODUCT PREVIEWS
   ========================================================================== */

.mm-img-holder img {
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.6));
}

/* Thumbnails Block */
.mm-preview-strip div {
    transition: all 0.2s ease-in-out;
}

/* ==========================================================================
   FEATURES SECTION: Alternating Row Style (Preset F Requirements)
   ========================================================================== */

.mm-aspect-panel {
    display: flex;
    flex-direction: column;
}

.mm-aspect-line {
    border-bottom: 1px solid var(--mm-border);
}

.mm-aspect-line:last-child {
    border-bottom: none;
}

/* ==========================================================================
   TESTIMONIALS SECTION: CSS columns Masonry (Preset F Requirements)
   ========================================================================== */

.mm-social-masonry {
    column-count: 1;
    column-gap: 1.5rem;
}

@media (min-width: 1024px) {
    .mm-social-masonry {
        column-count: 3;
    }
}

.mm-opinion-capsule {
    break-inside: avoid;
    display: inline-block;
    width: 100%;
    transform: translateZ(0); /* Fix for masonry rounding bugs */
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.mm-opinion-capsule:hover {
    transform: translateY(-4px);
    border-left-color: var(--mm-accent-hover) !important;
}

/* ==========================================================================
   ACCENTS & INTERACTIVITY
   ========================================================================== */

/* CTA Buttons Styling */
.mm-main-cta {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.mm-main-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0077FF 0%, #0DF5E3 100%);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: -1;
}

.mm-main-cta:hover::before {
    opacity: 1;
}

.mm-main-cta:hover {
    transform: scale(1.025);
    box-shadow: 0 20px 35px -10px rgba(13, 245, 227, 0.4);
}

/* Focus State Reset for Accessibility */
a:focus-visible, button:focus-visible {
    outline: 3px solid var(--mm-accent) !important;
    outline-offset: 4px !important;
}