/**
 * components.css
 * Reusable UI components: buttons, cards, navbar base, section titles.
 * All styles use variables from variables.css so the design system stays centralized.
 * No full page sections—only the building blocks for navbar, hero, product cards, etc.
 */

/* ========== Buttons ========== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--transition-normal), color var(--transition-normal),
                border-color var(--transition-normal), box-shadow var(--transition-normal);
}

/* Primary button: industrial blue */
.btn--primary {
    background-color: var(--color-btn-primary);
    color: var(--color-btn-primary-text);
}

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

/* Primary + trailing arrow (e.g. “view more” navigation) */
.btn.btn--arrow-end {
    gap: 0.4rem;
    transition:
        background-color var(--transition-normal),
        color var(--transition-normal),
        border-color var(--transition-normal),
        box-shadow var(--transition-normal),
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn.btn--arrow-end::after {
    content: '→';
    font-size: 1.15em;
    line-height: 1;
    transition: transform var(--transition-fast);
}

.btn.btn--arrow-end:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px -6px rgba(234, 88, 12, 0.45);
}

.btn.btn--arrow-end:hover::after {
    transform: translateX(5px);
}

/* Secondary button: steel grey */
.btn--secondary {
    background-color: var(--color-btn-secondary);
    color: var(--color-btn-secondary-text);
}

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

/* Outline button: border only, fill on hover */
.btn--outline {
    background-color: transparent;
    color: var(--color-btn-outline-text);
    border-color: var(--color-btn-outline-border);
}

.btn--outline:hover {
    background-color: var(--color-btn-outline-hover-bg);
    color: var(--color-btn-outline-hover-text);
    border-color: var(--color-btn-outline-hover-bg);
}

/* Outline button for dark backgrounds (e.g. hero) */
.btn--outline-light {
    background-color: transparent;
    color: var(--color-white);
    border-color: var(--color-white);
}

.btn--outline-light:hover {
    background-color: var(--color-white);
    color: var(--color-primary-dark);
    border-color: var(--color-white);
}

/* Tech / AI accent button (electric cyan) */
.btn--tech {
    background-color: var(--color-tech);
    color: var(--color-primary-dark);
    border-color: var(--color-tech);
}

.btn--tech:hover {
    background-color: var(--color-tech-light);
    border-color: var(--color-tech-light);
    color: var(--color-primary-dark);
}

/* High-conversion CTA primary — electric cyan + glow (#contact) */
.btn--cta-primary {
    background-color: var(--color-tech);
    color: var(--color-primary-dark);
    border-color: var(--color-tech);
    font-weight: var(--font-weight-semibold);
    padding: 0.65rem 1.35rem;
    box-shadow: var(--contact-cta-primary-glow);
    transition:
        background-color var(--transition-normal),
        border-color var(--transition-normal),
        color var(--transition-normal),
        box-shadow 0.35s ease,
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn--cta-primary:hover {
    background-color: var(--color-tech-light);
    border-color: var(--color-tech-light);
    color: var(--color-primary-dark);
    box-shadow: var(--contact-cta-primary-glow-hover);
    transform: translateY(-3px) scale(1.04);
}

.btn--cta-primary:active {
    transform: translateY(-1px) scale(1.02);
}

/* CTA secondary — outline on dark bands */
.btn--cta-outline {
    background-color: transparent;
    color: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.42);
    font-weight: var(--font-weight-medium);
    padding: 0.65rem 1.35rem;
    transition:
        background-color var(--transition-normal),
        border-color var(--transition-normal),
        color var(--transition-normal),
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn--cta-outline:hover {
    background-color: rgba(34, 211, 238, 0.1);
    border-color: var(--color-tech-light);
    color: var(--color-tech-light);
    transform: translateY(-2px) scale(1.02);
}

/* Hero tagline (corporate) */
.hero__tagline {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-tech-light);
    margin-bottom: var(--spacing-md);
}

/* ========== Premium AI / Industry 4.0 section ========== */
.ai-section {
    position: relative;
    overflow: hidden;
    background-color: var(--section-industrial-bg);
    background-image: var(--section-industrial-grid);
    background-size: var(--section-industrial-grid-size);
    color: var(--color-white);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Grid lives on .ai-section; layer removed so pattern stays single/uniform */
.ai-section__bg {
    display: none;
}

.ai-section__inner {
    position: relative;
    z-index: 1;
}

.ai-section__eyebrow {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-tech-light);
    margin-bottom: var(--spacing-md);
}

.ai-section__headline {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-white);
    margin-bottom: var(--spacing-md);
    max-width: min(100%, 22rem);
}

.ai-section__headline-accent {
    display: block;
    margin-top: var(--spacing-sm);
    color: var(--color-tech-light);
    font-weight: var(--font-weight-bold);
}

.ai-section__lead {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: rgba(255, 255, 255, 0.78);
    max-width: 38ch;
    margin: 0;
}

/* Feature cards — dark surface, thin border, glow hover */
.ai-feature-card {
    display: block;
    height: 100%;
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    background: var(--ai-surface);
    border: 1px solid var(--ai-border-rest);
    box-shadow: 0 0 0 0 transparent;
    transition: transform var(--transition-normal),
                border-color var(--transition-normal),
                background-color var(--transition-normal),
                box-shadow var(--transition-slow);
}

.ai-feature-card:hover {
    transform: translateY(-4px);
    border-color: var(--ai-border-hover);
    background: var(--ai-surface-hover);
    box-shadow: 0 0 24px var(--ai-glow-cyan), 0 8px 24px rgba(0, 0, 0, 0.25);
}

.ai-feature-card__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    margin: 0 0 var(--spacing-xs);
    letter-spacing: 0.01em;
}

.ai-feature-card__desc {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
    color: rgba(255, 255, 255, 0.62);
    margin: 0;
}

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

.ai-section__cards > li {
    margin: 0;
}

/* ========== About section (#about — homepage) ========== */

#about.about-section {
    background-color: var(--section-industrial-bg);
    background-image: var(--section-industrial-grid);
    background-size: var(--section-industrial-grid-size);
    color: var(--color-white);
}

#about .about-section__header {
    margin-bottom: clamp(2rem, 4vw, 3rem);
    max-width: 44rem;
}

#about .about-section__title,
#about .section-title {
    color: var(--color-white);
}

#about .about-section__subtitle,
#about .section-subtitle {
    color: var(--about-text-muted);
    max-width: 48ch;
    margin-bottom: 0;
}

#about .about-section__lead {
    font-size: clamp(1rem, 1.15vw, 1.125rem);
    line-height: 1.65;
    color: var(--about-text-muted);
    margin: 0 0 var(--spacing-2xl);
    max-width: 52ch;
}

#about .about-section__highlights {
    list-style: none;
    margin: 0 0 var(--spacing-2xl);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

#about .about-highlight {
    margin: 0;
}

#about .about-highlight__text {
    display: block;
    padding: 0.65rem 1rem;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.02em;
    line-height: var(--line-height-tight);
    color: rgba(255, 255, 255, 0.9);
    background-color: var(--about-highlight-bg);
    border: 1px solid var(--about-highlight-border);
    border-radius: var(--radius-sm);
}

#about .about-section__cta.section-cta {
    margin-top: 0;
    text-align: left;
}

#about .about-section__media {
    width: 100%;
    max-width: 100%;
}

#about .about-section__media-frame {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 5 / 4;
    border-radius: var(--radius-lg);
    border: 1px solid var(--about-border);
    overflow: hidden;
    box-shadow: var(--about-media-shadow);
    background-color: #12161c;
}

/* About photo: use <img src="assets/images/..."> in HTML so paths resolve from the page (same as navbar logo). */
#about .about-section__media-img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    pointer-events: none;
}

#about .about-section__media-frame::after {
    content: none;
}

/* About / manufacturing prose (inner pages) */
.about-lede {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    max-width: 65ch;
    margin-bottom: var(--spacing-xl);
}

.manufacturing-grid {
    display: grid;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

@media (min-width: 768px) {
    .manufacturing-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.manufacturing-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-card);
}

.manufacturing-card h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-primary);
}

.manufacturing-card p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

.about-address {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
    max-width: 50ch;
}

.about-facility {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xl);
    max-width: 55ch;
}

.section-cta--spaced {
    margin-top: var(--spacing-xl);
}

.page-email-link {
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    border-bottom: 1px solid var(--color-tech);
    transition: color var(--transition-fast);
}

.page-email-link:hover {
    color: var(--color-tech-dark);
}

.contact-cta__link {
    color: rgba(255, 255, 255, 0.95);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--transition-fast);
}

.contact-cta__link:hover {
    color: var(--color-tech-light);
}

/* Navbar brand: logo only */
.navbar__brand {
    display: flex;
    flex-direction: row;
    align-items: center;
    line-height: var(--line-height-tight);
    color: var(--color-white);
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

.navbar__brand:hover {
    opacity: 0.92;
}

.navbar__brand-logo {
    display: block;
    height: 3.2rem;
    width: auto;
    max-width: min(16rem, 68vw);
    object-fit: contain;
    object-position: left center;
}

.navbar__brand:hover .navbar__brand-logo {
    opacity: 0.96;
}

@media (min-width: 1024px) {
    .navbar__brand-logo {
        height: 3.7rem;
        max-width: 18rem;
    }
}

.navbar.navbar--compact .navbar__brand-logo {
    height: 2.85rem;
    max-width: 14rem;
}

@media (min-width: 1024px) {
    .navbar.navbar--compact .navbar__brand-logo {
        height: 3.2rem;
        max-width: 16rem;
    }
}

.navbar__cta--long {
    font-size: var(--font-size-xs);
    padding: 0.36rem 0.72rem;
    line-height: 1.25;
    white-space: normal;
    text-align: center;
    max-width: 9.5rem;
}

@media (min-width: 1024px) {
    .navbar__cta--long {
        max-width: none;
        white-space: nowrap;
    }
}

.navbar__iso-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 0.65rem;
}

.navbar__iso-logo {
    display: block;
    width: auto;
    height: 3.04rem;
    object-fit: contain;
    opacity: 0.96;
}

@media (min-width: 1024px) {
    .navbar__iso-logo {
        height: 3.515rem;
    }
}

.navbar.navbar--compact .navbar__iso-logo {
    height: 2.7075rem;
}

@media (min-width: 1024px) {
    .navbar.navbar--compact .navbar__iso-logo {
        height: 3.04rem;
    }
}

.navbar__mobile-extra {
    display: none;
}

/* Contact page form */
.contact-form {
    max-width: 36rem;
}

.contact-form .form-group {
    margin-bottom: var(--spacing-md);
}

.contact-form .form-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xs);
}

.contact-form .form-input,
.contact-form textarea {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
    font-size: var(--font-size-base);
}

.contact-form textarea {
    min-height: 8rem;
    resize: vertical;
}

.contact-form .form-file {
    font-size: var(--font-size-sm);
    padding: var(--spacing-sm);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-section);
    width: 100%;
}

.contact-form .form-hint {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--spacing-xs);
}

/* ========== Hero section ========== */
/* Full-width hero with background image, overlay, centered content, large typography. */

.hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
    background-color: var(--color-secondary);
    background-image: url('../assets/images/hero-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--color-white);
    text-align: center;
}

/* Overlay for readability (shows over image or over solid color if image missing) */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--hero-overlay);
    pointer-events: none;
}

.hero__content {
    position: relative;
    z-index: 1;
    max-width: 42rem;
    padding: var(--spacing-xl);
}

.hero__headline {
    font-size: clamp(1.75rem, 5vw, 3rem);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-md);
    color: var(--color-white);
}

.hero__subheadline {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    line-height: var(--line-height-base);
    margin-bottom: var(--spacing-xl);
    color: rgba(255, 255, 255, 0.95);
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    justify-content: center;
    align-items: center;
}

.hero__actions .btn {
    min-width: 10rem;
}

/* Hero on mobile: slightly reduce min-height for fold */
@media (max-width: 767px) {
    .hero {
        min-height: 100svh;
        padding: var(--spacing-xl) 0;
    }

    .hero__content {
        padding: var(--spacing-md);
    }

    .hero__actions {
        flex-direction: column;
    }

    .hero__actions .btn {
        width: 100%;
        max-width: 18rem;
    }
}

@media (min-width: 768px) {
    .hero__headline {
        font-size: clamp(2rem, 4vw, 3.5rem);
    }

    .hero__subheadline {
        font-size: 1.25rem;
    }
}

@media (min-width: 1024px) {
    .hero__headline {
        font-size: var(--font-size-5xl);
    }
}

/* ========== Card component ========== */
.card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

/* Card hover effect uses shadow and optional lift (see animations.css .card--hover-lift) */
.card:hover {
    box-shadow: var(--shadow-hover);
}

/* ========== Product category card (reusable) ========== */
/* Image on top, title + description below, optional link. Used on homepage and products page. */

.product-card {
    display: block;
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    border: 1px solid var(--color-border);
    transition: box-shadow var(--transition-normal), transform var(--transition-normal);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

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

/* Image container: fixed aspect ratio, placeholder background when no image */
.product-card__image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background-color: var(--color-bg-section);
    overflow: hidden;
}

.product-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.product-card:hover .product-card__image img {
    transform: scale(1.05);
}

/* Placeholder when no img: show neutral background (image can be added later) */
.product-card__image:empty,
.product-card__image .product-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: var(--color-border);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

/* Card body: title, description, link */
.product-card__body {
    padding: var(--spacing-lg);
}

.product-card__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
    line-height: var(--line-height-tight);
}

.product-card__desc {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: var(--line-height-base);
    margin-bottom: var(--spacing-md);
}

.product-card__desc:last-child {
    margin-bottom: 0;
}

/* Optional arrow / "Learn more" link */
.product-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    transition: gap var(--transition-fast), color var(--transition-fast);
}

.product-card:hover .product-card__link {
    color: var(--color-primary-light);
    gap: var(--spacing-sm);
}

.product-card__link::after {
    content: '→';
}

/* ========== Capabilities & Smart Machinery (homepage) ========== */
#capabilities {
    background-color: var(--section-industrial-bg);
    background-image: var(--section-industrial-grid);
    background-size: var(--section-industrial-grid-size);
    color: var(--color-white);
}

.capabilities-section__header {
    margin-bottom: var(--spacing-md);
}

#capabilities .capabilities-section__title,
#capabilities .section-title {
    color: var(--color-white);
}

#capabilities .capabilities-section__subtitle,
#capabilities .section-subtitle {
    color: var(--cap-text-muted);
    max-width: 48ch;
}

.capability-row__media {
    min-width: 0;
}

.capability-row__media-frame {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-md);
    background-color: var(--cap-bg-elevated);
    border: 1px solid var(--cap-border);
    overflow: hidden;
}

.capability-row__media-frame::after {
    content: none;
}

/* Capability photos: <img src="assets/images/..."> in HTML — document-relative URLs work on static hosts. */
.capability-row__media-img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    pointer-events: none;
}

.capability-row__content {
    min-width: 0;
}

.capability-row__title {
    font-size: clamp(1.35rem, 2.4vw, 1.875rem);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-white);
    margin: 0 0 var(--spacing-md);
    letter-spacing: -0.02em;
}

.capability-row__desc {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--cap-text-muted);
    margin: 0 0 var(--spacing-lg);
    max-width: 42ch;
}

.capability-row__tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.capability-tag {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.35rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-sm);
    color: var(--color-chrome);
    background-color: transparent;
}

.capabilities-section__detail {
    text-align: center;
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-md);
    border-top: 1px solid var(--cap-border);
}

.capabilities-section__detail-note {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.58);
    line-height: var(--line-height-base);
    margin: 0 auto var(--spacing-lg);
    max-width: 28rem;
}

.capabilities-section__detail-btn {
    min-width: 14rem;
    font-weight: var(--font-weight-semibold);
    padding: 0.7rem 1.35rem;
}

.capabilities-section__brochure {
    margin-top: var(--spacing-md);
}

.capabilities-section__cta {
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--cap-border);
}

/* ========== Section CTA (e.g. "View All Products") ========== */
.section-cta {
    text-align: center;
    margin-top: var(--spacing-xl);
}

#capabilities .capabilities-section__detail {
    margin-top: clamp(2rem, 5vw, 3rem);
}

#capabilities .capabilities-section__cta.section-cta {
    margin-top: 0;
}

.section-cta .btn {
    min-width: 12rem;
}

@media (max-width: 767px) {
    #capabilities .capabilities-section__detail-btn {
        width: 100%;
        max-width: 20rem;
    }
}

/* ========== Contact CTA section (homepage #contact + inner pages) ========== */
/* High-conversion strip: blue-tinted gradient, cyan grid, top glow (distinct from other bands) */

.contact-cta-section {
    position: relative;
    overflow: hidden;
    background: var(--contact-cta-gradient);
    border-top: 1px solid var(--contact-cta-top-line);
}

.contact-cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--contact-cta-grid-fade) 1px, transparent 1px),
        linear-gradient(90deg, var(--contact-cta-grid-fade) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(180deg, black 0%, black 55%, transparent 100%);
    pointer-events: none;
    opacity: 0.85;
}

.contact-cta-section::after {
    content: '';
    position: absolute;
    top: -40%;
    left: 50%;
    transform: translateX(-50%);
    width: min(90vw, 52rem);
    height: 70%;
    background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(34, 211, 238, 0.12) 0%, transparent 65%);
    pointer-events: none;
}

/* Homepage: beat layout.css .home-section:nth-child() light background-color */
#contact.contact-cta-section {
    background: var(--contact-cta-gradient);
}

.contact-cta {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: min(44rem, 100%);
    margin-left: auto;
    margin-right: auto;
}

.contact-cta__icon {
    display: flex;
    justify-content: center;
    margin-bottom: var(--spacing-lg);
    color: var(--color-tech-light);
    opacity: 0.88;
}

.contact-cta__icon-svg {
    display: block;
}

.contact-cta__title {
    font-size: clamp(1.5rem, 4.2vw, 2.75rem);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 var(--spacing-lg);
    text-wrap: balance;
}

.contact-cta__desc {
    font-size: clamp(1rem, 2.1vw, 1.1875rem);
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.65;
    margin: 0 auto var(--spacing-2xl);
    max-width: 48ch;
}

.contact-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    justify-content: center;
    align-items: center;
}

.contact-cta__actions .btn {
    min-width: 11.5rem;
}

.contact-cta--compact .contact-cta__title {
    margin-bottom: var(--spacing-xl);
}

.contact-cta--compact .contact-cta__desc {
    display: none;
}

@media (max-width: 767px) {
    .contact-cta__actions {
        flex-direction: column;
        width: 100%;
    }

    .contact-cta__actions .btn {
        width: 100%;
        max-width: 20rem;
    }
}

/* ========== Capabilities page (capabilities.html) ========== */

.cap-page-hero {
    background: linear-gradient(180deg, var(--color-primary-dark) 0%, #12161c 100%);
    color: var(--color-white);
    text-align: center;
}

.cap-page-hero__inner {
    padding-top: clamp(1rem, 3vw, 1.5rem);
    padding-bottom: clamp(2.5rem, 6vw, 3.5rem);
}

.cap-page-hero__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: -0.02em;
    margin: 0 0 var(--spacing-md);
}

.cap-page-hero__subtitle {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: rgba(255, 255, 255, 0.78);
    line-height: var(--line-height-base);
    margin: 0 auto;
    max-width: 38ch;
}

.cap-page-intro {
    background-color: var(--color-bg-section);
    border-bottom: 1px solid var(--color-border);
}

.cap-page-intro__text {
    font-size: var(--font-size-lg);
    line-height: 1.65;
    color: var(--color-text-secondary);
    max-width: 62ch;
    margin: 0;
}

.cap-page-detail {
    background-color: var(--cap-bg);
    color: var(--color-white);
    border-top: 1px solid var(--cap-border);
}

.cap-page-detail__inner .capability-row {
    border-bottom-color: var(--cap-border);
}

.cap-page-detail__row[id] {
    scroll-margin-top: 5.5rem;
}

.cap-page-detail .capability-row__title {
    font-size: clamp(1.35rem, 2.5vw, 1.75rem);
}

.cap-page-detail .capability-row__specs {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cap-page-detail .capability-row__specs li {
    position: relative;
    padding-left: 1.1rem;
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--cap-text-muted);
}

.cap-page-detail .capability-row__specs li:last-child {
    margin-bottom: 0;
}

.cap-page-detail .capability-row__specs li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 5px;
    height: 5px;
    background-color: var(--color-tech-light);
    border-radius: 1px;
    opacity: 0.85;
}

.cap-page-specs {
    background-color: var(--color-bg-light);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.cap-page-spec-tile {
    padding: var(--spacing-lg);
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

.cap-page-spec-tile__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    line-height: var(--line-height-tight);
    margin: 0 0 var(--spacing-xs);
}

.cap-page-spec-tile__desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-base);
    margin: 0;
}

/* ========== Industries Served (#industries) — premium dark band ========== */

#industries.industries-section {
    background-color: var(--section-industrial-bg);
    background-image: var(--section-industrial-grid);
    background-size: var(--section-industrial-grid-size);
    color: var(--color-white);
}

#industries .industries-section__header {
    text-align: center;
    margin-bottom: clamp(2rem, 5vw, 3rem);
    margin-left: auto;
    margin-right: auto;
    max-width: 48rem;
}

#industries .industries-section__title,
#industries .section-title {
    color: var(--color-white);
}

#industries .industries-section__subtitle,
#industries .section-subtitle {
    color: var(--ind-text-muted);
    max-width: 42ch;
    margin-left: auto;
    margin-right: auto;
}

#industries .industry-card {
    position: relative;
    background-color: var(--ind-surface);
    border: 1px solid var(--ind-border);
    border-radius: var(--radius-md);
    padding: clamp(1.5rem, 3vw, 2rem);
    box-shadow: var(--ind-shadow);
    /* transition merged in animations.css (#industries .industry-card.reveal) */
}

/* Hover lift for flip cards lives in css/industries.css */
#industries .industry-card:not(.industry-flip-card):hover {
    transform: translateY(-6px);
    border-color: var(--ind-border-hover);
    box-shadow: var(--ind-shadow-hover);
    background-color: rgba(255, 255, 255, 0.05);
}

#industries .industry-card__icon {
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: var(--spacing-lg);
    border: 1px solid var(--ind-border);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ind-icon);
    background-color: rgba(255, 255, 255, 0.02);
    /* icon transition: animations.css */
}

#industries .industry-card__icon-svg {
    display: block;
    flex-shrink: 0;
}

#industries .industry-card:not(.industry-flip-card):hover .industry-card__icon {
    transform: scale(1.08);
    border-color: var(--ind-border-hover);
    color: var(--ind-icon-hover);
    background-color: rgba(234, 88, 12, 0.06);
}

#industries .industry-card__title {
    font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    margin: 0 0 var(--spacing-sm);
    line-height: var(--line-height-tight);
    letter-spacing: -0.01em;
}

#industries .industry-card__desc {
    font-size: var(--font-size-base);
    color: var(--ind-text-muted);
    line-height: var(--line-height-base);
    margin: 0;
    max-width: 36ch;
}

/* ========== Feature card (reusable) ========== */
/* Icon placeholder, feature title, short description. Used in Why Choose Us and elsewhere. */

.feature-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

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

.feature-card__icon {
    width: 3rem;
    height: 3rem;
    margin-bottom: var(--spacing-md);
    background-color: var(--color-bg-section);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    font-size: var(--font-size-xl);
    transition: background-color var(--transition-normal), transform var(--transition-normal);
}

.feature-card:hover .feature-card__icon {
    background-color: var(--color-primary);
    color: var(--color-white);
    transform: scale(1.05);
}

.feature-card__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
    line-height: var(--line-height-tight);
}

.feature-card__desc {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: var(--line-height-base);
    margin: 0;
}

/* ========== Navbar ========== */
/* Always gunmetal; scroll adds shadow + compact padding only (navbar.js). */
/* Sticky on wrapper so the bar stays pinned while scrolling even if inner layout changes. */

#navbar-root {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
}

.navbar {
    position: relative;
    top: 0;
    z-index: 1000;
    width: 100%;
    background-color: var(--navbar-bg);
    border-bottom: 1px solid var(--navbar-border);
    padding: 1.15rem 0;
    box-shadow: none;
    transition: padding var(--transition-normal),
                box-shadow var(--transition-normal);
}

.navbar.navbar--scrolled {
    box-shadow: var(--shadow-navbar-scrolled);
}

.navbar.navbar--compact {
    padding: 0.85rem 0;
}

.navbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 3.45rem;
}

/* Hamburger button: visible only on mobile */
.navbar__toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: var(--spacing-sm);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--transition-fast);
    z-index: 1002;
}

.navbar__toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.navbar__toggle:focus-visible,
.navbar__link:focus-visible,
.navbar__cta:focus-visible {
    outline: 2px solid var(--color-tech-light);
    outline-offset: 2px;
}

.navbar__toggle-bar {
    display: block;
    width: 22px;
    height: 2px;
    background-color: var(--color-white);
    border-radius: 1px;
    transition: transform var(--transition-normal),
                opacity var(--transition-normal);
}

/* Hamburger → X when open */
.navbar__toggle[aria-expanded="true"] .navbar__toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.navbar__toggle[aria-expanded="true"] .navbar__toggle-bar:nth-child(2) {
    opacity: 0;
}

.navbar__toggle[aria-expanded="true"] .navbar__toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Nav wrap: desktop horizontal list; mobile slide-in panel */
.navbar__nav-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbar__list {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    justify-content: center;
}

/* Nav links: compact, premium spacing */
.navbar__link {
    position: relative;
    color: var(--navbar-link);
    font-size: 0.8125rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.4rem 0.55rem;
    border-radius: var(--radius-sm);
    transition: color var(--transition-normal);
}

.navbar__link::after {
    content: '';
    position: absolute;
    left: 0.55rem;
    right: 0.55rem;
    bottom: 0.2rem;
    height: 1px;
    background-color: var(--color-accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--transition-normal);
}

.navbar__link:hover {
    color: var(--color-accent-light);
}

.navbar__link:hover::after {
    transform: scaleX(1);
}

.navbar__link--active {
    color: var(--color-accent-light);
    font-weight: var(--font-weight-semibold);
}

.navbar__link--active::after {
    transform: scaleX(1);
}

/* CTA: industrial orange on dark bar (single treatment) */
.navbar__cta-wrap {
    margin-left: var(--spacing-sm);
}

.navbar__cta {
    white-space: nowrap;
}

.navbar .navbar__cta {
    background-color: var(--color-btn-primary);
    color: var(--color-btn-primary-text);
    border-color: var(--color-btn-primary);
}

.navbar .navbar__cta:hover {
    background-color: var(--color-btn-primary-hover);
    color: var(--color-btn-primary-text);
    border-color: var(--color-btn-primary-hover);
}

/* Backdrop: hidden on desktop, used on mobile to close menu */
.navbar__backdrop {
    display: none;
}

/* ----- Mobile navigation ----- */
@media (max-width: 1023px) {
    .navbar__backdrop {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.4);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--transition-normal), visibility var(--transition-normal);
        z-index: 1000;
    }

    .navbar__backdrop.navbar__menu--open {
        opacity: 1;
        visibility: visible;
    }

    .navbar__toggle {
        display: flex;
    }

    .navbar__nav-wrap {
        position: fixed;
        top: 0;
        right: 0;
        width: min(340px, 100vw);
        height: 100vh;
        background-color: var(--navbar-bg);
        border-left: 1px solid var(--navbar-border);
        box-shadow: -8px 0 32px rgba(0, 0, 0, 0.4);
        padding: 5rem var(--spacing-lg) var(--spacing-xl);
        transform: translateX(100%);
        visibility: hidden;
        transition: transform var(--transition-normal), visibility var(--transition-normal);
        z-index: 1001;
        overflow-y: auto;
    }

    .navbar__nav-wrap.navbar__menu--open {
        transform: translateX(0);
        visibility: visible;
    }

    .navbar__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .navbar__list li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .navbar__link {
        display: block;
        padding: var(--spacing-md) var(--spacing-sm);
        color: var(--navbar-link);
    }

    .navbar__link::after {
        left: var(--spacing-sm);
        right: var(--spacing-sm);
        bottom: 0.65rem;
        background-color: var(--color-accent);
    }

    .navbar__link:hover,
    .navbar__link--active {
        color: var(--color-accent-light);
    }

    .navbar__cta-wrap {
        margin-left: 0;
        margin-top: var(--spacing-md);
        border-bottom: none;
        padding-top: var(--spacing-sm);
    }

    .navbar__iso-wrap {
        display: none;
    }

    .navbar__mobile-extra {
        display: block;
    }

    .navbar__mobile-extra--cta {
        margin-top: var(--spacing-md);
        border-bottom: none;
        padding-top: var(--spacing-sm);
    }

    .navbar__cta--mobile {
        display: block;
        width: 100%;
        max-width: none;
        font-size: var(--font-size-sm);
        padding: 0.6rem 1rem;
        line-height: 1.25;
        white-space: nowrap;
        text-align: center;
    }

    .navbar__mobile-extra--iso {
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: none;
        padding: var(--spacing-md) var(--spacing-sm) 0;
    }

    .navbar__iso-logo--mobile {
        height: 2.45rem;
        width: auto;
    }
}

/* Tablet and desktop: hide hamburger, show nav inline */
@media (min-width: 1024px) {
    .navbar__inner {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        column-gap: var(--spacing-md);
    }

    .navbar__toggle {
        display: none;
    }

    .navbar__nav-wrap {
        position: static;
        width: auto;
        height: auto;
        padding: 0;
        background: transparent;
        box-shadow: none;
        transform: none;
        visibility: visible;
    }
}

/* ========== Section titles & subtitles ========== */
.section-title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-sm);
}

.section-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    line-height: var(--line-height-base);
    max-width: 40ch;
}

/* Optional: title + subtitle block spacing */
.section-header {
    margin-bottom: var(--spacing-xl);
}

.section-header .section-subtitle {
    margin-bottom: 0;
}

/* ========== Footer ========== */
/* Dark background, light text. 4 columns: Company, Quick Links, Products, Contact. */

.footer {
    background-color: var(--color-bg-dark);
    color: rgba(255, 255, 255, 0.88);
    padding-top: var(--spacing-section);
    padding-bottom: 0;
}

.footer__inner {
    padding-bottom: 0;
}

.footer__grid {
    padding-bottom: var(--spacing-xl);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

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

.footer__block:last-child {
    margin-bottom: 0;
}

.footer__brand {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    margin-bottom: var(--spacing-sm);
}

.footer__desc {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--spacing-md);
    max-width: 22rem;
}

.footer__heading {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    margin-bottom: var(--spacing-md);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

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

.footer__block li {
    margin-bottom: var(--spacing-sm);
}

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

.footer__link {
    color: rgba(255, 255, 255, 0.88);
    font-size: var(--font-size-sm);
    text-decoration: none;
    transition: color var(--transition-fast), padding-left var(--transition-fast);
}

.footer__link:hover {
    color: var(--color-accent-light);
}

.footer__address {
    font-style: normal;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
}

.footer__address p {
    margin-bottom: var(--spacing-sm);
    color: rgba(255, 255, 255, 0.88);
}

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

.footer__address .footer__link {
    color: rgba(255, 255, 255, 0.95);
}

.footer__address .footer__link:hover {
    color: var(--color-accent-light);
}

/* Social icon placeholders */
.footer__social {
    display: flex;
    gap: var(--spacing-sm);
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-sm);
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--color-white);
    font-size: var(--font-size-sm);
    text-decoration: none;
    transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.footer__social-link:hover {
    background-color: var(--color-accent);
    color: var(--color-white);
    transform: translateY(-2px);
}

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

/* Bottom bar */
.footer__bottom {
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    text-align: center;
}

.footer__copyright {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.68);
    margin: 0;
}