/*
 * JOVAL.PT - MODERN INDUSTRIAL THEME
 *
 * DESIGN SYSTEM COMPLIANCE:
 * - This is the SINGLE SOURCE OF TRUTH for all frontend styles
 * - NEVER add inline styles to templates
 * - ALWAYS use CSS classes defined here
 * - Use CSS variables for colors, spacing, and sizing
 * - Follow the design system documented in DESIGN_SYSTEM.md
 *
 * ORGANIZATION:
 * 1. CSS Variables (:root)
 * 2. Reset & Base Styles
 * 3. Typography
 * 4. Layout Utilities
 * 5. Navigation & Header
 * 6. Components (Buttons, Cards, Forms, etc.)
 * 7. Page-Specific Sections
 * 8. Responsive Design
 * 9. Utility Classes
 *
 * Last Updated: December 14, 2025
 */

/* === FONTS === */
@font-face {
    font-family: 'Geist Sans';
    src: url('../fonts/Geist-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geist Mono';
    src: url('../fonts/GeistMono-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Palette: Industrial Navy & Blue */
    --color-primary: #0f172a;    /* Deep Navy - Headings, Footer */
    --color-primary-light: #1e293b;
    --color-accent: #0284c7;     /* Bright Blue - Buttons, Links */
    --color-accent-hover: #0369a1;
    --color-text-main: #334155;  /* Slate 700 - Body Text */
    --color-text-muted: #64748b; /* Slate 500 - Secondary Text */
    --color-bg-body: #f8fafc;    /* Very light blue-grey */
    --color-bg-white: #ffffff;
    
    /* Typography - Updated to Geist for superior legibility */
    --font-main: 'Geist Sans', system-ui, -apple-system, sans-serif;
    --font-display: 'Geist Sans', system-ui, sans-serif;
    --font-mono: 'Geist Mono', monospace;

    /* Base Typography Settings - Geist has a slightly larger x-height */
    --font-size-base: 16px;
    --line-height-base: 1.55;
    --letter-spacing-tight: -0.02em;

    /* Borders */
    --border-color: #e2e8f0;
    --border-radius: 4px; /* Utility radius for buttons/inputs */
    --radius-md: 12px;    /* Standard card radius */
    --radius-lg: 24px;    /* Premium/Section radius */
    
    /* Functional */
    --color-success: #10b981;
    --color-danger: #ef4444;
    --color-warning: #f59e0b;

    /* Atmospheric depth */
    --gradient-mesh: 
        radial-gradient(at 0% 0%, rgba(15, 23, 42, 0.95) 0%, transparent 70%),
        radial-gradient(at 100% 0%, rgba(2, 132, 199, 0.15) 0%, transparent 50%),
        radial-gradient(at 100% 100%, rgba(30, 41, 59, 0.95) 0%, transparent 70%),
        radial-gradient(at 0% 100%, rgba(15, 23, 42, 0.95) 0%, transparent 70%);
    
    --gradient-mesh-overlay: 
        radial-gradient(at 0% 0%, rgba(15, 23, 42, 0.85) 0%, transparent 70%),
        radial-gradient(at 100% 0%, rgba(2, 132, 199, 0.15) 0%, transparent 50%),
        radial-gradient(at 100% 100%, rgba(30, 41, 59, 0.85) 0%, transparent 70%),
        radial-gradient(at 0% 100%, rgba(15, 23, 42, 0.85) 0%, transparent 70%);
    
    /* Spacing */
    --container-width: 1200px;
    --header-height: 70px;

    /* Orchestrated Motion */
    --ease-out-expo: cubic-bezier(0.33, 1, 0.68, 1);
    --motion-duration: 0.6s;

    /* Technical Patterns */
    --blueprint-grid:
        linear-gradient(rgba(15, 23, 42, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.02) 1px, transparent 1px);

    /* ===========================================
     * RESPONSIVE BREAKPOINTS (Standardized)
     * ===========================================
     * Use these values consistently across all media queries.
     *
     * --bp-xs:  480px  - Extra small (large phones landscape)
     * --bp-sm:  576px  - Small (phones)
     * --bp-md:  768px  - Medium (tablets)
     * --bp-lg:  992px  - Large (desktops)
     * --bp-xl:  1100px - Extra large (wide desktops)
     *
     * Mobile-first approach: base styles for mobile,
     * use min-width queries to enhance for larger screens.
     */
}

/* --- Technical Underlay --- */
body {
    background-image: var(--blueprint-grid);
    background-size: 40px 40px;
    background-attachment: fixed;
}

/* --- Machined Corner Utility --- */
.machined-corners {
    position: relative;
}

.machined-corners::before,
.machined-corners::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border-color: rgba(2, 132, 199, 0.4); /* Muted accent */
    border-style: solid;
    pointer-events: none;
    z-index: 5;
}

/* Top-Left Bracket */
.machined-corners::before {
    top: 6px;
    left: 6px;
    border-width: 1px 0 0 1px;
}

/* Bottom-Right Bracket */
.machined-corners::after {
    bottom: 6px;
    right: 6px;
    border-width: 0 1px 1px 0;
}

.machined-corners:hover::before {
    border-color: var(--color-accent);
}

.machined-corners:hover::after {
    border-color: var(--color-accent);
}

/* --- Orchestrated Motion --- */
.reveal-in {
    opacity: 0;
    transform: translateY(10px);
    animation: reveal-in var(--motion-duration) var(--ease-out-expo) forwards;
}

.reveal-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.reveal-on-scroll.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.1s; }
.stagger-3 { animation-delay: 0.15s; }
.stagger-4 { animation-delay: 0.2s; }
.stagger-5 { animation-delay: 0.25s; }

@keyframes reveal-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === RESET & BASE === */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* === CRITICAL: Touch optimization === */
/* Eliminates 300ms tap delay and prevents double-tap zoom interference */
a, button, input, select, textarea,
[role="button"], [role="link"],
.product-card, .card-link, .thumb-item,
.action-btn, .nav-link, .category-link {
    touch-action: manipulation;
}

body {
    font-family: var(--font-main);
    line-height: var(--line-height-base);
    color: var(--color-text-main);
    background-color: var(--color-bg-body);
    font-size: var(--font-size-base);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Industrial Grain Texture Overlay */
.bg-primary::before,
.hero::before,
.contact-card::before,
.quality-policy-card-horizontal::before,
.selector-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.04;
    pointer-events: none;
    z-index: 1;
}

/* === ANIMATED GRAIN EFFECT - TV static flicker === */
@keyframes grain {
  0% { transform: translate(0, 0) }
  20% { transform: translate(-80px, 60px) }
  40% { transform: translate(70px, -90px) }
  60% { transform: translate(-60px, -70px) }
  80% { transform: translate(90px, 80px) }
  100% { transform: translate(0, 0) }
}

/* Reusable grain effect base styles */
.grain-effect,
.site-footer::before,
.hero:not(.home-hero)::after,
.selector-hero::after,
.products-hero::after {
    position: absolute;
    top: -200px;
    left: -200px;
    right: -200px;
    bottom: -200px;
    background-image: url('/noise.jpg');
    background-repeat: repeat;
    background-size: 150px auto;
    opacity: 0.27;
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 1;
    animation: grain 0.12s steps(5) infinite !important;
    animation-duration: 0.12s !important;
    animation-iteration-count: infinite !important;
}

/* Pseudo-elements need content */
.site-footer::before,
.hero:not(.home-hero)::after,
.selector-hero::after,
.products-hero::after {
    content: "";
}

.site-footer > * {
    position: relative;
    z-index: 2;
}

.hero, .contact-card, .quality-policy-card-horizontal, .site-footer, .selector-hero {
    position: relative;
    overflow: hidden;
}

.hero > *, .contact-card > *, .quality-policy-card-horizontal > *, .products-hero > * {
    position: relative;
    z-index: 2;
}

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

/* === TYPOGRAPHY === */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--color-primary);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.75em;
    letter-spacing: -0.02em; /* Tighter tracking for display font */
}

h1 { font-size: 2.5rem; letter-spacing: -0.03em; }
h2 { font-size: 2rem; letter-spacing: var(--letter-spacing-tight); }
h3 { font-size: 1.5rem; letter-spacing: -0.015em; }
h4 { font-size: 1.25rem; letter-spacing: var(--letter-spacing-tight); }
h5 { font-size: 1.1rem; letter-spacing: var(--letter-spacing-tight); }
h6 { font-size: 1rem; letter-spacing: var(--letter-spacing-tight); }

p { margin-bottom: 1.5rem; }

ul, ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

a {
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

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

/* === LAYOUT UTILS === */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* === HEADER & NAV === */
header {
    background: var(--color-bg-white);
    height: var(--header-height);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: height 0.3s ease, box-shadow 0.3s ease;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.logo {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
}

.logo img {
    max-height: 40px;
    transition: max-height 0.3s ease;
}

.pro-view-indicator {
    color: var(--color-accent);
    margin-left: 0.75rem;
    display: flex;
    align-items: center;
    background: rgba(2, 132, 199, 0.1);
    padding: 4px;
    border-radius: 50%;
    border: 1px solid rgba(2, 132, 199, 0.2);
    animation: pro-view-pulse 2s infinite;
}

@keyframes pro-view-pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(2, 132, 199, 0.4); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(2, 132, 199, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(2, 132, 199, 0); }
}

.mobile-search-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.75rem;
    color: var(--color-primary);
    z-index: 101;
    line-height: 0; /* Align icon better */
}

.mobile-search-toggle svg {
    pointer-events: none;
}

.header-actions {
    display: none; /* Only show on mobile */
    align-items: center;
    gap: 0.25rem;
}

/* Hamburger Menu Icon */
.mobile-menu-toggle .bar {
    display: block;
    height: 2px;
    background-color: var(--color-primary);
    border-radius: 2px;
    transform-origin: center;
    transition:
        transform 0.35s cubic-bezier(0.68, -0.3, 0.32, 1.3),
        width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.2s ease-out;
}

/* Staggered asymmetrical widths - right-aligned technical aesthetic */
.mobile-menu-toggle .bar:nth-child(1) {
    width: 20px;
    margin-bottom: 5px;
}

.mobile-menu-toggle .bar:nth-child(2) {
    width: 16px;
    margin-left: auto;
    margin-bottom: 5px;
}

.mobile-menu-toggle .bar:nth-child(3) {
    width: 12px;
    margin-left: auto;
}

/* Hover: bars align and expand */
.mobile-menu-toggle:hover .bar,
.mobile-menu-toggle:focus-visible .bar {
    width: 20px;
    margin-left: 0;
}

nav {
    margin: 0 auto;
}

nav ul {
    display: flex;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

nav a {
    color: var(--color-text-main);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.5rem 0;
    position: relative;
}

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

/* Scrolled Header State */
body.header-scrolled {
    --header-height: 56px;
}

body.header-scrolled header {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.08);
}

body.header-scrolled .logo img {
    max-height: 32px;
}

/* === LANGUAGE SWITCHER === */
.language-switch {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 1rem; /* Reduced from 2rem to balance */
    padding-left: 1rem; /* Reduced from 2rem */
    border-left: 1px solid var(--border-color);
    height: 32px;
}

.lang-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
    transition: color 0.2s;
    text-decoration: none;
    padding: 0.5rem 0.25rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.lang-link:hover {
    color: var(--color-primary);
}

.lang-link.active {
    color: var(--color-accent);
    cursor: default;
}

/* === SEARCH FORM === */
.search-container {
    margin-left: 0; /* Let nav center take space */
    margin-right: 0;
    flex-shrink: 0;
}

.search-form {
    display: flex;
    align-items: center;
    background: var(--color-bg-body);
    border: 1px solid var(--border-color);
    border-radius: 99px; /* Pill shape */
    /* overflow: hidden; Removed to allow dropdown */
    transition: border-color 0.2s, box-shadow 0.2s; /* Removed width transition */
    width: 260px; /* Fixed comfortable width */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    cursor: text;
    position: relative;
}

/* Focused state styles */
.search-form:focus-within,
.search-form:hover,
.search-form.has-value {
    /* width: 320px; REMOVED to fix layout shift */
    background: white;
    border-color: var(--color-accent);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.search-form input[type="search"] {
    flex: 1;
    padding: 0.6rem 1rem 0.6rem 1.2rem;
    border: none;
    background: transparent;
    font-size: 0.95rem;
    color: var(--color-text-main);
    outline: none;
    width: 100%;
}

.search-form input[type="search"]::placeholder {
    color: var(--color-text-muted);
    opacity: 0.8;
}

.search-form button {
    padding: 0.5rem 1rem 0.5rem 0.5rem;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 0.2s, transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-form button:hover {
    color: var(--color-accent);
    transform: scale(1.1);
}

.search-form button svg {
    width: 20px;
    height: 20px;
}

/* === SEARCH RESULTS === */
.search-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding: 1rem;
    background: var(--color-bg-body);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.search-query {
    margin: 0;
    font-weight: 500;
    color: var(--color-text-main);
}

.search-info .btn-outline {
    background: transparent;
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
    padding: 0.5rem 1rem;
    text-decoration: none;
    border-radius: var(--border-radius);
    font-size: 0.9rem;
    transition: all 0.2s;
}

.search-info .btn-outline:hover {
    background: var(--color-accent);
    color: white;
}

.no-results {
    text-align: center;
    padding: 3rem 2rem;
    background: var(--color-bg-body);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.no-results h3 {
    color: var(--color-text-main);
    margin-bottom: 1rem;
}

.no-results p {
    color: var(--color-text-muted);
    margin-bottom: 2rem;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.lang-separator {
    color: var(--border-color);
    font-size: 0.85rem;
    user-select: none;
}


.flag-icon-svg {
    display: inline-block;
    vertical-align: middle;
    height: 1.2em;
    width: auto;
    position: relative;
    top: -1px;
}

.home-hero .flag-icon-svg {
    margin-left: 0.5em;
}

.made-in-portugal .flag-icon-svg {
    margin-right: 0.5em;
}

.made-in-portugal {
    display: flex;
    align-items: center;
    margin-top: 1rem;
    color: #94a3b8;
    font-size: 0.9rem;
}

/* --- Hero Section --- */

.hero {
    background: var(--gradient-mesh), var(--color-primary);
    background-position: center center;
    color: white;
    padding: 6rem 0;
    text-align: center;
    margin-bottom: 3rem;
}

.home-hero {
    position: relative;
    overflow: hidden;
    padding: 10rem 0;
}

/* Technical Grid Overlay */
.home-hero::before {
    content: "" !important; /* Keep original home hero grid */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    z-index: 1;
    pointer-events: none;
    mask-image: none !important; /* Disable radial mask for home page */
    -webkit-mask-image: none !important;
}

.home-hero::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gradient-mesh), url('/uploads/images/JOVALgamadeprodutos.png');
    background-size: cover;
    background-position: center center;
    z-index: 0;
    animation: hero-subtle-zoom 30s ease-in-out infinite alternate;
}

@keyframes hero-subtle-zoom {
    from { transform: scale(1); }
    to { transform: scale(1.1); }
}

.home-hero .container {
    position: relative;
    z-index: 3;
}

/* Home-hero grain overlay z-index override (needs to be above ::after background) */
.home-hero .grain-overlay {
    z-index: 2;
}

@media (max-width: 768px) {
    .home-hero::after { animation: none; }

    /* Disable grain animation on mobile for battery savings */
    .grain-effect,
    .site-footer::before,
    .hero:not(.home-hero)::after,
    .selector-hero::after,
    .products-hero::after {
        animation: none !important;
    }
}

.hero h1 { color: white; margin-bottom: 1rem; }

.home-hero h1 {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    text-shadow: 0 10px 30px rgba(0,0,0,0.5); /* Deep shadow for spatial depth */
    letter-spacing: -0.04em;
}

.hero .tagline { 
    font-family: var(--font-display);
    font-size: 1.25rem; 
    color: #94a3b8; /* Slate 400 */
    font-weight: 500;
    margin-bottom: 2rem;
    letter-spacing: -0.01em;
}

.home-hero .tagline {
    font-size: 1.5rem;
    color: #e2e8f0;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3rem;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

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

/* Stack hero buttons on small screens (bp-sm: 576px) */
@media (max-width: 576px) {
    .hero .cta-buttons {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }

    .hero .cta-buttons .btn {
        width: 100%;
        max-width: 280px;
    }
}

/* === BUTTONS === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: var(--border-radius);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    font-size: 1rem;
    position: relative;
    overflow: hidden;
}

.btn::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -60%;
    width: 20%;
    height: 200%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(30deg);
    transition: none;
    pointer-events: none;
}

.btn:hover::after {
    animation: btn-glint 0.8s ease-in-out;
}

@keyframes btn-glint {
    0% { left: -60%; }
    100% { left: 140%; }
}

.btn:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.1);
}

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

.btn-primary:hover {
    background: var(--color-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px -1px rgba(2, 132, 199, 0.3);
}

.btn-outline-primary {
    background: transparent;
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
}

.btn-outline-primary:hover {
    background: var(--color-accent);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px -1px rgba(2, 132, 199, 0.3);
}

.btn-secondary {
    background: transparent;
    border: 2px solid rgba(255,255,255,0.2);
    color: white;
}
.btn-secondary:hover {
    background: rgba(255,255,255,0.1);
    border-color: white;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px -1px rgba(0, 0, 0, 0.2);
}

.btn-small {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

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

/* === CARDS & GRID === */

/* Products Meta Header - Shows count and active filters */
.products-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px dashed var(--border-color);
}

.products-count {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text-muted);
    letter-spacing: 0.02em;
}

.products-filter-badge {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-accent);
    background: rgba(2, 132, 199, 0.08);
    padding: 0.25rem 0.625rem;
    border-radius: 100px;
    border: 1px solid rgba(2, 132, 199, 0.15);
}

/* Products Grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
}

/* Visual Row Dividers - Break information into digestible chunks */
.products-grid-break {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 0;
    margin: 0.5rem 0;
}

.products-grid-break .break-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        var(--border-color) 15%,
        var(--border-color) 85%,
        transparent
    );
}

.products-grid-break .break-count {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--color-text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 0.25rem 0.75rem;
    background: var(--color-bg-body);
    border: 1px dashed var(--border-color);
    border-radius: 100px;
}

/* Reduced motion: Simplify animations */
@media (prefers-reduced-motion: reduce) {
    .products-grid-break .break-line {
        background: var(--border-color);
    }
}

.product-card {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all 0.3s var(--ease-out-expo);
    display: flex;
    flex-direction: column;
    height: 100%;
    cursor: pointer;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.05);
    border-color: var(--color-accent);
}

/* Touch feedback for mobile - provides visual confirmation of tap */
.product-card:active {
    transform: scale(0.98);
    transition-duration: 0.1s;
}

/* Disable hover effects on touch devices to prevent sticky hover states */
@media (hover: none) {
    .product-card:hover {
        transform: none;
        box-shadow: none;
        border-color: var(--border-color);
    }
}

.card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-image-container {
    position: relative;
    width: 100%;
    height: 240px;
    background: #f8fafc;
    border-bottom: 1px solid var(--border-color);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* Removed padding to fill container */
}

.product-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fill the container */
    transition: transform 0.5s var(--ease-out-expo), opacity 0.4s ease;
}

.product-card:hover .product-image-primary {
    transform: scale(1.05);
}

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

.product-card__model-label {
    font-family: var(--font-main);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent);
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.product-card h3 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    color: var(--color-primary);
    line-height: 1.2;
    font-weight: 800;
}

.product-card p {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card__footer {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.product-card__footer::after {
    content: "→";
    color: var(--color-accent);
    transition: transform 0.3s var(--ease-out-expo);
}

.product-card:hover .product-card__footer::after {
    transform: translateX(4px);
}

/* === FORMS === */
.form-group { margin-bottom: 1.5rem; }

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--color-primary);
    font-size: 0.9rem;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* Improved touch targets for mobile forms */
@media (max-width: 768px) {
    .form-group input,
    .form-group textarea,
    .form-group select {
        padding: 0.875rem 0.75rem;
        min-height: 48px;
    }

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

.form-group input:focus,
.form-group textarea:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.1);
}

/* === ALERTS === */
.alert {
    padding: 1rem;
    border-radius: var(--border-radius);
    margin-bottom: 1.5rem;
    font-weight: 500;
}
.alert-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.alert-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }

/* === MODAL === */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1.5rem;
}

.modal-container {
    background: white;
    border-radius: var(--radius-md);
    width: 100%;
    max-width: 500px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    animation: modalScale 0.3s ease-out;
}

@keyframes modalScale {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.modal-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    padding: 1.25rem 1.5rem;
    background: #f8fafc;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

.modal-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(2, 132, 199, 0.1);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.modal-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
}

/* === MAIN CONTENT === */
main {
    flex-grow: 1;
    width: 100%;
}

/* === UTILITY CLASSES === */
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

/* Scroll shadow indicator for tables */
.table-responsive::before,
.table-responsive::after {
    content: "";
    position: sticky;
    top: 0;
    bottom: 0;
    width: 20px;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.2s;
}

.table-responsive::after {
    right: 0;
    background: linear-gradient(to left, rgba(15, 23, 42, 0.08), transparent);
}

.table-responsive.is-scrollable::after {
    opacity: 1;
}

/* Scroll Hint Indicator - shows on first view when table is scrollable */
.scroll-hint {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(15, 23, 42, 0.85);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    border-radius: 4px;
    pointer-events: none;
    z-index: 20;
    opacity: 0;
    transition: opacity 0.3s ease;
    white-space: nowrap;
}

.scroll-hint::after {
    content: "→";
    font-size: 0.85rem;
    animation: scroll-hint-bounce 1s ease-in-out infinite;
}

@keyframes scroll-hint-bounce {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(4px); }
}

.table-responsive.show-scroll-hint .scroll-hint {
    opacity: 1;
}

.table-responsive.has-scrolled .scroll-hint {
    opacity: 0;
    transition: opacity 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
    .scroll-hint::after {
        animation: none;
    }
}

/* === Mobile Menu Scroll Lock === */
/* Full scroll lock for iOS Safari and all mobile browsers */
body.menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.grid-50-50 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

/* Stack 50/50 grid on tablet and below (bp-lg: 992px) */
@media (max-width: 992px) {
    .grid-50-50 {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

.border-bottom { border-bottom: 1px solid var(--border-color); }
.text-accent { color: var(--color-accent); }
.text-accent-light { color: #7dd3fc; } /* Lighter sky blue for better contrast on dark backgrounds */
.text-white { color: white; }
.text-white-muted { color: rgba(255, 255, 255, 0.8); }
.text-white-70 { color: rgba(255, 255, 255, 0.7); }
.text-white-90 { color: rgba(255, 255, 255, 0.9); }

.d-flex-center { display: flex; justify-content: center; align-items: center; }
.rounded-8 { border-radius: 8px; }
.w-100 { width: 100%; }

/* Reorder utilities for desktop (bp-lg: 992px) */
@media (min-width: 993px) {
    .order-md-1 { order: 1; }
    .order-md-2 { order: 2; }
}

.section-padding {
    padding: clamp(2.5rem, 5vh, 4rem) 0;
}
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.text-muted { color: var(--color-text-muted); }
.text-primary { color: var(--color-primary); }
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.font-bold { font-weight: 700; }
.font-normal { font-weight: 400; }
.uppercase { text-transform: uppercase; }
.align-middle { vertical-align: middle; }
.bg-light { 
    background: linear-gradient(180deg, var(--color-bg-white) 0%, var(--color-bg-body) 100%);
    position: relative;
}
.border-top { 
    border-top: 1px solid var(--border-color);
    position: relative;
}
.border-top::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
    opacity: 0.4;
    filter: blur(0.5px);
}
.leading-tight { line-height: 1.2; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mb-1 { margin-bottom: 0.25rem; }
.mt-4, .mt-2rem { margin-top: 2rem; }
.mb-5 { margin-bottom: 3rem; }
.mb-4 { margin-bottom: 2rem; }
.mb-8 { margin-bottom: 4rem; }
.mt-8 { margin-top: 4rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }

/* Reduce large margins on mobile */
@media (max-width: 768px) {
    .mt-8 { margin-top: 1.5rem; }
    .mb-8 { margin-bottom: 1.5rem; }

    /* Performance section specifically - keep consistent with tech card gaps */
    #performance-section.mt-8 {
        margin-top: 0.75rem;
    }
}
.w-100 { width: 100%; }
.mt-auto { margin-top: auto; }
.d-block { display: block; }
.self-start { align-self: flex-start; }
.hidden { display: none !important; }
.align-middle { vertical-align: middle !important; }

.btn-download {
    display: block;
    text-align: center;
    margin-top: 1rem;
}

.coming-soon-message {
    text-align: center;
    padding: 2rem;
    background: var(--color-bg-body);
    border-radius: var(--border-radius);
}

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

.feature-box {
    position: relative;
    background: white;
    padding: 3.5rem 2rem 2rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    text-align: center;
    margin-top: 2.5rem; /* Accommodate the popped-out icon */
    transition: all 0.3s var(--ease-out-expo);
}

.feature-box .feature-icon {
    position: absolute;
    top: -2.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 80px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
    color: var(--color-accent);
    z-index: 2;
    transition: all 0.3s var(--ease-out-expo);
}

.feature-box:hover .feature-icon {
    border-color: var(--color-accent);
    transform: translateX(-50%) scale(1.1);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.feature-box h3 { 
    color: var(--color-accent); 
    font-size: 1.25rem; 
    margin-top: 0.5rem;
}

/* === GEO MASTERY & EEAT STYLES === */
.product-geo-summary {
    display: grid;
    gap: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.geo-highlights-card {
    background: #ffffff;
    border: 1px solid var(--border-color); /* Slate-200 equivalent usually */
    border-top: 3px solid var(--color-primary);
    border-radius: 6px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.geo-highlights-title {
    display: flex;
    align-items: center;
    color: var(--color-primary);
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.geo-highlights-icon {
    width: 20px;
    height: 20px;
    margin-right: 0.5rem;
    color: var(--color-accent);
}

.geo-highlights-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.875rem;
}

@media (min-width: 768px) {
    .geo-highlights-list {
        grid-template-columns: 1fr 1fr;
        gap: 1rem 2rem;
    }
}

.geo-highlights-list li {
    font-size: 0.9rem;
    color: var(--color-text-main);
    padding-left: 1.5rem;
    position: relative;
    line-height: 1.5;
}

.geo-highlights-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.4rem;
    width: 6px;
    height: 6px;
    background-color: var(--color-accent);
    border-radius: 50%;
}

.geo-highlights-list li strong {
    font-weight: 600;
    color: var(--color-primary);
}

/* Expert Tip Component (BEM) */
.expert-tip {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background-color: #f0f9ff; /* Light sky blue */
    border-left: 4px solid var(--color-accent);
    border-radius: 0 6px 6px 0;
    padding: 1.25rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.expert-tip:hover {
    transform: translateX(4px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.expert-tip__icon {
    flex-shrink: 0;
    color: var(--color-accent);
    margin-top: 0.125rem;
}

.expert-tip__icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

.expert-tip__content {
    flex-grow: 1;
}

.expert-tip__title {
    color: var(--color-accent); /* Or Primary if preferred */
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.expert-tip__text {
    font-size: 0.95rem;
    color: var(--color-text-main);
    font-style: italic;
    line-height: 1.6;
    margin: 0;
}

/* === CATEGORY CARDS === */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
}

.category-card {
    background: white;
    padding: 2.5rem 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    text-align: center;
    transition: all 0.3s var(--ease-out-expo);
    cursor: pointer;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.category-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}

.category-card h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 1rem;
    color: var(--color-primary);
    line-height: 1.35;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3rem;
}

.category-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.category-icon-wrapper {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.category-icon-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* === TABLES === */
.table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
    border: 1px solid var(--border-color);
    background: white;
}

.table th, .table td {
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    font-size: 0.9rem;
    text-align: center;
    color: var(--color-text-main);
}

.table th {
    background-color: #f8fafc;
    color: var(--color-primary);
    font-weight: 700;
    border-bottom: 2px solid var(--color-primary);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
}

.table tbody tr:hover {
    background-color: #e2e8f0;
    transition: background 0.15s ease;
}

/* === MOBILE SAFE AREAS === */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .site-footer {
        padding-bottom: calc(2rem + env(safe-area-inset-bottom));
    }
    
    #whatsapp-widget {
        bottom: calc(20px + env(safe-area-inset-bottom));
    }
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    /* Prevent iOS zoom on inputs */
    input, select, textarea {
        font-size: 16px !important; 
    }

    header { height: auto; position: sticky; top: 0; padding: 0.5rem 0; }
    
    header .container { 
        flex-wrap: wrap; 
        gap: 0;
        justify-content: space-between;
    }

    .header-actions {
        display: flex;
        order: 2; /* Ensure it stays right */
    }

    .logo {
        order: 1;
    }

    .mobile-menu-toggle,
    .mobile-search-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        background: transparent;
        border: none;
        color: var(--color-primary);
        cursor: pointer;
        border-radius: 8px;
        transition: background-color 0.2s;
    }

    .mobile-menu-toggle {
        flex-direction: column;
        padding: 11px;
    }

    .mobile-menu-toggle:active,
    .mobile-search-toggle:active {
        background-color: rgba(15, 23, 42, 0.05);
    }

    .mobile-menu-toggle:focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
    }

    /* Mobile Sidebar Toggle (Products) */
    .mobile-toggle-icon {
        display: block;
        color: var(--color-accent);
        transition: transform 0.3s ease;
        flex-shrink: 0;
    }

    .products-sidebar.active .mobile-toggle-icon {
        transform: rotate(180deg);
    }

    .sidebar-content {
        display: none;
    }

    .products-sidebar.active .sidebar-content {
        display: block;
        animation: slideDown 0.3s ease-out;
    }

    /* Hide nav and lang switch by default on mobile */
    nav, .language-switch {
        display: none;
        width: 100%;
        flex-basis: 100%;
    }

    /* Show when open - GPU-accelerated animations */
    header.mobile-menu-open nav {
        display: block;
        animation: slideDown 0.3s ease-out forwards;
        animation-delay: 0.1s;
        will-change: opacity, transform;
    }

    header.mobile-menu-open .language-switch {
        display: flex;
        will-change: opacity, transform;
    }

    header.mobile-menu-open nav {
        border-top: 1px solid var(--border-color);
        margin-top: 1rem;
        padding-top: 1rem;
    }

    /* Clean up will-change after animation completes */
    header:not(.mobile-menu-open) nav,
    header:not(.mobile-menu-open) .language-switch {
        will-change: auto;
    }

    nav ul { 
        flex-direction: column; 
        gap: 0; 
        text-align: center;
    }

    nav a { 
        padding: 1rem 0; 
        font-size: 1.1rem; 
        display: block;
        border-bottom: 1px solid #f1f5f9;
    }

    .language-switch {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        margin-top: 1rem;
        justify-content: center;
        padding-bottom: 1rem;
        gap: 0.75rem;
    }

    /* Improved touch targets for language links on mobile */
    .lang-link {
        padding: 0.625rem 1rem;
        background: rgba(15, 23, 42, 0.05);
        border-radius: 6px;
        min-height: 44px;
        min-width: 44px;
        justify-content: center;
    }

    .lang-link.active {
        background: rgba(2, 132, 199, 0.1);
    }

    .lang-link:active {
        background: rgba(15, 23, 42, 0.1);
        transform: scale(0.97);
    }

    /* Hide separator on mobile - using button gaps instead */
    .lang-separator {
        display: none;
    }

    .search-container {
        display: none !important; /* Always hide in mobile menu, use overlay instead */
    }

    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .search-form {
        width: 100%;
        max-width: none;
    }

    /* Disable hover expand effect on mobile, keep it full width */
    .search-form,
    .search-form:focus-within,
    .search-form:hover {
        width: 100%;
    }

    /* Hamburger → X animation */
    header.mobile-menu-open .mobile-menu-toggle .bar {
        width: 20px;
        margin-left: 0;
    }

    header.mobile-menu-open .mobile-menu-toggle .bar:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    header.mobile-menu-open .mobile-menu-toggle .bar:nth-child(2) {
        transform: scaleX(0);
        opacity: 0;
    }

    header.mobile-menu-open .mobile-menu-toggle .bar:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
    
    .hero { padding: 3rem 0; }
    .hero h1 { font-size: 2rem; }
}

@media (min-width: 769px) {
    .mobile-toggle-icon {
        display: none;
    }

    .products-sidebar .sidebar-header {
        cursor: default;
    }

    .sidebar-content {
        display: block !important;
    }
}

/* === REFACTORED SECTIONS (Home, About, Footer) === */

/* Footer Refactoring */
.site-footer {
    background: var(--gradient-mesh), var(--color-primary);
    color: #cbd5e1;
    padding: 3rem 0 1.5rem;
    margin-top: auto;
    border-top: 4px solid var(--color-accent);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 1.5rem;
    align-items: start;
}

@media (max-width: 1100px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }
}

/* Single column footer on mobile (bp-sm: 576px) */
@media (max-width: 576px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

.footer-section h3 {
    margin-bottom: 1.25rem;
    font-size: 1.05rem;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.footer-institutional-banner {
    margin-bottom: 0.75rem;
    display: flex;
    justify-content: center;
}

.footer-institutional-banner .institutional-banner {
    max-width: 350px;
    width: 100%;
    height: auto;
    background: white;
    padding: 0.4rem;
    border-radius: 4px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.footer-logo-centered {
    display: flex;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.footer-logo-centered .footer-logo {
    max-width: 140px;
    height: auto;
    transition: transform 0.3s ease;
    opacity: 0.9;
}

.footer-logo-centered .footer-logo:hover {
    transform: scale(1.05);
    opacity: 1;
}

.footer-description {
    line-height: 1.7;
    font-size: 0.95rem;
    margin-bottom: 1.25rem;
}

.made-in-portugal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(255,255,255,0.05);
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    color: white;
}

.footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
    color: #94a3b8;
    transition: color 0.2s ease;
}

.footer-social-link:hover {
    color: #0077b5;
}

/* Footer contact list with icons */
.footer-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact-list li {
    display: flex;
    gap: 12px;
    margin-bottom: 1.25rem;
    font-size: 0.95rem;
}

.footer-icon {
    flex-shrink: 0;
    color: var(--color-accent);
    margin-top: 2px;
}

.footer-contact-list a {
    color: #cbd5e1;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-contact-list a:hover {
    color: white;
}

.phone-note {
    margin-top: -1rem;
    margin-left: 32px;
    margin-bottom: 1rem;
}

/* Footer links navigation */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 0.75rem;
    display: flex;
    align-items: flex-start;
}

.footer-links a {
    color: #cbd5e1;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 0;
}

.footer-links a::before {
    content: '›';
    margin-right: 10px;
    font-size: 1.2rem;
    line-height: 1;
    opacity: 0.4;
    transition: all 0.3s ease;
    color: var(--color-accent);
}

.footer-links a:hover {
    color: white;
    padding-left: 6px;
}

.footer-links a:hover::before {
    opacity: 1;
    margin-right: 14px;
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 1rem;
    text-align: center;
}

.footer-legal p {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 0;
}

.iso-badge {
    color: white;
    font-weight: 700;
    padding: 3px 8px;
    background: rgba(2, 132, 199, 0.15);
    border-radius: 4px;
    font-size: 0.75rem;
    border: 1px solid rgba(2, 132, 199, 0.3);
    display: inline-block;
    vertical-align: middle;
    text-transform: uppercase;
}

/* Home Page Sections */
.company-overview {
    padding: 4rem 0;
}

.section-company-overview {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 3rem;
}

.split-content h2 {
    font-size: 1.75rem;
}

/* === SIDE BY SIDE LAYOUT (50/50) === */
.side-section {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Ensure rounded corners if applied or contain floats */
}

.side-col {
    flex: 0 0 50%;
    max-width: 50%;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.side-text {
    padding: 4rem 3rem; /* Generous padding */
}

.side-image {
    position: relative;
    min-height: 400px;
    height: 100%;
}

.side-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Background Colors */
.bg-light { 
    background: linear-gradient(180deg, var(--color-bg-white) 0%, var(--color-bg-body) 100%);
    position: relative;
}
.bg-white { background-color: white; }
.bg-primary { background: var(--gradient-mesh), var(--color-primary); color: white; }

/* Text Colors override for dark bg */
.text-white h2, .text-white p, .text-white .eyebrow {
    color: white !important;
}

/* Stack side-by-side sections on tablet and below (bp-lg: 992px) */
@media (max-width: 992px) {
    .side-section {
        flex-direction: column;
    }

    .side-col {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    .side-image {
        min-height: 300px;
        /* Make image first on mobile? Usually standard flow is fine (Text then Image), 
           but often Image then Text is preferred. 
           If we want strict order, we use order property. 
           Let's default to stacking as is in HTML. */
    }
    
    .side-text {
        padding: 3rem 1.5rem;
    }
}

/* === ABOUT PAGE (MODERN INDUSTRIAL) === */
.about-page .hero {
    background: var(--gradient-mesh-overlay), url('/uploads/images/jovalFachada.jpg');
    background-size: cover;
    background-position: center center;
    position: relative;
    padding: 10rem 0;
    text-align: center;
}

/* Enhanced hero with parallax */
.about-page .hero.hero--parallax {
    background: var(--color-primary);
    min-height: 60vh;
    display: flex;
    align-items: center;
    padding: 8rem 0;
}

.about-page .hero.hero--parallax .hero-bg {
    background-image: url('/uploads/images/jovalFachada.jpg');
    opacity: 0.35;
    filter: saturate(0.8);
}

.about-page .hero.hero--parallax .hero-overlay {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(2, 132, 199, 0.15) 0%, transparent 50%),
        linear-gradient(to bottom, rgba(15, 23, 42, 0.3) 0%, rgba(15, 23, 42, 0.7) 100%);
}

.about-page .hero::before,
.facts-page .hero::before,
.faq-page .hero::before,
.contact-page .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 1;
    mask-image: radial-gradient(circle at 50% 50%, black, transparent 80%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, black, transparent 80%);
}

/* Contact page hero - matches about page pattern */
.contact-page .hero {
    background: var(--gradient-mesh-overlay), url('/uploads/images/hero-wallpaper.png');
    background-size: cover;
    background-position: center center;
    position: relative;
    padding: 10rem 0;
    text-align: center;
}

.contact-page .hero.hero--parallax {
    background: var(--color-primary);
    min-height: 60vh;
    display: flex;
    align-items: center;
    padding: 8rem 0;
}

.contact-page .hero.hero--parallax .hero-bg {
    background-image: url('/uploads/images/hero-wallpaper.png');
    opacity: 0.4;
    filter: saturate(0.9);
}

.contact-page .hero.hero--parallax .hero-overlay {
    background:
        radial-gradient(ellipse at 70% 30%, rgba(2, 132, 199, 0.15) 0%, transparent 50%),
        linear-gradient(to bottom, rgba(15, 23, 42, 0.3) 0%, rgba(15, 23, 42, 0.7) 100%);
}

@media (max-width: 768px) {
    .contact-page .hero.hero--parallax {
        min-height: 50vh;
        padding: 5rem 0;
    }

    .contact-page .hero.hero--parallax .hero-bg {
        transform: none !important;
    }
}

.about-lead {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.25rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* Mission & Content Sections */
@media (max-width: 768px) {
    .section-padding { padding: 2rem 0; }
}

.about-page h2 {
    font-size: 2.5rem;
    margin-bottom: 2rem;
    letter-spacing: -0.03em;
}

.about-page p {
    font-size: 1.1rem;
    color: var(--color-text-main);
    line-height: 1.7;
}

/* Premium Stats (Glassmorphism) */
.stats-container {
    padding: 6rem 0;
    background: var(--color-primary);
    position: relative;
    overflow: hidden;
}

.stats-container::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--blueprint-grid);
    opacity: 0.05;
}

.bg-blueprint {
    position: relative;
    overflow: hidden;
}

.bg-blueprint::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(15, 23, 42, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    mask-image: radial-gradient(circle at 50% 50%, black, transparent 90%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, black, transparent 90%);
    z-index: 0;
    pointer-events: none;
    animation: bg-float 20s ease-in-out infinite alternate;
}

@keyframes bg-float {
    from { transform: translate(0, 0); }
    to { transform: translate(-20px, -20px); }
}

.bg-blueprint > * {
    position: relative;
    z-index: 1;
}

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

.stat-item {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 3rem 2rem;
    border-radius: 20px;
    text-align: center;
    transition: all 0.4s var(--ease-out-expo);
    position: relative;
}

.stat-item:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--color-accent);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3);
}

.stat-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(2, 132, 199, 0.1);
    border-radius: 16px;
    color: var(--color-accent);
    transition: all 0.3s ease;
}

.stat-item:hover .stat-icon {
    background: var(--color-accent);
    color: white;
    transform: scale(1.1) rotate(-5deg);
}

.stat-number {
    display: block;
    font-size: 3rem;
    font-weight: 800;
    color: white;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.stat-label {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
}

/* === ENHANCED STATS WITH COUNTER ANIMATION === */
.stats-container {
    background: var(--gradient-mesh), var(--color-primary);
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
}

.stats-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
}

.stat-number {
    display: block;
    font-size: 4rem;
    font-weight: 900;
    color: white;
    margin-bottom: 0.5rem;
    letter-spacing: -0.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(135deg, #ffffff 0%, rgba(255,255,255,0.85) 50%, var(--color-accent) 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-number .stat-suffix {
    font-size: 2.5rem;
    font-weight: 700;
    opacity: 0.8;
    margin-left: 0.1em;
    -webkit-text-fill-color: rgba(255,255,255,0.7);
}

/* Stat icon enhancements */
.stat-icon {
    position: relative;
}

.stat-icon::before {
    content: '';
    position: absolute;
    inset: -4px;
    background: rgba(2, 132, 199, 0.2);
    border-radius: 20px;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.4s var(--ease-out-expo);
}

.stat-item:hover .stat-icon::before {
    opacity: 1;
    transform: scale(1);
}

/* Counter Animation */
.stat-number[data-count] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
}

.stat-number[data-count].is-counting {
    opacity: 1;
    transform: translateY(0);
    animation: stat-gradient-shift 2s ease-out forwards;
}

.stat-number[data-count].counted {
    opacity: 1;
    transform: translateY(0);
    background-position: 100% 100%;
}

@keyframes stat-gradient-shift {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

/* === HISTORY TIMELINE === */
.timeline-section {
    position: relative;
    padding: 5rem 0;
}

.timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

/* Vertical spine */
.timeline::before {
    content: '';
    position: absolute;
    left: 24px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        var(--color-accent) 10%,
        var(--color-accent) 90%,
        transparent 100%
    );
}

@media (min-width: 769px) {
    .timeline::before {
        left: 50%;
        transform: translateX(-50%);
    }
}

.timeline-item {
    position: relative;
    padding-left: 70px;
    padding-bottom: 3rem;
}

@media (min-width: 769px) {
    .timeline-item {
        width: 50%;
        padding-left: 0;
        padding-right: 50px;
    }

    .timeline-item:nth-child(even) {
        margin-left: 50%;
        padding-left: 50px;
        padding-right: 0;
    }
}

/* Timeline marker */
.timeline-marker {
    position: absolute;
    left: 12px;
    top: 0;
    width: 26px;
    height: 26px;
    background: var(--color-primary);
    border: 3px solid var(--color-accent);
    border-radius: 50%;
    z-index: 2;
    transition: all 0.3s var(--ease-out-expo);
}

/* Pulse ring on revealed markers */
.timeline-item.is-revealed .timeline-marker::before {
    content: '';
    position: absolute;
    inset: -6px;
    border: 2px solid var(--color-accent);
    border-radius: 50%;
    animation: timeline-pulse 2s ease-out forwards;
}

@keyframes timeline-pulse {
    0% {
        transform: scale(0.8);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.timeline-marker::after {
    content: '';
    position: absolute;
    inset: 4px;
    background: var(--color-accent);
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.3s var(--ease-out-expo);
}

.timeline-item:hover .timeline-marker::after {
    transform: scale(1);
}

@media (min-width: 769px) {
    .timeline-marker {
        left: auto;
        right: -13px;
    }

    .timeline-item:nth-child(even) .timeline-marker {
        right: auto;
        left: -13px;
    }
}

/* Timeline content card */
.timeline-content {
    background: white;
    padding: 2rem 2.5rem;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    position: relative;
    transition: all 0.4s var(--ease-out-expo);
}

.timeline-content::before {
    content: '';
    position: absolute;
    top: 8px;
    left: -10px;
    width: 20px;
    height: 20px;
    background: white;
    border-left: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    transform: rotate(45deg);
}

@media (min-width: 769px) {
    .timeline-content::before {
        left: auto;
        right: -10px;
        border-left: none;
        border-bottom: none;
        border-right: 1px solid var(--border-color);
        border-top: 1px solid var(--border-color);
    }

    .timeline-item:nth-child(even) .timeline-content::before {
        right: auto;
        left: -10px;
        border-right: none;
        border-top: none;
        border-left: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
    }
}

.timeline-item:hover .timeline-content {
    transform: translateY(-4px);
    border-color: var(--color-accent);
    box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.12);
}

.timeline-year {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-accent);
    background: rgba(2, 132, 199, 0.1);
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    margin-bottom: 1rem;
    letter-spacing: 0.05em;
}

.timeline-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}

.timeline-text {
    font-size: 1rem;
    color: var(--color-text-main);
    line-height: 1.7;
    margin: 0;
}

/* Timeline reveal animation */
.timeline-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
}

.timeline-item.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays for timeline items */
.timeline-item:nth-child(1) { transition-delay: 0.1s; }
.timeline-item:nth-child(2) { transition-delay: 0.2s; }
.timeline-item:nth-child(3) { transition-delay: 0.3s; }
.timeline-item:nth-child(4) { transition-delay: 0.4s; }
.timeline-item:nth-child(5) { transition-delay: 0.5s; }

/* === HERO PARALLAX === */
.hero--parallax {
    overflow: hidden;
}

.hero--parallax .hero-bg {
    position: absolute;
    inset: -20%;
    background-size: cover;
    background-position: center;
    will-change: transform;
    transition: transform 0.1s linear;
}

.hero--parallax .hero-overlay {
    position: absolute;
    inset: 0;
    background: var(--gradient-mesh-overlay);
    z-index: 1;
}

.hero--parallax > .container {
    position: relative;
    z-index: 2;
}

/* Hero scroll indicator */
.hero-scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.6);
    animation: hero-scroll-bounce 2s ease-in-out infinite;
    cursor: pointer;
    transition: color 0.3s ease;
    z-index: 3;
}

.hero-scroll-indicator:hover {
    color: var(--color-accent);
}

@keyframes hero-scroll-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(8px); }
}

@media (max-width: 768px) {
    .hero-scroll-indicator {
        display: none;
    }
}

/* About page hero specifics with parallax */
.about-page .hero.hero--parallax {
    background: var(--color-primary);
}

.about-page .hero.hero--parallax .hero-bg {
    background-image: url('/uploads/images/jovalFachada.jpg');
    opacity: 0.4;
}

.rounded-8 { border-radius: 12px; }

/* Support Section Polish */
.about-support {
    position: relative;
}

.about-support .support-content .lead {
    max-width: 800px;
    margin: 0 auto;
}

/* Support & Features */
.about-support .support-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
}

.support-highlights .feature-box {
    position: relative;
    background: white;
    padding: 3rem 2.5rem;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    transition: all 0.4s var(--ease-out-expo);
    text-align: center;
    overflow: hidden;
}

.support-highlights .feature-box:hover {
    transform: translateY(-8px);
    border-color: var(--color-accent);
    box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.1);
}

.support-highlights .feature-box .icon-wrapper {
    width: 90px;
    height: 90px;
    margin: 0 auto 2rem;
    background: var(--color-bg-body);
    border-radius: 20px;
    transition: all 0.3s ease;
}

.support-highlights .feature-box:hover .icon-wrapper {
    background: var(--color-accent);
    color: white;
    transform: scale(1.1) rotate(-5deg);
}

/* Accent line on hover */
.support-highlights .feature-box::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: var(--color-accent);
    border-radius: 3px 3px 0 0;
    transition: width 0.4s var(--ease-out-expo);
}

.support-highlights .feature-box:hover::after {
    width: 60%;
}

.support-highlights .feature-box-title {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: var(--color-primary);
}

/* Quality Section - Premium Certification Badge */
.quality-badge-wrapper {
    position: relative;
    padding: 3rem 2rem;
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.03) 0%, transparent 50%);
    border-radius: 24px;
    border: 1px solid rgba(2, 132, 199, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.quality-badge-wrapper::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 20%;
    right: 20%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
    border-radius: 0 0 4px 4px;
}

.quality-badge-img {
    max-width: 160px;
    filter: grayscale(0.3);
    opacity: 0.9;
    transition: all 0.5s var(--ease-out-expo);
    border-radius: 12px;
    box-shadow: 0 8px 32px -8px rgba(15, 23, 42, 0.15);
}

.quality-badge-wrapper:hover .quality-badge-img {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.05) rotate(-2deg);
    box-shadow: 0 16px 48px -12px rgba(2, 132, 199, 0.25);
}

.quality-badge-title {
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: -0.05em;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    position: relative;
    display: inline-block;
}

.quality-badge-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 3px;
    background: var(--color-accent);
    border-radius: 2px;
    opacity: 0.5;
}

/* Certification stamp effect */
.quality-stamp {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 100px;
    color: var(--color-success);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.quality-stamp svg {
    width: 14px;
    height: 14px;
}

/* Contact Card Refinements */
.about-contact .contact-card {
    margin-top: -4rem;
    z-index: 10;
}

/* === FACTS PAGE === */
.facts-page .hero {
    background: var(--gradient-mesh-overlay), url('/uploads/images/jovalArmazem.jpg');
    background-size: cover;
    background-position: center center;
}

.facts-page .table-standard th {
    width: 30%;
    font-weight: 700;
    color: var(--color-primary);
}

.facts-page .table-standard td {
    text-align: left;
    padding-left: 2rem;
}

.bg-black-20 { background-color: rgba(0, 0, 0, 0.2); }
.text-xs { font-size: 0.75rem; }
.p-3 { padding: 0.75rem; }
.rounded { border-radius: 4px; }

.btn-map {
    border: 2px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.05);
    color: white !important;
    padding: 0.8rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-map:hover {
    background: white !important;
    color: var(--color-primary) !important;
    border-color: white !important;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.3);
}


.section-featured {
    padding: 6rem 0;
    background: radial-gradient(circle at 50% 0%, rgba(2, 132, 199, 0.03) 0%, transparent 70%), white;
    border-top: 1px solid var(--border-color);
    position: relative;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 4rem;
    position: relative;
    padding-bottom: 1.5rem;
}

.section-header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--border-color);
}

.section-header h2 {
    margin-bottom: 0.5rem;
    position: relative;
    padding-left: 1.5rem;
}

.section-header h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 1.5rem;
    background: var(--color-accent);
    border-radius: 2px;
}

.section-header p {
    margin-bottom: 0;
    color: var(--color-text-muted);
    padding-left: 1.5rem;
}

.link-view-all {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    padding: 0.5rem 1rem;
    background: rgba(15, 23, 42, 0.03);
    border-radius: 4px;
    transition: all 0.2s ease;
}

.link-view-all:hover {
    background: var(--color-primary);
    color: white;
}

.placeholder-image {
    height: 220px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
}

.section-categories {
    padding: 6rem 0;
    margin: 2rem 0;
}

.section-categories h2 {
    text-align: center;
    margin-bottom: 4rem;
}

@media (max-width: 768px) {
    .section-categories {
        padding: 4rem 0;
        margin: 1rem 0;
    }
    .section-categories h2 {
        margin-bottom: 2.5rem;
    }
}

/* About Page & General Typography */
.eyebrow {
    text-transform: uppercase;
    color: var(--color-accent);
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
    display: block;
}

.lead {
    font-size: 1.25rem;
    color: var(--color-text-main);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

/* === CONTACT CARDS (Standardized) === */
.contact-card {
    background: var(--color-primary);
    color: white;
    padding: 4rem;
    border-radius: var(--radius-lg);
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 30px 60px -12px rgba(15, 23, 42, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.contact-card--gradient {
    background: var(--gradient-mesh), var(--color-primary);
}

.contact-card::after {
    content: '';
    position: absolute;
    bottom: -40px;
    right: -20px;
    width: 350px;
    height: 350px;
    background-image: url('../uploads/images/gota JOVAL branca.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.04;
    pointer-events: none;
    z-index: 0;
}

.contact-card h2 {
    color: white !important;
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

.contact-card__info {
    position: relative;
    z-index: 1;
}

.contact-card__info p {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
    font-size: 1.15rem;
    font-weight: 400;
}

.contact-card__description {
    max-width: 400px;
}

.contact-card__actions {
    background: rgba(255, 255, 255, 0.03);
    padding: 3rem;
    border-radius: 16px;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 1;
    position: relative;
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.02);
}

.contact-methods {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.contact-method-item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    color: white !important;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-method-item:hover {
    color: var(--color-accent-light) !important;
    transform: translateX(8px);
}

.contact-method-item .icon-circle {
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent-light);
    flex-shrink: 0;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-method-item:hover .icon-circle {
    background: var(--color-accent);
    color: white;
    border-color: var(--color-accent);
    transform: scale(1.1) rotate(-5deg);
}

.contact-method-item span {
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
}

.contact-method-item small {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    opacity: 0.6;
}

.btn-map {
    border: 2px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.05);
    color: white !important;
    padding: 0.8rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-map:hover {
    background: white !important;
    color: var(--color-primary) !important;
    border-color: white !important;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.3);
}

@media (max-width: 1100px) {
    .contact-card {
        gap: 3rem;
        padding: 3.5rem;
    }
}

@media (max-width: 992px) {
    .contact-card {
        grid-template-columns: 1fr;
        padding: 3rem;
        gap: 3rem;
    }
    
    .contact-card h2 {
        font-size: 2rem;
    }
    
    .contact-card::after {
        width: 250px;
        height: 250px;
    }
}

@media (max-width: 576px) {
    .contact-card {
        padding: 2.5rem 1.5rem;
        border-radius: 0;
    }
    
    .contact-card__actions {
        padding: 2rem 1.5rem;
    }
    
    .contact-method-item {
        gap: 1rem;
    }
    
    .contact-method-item span {
        font-size: 1.05rem;
    }
}

/* === UTILITIES === */
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-block { display: block !important; }
.align-items-center { align-items: center !important; }
.justify-content-between { justify-content: space-between !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.text-center { text-align: center; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.pt-5 { padding-top: 3rem !important; }
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pt-3 { padding-top: 1rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.p-0 { padding: 0 !important; }
.mx-auto { margin-left: auto; margin-right: auto; }
.w-100 { width: 100%; }
.mt-6 { margin-top: 4rem !important; }
.display-4 { font-size: 3rem; font-weight: 700; line-height: 1.2; }
.btn-lg { padding: 1rem 2rem; font-size: 1.1rem; }
.lead { font-size: 1.25rem; font-weight: 300; }
.max-w-700 { max-width: 700px; }

@media (max-width: 768px) {
    .display-4 { font-size: 2.25rem; }
}

/* === CONTACT PAGE === */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 4rem;
}

@media (max-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

/* Contact Info Cards */
.contact-info-cards {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.info-card {
    display: flex;
    gap: 1.5rem;
    padding: 2rem;
    background: var(--color-bg-body);
    border-radius: var(--radius-md);
    border: 1px solid rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}

.info-card:hover {
    transform: translateX(5px);
}

.info-card__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: white;
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.info-card__content h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: var(--color-primary);
}

.info-card__content p {
    margin-bottom: 0;
    color: var(--color-text-main);
    line-height: 1.5;
}

.info-card__content a {
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 500;
}

.info-card__content a:hover {
    text-decoration: underline;
}

/* Status Indicators */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    margin-top: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 99px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.status-green { color: var(--color-success); background: rgba(16, 185, 129, 0.1); }
.status-green .status-dot { 
    background-color: var(--color-success); 
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2); 
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.status-yellow { color: var(--color-warning); background: rgba(245, 158, 11, 0.1); }
.status-yellow .status-dot { background-color: var(--color-warning); box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2); }

.status-red { color: var(--color-danger); background: rgba(239, 68, 68, 0.1); }
.status-red .status-dot { background-color: var(--color-danger); box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2); }

.info-card__value {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--color-primary);
}

.info-card__sub {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* Contact Form Wrapper - Base Styles handled in Technical Data section */
.form-header {
    margin-bottom: 2.5rem;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -10px;
    margin-left: -10px;
}

.form-row > .form-group {
    padding-right: 10px;
    padding-left: 10px;
    flex: 0 0 50%;
    max-width: 50%;
}

/* Stack form fields on mobile (bp-sm: 576px) */
@media (max-width: 576px) {
    .form-row > .form-group {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background-color: #f8fafc;
    transition: all 0.2s ease;
}

.form-control:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-color: var(--color-accent);
    background-color: white;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.1);
}

.contact-textarea {
    min-height: 180px;
    resize: vertical;
}

/* === TOAST NOTIFICATIONS === */
.toast-container {
    position: fixed;
    top: 2rem;
    right: 2rem;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    pointer-events: none;
}

.toast {
    background: white;
    border-radius: 8px;
    padding: 1rem 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 300px;
    max-width: 450px;
    border-left: 4px solid var(--color-accent);
    animation: toastSlideIn 0.3s ease-out;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: auto;
}

.toast--success { border-left-color: var(--color-success); }
.toast--error { border-left-color: var(--color-danger); }
.toast--info { border-left-color: var(--color-accent); }

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

.toast__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.toast__content { flex-grow: 1; }
.toast__title { font-weight: 700; display: block; font-size: 0.9rem; color: var(--color-primary); }
.toast__message { font-size: 0.85rem; color: var(--color-text-muted); margin: 0 !important; }

/* Existing Sections */
.form-privacy-notice {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.honeypot {
    display: none;
}

/* Quality Policy Card Horizontal */
.quality-policy-card-horizontal {
    background: var(--gradient-mesh), var(--color-primary);
    color: white;
    padding: 4rem;
    border-radius: var(--radius-lg);
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 30px 60px -12px rgba(15, 23, 42, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.quality-policy-card-horizontal::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: -20px;
    width: 400px;
    height: 400px;
    background-image: url('../uploads/images/gota JOVAL branca.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.04;
    pointer-events: none;
    z-index: 0;
}

.quality-card__info {
    position: relative;
    z-index: 1;
}

.quality-card__info h2 {
    color: white !important;
    font-size: 2.25rem;
    margin-bottom: 1.5rem;
}

.quality-card__list {
    background: rgba(255, 255, 255, 0.03);
    padding: 3rem;
    border-radius: 20px;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 1;
    position: relative;
}

.quality-features-grid {
    display: grid;
    gap: 2rem;
}

.quality-feature-item {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.quality-feature-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-accent-light);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.quality-feature-item:hover .quality-feature-icon {
    background: var(--color-accent);
    color: white;
    transform: scale(1.1);
}

.quality-card__info p {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
    font-size: 1.15rem;
    font-weight: 400;
}

@media (max-width: 1100px) {
    .quality-policy-card-horizontal {
        gap: 3rem;
        padding: 3.5rem;
    }
}

@media (max-width: 992px) {
    .quality-policy-card-horizontal {
        grid-template-columns: 1fr;
        padding: 3rem;
        gap: 3rem;
    }
}

@media (max-width: 576px) {
    .quality-policy-card-horizontal {
        padding: 2.5rem 1.5rem;
        border-radius: 0;
    }
    
    .quality-card__list {
        padding: 2rem 1.25rem;
    }
}

/* Map Section Standard */
.map-container-standard {
    height: 500px;
    width: 100%;
}

.map-container-standard iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* === FACTS PAGE === */
.facts-container {
    max-width: 800px;
    margin: 0 auto;
}

.facts-intro {
    margin-bottom: 3rem;
    font-size: 1.25rem;
    color: var(--color-text-main);
}

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

.facts-why-section {
    margin-top: 4rem;
}

.facts-why-section h2 {
    margin-bottom: 1.5rem;
}

.fact-card {
    background: var(--color-bg-body);
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
}

.fact-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.fact-label {
    color: var(--color-text-muted);
    font-weight: 500;
}

.facts-why-list {
    list-style: none;
    padding: 0;
}

.facts-why-list li {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
    position: relative;
}

.facts-why-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: bold;
}

/* === PRODUCT DETAILS PAGE === */
.product-header-nav { margin-bottom: 2rem; }
.product-details-container { display: flex; flex-direction: column; gap: 3rem; }
.product-main-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: start; }
@media (min-width: 992px) { .product-main-grid { grid-template-columns: 40% 1fr; } }
.engineering-corners {
    position: relative;
}

.engineering-corners::before,
.engineering-corners::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border-color: rgba(15, 23, 42, 0.15);
    border-style: solid;
    pointer-events: none;
    z-index: 5;
}

/* Top-Left */
.engineering-corners::before {
    top: 8px;
    left: 8px;
    border-width: 1px 0 0 1px;
}

/* Bottom-Right */
.engineering-corners::after {
    bottom: 8px;
    right: 8px;
    border-width: 0 1px 1px 0;
}

/* Specific Application */
.product-image-wrapper {
    position: relative;
    border-radius: 0;
    overflow: hidden;
    background: transparent;
}

.product-image-large { width: 100%; height: auto; display: block; cursor: zoom-in; }

/* Product Main Image Container - responsive for landscape images */
.product-image-main {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-secondary, #f8fafc);
    max-height: 50vh;
    overflow: hidden;
}

.product-image-main img {
    max-height: 50vh;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

@media (min-width: 768px) {
    .product-image-main {
        aspect-ratio: 1 / 1;
        max-height: none;
    }

    .product-image-main img {
        max-height: 100%;
        width: 100%;
        height: 100%;
    }
}

/* Product Gallery Thumbnails */
.product-thumbnails {
    display: flex;
    gap: 10px;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.thumb-item {
    width: 80px;
    height: 80px;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
    padding: 5px;
}

.thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

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

.thumb-item.active {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.1);
}

/* Product Meta & Info */
.product-meta { margin-bottom: 1.5rem; color: var(--color-text-muted); font-size: 0.95rem; }
.product-meta a { color: var(--color-accent); text-decoration: none; font-weight: 500; }
.product-price { font-size: 2rem; font-weight: 700; color: var(--color-accent); margin: 1.5rem 0; }
.product-description { line-height: 1.8; }

/* Product Applications Section */
.product__applications { margin-top: 1.5rem; }
.product__applications-title { font-size: 1.1rem; margin-bottom: 0.75rem; color: var(--color-primary); }

/* Product Details Collapsible Section */
.product-details-extra summary {
    cursor: pointer;
    list-style: none;
    outline: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.product-details-extra summary::-webkit-details-marker {
    display: none;
}

.product-details-extra summary::before {
    content: "⊕";
    font-size: 1.2rem;
    color: var(--color-accent);
}

.product-details-extra[open] summary::before {
    content: "⊖";
}

.product-details-extra[open] summary {
    margin-bottom: 1.5rem;
}

.product-details-extra .product-description {
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.product__actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.btn__icon { vertical-align: middle; margin-right: 5px; }

/* Stack product action buttons on mobile */
@media (max-width: 576px) {
    .product__actions {
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
    }

    .product__actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* Keep icon buttons side by side */
    .product__actions .btn-link {
        width: auto;
        align-self: flex-start;
    }
}

/* Technical Specs Section (bp-md: 768px) */
.product-specs-section {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid var(--border-color);
}

/* Mobile-first: single column, expand to 2-col on tablet+ */
.specs-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 769px) {
    .product-specs-section {
        margin-top: 4rem;
        padding-top: 3rem;
    }
    .specs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem;
    }
}

/* Admin Preview Scaling Overrides */
.is-admin-preview {
    margin-top: 0 !important;
    padding-top: 1rem !important;
    font-size: 0.85rem !important;
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.is-admin-preview .specs-grid {
    grid-template-columns: 1fr !important; /* Force single column in sidebar preview */
    gap: 1rem !important;
}

.is-admin-preview .tech-card {
    padding: 1rem !important;
    margin-bottom: 0 !important;
}

.is-admin-preview .tech-card__title {
    font-size: 1rem !important;
}

.is-admin-preview .table-standard {
    font-size: 0.75rem !important;
}

.is-admin-preview .specs-group-wrapper--full {
    grid-column: span 1 !important;
}

.is-admin-preview .performance-chart-container {
    max-height: 200px;
}

/* Logical Grouping for Technical Cards */
.specs-group-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
    grid-column: span 1;
    break-inside: avoid;
    page-break-inside: avoid;
}

@media (max-width: 768px) {
    .specs-group-wrapper {
        gap: 0.75rem;
    }
}

.specs-group-wrapper--full {
    grid-column: 1 / -1 !important;
}

.text-danger-muted {
    color: #991b1b !important;
}

/* Materials Layout */
.materials-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
}

.materials-diagram-side {
    display: flex;
    justify-content: center;
    background: white;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.materials-diagram-side img {
    max-width: 100%;
    height: auto;
    max-height: 300px; /* Standardized with other diagrams */
    object-fit: contain;
}

.materials-table-wrapper {
    width: 100%;
    overflow-x: auto !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 1rem;
}

.materials-table-wrapper::-webkit-scrollbar {
    display: none;
}

.product-main-grid > *, .specs-grid > * { min-width: 0; }

.unit-toggle-container { display: flex; justify-content: flex-end; margin-bottom: 1rem; }
.unit-toggle { display: inline-flex; background: #f1f5f9; border-radius: 6px; padding: 3px; border: 1px solid var(--border-color); }
.unit-toggle-btn { padding: 6px 12px; border: none; background: transparent; font-size: 0.85rem; font-weight: 600; color: #64748b; cursor: pointer; border-radius: 4px; transition: all 0.2s; }
.unit-toggle-btn.active { background: white; color: var(--color-primary); box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.unit-toggle-btn:active { transform: scale(0.96); }

/* Mobile unit toggle - larger touch targets */
@media (max-width: 768px) {
    .unit-toggle {
        padding: 3px;
        border-radius: 8px;
    }

    .unit-toggle-btn {
        min-height: 44px;
        min-width: 48px;
        padding: 10px 16px;
        font-size: 0.85rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* When inside tech-card header, position below title on small screens */
    .tech-card__header {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .tech-card__header .unit-toggle {
        order: 1;
        margin-left: auto;
    }

    /* Hide unit-toggle when card is collapsed */
    .tech-card.is-collapsed .unit-toggle {
        display: none;
    }
}

/* Very small screens - full width toggle (bp-xs: 480px) */
@media (max-width: 480px) {
    .tech-card__header .unit-toggle {
        width: 100%;
        justify-content: center;
    }

    .unit-toggle-btn {
        flex: 1;
        min-height: 44px;
    }
}

.app-list { list-style: none; padding: 0; margin: 0; flex-grow: 1; }
.app-list li { position: relative; padding-left: 1.75rem; margin-bottom: 0.75rem; line-height: 1.5; font-size: 0.95rem; color: #374151; }
.app-list li::before { content: "→"; position: absolute; left: 0; color: var(--color-primary); font-weight: bold; }
.app-list--warning li { color: #b91c1c; font-weight: 600; }
.app-list--warning li::before { content: "⚠"; color: #dc2626; }

.contact-form-wrapper { 
    background-color: #f8fafc !important; 
    border-radius: 16px !important; 
    padding: 3rem !important; 
    border: 1px solid var(--border-color) !important;
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
}

/* === 404 PAGE === */
.error-404-section {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(2, 132, 199, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(2, 132, 199, 0.06) 0%, transparent 50%),
        linear-gradient(180deg, var(--color-bg-body) 0%, #e8f4fc 50%, #dbeafe 100%);
    padding: 2rem 0;
}

/* Make main a flex container when it contains the 404 section */
main:has(.error-404-section) {
    display: flex;
    flex-direction: column;
}

.error-page-enhanced {
    text-align: center;
    position: relative;
    z-index: 2;
    max-width: 600px;
    margin: 0 auto;
    padding: 3rem 1.5rem;
}

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

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

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Logo */
.error-logo {
    display: inline-block;
    margin-bottom: 2rem;
    animation: fadeSlideUp 0.6s ease-out;
}

.error-logo img {
    height: 52px;
    width: auto;
    transition: transform 0.3s ease, filter 0.3s ease;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.08));
}

.error-logo:hover img {
    transform: scale(1.05);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.12));
}

/* Error Code with Pump Animation */
.error-code-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 1.5rem;
    animation: scaleIn 0.7s ease-out 0.1s both;
}

.error-code-digit {
    font-size: clamp(5rem, 15vw, 9rem);
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1;
    letter-spacing: -0.05em;
    text-shadow: 0 4px 20px rgba(15, 23, 42, 0.1);
}

.error-code-digit.digit-4-left {
    transform-origin: right center;
}

.error-code-digit.digit-4-right {
    transform-origin: left center;
}

.error-code-digit.zero {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 -0.15em;
}

.pump-icon {
    width: clamp(5rem, 13vw, 8rem);
    height: clamp(5rem, 13vw, 8rem);
    color: var(--color-accent);
    filter: drop-shadow(0 2px 10px rgba(2, 132, 199, 0.3));
}

.pump-icon .impeller {
    transform-origin: 50px 50px;
    animation: pumpSpin 3s linear infinite !important;
}

@keyframes pumpSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Ensure pump animation works even with reduced motion (decorative only) */
@media (prefers-reduced-motion: reduce) {
    .pump-icon .impeller {
        animation: pumpSpin 3s linear infinite !important;
    }
}

/* Title and Description */
.error-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
    animation: fadeSlideUp 0.6s ease-out 0.2s both;
}

.error-description {
    font-size: 1.05rem;
    color: var(--color-text-muted);
    max-width: 420px;
    margin: 0 auto 2rem;
    line-height: 1.7;
    animation: fadeSlideUp 0.6s ease-out 0.3s both;
}

/* Search Bar */
.error-search-wrapper {
    margin-bottom: 2rem;
    animation: fadeSlideUp 0.6s ease-out 0.4s both;
}

.error-search-form {
    display: flex;
    align-items: center;
    max-width: 420px;
    margin: 0 auto;
    background: var(--color-bg-white);
    border-radius: 60px;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.06),
        0 1px 3px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    overflow: hidden;
    border: 2px solid rgba(226, 232, 240, 0.8);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.error-search-form:focus-within {
    border-color: var(--color-accent);
    box-shadow:
        0 4px 30px rgba(2, 132, 199, 0.15),
        0 0 0 4px rgba(2, 132, 199, 0.08);
    transform: translateY(-1px);
}

.error-search-form .search-icon-left {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 1.25rem;
    color: var(--color-text-muted);
    transition: color 0.3s ease;
}

.error-search-form:focus-within .search-icon-left {
    color: var(--color-accent);
}

.error-search-form input[type="search"] {
    flex: 1;
    border: none;
    padding: 1rem 1rem;
    font-size: 0.95rem;
    background: transparent;
    outline: none;
    color: var(--color-text-main);
    font-family: var(--font-main);
}

.error-search-form input[type="search"]::placeholder {
    color: var(--color-text-muted);
}

.error-search-form input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.error-search-form button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 4px;
    background: var(--color-accent);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: white;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.error-search-form button:hover {
    background: var(--color-accent-hover);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.4);
}

.error-search-form button:active {
    transform: scale(0.98);
}

/* Navigation Links */
.error-nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
    justify-content: center;
    margin-bottom: 2.5rem;
    animation: fadeSlideUp 0.6s ease-out 0.5s both;
}

.error-nav-links .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.error-nav-links .btn span {
    position: relative;
    z-index: 1;
}

.error-nav-links .btn svg {
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}

.error-nav-links .btn-primary {
    background: linear-gradient(135deg, var(--color-accent) 0%, #0ea5e9 100%);
    color: white;
    box-shadow:
        0 4px 14px rgba(2, 132, 199, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.error-nav-links .btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #0ea5e9 0%, var(--color-accent) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.error-nav-links .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow:
        0 8px 25px rgba(2, 132, 199, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.error-nav-links .btn-primary:hover::before {
    opacity: 1;
}

.error-nav-links .btn-primary:hover svg {
    transform: scale(1.1);
}

.error-nav-links .btn-outline {
    background: var(--color-bg-white);
    color: var(--color-text-main);
    border: 2px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.error-nav-links .btn-outline:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: rgba(2, 132, 199, 0.04);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.12);
}

.error-nav-links .btn-outline:hover svg {
    transform: scale(1.1);
}

.error-nav-links .btn-contact:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: rgba(15, 23, 42, 0.04);
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.1);
}

/* Helpful Links */
.error-helpful-links {
    padding-top: 2rem;
    border-top: 1px solid rgba(226, 232, 240, 0.8);
    animation: fadeIn 0.6s ease-out 0.6s both;
}

.error-helpful-links p {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-bottom: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}

.error-helpful-links ul {
    display: flex;
    justify-content: center;
    gap: 2rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.error-helpful-links a {
    font-size: 0.95rem;
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    padding-bottom: 2px;
}

.error-helpful-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-accent);
    transition: width 0.3s ease;
}

.error-helpful-links a:hover {
    color: var(--color-accent-hover);
}

.error-helpful-links a:hover::after {
    width: 100%;
}

/* Visual Flair - Animated Elements */
.error-visual-flair {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Water Drops */
.water-drop {
    position: absolute;
    width: 10px;
    height: 14px;
    background: linear-gradient(180deg, rgba(2, 132, 199, 0.6) 0%, rgba(14, 165, 233, 0.8) 100%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    opacity: 0;
    animation: dropFall 5s ease-in infinite;
    filter: blur(0.5px);
}

.drop-1 { left: 10%; animation-delay: 0s; }
.drop-2 { left: 25%; animation-delay: 1.2s; width: 8px; height: 11px; }
.drop-3 { left: 70%; animation-delay: 2.4s; }
.drop-4 { left: 85%; animation-delay: 0.8s; width: 6px; height: 9px; }
.drop-5 { left: 50%; animation-delay: 3.5s; width: 12px; height: 16px; }

@keyframes dropFall {
    0% {
        top: -20px;
        opacity: 0;
        transform: scale(0.6) translateX(0);
    }
    5% {
        opacity: 0.5;
        transform: scale(1) translateX(0);
    }
    50% {
        transform: scale(1) translateX(10px);
    }
    95% {
        opacity: 0.3;
    }
    100% {
        top: 105%;
        opacity: 0;
        transform: scale(0.8) translateX(-5px);
    }
}

/* Floating Bubbles */
.bubble {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,
        rgba(255, 255, 255, 0.8) 0%,
        rgba(2, 132, 199, 0.1) 40%,
        rgba(2, 132, 199, 0.05) 100%);
    border: 1px solid rgba(2, 132, 199, 0.15);
    animation: bubbleFloat 8s ease-in-out infinite;
}

.bubble-1 { width: 60px; height: 60px; left: 8%; bottom: 15%; animation-delay: 0s; }
.bubble-2 { width: 35px; height: 35px; left: 18%; bottom: 25%; animation-delay: 2s; }
.bubble-3 { width: 45px; height: 45px; right: 12%; bottom: 20%; animation-delay: 4s; }
.bubble-4 { width: 25px; height: 25px; right: 25%; bottom: 30%; animation-delay: 1s; }

@keyframes bubbleFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.4;
    }
    50% {
        transform: translateY(-30px) scale(1.05);
        opacity: 0.6;
    }
}

/* Decorative Circles */
.deco-circle {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(2, 132, 199, 0.1);
    animation: pulseCircle 6s ease-in-out infinite;
}

.circle-1 { width: 300px; height: 300px; top: -100px; right: -100px; animation-delay: 0s; }
.circle-2 { width: 200px; height: 200px; bottom: -50px; left: -50px; animation-delay: 2s; }
.circle-3 { width: 150px; height: 150px; top: 20%; left: 5%; animation-delay: 4s; opacity: 0.5; }

@keyframes pulseCircle {
    0%, 100% {
        transform: scale(1);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.5;
    }
}

/* Wave at Bottom */
.wave-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    color: rgba(2, 132, 199, 0.08);
    animation: waveMove 15s ease-in-out infinite;
}

@keyframes waveMove {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-20px);
    }
}

/* Responsive error page (bp-sm: 576px) */
@media (max-width: 576px) {
    .error-404-section {
        padding: 4rem 0 6rem;
    }

    .error-page-enhanced {
        padding: 2rem 1rem;
    }

    .error-code-digit {
        font-size: clamp(4rem, 18vw, 6rem);
    }

    .pump-icon {
        width: clamp(3.5rem, 15vw, 5rem);
        height: clamp(3.5rem, 15vw, 5rem);
    }

    .error-nav-links {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .error-nav-links .btn {
        justify-content: center;
        padding: 1rem 1.5rem;
    }

    .bubble,
    .deco-circle {
        display: none;
    }

    .error-helpful-links ul {
        flex-direction: column;
        gap: 1rem;
    }

    .error-search-form {
        max-width: 100%;
    }
}

/* Extra small screens (bp-xs: 480px) */
@media (max-width: 480px) {
    .error-logo img {
        height: 40px;
    }

    .error-title {
        font-size: 1.4rem;
    }

    .error-description {
        font-size: 0.95rem;
    }
}

/* === PDF NOT AVAILABLE ERROR PAGE === */
.pdf-error-section {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(2, 132, 199, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(2, 132, 199, 0.06) 0%, transparent 50%),
        linear-gradient(180deg, var(--color-bg-body) 0%, #e8f4fc 50%, #dbeafe 100%);
    padding: 2rem 0;
}

main:has(.pdf-error-section) {
    display: flex;
    flex-direction: column;
}

/* PDF Document Icon */
.pdf-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    animation: scaleIn 0.7s ease-out 0.1s both;
}

.pdf-document-icon {
    width: clamp(6rem, 18vw, 9rem);
    height: clamp(6rem, 18vw, 9rem);
    color: var(--color-accent);
    filter: drop-shadow(0 2px 10px rgba(2, 132, 199, 0.3));
}

.pdf-loading-spinner {
    transform-origin: 50px 50px;
    animation: pdfSpinSlow 4s linear infinite;
}

@keyframes pdfSpinSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Responsive PDF error page */
@media (max-width: 576px) {
    .pdf-error-section {
        padding: 4rem 0 6rem;
    }

    .pdf-document-icon {
        width: clamp(4.5rem, 20vw, 6rem);
        height: clamp(4.5rem, 20vw, 6rem);
    }
}

/* === GENERIC PAGE WRAPPER === */
.content-wrapper {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 0;
}

.content-wrapper--legal {
    line-height: 1.8;
    color: var(--color-text-main);
    font-size: 1.1rem;
}

.content-wrapper--legal h2 {
    color: var(--color-primary);
    font-size: 1.5rem;
    margin-top: 3rem;
    margin-bottom: 1.25rem;
    padding-left: 1rem;
    border-left: 3px solid var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.content-wrapper--legal p {
    margin-bottom: 1.5rem;
}

.content-wrapper--legal ul {
    margin-bottom: 2rem;
    padding-left: 1.5rem;
}

.content-wrapper--legal li {
    margin-bottom: 0.75rem;
}

.dynamic-page-content {
    position: relative;
    background: white;
}

.dynamic-page-content::before {
    content: '';
    position: absolute;
    top: 10%;
    right: 5%;
    width: 500px;
    height: 500px;
    background-image: url('../uploads/images/gota JOVAL branca.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.02;
    pointer-events: none;
    filter: invert(1); /* Make the white drop visible on white background as a subtle shadow */
}

/* === PRODUCTS PAGE LAYOUT === */
.products-page-layout {
    display: flex;
    gap: 3rem;
    align-items: flex-start;
    margin-top: 2rem;
}

/* === PRODUCTS SIDEBAR === */
.products-sidebar {
    width: 280px;
    flex-shrink: 0;
    position: sticky;
    top: 100px;
    padding: 1.75rem;
    background: var(--color-bg-white);
    /* Floating Panel Style */
    border: none;
    box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.1);
    clip-path: polygon(
        0 12px, 12px 0, 100% 0, 100% calc(100% - 12px),
        calc(100% - 12px) 100%, 0 100%
    );
    transition: all 0.3s ease;
}

.products-sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-primary-light));
    opacity: 0.9;
}

.products-sidebar .sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0 0 1.25rem 0;
    margin-bottom: 1.25rem;
    border-bottom: 1px dashed var(--border-color);
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
    width: 100%;
    cursor: pointer;
    text-align: left;
}

.products-sidebar .sidebar-header::before {
    content: '';
    display: block;
    width: 4px;
    height: 1.5rem;
    background: var(--color-accent);
    box-shadow: 0 0 10px rgba(2, 132, 199, 0.3);
    border-radius: 1px;
    flex-shrink: 0;
}

.products-sidebar h3 {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0;
    flex-grow: 1;
}

.category-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* "All Products" Separation */
.category-list > li:first-child {
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px dashed var(--border-color);
}

.category-list li {
    margin: 0;
}

.category-list a {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.6rem 0.75rem;
    color: var(--color-text-main);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 4px;
    background: transparent;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
}

/* Mechanical Marker */
.category-list a::before {
    content: '';
    width: 8px;
    height: 8px;
    border: 1.5px solid var(--border-color);
    background: transparent;
    flex-shrink: 0;
    transition: all 0.2s ease;
    border-radius: 1px;
}

.category-list a:hover {
    color: var(--color-primary);
    background: rgba(241, 245, 249, 0.5);
    transform: translateX(4px);
}

.category-list a:hover::before {
    border-color: var(--color-accent);
    transform: rotate(90deg);
}

.category-list a.active {
    color: var(--color-primary);
    font-weight: 600;
    background: linear-gradient(90deg, rgba(2, 132, 199, 0.08), transparent);
}

.category-list a.active::before {
    background: var(--color-accent);
    border-color: var(--color-accent);
    box-shadow: 0 0 8px rgba(2, 132, 199, 0.4);
    transform: scale(1.1);
}

.products-main {
    flex-grow: 1;
}

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

@media (max-width: 768px) {
    .products-page-layout {
        flex-direction: column;
    }

    .products-sidebar {
        width: 100%;
        position: static;
        clip-path: polygon(
            0 8px, 8px 0, 100% 0, 100% calc(100% - 8px),
            calc(100% - 8px) 100%, 0 100%
        );
        padding: 1rem 1.25rem;
    }

    .products-sidebar .sidebar-header {
        padding-bottom: 0;
        margin-bottom: 0;
        border-bottom: none;
        min-height: 3rem; /* Improved touch target */
    }

    .products-sidebar.active .sidebar-header {
        padding-bottom: 1rem;
        margin-bottom: 1rem;
        border-bottom: 1px dashed var(--border-color);
    }

    .category-list a {
        padding: 0.625rem 0.875rem;
    }
}

/* === PRODUCTS PAGE HERO === */
.products-hero {
    background: var(--gradient-mesh), var(--color-primary);
    color: white;
    padding: 4rem 0 3rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.products-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--blueprint-grid);
    background-size: 40px 40px;
    opacity: 0.08;
    animation: blueprint-drift 20s linear infinite;
}

@keyframes blueprint-drift {
    from { transform: translate(0, 0); }
    to { transform: translate(40px, 40px); }
}

.products-hero h1 {
    color: white;
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: 0.75rem;
}

.products-hero .lead {
    max-width: 600px;
    margin: 0 auto;
    opacity: 1;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.products-hero .eyebrow {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    opacity: 0.7;
    margin-bottom: 0.5rem;
}

/* === PRODUCT CARD TECHNICAL ENHANCEMENTS === */
/* Scan-line effect on hover */
.product-image-container {
    position: relative;
}

/* Secondary image reveal */
.product-image-secondary {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-card:hover .product-image-secondary {
    opacity: 1;
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Machined corners animation enhancement */
.product-card.machined-corners::before,
.product-card.machined-corners::after {
    transition: border-color 0.3s var(--ease-out-expo),
                width 0.3s var(--ease-out-expo),
                height 0.3s var(--ease-out-expo);
}

.product-card.machined-corners:hover::before,
.product-card.machined-corners:hover::after {
    width: 14px;
    height: 14px;
}

/* === TECHNICAL SECTION DIVIDER === */
.tech-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2.5rem 0 2rem;
    color: var(--color-text-muted);
}

.tech-divider::before,
.tech-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--border-color) 15%,
        var(--border-color) 85%,
        transparent 100%);
}

.tech-divider__icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 3px;
}

.tech-divider__icon svg {
    width: 14px;
    height: 14px;
    stroke: var(--color-accent);
}

/* Products page mobile adjustments */
@media (max-width: 768px) {
    .products-hero {
        padding: 3rem 0 2rem;
    }

    .products-hero h1 {
        font-size: 1.75rem;
    }

    .product-image-secondary {
        display: none;
    }
}

/* === PRODUCTS INFO SECTION === */
.products-info-section {
    padding: 4rem 0;
    background: linear-gradient(180deg, var(--color-bg-body) 0%, #f8fafc 100%);
    position: relative;
    overflow: hidden;
}

.products-info-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--blueprint-grid);
    background-size: 60px 60px;
    opacity: 0.03;
}

.products-info-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3rem;
    position: relative;
}

.products-info-header h2 {
    margin-bottom: 1rem;
    color: var(--color-primary);
}

.products-info-header .lead {
    color: var(--color-text-muted);
    font-size: 1.1rem;
}

.products-info-header .tech-divider {
    margin-bottom: 1.5rem;
}

.products-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    position: relative;
}

.info-card {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 2rem;
    position: relative;
    transition: all 0.3s var(--ease-out-expo);
}

.info-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.info-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.1) 0%, rgba(2, 132, 199, 0.05) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.info-card__icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--color-accent);
}

.info-card h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.info-card__intro {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

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

.info-card__list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    color: var(--color-text);
    line-height: 1.5;
}

.info-card__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 6px;
    height: 6px;
    background: var(--color-accent);
    border-radius: 1px;
    transform: rotate(45deg);
}

.info-card__list li:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .products-info-section {
        padding: 3rem 0;
    }

    .products-info-grid {
        grid-template-columns: 1fr;
    }

    .info-card {
        padding: 1.5rem;
    }
}

/* === FAQ PAGE === */
.faq-hero {
    background: var(--gradient-mesh-overlay), url('/uploads/images/jovalArmazem.jpg');
    background-size: cover;
    background-position: center;
}

.faq-search-wrapper {
    max-width: 600px;
    margin: 0 auto;
}

.faq-search-box {
    position: relative;
    background: white;
    border-radius: 50px;
    padding: 0.5rem 1.5rem;
    display: flex;
    align-items: center;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.faq-search-box:focus-within,
.faq-search-box.has-value {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.4);
}

.faq-search-box .search-icon {
    color: var(--color-accent);
    margin-right: 1rem;
}

.faq-search-box input {
    border: none;
    background: transparent;
    width: 100%;
    padding: 0.75rem 0;
    font-size: 1.1rem;
    color: var(--color-primary);
    outline: none;
}

.faq-search-box input::placeholder {
    color: #94a3b8;
}

/* Accordion Improvements */
.faq-item {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item:hover {
    border-color: var(--color-accent);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.faq-item[open] {
    border-color: var(--color-accent);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.faq-question {
    padding: 1.5rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

.faq-question h3 {
    margin: 0;
    font-size: 1.15rem;
    color: var(--color-primary);
    transition: color 0.2s ease;
    padding-right: 1.5rem;
}

.faq-item:hover .faq-question h3 {
    color: var(--color-accent);
}

.faq-question .icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f1f5f9;
    color: var(--color-accent);
    transition: all 0.3s ease;
}

.faq-item[open] .faq-question .icon {
    transform: rotate(180deg);
    background: var(--color-accent);
    color: white;
}

.faq-answer {
    padding: 0 1.5rem 1.5rem;
    color: var(--color-text-main);
    line-height: 1.8;
}

/* FAQ Categories */
.faq-category {
    margin-bottom: 2.5rem;
}

.faq-category:last-of-type {
    margin-bottom: 0;
}

.faq-category-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--color-accent);
}

/* Hide empty categories during search */
.faq-category.hidden {
    display: none;
}

/* === BREADCRUMBS === */
.breadcrumbs {
    padding: 1rem 0;
    margin-bottom: 0; /* Reduced to sit closer to border */
    font-size: 0.9rem;
    color: var(--color-text-muted);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    scrollbar-width: none; /* Hide for Firefox */
}

.breadcrumbs::-webkit-scrollbar {
    display: none; /* Hide for Chrome/Safari */
}

.breadcrumbs--machined [aria-current="page"] strong {
    font-family: var(--font-main);
    font-size: 0.85rem;
    letter-spacing: 0.01em;
    background: rgba(2, 132, 199, 0.05);
    padding: 2px 6px;
    border-radius: 2px;
    border: 1px solid rgba(2, 132, 199, 0.1);
}

.breadcrumbs ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: nowrap; /* Prevent wrapping */
    align-items: center;
}

.breadcrumbs li {
    display: flex;
    align-items: center;
    flex-shrink: 0; /* Don't squash segments */
}

.breadcrumbs li:not(:last-child)::after {
    content: '\203A';
    margin: 0 0.75rem;
    color: var(--border-color);
    font-weight: bold;
    font-size: 1.1rem;
    line-height: 1;
}

.breadcrumbs a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.25rem;
}

.breadcrumbs a:hover {
    color: var(--color-primary);
}

.breadcrumbs [aria-current="page"] {
    color: var(--color-text);
    font-weight: 700;
}

/* === WHATSAPP WIDGET === */
#whatsapp-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

#whatsapp-widget a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #25D366;
    color: white;
    padding: 12px 16px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    border: none;
}

#whatsapp-widget a:hover {
    background: #128C7E;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    color: white;
}

#whatsapp-widget a:active {
    transform: translateY(0);
}

#whatsapp-widget span {
    font-weight: 600;
}

@media (max-width: 768px) {
    #whatsapp-widget {
        bottom: 16px;
        right: 16px;
    }

    #whatsapp-widget a {
        padding: 10px 14px;
        font-size: 13px;
    }

    #whatsapp-widget a span {
        display: none; /* Hide text on mobile, show only icon */
    }
}

/* === BACK TO TOP === */
.back-to-top {
    position: fixed;
    bottom: 90px; /* Above WhatsApp widget on desktop */
    right: 20px;
    width: 45px;
    height: 45px;
    background-color: var(--color-primary);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    outline: none;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:not(.is-visible) {
    transform: translateY(20px);
}

.back-to-top:hover {
    background-color: var(--color-accent);
    transform: translateY(-3px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
}

.back-to-top svg {
    transition: transform 0.3s ease;
}

.back-to-top:hover svg {
    transform: translateY(-2px);
}

.back-to-top:focus-visible {
    outline: 2px solid white;
    outline-offset: 2px;
    background-color: var(--color-accent);
}

@media (max-width: 768px) {
    .back-to-top {
        bottom: 80px; /* Above WhatsApp widget on mobile */
        right: 16px;
        width: 40px;
        height: 40px;
    }
}

/* === UTILITIES === */
.print-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
}

/* === PRINT STYLES === */
/* Moved to public/css/print-media.css */

/* === SEARCH AUTOCOMPLETE === */
.search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    z-index: 1000;
    margin-top: 8px;
    overflow: hidden;
    min-width: 260px; /* Ensure it matches form width at minimum */
}

.search-results ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.search-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: var(--color-text-main);
    transition: background-color 0.15s;
    border-bottom: 1px solid #f1f5f9;
}

.search-item:last-child {
    border-bottom: none;
}

.search-item:hover, .search-item:focus {
    background-color: #f8fafc;
    color: var(--color-accent);
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

.search-item-thumb {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    margin-right: 0.75rem;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}

.search-item span {
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.3;
}

/* === TRUST SIGNALS === */
.trust-signals {
    padding: 5rem 0;
    background: var(--color-bg-body);
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    text-align: center;
}

.trust-item {
    background: white;
    padding: 3.5rem 2rem;
    border-radius: var(--radius-md);
    box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(15, 23, 42, 0.03);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.trust-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -12px rgba(15, 23, 42, 0.12);
    border-color: var(--color-accent);
}

.trust-number {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
    letter-spacing: -0.03em;
    line-height: 1;
}

.trust-label {
    color: var(--color-accent);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    opacity: 0.9;
}

.trust-cta {
    text-align: center;
    margin-top: 3rem;
}

/* === LIGHTBOX === */
.zoomable-image {
    cursor: zoom-in;
}

.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 2000;
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lightbox-overlay.active {
    display: flex;
    opacity: 1;
}

.lightbox-image {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    user-select: none;
    cursor: zoom-in;
    will-change: transform, opacity;
}

.lightbox-overlay.active .lightbox-image {
    transform: scale(1);
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    /* 48px touch target */
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2001;
    transition: background-color 0.2s, transform 0.1s;
}

.lightbox-close:active {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(0.95);
}

/* Mobile swipe hint for lightbox */
.lightbox-hint {
    position: absolute;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    opacity: 1;
    animation: lightbox-hint-fade 4s ease-out forwards;
    pointer-events: none;
    z-index: 2001;
    display: none;
}

@media (max-width: 768px) {
    .lightbox-hint {
        display: block;
    }

    .lightbox-close {
        top: calc(10px + env(safe-area-inset-top, 0px));
        right: 10px;
    }
}

@keyframes lightbox-hint-fade {
    0%, 70% { opacity: 1; }
    100% { opacity: 0; }
}

.lightbox-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    margin-left: -20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: lightbox-spin 1s ease-in-out infinite;
    z-index: 2000;
}

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

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    font-size: 2rem;
    padding: 1rem 0.5rem;
    cursor: pointer;
    z-index: 2001;
    transition: background 0.3s;
}

.lightbox-nav:hover {
    background: rgba(0, 0, 0, 0.8);
}

.lightbox-prev {
    left: 10px;
}

.lightbox-next {
    right: 10px;
}

/* === TECHNICAL DATA COMPONENTS (Product Page) === */
.tech-card {
    background: var(--color-bg-white);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    padding: 0 !important;
    border: 1px solid var(--border-color);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5rem;
    position: relative;
    
    /* Reveal Animation */
    animation: reveal-up 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    opacity: 0;
    transform: translateY(20px);
}

/* Shimmering Loading State */
.tech-card.is-loading::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: shimmer 1.5s infinite;
    z-index: 10;
    pointer-events: none;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(50%); }
}

.tech-card::before,
.tech-card::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border-color: rgba(2, 132, 199, 0.4);
    border-style: solid;
    pointer-events: none;
    z-index: 5;
}

.tech-card::before { top: 6px; left: 6px; border-width: 1px 0 0 1px; }
.tech-card::after { bottom: 6px; right: 6px; border-width: 0 1px 1px 0; }

.tech-card:hover::before { border-color: var(--color-accent); }
.tech-card:hover::after { border-color: var(--color-accent); }

@keyframes reveal-up {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Staggered Delays for Grid-based Tech Cards */
.specs-grid > .specs-group-wrapper:nth-child(1) .tech-card { animation-delay: 0.1s; }
.specs-grid > .specs-group-wrapper:nth-child(2) .tech-card { animation-delay: 0.15s; }
.specs-grid > .specs-group-wrapper:nth-child(3) .tech-card { animation-delay: 0.2s; }
.specs-grid > .specs-group-wrapper:nth-child(4) .tech-card { animation-delay: 0.25s; }
.specs-grid > .specs-group-wrapper:nth-child(5) .tech-card { animation-delay: 0.3s; }
.specs-grid > .specs-group-wrapper:nth-child(6) .tech-card { animation-delay: 0.35s; }
.specs-grid > .specs-group-wrapper:nth-child(n+7) .tech-card { animation-delay: 0.4s; }

.tech-card .table-responsive {
    overflow-x: auto !important;
    position: relative;
    /* Minimalist Scrollbar for Firefox */
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
    
    /* Scroll Shadows Logic: Creates gradients that indicate more content */
    background: 
        linear-gradient(to right, white 30%, rgba(255,255,255,0)),
        linear-gradient(to right, rgba(255,255,255,0), white 70%) 0 100%,
        radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.1), rgba(0,0,0,0)),
        radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.1), rgba(0,0,0,0)) 0 100%;
    background-repeat: no-repeat;
    background-color: white;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
}

/* Minimalist Scrollbar for Chrome/Safari */
.tech-card .table-responsive::-webkit-scrollbar {
    height: 5px; /* Very thin */
    display: block !important; /* Re-enable but style */
}

.tech-card .table-responsive::-webkit-scrollbar-track {
    background: transparent;
}

.tech-card .table-responsive::-webkit-scrollbar-thumb {
    background-color: #cbd5e1; /* Slate 300 */
    border-radius: 20px;
    border: 1px solid transparent; /* Padding effect */
}

.tech-card .table-responsive::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-accent); /* Joval Blue on hover */
}

.tech-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    transform: translateY(-2px);
    border-color: var(--color-accent);
}

/* Loading States (Shimmer/Pulse) */
.tech-card.is-loading {
    pointer-events: none;
    position: relative;
    overflow: hidden;
    opacity: 0.7;
    animation: tech-card-pulse 1.5s ease-in-out infinite;
}

.tech-card.is-loading::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(2, 132, 199, 0.05) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: tech-card-shimmer 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    z-index: 10;
}

@keyframes tech-card-pulse {
    0% { opacity: 0.7; }
    50% { opacity: 0.5; }
    100% { opacity: 0.7; }
}

@keyframes tech-card-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(50%); }
}

.tech-card__header {
    background-color: #f8fafc;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.tech-card__title {
    margin-bottom: 0 !important;
    font-size: 1rem !important;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    font-weight: 700 !important;
    color: var(--color-primary) !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    width: 100%;
}

.tech-card__title-text {
    /* Standard flow */
}

.tech-card__model {
    font-family: var(--font-main);
    color: var(--color-accent) !important;
    font-weight: 700 !important;
    line-height: 1;
    font-size: 0.9rem !important;
    background: rgba(2, 132, 199, 0.05);
    padding: 4px 8px;
    border-radius: 2px;
    border: 1px solid rgba(2, 132, 199, 0.1);
}

.tech-card__title::before {
    content: "";
    display: block;
    width: 3px;
    height: 16px;
    background: var(--color-accent);
    border-radius: 2px;
}

.tech-card__content {
    padding: 1.5rem;
}

.tech-card__footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid #f1f5f9;
    background-color: #fafafa;
    display: flex;
    justify-content: center;
}

.table-standard,
.performance-table-horizontal,
.dimensions-table-refined {
    margin: 0 auto !important; /* Remove top/bottom margin inside cards */
    border: none !important; /* Use card border */
}

.table-standard thead th {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--border-color) !important;
}

.dimensions-table-refined tbody td {
    padding: 0.6rem 1rem !important; /* More compact dimension tables */
}

.dimensions-diagram {
    background: #fff;
    padding: 2rem !important;
    border-bottom: none;
}

.dimensions-diagram img {
    max-height: 300px !important;
    margin: 0 auto;
    object-fit: contain;
}

.table-note-wrapper {
    padding: 1rem 1.5rem 0;
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.table-interaction-note {
    font-size: 0.75rem !important;
    color: var(--color-text-muted) !important;
    font-style: italic;
    margin: 0 !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.table-interaction-note::before {
    content: "💡";
    font-style: normal;
}

.clear-selection-btn {
    font-size: 0.75rem;
    color: var(--color-accent);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    text-decoration: underline;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}

.clear-selection-btn.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* Sticky Column Shadow for depth */
.sticky-col {
    position: sticky !important;
    left: 0 !important;
    z-index: 15 !important; /* Increased to stay above standard content */
    background-color: #fff !important;
    border-right: 1px solid var(--border-color);
    box-shadow: 4px 0 12px -2px rgba(0,0,0,0.1); /* Stronger shadow for depth */
    transition: background-color 0.2s, border-right-color 0.2s;
}

@media print {
    .table-note-wrapper { display: none !important; }
    .sticky-col { box-shadow: none !important; }

    /* Hide grain effects on print */
    .grain-effect,
    .grain-overlay {
        display: none !important;
    }

    .site-footer::before,
    .hero:not(.home-hero)::after,
    .selector-hero::after,
    .products-hero::after {
        display: none !important;
    }
}

/* Standardized Technical Tables (Dimensions, Performance & Generic) */
.table-standard,
.performance-table-horizontal,
.dimensions-table-refined,
.tech-table {
    width: 100% !important;
    max-width: 100% !important;
    margin: 1.5rem auto !important;
    border-collapse: separate !important; /* Required for sticky borders to work correctly */
    border-spacing: 0 !important;
    font-size: 0.8rem !important; /* Strictly 0.8rem per memory */
    table-layout: auto !important;
    /* overflow: hidden !important; Removed to fix sticky columns */
    display: table; /* Ensure it behaves as a table for margin auto */
}

.table-standard th, .table-standard td,
.performance-table-horizontal th, .performance-table-horizontal td,
.dimensions-table-refined th, .dimensions-table-refined td,
.tech-table th, .tech-table td {
    padding: 0.75rem 1rem !important; 
    border: 1px solid #e2e8f0 !important; /* Slate 200 Prominent Borders */
    text-align: center !important; /* Center aligned columns per memory */
    color: var(--color-text-main) !important;
    white-space: normal;
    background-color: #fff; /* Ensure cells have background for sticky overlap */
}

/* Standard Technical Table Defaults (Design Decision: Regular Font) */
.table-standard td,
.tech-table td,
.materials-table td {
    font-family: var(--font-main);
    font-size: 0.85rem !important;
    letter-spacing: normal;
}

/* Technical Data Typography Overrides (Dimensions and Performance) */
.performance-table-horizontal td,
.dimensions-table-refined td {
    font-family: var(--font-mono) !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.02em;
}

/* Preserve main font for sticky model names and headers */
.table-standard th, 
.performance-table-horizontal th, 
.dimensions-table-refined th, 
.tech-table th,
.sticky-col strong {
    font-family: var(--font-main);
    font-size: 0.8rem !important;
}

/* Sticky Header Logic */
.table-standard thead th,
.performance-table-horizontal thead th,
.dimensions-table-refined thead th {
    position: sticky !important;
    top: 0;
    z-index: 10;
    background-color: #f8fafc !important; /* Slate 50 background */
    border-bottom: 2px solid #cbd5e1 !important; /* Slate 300 header accent */
}

.sticky-col strong {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
}

.model-row-number {
    font-weight: 400;
    opacity: 0.8;
    font-size: 0.85em;
    font-variant-numeric: tabular-nums;
}

/* The "Corner" - intersection of sticky header and sticky column */
thead th.sticky-col {
    z-index: 12 !important;
}

.table-standard th,
.performance-table-horizontal th,
.dimensions-table-refined th,
.tech-table th {
    background-color: #f8fafc !important; 
    color: var(--color-primary) !important;
    font-weight: 700 !important;
}

/* Restored Hover Animations */
.table-standard tbody tr,
.performance-table-horizontal tbody tr,
.dimensions-table-refined tbody tr,
.tech-table tbody tr {
    transition: background-color 0.2s ease;
}

/* Subtle Zebra Striping - improves row tracking across wide tables */
.table-standard tbody tr:nth-child(even):not(.table-standard__spacer),
.performance-table-horizontal tbody tr:nth-child(even):not(.table-standard__spacer),
.dimensions-table-refined tbody tr:nth-child(even):not(.table-standard__spacer),
.tech-table tbody tr:nth-child(even) {
    background-color: rgba(248, 250, 252, 0.6); /* Slate-50 at 60% - barely perceptible */
}

.table-standard tbody tr:nth-child(even):not(.table-standard__spacer) td,
.performance-table-horizontal tbody tr:nth-child(even):not(.table-standard__spacer) td,
.dimensions-table-refined tbody tr:nth-child(even):not(.table-standard__spacer) td,
.tech-table tbody tr:nth-child(even) td {
    background-color: inherit;
}

/* Sticky column zebra - matches row stripe */
.table-standard tbody tr:nth-child(even):not(.table-standard__spacer) .sticky-col,
.performance-table-horizontal tbody tr:nth-child(even):not(.table-standard__spacer) .sticky-col,
.dimensions-table-refined tbody tr:nth-child(even):not(.table-standard__spacer) .sticky-col {
    background-color: #f9fafb !important; /* Slightly more opaque for sticky overlap */
}

.table-standard__spacer {
    height: 12px !important;
    background-color: #f8fafc !important; /* Slate 50 */
    background-image: radial-gradient(#cbd5e1 1px, transparent 1px) !important; /* Dotted Technical Grid */
    background-size: 4px 4px !important;
    border: none !important;
    pointer-events: none !important;
    opacity: 0.5;
}

.table-standard__spacer td {
    border: none !important;
    padding: 0 !important;
}

/* Muted Separator Column - visual divider between motor details and flow data */
.table-standard__cell--muted {
    width: 1.25rem !important;
    min-width: 1.25rem !important;
    max-width: 1.25rem !important;
    padding: 0 !important;
    background-color: #f1f5f9 !important; /* Slate 100 */
    border-left: 1px solid #cbd5e1 !important;
    border-right: 1px solid #cbd5e1 !important;
    position: relative;
}

/* Vertical Label Container (e.g., "Hm (m)") */
.table-standard__cell--v-label {
    vertical-align: middle;
    text-align: center !important;
    padding: 0 0.25rem !important;
}

.table-standard__v-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-size: 0.65rem;
    font-weight: 600;
    color: #64748b; /* Slate 500 */
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Compact Table Mode - tighter cells for dense numeric data */
.table-standard.compact th,
.table-standard.compact td,
.performance-table-horizontal.compact th,
.performance-table-horizontal.compact td {
    padding: 0.35rem 0.4rem !important;
    font-size: 0.7rem !important;
    line-height: 1.3;
}

.table-standard.compact thead th,
.performance-table-horizontal.compact thead th {
    padding: 0.5rem 0.4rem !important;
    font-size: 0.65rem !important;
}

.table-standard.compact .sticky-col,
.performance-table-horizontal.compact .sticky-col {
    padding: 0.35rem 0.6rem !important;
    font-size: 0.7rem !important;
}

.table-standard.compact .sticky-col strong,
.performance-table-horizontal.compact .sticky-col strong {
    gap: 0.5rem;
    font-size: 0.7rem;
}

.table-standard.compact .model-row-number,
.performance-table-horizontal.compact .model-row-number {
    font-size: 0.65rem;
}

/* Muted column should not have hover effect */
.table-standard__cell--muted:hover,
.table-standard__cell--v-label:hover {
    background-color: #f1f5f9 !important;
    box-shadow: none !important;
    cursor: default !important;
}

.table-standard tbody tr:hover,
.performance-table-horizontal tbody tr:hover,
.dimensions-table-refined tbody tr:hover,
.tech-table tbody tr:hover {
    background-color: #f1f5f9 !important; /* Subtle Slate 100 hover */
}

/* Precision Cell Focus */
.table-standard td:hover,
.performance-table-horizontal td:hover,
.dimensions-table-refined td:hover,
.tech-table td:hover {
    background-color: #e2e8f0 !important; /* Slate 200 */
    color: var(--color-accent) !important;
    font-weight: 500;
    box-shadow: inset 0 0 0 1px var(--color-accent);
    cursor: crosshair;
}

/* Selected Row State (Click to Highlight) */
.table-standard tbody tr.is-selected td,
.performance-table-horizontal tbody tr.is-selected td,
.dimensions-table-refined tbody tr.is-selected td,
.tech-table tbody tr.is-selected td {
    background-color: #cbd5e1 !important; /* Slate 300 for clearer selection */
    border-color: #94a3b8 !important; /* Darker border for selected items */
}

/* Synchronized Hover State (via Chart or Table hover) */
.table-standard tbody tr.is-hovered td,
.performance-table-horizontal tbody tr.is-hovered td,
.dimensions-table-refined tbody tr.is-hovered td {
    background-color: #e2e8f0 !important; /* Slate 200 */
}

.table-standard tbody tr.is-hovered .sticky-col,
.performance-table-horizontal tbody tr.is-hovered .sticky-col,
.dimensions-table-refined tbody tr.is-hovered .sticky-col {
    background-color: #e2e8f0 !important;
}

/* Ensure sticky columns in selected rows match exactly */
.table-standard tbody tr.is-selected .sticky-col,
.performance-table-horizontal tbody tr.is-selected .sticky-col,
.dimensions-table-refined tbody tr.is-selected .sticky-col {
    background-color: #cbd5e1 !important;
    border-right-color: #64748b !important; /* Distinct anchor border */
}

/* Force first column to keep text on one line */
.table-standard td:first-child,
.performance-table-horizontal td:first-child,
.dimensions-table-refined td:first-child {
    white-space: nowrap !important;
    font-weight: 600;
}

/* Modifier for full-width technical cards */
.tech-card--full-width,
.tech-card--dimensions,
.tech-card--materials {
    grid-column: 1 / -1 !important;
    width: 100% !important;
}

/* Materials Table */
.materials-diagram-side {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 1rem;
}

/* Ensure other half-width cards strictly occupy one column */
.specs-grid > .tech-card:not(.tech-card--full-width):not(.tech-card--dimensions):not(.tech-card--materials) {
    grid-column: span 1 !important;
    width: 100% !important;
}

@media (min-width: 768px) {
    .specs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Diagram inside tech-card */
.dimensions-diagram {
    width: 100%;
    padding: 1.5rem 1.5rem 0 !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dimensions-diagram img {
    max-width: 100%;
    height: auto;
    max-height: 300px;
    object-fit: contain;
}

.tech-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Mobile Table Responsiveness */
@media (max-width: 768px) {
    /* Restore scrolling but hide the scrollbar visual element to satisfy "NO scrollbars" rule */
    .table-standard, 
    .performance-table-horizontal, 
    .dimensions-table-refined {
        display: block !important;
        width: 100% !important;
        margin: 1rem 0 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap !important;
        font-size: 0.75rem !important;
        /* Hide scrollbars */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none;  /* IE/Edge */
    }

    .table-standard::-webkit-scrollbar,
    .performance-table-horizontal::-webkit-scrollbar,
    .dimensions-table-refined::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }

    /* Standard tech-table (key-value pairs) can still stack */
    .tech-table, .tech-table tbody, .tech-table tr, .tech-table th, .tech-table td {
        display: block;
        width: 100%;
    }
    .tech-table th { background-color: #f8fafc; border-bottom: none; padding: 0.8rem 0.5rem 0.2rem; text-align: left !important; }
    .tech-table td { padding: 0.2rem 0.5rem 0.8rem; border-top: none; text-align: left !important; }

    /* Enforce 1:1 aspect ratio for performance chart on mobile */
    .performance-chart-container {
        width: 100%;
        aspect-ratio: 1 / 1;
        min-height: unset; /* Let aspect-ratio control height */
        overflow: visible; /* Prevent clipping */
        margin: 0;
        padding: 0;
    }

    /* Full-bleed chart on mobile - remove card padding around chart */
    .tech-card > .performance-chart-container {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    /* Reset dimensions when collapsed */
    .tech-card.is-collapsed .performance-chart-container {
        min-height: 0;
        aspect-ratio: unset;
        height: 0;
    }

    /* Adjust cards for narrow screens */
    .tech-card {
        min-width: 100% !important;
        flex: 1 1 100% !important;
        overflow: visible !important; /* Allow internal scrolling tables to be fully visible */
    }

    .contact-form-wrapper {
        padding: 1.25rem !important;
        margin-top: 2rem !important;
        border-radius: 0.5rem !important;
    }

    .section-padding {
        padding: 2rem 0 !important;
    }
}

/* Product Sticky Sub-Navigation */
.product-sticky-nav {
    position: sticky;
    top: var(--header-height);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    z-index: 90;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 0; /* Margin handled by section padding */
    padding: 0.25rem 0;
    transition: all 0.3s ease;
}

.product-sticky-nav__list {
    display: flex;
    justify-content: flex-start; /* Align with container start */
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2.5rem;
    position: relative;
}

.nav-indicator {
    position: absolute;
    bottom: 0;
    height: 2px;
    background: var(--color-accent);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    pointer-events: none;
    opacity: 0;
}

.product-sticky-nav a {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    font-family: var(--font-main); /* Reverted to Primary Font */
    padding: 0.75rem 0;
    position: relative;
    transition: all 0.2s ease;
    text-decoration: none;
    opacity: 0.7;
    z-index: 2;
}

.product-sticky-nav a:hover,
.product-sticky-nav a.active {
    color: var(--color-primary);
    opacity: 1;
}

.product-sticky-nav .nav-cta {
    margin-left: auto; /* Push CTA to the right */
    border: 1px solid var(--color-accent);
    background: transparent;
    color: var(--color-accent) !important;
    padding: 0.4rem 1rem;
    border-radius: 4px;
    font-size: 0.8rem;
    opacity: 1;
}

.product-sticky-nav .nav-cta:hover {
    background: var(--color-accent);
    color: white !important;
}

@media (max-width: 768px) {
    .product-sticky-nav {
        top: var(--header-height);
        padding: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        border-bottom: 1px solid var(--border-color);
        position: relative;
    }

    /* Scroll indicators - fade gradients showing more content */
    .product-sticky-nav::before,
    .product-sticky-nav::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 32px;
        pointer-events: none;
        z-index: 10;
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .product-sticky-nav::before {
        left: 0;
        background: linear-gradient(90deg, rgba(255,255,255,0.95) 0%, transparent 100%);
    }

    .product-sticky-nav::after {
        right: 0;
        background: linear-gradient(-90deg, rgba(255,255,255,0.95) 0%, transparent 100%);
        opacity: 1; /* Show right indicator by default (more content to the right) */
    }

    /* Hide indicators when scrolled to edges (controlled via JS) */
    .product-sticky-nav.scrolled-start::before {
        opacity: 0;
    }

    .product-sticky-nav.scrolled-end::after {
        opacity: 0;
    }

    .product-sticky-nav.scrolled-middle::before,
    .product-sticky-nav.scrolled-middle::after {
        opacity: 1;
    }

    .product-sticky-nav::-webkit-scrollbar {
        display: none;
    }

    .product-sticky-nav .container {
        padding: 0;
        max-width: none;
    }

    .product-sticky-nav__list {
        display: flex;
        justify-content: flex-start;
        gap: 0;
        width: max-content;
        min-width: 100%;
        padding: 0 1rem;
    }
    
    .product-sticky-nav li {
        scroll-snap-align: start;
    }

    .product-sticky-nav a {
        display: block;
        padding: 0.75rem 1.25rem;
        border-bottom: 2px solid transparent;
        white-space: nowrap;
    }
    
    .product-sticky-nav .nav-cta {
        margin-left: 0;
        color: var(--color-accent);
        font-weight: 700;
    }
}

/* Joval Chart External Tooltip */
.performance-chart-container {
    position: relative;
    /* Ensure tooltips can be positioned absolutely within */
}

/* Chart Loading Skeleton */
.chart-skeleton {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2rem;
    gap: 0.5rem;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0) 0%, rgba(248, 250, 252, 0.8) 100%);
    pointer-events: none;
    z-index: 1;
}

.chart-skeleton .skeleton-line {
    height: 2px;
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 1px;
}

.chart-skeleton .skeleton-line:nth-child(1) { width: 85%; }
.chart-skeleton .skeleton-line:nth-child(2) { width: 60%; }
.chart-skeleton .skeleton-line:nth-child(3) { width: 75%; }

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .chart-skeleton .skeleton-line {
        animation: none;
        background: #e2e8f0;
    }
}

/* Hide skeleton when chart is rendered */
.performance-chart-container:has(canvas.chartjs-render-monitor) .chart-skeleton,
.performance-chart-container.chart-loaded .chart-skeleton {
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Legend Touch Target Enhancement (44px minimum for accessibility) */
.performance-chart-container .chartjs-legend li,
.performance-chart-container + .chartjs-legend li {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
}

/* Fallback for Chart.js built-in legend */
.performance-chart-container canvas + div[class*="legend"] li {
    min-height: 44px;
    padding: 8px 12px;
}

/* Chart canvas full width */
.performance-chart-container canvas {
    width: 100% !important;
    max-width: 100%;
    display: block;
}

.joval-chart-tooltip {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 4px;
    box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.1);
    color: var(--color-text-main);
    font-family: var(--font-main);
    font-size: 0.8rem;
    padding: 0.75rem;
    pointer-events: none;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 20;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    min-width: 160px;
    backdrop-filter: blur(12px) saturate(180%);
    border-left: 3px solid var(--color-accent);
}

.joval-chart-tooltip strong {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-primary);
    font-weight: 700;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    padding-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.tooltip-color-indicator {
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 2px !important; /* Square/Machined */
    flex-shrink: 0 !important;
}

.joval-chart-tooltip .tooltip-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.35rem;
}

.joval-chart-tooltip .tooltip-label {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 500;
}

.joval-chart-tooltip .tooltip-value {
    color: var(--color-primary);
    font-weight: 600;
    font-family: var(--font-mono) !important;
    font-size: 0.75rem;
}

/* Utility: No Scrollbar (for PDF/Print) */
.no-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Unit Conversion Gauge Animation */
.unit-flicker {
    animation: gauge-update 0.4s ease-out;
}

@keyframes gauge-update {
    0% { opacity: 1; filter: blur(0); }
    20% { opacity: 0.5; filter: blur(1px); transform: scale(1.02); }
    40% { opacity: 0.8; filter: blur(0); transform: scale(0.98); }
    60% { opacity: 0.4; filter: blur(1px); }
    100% { opacity: 1; filter: blur(0); transform: scale(1); }
}

/* Print & PDF Legibility Overrides */
/* Moved to public/css/print-media.css */





/* === SELECTOR PAGE === */
.selector-hero {
    background: var(--gradient-mesh), var(--color-primary);
    color: white;
    padding: 3rem 0;
    text-align: center;
}

.selector-box {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    max-width: 800px;
    margin: -4rem auto 0; /* Overlap hero */
    position: relative;
    z-index: 10;
    border: 1px solid #e2e8f0;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 1.5rem;
    align-items: end;
}

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

.selector-input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.selector-input-group input {
    width: 100%;
    padding: 1rem 3.5rem 1rem 1.25rem;
    border: 2px solid #e2e8f0;
    border-radius: 4px;
    font-size: 1.1rem;
    font-family: var(--font-main);
    font-weight: 600;
    color: var(--color-primary);
    transition: all 0.2s ease;
    background: #f8fafc;
}

.selector-input-group input:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-color: var(--color-accent);
    background: white;
    box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.1), inset 0 2px 4px rgba(0,0,0,0.02);
}

.selector-input-group .unit {
    position: absolute;
    right: 1.25rem;
    color: #64748b;
    font-weight: 700;
    font-family: var(--font-main);
    font-size: 0.75rem;
    text-transform: uppercase;
    pointer-events: none;
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.selector-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.selector-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.15);
}

.selector-card .card-header {
    padding: 1rem;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #f8fafc;
}

.product-thumb {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.product-info h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    color: #0f172a;
}

.product-meta {
    font-size: 0.85rem;
    color: #64748b;
}

.selector-card .card-body {
    padding: 1rem;
}

.performance-summary {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.metric {
    display: flex;
    flex-direction: column;
}

.metric .label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #94a3b8;
    letter-spacing: 0.05em;
}

.metric .value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
}

.chart-container {
    height: 160px;
    width: 100%;
}

.text-success { color: #22c55e !important; }
.text-warning { color: #f59e0b !important; }
.text-danger { color: #ef4444 !important; }

.fade-in-up {
    animation: fadeInUp 0.5s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
}

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

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: #0f172a;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

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

.d-none {
    display: none !important;
}

/* === SELECTOR PAGE === */
.selector-hero {
    background: var(--gradient-mesh), var(--color-primary);
    color: white;
    padding: 3rem 0;
    text-align: center;
}

.selector-box {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    max-width: 800px;
    margin: -4rem auto 0; /* Overlap hero */
    position: relative;
    z-index: 10;
    border: 1px solid #e2e8f0;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 1.5rem;
    align-items: end;
}

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

.selector-input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.selector-input-group input {
    width: 100%;
    padding: 1rem 3.5rem 1rem 1.25rem;
    border: 2px solid #e2e8f0;
    border-radius: 4px;
    font-size: 1.1rem;
    font-family: var(--font-main);
    font-weight: 600;
    color: var(--color-primary);
    transition: all 0.2s ease;
    background: #f8fafc;
}

.selector-input-group input:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-color: var(--color-accent);
    background: white;
    box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.1), inset 0 2px 4px rgba(0,0,0,0.02);
}

.selector-input-group .unit {
    position: absolute;
    right: 1.25rem;
    color: #64748b;
    font-weight: 700;
    font-family: var(--font-main);
    font-size: 0.75rem;
    text-transform: uppercase;
    pointer-events: none;
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.selector-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.selector-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.15);
}

.selector-card .card-header {
    padding: 1rem;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #f8fafc;
}

.product-thumb {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.product-info h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    color: #0f172a;
}

.product-meta {
    font-size: 0.85rem;
    color: #64748b;
}

.selector-card .card-body {
    padding: 1rem;
}

.performance-summary {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.metric {
    display: flex;
    flex-direction: column;
}

.metric .label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #94a3b8;
    letter-spacing: 0.05em;
}

.metric .value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
}

.chart-container {
    height: 160px;
    width: 100%;
}

.text-success { color: #22c55e !important; }
.text-success--prominent { color: #166534 !important; font-weight: 600; }
.text-warning { color: #f59e0b !important; }
.text-danger { color: #ef4444 !important; }

.fade-in-up {
    animation: fadeInUp 0.5s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
}

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

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: #0f172a;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

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

.d-none {
    display: none !important;
}

.variation-badge { display: inline-flex; align-items: center; background: #0ea5e9; color: white; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; vertical-align: middle; margin-left: 12px; letter-spacing: 0.05em; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.variation-banner { background: #0f172a; color: white; border-radius: 8px; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; border-left: 4px solid #0ea5e9; }
.variation-banner__info { display: flex; align-items: center; gap: 16px; }
.variation-banner__icon { background: rgba(14, 165, 233, 0.2); color: #0ea5e9; padding: 8px; border-radius: 50%; display: flex; }
.variation-banner__label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; display: block; margin-bottom: 2px; }
.variation-banner__title { font-weight: 600; font-size: 1rem; }
.btn-variation-exit { background: rgba(255,255,255,0.1); color: white; border: 1px solid rgba(255,255,255,0.2); padding: 6px 12px; font-size: 0.8rem; border-radius: 4px; transition: all 0.2s; text-decoration: none !important; }
.btn-variation-exit:hover { background: rgba(255,255,255,0.2); border-color: white; }
.is-variation .tech-card { border-color: rgba(14, 165, 233, 0.3) !important; }
.is-variation .tech-card__header { background-color: #f0f9ff !important; }


/* Premium Polish for Variations */
.variation-badge {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
    padding: 4px 10px;
    border-radius: 6px;
    font-variant-numeric: tabular-nums;
}

.variation-banner {
    background-color: #0f172a;
    background-image: radial-gradient(#1e293b 1px, transparent 1px);
    background-size: 20px 20px; /* Technical Grid Pattern */
    border: 1px solid #1e293b;
    border-left: 4px solid #0ea5e9;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

.variation-banner::after {
    content: 'PRO CONF';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 4rem;
    font-weight: 900;
    color: rgba(255,255,255,0.03);
    pointer-events: none;
    letter-spacing: -0.05em;
}

.variation-banner__icon {
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.3);
    border: 1px solid rgba(14, 165, 233, 0.3);
}

.btn-variation-exit {
    backdrop-filter: blur(4px);
    font-weight: 600;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

/* Subtle marker for technical cards in Pro Mode */
.is-variation .tech-card__header::after {
    content: 'VALIDATED SPEC';
    font-size: 0.6rem;
    font-weight: 800;
    color: #0ea5e9;
    background: #f0f9ff;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: auto;
    border: 1px solid rgba(14, 165, 233, 0.2);
    letter-spacing: 0.05em;
}


/* --- ULTRA PREMIUM VARIATION OVERHAUL --- */

.variation-badge {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    color: white;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 50px; /* Pill shape */
    letter-spacing: 0.08em;
    border: 1px solid rgba(255,255,255,0.3);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 15px;
    vertical-align: middle;
}

.variation-badge--permanent {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    border-color: rgba(255,255,255,0.1);
    box-shadow: 0 4px 12px rgba(100, 116, 139, 0.2);
}

.variation-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 8px #fff;
    animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1); }
}

.variation-banner {
    background: #0f172a;
    background-image: 
        linear-gradient(90deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.8) 100%),
        radial-gradient(circle at 2px 2px, rgba(255,255,255,0.05) 1px, transparent 0);
    background-size: 100% 100%, 24px 24px;
    border: 1px solid rgba(14, 165, 233, 0.2);
    border-left: 5px solid #0ea5e9;
    border-radius: 16px;
    padding: 28px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 95;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.variation-banner::before {
    content: 'AUTHORIZED';
    position: absolute;
    left: 20%;
    top: 50%;
    transform: translateY(-50%) rotate(-5deg);
    font-size: 6rem;
    font-weight: 900;
    color: rgba(255,255,255,0.02);
    pointer-events: none;
    white-space: nowrap;
}

.variation-banner__info {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
}

.variation-banner__icon {
    background: #0ea5e9;
    color: #0f172a;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    margin-right: 24px;
    box-shadow: 0 0 25px rgba(14, 165, 233, 0.4);
    flex-shrink: 0;
}

.variation-banner__label {
    color: #38bdf8;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 6px;
    display: block;
}

.variation-banner__title {
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.btn-variation-exit {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
}

.btn-variation-exit:hover {
    background: #ef4444;
    color: white;
    border-color: #ef4444;
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.4);
    transform: scale(1.05);
}

/* Subtle Card Glow in Pro Mode */
.is-variation .tech-card {
    border-color: rgba(14, 165, 233, 0.2) !important;
    background: linear-gradient(to bottom, #fff, #f8fafc) !important;
}

.is-variation .tech-card__header {
    border-bottom: 1px solid rgba(14, 165, 233, 0.15) !important;
}


/* Fix for overlapping Exit button and better responsiveness */
.variation-banner {
    flex-wrap: wrap; /* Allow wrapping on small screens */
    gap: 24px;
}

.variation-banner__info {
    flex: 1; /* Take up available space */
    min-width: 280px; /* Ensure text doesn't get too squashed before wrapping */
}

/* Stack variation banner on mobile (bp-sm: 576px) */
@media (max-width: 576px) {
    .variation-banner {
        padding: 24px;
        flex-direction: column;
        align-items: flex-start;
    }

    .btn-variation-exit {
        width: 100%;
        text-align: center;
    }
}


.variation-banner__title {
    word-break: break-word;
    overflow-wrap: break-word;
}


/* Sleeker, more horizontal variation banner */
.variation-banner {
    padding: 14px 32px; /* Reduced vertical padding */
    border-radius: 12px;
    gap: 40px; /* Increased horizontal gap */
}

.variation-banner__icon {
    width: 42px; /* Smaller icon to reduce height */
    height: 42px;
    margin-right: 20px;
}

.variation-banner__title {
    font-size: 1.25rem; /* Slightly smaller to fit slim profile */
}

.btn-variation-exit {
    padding: 8px 20px; /* Slimmer button */
}

.variation-banner::before {
    font-size: 4.5rem; /* Adjust watermark size for slimmer height */
}

/* === LEGAL & DYNAMIC PAGES === */
.content-wrapper--legal {
    line-height: 1.8;
    color: var(--color-text-main);
    font-size: 1.1rem;
    position: relative;
    z-index: 1;
}

.content-wrapper--legal h2 {
    color: var(--color-primary);
    font-size: 1.5rem;
    margin-top: 3.5rem;
    margin-bottom: 1.5rem;
    padding-left: 1.25rem;
    border-left: 4px solid var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 800;
}

.content-wrapper--legal h2:first-of-type {
    margin-top: 1rem;
}

.content-wrapper--legal h3 {
    color: var(--color-primary);
    font-size: 1.25rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.content-wrapper--legal h4 {
    color: var(--color-accent);
    font-size: 1.1rem;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    font-weight: 700;
}

.content-wrapper--legal p {
    margin-bottom: 1.5rem;
    color: #475569; /* Slate 600 */
}

.content-wrapper--legal ul {
    margin-bottom: 2.5rem;
    padding-left: 1.5rem;
    list-style: none;
}

.content-wrapper--legal li {
    margin-bottom: 1rem;
    position: relative;
    padding-left: 1.5rem;
}

.content-wrapper--legal li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--color-accent);
    font-weight: 800;
}

.content-wrapper--legal strong {
    color: var(--color-primary);
}

.legal-highlight-box {
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2.5rem;
    margin: 3rem 0;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
    position: relative;
    border-top: 4px solid var(--color-accent);
}

.legal-highlight-box p:last-child {
    margin-bottom: 0;
}

.legal-highlight-box a {
    font-weight: 700;
    font-size: 1.2rem;
}

/* === SEARCH OVERLAY === */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    z-index: 9999;
    display: none; /* Back to display:none for jQuery show/hide compatibility */
    flex-direction: column;
    padding: 1.5rem;
}

.search-overlay.active {
    display: flex;
}

.search-overlay__header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 2rem;
}

.search-overlay__close {
    background: #f1f5f9;
    border: none;
    color: var(--color-primary);
    cursor: pointer;
    /* Explicit 44x44px touch target */
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, transform 0.1s;
}

.search-overlay__close:active {
    background-color: #e2e8f0;
    transform: scale(0.95);
}

.search-overlay__close svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.search-overlay__content {
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
}

.search-form--overlay {
    width: 100% !important;
    background: #f8fafc !important;
    border: 2px solid var(--color-accent) !important;
    border-radius: 12px !important;
    padding: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
}

.search-form--overlay .search-input-wrapper {
    display: flex;
    flex: 1;
    align-items: center;
}

.search-form--overlay input {
    flex: 1;
    border: none !important;
    background: transparent !important;
    padding: 1rem !important;
    font-size: 1.25rem !important;
    outline: none !important;
    color: var(--color-primary) !important;
}

.search-form--overlay button {
    background: none !important;
    border: none !important;
    color: var(--color-accent) !important;
    padding: 0 1rem !important;
}

.search-overlay__results {
    margin-top: 2rem;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

.search-overlay__results .search-results {
    position: static !important;
    box-shadow: none !important;
    border: none !important;
    display: block !important;
    width: 100% !important;
}

.search-overlay__results .search-item {
    padding: 1.25rem 1rem !important;
}

.search-overlay__results .search-item span {
    font-size: 1.1rem !important;
}

/* === MOBILE ACTION BAR === */
.mobile-action-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 100vw; /* Hard stop */
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(15, 23, 42, 0.08); /* Softer border */
    padding: 0.75rem 1rem;
    z-index: 900;
    gap: 0.75rem;
    box-shadow: 0 -4px 30px rgba(0,0,0,0.08); /* Deeper lift */
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
    align-items: center;
    flex-wrap: nowrap;
    overflow: hidden;
}

.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px; /* Smoother Pill shape */
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.1s ease, background-color 0.2s;
    height: 48px;
    position: relative;
    overflow: hidden;
}

.action-btn:active {
    transform: scale(0.96);
}

/* Secondary Actions (Call/WA) */
.action-btn--icon {
    width: 48px; /* Fixed standard size */
    flex-shrink: 0;
    background: #fff;
    color: var(--color-primary);
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}

.action-btn--icon span {
    display: none; /* Hide labels by default to prevent overflow */
}

.action-btn--icon svg {
    width: 24px;
    height: 24px;
}

/* Show labels on larger mobile screens (bp-xs: 480px) */
@media (min-width: 480px) {
    .action-btn--icon {
        width: auto;
        padding: 0 0.75rem;
        flex-direction: column;
        height: 48px;
        font-size: 0.6rem;
        gap: 2px;
    }
    .action-btn--icon span {
        display: block;
    }
    .action-btn--icon svg {
        width: 20px;
        height: 20px;
    }
}

/* WhatsApp Specific Brand Color (Optional, but good for UX) */
.action-btn--icon[href*="wa.me"] {
    color: #128c7e;
    border-color: #e4f2f0;
    background: #f0fdfa;
}

/* Primary CTA */
.action-btn--primary {
    background: var(--color-accent);
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
    color: white;
    flex: 1; /* Allow it to grow AND shrink */
    min-width: 0; /* Critical for flex child truncation */
    font-size: 0.95rem; 
    padding: 0 1rem;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
    border: none;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Compact mobile action bar below xs breakpoint */
@media (max-width: 479px) {
    .mobile-action-bar {
        gap: 0.5rem;
        padding: 0.75rem 0.5rem;
    }

    .action-btn--icon {
        width: 44px; /* Compact icon-only buttons */
    }

    .action-btn--primary {
        font-size: 0.85rem;
        padding: 0 0.5rem;
    }
}

.action-btn--primary:hover, .action-btn--primary:focus {
    box-shadow: 0 6px 16px rgba(2, 132, 199, 0.4);
    color: white;
}

@media (max-width: 768px) {
    /* Show bar only on product pages where it exists */
    .mobile-action-bar {
        display: flex;
    }
    
    /* Add padding to body so content isn't covered ONLY if bar exists */
    /* Fallback for older browsers: just add padding on product pages if we had a class */
    body:has(.mobile-action-bar) {
        padding-bottom: 80px; 
    }
    
    /* Hide floating widgets when bar is present */
    body:has(.mobile-action-bar) #whatsapp-widget, 
    body:has(.mobile-action-bar) #back-to-top {
        display: none !important; 
    }
    
    /* Adjust footer padding */
    body:has(.mobile-action-bar) .site-footer {
        padding-bottom: 80px;
    }
}

/* === CHART SCROLL GUARD === */
.chart-overlay-guard {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.05); /* Very subtle tint */
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.chart-overlay-guard.is-active {
    opacity: 0;
}

.chart-guard-msg {
    background: rgba(15, 23, 42, 0.85);
    color: white;
    padding: 0.6rem 1.2rem;
    border-radius: 99px;
    font-size: 0.85rem;
    font-weight: 600;
    backdrop-filter: blur(8px);
    pointer-events: none;
    transition: transform 0.2s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.chart-overlay-guard:active .chart-guard-msg {
    transform: scale(0.95);
}

@media (min-width: 992px) {
    .chart-overlay-guard {
        display: none !important;
    }
}

/* === MOBILE ACCORDION TECH CARDS === */
@media (max-width: 768px) {
    .tech-card {
        border-radius: 8px;
    }

    .tech-card__header {
        cursor: pointer;
        position: relative;
        user-select: none;
        transition: background-color 0.2s;
        /* Reduced padding for mobile */
        padding: 0.875rem 1rem;
        min-height: 48px;
        gap: 0.5rem;
    }

    .tech-card__header:active {
        background-color: #eef2f6;
    }

    .tech-card__title {
        font-size: 0.875rem !important;
        gap: 0.5rem !important;
        line-height: 1.3;
    }

    .tech-card__title::before {
        width: 3px;
        height: 14px;
        flex-shrink: 0;
    }

    .tech-card__model {
        font-size: 0.7rem;
        padding: 2px 6px;
    }

    .tech-card__suffix {
        font-size: 0.7rem;
        display: none; /* Hide suffix on mobile to save space */
    }

    /* Content Transition Wrapper */
    .tech-card__content,
    .tech-card .table-responsive, 
    .tech-card .performance-chart-container,
    .tech-card .table-note-wrapper,
    .tech-card .dimensions-diagram-group,
    .tech-card .dimensions-diagram,
    .tech-card .performance-diagram {
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
        max-height: 2500px;
        opacity: 1;
        overflow: hidden;
    }

    /* Collapse Logic */
    .tech-card.is-collapsed .tech-card__content,
    .tech-card.is-collapsed .table-responsive,
    .tech-card.is-collapsed .performance-chart-container,
    .tech-card.is-collapsed .table-note-wrapper,
    .tech-card.is-collapsed .dimensions-diagram-group,
    .tech-card.is-collapsed .dimensions-diagram,
    .tech-card.is-collapsed .performance-diagram {
        max-height: 0 !important;
        min-height: 0 !important;
        height: 0 !important;
        opacity: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        overflow: hidden !important;
    }

    /* Ensure chart canvas is also hidden when collapsed */
    .tech-card.is-collapsed .performance-chart-container canvas,
    .tech-card.is-collapsed .performance-chart-container.chart-loaded canvas {
        height: 0 !important;
        max-height: 0 !important;
    }
    
    /* Remove bottom border from header when collapsed to look cleaner */
    .tech-card.is-collapsed .tech-card__header {
        border-bottom-color: transparent;
        border-radius: var(--radius-md);
    }
}

/* === ACCESSIBILITY: REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .reveal-in,
    .reveal-on-scroll {
        opacity: 1;
        transform: none;
    }
}

/* === ACCESSIBILITY: SKIP LINK === */
.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: white;
    padding: 1rem 2rem;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    z-index: 9999;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.2s;
}

.skip-link:focus {
    top: 0;
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* === ACCESSIBILITY: ENHANCED FOCUS STATES === */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* === BUTTON DISABLED STATE === */
.btn:disabled,
.btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.btn:disabled::after,
.btn[disabled]::after {
    display: none;
}

/* === SPINNER FOR LOADING STATES === */
.spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-rotate 0.75s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .spinner {
        animation: none;
        border-style: dotted;
    }
}

/* === ABOUT PAGE ENHANCEMENTS: RESPONSIVE === */
@media (max-width: 768px) {
    /* Stats responsive */
    .stats-container {
        padding: 3rem 0;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .stat-item {
        padding: 1.5rem 1rem;
    }

    .stat-number {
        font-size: 2.5rem;
    }

    .stat-number .stat-suffix {
        font-size: 1.5rem;
    }

    .stat-label {
        font-size: 0.7rem;
    }

    .stat-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 1rem;
    }

    /* Timeline responsive */
    .timeline-section {
        padding: 3rem 0;
    }

    .timeline-content {
        padding: 1.5rem;
    }

    .timeline-title {
        font-size: 1.15rem;
    }

    .timeline-text {
        font-size: 0.95rem;
    }

    /* Hero parallax responsive */
    .about-page .hero.hero--parallax {
        min-height: 50vh;
        padding: 5rem 0;
    }

    .about-page .hero.hero--parallax .hero-bg {
        /* Disable parallax on mobile for performance */
        transform: none !important;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }

    .stat-item {
        padding: 1.25rem 0.75rem;
        border-radius: 12px;
    }

    .stat-number {
        font-size: 2rem;
    }

    .stat-number .stat-suffix {
        font-size: 1.25rem;
    }

    .timeline-item {
        padding-left: 50px;
    }

    .timeline::before {
        left: 16px;
    }

    .timeline-marker {
        left: 4px;
        width: 22px;
        height: 22px;
    }
}