:root {
    /* Light Mode (Ocean Blue Theme) */
    --bg-color: #f0f7fa;
    --text-color: #2c3e50;
    --heading-color: #1a5276; /* Deep Ocean Blue */
    --card-bg: rgba(255, 255, 255, 0.9);
    --card-border: rgba(26, 82, 118, 0.12);
    --card-shadow: rgba(26, 82, 118, 0.08);
    --primary-accent: #2980b9; /* Ocean Blue */
    --secondary-accent: #5dade2; /* Light Sky Blue */
    --logo-main-color: #1a5276;
    --logo-accent-color: var(--primary-accent);
    --hero-gradient-start: #5dade2; /* Sky Blue */
    --hero-gradient-end: #2980b9; /* Ocean Blue */

    /* Form specific colors (light mode) */
    --form-label-color: var(--text-color);
    --form-input-bg: #ffffff;
    --form-input-border: #aed6f1;
    --form-input-color: var(--text-color);
    --form-required-color: #e74c3c; /* Red */

    /* Shared properties */
    --border-radius-lg: 20px;
    --border-radius-md: 12px;
    --border-radius-sm: 8px;
}

body.dark {
    /* Dark Mode (Deep Ocean Theme) */
    --bg-color: #1a2b3c; /* Dark Blue-Grey */
    --text-color: #e0e0e0;
    --heading-color: #ffffff;
    --card-bg: rgba(26, 43, 60, 0.8);
    --card-border: rgba(255, 255, 255, 0.1);
    --card-shadow: rgba(0, 0, 0, 0.25);
    --primary-accent: #4db6ac; /* Lighter Teal */
    --secondary-accent: #00796b; /* Teal */
    --logo-main-color: #ffffff;
    --logo-accent-color: var(--primary-accent);
    --hero-gradient-start: #004080; /* Deeper Blue */
    --hero-gradient-end: #1a2b3c; /* Dark Blue-Grey */

    /* Form specific colors (dark mode) */
    --form-label-color: rgba(255, 255, 255, 0.8);
    --form-input-bg: #2f3e4e;
    --form-input-border: #4a5a6a;
    --form-input-color: var(--text-color);
    --form-required-color: #f0a39c; /* Lighter Red */
}


@keyframes gradient-animation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out;
}

header {
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 15px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(var(--card-bg-rgb, 255, 255, 255), 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--card-border);
    transition: background-color 0.4s ease-in-out, border-color 0.4s ease-in-out;
}

body.dark header { --card-bg-rgb: 26, 43, 60; }


.logo a {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 1.6rem;
    color: var(--logo-main-color);
    text-decoration: none;
    display: flex;
    align-items: center;
}
.logo a:hover { text-decoration: none; }

.logo a span {
    font-weight: 700;
    color: var(--logo-accent-color);
}

.logo-icon {
    width: 28px;
    height: 28px;
    margin-right: 8px;
    background-color: var(--logo-accent-color);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm0 2a8 8 0 110 16 8 8 0 010-16zm-1 3v4.062L7.382 10.95A4 4 0 0012 16a4 4 0 004.618-5.05L13 9.062V7h-2z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm0 2a8 8 0 110 16 8 8 0 010-16zm-1 3v4.062L7.382 10.95A4 4 0 0012 16a4 4 0 004.618-5.05L13 9.062V7h-2z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: background-color 0.4s ease-in-out;
    animation: pulse 2s infinite ease-in-out;
}


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

nav a {
    margin: 0 18px;
    text-decoration: none;
    color: var(--text-color);
    font-weight: 600;
    padding-bottom: 8px;
    border-bottom: 2px solid transparent;
    transition: color 0.3s, border-bottom-color 0.3s;
}

nav a:hover,
nav a.active {
    color: var(--primary-accent);
    border-bottom-color: var(--primary-accent);
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 20px;
}

#theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    padding: 0;
    color: var(--text-color);
    position: relative;
    width: 24px;
    height: 24px;
    transition: color 0.4s ease-in-out;
}
#theme-toggle .icon-dark { display: none; }
body.dark #theme-toggle .icon-dark { display: block; }
body.dark #theme-toggle .icon-light { display: none; }


.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    overflow: hidden;
}

.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: -2;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(26, 82, 118, 0.7), rgba(41, 128, 185, 0.6));
    z-index: -1;
}

.hero-content {
    position: relative;
    z-index: 1;
    padding: 120px 5% 150px;
    max-width: 900px;
}

.hero h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 4.8rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: white;
    text-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.hero p {
    font-size: 1.5rem;
    max-width: 800px;
    margin: 0 auto 30px;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

section {
    padding: 120px 5%;
}

#about {
    background: var(--bg-color);
}

.about-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 80px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.about-text h3 {
    margin-top: 40px;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 30px;
    text-align: left;
}
.value-item {
    padding: 10px;
}

.about-quote {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    color: var(--heading-color);
    line-height: 1.4;
    font-style: italic;
    font-weight: 700;
    border-left: 4px solid var(--primary-accent);
    padding-left: 30px;
}


h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 3.2rem;
    color: var(--heading-color);
    text-align: center;
    margin-bottom: 80px;
}

h3 {
    font-family: 'Montserrat', sans-serif;
    color: var(--heading-color);
    font-size: 1.6rem;
    margin-bottom: 15px;
}

.brand-logo {
    width: 100%;
    max-width: 150px;
    height: auto;
    margin: 0 auto 15px;
    display: block;
}

/* Bento Grids */
.bento-grid, .bento-grid-brands {
    display: grid;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.bento-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(200px, auto);
}

.bento-grid-brands {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}


.bento-item {
    background: var(--card-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius-lg);
    padding: 35px;
    box-shadow: 0 8px 30px var(--card-shadow);
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, background-color 0.4s ease-in-out, border-color 0.4s ease-in-out;
    text-align: center; /* Default for brand items */
    opacity: 0; /* For staggered animation */
    transform: translateY(20px); /* For staggered animation */
}

.bento-item.appear {
    opacity: 1;
    transform: translateY(0);
}

.bento-grid .bento-item { text-align: left; } /* Override for focus items */

.bento-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px var(--card-shadow);
}

.bento-grid .bento-item.wide { grid-column: span 2; }
.bento-grid .bento-item.tall { grid-row: span 2; }

/* Staggered animation delays */
.bento-grid-brands .bento-item-1, #insights .bento-item-1 { transition-delay: 0.05s; }
.bento-grid-brands .bento-item-2, #insights .bento-item-2 { transition-delay: 0.1s; }
.bento-grid-brands .bento-item-3, #insights .bento-item-3 { transition-delay: 0.15s; }
.bento-grid-brands .bento-item-4, #insights .bento-item-4 { transition-delay: 0.2s; } /* Added for new brand */

.bento-grid .bento-item-1 { transition-delay: 0.05s; }
.bento-grid .bento-item-2 { transition-delay: 0.1s; }
.bento-grid .bento-item-3 { transition-delay: 0.15s; }
.bento-grid .bento-item-4 { transition-delay: 0.2s; }


.capability-icon {
    height: 55px;
    width: 55px;
    margin-bottom: 25px;
    background-color: var(--primary-accent);
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-position: center;
    -webkit-mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    transition: background-color 0.4s ease-in-out;
}

#icon-sustainable { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 4c-4.22 2.1-7.42 2.1-11.22 0M10.78 15.3A2.08 2.08 0 0013 14.8a2.6 2.6 0 002-2.5c0-1.4-1.2-2.5-2.6-2.5S10 11.4 10 12.8c0 .8.4 1.5.9 2M12 21.8c-5.52 0-10-4.48-10-10 0-4.24 2.62-7.86 6.36-9.28'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 4c-4.22 2.1-7.42 2.1-11.22 0M10.78 15.3A2.08 2.08 0 0013 14.8a2.6 2.6 0 002-2.5c0-1.4-1.2-2.5-2.6-2.5S10 11.4 10 12.8c0 .8.4 1.5.9 2M12 21.8c-5.52 0-10-4.48-10-10 0-4.24 2.62-7.86 6.36-9.28'/%3E%3C/svg%3E");}
#icon-growth { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M18 8l-5.1 5.2-2.8-2.7L7 14.3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M18 8l-5.1 5.2-2.8-2.7L7 14.3'/%3E%3C/svg%3E");}
#icon-founder { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2'/%3E%3Ccircle cx='8.5' cy='7.5' r='4'/%3E%3Cpath d='M18 17l3 3 3-3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2'/%3E%3Ccircle cx='8.5' cy='7.5' r='4'/%3E%3Cpath d='M18 17l3 3 3-3'/%3E%3C/svg%3E");}
#icon-innovation { -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 19C10 19.5304 10.2107 20.0391 10.5858 20.4142C10.9609 20.7893 11.4696 21 12 21C12.5304 21 13.0391 20.7893 13.4142 20.4142C13.7893 20.0391 14 19.5304 14 19H10ZM12 2C10.535 2 9.091 2.435 7.857 3.257C6.623 4.079 5.642 5.257 5 6.667C4.358 8.077 4.107 9.667 4.276 11.23C4.445 12.793 5.028 14.27 5.96 15.5C6.892 16.73 8.14 17.65 9.58 18.16C11.02 18.67 12.6 18.75 14.1 18.39C15.6 18.03 16.96 17.25 18 16.16C19.04 15.07 19.76 13.73 20.09 12.25C20.42 10.77 20.34 9.21 19.87 7.77C19.4 6.33 18.55 5.07 17.4 4.1C16.25 3.13 14.85 2.5 13.35 2.25C12.89 2.18 12.44 2.12 12 2ZM12 4C13.0609 4 14.0783 4.21071 15.0213 4.61421C15.9643 5.01771 16.8199 5.60931 17.5251 6.31446C18.2303 7.01961 18.8219 7.87521 19.2254 8.81822C19.6289 9.76123 19.8396 10.7787 19.8396 11.84C19.8396 12.9013 19.6289 13.9188 19.2254 14.8618C18.8219 15.8048 18.2303 16.6604 17.5251 17.3655C16.8199 18.0707 15.9643 18.6623 15.0213 19.0658C14.0783 19.4693 13.0609 19.68 12 19.68C10.9391 19.68 9.92172 19.4693 8.97872 19.0658C8.03571 18.6623 7.18011 18.0707 6.47496 17.3655C5.76981 16.6604 5.17821 15.8048 4.77471 14.8618C4.37121 13.9188 4.1605 12.9013 4.1605 11.84C4.1605 10.7787 4.37121 9.76123 4.77471 8.81822C5.17821 7.87521 5.76981 7.01961 6.47496 6.31446C7.18011 5.60931 8.03571 5.01771 8.97872 4.61421C9.92172 4.21071 10.9391 4 12 4Z' fill='%23000000'/%3E%3C/svg%3E");}


.footer {
    background: #1e1e1e;
    color: #e0e0e0;
    padding: 80px 5% 40px;
    text-align: center;
}

.card-action {
    margin-top: 20px;
}

/* Button Styles */
.btn {
    display: inline-block;
    padding: 14px 32px;
    background: var(--primary-accent);
    color: white;
    text-decoration: none;
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    font-size: 1rem;
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
    border: none;
    cursor: pointer;
}
.btn:hover {
    background: var(--secondary-accent);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(41, 128, 185, 0.3);
}
.btn:active {
    transform: translateY(0);
}

/* Hero button styling override */
.hero .btn {
    background: white;
    color: var(--primary-accent);
    font-size: 1.1rem;
    padding: 16px 40px;
}
.hero .btn:hover {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

/* Section description text */
.section-description {
    font-size: 1.15rem;
    max-width: 700px;
    margin: -40px auto 60px;
    color: var(--text-color);
    opacity: 0.85;
}

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

/* Scroll/Sticky Actions */
.sticky-actions {
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sticky-cta { font-size: 0.9rem; }
#scrollTopBtn {
    border: none;
    outline: none;
    background-color: var(--primary-accent);
    color: white;
    cursor: pointer;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    font-size: 1.2rem;
    transition: background-color 0.3s, transform 0.3s;
    display: none; /* Initially hidden */
}
#scrollTopBtn:hover {
    background-color: var(--secondary-accent);
    transform: scale(1.1);
}

/* Form Styles */
#contact-form { max-width: 600px; margin: 30px auto; text-align: left; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 0.9rem; color: var(--text-color); }
body.dark .form-group label { color: rgba(255,255,255,0.8); }
.form-group label .required { color: #e74c3c; }
.form-group input, .form-group textarea { width: 100%; padding: 15px; border-radius: 8px; border: 1px solid var(--card-border); background: var(--card-bg); color: var(--text-color); font-family: 'Inter', sans-serif; font-size: 1rem; box-sizing: border-box; transition: box-shadow 0.3s, border-color 0.3s; }
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--primary-accent); box-shadow: 0 0 0 3px rgba(41, 128, 185, 0.3); }
body.dark .form-group input:focus, body.dark .form-group textarea:focus { box-shadow: 0 0 0 3px rgba(93, 173, 226, 0.3); }


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

/* Media Queries */
/* Skip Link for Accessibility */
.skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-accent);
    color: white;
    padding: 12px 24px;
    border-radius: var(--border-radius-sm);
    z-index: 10000;
    transition: top 0.3s;
    text-decoration: none;
    font-weight: 600;
}
.skip-link:focus {
    top: 10px;
}

/* Brand Logo SVG Styling */
.brand-logo-svg {
    width: 100px;
    height: 100px;
    margin: 0 auto 20px;
}
.brand-logo-svg svg {
    width: 100%;
    height: 100%;
}

/* Coming Soon Cards */
.coming-soon-card {
    position: relative;
    opacity: 0.85;
}
.coming-soon-card .brand-logo-svg {
    filter: grayscale(30%);
}
.coming-soon-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: linear-gradient(135deg, var(--primary-accent), var(--secondary-accent));
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.btn-disabled {
    background: #b0bec5;
    cursor: default;
    opacity: 0.8;
}
.btn-disabled:hover {
    background: #b0bec5;
    transform: none;
    box-shadow: none;
}
body.dark .btn-disabled {
    background: #546e7a;
}
.btn-highlight {
    background: var(--primary-accent);
    color: white;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
}

.hamburger-line {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--text-color);
    border-radius: 3px;
    transition: all 0.3s ease;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}
.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
}
.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile Navigation Overlay */
.mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 998;
}
.mobile-nav-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Form Improvements */
.form-group select {
    width: 100%;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    color: var(--text-color);
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    box-sizing: border-box;
    cursor: pointer;
    transition: box-shadow 0.3s, border-color 0.3s;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
}
.form-group select:focus {
    outline: none;
    border-color: var(--primary-accent);
    box-shadow: 0 0 0 3px rgba(41, 128, 185, 0.3);
}

.optional {
    font-weight: 400;
    color: var(--text-color);
    opacity: 0.6;
    font-size: 0.85em;
}

.error-message {
    display: block;
    color: #e74c3c;
    font-size: 0.85rem;
    margin-top: 5px;
    min-height: 20px;
}
body.dark .error-message {
    color: #f0a39c;
}

.form-group input.error,
.form-group textarea.error {
    border-color: #e74c3c;
}
body.dark .form-group input.error,
body.dark .form-group textarea.error {
    border-color: #f0a39c;
}

.form-group input.success,
.form-group textarea.success {
    border-color: #27ae60;
}

/* Form Status Messages */
.form-status {
    padding: 15px;
    border-radius: var(--border-radius-sm);
    margin-bottom: 20px;
    display: none;
}
.form-status.success {
    display: block;
    background: rgba(39, 174, 96, 0.15);
    border: 1px solid #27ae60;
    color: #27ae60;
}
.form-status.error {
    display: block;
    background: rgba(231, 76, 60, 0.15);
    border: 1px solid #e74c3c;
    color: #e74c3c;
}
body.dark .form-status.success {
    background: rgba(39, 174, 96, 0.2);
    color: #5dde8e;
}
body.dark .form-status.error {
    background: rgba(231, 76, 60, 0.2);
    color: #f0a39c;
}

/* Submit Button States */
.form-btn {
    background: var(--primary-accent);
    color: white;
    border: none;
    padding: 15px 40px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    width: 100%;
    position: relative;
}
.form-btn:hover {
    background: var(--secondary-accent);
    transform: translateY(-2px);
}
.form-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}
.form-btn .btn-loading {
    display: none;
}
.form-btn.loading .btn-text {
    display: none;
}
.form-btn.loading .btn-loading {
    display: inline;
}

/* Contact Details */
.contact-details {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.contact-details p {
    margin: 5px 0;
}
.contact-details a {
    color: var(--primary-accent);
    text-decoration: none;
}
.contact-details a:hover {
    text-decoration: underline;
}

/* Social Media Icons */
.social-media {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 30px 0;
}
.social-media a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    transition: background 0.3s, transform 0.3s;
}
.social-media a:hover {
    background: var(--primary-accent);
    transform: translateY(-3px);
}
.social-icon {
    width: 20px;
    height: 20px;
    color: #e0e0e0;
}

/* Footer Bottom */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 20px;
}
.footer-links {
    display: flex;
    gap: 20px;
}
.footer-links a {
    color: #aaa;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s;
}
.footer-links a:hover {
    color: var(--primary-accent);
}

/* Scroll Top Button SVG */
#scrollTopBtn svg {
    width: 24px;
    height: 24px;
}

/* Media Queries */
@media (max-width: 900px) {
    .bento-grid { grid-template-columns: 1fr; }
    .bento-item.wide, .bento-item.tall { grid-column: span 1; grid-row: span 1; }
    .about-container { grid-template-columns: 1fr; text-align: center; }
    .about-quote { border-left: none; border-top: 4px solid var(--primary-accent); padding-left: 0; padding-top: 20px; }
    .footer-bottom { justify-content: center; text-align: center; }
}

@media (max-width: 768px) {
    .hero { min-height: 80vh; }
    .hero h1 { font-size: 3rem; }
    .hero p { font-size: 1.2rem; }
    .hero-content { padding: 80px 5% 100px; }

    /* Mobile Menu */
    .mobile-menu-toggle {
        display: flex;
    }

    nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background: var(--bg-color);
        flex-direction: column;
        padding: 80px 30px 30px;
        box-shadow: -5px 0 30px rgba(0, 0, 0, 0.2);
        transition: right 0.3s ease;
        z-index: 999;
    }
    nav.active {
        right: 0;
    }
    nav a {
        margin: 15px 0;
        font-size: 1.2rem;
        padding: 10px 0;
        border-bottom: 1px solid var(--card-border);
    }

    .header-controls {
        margin-right: 50px;
    }

    h2 { font-size: 2.4rem; margin-bottom: 40px; }
    section { padding: 80px 5%; }

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

    .sticky-actions {
        bottom: 15px;
        right: 15px;
    }
    .sticky-cta {
        font-size: 0.8rem;
        padding: 10px 15px;
    }
}

@media (max-width: 480px) {
    .hero { min-height: 70vh; }
    .hero h1 { font-size: 2.4rem; }
    .hero-content { padding: 60px 5% 80px; }
    h2 { font-size: 2rem; }
    .bento-grid-brands { grid-template-columns: 1fr; }
}