/* ========================================
   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 */
}

/* Skip Link - Accessibility */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skip-link:focus {
    position: fixed;
    left: 50%;
    top: 10px;
    transform: translateX(-50%);
    width: auto;
    height: auto;
    overflow: visible;
    z-index: 10000;
    background: var(--color-primary);
    color: var(--color-white);
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
}

/* 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: 0;
    box-sizing: border-box;
    /* Include margin in width calculation */
    overflow-x: hidden;
    /* Prevent horizontal scrollbar */
}

/* When banner is visible, add padding for header + banner */
body.banner-visible {
    padding-top: 120px !important;
    /* Approximate height of header + banner */
}

/* Alternative selector for index page */
body.index-page {
    padding-top: 120px !important;
}

/* CRITICAL: Add padding to hero-section to prevent overlap */
.hero-section,
div.hero-section {
    padding-top: 120px !important;
    margin-top: 0 !important;
}

/* Mobile devices need more spacing due to different header rendering */
@media (max-width: 768px) {

    .hero-section,
    div.hero-section {
        padding-top: 150px !important;
    }
}

/* Ensure main content has proper spacing from fixed header + banner */
main {
    padding-top: 0;
    flex: 1 0 auto;
}

.main-content {
    padding-top: 0;
}




/* 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) !important;
    background-image: none !important;
    background-size: auto !important;
    background-position: initial !important;
    background-repeat: no-repeat !important;
    transition: var(--transition-base);
    /* Force no animations on header background */
    animation: none !important;
    /* Prevent any gradient animations */
    background-attachment: scroll !important;
}

/* Remove any progress bar or loading animation from header */
.header::before,
.header::after {
    display: none !important;
    content: none !important;
    background: none !important;
    animation: none !important;
    transition: none !important;
}

/* Hide any progress bar elements inside header */
.header .progress-bar,
.header progress,
.header .loading,
.header [class*="progress"],
.header [class*="loading"],
.header [id*="progress"],
.header [id*="loading"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}

/* Additional fix for any animated elements in header - BUT EXCLUDE BANNER */
.header *:not(.persistent-offer-banner):not(.persistent-offer-banner *) {
    animation: none !important;
}

/* Specifically target any progress bar animations */
.header .progress-bar__fill,
.header .progress-bar-fill,
.header .progress-fill {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Ultra-specific fix for any scroll progress indicators */
header.header::before,
header.header::after,
.header::before,
.header::after,
header[class*="header"]::before,
header[class*="header"]::after {
    display: none !important;
    content: none !important;
    background: none !important;
    background-color: transparent !important;
    animation: none !important;
    transition: none !important;
    width: 0 !important;
    height: 0 !important;
    position: static !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Fix for any pseudo-elements that might show progress */
.header nav::before,
.header nav::after,
.header>*::before,
.header>*::after {
    display: none !important;
    content: none !important;
    background: none !important;
}

/* RTL-specific fix for Arabic and other RTL languages */
[dir="rtl"] .header::before,
[dir="rtl"] .header::after,
html[dir="rtl"] .header::before,
html[dir="rtl"] .header::after,
[dir="rtl"] header.header::before,
[dir="rtl"] header.header::after {
    display: none !important;
    content: none !important;
    background: none !important;
    background-color: transparent !important;
    animation: none !important;
    transition: none !important;
    width: 0 !important;
    height: 0 !important;
    position: static !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Fix for any scroll progress indicators that might appear at top of page */
body::before,
html::before {
    /* Check if it's a progress bar - hide it */
    display: none !important;
    content: none !important;
    background: none !important;
    height: 0 !important;
    width: 0 !important;
}

/* Specifically hide any top-of-page progress indicators */
body>.progress-bar,
body>[class*="progress"],
body>[id*="progress"],
html>.progress-bar,
html>[class*="progress"],
html>[id*="progress"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
}

/* Hide any progress bars that might be positioned at top */
.progress-bar[style*="top"],
.progress-bar[style*="position"],
[class*="progress"][style*="top"],
[class*="progress"][style*="position"] {
    display: none !important;
}

/* AGGRESSIVE FIX: Completely disable any background animations on header - BUT EXCLUDE BANNER */
.header,
.header nav {
    animation: none !important;
}

/* CRITICAL: Restore banner brand gold background - it was being overridden */
.persistent-offer-banner,
.header .persistent-offer-banner {
    background: linear-gradient(45deg, #E8AF00, #D4A000, #C99700, #D4A000, #E8AF00) !important;
    background-size: 400% 400% !important;
    background-image: linear-gradient(45deg, #E8AF00, #D4A000, #C99700, #D4A000, #E8AF00) !important;
    animation: shimmer 6s ease-in-out infinite !important;
    background-attachment: scroll !important;
    background-position: initial !important;
    background-repeat: no-repeat !important;
}

/* Only restrict background on nav and direct header children (not banner) */
.header nav,
.header>*:not(.persistent-offer-banner) {
    background-image: none !important;
    background-size: auto !important;
    background-position: initial !important;
    background-repeat: no-repeat !important;
    animation: none !important;
    /* Specifically prevent gradient animations */
    background-attachment: scroll !important;
}

/* Specifically target RTL header issues - REMOVED position: relative to fix loading bar */
[dir="rtl"] .header,
html[dir="rtl"] .header,
[dir="rtl"] header {
    overflow: visible !important;
    /* position: fixed is set in fix-header-loading-bar.css */
}

[dir="rtl"] .header::before,
[dir="rtl"] .header::after,
html[dir="rtl"] .header::before,
html[dir="rtl"] .header::after,
[dir="rtl"] header::before,
[dir="rtl"] header::after {
    display: none !important;
    content: none !important;
    background: none !important;
    background-color: transparent !important;
    animation: none !important;
    transition: none !important;
    transform: none !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    position: static !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/* 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);
}

/* Header Bottom - Tagline Section */
.header-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
    padding: 0.25rem 0;
    margin: 0;
    background: transparent;
}

.header-tagline,
#tagline {
    text-align: center;
    margin: 0 auto;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: white;
}

/* 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); */
    opacity: 0.8;
}

.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;
}

.footer-column ul li {
    list-style-type: none;
}

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 - Animated gold gradient with shine */
.persistent-offer-banner {
    display: none;
    background: linear-gradient(90deg, #E8AF00 0%, #E8AF00 40%, #FFF176 50%, #E8AF00 60%, #E8AF00 100%);
    background-size: 200% 100%;
    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 - bright shine sweep */
@keyframes shimmer {
    0% {
        background-position: 200% 50%;
    }

    100% {
        background-position: -200% 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: stretch; /* Make buttons same height */
    gap: var(--spacing-sm);
}

/* Banner button overrides - more prominent on golden background */
.banner-actions .btn,
.banner-actions .btn-secondary,
.banner-actions .btn-primary {
    min-width: 80px;
    max-width: 80px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    line-height: 1.2;
}

.banner-actions .btn-secondary,
.persistent-offer-banner .btn-secondary {
    background: #1a1a1a;
    color: #ffd700;
    border: 2px solid #1a1a1a;
    border-radius: 6px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.banner-actions .btn-secondary:hover,
.persistent-offer-banner .btn-secondary:hover {
    background: #333;
    color: #fff;
    border-color: #333;
    transform: translateY(-1px);
}

.banner-actions .btn-primary,
.persistent-offer-banner .btn-primary {
    background: #15635E;
    color: #fff;
    border: 2px solid #15635E;
    border-radius: 6px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.banner-actions .btn-primary:hover,
.persistent-offer-banner .btn-primary:hover {
    background: #1e7a73;
    border-color: #1e7a73;
    transform: translateY(-1px);
}

.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 */

/* Account Icon Font Awesome styling - Now uses .dropdown-toggle */
.header nav .dropdown-toggle i.fa-user,
.header nav .account-toggle i.fa-user,
.header nav .account-dropdown .account-toggle i.fa-user {
    font-size: 1.1rem !important;
    color: #ffffff !important;
    display: inline-block !important;
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 6 Brands" !important;
    font-weight: 900 !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
}

/* Target dropdown-toggle that contains fa-user icon */
.header nav .dropdown-toggle i.fa-user,
.header nav .dropdown[aria-controls="account-menu"] .dropdown-toggle,
.header nav .account-toggle,
.header nav .account-dropdown .account-toggle {
    color: #ffffff !important;
}

.header nav .dropdown-toggle i.fa-user,
.header nav .dropdown[aria-controls="account-menu"] .dropdown-toggle *,
.header nav .account-toggle *,
.header nav .account-dropdown .account-toggle * {
    color: #ffffff !important;
}

/* Ensure Font Awesome user icon shows */
.header nav .dropdown-toggle i.fa-user::before,
.header nav .account-toggle i.fa-user::before {
    content: "\f007" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Remove any pseudo-element account icons */
.header nav .dropdown-toggle::after,
.header nav .account-toggle::after {
    content: none !important;
    display: none !important;
}

/* Ensure account dropdown toggle is visible - target by aria-controls */
.header nav .dropdown-toggle[aria-controls="account-menu"],
.header nav .dropdown:has(.dropdown-toggle[aria-controls="account-menu"]) .dropdown-toggle {
    color: #ffffff !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: flex !important;
    align-items: center !important;
}

/* Ensure the icon inside account dropdown is visible */
.header nav .dropdown-toggle[aria-controls="account-menu"] i.fa-user {
    color: #ffffff !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: inline-block !important;
}

/* 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;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.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;
    background: transparent;
}

.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: transparent;
    color: white;
    box-shadow: none;
}

.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: 600px;
    /* Increased height significantly to force horizontal clipping */
    object-fit: cover;
    object-position: center;
    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;
}

/* Base styles for product sections on index page */
.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 {
    border: 2px solid transparent !important;
    /* Reserve space for border */
    box-shadow: none;
    transition: all 0.3s ease;
    margin-bottom: 2rem;
    /* Ensure spacing */
    border-radius: 12px;
    /* Smooth corners */
    padding: 2rem;
    /* Ensure padding */
}

/* Hover effects: Shadow and Dotted Border */
.index-page .section-a:hover,
.index-page .section-b:hover,
.index-page .section-c:hover,
.index-page .section-d:hover,
.index-page .section-f:hover,
.index-page .section-g:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
    border: 2px dotted #15635E !important;
    transform: translateY(-4px);
    /* Slight lift */
}

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

.index-page .section-b {
    background-color: #e1f7f5 !important;
    /* Agrosphere - Green/Teal tint */
}

.index-page .section-c {
    background-color: #dbe9fb !important;
    /* Blue tint */
}

.index-page .section-d {
    background-color: #f3e5f5 !important;
    /* Immosphere - Purple tint */
}

.index-page .section-f {
    background-color: #f9ece3 !important;
    /* Thiosphere - Beige/Wood tint */
}

.index-page .section-g {
    background-color: #fbf9f2 !important;
    /* Yellow tint */
}

.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;
    /* Use auto-fit to prevent orphan items on last row */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* If there's an odd number of items and last item is alone, make it span or center */
.prototype-grid-item:last-child:nth-child(3n+1) {
    /* When 1, 4, 7... items - last item alone after full rows of 3 */
    /* Center it by using grid-column on larger screens */
}

@media (min-width: 769px) {
    .prototype-grid {
        /* On desktop, prefer 3 columns but let items flow naturally */
        grid-template-columns: repeat(3, 1fr);
    }

    /* Handle orphan: if last item is alone on its row (item count mod 3 = 1) */
    .prototype-grid-item:last-child:nth-child(3n+1):not(:first-child) {
        grid-column: 2; /* Center the orphan in the middle column */
    }

    /* Handle 2 orphans: if 2 items on last row (item count mod 3 = 2) */
    .prototype-grid-item:nth-last-child(2):nth-child(3n+1) {
        grid-column: 1; /* First of pair stays left */
    }
    .prototype-grid-item:last-child:nth-child(3n+2) {
        grid-column: 3; /* Second of pair goes right, leaving middle empty */
    }
}

.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);
        gap: 0.5rem;
        margin: 1.5rem 0;
    }

    .prototype-grid-item {
        border-radius: 6px;
    }

    /* Handle orphan on 2-column mobile: make last item span full width if alone */
    .prototype-grid-item:last-child:nth-child(odd) {
        grid-column: 1 / -1; /* Span full width */
    }
}

/* Very small screens: stack to single column to avoid any orphans */
@media (max-width: 480px) {
    .prototype-grid {
        grid-template-columns: 1fr;
    }

    .prototype-grid-item:last-child:nth-child(odd) {
        grid-column: auto; /* Reset span */
    }
}

/* 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-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-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: white;
    color: #333;
    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(3, 1fr);
    gap: 2rem;
    margin: 3rem 0;
}

/* Handle orphan items in team grid */
/* Single orphan (1, 4, 7... items): center the last item */
.team-grid > .team-member:last-child:nth-child(3n+1):not(:first-child) {
    grid-column: 2; /* Center in middle column */
}

/* Two items on last row (2, 5, 8... items): spread them with gap */
.team-grid > .team-member:nth-last-child(2):nth-child(3n+1) {
    grid-column: 1;
}
.team-grid > .team-member:last-child:nth-child(3n+2) {
    grid-column: 3;
}

/* Tablet: 2 columns - handle orphans */
@media (max-width: 900px) and (min-width: 601px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    /* Reset 3-col orphan handling */
    .team-grid > .team-member:last-child:nth-child(3n+1):not(:first-child),
    .team-grid > .team-member:nth-last-child(2):nth-child(3n+1),
    .team-grid > .team-member:last-child:nth-child(3n+2) {
        grid-column: auto;
    }

    /* 2-col orphan: last item alone spans full width */
    .team-grid > .team-member:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        max-width: 400px;
        justify-self: center;
    }
}

.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: #f8f9fa;
    color: #333;
    padding: 3rem 2rem;
    border-radius: 12px;
    text-align: center;
    margin-top: 3rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #e9ecef;
}

.join-section h2 {
    color: #15635E;
    font-size: 2rem;
    margin-bottom: 1rem;
}

.join-section p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    color: #666;
    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: 640px) {
    .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: transparent;
    padding: 3rem 2rem;
    text-align: center;
    margin-bottom: 3rem;
    border: none;
}

.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: white;
    color: #333;
    padding: 3rem 2rem;
    border-radius: 8px;
    text-align: center;
    margin-top: 3rem;
}

.contact-section h2 {
    color: #15635E;
    font-size: 2rem;
    margin-bottom: 1rem;
}

.contact-section p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    color: #666;
    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: 1200px;
    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(2, 1fr);
    /* Default: 2 columns */
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
}

/* 2-column orphan handling: last item alone spans full or centers */
.value-grid-compact > .value-item-compact:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: 300px;
    justify-self: center;
}

/* On larger screens, use 3 columns (3x2 layout) */
@media (min-width: 768px) {
    .value-grid-compact {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Reset 2-col orphan handling */
    .value-grid-compact > .value-item-compact:last-child:nth-child(odd) {
        grid-column: auto;
        max-width: none;
        justify-self: auto;
    }

    /* 3-column orphan handling */
    /* Single orphan: center it */
    .value-grid-compact > .value-item-compact:last-child:nth-child(3n+1):not(:first-child) {
        grid-column: 2;
    }

    /* Two items on last row: spread them */
    .value-grid-compact > .value-item-compact:nth-last-child(2):nth-child(3n+1) {
        grid-column: 1;
    }
    .value-grid-compact > .value-item-compact:last-child:nth-child(3n+2) {
        grid-column: 3;
    }
}

/* On very small screens, single column to avoid orphans entirely */
@media (max-width: 480px) {
    .value-grid-compact {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .value-grid-compact > .value-item-compact:last-child:nth-child(odd) {
        grid-column: auto;
        max-width: none;
        justify-self: 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;
}

.value-item-highlight {
    background: linear-gradient(135deg, #f0f9f8 0%, #e8f5f3 100%);
    border: 2px solid #15635E;
    box-shadow: 0 4px 12px rgba(21, 99, 94, 0.15);
    transform: scale(1.02);
}

.value-item-highlight:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 16px rgba(21, 99, 94, 0.2);
}

.value-item-highlight h3 {
    color: #15635E;
    font-weight: 700;
}

/* 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;
    }
}

/* Configurator CTA Banner - Footer */
.configurator-cta-banner {
    max-width: min(800px, 90vw);
    margin: 1rem auto 1.5rem auto;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #15635E 0%, #1a7a74 100%);
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(21, 99, 94, 0.25);
}

.configurator-cta-content {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.configurator-cta-visual {
    font-size: 2.5rem;
    color: rgba(255, 255, 255, 0.9);
    flex-shrink: 0;
}

.configurator-cta-text {
    flex: 1;
}

.configurator-cta-text h3 {
    color: white;
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
}

.configurator-cta-text p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.4;
}

.configurator-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #E8AF00;
    color: #000;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1rem;
    border: 2px solid #000;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.configurator-cta-button:hover {
    background: #f5bc1a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
    .configurator-cta-content {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .configurator-cta-visual {
        font-size: 2rem;
    }

    .configurator-cta-text h3 {
        font-size: 1.1rem;
    }

    .configurator-cta-text p {
        font-size: 0.9rem;
    }
}

/* 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;
    max-width: 900px;
    margin: 0 auto;
}

.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;
    max-width: 1000px;
    margin: 0 auto;
}

.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 */
}

/* ==========================================================
   Language Switcher Component - Base Styles
   Used by www, blog, and store
   ========================================================== */
.language-switcher {
    position: relative;
    display: inline-block;
    z-index: 2000;
}

.language-dropdown {
    position: relative;
}

.language-toggle {
    background: transparent;
    border: none;
    border-radius: 4px;
    color: white;
    padding: 4px 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.3s ease;
    min-height: 28px;
}

.language-toggle:hover,
.language-toggle:focus {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    transform: translateY(-1px);
}

.current-lang {
    display: flex;
    align-items: center;
    gap: 6px;
}

.lang-code {
    font-weight: bold;
    font-size: 12px;
    color: #15635E;
    background: rgba(255, 255, 255, 0.2);
    padding: 1px 4px;
    border-radius: 3px;
    margin-right: 3px;
}

.lang-name {
    font-size: 11px;
}

.dropdown-arrow {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.language-toggle[aria-expanded="true"] .dropdown-arrow {
    transform: rotate(180deg);
}

.language-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 150px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    margin-top: 2px;
    padding: 0;
    list-style: none;
}

.language-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.language-menu li {
    list-style: none;
    padding: 0;
    margin: 0;
}

.language-option {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    color: #2C2C2C;
    text-decoration: none;
    border-bottom: 1px solid #EEEEEE;
    transition: background-color 0.2s ease;
    min-height: 28px;
}

.language-option:hover,
.language-option:focus {
    background-color: #F8F9FA;
    color: #1D63BE;
    outline: 2px solid #1D63BE;
    outline-offset: -2px;
}

.language-option[aria-selected="true"] {
    background-color: #E3F2FD;
    color: #1D63BE;
    font-weight: 600;
}

.language-option:last-child {
    border-bottom: none;
}

/* Ensure dropdown menu items have readable dark text */
.language-menu .language-option .lang-code {
    color: #15635E;
    background: rgba(21, 99, 94, 0.1);
}

.language-menu .language-option .lang-name {
    color: #2C2C2C;
}

/* Mobile language select (native <select> for touch devices) */
.language-select-dropdown {
    padding: 4px 6px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: white;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    min-height: 28px;
}

.language-select-dropdown:focus {
    border: none;
    background: rgba(255, 255, 255, 0.1);
    outline: 2px solid #E8AF00;
    outline-offset: 2px;
}

.language-select-dropdown option {
    background: white;
    color: #2C2C2C;
    padding: 8px;
}

/* Desktop/mobile visibility helpers */
@media (max-width: 768px) {
    .desktop-only {
        display: none;
    }
    .mobile-only {
        display: block;
    }
}

@media (min-width: 769px) {
    .desktop-only {
        display: block;
    }
    .mobile-only {
        display: none;
    }
    .language-menu {
        margin-top: 1px;
    }
    .language-option {
        padding: 4px 12px;
        min-height: 26px;
    }
}

/* Accessibility: High contrast mode */
@media (prefers-contrast: high) {
    .language-toggle {
        border-color: white;
    }
    .language-menu {
        border: 2px solid #000000;
    }
    .language-option {
        border-bottom: 1px solid #000000;
    }
}

/* Accessibility: Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .language-toggle,
    .language-menu,
    .dropdown-arrow {
        transition: none;
    }
}

/* 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: 1fr;
    /* Default: 1 column (1x4 layout) */
    gap: 2rem;
    margin-top: 2rem;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.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;
}

/* 2x2 layout on larger screens (2 columns, 2 rows) */
@media (min-width: 768px) {
    .handbook-options {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columns (2x2 layout) */
    }
}

/* 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);
    }
}

/* --- MOBILE OPTIMIZATIONS (ADDED JAN 2026) --- */

/* 1. Responsive Offer Banner */
@media (max-width: 768px) {
    .persistent-offer-banner .banner-content {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
        padding: 0.5rem;
    }

    .persistent-offer-banner .banner-text {
        justify-content: center;
    }

    .persistent-offer-banner .btn {
        width: 100%;
        max-width: 200px;
    }

    .persistent-offer-banner .banner-close {
        top: 5px;
        right: 5px;
    }
}

/* 2. Responsive 'Building in Public' Grid */
@media (max-width: 600px) {

    .split-layout,
    .stats-grid,
    .pricing-grid {
        flex-direction: column;
        display: flex;
        /* Ensure flex behavior */
    }

    .split-layout>div,
    .stats-grid>div,
    .pricing-grid>div {
        flex: 1 1 100%;
        min-width: 100% !important;
        /* Force full width */
        margin-bottom: 1.5rem;
    }
}

/* 3. Mobile Typography Adjustments */
@media (max-width: 480px) {
    h1 {
        font-size: 2rem !important;
    }

    h2 {
        font-size: 1.75rem !important;
    }

    .hero-section p {
        font-size: 1rem !important;
    }

    /* Reduce massive icons in Roadmap */
    .strategy-icon {
        font-size: 2rem !important;
    }

    /* Fix Roadmap timeline overlapping */
    .phase-badge {
        font-size: 1rem !important;
        padding: 0.5rem 1rem !important;
    }
}

/* 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 */


/* 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);
    }
}


/* ========================================
   RTL (RIGHT-TO-LEFT) SUPPORT
   ========================================
   Support for Arabic and other RTL languages
   ======================================== */

[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

/* Flip layout for RTL */
[dir="rtl"] .header {
    left: auto;
    right: 0;
}

[dir="rtl"] .container {
    direction: rtl;
}

/* Navigation RTL fixes */
[dir="rtl"] .nav-links {
    flex-direction: row-reverse;
}

[dir="rtl"] .dropdown-menu {
    left: auto;
    right: 0;
    text-align: right;
}

[dir="rtl"] .dropdown.dropdown-right .dropdown-menu {
    right: auto;
    left: 0;
}

/* Text alignment */
[dir="rtl"] {
    text-align: right;
}

[dir="rtl"] .text-left {
    text-align: right;
}

[dir="rtl"] .text-right {
    text-align: left;
}

/* Margins and padding - convert to logical properties where needed */
[dir="rtl"] .value-item-compact,
[dir="rtl"] .timeline-item,
[dir="rtl"] .product-section {
    direction: rtl;
}

/* Forms RTL */
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
    text-align: right;
    direction: rtl;
}

/* Buttons and links */
[dir="rtl"] .btn {
    direction: rtl;
}

/* Language switcher RTL */
[dir="rtl"] .language-menu {
    left: auto;
    right: 0;
}

/* Mobile menu RTL */
@media (max-width: 768px) {
    [dir="rtl"] .nav-links {
        left: auto;
        right: 0;
    }

    [dir="rtl"] .nav-links a {
        text-align: right;
        margin-left: 0;
        margin-right: 2rem;
    }

    [dir="rtl"] .dropdown-menu {
        padding-left: 0;
        padding-right: 3rem;
    }

    [dir="rtl"] .dropdown-toggle {
        margin-left: 0;
        margin-right: 2rem;
    }
}

/* Flip icons and arrows that are directional */
[dir="rtl"] .dropdown-arrow {
    transform: scaleX(-1);
}

[dir="rtl"] .onshape-nav.prev {
    left: auto;
    right: 10px;
}

[dir="rtl"] .onshape-nav.next {
    right: auto;
    left: 10px;
}

/* Center-aligned content should stay centered */
[dir="rtl"] .text-center,
[dir="rtl"] [style*="text-align: center"] {
    text-align: center !important;
}

/* Handbook Cover Images - Drop Shadow */
.handbook-cover-container img,
.handbook-option img[src*="Handbook-Cover"],
img[alt*="Handbook Cover"] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

.handbook-cover-container img:hover,
.handbook-option img[src*="Handbook-Cover"]:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Handbook Teaser Section - Responsive */
@media (max-width: 768px) {
    .handbook-cover-container+div {
        grid-template-columns: 1fr !important;
    }

    section[style*="grid-template-columns: 1fr 2fr"]>div {
        grid-template-columns: 1fr !important;
    }
}

/* Permanent background colors for product sections (Task 1) */
.index-page .section-a {
    background-color: #fbe9e7 !important;
}

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

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

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

/* Immosphere Fixed (Purple) */
.index-page .section-f {
    background-color: #f9ece3 !important;
}

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

/* Product Section Hover Effects */
.index-page .section-a:hover,
.index-page .section-b:hover,
.index-page .section-c:hover,
.index-page .section-d:hover,
.index-page .section-f:hover,
.index-page .section-g:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
    border: 2px dotted #15635E !important;
    transform: translateY(-4px);
}

/* Link Card Styles */
a.feature-item {
    text-decoration: none !important;
    color: inherit !important;
    display: block;
    cursor: pointer;
    transition: all 0.2s ease;
}

a.feature-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #15635E;
}

/* Page Title - Matching Blog Layout */
.page-title {
    font-family: var(--font-family-primary);
    font-size: 2.5rem;
    /* Reduced by 1/3 from 3.75rem */
    font-weight: 900;
    color: var(--color-primary);
    text-transform: uppercase;
    font-style: italic;
    letter-spacing: -0.05em;
    margin-bottom: var(--spacing-sm);
    line-height: 1.1;
    margin-top: var(--spacing-lg);
    text-align: left;
    /* Blog aligns left inside container */
}

@media (min-width: 768px) {
    .page-title {
        font-size: 2.67rem;
        /* Reduced by 1/3 from 4rem */
    }
}