/* Basic Reset & Font */
:root {
    --primary-blue: #0a255e;
    --accent-blue: #00b8d4;
    --light-blue-bg: #1e3a8a;
    --text-color: #ffffff;
    --dot-color: rgba(255, 255, 255, 0.3);
    --line-color: rgba(255, 255, 255, 0.1);
    --bird-color: rgba(220, 220, 250, 0.6);

    /* Stats Section */
    --card-bg: #1a3272;
    --card-accent-gradient: linear-gradient(90deg, var(--accent-blue), #00c9e4);
    --icon-bg-bitcoin: #f7931a;
    --icon-bg-ethereum: #627eea;
    --icon-bg-dollar: #f7931a;
    --icon-bg-total-usd: #26a17b;
    --icon-bg-token-sale: #f7931a;

    /* About Project Section */
    --countdown-box-bg: rgba(255, 255, 255, 0.08);
    --countdown-box-border: rgba(255, 255, 255, 0.3);
    --wave-color: #132f70; /* Slightly lighter than primary-blue for the wave */
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'Arial', sans-serif;
    background-color: var(--primary-blue);
    color: var(--text-color);
    overflow-x: hidden;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}


/* Header Styles */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5%;
    background-color: var(--primary-blue);
    position: sticky; /* Make header sticky */
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.logo-container .logo { height: 40px; }
.main-nav ul { list-style: none; padding: 0; margin: 0; display: flex; }
.main-nav ul li { margin-left: 25px; }
.main-nav ul li a { text-decoration: none; color: var(--text-color); font-weight: bold; font-size: 0.9em; transition: color 0.3s ease; }
.main-nav ul li a:hover { color: var(--accent-blue); }
.auth-buttons .btn { margin-left: 15px; padding: 8px 18px; border: none; border-radius: 20px; font-weight: bold; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; font-size: 0.85em; }
.auth-buttons .btn i { margin-right: 5px; }
.auth-buttons .btn-login { background-color: var(--accent-blue); color: var(--primary-blue); }
.auth-buttons .btn-signup { background-color: var(--light-blue-bg); color: var(--text-color); border: 1px solid var(--accent-blue); }
.auth-buttons .btn:hover { transform: translateY(-2px); }
.auth-buttons .btn-login:hover { background-color: #00a8c0; }
.auth-buttons .btn-signup:hover { background-color: var(--accent-blue); color: var(--primary-blue); }
.menu-toggle { display: none; background: none; border: none; color: var(--text-color); font-size: 1.8em; cursor: pointer; padding: 5px; }

/* Slider Section */
.slider-section { position: relative; width: 100%; min-height: calc(100vh - 70px); display: flex; align-items: center; justify-content: center; overflow: hidden; }
#dotsBackground { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.slider-container { position: relative; width: 90%; max-width: 1200px; height: auto; z-index: 2; }
.slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity 0.7s ease-in-out, transform 0.7s ease-in-out; transform: translateX(20px); display: flex; align-items: center; justify-content: center; }
.slide.active { opacity: 1; visibility: visible; transform: translateX(0); }
.slide.exiting { transform: translateX(-20px); }
.slide-content { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 40px 0; }
.slide-left { flex-basis: 50%; padding-right: 30px; opacity: 0; }
.slide.active .slide-left { animation: slideInFromLeft 0.8s ease-out 0.3s forwards; }
.slide-right { flex-basis: 45%; display: flex; justify-content: center; align-items: center; opacity: 0; }
.slide.active .slide-right { animation: slideInFromRight 0.8s ease-out 0.4s forwards; }
.slide.active:nth-child(2) .slide-right,
.slide.active:nth-child(3) .slide-right { animation-name: slideInFromTop; animation-duration: 0.9s; animation-timing-function: ease-out; animation-delay: 0.4s; animation-fill-mode: forwards; }
.slide-right img { max-width: 100%; height: auto; border-radius: 10px; box-shadow: 0 10px 25px rgba(0,0,0,0.2); }
@keyframes slideInFromLeft { from { transform: translateX(-50px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideInFromRight { from { transform: translateX(50px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideInFromTop { from { transform: translateY(-70px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.social-icons { margin-bottom: 20px; }
.social-icons a { color: var(--text-color); font-size: 1.4em; margin-right: 15px; opacity: 0.7; transition: opacity 0.3s ease, transform 0.3s ease; }
.social-icons a:hover { opacity: 1; transform: scale(1.1); color: var(--accent-blue); }
.slide-left h1 { font-size: 2.8em; margin-bottom: 20px; line-height: 1.2; font-weight: bold; }
.slide-left p { font-size: 1.1em; margin-bottom: 30px; line-height: 1.6; opacity: 0.9; }
.slide .action-buttons .btn { padding: 12px 25px; border: none; border-radius: 25px; font-weight: bold; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; margin-right: 15px; font-size: 0.9em; }
.slide .action-buttons .btn-primary { background-color: var(--text-color); color: var(--primary-blue); }
.slide .action-buttons .btn-primary:hover { background-color: #f0f0f0; transform: translateY(-2px); }
.slide .action-buttons .btn-secondary { background-color: var(--accent-blue); color: var(--primary-blue); }
.slide .action-buttons .btn-secondary:hover { background-color: #00a8c0; transform: translateY(-2px); }
.slider-nav { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(255, 255, 255, 0.15); color: var(--text-color); border: none; padding: 15px; font-size: 1.5em; cursor: pointer; z-index: 3; border-radius: 50%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s ease; }
.slider-nav:hover { background-color: rgba(255, 255, 255, 0.3); }
.slider-nav.prev { left: 2%; }
.slider-nav.next { right: 2%; }

/* Stats Section Styles */
.stats-section { background-color: var(--primary-blue); padding: 60px 0; color: var(--text-color); }
.stats-section .container { width: 90%; max-width: 1300px; margin: 0 auto; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 30px; }
.stat-card { background-color: var(--card-bg); border-radius: 15px; padding: 0; position: relative; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.stat-card.is-visible { opacity: 1; transform: translateY(0); }
.card-accent-bar { height: 15px; background: var(--card-accent-gradient); border-radius: 15px 15px 0 0; margin: 10px 15px 0 15px; }
.card-main-content { padding: 20px 25px 25px 25px; display: flex; flex-direction: column; align-items: flex-start; flex-grow: 1; }
.card-header { display: flex; align-items: center; margin-bottom: 25px; width: 100%; }
.icon-wrapper { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 15px; font-size: 1.3em; color: white; }
.icon-wrapper.bitcoin-icon { background-color: var(--icon-bg-bitcoin); }
.icon-wrapper.ethereum-icon i { color: #3c3c3d; font-size: 1.5em; background-color: #e0e0e0; padding: 5px; border-radius: 4px; }
.icon-wrapper.dollar-icon { background-color: var(--icon-bg-dollar); }
.icon-wrapper.total-usd-icon { background-color: var(--icon-bg-total-usd); }
.icon-wrapper.token-sale-icon { background-color: var(--icon-bg-token-sale); }
.card-header h3 { margin: 0; font-size: 1.2em; font-weight: 600; color: var(--text-color); }
.card-value { background: var(--card-accent-gradient); padding: 10px 20px; border-radius: 20px; font-size: 1em; font-weight: bold; color: var(--primary-blue); align-self: flex-start; margin-top: auto; }
.card-value span { display: inline-block; min-width: 50px; text-align: right; }

/* About The Project Section Styles */
.about-project-section { background-color: var(--primary-blue); padding: 80px 0 120px 0; color: var(--text-color); position: relative; overflow: hidden; }
.about-project-content { display: flex; align-items: flex-start; gap: 40px; }
.about-text-content { flex: 1.2; max-width: 60%; }
.about-text-content h2 { font-size: 2.5em; margin-bottom: 25px; font-weight: bold; }
.about-text-content p { font-size: 0.9em; line-height: 1.6; margin-bottom: 15px; opacity: 0.9; }
.about-text-content .action-buttons { margin-top: 30px; }
.about-text-content .action-buttons .btn { padding: 12px 25px; border: none; border-radius: 25px; font-weight: bold; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; margin-right: 15px; font-size: 0.9em; }
.about-text-content .action-buttons .btn-primary { background: linear-gradient(90deg, var(--accent-blue), #00c9e4); color: var(--primary-blue); }
.about-text-content .action-buttons .btn-primary:hover { transform: translateY(-2px); }
.about-text-content .action-buttons .btn-secondary { background-color: var(--accent-blue); color: var(--primary-blue); }
.about-text-content .action-buttons .btn-secondary:hover { transform: translateY(-2px); }
.countdown-timer-wrapper { flex: 0.8; max-width: 40%; display: flex; justify-content: center; }
.countdown-timer { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; width: 100%; max-width: 450px; }
.time-unit { background-color: var(--countdown-box-bg); border: 2px dashed var(--countdown-box-border); border-radius: 10px; padding: 20px 10px; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100px; }
.time-unit span { font-size: 2.8em; font-weight: bold; line-height: 1.1; display: block; color: var(--text-color); margin-bottom: 5px; position: relative; transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out; }
.time-unit span.changing { opacity: 0.5; transform: translateY(-5px) scale(0.95); }
.time-unit span.updated { opacity: 1; transform: translateY(0) scale(1); }
.time-unit small { font-size: 0.85em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.bottom-wave-container { position: absolute; bottom: 0; left: 0; width: 100%; height: auto; line-height: 0; z-index: 5; }
.bottom-wave { width: 100%; height: auto; display: block; }
.bottom-wave path { fill: var(--wave-color); }
.scroll-to-top-button { position: fixed; bottom: 30px; right: 30px; background-color: var(--accent-blue); color: var(--primary-blue); width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2em; text-decoration: none; box-shadow: 0 4px 10px rgba(0,0,0,0.2); z-index: 990; opacity: 0; visibility: hidden; transform: translateY(20px); transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; }
.scroll-to-top-button.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-to-top-button:hover { background-color: #00a8c0; }
.about-project-section .animate-on-scroll { opacity: 0; transition: opacity 0.7s ease-out, transform 0.7s ease-out; }
.about-project-section .animate-on-scroll.from-left { transform: translateX(-50px); }
.about-project-section .animate-on-scroll.from-right { transform: translateX(50px); }
.about-project-section .animate-on-scroll.is-visible { opacity: 1; transform: translateX(0) translateY(0); }
.about-text-content p.animate-paragraph { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; }
.about-text-content p.animate-paragraph.is-visible { opacity: 1; transform: translateY(0); }


/* Responsive Adjustments */
@media (max-width: 992px) {
    .slide-content { flex-direction: column; text-align: center; }
    .slide-left, .slide-right { flex-basis: 100%; padding-right: 0; margin-bottom: 30px; }
    .slide-left h1 { font-size: 2.2em; }
    .slide .social-icons, .slide .action-buttons { justify-content: center; display: flex; }
    .slide .action-buttons .btn { margin: 0 10px; }
    .slider-nav { padding: 10px; font-size: 1.2em; width: 40px; height: 40px; }

    .stats-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
    .card-main-content { padding: 15px 20px 20px 20px; }
    .card-header h3 { font-size: 1.1em; }
    .icon-wrapper { width: 35px; height: 35px; font-size: 1.1em; }
    .card-value { font-size: 0.9em; padding: 8px 15px; }
    .card-accent-bar { margin: 8px 10px 0 10px; height: 12px; }

    .about-project-content { flex-direction: column; align-items: center; }
    .about-text-content, .countdown-timer-wrapper { max-width: 90%; width: 100%; }
    .about-text-content { text-align: center; margin-bottom: 40px; }
    .about-text-content .action-buttons { justify-content: center; display: flex; }
    .countdown-timer { gap: 10px; max-width: 100%; }
    .time-unit span { font-size: 2.2em; }
}

@media (max-width: 768px) {
    header { flex-wrap: wrap; /* Allow wrapping */ }
    .main-nav { order: 3; width: 100%; max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.25, 0.1, 0.25, 1); background-color: var(--light-blue-bg); position: absolute; top: 100%; left: 0; z-index: 999; }
    .main-nav.active { max-height: 500px; }
    .main-nav ul { flex-direction: column; align-items: center; padding: 10px 0; }
    .main-nav ul li { margin: 10px 0; margin-left: 0; }
    .main-nav ul li a { padding: 10px 20px; display: block; width: 100%; text-align: center; }
    .menu-toggle { display: block; order: 2; margin-left: auto; }
    /* Adjust auth buttons if they need to wrap differently */
    /* .auth-buttons { width: 100%; justify-content: center; margin-top: 10px;} */


    .slide-left h1 { font-size: 1.8em; }
    .slide-left p { font-size: 1em; }
    .slider-nav.prev { left: 10px; }
    .slider-nav.next { right: 10px; }
    .about-text-content h2 { font-size: 2em; }
    .scroll-to-top-button { width: 40px; height: 40px; font-size: 1em; bottom: 20px; right: 20px; }
}

@media (max-width: 480px) {
    .stats-grid { /* grid-template-columns: 1fr; */ }
    .card-header h3 { font-size: 1em; }
    .countdown-timer { grid-template-columns: repeat(2, 1fr); }
    .time-unit { padding: 15px 8px; }
    .time-unit span { font-size: 1.8em; }
    .time-unit small { font-size: 0.75em; }
}
/* Features Section Styles */
:root {
    /* ... existing variables ... */
    --features-line-color: rgba(255, 255, 255, 0.2); /* Color for timeline lines */
    --features-dot-color: var(--accent-blue);
    --top-wave-features-color: #132f70; /* Same as bottom wave for consistency or new color */
}

.features-section {
    background-color: var(--primary-blue);
    padding: 80px 0; /* Adjust padding if top wave is tall */
    color: var(--text-color);
    position: relative;
    overflow-x: hidden; /* Prevent horizontal scroll from animations */
}

/* Top Wave for Features Section */
.top-wave-container-features {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    line-height: 0;
    z-index: 0; /* Behind content */
    transform: scaleY(-1); /* Flip wave if it's designed as a bottom wave */
}
.top-wave-features {
    width: 100%;
    height: auto; /* Or set a fixed height e.g., 100px */
    display: block;
}
.top-wave-features path {
    fill: var(--top-wave-features-color);
}

.features-section .container {
    position: relative; /* For z-index stacking above wave */
    z-index: 1;
}

.features-section .section-title {
    text-align: center;
    font-size: 2.5em;
    margin-bottom: 60px;
    font-weight: bold;
}

.features-timeline {
    position: relative;
    max-width: 900px; /* Adjust as needed */
    margin: 0 auto;
}

/* Central Vertical Line */
.features-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    background-color: var(--features-line-color);
    z-index: 0;
}

.feature-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Align items to the top of their row */
    margin-bottom: 50px;
    position: relative;
    width: 100%;
}

/* Clearfix for any potential float issues if not using flex fully */
.feature-item::after {
    content: "";
    display: table;
    clear: both;
}

.feature-content,
.feature-image {
    width: calc(50% - 40px); /* Account for gap and connector space */
    position: relative; /* For pseudo-elements connecting to the line */
    padding: 10px; /* Basic padding */
}

/* Text alignment and connector positioning */
.feature-item:nth-child(odd) .feature-content { /* Text Left */
    order: 1;
    text-align: right;
    padding-right: 40px; /* Space for connector */
}
.feature-item:nth-child(odd) .feature-image { /* Image Right */
    order: 2;
    padding-left: 40px;
}

.feature-item:nth-child(even) .feature-content { /* Text Right */
    order: 2;
    text-align: left;
    padding-left: 40px; /* Space for connector */
}
.feature-item:nth-child(even) .feature-image { /* Image Left */
    order: 1;
    padding-right: 40px;
}


/* Connector Dots and Lines from Content to Center Line */
.feature-content::before { /* Connector Dot */
    content: '';
    position: absolute;
    top: 15px; /* Align with roughly the first line of text/title */
    width: 15px;
    height: 15px;
    background-color: var(--features-dot-color);
    border: 3px solid var(--primary-blue); /* Creates 'empty center' effect if dot is primary blue */
    border-radius: 50%;
    z-index: 2; /* Above vertical line */
}
.feature-content::after { /* Horizontal Connector Line */
    content: '';
    position: absolute;
    top: 22px; /* Vertically center with dot */
    height: 3px;
    background-color: var(--features-line-color);
    z-index: 1; /* Behind dot, above vertical line segments if they overlap */
}

/* Positioning Connector for Text Left items */
.feature-item:nth-child(odd) .feature-content::before { /* Dot */
    right: -27.5px; /* (Width of connector column 40px / 2) + (dot width 15px / 2) roughly */
    transform: translateX(50%);
}
.feature-item:nth-child(odd) .feature-content::after { /* Line */
    right: 0;
    width: 20px; /* Half the connector space */
}

/* Positioning Connector for Text Right items */
.feature-item:nth-child(even) .feature-content::before { /* Dot */
    left: -27.5px;
    transform: translateX(-50%);
}
.feature-item:nth-child(even) .feature-content::after { /* Line */
    left: 0;
    width: 20px;
}


.feature-content h3 {
    font-size: 1.6em;
    margin-bottom: 10px;
    color: var(--text-color);
}

.feature-content p {
    font-size: 0.9em;
    line-height: 1.6;
    margin-bottom: 20px;
    opacity: 0.8;
}

.btn.btn-feature {
    background-color: var(--accent-blue);
    color: var(--primary-blue);
    padding: 8px 18px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.85em;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}
.btn.btn-feature:hover {
    background-color: #00a8c0;
    transform: translateY(-2px);
}

.feature-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    /* box-shadow: 0 4px 12px rgba(0,0,0,0.15); */
    display: block; /* Remove extra space below image */
}

/* Animation Base Styles for Our Features Section */
.features-section .animate-on-scroll {
    opacity: 0;
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.features-section .animate-on-scroll.fade-in-up {
    transform: translateY(40px);
}
/* Specific animations for feature items if needed, or use generic */
.features-section .feature-item.animate-on-scroll .feature-content,
.features-section .feature-item.animate-on-scroll .feature-image {
    opacity: 0; /* Individual parts of item also start hidden */
}

.features-section .animate-on-scroll.is-visible,
.features-section .feature-item.animate-on-scroll.is-visible .feature-content,
.features-section .feature-item.animate-on-scroll.is-visible .feature-image {
    opacity: 1;
    transform: translateY(0) translateX(0); /* Reset transforms */
}

/* Initial states for sliding parts of feature items */
.features-section .feature-item .feature-text-left { transform: translateX(-30px); }
.features-section .feature-item .feature-image-right { transform: translateX(30px); }
.features-section .feature-item .feature-image-left { transform: translateX(-30px); }
.features-section .feature-item .feature-text-right { transform: translateX(30px); }


/* Responsive adjustments for Features Section */
@media (max-width: 768px) {
    .features-timeline::before { /* Hide central line on mobile or adjust */
        left: 20px; /* Or remove if layout stacks */
        transform: none;
    }
    .feature-item {
        flex-direction: column;
        align-items: center; /* Center items when stacked */
    }
    .feature-content,
    .feature-image {
        width: 100%;
        max-width: 400px; /* Max width for stacked items */
        padding-left: 0;
        padding-right: 0;
    }
    .feature-item:nth-child(odd) .feature-content,
    .feature-item:nth-child(even) .feature-content {
        order: 1; /* Text always first */
        text-align: center; /* Center text */
        margin-bottom: 20px;
    }
    .feature-item:nth-child(odd) .feature-image,
    .feature-item:nth-child(even) .feature-image {
        order: 2; /* Image always second */
    }
    /* Hide or re-think connectors on mobile */
    .feature-content::before,
    .feature-content::after {
        display: none;
    }
    .features-section .section-title {
        font-size: 2em;
        margin-bottom: 40px;
    }
}
/* Advantages Section Styles */
.advantages-section {
    background-color: var(--primary-blue);
    padding: 80px 0;
    color: var(--text-color);
}

.advantages-section .section-title {
    text-align: center;
    font-size: 2.5em; /* Consistent with other section titles */
    margin-bottom: 60px;
    font-weight: bold;
}

.advantages-grid {
    display: grid;
    /* Aim for 3 columns on larger screens, 2 on medium, 1 on small */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Adjust minmax for desired card width */
    gap: 30px;
}

.advantage-card {
    background-color: var(--card-bg); /* Reusing from stats-card */
    border-radius: 15px;
    padding: 0; /* Padding inside .advantage-card-content */
    position: relative;
    overflow: hidden; /* To contain accent bar */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column; /* To stack accent bar and content */

    /* Animation base styles */
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    /* transition-delay will be set by JS */
}
.advantage-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* Reusing .card-accent-bar from stat-card styles if already defined globally,
   otherwise define it here or ensure it's available.
.card-accent-bar {
    height: 15px;
    background: var(--card-accent-gradient);
    border-radius: 15px 15px 0 0;
    margin: 10px 15px 0 15px;
} */


.advantage-card-content {
    padding: 30px 25px; /* More vertical padding for icon and text */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Center content vertically if card height varies */
    flex-grow: 1; /* Allow content to take available space */
    min-height: 150px; /* Ensure a minimum card height */
}

.advantage-icon {
    /* If using <img> */
    width: 70px;  /* Adjust size as needed */
    height: 70px; /* Adjust size as needed */
    margin-bottom: 20px;
    object-fit: contain; /* If your icons are not square */

    /* If using Font Awesome <i class="advantage-icon ..."> */
    /* font-size: 3.5em;  Adjust size as needed */
    /* margin-bottom: 20px; */
    /* color: var(--accent-blue);  Or another color for FA icons */
}

.advantage-card-content h3 {
    margin: 0;
    font-size: 1.1em; /* Adjust as needed */
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-color);
}

/* Responsive adjustments for Advantages Section */
@media (max-width: 992px) {
    .advantages-grid {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }
}

@media (max-width: 600px) { /* Switch to 1 column earlier if cards are wide */
    .advantages-grid {
        grid-template-columns: 1fr;
        max-width: 400px; /* Optional: constrain width on single column */
        margin-left: auto;
        margin-right: auto;
    }
    .advantage-card-content {
        padding: 25px 20px;
    }
    .advantage-icon {
        width: 60px;
        height: 60px;
        /* font-size: 3em; For FA icons */
    }
    .advantage-card-content h3 {
        font-size: 1em;
    }
}
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #0A2463; /* Dark blue background for the whole page */
    color: #E0E0E0; /* Light text color */
    overflow-x: hidden; /* Prevent horizontal scroll */
}

.loan-steps-section {
    padding: 60px 20px;
    background-color: #0A2463; /* Match body or specific section color */
    position: relative; /* For potential pseudo-elements or absolute positioning inside */
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
}

.section-header h2 {
    font-size: 2.5rem;
    font-weight: 300;
    color: #FFFFFF;
    margin-bottom: 30px;
}

.scroll-indicator {
    position: absolute;
    top: -10px; /* Adjusted based on image */
    right: 10%; /* Positioned right as in image */
    transform: translateX(50%);
    font-size: 0.7rem;
    color: #A2D2FF;
    display: flex;
    flex-direction: column;
    align-items: center;
    letter-spacing: 1px;
}

.scroll-indicator-line {
    width: 1px;
    height: 30px; /* Length of the line */
    background-color: #A2D2FF;
    margin-top: 5px; /* Space between text and line */
    position: relative; /* For the circle */
}
.scroll-indicator-line::before {
    content: '';
    position: absolute;
    top: -8px; /* Position circle above the line */
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    border: 1px solid #A2D2FF;
    border-radius: 50%;
}


.timeline {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}

/* The central vertical line */
.timeline::after {
    content: '';
    position: absolute;
    width: 3px;
    background-color: #3E83E1; /* Lighter blue for line */
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -1.5px; /* Half of the width */
    z-index: 1;
}

.timeline-item {
    padding: 10px 0; /* Only vertical padding on item itself */
    position: relative;
    width: 50%;
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    margin-bottom: 50px; /* Space between items */
}
.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Left items */
.timeline-item:nth-child(odd) {
    left: 0;
    padding-right: 60px; /* Space for icon and connector */
}

/* Right items */
.timeline-item:nth-child(even) {
    left: 50%;
    padding-left: 60px; /* Space for icon and connector */
}

.timeline-icon-wrapper {
    position: absolute;
    top: 0; /* Aligns with the top of the L-connector */
    z-index: 3; /* Above the lines */
}

.timeline-icon {
    width: 40px;
    height: 40px;
    background-color: #3E83E1; /* Icon circle background */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF; /* Icon color */
    font-size: 1.2rem;
    border: 2px solid #A2D2FF; /* Lighter border for icon */
}

.timeline-item:nth-child(odd) .timeline-icon-wrapper {
    right: -20px; /* (icon_width / 2) */
}

.timeline-item:nth-child(even) .timeline-icon-wrapper {
    left: -20px; /* (icon_width / 2) */
}

/* L-shaped Connectors */
.timeline-item::before, .timeline-item::after {
    content: '';
    position: absolute;
    background-color: #A2D2FF; /* Connector line color */
    z-index: 2; /* Below icon, above main timeline line */
}

/* Horizontal part of L-connector */
.timeline-item::before {
    top: 20px; /* (icon_height / 2) */
    height: 2px; /* Thickness of line */
    width: 40px; /* Length from main axis to start of vertical part */
}

/* Vertical part of L-connector */
.timeline-item::after {
    top: 20px; /* Starts where horizontal part ends (vertically) */
    width: 2px; /* Thickness of line */
    height: 35px; /* Length of vertical part, connects to top of content */
}

.timeline-item:nth-child(odd)::before { /* Horizontal for left */
    right: 0;
}
.timeline-item:nth-child(odd)::after { /* Vertical for left */
    right: 40px; /* At the end of the horizontal part */
}

.timeline-item:nth-child(even)::before { /* Horizontal for right */
    left: 0;
}
.timeline-item:nth-child(even)::after { /* Vertical for right */
    left: 40px; /* At the end of the horizontal part */
}

.timeline-content {
    padding: 20px;
    background-color: rgba(27, 67, 155, 0.5); /* Slightly transparent content box background */
    border: 1px solid #3E83E1;
    border-radius: 8px;
    position: relative;
    margin-top: 55px; /* Space for the connector from top: icon_height/2 + vertical_connector_height */
    color: #E0E0E0;
}
.timeline-item:nth-child(odd) .timeline-content {
    text-align: right;
}
.timeline-item:nth-child(even) .timeline-content {
    text-align: left;
}


.timeline-content h3 {
    margin-top: 0;
    font-size: 1.2rem;
    color: #FFFFFF;
    font-weight: 500;
    margin-bottom: 8px;
}

.timeline-content p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #C0C0C0; /* Slightly dimmer than main text */
    margin-bottom: 0;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .section-header h2 {
        font-size: 2rem;
    }
    .scroll-indicator {
        font-size: 0.6rem;
        right: 5%;
    }

    .timeline::after { /* Central line */
        left: 20px; /* Move central line to the left */
        margin-left: 0;
    }

    .timeline-item {
        width: 100%;
        padding-left: 60px; /* All items get padding for icon and connector */
        padding-right: 10px; /* Reset right padding */
        left: 0 !important; /* Override inline style from JS or !important if needed */
        margin-bottom: 30px;
    }
    .timeline-item:nth-child(odd),
    .timeline-item:nth-child(even) {
        left: 0; /* Align all items to the left of the shifted central line */
        padding-left: 60px;
        padding-right: 10px;
    }
    .timeline-item:nth-child(odd) .timeline-content,
    .timeline-item:nth-child(even) .timeline-content {
        text-align: left; /* All content text-align left */
    }

    .timeline-icon-wrapper {
        top: 0;
    }
    .timeline-item:nth-child(odd) .timeline-icon-wrapper,
    .timeline-item:nth-child(even) .timeline-icon-wrapper {
        left: 0px; /* Position icon on the new central line */
    }

    /* L-Connectors for mobile */
    .timeline-item::before { /* Horizontal */
        left: 20px; /* Start from new central line position */
        width: 20px; /* Shorter horizontal part */
    }
     .timeline-item::after { /* Vertical */
        left: 40px; /* (central_line_pos + horizontal_connector_width) */
    }

    .timeline-item:nth-child(odd)::before,
    .timeline-item:nth-child(even)::before {
        right: auto; /* Override */
        left: 20px;
    }
    .timeline-item:nth-child(odd)::after,
    .timeline-item:nth-child(even)::after {
        right: auto; /* Override */
        left: 40px;
    }

    .timeline-content {
        margin-left: 0; /* Content starts after connector */
        margin-right: 0;
    }
}
.hero-section {
    background-color: #2a65c9; /* Primary blue background */
    position: relative;
    width: 100%;
    height: 300px; /* Adjust height as needed */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Prevents SVG from overflowing if it's larger */
  }

  .clouds-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    z-index: 1;
  }

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

  .hero-title {
    color: white;
    font-size: 2.5rem; /* Adjust font size as needed */
    font-weight: bold;
    font-family: Arial, sans-serif; /* Or your preferred font */
  }

  /* Responsive adjustments */
  @media (max-width: 768px) {
    .hero-title {
      font-size: 2rem;
    }
    .hero-section {
      height: 250px;
    }
  }
  @media (max-width: 480px) {
    .hero-title {
      font-size: 1.5rem;
    }
    .hero-section {
      height: 200px;
    }
  }
   .timeline-section {
            /* Optional: if you want the section to have a different BG than body */
        }

        .timeline-container {
            width: 90%;
            max-width: 900px;
            margin: 0 auto;
            position: relative;
        }

        /* The main vertical spine */
        .timeline-container::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 3px; /* Slightly thicker line */
            background-color: rgba(255, 255, 255, 0.25);
            z-index: 0;
        }

        .timeline-entry {
            display: flex;
            justify-content: space-between;
            align-items: center; /* Vertically align cards and marker */
            margin-bottom: 50px; /* Space between entries */
            position: relative;
            width: 100%;
        }

        .timeline-item {
            width: calc(50% - 55px); /* Half minus (marker_width/2 + gap) */
            padding: 20px;
            background-color: #2a65c9;
            border-radius: 12px;
            color: white;
            position: relative;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            min-height: 100px; /* Ensure some base height */
        }

        .timeline-item .card-highlight {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 8px;
            background: linear-gradient(to right, rgba(66, 194, 217, 0.6), rgba(66, 194, 217, 0.1));
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
        }

        .card-content-wrapper {
            display: flex;
            align-items: center;
            position: relative; /* For z-index if needed */
            z-index: 1; /* Above card-highlight */
        }

        .timeline-item.item-left .card-content-wrapper {
            flex-direction: row-reverse;
        }

        .timeline-item.item-right .card-content-wrapper {
            flex-direction: row;
        }

        .timeline-item .card-icon {
            width: 40px;
            height: 40px;
            min-width: 40px; /* Prevent shrinking */
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .timeline-item .card-icon svg {
            width: 24px;
            height: 24px;
            fill: #FFFFFF;
        }

        .timeline-item.item-left .card-icon {
            margin-left: 15px;
        }

        .timeline-item.item-right .card-icon {
            margin-right: 15px;
        }

        .timeline-item .card-text {
            flex-grow: 1;
        }

        .timeline-item.item-left .card-text {
            text-align: right;
        }

        .timeline-item.item-right .card-text {
            text-align: left;
        }

        .timeline-item h4 {
            font-size: 1.1em;
            margin-top: 0;
            margin-bottom: 5px;
            font-weight: 600;
        }

        .timeline-item p {
            font-size: 0.85em;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 0;
            line-height: 1.4;
        }

        .timeline-marker {
            width: 80px; /* Width of the central marker area */
            position: relative;
            z-index: 1; /* Above the main vertical line */
            height: 100px; /* To space year dot and connection dot */
            display: flex;
            align-items: center; /* Centers the connection-dot horizontally if not absolute */
            justify-content: center; /* Centers the connection-dot vertically if not absolute */
        }

        .marker-dot-year {
            width: 55px;
            height: 55px;
            background: linear-gradient(135deg, #2a65c9 0%, #42c2d9 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 0.8em;
            position: absolute;
            top: 0; /* Position at the top of timeline-marker */
            left: 50%;
            transform: translateX(-50%);
            box-shadow: 0 0 10px rgba(66, 194, 217, 0.5);
            border: 2px solid rgba(255,255,255,0.3);
        }

        .marker-connection-dot { /* Small circle for horizontal line connections */
            width: 12px;
            height: 12px;
            background-color: rgba(255, 255, 255, 0.7);
            border-radius: 50%;
            position: absolute;
            top: 70px; /* Position below year dot, this is the target Y for lines */
            left: 50%;
            transform: translateX(-50%);
            z-index: 2; /* Above card lines, below year dot if overlapping */
        }

        /* Horizontal connector lines from cards */
        .timeline-item.item-left::after,
        .timeline-item.item-right::before {
            content: '';
            position: absolute;
            top: 76px; /* Align with vertical center of marker-connection-dot (70px + 12px/2 - 2px/2 line height) */
            height: 2px;
            background-color: rgba(255, 255, 255, 0.35);
            width: 35px; /* (marker_width/2 - connection_dot_width/2) = 80/2 - 12/2 = 34, plus a bit for gap */
        }

        .timeline-item.item-left::after {
            right: -35px; /* (width of line) */
        }

        .timeline-item.item-right::before {
            left: -35px; /* (width of line) */
        }

        .timeline-end-arrow-container {
            display: flex;
            justify-content: center;
            position: relative; /* To sit on top of the ::before line */
            z-index: 1;
            margin-top: -20px; /* Pull up to overlap end of line */
        }
        .timeline-arrow {
            color: rgba(255, 255, 255, 0.7);
            font-size: 1.8em;
            padding-top: 10px; /* Space from the last marker-connection-dot */
        }


        /* Animation */
        .animate-on-scroll {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55), transform 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55);
        }
        .animate-on-scroll.item-left { transform: translateX(-40px) translateY(40px); }
        .animate-on-scroll.item-right { transform: translateX(40px) translateY(40px); }


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

        /* Responsive adjustments (basic example) */
        @media (max-width: 768px) {
            .timeline-container::before {
                left: 25px; /* Move line to the left */
                transform: none;
            }
            .timeline-entry {
                flex-direction: column;
                align-items: flex-start; /* Align items to the start */
            }
            .timeline-marker {
                position: absolute; /* Take marker out of flow, position relative to entry */
                left: 0;
                top: 0; /* Adjust as needed, or dynamically */
                width: 50px; /* Smaller marker area */
                height: auto; /* Let content define height */
                align-items: flex-start;
            }
            .marker-dot-year {
                left: 0; /* Align with the new vertical line */
                transform: none;
                width: 45px; height: 45px; font-size: 0.7em;
            }
             .marker-connection-dot {
                left: calc(50px / 2); /* Center of the new thin marker area */
                top: 60px;
            }

            .timeline-item {
                width: calc(100% - 70px); /* Full width minus marker space and padding */
                margin-left: 70px; /* Space for the marker and line */
                margin-bottom: 20px;
            }
            .timeline-item.item-left,
            .timeline-item.item-right {
                width: calc(100% - 70px);
                text-align: left; /* All text left aligned */
            }
             .timeline-item.item-left .card-content-wrapper,
            .timeline-item.item-right .card-content-wrapper {
                flex-direction: row; /* Icon first, then text */
            }
            .timeline-item.item-left .card-icon {
                margin-left: 0;
                margin-right: 15px;
            }
            .timeline-item.item-left .card-text {
                text-align: left;
            }

            .timeline-item.item-left::after,
            .timeline-item.item-right::before {
                /* Adjust or hide horizontal lines for mobile */
                width: 20px; /* Shorter line from card to main vertical */
                top: 66px; /* Align with new marker-connection-dot pos */
            }
            .timeline-item.item-left::after { right: auto; left: -20px; } /* All lines from left */
            .timeline-item.item-right::before { left: -20px; }

             .animate-on-scroll.item-left,
            .animate-on-scroll.item-right {
                transform: translateY(40px); /* Simpler animation for mobile */
            }
            .animate-on-scroll.is-visible {
                transform: translateY(0);
            }
        }
         :root {
            --section-bg: #2a65c9; /* Lighter blue for this section's background */
            --card-bg: #1c4b8f;    /* Darker blue for the cards */
            --text-light: #f0f0f0;
            --text-primary: #ffffff;
            --text-secondary: #cbd5e1; /* For table headers / less important text */
            --highlight-blue: #60a5fa; /* For "readable content" */
            --border-light-transparent: rgba(255, 255, 255, 0.3);
            --border-opaque: rgba(255, 255, 255, 0.6);

            --presale-tag-start: #3b82f6;
            --presale-tag-end: #22d3ee;
            --ico-tag-start: #2563eb;
            --ico-tag-end: #60a5fa;

            --presale-price-bg: linear-gradient(to right, #1e40af, #3b82f6);
            --ico-price-bg: linear-gradient(to right, #1d4ed8, #22d3ee);
        }

        body {
            font-family: Arial, sans-serif;
            margin: 0;
            background-color: var(--section-bg); /* Assuming this section might be standalone or page bg */
            color: var(--text-primary);
            padding: 50px 0;
        }

        .container {
            width: 90%;
            max-width: 1000px;
            margin: 0 auto;
            padding: 0 15px;
        }

        .token-sale-section {
            text-align: center;
        }

        .section-title {
            font-size: 2.5rem;
            font-weight: bold;
            margin-bottom: 40px;
            color: var(--text-primary);
        }

        .cards-container {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-bottom: 40px;
            flex-wrap: wrap; /* Allow cards to wrap on smaller screens */
        }

        .token-card {
            background-color: var(--card-bg);
            border-radius: 16px;
            width: 100%;
            max-width: 400px; /* Max width for each card */
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
            overflow: hidden; /* To ensure tag's rounded corners match */
            display: flex;
            flex-direction: column;
            transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
        }

        .token-card:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
        }

        .card-tag {
            padding: 10px 20px;
            font-weight: bold;
            font-size: 0.9rem;
            text-transform: uppercase;
            color: var(--text-primary);
            border-top-left-radius: 16px;
            border-top-right-radius: 16px;
            background-size: 200% 200%; /* For pulse animation */
        }

        .presale-tag {
            background-image: linear-gradient(to right, var(--presale-tag-start), var(--presale-tag-end), var(--presale-tag-start));
        }

        .ico-tag {
            background-image: linear-gradient(to right, var(--ico-tag-start), var(--ico-tag-end), var(--ico-tag-start));
        }

        .card-content {
            padding: 25px;
            text-align: left;
            flex-grow: 1; /* Make content area take remaining space */
            display: flex;
            flex-direction: column;
            gap: 20px; /* Space between elements inside card content */
        }

        .target-text {
            font-size: 0.9rem;
            color: var(--text-secondary);
            margin: 0;
        }

        .price-badge {
            align-self: flex-start; /* Align to left */
            padding: 10px 20px;
            border-radius: 20px; /* Pill shape */
            font-size: 0.95rem;
            font-weight: 500;
            color: var(--text-primary);
            border: 1px solid var(--border-opaque);
            background-size: 200% 200%; /* For pulse animation */
        }

        .presale-price-badge { background-image: var(--presale-price-bg); }
        .ico-price-badge { background-image: var(--ico-price-bg); }

        .bonus-circle {
            width: 130px;
            height: 130px;
            border: 2px solid var(--border-opaque);
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 20px auto; /* Center the circle */
        }

        .bonus-percentage {
            font-size: 2.2rem;
            font-weight: bold;
            color: var(--text-primary);
        }

        .bonus-label {
            font-size: 0.8rem;
            color: var(--text-secondary);
            margin-top: 5px;
        }

        .ico-bonus-info {
            margin-top: 10px;
        }

        .bonus-header {
            font-weight: bold;
            margin-bottom: 10px;
            font-size: 1rem;
            color: var(--text-primary);
        }

        .ico-bonus-info table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.9rem;
        }

        .ico-bonus-info th,
        .ico-bonus-info td {
            padding: 8px 5px;
            text-align: left;
            color: var(--text-secondary);
        }
        .ico-bonus-info tbody td {
            color: var(--text-light);
        }

        .ico-bonus-info th {
            font-weight: 500;
            border-bottom: 1px solid var(--border-light-transparent);
        }

        .section-description {
            font-size: 0.95rem;
            line-height: 1.6;
            max-width: 700px;
            margin: 0 auto;
            color: var(--text-light);
        }

        .highlight-text {
            color: var(--highlight-blue);
            font-weight: 500;
        }

        /* Animation base class */
        .animate-on-scroll {
            opacity: 0;
            transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1),
                        transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
        }
        .animate-on-scroll.from-bottom { transform: translateY(50px); }
        .animate-on-scroll.from-left { transform: translateX(-50px); }
        .animate-on-scroll.from-right { transform: translateX(50px); }

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

        /* Stagger animation for cards */
        .token-card.animate-on-scroll:nth-child(1) { transition-delay: 0.2s; }
        .token-card.animate-on-scroll:nth-child(2) { transition-delay: 0.4s; }
        /* Add more if you have more cards that might appear at once */

        /* Pulsing Gradient Animation */
        @keyframes gradientPulse {
            0% { background-position: 0% center; }
            50% { background-position: 100% center; }
            100% { background-position: 0% center; }
        }

        .pulsing-gradient {
            animation: gradientPulse 3s ease-in-out infinite;
        }


        @media (max-width: 768px) {
            .section-title {
                font-size: 2rem;
            }
            .cards-container {
                flex-direction: column;
                align-items: center;
            }
            .token-card {
                max-width: 100%; /* Full width on mobile, respecting container padding */
                width: calc(100% - 20px); /* Adjust if needed for margins */
            }
        }
              .container {
            width: 90%;
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 15px;
        }

        .core-team-section {
            text-align: center;
        }

        .section-title {
            font-size: 2.5rem;
            font-weight: bold;
            margin-bottom: 50px;
            color: var(--text-primary);
        }

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

        .team-card {
            background-color: var(--card-bg);
            border-radius: 16px;
            padding: 0; /* Padding will be on internal elements */
            text-align: left;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
            overflow: hidden; /* For the gradient bar */
            position: relative;
            transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
        }

        .team-card:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
        }

        .card-highlight-bar {
            height: 6px;
            background: linear-gradient(to right, var(--gradient-start), var(--gradient-end));
        }

        .card-content {
            padding: 25px;
        }

        .member-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .member-photo {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 20px;
            border: 3px solid rgba(255, 255, 255, 0.2);
        }

        .member-info {
            flex-grow: 1;
        }

        .member-name {
            font-size: 1.4rem;
            font-weight: bold;
            color: var(--text-primary);
            margin: 0 0 5px 0;
        }

        .member-title {
            font-size: 0.85rem;
            color: var(--text-secondary);
            margin: 0;
        }

        .social-links {
            margin-bottom: 20px;
            display: flex;
            gap: 10px;
        }

        .social-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: var(--social-icon-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--social-icon-color);
            transition: background-color 0.3s ease, transform 0.2s ease;
        }
        .social-icon:hover {
            background-color: var(--gradient-end); /* Change on hover */
            transform: scale(1.1);
        }

        .social-icon svg {
            width: 18px;
            height: 18px;
            fill: currentColor;
        }

        .member-description {
            font-size: 0.9rem;
            line-height: 1.6;
            color: var(--text-light);
        }

        /* Animation base class */
        .animate-on-scroll {
            opacity: 0;
            transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1),
                        transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
        }
        .animate-on-scroll.from-bottom { transform: translateY(50px); }

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

        /* Stagger animation for cards */
        .team-card.animate-on-scroll:nth-child(1) { transition-delay: 0.1s; }
        .team-card.animate-on-scroll:nth-child(2) { transition-delay: 0.25s; }
        .team-card.animate-on-scroll:nth-child(3) { transition-delay: 0.4s; }
        .team-card.animate-on-scroll:nth-child(4) { transition-delay: 0.55s; }
        /* Add more if you have more cards */

        @media (max-width: 768px) {
            .section-title {
                font-size: 2rem;
            }
            .team-grid {
                grid-template-columns: 1fr; /* Stack cards on smaller screens */
            }
            .member-name {
                font-size: 1.2rem;
            }
        }
         @media (max-width: 480px) {
            .member-header {
                flex-direction: column;
                align-items: flex-start;
            }
            .member-photo {
                margin-bottom: 15px;
                margin-right: 0;
            }
        }
  .container {
            width: 90%;
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 15px;
            position: relative; /* To be on top of the footer's ::before overlay */
            z-index: 2;
        }

        .site-footer {
            /* --- BACKGROUND IMAGE FOR THE FOOTER SECTION --- */
            background-color: #0A2463;/* Crypto background */
            background-size: cover;
            background-position: center center;
            background-attachment: fixed; /* Parallax effect for the BG image */
            padding: 80px 0; /* More padding to show BG around the card */
            position: relative; /* For the ::before overlay */
            overflow: hidden;
        }

        /* --- OVERLAY FOR THE BACKGROUND IMAGE --- */
        .site-footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, var(--bg-overlay-color-start), var(--bg-overlay-color-end));
            z-index: 1; /* Behind the container/card, on top of BG image */
        }

        .footer-card {
            background-color: var(--footer-card-bg);
            border-radius: 16px;
            padding: 35px 45px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
            position: relative; /* For highlight bar and content positioning */
            overflow: hidden;
            max-width: 900px; /* Ensure card doesn't stretch too wide in container */
            margin-left: auto; /* Center card if container is wider */
            margin-right: auto;
        }

        .footer-highlight-bar {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 6px;
            background: linear-gradient(to right, var(--gradient-start), var(--gradient-end));
        }

        .footer-content-wrapper {
            display: flex;
            flex-direction: column;
            gap: 30px;
        }

        .footer-top {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: flex-start;
            gap: 30px;
            padding-bottom: 25px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        }

        .footer-brand-info {
            flex-basis: 100%;
            max-width: 320px;
        }

        .footer-brand-name {
            font-size: 1.9rem;
            font-weight: bold;
            margin-bottom: 10px;
            color: var(--text-primary);
        }

        .footer-tagline {
            font-size: 0.95rem;
            color: var(--text-light);
            line-height: 1.6;
        }

        .footer-links-column {
            flex-grow: 1;
            min-width: 170px;
        }

        .footer-links-column h4 {
            font-size: 1.15rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 18px;
        }

        .footer-links-column ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .footer-links-column ul li {
            margin-bottom: 12px;
        }

        .footer-links-column ul li a {
            color: var(--text-light);
            text-decoration: none;
            font-size: 0.95rem;
            transition: color 0.3s ease, padding-left 0.3s ease;
        }

        .footer-links-column ul li a:hover {
            color: var(--gradient-end);
            padding-left: 5px;
        }

        .footer-bottom {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            padding-top: 25px;
            gap: 20px;
        }

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

        .social-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: var(--social-icon-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--social-icon-color);
            transition: background-color 0.3s ease, transform 0.2s ease;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }
        .social-icon:hover {
            background-color: var(--gradient-end);
            transform: translateY(-2px) scale(1.05);
            box-shadow: 0 4px 8px rgba(var(--gradient-end-rgb, 34,211,238), 0.4); /* Glow effect */
        }
        .social-icon svg {
            width: 20px;
            height: 20px;
            fill: currentColor;
        }

        .copyright-text {
            font-size: 0.9rem;
            color: var(--text-secondary);
            text-align: center;
            flex-grow: 1;
        }

        /* --- ANIMATIONS --- */
        .animate-on-scroll {
            opacity: 0;
            transition: opacity 0.9s cubic-bezier(0.165, 0.84, 0.44, 1),
                        transform 0.9s cubic-bezier(0.165, 0.84, 0.44, 1);
        }
        .animate-on-scroll.from-bottom { transform: translateY(50px); }
        .animate-on-scroll.from-left { transform: translateX(-40px); }
        .animate-on-scroll.from-right { transform: translateX(40px); }


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

        /* Stagger animation for elements */
        .footer-card.animate-on-scroll { transition-delay: 0.2s; }
        .footer-brand-info.animate-on-scroll { transition-delay: 0.4s; }
        .footer-links-column:nth-of-type(1).animate-on-scroll { transition-delay: 0.6s; }
        .footer-links-column:nth-of-type(2).animate-on-scroll { transition-delay: 0.8s; }
        .footer-social-links.animate-on-scroll { transition-delay: 1s; }
        .copyright-text.animate-on-scroll { transition-delay: 1.2s; }


        @media (max-width: 992px) {
            .footer-card {
                padding: 30px;
            }
        }

        @media (max-width: 768px) {
            .site-footer {
                padding: 60px 0;
                background-attachment: scroll; /* Disable fixed BG on mobile for performance */
            }
            .footer-card {
                margin-left: 15px; /* Override auto for full width within container */
                margin-right: 15px;
                max-width: none;
            }
            .footer-top {
                flex-direction: column;
                align-items: center;
                text-align: center;
            }
            .footer-brand-info {
                max-width: 100%;
            }
            .footer-links-column {
                min-width: auto;
                width: 100%;
                margin-bottom: 20px;
            }
            .footer-links-column:last-child {
                margin-bottom: 0;
            }
            .footer-bottom {
                flex-direction: column;
            }
            .copyright-text {
                order: 1;
            }
        }

/* Add this to your existing CSS */
.stat-card, .advantage-card, .team-card, .token-card {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.stat-card::before, .advantage-card::before, 
.team-card::before, .token-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    z-index: -1;
    background: linear-gradient(45deg, 
        #00ffd5, #0084ff, #ff00f3, #ff0000);
    background-size: 400%;
    border-radius: inherit;
    opacity: 0;
    transition: 0.5s;
}

.stat-card:hover::before, .advantage-card:hover::before, 
.team-card:hover::before, .token-card:hover::before {
    opacity: 1;
    animation: animate-border 8s linear infinite;
    filter: blur(5px);
}

@keyframes animate-border {
    0% {
        background-position: 0 0;
    }
    50% {
        background-position: 300% 0;
    }
    100% {
        background-position: 0 0;
    }
}
/* Button glow effects */
.btn-primary, .btn-secondary, .btn-feature {
    position: relative;
    transition: all 0.3s;
    z-index: 1;
    overflow: hidden;
}

.btn-primary::before, .btn-secondary::before, 
.btn-feature::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, 
        rgba(255,255,255,0.3), 
        rgba(255,255,255,0.1));
    z-index: -1;
    transform: translateX(-100%);
    transition: transform 0.4s;
}

.btn-primary:hover::before, .btn-secondary:hover::before, 
.btn-feature:hover::before {
    transform: translateX(0);
}

/* Specific colors for different buttons */
.btn-primary {
    box-shadow: 0 0 10px rgba(0, 132, 255, 0.5), 
                0 0 20px rgba(0, 132, 255, 0.3);
}

.btn-secondary {
    box-shadow: 0 0 10px rgba(255, 0, 243, 0.5), 
                0 0 20px rgba(255, 0, 243, 0.3);
}

.btn-feature {
    box-shadow: 0 0 10px rgba(0, 255, 213, 0.5), 
                0 0 20px rgba(0, 255, 213, 0.3);
}

.btn-primary:hover {
    box-shadow: 0 0 15px rgba(0, 132, 255, 0.8), 
                0 0 30px rgba(0, 132, 255, 0.5);
}

.btn-secondary:hover {
    box-shadow: 0 0 15px rgba(255, 0, 243, 0.8), 
                0 0 30px rgba(255, 0, 243, 0.5);
}

.btn-feature:hover {
    box-shadow: 0 0 15px rgba(0, 255, 213, 0.8), 
                0 0 30px rgba(0, 255, 213, 0.5);
}
/* Header glow effect */
header {
    position: relative;
}

header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(0, 255, 213, 0.8), 
        rgba(0, 132, 255, 0.8), 
        rgba(255, 0, 243, 0.8), 
        transparent);
    box-shadow: 0 0 10px rgba(0, 255, 213, 0.5), 
                0 0 20px rgba(0, 132, 255, 0.3);
}

.main-nav ul li a {
    position: relative;
}

.main-nav ul li a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        rgba(0, 255, 213, 0.8), 
        rgba(0, 132, 255, 0.8));
    transition: width 0.3s;
}

.main-nav ul li a:hover::after {
    width: 100%;
    box-shadow: 0 0 10px rgba(0, 255, 213, 0.5);
}
/* Enhanced token sale cards with animated borders */
.token-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.token-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, 
        #00ffd5, #0084ff, #ff00f3, #ff0000, 
        #00ffd5, #0084ff, #ff00f3);
    background-size: 400%;
    border-radius: 12px;
    z-index: -1;
    opacity: 0.8;
    animation: animate-border 8s linear infinite;
}

.token-card::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: #1a1a2e;
    border-radius: 10px;
    z-index: -1;
}

.presale-card::before {
    background: linear-gradient(45deg, 
        #00ffd5, #0084ff, #00ffd5);
}

.ico-card::before {
    background: linear-gradient(45deg, 
        #ff00f3, #ff0000, #ff00f3);
}
/* Add to your slider-section */
.slider-section {
    position: relative;
    overflow: hidden;
}

.slider-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 30%, 
        rgba(0, 255, 213, 0.1) 0%, 
        transparent 30%),
        radial-gradient(circle at 80% 70%, 
        rgba(0, 132, 255, 0.1) 0%, 
        transparent 30%),
        radial-gradient(circle at 40% 60%, 
        rgba(255, 0, 243, 0.1) 0%, 
        transparent 30%);
    z-index: 0;
    animation: float 15s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(-5px, -5px);
    }
    50% {
        transform: translate(5px, 5px);
    }
    75% {
        transform: translate(5px, -5px);
    }
}
/* Timeline glow effects */
.timeline-icon {
    box-shadow: 0 0 10px rgba(0, 132, 255, 0.5), 
                0 0 20px rgba(0, 132, 255, 0.3);
    transition: all 0.3s;
}

.timeline-item:hover .timeline-icon {
    box-shadow: 0 0 15px rgba(0, 255, 213, 0.8), 
                0 0 30px rgba(0, 132, 255, 0.5);
    transform: scale(1.1);
}

.timeline-marker {
    position: relative;
}

.timeline-marker::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, 
        transparent, 
        rgba(0, 132, 255, 0.8), 
        transparent);
    z-index: -1;
}

.marker-dot-year {
    position: relative;
    z-index: 1;
    background: #1a1a2e;
    padding: 5px 10px;
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(0, 132, 255, 0.5);
    border: 1px solid rgba(0, 132, 255, 0.3);
}

.marker-connection-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #0084ff;
    box-shadow: 0 0 10px #0084ff, 
                0 0 20px rgba(0, 132, 255, 0.5);
    margin: 10px auto;
}
/* Footer glow effects */
.footer-highlight-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(to bottom, 
        #00ffd5, #0084ff, #ff00f3);
    box-shadow: 0 0 10px rgba(0, 255, 213, 0.5), 
                0 0 20px rgba(0, 132, 255, 0.3);
}

.social-icon {
    transition: all 0.3s;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
}

.social-icon:hover {
    transform: translateY(-3px);
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.7));
}

.footer-brand-name {
    position: relative;
    display: inline-block;
}

.footer-brand-name::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, 
        rgba(0, 255, 213, 0.8), 
        rgba(0, 132, 255, 0.8));
    box-shadow: 0 0 10px rgba(0, 255, 213, 0.5);
}