/* ======== Global Variables ======== */
:root {
    --color-primary: #1a2533;
    --color-primary-light: #2c3e50;
    --color-accent: #d4af37;
    --color-accent-hover: #c9a952;
    --color-secondary: #f39c12;
    --color-secondary-hover: #e67e22;
    --bg-body: #fcfbf9;
    --bg-white: #ffffff;
    --text-main: #333333;
    --text-muted: #666666;
    --text-light: #cccccc;
    --border-light: #eeeeee;
    --radius-lg: 16px;
    --radius-pill: 30px;
    --container-width: 1200px;
    --transition-standard: all 0.3s ease;
}

/* ======== Basic Setup & Accessibility ======== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Manrope', sans-serif;
    background-color: var(--bg-body);
    color: var(--text-main);
    line-height: 1.6;
}

:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-accent);
    color: var(--bg-white);
    padding: 8px 16px;
    z-index: 2000;
    transition: top 0.3s;
    text-decoration: none;
    font-weight: bold;
}

.skip-link:focus {
    top: 0;
}

/* ======== UI Components (Buttons & Typography) ======== */
.btn {
    padding: 14px 28px;
    border: none;
    border-radius: var(--radius-pill);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-standard);
    display: inline-block;
    text-align: center;
    text-decoration: none;
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--bg-white);
}

.btn-primary:hover {
    background-color: var(--text-main);
    color: var(--bg-white);
}

.btn-secondary {
    background-color: transparent;
    color: var(--color-primary);
    border: 1px solid #ddd;
}

.btn-secondary:hover {
    background-color: #f9f9f9;
    border-color: #ccc;
}

.btn-quote, .btn-featured {
    background-color: var(--color-secondary);
    color: var(--bg-white);
    border: none;
}

.btn-quote:hover {
    background-color: var(--color-secondary-hover);
}

.section-eyebrow {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-accent);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

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

.section-subtitle {
    font-size: 1rem;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto 40px auto;
}

/* ======== Header, Search & Cart ======== */
.main-header {
    display: grid;
    /* '1fr' on both sides forces the middle 'auto' column to be mathematically centered */
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 20px 5%;
    border-bottom: 1px solid var(--border-light);
    background-color: var(--bg-white);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.logo {
    font-size: 1.6rem;
    font-weight: 800;
    color: #222;
    text-decoration: none;
}

.main-nav {
    grid-column: 2;
    /* Explicitly tell nav to stay in the center column */
}

.main-nav ul {
    list-style: none;
    display: flex;
    gap: 30px;
    /* Spacing between "Home", "Products", etc. */
    margin: 0;
    padding: 0;
}

.main-nav li {
    display: inline-block;
}

.main-nav a {
    text-decoration: none;
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.95rem;
    transition: var(--transition-standard);
}

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

.nav-icons {
    grid-column: 3;
    /* Push icons to the right column */
    display: flex;
    gap: 25px;
    justify-content: flex-end;
    align-items: center;
}

/* Search Overlay */
.search-overlay {
    position: absolute;
    inset: 0;
    /* Shorthand for top/bottom/left/right: 0 */
    background: var(--bg-white);
    display: flex;
    align-items: center;
    padding: 0 5%;
    z-index: 1002;
}

.search-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#global-search-input {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    border: none;
    border-bottom: 2px solid var(--color-accent);
    font-size: 1.1rem;
    outline: none;
}

#close-search {
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--text-muted);
    cursor: pointer;
    margin-left: 20px;
}

/* Enhanced Hero with Background Depth */
.trust-hero {
    background: linear-gradient(rgba(26, 37, 51, 0.85), rgba(26, 37, 51, 0.85)), url('med-bg.jpg');
    background-size: cover;
    background-position: center;
    color: white;
    padding: 120px 20px;
}

/* Dynamic Stats Bar */
.stats-bar {
    background: var(--bg-white);
    padding: 40px 5%;
    margin-top: -50px;
    /* Overlap effect */
    border-radius: var(--radius-lg);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 10;
}

.stats-grid {
    display: flex;
    justify-content: space-around;
    text-align: center;
}

.stat-item strong {
    display: block;
    font-size: 2.5rem;
    color: var(--color-accent);
    /* Use the gold accent */
}

/* Layout Utilities */
.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Expanded Hero */
.trust-hero-v2 {
    padding: 160px 0 100px 0;
    /* Huge vertical padding */
    text-align: center;
    background: radial-gradient(circle at top right, #fcfbf9, #f0f2f5);
}

/* ======== Refined Contact Split Layout ======== */
.contact-container {
    display: grid;
    /* This ensures the left side stays small (280px), 
       the divider is 1px, and the form takes the rest of the space */
    grid-template-columns: 280px 1px 1fr;
    gap: 60px;
    max-width: var(--container-width);
    margin: 0 auto;
    align-items: center;
    /* Keeps everything centered vertically */
    padding: 60px 0;
}

/* Left Side: Small & Clean */
.contact-info-pane {
    padding-top: 0;
    /* Reset previous padding */
}

.pane-title-sm {
    font-size: 1.5rem;
    color: var(--color-primary);
    margin-bottom: 25px;
}

.info-group-sm {
    margin-bottom: 20px;
}

.info-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--color-accent);
    font-weight: 800;
    margin-bottom: 4px;
}

/* Vertical Divider Line */
/* ======== FINAL CONTACT SPLIT FIX ======== */
.contact-split-view {
    padding: 100px 5%;
    background-color: var(--bg-white);
}

.contact-container {
    display: grid;
    /* Force 3 columns: Left Info (280px), Divider (1px), Right Form (Remaining space) */
    grid-template-columns: 280px 1px 1fr;
    gap: 60px;
    max-width: var(--container-width);
    margin: 0 auto;
    align-items: start;
    /* Align to top to prevent stretching */
}

.contact-info-pane {
    min-width: 280px;
}

.contact-divider {
    width: 1px;
    background-color: var(--border-light);
    align-self: stretch;
    /* This makes the line span the full height of the container */
    min-height: 300px;
}

.contact-form-pane {
    background: #fdfdfd;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

/* Ensure form inputs stay side-by-side */
.modern-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

/* Responsive Fix: Stack only on tablets/phones */
@media (max-width: 992px) {
    .contact-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .contact-divider {
        display: none;
    }

    .modern-form .form-row {
        grid-template-columns: 1fr;
    }
}

/* The Zig-Zag Logic */
.story-section {
    padding: 100px 5%;
}

.story-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    /* Large gap prevents "compacted" feel */
    align-items: center;
    margin-bottom: 120px;
}

.story-row.reverse {
    direction: rtl;
}

.story-row.reverse .story-text {
    direction: ltr;
}

.story-image img {
    width: 100%;
    border-radius: var(--radius-lg);
    filter: grayscale(20%);
    transition: filter 0.5s ease;
}

.story-image img:hover {
    filter: grayscale(0%);
}

.story-text h2 {
    margin-bottom: 24px;
    font-size: 2.8rem;
}

.story-text p {
    font-size: 1.15rem;
    color: var(--text-muted);
    line-height: 1.8;
}

/* Impact Section Styles */
.impact-grid {
    display: flex;
    justify-content: space-around;
    padding: 80px 5%;
    background: var(--color-primary);
    color: white;
    border-radius: var(--radius-lg);
    margin: 0 5% 100px 5%;
}

.impact-number {
    display: block;
    font-size: 3rem;
    font-weight: 800;
    color: var(--color-accent);
}

/* Split Layout Container */
.contact-split-view {
    padding: 100px 5%;
    background-color: var(--bg-white);
}


/* Left Pane Styling */

.info-group {
    margin-bottom: 35px;
}

.info-group h4 {
    color: var(--color-primary);
    margin-bottom: 10px;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.info-group p {
    color: var(--text-muted);
    font-size: 1.05rem;
    margin-bottom: 5px;
}

.contact-socials {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact-socials a {
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 600;
}

/* Vertical Divider Line */
.contact-divider {
    width: 1px;
    background-color: var(--border-light);
    height: 100%;
    min-height: 400px;
}

/* Right Pane (The Form) */
.pane-title {
    font-size: 2rem;
    color: var(--color-primary);
    margin-bottom: 30px;
}

.modern-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

html {
    scroll-behavior: smooth;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

/* Responsive Adjustments */
/* Container Spacing */
/* Left Side: Small & Clean */
.pane-title-sm {
    font-size: 1.5rem;
    /* Smaller than previous version */
    color: var(--color-primary);
    margin-bottom: 25px;
}

.info-group-sm {
    margin-bottom: 20px;
}

.info-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--color-accent);
    font-weight: 800;
    margin-bottom: 4px;
}

.info-group-sm p {
    font-size: 0.95rem;
    /* Highly readable but smaller */
    color: var(--text-main);
    margin: 0;
}

.contact-social-icons {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.contact-social-icons a {
    color: var(--text-muted);
    transition: color 0.3s ease;
}

.contact-social-icons a:hover {
    color: var(--color-accent);
}

/* Right Side: High-End Form */

.modern-form input,
.modern-form textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.95rem;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.modern-form input:focus,
.modern-form textarea:focus {
    border-color: var(--color-accent);
    outline: none;
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.1);
}

.btn-full {
    background-color: var(--color-primary);
    color: white;
    padding: 16px;
    font-size: 1rem;
    border-radius: 8px;
    margin-top: 10px;
    cursor: pointer;
}

/* Spaced Form */
.contact-focus {
    padding: 100px 20px;
    text-align: center;
}

.spaced-form {
    max-width: 600px;
    margin: 40px auto 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* More space between inputs */
}

.spaced-form input,
.spaced-form textarea {
    padding: 18px;
    border: 1px solid #ddd;
    border-radius: 12px;
    background: #fff;
}

/* Modern Form Rows */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.contact-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    padding: 50px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Cart Badge & Items */
.cart-badge {
    position: absolute;
    top: -8px;
    right: -12px;
    background-color: #e74c3c;
    color: var(--bg-white);
    font-size: 0.7rem;
    font-weight: 800;
    height: 18px;
    min-width: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    display: none;
}

.cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid var(--border-light);
}

.cart-item-info h4 {
    font-size: 1rem;
    color: var(--color-primary);
    margin: 0 0 4px 0;
}

.cart-item-info p {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

.btn-remove-item {
    background: none;
    border: none;
    color: #e74c3c;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

.cart-empty-state {
    text-align: center;
    padding: 30px 0;
    color: var(--text-muted);
}

/* ======== Shared Animations ======== */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@keyframes skeleton-pulse {
    0% {
        background-color: #e2e5e7;
    }

    50% {
        background-color: #f2f5f7;
    }

    100% {
        background-color: #e2e5e7;
    }
}

.is-loading img {
    opacity: 0;
}

.is-loading {
    background-color: #e2e5e7;
    animation: skeleton-pulse 1.5s infinite ease-in-out;
    background-image: none !important;
}

/* ======== Page: Home (index.html) ======== */
.hero-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 90vh;
    /* Increased from 80vh to give more vertical space */
    padding: 100px 20px;
    /* Added more vertical padding */
}

.hero-badge {
    background-color: #f4f4f4;
    color: #777;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 24px;
}

.hero-badge span {
    color: var(--color-accent);
}

.hero-title {
    font-size: 3.5rem;
    /* Reduced from 5rem */
    font-weight: 400;
    color: var(--color-primary);
    line-height: 1.2;
    margin-bottom: 24px;
    /* Slightly tighter margin */
}

.hero-title strong {
    font-weight: 800;
    display: block;
}

.hero-subtitle {
    font-size: 1.05rem;
    /* Reduced from 1.2rem */
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 600px;
    /* Narrower width for better readability */
    margin: 0 auto 40px auto;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 10px;
}

.hero-buttons .btn {
    min-width: 170px;
    /* Reduced from 200px */
    height: 50px;
    /* Reduced from 55px */
    padding: 0 20px;
    font-size: 0.95rem;
    /* Slightly smaller text */
    display: flex;
    align-items: center;
    justify-content: center;
}

.featured-equipment {
    text-align: center;
    padding: 80px 5%;
    background-color: var(--bg-white);
}

.featured-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Product Cards (Shared Home & PLP) */
.product-card {
    position: relative;
    height: 350px;
    /* Adjusted slightly smaller */
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--bg-white);
}

.card-hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 37, 51, 0.4);
    /* Dark tint */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    /* Hidden */
    transition: opacity 0.3s ease;
    z-index: 5;
}

.card-hover-overlay .btn {
    transform: translateY(20px);
    /* Start slightly lower */
    transition: transform 0.3s ease;
    background-color: var(--color-secondary);
    color: white;
    padding: 12px 24px;
    font-size: 0.9rem;
}

/* Container for text and buttons inside the hover overlay */
.overlay-content {
    text-align: center;
    color: var(--bg-white);
    padding: 20px;
    width: 100%;
}

.overlay-content h4 {
    margin-bottom: 15px;
    font-size: 1.1rem;
    font-weight: 800;
}

.overlay-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

/* Specific sizing for catalog buttons to prevent overflow */
.btn-sm {
    padding: 8px 16px !important;
    font-size: 0.85rem !important;
    min-width: 90px !important;
    height: 38px !important;
}

/* Add to List button contrast */
.btn-add-cart {
    background-color: var(--bg-white) !important;
    color: var(--color-primary) !important;
    border: none;
}

.btn-add-cart:hover {
    background-color: var(--border-light) !important;
}

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

.product-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

.card-tag {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--text-main);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    z-index: 2;
}

.card-icon {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--text-main);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 2;
}

.product-card.fade-in.is-visible:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.product-card .btn-quote {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 2;
}

.product-card .btn-featured {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 2;
}

/* ======== New Section: About Us ======== */
.about-us-section {
    padding: 80px 5%;
    background-color: var(--bg-body);
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    max-width: var(--container-width);
    margin: 0 auto;
}

.about-highlights {
    list-style: none;
    margin-top: 20px;
}

.about-highlights li {
    margin-bottom: 12px;
    color: var(--text-muted);
}

.about-highlights strong {
    color: var(--color-primary);
}

.about-image img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

/* ======== New Section: Trusted Partners ======== */
.trusted-partners {
    padding: 80px 5%;
    background-color: var(--bg-white);
    text-align: center;
}

.partners-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    max-width: var(--container-width);
    margin: 40px auto 0 auto;
}

.partner-logo {
    background: var(--bg-white);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--border-light);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(20% - 24px);
    min-width: 140px;
}

.partner-logo:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.05);
}

.partner-logo img {
    max-width: 100%;
    height: auto;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    filter: grayscale(100%);
}

.partner-logo:hover img {
    opacity: 1;
    filter: grayscale(0%);
}

.hero-subtitle {
    max-width: 700px;
    /* Keeps the text from being too wide */
    margin: 0 auto;
    /* Centers the paragraph block itself */
}

/* ======== Page: Product Listing (products.html) ======== */
.plp-container {
    max-width: 90;
    margin: 0 ;
    padding: 30px;
}

.plp-header {
    margin-bottom: 40px;
    border-bottom: 1px solid var(--border-light);
    padding: 60px 5% 30px 40px;
}

.plp-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 10px;
}

.plp-sidebar {
    position: sticky;
    top: 80px;
    height: calc(100vh - 80px); /* Fill the vertical screen */
    background-color: var(--bg-white);
    border-right: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers the filter-group horizontally */
    padding: 60px 0; /* Vertical breathing room */
    width: 300px;
}

.filter-group {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-light);
}

.filter-group h3 {
    font-size: 1.1rem;
    color: var(--color-primary);
    margin-bottom: 15px;
}

.filter-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    color: var(--text-muted);
    font-size: 0.95rem;
    cursor: pointer;
    transition: color 0.2s;
}

.filter-label:hover {
    color: var(--color-primary);
}

.filter-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--color-accent);
    cursor: pointer;
}

.plp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    align-items: start;
}

.product-card.hidden {
    display: none;
}

.card-info-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(transparent, rgba(26, 37, 51, 0.9));
    color: var(--bg-white);
    transform: translateY(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.product-card:hover .card-hover-overlay .btn {
    transform: translateY(0);
    /* Move to center on hover */
}

.card-info-overlay h4 {
    font-size: 1.2rem;
    margin: 0;
}

/* ======== Page: Product Detail (product.html) ======== */
.pdp-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 40px 5%;
}

.breadcrumbs {
    margin-bottom: 30px;
    font-size: 0.9rem;
}

.breadcrumbs ol {
    list-style: none;
    display: flex;
    gap: 10px;
}

.breadcrumbs a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}

.breadcrumbs a::after {
    content: "/";
    margin-left: 10px;
    color: var(--text-light);
}

.breadcrumbs li[aria-current="page"] {
    color: var(--text-muted);
}

.pdp-top-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-bottom: 60px;
}

.main-image {
    width: 100%;
    height: 500px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-light);
    margin-bottom: 20px;
}

.main-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--bg-white);
}

.thumbnail-list {
    display: flex;
    gap: 15px;
}

.thumb {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--transition-standard);
}

.thumb.active-thumb,
.thumb:hover {
    border-color: var(--color-accent);
}

.pdp-badges {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
}

.badge-fda {
    background: var(--color-primary-light);
    color: var(--bg-white);
}

.badge-iso {
    background: var(--color-accent);
    color: var(--bg-white);
}

.pdp-title {
    font-size: 2.5rem;
    color: var(--color-primary);
    line-height: 1.2;
    margin-bottom: 10px;
}

.pdp-sku {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 25px;
}

.pdp-description {
    font-size: 1.1rem;
    color: var(--text-main);
    margin-bottom: 25px;
}

.pdp-highlights {
    list-style: none;
    margin-bottom: 40px;
}

.pdp-highlights li {
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--color-primary-light);
}

.pdp-tabs-section {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    overflow: hidden;
}

.tab-headers {
    display: flex;
    background: #f9f9f9;
    border-bottom: 1px solid var(--border-light);
}

.tab-btn {
    flex: 1;
    padding: 20px;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition-standard);
}

.tab-btn.active {
    background: var(--bg-white);
    color: var(--color-primary);
    border-top: 3px solid var(--color-accent);
}

.tab-content-container {
    padding: 40px;
}

.tech-table {
    width: 100%;
    border-collapse: collapse;
}

.tech-table th,
.tech-table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid var(--border-light);
}

.tech-table th {
    width: 30%;
    color: var(--color-primary);
}

.download-list {
    list-style: none;
}

.download-list li {
    margin-bottom: 15px;
}

.download-list a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}

.download-list a:hover {
    color: var(--color-accent);
}

/* ======== Page: Trust Center (trust-center.html) ======== */
.trust-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 5% 80px 5%;
}

.trust-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Centers the blocks (h1, p) */
    text-align: center;
    /* Centers the text lines inside the blocks */
    padding: 80px 20px;
}

.pillar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
    margin-bottom: 80px;
}

.pillar-card {
    background: var(--bg-white);
    padding: 30px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    transition: var(--transition-standard);
}

.pillar-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary-light);
    box-shadow: 0 8px 25px rgba(26, 37, 51, 0.08);
}

.pillar-icon {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: var(--color-accent);
}

.pillar-card h3 {
    color: var(--color-primary);
    margin-bottom: 15px;
    font-weight: 800;
}

.pillar-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.compliance-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    background: var(--color-primary-light);
    color: var(--bg-white);
    padding: 60px;
    border-radius: var(--radius-lg);
    margin-bottom: 80px;
}

.compliance-section .section-eyebrow {
    color: var(--color-accent);
}

.compliance-section h2 {
    font-size: 2.2rem;
    margin-bottom: 30px;
}

.compliance-list {
    list-style: none;
}

.compliance-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 20px;
    color: var(--text-light);
    font-size: 0.95rem;
}

.compliance-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-accent);
    font-weight: bold;
    font-size: 1.2rem;
}

.compliance-list strong {
    color: var(--bg-white);
}

.disclosure-banner {
    background: var(--bg-white);
    border-left: 5px solid var(--color-secondary);
    padding: 40px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.banner-text h3 {
    color: var(--color-primary);
    margin-bottom: 10px;
    font-size: 1.5rem;
}

.banner-text p {
    color: var(--text-muted);
    max-width: 600px;
}

/* ======== Footer & Modals ======== */
.main-footer {
    background-color: var(--bg-white);
    padding: 80px 5% 20px 5%;
    border-top: 1px solid #eee;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto 40px auto;
}

.footer-column.brand p {
    font-size: 0.9rem;
    color: #555;
    margin: 15px 0;
    max-width: 250px;
}

.social-icons {
    display: flex;
    gap: 10px;
}

.social-icons a {
    width: 36px;
    height: 36px;
    background-color: #f4f4f4;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    transition: background-color 0.3s, color 0.3s;
}

.social-icons a:hover {
    background-color: var(--color-primary);
    color: var(--bg-white);
}

.footer-column h3 {
    font-size: 1.1rem;
    font-weight: 800;
    color: #222;
    margin-bottom: 20px;
}

.footer-column ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-column a {
    text-decoration: none;
    color: #555;
    font-size: 0.95rem;
}

.footer-column a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.footer-bottom {
    border-top: 1px solid #eee;
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: #777;
    max-width: 1400px;
    margin: 0 auto;
}

.footer-bottom-links {
    display: flex;
    gap: 20px;
}

.footer-bottom-links a {
    text-decoration: none;
    color: #777;
}

.footer-bottom-links a:hover {
    color: #222;
}

.modal {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    padding: 0;
    width: 90%;
    max-width: 500px;
    margin: auto;
}

.modal::backdrop {
    background: rgba(26, 37, 51, 0.8);
    backdrop-filter: blur(4px);
}

.modal-content {
    padding: 40px;
    position: relative;
}

.form-group {
    margin-bottom: 20px;
    text-align: left;
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: inherit;
}

.btn-full {
    width: 100%;
    margin-top: 10px;
}

.btn-close {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-muted);
}

/* ======== Responsive Media Queries ======== */
@media (max-width: 992px) {
    .hero-title {
        font-size: 3.5rem;
    }

    .section-title {
        font-size: 2.2rem;
    }

    .featured-grid,
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .product-card {
        height: 450px;
    }

    .footer-column.brand {
        grid-column: 1 / -1;
    }

    .plp-layout {
        grid-template-columns: 1fr;
    }

    .plp-sidebar {
        position: relative;
        top: 0;
    }

    .compliance-section {
        grid-template-columns: 1fr;
    }

    .disclosure-banner {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .disclosure-banner button {
        width: 100%;
    }

    /* New Layout Overrides */
    .about-grid {
        grid-template-columns: 1fr;
    }

    .about-text {
        text-align: center;
    }

    .about-text .section-subtitle {
        margin: 0 auto !important;
    }
}

@media (max-width: 768px) {
    .main-header {
        display: grid;
        /* Force three equal columns so the middle one is perfectly centered */
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        padding: 25px 5%;
        /* Increased vertical padding */
        background-color: var(--bg-white);
        position: sticky;
        top: 0;
        z-index: 1000;
        border-bottom: 1px solid var(--border-light);
    }

    .hero-title {
        font-size: 3rem;
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
        padding: 0 20px;
    }

    .featured-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 15px;
    }

    .pdp-top-grid {
        grid-template-columns: 1fr;
    }

    .tab-headers {
        flex-direction: column;
    }

    /* Partner Logos Override */
    .partner-logo {
        width: calc(33.333% - 20px);
    }
}

@media (max-width: 576px) {
    .hero-title {
        font-size: 2.8rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-column {
        text-align: center;
    }

    .footer-column.brand p {
        margin: 15px auto;
    }

    .social-icons {
        justify-content: center;
    }

    .footer-column ul {
        align-items: center;
    }

    /* Partner Logos Override */
    .partner-logo {
        width: calc(50% - 15px);
    }
}

/* ===== POPUP (GLOBAL - IMPORTANT) ===== */
.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.6);

    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 9999;
}

.hidden {
    display: none;
}

.popup-content {
    background: white;
    padding: 40px;
    border-radius: 12px;
    text-align: center;
    width: 320px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.checkmark {
    font-size: 50px;
    color: green;
    margin-bottom: 10px;
}

.popup-content button {
    margin-top: 20px;
    padding: 12px 25px;
    font-size: 16px;
    font-weight: 600;

    background-color: #1a2533;
    color: white;

    border: none;
    border-radius: 8px;

    cursor: pointer;
    transition: 0.3s ease;
}

.popup-content button:hover {
    background-color: #2c3e50;
    transform: scale(1.05);
}

/* ===== ADMIN LOGIN PAGE ===== */

.login-body {
    background: linear-gradient(135deg, #1a2533, #2c3e50);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-container {
    background: white;
    padding: 40px;
    border-radius: 12px;
    width: 320px;
    text-align: center;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.login-container h2 {
    margin-bottom: 25px;
    color: #1a2533;
}

.login-container input {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;

    border: 1px solid #ddd;
    border-radius: 8px;

    font-size: 14px;
}

.login-container input:focus {
    outline: none;
    border-color: #d4af37;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

.login-container button {
    width: 100%;
    padding: 12px;

    background: #1a2533;
    color: white;

    border: none;
    border-radius: 8px;

    font-size: 16px;
    font-weight: 600;

    cursor: pointer;
    transition: 0.3s;
}

.login-container button:hover {
    background: #2c3e50;
    transform: translateY(-2px);
}

/* ===== PREMIUM LOGIN PAGE ===== */

.login-body {
    margin: 0;
    height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    /* 🔥 SAME STYLE AS YOUR WEBSITE */
    background: linear-gradient(rgba(26, 37, 51, 0.85), rgba(26, 37, 51, 0.9)),
        url('/static/meditech-facility.jpg');

    background-size: cover;
    background-position: center;
    font-family: 'Manrope', sans-serif;
}

.login-container {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);

    padding: 40px;
    border-radius: 16px;

    width: 350px;
    text-align: center;

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

.login-container h2 {
    margin-bottom: 25px;
    color: #1a2533;
    font-weight: 800;
}

.login-container input {
    width: 100%;
    padding: 14px;
    margin-bottom: 15px;

    border: 1px solid #ddd;
    border-radius: 10px;

    font-size: 14px;
    transition: 0.3s;
}

.login-container input:focus {
    outline: none;
    border-color: #d4af37;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

.login-container button {
    width: 100%;
    padding: 14px;

    background: #1a2533;
    color: white;

    border: none;
    border-radius: 10px;

    font-size: 16px;
    font-weight: 600;

    cursor: pointer;
    transition: 0.3s;
}

.login-container button:hover {
    background: #2c3e50;
    transform: translateY(-2px);
}

.admin-btn {
    background: var(--color-accent);
    color: white !important;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    transition: 0.3s;
}

.admin-btn:hover {
    background: var(--color-accent-hover);
}

.hero-buttons-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
    /* force single line */
    margin-top: 25px;
}

.hero-buttons-group .btn {
    white-space: nowrap;
    padding: 12px 18px;
    /* slightly smaller buttons */
    font-size: 0.9rem;
}

.product-row {
    display: flex;
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    margin-bottom: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
    min-height: 220px;
    height: auto
}

.brochure-top-btn {
    display: inline-block;
    background: #f59e0b;
    color: white;
    padding: 8px 14px;
    border-radius: 8px;
    font-weight: 600;
}

.product-row:hover {
    border-color: var(--color-accent);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transform: translateX(5px);
}

.product-row .row-image {
    width: 280px;
    min-width: 280px;
    background: #f9f9f9;
}

.product-row .row-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-row .row-content {
    flex: 1;
    padding: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-row .row-info h3 {
    font-size: 1.4rem;
    color: var(--color-primary);
    margin-bottom: 8px;
}

.product-row .row-sku {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-family: monospace;
    background: #f4f4f4;
    padding: 2px 8px;
    border-radius: 4px;
}

.product-row .row-specs {
    margin-top: 15px;
    list-style: none;
    display: flex;
    gap: 15px;
    font-size: 0.9rem;
    color: var(--text-main);
}

.product-row .row-specs li::before {
    content: "•";
    color: var(--color-accent);
    margin-right: 5px;
    font-weight: bold;
}

.product-row .row-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-left: 1px solid var(--border-light);
    padding-left: 30px;
}

/* Ensure the container changes layout when grid-mode is active */
#product-grid.grid-mode {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    padding-bottom: 80px;
}

/* Container for Horizontal Mode */
.plp-list-view {
    display: flex;
    flex-direction: column;
    /* This ensures cards stack 1, 2, 3... */
    gap: 20px;
    width: 100%;
}

/* Horizontal Card Structure */
.product-row {
    display: flex;
    width: 100%;
    min-height: 220px;
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.product-row:hover {
    border-color: var(--color-accent);
    transform: translateX(10px);
    /* Subtle slide for interaction */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* Image section fixed width in horizontal mode */
.product-row .row-image {
    width: 280px;
    min-width: 280px;
    position: relative;
}

.product-row .row-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Content section expands to fill space */
.product-row .row-content {
    flex: 1;
    padding: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Action buttons stay on the right */
.product-row .row-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 25px;
    border-left: 1px solid var(--border-light);
    min-width: 180px;
}

/* Reset height for grid cards so they aren't squashed */
.grid-mode .product-card {
    height: 450px;
    display: block;
    /* Override the 'flex' from product-row */
}

/* Ensure the image container takes full height in grid mode */
.grid-mode .row-image {
    width: 100%;
    height: 300px;
}

/* Adjust the content area for grid mode */
.grid-mode .row-content {
    display: block;
    padding: 15px;
}

.grid-mode .row-actions {
    border-left: none;
    padding-left: 0;
    flex-direction: row;
    margin-top: 15px;
}

/* ======== Responsive Media Queries ======== */
@media (max-width: 992px) {
    .hero-title {
        font-size: 3.5rem;
    }

    .section-title {
        font-size: 2.2rem;
    }

    .featured-grid,
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .product-card {
        height: 450px;
    }

    .footer-column.brand {
        grid-column: 1 / -1;
    }

    .plp-layout {
        grid-template-columns: 1fr;
    }

    .plp-sidebar {
        position: relative;
        top: 0;
    }

    .compliance-section {
        grid-template-columns: 1fr;
    }

    .disclosure-banner {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .disclosure-banner button {
        width: 100%;
    }

    /* New Layout Overrides */
    .about-grid {
        grid-template-columns: 1fr;
    }

    .about-text {
        text-align: center;
    }

    .about-text .section-subtitle {
        margin: 0 auto !important;
    }
}

@media (max-width: 768px) {
    .main-header {
        display: grid;
        /* Force three equal columns so the middle one is perfectly centered */
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        padding: 25px 5%;
        /* Increased vertical padding */
        background-color: var(--bg-white);
        position: sticky;
        top: 0;
        z-index: 1000;
        border-bottom: 1px solid var(--border-light);
    }

    .hero-title {
        font-size: 3rem;
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
        padding: 0 20px;
    }

    .featured-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 15px;
    }

    .pdp-top-grid {
        grid-template-columns: 1fr;
    }

    .tab-headers {
        flex-direction: column;
    }

    /* Partner Logos Override */
    .partner-logo {
        width: calc(33.333% - 20px);
    }
}

@media (max-width: 576px) {
    .hero-title {
        font-size: 2.8rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-column {
        text-align: center;
    }

    .footer-column.brand p {
        margin: 15px auto;
    }

    .social-icons {
        justify-content: center;
    }

    .footer-column ul {
        align-items: center;
    }

    /* Partner Logos Override */
    .partner-logo {
        width: calc(50% - 15px);
    }
}

#product-grid.grid-mode {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
}

#product-grid.grid-mode .product-row {
    flex-direction: column;
    height: auto;
}

#product-grid.grid-mode .row-image {
    width: 100%;
    height: 220px;
}

#product-grid.grid-mode .row-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

#product-grid.grid-mode .row-actions {
    flex-direction: row;
    border-left: none;
    padding-left: 0;
}

.btn-brochure {
    background: var(--color-accent);
    /* yellow theme */
    color: #000;
    padding: 14px 28px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 30px;
    display: inline-block;
    transition: all 0.3s ease;
}

.btn-brochure:hover {
    background: var(--color-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.socials a {
    margin-right: 10px;
}

.socials img,
.socials svg {
    transition: 0.3s;
}

.socials img:hover,
.socials svg:hover {
    transform: scale(1.2);
}

.address-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.address-link:hover {
    text-decoration: underline;
    color: #2e0bf5;
    /* your yellow theme */
}

/* Logo Image Styling */
.logo img {
    height: 50px; /* Adjust this height to fit your design */
    width: auto;  /* Maintains aspect ratio */
    display: block;
    transition: opacity 0.3s ease;
}

.logo:hover img {
    opacity: 0.8;
}

/* Ensure the logo link container aligns well in the grid */
.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}


/* ==========================================================================
   NEW ADDITIONS: Isolated About Us & OEM Partner Layouts
   ========================================================================== */

/* Hero Adjustment variant for clean presentation */
.about-hero {
    padding: 140px 0 80px 0;
    text-align: center;
    background: radial-gradient(circle at top right, var(--bg-body), #f0f2f5);
}

/* Genesis Split View */
.about-genesis-view {
    padding: 80px 5%;
    background-color: var(--bg-white);
}

.about-genesis-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    max-width: var(--container-width);
    margin: 0 auto;
    align-items: center;
}

.about-text-pane .cert-tag {
    display: inline-block;
    margin-top: 20px;
    padding: 6px 14px;
    background-color: var(--color-primary-light);
    color: white;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    letter-spacing: 0.5px;
}

.about-image-pane img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);
    transition: var(--transition-standard);
}

/* Operational Pillars (3-Column Grid) */
.pillars-section {
    padding: 100px 5%;
    background-color: var(--bg-body);
    text-align: center;
}

.pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: var(--container-width);
    margin: 50px auto 0 auto;
}

.pillar-item-card {
    background: var(--bg-white);
    padding: 40px 30px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01);
    text-align: left;
    transition: var(--transition-standard);
}

.pillar-item-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-accent);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.1);
}

.pillar-item-icon {
    font-size: 2rem;
    margin-bottom: 20px;
    display: block;
}

.pillar-item-card h3 {
    color: var(--color-primary);
    margin-bottom: 15px;
    font-size: 1.2rem;
    font-weight: 800;
}

/* Strategic Dynamic Data Banner */
.metrics-accent-banner {
    background: var(--color-primary);
    color: white;
    padding: 60px 5%;
    text-align: center;
}

.metrics-flex-wrap {
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: var(--container-width);
    margin: 0 auto;
    gap: 30px;
}

.metric-block-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.metric-number-huge {
    font-size: 3rem;
    font-weight: 800;
    color: var(--color-accent);
    line-height: 1.1;
    margin-bottom: 5px;
}

.metric-label-sub {
    font-size: 0.95rem;
    color: var(--text-light);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Full Width Vision Statement Block */
.vision-statement-block {
    background-color: var(--color-primary-light);
    color: white;
    padding: 100px 10%;
    text-align: center;
}

.vision-statement-block blockquote {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.6;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}

/* Responsive Structural Overrides for About Layout */
@media (max-width: 992px) {
    .about-genesis-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .pillars-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .metrics-flex-wrap {
        flex-direction: column;
        gap: 40px;
    }
    
    .vision-statement-block blockquote {
        font-size: 1.3rem;
    }
}



/* ==========================================================================
   UPDATED ADDITIONS: Focused Elite Exclusive OEM Showcase
   ========================================================================== */

.partners-showcase-section {
    padding: 100px 5%;
    background-color: var(--bg-white);
    text-align: center;
}

.partner-tier-container {
    max-width: var(--container-width);
    margin: 0 auto;
}

.partner-tier-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 40px;
    position: relative;
    display: inline-block;
}

/* Accent underline beneath the exclusive title */
.partner-tier-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 25%;
    width: 50%;
    height: 3px;
    background-color: var(--color-accent);
}

/* Large grid focused purely on prominent exclusive manufacturing partnerships */
.exclusive-oem-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 10px;
}

.exclusive-oem-card {
    background: var(--bg-body);
    padding: 30px 60px;
    border-radius: var(--radius-lg);
    border: 2px solid var(--color-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 280px;
    height: 120px;
    transition: var(--transition-standard);
}

.exclusive-oem-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(26, 37, 51, 0.08);
    border-color: var(--color-accent);
}

/* Premium clean logo color transitions */
.partner-img-fluid {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.75;
    transition: var(--transition-standard);
}

.exclusive-oem-card:hover .partner-img-fluid {
    filter: grayscale(0%);
    opacity: 1;
}

/* Responsive alignment for mobile screens */
@media (max-width: 768px) {
    .exclusive-oem-grid {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
}
/* Force header vector search paths to inherit the corporate primary tone */
#search-icon svg {
    stroke: var(--color-primary) !important;
    display: inline-block;
    vertical-align: middle;
}

/* Perfect horizontal alignment for navigation header icons */
.nav-icons {
    display: flex;
    align-items: center;
    gap: 20px;
}

#search-icon, #cart-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    height: 22px; /* Matches the exact height of your SVG assets */
}

/* Container layout settings */
.catalog-controls-container {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 10px;
    position: relative;
}

.filter-dropdown-wrapper {
    position: relative; /* Keeps the dropdown box locked to the button button axis */
}

/* Upgraded button style replacing the static badge */
.filter-capsule-btn {
    background-color: #fdd835 !important; /* Golden mockup fill */
    color: #000000 !important;
    padding: 6px 22px;
    font-size: 0.85rem;
    font-weight: 700;
    border: none;
    border-radius: 50px;
    height: 32px;
    text-transform: lowercase;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.filter-capsule-btn:hover {
    transform: scale(1.03);
}

/* The Yellow Dropdown Box Matching your image mockup */
.dropdown-panel {
    position: absolute;
    top: 42px; /* Placed exactly under the trigger chip */
    left: 0;
    background-color: #fdd835 !important; /* Solid matching layout fill */
    border-radius: 20px;
    padding: 25px 30px;
    width: 320px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    z-index: 99;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* The little triangle speech bubble arrow snippet */
.dropdown-arrow {
    position: absolute;
    top: -8px;
    left: 25px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #fdd835;
}

/* Filter checkboxes alignment interior wrapper */
.filter-group-inner {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.filter-group-inner .filter-label {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #000000 !important; /* Bold visibility dark contrast formatting text */
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: lowercase;
    cursor: pointer;
}

.filter-group-inner .filter-checkbox {
    width: 22px;
    height: 22px;
    accent-color: #000000; /* Dark inner checkbox contrast check markup matching */
    cursor: pointer;
}

/* Toggle state handler class mapping rules */
.dropdown-panel.hidden {
    display: none !important;
    opacity: 0;
    pointer-events: none;
}


/* ==========================================================================
   ✨ ENHANCED STYLES — Animations, Mobile Nav, New Components
   ========================================================================== */

/* ===== SCROLL PROGRESS BAR ===== */
.scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--color-accent), var(--color-secondary));
    z-index: 9999;
    transition: width 0.1s linear;
    border-radius: 0 2px 2px 0;
}

/* ===== MOBILE HAMBURGER ===== */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: background 0.2s;
}
.hamburger:hover { background: #f0f0f0; }
.hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-primary);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: center;
}
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== MOBILE NAV DRAWER ===== */
.mobile-nav-drawer {
    display: none;
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-light);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    z-index: 999;
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.mobile-nav-drawer.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
}
.mobile-nav-drawer ul {
    list-style: none;
    padding: 12px 0;
}
.mobile-nav-drawer ul li a {
    display: block;
    padding: 14px 28px;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    font-size: 1rem;
    border-left: 3px solid transparent;
    transition: border-color 0.2s, background 0.2s;
}
.mobile-nav-drawer ul li a:hover {
    border-left-color: var(--color-accent);
    background: #fafafa;
}

/* ===== STICKY HEADER SCROLL EFFECT ===== */
.main-header.scrolled {
    box-shadow: 0 2px 20px rgba(0,0,0,0.08);
    padding: 14px 5%;
    transition: padding 0.3s ease, box-shadow 0.3s ease;
}

/* ===== HERO SECTION — ENHANCED ===== */
.hero-section {
    position: relative;
    min-height: 92vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 120px 20px 80px;
    overflow: hidden;
    background: radial-gradient(ellipse at 20% 50%, rgba(212,175,55,0.07) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 20%, rgba(26,37,51,0.04) 0%, transparent 60%),
                var(--bg-body);
}

.hero-canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* Ambient floating orbs */
.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
    animation: orb-drift 12s ease-in-out infinite alternate;
}
.hero-orb-1 {
    width: 400px; height: 400px;
    background: rgba(212,175,55,0.08);
    top: -100px; left: -100px;
    animation-duration: 14s;
}
.hero-orb-2 {
    width: 300px; height: 300px;
    background: rgba(26,37,51,0.05);
    top: 40%; right: -80px;
    animation-duration: 10s;
    animation-delay: -3s;
}
.hero-orb-3 {
    width: 250px; height: 250px;
    background: rgba(243,156,18,0.06);
    bottom: 0; left: 30%;
    animation-duration: 16s;
    animation-delay: -6s;
}
@keyframes orb-drift {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(30px, 20px) scale(1.08); }
    100% { transform: translate(-20px, 40px) scale(0.95); }
}

.hero-content {
    position: relative;
    z-index: 1;
    animation: hero-enter 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes hero-enter {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Badge with live pulse dot */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f4f4f4;
    color: #777;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 28px;
    border: 1px solid rgba(212,175,55,0.2);
}
.badge-pulse {
    width: 8px; height: 8px;
    background: #27ae60;
    border-radius: 50%;
    display: inline-block;
    animation: pulse-ring 1.8s ease-out infinite;
}
@keyframes pulse-ring {
    0%   { box-shadow: 0 0 0 0 rgba(39,174,96,0.5); }
    70%  { box-shadow: 0 0 0 8px rgba(39,174,96,0); }
    100% { box-shadow: 0 0 0 0 rgba(39,174,96,0); }
}

/* Hero title typed highlight */
.hero-title-highlight {
    color: var(--color-accent);
    position: relative;
    display: inline-block;
    font-weight: 800;
}
.hero-title-highlight::after {
    content: '|';
    animation: blink-cursor 0.8s step-end infinite;
    opacity: 0;
    color: var(--color-accent);
}
.hero-title-highlight.typing-done::after { display: none; }

@keyframes blink-cursor {
    0%, 100% { opacity: 0; }
    50%       { opacity: 1; }
}

/* Hero CTA button with shimmer */
.btn-hero {
    position: relative;
    overflow: hidden;
}
.btn-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.18) 50%, transparent 60%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}
.btn-hero:hover::after { transform: translateX(100%); }

.btn-arrow {
    display: inline-block;
    transition: transform 0.3s ease;
    margin-left: 4px;
}
.btn-hero:hover .btn-arrow { transform: translateX(4px); }

.btn-hero-outline {
    border: 2px solid var(--color-primary);
    background: transparent;
    color: var(--color-primary);
}
.btn-hero-outline:hover {
    background: var(--color-primary);
    color: white;
}

/* Hero trust strip */
.hero-trust-strip {
    display: flex;
    gap: 24px;
    justify-content: center;
    margin-top: 32px;
    flex-wrap: wrap;
}
.hero-trust-strip span {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.3px;
}
.hero-trust-strip span::before { color: #27ae60; margin-right: 4px; }

/* Scroll hint mouse */
.hero-scroll-hint {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    animation: fade-bounce 2.5s ease-in-out infinite;
}
.scroll-mouse {
    width: 26px; height: 40px;
    border: 2px solid #bbb;
    border-radius: 13px;
    position: relative;
}
.scroll-mouse::after {
    content: '';
    width: 4px; height: 8px;
    background: var(--color-accent);
    border-radius: 2px;
    position: absolute;
    top: 6px; left: 50%;
    transform: translateX(-50%);
    animation: scroll-dot 2s ease-in-out infinite;
}
@keyframes scroll-dot {
    0%   { top: 6px; opacity: 1; }
    80%  { top: 20px; opacity: 0; }
    100% { top: 6px; opacity: 0; }
}
@keyframes fade-bounce {
    0%, 100% { opacity: 0.5; transform: translateX(-50%) translateY(0); }
    50%       { opacity: 1;   transform: translateX(-50%) translateY(6px); }
}

/* ===== STATS BAR — COUNTER ANIMATION ===== */
.stats-bar {
    margin-top: -60px !important;
}
.stats-grid {
    align-items: center;
}
.stat-divider {
    width: 1px;
    height: 50px;
    background: var(--border-light);
}
.counter-number {
    font-size: 2.5rem !important;
    font-weight: 800;
    color: var(--color-accent);
    display: block;
    font-variant-numeric: tabular-nums;
    transition: color 0.3s;
}
.stat-item:hover .counter-number { color: var(--color-secondary); }
.stat-item span {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===== STAGGERED CARD REVEAL ===== */
.fade-in[style*="--card-delay"] {
    transition-delay: var(--card-delay);
}
.product-card.fade-in.is-visible {
    transition: opacity 0.8s ease-out var(--card-delay, 0s),
                transform 0.8s ease-out var(--card-delay, 0s);
}

/* ===== ABOUT IMAGE BADGE ===== */
.about-image {
    position: relative;
}
.about-image-badge {
    position: absolute;
    bottom: 24px;
    left: 24px;
    background: var(--color-primary);
    color: white;
    padding: 12px 20px;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    box-shadow: 0 8px 20px rgba(26,37,51,0.3);
    animation: badge-float 3s ease-in-out infinite;
}
.about-image-badge .badge-icon { font-size: 1.2rem; }
@keyframes badge-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-6px); }
}

/* ===== CATEGORY STRIP ===== */
.category-strip {
    display: flex;
    justify-content: center;
    gap: 0;
    background: var(--color-primary);
    padding: 0;
    overflow: hidden;
}
.cat-strip-item {
    flex: 1;
    max-width: 300px;
    text-align: center;
    padding: 40px 20px;
    color: white;
    text-decoration: none;
    border-right: 1px solid rgba(255,255,255,0.08);
    transition: background 0.3s ease, transform 0.3s ease;
    position: relative;
    overflow: hidden;
}
.cat-strip-item:last-child { border-right: none; }
.cat-strip-item::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    height: 3px;
    background: var(--color-accent);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}
.cat-strip-item:hover { background: rgba(255,255,255,0.06); }
.cat-strip-item:hover::before { transform: scaleX(1); }
.cat-strip-icon {
    font-size: 2.4rem;
    display: block;
    margin-bottom: 12px;
    transition: transform 0.3s ease;
}
.cat-strip-item:hover .cat-strip-icon { transform: scale(1.15) translateY(-4px); }
.cat-strip-item h3 {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 4px;
}
.cat-strip-item p {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
    font-weight: 600;
}

/* ===== ENHANCED PRODUCT CARD HOVER ===== */
.product-card {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.35s ease !important;
    will-change: transform;
}
.product-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 16px 40px rgba(26,37,51,0.12) !important;
}
.product-card .card-hover-overlay {
    background: linear-gradient(to top, rgba(26,37,51,0.7) 0%, rgba(26,37,51,0.15) 100%);
}
.product-card:hover .card-hover-overlay .btn {
    transform: translateY(0) !important;
}

/* ===== ENHANCED PARTNER LOGOS ===== */
.partner-logo {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s !important;
}
.partner-logo:hover {
    border-color: var(--color-accent) !important;
    box-shadow: 0 8px 20px rgba(212,175,55,0.12) !important;
}

/* ===== SCROLL-TO-TOP BUTTON ===== */
.scroll-top-btn {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 46px; height: 46px;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 1.4rem;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(26,37,51,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s;
    pointer-events: none;
    z-index: 900;
}
.scroll-top-btn.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}
.scroll-top-btn:hover { background: var(--color-accent); }

/* ===== TOAST NOTIFICATIONS ===== */
.toast-container {
    position: fixed;
    bottom: 90px;
    right: 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9000;
}
.toast {
    background: var(--color-primary);
    color: white;
    padding: 14px 20px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 240px;
    animation: toast-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
    border-left: 4px solid var(--color-accent);
}
.toast.toast-success { border-left-color: #27ae60; }
.toast.toast-error   { border-left-color: #e74c3c; }
.toast-icon { font-size: 1.1rem; }
@keyframes toast-in {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes toast-out {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(40px); }
}
.toast.removing { animation: toast-out 0.3s ease forwards; }

/* ===== SUCCESS POPUP ENHANCEMENT ===== */
.popup {
    position: fixed;
    inset: 0;
    background: rgba(26,37,51,0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.popup.hidden { display: none; }
.popup-content {
    background: white;
    padding: 50px 40px;
    border-radius: var(--radius-lg);
    text-align: center;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 30px 60px rgba(0,0,0,0.2);
    animation: popup-scale 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes popup-scale {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}
.checkmark {
    width: 64px; height: 64px;
    background: #27ae60;
    color: white;
    border-radius: 50%;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    animation: checkmark-pop 0.5s 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes checkmark-pop {
    from { transform: scale(0); }
    to   { transform: scale(1); }
}

/* ===== ENHANCED MODAL ANIMATION ===== */
.modal {
    animation: modal-open 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes modal-open {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ===== FORM INPUT FOCUS STATES ===== */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px rgba(212,175,55,0.12);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: inherit;
    min-height: 90px;
    resize: vertical;
}

/* ===== NAV ACTIVE LINK INDICATOR ===== */
.nav-link.active {
    color: var(--color-accent) !important;
    position: relative;
}
.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -4px; left: 0;
    width: 100%; height: 2px;
    background: var(--color-accent);
    border-radius: 1px;
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    .hero-orb { animation: none !important; }
    .badge-float { animation: none !important; }
}

/* ===== MOBILE RESPONSIVE ENHANCEMENTS ===== */
@media (max-width: 768px) {
    .main-nav { display: none !important; }
    .hamburger { display: flex !important; }
    .mobile-nav-drawer { display: block; }

    .hero-section { min-height: 80vh; padding: 100px 20px 60px; }
    .hero-title { font-size: 2.4rem; }
    .hero-trust-strip { gap: 12px; }
    .hero-trust-strip span { font-size: 0.75rem; }

    .stats-bar { margin-top: 0 !important; }
    .stats-grid { flex-direction: column; gap: 24px; }
    .stat-divider { width: 60px; height: 1px; }

    .category-strip { flex-direction: column; }
    .cat-strip-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); max-width: 100%; }

    .featured-grid { grid-template-columns: 1fr; }

    .about-image-badge { display: none; }

    .scroll-top-btn { bottom: 20px; right: 20px; }
    .toast-container { right: 16px; bottom: 70px; }

    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-column.brand { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
    .hero-title { font-size: 2rem; }
    .hero-buttons { flex-direction: column; width: 100%; padding: 0 10px; }
    .hero-buttons .btn { width: 100%; min-width: auto; }
    .footer-grid { grid-template-columns: 1fr; }
    .section-title { font-size: 1.8rem; }
}