@font-face {
    font-family: 'Clash Display';
    src: url('fonts/clash_display/ClashDisplay-Variable.ttf') format('truetype');
    font-weight: 200 700;
    font-display: swap;
    font-style: normal;
}

:root {
    --bg-color: #000000;
    --text-primary: #ffffff;
    --text-secondary: #94a3b8;
    --accent-color: #caff33;
    --accent-glow: rgba(202, 255, 51, 0.5);
    --line-color: rgba(255, 255, 255, 0.03);
    --font-main: 'Clash Display', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: var(--font-main);
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

#flashlight-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    /* Above bg, below content */
    pointer-events: none;
    background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
            rgba(202, 255, 51, 0.15),
            transparent 40%);
}

/* Background Canvas */
#bg-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
}

/* Remove old Orb styles */
.background-orbs {
    display: none;
}

.app-container {
    position: relative;
    width: 100%;
    /* Removed padding to allow per-section control */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}



/* Header */
header {
    position: fixed;
    /* Sticky fixed on top */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    /* Ensure on top of everything */
    padding: 1.5rem 0;
    /* Custom header control: start slightly right from edge */
    padding-left: 3%;
    padding-right: 3%;
    /* Requested 3% padding right */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2rem;

    /* Semi-transparent glass effect */
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    /* Optional subtle divider */
}

.logo-container {
    display: flex;
    align-items: center;
    margin-left: 0;
    /* Reset negative margin */
}

/* Mobile Menu Button - Hidden by default */
.mobile-menu-btn {
    display: none;
    cursor: pointer;
    color: #fff;
    z-index: 100;
}

/* Mobile Dropdown - Hidden by default */
.mobile-menu-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: rgba(10, 10, 12, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.5rem;
    z-index: 99;
    flex-direction: column;
    gap: 1.5rem;
    transform-origin: top;
    animation: slide-down 0.3s ease-out;
}

.mobile-menu-dropdown.active {
    display: flex;
}

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

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

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mobile-nav-group {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.mobile-nav-header {
    font-size: 0.9rem;
    text-transform: uppercase;
    color: var(--text-secondary);
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

.mobile-nav-item {
    font-size: 1.2rem;
    color: #fff;
    text-decoration: none;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mobile-nav-item:last-child {
    border-bottom: none;
}

.mobile-nav-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0.5rem 0;
}

/* Restored logo styles */
.project-logo {
    width: 140px;
    /* 50% smaller */
    height: auto;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.1));
}

.nav-links {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.nav-right {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    margin-left: auto;
    /* Push to the right */
}

.nav-item {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    position: relative;
    padding-bottom: 4px;
    transition: color 0.3s;
}

.nav-item:hover {
    color: var(--text-primary);
}

.nav-item::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--text-primary);
    transition: width 0.3s ease-in-out;
}

.nav-item:hover::after,
.nav-dropdown:hover .nav-item::after {
    width: 100%;
}

/* Navigation Dropdown */
.nav-dropdown {
    position: relative;
}

.dropdown-menu {
    position: fixed;
    top: 80px;
    /* Below header */
    left: 0;
    right: 0;
    width: 100vw;
    background: rgba(0, 0, 0, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 200;
}

.nav-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: flex;
    flex-direction: column;
    padding: 1.5rem 0;
    text-decoration: none;
    position: relative;
    transition: all 0.2s ease;
    width: 100%;
}

/* Sweep Divider - Aligned with text padding */
.dropdown-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 3%;
    right: 3%;
    height: 1px;
    background: linear-gradient(90deg, #fff 50%, rgba(255, 255, 255, 0.15) 50%);
    background-size: 200% 100%;
    background-position: 100% 50%;
    transition: background-position 0.2s ease;
}

/* Enabled for all items including last-child Edge */

.dropdown-item:hover::after {
    background-position: 0% 50%;
}

.dropdown-item>span {
    padding-left: 3%;
    padding-right: 3%;
}

.dropdown-item:hover .dropdown-title,
.dropdown-item:hover .dropdown-desc {
    background-position: 0% 50%;
}

.dropdown-title {
    font-size: 3rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
    /* Gradient sweep from grey to white */
    background: linear-gradient(90deg, #fff 50%, #94a3b8 50%);
    background-size: 200% 100%;
    background-position: 100% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: background-position 0.2s ease;
}

.dropdown-desc {
    font-size: 1rem;
    font-weight: 400;
    /* Gradient sweep from grey to white */
    background: linear-gradient(90deg, #fff 50%, #94a3b8 50%);
    background-size: 200% 100%;
    background-position: 100% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: background-position 0.2s ease;
}

.dropdown-item:hover .dropdown-desc {
    text-decoration-color: #fff;
}

/* Hero Section */
.hero-section {
    position: relative;
    z-index: 5;
    flex: 1;
    /* Restore centered container for main page */
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    margin-top: 160px;
    /* Explicit top margin to push below fixed header */
    padding: 0 4rem;
    padding: 0 4rem;
    /* Restore original padding */
    padding-bottom: 4rem;

    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-content: center;
}

/* Cleaned up duplicate lines */

.hero-content {
    grid-column: 1 / 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    padding-top: 2rem;
}

.hero-visual {
    grid-column: 2 / 3;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 500px;
    /* Mask the background particles behind the animation for better visibility */
    background: radial-gradient(circle at center, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 70%);
}

#liquidity-animation {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/* Text Styling */
.headline {
    font-size: 4rem;
    /* Larger */
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    letter-spacing: -1px;
}

.headline .highlight {
    background: linear-gradient(135deg, #fff 0%, var(--accent-color) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
}

/* Optional glow under highlight */
.headline .highlight::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 10px;
    background: var(--accent-color);
    filter: blur(25px);
    z-index: -1;
    opacity: 0.3;
}

.description {
    font-size: 1.35rem;
    color: var(--text-secondary);
    max-width: 550px;
    line-height: 1.6;
    margin-bottom: 3rem;
    font-weight: 400;
}

/* Buttons */
.cta-group {
    display: flex;
    gap: 1.5rem;
}

/* Liquid Glass Button */
.btn-primary {
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    /* Top highlight */
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    /* Left highlight */
    padding: 1rem 2.5rem;
    font-size: 1.125rem;
    font-family: var(--font-main);
    font-weight: 700;
    border-radius: 100px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.4s ease;
    box-shadow:
        0 4px 30px rgba(0, 0, 0, 0.1),
        inset 0 0 20px rgba(255, 255, 255, 0.05);
    /* Inner glow */
    overflow: hidden;
    text-decoration: none;
}

/* Liquid sheen animation */
.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.2),
            transparent);
    transition: 0.5s;
}

.btn-primary:hover::before {
    left: 100%;
    transition: 0.7s;
}

.btn-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        0 10px 30px rgba(202, 255, 51, 0.3),
        inset 0 0 20px rgba(202, 255, 51, 0.1);
    /* Lime inner glow on hover */
    background: rgba(202, 255, 51, 0.1);
    border-color: rgba(202, 255, 51, 0.4);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.btn-primary iconify-icon {
    font-size: 1.4rem;
    filter: drop-shadow(0 0 5px rgba(202, 255, 51, 0.8));
}

/* Partners Marquee */
.partners-section {
    grid-column: 1 / -1;
    margin-top: 2rem;
    position: relative;
    border-top: 1px solid var(--line-color);
    padding-top: 3rem;
    overflow: hidden;
    /* Ensure no overflow */
}

.marquee-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    /* Fade mask for smooth entry/exit */
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-track {
    display: flex;
    align-items: center;
    gap: 4rem;
    /* Spacing between logos */
    width: max-content;
    animation: marquee 30s linear infinite;
}

/* Hover to pause can be nice */
.marquee-track:hover {
    animation-play-state: paused;
}

.marquee-track iconify-icon {
    color: var(--text-secondary);
    opacity: 0.5;
    transition: all 0.3s ease;
    filter: grayscale(100%);
    flex-shrink: 0;
}

.marquee-track iconify-icon:hover {
    color: var(--text-primary);
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.1);
}

/* SVG img logos - dimmed by default, white on hover */
.marquee-track img {
    opacity: 0.5;
    transition: all 0.3s ease;
    filter: grayscale(100%) brightness(0.7);
    flex-shrink: 0;
}

.marquee-track img:hover {
    opacity: 1;
    filter: grayscale(0%) brightness(0) invert(1);
    transform: scale(1.1);
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        /* Move by 1/3 of the width because we have 3 sets. 
           Wait. The total width is 3 sets. We want to move 1 set length.
           Actually, the easiest way to ensure perfect loop with 3 sets is to move -33.333%? 
           Or if we have 2 sets, move -50%.
           I added 3 sets. So we should move -33.3333%.
           Let's verify.
           If we have [Set1][Set2][Set3]
           At start: Shows [Set1]...
           At end: Shows [Set2]... but shifted so it looks like Set1.
           So shift by the width of one set.
           Since all sets are equal, width is 1/3 of total track.
        */
        transform: translateX(-33.3333%);
    }
}

/* Responsive */
@media (max-width: 1200px) {
    .headline {
        font-size: 3.5rem;
    }
}

@media (max-width: 1024px) {
    .app-container {
        padding: 0;
        /* Remove global padding to allow full-width elements */
        /* overflow-x: hidden; REMOVED to fix sticky scroll */
    }

    /* Manually add padding to sections that need it */
    header,
    .hero-section,
    .description-section,
    .swap-demo-section,
    .partners-section,
    .site-footer {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    /* Ensure Header content aligns */
    header {
        padding-left: 5%;
        /* Slightly more for visual balance */
        padding-right: 5%;
        width: 100%;
    }

    .hero-section {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 3rem;
        text-align: center;
        padding: 2rem 2rem 4rem;
        /* Top/Side/Bottom */
        margin-top: 120px;
        /* Adjust for fixed header */
    }

    .hero-content {
        align-items: center;
        padding-top: 0;
        width: 100%;
    }

    /* Center CTA buttons */
    .cta-group {
        justify-content: center;
        width: 100%;
    }

    .description {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-visual {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        height: 500px;
        width: 100%;
        /* Ensure height for animation */
    }

    .partners-grid {
        justify-content: center;
    }
}

/* Scroll Description Section */
.description-section {
    padding: 15vh 0;
    /* Huge padding to allow scrolling time */
    min-height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#scroll-text {
    font-size: 3rem;
    font-weight: 600;
    line-height: 1.4;
    max-width: 1000px;
    margin: 0 auto;
    color: #333;
    /* Default dark grey (will be overridden by spans) */
}

/* Spans created by JS */
.char {
    color: #333;
    /* Initial Dark Grey */
    transition: color 0.1s linear;
}

.char.active {
    color: #ffffff;
    /* Active White */
}

/* Swap Demo Section */
.swap-demo-section {
    padding: 100px 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;
}

.section-title {
    font-size: 1.5rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.spacer {
    height: 1px;
    width: 50px;
    background: rgba(255, 255, 255, 0.2);
}

.swap-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    width: 100%;
    max-width: 1000px;
    align-items: center;
}

.swap-col {
    display: flex;
    flex-direction: column;
    /* Stack header and text */
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
}

.col-header {
    font-size: 1.2rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    margin: 0;
    text-align: center;
}

/* Rotating Text Styles */
.text-group {
    display: flex;
    gap: 10px;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
}

.static-text {
    color: var(--text-secondary);
    font-weight: 400;
}

.rotating-container {
    height: 1.2em;
    /* Height of one line */
    overflow: hidden;
    position: relative;
    border-bottom: 2px solid var(--accent-color);
    /* Underline */
}

.rotating-list {
    list-style: none;
    margin: 0;
    padding: 0;
    animation: rotate-up-5 10s infinite linear;
}

.rotating-list-6 {
    list-style: none;
    margin: 0;
    padding: 0;
    /* Longer duration for 6 items to keep similar reading speed */
    animation: rotate-up-6 12s infinite linear;
}

.rotating-list li,
.rotating-list-6 li {
    height: 1.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

/* Adjust animation to match number of items */
/* We need to define keyframes based on item count.
   Simplification: Assumes mostly 4-5 items per list with duplication. */
/* Animation for 5 unique items (6 total lines) */
@keyframes rotate-up-5 {
    0% {
        transform: translateY(0);
    }

    15% {
        transform: translateY(0);
    }

    /* Pause */
    20% {
        transform: translateY(-1.2em);
    }

    35% {
        transform: translateY(-1.2em);
    }

    /* Pause */
    40% {
        transform: translateY(-2.4em);
    }

    55% {
        transform: translateY(-2.4em);
    }

    /* Pause */
    60% {
        transform: translateY(-3.6em);
    }

    75% {
        transform: translateY(-3.6em);
    }

    /* Pause */
    80% {
        transform: translateY(-4.8em);
    }

    95% {
        transform: translateY(-4.8em);
    }

    /* Pause */
    100% {
        transform: translateY(-6.0em);
    }

    /* Reset point depending on items */
}

/* Animation for 6 unique items (7 total lines) */
@keyframes rotate-up-6 {
    /* 6 intervals: 100/6 = ~16.6% per item */
    /* Pattern: Pause (~11%), Move (~5%) */

    0% {
        transform: translateY(0);
    }

    12% {
        transform: translateY(0);
    }

    /* Pause 1 */
    16% {
        transform: translateY(-1.2em);
    }

    28% {
        transform: translateY(-1.2em);
    }

    /* Pause 2 */
    32% {
        transform: translateY(-2.4em);
    }

    44% {
        transform: translateY(-2.4em);
    }

    /* Pause 3 */
    48% {
        transform: translateY(-3.6em);
    }

    60% {
        transform: translateY(-3.6em);
    }

    /* Pause 4 */
    64% {
        transform: translateY(-4.8em);
    }

    76% {
        transform: translateY(-4.8em);
    }

    /* Pause 5 */
    80% {
        transform: translateY(-6.0em);
    }

    92% {
        transform: translateY(-6.0em);
    }

    /* Pause 6 */
    100% {
        transform: translateY(-7.2em);
    }

    /* Move to duplicate */
}

/* Delays & Duration variations for independent feel */
.delay-1 {
    animation-delay: -1.5s;
    animation-duration: 11s;
    /* Slower */
}

.delay-2 {
    animation-delay: -3.2s;
    animation-duration: 9.5s;
    /* Faster */
}

.delay-3 {
    animation-delay: -5.7s;
    animation-duration: 12s;
    /* Even slower */
}


/* Visual Connection Beam */
.beam-container {
    position: relative;
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
}

.beam-particle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    width: 100px;
    background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
    border-radius: 4px;
    filter: drop-shadow(0 0 5px var(--accent-color));
}

.beam-particle.right {
    animation: beam-right 3s infinite ease-in-out;
}

.beam-particle.left {
    animation: beam-left 3s infinite ease-in-out;
    animation-delay: 1.5s;
    background: linear-gradient(-90deg, transparent, #caff33, transparent);
    /* Violet for return */
}

.center-node-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    /* Bigger logo */
    height: 80px;
    background: #000;
    /* Hide line behind it */
    border-radius: 50%;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(202, 255, 51, 0.3);
    /* Subtle border to extend beam feel */
    box-shadow: 0 0 30px rgba(202, 255, 51, 0.2);
    z-index: 10;
}

.center-node-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@keyframes beam-right {
    0% {
        left: 0;
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        left: 100%;
        opacity: 0;
    }
}

@keyframes beam-left {
    0% {
        right: 0;
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        right: 100%;
        opacity: 0;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .swap-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .beam-container {
        width: 2px;
        height: 100px;
    }

    .beam-particle {
        width: 4px;
        height: 40px;
    }

    @keyframes beam-right {
        0% {
            top: 0;
            opacity: 0;
        }

        100% {
            top: 100%;
            opacity: 0;
        }
    }

    @keyframes beam-left {
        0% {
            bottom: 0;
            opacity: 0;
        }

        100% {
            bottom: 100%;
            opacity: 0;
        }
    }
}

/* products Section moved to bottom */

/* Products Horizontal Scroll Section */
/* Products Horizontal Scroll Section (Card Style) */
#products-section {
    position: relative;
    height: 500vh;
    /* Reduced height for card scroll */
    background: #000;
}

.products-sticky-wrapper {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #000;
    /* Center Track Vertically */
    display: flex;
    align-items: center;
}

/* Gallery Dots */
.gallery-dots-container {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 20;
}

.dot {
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.dot.active {
    background: #fff;
    transform: scale(1.5);
}

.products-track {
    display: flex;
    gap: 4rem;
    /* Spacing between cards */
    padding-left: 10vw;
    /* Start left-aligned */
    padding-right: 50vw;
    /* To center the last card */
    box-sizing: border-box;
    height: 55vh;
    /* Cards shorter for better mobile fit */
    will-change: transform;
    align-items: center;
}

.product-slide {
    width: 520px;
    /* Wider cards for better mobile fit */
    height: 100%;
    /* Fill the 70vh track */
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;

    /* Card Styles */
    background: #050505;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0px;
    /* Sharp corners */
    padding: 3rem;
    box-sizing: border-box;
    overflow: hidden;
}

/* Slide Typography */
.slide-content-wrapper {
    position: absolute;
    bottom: 10%;
    left: 10%;
    text-align: left;
}

.slide-label {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-color);
    margin-bottom: 0.5rem;
}

.slide-title {
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 0.5rem;
    font-family: var(--font-main);
}

.slide-desc {
    font-size: 1rem;
    color: var(--text-secondary);
    max-width: 400px;
    line-height: 1.6;
}

/* Slide 01: Overview */
.slide-overview .overview-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.slide-overview .overview-item {
    font-size: 5rem;
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
    transition: opacity 0.3s;
}

/* Gradient Opacity */
.slide-overview .overview-item:nth-child(1) {
    color: #fff;
}

.slide-overview .overview-item:nth-child(2) {
    color: rgba(255, 255, 255, 0.8);
}

.slide-overview .overview-item:nth-child(3) {
    color: rgba(255, 255, 255, 0.6);
}

.slide-overview .overview-item:nth-child(4) {
    color: rgba(255, 255, 255, 0.4);
}

.slide-overview .overview-item:nth-child(5) {
    color: rgba(255, 255, 255, 0.2);
}

/* Slide 02: Swap */
.slide-swap .marquee-container {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    width: 100%;
    max-width: 900px;
    position: relative;
}

.marquee-track {
    display: flex;
    gap: 3rem;
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}

.marquee-content {
    display: flex;
    gap: 3rem;
    animation: marquee 20s linear infinite;
}

.marquee-track.reverse .marquee-content {
    animation-direction: reverse;
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.marquee-item {
    font-size: 2rem;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.05);
    padding: 1rem 2rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* LED Indicator */
.led-indicator {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    box-shadow: 0 0 10px #22c55e;
    position: absolute;
    top: 50%;
    right: -20px;
}

/* Slide 03: Pay */
/* Pay Visual Container */
.pay-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    width: 100%;
    position: relative;
    padding: 1rem 0;
}

/* Pay Card - Matching Swap Box Design */
.pay-card {
    width: 130px;
    height: 130px;
    background: linear-gradient(145deg, rgba(20, 20, 23, 0.9), rgba(10, 10, 12, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    z-index: 2;
}

.pay-card h4 {
    margin: 0 0 0.5rem 0;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
}

.pay-card span {
    color: var(--text-secondary);
    font-size: 0.85rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Glowing connecting beam */
.pay-beam-line {
    flex: 1;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: visible;
    border-radius: 2px;
    max-width: 100px;
}

/* Add endpoints to the line */
.pay-beam-line::before,
.pay-beam-line::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
}

.pay-beam-line::before {
    left: 0;
}

.pay-beam-line::after {
    right: 0;
}

.pay-beam-particle {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
    box-shadow: 0 0 15px var(--accent-color);
    animation: beam-travel 2s ease-in-out infinite;
    z-index: 3;
}

@keyframes beam-travel {
    0% {
        left: 0;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        left: 100%;
        opacity: 0;
    }
}

/* Slide 04: Liquidity */
.liquidity-chart {
    width: 600px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

.liquidity-bar {
    position: absolute;
    top: 0;
    height: 100%;
    background: var(--accent-color);
    width: 100%;
    transform-origin: left;
    animation: bar-pulse 3s ease-in-out infinite alternate;
}

@keyframes bar-pulse {
    0% {
        transform: scaleX(0.2);
        transform-origin: left;
    }

    50% {
        transform: scaleX(0.8);
    }

    100% {
        transform: scaleX(0.2);
        transform-origin: right;
    }
}

/* Slide 05: Node */
.node-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.node-row {
    display: flex;
    gap: 2rem;
    justify-content: center;
}

.node-box {
    width: 120px;
    height: 120px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    transition: transform 0.3s;
}

.node-box:hover {
    transform: translateY(-5px);
    border-color: var(--accent-color);
    color: #fff;
}

.node-box iconify-icon {
    font-size: 2rem;
    color: var(--accent-color);
}

/* Slide 06: DevKit */
.slide-devkit h2 {
    font-size: 3rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 5;
}

.slide-devkit h2 span {
    display: block;
}

.slide-devkit h2 .highlight-grey {
    color: rgba(255, 255, 255, 0.3);
}

.btn-docs {
    margin-top: 1.5rem;
    margin-bottom: 2rem;
    padding: 1rem 2rem;
    border-radius: 50px;
    background: transparent;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: transform 0.2s, box-shadow 0.3s;
    position: relative;
    z-index: 10;
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
}





/* =========================================
   Card 6 DevKit - Stunning Backdrop
   ========================================= */

.slide-devkit {
    position: relative;
    overflow: hidden;
}

.devkit-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* Subtle Grid Pattern */
.backdrop-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.8;
}

/* Central Glow Effect */
.backdrop-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(ellipse at center,
            rgba(202, 255, 51, 0.15) 0%,
            rgba(202, 255, 51, 0.08) 30%,
            transparent 70%);
    animation: pulseGlow 8s ease-in-out infinite;
}

@keyframes pulseGlow {

    0%,
    100% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.05);
    }
}

/* Floating Orbs */
.backdrop-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.4;
    animation: floatOrb 12s ease-in-out infinite;
}

.backdrop-orb.orb-1 {
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, #caff33, #caff33);
    top: 20%;
    right: 10%;
    animation-delay: 0s;
}

.backdrop-orb.orb-2 {
    width: 150px;
    height: 150px;
    background: linear-gradient(135deg, #caff33, #caff33);
    bottom: 25%;
    left: 15%;
    animation-delay: -4s;
}

@keyframes floatOrb {

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

    25% {
        transform: translate(15px, -20px) scale(1.05);
    }

    50% {
        transform: translate(-10px, 15px) scale(0.95);
    }

    75% {
        transform: translate(20px, 10px) scale(1.02);
    }
}

/* Ensure content is above backdrop */
/* Ensure content is above backdrop */
.slide-devkit h2,
.slide-devkit .slide-content-wrapper {
    position: relative;
    z-index: 5;
}

/* Restore absolute positioning for indicators */
.slide-devkit .slide-number,
.slide-devkit .slide-corner-badge {
    position: absolute;
    z-index: 20;
    top: 1.5rem;
}

.slide-devkit .slide-number {
    left: 1.5rem;
}

.slide-devkit .slide-corner-badge {
    right: 1.5rem;
}

/* Beam Border Effect for View Docs Button */
.btn-docs {
    position: relative;
    background: transparent;
    background-clip: padding-box;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    z-index: 10;
    overflow: hidden;
}

/* Button Channel/Background */
.btn-docs::before {
    content: '';
    position: absolute;
    inset: 2px;
    background: #050505;
    border-radius: 48px;
    z-index: -1;
    transition: background 0.3s, box-shadow 0.3s;
}

/* Liquid Glass on Hover */
.btn-docs:hover::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent), #050505;
    background-size: 200% 100%, 100% 100%;
    animation: glassShine 3s infinite linear;
    box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.1);
}

/* Beam Animation (Rotating Element) */
.btn-docs::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 500%;
    transform: translate(-50%, -50%);
    background: conic-gradient(from 0deg, transparent 60%, #fff 100%);
    opacity: 1;
    z-index: -2;
    pointer-events: none;
    animation: rotateSquare 3s linear infinite;
}

@keyframes rotateSquare {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

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

    50%,
    100% {
        background-position: 150% 0, 0 0;
    }
}




/* Fix overlapping in slide-devkit - use proper flow layout */
.slide-devkit {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 2.5rem 1.5rem 3.5rem;
    /* Match bottom margin of other buttons */
    position: relative;
}

.slide-devkit h2 {
    text-align: center;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    font-size: 2.5rem;
    background: linear-gradient(135deg, #ffffff 0%, #a0a0a0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    width: 100%;
}

.slide-devkit .btn-docs {
    position: relative;
    z-index: 10;
    margin: auto 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    order: 2;
}

.slide-devkit .slide-content-wrapper {
    position: relative;
    width: 100%;
    order: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: 0;
    padding-bottom: 2rem;
    left: auto !important;
    bottom: auto !important;
}

.slide-devkit .slide-title,
.slide-devkit .slide-desc {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100%;
    max-width: 450px;
}

/* Slide 01 Specifics */
.slide-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0.6;
    mix-blend-mode: plus-lighter;
}

.slide-number {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    font-family: var(--font-main);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    z-index: 2;
}

.slide01-content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.slide-main-title {
    font-size: 3rem;
    line-height: 1.1;
    font-weight: 700;
    color: #fff;
    margin-bottom: auto;
    /* Push to top */
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
}

.title-line {
    transition: color 0.3s;
}

.title-line.line-1 {
    color: #ffffff;
}

.title-line.line-2 {
    color: rgba(255, 255, 255, 0.9);
}

.title-line.line-3 {
    color: rgba(255, 255, 255, 0.8);
}

.title-line.line-4 {
    color: rgba(255, 255, 255, 0.7);
}

.title-line.line-5 {
    color: rgba(255, 255, 255, 0.6);
}

.slide-quote-group {
    margin-bottom: 2rem;
    display: flex;
    gap: 1rem;
    border-left: 2px solid var(--accent-color);
    padding-left: 1rem;
}

.quote-text {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    max-width: 200px;
    line-height: 1.5;
}

.btn-arrow-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    color: #000;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    transition: transform 0.2s;
}

.btn-arrow-circle:hover {
    transform: scale(1.1);
}

/* Footer Styles */
.site-footer {
    background-color: #000;
    color: #fff;
    padding: 6rem 3rem 2rem 3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 10;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4rem;
    margin-bottom: 8rem;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

/* ... existing styles ... */
.footer-brand-large {
    text-align: center;
    margin-bottom: 4rem;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

/* ... existing styles ... */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 2rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.footer-sales h3 {
    font-size: 2rem;
    margin-bottom: 1rem;
    font-family: var(--font-main);
}

.footer-sales p {
    color: var(--text-secondary);
    margin-bottom: 2rem;
    max-width: 300px;
    line-height: 1.6;
}

.btn-contact {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    background: #fff;
    color: #000;
    text-decoration: none;
    font-weight: 600;
    border-radius: 4px;
    transition: background 0.3s;
}

.btn-contact:hover {
    background: #e2e2e2;
}

.footer-links {
    display: flex;
    gap: 4rem;
    flex-wrap: wrap;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer-col h4 {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.footer-col a {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.3s;
}

.footer-col a:hover {
    color: var(--text-secondary);
}

.footer-brand-large {
    text-align: center;
    margin-bottom: 4rem;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-logo-icon {
    width: 100%;
    height: auto;
    display: block;
    opacity: 0.4;
    filter: grayscale(0.2);
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.footer-logo-icon:hover {
    opacity: 0.9;
    filter: grayscale(0);
}

/* Keep span style for fallback */
.footer-brand-large span {
    font-family: var(--font-main);
    font-weight: 700;
    font-size: 12vw;
    line-height: 0.8;
    letter-spacing: -0.05em;
    background: linear-gradient(to bottom, #fff, #444);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 2rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.social-links {
    display: flex;
    gap: 1.5rem;
}

.social-links a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.3s;
}

.social-links a:hover {
    color: #fff;
}

/* =========================================
   Slide 02: Swap Triad Layout
   ========================================= */

.swap-triad-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    margin-bottom: 2rem;
    position: relative;
    padding: 0 1rem;
}

.swap-box {
    width: 140px;
    height: 140px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

/* Center box specific */
.swap-box.center-box {
    border-color: rgba(202, 255, 51, 0.3);
    box-shadow: 0 0 20px rgba(202, 255, 51, 0.15);
    z-index: 10;
    width: 160px;
    /* Slightly larger */
    height: 160px;
}

.static-logo {
    width: 60%;
    height: auto;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.2));
}

/* Fading Logos Container */
.fading-logos {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fading-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    /* Space between icon and label */
    opacity: 0;
    transform: scale(0.9);
    animation: fadeCycle 12s infinite ease-in-out;
}

/* ... delays ... */
.fading-item:nth-child(1) {
    animation-delay: 0s;
}

.fading-item:nth-child(2) {
    animation-delay: 3s;
}

.fading-item:nth-child(3) {
    animation-delay: 6s;
}

.fading-item:nth-child(4) {
    animation-delay: 9s;
}

.fading-item iconify-icon,
.fading-item img {
    font-size: 3.5rem;
    margin-bottom: 0.25rem;
    /* Remove vertical margin */
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.1));
}

.fading-item span {
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
    /* Left align text */
    color: var(--text-primary);
}

.fading-item .label {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-top: 0;
    text-align: center;
}

@keyframes fadeCycle {
    0% {
        opacity: 0;
        transform: scale(0.9);
        pointer-events: none;
    }

    5% {
        opacity: 1;
        transform: scale(1);
        pointer-events: auto;
    }

    20% {
        opacity: 1;
        transform: scale(1);
        pointer-events: auto;
    }

    25% {
        opacity: 0;
        transform: scale(1.1);
        pointer-events: none;
    }

    100% {
        opacity: 0;
        transform: scale(0.9);
        pointer-events: none;
    }
}

/* Slide Header with LED indicator */
.slide-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 1rem;
    margin-bottom: 0.5rem;
}

.live-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
}

.led-dot {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    box-shadow: 0 0 8px #22c55e, 0 0 16px #22c55e;
    animation: ledPulse 2s infinite ease-in-out;
}

@keyframes ledPulse {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 8px #22c55e, 0 0 16px #22c55e;
    }

    50% {
        opacity: 0.7;
        box-shadow: 0 0 4px #22c55e, 0 0 8px #22c55e;
    }
}

.led-text {
    font-size: 0.75rem;
    color: #22c55e;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Corner Badge - Position LED at top-right of card, same height as slide-number */
.slide-corner-badge {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 10;
}

/* Swap content positioned at top - right after slide-number */
.swap-content-top {
    order: 1;
    padding: 0.5rem 0 0;
    margin-top: 2.5rem;
    margin-bottom: 0;
    text-align: left;
    width: 100%;
}

.swap-content-top .slide-title {
    font-size: 2.5rem;
    margin-bottom: 0.35rem;
    background: linear-gradient(135deg, #ffffff 0%, #a0a0a0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.swap-content-top .slide-desc {
    font-size: 1rem;
    margin-bottom: 0;
    opacity: 0.8;
    line-height: 1.6;
    max-width: 400px;
}

/* CRITICAL: Override base absolute positioning for swap card content */
.slide-swap .swap-content-top,
.slide-swap .slide-content-wrapper.swap-content-top {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    order: 1;
    width: 100%;
    padding: 0;
    text-align: left;
}

/* Make slide-swap use flexbox for layout */
.slide-swap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 2.5rem 1.5rem 1.5rem;
    position: relative;
    gap: 0.5rem;
}

/* Slide number styling for swap card */
.slide-swap .slide-number {
    order: 0;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

/* Triad container - centered in remaining space */
.slide-swap .swap-triad-container {
    order: 2;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.5rem 0;
    padding: 0;
}

/* Button positioned above bottom */
/* Button positioned above bottom */
.slide-swap .swap-action-btn {
    order: 3;
    margin-top: 0.5rem;
    margin-bottom: 3.5rem;
}

/* Unified Pill Button Style (Matches Card 6) */
.glass-button {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    background-clip: padding-box;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    padding: 1rem 2rem;
    font-size: 1.15rem;
    font-weight: 600;
    color: white;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.2s;
    /* Ensure no old shadows interfere */
    box-shadow: none;
    z-index: 5;
}

/* Button Channel/Background */
.glass-button::before {
    content: '';
    position: absolute;
    inset: 2px;
    background: #050505;
    border-radius: 48px;
    z-index: -1;
    transition: background 0.3s, box-shadow 0.3s;
}

/* Animation on Hover */
.glass-button:hover::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent), #050505;
    background-size: 200% 100%, 100% 100%;
    animation: glassShine 3s infinite linear;
    box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.1);
}

.glass-button:hover {
    transform: scale(1.05);
    border-color: rgba(255, 255, 255, 0.35);
}

.glass-button:active {
    transform: scale(0.98);
}

/* Swap Action Button - Position at bottom */
.swap-action-btn {
    margin-top: auto;
    margin-bottom: 1.5rem;
    align-self: center;
    min-width: 120px;
}

/* =================================
   SLIDE 03: PAY - Similar to Swap
   ================================= */

/* Make slide-pay use flexbox layout like slide-swap */
.slide-pay {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 2.5rem 1.5rem 1.5rem;
    position: relative;
    gap: 0.5rem;
}

/* Pay slide number styling */
.slide-pay .slide-number {
    order: 0;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

/* Pay content at top - same styling as swap */
.pay-content-top {
    order: 1;
    padding: 0.5rem 0 0;
    margin-top: 2.5rem;
    margin-bottom: 0;
    text-align: left;
    width: 100%;
}

.pay-content-top .slide-title {
    font-size: 2.5rem;
    margin-bottom: 0.35rem;
    background: linear-gradient(135deg, #ffffff 0%, #a0a0a0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pay-content-top .slide-desc {
    font-size: 1rem;
    margin-bottom: 0;
    opacity: 0.8;
    line-height: 1.6;
    max-width: 400px;
}

/* Override base absolute positioning for pay card content */
.slide-pay .pay-content-top,
.slide-pay .slide-content-wrapper.pay-content-top {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    order: 1;
    width: 100%;
    padding: 0;
    text-align: left;
}

/* Pay visual animation centered */
.slide-pay .pay-visual {
    order: 2;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.5rem 0;
    width: 100%;
}

/* Pay Action Button */
.slide-pay .pay-action-btn {
    order: 3;
    margin-top: 0.5rem;
    margin-bottom: 3.5rem;
    align-self: center;
    min-width: 120px;
}

/* Triad Column with Label */
.triad-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.triad-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Ensure all triad items in the row align on the same horizontal baseline */
.swap-triad-container {
    align-items: center;
}

/* Triad columns: Label + Box stacked, label height consistent */
.swap-triad-container>.triad-column {
    flex-shrink: 0;
}

/* Connection beams should align with the center of the swap-box (not label) */
.swap-triad-container>.connection-beam {
    align-self: center;
    /* Offset to align with swap-box center, accounting for the label height (~20px + 0.5rem gap) */
    margin-top: 28px;
}

/* Center box also offset to align with side boxes */
.swap-triad-container>.swap-box.center-box {
    /* Offset to align center with side swap-boxes (label height + gap) */
    margin-top: 28px;
}

/* Connection Beams - Enhanced */
.connection-beam {
    flex: 1;
    height: 2px;
    background: rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: visible;
    /* Allow glow to show */
    min-width: 40px;
}

.connection-beam .beam-particle {
    position: absolute;
    top: -2px;
    height: 6px;
    width: 40px;
    border-radius: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--accent-color) 50%, transparent 100%);
    filter: drop-shadow(0 0 8px var(--accent-color)) drop-shadow(0 0 15px var(--accent-color));
    opacity: 0;
}

/* 
 * Bidirectional Animation (10s total):
 * Phase 1 (0%-45%):  Left → Center → Right (Blockchain → NodeFlow → Lightning)
 * Phase 2 (50%-95%): Right → Center → Left (Lightning → NodeFlow → Blockchain)
 *
 * Left beam handles the left segment, right beam handles the right segment.
 * Each beam needs TWO particle divs for the two directions, OR we use two beam-particles.
 * Simpler approach: each beam has one particle, but we animate both beams for each phase.
 *
 * Phase 1 (L→R): Left beam particle goes L→R, then right beam particle goes L→R (continuous flow)
 * Phase 2 (R→L): Right beam particle goes R→L, then left beam particle goes R→L (continuous flow)
 */

/* Left beam particles */
.left-to-center .beam-particle {
    animation: leftBeamBidir 10s infinite ease-in-out;
}

/* Right beam particles */
.right-to-center .beam-particle {
    animation: rightBeamBidir 10s infinite ease-in-out;
}

/* 
 * Left beam segment animation:
 * Phase 1 (0-20%):   Particle flows LEFT→RIGHT (Blockchain → Center)
 * Phase 2 (70-90%):  Particle flows RIGHT→LEFT (Center → Blockchain)
 */
@keyframes leftBeamBidir {

    /* Phase 1: L→R flow through left segment */
    0% {
        left: -40px;
        opacity: 0;
    }

    3% {
        opacity: 1;
    }

    20% {
        left: calc(100% + 10px);
        opacity: 1;
    }

    23% {
        left: calc(100% + 10px);
        opacity: 0;
    }

    /* Idle gap */
    69% {
        opacity: 0;
    }

    /* Phase 2: R→L flow through left segment (coming back from center) */
    70% {
        left: calc(100% + 10px);
        opacity: 0;
    }

    73% {
        opacity: 1;
    }

    90% {
        left: -40px;
        opacity: 1;
    }

    93% {
        left: -40px;
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/* 
 * Right beam segment animation:
 * Phase 1 (23-43%):  Particle flows LEFT→RIGHT (Center → Lightning)
 * Phase 2 (47-67%):  Particle flows RIGHT→LEFT (Lightning → Center)
 */
@keyframes rightBeamBidir {

    /* Idle start */
    0% {
        left: -40px;
        opacity: 0;
    }

    22% {
        opacity: 0;
    }

    /* Phase 1: L→R flow through right segment (continuation from center) */
    23% {
        left: -40px;
        opacity: 0;
    }

    26% {
        opacity: 1;
    }

    43% {
        left: calc(100% + 10px);
        opacity: 1;
    }

    46% {
        left: calc(100% + 10px);
        opacity: 0;
    }

    /* Phase 2: R→L flow through right segment (Lightning → Center) */
    47% {
        left: calc(100% + 10px);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    67% {
        left: -40px;
        opacity: 1;
    }

    70% {
        left: -40px;
        opacity: 0;
    }

    /* Idle end */
    100% {
        opacity: 0;
    }
}

/* Center box border glow - pulses when beam passes through */
.swap-box.center-box {
    animation: centerBoxPulse 10s infinite ease-in-out;
}

@keyframes centerBoxPulse {

    /* Default state */
    0%,
    15%,
    28%,
    40%,
    60%,
    75%,
    88%,
    100% {
        border-color: rgba(202, 255, 51, 0.3);
        box-shadow: 0 0 20px rgba(202, 255, 51, 0.15);
    }

    /* Pulse 1: L→R beam passes through center (~21-24%) */
    21% {
        border-color: rgba(202, 255, 51, 1);
        box-shadow: 0 0 40px rgba(202, 255, 51, 0.8), 0 0 80px rgba(202, 255, 51, 0.4), inset 0 0 30px rgba(202, 255, 51, 0.15);
    }

    /* Pulse 2: R→L beam passes through center (~68-71%) */
    69% {
        border-color: rgba(202, 255, 51, 1);
        box-shadow: 0 0 40px rgba(202, 255, 51, 0.8), 0 0 80px rgba(202, 255, 51, 0.4), inset 0 0 30px rgba(202, 255, 51, 0.15);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .swap-triad-container {
        flex-direction: column;
        gap: 2rem;
    }

    /* Reset desktop horizontal-alignment offsets for vertical layout */
    .swap-triad-container>.connection-beam {
        margin-top: 0;
    }

    .swap-triad-container>.swap-box.center-box {
        margin-top: 0;
    }

    .connection-beam {
        width: 2px;
        min-width: 2px;
        height: 40px;
        min-height: 40px;
    }

    /* Left beam: First half of cycle only */
    .left-to-center .beam-particle {
        width: 100%;
        height: 60%;
        top: -60%;
        left: 0;
        background: linear-gradient(180deg, transparent, var(--accent-color), transparent);
        animation: beamFlowVerticalFirst 12s infinite linear;
    }

    /* Right beam: Second half of cycle only */
    .right-to-center .beam-particle {
        width: 100%;
        height: 60%;
        top: -60%;
        left: 0;
        background: linear-gradient(180deg, transparent, var(--accent-color), transparent);
        animation: beamFlowVerticalSecond 12s infinite linear;
    }
}

/* 
 * Bidirectional Mobile Beam Animation (12s cycle):
 * Phase 1 (0-25%):   Blockchain → Center (top beam down)
 * Phase 2 (25-50%):  Center → Lightning (bottom beam down)
 * Phase 3 (50-75%):  Lightning → Center (bottom beam up)
 * Phase 4 (75-100%): Center → Blockchain (top beam up)
 */

/* Top beam: Phases 1 & 4 */
@keyframes beamFlowVerticalFirst {

    /* Phase 1: Flow DOWN (Blockchain → Center) */
    0% {
        top: -60%;
        opacity: 0;
    }

    3% {
        opacity: 1;
    }

    22% {
        top: 100%;
        opacity: 1;
    }

    25% {
        top: 100%;
        opacity: 0;
    }

    /* Idle during phases 2 & 3 */
    74% {
        opacity: 0;
    }

    /* Phase 4: Flow UP (Center → Blockchain) */
    75% {
        top: 100%;
        opacity: 0;
    }

    78% {
        opacity: 1;
    }

    97% {
        top: -60%;
        opacity: 1;
    }

    100% {
        top: -60%;
        opacity: 0;
    }
}

/* Bottom beam: Phases 2 & 3 */
@keyframes beamFlowVerticalSecond {

    /* Idle during phase 1 */
    0% {
        opacity: 0;
    }

    24% {
        opacity: 0;
    }

    /* Phase 2: Flow DOWN (Center → Lightning) */
    25% {
        top: -60%;
        opacity: 0;
    }

    28% {
        opacity: 1;
    }

    47% {
        top: 100%;
        opacity: 1;
    }

    50% {
        top: 100%;
        opacity: 0;
    }

    /* Phase 3: Flow UP (Lightning → Center) */
    50% {
        top: 100%;
        opacity: 0;
    }

    53% {
        opacity: 1;
    }

    72% {
        top: -60%;
        opacity: 1;
    }

    75% {
        top: -60%;
        opacity: 0;
    }

    /* Idle during phase 4 */
    100% {
        opacity: 0;
    }
}

/* =========================================
   Slide 04: Liquidity - Matching Swap/Pay Layout (Text Top)
   ========================================= */

.slide-liquidity {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 2.5rem 1.5rem 1.5rem;
    position: relative;
    gap: 0.5rem;
}

.slide-liquidity .slide-number {
    order: 0;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

/* Content at TOP */
.liquidity-content-top {
    order: 1;
    padding: 0.5rem 0 0;
    margin-top: 2.5rem;
    margin-bottom: 0;
    text-align: left;
    width: 100%;
}

.liquidity-content-top .slide-title {
    font-size: 2.5rem;
    margin-bottom: 0.35rem;
    background: linear-gradient(135deg, #ffffff 0%, #a0a0a0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.liquidity-content-top .slide-desc {
    font-size: 1rem;
    margin-bottom: 0;
    opacity: 0.8;
    line-height: 1.6;
    max-width: 400px;
    color: var(--text-secondary);
}

/* Force static positioning */
.slide-liquidity .liquidity-content-top,
.slide-liquidity .slide-content-wrapper.liquidity-content-top {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    order: 1;
    width: 100%;
    padding: 0;
    text-align: left;
}

/* Visual Center */
.slide-liquidity #slide4-liquidity-animation {
    order: 2;
    flex: 1;
    width: 100%;
    margin: 0.5rem 0;
}

/* =========================================
   Slide 05: Node - Matching Swap/Pay Layout (Text Top)
   ========================================= */

.slide-node {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 2.5rem 1.5rem 1.5rem;
    position: relative;
    gap: 0.5rem;
}

.slide-node .slide-number {
    order: 0;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

/* Content at TOP */
.node-content-top {
    order: 1;
    padding: 0.5rem 0 0;
    margin-top: 2.5rem;
    margin-bottom: 0;
    text-align: left;
    width: 100%;
}

.node-content-top .slide-title {
    font-size: 2.5rem;
    margin-bottom: 0.35rem;
    background: linear-gradient(135deg, #ffffff 0%, #a0a0a0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.node-content-top .slide-desc {
    font-size: 1rem;
    margin-bottom: 0;
    opacity: 0.8;
    line-height: 1.6;
    max-width: 400px;
    color: var(--text-secondary);
}

/* Force static positioning */
.slide-node .node-content-top,
.slide-node .slide-content-wrapper.node-content-top {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    order: 1;
    width: 100%;
    padding: 0;
    text-align: left;
}

/* =========================================
   Node Carousel & Sub-Cards - Compact & Stacked
   ========================================= */

.node-carousel-container {
    order: 2;
    flex: 1;
    width: 100%;
    align-self: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    z-index: 5;
}

/* Carousel Indicators (Dots) - Positioned relative to the 230px deck */
/* Carousel Indicators (Dots) - Top Right of the 230x215 sub-card */
.carousel-indicators {
    position: absolute;
    top: calc(50% - 92px);
    /* 15px inside top edge */
    right: calc(50% - 105px);
    /* 10px inside right edge */
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 30;
}

.indicator-dot {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.indicator-dot.active {
    background: #fff;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}

/* Sub Card Styled - Smaller & Stacked Effect */
.node-sub-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 230px;
    height: 215px;
    background: rgba(20, 20, 23, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 14px;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;

    /* Inactive State - Always visible, offset to show stack peek */
    opacity: 0.7;
    pointer-events: none;
    transform: translate(calc(-50% + 8px), calc(-50% + 8px));
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

/* Active State - Front */
.node-sub-card.active {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%);
    z-index: 10;
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(20, 20, 23, 0.7);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

/* Flashlight Effect */
.node-sub-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(400px circle at var(--mouse-x, 130px) var(--mouse-y, 140px),
            rgba(255, 255, 255, 0.06),
            transparent 40%);
    z-index: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.node-sub-card:hover::before {
    opacity: 1;
}

/* Inner Glow */
.node-sub-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Icon Container - Smaller */
.sub-card-icon-container {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    margin-bottom: 0.1rem;
    position: relative;
    z-index: 2;
}

.sub-card-icon-container iconify-icon {
    font-size: 1.4rem;
    color: #fff;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.25));
}

/* Text Elements - Smaller */
.sub-card-title {
    font-family: var(--font-main);
    font-size: 0.7rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin: 0;
    font-weight: 600;
    position: relative;
    z-index: 2;
}

.sub-card-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
    position: relative;
    z-index: 2;
}

.sub-card-item {
    font-size: 1rem;
    color: #fff;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sub-card-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.sub-card-item .dot {
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
}

/* Sub-Card 2 (Protocol Support) - 2x2 Grid */
#sub-card-2 .sub-card-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
}

#sub-card-2 .sub-card-item {
    width: 100%;
}

#sub-card-2 .sub-card-item:nth-last-child(-n+2) {
    border-bottom: none;
    padding-bottom: 0;
}

/* Hide Nav Arrows (removed from HTML, but keep style in case) */
.carousel-nav {
    display: none;
}

/* Ensure Swap Action Buttons (Console/Manage Liquidity) are consistant */
.slide-node .swap-action-btn,
.slide-liquidity .swap-action-btn {
    order: 3;
    margin-top: auto;
    margin-bottom: 3.5rem;
    /* Align with Card 2 & 3 */
    align-self: center;
    min-width: 120px;
}

/* =========================================
   Mobile Optimization for Products Section
   ========================================= */

@media (max-width: 768px) {

    /* --- Snap Scroll Behavior --- */
    html {
        /* Global snap disabled by default */
        scroll-padding-top: 0;
    }

    html.snap-mandatory,
    html.snap-mandatory body {
        scroll-snap-type: y mandatory;
        scroll-padding-top: 70px;
    }

    /* ... */

    #flashlight-overlay {
        display: none !important;
    }

    /* Reset section for mobile - Return to Main Flow */
    #products-section {
        height: auto !important;
        /* Allow full expansion */
        overflow-y: visible !important;
        /* No internal scroll */
        /* Controlled by HTML */
        scroll-padding-top: 85px;
        margin-top: 0;
        display: block;
    }

    /* Disable sticky wrapper */
    .products-sticky-wrapper {
        position: relative !important;
        height: auto !important;
        width: 100%;
        margin-top: 0;
        overflow: visible !important;
        display: block !important;
    }

    .mobile-menu-btn {
        display: block;
    }

    .nav-links,
    .nav-right {
        display: none;
    }

    header {
        justify-content: space-between;
        padding: 1rem 1.5rem;
    }

    .logo-container {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    /* Hero Section - Flex Column on Mobile */
    .hero-section {
        display: flex !important;
        flex-direction: column !important;
        min-height: auto;
        padding-bottom: 0 !important;
        justify-content: flex-start;
        padding-top: 120px !important;
        /* Ensure content clears header */
    }

    .hero-content {
        order: 1;
        width: 100%;
    }

    .partners-section {
        order: 2;
        /* Move BELOW content / "Get Started" */
        margin-top: 2rem !important;
        /* Space from button */
        margin-bottom: 2rem !important;
        /* Space from visual */
        width: 100%;
        padding-bottom: 1rem;
        background: transparent;
        border-top: none;
    }

    .hero-visual {
        order: 3;
        /* Visual at the bottom */
        height: 350px;
        /* Reduces height slightly on mobile */
        width: 100%;
        margin-top: 1rem;
    }

    /* Swap Demo Section - Full viewport height with centered animation */
    .swap-demo-section {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 100dvh;
        padding: 5rem 1.5rem;
        gap: 2rem;
    }

    .swap-grid {
        grid-template-columns: 1fr;
        /* Stack on mobile */
        gap: 0;
        /* Remove gap to handle visual-col height */
        width: 100%;
    }

    /* Vertical Beam Connection for Mobile */
    .visual-col {
        height: 120px;
        width: 100%;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .beam-container {
        width: 2px !important;
        height: 100% !important;
        background: rgba(255, 255, 255, 0.1);
    }

    .beam-particle {
        width: 2px !important;
        height: 60px !important;
        left: 50% !important;
        top: 0;
        transform: translateX(-50%) !important;
        z-index: 5 !important;
    }

    .beam-particle.right {
        margin-left: -4px;
        animation: beam-down 3s infinite ease-in-out !important;
        background: linear-gradient(180deg, transparent, var(--accent-color), transparent) !important;
    }

    .beam-particle.left {
        margin-left: 4px;
        animation: beam-up 3s infinite ease-in-out !important;
        animation-delay: 1.5s !important;
        background: linear-gradient(0deg, transparent, #caff33, transparent) !important;
    }

    @keyframes beam-down {
        0% {
            top: -10%;
            opacity: 0;
        }

        20% {
            opacity: 1;
        }

        80% {
            opacity: 1;
        }

        100% {
            top: 110%;
            opacity: 0;
        }
    }

    @keyframes beam-up {
        0% {
            top: 110%;
            opacity: 0;
        }

        20% {
            opacity: 1;
        }

        80% {
            opacity: 1;
        }

        100% {
            top: -10%;
            opacity: 0;
        }
    }

    .center-node-logo {
        width: 64px !important;
        height: 64px !important;
        padding: 8px !important;
    }

    /* Description Section Adjustments */
    .description-section #scroll-text {
        font-size: 1.8rem !important;
        /* Smaller font on mobile */
        line-height: 1.3;
    }

    .description-section .char {
        transition: color 0.5s ease !important;
        /* Slower grey-to-white transition */
    }

    /* --- Mobile Native Vertical Scroll --- */

    /* Reset section for mobile */
    /* Reset section for mobile */
    /* Reset section for mobile - Main Flow Configured Above */
    /* #products-section block removed - see top of media query */

    /* Disable sticky wrapper - let container handle scroll */
    .products-sticky-wrapper {
        position: relative !important;
        height: auto !important;
        width: 100%;
        margin-top: 0;
        overflow: visible !important;
        display: block !important;
    }

    .products-track {
        transform: none !important;
        width: 100%;
        height: auto;
        padding: 0 !important;
        /* Override desktop padding */
        gap: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .product-slide {
        width: 100%;
        min-height: calc(100dvh - 70px) !important;
        /* Fit remaining space */
        height: calc(100dvh - 90px) !important;
        scroll-snap-align: start !important;
        /* Enable snapping */
        scroll-snap-stop: always !important;
        /* Force stop at each slide */
        flex-shrink: 0;
        border-radius: 0;
        border: none;
        /* Removed bottom border */
        padding: 4rem 1.5rem 2rem 1.5rem;
        /* Increased top padding to clear counters */
        position: relative;
        box-sizing: border-box;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        /* Top align content */
    }

    /* Snap alignment removed for other sections to allow free flow */
    /* Snap alignment removed for other sections to allow free flow */
    /* .hero-section, footer rules removed */

    /* Align content to top */

    /* --- Content Visibility & Alignment --- */

    /* Slide Header / Number */
    .slide-number,
    .slide-swap .slide-number,
    .slide-pay .slide-number,
    .slide-liquidity .slide-number,
    .slide-node .slide-number,
    .slide-devkit .slide-number {
        position: absolute;
        top: 1.5rem;
        left: 1.5rem;
        margin: 0;
        display: block;
        z-index: 10;
    }

    /* LED indicator alignment - match slide-number position */
    .slide-corner-badge,
    .slide-swap .slide-corner-badge,
    .slide-pay .slide-corner-badge,
    .slide-liquidity .slide-corner-badge,
    .slide-node .slide-corner-badge,
    .slide-devkit .slide-corner-badge {
        position: absolute;
        top: 1.5rem;
        right: 1.5rem;
        z-index: 10;
    }

    /* Slide Content Wrapper */
    .slide-content-wrapper,
    .slide-swap .slide-content-wrapper,
    .slide-pay .slide-content-wrapper {
        position: static;
        width: 100%;
        text-align: center;
        margin-bottom: 2rem;
        padding: 0;
        margin-top: 0;
        order: -1;
        /* Ensure text creates flow at top */
    }

    /* Specific overrides for layout flow */
    .slide-swap,
    .slide-pay,
    .slide-liquidity,
    .slide-node,
    .slide-devkit {
        flex-direction: column;
        justify-content: center;
        /* Center content vertically */
        align-items: center;
        /* Center content horizontally */
    }

    /* Visual Elements Scaling */
    .swap-triad-container {
        transform: scale(0.65);
        width: 100%;
        margin: 1rem 0;
        max-height: 40vh;
        flex-grow: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Slides 3 & 4 (Pay & Liquidity) - Move significantly up */
    .pay-visual,
    #slide4-liquidity-animation {
        transform: scale(0.85) translateY(-130px);
        width: 100%;
        margin: 0;
        flex-grow: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Slide 5 (Node) - Lower to avoid text overlap */
    .node-carousel-container {
        transform: scale(0.85) translateY(220px);
        width: 100%;
        margin: 0;
        flex-grow: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* --- Button Alignment (Absolute Bottom) --- */
    .swap-action-btn,
    .slide-pay .pay-action-btn,
    .slide-node .swap-action-btn,
    .slide-liquidity .swap-action-btn {
        position: absolute;
        bottom: 10rem;
        /* Moved up from 3.5rem */
        left: 50%;
        transform: translateX(-50%);
        margin: 0 !important;
        width: max-content;
        min-width: 160px;
        z-index: 20;
    }

    /* Slide 6 DevKit: Use flex flow to ensure correct order */
    .slide-devkit {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 2rem;
        padding: 4rem 1.5rem !important;
    }

    .slide-devkit h2 {
        position: static !important;
        order: 1;
        margin: 0 !important;
        font-size: 2.2rem !important;
        text-align: center;
    }

    .slide-devkit .btn-docs {
        position: relative !important;
        order: 2;
        margin: 1.5rem auto !important;
        width: auto !important;
        min-width: 160px;
        transform: none !important;
        z-index: 20;
    }

    .slide-devkit .slide-content-wrapper {
        position: static !important;
        order: 3;
        margin: 0 !important;
        text-align: center;
        padding: 0;
    }

    /* Fix Mobile Menu Z-Index and Visibility */
    .mobile-menu-dropdown {
        z-index: 1001 !important;
    }

    header {
        z-index: 1000 !important;
    }

    .mobile-menu-btn {
        z-index: 1002 !important;
        position: relative;
        padding: 5px;
        margin: -5px;
        pointer-events: auto !important;
    }

    .logo-container {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        pointer-events: none;
        /* Allow clicks to pass through to items behind if necessary */
    }

    .logo-container .project-logo {
        pointer-events: auto;
        /* Logo image itself should be clickable */
    }

    /* Hide desktop nav dots on mobile if using native scroll */
    /* Show dots on mobile with fixed positioning */
    .gallery-dots-container {
        display: flex;
        position: fixed;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1000;
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
        /* Let clicks pass through */
    }

    .gallery-dots-container.visible {
        opacity: 1;
        pointer-events: auto;
    }

    /* --- Refined Mobile Footer --- */
    .site-footer {
        padding: 4rem 1.5rem 2rem;
        text-align: center;
    }

    .footer-top {
        flex-direction: column;
        align-items: center;
        gap: 3rem;
        margin-bottom: 4rem;
    }

    .footer-sales {
        text-align: center;
        max-width: 100%;
    }

    .footer-sales p {
        margin: 0 auto 2rem;
    }

    .footer-links {
        justify-content: center;
        gap: 3rem;
        width: 100%;
    }

    .footer-col {
        align-items: center;
    }

    .footer-brand-large {
        margin-bottom: 3rem;
    }

    .footer-logo-icon {
        max-width: 200px;
        margin: 0 auto;
        opacity: 0.6;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 1.5rem;
        padding-top: 1.5rem;
    }

    .social-links {
        justify-content: center;
        flex-wrap: wrap;
        gap: 1.5rem;
    }
}