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

body {
    background-color: #000;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.block-img, .tab-img {
    width: 100%;
    display: block;
    vertical-align: bottom;
}

/* View Containers */
.pc-view, .mobile-view {
    display: block;
    margin: 0 auto;
}

.pc-view {
    max-width: 1920px;
}

/* Interactive Components */
.interactive-wrapper {
    position: relative;
    width: 100%;
}

.tab-img {
    display: none;
}

.tab-img.active {
    display: block;
}

/* Click Zones for Tabs */
.click-zones {
    position: absolute;
    top: 10%; 
    left: 50%; transform: translateX(-50%);
    width: 65%;
    height: 12%; 
    display: flex;
    z-index: 10;
}

.zone {
    flex: 1;
    cursor: pointer;
    /* background-color: rgba(255, 0, 0, 0.2); Debug: Visible click zones */
    -webkit-tap-highlight-color: transparent;
}

/* Overlay Zones (General Purpose) */
.zone-overlay {
    position: absolute;
    z-index: 20;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    /* background-color: rgba(0, 255, 0, 0.2); Debug */
}

/* Footer */
footer {
    background-color: #000;
    color: #666;
    text-align: center;
    padding: 40px 0;
    font-size: 14px;
    /* Subtle separator to distinguish from content */
    border-top: 1px solid #222; 
}

footer .footer-content p {
    line-height: 1.5;
}

/* Force override of default link styles */
footer a, 
footer a:visited, 
footer a:link, 
footer a:active {
    color: #999 !important;
    text-decoration: none !important;
    transition: color 0.3s ease;
}

footer a:hover {
    color: #fff !important;
    text-decoration: underline !important;
}

@media (max-width: 768px) {
    footer {
        font-size: 12px;
        padding: 30px 0;
    }
    
    /* Adjust click zone for mobile if needed */
    .click-zones {
        top: 10%;
        height: 12%; 
        width: 90%;
        
    }
}