body {
    /*  RED GRADIENT - restored and locked */
    background: linear-gradient(160deg, #0f0f0f 0%, #4a0000 35%, #8b0000 55%, #c0c0c0 85%, #7a7a7a 100%);
    background-attachment: fixed;
    min-height: 100vh;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;

    /* LAYOUT - keeps footer at bottom and content centered */
    display: flex;
    flex-direction: column;
    align-items: center; 
}

.tf-navbar {
    width: 100%; /* Ensures nav stretches across the red background */
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #000000;
    padding: 10px 20px;
    border-bottom: 2px solid #8b0000;
}

.hero {
    text-align: center;
    padding-top: 120px;
    width: 100%;
    flex: 1; /* This is the "spring" that pushes the footer down */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- Center the Cards --- */
.transformer-cards {
    display: flex;
    flex-wrap: wrap;         /* Allows cards to wrap to next line */
    justify-content: center; /* THE FIX: Centers cards horizontally */
    gap: 25px;               /* Space between cards */
    padding: 40px 20px;
    max-width: 1300px;
    margin: 0 auto;          /* Centers the whole section */
}

/* --- Themed Sort Dropdown --- */
.sort-wrapper {
    text-align: center;
    margin: 20px 0;
}

.sort-wrapper select {
    background: #1a1a1a;
    color: #ff3b3b;         /* Autobot Red */
    border: 1px solid #8b0000;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: 0.3s;
}

.sort-wrapper select:hover {
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.4);
    background: #252525;
}

/* --- Card Polish --- */
.tf-card {
    text-decoration: none;
    transition: transform 0.3s ease;
}

.tf-card:hover {
    transform: translateY(-10px); /* Makes them "pop" up on hover */
}

.search-section{
    display:flex;
    justify-content:center;
    margin-top:40px;
}

.search-input{
    width:420px;
    padding:14px 20px;
    border-radius:50px;
    border:none;
    font-size:16px;

    background:#1e1e1e;
    color:white;

    box-shadow:0 5px 20px rgba(0,0,0,0.3);

    transition:all 0.3s ease;
}

.search-input::placeholder{
    color:#aaa;
}

.search-input:focus{
    outline:none;
    box-shadow:0 0 0 3px rgba(123,63,228,0.6);
    background:#252525;
}

.search-box{
    position:relative;
}

.search-box input{
    width:420px;
    padding:14px 45px 14px 20px;
    border-radius:50px;
    border:none;
    background:#1e1e1e;
    color:white;
}

.search-icon{
    position:absolute;
    right:15px;
    top:50%;
    transform:translateY(-50%);
}

.btn-docs{
    background:#c0392b;
    border:none;
    color:white;
}

.btn-docs:hover{
    background:#a93226;
}

.search-input{
    background:#1e1e1e;
    border:1px solid #c0392b;
}

.search-input:focus{
    box-shadow:0 0 10px #c0392b;
}

.hero-logo img{
    width:150px;
    opacity:0.85;
}

.tf-navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #000000; /* Metallic Charcoal from image */
    padding: 10px 20px;
    color: white;
    font-family: 'Orbitron', sans-serif; 
    border-bottom: 2px solid #8b0000; /* Subtle Red trim */
}

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

.logo {
    background-color: #c0392b; /* Transformers Red */
    padding: 5px 12px;
    border-radius: 6px;
    font-weight: bold;
    margin-right: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 15px;
    margin: 0;
    padding: 0;
}

.nav-links a {
    text-decoration: none;
    color: #c0c0c0; /* Silver text */
    font-size: 0.9em;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: white;
}


.nav-search input {
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid #7a7a7a;
    border-radius: 6px;
    padding: 6px 15px;
    width: 250px;
    color: white;
    outline: none;
}

.nav-search input:focus {
    border-color: #c0392b; /* Red glow on focus */
    background-color: rgba(0, 0, 0, 0.4);
}

.transformer-cards {
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 40px 20px;
    flex-wrap: wrap; /* Allows them to stack on mobile */
}

.tf-card {
    position: relative;
    width: 250px;
    height: 350px;
    border: 3px solid #c0c0c0; /* Metallic Silver border */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.tf-card img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Keeps image from looking squashed */
}

/* Hover Effect: The card pops out and glows red */
.tf-card:hover {
    transform: translateY(-10px);
    border-color: #c0392b; /* Glows Transformers Red */
    box-shadow: 0 0 25px rgba(192, 57, 43, 0.7);
    cursor: pointer;
}

/* Subtle overlay that appears on hover */
.card-overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    text-align: center;
    padding: 10px 0;
    opacity: 0;
    transition: opacity 0.3s;
}

.tf-card:hover .card-overlay {
    opacity: 1;
}

.bg-watermark {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 600px;  /* Increased size for more impact */
    height: 600px;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: -1;
    
    /* THE "INGRAINED" SECRET: */
    mix-blend-mode: overlay; /* Blends it INTO the background colors */
    opacity: 0.15;           /* Subtle enough to not distract */
    filter: blur(1px);       /* Softens the edges to look less "digital" */
}

.left-side {
    left: -150px; /* Pulls it off-screen slightly for a massive look */
    background-image: url('autobot-logo.png');
}

.right-side {
    right: -150px;
    background-image: url('decepticon-logo.png');
}


.site-footer {
    width: 100%; 
    background-color: #000000;
    color: #ffffff;
    padding: 30px 0;
    font-family: 'Inter', Arial, sans-serif;
    border-top: 2px solid #cc0000;
    margin-top: 60px;
    flex-shrink: 0; /* Ensures the footer doesn't squash */
}

.footer-container {
    max-width: 1100px;
    margin: 0 auto; /* Keeps the text centered inside the wide black bar */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.footer-legal p {
    margin: 5px 0;
    font-size: 14px;
    color: #999;
}

.footer-legal span {
    color: #cc0000; /* Red highlight for the brand name */
    font-weight: bold;
}

.footer-legal .tagline {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-nav a {
    color: #999;
    text-decoration: none;
    font-size: 13px;
    margin-left: 20px;
    transition: color 0.3s;
}

.footer-nav a:hover {
    color: #ffffff; /* Glow effect on hover */
}

/* --- COMPREHENSIVE RESPONSIVE STYLES --- */

/* Tablet & Mobile Adjustments */
@media (max-width: 900px) {
    .hero h1 {
        font-size: 38px; /* Prevents giant text from overlapping */
        padding: 0 20px;
    }
    
    .tf-navbar {
        flex-direction: column; /* Stacks nav items */
        gap: 15px;
        padding: 20px;
    }

    .nav-search input {
        width: 100%; /* Search bar takes full width on small screens */
    }
}

/* Mobile Phone Specifics */
@media (max-width: 600px) {
    .hero {
        padding-top: 60px; /* Moves content up so you don't have to scroll as much */
    }

    .hero h1 {
        font-size: 28px;
    }

    .search-box input {
        width: 280px; /* Fits standard phone widths */
    }

    .transformer-cards {
        padding: 20px;
        gap: 20px;
    }

    .tf-card {
        width: 100%; /* Cards take up the full width of the phone */
        max-width: 320px;
        height: auto; /* Let the image dictate the height */
    }

    /*  footer fixes  here */
    .footer-container {
        flex-direction: column;
        text-align: center;
    }
    .footer-nav {
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .footer-nav a {
        margin: 5px 10px;
    }
}

/* Contact Form Specifics */
.tf-form {
    width: 100%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tf-form textarea {
    resize: none;
    font-family: inherit;
}

.btn-docs {
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(192, 57, 43, 0.4);
}

.btn-docs:hover {
    box-shadow: 0 0 20px #c0392b;
    transform: scale(1.02);
}


.cart-icon {
    position: relative;
    font-size: 24px;
    cursor: pointer;
    margin-right: 15px;
}

.badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: #cc0000; /* Transformers Red */
    color: white;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 50%;
    font-weight: bold;
}

.transformer-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 25px;
  padding: 40px;
}

.buy-hero {
  padding: 40px 20px;
  font-size: 0.9em;
}

/* --- Action Grid Styling --- */
.action-grid {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-top: 50px;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1100px;
}

.action-card {
    background: rgba(0, 0, 0, 0.75); /* Dark box for readability */
    border: 2px solid #444;
    border-radius: 15px;
    padding: 30px;
    flex: 1;
    min-width: 280px;
    text-decoration: none;
    color: white;
    transition: 0.3s;
    text-align: center;
}

.action-card:hover { transform: translateY(-8px); }

/* Color coding the borders */
.recruit { border-color: #c0c0c0; }   /* Silver */
.reinforce { border-color: #ffd700; } /* Gold */
.deploy { border-color: #c0392b; }    /* Red */

.action-btn {
    display: block;
    margin-top: 20px;
    padding: 10px;
    background: #c0392b;
    border-radius: 5px;
    font-weight: bold;
    font-size: 14px;
}

/* --- Entrance Animations --- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pulseEnergon {
    0% { filter: drop-shadow(0 0 5px rgba(192, 57, 43, 0.4)); }
    50% { filter: drop-shadow(0 0 20px rgba(192, 57, 43, 0.8)); }
    100% { filter: drop-shadow(0 0 5px rgba(192, 57, 43, 0.4)); }
}

.animate-slide-up { animation: fadeInUp 0.8s ease-out forwards; }
.animate-fade-in { animation: fadeIn 1.2s ease-in forwards; }
.animate-pulse { animation: pulseEnergon 3s infinite ease-in-out; }

/* --- Cybertronian Glowing Hover Effects --- */
.action-card:hover {
    transform: scale(1.05); /* Slight lift effect */
    box-shadow: 0 0 25px rgba(192, 57, 43, 0.6); /* Red Glow */
}

.glow-silver:hover { border-color: #c0c0c0; box-shadow: 0 0 25px rgba(192, 192, 192, 0.5); }
.glow-gold:hover { border-color: #ffd700; box-shadow: 0 0 25px rgba(255, 215, 0, 0.5); }

/* --- Cart Badge Styling --- */
.cart-icon { position: relative; font-size: 24px; cursor: pointer; margin-right: 20px; }
.badge {
    position: absolute; top: -8px; right: -8px;
    background: #c0392b; color: white;
    font-size: 11px; padding: 2px 6px; border-radius: 50%;
}

/* --- ENTRANCE ANIMATIONS --- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes sideScale {
    from { opacity: 0; transform: scaleX(0); transform-origin: left; }
    to { opacity: 1; transform: scaleX(1); transform-origin: left; }
}

/* --- THEMED PULSE EFFECTS --- */
@keyframes energonPulse {
    0% { box-shadow: 0 0 5px rgba(192, 57, 43, 0.4); }
    50% { box-shadow: 0 0 20px rgba(192, 57, 43, 0.8); }
    100% { box-shadow: 0 0 5px rgba(192, 57, 43, 0.4); }
}

/* --- CLASSES TO APPLY IN HTML --- */
.animate-text { 
    animation: fadeInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; 
}

.animate-border { 
    animation: sideScale 1s ease-in-out forwards; 
}

.glow-red { 
    animation: energonPulse 3s infinite ease-in-out; 
}

/* --- INTERACTIVE HOVER ANIMATION --- */
.tf-card, .action-card, .btn-docs {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.tf-card:hover, .action-card:hover {
    transform: translateY(-12px) scale(1.02);
    filter: brightness(1.2);
    box-shadow: 0 0 30px rgba(192, 57, 43, 0.6);
}

/* --- GLOBAL LOADING ANIMATIONS --- */
@keyframes pageReveal {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* container "load in" smoothly */
.page-load-animate {
    animation: pageReveal 0.8s ease-out forwards;
}

/* Subtle logo pulse to show the 'system' is active */
.logo-pulse {
    animation: pulseEnergon 3s infinite ease-in-out;
}

/* Entrance Animation */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Apply this to the main container of every page */
.page-reveal {
    animation: fadeInUp 0.8s ease-out forwards;
}

/* --- Enhanced Index Page Background --- */
.index-custom-bg::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/PlanetOptimus.png');
    background-size: 850px;
    background-position: center 60px;
    background-repeat: no-repeat;
    
    /* Increased brightness slightly to make it pop more */
    filter: sepia(100%) saturate(600%) hue-rotate(-60deg) brightness(0.7) drop-shadow(0 0 15px rgba(255, 0, 0, 0.5));
    
    opacity: 0.6;
    z-index: -1;

    /* Adding the animations */
    animation: energonPulse 4s ease-in-out infinite alternate, floatEffect 8s ease-in-out infinite;
}

/* 1. The Pulse: Makes the red glow breathe like it's powered by Energon */
@keyframes energonPulse {
    from {
        filter: sepia(100%) saturate(600%) hue-rotate(-60deg) brightness(0.6) drop-shadow(0 0 10px rgba(255, 0, 0, 0.3));
        opacity: 0.5;
    }
    to {
        filter: sepia(100%) saturate(800%) hue-rotate(-60deg) brightness(0.9) drop-shadow(0 0 30px rgba(255, 0, 0, 0.8));
        opacity: 0.8;
    }
}

/* 2. The Float: A subtle slow-motion drift  */
@keyframes floatEffect {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

/* --- Centering the Product Cards --- */
.product-grid { /* TF cards */
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* This pulls them to the center */
    gap: 30px;
    padding: 40px;
    max-width: 1200px;
    margin: 0 auto; /* Centers the whole container */
}

/* --- Beautifying the Sort Button --- */
select {
    background-color: #1a1a1a;
    color: #ff0000;
    border: 1px solid #8b0000;
    padding: 8px 15px;
    border-radius: 5px;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    transition: 0.3s;
    appearance: none; /* Removes default browser arrow */
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
}

select:hover {
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
    background-color: #2a2a2a;
}

/* Container for the Sort dropdown to center it */
.sort-container {
    text-align: center;
    margin-bottom: 30px;
}

/* This fixes the giant logo takeover */
.logo-box img {
    max-width: 250px; /* Adjust this number to make it bigger or smaller */
    height: auto;
    display: block;
    margin: 0 auto 20px auto; /* Centers it and adds space below */
    
    /* Optional: Adds a red-chrome the theme */
    filter: drop-shadow(0 0 15px rgba(255, 0, 0, 0.6));
    
    transition: transform 0.3s ease;
}

.logo-box img:hover {
    transform: scale(1.1); /* Subtle "pop" when usershover */
}

.tf-card img {
    transition: opacity 0.3s ease-in-out;
}

/* Optional: Add a "scanning" red glow when hovering over a card */
.tf-card:hover {
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
    transform: scale(1.02);
    z-index: 10;
}

/* --- CYBERTRON CHECKOUT THEME --- */

/* 1. The Body Setup */
.checkout-page-theme {
    background-color: #050000; /* Deep black base */
    margin: 0;
    color: white;
    font-family: 'Courier New', Courier, monospace; /* Tech feel */
}

/* 2. The Image Integration */
.checkout-page-theme::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Background image */
    background-image: url('images/Goatwave.png'); 
    background-size: cover;
    background-position: center;
    
    /* This tints the blue Soundwave art to match the site's red */
    filter: sepia(1) saturate(5) hue-rotate(-50deg) brightness(0.35);
    
    opacity: 0.7;
    z-index: -1; /* Sends it to the very back */
}

/* 3. The Form Container (Glassmorphism) */
.checkout-container {
    max-width: 850px;
    margin: 80px auto; /* Pulls it down from the top */
    background: rgba(10, 0, 0, 0.85); /* Dark red-tinted glass */
    backdrop-filter: blur(10px); /* Blurs Soundwave behind the form */
    border: 2px solid #8b0000;
    box-shadow: 0 0 25px rgba(255, 0, 0, 0.5);
    padding: 40px;
    border-radius: 10px;
}

/* 4. The Grid & Form Alignment */
.checkout-grid {
    display: flex;
    gap: 40px;
    margin-top: 30px;
}

.checkout-form {
    flex: 1.5;
    display: flex;
    flex-direction: column;
}

.checkout-form h3 {
    color: #ff0000;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 15px 0 5px 0;
}

.checkout-form input {
    background: #111;
    border: 1px solid #444;
    color: #fff;
    padding: 12px;
    margin: 8px 0;
    border-radius: 4px;
}

.checkout-form input:focus {
    border-color: #ff0000;
    box-shadow: 0 0 10px #8b0000;
    outline: none;
}

/* 5. The Button Style */
.deploy-btn {
    background: #8b0000;
    color: white;
    border: none;
    padding: 18px;
    margin-top: 25px;
    font-weight: bold;
    font-size: 1.1rem;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.3s;
    border-radius: 5px;
}

.deploy-btn:hover {
    background: #ff0000;
    box-shadow: 0 0 20px #ff0000;
    transform: scale(1.02);
}

/* Styling specifically for Pre-Order buttons */
.preorder-btn:hover {
    background-color: #3cb371 !important; /* Lighter green */
    box-shadow: 0 0 20px rgba(46, 139, 87, 0.6);
    transform: scale(1.05);
    transition: 0.3s;
}

/* Unique gold glow for Deathsaurus's leadership button */
button[onclick*="Deathsaurus"]:hover {
    background-color: #b8860b !important; /* Dark Goldenrod */
    box-shadow: 0 0 20px #ffd700;
    transform: scale(1.05);
    transition: 0.3s;
}

/* Prevent the side-by-side squashing */
.soundwave-box {
    display: flex;
    flex-direction: column; /* Forces button below the text */
    align-items: center;    /* Centers the button */
}

/* Soundwave Button Glow */
.soundwave-box .btn-docs:hover {
    background-color: #3949ab !important;
    box-shadow: 0 0 20px rgba(63, 81, 181, 0.8);
    transform: scale(1.05);
    transition: 0.3s ease;
}

.value-box {
    border: 1px solid #ffd700;
    color: #ffd700;
    padding: 5px 15px;
    border-radius: 5px;
    font-weight: bold;
    min-width: 120px;
    text-align: center;
    transition: 0.3s ease;
}

/* Mobile Responsive Fixes */
@media screen and (max-width: 768px) {
    
    /* 1. Fix the Header & Search */
    nav { 
        flex-direction: column; 
        align-items: center;
    }
    
    .search-bar { 
        width: 90%; 
        margin-top: 10px; 
    }

    /* 2. Stack the product cards vertically */
    .product-grid, .checkout-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    /* 3. Make images fit the screen */
    .product-card, .deployment-container {
        width: 90% !important;
        margin: 10px auto;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    /* 4. Adjust the "Acquire New Units" text size */
    h1 {
        font-size: 1.5rem;
        text-align: center;
    }
}