/* ========================================
   THIOS.CO CSS ARCHITECTURE
   ========================================
   
   This CSS file follows a component-based architecture with:
   
   1. CSS Variables (Design Tokens)
   2. Layout Components (Header, Footer, Sections)
   3. Typography System (Headings, Text Styles)
   4. Component Systems (Buttons, Forms, Cards)
   5. Animation & Transition System
   6. Responsive Utility System
   7. Legacy Styles (to be migrated)
   
   Architecture Principles:
   - Mobile-first responsive design
   - Component-based organization
   - CSS custom properties for consistency
   - Minimal !important usage
   - Semantic naming conventions
   
   ======================================== */

/* CSS Custom Properties (Variables) */
:root {
    /* Colors - Primary Palette */
    --color-primary: #15635E;
    --color-primary-light: #1e7e34;
    --color-primary-dark: #0f4a47;
    
    /* Colors - Secondary Palette */
    --color-secondary: #E8AF00;
    --color-secondary-light: #FFD700;
    --color-secondary-dark: #b8941f;
    
    /* Colors - Accent */
    --color-accent: #28a745;
    --color-accent-light: #34ce57;
    --color-accent-dark: #1e7e34;
    
    /* Colors - Neutral */
    --color-white: #ffffff;
    --color-light-gray: #f1f1f1;
    --color-gray: #6c757d;
    --color-dark-gray: #444444;
    --color-black: #000000;
    
    /* Colors - Status */
    --color-success: #28a745;
    --color-warning: #ffc107;
    --color-error: #dc3545;
    --color-info: #17a2b8;
    
    /* Typography */
    --font-family-primary: 'Saira', sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    
    --line-height-tight: 1.25;
    --line-height-base: 1.6;
    --line-height-relaxed: 1.75;
    
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    
    /* Layout */
    --container-max-width: 1200px;
    --header-height: 40px;
    --banner-height: 60px;
    --footer-height: auto;
    
    /* Border Radius */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;
    --border-radius-full: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Z-Index Scale */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    
    /* Responsive Breakpoints */
    --breakpoint-xs: 480px;
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1440px;
    --breakpoint-2xl: 1920px;
}

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    max-width: 100%; /* Prevent any element from causing horizontal overflow */
}

/* Base Styles */
html, body {
    height: 100%;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    background-color: var(--color-light-gray);
    color: var(--color-dark-gray);
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: clamp(var(--spacing-xs), 2vw, var(--spacing-lg));
    padding-top: calc(var(--header-height) - 5px);
    box-sizing: border-box; /* Include margin in width calculation */
    overflow-x: hidden; /* Prevent horizontal scrollbar */
}

/* Banner is now part of document flow, no special body padding needed */

/* Ensure main content has proper spacing from fixed header */
main {
    padding-top: calc(var(--header-height) - 5px);
    flex: 1 0 auto;
}

.main-content {
    padding-top: calc(var(--header-height) - 5px);
}

/* Container */
.container {
    width: min(100%, var(--container-max-width));
    margin-inline: auto;
    padding-inline: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
    overflow-x: hidden;
    word-wrap: break-word;
    word-break: break-word;
}

/* ========================================
   LAYOUT COMPONENT SYSTEM
   ======================================== */

/* Header Component */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
    padding: var(--spacing-md) 0;
    box-shadow: var(--shadow-md);
    z-index: var(--z-fixed);
    background: var(--color-primary);
    transition: var(--transition-base);
}

/* Header Variants */
.header--thiosphere { background: #96643F; }
.header--auxosphere { background: #909090; }
.header--saunosphere { background: #E25141; }
.header--agrosphere { background: var(--color-primary); }
.header--ergosphere { background: #1D63BE; }
.header--immosphere { background: #4D04AC; }
.header--voidosphere { background: #01115D; }
.header--shadosphere { background: #666666; }
.header--isosphere { background: #333333; }

/* Header States */
.header--sticky {
    box-shadow: var(--shadow-lg);
}

.header--transparent {
    background: rgba(21, 99, 94, 0.95);
    backdrop-filter: blur(10px);
}

/* Navigation Component */
.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
}

.nav__brand {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.nav__logo {
    max-height: 50px;
    transition: var(--transition-base);
}

.nav__logo:hover {
    filter: brightness(1.3);
}

.nav__links {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav__link {
    color: var(--color-white);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: var(--transition-fast);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
}

.nav__link:hover {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.1);
}

.nav__link--active {
    background: rgba(255, 255, 255, 0.2);
    color: var(--color-white);
}

/* Footer Component */
.footer {
    background: var(--color-dark-gray);
    color: var(--color-white);
    padding: var(--spacing-2xl) 0 var(--spacing-lg);
    margin-top: auto;
}

.footer__content {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
}

.footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.footer__section h3 {
    color: var(--color-white);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-lg);
}

.footer__section p,
.footer__section a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    line-height: var(--line-height-base);
}

.footer__section a:hover {
    color: var(--color-white);
}

.footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: var(--spacing-lg);
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--font-size-sm);
}

/* Section Components */
.section {
    padding: var(--spacing-3xl) 0;
}

.section--hero {
    padding: var(--spacing-3xl) 0 var(--spacing-2xl);
    text-align: center;
}

.section--dark {
    background: var(--color-dark-gray);
    color: var(--color-white);
}

.section--light {
    background: var(--color-light-gray);
}

.section__header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.section__title {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-md);
    color: var(--color-dark-gray);
}

.section--dark .section__title {
    color: var(--color-white);
}

.section__subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-gray);
    max-width: 600px;
    margin: 0 auto;
}

.section--dark .section__subtitle {
    color: rgba(255, 255, 255, 0.8);
}

/* ========================================
   TYPOGRAPHY SYSTEM
   ======================================== */

/* Base Typography */
body {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-dark-gray);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Heading System */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-dark-gray);
    margin-bottom: var(--spacing-md);
}

h1 {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-lg);
}

h2 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-md);
}

h3 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-sm);
}

h4 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-sm);
}

h5 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-xs);
}

h6 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-xs);
}

/* Text Styles */
.text--large {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
}

.text--small {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
}

.text--xs {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-base);
}

/* Text Colors */
.text--primary {
    color: var(--color-primary);
}

.text--secondary {
    color: var(--color-secondary);
}

.text--accent {
    color: var(--color-accent);
}

.text--muted {
    color: var(--color-gray);
}

.text--white {
    color: var(--color-white);
}

.text--success {
    color: var(--color-success);
}

.text--warning {
    color: var(--color-warning);
}

.text--error {
    color: var(--color-error);
}

/* Text Weights */
.text--light {
    font-weight: var(--font-weight-light);
}

.text--normal {
    font-weight: var(--font-weight-normal);
}

.text--medium {
    font-weight: var(--font-weight-medium);
}

.text--semibold {
    font-weight: var(--font-weight-semibold);
}

.text--bold {
    font-weight: var(--font-weight-bold);
}

/* Text Alignment */
.text--left {
    text-align: left;
}

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

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

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

/* Text Transform */
.text--uppercase {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.text--lowercase {
    text-transform: lowercase;
}

.text--capitalize {
    text-transform: capitalize;
}

/* Text Decoration */
.text--underline {
    text-decoration: underline;
}

.text--no-underline {
    text-decoration: none;
}

/* Line Height */
.leading--tight {
    line-height: var(--line-height-tight);
}

.leading--normal {
    line-height: var(--line-height-base);
}

.leading--relaxed {
    line-height: var(--line-height-relaxed);
}

/* Paragraph Styles */
p {
    margin-bottom: var(--spacing-md);
    line-height: var(--line-height-base);
}

p:last-child {
    margin-bottom: 0;
}

/* Link Styles */
a {
    color: var(--color-primary);
    text-decoration: none;
    transition: var(--transition-fast);
}

a:hover {
    color: var(--color-primary-light);
    text-decoration: underline;
}

a:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* List Styles */
ul, ol {
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-lg);
}

li {
    margin-bottom: var(--spacing-xs);
    line-height: var(--line-height-base);
}

ul li {
    list-style-type: disc;
}

ol li {
    list-style-type: decimal;
}

/* Blockquote */
blockquote {
    border-left: 4px solid var(--color-primary);
    padding-left: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    font-style: italic;
    color: var(--color-gray);
}

/* Code */
code {
    background: var(--color-light-gray);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    font-family: 'Courier New', monospace;
    font-size: var(--font-size-sm);
    color: var(--color-primary);
}

pre {
    background: var(--color-light-gray);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-md);
    overflow-x: auto;
    margin: var(--spacing-lg) 0;
}

pre code {
    background: none;
    padding: 0;
    border-radius: 0;
}

/* ========================================
   ANIMATION & TRANSITION SYSTEM
   ======================================== */

/* Base Transitions */
.transition {
    transition: var(--transition-base);
}

.transition--fast {
    transition: var(--transition-fast);
}

.transition--slow {
    transition: var(--transition-slow);
}

/* Hover Animations */
.hover--lift {
    transition: var(--transition-base);
}

.hover--lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.hover--scale {
    transition: var(--transition-base);
}

.hover--scale:hover {
    transform: scale(1.05);
}

.hover--rotate {
    transition: var(--transition-base);
}

.hover--rotate:hover {
    transform: rotate(5deg);
}

.hover--glow {
    transition: var(--transition-base);
}

.hover--glow:hover {
    box-shadow: 0 0 20px rgba(21, 99, 94, 0.3);
}

/* Fade Animations */
.fade-in {
    animation: fadeIn var(--transition-slow) ease-in;
}

.fade-out {
    animation: fadeOut var(--transition-slow) ease-out;
}

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

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

/* Slide Animations */
.slide-in-left {
    animation: slideInLeft var(--transition-slow) ease-out;
}

.slide-in-right {
    animation: slideInRight var(--transition-slow) ease-out;
}

.slide-in-up {
    animation: slideInUp var(--transition-slow) ease-out;
}

.slide-in-down {
    animation: slideInDown var(--transition-slow) ease-out;
}

@keyframes slideInLeft {
    from { 
        transform: translateX(-100%); 
        opacity: 0; 
    }
    to { 
        transform: translateX(0); 
        opacity: 1; 
    }
}

@keyframes slideInRight {
    from { 
        transform: translateX(100%); 
        opacity: 0; 
    }
    to { 
        transform: translateX(0); 
        opacity: 1; 
    }
}

@keyframes slideInUp {
    from { 
        transform: translateY(100%); 
        opacity: 0; 
    }
    to { 
        transform: translateY(0); 
        opacity: 1; 
    }
}

@keyframes slideInDown {
    from { 
        transform: translateY(-100%); 
        opacity: 0; 
    }
    to { 
        transform: translateY(0); 
        opacity: 1; 
    }
}

/* Bounce Animations */
.bounce {
    animation: bounce 1s infinite;
}

.bounce-in {
    animation: bounceIn var(--transition-slow) ease-out;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

@keyframes bounceIn {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Pulse Animations */
.pulse {
    animation: pulse 2s infinite;
}

.pulse--slow {
    animation: pulse 3s infinite;
}

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

/* Shake Animation */
.shake {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Loading Spinner */
.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: var(--color-white);
    animation: spin 1s ease-in-out infinite;
}

.spinner--large {
    width: 40px;
    height: 40px;
    border-width: 4px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Progress Bar Animation */
.progress-bar {
    width: 100%;
    height: 4px;
    background: var(--color-light-gray);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
}

.progress-bar__fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: var(--border-radius-sm);
    transition: width var(--transition-slow) ease;
}

/* Stagger Animation for Lists */
.stagger-children > * {
    animation: fadeInUp var(--transition-slow) ease-out;
    animation-fill-mode: both;
}

.stagger-children > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.3s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.4s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.5s; }

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

/* Utility Classes for Animation Control */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all var(--transition-slow) ease-out;
}

.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

.no-animation {
    animation: none !important;
    transition: none !important;
}

/* Persistent Offer Banner */
.persistent-offer-banner {
    display: none;
    background: linear-gradient(45deg, #ffd700, #ffed4e, #ffd700, #ffed4e);
    background-size: 400% 400%;
    color: #1a1a1a;
    padding: var(--spacing-sm) var(--spacing-md);
    box-shadow: var(--shadow-md);
    animation: shimmer 3s ease-in-out infinite;
    overflow: hidden;
    width: 100%;
}

/* Yellow gradient shimmer animation */
@keyframes shimmer {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.persistent-offer-banner.show {
    display: block;
}

.banner-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--container-max-width);
    margin: 0 auto;
    gap: var(--spacing-md);
}

.banner-text {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 1;
    color: #1a1a1a;
}

.banner-icon {
    font-size: var(--font-size-lg);
}

.banner-message {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: #1a1a1a;
}

.banner-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.banner-close {
    background: none;
    border: none;
    color: #1a1a1a;
    font-size: var(--font-size-xl);
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: var(--border-radius-sm);
    transition: var(--transition-fast);
    font-weight: bold;
}

.banner-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #000;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.logo {
    max-height: 50px;
}

.logo {
    transition: filter 0.5s ease;
}

.logo:hover {
    filter: brightness(1.3); /* Increases brightness by 20% on hover */
    transform: scale(1.05); /* Grow the button by 5% */
    transition: transform 0.5s ease;
}

/* Consolidate tagline styles */
[id^="tagline"] {
    font-size: 14px;
    font-weight: semibold;
    letter-spacing: 2px;
    text-align: center;
    padding: 4px 20px;
    margin-bottom: 0.5rem;
    display: block;
}

/* Set specific tagline colors */

/* Shopping Cart Styles - Single Cart Icon Only */
.header nav #cart-icon {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs);
    border-radius: var(--border-radius-md);
    transition: var(--transition-base);
    color: var(--color-white);
    font-size: var(--font-size-lg);
    text-decoration: none;
    background-color: transparent;
    border: none;
    min-width: 40px;
    min-height: 40px;
    justify-content: center;
    box-shadow: none;
    z-index: var(--z-dropdown);
    visibility: visible !important;
    opacity: 1 !important;
}

/* Cart icon should be visible */

/* Cart icon visibility rules */

.header nav #cart-icon:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-white);
    transform: scale(1.05);
    box-shadow: none;
    border: none;
}

/* Cart icon Font Awesome styling - prioritize Font Awesome icon */
.header nav #cart-icon i.fa-shopping-cart {
    font-size: 1.4rem;
    color: var(--color-white) !important;
    display: inline !important;
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 6 Brands";
    font-weight: 900 !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
}

/* Force cart icon to be white */
.header nav #cart-icon {
    color: var(--color-white) !important;
}

.header nav #cart-icon * {
    color: var(--color-white) !important;
}

/* Launch announcement styling - Removed conflicting rule, using the more elaborate styling below */

.announcement-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

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

.announcement-title {
    text-align: center !important;
    margin-bottom: 1rem;
}

.announcement-highlight {
    text-align: center !important;
    margin-bottom: 0.5rem;
}

.announcement-offer {
    text-align: center !important;
    margin: 0.5rem 0 1rem 0;
    font-size: 0.9rem;
    line-height: 1.3;
}

.announcement-cta {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: var(--color-primary);
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.announcement-cta:hover {
    background: #0f4f4a;
    color: white;
    text-decoration: none;
}

/* Ensure Font Awesome icon shows over fallback */
.header nav #cart-icon i.fa-shopping-cart::before {
    content: "\f07a" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    color: var(--color-white) !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Font Awesome icon is now properly configured above */


/* Remove any pseudo-element cart icons */
.header nav #cart-icon::after {
    content: none !important;
    display: none !important;
}

/* Navigation link styling with proper specificity */
.header .nav-links a,
.header .nav-links a:link,
.header .nav-links a:visited,
.header .nav-links a:active {
    color: var(--color-white);
    text-decoration: none;
    transition: var(--transition-fast);
}

.header .nav-links a:hover {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
}

/* Desktop navigation - green text for dropdown only */
@media (min-width: 769px) {
    /* Keep top navigation links white */
    .header nav .nav-links a,
    .header nav .nav-links a:link,
    .header nav .nav-links a:visited,
    .header nav .nav-links a:active {
        color: var(--color-white);
    }
    
    .header nav .nav-links a:hover {
        color: rgba(255, 255, 255, 0.8);
    }
    
    /* Keep cart icon white */
    .header nav #cart-icon,
    .header nav #cart-icon i {
        color: var(--color-white) !important;
    }
    
    .header nav #cart-icon:hover,
    .header nav #cart-icon:hover i {
        color: var(--color-white) !important;
    }
    
    /* Only dropdown menu items should be green */
    .header .nav-links .dropdown-menu a,
    .header .nav-links .dropdown-menu a:link,
    .header .nav-links .dropdown-menu a:visited,
    .header .nav-links .dropdown-menu a:active {
        color: var(--color-primary);
    }
    
    .header .nav-links .dropdown-menu a:hover {
        color: var(--color-primary-light);
    }
}

/* Mobile navigation - keep white text */
@media (max-width: 768px) {
    .header .nav-links a,
    .header .nav-links a:link,
    .header .nav-links a:visited,
    .header .nav-links a:active {
        color: var(--color-white) !important;
    }
    
    .header .nav-links a:hover {
    color: rgba(255, 255, 255, 0.8) !important;
    }
    
    /* Ensure cart icon is visible on mobile */
    .header nav #cart-icon {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Cart Modal Styles - Temporarily disabled for Stripe hosted checkout */
/*
.cart-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 80px;
    width: 100%;
    height: calc(100% - 80px);
    background: linear-gradient(135deg, rgba(21, 99, 94, 0.9) 0%, rgba(13, 74, 71, 0.9) 100%);
    backdrop-filter: blur(10px);
}
*/

/*
.cart-modal .cart-content {
    background: linear-gradient(135deg, var(--color-secondary) 0%, #FFA500 50%, #FF8C00 100%);
    margin: 3% auto;
    padding: 0;
    border-radius: var(--border-radius-lg);
    width: 90%;
    max-width: 550px;
    max-height: 85vh;
    overflow: hidden;
    position: relative;
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3);
    border: 3px dotted var(--color-gray);
    outline: none;
}
*/

/*
.cart-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: subtle-shimmer 4s ease-in-out infinite;
    z-index: 1;
}

.cart-header {
    background: transparent;
    color: #000;
    padding: 2rem 2rem 1.5rem;
    margin: 0;
    border-bottom: none;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-header h3 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.cart-header h3::before {
    content: "📦";
    font-size: 1.8rem;
}

.cart-close {
    background: rgba(0, 0, 0, 0.2);
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #000;
    padding: 0.75rem;
    border-radius: 50%;
    transition: all 0.3s ease;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    line-height: 1;
    position: static;
    margin: 0;
}

.cart-close:hover {
    background: rgba(0, 0, 0, 0.3);
    transform: scale(1.1);
}

.cart-body {
    padding: 2rem;
    max-height: 60vh;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.9);
    position: relative;
    z-index: 2;
}

.cart-total {
    background: #333;
    color: white;
    padding: 1.5rem 2rem;
    margin: 0;
    border-top: none;
    font-weight: 700;
    font-size: 1.3rem;
    border-radius: 0 0 12px 12px;
    position: relative;
    z-index: 2;
}

.cart-actions {
    display: flex;
    gap: 1rem;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.9);
    position: relative;
    z-index: 2;
}

.btn-checkout {
    background-color: #FFD700;
    color: #333;
    border: 2px solid #333;
    padding: 1.25rem 2rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.btn-checkout:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
    background-color: #FFD700;
    color: #000;
    border-color: #000;
}

.btn-clear-cart {
    background: #fff;
    color: #333;
    border: 2px dashed #333;
    padding: 1.25rem 2rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    font-size: 1rem;
}

.btn-clear-cart:hover {
    background: #fff;
    border-color: #000;
    transform: scale(1.05);
    border-style: solid;
}

.cart-count {
    background: #ffc107;
    color: #000;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 20px;
}
*/
#tagline { color: #ffffff;}
#tagline-thiosphere { color: #96643F;}
#tagline-auxosphere { color: #909090;}
#tagline-saunosphere { color: #E25141;}
#tagline-agrosphere { color: #15635E;}
#tagline-ergosphere { color: #1D63BE;}
#tagline-immosphere { color: #4D04AC;}
#tagline-voidosphere { color: #01115D;}
#tagline-shadosphere { color: #2a2a2a;}
#tagline-isosphere { color: #333;}

.handmade {
    color: #878887;
    font-size: 11px;
    font-weight: regular;
    text-align: center;
    padding:4px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav-links a {
    color: #E8AF00;
    font-size: medium;
    font-weight: 500;
    text-decoration: none;
}

.nav-links a:hover {
    color: #fbc114;
    text-decoration: dashed;
}


/* Handbook cart icon styling - separate from main navigation */
#handbook-cart-icon {
    color: #E8AF00;
    font-size: 18pt;
    margin-left: 2rem;
    text-decoration: none;
    display: flex;
    align-items: center;
}

#handbook-cart-icon:hover {
    color: #fbc114;
}

#handbook-cart-icon i {
    color: #E8AF00;
}

#handbook-cart-icon:hover i {
    color: #fbc114;
}






@media screen and (max-width: 768px) {


    .nav-links.active {
        display: flex;
        animation: slideDown 0.3s ease-out;
    }
    
    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .hamburger {
        display: block;
    }
}

@media screen and (min-width: 769px) {
    .hamburger {
        display: none;
    }
}

/* Overlay */
.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,1);
    z-index: 994;
}

.overlay.active {
    display: block;
}

/* Typography */
h1, h2, h3, h4 {
    color: #434343;
    margin: 0;
}

p {
    margin-bottom: 1rem;
}

a {
    color: #1D63BE;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Sections */
.section-generic,
.section-focus,
.section-a,
.section-b,
.section-c,
.section-d,
.section-e,
.section-f,
.section-g,
.section-h {
    border-radius: 12px;
    border-style: dashed;
    padding: clamp(0.75rem, 3vw, 2rem);
    margin: clamp(0.75rem, 2vw, 1rem) 0;
    width: 100%;
}

.section-a { border-color: #E25141; border-width: 2px; }
.section-b { border-color: #15635E; border-width: 2px; }
.section-c { border-color: #1D63BE; border-width: 2px; }
.section-d { border-color: #4D04AC; border-width: 2px; }
.section-e { border-color: #959393; border-width: 2px; }
.section-f { border-color: #96643F; border-width: 2px; }
.section-g { border-color: #E8AF00; border-width: 2px; }
.section-h { border-color: #666666; border-width: 2px; }
.section-focus { border-color: #cccccc; border-width: 2px; }
.section-generic { border-color: #ccc; border-width: 2px; }


.section-generic:hover {
    border-style: solid;
    border-color: #999;
    background-color: #fefefe;
}

.section-focus:hover {
    border-style: solid;
    background-color: #fff;
}

/* Open source section styling */
.section-focus {
    max-width: var(--container-max-width);
    width: auto;
    margin: clamp(1.5rem, 4vw, 3rem) auto;
}

/* Startup and Launch Timeline Styling - Consolidated with Index Page styles below */

.investment-message {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
    text-align: center;
}

.launch-timeline {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 2rem;
    margin: 2rem 0;
}

.launch-timeline h2 {
    text-align: center;
    color: #15635E;
    margin-bottom: 1rem;
}

.timeline-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.timeline-item {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    border: 2px solid #e9ecef;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.timeline-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.timeline-item.current {
    border-color: var(--color-primary);
    background: #f8fff9;
}

.timeline-item.next {
    border-color: #28a745;
    background: #f8fff9;
}

.timeline-item.future {
    border-color: #6c757d;
    background: #f8f9fa;
    opacity: 0.8;
}

.timeline-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #15635E;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    margin: 0 auto 1rem auto;
}

.timeline-item.current .timeline-number {
    background: var(--color-primary);
}

.timeline-item.next .timeline-number {
    background: #28a745;
    color: white;
}

.timeline-item.future .timeline-number {
    background: #6c757d;
}

.timeline-item h3 {
    margin-bottom: 0.5rem;
    color: #15635E;
}

.timeline-item .status {
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.launch-status {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
}

.status-badge {
    font-weight: bold;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 0.5rem;
}

.status-badge.coming-soon {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

/* Sections need relative positioning for starburst */
.section-a,
.section-b,
.section-c,
.section-d,
.section-f,
.section-g {
    position: relative;
}

/* Starburst Coming Soon Badge */
.starburst-coming-soon {
    position: absolute;
    top: clamp(0.75rem, 3vw, 2rem);
    right: 15px;
    width: 80px;
    height: 80px;
    transform: rotate(12deg);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: starburst-pulse 2.5s ease-in-out infinite;
}

.starburst-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.starburst-text {
    position: relative;
    z-index: 2;
    color: white;
    font-size: 0.6rem;
    font-weight: 900;
    text-align: center;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Product-specific starburst colors - now using individual colored SVGs */

@keyframes starburst-pulse {
    0%, 100% { transform: rotate(12deg) scale(1); }
    50% { transform: rotate(12deg) scale(1.08); }
}

/* Airplane Style Instructions */
.airplane-instructions {
    background: #f8f9fa;
    border: 2px solid #333;
    border-radius: 8px;
    padding: 2rem;
    margin: 2rem 0;
    font-family: 'Arial', sans-serif;
}

.instructions-header {
    text-align: center;
    margin-bottom: 2rem;
    border-bottom: 2px solid #333;
    padding-bottom: 1rem;
}

.instructions-header h2 {
    color: #333;
    font-size: 1.8rem;
    font-weight: bold;
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.instructions-subtitle {
    color: #666;
    font-size: 1rem;
    margin: 0;
    font-style: italic;
}

.instructions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.instruction-pane {
    background: white;
    border: 2px solid #333;
    border-radius: 6px;
    padding: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}

.pane-graphic {
    font-size: 2.5rem;
    line-height: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: #f8f9fa;
    border: 2px solid #333;
    border-radius: 8px;
}

.instruction-pane:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.pane-number {
    background: #333;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.pane-content h3 {
    color: #333;
    font-size: 1.2rem;
    font-weight: bold;
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pane-content p {
    color: #555;
    margin: 0;
    line-height: 1.4;
    font-size: 0.95rem;
}

@media (max-width: 768px) {
    .instructions-grid {
        grid-template-columns: 1fr;
    }
    
    .instruction-pane {
        flex-direction: column;
        text-align: center;
    }
    
    .pane-number {
        align-self: center;
    }
}

/* Dark mode starburst */
[data-theme="dark"] .starburst-coming-soon {
    background: #E00000;
    color: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.status-badge.kickstarter {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.status-badge.kickstarter a {
    color: #0c5460;
    text-decoration: none;
    transition: color 0.3s ease;
}

.status-badge.kickstarter a:hover {
    color: #2bde73;
    text-decoration: underline;
}

.campaign-details {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 1rem;
    text-align: left;
}

.campaign-details h4 {
    color: #15635E;
    margin-bottom: 1rem;
    text-align: center;
}

.campaign-details ul {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.campaign-details li {
    margin-bottom: 0.5rem;
    color: #495057;
}

/* Story Section Styles */
.story-section {
    width: 100%;
    margin: 0 auto 3rem;
    padding: 0 2rem;
}

.story-block {
    margin-bottom: 2.5rem;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 12px;
    border-left: 4px solid var(--color-primary);
}

.story-block h3 {
    color: var(--color-primary);
    margin-bottom: 1rem;
    font-size: 1.4rem;
    font-weight: 600;
}

.story-block p {
    line-height: 1.7;
    margin-bottom: 1rem;
    color: #333;
}

.story-block p:last-child {
    margin-bottom: 0;
}

.vision-block {
    background: linear-gradient(135deg, #e8f5e8 0%, #f0f8f0 100%);
    border-left-color: #2bde73;
    border: 2px solid #2bde73;
}

.vision-block h3 {
    color: #1a4a1a;
    font-size: 1.6rem;
}

.call-to-action {
    font-size: 1.2rem;
    color: #1a4a1a;
    text-align: center;
    margin-top: 1.5rem !important;
    padding: 1rem;
    background: rgba(43, 222, 115, 0.1);
    border-radius: 8px;
}

/* Story Narrative Styles */
.story-narrative {
    margin: 2rem 0;
    font-size: 1.1rem;
    line-height: 1.7;
    color: #333;
}

.story-narrative p {
    margin-bottom: 1.5rem;
}

/* Product Sections Styles */
.product-sections {
    margin: 2rem 0;
    display: grid;
    gap: 1.5rem;
}

.product-section {
    padding: 1.5rem;
    background: #ffffff;
    border-radius: 12px;
    border-left: 4px solid var(--color-primary);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-section:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.product-section h4 {
    color: var(--color-primary);
    margin-bottom: 0.75rem;
    font-size: 1.2rem;
    font-weight: 600;
}

.product-section p {
    margin: 0;
    color: #555;
    line-height: 1.6;
}

/* Vision Section Styles */
.vision-section {
    margin: 3rem 0 2rem 0;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(21, 99, 94, 0.05), rgba(43, 222, 115, 0.05));
    border-radius: 12px;
    border: 2px solid rgba(21, 99, 94, 0.1);
    text-align: center;
}

.vision-section h3 {
    color: var(--color-primary);
    margin-bottom: 1rem;
    font-size: 1.4rem;
    font-weight: 600;
}

.vision-section p {
    font-size: 1.1rem;
    color: #333;
    line-height: 1.6;
    margin: 0;
}

/* Mission Page Styles */
.mission-hero {
    text-align: center;
    margin-bottom: 3rem;
}

.mission-statement {
    font-size: 1.2rem;
    color: var(--color-primary);
    font-weight: 600;
    margin: 1rem 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.mission-story {
    margin: 2rem 0;
    font-size: 1.1rem;
    line-height: 1.7;
    color: #333;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.mission-story p {
    margin-bottom: 1.5rem;
}

.mission-cta {
    margin: 3rem 0 2rem 0;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(21, 99, 94, 0.05), rgba(43, 222, 115, 0.05));
    border-radius: 12px;
    border: 2px solid rgba(21, 99, 94, 0.1);
    text-align: center;
}

.mission-cta h2 {
    color: var(--color-primary);
    margin-bottom: 1rem;
    font-size: 1.6rem;
    font-weight: 600;
}

.mission-cta p {
    font-size: 1.1rem;
    color: #333;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.mission-cta .cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Mission Connection Styles */
.mission-connection {
    margin: 2rem 0;
    padding: 1.5rem;
    background: rgba(21, 99, 94, 0.05);
    border-radius: 8px;
    border-left: 4px solid var(--color-primary);
}

.mission-connection p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #333;
    margin: 0;
    font-style: italic;
}

/* Section Spacing */
section {
    margin-bottom: 3rem;
}

/* Ensure first section has proper spacing from header */
section:first-child,
.team-intro,
.mission-hero,
.story-section {
    margin-top: 0.5rem;
}

/* Special spacing for index page hero section */
body.index-page {
    padding-top: calc(var(--header-height) + 5px) !important;
}

body.index-page main {
    padding-top: 2rem;
}

.section-generic {
    margin-bottom: 3rem;
}

.section-f,
.section-a,
.section-b,
.section-c,
.section-d,
.section-g {
    margin-bottom: 3rem;
}

.launch-timeline {
    margin-bottom: 4rem;
}

/* Team Page Styles */
.team-intro {
    text-align: center;
    margin-bottom: 3rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.team-intro h2 {
    color: var(--color-primary);
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
}

.team-intro p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #333;
    margin-bottom: 1.5rem;
}

.join-section {
    margin: 3rem 0;
    text-align: center;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(21, 99, 94, 0.05), rgba(43, 222, 115, 0.05));
    border-radius: 12px;
    border: 2px solid rgba(21, 99, 94, 0.1);
}

.join-section h2 {
    color: var(--color-primary);
    margin-bottom: 1rem;
    font-size: 1.6rem;
    font-weight: 600;
}

.join-section > p {
    font-size: 1.1rem;
    color: #333;
    line-height: 1.6;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.join-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.join-option {
    padding: 1.5rem;
    background: #ffffff;
    border-radius: 12px;
    border-left: 4px solid var(--color-primary);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.join-option:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.join-option h3 {
    color: var(--color-primary);
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.join-option p {
    margin-bottom: 1rem;
    color: #555;
    line-height: 1.6;
}

.join-option .btn {
    width: 100%;
    text-align: center;
}

.section-a:hover {
    border-style: solid;
    background-color: #fbe9e7;
}

.section-b:hover {
    border-style: solid;
    background-color: #e1f7f5;
}

.section-c:hover {
    border-style: solid;
    background-color: #dbe9fb;
}

.section-d:hover {
    border-style: solid;
    background-color: #e8f4fd;
}

.section-e:hover {
    border-style: solid;
    background-color: #ebe9e9;
}

.section-f:hover {
    border-style: solid;
    background-color: #f9ece3;
}

/* Product page list styling */
.section-f ul,
.section-f .features ul,
.section-f .specifications ul,
.section-f .product-option-content ul,
.product-option-content ul {
    text-align: left;
    margin-left: 2.5rem;
    padding-left: 0;
    display: block;
    width: 100%;
    float: left;
    clear: both;
}

.section-f .features,
.section-f .specifications,
.section-f .product-option-content,
.product-option-content {
    text-align: left;
}

.section-f .features h3,
.section-f .specifications h3,
.product-option-content h2,
.product-option-content h3,
.product-option-content p {
    text-align: left;
}

/* Product content alignment */
.product-option-content,
.features,
.specifications {
    text-align: left;
}

/* Centered elements */
.section-f .section-pricing,
.section-f .price-badge-top,
.section-f button {
    text-align: center;
}

/* Product page titles */
.section-f h1,
.section-a h1,
.section-b h1,
.section-c h1,
.section-d h1,
.section-e h1,
.section-g h1,
.section-h h1 {
    text-align: left;
}

/* Product page section headings */
.section-f h2,
.section-f h3,
.section-a h2,
.section-a h3,
.section-b h2,
.section-b h3,
.section-c h2,
.section-c h3,
.section-d h2,
.section-d h3,
.section-e h2,
.section-e h3,
.section-g h2,
.section-g h3,
.section-h h2,
.section-h h3 {
    text-align: left;
}

/* Product option section titles */
.product-option-content h2,
.product-option-content h3,
.section-header h2,
.section-header h3,
.product-option-section h2,
.product-option-section h3 {
    text-align: left;
}

/* Product option section header alignment */
.product-option-section .section-header h2,
.product-option-section .product-option-content h2,
.product-option-section h2 {
    text-align: left;
    justify-content: flex-start;
    margin-left: 0;
    padding-left: 0;
}

/* Product option section headers */
.section-header {
    text-align: left;
    justify-content: flex-start;
    padding-top: 1rem;
}

.section-header h2 {
    text-align: left;
    margin: 0 0 1rem 0;
}

/* Product option section spacing */
.product-option-section {
    padding: 1rem;
}

.product-option-content {
    padding: 1rem;
}

.section-g:hover {
    border-style: solid;
    background-color: #fbf9f2;
}

.section-h:hover {
    border-style: solid;
    background-color: #e8e8e8;
}


hr {
    margin-bottom: 10px;
    color: #ccc;
    border-width: thin;
    border-style:dotted;
}


/* Two Column Layout */
.two-column {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
    margin-top: 1rem;
}


.two-column img {
    width: 100%;
    object-fit: cover;
}

/* THREE COLUMN LAYOUT */
.three-column {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin: 2rem 0;
}

.three-column .column {
    padding: 1rem;
}

.three-column .column ul {
    list-style-type: none;
    padding: 0;
}

.three-column .column ul li {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
    position: relative;
    list-style: none;
}

.three-column .column ul li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: #333;
}


/* Responsive Images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

.product-badge {
    max-height: 80px;
    padding-top: 12px;
}

/* Full Width Image */
.full-width-image {
    width: 100%;
    margin: 0rem;
    display: flex;
    justify-content: center;
}

.full-width-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Product Beauty Shot Images */
.product-beauty-shot {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-beauty-shot:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* Improved Product Section Layout */
.product-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Remove white background for product sections on index page, but keep hover effects */
.index-page .product-section,
.index-page .section-a,
.index-page .section-b,
.index-page .section-c,
.index-page .section-d,
.index-page .section-f,
.index-page .section-g {
    background: transparent !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: none !important;
}

/* Keep hover background colors for product sections on index page */
.index-page .section-a:hover {
    background-color: #fbe9e7 !important;
}

.index-page .section-b:hover {
    background-color: #e1f7f5 !important;
}

.index-page .section-c:hover {
    background-color: #dbe9fb !important;
}

.index-page .section-d:hover {
    background-color: #e8f4fd !important;
}

.index-page .section-f:hover {
    background-color: #f9ece3 !important;
}

.index-page .section-g:hover {
    background-color: #fbf9f2 !important;
}

.product-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
    align-items: start;
}

.product-content img.responsive-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.product-text {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: left;
}

.product-description {
    font-size: 1.3rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    text-align: left !important;
}

.product-options {
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
}

.product-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.product-option-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.product-option-item:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.product-option-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.product-option-text {
    font-size: 0.9rem;
    line-height: 1.4;
    color: #333;
}

.coming-soon {
    font-style: italic;
    color: #666;
    font-size: 0.9rem;
    margin: 1rem 0;
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    text-align: center;
}

/* Responsive adjustments for product sections */
@media (max-width: 768px) {
    .product-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .product-beauty-shot {
        height: 200px;
    }
    
    .product-options-section {
        padding: 0 0.5rem;
    }
    
    .product-options-grid-new {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 1rem;
        max-width: 100%;
    }
    
    .product-option-card {
        min-height: 140px;
        padding: 1rem 0.75rem;
        max-width: 180px;
    }
}

@media (max-width: 480px) {
    .product-options-section {
        padding: 0 0.25rem;
    }
    
    .product-options-grid-new {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
        max-width: 100%;
    }
    
    .product-option-card {
        min-height: 120px;
        padding: 0.75rem 0.5rem;
        max-width: 160px;
    }
    
    .product-option-name {
        font-size: 0.9rem;
    }
    
    .product-option-description {
        font-size: 0.8rem;
    }
    
    .product-option-price {
        font-size: 1rem;
        padding: 0.2rem 0.5rem;
    }
    
    .product-option-price.coming-soon {
        font-size: 0.75rem;
        line-height: 1.2;
        text-align: center;
        min-height: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: auto;
    }
}

/* Product option section layout */
.product-option-section {
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 0;
    min-height: 200px;
    margin-left: calc(-1 * clamp(0.75rem, 3vw, 2rem));
    margin-right: calc(-1 * clamp(0.75rem, 3vw, 2rem));
    margin-top: calc(-1 * clamp(0.75rem, 3vw, 2rem));
    margin-bottom: calc(-1 * clamp(0.75rem, 3vw, 2rem));
}

/* Product option section styling */
.section-f .product-option-section {
    border: 2px solid #e9ecef;
    background: white;
}

/* Product page section styling */
.thiosphere .section-f,
.auxosphere .section-f,
.agrosphere .section-f,
.ergosphere .section-f,
.immosphere .section-f,
.saunosphere .section-f,
.shadosphere .section-f,
.wtfosphere .section-f {
    border: none;
    background: transparent;
}

.product-option-section:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Product-specific hover colors */
.thiosphere .product-option-section:hover {
    background-color: #f9ece3;
    border-color: #ff8c42;
}

.saunosphere .product-option-section:hover {
    background-color: #fbe9e7;
    border-color: #ff6b6b;
}

.ergosphere .product-option-section:hover {
    background-color: #dbe9fb;
    border-color: #4dabf7;
}

.immosphere .product-option-section:hover {
    background-color: #e8f4fd;
    border-color: #4a90e2;
}

.agrosphere .product-option-section:hover {
    background-color: #e8f5e8;
    border-color: #51cf66;
}

.auxosphere .product-option-section:hover {
    background-color: #ebe9e9;
    border-color: #868e96;
}

.shadosphere .product-option-section:hover {
    background-color: #e8e8e8;
    border-color: #adb5bd;
}

.wtfosphere .product-option-section:hover {
    background-color: #fbf9f2;
    border-color: #ffd43b;
}

.product-option-image-container {
    position: relative;
    padding: 2rem;
    text-align: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    flex-shrink: 0;
}

.product-option-image {
    width: 160px;
    height: 160px;
    object-fit: cover;
    transition: transform 0.3s ease;
    border-radius: 8px;
    margin-bottom: 0;
    box-shadow: none;
}

.product-option-section:hover .product-option-image {
    transform: scale(1.05);
}

/* Left column with product-specific emojis */
.product-option-section::before {
    content: '🧪';
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    font-size: 6rem;
    color: #666;
}

/* Product option specific emojis */
/* Handbook/PDF options */
#pdf-guide .product-option-section::before {
    content: '📖';
}

/* Paper templates */
#paper-templates .product-option-section::before {
    content: '📄';
}

/* MDF templates */
#mdf-templates .product-option-section::before {
    content: '📐';
}

/* Self-assemble kits */
#self-assemble .product-option-section::before {
    content: '🔧';
}

/* Turn-key solutions */
#turn-key .product-option-section::before {
    content: '🏠';
}

/* Alternative configurations */
#custom-modules .product-option-section::before {
    content: '⚙️';
}

/* Bespoke/custom */
#bespoke .product-option-section::before {
    content: '✨';
}

.product-option-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

/* Ensure section headers are vertically centered with emojis */
.product-option-section .section-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 200px;
    padding: 0;
    margin: 0;
    text-align: left;
    width: 100%;
}

.product-option-section .section-header h2 {
    margin: 0 !important;
    padding: 0 1rem !important;
    line-height: 1.2 !important;
    text-align: left !important;
    width: 100% !important;
    font-weight: bold !important;
    font-size: 1.25rem !important;
}

/* Product option section headers */
.product-option-content .section-header h2 {
    margin: 0;
    padding: 0 1rem;
    line-height: 1.2;
    text-align: left;
    width: 100%;
    font-weight: bold;
    font-size: 1.25rem;
}

/* Product option description text */
.product-option-section p {
    font-weight: bold;
    font-size: 1.1rem;
    padding: 0 1rem;
    margin: 0.5rem 0;
    line-height: 1.4;
}

/* Medium screens - reduce emoji size */
@media (max-width: 1024px) {
    .product-option-section::before {
        font-size: 5rem;
        min-height: 160px;
    }
}

@media (max-width: 768px) {
    .product-option-section {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    
    .product-option-section::before {
        font-size: 3rem;
        min-height: 120px;
    }
    
    .product-option-image {
        width: 120px;
        height: 120px;
    }
    
    .product-option-content {
        padding: 1rem;
    }
}

@media (max-width: 768px) {
    .product-options-grid {
        grid-template-columns: 1fr;
    }
}

/* Callout */
.callout {
    display: flex;
    font-weight: regular;
    font-size: medium;
    color: #705502;
    align-items: top; /* Vertically centers the content */
    justify-content: flex-start; /* Aligns items to the start horizontally */
    padding-top: 1rem;
    padding-bottom: 1.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    background-color: #fff;
    border-style: dashed;
    border-color: #E8AF00;
    border-radius: 12px;
    margin-bottom: 0px;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.callout:hover {
    filter: brightness(110%);
}

.callout.collapsed {
    padding: 10px;
}

.callout.collapsed p {
    display: none;
}

.callout.collapsed .info-icon {
    margin: 0;
}

.info-icon {
    margin-right: 1rem;
    width: 24px;
    height: 24px;
}

/* Footer */
footer {
    padding: clamp(1rem, 3vw, 2rem);
    margin-top: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

footer p {
    text-align: center !important;
    margin: 0.5rem 0;
}

.footerlink {
    color: #1D63BE;
    text-decoration: none;
}

.footerlink:hover {
    color: #056ff8;
    text-decoration: underline;
}

/* Mobile Navigation */
@media (max-width: 768px) {


    .nav-links.active {
        right: 0;
    }

    .hamburger {
        display: block;
    }

    .two-column {
        grid-template-columns: 1fr;
    }

    /* Update the body margin for mobile */
    body {
        margin: 8px;
        padding-top: calc(var(--header-height) - 5px);
        text-align: center;
    }
    
    .announcement-content.announcement-offer {
        text-align: center;
    }

    /* Adjust container for mobile */
    .container {
        padding: 0 1rem;
        width: 100%;
        max-width: 100%;
    }

    /* Make nav flush with container */
    nav {
        padding: 0 0.5rem;
        width: 100%;
        margin: 0;
    }

    /* Reduce section padding */
    .section-generic,
    .section-a,
    .section-b,
    .section-c,
    .section-d,
    .section-e,
    .section-f,
    .section-g,
    .section-h {
        padding: 0.75rem;
        margin-bottom: 2rem;
        width: 100%;
    }

    /* Adjust header to align with content */
    .header,
    .header-thiosphere,
    .header-auxosphere,
    .header-saunosphere,
    .header-agrosphere,
    .header-ergosphere,
    .header-immosphere,
    .header-shadosphere,
    .header-voidosphere,
    .header-isosphere {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    nav {
        width: 100%;
        padding: 0.5rem;
        margin: 0;
        box-sizing: border-box;
    }

    .logo {
        margin-left: 0;
    }

    .nav-links {
        margin-right: 0;
    }
}

/* Add this to your CSS file */
ul {
    padding-left: 20px; /* Adjust the value as needed for indentation */
}

li {
    margin-bottom: 5px; /* Optional: adds space between list items */
}

.button-container {
    margin-top: 20px; /* Space above the buttons */
}

/* Button Component System */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-lg);
    margin-right: var(--spacing-sm);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    border: 2px solid transparent;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: var(--transition-base);
    position: relative;
    overflow: hidden;
}

.btn:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Ensure disabled buttons don't have hover transforms */
.btn:disabled:hover {
    transform: none;
}

/* Button Sizes */
.btn--sm {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
}

.btn--lg {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-lg);
}

/* Standardized Button System - All Primary Buttons Yellow */
.btn-primary,
.btn--primary {
    background-color: var(--color-secondary) !important;
    color: var(--color-dark-gray) !important;
    border: 2px solid var(--color-dark-gray) !important;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-primary:hover:not(:disabled),
.btn--primary:hover:not(:disabled) {
    background-color: var(--color-secondary-light) !important;
    color: var(--color-dark-gray) !important;
    border-color: var(--color-black) !important;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.btn-secondary,
.btn--secondary {
    background-color: var(--color-white);
    color: var(--color-dark-gray);
    border: 2px dashed var(--color-gray);
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-secondary:hover:not(:disabled),
.btn--secondary:hover:not(:disabled) {
    background-color: var(--color-light-gray);
    color: var(--color-dark-gray);
    text-decoration: none;
    border-color: var(--color-dark-gray);
    border-style: solid;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn-sm {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
}

.btn-lg {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-lg);
}

/* ========================================
   LEGACY STYLES (TO BE MIGRATED)
   ========================================
   
   The following styles are legacy and should be gradually
   migrated to use the new component system above.
   
   Migration Priority:
   1. High: Styles with many !important declarations
   2. Medium: Inline styles and hardcoded values
   3. Low: Styles that work well as-is
   
   ======================================== */

/* Legacy button styles removed - now using standardized system */


.cookie-modal {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.8);
    padding: 1rem;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.4);
    z-index: 994;
    display: none;
}

.cookie-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.cookie-buttons {
    display: flex;
    gap: 0.5rem;
}

@media (max-width: 768px) {
    .cookie-content {
        flex-direction: column;
        text-align: center;
    }
    
    .cookie-buttons {
        width: 100%;
        justify-content: center;
        text-transform: uppercase;
    }
}

/* Ensure nav maintains proper styling within sticky header */
.header nav {
    width: 100%;
    box-sizing: border-box;
}

/* Add subtle shadow for visual separation (optional) */
.header.sticky {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Mobile-first carousel styles */
.product-carousel-container {
    position: relative;
    width: 100%;
    margin: 20px auto;
}

.product-carousel {
    display: flex;
    transition: transform 0.3s ease-in-out;
    will-change: transform;
}

.product-item {
    flex: 0 0 auto;
    width: calc(100% / 3); /* Adjust based on itemsPerView */
    user-select: none;
}

.product-item.clone {
    pointer-events: none; /* Optional: prevent interaction with clones */
}

@media (max-width: 900px) {
    .product-item {
        width: 50%; /* Show 2 items */
    }
}

@media (max-width: 600px) {
    .product-item {
        width: 100%; /* Show 1 item */
    }
}

.product-item img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.product-name {
    font-size: 1.2em;
    font-weight: bold;
    margin: 0;
    color: #333;
    line-height: 1.2;
}

.product-price-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.price-label {
    font-size: 0.9em;
    color: #666;
}

.product-price {
    font-size: 1.3em;
    font-weight: bold;
    color: #15635E;
}

.product-price sup {
    font-size: 50%;
}

.product-description {
    font-size: 1.3rem;
    line-height: 1.6;
    color: #444;
}

.product-link a {
    color: #15635E;
    text-decoration: none;
    font-weight: bold;
}

.product-link a:hover {
    text-decoration: underline;
}

.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #15635E;
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-button.prev {
    left: 0;
}

.carousel-button.next {
    right: 0;
}

.carousel-button:hover {
    background: #0f4a46;
}

.carousel-button:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* Update media queries */
@media screen and (min-width: 768px) {
    .product-item {
        flex: 0 0 calc(50% - 20px);
    }
}

@media screen and (min-width: 1024px) {
    .product-item {
        flex: 0 0 calc(33.333% - 20px);
    }
}

@media screen and (min-width: 1440px) {
    .product-item {
        flex: 0 0 calc(25% - 20px);
    }
}

/* Add these new styles and update existing ones */
.carousel-wrapper {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.product-carousel-container {
    position: relative;
    width: 100%;
    margin: 20px auto;
}

.product-carousel {
    display: flex;
    gap: 20px;
    transition: transform 0.3s ease-in-out;
    padding: 0 10px;
}

.product-item {
    flex: 0 0 100%;
    max-width: 300px;
    padding: 20px;
    text-align: center;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.product-item img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.product-name {
    font-size: 1.2em;
    font-weight: bold;
    margin: 0;
    color: #333;
    line-height: 1.2;
}

.product-price-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.price-label {
    font-size: 0.9em;
    color: #666;
}

.product-price {
    font-size: 1.3em;
    font-weight: bold;
    color: #15635E;
}

.product-description {
    font-size: 1.3rem;
    line-height: 1.6;
    color: #444;
}

.product-link a {
    color: #15635E;
    text-decoration: none;
    font-weight: bold;
}

.product-link a:hover {
    text-decoration: underline;
}

.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #15635E;
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-button.prev {
    left: 0;
}

.carousel-button.next {
    right: 0;
}

.carousel-button:hover {
    background: #0f4a46;
}

.carousel-button:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* Update media queries */
@media screen and (min-width: 768px) {
    .product-item {
        flex: 0 0 calc(50% - 20px);
    }
}

@media screen and (min-width: 1024px) {
    .product-item {
        flex: 0 0 calc(33.333% - 20px);
    }
}

@media screen and (min-width: 1440px) {
    .product-item {
        flex: 0 0 calc(25% - 20px);
    }
}

.price-note {
    font-size: 0.75em;
    font-style: italic;
    color: #666;
    margin-top: 4px;
    line-height: 1.3;
}

.contact-form {
    width: 100%;
    max-width: none;
    margin: 2rem 0;
    padding: 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Form Component System */
.form {
    max-width: 600px;
    margin: 0 auto;
    padding: var(--spacing-xl);
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
}

.form-group {
    margin-bottom: var(--spacing-lg);
    width: 100%;
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-dark-gray);
    font-size: var(--font-size-sm);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: var(--spacing-sm);
    border: 2px solid var(--color-gray);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-base);
    font-family: var(--font-family-primary);
    transition: var(--transition-base);
    box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(21, 99, 94, 0.1);
}

.form-group input.success,
.form-group textarea.success,
.form-group select.success {
    border-color: var(--color-success);
}

.form-group input.error,
.form-group textarea.error,
.form-group select.error {
    border-color: var(--color-error);
}

/* Checkbox and Radio Components */
.checkbox-group,
.radio-group {
    margin-bottom: var(--spacing-lg);
    width: 100%;
}

.checkbox-label,
.radio-label {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    cursor: pointer;
    font-weight: var(--font-weight-medium);
    color: var(--color-dark-gray);
    line-height: var(--line-height-base);
    width: 100%;
}

.checkbox-label input[type="checkbox"],
.radio-label input[type="radio"] {
    margin: 0;
    margin-top: 0.2rem;
    flex-shrink: 0;
    width: auto;
}

.checkbox-text,
.radio-text {
    display: inline-block;
    line-height: var(--line-height-base);
    flex: 1;
}

/* Form Validation Messages */
.field-error {
    color: var(--color-error);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-xs);
    display: none;
    width: 100%;
}

.field-error.show {
    display: block;
}

.field-success {
    color: var(--color-success);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-xs);
    display: none;
    width: 100%;
}

.field-success.show {
    display: block;
}

/* Form Messages */
.form-message {
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    margin-bottom: var(--spacing-lg);
    text-align: center;
    width: 100%;
}

.form-message--success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.form-message--error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.form-message--info {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

/* Product Page Components */
.product-hero-image {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    padding: 0;
}

.product-hero-video {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    padding: 0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-hero-video:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Product Hero Grid Layout */
.product-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1rem;
    margin: 0 0 2rem 0;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.hero-grid-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-grid-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.hero-grid-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .product-hero-grid {
        gap: 0.5rem;
        margin: 0 0 1.5rem 0;
    }
    
    .hero-grid-item {
        border-radius: 6px;
    }
}

/* Mission Page Image */
.mission-image {
    text-align: center;
    margin: 2rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mission-hero-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mission-hero-image:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Fresh Produce Section */
.fresh-produce-section {
    text-align: center;
    padding: 2rem 0;
}

.fresh-produce-section h2 {
    margin-bottom: 1.5rem;
    color: var(--color-primary);
}

.fresh-produce-image {
    margin: 2rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fresh-produce-hero {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.fresh-produce-hero:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.fresh-produce-section p {
    max-width: 600px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--color-dark-gray);
}

/* Prototype Gallery Grid */
.prototype-gallery-section {
    text-align: center;
    padding: 2rem 0;
}

.prototype-gallery-section h2 {
    margin-bottom: 1.5rem;
    color: var(--color-primary);
}

.prototype-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1rem;
    margin: 2rem 0;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.prototype-grid-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.prototype-grid-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.prototype-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.prototype-gallery-section p {
    max-width: 600px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--color-dark-gray);
}

/* Responsive adjustments for prototype grid */
@media (max-width: 768px) {
    .prototype-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 1fr);
        gap: 0.5rem;
        margin: 1.5rem 0;
    }
    
    .prototype-grid-item {
        border-radius: 6px;
    }
}

/* Index Page Product Thumbnail Videos */
.product-thumbnail-video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-thumbnail-video:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.error-message {
    padding: var(--spacing-lg);
    text-align: center;
    color: var(--color-gray);
    background: var(--color-light-gray);
    border-radius: var(--border-radius-md);
    margin: var(--spacing-md) 0;
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* Error states */
.form-group input:invalid:not(:placeholder-shown),
.form-group textarea:invalid:not(:placeholder-shown) {
    border-color: #dc3545;
}

/* Contact content layout */
.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-top: 2rem;
}

.contact-info {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .contact-form {
        padding: 1.5rem;
    }
    
    .contact-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .contact-info {
        padding: 1.5rem;
    }
}

.product-matrix {
    width: 98%;
    margin: 1rem 0;
    margin-left: auto;
    margin-right: auto;
}

.product-matrix-scroll {
    overflow-x: auto;
    margin: 2rem 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #15635E #f1f1f1;
}

.product-matrix-scroll::-webkit-scrollbar {
    height: 8px;
}

.product-matrix-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.product-matrix-scroll::-webkit-scrollbar-thumb {
    background: #15635E;
    border-radius: 4px;
}

.product-matrix-scroll::-webkit-scrollbar-thumb:hover {
    background: #0f4a47;
}

.product-comparison {
    width: 100%;
    min-width: 300px;
    border-collapse: collapse;
    margin: 0 auto;
}

.product-comparison th,
.product-comparison td {
    padding: 1rem;
    border: 1px solid #ddd;
}

.product-comparison th {
    background-color: #f5f5f5;
    text-align: center;
    min-width: 80px;
}

.product-comparison th:first-child {
    text-align: right;
}

.product-comparison td:first-child {
    text-align: right;
    font-weight: 500;
}

.product-comparison .feature-cell {
    text-align: center;
}

.product-comparison img {
    display: block;
    margin: 0 auto 10px auto;
    max-width: 100%;
    height: auto;
}

/* Responsive product matrix thumbnails and logos */
.product-comparison th img[alt*="Thiosphere"],
.product-comparison th img[alt*="Saunosphere"],
.product-comparison th img[alt*="Ergosphere"],
.product-comparison th img[alt*="Immosphere"],
.product-comparison th img[alt*="Agrosphere"] {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.product-comparison th .logo {
    max-width: 30px;
    max-height: 15px;
    width: auto;
    height: auto;
    transition: all 0.3s ease;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* Responsive breakpoints for product matrix */
@media (max-width: 1024px) {
    .product-comparison th img[alt*="Thiosphere"],
    .product-comparison th img[alt*="Saunosphere"],
    .product-comparison th img[alt*="Ergosphere"],
    .product-comparison th img[alt*="Immosphere"],
    .product-comparison th img[alt*="Agrosphere"] {
        width: 60px;
        height: 60px;
    }
    
    .product-comparison th .logo {
        max-width: 25px;
        max-height: 12px;
    }
    
    .product-comparison th,
    .product-comparison td {
        padding: 0.75rem 0.5rem;
    }
}

@media (max-width: 768px) {
    .product-comparison th img[alt*="Thiosphere"],
    .product-comparison th img[alt*="Saunosphere"],
    .product-comparison th img[alt*="Ergosphere"],
    .product-comparison th img[alt*="Immosphere"],
    .product-comparison th img[alt*="Agrosphere"] {
        width: 50px;
        height: 50px;
    }
    
    .product-comparison th .logo {
        max-width: 20px;
        max-height: 10px;
    }
    
    .product-comparison th,
    .product-comparison td {
        padding: 0.5rem 0.25rem;
        font-size: 0.9rem;
    }
    
    .product-comparison th:first-child,
    .product-comparison td:first-child {
        min-width: 60px;
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .product-comparison th img[alt*="Thiosphere"],
    .product-comparison th img[alt*="Saunosphere"],
    .product-comparison th img[alt*="Ergosphere"],
    .product-comparison th img[alt*="Immosphere"],
    .product-comparison th img[alt*="Agrosphere"] {
        width: 40px;
        height: 40px;
    }
    
    .product-comparison th .logo {
        max-width: 18px;
        max-height: 9px;
    }
    
    .product-comparison th,
    .product-comparison td {
        padding: 0.4rem 0.2rem;
        font-size: 0.8rem;
    }
    
    .product-comparison th:first-child,
    .product-comparison td:first-child {
        min-width: 50px;
        font-size: 0.75rem;
    }
    
    .product-comparison .feature-cell {
        font-size: 0.9rem;
    }
}

.product-name {
    display: block;
    text-align: center;
}

.product-name img {
    max-width: 150px;
    height: auto;
}

/* Base HTML styles */
html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.success-message {
    text-align: center;
    padding: 2rem;
    background-color: #f0f8f0;
    border-radius: 4px;
    margin: 2rem 0;
}

.success-message h3 {
    color: #2c5282;
    margin-bottom: 1rem;
}

.osilogo {
    padding-right: 12px;
}

.trademark-guidelines {
    margin: 2rem 0;
}

.guidelines-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin: 1rem 0;
}

@media (max-width: 768px) {
    .guidelines-container {
        grid-template-columns: 1fr;
    }
}

.allowed, .not-allowed {
    padding: 1.5rem;
    border-radius: 8px;
    background-color: var(--background-secondary);
}

.allowed h3 {
    color: var(--success);
}

.not-allowed h3 {
    color: var(--danger);
}

.community-note, .contact-info {
    margin: 2rem 0;
    padding: 1rem;
    border-left: 4px solid var(--primary);
    background-color: var(--background-secondary);
}

.support-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.support-card {
    background: var(--card-bg, #ffffff);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}

.support-card:hover {
    transform: translateY(-5px);
}

.support-card i {
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.faq-section {
    margin: 4rem 0;
}

.faq-item {
    margin: 2rem 0;
    padding: 1rem;
    border-left: 4px solid var(--primary-color);
    background: var(--card-bg, #f8f9fa);
}

.tier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.tier-card {
    background: var(--card-bg, #ffffff);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.tier-card.featured {
    border: 2px solid var(--primary-color);
    transform: scale(1.05);
}

.price {
    font-size: 1.5rem;
    font-weight: bold;
    margin: 1rem 0;
}

@media (max-width: 768px) {
    .support-grid {
        grid-template-columns: 1fr;
    }
    
    .tier-grid {
        grid-template-columns: 1fr;
    }
    
    .tier-card.featured {
        transform: none;
    }
}

.brand-section, .brand-assets, .press-contact, .press-releases, .media-guidelines {
    margin-bottom: 3rem;
}

.key-stats ul {
    list-style: none;
    padding-left: 0;
}

.logo-downloads {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin: 2rem 0;
}

.sample-logo {
    max-width: 200px;
    height: auto;
}

.color-palette {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.color-box {
    padding: 2rem;
    border-radius: 8px;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.press-list {
    list-style: none;
    padding-left: 0;
}

.press-list li {
    margin-bottom: 1rem;
}

.date {
    color: #666;
    margin-right: 1rem;
}

@media (max-width: 768px) {
    .logo-downloads {
        flex-direction: column;
        text-align: center;
    }
    
    .color-palette {
        grid-template-columns: 1fr;
    }
}

.brand-section {
    margin: 3rem 0;
    padding: 2rem;
    background: var(--background-color);
    border-radius: 8px;
}

.color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.color-swatch {
    width: 100px;
    height: 100px;
    border-radius: 8px;
    margin-bottom: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.typography-examples {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    margin: 1rem 0;
}

.font-example-heading {
    font-size: 1.2rem;
    margin: 1rem 0;
    line-height: 1.6;
}

.icon-examples {
    display: flex;
    gap: 2rem;
    font-size: 2rem;
    margin: 1rem 0;
}

.logo-guidelines {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.brand-logo {
    max-width: 200px;
    height: auto;
}

.voice-guidelines ul,
.imagery-guidelines ul {
    list-style: none;
    padding: 0;
}

.voice-guidelines li,
.imagery-guidelines li {
    margin: 1rem 0;
    padding-left: 1.5rem;
    position: relative;
    list-style: none;
}

.voice-guidelines li:before,
.imagery-guidelines li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--primary-color);
}

@media (max-width: 768px) {
    .color-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .logo-guidelines {
        flex-direction: column;
    }
    
    .icon-examples {
        flex-wrap: wrap;
    }
}

/* Mobile Navigation Styles */
.nav-links {
    display: flex;
    align-items: center;
}

.hamburger {
    display: none;
    background: none;
    border: none;
    font-size: 2.5rem;
    cursor: pointer;
    padding: 0.5rem;
    color: #fff;
}

/* Mobile styles */
@media (max-width: 768px) {
    .hamburger {
        display: block;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 95px;
        left: 0;
        right: 0;
        width: 98%;
        margin: 0 auto;
        background: rgb(4, 131, 122);
        border-radius: 0 0 12px 12px;
        flex-direction: column;
        padding: 1rem;
        z-index: 8888;
        box-shadow: 0 2px 5px rgba(0,0,0,0.6);
    }

    nav {
        position: relative;
    }

    .header,
    .header-thiosphere,
    .header-auxosphere,
    .header-saunosphere,
    .header-agrosphere,
    .header-ergosphere,
    .header-immosphere,
    .header-shadosphere,
    .header-voidosphere,
    .header-isosphere {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        border-radius: 0 0 12px 12px;
        padding: 1rem 0;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        z-index: 9999;
    }

    .overlay.active {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 8887;
    }
}

.sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
    border-radius: 0 0 12px 12px;
}

/* Optional: Add a subtle border to enhance the rounded corners */
.sticky-header nav {
    border-radius: 0 0 12px 12px;
}

/* Card Component System */
.card-container {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-lg);
    margin: var(--spacing-xl) 0;
}

.card {
    flex: 1;
    padding: var(--spacing-xl);
    text-align: center;
    border: 1px solid var(--color-gray);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    background: var(--color-white);
    transition: var(--transition-base);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Card Variants */
.card--elevated {
    box-shadow: var(--shadow-lg);
}

.card--outlined {
    border: 2px solid var(--color-primary);
    box-shadow: none;
}

.card--filled {
    background: var(--color-light-gray);
    border: none;
}

/* Card Content */
.card__header {
    margin-bottom: var(--spacing-md);
}

.card__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-dark-gray);
    margin-bottom: var(--spacing-sm);
}

.card__subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-gray);
    margin-bottom: var(--spacing-md);
}

.card__body {
    margin-bottom: var(--spacing-lg);
}

.card__content {
    color: var(--color-dark-gray);
    line-height: var(--line-height-base);
}

.card__footer {
    margin-top: auto;
}

/* Card Actions */
.card__actions {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
    flex-wrap: wrap;
}

.card__action {
    flex: 1;
    min-width: 120px;
}

@media (max-width: 768px) {
    .card-container {
        flex-direction: column;
    }
    
    .card {
        width: 100%;
        margin-bottom: 1rem;
    }
}

.feature-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

.feature-row {
    border: none;
    background: transparent;
}

.feature-row:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.02);
}

.emoji-cell {
    width: 25%;
    text-align: center;
    padding: 2rem;
}

.emoji-cell p {
    font-size: 4rem;
    margin: 0;
}

.text-cell {
    padding: 2rem;
}

.text-cell p {
    margin: 0;
    line-height: 1.6;
    color: var(--text-color, #333);
}

@media (max-width: 768px) {
    .emoji-cell {
        padding: 1rem;
    }
    
    .emoji-cell p {
        font-size: 3rem;
    }
    
    .text-cell {
        padding: 1rem;
    }
}

/* Extra small screens (mobile phones) */
@media screen and (max-width: 480px) {
    body {
        margin: 4px;
        padding-top: 70px;
        font-size: 14px;
        text-align: center;
    }
    
    .announcement-offer {
        text-align: center !important;
    }

    .container {
        padding: 0 0.5rem;
    }

    .section-generic,
    .section-focus,
    .section-a,
    .section-b,
    .section-c,
    .section-d,
    .section-e,
    .section-f,
    .section-g,
    .section-h {
        padding: 0.5rem;
        margin-bottom: 1.5rem;
    }

    .nav-links {
        top: 85px;
    }

    .logo {
        max-height: 50px;
    }

    .btn {
        padding: 8px 14px;
        font-size: 0.9em;
    }

    .two-column,
    .three-column {
        gap: 1rem;
    }
}

/* Extra large screens */
@media screen and (min-width: 1920px) {
    .container {
        max-width: 1800px;
    }

    body {
        font-size: 18px;
        margin: 30px;
    }

    .nav-links {
        gap: 3rem;
    }

    .logo {
        max-height: 55px;
    }

    .section-generic,
    .section-focus,
    .section-a,
    .section-b,
    .section-c,
    .section-d,
    .section-e,
    .section-f,
    .section-g,
    .section-h {
        padding: 3rem;
        margin-bottom: 2.5rem;
    }

    .two-column {
        gap: 3rem;
    }

    .three-column {
        gap: 3rem;
    }

    .btn {
        padding: 12px 24px;
        font-size: 1.1em;
    }

    .callout {
        padding: 1.5rem;
        font-size: 1.1em;
    }
}

/* Responsive Tables - General */
table {
    width: 98%;
    min-width: 98%;
    margin: 1rem 0;
    border-collapse: collapse;
}

@media (max-width: 768px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        white-space: nowrap;
    }
}

/* Product Matrix and Comparison Tables */
.product-matrix,
.product-comparison {
    width: 98%;
    margin: 1rem auto;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.product-matrix th,
.product-matrix td,
.product-comparison th,
.product-comparison td {
    padding: clamp(0.5rem, 2vw, 1rem);
    text-align: left;
    border-bottom: 1px solid var(--border-color, #ddd);
}

/* Responsive table headers */
@media (max-width: 768px) {
    .product-matrix,
    .product-comparison {
        /* Enable horizontal scrolling for wide tables */
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Optional: Stack layout for very small screens */
    @media (max-width: 480px) {
        .product-matrix tr,
        .product-comparison tr {
            display: flex;
            flex-direction: column;
            border-bottom: 2px solid var(--border-color, #ddd);
            padding: 0.5rem;
        }

        .product-matrix td,
        .product-comparison td {
            display: flex;
            padding: 0.5rem;
            border: none;
        }

        .product-matrix td::before,
        .product-comparison td::before {
            content: attr(data-label);
            font-weight: bold;
            width: 60px;
            min-width: 30px;
        }
    }
}

/* Feature Table */
.feature-table {
    border: none;
    margin: 2rem auto;
}

.feature-row {
    display: flex;
    flex-wrap: wrap;
    border: none;
    background: transparent;
    transition: background-color 0.3s ease;
}

.feature-row:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.02);
}

.emoji-cell {
    width: clamp(60px, 25%, 150px);
    padding: clamp(0.5rem, 2vw, 2rem);
    text-align: center;
}

.emoji-cell p {
    font-size: clamp(2rem, 4vw, 4rem);
    margin: 0;
}

.text-cell {
    flex: 1;
    padding: clamp(0.5rem, 2vw, 2rem);
    min-width: 200px;
}

/* Support Grid and Cards */
.support-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: clamp(1rem, 3vw, 2rem);
    margin: 2rem 0;
}

.support-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(1rem, 3vw, 2rem);
}

/* Tier Grid */
.tier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: clamp(1rem, 3vw, 2rem);
    margin: 2rem 0;
}

.tier-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(1rem, 3vw, 2rem);
}

/* Card Container */
.card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: clamp(1rem, 3vw, 2rem);
    margin: 2rem 0;
}

.card {
    height: 100%;
    padding: clamp(1rem, 3vw, 2rem);
}

/* Color Grid */
.color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: clamp(1rem, 2vw, 2rem);
    margin: 2rem 0;
}

/* Typography and Spacing Utilities */
.typography-examples {
    padding: clamp(1rem, 3vw, 2rem);
    margin: clamp(0.5rem, 2vw, 1rem) 0;
}

.icon-examples {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1rem, 2vw, 2rem);
    padding: clamp(0.5rem, 2vw, 1rem);
}

/* Logo Guidelines */
.logo-guidelines {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: clamp(1rem, 3vw, 2rem);
    align-items: start;
}

/* Responsive Images */
.brand-logo,
.sample-logo {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* Cookie Modal */
.cookie-modal {
    padding: clamp(0.5rem, 2vw, 1rem);
}

.cookie-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: clamp(0.5rem, 2vw, 1rem);
    align-items: center;
}

/* Voice and Imagery Guidelines */
.voice-guidelines,
.imagery-guidelines {
    padding: clamp(0.5rem, 2vw, 1rem);
}

.voice-guidelines li,
.imagery-guidelines li {
    padding: clamp(0.25rem, 1vw, 0.5rem) 0;
    padding-left: 1.5rem;
}

.why-thios-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.why-thios-item {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 1rem;
}

.why-thios-item .emoji {
    font-size: 4rem;
    flex-shrink: 0;
    min-width: 80px;
    text-align: center;
}

.why-thios-item p {
    margin: 0;
    flex: 1;
}

/* Alternate alignment for even items */
.why-thios-item:nth-child(even) {
    flex-direction: row-reverse;
}

/* Why Thios Component */
.why-thios-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    background: var(--color-white);
    box-shadow: var(--shadow-md);
    transition: var(--transition-base);
}

.why-thios-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.why-thios-item .emoji {
    font-size: 3rem;
    min-width: 60px;
    text-align: center;
    flex-shrink: 0;
}

.why-thios-item .content {
    flex: 1;
}

.why-thios-item h3 {
    margin-bottom: var(--spacing-sm);
    color: var(--color-primary);
}

.why-thios-item p {
    color: var(--color-gray);
    line-height: var(--line-height-relaxed);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .why-thios-item {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-md);
    }

    .why-thios-item .emoji {
        font-size: 3rem;
        min-width: 60px;
    }
}

/* Table Breakpoints */
@media (min-width: 481px) and (max-width: 767px) {
    table {
        font-size: 0.9rem;
        margin: 0.75rem auto;
    }

    .product-matrix th,
    .product-matrix td,
    .product-comparison th,
    .product-comparison td {
        padding: 0.75rem;
    }

    /* Adjust cell spacing */
    .feature-table .emoji-cell {
        padding: 1rem;
    }

    .feature-table .emoji-cell p {
        font-size: 1rem;
    }

    .feature-table .text-cell {
        padding: 1rem;
    }

    /* Ensure tables remain scrollable but with better spacing */
    .product-matrix,
    .product-comparison {
        width: 96%;
        min-width: 96%;
        margin: 0.75rem auto;
    }
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
}

.product-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.5rem;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    height: 100%;
    min-width: 200px;
}

.product-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

.product-package {
    max-height: 220px;
    max-width: 220px;
    object-fit: contain;
}

.product-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.product-details h2 {
    margin: 0;
}

.product-details p {
    margin: 0;
}

.product-pricing {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
    margin-top: 1rem;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .product-grid {
        grid-template-columns: 1fr;
    }
}

.support-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.support-item {
    text-align: center;
    padding: 2rem;
    background: #f8f9fa;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.support-item:hover {
    transform: translateY(-5px);
}

.support-item i {
    color: #007bff;
    margin-bottom: 1rem;
}

.license-explanation {
    margin: 3rem 0;
    padding: 2rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.license-explanation ul {
    list-style-type: none;
    padding-left: 0;
}

.license-explanation li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    list-style: none;
}

.license-explanation li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: #007bff;
}

/* Base table styles */
table {
    width: 100%;
    max-width: 100%;
    margin: clamp(1rem, 3vw, 2rem) 0;
    border-collapse: collapse;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

/* Table header and cell styles */
th, td {
    padding: clamp(0.5rem, 2vw, 1rem);
    text-align: left;
    border-bottom: 1px solid #ddd;
    font-size: clamp(0.875rem, 2vw, 1rem);
}

th {
    background-color: #f5f5f5;
    font-weight: 600;
    white-space: nowrap;
}

/* Zebra striping for better readability */
tr:nth-child(even) {
    background-color: #fafafa;
}

tr:hover {
    background-color: #f0f0f0;
}

/* Table container for horizontal scrolling on mobile */
.table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: clamp(1rem, 3vw, 2rem) 0;
    border-radius: 8px;
}

/* Responsive table behavior */
@media (max-width: 768px) {
    /* Option 1: Horizontal scroll for wide tables */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    /* Option 2: Stack layout for basic tables */
    .stack-on-mobile {
        display: block;
    }
    
    .stack-on-mobile thead {
        display: none;
    }
    
    .stack-on-mobile tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #ddd;
        border-radius: 8px;
    }
    
    .stack-on-mobile td {
        display: block;
        text-align: right;
        padding: 0.75rem;
        border-bottom: 1px solid #eee;
    }
    
    .stack-on-mobile td::before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 0.85em;
    }
    
    .stack-on-mobile td:last-child {
        border-bottom: none;
    }
}



/* Optional: Compact table style */
.table-compact {
    font-size: 0.875rem;
}

.table-compact th,
.table-compact td {
    padding: clamp(0.25rem, 1vw, 0.5rem);
}

/* Trademark Page Styles */
.trademark-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.section-intro {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 3rem;
    text-align: center;
}

.trademark-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.trademark-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    background: var(--card-bg);
    border-radius: 8px;
    transition: transform 0.2s ease;
}

.trademark-item:hover {
    transform: translateY(-5px);
}

.trademark-logo {
    height: 60px;
    width: auto;
    margin-bottom: 1rem;
}

.trademark-name {
    font-size: 1.5rem;
    margin: 0;
}

.guidelines-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.guidelines-card {
    padding: 2rem;
    border-radius: 8px;
    background: var(--card-bg);
}

.guidelines-card.allowed {
    border-left: 4px solid var(--success-color);
}

.guidelines-card.not-allowed {
    border-left: 4px solid var(--error-color);
}

.info-card, .contact-card {
    background: var(--card-bg);
    padding: 2rem;
    border-radius: 8px;
    margin: 2rem 0;
    text-align: center;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .trademark-grid {
        grid-template-columns: 1fr;
    }
    
    .guidelines-grid {
        grid-template-columns: 1fr;
    }
}

.legal-content {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1.5rem;
}

.legal-content h1 {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--primary-color);
}

.legal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.legal-section {
    background: var(--surface-color);
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.legal-section h2 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.clean-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.clean-list li {
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.label {
    font-weight: 600;
    margin-right: 0.5rem;
}

@media (max-width: 768px) {
    .legal-grid {
        grid-template-columns: 1fr;
    }
    
    .legal-section {
        padding: 1rem;
    }
}

.tagline-container {
    text-align: center;
    margin: 2rem 0;
}

.section-divider {
    height: 2px;
    background-color: #ddd;
    margin: 1rem 0 2rem;
}

.content-wrapper {
    max-width: 800px;
    margin: 0 auto;
}

.osi-container {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin: 2rem 0;
}

.osi-logo {
    max-width: 150px;
    height: auto;
}

.osi-content {
    flex: 1;
}

.button-container {
    margin-top: 1.5rem;
}

/* Product Carousel Styles */
.carousel-wrapper {
    overflow: hidden;
    position: relative;
    padding: 2rem 0;
}

.product-carousel-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

.product-carousel {
    display: flex;
    gap: 2rem;
    transition: transform 0.3s ease;
}

.product-item {
    flex: 0 0 300px;
    padding: 1.5rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-align: center;
}

.product-logo {
    max-height: 30px;
    margin: 1rem 0;
}

.product-description {
    display: block;
    margin: 1rem 0;
    color: #666;
}

.product-price-container {
    margin: 1.5rem 0;
}

.price-label {
    display: block;
    font-size: 0.9rem;
    color: #666;
}

.product-price {
    display: block;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0.5rem 0;
}

.price-note {
    display: block;
    font-size: 0.8rem;
    color: #666;
}

.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 1rem;
    z-index: 10;
}

.carousel-button.prev {
    left: 0;
}

.carousel-button.next {
    right: 0;
}

/* Product Masonry Grid */
.product-masonry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    padding: 1rem 0;
}

.product-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.product-image {
    position: relative;
    padding: 2rem;
    text-align: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.product-image img:first-child {
    width: 160px;
    height: 160px;
    object-fit: cover;

    transition: transform 0.3s ease;
}

.product-card:hover .product-image img:first-child {
    transform: scale(1.05);
}

.product-content {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.product-content h4 {
    color: #333;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    text-align: center;
}

.product-description {
    color: #666;
    font-size: 1.3rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    text-align: center;
    flex-grow: 1;
}

.product-price-container {
    text-align: center;
    margin-bottom: 1.5rem;
}

.price-label {
    display: block;
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 0.25rem;
}

.product-price {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: #15635E;
    margin-bottom: 0.25rem;
}

.price-note {
    display: block;
    font-size: 0.75rem;
    color: #666;
    line-height: 1.4;
}

.product-content .btn {
    align-self: center;
    width: 100%;
    max-width: 200px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .product-masonry-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
        padding: 0.5rem 0;
    }
    
    .product-card {
        border-radius: 8px;
    }
    
    .product-image {
        padding: 1.5rem;
        min-height: 180px;
    }
    
    .product-image img:first-child {
        width: 140px;
        height: 140px;
    }
    
    .product-content {
        padding: 1rem;
    }
    
    .product-content h4 {
        font-size: 1.1rem;
    }
    
    .product-description {
        font-size: 1.1rem;
    }
    
    .product-logo {
        max-height: 30px;
    }
}

@media (max-width: 480px) {
    .product-masonry-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .product-image {
        padding: 1.25rem;
        min-height: 160px;
    }
    
    .product-image img:first-child {
        width: 120px;
        height: 120px;
    }
    
    .product-logo {
        max-height: 28px;
    }
}

/* Ensure the section maintains proper spacing */
#product-masonry {
    margin-bottom: 2rem;
}

#product-masonry h3 {
    text-align: center;
    margin-bottom: 1rem;
}

#product-masonry hr {
    margin-bottom: 2rem;
}

/* ===== CONSOLIDATED STYLES FOR MEDIA-KIT, PRESS-KIT, AND BLOG-INDEX ===== */

/* Media Kit Styles */
.media-kit-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.company-overview {
    background: #f8f9fa;
    padding: 2rem;
    border-radius: 8px;
    margin-bottom: 3rem;
    border: 2px dashed #ccc;
}

.company-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.stat-card {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border: 2px dashed #15635E;
    transition: all 0.3s ease;
}

.stat-card:hover {
    border-style: solid;
    background-color: #e1f7f5;
    transform: translateY(-2px);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: bold;
    color: #15635E;
    margin-bottom: 0.5rem;
}

.stat-label {
    color: #666;
    font-weight: 500;
}

.assets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.asset-card {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border: 2px dashed #ccc;
    transition: all 0.3s ease;
}

.asset-card:hover {
    border-style: solid;
    background-color: #fefefe;
    transform: translateY(-2px);
}

.asset-card h3 {
    color: #333;
    border-bottom: 2px solid #15635E;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.asset-card ul {
    list-style: none;
    padding: 0;
}

.asset-card li {
    margin-bottom: 0.75rem;
    padding: 0.5rem;
    background: #f8f9fa;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.asset-card li:hover {
    background: #e9ecef;
}

.asset-card a {
    color: #15635E;
    text-decoration: none;
    font-weight: 500;
}

.asset-card a:hover {
    text-decoration: underline;
    color: #0f4a46;
}

.product-showcase {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.product-showcase .product-card {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    text-align: center;
    border: 2px dashed #ccc;
    transition: all 0.3s ease;
}

.product-showcase .product-card:hover {
    border-style: solid;
    background-color: #fefefe;
    transform: translateY(-2px);
}

.product-showcase .product-card img {
    max-width: 120px;
    height: auto;
    margin-bottom: 1rem;
}

.product-showcase .product-card h3 {
    color: #333;
    margin-bottom: 0.5rem;
}

.product-showcase .product-card p {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.4;
}

.brand-guidelines {
    background: #f8f9fa;
    padding: 2rem;
    border-radius: 8px;
    margin: 2rem 0;
    border: 2px dashed #ccc;
}

.guidelines-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.guideline-item {
    background: white;
    padding: 1rem;
    border-radius: 6px;
    border-left: 4px solid #15635E;
    transition: all 0.3s ease;
}

.guideline-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.guideline-item h4 {
    color: #15635E;
    margin-bottom: 0.5rem;
}

.contact-section {
    background: #15635E;
    color: white;
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
    margin-top: 3rem;
}

.contact-section h2 {
    color: white;
    margin-bottom: 1rem;
}

.contact-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.contact-item {
    background: rgba(255,255,255,0.1);
    padding: 1rem;
    border-radius: 6px;
    transition: background-color 0.3s ease;
}

.contact-item:hover {
    background: rgba(255,255,255,0.2);
}

.contact-item h4 {
    color: #E8AF00;
    margin-bottom: 0.5rem;
}

.last-updated {
    text-align: center;
    color: #6c757d;
    font-style: italic;
    margin-bottom: 2rem;
}

/* Press Kit Styles */
.press-kit-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.press-hero {
    background: #f8f9fa;
    padding: 3rem 2rem;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 3rem;
    border: 2px dashed #ccc;
}

.press-hero h1 {
    color: #15635E;
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.press-hero p {
    color: #666;
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

.quick-facts {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    margin: 2rem 0;
    border: 2px dashed #15635E;
}

.quick-facts h2 {
    color: #15635E;
    margin-bottom: 1rem;
}

.facts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.fact-item {
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 6px;
    text-align: center;
}

.fact-item strong {
    color: #15635E;
    display: block;
    font-size: 1.1rem;
}

.press-releases {
    margin: 3rem 0;
}

.press-release {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    border: 2px dashed #ccc;
    transition: all 0.3s ease;
}

.press-release:hover {
    border-style: solid;
    background-color: #fefefe;
    transform: translateY(-2px);
}

.press-release h3 {
    color: #15635E;
    margin-bottom: 0.5rem;
}

.press-release .date {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.press-release p {
    color: #333;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.read-more {
    color: #15635E;
    text-decoration: none;
    font-weight: 500;
}

.read-more:hover {
    text-decoration: underline;
}

.team-section {
    background: #f8f9fa;
    padding: 2rem;
    border-radius: 8px;
    margin: 2rem 0;
    border: 2px dashed #ccc;
}

.team-member {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    margin: 1rem 0;
    border-left: 4px solid #15635E;
}

.team-member h3 {
    color: #15635E;
    margin-bottom: 0.5rem;
}

.team-member .title {
    color: #666;
    font-style: italic;
    margin-bottom: 1rem;
}

.story-angles {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    margin: 2rem 0;
    border: 2px dashed #15635E;
}

.story-angles h2 {
    color: #15635E;
    margin-bottom: 1rem;
}

.story-angles ul {
    list-style: none;
    padding: 0;
}

.story-angles li {
    padding: 0.75rem 0;
    border-bottom: 1px solid #eee;
}

.story-angles li:last-child {
    border-bottom: none;
}

.press-contact {
    background: #15635E;
    color: white;
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
    margin-top: 3rem;
}

.press-contact h2 {
    color: white;
    margin-bottom: 1rem;
}

.press-contact-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.press-contact-item {
    background: rgba(255,255,255,0.1);
    padding: 1rem;
    border-radius: 6px;
    transition: background-color 0.3s ease;
}

.press-contact-item:hover {
    background: rgba(255,255,255,0.2);
}

.press-contact-item h4 {
    color: #E8AF00;
    margin-bottom: 0.5rem;
}

.press-contact-item a {
    color: white;
    text-decoration: none;
}

.press-contact-item a:hover {
    text-decoration: underline;
}

/* Blog Index Styles */
.blog-hero {
    background: linear-gradient(135deg, #15635E 0%, #1a7a73 100%);
    color: white;
    padding: 4rem 2rem;
    margin: 0 auto 3rem auto;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    max-width: 1200px;
}

.blog-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.1)"/><circle cx="10" cy="60" r="0.5" fill="rgba(255,255,255,0.1)"/><circle cx="90" cy="40" r="0.5" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
}

.blog-hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.blog-hero-category {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    backdrop-filter: blur(10px);
}

.blog-hero-title {
    color: white;
    font-size: 3rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.blog-hero-excerpt {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.3rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    max-width: 700px;
    margin: 0;
    text-align: justify;
}

.blog-hero-meta {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
}

.blog-hero-link {
    display: inline-block;
    background: white;
    color: #15635E;
    padding: 1rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.blog-hero-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    background: #f8f9fa;
}

.blog-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    max-width: 400px;
    margin: 0 auto;
}

.blog-stat {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    border: 2px dashed #15635E;
}

.blog-stat .number {
    font-size: 1.5rem;
    font-weight: bold;
    color: #15635E;
    display: block;
}

.blog-stat .label {
    color: #666;
    font-size: 0.9rem;
}

.category-filters {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 2rem 0;
    flex-wrap: wrap;
}

.category-filter {
    padding: 0.5rem 1rem;
    background: white;
    border: 2px dashed #ccc;
    border-radius: 20px;
    color: #666;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.category-filter:hover,
.category-filter.active {
    border-style: solid;
    background-color: #15635E;
    color: white;
}

.blog-masonry {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.blog-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 2px dashed #ccc;
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-style: solid;
}

.blog-image {
    position: relative;
    height: 200px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

.blog-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.blog-categories {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.blog-category {
    background: #15635E;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

.blog-title {
    color: #333;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.blog-excerpt {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1rem;
    flex-grow: 1;
}

.blog-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #888;
    font-size: 0.8rem;
    margin-bottom: 1rem;
}

.blog-read-time {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.card-link {
    color: #15635E;
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.3s ease;
    margin-top: auto;
    align-self: flex-start;
}

.card-link:hover {
    color: #0f4a46;
    text-decoration: underline;
}

.newsletter-section {
    background: #15635E;
    color: white;
    padding: 3rem 2rem;
    border-radius: 8px;
    text-align: center;
    margin-top: 3rem;
}

.newsletter-section h2 {
    color: white;
    margin-bottom: 1rem;
}

.newsletter-section p {
    color: rgba(255,255,255,0.9);
    margin-bottom: 2rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.newsletter-form {
    display: flex;
    gap: 1rem;
    max-width: 400px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.newsletter-form input[type="email"] {
    flex: 1;
    padding: 0.75rem;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    min-width: 200px;
}

.newsletter-form button {
    background: #E8AF00;
    color: #333;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.newsletter-form button:hover {
    background: #fbc114;
}

/* Responsive adjustments for consolidated styles */
@media (max-width: 768px) {
    .media-kit-section,
    .press-kit-section {
        padding: 1rem;
    }
    
    .company-stats,
    .assets-grid,
    .product-showcase,
    .guidelines-grid,
    .contact-info,
    .facts-grid,
    .press-contact-info,
    .blog-stats,
    .blog-masonry {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .category-filters {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 0.5rem;
    }
    
    .newsletter-form {
        flex-direction: column;
    }
    
    .newsletter-form input[type="email"] {
        min-width: auto;
    }
    
    .press-hero,
    .blog-hero {
        padding: 2rem 1rem;
    }
    
    .press-hero h1,
    .blog-hero h1 {
        font-size: 2rem;
    }
}

/* Consolidated Navigation, Dropdown, and Overlay Styles */

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-toggle {
    cursor: pointer;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    min-width: 200px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 1000;
    padding: 0.5rem 0;
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

/* Right-aligned dropdown for items near the right edge */
.dropdown.dropdown-right .dropdown-menu {
    left: auto;
    right: 0;
}

.dropdown-menu li {
    padding: 0;
}

.dropdown-menu a {
    display: block;
    padding: 0.5rem 1rem;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
}

.dropdown-menu a:hover {
    background-color: #f5f5f5;
}

.dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
}

/* Mobile styles */
@media (max-width: 768px) {
    .nav-links {
        display: none;
        width: 100%;
        position: absolute;
        top: 100%;
        left: 0;
        background: #fff;
        padding: 1rem;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        z-index: 999;  /* Above the overlay */
    }
    .nav-links.active {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .nav-links a {
        padding: 0.5rem 0;
        margin-left: 2rem;
        text-align: left;
    }
    .dropdown {
        width: 100%;
    }
    .dropdown-menu {
        position: static;
        display: block;
        background: none;
        box-shadow: none;
        padding-left: 3rem;
        width: 100%;
        opacity: 1;
        visibility: visible;
    }
    .dropdown-menu li {
        margin: 0.5rem 0;
    }
    .dropdown-menu a {
        padding: 0.25rem 0;
        margin-left: 0;
    }
    .dropdown-toggle {
        pointer-events: none;
        margin-left: 2rem;
    }
    .hamburger {
        display: block;
        cursor: pointer;
    }
    .menu-overlay.active {
        display: block;
    }
}

/* Desktop menu styles */
@media (min-width: 769px) {
    .hamburger {
        display: none;
    }
    .nav-links {
        display: flex;
        align-items: center;
    }
    .dropdown-menu {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        background-color: #fff;
        min-width: 200px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        z-index: 1000;
        padding: 0.5rem 0;
        list-style: none;
        margin: 0;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    }
    .dropdown:hover .dropdown-menu {
        opacity: 1;
        visibility: visible;
    }
}

/* Overlay styles */
.menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 998;  /* Just below the mobile menu */
}

/* Mission Statement Page Styles */

.mission-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.hero-mission {
    background: #f8f9fa;
    padding: 3rem 2rem;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 3rem;
    border: 2px dashed #15635E;
}

.hero-mission h1 {
    color: #15635E;
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.hero-mission .mission-statement {
    font-size: 1.3rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    font-weight: 500;
    color: #333;
}

.mission-pillars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.pillar {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    text-align: center;
    border: 2px dashed #15635E;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.pillar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #15635E;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.pillar:hover {
    border-style: solid;
    background-color: #fefefe;
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.pillar:hover::before {
    transform: scaleX(1);
}

.pillar-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: #15635E;
}

.pillar h3 {
    color: #15635E;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.pillar p {
    color: #666;
    line-height: 1.6;
}

.vision-section {
    background: white;
    padding: 3rem 2rem;
    border-radius: 8px;
    margin: 3rem 0;
    border: 2px dashed #15635E;
}

.vision-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.vision-content h2 {
    color: #15635E;
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

.vision-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #666;
    margin-bottom: 2rem;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.value-card {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid #15635E;
    transition: all 0.3s ease;
}

.value-card:hover {
    background: #e1f7f5;
    transform: translateY(-2px);
}

.value-card h4 {
    color: #15635E;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.value-card p {
    color: #666;
    line-height: 1.5;
}

.impact-section {
    background: #f8f9fa;
    padding: 3rem 2rem;
    border-radius: 8px;
    margin: 3rem 0;
    border: 2px dashed #ccc;
}

.impact-section h2 {
    text-align: center;
    color: #15635E;
    margin-bottom: 2rem;
    font-size: 2rem;
}

.impact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.impact-item {
    text-align: center;
    padding: 1.5rem;
    background: white;
    border-radius: 8px;
    border: 2px dashed #15635E;
    transition: all 0.3s ease;
}

.impact-item:hover {
    border-style: solid;
    background-color: #e1f7f5;
    transform: translateY(-2px);
}

.impact-number {
    font-size: 3rem;
    font-weight: bold;
    color: #15635E;
    margin-bottom: 0.5rem;
}

.impact-label {
    color: #333;
    font-weight: 500;
    font-size: 1.1rem;
}

.story-section {
    background: white;
    padding: 3rem 2rem;
    border-radius: 8px;
    margin: 3rem 0;
    border: 2px dashed #15635E;
}

.story-content {
    max-width: 800px;
    margin: 0 auto;
}

.story-content h2 {
    color: #15635E;
    font-size: 2rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.story-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #666;
    margin-bottom: 1.5rem;
}

.cta-section {
    background: #15635E;
    color: white;
    padding: 3rem 2rem;
    border-radius: 8px;
    text-align: center;
    margin-top: 3rem;
}

.cta-section h2 {
    color: white;
    font-size: 2rem;
    margin-bottom: 1rem;
}

.cta-section p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    color: rgba(255,255,255,0.9);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-btn {
    display: inline-block;
    padding: 1rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

/* CTA buttons now use standard .btn-primary */

.cta-btn-secondary {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.cta-btn-secondary:hover {
    background: white;
    color: #15635E;
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .hero-mission {
        padding: 2rem 1rem;
    }
    
    .hero-mission h1 {
        font-size: 2rem;
    }
    
    .hero-mission .mission-statement {
        font-size: 1.1rem;
    }
    
    .mission-pillars {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .values-grid {
        grid-template-columns: 1fr;
    }
    
    .impact-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .vision-section,
    .story-section {
        padding: 2rem 1rem;
    }
}

/* Team Page Styles */

.team-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.hero-team {
    background: #f8f9fa;
    padding: 3rem 2rem;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 3rem;
    border: 2px dashed #15635E;
}

.hero-team h1 {
    color: #15635E;
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.hero-team p {
    color: #666;
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 2rem;
}

.team-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    max-width: 400px;
    margin: 0 auto;
}

.team-stat {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    border: 2px dashed #15635E;
}

.team-stat .number {
    font-size: 1.5rem;
    font-weight: bold;
    color: #15635E;
    display: block;
}

.team-stat .label {
    color: #666;
    font-size: 0.9rem;
}

.team-intro {
    background: white;
    padding: 3rem 2rem;
    border-radius: 8px;
    margin-bottom: 3rem;
    text-align: center;
    border: 2px dashed #15635E;
}

.team-intro h2 {
    color: #15635E;
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

.team-intro p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #666;
    max-width: 800px;
    margin: 0 auto;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.team-member {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: all 0.3s ease;
    border: 2px dashed #ccc;
    position: relative;
}

.team-member::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #15635E;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.team-member:hover {
    border-style: solid;
    background-color: #fefefe;
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.team-member:hover::before {
    transform: scaleX(1);
}

.member-header {
    background: #f8f9fa;
    padding: 2rem;
    text-align: center;
    border-bottom: 1px solid #dee2e6;
}

.member-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #15635E;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    margin: 0 auto 1rem;
    font-weight: bold;
}

.member-name {
    color: #15635E;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.member-title {
    color: #666;
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.member-location {
    color: #888;
    font-size: 0.9rem;
}

.member-content {
    padding: 2rem;
}

.member-bio {
    color: #555;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    font-size: 1rem;
}

.member-expertise {
    list-style: none;
    padding: 0;
    margin-bottom: 1.5rem;
}

.member-expertise li {
    padding: 0.5rem 0;
    color: #666;
    font-size: 0.9rem;
    border-bottom: 1px solid #f8f9fa;
    position: relative;
    padding-left: 1.5rem;
    list-style: none;
}

.member-expertise li:last-child {
    border-bottom: none;
}

.member-expertise li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: #15635E;
    font-weight: bold;
}

.member-contact {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.contact-link {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: #15635E;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.contact-link:hover {
    background: #0f4a46;
    transform: translateY(-2px);
}

.culture-section {
    background: #f8f9fa;
    padding: 3rem 2rem;
    border-radius: 8px;
    margin: 3rem 0;
    border: 2px dashed #ccc;
}

.culture-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.culture-content h2 {
    color: #15635E;
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

.culture-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #666;
    margin-bottom: 2rem;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.value-item {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    text-align: center;
    border: 2px dashed #15635E;
    transition: all 0.3s ease;
}

.value-item:hover {
    border-style: solid;
    background-color: #e1f7f5;
    transform: translateY(-2px);
}

.value-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
    display: block;
}

.value-item h3 {
    color: #15635E;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.value-item p {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.4;
}

.join-section {
    background: #15635E;
    color: white;
    padding: 3rem 2rem;
    border-radius: 8px;
    text-align: center;
    margin-top: 3rem;
}

.join-section h2 {
    color: white;
    font-size: 2rem;
    margin-bottom: 1rem;
}

.join-section p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    color: rgba(255,255,255,0.9);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.join-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.join-btn {
    display: inline-block;
    padding: 1rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

/* Join buttons now use standard .btn-primary */

.join-btn-secondary {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.join-btn-secondary:hover {
    background: white;
    color: #15635E;
    transform: translateY(-2px);
}

/* Community Section Styles */
.community-section {
    margin: 4rem 0;
    padding: 3rem 2rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
}

.community-content {
    max-width: 1200px;
    margin: 0 auto;
}

.community-content h2 {
    color: #15635E;
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.community-content > p {
    text-align: center;
    font-size: 1.2rem;
    color: #666;
    max-width: 800px;
    margin: 0 auto 3rem auto;
    line-height: 1.6;
}

.opportunities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.opportunity-item {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.opportunity-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: #15635E;
}

.opportunity-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: block;
}

.opportunity-item h3 {
    color: #15635E;
    font-size: 1.4rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.opportunity-item p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.opportunity-link {
    display: inline-block;
    background: linear-gradient(135deg, #15635E, #1a7a73);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.opportunity-link:hover {
    background: linear-gradient(135deg, #1a7a73, #15635E);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(21, 99, 94, 0.3);
}

@media (max-width: 768px) {
    .hero-team {
        padding: 2rem 1rem;
    }
    
    .hero-team h1 {
        font-size: 2rem;
    }
    
    .team-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .team-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .join-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .team-intro {
        padding: 2rem 1rem;
    }
    
    .culture-section {
        padding: 2rem 1rem;
    }
    
    /* Community Section Responsive */
    .community-section {
        padding: 2rem 1rem;
        margin: 3rem 0;
    }
    
    .community-content h2 {
        font-size: 2rem;
    }
    
    .community-content > p {
        font-size: 1.1rem;
    }
    
    .opportunities-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .opportunity-item {
        padding: 1.5rem;
    }
    
    .opportunity-icon {
        font-size: 2rem;
    }
    
    .opportunity-item h3 {
        font-size: 1.2rem;
    }
}

/* About Page Styles */

.about-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.hero-about {
    background: #f8f9fa;
    padding: 3rem 2rem;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 3rem;
    border: 2px dashed #15635E;
}

.hero-about h1 {
    color: #15635E;
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.hero-about p {
    color: #666;
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 2rem;
}

.about-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    max-width: 400px;
    margin: 0 auto;
}

.about-stat {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    border: 2px dashed #15635E;
}

.about-stat .number {
    font-size: 1.5rem;
    font-weight: bold;
    color: #15635E;
    display: block;
}

.about-stat .label {
    color: #666;
    font-size: 0.9rem;
}

.company-overview {
    background: white;
    padding: 3rem 2rem;
    border-radius: 8px;
    margin-bottom: 3rem;
    text-align: center;
    border: 2px dashed #15635E;
}

.company-overview h2 {
    color: #15635E;
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

.company-overview p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #666;
    max-width: 800px;
    margin: 0 auto 2rem auto;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.stat-item {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    text-align: center;
    border: 2px dashed #ccc;
    transition: all 0.3s ease;
}

.stat-item:hover {
    border-style: solid;
    background-color: #e1f7f5;
    transform: translateY(-2px);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: bold;
    color: #15635E;
    margin-bottom: 0.5rem;
}

.stat-label {
    color: #333;
    font-weight: 500;
}

.corporate-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.corporate-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: all 0.3s ease;
    border: 2px dashed #ccc;
    position: relative;
}

.corporate-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #15635E;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.corporate-card:hover {
    border-style: solid;
    background-color: #fefefe;
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.corporate-card:hover::before {
    transform: scaleX(1);
}

.card-header {
    background: #f8f9fa;
    padding: 2rem;
    text-align: center;
    border-bottom: 1px solid #dee2e6;
}

.card-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}

.card-title {
    color: #15635E;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.card-subtitle {
    color: #666;
    font-size: 0.9rem;
    font-weight: 500;
}

.card-content {
    padding: 2rem;
}

.card-description {
    color: #555;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    font-size: 1rem;
}

.card-features {
    list-style: none;
    padding: 0;
    margin-bottom: 2rem;
}

.card-features li {
    padding: 0.5rem 0;
    color: #666;
    font-size: 0.9rem;
    border-bottom: 1px solid #f8f9fa;
    position: relative;
    padding-left: 1.5rem;
    list-style: none;
}

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

.card-features li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #15635E;
    font-weight: bold;
}

.card-link {
    display: inline-block;
    background: #15635E;
    color: white;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.card-link:hover {
    background: #0f4a46;
    color: white;
    text-decoration: none;
    transform: translateY(-2px);
}

.contact-section {
    background: #15635E;
    color: white;
    padding: 3rem 2rem;
    border-radius: 8px;
    text-align: center;
    margin-top: 3rem;
}

.contact-section h2 {
    color: white;
    font-size: 2rem;
    margin-bottom: 1rem;
}

.contact-section p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    color: rgba(255,255,255,0.9);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.contact-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.contact-btn {
    display: inline-block;
    padding: 1rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

/* Contact buttons now use standard .btn-primary */

.contact-btn-secondary {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.contact-btn-secondary:hover {
    background: white;
    color: #15635E;
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .hero-about {
        padding: 2rem 1rem;
    }
    
    .hero-about h1 {
        font-size: 2rem;
    }
    
    .corporate-cards {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .contact-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .company-overview {
        padding: 2rem 1rem;
    }
}

/* Services Page Styles */

.services-hero {
    background: #f8f9fa;
    padding: 3rem 2rem;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 3rem;
    border: 2px dashed #15635E;
}

.services-hero h1 {
    color: #15635E;
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.services-hero p {
    color: #666;
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 2rem;
}

.services-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    max-width: 400px;
    margin: 0 auto;
}

.service-stat {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    border: 2px dashed #15635E;
}

.service-stat .number {
    font-size: 1.5rem;
    font-weight: bold;
    color: #15635E;
    display: block;
}

.service-stat .label {
    color: #666;
    font-size: 0.9rem;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.service-card {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border: 2px dashed #ccc;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #15635E;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.service-card:hover {
    border-style: solid;
    background-color: #fefefe;
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.service-card:hover::before {
    transform: scaleX(1);
}

.service-card h2 {
    color: #15635E;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.service-card ul {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.service-card li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
    padding-left: 1.5rem;
    list-style: none;
}

.service-card li:last-child {
    border-bottom: none;
}

.service-card li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #15635E;
    font-weight: bold;
}

.service-card p {
    color: #666;
    line-height: 1.6;
    margin-top: 1rem;
    flex-grow: 1;
}

.service-card .btn {
    margin-top: auto;
    align-self: flex-start;
}

/* Service Benefits Section Styles */
.service-benefits {
    margin: 4rem 0;
    padding: 3rem 2rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.service-benefits h2 {
    color: #15635E;
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.benefit-item {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 2px solid transparent;
    text-align: center;
}

.benefit-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: #15635E;
}

.benefit-icon {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    display: block;
    background: linear-gradient(135deg, #15635E, #1a7a73);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.benefit-item h3 {
    color: #15635E;
    font-size: 1.4rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.benefit-item p {
    color: #666;
    line-height: 1.6;
    font-size: 1rem;
}

/* Responsive Design for Service Benefits */
@media (max-width: 768px) {
    .service-benefits {
        padding: 2rem 1rem;
        margin: 3rem 0;
    }
    
    .service-benefits h2 {
        font-size: 2rem;
    }
    
    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .benefit-item {
        padding: 1.5rem;
    }
    
    .benefit-icon {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }
    
    .benefit-item h3 {
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .service-benefits {
        padding: 1.5rem 1rem;
    }
    
    .service-benefits h2 {
        font-size: 1.75rem;
    }
    
    .benefit-item {
        padding: 1.25rem;
    }
    
    .benefit-icon {
        font-size: 2rem;
    }
    
    .benefit-item p {
        font-size: 0.9rem;
    }
}

/* Service Hero Section Styles */
.service-hero {
    position: relative;
    height: 400px;
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 3rem;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.service-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(21, 99, 94, 0.8) 0%, rgba(26, 122, 115, 0.6) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

.service-hero-content h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.service-hero-content p {
    font-size: 1.3rem;
    max-width: 600px;
    margin: 0;
    opacity: 0.95;
    line-height: 1.6;
    text-align: left;
}

/* Service Overview Section Styles */
.service-overview {
    background: white;
    padding: 3rem 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 3rem;
    text-align: left;
}

.service-overview h2 {
    color: #15635E;
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.service-overview p {
    color: #666;
    font-size: 1.2rem;
    line-height: 1.8;
    max-width: 800px;
    margin: 0;
    text-align: justify;
}

/* Responsive Design for Service Hero */
@media (max-width: 768px) {
    .service-hero {
        height: 300px;
        margin-bottom: 2rem;
    }
    
    .service-hero-content h1 {
        font-size: 2.5rem;
    }
    
    .service-hero-content p {
        font-size: 1.1rem;
        padding: 0 1rem;
    }
    
    .service-overview {
        padding: 2rem 1rem;
        margin-bottom: 2rem;
    }
    
    .service-overview h2 {
        font-size: 2rem;
    }
    
    .service-overview p {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .service-hero {
        height: 250px;
    }
    
    .service-hero-content h1 {
        font-size: 2rem;
    }
    
    .service-hero-content p {
        font-size: 1rem;
    }
    
    .service-overview {
        padding: 1.5rem 1rem;
    }
    
    .service-overview h2 {
        font-size: 1.75rem;
    }
    
    .service-overview p {
        font-size: 1rem;
    }
}

/* Vision Section Styles */
.vision-section {
    background: white;
    padding: 3rem 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 3rem;
    text-align: center;
}

.vision-section h2 {
    color: #15635E;
    font-size: 2.5rem;
    margin-bottom: 2rem;
    font-weight: 700;
}

.vision-section p {
    color: #666;
    font-size: 1.2rem;
    line-height: 1.8;
    max-width: 900px;
    margin: 0 auto 1.5rem auto;
}

.vision-section p:last-child {
    margin-bottom: 0;
}

/* Responsive Design for Vision Section */
@media (max-width: 768px) {
    .vision-section {
        padding: 2rem 1rem;
        margin-bottom: 2rem;
    }
    
    .vision-section h2 {
        font-size: 2rem;
    }
    
    .vision-section p {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .vision-section {
        padding: 1.5rem 1rem;
    }
    
    .vision-section h2 {
        font-size: 1.75rem;
    }
    
    .vision-section p {
        font-size: 1rem;
    }
}

/* Roadmap Section Styles */
.roadmap-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.roadmap-intro {
    text-align: left;
    margin-bottom: 4rem;
}

.roadmap-intro h2 {
    color: #15635E;
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.roadmap-intro p {
    color: #666;
    font-size: 1.2rem;
    line-height: 1.8;
    max-width: 800px;
    margin: 0;
    text-align: justify;
}

/* Timeline Styles */
.roadmap-timeline {
    position: relative;
    margin: 4rem 0;
    padding-bottom: 2rem;
}

.roadmap-timeline::before {
    content: '';
    position: absolute;
    left: 50px;
    top: 0;
    height: 100%;
    width: 4px;
    background: linear-gradient(135deg, #15635E, #1a7a73);
    border-radius: 2px;
}

/* Timeline Phase Styles */
.timeline-phase {
    display: flex;
    margin-bottom: 2rem;
}

.phase-marker {
    flex-shrink: 0;
    width: 100px;
    text-align: center;
    position: relative;
}

.phase-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    display: block;
}

.phase-thumb {
    margin-bottom: 0.5rem;
    display: block;
}

.product-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid #e9ecef;
    background: white;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.product-thumb:hover {
    transform: scale(1.1);
    border-color: #15635E;
}

.phase-status {
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    display: inline-block;
}

.timeline-phase.completed .phase-status {
    background: #28a745;
    color: white;
}

.timeline-phase.current .phase-status {
    background: #15635E;
    color: white;
    animation: pulse 2s infinite;
}

.timeline-phase.upcoming .phase-status {
    background: #6c757d;
    color: white;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

.phase-content {
    flex: 1;
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-left: 2rem;
    position: relative;
}

.phase-content::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 30px;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid white;
}

.phase-content h3 {
    color: #15635E;
    font-size: 1.5rem;
}

/* Timeline Campaign Styles */
.timeline-campaign {
    display: flex;
    margin-bottom: 2rem;
}

.campaign-marker {
    flex-shrink: 0;
    width: 100px;
    text-align: center;
    position: relative;
}

.campaign-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    display: block;
}

.campaign-status {
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    display: inline-block;
}

.timeline-campaign.kickstarter .campaign-status {
    background: #2bde73;
    color: white;
}

.timeline-campaign.wefunder .campaign-status {
    background: #ff6b35;
    color: white;
}

.campaign-content {
    flex: 1;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-left: 2rem;
    border-left: 4px solid;
}

.timeline-campaign.kickstarter .campaign-content {
    border-left-color: #2bde73;
}

.timeline-campaign.wefunder .campaign-content {
    border-left-color: #ff6b35;
}

/* Removed campaign-content::before to fix layout issues */

.campaign-content h3 {
    color: #333;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.campaign-period {
    color: #666;
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 1rem;
    font-style: italic;
}

.campaign-content p {
    color: #555;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.campaign-highlights {
    list-style: none;
    padding: 0;
}

.campaign-highlights li {
    color: #555;
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    line-height: 1.5;
}

.campaign-highlights li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: #15635E;
    font-weight: bold;
}

/* CAD Section Styles */
.cad-section {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem 0;
}

.cad-content {
    display: flex;
    align-items: center;
    gap: 3rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 3rem;
    border-radius: 12px;
    border: 1px solid #dee2e6;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.cad-icon {
    font-size: 4rem;
    flex-shrink: 0;
    background: linear-gradient(135deg, #15635E 0%, #1a7a73 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cad-text {
    flex: 1;
}

.cad-text h3 {
    color: #15635E;
    font-size: 1.8rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.cad-text p {
    color: #333;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    text-align: justify;
}

.cad-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.cad-feature {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: white;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
}

.cad-feature:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #15635E;
}

.feature-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.cad-feature span:last-child {
    font-weight: 500;
    color: #333;
}

/* Responsive adjustments for CAD section */
@media (max-width: 768px) {
    .cad-content {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
        padding: 2rem;
    }
    
    .cad-icon {
        font-size: 3rem;
    }
    
    .cad-features {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
}

@media (max-width: 480px) {
    .cad-features {
        grid-template-columns: 1fr;
    }
    
    .cad-content {
        padding: 1.5rem;
    }
}

/* Legal Pages Styles */
.trademarks-section,
.copyrights-section,
.terms-section,
.privacy-section {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
}

.trademarks-section h1,
.copyrights-section h1,
.terms-section h1,
.privacy-section h1 {
    color: #15635E;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
    text-align: left;
}

.trademarks-section p:first-of-type,
.privacy-section p:first-of-type {
    color: #666;
    font-style: italic;
    margin-bottom: 2rem;
    font-size: 0.9rem;
}

.trademarks-content,
.copyrights-content,
.terms-content,
.privacy-content {
    background: white;
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    line-height: 1.7;
}

.trademarks-content h2,
.copyrights-content h2,
.terms-content h2,
.privacy-content h2 {
    color: #15635E;
    font-size: 1.5rem;
    margin: 2rem 0 1rem 0;
    font-weight: 600;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 0.5rem;
}

.trademarks-content h2:first-child,
.copyrights-content h2:first-child,
.terms-content h2:first-child,
.privacy-content h2:first-child {
    margin-top: 0;
}

.trademarks-content p,
.copyrights-content p,
.terms-content p,
.privacy-content p {
    color: #333;
    margin-bottom: 1.5rem;
    font-size: 1rem;
    text-align: justify;
}

.trademarks-content ul,
.copyrights-content ul,
.terms-content ul,
.privacy-content ul {
    margin: 1rem 0 1.5rem 0;
    padding-left: 1.5rem;
}

.trademarks-content li,
.copyrights-content li,
.terms-content li,
.privacy-content li {
    color: #333;
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.last-updated {
    color: #666;
    font-style: italic;
    font-size: 0.9rem;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #f0f0f0;
}

/* Email Protection Styles */
.email-protected {
    cursor: pointer;
    color: #15635E;
    text-decoration: none;
    border-bottom: 1px dashed #15635E;
    transition: all 0.3s ease;
}

.email-protected:hover {
    color: #0f4a46;
    border-bottom-color: #0f4a46;
}

.email-progressive {
    cursor: pointer;
    color: #15635E;
    text-decoration: none;
    border-bottom: 1px dashed #15635E;
    transition: all 0.3s ease;
    user-select: none;
}

.email-progressive:hover {
    color: #0f4a46;
    border-bottom-color: #0f4a46;
}

.email-progressive.email-visible {
    border-bottom-style: solid;
    font-weight: 600;
}

.email-copy {
    cursor: pointer;
    color: #15635E;
    text-decoration: none;
    border-bottom: 1px dashed #15635E;
    transition: all 0.3s ease;
    position: relative;
}

.email-copy:hover {
    color: #0f4a46;
    border-bottom-color: #0f4a46;
}

.email-copy::after {
    content: ' (click to copy)';
    font-size: 0.8em;
    color: #666;
    font-style: italic;
}

.contact-form-link {
    display: inline-block;
    background: #15635E;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    font-size: 0.9rem;
}

.contact-form-link:hover {
    background: #0f4a46;
    color: white;
    text-decoration: none;
}

.copy-success {
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.phase-period {
    color: #666;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

.phase-content p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.phase-achievements {
    list-style: none;
    padding: 0;
    margin: 0;
}

.phase-achievements li {
    color: #666;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
    padding-left: 1.5rem;
}

.phase-achievements li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #28a745;
    font-weight: bold;
}

.phase-achievements li:last-child {
    border-bottom: none;
}

/* Roadmap Summary */
.roadmap-summary {
    text-align: left;
    background: white;
    padding: 3rem 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-top: 4rem;
}

.roadmap-summary h2 {
    color: #15635E;
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.roadmap-summary p {
    color: #666;
    font-size: 1.2rem;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 0 1.5rem 0;
    text-align: justify;
}

.roadmap-cta {
    margin-top: 2rem;
}

.roadmap-cta .btn {
    margin: 0 0.5rem;
    display: inline-block;
}

/* Responsive Design for Roadmap */
@media (max-width: 768px) {
    .roadmap-section {
        padding: 1rem;
    }
    
    .roadmap-intro h2 {
        font-size: 2rem;
    }
    
    .roadmap-intro p {
        font-size: 1.1rem;
    }
    
    .roadmap-timeline::before {
        left: 30px;
    }
    
    .phase-marker {
        width: 60px;
    }
    
    .phase-icon {
        font-size: 2rem;
    }
    
    .product-thumb {
        width: 50px;
        height: 50px;
    }
    
    .phase-status {
        font-size: 0.8rem;
        padding: 0.2rem 0.5rem;
    }
    
    .phase-content {
        margin-left: 1rem;
        padding: 1.5rem;
    }
    
    .phase-content h3 {
        font-size: 1.3rem;
    }
    
    .roadmap-summary {
        padding: 2rem 1rem;
    }
    
    .roadmap-summary h2 {
        font-size: 2rem;
    }
    
    .roadmap-summary p {
        font-size: 1.1rem;
    }
    
    .roadmap-cta .btn {
        display: block;
        margin: 0.5rem auto;
        max-width: 200px;
    }
}

@media (max-width: 480px) {
    .roadmap-timeline::before {
        left: 20px;
    }
    
    .phase-marker {
        width: 40px;
    }
    
    .phase-icon {
        font-size: 1.5rem;
    }
    
    .product-thumb {
        width: 40px;
        height: 40px;
    }
    
    .phase-content {
        margin-left: 0.5rem;
        padding: 1rem;
    }
    
    .phase-content h3 {
        font-size: 1.2rem;
    }
    
    .roadmap-summary h2 {
        font-size: 1.75rem;
    }
    
    .roadmap-summary p {
        font-size: 1rem;
    }
}

/* Investors Section Styles */
.investors-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.investment-overview {
    text-align: center;
    margin-bottom: 4rem;
}

.investment-overview h2 {
    color: #15635E;
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.investment-overview p {
    color: #666;
    font-size: 1.2rem;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto;
}

/* Market Opportunity */
.market-opportunity {
    margin-bottom: 4rem;
}

.market-opportunity h2 {
    color: #15635E;
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 2rem;
    font-weight: 700;
}

.opportunity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.opportunity-card {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease;
}

.opportunity-card:hover {
    transform: translateY(-4px);
}

.opportunity-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.opportunity-card h3 {
    color: #15635E;
    font-size: 1.3rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.opportunity-card p {
    color: #666;
    line-height: 1.6;
}

/* Competitive Advantages */
.competitive-advantages {
    margin-bottom: 4rem;
}

.competitive-advantages h2 {
    color: #15635E;
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 2rem;
    font-weight: 700;
}

.advantages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}

.advantage-item {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-left: 4px solid #15635E;
}

.advantage-item h3 {
    color: #15635E;
    font-size: 1.3rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.advantage-item p {
    color: #666;
    line-height: 1.6;
}

/* Business Model */
.business-model {
    margin-bottom: 4rem;
}

.business-model h2 {
    color: #15635E;
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 2rem;
    font-weight: 700;
}

.model-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.model-card {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.model-card h3 {
    color: #15635E;
    font-size: 1.4rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.model-card ul {
    list-style: none;
    padding: 0;
}

.model-card li {
    color: #666;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
    padding-left: 1.5rem;
}

.model-card li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #28a745;
    font-weight: bold;
}

.model-card li:last-child {
    border-bottom: none;
}

/* Financial Highlights */
.financial-highlights {
    margin-bottom: 4rem;
}

.financial-highlights h2 {
    color: #15635E;
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 2rem;
    font-weight: 700;
}

.financial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.financial-card {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.financial-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: #15635E;
    margin-bottom: 0.5rem;
}

.financial-label {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
}

.financial-card p {
    color: #666;
    line-height: 1.6;
}

/* Use of Funds */
.use-of-funds {
    margin-bottom: 4rem;
}

.use-of-funds h2 {
    color: #15635E;
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 2rem;
    font-weight: 700;
}

.funds-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.fund-item {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.fund-percentage {
    font-size: 2.5rem;
    font-weight: 700;
    color: #15635E;
    margin-bottom: 0.5rem;
}

.fund-item h3 {
    color: #333;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.fund-item p {
    color: #666;
    line-height: 1.6;
}

/* Investor Contact */
.investor-contact {
    background: white;
    padding: 3rem 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.investor-contact h2 {
    color: #15635E;
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.investor-contact > p {
    color: #666;
    font-size: 1.2rem;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto 2rem auto;
}

.contact-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.contact-item h3 {
    color: #15635E;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.contact-item p {
    color: #666;
    line-height: 1.6;
}

.investor-cta {
    margin-top: 2rem;
}

.investor-cta .btn {
    margin: 0 0.5rem;
    display: inline-block;
}

/* Responsive Design for Investors */
@media (max-width: 768px) {
    .investors-section {
        padding: 1rem;
    }
    
    .investment-overview h2,
    .market-opportunity h2,
    .competitive-advantages h2,
    .business-model h2,
    .financial-highlights h2,
    .use-of-funds h2,
    .investor-contact h2 {
        font-size: 2rem;
    }
    
    .investment-overview p,
    .investor-contact > p {
        font-size: 1.1rem;
    }
    
    .opportunity-grid,
    .advantages-grid,
    .model-grid,
    .financial-grid,
    .funds-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .contact-info {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .investor-cta .btn {
        display: block;
        margin: 0.5rem auto;
        max-width: 200px;
    }
}

@media (max-width: 480px) {
    .investment-overview h2,
    .market-opportunity h2,
    .competitive-advantages h2,
    .business-model h2,
    .financial-highlights h2,
    .use-of-funds h2,
    .investor-contact h2 {
        font-size: 1.75rem;
    }
    
    .investment-overview p,
    .investor-contact > p {
        font-size: 1rem;
    }
    
    .opportunity-card,
    .advantage-item,
    .model-card,
    .financial-card,
    .fund-item {
        padding: 1.5rem;
    }
}

/* Products Page Styles */
.products-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.products-intro {
    text-align: center;
    margin-bottom: 4rem;
}

.products-intro h2 {
    color: #15635E;
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.products-intro p {
    color: #666;
    font-size: 1.2rem;
    line-height: 1.8;
    max-width: 900px;
    margin: 0 auto 1.5rem auto;
}

/* Value Proposition */
.value-proposition {
    margin-bottom: 4rem;
}

.value-proposition h2 {
    color: #15635E;
    font-size: 2.5rem;
    text-align: left;
    margin-bottom: 2rem;
    font-weight: 700;
}

.value-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.value-item {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease;
}

.value-item:hover {
    transform: translateY(-4px);
}

.value-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.value-item h3 {
    color: #15635E;
    font-size: 1.3rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.value-item p {
    color: #666;
    line-height: 1.6;
}

/* Compact Value Proposition for Homepage */
.value-proposition-compact {
    margin: 3rem 0;
    padding: 2rem 0;
}

.value-proposition-compact h2 {
    color: #15635E;
    font-size: 2rem;
    text-align: left;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.value-grid-compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
}

.value-item-compact {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease;
}

.value-item-compact:hover {
    transform: translateY(-2px);
}

.value-icon-compact {
    font-size: 2rem;
    margin-bottom: 0.75rem;
}

.value-item-compact h3 {
    color: #15635E;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.value-item-compact p {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Launch Announcement Container */
.announcement-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* Launch Announcement Banner */
.launch-announcement {
    background: white;
    border: 3px dashed #FFD700;
    border-radius: 12px;
    padding: 1rem 1.5rem;
    margin: 1rem auto 1.5rem auto;
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3);
    position: relative;
    overflow: visible;
    max-width: min(800px, 90vw);
    min-height: 140px;
    width: 100%;
    display: block;
    text-align: center;
}

.launch-announcement::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: subtle-shimmer 4s ease-in-out infinite;
}

@keyframes subtle-shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.announcement-content {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    gap: 2rem;
    min-height: 100px;
    max-width: 100%;
    margin: 0 auto;
}

.announcement-text {
    flex: 1;
    padding: 0.5rem 0;
}

.announcement-title {
    color: #000;
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    margin-top: 0.5rem;
    text-shadow: none;
    text-align: left !important;
}

.announcement-highlight {
    color: #000;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
    margin: 0.25rem 0 0.5rem 0;
    text-shadow: none;
}

.announcement-cta {
    display: inline-block;
    background: #15635E;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(21, 99, 94, 0.3);
    margin-left: 1rem;
    white-space: nowrap;
}

.announcement-cta:hover {
    background: #1a7a73;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(21, 99, 94, 0.4);
}

/* Product Configurator Announcement */
.product-configurator-announcement {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-radius: 12px;
    padding: 2rem;
    margin: 1.5rem 0;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
    position: relative;
    overflow: hidden;
    border: none !important;
}

.product-configurator-announcement::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    animation: configurator-shimmer 4s ease-in-out infinite;
}

@keyframes configurator-shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.configurator-announcement-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.configurator-announcement-icon {
    font-size: 3rem;
    flex-shrink: 0;
}

.configurator-announcement-text {
    flex: 1;
}

.configurator-announcement-text h3 {
    color: white;
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.configurator-announcement-highlight {
    color: white !important;
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.configurator-announcement-features {
    color: white !important;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.configurator-announcement-cta {
    color: white !important;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Override any parent section styling for configurator announcement */
.section-g .configurator-announcement-highlight,
.section-g .configurator-announcement-features,
.section-g .configurator-announcement-cta {
    color: white !important;
}

.configurator-announcement-button {
    margin-top: 1.5rem;
    text-align: center;
}

/* Responsive configurator announcement */
@media (max-width: 768px) {
    .product-configurator-announcement {
        padding: 1.5rem;
    }
    
    .configurator-announcement-content {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .configurator-announcement-icon {
        font-size: 2.5rem;
    }
    
    .configurator-announcement-text h3 {
        font-size: 1.4rem;
    }
    
    .configurator-announcement-highlight {
        font-size: 1rem;
    }
}

/* Large tablets */
@media (max-width: 1024px) and (min-width: 901px) {
    .launch-announcement {
        max-width: min(800px, 85vw);
        width: 100%;
    }
}

/* Medium tablets */
@media (max-width: 900px) and (min-width: 769px) {
    .launch-announcement {
        max-width: min(800px, 80vw);
        width: 100%;
    }
}

/* Mobile screens */
@media (max-width: 768px) {
    .launch-announcement {
        padding: 1rem;
        margin: 1.5rem auto;
        max-width: 95vw;
        width: 100%;
        min-height: 160px;
    }
    
    .announcement-content {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
        min-height: 120px;
    }
    
    .announcement-title {
        font-size: 1.4rem;
        margin-bottom: 0.5rem;
    }
    
    .announcement-highlight {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }
    
    .announcement-cta {
        padding: 0.6rem 1.5rem;
        font-size: 1rem;
        margin-top: 0.5rem;
    }
}

/* Pull Quote Styles */
.pull-quote {
    background: linear-gradient(135deg, #15635E 0%, #1a7a73 100%);
    color: white;
    padding: 2.5rem 3rem;
    margin: 1.5rem 0 0.5rem 0;
    border-radius: 12px;
    position: relative;
    box-shadow: 0 8px 25px rgba(21, 99, 94, 0.3);
    border-left: 6px solid #ffffff;
}

.pull-quote::before {
    content: '"';
    font-size: 4rem;
    color: rgba(255, 255, 255, 0.3);
    position: absolute;
    top: -10px;
    left: 20px;
    font-family: Georgia, serif;
    font-weight: bold;
}

.pull-quote p {
    font-size: 1.3rem;
    line-height: 1.8;
    font-weight: 400;
    margin: 0;
    text-align: justify;
    max-width: 900px;
    margin: 0;
}

.pull-quote strong {
    color: #ffffff;
    font-weight: 600;
}

/* Products Call to Action */
.products-cta {
    background: white;
    padding: 3rem 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: left;
    margin-bottom: 4rem;
}

.products-cta h2 {
    color: #15635E;
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
    text-align: left;
}

.products-cta p {
    color: #666;
    font-size: 1.2rem;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 0 2rem 0;
    text-align: justify;
}

.cta-buttons {
    margin-top: 2rem;
}

.cta-buttons .btn {
    margin: 0 0.5rem;
    display: inline-block;
}

/* Products Showcase */
.products-showcase {
    margin-bottom: 4rem;
}

.products-showcase h2 {
    color: #15635E;
    font-size: 2.5rem;
    text-align: left;
    margin-bottom: 2rem;
    font-weight: 700;
}

/* Responsive Design for Products */
@media (max-width: 768px) {
    .products-section {
        padding: 1rem;
    }
    
    .products-intro h2,
    .value-proposition h2,
    .products-cta h2,
    .products-showcase h2 {
        font-size: 2rem;
    }
    
    .products-intro p,
    .products-cta p {
        font-size: 1.1rem;
    }
    
    .value-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .cta-buttons .btn {
        display: block;
        margin: 0.5rem auto;
        max-width: 200px;
    }
}

@media (max-width: 480px) {
    .products-intro h2,
    .value-proposition h2,
    .products-cta h2,
    .products-showcase h2 {
        font-size: 1.75rem;
    }
    
    .products-intro p,
    .products-cta p {
        font-size: 1rem;
    }
    
    .value-item,
    .products-cta {
        padding: 1.5rem;
    }
}

/* Blog Section Styles */
.blog-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

/* Blog Post Styles */
.blog-post {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
}

.blog-header {
    text-align: center;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid #f0f0f0;
}

.blog-meta {
    margin-bottom: 1rem;
}

.blog-category {
    background: #15635E;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-right: 1rem;
}

.blog-date,
.blog-read-time {
    color: #666;
    font-size: 0.9rem;
    margin-right: 1rem;
}

.blog-header h1 {
    color: #15635E;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

.blog-subtitle {
    color: #666;
    font-size: 1.2rem;
    font-style: italic;
    line-height: 1.6;
}

.blog-content {
    line-height: 1.8;
    color: #333;
}

.blog-lead {
    font-size: 1.3rem;
    font-weight: 500;
    color: #15635E;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: #f8f9fa;
    border-left: 4px solid #15635E;
    border-radius: 0 8px 8px 0;
}

.blog-content h2 {
    color: #15635E;
    font-size: 1.8rem;
    margin: 2.5rem 0 1rem 0;
    font-weight: 600;
}

.blog-content h3 {
    color: #15635E;
    font-size: 1.4rem;
    margin: 2rem 0 1rem 0;
    font-weight: 600;
}

.blog-content p {
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
}

.blog-content ul {
    margin: 1.5rem 0;
    padding-left: 2rem;
}

.blog-content li {
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.blog-cta {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    margin: 3rem 0;
}

.blog-cta h3 {
    color: #15635E;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.blog-cta p {
    color: #666;
    margin-bottom: 1.5rem;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.blog-footer {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid #f0f0f0;
}

.blog-tags {
    margin-bottom: 2rem;
}

.tag {
    background: #f0f0f0;
    color: #666;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    display: inline-block;
}

.blog-share h4 {
    color: #15635E;
    margin-bottom: 1rem;
    font-weight: 600;
}

.share-buttons {
    display: flex;
    gap: 1rem;
}

.share-button {
    background: #15635E;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.9rem;
    transition: background-color 0.3s ease;
}

.share-button:hover {
    background: #1a7a73;
}

/* Related Posts */
.related-posts {
    max-width: 800px;
    margin: 3rem auto 0 auto;
    padding: 2rem;
}

.related-posts h2 {
    color: #15635E;
    font-size: 2rem;
    margin-bottom: 2rem;
    font-weight: 700;
    text-align: center;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.related-post {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.related-post h3 {
    color: #15635E;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.related-post h3 a {
    color: inherit;
    text-decoration: none;
}

.related-post h3 a:hover {
    text-decoration: underline;
}

.related-post p {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Responsive Design for Blog */
@media (max-width: 768px) {
    .blog-section,
    .blog-post {
        padding: 1rem;
    }
    
    .blog-header h1 {
        font-size: 2rem;
    }
    
    .blog-subtitle {
        font-size: 1.1rem;
    }
    
    .blog-lead {
        font-size: 1.2rem;
        padding: 1rem;
    }
    
    .blog-content h2 {
        font-size: 1.6rem;
    }
    
    .blog-content h3 {
        font-size: 1.3rem;
    }
    
    .blog-content p,
    .blog-content li {
        font-size: 1rem;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .related-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 480px) {
    .blog-header h1 {
        font-size: 1.75rem;
    }
    
    .blog-subtitle {
        font-size: 1rem;
    }
    
    .blog-lead {
        font-size: 1.1rem;
    }
    
    .blog-content h2 {
        font-size: 1.4rem;
    }
    
    .blog-content h3 {
        font-size: 1.2rem;
    }
    
    .blog-cta,
    .related-post {
        padding: 1rem;
    }
}

.service-process {
    background: #f8f9fa;
    padding: 3rem 2rem;
    border-radius: 8px;
    margin: 3rem 0;
    border: 2px dashed #ccc;
}

.service-process h2 {
    color: #15635E;
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2rem;
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.process-step {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
    border: 2px dashed #15635E;
    transition: all 0.3s ease;
}

.process-step:hover {
    border-style: solid;
    background-color: #e1f7f5;
    transform: translateY(-2px);
}

.step-number {
    width: 60px;
    height: 60px;
    background: #15635E;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0 auto 1rem;
}

.process-step h3 {
    color: #15635E;
    margin-bottom: 1rem;
}

.process-step p {
    color: #666;
    line-height: 1.6;
}

.service-cta {
    background: #15635E;
    color: white;
    padding: 3rem 2rem;
    border-radius: 8px;
    text-align: center;
    margin-top: 3rem;
}

.service-cta h2 {
    color: white;
    margin-bottom: 1rem;
    font-size: 2rem;
}

.service-cta p {
    color: rgba(255,255,255,0.9);
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.service-features {
    background: white;
    padding: 3rem 2rem;
    border-radius: 8px;
    margin: 3rem 0;
    border: 2px dashed #15635E;
}

.service-features h2 {
    color: #15635E;
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2rem;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.feature-item {
    text-align: center;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.feature-item:hover {
    background: #e1f7f5;
    transform: translateY(-2px);
}

.feature-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: block;
}

.feature-item h3 {
    color: #15635E;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.feature-item p {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .services-hero {
        padding: 2rem 1rem;
    }
    
    .services-hero h1 {
        font-size: 2rem;
    }
    
    .services-grid,
    .process-steps,
    .features-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .service-card,
    .process-step {
        padding: 1.5rem;
    }
}

/* Contact Page Styles */

.contact-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.hero-contact {
    background: #f8f9fa;
    padding: 3rem 2rem;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 3rem;
    border: 2px dashed #15635E;
}

.hero-contact h1 {
    color: #15635E;
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.hero-contact p {
    color: #666;
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin: 3rem 0;
}

.contact-form {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    border: 2px dashed #15635E;
}

.contact-form h2 {
    color: #15635E;
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: #333;
    font-weight: 500;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #e9ecef;
    border-radius: 6px;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: #15635E;
    box-shadow: 0 0 0 3px rgba(21, 99, 94, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.submit-btn {
    background: #15635E;
    color: white;
    padding: 1rem 2rem;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}

.submit-btn:hover {
    background: #0f4a46;
    transform: translateY(-2px);
}

.submit-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}

.contact-info {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    border: 2px dashed #15635E;
}

.contact-info h2 {
    color: #15635E;
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
}

.contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.contact-item:hover {
    background: #e1f7f5;
    transform: translateX(5px);
}

.contact-icon {
    font-size: 1.5rem;
    color: #15635E;
    margin-right: 1rem;
    width: 40px;
    text-align: center;
}

.contact-details h3 {
    color: #333;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

.contact-details p {
    color: #666;
    margin: 0;
}

.social-links {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e9ecef;
}

.social-links h3 {
    color: #15635E;
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.social-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    gap: 1rem;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: #15635E;
    color: white;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1.2rem;
}

.social-link:hover {
    background: #0f4a46;
    transform: translateY(-3px);
    color: white;
}

.success-message {
    background: #d4edda;
    color: #155724;
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    border: 1px solid #c3e6cb;
    display: none;
}

.error-message {
    background: #f8d7da;
    color: #721c24;
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    border: 1px solid #f5c6cb;
    display: none;
}

.loading {
    display: none;
    text-align: center;
    padding: 1rem;
    color: #666;
}

.loading::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #15635E;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
    margin-left: 0.5rem;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.contact-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.stat-card {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
    border: 2px dashed #15635E;
    transition: all 0.3s ease;
}

.stat-card:hover {
    border-style: solid;
    background-color: #fefefe;
    transform: translateY(-4px);
}

.stat-icon {
    font-size: 2.5rem;
    color: #15635E;
    margin-bottom: 1rem;
}

.stat-title {
    color: #333;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.stat-description {
    color: #666;
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .contact-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .hero-contact {
        padding: 2rem 1rem;
    }
    
    .hero-contact h1 {
        font-size: 2rem;
    }
    
    .contact-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .social-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Subscribe Page Styles */

.subscribe-section {
    max-width: 600px;
    margin: 2rem auto;
    padding: 2rem;
}

.subscribe-content {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border: 2px dashed #15635E;
}

.form-container {
    max-width: 400px;
    margin: 0 auto;
}

.form-container .form-group {
    margin-bottom: 1.5rem;
}

.form-container .form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #333;
}

.form-container .form-group input {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.form-container .form-group input:focus {
    outline: none;
    border-color: #15635E;
    box-shadow: 0 0 0 2px rgba(21, 99, 94, 0.1);
}

.subscribe-section .error {
    background: #f8d7da;
    color: #721c24;
    padding: 1rem;
    border-radius: 4px;
    margin: 1rem 0;
    display: none;
}

.subscribe-section .success {
    background: #d4edda;
    color: #155724;
    padding: 1rem;
    border-radius: 4px;
    margin: 1rem 0;
    display: none;
}

.subscribe-section .btn {
    width: 100%;
    padding: 0.75rem;
    background: #15635E;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.subscribe-section .btn:hover {
    background: #0f4a46;
}

.subscribe-section .btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* Verify Page Styles */

.verification-section {
    max-width: 600px;
    margin: 2rem auto;
    padding: 2rem;
}

.verification-content {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    text-align: center;
    border: 2px dashed #15635E;
}

.verification-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.success-icon {
    color: #28a745;
}

.error-icon {
    color: #dc3545;
}

.verification-message {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    color: #333;
}

.verification-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.verification-section .btn {
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    display: inline-block;
}

/* Verification section now uses standard .btn-primary */

.verification-section .btn-secondary {
    background: white;
    color: #15635E;
    border: 2px solid #15635E;
}

.verification-section .btn-secondary:hover {
    background: #15635E;
    color: white;
}

.newsletter-info {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 6px;
    margin-top: 2rem;
    text-align: left;
}

.newsletter-info h3 {
    color: #15635E;
    margin-bottom: 1rem;
}

.newsletter-info ul {
    list-style: none;
    padding: 0;
}

.newsletter-info li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #e9ecef;
    list-style: none;
}

.newsletter-info li:last-child {
    border-bottom: none;
}

.newsletter-info li:before {
    content: "✓";
    color: #28a745;
    font-weight: bold;
    margin-right: 0.5rem;
}

/* Open Hardware License Page Styles */

.license-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.hero-license {
    background: #f8f9fa;
    padding: 3rem 2rem;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 3rem;
    border: 2px dashed #15635E;
}

.hero-license h1 {
    color: #15635E;
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.hero-license p {
    color: #666;
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 2rem;
}

.license-badge {
    display: inline-block;
    background: #15635E;
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.license-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.license-section .stat-card {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
    border: 2px dashed #15635E;
    transition: all 0.3s ease;
}

.license-section .stat-card:hover {
    border-style: solid;
    background-color: #fefefe;
    transform: translateY(-4px);
}

.license-section .stat-icon {
    font-size: 2.5rem;
    color: #15635E;
    margin-bottom: 1rem;
}

.license-section .stat-title {
    color: #333;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.license-section .stat-description {
    color: #666;
    font-size: 0.9rem;
}

.license-content {
    background: white;
    padding: 3rem 2rem;
    border-radius: 8px;
    margin: 3rem 0;
    border: 2px dashed #15635E;
}

.license-content h2 {
    color: #15635E;
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    margin-top: 2.5rem;
}

.license-content h2:first-child {
    margin-top: 0;
}

.license-content p {
    color: #666;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
}

.license-content ul {
    color: #666;
    line-height: 1.8;
    margin-bottom: 2rem;
    padding-left: 1.5rem;
    list-style: none;
}

.license-content li {
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
    list-style: none;
}

.license-content li:before {
    content: "✓";
    color: #15635E;
    font-weight: bold;
    margin-right: 0.5rem;
}

.license-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.license-card {
    background: #f8f9fa;
    padding: 2rem;
    border-radius: 8px;
    border: 2px dashed #ccc;
    transition: all 0.3s ease;
}

.license-card:hover {
    border-style: solid;
    background-color: #e1f7f5;
    transform: translateY(-2px);
}

.license-card h3 {
    color: #15635E;
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.license-card p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.license-card ul {
    list-style: none;
    padding: 0;
}

.license-card li {
    padding: 0.5rem 0;
    color: #666;
    font-size: 0.9rem;
    border-bottom: 1px solid #e9ecef;
    position: relative;
    padding-left: 1.5rem;
    list-style: none;
}

.license-card li:last-child {
    border-bottom: none;
}

.license-card li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: #15635E;
    font-weight: bold;
}

.principles-section {
    background: #f8f9fa;
    padding: 3rem 2rem;
    border-radius: 8px;
    margin: 3rem 0;
    border: 2px dashed #ccc;
}

.principles-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.principles-content h2 {
    color: #15635E;
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

.principles-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #666;
    margin-bottom: 2rem;
}

.principles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.principle-item {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    text-align: center;
    border: 2px dashed #15635E;
    transition: all 0.3s ease;
}

.principle-item:hover {
    border-style: solid;
    background-color: #e1f7f5;
    transform: translateY(-2px);
}

.principle-icon {
    font-size: 2rem;
    color: #15635E;
    margin-bottom: 1rem;
}

.principle-item h3 {
    color: #15635E;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.principle-item p {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.4;
}

.license-section .contact-section {
    background: #15635E;
    color: white;
    padding: 3rem 2rem;
    border-radius: 8px;
    text-align: center;
    margin-top: 3rem;
}

.license-section .contact-section h2 {
    color: white;
    font-size: 2rem;
    margin-bottom: 1rem;
}

.license-section .contact-section p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    color: rgba(255,255,255,0.9);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.license-section .contact-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.license-section .contact-btn {
    display: inline-block;
    padding: 1rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

/* License section now uses standard .btn-primary */

.license-section .contact-btn-secondary {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.license-section .contact-btn-secondary:hover {
    background: white;
    color: #15635E;
    transform: translateY(-2px);
}

.last-updated {
    text-align: center;
    color: #666;
    font-style: italic;
    margin-bottom: 2rem;
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .hero-license {
        padding: 2rem 1rem;
    }
    
    .hero-license h1 {
        font-size: 2rem;
    }
    
    .license-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .license-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .principles-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .license-section .contact-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .license-content {
        padding: 2rem 1rem;
    }
    
    .principles-section {
        padding: 2rem 1rem;
    }
}

/* Product highlight styling */
.product-highlight {
    font-size: 0.85em;
    color: #15635E;
    margin-bottom: 1rem;
    line-height: 1.3;
    font-weight: 500;
}

/* Phone keypad-style product options */
.product-options-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 1.5rem 0;
    max-width: 600px;
}

.product-option-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    cursor: pointer;
    min-height: 120px;
    justify-content: center;
}

.product-option-item:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: #15635E;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.product-option-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: #15635E;
}

.product-option-text {
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.2;
    color: #333;
}

.coming-soon {
    font-style: italic;
    color: #666;
    font-size: 0.9rem;
    margin-top: 1rem;
    text-align: center;
    font-weight: 400;
}

/* Responsive design for product options */
@media (max-width: 768px) {
    .product-options-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .product-option-item {
        padding: 0.75rem;
        min-height: 100px;
    }
    
    .product-option-icon {
        font-size: 1.5rem;
    }
    
    .product-option-text {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .product-options-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .product-option-item {
        flex-direction: row;
        text-align: left;
        padding: 1rem;
        min-height: auto;
    }
    
    .product-option-icon {
        margin-bottom: 0;
        margin-right: 1rem;
        font-size: 1.25rem;
    }
}

/* New Product Options Design */
.product-options-section {
    margin: 2rem 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    overflow: hidden;
    padding: 0 1rem;
    box-sizing: border-box;
}

.product-options-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1.5rem;
    text-align: center;
}

.product-options-grid-new {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    justify-items: center;
    grid-auto-flow: dense;
    justify-content: center;
    box-sizing: border-box;
}

/* Ensure even distribution and prevent orphans */
.product-options-grid-new:has(:nth-child(5):last-child) {
    grid-template-columns: repeat(3, 1fr);
}

.product-options-grid-new:has(:nth-child(4):last-child) {
    grid-template-columns: repeat(2, 1fr);
}

.product-option-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 1rem;
    background: white;
    border-radius: 12px;
    border: 2px solid #e0e0e0;
    transition: all 0.3s ease;
    cursor: pointer;
    min-height: 160px;
    justify-content: space-between;
    width: 100%;
    max-width: 200px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
}

.product-option-card:hover {
    border-color: #15635E;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(21, 99, 94, 0.15);
}

.product-option-icon-new {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    filter: grayscale(100%);
    opacity: 0.8;
    transition: all 0.3s ease;
}

.product-option-card:hover .product-option-icon-new {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}

.product-option-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    height: 100%;
    justify-content: space-between;
}

.product-option-name {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.25rem;
}

.product-option-description {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.3;
    margin-bottom: 0.5rem;
}

.product-option-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: #15635E;
    background: #f0f8f7;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    border: 1px solid #15635E;
    margin-top: auto;
}

/* Learn More Button Styling */
.btn-learn-more {
    width: 66%;
    margin: var(--spacing-xl) auto 0 auto;
    display: block;
    text-align: center;
    justify-content: center;
    background-color: var(--color-secondary);
    color: var(--color-dark-gray);
    border-color: var(--color-dark-gray);
}

/* Section Pricing Layout */
.section-pricing {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    margin-top: 1.5rem;
    width: 100%;
    max-width: 200px;
    margin-left: auto;
}

.btn-add-to-cart {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    opacity: 0.6;
    cursor: not-allowed;
}

.coming-soon-small {
    font-size: 0.75rem;
    color: #999;
    font-style: italic;
    text-align: center;
}

/* Section Header Layout */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.section-header h2 {
    flex: 1;
    margin: 0;
    line-height: 1.3;
}

/* Make section header icons monochrome by default */
.section-header h2 {
    filter: grayscale(100%);
    opacity: 0.8;
    transition: all 0.3s ease;
}

.section-header:hover h2 {
    filter: grayscale(0%);
    opacity: 1;
}

.price-badge-top {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.price-label {
    font-size: 0.75rem;
    color: #999;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.price-amount {
    font-size: 1.1rem;
    font-weight: 700;
    color: #15635E;
    background: #f0f8f7;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    border: 1px solid #15635E;
}

/* Product Value Proposition */
.product-value-prop {
    text-align: center;
    margin: 2rem 0;
    padding: 2rem;
    background: rgba(21, 99, 94, 0.05);
    border-radius: 12px;
    border-left: 4px solid #15635E;
}

.product-value-prop h3 {
    color: #15635E;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.product-value-prop p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #333;
    max-width: 800px;
    margin: 0 auto;
}

/* Responsive design for new product options */
@media (max-width: 768px) {
    .product-options-grid-new {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        max-width: 500px;
    }
    
    .product-option-card {
        padding: 1.25rem 0.75rem;
        min-height: 140px;
    }
    
    .product-option-icon-new {
        font-size: 2rem;
    }
    
    .product-option-name {
        font-size: 0.9rem;
    }
    
    .product-option-description {
        font-size: 0.8rem;
    }
    
    .product-option-price {
        font-size: 1rem;
    }
}

@media (max-width: 600px) {
    .product-options-grid-new {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
        max-width: 400px;
    }
    
    .product-option-card {
        padding: 1rem 0.5rem;
        min-height: 120px;
    }
    
    .product-option-icon-new {
        font-size: 1.75rem;
    }
    
    .product-option-name {
        font-size: 0.85rem;
    }
    
    .product-option-description {
        font-size: 0.75rem;
    }
    
    .product-option-price {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .product-options-grid-new {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        max-width: 300px;
    }
    
    .product-option-card {
        flex-direction: row;
        text-align: left;
        padding: 1rem;
        min-height: auto;
        max-width: none;
    }
    
    .product-option-icon-new {
        margin-bottom: 0;
        margin-right: 1rem;
        font-size: 1.75rem;
        flex-shrink: 0;
    }
    
    .product-option-content {
        align-items: flex-start;
        text-align: left;
    }
}

/* Press Kit Downloads Section */
.press-downloads,
.media-downloads {
    margin: 3rem 0;
    padding: 2rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.press-downloads h2 {
    color: #15635E;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    text-align: center;
    font-weight: 700;
}

.press-downloads .section-description {
    text-align: center;
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 3rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.downloads-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.download-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.download-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: #15635E;
}

.download-card-featured {
    border-color: #15635E;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    position: relative;
}

.download-card-featured::before {
    content: "⭐ Featured";
    position: absolute;
    top: -12px;
    left: 20px;
    background: #15635E;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.download-card-header {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f1f1f1;
}

.download-icon {
    font-size: 2rem;
    margin-right: 1rem;
    background: linear-gradient(135deg, #15635E, #1a7a73);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.download-card-header h3 {
    color: #15635E;
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0;
}

.download-card-content {
    flex: 1;
}

.download-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.download-list li {
    margin-bottom: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f8f9fa;
}

.download-list li:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.download-link {
    display: block;
    color: #333;
    text-decoration: none;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    font-weight: 500;
}

.download-link:hover {
    background: #15635E;
    color: white;
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(21, 99, 94, 0.3);
}

.download-highlight {
    background: linear-gradient(135deg, #15635E, #1a7a73);
    color: white;
    font-weight: 600;
    border-color: #15635E;
}

.download-highlight:hover {
    background: linear-gradient(135deg, #1a7a73, #15635E);
    transform: translateX(4px) scale(1.02);
}

/* Press Release Links */
.press-release-links {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.press-release-links .download-link {
    flex: 1;
    min-width: 120px;
    text-align: center;
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
}

/* Responsive Design for Downloads */
@media (max-width: 768px) {
    .press-downloads {
        padding: 1.5rem;
        margin: 2rem 0;
    }
    
    .press-downloads h2 {
        font-size: 2rem;
    }
    
    .downloads-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .download-card {
        padding: 1.25rem;
    }
    
    .download-card-header {
        margin-bottom: 1rem;
    }
    
    .download-icon {
        font-size: 1.5rem;
        margin-right: 0.75rem;
    }
    
    .download-card-header h3 {
        font-size: 1.2rem;
    }
    
    .press-release-links {
        flex-direction: column;
    }
    
    .press-release-links .download-link {
        flex: none;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .press-downloads {
        padding: 1rem;
    }
    
    .press-downloads h2 {
        font-size: 1.75rem;
    }
    
    .download-card {
        padding: 1rem;
    }
    
    .download-link {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }
}

/* Product Comparison Matrix Styles */
.product-comparison-section {
    margin: 4rem 0;
    padding: 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.product-comparison-section h2 {
    color: #15635E;
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 1rem;
    font-weight: 700;
}

.product-comparison-section p {
    color: #666;
    text-align: center;
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.product-matrix-scroll {
    overflow-x: auto;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.product-comparison {
    width: 100%;
    min-width: 800px;
    border-collapse: collapse;
    background: white;
}

.product-comparison th {
    background: #f8f9fa;
    padding: 1rem;
    border: 1px solid #e9ecef;
    font-weight: 600;
    color: #15635E;
}

.product-comparison th:first-child {
    background: #f8f9fa;
    color: #15635E;
    font-weight: 700;
}

.product-comparison td {
    padding: 0.75rem;
    border: 1px solid #e9ecef;
    text-align: center;
    vertical-align: middle;
}

.product-comparison td:first-child {
    background: #f8f9fa;
    font-weight: 600;
    color: #333;
    text-align: right;
    padding-right: 1rem;
}

.feature-cell {
    font-size: 1.2rem;
    font-weight: 500;
}

.product-name {
    display: block;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.product-name:hover {
    transform: scale(1.05);
}

.product-name .logo {
    height: 15px;
    width: auto;
    display: block;
    margin: 0 auto;
}

/* Options section header */
.product-comparison tr:nth-child(7) td {
    background: #15635E;
    color: white;
    font-weight: 700;
    text-align: center;
    font-size: 1.1rem;
}

/* Responsive Design for Product Comparison */
@media (max-width: 768px) {
    .product-comparison-section {
        padding: 1rem;
        margin: 2rem 0;
    }
    
    .product-comparison-section h2 {
        font-size: 2rem;
    }
    
    .product-comparison-section p {
        font-size: 1rem;
    }
    
    .product-comparison th,
    .product-comparison td {
        padding: 0.5rem;
        font-size: 0.9rem;
    }
    
    .product-name .logo {
        height: 12px;
    }
}

@media (max-width: 480px) {
    .product-comparison-section h2 {
        font-size: 1.75rem;
    }
    
    .product-comparison th,
    .product-comparison td {
        padding: 0.4rem;
        font-size: 0.8rem;
    }
    
    .product-name .logo {
        height: 10px;
    }
}

/* Support Page Styles */
.support-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.support-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
}

.support-card {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease;
}

.support-card:hover {
    transform: translateY(-4px);
}

.support-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.support-card h2 {
    color: #15635E;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.support-card p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* FAQ Section */
.faq-section {
    margin-bottom: 4rem;
}

.faq-section h2 {
    color: #15635E;
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 2rem;
    font-weight: 700;
}

.faq-item {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 1.5rem;
}

.faq-item h3 {
    color: #15635E;
    font-size: 1.3rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.faq-item p {
    color: #666;
    line-height: 1.6;
}

.faq-item a {
    color: #15635E;
    text-decoration: none;
    font-weight: 500;
}

.faq-item a:hover {
    text-decoration: underline;
}

/* Support Tiers */
.support-tiers {
    margin-bottom: 4rem;
}

.support-tiers h2 {
    color: #15635E;
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 2rem;
    font-weight: 700;
}

.tier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.tier-card {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    position: relative;
}

.tier-card.featured {
    border: 3px solid #15635E;
    transform: scale(1.05);
}

.tier-card h3 {
    color: #15635E;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.tier-price {
    font-size: 2rem;
    font-weight: 700;
    color: #15635E;
    margin-bottom: 1.5rem;
}

.tier-card ul {
    list-style: none;
    padding: 0;
    margin-bottom: 2rem;
}

.tier-card li {
    color: #666;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
    padding-left: 1.5rem;
    list-style: none; /* Remove any inherited list styling */
}

.tier-card li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #28a745;
    font-weight: bold;
}

.tier-card li:last-child {
    border-bottom: none;
}

/* Resources Section */
.resources-section {
    margin-bottom: 4rem;
}

.resources-section h2 {
    color: #15635E;
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 2rem;
    font-weight: 700;
}

.resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.resource-card {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease;
}

.resource-card:hover {
    transform: translateY(-4px);
}

.resource-card h3 {
    color: #15635E;
    font-size: 1.3rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.resource-card p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.resource-link {
    color: #15635E;
    text-decoration: none;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border: 2px solid #15635E;
    border-radius: 6px;
    transition: all 0.3s ease;
    display: inline-block;
}

.resource-link:hover {
    background: #15635E;
    color: white;
}

/* Responsive Design for Support */
@media (max-width: 768px) {
    .support-section {
        padding: 1rem;
    }
    
    .support-grid,
    .tier-grid,
    .resources-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .support-tiers h2,
    .faq-section h2,
    .resources-section h2 {
        font-size: 2rem;
    }
    
    .tier-card.featured {
        transform: none;
    }
    
    .support-card,
    .faq-item,
    .tier-card,
    .resource-card {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .support-tiers h2,
    .faq-section h2,
    .resources-section h2 {
        font-size: 1.75rem;
    }
    
    .support-card,
    .faq-item,
    .tier-card,
    .resource-card {
        padding: 1rem;
    }
    
    .support-icon {
        font-size: 2.5rem;
    }
}
/* Simple Collapsible Sections */
.collapsible-header {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 0.75rem 1rem;
    margin: 0.5rem auto;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s ease;
    width: 90%;
    max-width: 90%;
    min-height: 44px;
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

.collapsible-header:hover {
    background: #e9ecef;
}

.collapsible-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #495057;
}

.toggle-icon {
    font-size: 0.8rem;
    color: #6c757d;
    transition: transform 0.2s ease;
}

.collapsible-header.expanded .toggle-icon {
    transform: rotate(180deg);
}

.collapsible-content {
    width: 90%;
    max-width: 90%;
    margin: 0 auto;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    max-height: 0;
    opacity: 0;
}

.collapsible-content.expanded {
    max-height: 2000px;
    opacity: 1;
}

/* Mobile-specific improvements for collapsible headers */
@media (max-width: 768px) {
    .collapsible-header {
        min-height: 48px;
        padding: 16px 20px;
        margin: 0.75rem auto;
    }
    
    .collapsible-header h3 {
        font-size: 1.1rem;
        margin: 0;
    }
    
    .toggle-icon {
        font-size: 1.2rem;
        min-width: 24px;
        text-align: center;
    }
    
    .collapsible-content {
        padding: 16px 20px;
    }
}

/* Thiosphere special styling */
.product-section.thiosphere .collapsible-header {
    background: #96643F;
    border-color: #8B4513;
    color: white;
}

.product-section.thiosphere .collapsible-header h3 {
    color: white;
}

.product-section.thiosphere .collapsible-header .toggle-icon {
    color: white;
}

.product-section.thiosphere .collapsible-header:hover {
    background: #8B4513;
}

/* Shadosphere special styling */
.product-section.shadosphere .collapsible-header {
    background: #666666;
    border-color: #555555;
    color: white;
}

.product-section.shadosphere .collapsible-header h3 {
    color: white;
}

.product-section.shadosphere .collapsible-header .toggle-icon {
    color: white;
}

.product-section.shadosphere .collapsible-header:hover {
    background: #555555;
}

/* Auxosphere special styling */
.product-section.auxosphere .collapsible-header {
    background: #909090;
    border-color: #777777;
    color: white;
}

.product-section.auxosphere .collapsible-header h3 {
    color: white;
}

.product-section.auxosphere .collapsible-header .toggle-icon {
    color: white;
}

.product-section.auxosphere .collapsible-header:hover {
    background: #777777;
}

/* Saunosphere special styling */
.product-section.saunosphere .collapsible-header {
    background: #E25141;
    border-color: #C73E2E;
    color: white;
}

.product-section.saunosphere .collapsible-header h3 {
    color: white;
}

.product-section.saunosphere .collapsible-header .toggle-icon {
    color: white;
}

.product-section.saunosphere .collapsible-header:hover {
    background: #C73E2E;
}

/* Ergosphere special styling */
.product-section.ergosphere .collapsible-header {
    background: #1D63BE;
    border-color: #1A4F9E;
    color: white;
}

.product-section.ergosphere .collapsible-header h3 {
    color: white;
}

.product-section.ergosphere .collapsible-header .toggle-icon {
    color: white;
}

.product-section.ergosphere .collapsible-header:hover {
    background: #1A4F9E;
}

/* Immosphere special styling */
.product-section.immosphere .collapsible-header {
    background: #4D04AC;
    border-color: #3D0388;
    color: white;
}

.product-section.immosphere .collapsible-header h3 {
    color: white;
}

.product-section.immosphere .collapsible-header .toggle-icon {
    color: white;
}

.product-section.immosphere .collapsible-header:hover {
    background: #3D0388;
}

/* Agrosphere special styling */
.product-section.agrosphere .collapsible-header {
    background: #15635E;
    border-color: #0F4A46;
    color: white;
}

.product-section.agrosphere .collapsible-header h3 {
    color: white;
}

.product-section.agrosphere .collapsible-header .toggle-icon {
    color: white;
}

.product-section.agrosphere .collapsible-header:hover {
    background: #0F4A46;
}

/* Mobile Navigation Fix - Ensure hamburger is visible */
@media (max-width: 768px) {
    .header nav .hamburger {
        display: block;
        background: none;
        border: none;
        font-size: 2.5rem;
        cursor: pointer;
        padding: var(--spacing-sm);
        color: var(--color-white);
        position: absolute;
        right: var(--spacing-md);
        top: 50%;
        transform: translateY(-50%);
        z-index: var(--z-modal);
    }
    
    .header nav {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .header nav .logo {
        margin-left: 0;
    }
    
    .header nav .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        background: var(--color-primary);
        border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
        flex-direction: column;
        padding: var(--spacing-md);
        z-index: var(--z-modal);
        box-shadow: var(--shadow-lg);
        max-height: 80vh;
        overflow-y: auto;
    }
    
    .header nav .nav-links.active {
        display: flex;
    }
}

/* Ensure desktop hides hamburger */
@media (min-width: 769px) {
    .header nav .hamburger {
        display: none;
    }
}

/* Text Alignment Fix - Make most copy left-justified */
p, 
.pull-quote p,
.product-description,
.announcement-highlight,
.configurator-announcement-highlight,
.configurator-announcement-features,
.configurator-announcement-cta,
.value-item-compact p,
.mission-statement,
.hero-mission p,
.pillar p,
.section-generic p,
.section-a p,
.section-b p,
.section-c p,
.section-d p,
.section-e p,
.section-f p,
.section-g p,
.section-h p,
blockquote p,
.about-content p,
.team-member p,
.blog-content p,
.service-description p,
.product-info p,
.faq-answer p,
.contact-info p,
.footer-content p {
    text-align: left !important;
}

/* Keep headings and short elements centered */
h1, h2, h3, h4, h5, h6,
.announcement-title,
.configurator-announcement-text h3,
.value-item-compact h3,
.pillar h3,
.team-member h3,
.service-title,
.product-title {
    text-align: center;
}

/* Keep buttons and CTAs centered */
.btn,
.btn-primary,
.btn-learn-more,
.announcement-cta,
.cta-button {
    text-align: center;
}

/* Keep navigation and short elements as they are */
.nav-links,
.logo,
.hamburger,
.language-switcher,
.short-text {
    /* Keep existing alignment */
}

/* Ensure product descriptions are left-justified */
.product-text {
    text-align: left !important;
}

.product-description {
    text-align: left !important;
    line-height: 1.6;
}

/* Pull quote styling - keep italic but left-justified */
.pull-quote p {
    text-align: left !important;
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Value proposition text */
.value-item-compact p {
    text-align: left !important;
    margin-top: 0.5rem;
}

/* Mission statement and longer content */
.mission-statement,
.hero-mission p {
    text-align: left !important;
    line-height: 1.6;
}

/* Blog and content pages */
.blog-content p,
.about-content p,
.service-description p {
    text-align: left !important;
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* Product descriptions in sections */
.product-section .product-description {
    text-align: left !important;
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* WTFosphere enhanced styling */
.wtfosphere-vision {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    border-left: 4px solid #15635E;
}

.wtfosphere-vision h4 {
    color: #15635E;
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.wtfosphere-features {
    margin: 2rem 0;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.feature-item {
    background: #ffffff;
    border-radius: 8px;
    padding: 1.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #e9ecef;
}

.feature-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.feature-item h5 {
    color: #15635E;
    margin-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
}

.feature-item p {
    color: #6c757d;
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0;
}

.wtfosphere-examples {
    background: linear-gradient(135deg, #e8f5e8 0%, #f0f8f0 100%);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    border-left: 4px solid #28a745;
}

.wtfosphere-examples h4 {
    color: #28a745;
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.wtfosphere-examples p {
    color: #495057;
    line-height: 1.6;
    margin: 0;
}

/* WTFosphere responsive design */
@media (max-width: 768px) {
    .feature-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .feature-item {
        padding: 1rem;
    }
    
    .wtfosphere-vision,
    .wtfosphere-examples {
        padding: 1rem;
        margin: 1rem 0;
    }
    
    .wtfosphere-vision h4,
    .wtfosphere-examples h4 {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .feature-grid {
        gap: 0.75rem;
    }
    
    .feature-item {
        padding: 0.75rem;
    }
    
    .wtfosphere-vision,
    .wtfosphere-examples {
        padding: 0.75rem;
    }
}

/* WTFosphere configurator text */
.configurator-announcement-text p {
    text-align: left !important;
    line-height: 1.5;
}

/* Footer and contact information */
.footer-content p,
.contact-info p {
    text-align: left !important;
}

/* Ensure consistent left alignment across all language versions */
[lang='de'] p,
[lang='es'] p,
[lang='fr'] p,
[lang='fi'] p,
[lang='sv'] p {
    text-align: left !important;
}

/* Whole Thiosphere Handbook Section */
.handbook-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.handbook-option {
    text-align: center;
    padding: 1.5rem;
    border: 2px solid #ddd;
    border-radius: 8px;
    background: white;
}

.handbook-option h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--color-primary);
}

.handbook-option .price {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.handbook-option p {
    margin-bottom: 1.5rem;
    color: #666;
}

@media (max-width: 768px) {
    .handbook-options {
        grid-template-columns: 1fr;
    }
}

/* Offer page specific styles */
.feature-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    text-align: left;
}

.feature-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #eee;
    list-style: none;
}

.feature-list li:before {
    content: "✓ ";
    color: var(--color-primary);
    font-weight: bold;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.benefit-item {
    text-align: center;
    padding: 1.5rem;
}

.benefit-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}

.benefit-item h3 {
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.faq-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 2rem;
}

.faq-item {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}

.faq-question {
    background: #f8f9fa;
    padding: 1rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-question:hover {
    background: #e9ecef;
}

.faq-answer {
    padding: 1rem;
    display: none;
    background: white;
}

.faq-toggle {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-primary);
}

.guarantee-content {
    text-align: center;
    padding: 2rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.guarantee-content h2 {
    color: var(--color-primary);
    margin-bottom: 1rem;
}

/* Announcement Banner Component */
.announcement-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
}

.announcement-content .announcement-text {
    flex: 1;
    text-align: center;
}

.announcement-content .announcement-close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: var(--border-radius-sm);
    transition: var(--transition-fast);
}

.announcement-content .announcement-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Mobile Banner Layout Fix */
@media (max-width: 768px) {
    .announcement-content {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-md);
    }
    
    .announcement-content .announcement-text {
        flex: none;
        width: 100%;
    }
    
    .announcement-content .announcement-title {
        font-size: 1.2rem;
        margin-bottom: var(--spacing-sm);
        text-align: center;
    }
    
    .announcement-content .announcement-highlight {
        font-size: 0.9rem;
        margin: 0;
        text-align: center;
    }
    
    .announcement-content .announcement-cta {
        margin-left: 0;
        margin-top: var(--spacing-sm);
        width: fit-content;
        align-self: center;
        padding: var(--spacing-sm) var(--spacing-lg);
        font-size: var(--font-size-base);
        white-space: nowrap;
    }
    
    .announcement-content.launch-announcement {
        padding: 1.25rem;
        margin: var(--spacing-md) 0;
    }
}

/* Ensure desktop layout remains unchanged */
@media (min-width: 769px) {
    .announcement-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }
    
    .announcement-content .announcement-text {
        flex: 1;
    }
    
    .announcement-content .announcement-cta {
        margin-left: var(--spacing-md);
        white-space: nowrap;
    }
}

/* Comprehensive Mobile Navigation Fix */
@media (max-width: 768px) {
    /* Ensure header is properly positioned */
    .header.header--mobile,
    .sticky-header.sticky-header--mobile {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: var(--z-fixed);
        background: var(--color-primary);
        border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
        padding: var(--spacing-sm) 0;
        box-shadow: var(--shadow-md);
    }
    
    /* Ensure nav container is properly structured */
    .header nav {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--spacing-sm) var(--spacing-md);
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Ensure logo is visible */
    .header nav .logo {
        margin-left: 0;
        height: 40px;
        width: auto;
        display: block;
    }
    
    /* Ensure hamburger is visible and properly positioned */
    .header nav .hamburger {
        display: block;
        background: none;
        border: none;
        font-size: 2.5rem;
        cursor: pointer;
        padding: var(--spacing-sm);
        color: var(--color-white);
        position: relative;
        right: 0;
        top: 0;
        transform: none;
        z-index: var(--z-modal);
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Ensure nav-links are properly hidden by default */
    .header nav .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        background: var(--color-primary);
        border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
        flex-direction: column;
        padding: var(--spacing-md);
        z-index: var(--z-modal);
        box-shadow: var(--shadow-lg);
        margin-top: 0;
    }
    
    /* Show nav-links when active */
    .header nav .nav-links.active {
        display: flex;
    }
    
    /* Ensure language switcher is visible in mobile menu */
    .language-switcher {
        display: block !important;
        width: 100% !important;
        margin: 1rem 0 !important;
    }
    
    .language-switcher .mobile-only {
        display: block !important;
    }
    
    .language-switcher .desktop-only {
        display: none !important;
    }
    
    .language-select-dropdown {
        width: 100% !important;
        padding: 12px !important;
        font-size: 16px !important;
        border: 2px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 4px !important;
        background: transparent !important;
        color: white !important;
        min-height: 44px !important;
    }
    
    /* Ensure dropdown menus work in mobile */
    .dropdown {
        width: 100% !important;
        margin: 0.5rem 0 !important;
    }
    
    .dropdown-toggle {
        width: 100% !important;
        padding: 12px !important;
        text-align: left !important;
        background: transparent !important;
        border: none !important;
        color: white !important;
        font-size: 16px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    
    .dropdown-menu {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 4px !important;
        margin-top: 0.5rem !important;
        padding: 0.5rem 0 !important;
    }
    
    .dropdown-menu li a {
        padding: 8px 16px !important;
        color: white !important;
        font-size: 14px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* Ensure body has proper top margin for fixed header on mobile only */
    /* Removed padding-top to fix tagline visibility on desktop */
    
    /* Ensure menu overlay works */
    .menu-overlay {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 9997 !important;
    }
    
    .menu-overlay.active {
        display: block !important;
    }
}

/* Ensure desktop navigation works properly */
@media (min-width: 769px) {
    .hamburger {
        display: none !important;
    }
    
    .nav-links {
        display: flex !important;
        position: static !important;
        background: transparent !important;
        box-shadow: none !important;
        flex-direction: row !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .language-switcher .mobile-only {
        display: none !important;
    }
    
    .language-switcher .desktop-only {
        display: block !important;
    }
    
    body {
        padding-top: 80px !important;
    }
}


/* Product section titles - left justified */
h2.highlight {
    text-align: left !important;
    margin-bottom: 1rem;
}

/* Enhanced Hamburger Icon - Make it clearly visible and clickable */
@media (max-width: 768px) {
    .hamburger {
        display: block !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        font-size: 2rem !important;
        cursor: pointer !important;
        padding: 0.5rem !important;
        color: #fff !important;
        position: absolute !important;
        right: 1rem !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10000 !important;
        min-width: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.2s ease !important;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.5) !important;
        -webkit-tap-highlight-color: rgba(255,255,255,0.3) !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        -khtml-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
        touch-action: manipulation !important;
    }
    
    .hamburger:hover {
        background: transparent !important;
        transform: translateY(-50%) scale(1.05) !important;
    }
    
    .hamburger:active {
        transform: translateY(-50%) scale(0.95) !important;
        background: transparent !important;
    }
    
    .hamburger span[aria-hidden='true'] {
        display: block !important;
        font-weight: bold !important;
        line-height: 1 !important;
        pointer-events: none !important;
    }
    
    /* Ensure the hamburger is always visible and clickable */
    .hamburger:focus {
        outline: 2px solid #E8AF00 !important;
        outline-offset: 2px !important;
    }
}

/* Show product option icons */
.product-option-icon {
    display: block !important;
}

/* Adjust spacing since icons are hidden */
.product-option-card {
    padding: 0.75rem !important;
}

.product-option-content {
    margin-left: 0 !important;
}

/* ========================================
   RESPONSIVE UTILITY SYSTEM
   ======================================== */

/* Mobile First Approach - Base styles are mobile */

/* Small devices (landscape phones, 640px and up) */
@media (min-width: 640px) {
    .container {
        padding-inline: var(--spacing-lg);
    }
    
    .card-container {
        gap: var(--spacing-xl);
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .container {
        padding-inline: var(--spacing-xl);
    }
    
    .card-container {
        flex-direction: row;
    }
    
    .form {
        max-width: 700px;
    }
}

/* Large devices (desktops, 1024px and up) */
@media (min-width: 1024px) {
    .container {
        padding-inline: var(--spacing-2xl);
    }
    
    .card-container {
        gap: var(--spacing-2xl);
    }
    
    .form {
        max-width: 800px;
    }
}

/* Extra large devices (large desktops, 1440px and up) */
@media (min-width: 1440px) {
    .container {
        max-width: 1400px;
    }
}

/* Ultra wide devices (1920px and up) */
@media (min-width: 1920px) {
    .container {
        max-width: 1600px;
    }
}

/* Responsive Typography */
@media (max-width: 640px) {
    :root {
        --font-size-base: 0.9rem;
        --font-size-lg: 1rem;
        --font-size-xl: 1.125rem;
        --font-size-2xl: 1.25rem;
        --font-size-3xl: 1.5rem;
        --font-size-4xl: 1.875rem;
    }
}

/* Responsive Spacing */
@media (max-width: 640px) {
    :root {
        --spacing-xs: 0.125rem;
        --spacing-sm: 0.25rem;
        --spacing-md: 0.5rem;
        --spacing-lg: 0.75rem;
        --spacing-xl: 1rem;
        --spacing-2xl: 1.5rem;
        --spacing-3xl: 2rem;
    }
}

/* Utility Classes for Responsive Design */
.hidden-mobile {
    display: none;
}

@media (min-width: 768px) {
    .hidden-mobile {
        display: block;
    }
    
    .hidden-desktop {
        display: none;
    }
}

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

@media (min-width: 768px) {
    .text-center-mobile {
        text-align: left;
    }
}

/* Responsive Grid System */
.grid {
    display: grid;
    gap: var(--spacing-md);
}

.grid-cols-1 {
    grid-template-columns: repeat(1, 1fr);
}

.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
    .grid-cols-2,
    .grid-cols-3 {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1024px) {
    .grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Trademark Logos Grid */
.trademark-logos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
    padding: 2rem;
    background: var(--color-light-gray);
    border-radius: var(--border-radius-lg);
}

.trademark-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem;
    background: white;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-base);
}

.trademark-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.trademark-logo {
    width: 120px;
    height: 120px;
    object-fit: contain;
    margin-bottom: 1rem;
}

.trademark-placeholder {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray);
    border-radius: var(--border-radius-md);
    margin-bottom: 1rem;
    border: 2px dashed var(--color-dark-gray);
}

.placeholder-text {
    color: var(--color-dark-gray);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-align: center;
    line-height: 1.4;
}

.trademark-item h3 {
    margin: 0;
    color: var(--color-primary);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.trademark-text-list {
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--bg-secondary);
    border-radius: var(--border-radius-md);
    border-left: 4px solid var(--color-primary);
}

.trademark-text-list h3 {
    margin-top: 0;
    color: var(--color-primary);
    font-size: var(--font-size-lg);
}

.trademark-text-list ul {
    margin: 0;
    padding-left: 1.5rem;
}

.trademark-text-list li {
    margin-bottom: 0.5rem;
    font-weight: var(--font-weight-medium);
}

/* Responsive adjustments for trademark grid */
@media (max-width: 768px) {
    .trademark-logos-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 1rem;
        padding: 1rem;
    }
    
    .trademark-item {
        padding: 1rem;
    }
    
    .trademark-logo,
    .trademark-placeholder {
        width: 80px;
        height: 80px;
    }
    
    .trademark-item h3 {
        font-size: var(--font-size-base);
    }
}

/* About Page Hero Image */
.about-hero {
    text-align: center;
    margin: 2rem 0;
    padding: 2rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-hero-image {
    max-width: 100%;
    height: auto;
    border-radius: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-hero-image:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

/* About Page Journey Steps - Left Align Titles */
.product-section h4 {
    text-align: left !important;
}

/* Vision Section - Join the Revolution */
.vision-section {
    background: var(--color-primary);
    color: white;
    padding: 3rem 2rem;
    border-radius: 16px;
    text-align: center;
    margin: 3rem 0;
    box-shadow: 0 8px 32px rgba(21, 99, 94, 0.15);
    border: 2px solid var(--color-primary-dark);
}

.vision-section h3 {
    color: white;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.vision-section p {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.3rem;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

/* Team Page - Constrain Team Grid Width */
.team-grid {
    max-width: 800px;
    margin: 0 auto;
}

/* Index Page - Startup Message Section */
.startup-message {
    background: var(--color-light-gray);
    border: 2px solid var(--color-primary);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    margin: 3rem 0;
    text-align: center;
    box-shadow: 0 4px 20px rgba(21, 99, 94, 0.1);
}

.startup-message h2 {
    color: var(--color-primary);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.startup-message p {
    color: var(--color-gray);
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

/* Idea Video Section */
.idea-video-section {
    text-align: center;
    margin: 1rem 0 1rem 0;
    padding: 2rem 0;
}

.idea-video {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.idea-video:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

/* Product Hero Image */
.product-hero-image {
    text-align: center;
    margin: 2rem 0;
    padding: 1rem 0;
}

.product-hero-image img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-hero-image img:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

/* Clean CTA Section */
.cta-section {
    margin: 4rem 0;
    padding: 4rem 2rem;
    background: var(--color-light-gray);
    border-radius: 20px;
    text-align: center;
}

.cta-content {
    max-width: 1000px;
    margin: 0 auto;
}

.cta-section h2 {
    color: var(--color-primary);
    font-size: 2.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.cta-subtitle {
    font-size: 1.2rem;
    color: var(--color-gray);
    margin-bottom: 3rem;
    line-height: 1.6;
}

.cta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.cta-card {
    background: white;
    padding: 2.5rem 2rem;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.cta-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.cta-icon {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

.cta-card h3 {
    color: var(--color-primary);
    font-size: 1.4rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.cta-card p {
    color: var(--color-gray);
    line-height: 1.6;
    font-size: 1rem;
}

.cta-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 3rem;
}

.cta-actions .btn {
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    display: inline-block;
}

.cta-actions .btn-primary {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

.cta-actions .btn-primary:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(21, 99, 94, 0.3);
}

.cta-actions .btn-outline {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.cta-actions .btn-outline:hover {
    background: var(--color-primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(21, 99, 94, 0.3);
}

@media (max-width: 768px) {
    .cta-section {
        padding: 3rem 1.5rem;
    }
    
    .cta-section h2 {
        font-size: 2rem;
    }
    
    .cta-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .cta-card {
        padding: 2rem 1.5rem;
    }
    
    .cta-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .cta-actions .btn {
        width: 100%;
        max-width: 300px;
    }
}

/* DROPDOWN MENU WIDTH FIX - Added to ensure "Whole Thiosphere Handbook" displays properly */
.dropdown-menu {
    min-width: 320px !important;
    width: auto !important;
}

.dropdown-menu a {
    padding: 0.5rem 1.25rem !important;
    white-space: nowrap !important;
    min-width: 100% !important;
}

/* More specific targeting for header navigation dropdown */
.header .nav-links .dropdown-menu {
    min-width: 320px !important;
    width: auto !important;
}

.header .nav-links .dropdown-menu a {
    padding: 0.5rem 1.25rem !important;
    white-space: nowrap !important;
    min-width: 100% !important;
}

/* Specific targeting for products dropdown - needs to be wide for "Whole Thiosphere Handbook" */
.header .nav-links #products-menu {
    min-width: 300px !important;
    width: auto !important;
    max-width: none !important;
}

.header .nav-links #products-menu a {
    padding: 0.5rem 1.25rem !important;
    white-space: nowrap !important;
    min-width: 100% !important;
    font-size: 1rem !important;
}

/* Specific targeting for about dropdown - can be narrower for shorter items */
.header .nav-links #about-menu {
    min-width: 200px !important;
    width: auto !important;
    max-width: none !important;
}

.header .nav-links #about-menu a {
    padding: 0.5rem 1rem !important;
    white-space: nowrap !important;
    min-width: 100% !important;
    font-size: 1rem !important;
}

/* Specific targeting for support dropdown - can be narrower for shorter items */
.header .nav-links #support-menu {
    min-width: 200px !important;
    width: auto !important;
    max-width: none !important;
}

.header .nav-links #support-menu a {
    padding: 0.5rem 1rem !important;
    white-space: nowrap !important;
    min-width: 100% !important;
    font-size: 1rem !important;
}

/* ========================================
   ONSHAPE CAD GALLERY STYLES
   ======================================== */

.onshape-gallery {
    margin: 1.5rem 0;
    padding: 1rem 0;
    position: relative;
}

.onshape-gallery h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 1rem;
    text-align: center;
    position: relative;
}

.onshape-gallery h4::after {
    content: '← Scroll to see all views →';
    display: block;
    font-size: 0.8rem;
    font-weight: 400;
    color: #6c757d;
    margin-top: 0.25rem;
    opacity: 0.8;
}

.onshape-grid {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 0.75rem;
    max-width: 100%;
    margin: 0 auto;
    padding: 0.5rem 0;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    position: relative;
}

.onshape-grid::-webkit-scrollbar {
    display: none;
}

.onshape-grid {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Navigation arrows for carousel */
.onshape-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(21, 99, 94, 0.9);
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: all 0.3s ease;
    font-size: 18px;
    font-weight: bold;
}

.onshape-nav:hover {
    background: rgba(21, 99, 94, 1);
    transform: translateY(-50%) scale(1.1);
}

.onshape-nav:active {
    transform: translateY(-50%) scale(0.95);
}

.onshape-nav.prev {
    left: 10px;
}

.onshape-nav.next {
    right: 10px;
}

.onshape-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: translateY(-50%);
}

.onshape-nav:disabled:hover {
    transform: translateY(-50%);
    background: rgba(21, 99, 94, 0.9);
}

/* Dark mode scroll indicators */
[data-theme="dark"] .onshape-gallery::before,
[data-theme="dark"] .onshape-gallery::after {
    background: linear-gradient(90deg, rgba(45,55,72,0.8) 0%, transparent 100%);
}

[data-theme="dark"] .onshape-gallery::after {
    background: linear-gradient(270deg, rgba(45,55,72,0.8) 0%, transparent 100%);
}

.onshape-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-base);
    background: var(--color-white);
    border: 1px solid #e1e5e9;
    flex-shrink: 0;
    width: 150px;
    height: 150px;
    scroll-snap-align: start;
}

.onshape-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.onshape-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: var(--transition-base);
    border-radius: var(--border-radius-md);
}

.onshape-item:hover .onshape-image {
    transform: scale(1.05);
}

/* Responsive Design for OnShape Gallery */
@media (max-width: 768px) {
    .onshape-item {
        width: 120px;
        height: 120px;
    }
    
    .onshape-grid {
        gap: 0.5rem;
        padding: 0.5rem 0;
    }
    
    .onshape-gallery h4 {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }
}

@media (max-width: 480px) {
    .onshape-item {
        width: 100px;
        height: 100px;
    }
    
    .onshape-grid {
        gap: 0.4rem;
        padding: 0.4rem 0;
    }
    
    .onshape-gallery {
        margin: 1rem 0;
        padding: 0.75rem 0;
    }
}

/* Ensure all 14 images are accessible */
@media (min-width: 1200px) {
    .onshape-item {
        width: 140px;
        height: 140px;
    }
}

/* Large screens - show more images at once */
@media (min-width: 1600px) {
    .onshape-item {
        width: 130px;
        height: 130px;
    }
    
    .onshape-grid {
        gap: 1rem;
    }
}

/* Dark mode support for OnShape galleries */
[data-theme="dark"] .onshape-item {
    background: #2d3748;
    border-color: #4a5568;
}

[data-theme="dark"] .onshape-gallery h4 {
    color: #68d391;
}

/* OnShape Modal Styles */
.onshape-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    animation: fadeIn 0.3s ease-out;
}

.onshape-modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

.onshape-modal-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.onshape-modal-image {
    width: 100%;
    height: auto;
    max-height: 90vh;
    object-fit: contain;
    display: block;
}

.onshape-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10001;
}

.onshape-modal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10001;
}

.onshape-modal-nav:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: translateY(-50%) scale(1.1);
}

.onshape-modal-nav:active {
    transform: translateY(-50%) scale(0.95);
}

.onshape-modal-nav.prev {
    left: 20px;
}

.onshape-modal-nav.next {
    right: 20px;
}

.onshape-modal-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: translateY(-50%);
}

.onshape-modal-nav:disabled:hover {
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.7);
}

.onshape-modal-close:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: scale(1.1);
}

.onshape-modal-close:active {
    transform: scale(0.95);
}

/* Make OnShape items clickable */
.onshape-item {
    cursor: pointer;
}

.onshape-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Dark mode for modal */
[data-theme="dark"] .onshape-modal-content {
    background: #2d3748;
}

[data-theme="dark"] .onshape-modal-close {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

[data-theme="dark"] .onshape-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

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

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}