:root {
    --color-nitta-blue: #3A5DAE;
    --color-logo-black: #000000;
    --color-industrial-gray: #5D5E61;
    --color-nitta-gold: #897750;
    --color-nitta-silver: #8F9294;
    --color-white: #FFFFFF;
    --color-deep-navy: #0B1426;
    --color-soft-ice: #F4F7FB;
    --color-ink: #111827;
    --color-muted: #667085;
    --color-border: #D9E0EA;
    --color-border-strong: #B6C1D2;
    --color-success: #0F7B55;
    --color-error: #B42318;
    --font-sans: "Source Sans Pro", "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-clear: "Clear Sans Pro", "Clear Sans", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
    --container: 1180px;
    --container-wide: 1360px;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-sm: 0 8px 24px rgba(11, 20, 38, 0.08);
    --shadow-md: 0 18px 46px rgba(11, 20, 38, 0.12);
    --transition-fast: 160ms ease;
    --transition-med: 260ms ease;
    --header-height: 76px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: 300;
    color: var(--color-ink);
    background: var(--color-white);
    line-height: 1.55;
}

.site-header,
.site-footer,
.site-nav,
.brand,
.btn,
.eyebrow,
.kicker,
.guided-card__index,
.stat-label,
.breadcrumb,
.filter-toggle,
.filter-panel,
.filter-group,
.filter-chip,
.catalog-toolbar,
.search-field,
.badge,
.tag-list span,
.product-meta,
.product-card h3,
.line-card h3,
.segment-card h3,
.value-card h3,
.support-card h3,
.related-card h3,
.download-card h3,
.spec-panel h3,
.form-field label,
.checkbox-field {
    font-family: var(--font-clear);
}

img,
svg,
video {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

:focus-visible {
    outline: 3px solid rgba(58, 93, 174, 0.45);
    outline-offset: 3px;
}

::selection {
    background: rgba(58, 93, 174, 0.18);
}

.skip-link {
    position: absolute;
    left: var(--space-4);
    top: var(--space-4);
    z-index: 100;
    padding: var(--space-3) var(--space-4);
    background: var(--color-white);
    color: var(--color-deep-navy);
    border-radius: var(--radius-sm);
    transform: translateY(-140%);
}

.skip-link:focus {
    transform: translateY(0);
}

.container,
.container-wide {
    width: min(100% - 32px, var(--container));
    margin-inline: auto;
}

.container-wide {
    width: min(100% - 32px, var(--container-wide));
}

.section {
    padding: var(--space-20) 0;
}

.section--soft {
    background: var(--color-soft-ice);
}

.section--navy {
    color: var(--color-white);
    background: linear-gradient(135deg, rgba(58, 93, 174, 0.22), transparent 42%),
    var(--color-deep-navy);
}

.section-header {
    max-width: 760px;
    margin-bottom: var(--space-10);
}

.section-header--center {
    margin-inline: auto;
    text-align: center;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    color: var(--color-nitta-blue);
    font-family: var(--font-clear);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.eyebrow::before {
    content: "";
    width: 32px;
    height: 1px;
    background: var(--color-nitta-gold);
}

.section--navy .eyebrow {
    color: #DCE7FF;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

p,
li,
input,
textarea,
select {
    font-weight: 300;
}

h1,
.display-heading {
    max-width: 12ch;
    font-size: clamp(2.75rem, 7vw, 6.8rem);
    font-weight: 300;
    line-height: 0.94;
    letter-spacing: -0.04em;
}

h2 {
    font-size: clamp(2rem, 4vw, 4rem);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.04em;
}

h3 {
    font-family: var(--font-clear);
    font-size: clamp(1.15rem, 2vw, 1.55rem);
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: 0;
}

.lead {
    color: var(--color-muted);
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    font-weight: 300;
}

.section--navy .lead,
.section--navy p {
    color: rgba(255, 255, 255, 0.76);
}

.btn {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.78rem 1.05rem;
    border: 1px solid var(--color-nitta-blue);
    border-radius: var(--radius-sm);
    background: var(--color-nitta-blue);
    color: var(--color-white);
    font-weight: 700;
    line-height: 1;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn:hover {
    background: #274C9D;
    border-color: #274C9D;
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.btn--secondary,
.btn--ghost {
    background: transparent;
    color: var(--color-nitta-blue);
}

.btn--secondary:hover,
.btn--ghost:hover {
    background: rgba(58, 93, 174, 0.08);
    color: #274C9D;
}

.btn--light {
    border-color: rgba(255, 255, 255, 0.42);
    background: var(--color-white);
    color: var(--color-deep-navy);
}

.btn--light:hover {
    border-color: var(--color-white);
    background: #EEF4FF;
    color: var(--color-deep-navy);
}

.btn--small {
    min-height: 40px;
    padding: 0.65rem 0.85rem;
    font-size: 0.92rem;
}

.btn-primary {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(0, 0, 0, 0.05) 50%, transparent 100%);
    transform: translateX(-100%);
    transition: transform 0.5s ease;
}

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

.btn-primary:hover::before {
    transform: translateX(100%);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    min-height: var(--header-height);
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid rgba(217, 224, 234, 0.92);
    backdrop-filter: blur(18px);
}

.site-header__inner {
    display: flex;
    min-height: var(--header-height);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
}

.brand {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    gap: var(--space-3);
    font-weight: 800;
    color: var(--color-logo-black);
}

.brand__mark {
    display: inline-grid;
    width: 94px;
    min-height: 34px;
    place-items: center;
    border: 2px solid currentColor;
    color: inherit;
    font-size: 1.2rem;
    line-height: 1;
    letter-spacing: 0.09em;
}

.brand__country {
    color: var(--color-industrial-gray);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    color: var(--color-industrial-gray);
    font-size: 0.96rem;
    font-weight: 700;
}

.site-nav a {
    position: relative;
    padding: var(--space-3) 0;
}

.site-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    height: 2px;
    background: var(--color-nitta-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-fast);
}

.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after {
    transform: scaleX(1);
}

.nav-toggle {
    display: none;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.nav-toggle:hover,
.nav-toggle.is-active {
    border-color: rgba(58, 93, 174, 0.42);
    background: var(--color-soft-ice);
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--color-deep-navy);
    content: "";
    transition: transform 260ms ease, background 180ms ease, opacity 180ms ease;
}

.nav-toggle span {
    position: relative;
}

.nav-toggle span::before,
.nav-toggle span::after {
    position: absolute;
    left: 0;
}

.nav-toggle span::before {
    transform: translateY(-7px);
}

.nav-toggle span::after {
    transform: translateY(7px);
}

.nav-toggle.is-active span {
    background: transparent;
}

.nav-toggle.is-active span::before {
    transform: rotate(45deg);
}

.nav-toggle.is-active span::after {
    transform: rotate(-45deg);
}

.hero {
    position: relative;
    overflow: hidden;
    min-height: calc(100vh - var(--header-height));
    padding: var(--space-16) 0 var(--space-12);
    color: var(--color-white);
    background: radial-gradient(circle at 88% 22%, rgba(58, 93, 174, 0.46), transparent 28%),
    linear-gradient(135deg, #071023 0%, var(--color-deep-navy) 48%, #152957 100%);
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.18;
    background-image: linear-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, #000, transparent 82%);
}

.hero__inner {
    position: relative;
    display: grid;
    min-height: calc(100vh - 180px);
    align-items: center;
    gap: var(--space-12);
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
}

.hero h1 {
    margin-bottom: var(--space-7);
}

.hero__copy {
    max-width: 610px;
    color: rgba(255, 255, 255, 0.78);
    font-size: clamp(1.12rem, 2vw, 1.42rem);
}

.hero__actions,
.cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-8);
}

.hero-visual {
    position: relative;
    min-height: 520px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-lg);
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.04);
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.22);
    overflow: hidden;
}

.hero-visual::before,
.hero-visual::after {
    content: "";
    position: absolute;
    inset: 12%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    transform: rotate(-18deg);
}

.hero-visual::after {
    inset: 24%;
    border-color: rgba(137, 119, 80, 0.7);
    transform: rotate(18deg);
}

.hero-visual__belt {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(86%, 520px);
    aspect-ratio: 2.8 / 1;
    border: 18px solid rgba(244, 247, 251, 0.88);
    border-inline-color: rgba(58, 93, 174, 0.92);
    border-radius: 999px;
    transform: translate(-50%, -50%) rotate(-16deg);
    box-shadow: inset 0 0 0 1px rgba(11, 20, 38, 0.16), 0 24px 70px rgba(0, 0, 0, 0.28);
}

.hero-visual__panel {
    position: absolute;
    left: var(--space-8);
    right: var(--space-8);
    bottom: var(--space-8);
    display: grid;
    gap: var(--space-2);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.72);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    text-transform: uppercase;
}

.technical-line {
    display: block;
    height: 2px;
    background: linear-gradient(90deg, var(--color-nitta-gold), transparent);
}

.guided-grid,
.product-lines,
.segment-grid,
.values-grid,
.support-grid,
.related-grid {
    display: grid;
    gap: var(--space-5);
}

.guided-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.guided-card,
.line-card,
.segment-card,
.value-card,
.support-card,
.product-card,
.spec-panel,
.download-card,
.contact-panel,
.related-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
}

.guided-card,
.segment-card,
.value-card,
.support-card,
.related-card {
    padding: var(--space-6);
}

.guided-card {
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform var(--transition-med), border-color var(--transition-med), box-shadow var(--transition-med);
}

.guided-card:hover,
.product-card:hover,
.line-card:hover {
    border-color: rgba(58, 93, 174, 0.42);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px) !important;
}

.guided-card__index,
.stat-label,
.kicker {
    color: var(--color-nitta-gold);
    font-family: var(--font-clear);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.product-lines {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.line-card {
    position: relative;
    overflow: hidden;
    min-height: 390px;
    padding: var(--space-8);
    color: var(--color-white);
    background: var(--color-deep-navy);
    transition: transform var(--transition-med), border-color var(--transition-med), box-shadow var(--transition-med);
}

.line-card--light {
    color: var(--color-deep-navy);
    background: linear-gradient(135deg, rgba(58, 93, 174, 0.12), transparent 44%),
    var(--color-soft-ice);
}

.line-card::after {
    content: "";
    position: absolute;
    right: -12%;
    bottom: -22%;
    width: 58%;
    aspect-ratio: 1;
    border: 18px solid rgba(58, 93, 174, 0.35);
    border-radius: 999px;
}

.line-card > * {
    position: relative;
    z-index: 1;
}

.line-card p {
    max-width: 520px;
    color: inherit;
}

.segment-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.segment-card {
    position: relative;
    display: flex;
    min-height: 220px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    overflow: hidden;
    box-shadow: none;
    color: var(--color-white);
    isolation: isolate;
    transition: transform 500ms ease, border-color 500ms ease, box-shadow 500ms ease;
}

.segment-card:nth-child(1) {
    transition-delay: 0ms;
}

.segment-card:nth-child(2) {
    transition-delay: 150ms;
}

.segment-card:nth-child(3) {
    transition-delay: 300ms;
}

.segment-card:nth-child(4) {
    transition-delay: 450ms;
}

.segment-card:nth-child(5) {
    transition-delay: 600ms;
}

.segment-card:nth-child(6) {
    transition-delay: 750ms;
}

.segment-card:nth-child(7) {
    transition-delay: 900ms;
}

.segment-card__media,
.segment-card__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.segment-card__media {
    z-index: -2;
    background: radial-gradient(circle at 80% 14%, rgba(58, 93, 174, 0.44), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 38%),
    linear-gradient(150deg, #111827 0%, #050505 58%, #000000 100%);
    transform: scale(1.02);
    transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1), filter 700ms ease;
}

.segment-card__media::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 42px 42px;
    opacity: 0.22;
}

.segment-card__media::after {
    content: "";
    position: absolute;
    right: -18%;
    bottom: -32%;
    width: 72%;
    aspect-ratio: 1;
    border: 1px solid rgba(137, 119, 80, 0.36);
    border-radius: 999px;
}

.segment-card__overlay {
    z-index: -1;
    background: rgba(0, 0, 0, 0.1);
    transition: background-color 500ms ease;
}

.segment-card h3 {
    position: relative;
    z-index: 1;
    max-height: 100%;
    color: var(--color-white);
    font-family: var(--font-clear);
    font-size: clamp(2.15rem, 4.8vw, 4.8rem);
    font-weight: 500;
    line-height: 0.92;
    letter-spacing: -0.04em;
    text-transform: lowercase;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    transform-origin: center;
    transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.segment-card__button {
    position: relative;
    z-index: 1;
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    padding: 0.72rem 1.25rem;
    border-radius: 999px;
    background: var(--color-white);
    color: var(--color-logo-black);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
}

.segment-card:hover {
    border-color: rgba(255, 255, 255, 0.34);
    box-shadow: 0 22px 52px rgba(0, 0, 0, 0.28);
    transform: translateY(-2px);
}

.segment-card:hover .segment-card__overlay {
    background: rgba(0, 0, 0, 0.2);
}

.segment-card:hover .segment-card__media {
    filter: saturate(1.08) contrast(1.05);
    transform: scale(1.06);
}

.segment-card:hover h3 {
    transform: rotate(180deg) translateY(-8px);
}

.values-grid {
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
}

.value-card {
    display: grid;
    gap: var(--space-5);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: none;
}

.value-card strong {
    color: var(--color-white);
    font-size: clamp(2rem, 5vw, 4.6rem);
    line-height: 1;
}

@property --c5-x1 {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 10%;
}

@property --c5-y1 {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 10%;
}

@property --c5-x2 {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 90%;
}

@property --c5-y2 {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 10%;
}

@property --c5-x3 {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 10%;
}

@property --c5-y3 {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 90%;
}

@property --c5-x4 {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 90%;
}

@property --c5-y4 {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 90%;
}

@property --c5-x5 {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 50%;
}

@property --c5-y5 {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 50%;
}

@property --c5-s1 {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 55%;
}

@property --c5-s2 {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 55%;
}

@property --c5-s3 {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 55%;
}

@property --c5-s4 {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 55%;
}

@property --c5-s5 {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 65%;
}

.c5-animated-gradient {
    background-color: #3A5DAE;
    background-image: radial-gradient(circle at var(--c5-x1) var(--c5-y1), rgba(255, 255, 255, 0.9) 0, transparent var(--c5-s1)),
    radial-gradient(circle at var(--c5-x2) var(--c5-y2), rgba(58, 93, 174, 0.96) 0, transparent var(--c5-s2)),
    radial-gradient(circle at var(--c5-x3) var(--c5-y3), rgba(143, 146, 148, 0.82) 0, transparent var(--c5-s3)),
    radial-gradient(circle at var(--c5-x4) var(--c5-y4), rgba(137, 119, 80, 0.72) 0, transparent var(--c5-s4)),
    radial-gradient(circle at var(--c5-x5) var(--c5-y5), rgba(11, 20, 38, 0.9) 0, transparent var(--c5-s5));
    animation: c5-blob1 5s ease-in-out infinite,
    c5-blob2 6s ease-in-out infinite,
    c5-blob3 5.5s ease-in-out infinite,
    c5-blob4 6.5s ease-in-out infinite,
    c5-blob5 4s ease-in-out infinite,
    c5-size1 3.5s ease-in-out infinite,
    c5-size2 4.2s ease-in-out infinite,
    c5-size3 3.8s ease-in-out infinite,
    c5-size4 4.6s ease-in-out infinite,
    c5-size5 3s ease-in-out infinite;
}

@keyframes c5-blob1 {
    0%,
    100% {
        --c5-x1: 5%;
        --c5-y1: 5%;
    }

    25% {
        --c5-x1: 45%;
        --c5-y1: 20%;
    }

    50% {
        --c5-x1: 30%;
        --c5-y1: 55%;
    }

    75% {
        --c5-x1: 0%;
        --c5-y1: 30%;
    }
}

@keyframes c5-blob2 {
    0%,
    100% {
        --c5-x2: 95%;
        --c5-y2: 5%;
    }

    33% {
        --c5-x2: 55%;
        --c5-y2: 35%;
    }

    66% {
        --c5-x2: 80%;
        --c5-y2: 65%;
    }
}

@keyframes c5-blob3 {
    0%,
    100% {
        --c5-x3: 5%;
        --c5-y3: 95%;
    }

    40% {
        --c5-x3: 45%;
        --c5-y3: 65%;
    }

    70% {
        --c5-x3: 25%;
        --c5-y3: 100%;
    }
}

@keyframes c5-blob4 {
    0%,
    100% {
        --c5-x4: 95%;
        --c5-y4: 95%;
    }

    30% {
        --c5-x4: 60%;
        --c5-y4: 70%;
    }

    60% {
        --c5-x4: 100%;
        --c5-y4: 50%;
    }
}

@keyframes c5-blob5 {
    0%,
    100% {
        --c5-x5: 50%;
        --c5-y5: 50%;
    }

    25% {
        --c5-x5: 70%;
        --c5-y5: 30%;
    }

    50% {
        --c5-x5: 40%;
        --c5-y5: 70%;
    }

    75% {
        --c5-x5: 30%;
        --c5-y5: 40%;
    }
}

@keyframes c5-size1 {
    0%,
    100% {
        --c5-s1: 45%;
    }

    50% {
        --c5-s1: 80%;
    }
}

@keyframes c5-size2 {
    0%,
    100% {
        --c5-s2: 45%;
    }

    50% {
        --c5-s2: 85%;
    }
}

@keyframes c5-size3 {
    0%,
    100% {
        --c5-s3: 45%;
    }

    50% {
        --c5-s3: 78%;
    }
}

@keyframes c5-size4 {
    0%,
    100% {
        --c5-s4: 45%;
    }

    50% {
        --c5-s4: 82%;
    }
}

@keyframes c5-size5 {
    0%,
    100% {
        --c5-s5: 50%;
    }

    50% {
        --c5-s5: 85%;
    }
}

.cta-faq-section {
    padding: var(--space-20) 0;
    background: var(--color-white);
    color: var(--color-logo-black);
}

.cta-faq-container {
    width: min(100% - 40px, 1100px);
    margin: 0 auto;
}

.cta-faq-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 30px;
    align-items: start;
}

.cta-faq-card {
    display: flex;
    min-height: 480px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-20) var(--space-10);
    border-radius: 24px;
    color: var(--color-white);
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.cta-faq-card h2 {
    margin-bottom: 15px;
    color: var(--color-white);
    font-size: clamp(2.35rem, 5vw, 3.5rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.cta-faq-card p {
    max-width: 520px;
    margin-bottom: 30px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
}

.cta-faq-card__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    border-radius: 12px;
    background: var(--color-logo-black);
    color: var(--color-white);
    font-size: 0.95rem;
    font-weight: 700;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.cta-faq-card__button:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
}

.faq-accordion {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-3);
}

.faq-item {
    border: 1px solid #f0f0f0;
    border-radius: 10px;
    background: var(--color-white);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.faq-item:hover,
.faq-item.is-active {
    border-color: #eaeaea;
}

.faq-item.is-active {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.faq-item__button {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 18px 20px;
    border: 0;
    background: transparent;
    color: var(--color-logo-black);
    cursor: pointer;
    font: inherit;
    font-size: 0.9rem;
    text-align: left;
}

.faq-item__icon {
    position: relative;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
}

.faq-item__icon::before,
.faq-item__icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 1.5px;
    border-radius: 999px;
    background: currentColor;
    transition: transform 180ms ease;
}

.faq-item__icon::before {
    transform: translate(-82%, -50%) rotate(45deg);
}

.faq-item__icon::after {
    transform: translate(-18%, -50%) rotate(-45deg);
}

.faq-item.is-active .faq-item__icon::before {
    transform: translate(-82%, -50%) rotate(-45deg);
}

.faq-item.is-active .faq-item__icon::after {
    transform: translate(-18%, -50%) rotate(45deg);
}

.faq-item__answer {
    padding: 0 20px 18px;
}

.faq-item__answer p {
    margin: 0;
    color: #666666;
    font-size: 0.9rem;
    line-height: 1.6;
}

.site-footer {
    padding: var(--space-20) 0 var(--space-5);
    background: #fafafa;
}

.site-footer__container {
    width: min(100% - 40px, 1100px);
    margin: 0 auto;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 2fr;
    gap: var(--space-10);
    margin-bottom: var(--space-12);
}

.site-footer__brand p,
.site-footer__newsletter p,
.site-footer li,
.site-footer a {
    color: #888888;
    font-size: 0.85rem;
    line-height: 1.6;
}

.site-footer__brand-link {
    min-height: 0;
    align-items: flex-start;
}

.site-footer__logo {
    display: block;
    width: min(150px, 100%);
    height: auto;
    object-fit: contain;
}

.site-footer__brand p {
    max-width: 260px;
    margin-top: 15px;
}

.site-footer h3 {
    margin-bottom: var(--space-5);
    color: var(--color-logo-black);
    font-size: 0.95rem;
    font-weight: 700;
}

.site-footer ul {
    display: grid;
    gap: var(--space-3);
    padding: 0;
    margin: 0;
    list-style: none;
}

.site-footer a {
    transition: color 200ms ease;
}

.site-footer a:hover {
    color: var(--color-logo-black);
}

.site-footer__newsletter form {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.site-footer__newsletter input {
    min-width: 0;
    flex: 1;
    padding: 12px 16px;
    border: 1px solid #f0f0f0;
    border-radius: 10px;
    background: var(--color-white);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.02);
    font: inherit;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 200ms ease;
}

.site-footer__newsletter input:focus {
    border-color: #cccccc;
}

.site-footer__newsletter button {
    padding: 12px 28px;
    border: 0;
    border-radius: 10px;
    background: var(--color-logo-black);
    color: var(--color-white);
    cursor: pointer;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28);
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.site-footer__newsletter button:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.34);
}

.site-footer__bottom {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 25px 0 10px;
    border-top: 1px solid #f0f0f0;
    color: #888888;
    font-size: 0.85rem;
}

@media (max-width: 1100px) {
    .guided-grid,
    .segment-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero__inner,
    .values-grid,
    .support-grid,
    .product-detail-grid,
    .video-placeholder__track {
        grid-template-columns: 1fr;
    }

    .hero-visual {
        min-height: 380px;
    }

    .catalog-layout {
        grid-template-columns: 260px minmax(0, 1fr);
    }
}

@media (max-width: 900px) {
    .cta-faq-section {
        padding: var(--space-16) 0;
    }

    .cta-faq-grid {
        grid-template-columns: 1fr;
        gap: var(--space-16);
    }

    .cta-faq-card {
        min-height: 420px;
    }

    .site-footer {
        padding-top: var(--space-16);
    }

    .site-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    :root {
        --header-height: 68px;
    }

    .container,
    .container-wide {
        width: min(100% - 24px, var(--container));
    }

    .section {
        padding: var(--space-12) 0;
    }

    .nav-toggle {
        display: grid;
    }

    .site-nav {
        position: absolute;
        left: 12px;
        right: 12px;
        top: calc(100% + 8px);
        display: grid;
        gap: var(--space-1);
        padding: var(--space-3);
        border: 1px solid rgba(217, 224, 234, 0.96);
        border-radius: var(--radius-md);
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 22px 54px rgba(11, 20, 38, 0.16);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-10px) scale(0.985);
        transform-origin: top right;
        transition: opacity 220ms ease, transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 260ms;
    }

    .site-nav.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) scale(1);
        transition: opacity 220ms ease, transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0s;
    }

    .site-nav a {
        display: flex;
        min-height: 44px;
        align-items: center;
        padding: 0.75rem 0.85rem;
        border-radius: var(--radius-sm);
        opacity: 0;
        transform: translateY(-6px);
        transition: opacity 180ms ease, transform 220ms ease, background var(--transition-fast), color var(--transition-fast);
    }

    .site-nav a::after {
        display: none;
    }

    .site-nav a:hover,
    .site-nav a:focus-visible {
        background: var(--color-soft-ice);
        color: var(--color-nitta-blue);
    }

    .site-nav.is-open a {
        opacity: 1;
        transform: translateY(0);
    }

    .site-nav.is-open a:nth-child(1) {
        transition-delay: 40ms;
    }

    .site-nav.is-open a:nth-child(2) {
        transition-delay: 75ms;
    }

    .site-nav.is-open a:nth-child(3) {
        transition-delay: 110ms;
    }

    .site-nav.is-open a:nth-child(4) {
        transition-delay: 145ms;
    }

    .site-nav.is-open a:nth-child(5) {
        transition-delay: 180ms;
    }

    .site-header .btn {
        display: none;
    }

    .hero {
        min-height: auto;
    }

    .hero__inner {
        min-height: auto;
    }

    .product-lines,
    .catalog-layout,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .filter-toggle {
        display: inline-flex;
    }

    .filter-panel {
        position: static;
        display: none;
        margin-bottom: var(--space-5);
    }

    .filter-panel.is-open {
        display: block;
    }

    .site-footer__bottom {
        display: grid;
    }
}

@media (max-width: 480px) {
    .site-footer__grid {
        grid-template-columns: 1fr;
    }

    .site-footer__bottom {
        justify-items: center;
        text-align: center;
    }

    .site-footer__newsletter form {
        flex-direction: column;
    }
}

@media (max-width: 560px) {
    h1,
    .display-heading {
        font-size: 2.65rem;
    }

    h2 {
        font-size: 2rem;
    }

    .guided-grid,
    .segment-grid {
        grid-template-columns: 1fr;
    }

    .hero__actions,
    .cta-row,
    .product-card__actions {
        display: grid;
    }

    .btn {
        width: 100%;
    }

    .hero-visual {
        min-height: 300px;
    }

    .line-card {
        min-height: 310px;
        padding: var(--space-6);
    }
}

/* Home scroll-driven narrative. Designed as a future WordPress front-page pattern. */
.home-scroll-story {
    position: relative;
    overflow: hidden;
    color: var(--color-white);
    background: var(--color-deep-navy);
    isolation: isolate;
}

.home-scroll-story__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--color-deep-navy);
}

.home-scroll-story__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
}

.home-scroll-story__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(11, 20, 38, 0.86), rgba(11, 20, 38, 0.5) 46%, rgba(11, 20, 38, 0.28)),
    linear-gradient(0deg, rgba(11, 20, 38, 0.42), rgba(11, 20, 38, 0.16));
}

.home-scroll-story__stage {
    position: relative;
    z-index: 2;
    display: grid;
    min-height: 100vh;
    align-items: center;
    padding: var(--space-20) 0;
}

.home-scroll-story__content {
    position: relative;
    z-index: 2;
}

.home-scroll-story__copy {
    max-width: 660px;
    color: rgba(255, 255, 255, 0.82);
    font-size: clamp(1.12rem, 2vw, 1.42rem);
}

.home-scroll-story .section-header {
    max-width: 780px;
    margin-bottom: var(--space-8);
}

.home-scroll-story .lead,
.home-scroll-story .section-header p {
    color: rgba(255, 255, 255, 0.78);
}

.home-scroll-story .guided-card {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(255, 255, 255, 0.38);
    color: var(--color-deep-navy);
    backdrop-filter: blur(16px);
}

.home-scroll-story .guided-card p {
    color: var(--color-industrial-gray);
}

.home-scroll-story__guided-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home-scroll-story__product-lines .line-card {
    min-height: 330px;
}

.home-scroll-story__segment-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--space-3);
}

.home-scroll-story__stage--segments .home-scroll-story__content {
    width: min(100% - 32px, 1280px);
}

.home-scroll-story__stage--segments .section-header {
    max-width: 760px;
    margin-bottom: var(--space-5);
}

.home-scroll-story__stage--segments .cta-row {
    margin-top: var(--space-5);
}

.home-scroll-story__stage--segments .segment-card {
    min-height: clamp(330px, 43vh, 470px);
    padding: clamp(1rem, 1.35vw, 1.45rem);
    border-color: rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    background: #050505;
}

.home-scroll-story__stage--segments .segment-card h3 {
    font-size: clamp(1.65rem, 2.5vw, 3.35rem);
}

.home-scroll-story__stage--segments .segment-card:nth-child(3) h3,
.home-scroll-story__stage--segments .segment-card:nth-child(4) h3,
.home-scroll-story__stage--segments .segment-card:nth-child(5) h3,
.home-scroll-story__stage--segments .segment-card:nth-child(6) h3 {
    font-size: clamp(1.05rem, 1.45vw, 1.95rem);
    line-height: 0.98;
}

.home-scroll-story__stage--segments .segment-card__button {
    width: 100%;
    padding-inline: clamp(0.82rem, 1.1vw, 1.1rem);
    font-size: clamp(0.68rem, 0.72vw, 0.78rem);
}

.home-scroll-story__stage--segments .segment-card:nth-child(2n) .segment-card__media {
    background: radial-gradient(circle at 22% 18%, rgba(58, 93, 174, 0.5), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 40%),
    linear-gradient(145deg, #0B1426 0%, #050505 62%, #000000 100%);
}

.home-scroll-story__stage--segments .segment-card:nth-child(3n) .segment-card__media {
    background: radial-gradient(circle at 78% 78%, rgba(137, 119, 80, 0.34), transparent 34%),
    radial-gradient(circle at 16% 18%, rgba(58, 93, 174, 0.38), transparent 34%),
    linear-gradient(145deg, #101418 0%, #050505 64%, #000000 100%);
}

.home-scroll-story__progress {
    position: absolute;
    right: clamp(16px, 3vw, 42px);
    top: 50%;
    z-index: 5;
    display: grid;
    gap: 10px;
    transform: translateY(-50%);
}

.home-scroll-story__progress span {
    width: 8px;
    height: 8px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 999px;
    background: transparent;
    transition: background var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
}

.home-scroll-story__progress span.is-active {
    background: var(--color-white);
    border-color: var(--color-white);
    transform: scale(1.35);
}

@media (min-width: 821px) {
    .home-scroll-story.is-ready {
        height: 100vh;
    }

    .home-scroll-story.is-ready .home-scroll-story__stage {
        position: absolute;
        inset: 0;
        min-height: 100vh;
        padding: var(--space-16) 0;
        opacity: 0;
        pointer-events: none;
    }

    .home-scroll-story.is-ready .home-scroll-story__stage.is-active {
        pointer-events: auto;
    }

    .home-scroll-story.is-ready .home-scroll-story__stage--hero {
        opacity: 1;
    }
}

@media (max-width: 1100px) {
    .home-scroll-story__guided-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .home-scroll-story__media {
        position: fixed;
        opacity: 0.78;
    }

    .home-scroll-story__stage {
        min-height: auto;
        padding: var(--space-12) 0;
    }

    .home-scroll-story__stage:first-of-type {
        padding-top: var(--space-16);
    }

    .home-scroll-story__progress {
        display: none;
    }

    .home-scroll-story .guided-card,
    .home-scroll-story .line-card,
    .home-scroll-story .segment-card {
        backdrop-filter: none;
    }

    .home-scroll-story__segment-grid {
        grid-template-columns: 1fr;
    }

    .home-scroll-story__stage--segments .segment-card {
        min-height: 320px;
        padding: var(--space-6);
    }

    .home-scroll-story__stage--segments .segment-card h3 {
        font-size: clamp(3.1rem, 16vw, 4.75rem);
    }

    .home-scroll-story__stage--segments .segment-card:nth-child(3) h3,
    .home-scroll-story__stage--segments .segment-card:nth-child(4) h3,
    .home-scroll-story__stage--segments .segment-card:nth-child(5) h3,
    .home-scroll-story__stage--segments .segment-card:nth-child(6) h3 {
        font-size: clamp(2.1rem, 9vw, 3.2rem);
    }
}

@media (max-width: 560px) {
    .home-scroll-story__guided-grid,
    .home-scroll-story__segment-grid {
        grid-template-columns: 1fr;
    }
}

/* Mobile hero Background Beams */
.mobile-background-beams {
    display: none;
}

@keyframes mobile-background-beam-draw {
    0% {
        opacity: 0;
        stroke-dashoffset: 1;
    }

    18%,
    72% {
        opacity: 0.62;
    }

    100% {
        opacity: 0;
        stroke-dashoffset: 0;
    }
}

@media (max-width: 820px) {
    .home-scroll-story__stage--hero,
    .home-scroll-story__stage--guided {
        overflow: hidden;
        background: #050505;
    }

    .mobile-background-beams {
        pointer-events: none;
        position: absolute;
        inset: 0;
        z-index: 0;
        display: block;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: radial-gradient(circle at 18% 18%, rgba(24, 204, 252, 0.16), transparent 34%),
        radial-gradient(circle at 82% 72%, rgba(174, 72, 255, 0.16), transparent 38%),
        #050505;
    }

    .mobile-background-beams::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(5, 5, 5, 0.72), rgba(5, 5, 5, 0.42) 58%, rgba(5, 5, 5, 0.24)),
        linear-gradient(0deg, rgba(5, 5, 5, 0.48), rgba(5, 5, 5, 0.08));
    }

    .home-scroll-story__stage--guided::before {
        content: "";
        pointer-events: none;
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(90deg, rgba(5, 5, 5, 0.42), rgba(5, 5, 5, 0.32) 58%, rgba(5, 5, 5, 0.18)),
        linear-gradient(0deg, rgba(5, 5, 5, 0.34), rgba(5, 5, 5, 0.08));
    }

    .home-scroll-story__stage--guided .home-scroll-story__content {
        position: relative;
        z-index: 2;
    }

    .mobile-background-beams__svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .mobile-background-beams__static path {
        stroke: rgba(255, 255, 255, 0.12);
        stroke-width: 0.5;
    }

    .mobile-background-beams__animated path {
        stroke: url(#hero-mobile-beam-gradient);
        stroke-width: 1;
        stroke-linecap: round;
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
        opacity: 0;
        animation: mobile-background-beam-draw var(--beam-duration, 5.6s) ease-in-out var(--beam-delay, 0s) infinite;
    }

    .mobile-background-beams--guided .mobile-background-beams__animated path {
        stroke: url(#guided-mobile-beam-gradient);
    }
}

@media (max-width: 560px) {
    .mobile-background-beams__animated path {
        stroke-width: 1.15;
    }
}

@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
    .mobile-background-beams__animated path {
        animation: none;
        opacity: 0.42;
        stroke-dashoffset: 0;
    }
}

/* Hero headline viewport stretch */
.home-scroll-story__stage--hero .home-scroll-story__content {
    width: min(100% - 48px, 1480px);
}

.home-scroll-story__stage--hero #home-scroll-title {
    max-width: min(21.6ch, 100%);
    margin-bottom: clamp(1.25rem, 2.4vw, 2rem);
    font-size: clamp(4.35rem, 8.35vw, 8.85rem);
    font-weight: 300;
    line-height: 0.88;
    letter-spacing: -0.045em;
}

@media (max-width: 1280px) {
    .home-scroll-story__stage--hero .home-scroll-story__content {
        width: min(100% - 40px, 1180px);
    }

    .home-scroll-story__stage--hero #home-scroll-title {
        max-width: min(17.8ch, 100%);
        font-size: clamp(4rem, 8vw, 7.1rem);
        line-height: 0.86;
    }
}

@media (max-width: 820px) {
    .home-scroll-story__stage--hero {
        min-height: 112svh;
        padding: calc(var(--header-height) + var(--space-8)) 0 var(--space-10);
    }

    .home-scroll-story__stage--hero .home-scroll-story__content {
        display: flex;
        width: min(100% - 24px, 760px);
        min-height: calc(112svh - var(--header-height) - var(--space-16));
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .home-scroll-story__stage--hero #home-scroll-title {
        max-width: 100%;
        margin-right: auto;
        margin-bottom: var(--space-5);
        margin-left: auto;
        font-size: min(5.85rem, 10.8svh);
        line-height: 0.86;
        letter-spacing: -0.032em;
        text-wrap: balance;
    }

    .home-scroll-story__stage--hero .home-scroll-story__copy {
        margin-right: auto;
        margin-left: auto;
        text-align: left;
    }
}

@media (max-width: 560px) {
    .home-scroll-story__stage--hero {
        min-height: 100svh;
    }

    .home-scroll-story__stage--hero .home-scroll-story__content {
        width: 100%;
        min-height: calc(100svh - var(--header-height));
        padding-right: 12px;
        padding-left: 12px;
    }

    .home-scroll-story__stage--hero #home-scroll-title {
        display: flex;
        width: 100%;
        max-width: calc(100vw - 24px);
        min-height: calc(100svh - var(--header-height) - var(--space-10));
        align-items: center;
        justify-content: center;
        line-height: 0.9;
        text-align: center;
        font-size: clamp(3.25rem, 14.5vw, 4.65rem);
    }
}

/* Guided operation cards Border Beam */
@property --border-beam-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@keyframes border-beam-orbit {
    to {
        --border-beam-angle: 360deg;
    }
}

.home-scroll-story__stage--guided .guided-card {
    --card-rotate-x: 0deg;
    --card-rotate-y: 0deg;
    --card-translate-z: 0px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transform: perspective(900px) rotateX(var(--card-rotate-x)) rotateY(var(--card-rotate-y)) translateZ(var(--card-translate-z));
    transform-style: preserve-3d;
    transition: transform 180ms ease, box-shadow 180ms ease;
    will-change: transform;
}

.home-scroll-story__stage--guided .guided-card > :not(.border-beam) {
    position: relative;
    z-index: 1;
}

.home-scroll-story__stage--guided .guided-card:hover {
    border-color: rgba(255, 255, 255, 0.38);
    box-shadow: 0 20px 44px rgba(11, 20, 38, 0.16);
}

.home-scroll-story__stage--guided .border-beam {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
}

.home-scroll-story__stage--guided .border-beam::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2.5px;
    background: conic-gradient(from var(--border-beam-angle), transparent 0deg, transparent 236deg, rgba(0, 59, 143, 0.08) 270deg, #0057FF 300deg, #38BDF8 326deg, rgba(0, 87, 255, 0.14) 344deg, transparent 360deg);
    filter: drop-shadow(0 0 3px rgba(0, 87, 255, 0.18));
    opacity: 0.78;
    animation: border-beam-orbit 8s linear infinite;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}

.home-scroll-story__stage--guided .border-beam--delay-0::before {
    animation-delay: 0s;
}

.home-scroll-story__stage--guided .border-beam--delay-1::before {
    animation-delay: 0s;
}

.home-scroll-story__stage--guided .border-beam--delay-2::before {
    animation-delay: 0s;
}

.home-scroll-story__stage--guided .border-beam--delay-3::before {
    animation-delay: 0s;
}

.home-scroll-story__stage--guided .guided-card {
    background-color: rgba(255, 255, 255, 0.9);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.84) 48%, rgba(255, 255, 255, 0.42) 100%), var(--guided-card-image);
    background-position: center;
    background-size: cover;
}

.home-scroll-story__stage--guided .guided-card:nth-child(1) {
    --guided-card-image: url("../img/Imagem%201.png");
}

.home-scroll-story__stage--guided .guided-card:nth-child(2) {
    --guided-card-image: url("../img/Imagem%202.png");
}

.home-scroll-story__stage--guided .guided-card:nth-child(3) {
    --guided-card-image: url("../img/Imagem%203.png");
}

.home-scroll-story__stage--guided .guided-card:nth-child(4) {
    --guided-card-image: url("../img/Imagem%204.png");
}

.home-scroll-story__stage--guided .guided-card .border-beam {
    z-index: 2;
}

.home-scroll-story__stage--guided .guided-card > :not(.border-beam) {
    z-index: 3;
}

.home-scroll-story__stage--guided .guided-card.is-tilting {
    --card-translate-z: 10px;
    transition-duration: 80ms;
}

.home-scroll-story__stage--guided .guided-card h3 {
    transform: translateZ(34px);
}

.home-scroll-story__stage--guided .guided-card .border-beam {
    transform: translateZ(18px);
}

@media (max-width: 820px) {
    .home-scroll-story__stage--guided .border-beam::before {
        padding: 1.75px;
        opacity: 0.54;
        filter: drop-shadow(0 0 2px rgba(0, 87, 255, 0.14));
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-scroll-story__stage--guided .border-beam::before {
        animation: none !important;
        opacity: 0.42;
    }
}

/* WP/Pinegrow: global page transition overlay. Keep framework-free for theme enqueue. */
.page-transition {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: var(--space-8);
    background: var(--color-white);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 1000ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 1000ms;
}

.page-transition.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 420ms ease, visibility 0s linear 0s;
}

.page-transition.is-fading {
    opacity: 0;
    visibility: visible;
    pointer-events: none;
    transition: opacity 1000ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 1000ms;
}

.page-transition__inner {
    display: grid;
    justify-items: center;
    gap: var(--space-5);
    opacity: 0;
    transform: scale(0.985);
    transition: transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 420ms ease;
}

.page-transition.is-active .page-transition__inner {
    opacity: 1;
    transform: scale(1);
}

.page-transition.is-fading .page-transition__inner {
    opacity: 0;
    transform: scale(1.006);
    transition: transform 1000ms cubic-bezier(0.4, 0, 0.2, 1), opacity 1000ms cubic-bezier(0.4, 0, 0.2, 1);
}

.page-transition.is-active .page-transition__logo {
    animation: page-transition-pulse 2400ms ease-in-out 260ms infinite;
}

.page-transition__logo {
    width: clamp(112px, 16vw, 172px);
    max-height: min(48vh, 320px);
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 18px 30px rgba(11, 20, 38, 0.1));
}

.page-transition__line {
    position: relative;
    width: min(150px, 40vw);
    height: 1px;
    overflow: hidden;
    background: rgba(143, 146, 148, 0.28);
}

.page-transition__line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, var(--color-nitta-silver), var(--color-nitta-blue), transparent);
    transform: translateX(-100%);
}

.page-transition.is-active .page-transition__line::after {
    animation: page-transition-line 2800ms ease-in-out both;
}

@keyframes page-transition-pulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.035);
        opacity: 0.94;
    }
}

@keyframes page-transition-line {
    0% {
        transform: translateX(-100%);
    }

    55%,
    100% {
        transform: translateX(100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .c5-animated-gradient {
        animation: none;
    }

    .page-transition,
    .page-transition__inner {
        transition-duration: 160ms !important;
    }

    .page-transition__inner,
    .page-transition.is-active .page-transition__inner,
    .page-transition.is-fading .page-transition__inner {
        transform: none;
    }

    .page-transition.is-active .page-transition__logo,
    .page-transition.is-active .page-transition__line::after {
        animation: none;
    }

    .page-transition__line::after {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* WP Pattern: Institutional Benefits. Isolated dark premium treatment for the Inovação aplicada section. */
.benefits-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: var(--space-12) var(--space-4);
    background: #050505;
    color: var(--color-white);
    isolation: isolate;
}

.benefits-section__dot-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.benefits-section__dot-vignette {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 0%, transparent 40%, rgba(10, 10, 10, 0.6) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.42));
}

.benefits-section__inner {
    position: relative;
    z-index: 2;
    width: min(100%, 1400px);
    margin: 0 auto;
}

.benefits-section__eyebrow {
    color: rgba(255, 255, 255, 0.62);
    text-align: center;
}

.benefits-section__heading {
    max-width: 980px;
    margin: 0 auto var(--space-12);
    color: var(--color-white);
    font-size: clamp(2rem, 4vw, 4.8rem);
    font-weight: 300;
    line-height: 0.98;
    letter-spacing: -0.04em;
    text-align: center;
}

.benefits-section__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

.benefits-card {
    position: relative;
    min-height: 380px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    background: #050505;
}

.benefits-card--text {
    padding: var(--space-6);
}

.benefits-card__blob {
    position: absolute;
    display: block;
    border-radius: 999px;
    background: #1e3a8a;
    opacity: 0.4;
    filter: blur(64px);
    pointer-events: none;
}

.benefits-card__blob--left {
    top: 50%;
    left: -420px;
    width: 460px;
    height: 460px;
    transform: translateY(-50%);
}

.benefits-card__blob--right {
    top: -112px;
    right: -112px;
    width: 224px;
    height: 224px;
}

.benefits-card__content {
    position: relative;
    z-index: 1;
    display: flex;
    height: 100%;
    flex-direction: column;
}

.benefits-card h3 {
    color: var(--color-white);
    font-family: var(--font-clear);
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    font-weight: 300;
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.benefits-card p {
    max-width: 320px;
    color: rgba(255, 255, 255, 0.7);
    font-size: clamp(0.82rem, 1vw, 0.9rem);
    font-weight: 300;
    line-height: 1.7;
}

.benefits-card--left p {
    max-width: 280px;
    margin-top: var(--space-12);
}

.benefits-card--right p {
    margin-top: auto;
}

.benefits-card--video {
    display: flex;
    flex-direction: column;
    background: #050505;
}

.benefits-card__video {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 380px;
    overflow: hidden;
}

.benefits-card__video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.benefits-card__video-fade {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 8rem;
    background: linear-gradient(to bottom, transparent, #050505);
    pointer-events: none;
}

@media (min-width: 640px) {
    .benefits-section {
        padding: var(--space-20) var(--space-6);
    }

    .benefits-section__heading {
        margin-bottom: var(--space-20);
    }

    .benefits-card {
        min-height: 460px;
    }

    .benefits-card--text {
        padding: var(--space-8);
    }

    .benefits-card__video {
        min-height: 460px;
    }

    .benefits-card--left p {
        margin-top: var(--space-20);
    }
}

@media (min-width: 768px) {
    .benefits-section {
        padding-inline: var(--space-10);
    }

    .benefits-section__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-4);
    }
}

@media (max-width: 520px) {
    .benefits-section__heading {
        text-align: center;
    }

    .benefits-section__eyebrow {
        text-align: left;
    }
}

/* Product archive pages refresh: Correias and Mangueiras. */
.catalog-page {
    background: #F8FAFC;
    color: var(--color-ink);
}

.catalog-page .page-hero {
    position: relative;
    min-height: min(82vh, 760px);
    overflow: hidden;
    display: grid;
    align-items: center;
    padding: calc(var(--header-height) + var(--space-16)) 0 var(--space-12);
    color: var(--color-white);
    background: radial-gradient(circle at 78% 22%, rgba(58, 93, 174, 0.46), transparent 32%),
    radial-gradient(circle at 16% 18%, rgba(24, 204, 252, 0.16), transparent 26%),
    linear-gradient(135deg, #050708 0%, #0B1426 48%, #13295A 100%);
    isolation: isolate;
}

.catalog-page .page-hero::before,
.catalog-page .page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.catalog-page .page-hero::before {
    opacity: 0.22;
    background-image: linear-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(to bottom right, #000, transparent 86%);
}

.catalog-page .page-hero::after {
    background: linear-gradient(90deg, rgba(5, 7, 8, 0.72), rgba(5, 7, 8, 0.4) 58%, rgba(5, 7, 8, 0.18)),
    linear-gradient(0deg, rgba(5, 7, 8, 0.45), transparent 44%);
}

.catalog-page .page-hero .container {
    position: relative;
    z-index: 1;
    width: min(100% - 48px, 1320px);
}

.catalog-page .breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: var(--space-8);
    color: rgba(255, 255, 255, 0.62);
    font-family: var(--font-clear);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
}

.catalog-page .breadcrumb a {
    color: rgba(255, 255, 255, 0.76);
}

.catalog-page .page-hero .eyebrow {
    color: rgba(255, 255, 255, 0.7);
}

.catalog-page .page-hero h1 {
    max-width: 100%;
    margin-bottom: var(--space-7);
    color: var(--color-white);
    font-size: 8.4rem;
    font-weight: 300;
    line-height: 0.86;
    letter-spacing: -0.045em;
    text-wrap: balance;
}

.catalog-page .page-hero .lead {
    max-width: 760px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.2rem;
}

.catalog-page > .section:not(.lead-capture-section) {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #F8FAFC 0%, #EEF4F8 100%);
}

.catalog-page > .section:not(.lead-capture-section)::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(58, 93, 174, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(58, 93, 174, 0.06) 1px, transparent 1px);
    background-size: 44px 44px;
    opacity: 0.44;
    mask-image: linear-gradient(to bottom, #000, transparent 92%);
}

.catalog-page .catalog-layout {
    position: relative;
    z-index: 1;
}

.catalog-page .filter-panel,
.catalog-page .catalog-toolbar,
.catalog-page .product-card,
.catalog-page .empty-state {
    border-color: rgba(148, 163, 184, 0.32);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.catalog-page .filter-panel {
    gap: var(--space-6);
    padding: var(--space-6);
    border-radius: 14px;
}

.catalog-page .filter-group + .filter-group {
    padding-top: var(--space-5);
    border-top: 1px solid rgba(148, 163, 184, 0.24);
}

.catalog-page .filter-group h2,
.catalog-page .filter-group h3,
.catalog-page .search-field label {
    color: #0F172A;
    letter-spacing: 0.08em;
}

.catalog-page .filter-chip,
.catalog-page .tag-list span {
    border-color: rgba(58, 93, 174, 0.18);
    background: rgba(248, 250, 252, 0.78);
}

.catalog-page .filter-chip.is-active,
.catalog-page .filter-chip[aria-pressed="true"] {
    background: #0F172A;
    color: var(--color-white);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
}

.catalog-page .catalog-toolbar {
    padding: var(--space-4);
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 14px;
}

.catalog-page .search-field input {
    border-color: rgba(148, 163, 184, 0.38);
    background: rgba(255, 255, 255, 0.96);
}

.catalog-page .result-count {
    color: #334155;
}

.catalog-page .product-card {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.88));
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.08);
}

.catalog-page .product-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, #0057FF, #38BDF8, transparent);
    opacity: 0.72;
}

.catalog-page .product-card h2,
.catalog-page .product-card h3 {
    color: #0F172A;
    letter-spacing: -0.018em;
}

.catalog-page .product-card p,
.catalog-page .solution-card__section ul {
    color: #475569;
}

.catalog-page .badge {
    border-color: rgba(0, 87, 255, 0.18);
    background: rgba(0, 87, 255, 0.08);
    color: #0057FF;
}

.catalog-page .badge--muted {
    border-color: rgba(15, 23, 42, 0.14);
    background: rgba(15, 23, 42, 0.06);
    color: #334155;
}

.catalog-page .lead-capture-section {
    background: radial-gradient(circle at 84% 18%, rgba(56, 189, 248, 0.18), transparent 30%),
    linear-gradient(135deg, #050708, #0B1426 52%, #13295A);
}

@media (max-width: 1100px) {
    .catalog-page .page-hero h1 {
        font-size: 6.4rem;
    }
}

@media (max-width: 820px) {
    .catalog-page .page-hero {
        min-height: 86svh;
        padding: calc(var(--header-height) + var(--space-10)) 0 var(--space-10);
    }

    .catalog-page .page-hero .container {
        width: min(100% - 28px, 620px);
    }

    .catalog-page .page-hero h1 {
        max-width: 100%;
        font-size: 4.55rem;
        line-height: 0.9;
    }

    .catalog-page .filter-toggle {
        width: 100%;
        justify-content: center;
    }

    .catalog-page .filter-panel,
    .catalog-page .catalog-toolbar,
    .catalog-page .product-card {
        border-radius: 12px;
        box-shadow: 0 16px 38px rgba(15, 23, 42, 0.08);
        backdrop-filter: none;
    }
}

@media (max-width: 560px) {
    .catalog-page .page-hero h1 {
        max-width: 100%;
        font-size: 3.55rem;
    }

    .catalog-page .breadcrumb {
        flex-wrap: wrap;
        margin-bottom: var(--space-7);
    }

    .catalog-page .catalog-toolbar {
        padding: var(--space-3);
    }
}

/* Home product finder and reusable catalog controls. */
.product-finder-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, var(--color-soft-ice) 100%);
}

.product-finder-section::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 220px;
    background: linear-gradient(135deg, rgba(58, 93, 174, 0.12), transparent 58%);
    pointer-events: none;
}

.product-finder-section > .container {
    position: relative;
    z-index: 1;
}

.product-tabs {
    display: grid;
    gap: var(--space-8);
}

.product-tabs__list {
    display: flex;
    width: fit-content;
    max-width: 100%;
    gap: var(--space-2);
    padding: var(--space-2);
    margin: 0 auto;
    border: 1px solid rgba(58, 93, 174, 0.18);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: var(--shadow-sm);
}

.product-tabs__button {
    min-width: 132px;
    min-height: 44px;
    padding: 0.72rem 1.15rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-industrial-gray);
    font-family: var(--font-clear);
    font-weight: 700;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.product-tabs__button.is-active {
    border-color: var(--color-nitta-blue);
    background: var(--color-nitta-blue);
    color: var(--color-white);
    box-shadow: 0 10px 22px rgba(58, 93, 174, 0.22);
}

.product-tabs__panel[hidden] {
    display: none;
}

.catalog-layout {
    display: grid;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
}

.product-finder {
    padding: var(--space-6);
    border: 1px solid rgba(217, 224, 234, 0.92);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.86);
    box-shadow: var(--shadow-md);
}

.filter-toggle {
    display: none;
    margin-bottom: var(--space-4);
}

.filter-panel {
    position: sticky;
    top: calc(var(--header-height) + var(--space-4));
    display: grid;
    gap: var(--space-5);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
}

.filter-group {
    display: grid;
    gap: var(--space-3);
}

.filter-group h2,
.filter-group h3 {
    margin: 0;
    color: var(--color-deep-navy);
    font-size: 0.86rem;
    font-weight: 700;
    text-transform: uppercase;
}

.filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.filter-chip {
    min-height: 34px;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-white);
    color: var(--color-industrial-gray);
    font-size: 0.86rem;
    font-weight: 700;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.filter-chip:hover,
.filter-chip:focus-visible {
    border-color: rgba(58, 93, 174, 0.48);
    color: var(--color-nitta-blue);
}

.filter-chip.is-active,
.filter-chip[aria-pressed="true"] {
    border-color: rgba(58, 93, 174, 0.22);
    background: rgba(58, 93, 174, 0.1);
    color: var(--color-nitta-blue);
}

.catalog-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-4);
    align-items: center;
    margin-bottom: var(--space-5);
}

.search-field,
.form-field {
    display: grid;
    gap: var(--space-2);
}

.search-field label,
.form-field label {
    color: var(--color-deep-navy);
    font-size: 0.86rem;
    font-weight: 700;
}

.search-field input,
.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    min-height: 46px;
    padding: 0.78rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    color: var(--color-ink);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.search-field input:focus,
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: rgba(58, 93, 174, 0.72);
    box-shadow: 0 0 0 4px rgba(58, 93, 174, 0.12);
    outline: 0;
}

.form-field textarea {
    resize: vertical;
}

.result-count {
    margin: 0 0 0.8rem;
    color: var(--color-muted);
    font-family: var(--font-clear);
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
}

.product-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
}

.product-card {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
    transition: transform var(--transition-med), border-color var(--transition-med), box-shadow var(--transition-med);
}

.product-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 28px;
    padding: 0.34rem 0.56rem;
    border: 1px solid rgba(58, 93, 174, 0.2);
    border-radius: 999px;
    background: rgba(58, 93, 174, 0.1);
    color: var(--color-nitta-blue);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
}

.badge--muted {
    border-color: rgba(137, 119, 80, 0.22);
    background: rgba(137, 119, 80, 0.1);
    color: var(--color-nitta-gold);
}

.product-card h2,
.product-card h3 {
    margin: 0;
    color: var(--color-deep-navy);
    font-size: clamp(1.18rem, 2vw, 1.45rem);
    font-weight: 700;
    line-height: 1.15;
}

.product-card p {
    margin: 0;
    color: var(--color-muted);
}

.solution-card__section {
    display: grid;
    gap: var(--space-2);
}

.solution-card__section h4 {
    margin: 0;
    color: var(--color-deep-navy);
    font-family: var(--font-clear);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
}

.solution-card__section ul {
    display: grid;
    gap: var(--space-2);
    padding-left: 1rem;
    margin: 0;
    color: var(--color-industrial-gray);
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.tag-list span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0.32rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-soft-ice);
    color: var(--color-industrial-gray);
    font-size: 0.8rem;
    font-weight: 700;
}

.product-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: auto;
}

.empty-state {
    display: grid;
    justify-items: start;
    gap: var(--space-3);
    padding: var(--space-8);
    border: 1px dashed rgba(58, 93, 174, 0.34);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.72);
}

.empty-state[hidden] {
    display: none;
}

.empty-state h2,
.empty-state h3,
.empty-state p {
    margin: 0;
}

.lead-capture-section {
    background: linear-gradient(135deg, rgba(58, 93, 174, 0.24), transparent 42%),
    radial-gradient(circle at 85% 18%, rgba(58, 93, 174, 0.28), transparent 28%),
    var(--color-deep-navy);
    color: var(--color-white);
}

.lead-capture-panel {
    display: grid;
    grid-template-columns: minmax(0, 0.74fr) minmax(0, 1fr);
    gap: var(--space-10);
    padding: var(--space-10);
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.24);
}

.lead-capture-panel__intro {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-8);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(58, 93, 174, 0.24), transparent 44%),
    var(--color-deep-navy);
    color: var(--color-white);
}

.lead-capture-panel__intro h2 {
    color: var(--color-white);
    font-size: clamp(2.1rem, 4vw, 3.5rem);
}

.lead-capture-panel__intro p:not(.eyebrow) {
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.06rem;
}

.lead-form {
    display: grid;
    gap: var(--space-5);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.form-field--full {
    grid-column: 1 / -1;
}

.checkbox-field {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    color: var(--color-industrial-gray);
    font-size: 0.9rem;
}

.field-error {
    margin: 0;
    color: var(--color-error);
    font-size: 0.86rem;
}

.form-status {
    min-height: 1.4em;
    margin: 0;
    font-family: var(--font-clear);
    font-weight: 700;
}

.form-status.is-success {
    color: var(--color-success);
}

.form-status.is-error {
    color: var(--color-error);
}

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

    .lead-capture-panel {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .product-finder {
        padding: var(--space-4);
    }

    .catalog-toolbar,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .result-count {
        margin: 0;
    }

    .filter-panel {
        box-shadow: none;
    }

    .lead-capture-panel {
        padding: var(--space-4);
    }

    .lead-capture-panel__intro {
        padding: var(--space-6);
    }
}

@media (max-width: 560px) {
    .product-tabs__list {
        width: 100%;
    }

    .product-tabs__button {
        min-width: 0;
        flex: 1;
    }

    .product-card {
        padding: var(--space-5);
    }
}

@media (max-width: 820px) {
    .catalog-layout {
        grid-template-columns: 1fr;
    }

    .filter-toggle {
        display: inline-flex;
    }

    .filter-panel {
        position: static;
        display: none;
        margin-bottom: var(--space-5);
    }

    .filter-panel.is-open {
        display: grid;
    }
}



/* Catalog hero video backgrounds. */
.catalog-page--belts .page-hero,
.catalog-page--hoses .page-hero {
    isolation: isolate;
    background: #050708;
}

.catalog-page .page-hero__video {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.catalog-page--belts .page-hero::before,
.catalog-page--belts .page-hero::after,
.catalog-page--hoses .page-hero::before,
.catalog-page--hoses .page-hero::after {
    z-index: 1;
}

.catalog-page--belts .page-hero::before,
.catalog-page--hoses .page-hero::before {
    opacity: 0.18;
    mix-blend-mode: screen;
}

.catalog-page--belts .page-hero::after,
.catalog-page--hoses .page-hero::after {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.82) 30%, rgba(0, 0, 0, 0.48) 52%, rgba(0, 0, 0, 0.16) 72%, rgba(0, 0, 0, 0.04) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.12) 46%, rgba(0, 0, 0, 0.24));
}

.catalog-page--belts .page-hero .container,
.catalog-page--hoses .page-hero .container {
    z-index: 2;
}

@media (max-width: 820px) {
    .catalog-page--belts .page-hero::after,
    .catalog-page--hoses .page-hero::after {
        background: linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.76) 45%, rgba(0, 0, 0, 0.34) 78%, rgba(0, 0, 0, 0.12) 100%),
        linear-gradient(0deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.14) 46%, rgba(0, 0, 0, 0.28));
    }
}

/* Product detail page: align single technical specs with catalog visual system. */
.product-detail-page {
    background: #F8FAFC;
    color: var(--color-ink);
}

.product-detail-page .page-hero {
    min-height: min(72vh, 680px);
}

.product-detail-page .page-hero h1 {
    max-width: 980px;
    font-size: clamp(4rem, 8vw, 7.6rem);
}

.product-detail-page .page-hero .lead {
    max-width: 820px;
}

.product-detail-page > .section:not(.lead-capture-section) {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #F8FAFC 0%, #EEF4F8 100%);
}

.product-detail-page > .section:not(.lead-capture-section)::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.56;
    background-image: linear-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.035) 1px, transparent 1px);
    background-size: 36px 36px;
    pointer-events: none;
}

.product-detail-page > .section > .container {
    position: relative;
    z-index: 1;
}

.product-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
    gap: var(--space-8);
    align-items: start;
}

.product-detail-page .product-visual,
.product-detail-page .spec-panel,
.product-detail-page .download-card,
.product-detail-page .related-card {
    border: 1px solid rgba(148, 163, 184, 0.32);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(12px);
}

.product-detail-page .product-visual {
    position: relative;
    min-height: clamp(320px, 42vw, 520px);
    overflow: hidden;
    background: radial-gradient(circle at 22% 20%, rgba(56, 189, 248, 0.22), transparent 28%),
    linear-gradient(135deg, #050708, #0B1426 56%, #13295A);
    isolation: isolate;
}

.product-detail-page .product-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.22;
    background-image: linear-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.14) 1px, transparent 1px);
    background-size: 34px 34px;
}

.product-detail-page .product-visual::after {
    content: "";
    position: absolute;
    right: -12%;
    bottom: -18%;
    width: 62%;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 999px;
    box-shadow: 0 0 90px rgba(56, 189, 248, 0.18);
}

.product-visual__shape {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 50%;
    height: 28%;
    border: 1px solid rgba(255, 255, 255, 0.64);
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.18), rgba(56, 189, 248, 0.3), rgba(255, 255, 255, 0.12));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36), 0 24px 70px rgba(0, 0, 0, 0.28);
    transform: translateY(-50%) rotate(-8deg);
}

.product-detail-page .section-reveal {
    display: grid;
    gap: var(--space-4);
}

.product-detail-page .section-reveal h2,
.product-detail-page .spec-panel h2,
.product-detail-page .download-card h2 {
    margin: 0;
    color: #0F172A;
    letter-spacing: -0.026em;
}

.product-detail-page .section-reveal .lead,
.product-detail-page .spec-panel p,
.product-detail-page .download-card p,
.product-detail-page .support-list,
.product-detail-page .spec-list {
    color: #475569;
}

.product-detail-page .spec-panel,
.product-detail-page .download-card {
    display: grid;
    align-content: start;
    gap: var(--space-4);
    padding: var(--space-6);
}

.product-detail-page .spec-panel .btn,
.product-detail-page .download-card .btn {
    width: fit-content;
}

.product-detail-page .support-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
}

.product-detail-page .support-list,
.product-detail-page .spec-list {
    display: grid;
    gap: var(--space-3);
    padding: 0;
    margin: 0;
    list-style: none;
}

.product-detail-page .support-list li,
.product-detail-page .spec-list li {
    display: grid;
    gap: 0.35rem;
    padding: var(--space-3) 0;
    border-top: 1px solid rgba(148, 163, 184, 0.22);
}

.product-detail-page .support-list li:first-child,
.product-detail-page .spec-list li:first-child {
    border-top: 0;
}

.product-detail-page .spec-list span {
    color: #64748B;
    font-family: var(--font-clear);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.product-detail-page .spec-list strong {
    color: #0F172A;
    font-size: 1rem;
}

.downloads-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.product-detail-page .related-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
}

.product-detail-page .related-card {
    display: grid;
    gap: var(--space-3);
    color: inherit;
    text-decoration: none;
    transition: transform var(--transition-med), border-color var(--transition-med), box-shadow var(--transition-med);
}

.product-detail-page .related-card:hover {
    border-color: rgba(58, 93, 174, 0.42);
    box-shadow: 0 26px 70px rgba(15, 23, 42, 0.13);
    transform: translateY(-3px);
}

.product-detail-page .lead-capture-section {
    background: radial-gradient(circle at 84% 18%, rgba(56, 189, 248, 0.18), transparent 30%),
    linear-gradient(135deg, #050708, #0B1426 52%, #13295A);
}

@media (max-width: 1100px) {
    .product-detail-grid,
    .product-detail-page .support-grid,
    .product-detail-page .related-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .product-detail-page .page-hero {
        min-height: 78svh;
        padding: calc(var(--header-height) + var(--space-10)) 0 var(--space-10);
    }

    .product-detail-page .page-hero h1 {
        font-size: clamp(3.35rem, 14vw, 4.8rem);
        line-height: 0.92;
    }

    .product-detail-grid {
        gap: var(--space-5);
    }

    .product-detail-page .product-visual {
        min-height: 320px;
    }
}

@media (max-width: 560px) {
    .product-detail-page .spec-panel,
    .product-detail-page .download-card,
    .product-detail-page .related-card {
        padding: var(--space-5);
    }

    .downloads-grid .btn,
    .product-detail-page .spec-panel .btn,
    .product-detail-page .download-card .btn {
        width: 100%;
    }
}
/* Floating premium header for Nitta Brasil. Scoped to the template part for WordPress/Pinegrow reuse. */
:root {
    --nitta-blue: #3A5DAE;
    --nitta-black: #000000;
    --nitta-gray: #5D5E61;
    --nitta-gold: #897750;
    --nitta-silver: #8F9294;
    --header-bg: rgba(7, 11, 22, 0.72);
    --header-bg-scrolled: rgba(7, 11, 22, 0.88);
}

[id] {
    scroll-margin-top: 104px;
    text-align: middle;
}

.site-header {
    position: fixed;
    top: 20px;
    left: 50%;
    z-index: 1000;
    width: max-content;
    max-width: calc(100% - 32px);
    min-height: 0;
    padding: 6px 8px;
    border: 1px solid rgba(58, 93, 174, 0.28);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(58, 93, 174, 0.12), transparent 38%),
    var(--header-bg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 24px rgba(58, 93, 174, 0.08),
    0 18px 50px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transform: translateX(-50%) translateY(-10px);
    opacity: 0;
    animation: floating-header-in 560ms cubic-bezier(0.16, 1, 0.3, 1) 120ms forwards;
    transition: top 240ms ease, background 240ms ease, border-color 240ms ease, box-shadow 240ms ease, padding 240ms ease;
}

.site-header.is-scrolled {
    top: 14px;
    padding-block: 5px;
    border-color: rgba(58, 93, 174, 0.38);
    background: linear-gradient(135deg, rgba(58, 93, 174, 0.14), transparent 34%),
    var(--header-bg-scrolled);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 28px rgba(58, 93, 174, 0.1),
    0 20px 60px rgba(0, 0, 0, 0.36);
}

.site-header__inner {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: clamp(0.75rem, 1.2vw, 1.1rem);
}

.site-header__brand {
    min-height: 0;
    flex: 0 0 auto;
    padding: 6px 14px;
    border-radius: 999px;
    color: var(--color-white);
    transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.site-header__brand:hover,
.site-header__brand:focus-visible {
    background: rgba(255, 255, 255, 0.07);
    transform: translateY(-1px);
}

.site-header .brand__logo {
    display: block;
    width: auto;
    height: clamp(24px, 2.1vw, 30px);
    max-width: 148px;
    object-fit: contain;
}

.site-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.86rem;
    font-weight: 600;
}

.site-nav a,
.site-header__cta {
    position: relative;
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-family: var(--font-clear);
    line-height: 1;
    white-space: nowrap;
    transition: background 210ms ease, color 210ms ease, box-shadow 210ms ease, transform 210ms ease, border-color 210ms ease;
}

.site-nav a {
    padding: 9px 13px;
    color: rgba(255, 255, 255, 0.78);
}

.site-nav a::after {
    display: none;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a.is-active,
.site-nav a[aria-current="page"] {
    color: var(--color-white);
    background: rgba(58, 93, 174, 0.18);
    box-shadow: inset 0 0 0 1px rgba(58, 93, 174, 0.28);
    transform: translateY(-1px);
}

.site-nav a.is-active,
.site-nav a[aria-current="page"] {
    background: rgba(58, 93, 174, 0.24);
    box-shadow: inset 0 0 0 1px rgba(58, 93, 174, 0.36);
}

.site-header__cta {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: var(--nitta-blue);
    color: var(--color-white);
    font-size: 0.86rem;
    font-weight: 600;
    box-shadow: 0 8px 22px rgba(58, 93, 174, 0.28);
}

.site-header__cta:hover,
.site-header__cta:focus-visible {
    background: #4B6FC3;
    color: var(--color-white);
    box-shadow: 0 12px 28px rgba(58, 93, 174, 0.38);
    transform: translateY(-1px);
}

.site-nav__mobile-cta {
    display: none !important;
}

.nav-toggle {
    display: none;
    width: 42px;
    height: 42px;
    min-width: 42px;
    place-items: center;
    border: 1px solid rgba(58, 93, 174, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-white);
    transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.nav-toggle:hover,
.nav-toggle.is-active {
    border-color: rgba(58, 93, 174, 0.52);
    background: rgba(58, 93, 174, 0.18);
    box-shadow: inset 0 0 0 1px rgba(58, 93, 174, 0.18);
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    content: "";
    transition: transform 220ms ease, background 160ms ease, opacity 160ms ease;
}

.nav-toggle span {
    position: relative;
}

.nav-toggle span::before,
.nav-toggle span::after {
    position: absolute;
    left: 0;
}

.nav-toggle span::before {
    transform: translateY(-6px);
}

.nav-toggle span::after {
    transform: translateY(6px);
}

.nav-toggle.is-active span {
    background: transparent;
}

.nav-toggle.is-active span::before {
    transform: rotate(45deg);
}

.nav-toggle.is-active span::after {
    transform: rotate(-45deg);
}

@keyframes floating-header-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@media (max-width: 1180px) {
    .site-header {
        max-width: calc(100% - 24px);
    }

    .site-nav a {
        padding-inline: 10px;
    }
}

@media (max-width: 900px) {
    [id] {
        scroll-margin-top: 92px;
    }

    .site-header,
    .site-header.is-scrolled {
        top: 12px;
        width: calc(100% - 24px);
        max-width: calc(100% - 24px);
        padding: 5px 6px;
    }

    .site-header__inner {
        min-height: 42px;
        justify-content: space-between;
        gap: 8px;
    }

    .site-header__brand {
        padding: 5px 10px;
    }

    .site-header .brand__logo {
        height: 24px;
        max-width: 128px;
    }

    .nav-toggle {
        display: grid;
        order: 3;
    }

    .site-header__cta {
        order: 2;
        min-height: 38px;
        padding: 9px 13px;
        font-size: 0.8rem;
    }

    .site-nav {
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        right: 0;
        z-index: -1;
        display: grid;
        gap: 4px;
        justify-content: stretch;
        padding: 12px;
        border: 1px solid rgba(58, 93, 174, 0.28);
        border-radius: 22px;
        background: linear-gradient(135deg, rgba(58, 93, 174, 0.12), transparent 42%),
      rgba(7, 11, 22, 0.92);
        box-shadow: 0 20px 54px rgba(0, 0, 0, 0.34);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px) scale(0.985);
        transform-origin: top center;
        transition: opacity 200ms ease, transform 230ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 230ms;
    }

    .site-nav.is-open {
        z-index: 1;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) scale(1);
        transition: opacity 200ms ease, transform 230ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0s;
    }

    .site-nav a {
        width: 100%;
        min-height: 42px;
        justify-content: flex-start;
        padding: 0.78rem 0.95rem;
        opacity: 1;
        transform: none;
    }

    .site-nav a:hover,
    .site-nav a:focus-visible,
    .site-nav a.is-active,
    .site-nav a[aria-current="page"] {
        transform: none;
    }

    .site-nav__mobile-cta {
        display: inline-flex !important;
        justify-content: center !important;
        margin-top: 6px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: var(--nitta-blue) !important;
        color: var(--color-white) !important;
        box-shadow: 0 8px 22px rgba(58, 93, 174, 0.28) !important;
    }
}

@media (max-width: 560px) {
    .site-header__cta {
        display: none;
    }

    .site-header .brand__logo {
        max-width: 118px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header {
        animation: none;
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    .site-header,
    .site-nav,
    .site-nav a,
    .site-header__cta,
    .nav-toggle,
    .nav-toggle span,
    .nav-toggle span::before,
    .nav-toggle span::after {
        transition-duration: 0.01ms !important;
    }
}

/* Fine tuning after validation: keep desktop header inside the requested 52-58px visual range. */
.site-header {
    padding: 5px 7px;
}

.site-header__inner {
    min-height: 44px;
}

.site-header .brand__logo {
    height: clamp(24px, 2vw, 28px);
}

/* Mobile compact header: closed state shows only the menu trigger. */
@media (max-width: 900px) {
    .site-header,
    .site-header.is-scrolled {
        left: 50%;
        width: auto;
        max-width: none;
        padding: 5px;
    }

    .site-header__inner {
        min-height: 44px;
        gap: 0;
    }

    .site-header__brand,
    .site-header__cta {
        display: none !important;
    }

    .nav-toggle {
        display: grid;
        width: 44px;
        height: 44px;
        min-width: 44px;
    }

    .site-nav {
        left: 50%;
        right: auto;
        width: min(360px, calc(100vw - 24px));
        transform: translateX(-50%) translateY(-8px) scale(0.985);
    }

    .site-nav.is-open {
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

/* About page and mobile readability refinements */
.about-page {
    background: var(--color-white);
}

.about-hero {
    position: relative;
    overflow: hidden;
    min-height: 76vh;
    display: flex;
    align-items: flex-end;
    padding: calc(var(--header-height) + var(--space-16)) 0 var(--space-16);
    color: var(--color-white);
    background: linear-gradient(135deg, rgba(58, 93, 174, 0.24), transparent 40%),
    radial-gradient(circle at 86% 18%, rgba(137, 119, 80, 0.34), transparent 26%),
    linear-gradient(150deg, #0B1426 0%, #111827 56%, #000000 100%);
}

.about-hero::before,
.about-hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.about-hero::before {
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    opacity: 0.62;
}

.about-hero::after {
    right: -10vw;
    bottom: -18vw;
    width: min(52vw, 680px);
    aspect-ratio: 1;
    border: 1px solid rgba(137, 119, 80, 0.38);
    border-radius: 999px;
    box-shadow: inset 0 0 0 22px rgba(58, 93, 174, 0.08);
}

.about-hero .container {
    position: relative;
    z-index: 1;
}

.about-hero .breadcrumb {
    margin-bottom: var(--space-8);
    color: rgba(255, 255, 255, 0.74);
}

.about-hero h1 {
    max-width: 880px;
    color: var(--color-white);
}

.about-hero .lead {
    max-width: 760px;
    color: rgba(255, 255, 255, 0.84);
}

.about-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-7);
}

.about-story-section {
    background: var(--color-white);
}

.about-story-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.72fr);
    gap: var(--space-10);
    align-items: start;
}

.about-story-copy {
    display: grid;
    gap: var(--space-5);
}

.about-story-copy h2 {
    margin: 0;
    max-width: 780px;
    color: var(--color-deep-navy);
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.about-story-copy p {
    margin: 0;
    max-width: 760px;
    color: var(--color-industrial-gray);
    font-size: 1.04rem;
}

.about-timeline {
    display: grid;
    gap: var(--space-4);
}

.about-timeline__item {
    position: relative;
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(58, 93, 174, 0.08), transparent 48%),
    var(--color-white);
    box-shadow: var(--shadow-sm);
}

.about-timeline__item strong {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--color-nitta-gold);
    font-family: var(--font-clear);
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.about-timeline__item p {
    margin: 0;
    color: var(--color-industrial-gray);
}

.about-proof-section {
    overflow: hidden;
}

.about-proof-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    gap: var(--space-8);
    align-items: start;
}

.about-proof-media {
    min-height: 440px;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--color-logo-black);
    box-shadow: var(--shadow-md);
}

.about-proof-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.92;
}

.about-proof-panel {
    display: grid;
    align-content: center;
    gap: var(--space-6);
    padding: var(--space-8);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 42%),
    var(--color-deep-navy);
    color: var(--color-white);
}

.about-proof-panel h2,
.about-proof-panel p {
    margin: 0;
}

.about-proof-panel p {
    color: rgba(255, 255, 255, 0.78);
}

.about-proof-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
}

.about-proof-stats .value-card {
    min-height: 150px;
}

@media (max-width: 900px) {
    .about-hero {
        min-height: 68vh;
        padding: calc(var(--header-height) + var(--space-12)) 0 var(--space-12);
    }

    .about-story-grid,
    .about-proof-grid,
    .about-proof-stats {
        grid-template-columns: 1fr;
    }

    .about-proof-media {
        min-height: 320px;
    }
}

@media (max-width: 820px) {
    .cta-faq-card.section-reveal,
    .lead-capture-panel.section-reveal,
    .faq-accordion.reveal-card {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    .cta-faq-card {
        position: relative;
        isolation: isolate;
        min-height: 360px;
        padding: var(--space-12) var(--space-6);
        box-shadow: 0 22px 54px rgba(11, 20, 38, 0.22);
    }

    .cta-faq-card::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(135deg, rgba(11, 20, 38, 0.72), rgba(11, 20, 38, 0.48)),
      radial-gradient(circle at 50% 20%, rgba(58, 93, 174, 0.34), transparent 46%);
    }

    .cta-faq-card h2,
    .cta-faq-card p,
    .cta-faq-card__button {
        position: relative;
        z-index: 1;
    }

    .cta-faq-card p,
    .lead-capture-panel__intro p:not(.eyebrow) {
        color: rgba(255, 255, 255, 0.92);
    }

    .faq-accordion,
    .lead-capture-panel {
        opacity: 1;
        background: rgba(255, 255, 255, 0.98);
    }

    .faq-item__button,
    .form-field label {
        color: var(--color-deep-navy);
    }

    .faq-item__answer p,
    .checkbox-field {
        color: var(--color-industrial-gray);
    }

    .lead-capture-panel {
        border-color: rgba(11, 20, 38, 0.08);
        box-shadow: 0 22px 56px rgba(11, 20, 38, 0.2);
    }

    .lead-capture-panel__intro {
        background: linear-gradient(135deg, rgba(58, 93, 174, 0.28), transparent 44%),
      #0B1426;
    }

    .form-field input,
    .form-field select,
    .form-field textarea {
        background: var(--color-white);
        color: var(--color-deep-navy);
        border-color: rgba(11, 20, 38, 0.18);
    }
}

@media (max-width: 560px) {
    .about-hero__actions {
        display: grid;
    }

    .about-story-copy p,
    .about-timeline__item p {
        font-size: 0.98rem;
    }
}

/* Home Segmentos refinements */
.home-scroll-story__stage--segments .segment-card {
    align-items: center;
    justify-content: center;
    min-height: clamp(300px, 38vh, 430px);
    padding: clamp(0.9rem, 1.12vw, 1.2rem);
}

.home-scroll-story__stage--segments .segment-card h3 {
    font-size: clamp(1.35rem, 2vw, 2.65rem);
    line-height: 0.98;
    letter-spacing: -0.025em;
}

.home-scroll-story__stage--segments .segment-card:nth-child(3) h3,
.home-scroll-story__stage--segments .segment-card:nth-child(4) h3,
.home-scroll-story__stage--segments .segment-card:nth-child(5) h3,
.home-scroll-story__stage--segments .segment-card:nth-child(6) h3 {
    font-size: clamp(0.9rem, 1.12vw, 1.45rem);
    line-height: 1.02;
}

.home-scroll-story__stage--segments .segment-card__button {
    display: none;
}

@media (max-width: 820px) {
    .home-scroll-story__stage--segments {
        position: relative;
        isolation: isolate;
        background: radial-gradient(circle at 86% 12%, rgba(58, 93, 174, 0.26), transparent 30%),
      radial-gradient(circle at 12% 92%, rgba(137, 119, 80, 0.2), transparent 34%),
      linear-gradient(150deg, #0B1426 0%, #101827 54%, #05070C 100%);
    }

    .home-scroll-story__stage--segments::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
      linear-gradient(0deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
        background-size: 42px 42px;
        opacity: 0.45;
    }

    .home-scroll-story__stage--segments .section-header,
    .home-scroll-story__stage--segments .cta-row,
    .home-scroll-story__stage--segments .segment-grid {
        position: relative;
        z-index: 1;
    }

    .home-scroll-story__stage--segments .section-header p,
    .home-scroll-story__stage--segments .lead {
        color: rgba(255, 255, 255, 0.82);
    }

    .home-scroll-story__stage--segments .segment-card {
        min-height: 150px;
        align-items: flex-start;
        justify-content: center;
        padding: var(--space-5);
        border-color: rgba(255, 255, 255, 0.16);
        background: rgba(255, 255, 255, 0.055);
        box-shadow: 0 16px 42px rgba(0, 0, 0, 0.18);
    }

    .home-scroll-story__stage--segments .segment-card__media,
    .home-scroll-story__stage--segments .segment-card:nth-child(2n) .segment-card__media,
    .home-scroll-story__stage--segments .segment-card:nth-child(3n) .segment-card__media {
        background: radial-gradient(circle at 82% 18%, rgba(58, 93, 174, 0.24), transparent 34%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.015) 48%, rgba(0, 0, 0, 0.16));
    }

    .home-scroll-story__stage--segments .segment-card__media::before {
        opacity: 0.16;
    }

    .home-scroll-story__stage--segments .segment-card__media::after {
        width: 42%;
        right: -14%;
        bottom: -42%;
        border-color: rgba(137, 119, 80, 0.22);
    }

    .home-scroll-story__stage--segments .segment-card__overlay {
        background: rgba(0, 0, 0, 0.16);
    }

    .home-scroll-story__stage--segments .segment-card h3,
    .home-scroll-story__stage--segments .segment-card:nth-child(3) h3,
    .home-scroll-story__stage--segments .segment-card:nth-child(4) h3,
    .home-scroll-story__stage--segments .segment-card:nth-child(5) h3,
    .home-scroll-story__stage--segments .segment-card:nth-child(6) h3 {
        max-width: 100%;
        font-size: clamp(1.22rem, 5.4vw, 1.85rem);
        line-height: 1.08;
        letter-spacing: -0.02em;
        text-transform: none;
        writing-mode: horizontal-tb;
        transform: none;
    }

    .home-scroll-story__stage--segments .segment-card:hover h3 {
        transform: none;
    }
}

/* Mobile Segmentos composition with central video */
.mobile-segments-video {
    display: none;
}

@media (max-width: 820px) {
    .home-scroll-story__stage--segments {
        background: #020607;
        background-color: #020607;
    }

    .home-scroll-story__stage--segments::before {
        background: radial-gradient(circle at 50% 36%, rgba(58, 93, 174, 0.24), transparent 34%),
      radial-gradient(circle at 18% 12%, rgba(137, 119, 80, 0.12), transparent 28%),
      linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
      linear-gradient(0deg, rgba(255, 255, 255, 0.024) 1px, transparent 1px);
        background-size: auto, auto, 38px 38px, 38px 38px;
        opacity: 1;
    }

    .home-scroll-story__stage--segments .home-scroll-story__content {
        width: min(100% - 32px, 430px);
    }

    .home-scroll-story__stage--segments .section-header {
        margin-bottom: var(--space-7);
    }

    .home-scroll-story__segment-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .home-scroll-story__stage--segments .segment-card {
        min-height: 84px;
        padding: 1rem 1.08rem;
        border: 1px solid rgba(58, 93, 174, 0.28);
        border-radius: 14px;
        background: #071012;
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.26);
    }

    .home-scroll-story__stage--segments .segment-card__media,
    .home-scroll-story__stage--segments .segment-card:nth-child(2n) .segment-card__media,
    .home-scroll-story__stage--segments .segment-card:nth-child(3n) .segment-card__media {
        background: linear-gradient(135deg, rgba(58, 93, 174, 0.16), transparent 48%),
      #071012;
    }

    .home-scroll-story__stage--segments .segment-card__media::before {
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
        background-size: 30px 30px;
        opacity: 0.32;
    }

    .home-scroll-story__stage--segments .segment-card__media::after {
        width: 34%;
        right: -12%;
        bottom: -54%;
        border-color: rgba(137, 119, 80, 0.18);
    }

    .home-scroll-story__stage--segments .segment-card__overlay {
        background: linear-gradient(90deg, rgba(2, 6, 7, 0.2), transparent 70%);
    }

    .home-scroll-story__stage--segments .segment-card h3,
    .home-scroll-story__stage--segments .segment-card:nth-child(3) h3,
    .home-scroll-story__stage--segments .segment-card:nth-child(4) h3,
    .home-scroll-story__stage--segments .segment-card:nth-child(5) h3,
    .home-scroll-story__stage--segments .segment-card:nth-child(6) h3 {
        font-size: clamp(1rem, 4.75vw, 1.38rem);
        line-height: 1.12;
        color: rgba(255, 255, 255, 0.94);
    }

    .mobile-segments-video {
        position: relative;
        z-index: 1;
        display: grid;
        place-items: center;
        padding: var(--space-5) 0;
    }

    .mobile-segments-video__frame {
        position: relative;
        width: min(64vw, 244px);
        aspect-ratio: 1;
        overflow: hidden;
        border: 1px solid rgba(58, 93, 174, 0.48);
        border-radius: 999px;
        background: #020607;
        box-shadow: 0 0 0 10px rgba(58, 93, 174, 0.08),
      0 28px 72px rgba(0, 0, 0, 0.48);
    }

    .mobile-segments-video__frame::before {
        content: "";
        position: absolute;
        inset: 10px;
        z-index: 1;
        pointer-events: none;
        border: 1px solid rgba(137, 119, 80, 0.42);
        border-radius: inherit;
    }

    .mobile-segments-video__media {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        filter: saturate(1.04) contrast(1.04);
    }
}

@media (max-width: 380px) {
    .home-scroll-story__stage--segments .segment-card {
        min-height: 78px;
        padding: 0.92rem 1rem;
    }

    .mobile-segments-video__frame {
        width: min(68vw, 218px);
    }
}

/* Mobile post-story visibility fix */
@media (max-width: 820px) {
    .home-scroll-story__media {
        pointer-events: none;
    }

    .benefits-section,
    
  .product-finder-section,
    
  .cta-faq-section,
    
  .lead-capture-section,
    
  .site-footer {
        position: relative;
        z-index: 3;
    }

    .site-footer {
        background: #ffffff;
    }

    .site-footer__brand p,
    
  .site-footer__newsletter p,
    
  .site-footer li,
    
  .site-footer a,
    
  .site-footer__bottom {
        color: #4b5563;
    }

    .site-footer h3,
    
  .site-footer .brand {
        color: var(--color-logo-black);
    }
}

/* Editorial product lines refresh */
.home-scroll-story__stage--products {
    --product-editorial-bg: #F0F5F7;
    --product-editorial-ink: #154359;
    --product-editorial-muted: #4A6070;
    --product-card-clip-a: var(--product-card-clip-b);
    --product-card-clip-b: polygon(0 14px, 4px 4px, 14px 0, calc(100% - 64px) 0, 100% 64px, 100% calc(100% - 14px), calc(100% - 4px) calc(100% - 4px), calc(100% - 14px) 100%, 64px 100%, 0 calc(100% - 64px));
    overflow: hidden;
    isolation: isolate;
    color: var(--product-editorial-ink);
    background: var(--product-editorial-bg);
}

.home-scroll-story__stage--products::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    height: clamp(10rem, 16vw, 14rem);
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(240, 245, 247, 0) 0%, rgba(240, 245, 247, 0.7) 60%, #F0F5F7 100%);
}

.home-scroll-story__stage--products .home-scroll-story__content {
    width: min(100% - 48px, 1280px);
}

.home-scroll-story__stage--products .section-header {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.72fr);
    column-gap: clamp(2.5rem, 7vw, 5rem);
    row-gap: var(--space-5);
    max-width: none;
    margin-bottom: var(--space-14);
}

.home-scroll-story__stage--products .section-header h2 {
    grid-column: 1;
    max-width: 760px;
    margin: 0;
    color: var(--product-editorial-ink);
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    font-weight: 300;
    line-height: 0.95;
    letter-spacing: -0.035em;
}

.home-scroll-story__stage--products .section-header .lead {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
    max-width: 560px;
    margin: 0;
    padding-top: 0.25rem;
    color: var(--product-editorial-muted);
    font-size: clamp(1.06rem, 1.6vw, 1.13rem);
    line-height: 1.55;
}

.home-scroll-story__stage--products .home-scroll-story__product-lines {
    position: relative;
    z-index: 2;
    gap: clamp(1.25rem, 2vw, 1.5rem);
}

.home-scroll-story__stage--products .line-card {
    --line-card-image: url("../img/Correias.png");
    --line-card-clip: var(--product-card-clip-a);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: clamp(320px, 42vh, 420px);
    padding: clamp(1.5rem, 2.2vw, 1.9rem);
    border: 0;
    color: var(--product-editorial-ink);
    background: rgba(255, 255, 255, 0.82);
    clip-path: var(--line-card-clip);
    box-shadow: 0 22px 48px rgba(21, 67, 89, 0.12);
    isolation: isolate;
    transform: none;
}

.home-scroll-story__stage--products .line-card:nth-child(2) {
    --line-card-image: url("../img/Mangueiras.png");
    --line-card-clip: var(--product-card-clip-b);
}

.home-scroll-story__stage--products .line-card--light {
    color: var(--product-editorial-ink);
    background: rgba(255, 255, 255, 0.82);
}

.home-scroll-story__stage--products .line-card::before {
    content: "";
    position: absolute;
    inset: 1.5px;
    z-index: 0;
    clip-path: var(--line-card-clip);
    background-image: linear-gradient(to top, rgba(240, 245, 247, 0.94) 8%, rgba(240, 245, 247, 0.62) 46%, rgba(240, 245, 247, 0.16) 100%),
    var(--line-card-image);
    background-position: center;
    background-size: cover;
    transform: scale(1.01);
}

.home-scroll-story__stage--products .line-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    width: auto;
    aspect-ratio: auto;
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 0;
    clip-path: var(--line-card-clip);
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(21, 67, 89, 0.08);
}

.home-scroll-story__stage--products .line-card > * {
    z-index: 2;
}

.home-scroll-story__stage--products .line-card .kicker {
    color: var(--product-editorial-ink);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
}

.home-scroll-story__stage--products .line-card h3 {
    max-width: 72%;
    margin-top: var(--space-4);
    color: var(--product-editorial-ink);
    font-size: clamp(1.75rem, 2.8vw, 2.15rem);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.025em;
}

.home-scroll-story__stage--products .line-card h3 + p {
    max-width: 72%;
    margin-top: var(--space-4);
    color: var(--product-editorial-muted);
    font-size: clamp(0.9rem, 1.2vw, 0.96rem);
    line-height: 1.5;
}

.home-scroll-story__stage--products .line-card .btn {
    width: fit-content;
    min-height: 44px;
    margin-top: var(--space-6);
    padding: 0.72rem 1.15rem;
    border: 1px solid rgba(21, 67, 89, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--product-editorial-ink);
    box-shadow: none;
}

.home-scroll-story__stage--products .line-card:nth-child(2) .btn {
    border-color: rgba(21, 67, 89, 0.92);
    background: var(--product-editorial-ink);
    color: var(--color-white);
}

.home-scroll-story__stage--products .line-card:hover {
    border-color: transparent;
    box-shadow: 0 24px 54px rgba(21, 67, 89, 0.14);
    transform: none;
}

@media (max-width: 820px) {
    .home-scroll-story__stage--products {
        min-height: 100vh;
        padding: var(--space-20) 0 var(--space-16);
        background: #F0F5F7;
    }

    .home-scroll-story__stage--products .home-scroll-story__content {
        width: min(100% - 32px, 430px);
    }

    .home-scroll-story__stage--products .section-header {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin-bottom: var(--space-8);
    }

    .home-scroll-story__stage--products .section-header h2 {
        max-width: 100%;
        font-size: clamp(2.25rem, 10.5vw, 3rem);
    }

    .home-scroll-story__stage--products .section-header .lead {
        max-width: 100%;
        margin-top: var(--space-5);
        color: var(--product-editorial-muted);
        font-size: 1.06rem;
    }

    .home-scroll-story__stage--products .home-scroll-story__product-lines {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .home-scroll-story__stage--products .line-card {
        min-height: 320px;
        padding: 1.45rem;
    }

    .home-scroll-story__stage--products .line-card h3,
    
  .home-scroll-story__stage--products .line-card h3 + p {
        max-width: 88%;
    }
}

@media (max-width: 420px) {
    .home-scroll-story__stage--products .line-card {
        min-height: 320px;
        padding: 1.25rem;
    }

    .home-scroll-story__stage--products .line-card h3,
    
  .home-scroll-story__stage--products .line-card h3 + p {
        max-width: 100%;
    }
}

/* Product lines text and CTA color adjustments */
.home-scroll-story__stage--products .section-header {
    margin-bottom: clamp(4rem, 8vw, 5.75rem);
}

.home-scroll-story__stage--products .section-header h2 {
    max-width: 820px;
}

.home-scroll-story__stage--products .line-card .kicker,

.home-scroll-story__stage--products .line-card h3,

.home-scroll-story__stage--products .line-card h3 + p {
    color: #000000;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.86), 0 8px 18px rgba(0, 0, 0, 0.14);
}

.home-scroll-story__stage--products .line-card .btn,

.home-scroll-story__stage--products .line-card:nth-child(2) .btn {
    color: #ffffff;
    text-shadow: none;
    box-shadow: none;
}

.home-scroll-story__stage--products .line-card .btn {
    border-color: #154359;
    background: #154359;
}

.home-scroll-story__stage--products .line-card:nth-child(2) .btn {
    border-color: #E2762D;
    background: #E2762D;
}

@media (max-width: 820px) {
    .home-scroll-story__stage--products .section-header {
        margin-bottom: var(--space-12);
    }
}

/* Product lines animated white grid background layer */
@keyframes product-grid-drift {
    to {
        background-position: 40px 40px, 40px 40px;
    }
}

@keyframes product-grid-scan {
    0% {
        transform: translate3d(-18%, -18%, 0);
        opacity: 0;
    }

    28%,
    72% {
        opacity: 0.55;
    }

    100% {
        transform: translate3d(18%, 18%, 0);
        opacity: 0;
    }
}

.home-scroll-story__stage--products {
    --product-editorial-bg: #EAF1F7;
    position: relative;
    overflow: hidden;
    background: #EAF1F7;
    backdrop-filter: none;
}

.home-scroll-story__stage--products .animated-grid-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: linear-gradient(135deg, #EAF1F7 0%, #DDE8F2 100%);
    pointer-events: none;
}

.home-scroll-story__stage--products .animated-grid-layer__wash,
.home-scroll-story__stage--products .animated-grid-layer__grid,
.home-scroll-story__stage--products .animated-grid-layer__glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.home-scroll-story__stage--products .animated-grid-layer__wash {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.08));
}

.home-scroll-story__stage--products .animated-grid-layer__grid {
    opacity: 0.72;
    background-image: linear-gradient(rgba(255, 255, 255, 0.92) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.92) 1px, transparent 1px);
    background-position: 0 0, 0 0;
    background-size: 40px 40px, 40px 40px;
    animation: product-grid-drift 18s linear infinite;
}

.home-scroll-story__stage--products .animated-grid-layer__glow {
    width: 160%;
    height: 160%;
    inset: -30%;
    background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.72) 50%, transparent 62%);
    animation: product-grid-scan 9s ease-in-out infinite;
}

.home-scroll-story__stage--products::after {
    background: none;
}

@media (max-width: 820px) {
    .home-scroll-story__stage--products {
        background: #EAF1F7;
    }

    .home-scroll-story__stage--products .animated-grid-layer {
        background: linear-gradient(135deg, #EEF4F8 0%, #E2EBF3 100%);
    }

    .home-scroll-story__stage--products .animated-grid-layer__grid {
        opacity: 0.52;
        background-size: 44px 44px, 44px 44px;
        animation-duration: 22s;
    }

    .home-scroll-story__stage--products .animated-grid-layer__glow {
        opacity: 0.4;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-scroll-story__stage--products .animated-grid-layer__grid,
    .home-scroll-story__stage--products .animated-grid-layer__glow {
        animation: none !important;
    }
}

/* Product lines black text shadows */
.home-scroll-story__stage--products .section-header h2 {
    color: #000000;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
}

.home-scroll-story__stage--products .line-card .kicker,

.home-scroll-story__stage--products .line-card h3,

.home-scroll-story__stage--products .line-card h3 + p {
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.18);
}

/* Product lines card readability refinement */
.home-scroll-story__stage--products .section-header h2 {
    color: #050708;
    font-weight: 430;
    letter-spacing: 0;
    text-shadow: none;
}

.home-scroll-story__stage--products .line-card {
    padding: clamp(1.8rem, 2.6vw, 2.35rem);
}

.home-scroll-story__stage--products .line-card::before {
    z-index: 1;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.78) 42%, rgba(255, 255, 255, 0.28) 70%, rgba(255, 255, 255, 0) 100%),
    var(--line-card-image);
}

.home-scroll-story__stage--products .line-card::after {
    z-index: 3;
}

.home-scroll-story__stage--products .line-card > * {
    position: relative;
    z-index: 2;
    max-width: min(430px, 70%);
}

.home-scroll-story__stage--products .line-card .kicker {
    color: #0b0f12;
    font-weight: 760;
    letter-spacing: 0.16em;
    text-shadow: none;
}

.home-scroll-story__stage--products .line-card h3 {
    max-width: min(410px, 68%);
    color: #050708;
    font-weight: 520;
    letter-spacing: 0;
    text-shadow: none;
}

.home-scroll-story__stage--products .line-card h3 + p {
    max-width: min(430px, 70%);
    color: rgba(5, 7, 8, 0.76);
    font-weight: 430;
    text-shadow: none;
    padding-right: 27px;
}

.home-scroll-story__stage--products .line-card .btn {
    max-width: max-content;
    min-height: 46px;
    padding: 0.82rem 1.28rem;
    border-radius: 999px;
    font-weight: 700;
}

@media (max-width: 820px) {
    .home-scroll-story__stage--products .line-card {
        padding: 1.75rem;
    }

    .home-scroll-story__stage--products .line-card > *,
    .home-scroll-story__stage--products .line-card h3,
    .home-scroll-story__stage--products .line-card h3 + p {
        max-width: min(100%, 430px);
    }
}

/* Product lines mobile text guard */
@media (max-width: 820px) {
    .home-scroll-story__stage--products .line-card > * {
        max-width: min(360px, 82%);
    }

    .home-scroll-story__stage--products .line-card h3 {
        max-width: min(320px, 76%);
    }

    .home-scroll-story__stage--products .line-card h3 + p {
        max-width: min(340px, 80%);
    }

    .home-scroll-story__stage--products .line-card:nth-child(2) h3,
    .home-scroll-story__stage--products .line-card:nth-child(2) h3 + p {
        max-width: min(310px, 72%);
    }
}

/* Product lines mobile premium refinement */
@media (max-width: 820px) {
    .home-scroll-story__stage--products .section-header {
        width: min(100%, 430px);
        margin-top: clamp(5.75rem, 18vw, 6.75rem);
        margin-bottom: clamp(1.5rem, 6.5vw, 2.25rem);
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .home-scroll-story__stage--products .section-header h2 {
        max-width: 10.8em;
        color: #050708;
        font-size: clamp(2rem, 10vw, 2.72rem);
        font-weight: 430;
        line-height: 1.04;
        letter-spacing: 0;
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.72);
    }

    .home-scroll-story__stage--products .line-card,
    .home-scroll-story__stage--products .line-card:nth-child(2) {
        --line-card-clip: var(--product-card-clip-b);
        min-height: 344px;
        padding: clamp(1.7rem, 6vw, 2rem);
    }

    .home-scroll-story__stage--products .line-card::before {
        background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.86) 44%, rgba(255, 255, 255, 0.42) 74%, rgba(255, 255, 255, 0.04) 100%),
      var(--line-card-image);
    }

    .home-scroll-story__stage--products .line-card > * {
        max-width: min(335px, 78%);
    }

    .home-scroll-story__stage--products .line-card .kicker {
        margin: 0;
        color: #070a0d;
        font-size: 0.72rem;
        font-weight: 780;
        line-height: 1.2;
        letter-spacing: 0.18em;
    }

    .home-scroll-story__stage--products .line-card h3,
    .home-scroll-story__stage--products .line-card:nth-child(2) h3 {
        max-width: min(330px, 78%);
        margin-top: 1.25rem;
        color: #050708;
        font-size: clamp(1.55rem, 7.2vw, 1.9rem);
        font-weight: 680;
        line-height: 1.08;
        letter-spacing: 0;
    }

    .home-scroll-story__stage--products .line-card h3 + p,
    .home-scroll-story__stage--products .line-card:nth-child(2) h3 + p {
        max-width: min(330px, 78%);
        margin-top: 1.05rem;
        color: rgba(5, 7, 8, 0.82);
        font-size: 0.94rem;
        font-weight: 440;
        line-height: 1.58;
    }

    .home-scroll-story__stage--products .line-card .btn,
    .home-scroll-story__stage--products .line-card:nth-child(2) .btn {
        min-height: 48px;
        margin-top: 1.55rem;
        padding: 0.86rem 1.35rem;
        border-radius: 999px;
        font-size: 0.94rem;
        font-weight: 760;
    }
}

@media (max-width: 420px) {
    .home-scroll-story__stage--products .section-header {
        width: 100%;
        padding: 1rem;
        border-radius: 16px;
    }

    .home-scroll-story__stage--products .section-header h2 {
        max-width: 10em;
        font-size: clamp(1.92rem, 9.4vw, 2.42rem);
    }

    .home-scroll-story__stage--products .line-card,
    .home-scroll-story__stage--products .line-card:nth-child(2) {
        min-height: 340px;
        padding: 1.55rem;
    }

    .home-scroll-story__stage--products .line-card > *,
    .home-scroll-story__stage--products .line-card h3,
    .home-scroll-story__stage--products .line-card h3 + p,
    .home-scroll-story__stage--products .line-card:nth-child(2) h3,
    .home-scroll-story__stage--products .line-card:nth-child(2) h3 + p {
        max-width: 82%;
    }
}

/* Segmentos title-only state */
.home-scroll-story__stage--segments .home-scroll-story__content--segments-title {
    width: min(100% - 40px, 1120px);
}

.home-scroll-story__stage--segments .section-header--segments-title {
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}

.home-scroll-story__stage--segments .section-header--segments-title h2 {
    margin: 0;
    color: var(--color-white);
    font-size: clamp(3.2rem, 9vw, 7.4rem);
    font-weight: 300;
    line-height: 0.95;
    letter-spacing: -0.045em;
    text-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
}

@media (max-width: 820px) {
    .home-scroll-story__stage--segments .home-scroll-story__content--segments-title {
        width: min(100% - 32px, 430px);
    }

    .home-scroll-story__stage--segments .section-header--segments-title {
        margin-bottom: 0;
    }

    .home-scroll-story__stage--segments .section-header--segments-title h2 {
        font-size: clamp(3rem, 17vw, 5rem);
    }
}

.segments-mobile-particles {
    display: none;
}

/* Segmentos scroll-video background restore */
.home-scroll-story__stage--segments {
    background: transparent;
    background-color: transparent;
}

.home-scroll-story__stage--segments::before {
    display: none;
}

.home-scroll-story__stage--segments::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 36%, rgba(58, 93, 174, 0.18), transparent 38%),
    linear-gradient(90deg, rgba(11, 20, 38, 0.72), rgba(11, 20, 38, 0.44) 48%, rgba(11, 20, 38, 0.66));
}

.home-scroll-story__stage--segments .home-scroll-story__content--segments-title {
    position: relative;
    z-index: 2;
}

@media (max-width: 820px) {
    .home-scroll-story__stage--segments {
        overflow: hidden;
        background: #050505;
        background-color: #050505;
    }

    .segments-mobile-particles {
        pointer-events: none;
        position: absolute;
        inset: 0;
        z-index: 0;
        display: block;
        width: 100%;
        height: 100%;
        background: #050505;
    }

    .home-scroll-story__stage--segments::after {
        z-index: 1;
        background: radial-gradient(ellipse at center, transparent 0%, transparent 40%, rgba(10, 10, 10, 0.62) 100%),
        linear-gradient(180deg, rgba(2, 6, 7, 0.3), rgba(2, 6, 7, 0.54) 52%, rgba(2, 6, 7, 0.76));
    }
}

/* Home story mobile viewport rhythm restore */
@media (max-width: 820px) {
    .home-scroll-story__stage {
        min-height: 100vh;
        align-items: center;
    }

    .home-scroll-story__stage--segments {
        min-height: 100vh;
    }
}

/* Desktop pinned story video backdrop restore */
@media (min-width: 821px) {
    .home-scroll-story {
        isolation: isolate;
        background: var(--color-deep-navy);
    }

    .home-scroll-story.is-ready.is-pinned {
        z-index: 900;
        background: var(--color-deep-navy);
    }

    .home-scroll-story.is-ready.is-pinned::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 890;
        pointer-events: none;
        background: var(--color-deep-navy);
    }

    .home-scroll-story.is-ready.is-pinned .home-scroll-story__media {
        position: fixed;
        inset: 0;
        z-index: 891;
        width: 100vw;
        height: 100vh;
        opacity: 1;
        pointer-events: none;
        background: var(--color-deep-navy);
    }

    .home-scroll-story.is-ready.is-pinned .home-scroll-story__video {
        width: 100vw;
        height: 100vh;
        opacity: 0.9;
        object-fit: cover;
        pointer-events: none;
    }

    .home-scroll-story.is-ready.is-pinned .home-scroll-story__overlay {
        position: fixed;
        inset: 0;
        z-index: 892;
        pointer-events: none;
    }

    .home-scroll-story.is-ready .home-scroll-story__stage,
    .home-scroll-story.is-ready .home-scroll-story__progress {
        z-index: 893;
    }
}

/* About history page refresh */
.about-history-page {
    overflow: hidden;
    background: #F4F7F9;
    color: var(--color-deep-navy);
}

.about-history-page .section {
    position: relative;
}

.about-history-hero {
    min-height: 100vh;
    align-items: center;
    padding: calc(var(--header-height) + var(--space-18)) 0 var(--space-16);
    background: radial-gradient(circle at 78% 16%, rgba(58, 93, 174, 0.36), transparent 32%),
    radial-gradient(circle at 14% 84%, rgba(200, 169, 107, 0.18), transparent 28%),
    linear-gradient(145deg, #020607 0%, #0B1426 54%, #000000 100%);
}

.about-history-hero::before {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    radial-gradient(circle at 68% 50%, rgba(255, 255, 255, 0.08), transparent 30%);
    background-size: 58px 58px, 58px 58px, auto;
    opacity: 0.58;
}

.about-history-hero::after {
    right: -14vw;
    bottom: -20vw;
    width: min(58vw, 760px);
    border-color: rgba(200, 169, 107, 0.36);
    box-shadow: inset 0 0 0 24px rgba(58, 93, 174, 0.075),
    0 0 80px rgba(58, 93, 174, 0.16);
}

.about-history-hero__inner {
    max-width: 1180px;
}

.about-history-hero h1 {
    max-width: 980px;
    font-size: clamp(3.1rem, 8vw, 7.4rem);
    line-height: 0.86;
    letter-spacing: -0.055em;
}

.about-history-hero .lead {
    max-width: 780px;
    margin-top: var(--space-6);
    font-size: clamp(1.12rem, 2vw, 1.45rem);
}

.about-history-hero__signals {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    max-width: 980px;
    margin-top: var(--space-10);
}

.about-history-hero__signals span {
    display: grid;
    gap: 0.35rem;
    min-height: 112px;
    padding: var(--space-5);
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.055);
    color: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(14px);
}

.about-history-hero__signals strong {
    color: var(--color-white);
    font-size: clamp(1.7rem, 3vw, 2.8rem);
    font-weight: 300;
    line-height: 1;
}

.about-origin-section {
    background: #F4F7F9;
}

.about-origin-grid,
.about-brazil-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.52fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center;
}

.about-origin-copy {
    display: grid;
    gap: var(--space-5);
}

.about-origin-copy h2,
.about-brazil-copy h2,
.about-final-panel h2 {
    margin: 0;
    color: var(--color-deep-navy);
    font-size: clamp(2.2rem, 5vw, 4.5rem);
    font-weight: 300;
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.about-origin-copy p,
.about-brazil-copy p,
.about-final-panel p {
    max-width: 760px;
    margin: 0;
    color: #4A6070;
    font-size: clamp(1rem, 1.35vw, 1.12rem);
    line-height: 1.75;
}

.about-origin-card {
    position: relative;
    overflow: hidden;
    min-height: 360px;
    display: grid;
    align-content: end;
    gap: var(--space-4);
    padding: var(--space-7);
    border: 1px solid rgba(21, 67, 89, 0.12);
    background: radial-gradient(circle at 86% 14%, rgba(58, 93, 174, 0.2), transparent 34%),
    linear-gradient(145deg, #ffffff 0%, #E8EEF2 100%);
    box-shadow: 0 24px 60px rgba(21, 67, 89, 0.12);
}

.about-origin-card::before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(21, 67, 89, 0.11);
    pointer-events: none;
}

.about-origin-card span,
.about-brazil-note strong,
.about-curiosity-card span {
    color: #C8A96B;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.about-origin-card strong {
    color: var(--color-deep-navy);
    font-size: clamp(4rem, 10vw, 7rem);
    font-weight: 300;
    line-height: 0.85;
    letter-spacing: -0.06em;
}

.about-origin-card p {
    max-width: 250px;
    margin: 0;
    color: #4A6070;
}

.about-timeline-section {
    overflow: hidden;
    background: linear-gradient(180deg, #F4F7F9 0%, #ffffff 100%);
}

.about-timeline-section .section-header {
    max-width: 920px;
    margin-bottom: var(--space-12);
}

.about-history-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(210px, 1fr));
    gap: var(--space-4);
}

.about-history-timeline::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 34px;
    height: 1px;
    background: linear-gradient(90deg, rgba(21, 67, 89, 0), rgba(21, 67, 89, 0.32), rgba(21, 67, 89, 0));
}

.about-history-timeline__item {
    position: relative;
    display: grid;
    align-content: start;
    gap: var(--space-4);
    min-height: 260px;
    padding: var(--space-6);
    border: 1px solid rgba(21, 67, 89, 0.12);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 18px 44px rgba(21, 67, 89, 0.09);
}

.about-history-timeline__item::before {
    content: "";
    width: 13px;
    height: 13px;
    border: 2px solid #C8A96B;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 0 0 6px rgba(200, 169, 107, 0.13);
}

.about-history-timeline__item span {
    color: var(--color-deep-navy);
    font-size: clamp(2rem, 3.6vw, 3.25rem);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.045em;
}

.about-history-timeline__item p {
    margin: 0;
    color: #4A6070;
    font-size: 0.96rem;
    line-height: 1.58;
}

.about-brazil-section {
    background: radial-gradient(circle at 82% 20%, rgba(58, 93, 174, 0.26), transparent 28%),
    linear-gradient(145deg, #020607 0%, #0B1426 58%, #05070C 100%);
    color: var(--color-white);
}

.about-brazil-grid {
    grid-template-columns: minmax(320px, 0.82fr) minmax(0, 1.08fr);
}

.about-brazil-media {
    position: relative;
    overflow: hidden;
    min-height: 540px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #000000;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.32);
}

.about-brazil-media video {
    width: 100%;
    height: 100%;
    min-height: 540px;
    object-fit: cover;
    opacity: 0.72;
}

.about-brazil-media span {
    position: absolute;
    left: var(--space-6);
    bottom: var(--space-6);
    color: rgba(255, 255, 255, 0.88);
    font-size: clamp(3rem, 8vw, 6.2rem);
    font-weight: 300;
    line-height: 0.86;
    letter-spacing: -0.06em;
}

.about-brazil-copy {
    display: grid;
    gap: var(--space-5);
    padding: clamp(2rem, 5vw, 4rem);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(16px);
}

.about-brazil-copy h2,
.about-brazil-copy p {
    color: var(--color-white);
}

.about-brazil-copy p {
    color: rgba(255, 255, 255, 0.76);
}

.about-brazil-note {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding: var(--space-5);
    border-left: 2px solid #C8A96B;
    background: rgba(255, 255, 255, 0.055);
    color: rgba(255, 255, 255, 0.82);
}

.about-curiosities-section {
    background: #ffffff;
}

.about-curiosities-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-4);
}

.about-curiosity-card {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
    border: 1px solid rgba(21, 67, 89, 0.12);
    background: linear-gradient(145deg, rgba(58, 93, 174, 0.07), transparent 48%),
    #F4F7F9;
}

.about-curiosity-card h3 {
    margin: 0;
    color: var(--color-deep-navy);
    font-size: clamp(1.25rem, 1.8vw, 1.65rem);
    line-height: 1.08;
}

.about-curiosity-card p {
    margin: auto 0 0;
    color: #4A6070;
    font-size: 0.95rem;
    line-height: 1.58;
}

.about-final-section {
    padding: var(--space-20) var(--space-4);
    background: linear-gradient(180deg, #ffffff 0%, #F4F7F9 100%);
}

.about-final-panel {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: var(--space-6);
    padding: clamp(2rem, 6vw, 5rem);
    border: 1px solid rgba(21, 67, 89, 0.12);
    background: radial-gradient(circle at 82% 22%, rgba(58, 93, 174, 0.16), transparent 30%),
    linear-gradient(145deg, #ffffff 0%, #EEF3F6 100%);
    box-shadow: 0 28px 80px rgba(21, 67, 89, 0.12);
}

.about-final-panel::after {
    content: "";
    position: absolute;
    right: -90px;
    bottom: -140px;
    width: 360px;
    aspect-ratio: 1;
    border: 1px solid rgba(200, 169, 107, 0.28);
    border-radius: 999px;
}

.about-final-panel h2,
.about-final-panel p,
.about-final-panel .btn,
.about-final-panel .eyebrow {
    position: relative;
    z-index: 1;
}

.about-final-panel .btn {
    width: fit-content;
}

@media (max-width: 1180px) {
    .about-history-timeline,
    .about-curiosities-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about-history-timeline::before {
        display: none;
    }
}

@media (max-width: 900px) {
    .about-history-hero {
        min-height: auto;
        padding-top: calc(var(--header-height) + var(--space-14));
    }

    .about-history-hero__signals,
    .about-origin-grid,
    .about-brazil-grid {
        grid-template-columns: 1fr;
    }

    .about-brazil-media,
    .about-brazil-media video {
        min-height: 360px;
    }
}

@media (max-width: 640px) {
    .about-history-hero h1 {
        font-size: clamp(3rem, 16vw, 5rem);
    }

    .about-history-hero__signals,
    .about-history-timeline,
    .about-curiosities-grid {
        grid-template-columns: 1fr;
    }

    .about-history-hero__signals span,
    .about-origin-card,
    .about-history-timeline__item,
    .about-curiosity-card,
    .about-final-panel,
    .about-brazil-copy {
        padding: var(--space-5);
    }

    .about-origin-card {
        min-height: 280px;
    }

    .about-history-timeline__item,
    .about-curiosity-card {
        min-height: auto;
    }

    .about-final-panel .btn {
        width: 100%;
    }
}

/* Home 2026-07-09: desktop headings left, mobile headings centered, lightweight consultation shortcuts. */
.home-scroll-story__stage--guided .section-header h2,
.home-scroll-story__stage--products .section-header h2 {
    text-align: left;
}

.benefits-section__actions {
    display: flex;
    justify-content: center;
    margin-top: var(--space-10);
}

.benefits-section__button {
    border-color: var(--color-white);
    background: var(--color-white);
    color: var(--color-deep-navy);
}

.product-finder-section .section-header--center .lead {
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
}

.product-finder-shortcuts {
    position: relative;
    z-index: 1;
    gap: var(--space-6);
}

.product-finder-shortcut {
    display: flex;
    min-height: 320px;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    padding: var(--space-8);
    color: var(--color-white);
    isolation: isolate;
}

.product-finder-shortcut::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, rgba(5, 7, 8, 0.1), rgba(5, 7, 8, 0.78)), var(--shortcut-image);
    background-position: center;
    background-size: cover;
    transform: scale(1.02);
    transition: transform var(--transition-med), filter var(--transition-med);
}

.product-finder-shortcut--belts {
    --shortcut-image: url("../img/Correias.png");
}

.product-finder-shortcut--hoses {
    --shortcut-image: url("../img/Mangueiras.png");
}

.product-finder-shortcut > * {
    position: relative;
    z-index: 1;
}

.product-finder-shortcut .kicker,
.product-finder-shortcut h3,
.product-finder-shortcut p {
    color: inherit;
}

.product-finder-shortcut h3 {
    max-width: 520px;
    margin: var(--space-3) 0 0;
    font-size: clamp(1.8rem, 3vw, 2.45rem);
    line-height: 1.02;
}

.product-finder-shortcut p:not(.kicker) {
    max-width: 520px;
    margin: var(--space-4) 0 0;
    color: rgba(255, 255, 255, 0.82);
}

.product-finder-shortcut .btn {
    width: fit-content;
    margin-top: var(--space-6);
    pointer-events: none;
}

.product-finder-shortcut:hover::before {
    filter: saturate(1.08) contrast(1.03);
    transform: scale(1.06);
}

@media (max-width: 820px) {
    .home-scroll-story__stage--guided .section-header,
    .home-scroll-story__stage--products .section-header,
    .home-scroll-story__stage--guided .section-header h2,
    .home-scroll-story__stage--products .section-header h2 {
        text-align: center;
    }

    .product-finder-shortcuts {
        grid-template-columns: 1fr;
    }

    .product-finder-shortcut {
        min-height: 280px;
        padding: var(--space-6);
        text-align: center;
    }

    .product-finder-shortcut h3,
    .product-finder-shortcut p:not(.kicker) {
        margin-inline: auto;
    }

    .product-finder-shortcut .btn {
        margin-inline: auto;
    }
}

/* About origin portrait inside the framed card. */
.about-origin-card__image {
    position: absolute;
    inset: 18px;
    z-index: 1;
    width: calc(100% - 36px);
    height: calc(100% - 36px);
    object-fit: cover;
}

.about-origin-card::before {
    z-index: 2;
}

/* About hero background photo refresh: use Fundo.png and keep copy to the left of the image. */
.about-history-hero {
    min-height: min(100vh, 880px);
    align-items: center;
    padding: calc(var(--header-height) + var(--space-14)) 0 var(--space-14);
    background-image: url("../img/Fundo.png");
    background-position: right bottom;
    background-size: cover;
    background-repeat: no-repeat;
    isolation: isolate;
}

.about-history-hero::before {
    inset: 0;
    z-index: 0;
    background: linear-gradient(90deg, rgba(2, 6, 7, 0.82) 0%, rgba(2, 6, 7, 0.58) 34%, rgba(2, 6, 7, 0.22) 58%, rgba(2, 6, 7, 0.04) 100%),
    linear-gradient(180deg, rgba(2, 6, 7, 0.44) 0%, rgba(2, 6, 7, 0.06) 42%, rgba(2, 6, 7, 0.38) 100%);
    opacity: 1;
}

.about-history-hero::after {
    display: none;
}

.about-history-hero__inner {
    display: grid;
    max-width: 1180px;
    min-height: calc(min(100vh, 880px) - var(--header-height) - var(--space-20));
    align-content: center;
    justify-items: start;
}

.about-history-hero .breadcrumb,
.about-history-hero h1,
.about-history-hero .lead,
.about-history-hero__signals {
    width: min(100%, 560px);
    margin-right: auto;
    margin-left: 0;
}

.about-history-hero .breadcrumb:empty {
    display: none;
}

.about-history-hero h1 {
    max-width: 560px;
    font-size: clamp(3rem, 4.65vw, 5.2rem);
    line-height: 0.9;
    text-wrap: balance;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.44);
}

.about-history-hero .lead {
    max-width: 540px;
    color: rgba(255, 255, 255, 0.86);
    font-size: clamp(1.08rem, 1.45vw, 1.24rem);
    line-height: 1.56;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.46);
}

.about-history-hero__signals {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    max-width: 560px;
    margin-top: var(--space-8);
}

.about-history-hero__signals span {
    min-height: 104px;
    padding: var(--space-4);
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(2, 6, 7, 0.34);
    color: rgba(255, 255, 255, 0.78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 42px rgba(0, 0, 0, 0.24);
}

.about-history-hero__signals strong {
    font-size: clamp(1.65rem, 2.25vw, 2.4rem);
}

@media (max-width: 900px) {
    .about-history-hero {
        min-height: 88svh;
        padding: calc(var(--header-height) + var(--space-12)) 0 var(--space-10);
        background-position: 58% center;
    }

    .about-history-hero::before {
        background: linear-gradient(180deg, rgba(2, 6, 7, 0.64) 0%, rgba(2, 6, 7, 0.28) 38%, rgba(2, 6, 7, 0.84) 100%),
        linear-gradient(90deg, rgba(2, 6, 7, 0.78) 0%, rgba(2, 6, 7, 0.3) 62%, rgba(2, 6, 7, 0.14) 100%);
    }

    .about-history-hero__inner {
        min-height: calc(88svh - var(--header-height) - var(--space-12));
        justify-items: start;
        align-content: end;
    }

    .about-history-hero .breadcrumb,
    .about-history-hero h1,
    .about-history-hero .lead,
    .about-history-hero__signals {
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 640px) {
    .about-history-hero {
        min-height: 92svh;
        background-position: 60% center;
    }

    .about-history-hero h1 {
        max-width: 10ch;
        font-size: clamp(3rem, 13vw, 4.7rem);
    }

    .about-history-hero .lead {
        max-width: 30rem;
    }

    .about-history-hero__signals {
        gap: 0.65rem;
        margin-top: var(--space-6);
    }

    .about-history-hero__signals span {
        min-height: 84px;
        padding: var(--space-4);
    }
}
/* Catalog hero text collision fix: explicit title/subtitle spacing. */
.catalog-page .page-hero .container {
    display: grid;
    align-content: center;
    gap: clamp(1.25rem, 2.4vw, 2rem);
}

.catalog-page .page-hero h1 {
    margin: 0;
    line-height: 0.92;
}

.catalog-page .page-hero .lead {
    margin: 0;
    max-width: 780px;
    line-height: 1.55;
}

@media (max-width: 820px) {
    .catalog-page .page-hero .container {
        gap: var(--space-5);
    }

    .catalog-page .page-hero h1 {
        line-height: 0.94;
    }
}
/* Product finder shortcut arc removal: keep photos clean in the home consultation section. */
.product-finder-shortcut::after {
    content: none;
    display: none;
}

/* Section and page title text reveal. Kept layout-neutral for existing scroll/video timelines. */
.text-animate-title {
    --text-animate-duration: 0.42s;
    --text-animate-stagger: 42ms;
}

.home-scroll-story__stage--hero #home-scroll-title.text-animate-title {
    flex-wrap: wrap;
    align-content: center;
}

.text-animate-title__segment {
    display: inline-block;
    white-space: pre;
    opacity: 0;
    filter: blur(8px);
    transform: translate3d(0, 18px, 0);
    transition: opacity var(--text-animate-duration) ease, filter var(--text-animate-duration) ease, transform var(--text-animate-duration) cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--text-animate-index, 0) * var(--text-animate-stagger));
    will-change: opacity, filter, transform;
}

.text-animate-title.is-visible .text-animate-title__segment {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
    .text-animate-title__segment {
        opacity: 1;
        filter: none;
        transform: none;
        transition: none;
        will-change: auto;
    }
}

/* Mobile Balanced Globo 1.0.5
   Preserve the original mobile structure while reducing CSS animation cost on
   touch devices. The visual layers remain present, but continuous CSS loops,
   heavy blur and text-filter transitions are simplified. */
@media (max-width: 820px) {
    .mobile-background-beams__animated path {
        animation: none !important;
        opacity: 0.42;
        stroke-dashoffset: 0;
    }

    .home-scroll-story__stage--guided .border-beam::before {
        animation: none !important;
        opacity: 0.46;
        filter: none;
        --border-beam-angle: 315deg;
    }

    .home-scroll-story__stage--products .animated-grid-layer__grid,
    .home-scroll-story__stage--products .animated-grid-layer__glow,
    .c5-animated-gradient,
    .page-transition.is-active .page-transition__logo,
    .page-transition.is-active .page-transition__line::after {
        animation: none !important;
    }

    .text-animate-title__segment {
        filter: none;
        transform: none;
        transition: opacity 180ms ease;
        will-change: auto;
    }

    .text-animate-title.is-visible .text-animate-title__segment {
        filter: none;
        transform: none;
    }

    .site-header,
    .site-nav {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .home-scroll-story .guided-card,
    .home-scroll-story .line-card,
    .home-scroll-story .segment-card,
    .catalog-page .page-hero__panel,
    .product-detail-page .page-hero__panel {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .benefits-card__blob {
        filter: blur(32px);
        opacity: 0.28;
    }

    .home-scroll-story__stage--guided .guided-card {
        will-change: auto;
    }
}