section {
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Very subtle divider */
}

/* Optional: Add a subtle glow/gradient transition between different background colors */
.value-proposition-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to bottom, var(--primary-black), transparent);
    z-index: 1;
}
/* Define color variables for easy theme management */
:root {
    --primary-red: #E53935; /* A vibrant red */
    --primary-black: #1a1a1a; /* A deep black */
    --primary-white: #f5f5f5; /* Off-white for text and elements */
    --subtle-green: #66BB6A; /* A pleasant, not-too-bright green */
    --primary-blue: #2196F3; /* A standard blue */
    --dark-grey: #2c2c2c; /* Dark grey for backgrounds */
    --medium-grey: #555555; /* Medium grey for borders/text */
    --light-grey: #888888; /* Light grey for secondary text */
}

/* Basic body styling */
body {
    font-family: 'Inter', sans-serif; /* Use Inter font or a fallback */
    margin: 0;
    padding: 0;
    background-color: var(--primary-black);
    color: var(--primary-white);
    line-height: 1.6;
    overflow-x: hidden; /* Prevent horizontal scrolling during animation */
    /* Padding top adjusted based on header height, but applied after header appears */
    padding-top: 0; /* Initially no padding-top, will be handled by JS for content */
}

/* Initial state for ALL main content elements and header: hidden and above viewport */
/* The header will be handled by body.header-dropping */
.site-header,
.profile-banner,
.mission-statement-section,
.value-proposition-section,
.pricing-container,
.cta-section,
.site-footer {
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none; /* Prevent interaction while hidden */
}

/* Initial state for elements that will drop with the 'content-dropping' animation */
/* Ensures they are hidden and slightly off-screen before the animation starts */
.profile-banner,
.mission-statement-section,
.value-proposition-section,
.pricing-container,
.cta-section,
.site-footer {
    opacity: 0;
    transform: translateY(-20px); /* Start slightly above their final position */
    transition: none; /* No transition initially to prevent flickering on load */
}


/* Animation for the Header dropping down */
body.header-dropping .site-header {
    opacity: 1;
    transform: translateY(0);
    transition: transform 1s ease-out, opacity 1s ease-out; /* 1.5-second drop for header (matches HEADER_DROP_DURATION_MS - 1500ms) */
    pointer-events: auto;
}

/* Animation for the rest of the content dropping down */
/* This now uses body.content-dropping and sets the transition to 2 seconds */
body.content-dropping .profile-banner,
body.content-dropping .mission-statement-section,
body.content-dropping .value-proposition-section,
body.content-dropping .pricing-container,
body.content-dropping .cta-section,
body.content-dropping .site-footer {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 2s ease-out, transform 2s ease-out; /* 2-second drop for content */
    pointer-events: auto;
}

/* Ensure the header retains its fixed position after dropping */
.site-header {
    position: fixed;
    z-index: 1000; /* Ensure it's on top */
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--dark-grey); /* Ensure background is set */
    padding: 1rem 0; /* Ensure padding is set */
    border-bottom: 3px solid var(--primary-red);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Container for centering content and adding padding */
.container {
    width: 95%; /* Use percentage for fluid width */
    margin: 0 auto;
    max-width: 1200px; /* Maximum width for large screens */
    padding: 0 15px; /* Add padding on the sides */
    box-sizing: border-box; /* Include padding in element's total width */
}


.header-content {
    display: flex;
    justify-content: space-between; /* Space out title and nav area */
    align-items: center; /* Vertically align items */
}

.site-title a {
    color: var(--primary-white);
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: 700;
    transition: color 0.3s ease;
}

.site-title a:hover {
    color: var(--primary-red);
}


.nav-area {
    display: flex;
    align-items: center;
}

/* Mobile Navigation Toggle Icons */
.nav-toggle-icons {
    font-size: 1.8rem;
    color: var(--primary-white);
    cursor: pointer;
    margin-left: 20px; /* Space from site title */
    /* Hidden by default, shown by media query on mobile */
    display: none;
}

.nav-toggle-icons .close-icon {
    display: none; /* Close icon hidden by default */
}
/* Adjust banner-container to hold the video banner */
.banner-container.video-container {
    position: absolute; /* Or relative, depending on desired stacking */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Make it fill the profile-banner-section */
    overflow: hidden;
    z-index: 1; /* Place behind banner content */
    margin: 0; /* Remove the 10px margins from the example */
}

/* Style the video to fill the container */
#bannerVideo {
    display: block; /* Prevent extra space below the video */
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure video covers the area without distortion */
    object-position: center top; /* Adjust as needed */
}

/* Ensure banner content stays on top */
.banner-content {
    position: relative; /* To control z-index */
    z-index: 10; /* Ensure text and profile are above the video */
    /* Keep other styles for centering etc. */
}

/* Adjust height of the banner section */
.profile-banner {
    position: relative;
    width: 100%;
    height: 400px; /* Adjust to your desired initial video banner height */
    overflow: hidden;
    margin-bottom: 0; /* REMOVE the 60px margin that was here */
}

/* Optional: Add a dark overlay if the video is too bright for text */
.banner-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Adjust opacity as needed */
    z-index: 2; /* Place above the video but below content */
}
/* Main Navigation Menu (Desktop Default) */
.main-nav {
    /* Desktop styles - visible, static by default */
    display: block;
    position: static;
    width: auto;
    background-color: transparent;
    border-bottom: none;
    box-shadow: none;
    padding: 0;

    /* Mobile-specific default styles - hidden by default, shown by media query */
    visibility: visible; /* Default for desktop */
    opacity: 1; /* Default for desktop */
    transform: translateY(0); /* Default for desktop */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0.3s ease-in-out; /* Smooth transition */
}

/* State when mobile navigation is open (controlled by JS adding 'is-open') */
.main-nav.is-open {
    visibility: visible; /* Visible when open */
    opacity: 1; /* Fully opaque when open */
    transform: translateY(0); /* End position for dropdown */
}


.main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center; /* Center nav items on desktop */
    gap: 25px; /* Space between nav items */
}

.main-nav li {
    margin: 0;
}

.main-nav a {
    color: var(--primary-white);
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 5px 0; /* Add padding for hover effect */
    position: relative; /* Needed for underline effect */
    transition: color 0.3s ease;
}

/* Underline effect on hover */
.main-nav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-red);
    transition: width 0.3s ease;
}

.main-nav a:hover {
    color: var(--primary-red);
}

.main-nav a:hover::after {
    width: 100%;
}


.profile-banner {
    position: relative;
    width: 100%;
    height: 600px; /* Increased height */
}

.banner-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.banner-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Increased dark overlay for better text contrast */
    z-index: 2;
}

.banner-content {
    position: relative; /* Needed for z-index to work */
    z-index: 10; /* Ensure content is above the overlay */
    display: flex;
    flex-direction: column; /* Stack items vertically by default */
    align-items: center; /* Center items horizontally */
    justify-content: center; /* Center items vertically */
    height: 100%; /* Take full height of the banner-image */
    text-align: center; /* Center text for mobile */
}

.profile-container {
    /* Position relative to the banner-content flex container */
    /* Default stacking is vertical, will change to horizontal for desktop */
    margin-bottom: 20px; /* Space below profile picture on mobile */
}

.profile-picture {
    width: 180px; /* Large size for profile picture */
    height: 180px; /* Keep height and width same for perfect circle */
    border-radius: 50%; /* Make it circular */
    border: 6px solid var(--primary-black); /* Thick border to stand out */
    object-fit: cover; /* Crop image to fit without distortion */
    display: block;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Add shadow for depth */
}

.banner-mission {
     /* Position relative to the banner-content flex container */
     max-width: 600px; /* Limit width of mission text */
}

.mission-text-banner {
    font-size: 1.8rem; /* Larger font size for banner mission */
    font-style: italic;
    color: var(--primary-white); /* Use white for better contrast on dark overlay */
    margin: 0; /* Remove default margin */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* Add text shadow for readability */
    font-weight: 400; /* Normal weight for italic text */
}


/* Mission Statement Section Styling (Now with Text and Buttons) */
/* Update your existing mission-statement-section class */
.mission-statement-section {
    padding: 40px 0;
    text-align: center;
    background-color: var(--primary-black);
    position: relative;
    z-index: 20; /* Ensure it stays above the video layers */
    
    /* Shift the section up to overlap the video */
    margin-top: -5px; 
    
    /* Glowing Hot Red Border Line */
    border-top: 3px solid #ff0000; 
    border-bottom: 3px solid #ff0000;
    
    /* Intense glow effect overlapping the video and section below */
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.8), 
                0 0 30px rgba(255, 0, 0, 0.4);
}

/* Style for the text above the buttons */
.mission-statement-section .mission-text {
    font-size: 1.2rem;
    font-style: normal;
    color: var(--light-grey);
    max-width: 800px;
    margin: 0 auto 30px auto; /* Added bottom margin to separate text and buttons */
}


.section-buttons-container {
    display: flex; /* Use flexbox to arrange buttons */
    justify-content: center; /* Center buttons horizontally */
    gap: 20px; /* Space between buttons */
    flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
}

/* Common button styles */
.section-button {
    display: inline-block;
    padding: 12px 25px;
    border: 2px solid; /* Border will be colored by specific classes */
    border-radius: 5px;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Specific button colors */
.section-button.shop {
    background-color: transparent;
    color: var(--subtle-green);
    border-color: var(--subtle-green);
}

.section-button.shop:hover {
    background-color: var(--subtle-green);
    color: var(--primary-black); /* Black text on green hover */
    border-color: var(--subtle-green);
}

.section-button.about {
    background-color: transparent;
    color: var(--primary-red);
    border-color: var(--primary-red);
}

.section-button.about:hover {
    background-color: var(--primary-red);
    color: var(--primary-white); /* White text on red hover */
    border-color: var(--primary-red);
}

.section-button.login {
    background-color: transparent;
    color: var(--primary-blue);
    border-color: var(--primary-blue);
}

.section-button.login:hover {
    background-color: var(--primary-blue);
    color: var(--primary-white); /* White text on blue hover */
    border-color: var(--primary-blue);
}


/* Pricing Section Styles (from original code, confirmed present) */
.pricing-container {
    text-align: center;
    max-width: 1200px;
    width: 100%;
    background-color: #222; /* Slightly lighter dark for the container */
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);

    padding-bottom: 30px; /* Add padding for the new button */
}

.pricing-container h1 {
    font-size: 3em;
    margin: 40px 0;
    color: #e74c3c; /* Red accent for heading */
    font-weight: 700;
}

/* Desktop Table View */
.pricing-table.desktop-view {
    display: grid;
    grid-template-columns: minmax(200px, 1.5fr) repeat(3, minmax(250px, 1fr)); /* Feature column + 3 tiers */
    border-collapse: collapse;
    width: 100%;
    min-width: 800px; /* Minimum width to ensure table structure */
    overflow-x: auto; /* Allow horizontal scrolling on small screens if needed */
}

/* Table Header */
.table-header, .table-row {
    display: contents; /* Allows grid items to behave like table cells */
}

.table-header .cell {
    background-color: #333; /* Darker header background */
    padding: 25px 20px;
    font-weight: 700;
    font-size: 1.2em;
    color: #f0f0f0;
    border-bottom: 2px solid #444;
    position: sticky; /* Sticky header for horizontal scroll */
    top: 0;
    z-index: 10;
}

.table-header .cell:first-child {
    border-top-left-radius: 12px;
    background-color: #2a2a2a; /* Even darker for the top-left corner */
}
.table-header .cell:last-child {
    border-top-right-radius: 12px;
}

/* Feature Column */
.table-row .cell:first-child {
    background-color: #2a2a2a; /* Darker background for feature names */
    font-weight: 600;
    text-align: left;
    padding-left: 30px;
    border-right: 1px solid #444;
    position: sticky; /* Sticky first column for horizontal scroll */
    left: 0;
    z-index: 5;
}

/* Table Cells */
.cell {
    padding: 20px;
    border-bottom: 1px solid #333; /* Lighter border for rows */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1.05em;
}

/* Checkmark Styling */
.checkmark {
    color: #2ecc71; /* Green for checkmarks */
    font-size: 1.5em;
    font-weight: bold;
}

.crossmark {
    color: #e74c3c; /* Red for crossmarks */
    font-size: 1.5em;
    font-weight: bold;
}

/* Tier Specific Styling (Optional, for visual distinction) */
.tier-basic .cell {
    color: #ccc;
}
.tier-enhanced .cell {
    color: #f0f0f0;
    background-color: #2c2c2c; /* Slightly different background for middle tier */
}
.tier-premium .cell {
    color: #f0f0f0;
}

/* Price and Button Row */
.price-row .cell {
    font-size: 1.8em;
    font-weight: 700;
    color: #e74c3c; /* Red for prices */
    padding-top: 30px;
    padding-bottom: 15px;
    border-bottom: none; /* No bottom border for the last row */
}
.price-row .cell:first-child {
    background-color: #2a2a2a;
    color: #f0f0f0;
    font-size: 1.2em;
    font-weight: 600;
}

.button-row .cell {
    padding-top: 15px;
    padding-bottom: 40px;
    border-bottom: none; /* No bottom border for the last row */
}
.button-row .cell:first-child {
    background-color: #2a2a2a;
}

.btn {
    display: inline-block;
    background-color: #e74c3c; /* Red button */
    color: #fff;
    padding: 12px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05em;
    transition: background-color 0.3s ease, transform 0.2s ease;
    border: none;
    cursor: pointer;
    min-width: 150px;
}

.btn:hover {
    background-color: #c0392b; /* Darker red on hover */
    transform: translateY(-2px);
}

/* New button for "Looking for something else?" */
.more-options-container {
    margin-top: 50px; /* Space above the button */
    text-align: center;
}

.more-options-btn {
    display: inline-block;
    background-color: transparent; /* Transparent background */
    color: #e74c3c; /* Red text */
    border: 2px solid #e74c3c; /* Red border */
    padding: 12px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05em;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    cursor: pointer;
}

.more-options-btn:hover {
    background-color: #e74c3c; /* Red background on hover */
    color: #fff; /* White text on hover */
    transform: translateY(-2px);
}

/* Mobile Tabbed View Styles */
.pricing-mobile-view {
    display: none; /* Hidden by default, shown on mobile */
    padding: 20px;
    margin-top: 30px;
}

.tier-selector {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    background-color: #333;
    border-radius: 8px;
    overflow: hidden;
}

/* Hide actual radio buttons */
/* These are now outside the tier-selector div for sibling selection to work */
.mobile-tab-input {
    display: none;
}

.tier-selector label {
    flex: 1;
    padding: 15px 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 1.1em;
    color: #f0f0f0;
    transition: background-color 0.3s ease, color 0.3s ease;
    border-right: 1px solid #444; /* Separator between tabs */
    text-align: center; /* Center label text */
}

.tier-selector label:last-child {
    border-right: none;
}

/* Active tab background - now targets label directly */
.mobile-tab-input:checked + label {
    background-color: #e74c3c; /* Active tab background */
    color: #fff;
}

/* Tier Cards */
.tier-card {
    background-color: #2a2a2a; /* Card background */
    border-radius: 12px;
    padding: 30px 20px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    text-align: left;
    margin-bottom: 20px;
    display: none; /* Hidden by default */
}

/* Show active tier card based on radio button selection */
/* The key fix: targets the tier-card div that is a general sibling of the checked radio input */
#tabBasic:checked ~ #contentBasic,
#tabEnhanced:checked ~ #contentEnhanced,
#tabPremium:checked ~ #contentPremium {
    display: block; /* Show when active */
}

.tier-card h2 {
    font-size: 2em;
    color: #e74c3c;
    margin-bottom: 15px;
    text-align: center;
}

.tier-card .price {
    font-size: 2.5em;
    font-weight: 700;
    color: #2ecc71; /* Green for prices */
    margin-bottom: 25px;
    text-align: center;
}

.tier-card .price span {
    font-size: 0.5em;
    font-weight: 400;
    color: #888;
}

.mobile-features {
    list-style: none;
    margin-bottom: 30px;
}

.mobile-features li {
    font-size: 1em; /* Smaller text for labels */
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between; /* Align text left, checkmark right */
    align-items: center;
    padding-bottom: 5px;
    border-bottom: 1px dashed #444;
}

.mobile-features li:last-child {
    border-bottom: none;
}

.mobile-features li span {
    font-weight: 600; /* Make the value stand out */
    color: #f0f0f0;
}

.tier-card .btn {
    width: 100%;
    margin-top: 20px;
}

/* Responsive adjustments for pricing */
@media (max-width: 768px) {
    .pricing-container h1 {
        font-size: 2.2em;
        margin: 30px 0;
    }

    .pricing-table.desktop-view {
        display: none; /* Hide desktop table on mobile */
    }

    .pricing-mobile-view {
        display: block; /* Show mobile tabbed view */
    }

    .tier-selector label {
        font-size: 1em;
        padding: 12px 8px;
    }

    .tier-card h2 {
        font-size: 1.8em;
    }

    .tier-card .price {
        font-size: 2.2em;
    }

    .mobile-features li {
        font-size: 0.95em; /* Further reduce text size for labels */
    }

    .checkmark, .crossmark {
        font-size: 1.2em;
    }

    .btn, .more-options-btn {
        padding: 10px 20px;
        font-size: 0.95em;
    }
}
@media (max-width: 480px) {
     .pricing-container h1 { /* Adjusted for very small screens */
        font-size: 1.8em;
        margin: 20px 0;
    }
    .tier-selector label { /* Adjusted for very small screens */
        font-size: 0.9em;
        padding: 10px 5px;
    }
    .tier-card { /* Adjusted for very small screens */
        padding: 20px 10px;
    }
    .tier-card h2 {
        font-size: 1.5em;
    }
    .tier-card .price {
        font-size: 2em;
    }
    .mobile-features li {
        font-size: 0.9em;
    }
}


/* Value Proposition / About Section Styling */
.value-proposition-section {
    padding: 60px 0;
    background-color: var(--dark-grey);
    text-align: center; /* Center the heading */
}

.value-proposition-section h2 {
     color: var(--primary-red); /* Red heading */
     margin-bottom: 40px;
     font-size: 2rem;
     font-weight: 700;
}


.value-grid {
    display: grid;
    /* Adjust grid to accommodate 6 items, 3 per row on desktop */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    text-align: center;
}

.value-item {
    background-color: var(--primary-black);
    padding: 30px 20px; /* Increased padding */
    border-radius: 10px;
    border: 1px solid var(--medium-grey);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    display: flex; /* Use flexbox to align icon, heading, and text */
    flex-direction: column; /* Stack content vertically */
    align-items: center; /* Center content horizontally */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add hover effect */
}

.value-item:hover {
    transform: translateY(-5px); /* Lift item slightly on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4); /* Enhance shadow on hover */
}


.value-icon {
    font-size: 3rem; /* Larger icon size */
    margin-bottom: 15px;
    color: var(--subtle-green); /* Color the icon green */
}

.value-item h3 {
    color: var(--primary-red);
    margin-top: 0;
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.value-item p {
    color: var(--primary-white);
    font-size: 1rem;
}


/* Featured Items Section Styling */
.featured-items-section {
    padding: 80px 0 50px 0;
    background-color: var(--primary-black);
}

.featured-items-section h2 {
    text-align: center;
    color: var(--primary-red);
    margin-bottom: 40px;
    font-size: 2rem;
    font-weight: 700;
}

.featured-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.item {
    background-color: var(--dark-grey);
    border: 1px solid var(--medium-grey);
    padding: 20px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex; /* Use flexbox to arrange content */
    flex-direction: column; /* Stack content vertically */
    justify-content: space-between; /* Distribute space between elements */
}

.item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.item img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 15px;
    border: 1px solid var(--medium-grey);
}

.item .item-name {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary-white);
    margin-bottom: 10px;
}

.item .price-usd {
    color: var(--subtle-green);
    font-size: 1rem;
    margin: 5px 0;
    font-weight: 700;
}

.item .price-btc {
    color: var(--light-grey);
    font-size: 0.9rem;
    margin: 5px 0 15px 0; /* Added margin below BTC price */
}

.add-to-cart-button {
    display: inline-block;
    background-color: var(--primary-red);
    color: var(--primary-white);
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
    margin-top: auto; /* Push button to the bottom of the flex container */
}

.add-to-cart-button:hover {
    background-color: #D32F2F; /* Slightly darker red on hover */
}

.add-to-cart-button:active {
    transform: scale(0.98); /* Slightly shrink button on click */
}


/* About Us Snippet Section Styling */
.about-us-snippet-section {
    padding: 60px 0;
    background-color: var(--dark-grey);
    text-align: center;
}

.about-us-snippet-section h2 {
    color: var(--primary-red);
    margin-bottom: 30px;
    font-size: 2rem;
    font-weight: 700;
}

.about-us-snippet-section p {
    color: var(--primary-white);
    font-size: 1.1rem;
    max-width: 800px;
    margin: 0 auto 30px auto;
}

.learn-more-button {
    display: inline-block;
    background-color: transparent;
    color: var(--primary-red);
    padding: 10px 20px;
    border: 2px solid var(--primary-red);
    border-radius: 5px;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.learn-more-button:hover {
    background-color: var(--primary-red);
    color: var(--primary-white);
}

/* Call to Action Section Styling */
.cta-section {
    padding: 80px 0;
    background-color: var(--primary-black);
    text-align: center;
}

.cta-section h2 {
    color: var(--subtle-green); /* Green heading for CTA */
    margin-bottom: 20px;
    font-size: 2.5rem;
    font-weight: 700;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
}

.cta-section p {
    color: var(--light-grey);
    font-size: 1.3rem;
    margin-bottom: 40px;
}

/* Styling for the "Shop All Products" button in the CTA section */
.cta-section .shop-now-button {
    display: inline-block;
    background-color: transparent; /* Transparent background */
    color: var(--subtle-green); /* Green text */
    padding: 12px 25px; /* Match padding of other buttons */
    border: 2px solid var(--subtle-green); /* Green border */
    border-radius: 5px; /* Match border-radius */
    text-decoration: none;
    font-size: 1rem; /* Match font size */
    font-weight: 600; /* Match font weight */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.1s ease; /* Add transitions */
    box-shadow: none; /* Remove box shadow */
}

.cta-section .shop-now-button:hover {
    background-color: var(--subtle-green); /* Green background on hover */
    color: var(--primary-black); /* Black text on hover */
    border-color: var(--subtle-green); /* Green border on hover */
    transform: none; /* Remove transform on hover */
    box-shadow: none; /* Remove box shadow on active */
}

.cta-section .shop-now-button:active {
    transform: scale(0.98); /* Keep active transform */
    box-shadow: none; /* Remove box shadow on active */
}


/* Footer Styling */
.site-footer {
    background-color: var(--dark-grey);
    color: var(--light-grey);
    padding: 40px 0 20px 0; /* Increased padding */
    margin-top: 60px; /* Increased margin above footer */
    border-top: 3px solid var(--primary-red); /* Red border at the top */
}

.footer-content {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    justify-content: space-between; /* Distribute space between columns */
    gap: 30px; /* Space between columns */
    margin-bottom: 30px;
}

.footer-brand,
.footer-links,
.footer-social {
    flex: 1; /* Allow columns to grow */
    min-width: 150px; /* Minimum width before wrapping */
}

.footer-brand h3,
.footer-links h3,
.footer-social h3 {
    color: var(--primary-white);
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.3rem;
    font-weight: 700;
}

.footer-brand p {
    font-size: 1rem;
    color: var(--medium-grey);
}

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

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: var(--light-grey);
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: var(--primary-white);
}

.social-icons a {
    color: var(--light-grey);
    font-size: 1.5rem;
    margin-right: 15px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.social-icons a:hover {
    color: var(--primary-red); /* Red hover for social icons */
}

.footer-bottom {
    text-align: center;
    border-top: 1px solid var(--medium-grey);
    padding-top: 20px;
    font-size: 0.9rem;
    color: var(--medium-grey);
}


/* Responsive Adjustments */
@media (min-width: 769px) {
    /* Desktop Header */
    .site-header {
        position: fixed; /* Keep header fixed on desktop */
        top: 0;
    }

    /* Desktop Navigation */
    .nav-toggle-icons {
        display: none; /* Hide toggle icons on desktop */
    }

    .main-nav {
        display: block; /* Show navigation on desktop */
        position: static; /* Remove absolute positioning */
        width: auto; /* Auto width */
        background-color: transparent; /* Transparent background */
        border-bottom: none; /* Remove border */
        box-shadow: none; /* Remove shadow */
        padding: 0;
        /* Ensure mobile animation properties are reset on desktop */
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
    }

    .main-nav ul {
        flex-direction: row; /* Arrange nav items horizontally */
        gap: 25px; /* Space between nav items */
    }

    .main-nav li {
        margin: 0;
    }

    .main-nav a {
        padding: 5px 0; /* Adjust padding for desktop */
        display: inline-block; /* Make links inline-block */
    }


    /* Desktop layout for banner content */
    .banner-content {
        flex-direction: row; /* Arrange items horizontally on desktop */
        gap: 50px; /* Space between profile picture and mission text */
        text-align: left; /* Align text to the left on desktop */
    }

    .profile-container {
        margin-bottom: 0; /* Remove bottom margin on desktop */
    }

    .banner-mission {
        align-self: center; /* Vertically center the mission text */
    }

    /* Adjust grid for 3 items per row on larger screens */
    .value-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .footer-content {
        text-align: left; /* Align footer content to the left on desktop */
    }

    .footer-brand,
    .footer-links,
    .footer-social {
       flex: none; /* Remove flex grow on desktop */
       width: auto; /* Allow width to be determined by content */
    }

    .footer-brand {
        width: 30%; /* Give brand column more space */
    }

    .footer-links {
        width: 20%;
    }

     .footer-social {
        width: 20%;
     }
}

@media (max-width: 768px) {
    /* Mobile Header */
    .site-header {
        position: fixed; /* Keep header fixed on mobile */
        top: 0;
        left: 0;
    }

    /* Mobile Navigation Toggle Icons */
    .nav-toggle-icons {
        display: block; /* Show toggle icons on mobile */
    }

    /* Mobile Navigation Menu */
    .main-nav {
        position: absolute;
        top: 100%; /* Position below the header */
        left: 0;
        width: 100%;
        background-color: var(--dark-grey);
        border-bottom: 3px solid var(--primary-red);
        box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
        padding: 10px 0;
        text-align: center;
        /* Animation properties */
        visibility: hidden; /* Hidden by default */
        opacity: 0; /* Transparent by default */
        transform: translateY(-100%); /* Start position (above header) */
        transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0.3s ease-in-out; /* Smooth transition */
    }

    .main-nav.is-open {
        visibility: visible; /* Visible when open */
        opacity: 1; /* Fully opaque when open */
        transform: translateY(0); /* End position (slides down) */
    }


    .main-nav ul {
        flex-direction: column; /* Stack nav items vertically */
        gap: 10px; /* Space between nav items */
    }

    .main-nav li {
        margin: 0;
    }

    .main-nav a {
        padding: 10px 0; /* Increased padding for easier tapping */
        display: block; /* Make links block level for full width tap area */
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .main-nav a:hover {
        color: var(--primary-red);
        background-color: var(--medium-grey); /* Subtle background on hover */
    }


    .profile-picture {
        width: 120px; /* Adjust size for mobile */
        height: 120px; /* Adjust size for mobile */
        border-width: 4px; /* Adjust border for mobile */
    }

    .banner-mission {
        max-width: 90%; /* Adjust max-width for mobile */
    }

    .mission-text-banner {
         font-size: 1.2rem; /* Adjust font size for mobile */
    }

    /* Emoticon styling within boxes on mobile */
    .value-icon {
        font-size: 2.5rem;
        margin-bottom: 10px;
    }

    .mission-statement-section {
        padding: 30px 0; /* Adjust padding for mobile */
    }

    .section-buttons-container {
        flex-direction: column; /* Stack buttons vertically on mobile */
        gap: 15px; /* Adjust gap for mobile */
    }

    .section-button {
        width: 80%; /* Make buttons wider on mobile */
        max-width: 300px; /* Max width for mobile buttons */
        margin: 0 auto; /* Center buttons */
    }

    .mission-text {
        font-size: 1.1rem;
    }


    .value-grid {
        gap: 20px;
        /* Adjust grid for 2 items per row on tablets/larger phones */
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    .value-item {
        padding: 20px;
    }

    .value-item h3 {
        font-size: 1.3rem;
    }

    .featured-items-section {
        padding-top: 60px; /* Adjust padding for mobile */
    }

    .featured-items-section h2 {
        font-size: 1.7rem;
        margin-bottom: 30px;
    }

    .featured-items-grid {
        gap: 20px; /* Adjust gap for mobile */
    }

    .item {
        padding: 15px;
    }

    .item img {
        height: 180px; /* Adjust image height for mobile */
    }

    .about-us-snippet-section,
    .cta-section {
        padding: 40px 0; /* Adjust padding for mobile */
    }

    .about-us-snippet-section h2,
    .cta-section h2 {
        font-size: 1.7rem;
        margin-bottom: 20px;
    }

    .cta-section p {
        font-size: 1.1rem;
        margin-bottom: 30px;
    }

    .cta-section .shop-now-button {
         padding: 10px 20px; /* Match padding of other buttons on mobile */
         font-size: 1rem; /* Match font size on mobile */
    }


    .footer-content {
        flex-direction: column; /* Stack footer columns vertically */
        align-items: center; /* Center footer items */
        text-align: center; /* Center text in footer columns */
        gap: 20px; /* Reduce gap for mobile */
    }

    .footer-brand,
    .footer-links,
    .footer-social {
        width: 100%; /* Full width for stacked columns */
        min-width: auto;
    }

    .social-icons {
        justify-content: center; /* Center social icons */
        display: flex;
    }
}

@media (max-width: 480px) {
     .profile-banner { /* Changed from .profile-banner-section */
        height: 300px; /* Further adjust banner height for smaller mobile */
    }

     .profile-picture {
        width: 100px; /* Further adjust size for smaller mobile */
        height: 100px;
        border-width: 3px;
    }

    .banner-mission {
        max-width: 95%;
    }

    .mission-text-banner {
         font-size: 1rem;
    }

     /* Emoticon styling within boxes on small mobile */
    .value-icon {
        font-size: 2rem;
    }

    .mission-statement-section {
        padding: 20px 0; /* Further adjust padding for smaller mobile */
    }

     .section-buttons-container {
        gap: 10px; /* Further reduce gap for smaller mobile */
    }

    .section-button {
        width: 90%; /* Make buttons wider on smaller mobile */
        padding: 10px 20px; /* Adjust padding */
        font-size: 0.9rem; /* Adjust font size */
    }


    .mission-text {
        font-size: 1rem;
    }

    .value-grid {
        gap: 15px;
         /* Adjust grid for 1 item per row on very small phones */
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .value-item h3 {
        font-size: 1.2rem;
    }

    .featured-items-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Adjust grid for very small screens */
        gap: 15px;
    }

     .item img {
        height: 150px; /* Adjust image height for very small screens */
    }

    .about-us-snippet-section h2,
    .cta-section h2 {
        font-size: 1.5rem;
    }

     .cta-section p {
        font-size: 1rem;
     }

     .cta-section .shop-now-button {
        padding: 10px 20px; /* Match padding of other buttons on smaller mobile */
        font-size: 0.9rem; /* Match font size on smaller mobile */
     }

     .footer-brand h3,
     .footer-links h3,
     .footer-social h3 {
        font-size: 1.2rem;
     }

     .footer-brand p,
     .footer-links a,
     .footer-item p {
        font-size: 0.9rem;
     }

     .social-icons a {
        font-size: 1.3rem;
        margin-right: 10px;
     }
}
.red-text {
    color: red;
}


/*start of style.css for comparison chart */

/* Create a soft blend between sections */

/* Unique CSS Variable Scope */
._m7x_outer_wrapper_99 {
    --m7x-hr-red: #ff1f1f;
    --m7x-ok-grn: #00ff66;
    --m7x-deep-0: #0a0a0a;
    --m7x-deep-1: #111111;
    --m7x-grey-2: #222222;
    background-color: var(--m7x-deep-0);
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    margin: 0;
    display: flex;
    justify-content: center;
    padding: 80px 20px;
}

._m7x_inner_shell_x12 {
    width: 100%;
    max-width: 850px;
}

._m7x_gladius_title_v2 {
    text-align: center;
    font-weight: 900;
    font-size: 2.2rem;
    letter-spacing: -1px;
    margin-bottom: 50px;
    text-transform: uppercase;
}

._m7x_ruby_burn_33 {
    color: var(--m7x-hr-red);
    text-shadow: 0 0 15px rgba(255, 31, 31, 0.4);
}

._m7x_grid_vault_88 {
    border: 2px solid var(--m7x-grey-2);
    background-color: var(--m7x-deep-1);
}

._m7x_hdr_strip_4k {
    display: flex;
    align-items: center;
    background-color: #000;
    border-bottom: 3px solid var(--m7x-hr-red);
}

._m7x_data_row_k9 {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--m7x-grey-2);
    transition: background 0.2s;
}

._m7x_data_row_k9:hover { background: #1a1a1a; }
._m7x_data_row_k9:last-child { border-bottom: none; }

._m7x_txt_prime_val {
    flex: 1; 
    padding: 20px 25px;
    font-weight: 800;
    font-size: 1.1rem;
    text-transform: uppercase;
}

._m7x_hdr_strip_4k ._m7x_txt_prime_val {
    color: #444;
    font-size: 0.75rem;
    letter-spacing: 2px;
}

._m7x_indicator_dock_z {
    display: flex;
    flex-shrink: 0;
}

._m7x_status_bit, ._m7x_brand_pod_00 {
    width: 95px; 
    height: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: 1px solid var(--m7x-grey-2);
}

._m7x_asset_raw_unfiltered {
    height: 30px;
    width: auto;
}

._m7x_glow_mod_01 {
    filter: drop-shadow(0 0 5px rgba(255, 31, 31, 0.3));
}

._m7x_bit_err_red {
    color: var(--m7x-hr-red);
    font-size: 1.5rem;
    font-weight: 900;
}

._m7x_bit_ok_grn {
    color: var(--m7x-ok-grn);
    font-size: 1.5rem;
    font-weight: 900;
    text-shadow: 0 0 12px rgba(0, 255, 102, 0.4);
}

._m7x_low_tagline_44 {
    margin-top: 30px;
    text-align: center;
    font-weight: 900;
    letter-spacing: 5px;
    color: #333;
}

@media (max-width: 650px) {
    ._m7x_txt_prime_val { font-size: 0.75rem; padding: 15px; }
    ._m7x_status_bit, ._m7x_brand_pod_00 { width: 65px; height: 60px; }
    ._m7x_asset_raw_unfiltered { height: 22px; }
    ._m7x_gladius_title_v2 { font-size: 1.3rem; }
}