:root {
    /* Zimbabwe Premium Palette - Highly Legible */
    --color-green: #007A33;
    --color-yellow: #FFCF00;
    --color-orange: #F37021;

    --color-black: #333333;
    /* Softened from black to dark gray */
    --color-white: #FFFFFF;
    --color-bg-light: #F9F8F4;
    /* Slightly warmer unique white (Ivoryish) */
    --color-medium-gray: #777777;

    /* Typography Strategy: Standardized for Reading */
    --font-jp: "Noto Sans JP", sans-serif;
    --font-display: "Bebas Neue", sans-serif;

    /* Spacing & Sizes */
    --container-width: 1100px;
    --section-padding: 120px;
}

/* --- RESET & BASE --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-jp);
    background-color: var(--color-bg-light);
    /* Subtle Manga Texture (Dots) */
    background-image:
        radial-gradient(#e5e5e5 1px, transparent 1px),
        linear-gradient(to right, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
    /* Grid hint */
    background-size: 30px 30px, 100px 100px;
    color: var(--color-black);
    line-height: 1.85;
    /* Increased for readability */
    font-size: 18px;
    /* Standard reading size */
    overflow-x: hidden;
    word-break: break-word;
}

/* Giant Background Typography for depth */
body::before {
    content: "ZIMBABWE";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Removed rotation */
    font-family: var(--font-display);
    font-size: 30vw;
    font-weight: 900;
    color: rgba(0, 0, 0, 0.03);
    /* Barely visible watermark */
    pointer-events: none;
    z-index: -1;
    white-space: nowrap;
}

/* Remove Distracting Overlays */
.manga-canvas,
.cursor {
    display: none !important;
}

/* --- LAYOUT --- */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 30px;
}

/* --- ANIMATIONS: Kinetic Energy --- */
@keyframes manga-shake {
    0% {
        transform: rotate(-1deg) translate(0, 0);
    }

    25% {
        transform: rotate(-1.5deg) translate(-1px, 1px);
    }

    50% {
        transform: rotate(-1deg) translate(0, 0);
    }

    75% {
        transform: rotate(-0.5deg) translate(1px, -1px);
    }

    100% {
        transform: rotate(-1deg) translate(0, 0);
    }
}

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

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

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

.section-title {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 900;
    line-height: 1.2;
    margin: 0 auto 80px;

    /* Layout: Flex for side lines */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;

    /* Reset Bubble Styles */
    background: transparent;
    border: none;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    animation: none;
    color: var(--color-black);
}

/* Side Geometric Decor Lines */
/* Side Geometric Decor Lines */
.section-title::before,
.section-title::after {
    content: "";
    flex: 1;
    /* Grow to fill space */
    height: 35px;
    /* Custom Pattern Image - Repeating */
    background-image: url("images/moyou.png");
    background-repeat: repeat-x;
    background-position: center;
    background-size: auto 100%;
    /* Spacing */
    margin: 0 20px;
    /* Removed max-width to allow full extension */
    opacity: 0.6;

    /* Reset legacy bubble props if any leak through */
    position: static;
    width: auto;
    border: none;
    box-shadow: none;
    transform: none;
    transform: none;
    border-radius: 0;
}

.section-title-white {
    color: #fff !important;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
}

.section-title-white::before,
.section-title-white::after {
    filter: brightness(0) invert(1);
    opacity: 1;
}

.section-title-no-decor::before,
.section-title-no-decor::after {
    display: none !important;
}

/* Remove hover effects */
.section-title:hover {
    transform: none;
}

/* --- NFT BENEFITS --- */
.benefit-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 30px;
    justify-content: center;
    width: 100%;
    /* Ensure full use of container */
}

.benefit-item {
    box-sizing: border-box;
    /* Ensure padding/border doesn't break layout */
    background: #fff;
    border: 2px solid var(--color-orange);
    border-radius: 12px;
    padding: 20px;
    width: 100%;
    /* Fill Grid Cell */
    min-height: 200px;
    /* Reduced specific fixed height */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 900;
    font-size: 1rem;
    line-height: 1.4;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Mobile: 2 Columns */
@media (max-width: 768px) {
    .benefit-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        /* Use smaller gap on mobile to allow wider cards */
    }

    .benefit-item {
        padding: 15px;
        /* Slightly less padding on mobile */
    }
}

/* Top Left Corner Accent */
.benefit-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 40px 40px 0 0;
    border-color: var(--color-orange) transparent transparent transparent;
    z-index: 1;
}

/* Bottom Right Corner Accent */
.benefit-item::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 40px 40px;
    border-color: transparent transparent var(--color-orange) transparent;
    z-index: 1;
}

/* --- HERO: Clear & Direct --- */
.hero-section {
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0 80px;
    background: var(--color-white);
    position: relative;
}

.hero-bg-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 0;
    opacity: 1;
    z-index: 1;
    pointer-events: none;
}


.hero-bg-grid::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Halftone Effect + Gradient */
    background:
        radial-gradient(circle, rgba(0, 0, 0, 0.25) 1px, transparent 1px),
        /* Halftone Dots */
        linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.6) 100%);
    /* Visibility Gradient */
    background-size: 4px 4px, 100% 100%;
    z-index: 2;
}

/* Hero Bottom Border Image */
.hero-section::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    /* Narrower line */
    background: url("images/line.jpg") no-repeat bottom center;
    background-size: 100% 100%;
    /* Stretch to full width */
    z-index: 10;
}

.grid-item {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-content {
    max-width: 900px;
    text-align: center;
}

.hero-logo {
    margin-bottom: 20px;
}

.hero-logo img {
    max-width: 300px;
    height: auto;
    display: inline-block;
}

.hero-title {
    font-size: clamp(2rem, 5vw, 4rem);
    /* Smaller and cleaner */
    font-weight: 900;
    line-height: 1.3;
    /* More breathing room */
    margin: 30px 0;
    color: var(--color-white);
    letter-spacing: 0.05em;
    /* Cleaner spacing */
    text-shadow: 3px 3px 0 var(--color-black);
    /* Sharper shadow */
    transform: rotate(0deg);
}

.hero-desc {
    background: none;
    padding: 0;
    max-width: 800px;
    margin: 30px auto 0;
    line-height: 2;
    font-weight: 700;
    font-size: 1.2rem;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.section-p {
    padding: var(--section-padding) 0;
}

/* --- READING BLOCKS: Taped Paper Effect --- */
.reading-block {
    background: #fff;
    padding: 60px;
    border: 2px solid var(--color-black);
    /* Organic Box */
    border-radius: 2px 255px 5px 25px / 255px 5px 225px 5px;
    box-shadow: 15px 15px 0 rgba(0, 0, 0, 0.1);
    /* Softer shadow for paper */
    margin-bottom: 40px;
    position: relative;
    transform: rotate(0deg);
    /* Straightened */
}

/* Tape Visual */
.reading-block::before {
    content: "";
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    /* Tape straight */
    width: 120px;
    height: 35px;
    background-color: rgba(255, 255, 255, 0.8);
    border-left: 2px dotted rgba(0, 0, 0, 0.1);
    border-right: 2px dotted rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 10;
    opacity: 0.6;
    /* Tape translucency */
}

.reading-block h3 {
    font-size: 2rem;
    margin-bottom: 25px;
    color: var(--color-orange);
}

.reading-block p {
    font-size: 1.1rem;
    color: #444;
}

/* --- BROKEN GRID SYSTEM: Manga Layout --- */
.info-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    margin-top: 60px;
}

.info-card {
    width: 300px;
    max-width: 100%;
    border-top: 8px solid var(--color-black);
    padding: 30px;
    /* Added horizontal padding */
    background: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    /* Subtle shadow for definition */
    text-align: left;
    /* Ensure text aligns naturally */
}

.info-card-img {
    width: 100%;
    object-fit: cover;
    margin-bottom: 20px;
}

.info-card h4 {
    margin-bottom: 15px;
    /* Spacing for internal elements */
}

.info-grid .info-card:hover {
    transform: scale(1.05) !important;
    /* Pop straight up */
    z-index: 10;
    box-shadow: 20px 20px 0 rgba(0, 0, 0, 0.1);
}



.info-card:hover {
    transform: translateY(-5px);
}

.info-card h4 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.info-card h4 span {
    font-size: 0.8rem;
    background: var(--color-black);
    color: #fff;
    padding: 2px 8px;
}

/* --- VOICES: Clean Cards --- */
.voice-slider-wrapper {
    padding: 0 50px;
    /* Space for arrows */
}

.voice-swiper {
    padding-bottom: 60px !important;
    /* Space for pagination */
}

.swiper-button-next,
.swiper-button-prev {
    top: 50% !important;
    transform: translateY(-50%);
    width: 60px !important;
    /* Force perfect circle against Swiper specificities */
    height: 60px !important;
    min-width: 60px !important;
    /* Prevent squashing */
    min-height: 60px !important;
    background: #fff;
    border: 3px solid var(--color-black);
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    z-index: 10;
    cursor: pointer;
    flex-shrink: 0;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: var(--color-orange);
    border-color: var(--color-orange);
}

.swiper-button-next::after,
.swiper-button-prev::after {
    display: none;
}

.swiper-button-next::before,
.swiper-button-prev::before {
    content: "";
    width: 20px;
    height: 26px;
    background-color: var(--color-orange);

    /* Using Data URI to ensure no loading issues */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='15' height='20' viewBox='0 0 15 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.000383333 1.00057L0.000382547 19.0006C0.000953789 19.1828 0.0512172 19.3614 0.145761 19.5172C0.240304 19.673 0.375547 19.8001 0.536935 19.8848C0.698322 19.9694 0.879743 20.0085 1.06167 19.9977C1.24359 19.9869 1.41913 19.9267 1.56938 19.8236L14.5694 10.8236C15.1084 10.4506 15.1084 9.55257 14.5694 9.17857L1.56938 0.178573C1.41944 0.074398 1.24381 0.0133073 1.06159 0.00193832C0.879362 -0.00943065 0.697505 0.029357 0.535776 0.114087C0.374047 0.198817 0.238629 0.326249 0.144239 0.482537C0.0498495 0.638826 9.53317e-05 0.817993 0.000383333 1.00057ZM12.2434 10.0006L2.00038 17.0926L2.00038 2.90857L12.2434 10.0006Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='15' height='20' viewBox='0 0 15 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.000383333 1.00057L0.000382547 19.0006C0.000953789 19.1828 0.0512172 19.3614 0.145761 19.5172C0.240304 19.673 0.375547 19.8001 0.536935 19.8848C0.698322 19.9694 0.879743 20.0085 1.06167 19.9977C1.24359 19.9869 1.41913 19.9267 1.56938 19.8236L14.5694 10.8236C15.1084 10.4506 15.1084 9.55257 14.5694 9.17857L1.56938 0.178573C1.41944 0.074398 1.24381 0.0133073 1.06159 0.00193832C0.879362 -0.00943065 0.697505 0.029357 0.535776 0.114087C0.374047 0.198817 0.238629 0.326249 0.144239 0.482537C0.0498495 0.638826 9.53317e-05 0.817993 0.000383333 1.00057ZM12.2434 10.0006L2.00038 17.0926L2.00038 2.90857L12.2434 10.0006Z' fill='black'/%3E%3C/svg%3E");

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-size: contain;
    mask-size: contain;

    transition: 0.3s;
    display: block;
}

.swiper-button-next:hover::before,
.swiper-button-prev:hover::before {
    background-color: #fff;
    /* Arrow turns white on hover */
}

/* Rotate ONLY the prev arrow */
.swiper-button-prev::before {
    transform: rotate(180deg);
}

.swiper-button-next {
    right: -30px !important;
}

.swiper-button-prev {
    left: -30px !important;
}

.swiper-pagination-bullet {
    width: 16px !important;
    height: 16px !important;
    background: #ccc !important;
    opacity: 1 !important;
    margin: 0 8px !important;
}

.swiper-pagination-bullet-active {
    background: var(--color-orange) !important;
    width: 20px !important;
    height: 20px !important;
}

.voice-swiper .swiper-wrapper {
    display: flex;
    align-items: stretch;
}

.voice-swiper .swiper-slide {
    height: auto;
    display: flex;
}

.voice-card-simple {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: #fff;
    padding: 40px;
    border: 1px solid #ddd;
    height: 100%;
}

.voice-header {
    display: flex;
    gap: 30px;
    align-items: center;
}

.voice-info {
    flex: 1;
}

.voice-img-box {
    flex: 0 0 150px;
}

.voice-img-box img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border: 3px solid var(--color-black);
    /* Hand-drawn circle effect */
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    transition: border-radius 0.5s ease;
}

.voice-card-simple:hover .voice-img-box img {
    border-radius: 50%;
    /* Smooth out on hover */
}

.voice-info h4 {
    color: var(--color-orange);
    font-size: 1.6rem;
    margin-bottom: 10px;
}

.voice-role {
    font-weight: 700;
    color: #666;
    margin-bottom: 20px;
}

/* --- VERTICAL VOICE CARD (1-COLUMN) --- */
/* No longer needed, integrated into .voice-card-simple */

.voice-card-vertical .voice-body {
    max-width: 760px;
}

.voice-text {
    font-size: 1.05rem;
    line-height: 2;
}

/* --- ZIMBABWE ELEMENTS --- */
.accent-border-bottom {
    border-bottom: 8px solid var(--color-green);
    display: inline-block;
    padding-bottom: 5px;
}

/* --- PHILOSOPHY SECTION --- */
.philosophy-title {
    font-size: 2.5rem;
    margin-bottom: 30px;
    color: var(--color-orange);
}

.philosophy-hero-img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    object-position: center;
    display: block;
}

.philosophy-conclusion {
    margin-top: 40px;
    text-align: center;
    font-size: 2rem;
    font-weight: 900;
    color: #000;
    line-height: 1.4;
}

.philosophy-desc-p {
    font-size: 1.2rem;
    line-height: 2;
}

.why-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: center;
}

/* --- BUTTONS --- */
/* --- PROJECT FLOW & NFT ENHANCEMENTS ---    /* --- PROJECT FLOW: Zigzag Manga Path --- */
.flow-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Remove gap, handle with margins for overlap feel */
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}

.flow-step {
    background: #fff;
    border: 3px solid var(--color-black);
    padding: 2px 30px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 30px;
    position: relative;
    transition: transform 0.3s ease;
    z-index: 2;
    /* Ensure step is above arrow if they overlap */
}

.flow-step:not(:last-child)::after {
    content: "";
    position: absolute;
    bottom: -50px;
    /* Positioned in the middle of 60px gap */
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
    width: 25px;
    height: 30px;
    background-image: url("data:image/svg+xml,%3Csvg width='15' height='20' viewBox='0 0 15 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.000383333 1.00057L0.000382547 19.0006C0.000953789 19.1828 0.0512172 19.3614 0.145761 19.5172C0.240304 19.673 0.375547 19.8001 0.536935 19.8848C0.698322 19.9694 0.879743 20.0085 1.06167 19.9977C1.24359 19.9869 1.41913 19.9267 1.56938 19.8236L14.5694 10.8236C15.1084 10.4506 15.1084 9.55257 14.5694 9.17857L1.56938 0.178573C1.41944 0.074398 1.24381 0.0133073 1.06159 0.00193832C0.879362 -0.00943065 0.697505 0.029357 0.535776 0.114087C0.374047 0.198817 0.238629 0.326249 0.144239 0.482537C0.0498495 0.638826 9.53317e-05 0.817993 0.000383333 1.00057ZM12.2434 10.0006L2.00038 17.0926L2.00038 2.90857L12.2434 10.0006Z' fill='%23F37021'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
}

.flow-illustration {
    flex: 0 0 160px;
    height: 160px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flow-illustration img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
}

@media (max-width: 768px) {
    .flow-container {
        gap: 80px;
        /* Centering the space */
    }

    .flow-step {
        flex-direction: column !important;
        text-align: center !important;
        padding-top: 50px;
        padding-bottom: 30px;
        gap: 20px;
        align-self: center !important;
        /* Force center */
        margin-top: 0 !important;
        /* Remove overlap */
        width: 100%;
    }

    .flow-illustration {
        flex: 0 0 180px;
        width: 100%;
        max-width: 240px;
    }

    .flow-num {
        left: 50% !important;
        transform: translateX(-50%) !important;
        top: -22px !important;
    }

    .flow-step:not(:last-child)::after {
        bottom: -55px;
        /* Center the arrow in the gap */
    }
}

/* Zigzag Pattern - Straightened but kept staggered sides */
.flow-step:nth-child(odd) {
    align-self: flex-start;
    text-align: left;
    transform: rotate(0deg);
}

.flow-step:nth-child(even) {
    align-self: flex-end;
    /* Right side */
    flex-direction: row-reverse;
    /* Flip content */
    text-align: right;
    transform: rotate(0deg);
    margin-top: -40px;
    /* Overlap previous step slightly */
}

.flow-step:hover {
    transform: translateX(10px);
    border-color: var(--color-orange);
}

.flow-num {
    background: var(--color-orange);
    color: #fff;
    width: 45px;
    /* Larger */
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 900;
    flex-shrink: 0;
    border: 3px solid var(--color-black);
    /* Pop border */
    box-shadow: 2px 2px 0 var(--color-black);
    position: absolute;
    top: -20px;
    left: -20px;
    z-index: 10;
}

.flow-text {
    font-weight: 700;
    font-size: 1.2rem;
}

.nft-premium-card {
    background: #fff;
    border: 4px solid var(--color-black);
    border-radius: 20px;
    padding: 50px;
    position: relative;
    box-shadow: 20px 20px 0 rgba(243, 112, 33, 0.1);
    overflow: hidden;
}

.nft-premium-card::before {
    content: "NFT";
    position: absolute;
    top: -20px;
    right: -20px;
    font-size: 8rem;
    font-weight: 900;
    color: rgba(0, 0, 0, 0.03);
    pointer-events: none;
}



.btn-main {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    background: var(--color-orange);
    color: #fff;
    padding: 25px 50px;
    text-decoration: none;
    font-weight: 900;
    font-size: 1.4rem;
    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
    border: 3px solid var(--color-black);
    /* Added border */
    border-radius: 8px;
    box-shadow: 6px 6px 0 var(--color-black);
    /* Solid shadow default */
    position: relative;
    overflow: hidden;
}

.btn-main::after {
    content: "";
    width: 15px;
    height: 18px;
    background-color: currentColor;
    display: inline-block;
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='15' height='20' viewBox='0 0 15 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.000383333 1.00057L0.000382547 19.0006C0.000953789 19.1828 0.0512172 19.3614 0.145761 19.5172C0.240304 19.673 0.375547 19.8001 0.536935 19.8848C0.698322 19.9694 0.879743 20.0085 1.06167 19.9977C1.24359 19.9869 1.41913 19.9267 1.56938 19.8236L14.5694 10.8236C15.1084 10.4506 15.1084 9.55257 14.5694 9.17857L1.56938 0.178573C1.41944 0.074398 1.24381 0.0133073 1.06159 0.00193832C0.879362 -0.00943065 0.697505 0.029357 0.535776 0.114087C0.374047 0.198817 0.238629 0.326249 0.144239 0.482537C0.0498495 0.638826 9.53317e-05 0.817993 0.000383333 1.00057ZM12.2434 10.0006L2.00038 17.0926L2.00038 2.90857L12.2434 10.0006Z' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg width='15' height='20' viewBox='0 0 15 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.000383333 1.00057L0.000382547 19.0006C0.000953789 19.1828 0.0512172 19.3614 0.145761 19.5172C0.240304 19.673 0.375547 19.8001 0.536935 19.8848C0.698322 19.9694 0.879743 20.0085 1.06167 19.9977C1.24359 19.9869 1.41913 19.9267 1.56938 19.8236L14.5694 10.8236C15.1084 10.4506 15.1084 9.55257 14.5694 9.17857L1.56938 0.178573C1.41944 0.074398 1.24381 0.0133073 1.06159 0.00193832C0.879362 -0.00943065 0.697505 0.029357 0.535776 0.114087C0.374047 0.198817 0.238629 0.326249 0.144239 0.482537C0.0498495 0.638826 9.53317e-05 0.817993 0.000383333 1.00057ZM12.2434 10.0006L2.00038 17.0926L2.00038 2.90857L12.2434 10.0006Z' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform 0.3s ease;
}

.btn-main:hover::after {
    transform: translateX(5px);
}

.btn-main:hover {
    background: #fff;
    /* Invert color */
    color: var(--color-black);
    transform: translate(2px, 2px);
    /* Click effect */
    box-shadow: 2px 2px 0 var(--color-black);
    /* Reduced shadow */
}

/* --- FOOTER --- */
.footer-simple {
    padding: 50px 0;
    background: #fff;
    border-top: 10px solid var(--color-black);
}

.u-sp-only {
    display: none !important;
}

@media (max-width: 768px) {
    .u-sp-only {
        display: block !important;
    }
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 40px;
}

.footer-partner-logos {
    display: flex;
    align-items: center;
    gap: 30px;
}

.footer-partner-logos img:first-child {
    height: 50px;
}

.footer-partner-logos img:last-child {
    height: 40px;
}

/* --- ANIMATION REFINED --- */
.reveal-text {
    opacity: 1 !important;
    /* Force visible */
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    :root {
        --section-padding: 60px;
    }

    body {
        font-size: 16px;
    }

    .container {
        padding: 0 20px;
    }

    .hero-section {
        min-height: auto;
        padding: 60px 0 100px;
    }

    .hero-bg-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: repeat(4, 1fr) !important;
    }

    .hero-title {
        font-size: 2.3rem;
        text-shadow: 2px 2px 0 var(--color-black);
        line-height: 1.2;
    }

    .hero-desc {
        font-size: 1rem;
        line-height: 1.6;
        margin-top: 20px;
        padding: 0 10px;
    }

    .section-title {
        margin-bottom: 40px;
        font-size: 2.1rem;
        flex-direction: row;
        text-align: center;
    }

    .section-title::before,
    .section-title::after {
        margin: 0 10px;
        height: 20px;
    }

    .reading-block {
        padding: 30px 20px;
    }

    .info-grid {
        gap: 20px;
    }

    .info-card {
        width: 100%;
        padding: 20px;
        text-align: center;
    }

    .info-card h4 {
        justify-content: center;
    }

    .info-card-img {
        width: 250px !important;
        margin-left: auto;
        margin-right: auto;
    }

    .benefit-item {
        min-height: 160px;
        font-size: 0.9rem;
    }

    .nft-premium-card {
        padding: 30px 20px;
    }

    .voice-slider-wrapper {
        padding: 0;
    }

    .swiper-button-next,
    .swiper-button-prev {
        display: none !important;
    }

    .voice-card-simple {
        flex-direction: column;
        padding: 25px 20px;
        gap: 20px;
        text-align: center;
    }

    .voice-header {
        flex-direction: column;
        gap: 15px;
    }

    .voice-img-box {
        flex: 0 0 auto;
        margin: 0 auto;
    }

    .voice-info h4 {
        font-size: 1.2rem;
    }

    .info-card h4 {
        font-size: 1.3rem;
    }

    .btn-main {
        width: 100%;
        padding: 18px 20px;
        font-size: 1.1rem;
    }

    .why-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    .philosophy-title {
        font-size: 1.4rem !important;
        margin-bottom: 20px !important;
    }

    .philosophy-desc-p {
        text-align: left !important;
        font-size: 1.1rem !important;
    }

    .philosophy-hero-img {
        height: 180px !important;
    }

    .philosophy-conclusion {
        font-size: 1.35rem !important;
        margin-top: 30px !important;
    }

    .footer-inner {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 30px;
    }

    .footer-partner-logos {
        flex-direction: column;
        width: 100%;
        justify-content: center;
        gap: 20px;
    }
}

/* --- WHY ZIMBABWE SECTION --- */
.why-zimbabwe-section {
    position: relative;
}

.why-zimbabwe-section::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: url("images/line.jpg") no-repeat bottom center;
    background-size: 100% 100%;
    z-index: 10;
}

/* --- COMPARISON BRIDGE SECTION --- */
.comparison-container {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    /* Connected visually */
    margin: 40px 0;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.comparison-side {
    flex: 1;
    padding: 50px 30px;
    color: #fff;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.comparison-side.left {
    background: linear-gradient(135deg, #F37021 0%, #ff9d6c 100%);
}

.comparison-side.right {
    background: linear-gradient(135deg, #007A33 0%, #00a84d 100%);
    /* Using Green for Zimbabwe/Growth connection or Tech Blue? User image had Blue. Let's stick to project brand or try Blue if requested. Image showed Blue. Let's use a complimentary Blue. */
    background: linear-gradient(135deg, #005c97 0%, #363795 100%);
    /* City/Tech Blue */
}

.comparison-title {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 900;
    color: #fff;
    margin-bottom: 15px;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
    letter-spacing: 0.05em;
}

.comparison-side.left .comparison-title {
    font-size: 2.8rem;
    /* Scaled up to match visual weight of JP text */
}

.comparison-desc {
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #fff !important;
}

/* The Bridge Icon / Connector */
.comparison-bridge {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    width: 80px;
    height: 80px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.3);
}

.comparison-bridge svg {
    width: 40px;
    height: 40px;
    fill: var(--color-black);
}

@media (max-width: 768px) {
    .comparison-container {
        flex-direction: column;
        margin: 30px 0;
    }

    .comparison-side {
        padding: 35px 20px;
    }

    .comparison-title {
        font-size: 1.4rem;
    }

    .comparison-side.left .comparison-title {
        font-size: 1.8rem;
    }

    .comparison-bridge {
        width: 50px;
        height: 50px;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        margin: -25px 0;
        /* Pulls top and bottom sides together */
        z-index: 10;
        box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3);
    }

    .comparison-side.right {
        padding-top: 45px;
        margin-top: 0;
        /* Margin handled by bridge */
    }
}

/* --- PHILOSOPHY INTRO --- */
.philosophy-intro {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 60px;
}

.philosophy-intro-img {
    flex: 0 0 400px;
    text-align: center;
}

.philosophy-intro-content {
    flex: 1;
}

@media (max-width: 768px) {
    .philosophy-intro {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 40px;
    }

    .philosophy-intro-img {
        flex: auto;
        width: 100%;
    }

    .philosophy-intro-img img {
        width: 200px !important;
        /* Slightly smaller for mobile */
    }

    .philosophy-intro-content {
        text-align: center;
    }

    .philosophy-intro-content p {
        margin-bottom: 20px !important;
    }

    .philosophy-intro-content ul li {
        text-align: left;
    }
}

/* --- SNS SECTION --- */
.sns-section {
    padding: 80px 0;
    background: var(--color-gray);
}

.sns-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}

.sns-icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--color-black);
    transition: all 0.3s ease;
    box-shadow: 4px 4px 0 var(--color-black);
}

.sns-icon-link:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--color-black);
}

.sns-icon-link svg {
    width: 28px;
    height: 28px;
}

.sns-icon-link svg path {
    fill: var(--color-orange);
}

.sns-x:hover {
    background: #000;
}

.sns-x:hover svg path {
    fill: #fff;
}

.sns-line:hover {
    background: #06C755;
}

.sns-line:hover svg path {
    fill: #fff;
}

.sns-discord:hover {
    background: #5865F2;
}

.sns-discord:hover svg path {
    fill: #fff;
}

.sns-mail:hover {
    background: var(--color-orange);
}

.sns-mail:hover svg path {
    fill: #fff;
}

.sns-tiktok:hover {
    background: #000;
}

.sns-tiktok:hover svg path {
    fill: #fff;
}

.sns-youtube:hover {
    background: #FF0000;
}

.sns-youtube:hover svg path {
    fill: #fff;
}

@media (max-width: 768px) {
    .sns-section {
        padding: 60px 0;
    }

    .sns-icons {
        gap: 20px;
    }

    .sns-icon-link {
        width: 50px;
        height: 50px;
    }

    .sns-icon-link svg {
        width: 24px;
        height: 24px;
    }
}

/* --- SPONSOR SECTION --- */
.sponsor-section {
    padding: 80px 0;
    background: #fff;
}

.sponsor-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.sponsor-content p {
    font-size: 1.3rem;
    line-height: 2;
    margin-bottom: 40px;
    font-weight: 500;
}

.sponsor-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 40px;
    font-size: 1.1rem;
    font-weight: 700;
    background: var(--color-orange);
    color: #fff;
    border: 3px solid var(--color-black);
    box-shadow: 6px 6px 0 var(--color-black);
    transition: all 0.3s ease;
    text-decoration: none;
}

.sponsor-btn:hover {
    transform: translate(3px, 3px);
    box-shadow: 3px 3px 0 var(--color-black);
}

.sponsor-btn .icon-arrow {
    transition: transform 0.3s ease;
}

.sponsor-btn:hover .icon-arrow {
    transform: translateX(4px);
}

@media (max-width: 768px) {
    .sponsor-section {
        padding: 60px 0;
    }

    .sponsor-content p {
        font-size: 1.1rem;
        margin-bottom: 30px;
    }

    .sponsor-btn {
        padding: 16px 30px;
        font-size: 1rem;
        width: 100%;
        justify-content: center;
    }
}

/* Section title with line break support */
.section-title {
    flex-direction: column;
    gap: 10px;
}

.section-title br {
    display: none;
}

/* --- SITE HEADER --- */
.site-header {
    background: #fff;
    border-bottom: 2px solid #e0e0e0;
    padding: 15px 0;
    z-index: 1000;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-logo {
    flex-shrink: 0;
}

.logo-img {
    max-width: 150px;
    height: auto;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 30px;
}

.header-link {
    color: var(--color-black);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.3s ease;
    position: relative;
}

.header-link:hover {
    color: var(--color-orange);
}

/* HAMBURGER MENU (Common) */
.hamburger-menu {
    display: none;
    /* Hidden on desktop */
    background: none;
    border: none;
    cursor: pointer;
    width: 30px;
    height: 24px;
    position: relative;
    z-index: 2000;
}

.hamburger-menu span {
    display: block;
    width: 100%;
    height: 3px;
    background: var(--color-black);
    position: absolute;
    left: 0;
    transition: 0.3s;
    border-radius: 3px;
}

.hamburger-menu span:nth-child(1) {
    top: 0;
}

.hamburger-menu span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
}

.hamburger-menu span:nth-child(3) {
    bottom: 0;
}

/* Hamburger Active State */
.menu-open .hamburger-menu span:nth-child(1) {
    transform: rotate(45deg);
    top: 10px;
}

.menu-open .hamburger-menu span:nth-child(2) {
    opacity: 0;
}

.menu-open .hamburger-menu span:nth-child(3) {
    transform: rotate(-45deg);
    bottom: 11px;
}

@media (max-width: 768px) {
    .site-header {
        padding: 10px 0;
    }

    .logo-img {
        max-width: 120px;
    }

    /* Hamburger Menu Button */
    .hamburger-menu {
        display: block;
    }

    /* Mobile Navigation Overlay */
    .header-nav {
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100vh;
        background: rgba(255, 255, 255, 0.98);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 40px;
        padding: 20px;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 1500;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.05);
    }

    .menu-open .header-nav {
        transform: translateX(0);
    }

    .header-link {
        font-size: 1.3rem;
        color: var(--color-black);
    }
}

/* --- MEDIA TOPICS SECTION --- */
.media-topics-section {
    background-color: #Fdfbf7;
    background-image: url("images/media_bg2.jpg");
    background-size: auto 100%;
    background-repeat: repeat-x;
    background-position: center;
    padding: 80px 0;
    text-align: center;
    position: relative;
}

@media (max-width: 768px) {
    .media-topics-section {
        background-image: url("images/media_bg2_sp.jpg");
        background-size: cover;
        background-repeat: no-repeat;
    }
}

.media-topics-section::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: url("images/line.jpg") no-repeat bottom center;
    background-size: 100% 100%;
    z-index: 10;
}

.media-title-wrapper {
    margin-bottom: 20px;
}

.media-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 900;
    margin-bottom: 15px;
    background: linear-gradient(180deg, #FFE8A3 0%, #E6C25A 50%, #B8860B 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    filter: drop-shadow(0px 2px 0px rgba(0, 0, 0, 0.1));
}

.media-subtitle {
    font-size: 1rem;
    font-weight: 700;
    color: #555;
    margin-bottom: 50px;
}

.media-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 100%;
}

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

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

.media-card {
    width: 100%;
    /* remove fixed width */
    max-width: 100%;
    position: relative;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 0;
    /* Glass/Metallic Border Effect */
    border: 2px solid rgba(212, 175, 55, 0.3);
    overflow: visible;
    /* For badge */
    transition: transform 0.3s ease;
}

.media-card:hover {
    transform: translateY(-5px);
}

.media-card-img-box {
    width: 100%;
    height: auto;
    background: #eee;
    border-radius: 14px 14px 0 0;
    overflow: hidden;
    position: relative;
    display: flex;
    /* Ensure no extra space */
}

.media-card-img-box img {
    width: 100%;
    height: auto;
    /* Preserve aspect ratio */
    display: block;
}

.media-card-caption {
    padding: 15px;
    font-weight: 700;
    font-size: 0.95rem;
    color: #333;
    background: #fff;
    border-radius: 0 0 14px 14px;
}

/* Trending Badge */
.media-badge {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 70px;
    height: 70px;
    background: radial-gradient(circle at 30% 30%, #ffeeb0 0%, #f37021 30%, #a64d13 100%);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(243, 112, 33, 0.4);
    z-index: 10;
    color: #fff;
    font-weight: 900;
    font-size: 0.7rem;
    text-transform: uppercase;
    border: 2px solid #fff;
}

.media-badge-icon {
    font-size: 1.2rem;
    line-height: 1;
    margin-bottom: 2px;
}