:root {
    --electric: #0667ff;
    --electric-2: #2b8cff;
    --electric-dark: #0046bf;
    --navy: #0b1730;
    --navy-2: #101f3f;
    --ink: #111827;
    --muted: #667085;
    --line: #dfe5ec;
    --soft: #f5f8fc;
    --soft-blue: #eef5ff;
    --white: #fff;
    --green: #20a867;
    --shadow: 0 22px 55px rgba(11,23,48,.10);
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: #fff;
    color: var(--ink);
    font-family: var(--site-font);
    overflow-x: hidden
}

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

a {
    color: inherit;
    text-decoration: none;
    font-size: var(--fs-a);
    font-weight: var(--fw-a)
}

button {
    font-family: inherit;
    font-size: var(--fs-button);
    font-weight: var(--fw-button)
}

label {
    font-size: var(--fs-label);
    font-weight: var(--fw-label)
}

h1 {
    font-size: var(--fs-h1);
    font-weight: var(--fw-h1);
    letter-spacing: -.045em;
    line-height: 1.02
}

h2 {
    font-size: var(--fs-h2);
    font-weight: var(--fw-h2);
    letter-spacing: -.035em;
    line-height: 1.08
}

h3 {
    font-size: var(--fs-h3);
    font-weight: var(--fw-h3);
    line-height: 1.18
}

h4 {
    font-size: var(--fs-h4);
    font-weight: var(--fw-h4)
}

p {
    font-size: var(--fs-p);
    font-weight: var(--fw-p);
    line-height: 1.75
}

.container {
    width: min(calc(100% - 48px),1240px);
    margin: 0 auto
}

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 200;
    background: transparent
}
.info-contact-te { position:relative; display:flex; background:#496b9b; width:100%}
.content-info-contact-te {display:flex;max-width: 1230px;margin:10px auto;justify-content: space-between;width: 90%;color: #fff;font-size: 13px;}
.scroll-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg,var(--electric),#62b6ff)
}

/* header */
.topbar {
    background: var(--navy);
    color: #b8c7dc
}

.topbar-inner {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 34px
}

.topbar span {
    font-size: 11px;
    letter-spacing: .02em
}

.topbar i {
    color: var(--electric-2);
    margin-right: 7px
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 90;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(16,31,63,.08)
}

.header-inner {
    height: 82px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 34px
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px
}

.brand img {
    max-width: 220px;
    max-height: 54px;
    object-fit: contain
}

.brand-mark {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    background: var(--electric);
    color: #fff;
    font-size: 21px
}

.brand-copy {
    display: flex;
    flex-direction: column
}

.brand-copy b {
    font-size: 18px;
    color: var(--navy);
    letter-spacing: .02em
}

.brand-copy small {
    font-size: 9px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-top: 3px
}

.main-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px
}

.main-nav a {
    position: relative;
    color: #25344f
}

.main-nav a:after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -8px;
    height: 2px;
    background: var(--electric);
    transition: .25s
}

.main-nav a:hover {
    color: var(--electric)
}

.main-nav a:hover:after {
    right: 0
}

.header-search {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--electric);
    color: #fff;
    padding: 14px 18px;
    box-shadow: 0 10px 25px rgba(6,103,255,.24)
}

.header-search:hover {
    background: var(--electric-dark)
}

.nav-toggle {
    display: none;
    border: 0;
    background: transparent;
    color: var(--navy);
    font-size: 23px
}

/* buttons and typography helpers */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 50px;
    padding: 0 21px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: .22s ease
}

.btn-primary {
    background: var(--electric);
    border-color: var(--electric);
    color: #fff;
    box-shadow: 0 12px 28px rgba(6,103,255,.18)
}

.btn-primary:hover {
    background: var(--electric-dark);
    border-color: var(--electric-dark);
    transform: translateY(-2px)
}

.btn-outline {
    background: #fff;
    border-color: #cfd8e3;
    color: var(--navy)
}

.btn-outline:hover {
    border-color: var(--electric);
    color: var(--electric)
}

.btn-light {
    background: #fff;
    color: var(--navy);
    border-color: #fff
}

.btn-light:hover {
    color: var(--electric)
}

.btn:disabled {
    opacity: .65;
    cursor: wait;
    transform: none
}
.search-hero-copy .eyebrow { color:#fff }
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--electric);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .18em
}

.eyebrow:before {
    content: "";
    width: 22px;
    height: 2px;
    background: currentColor
}

.section {
    padding: 92px 0
}

.section-soft {
    background: var(--soft)
}

.section-dark {
    background: var(--navy);
    color: #fff
}

.section-heading {
    max-width: 840px;
    margin-bottom: 34px
}

.section-heading.center {
    text-align: center;
    margin-left: auto;
    margin-right: auto
}

.section-heading h2,.content-block h2,.editorial-copy h2 {
    margin: 11px 0 16px;
    color: var(--navy)
}

.section-dark .section-heading h2 {
    color: #fff
}

.section-heading p {
    margin: 0;
    color: var(--muted)
}

.section-dark .section-heading p {
    color: #b6c5d7
}

.content-block p,.editorial-copy p,.long-copy,.shipping-detail-grid p,.shipping-steps p {
    color: var(--muted);
    text-align: justify;
    text-justify: inter-word
}

.section-dark .content-block p {
    color: #c0cee0
}

.center-actions {
    text-align: center;
    margin-top: 30px
}

/* hero */
.hero {
    position: relative;
    min-height: 690px;
    background: linear-gradient(115deg,#07152d 0%,#0a2147 54%,#0667ff 140%);
    background-image: linear-gradient(110deg,rgba(5,18,39,.95),rgba(7,32,71,.90),rgba(6,103,255,.35)),var(--hero);
    background-size: cover;
    background-position: center;
    color: #fff
}

 
.hero-grid {
    position: relative;
    z-index: 2;
    min-height: 690px;
    display: grid;
    grid-template-columns: minmax(0,1.25fr) minmax(330px,.75fr);
    align-items: center;
    gap: 70px
}

.hero-copy {
    padding: 80px 0
}

.hero .eyebrow {
    color: #7fc2ff
}

.hero h1 {
    max-width: 820px;
    margin: 14px 0 22px;
    color: #fff
}

.hero-lead {
    max-width: 760px;
    margin: 0;
    color: #d5e0ed
}

.hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 30px
}

.hero-trust {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    margin-top: 28px
}

.hero-trust span {
    font-size: 12px;
    color: #c8d8e7
}

.hero-trust i {
    color: #55b4ff;
    margin-right: 7px
}

.hero-spotlight {
    position: relative;
    background: #fff;
    color: var(--ink);
    padding: 34px;
    border-top: 5px solid var(--electric);
    box-shadow: 0 30px 70px rgba(0,0,0,.22)
}

.hero-spotlight:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg,transparent 60%,rgba(6,103,255,.07));
    pointer-events: none
}

.spotlight-kicker {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .17em;
    color: var(--electric);
    font-weight: 600
}

.hero-spotlight h2 {
    margin: 10px 0;
    color: var(--navy);
    font-size: var(--fs-h2)
}

.hero-spotlight p {
    color: var(--muted);
    text-align: justify
}

.spotlight-code {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 16px 0;
    margin: 20px 0
}

.spotlight-code small {
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase
}

.spotlight-code strong {
    font-size: 25px;
    color: var(--electric)
}

.hero-spotlight>a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--electric)
}

/* brand selector inspired by a brand-first browsing pattern */
.brand-selector,.brand-browser {
    background: #fff;
    border-bottom: 1px solid var(--line)
}

.brand-selector {
    padding: 24px 0
}

.brand-selector-head,.brand-browser-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px
}

.brand-selector-head span,.brand-browser-head span {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy)
}

.brand-selector-head a {
    color: var(--electric)
}

.brand-browser {
    padding: 30px 0
}

.brand-browser-head small {
    color: var(--muted);
    font-size: 11px
}

.brand-pills {
    display: flex;
    gap: 9px;
    flex-wrap: wrap
}

.brand-pills a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 15px;
    border: 1px solid var(--line);
    background: #fff;
    color: #34425a;
    transition: .2s
}

.brand-pills a:hover {
    background: var(--electric);
    border-color: var(--electric);
    color: #fff;
    transform: translateY(-2px)
}

.brand-pills.large a {
    min-width: 120px
}

/* request form */
.request-search-section {
    background: linear-gradient(180deg,#fff 0%,#f4f8ff 100%)
}

.request-layout {
    display: grid;
    grid-template-columns: .88fr 1.12fr;
    gap: 58px;
    align-items: start
}

.request-intro {
    position: sticky;
    top: 120px
}

.request-intro h2 {
    margin: 12px 0 16px;
    color: var(--navy)
}

.request-points {
    display: grid;
    gap: 12px;
    margin-top: 26px
}

.request-points>div {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 13px;
    align-items: center;
    padding: 14px 0;
    border-top: 1px solid var(--line)
}

.request-points i {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: var(--soft-blue);
    color: var(--electric)
}

.request-points b,.request-points small {
    display: block
}

.request-points b {
    font-size: 13px;
    color: var(--navy)
}

.request-points small {
    font-size: 11px;
    color: var(--muted);
    margin-top: 3px
}

.request-form-shell {
    background: #fff;
    border: 1px solid #dce4ed;
    box-shadow: var(--shadow)
}

.form-shell-head {
    padding: 26px 28px 20px;
    border-bottom: 1px solid var(--line)
}

.form-shell-head>span {
    display: inline-flex;
    background: var(--soft-blue);
    color: var(--electric);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    padding: 6px 9px
}

.form-shell-head h3 {
    margin: 10px 0 5px;
    color: var(--navy)
}

.form-shell-head p {
    font-size: calc(var(--fs-p) * .82);
    color: var(--muted);
    margin: 0
}

.classic-engine-form {
    padding: 26px 28px
}

.classic-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px
}

.classic-form-grid label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: #23324a
}

.classic-form-grid label.wide {
    grid-column: 1/-1
}

.classic-engine-form input {
    width: 100%;
    height: 52px;
    padding: 0 14px;
    border: 1px solid #ccd6e2;
    background: #fff;
    color: var(--ink);
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: .18s
}

.classic-engine-form input:focus {
    border-color: var(--electric);
    box-shadow: 0 0 0 4px rgba(6,103,255,.09)
}

.classic-engine-form input::placeholder {
    color: #99a5b4
}

.classic-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 18px
}

.request-privacy {
    display: flex!important;
    flex-direction: row!important;
    align-items: flex-start!important;
    gap: 9px!important;
    color: var(--muted)!important;
    font-size: 11px!important;
    font-weight: 400!important;
    line-height: 1.5
}

.request-privacy input {
    width: auto;
    height: auto;
    margin-top: 3px
}

.request-form-status {
    margin-top: 14px;
    font-size: 12px;
    line-height: 1.6
}

.request-form-status.ok {
    padding: 13px;
    background: #e8f8f0;
    color: #176d48
}

.request-form-status.error {
    padding: 13px;
    background: #ffeded;
    color: #9f2f2f
}

.hp-field {
    position: absolute!important;
    left: -9999px!important;
    opacity: 0!important
}

/* image/content sections */
.split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center
}

.split-grid.reverse>.content-block {
    order: 1
}

.split-grid.reverse>.photo-frame {
    order: 2
}

.photo-collage {
    position: relative;
    padding-right: 85px
}

.photo-frame {
    position: relative;
    min-height: 390px;
    background: linear-gradient(145deg,#eaf1f8,#dce7f0);
    overflow: hidden
}

.photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0
}

.photo-frame.tall {
    min-height: 520px
}

.photo-collage .small {
    position: absolute;
    right: 0;
    bottom: 40px;
    width: 42%;
    min-height: 250px;
    border: 8px solid #fff;
    box-shadow: var(--shadow)
}

.photo-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 12px;
    color: #7e95a8
}

.photo-placeholder i {
    font-size: 46px;
    color: #7ab8f6
}

.photo-placeholder span {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .12em
}

.content-block .eyebrow {
    margin-bottom: 6px
}

.check-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
    margin: 24px 0
}

.check-list span {
    font-size: 12px;
    color: #34425a
}

.check-list i {
    color: var(--electric);
    margin-right: 8px
}

/* solution / cards */
.solution-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px
}

.solution-card {
    background: #101f3f;
    border: 1px solid rgba(255,255,255,.09);
    padding: 28px;
    position: relative;
    overflow: hidden
}

.solution-card:after {
    content: "";
    position: absolute;
    right: -80px;
    bottom: -80px;
    width: 180px;
    height: 180px;
    border: 36px solid rgba(6,103,255,.12);
    border-radius: 50%
}

.solution-media {
    height: 210px;
    background: #0b1730;
    display: grid;
    place-items: center;
    overflow: hidden;
    margin-bottom: 20px
}

.solution-media img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.solution-media i {
    font-size: 52px;
    color: #63b6ff
}

.solution-card>span {
    font-size: 10px;
    color: #63b6ff
}

.solution-card h3 {
    color: #fff;
    margin: 8px 0 10px
}

.solution-card p {
    color: #b9c8d8;
    text-align: justify
}

.solution-card a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #75c0ff;
    position: relative;
    z-index: 2
}

.engine-mini-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 15px
}

.engine-mini {
    border: 1px solid var(--line);
    background: #fff;
    padding: 22px;
    display: flex;
    flex-direction: column;
    min-height: 255px;
    transition: .2s
}

.engine-mini:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
    border-color: #b9cff0
}

.engine-brand {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--electric);
    font-weight: 600
}

.engine-mini h3 {
    margin: 10px 0 8px;
    color: var(--navy)
}

.engine-mini p {
    font-size: calc(var(--fs-p) * .78);
    color: var(--muted);
    line-height: 1.65
}

.engine-mini p strong {
    color: #34425a
}

.engine-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 12px 0
}

.engine-tags span {
    display: inline-flex;
    padding: 6px 8px;
    background: var(--soft-blue);
    color: var(--electric);
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em
}

.engine-mini>a {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 43px;
    background: var(--green);
    color: #fff
}

.engine-mini>a:hover {
    filter: brightness(.94)
}

/* page heroes */
.page-hero {
    position: relative;
    min-height: 500px;
    color: #fff;
    background: linear-gradient(115deg,#07152d,#0a2147);
    background-image: linear-gradient(105deg,rgba(5,18,39,.94),rgba(8,33,74,.80),rgba(6,103,255,.26)),var(--hero);
    background-size: cover;
    background-position: center
}

.page-hero-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 78% 50%,rgba(6,103,255,.16),transparent 38%)
}

.page-hero-copy {
    position: relative;
    z-index: 2;
    padding: 112px 0;
    max-width: 900px
}

.page-hero h1 {
    margin: 14px 0 20px;
    color: #fff
}

.page-hero h1 em {
    font-style: normal;
    color: #75c0ff
}
.search-form-card-body  p {
    max-width: 820px;
    color: #1e1e1e !important;
    text-align: justify
}
.page-hero p {
    max-width: 820px;
    color: #ffffff;
    text-align: justify
}

.catalog-hero {
    min-height: 440px
}

.catalog-hero .page-hero-copy {
    padding: 92px 0
}

/* catalog */
.catalog-listing {
    padding-top: 78px
}

.brand-engine-section {
    padding: 32px 0 54px;
    border-top: 1px solid var(--line);
    scroll-margin-top: 110px
}

.brand-section-title {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px
}

.brand-section-title h2 {
    margin: 5px 0 0;
    color: var(--navy)
}

.brand-count {
    font-size: 11px;
    color: var(--muted);
    background: var(--soft);
    padding: 9px 11px
}

.engine-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 16px
}

.engine-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    background: #fff;
    padding: 22px;
    min-height: 330px;
    display: flex;
    flex-direction: column;
    transition: .22s
}

.engine-card:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--mx,80%) var(--my,20%),rgba(6,103,255,.08),transparent 34%);
    opacity: 0;
    transition: .2s;
    pointer-events: none
}

.engine-card:hover:before {
    opacity: 1
}

.engine-card:hover {
    transform: translateY(-4px);
    border-color: #b5c9e8;
    box-shadow: var(--shadow)
}

.engine-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2
}

.engine-card-brand {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .13em;
    color: var(--electric);
    font-weight: 600
}

.engine-type-icon {
    width: 37px;
    height: 37px;
    display: grid;
    place-items: center;
    background: var(--soft-blue);
    color: var(--electric)
}

.engine-card h3 {
    margin: 14px 0 12px;
    color: var(--navy);
    position: relative;
    z-index: 2
}

.application-block {
    position: relative;
    z-index: 2;
    border-top: 1px solid var(--line);
    padding-top: 13px
}

.application-block small {
    display: block;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #8b98a8;
    margin-bottom: 5px
}

.application-block p {
    margin: 0;
    font-size: calc(var(--fs-p) * .78);
    color: #4d5e73;
    line-height: 1.65
}

.engine-data-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
    position: relative;
    z-index: 2
}

.engine-data-row span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: #53657a;
    background: #f6f8fb;
    padding: 7px 8px
}

.engine-data-row i {
    color: var(--electric)
}

.engine-card .engine-tags {
    position: relative;
    z-index: 2
}

.engine-wa {
    position: relative;
    z-index: 2;
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    background: var(--green);
    color: #fff
}

.engine-wa i {
    font-size: 18px
}

.engine-wa:hover {
    filter: brightness(.94)
}

.engine-wa.disabled {
    background: #e9eef2;
    color: #7b8997
}

/* about/editorial */
.editorial-grid {
    display: grid;
    grid-template-columns: .82fr 1.1fr .82fr;
    gap: 28px;
    align-items: center
}

.editorial-photo {
    min-height: 440px
}

.editorial-copy {
    padding: 10px
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 16px
}

.gallery-grid .photo-frame {
    min-height: 300px
}

.process-line {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    margin-top: 26px;
    border: 1px solid rgba(255,255,255,.10)
}

.process-line article {
    padding: 28px;
    min-height: 210px;
    border-right: 1px solid rgba(255,255,255,.10)
}

.process-line article:last-child {
    border-right: 0
}

.process-line b {
    font-size: 11px;
    color: #66b9ff
}

.process-line h3 {
    color: #fff;
    margin: 14px 0 10px
}

.process-line p {
    font-size: calc(var(--fs-p) * .78);
    color: #aebfd1;
    text-align: justify
}

.value-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 15px
}

.value-grid article {
    padding: 25px;
    border: 1px solid var(--line);
    background: #fff
}

.section-dark .value-grid article {
    background: #101f3f;
    border-color: rgba(255,255,255,.09)
}

.value-grid i {
    font-size: 25px;
    color: var(--electric)
}

.value-grid h3 {
    margin: 14px 0 8px;
    color: var(--navy)
}

.section-dark .value-grid h3 {
    color: #fff
}

.value-grid p {
    font-size: calc(var(--fs-p) * .78);
    margin: 0;
    color: var(--muted);
    text-align: justify
}

.section-dark .value-grid p {
    color: #aebfd1
}

/* shipping */
.shipping-steps {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 16px
}

.shipping-steps article {
    border: 1px solid var(--line);
    padding: 16px;
    background: #fff
}

.step-photo {
    height: 190px;
    background: var(--soft-blue);
    display: grid;
    place-items: center;
    overflow: hidden;
    margin-bottom: 16px
}

.step-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.step-photo i {
    font-size: 43px;
    color: #6caef1
}

.shipping-steps b {
    font-size: 10px;
    color: var(--electric)
}

.shipping-steps h3 {
    margin: 9px 0;
    color: var(--navy)
}

.shipping-steps p {
    font-size: calc(var(--fs-p) * .78)
}

.shipping-detail-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 15px
}

.shipping-detail-grid article {
    padding: 25px;
    background: #101f3f;
    border: 1px solid rgba(255,255,255,.09)
}

.shipping-detail-grid i {
    font-size: 26px;
    color: #62b9ff
}

.shipping-detail-grid h3 {
    color: #fff;
    margin: 14px 0 8px
}

.shipping-detail-grid p {
    font-size: calc(var(--fs-p) * .78);
    color: #afc0d1;
    margin: 0
}

/* footer */
.prefooter {
    background: linear-gradient(110deg,var(--electric-dark),var(--electric));
    color: #fff;
    padding: 54px 0
}

.prefooter-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    align-items: center
}

.prefooter .eyebrow {
    color: #d7ebff
}

.prefooter h2 {
    margin: 8px 0 10px;
    color: #fff;
    font-size: min(var(--fs-h2),38px)
}

.prefooter p {
    margin: 0;
    color: #dbeaff;
    max-width: 760px
}

.prefooter-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.site-footer {
    background: #071326;
    color: #9fb0c4;
    padding: 58px 0 22px
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr .8fr .9fr .9fr;
    gap: 40px
}

.footer-grid h3 {
    color: #fff
}

.footer-grid h4 {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 11px
}

.footer-grid p {
    font-size: calc(var(--fs-p) * .76);
    color: #9fb0c4;
    text-align: justify
}

.footer-grid a,.footer-grid span {
    display: block;
    font-size: 12px;
    margin: 9px 0
}

.footer-grid a:hover {
    color: #fff
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid rgba(255,255,255,.10);
    padding-top: 18px;
    margin-top: 28px;
    font-size: 10px
}

.wa-floating {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--green);
    color: #fff;
    padding: 14px 17px;
    box-shadow: 0 16px 35px rgba(0,0,0,.22)
}

.wa-floating i {
    font-size: 20px
}

/* animation */
.reveal-up,.reveal-left,.reveal-right {
    opacity: 0;
    transition: opacity .65s ease,transform .65s ease
}

.reveal-up {
    transform: translateY(22px)
}

.reveal-left {
    transform: translateX(-24px)
}

.reveal-right {
    transform: translateX(24px)
}

.is-visible {
    opacity: 1!important;
    transform: none!important
}

.delay-1 {
    transition-delay: .08s
}

.delay-2 {
    transition-delay: .16s
}

.delay-3 {
    transition-delay: .24s
}

@media(max-width: 1100px) {
    .main-nav {
        display:none;
        position: absolute;
        top: 82px;
        left: 0;
        right: 0;
        background: #fff;
        padding: 18px 24px;
        flex-direction: column;
        align-items: stretch;
        box-shadow: 0 20px 40px rgba(8,31,51,.12)
    }

    .main-nav.open {
        display: flex
    }

    .nav-toggle {
        display: block;
        justify-self: end
    }

    .header-inner {
        grid-template-columns: auto 1fr auto
    }

    .header-search {
        display: none
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 0
    }

    .hero {
        min-height: auto
    }

    .hero-grid {
        min-height: auto;
        padding: 35px 0 55px
    }

    .hero-copy {
        padding: 55px 0 25px
    }

    .hero-spotlight {
        max-width: 650px
    }

    .request-layout,.split-grid,.editorial-grid {
        grid-template-columns: 1fr
    }

    .request-intro {
        position: static
    }

    .photo-collage {
        max-width: 760px
    }

    .engine-mini-grid,.engine-grid,.shipping-steps,.value-grid,.shipping-detail-grid {
        grid-template-columns: 1fr 1fr
    }

    .gallery-grid {
        grid-template-columns: 1fr 1fr
    }

    .process-line {
        grid-template-columns: 1fr 1fr
    }

    .process-line article:nth-child(2) {
        border-right: 0
    }

    .process-line article:nth-child(-n+2) {
        border-bottom: 1px solid rgba(255,255,255,.10)
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width: 720px) {
    :root {
        --mobile-gutter:18px
    }

    .container {
        width: min(calc(100% - 36px),1240px)
    }

    .topbar {
        display: none
    }

    .header-inner {
        height: 72px
    }

    .main-nav {
        top: 72px
    }

    .brand-copy small {
        display: none
    }

    .brand img {
        max-width: 170px
    }

    .brand-mark {
        width: 42px;
        height: 42px
    }

    .hero-copy {
        padding-top: 38px
    }

    .hero h1 {
        font-size: min(var(--fs-h1),44px)
    }

    h2 {
        font-size: min(var(--fs-h2),34px)
    }

    h3 {
        font-size: min(var(--fs-h3),22px)
    }
.hero-actions { flex-direction:column}
    .hero-lead {
        font-size: min(var(--fs-p),15px)
    }

    .hero-trust {
        display: grid;
        gap: 8px
    }

    .hero-spotlight {
        padding: 24px
    }

    .hero-spotlight h2 {
        font-size: min(var(--fs-h2),34px)
    }

    .brand-selector-head,.brand-browser-head {
        align-items: flex-start;
        flex-direction: column
    }

    .brand-pills {
        flex-wrap: nowrap;
        overflow: auto;
        padding-bottom: 5px
    }

    .brand-pills a {
        flex: 0 0 auto
    }

    .section {
        padding: 64px 0
    }

    .classic-form-grid {
        grid-template-columns: 1fr
    }

    .classic-form-grid label.wide {
        grid-column: auto
    }

    .classic-form-footer {
        align-items: stretch;
        flex-direction: column
    }

    .classic-form-footer .btn {
        width: 100%
    }

    .request-form-shell,.classic-engine-form,.form-shell-head {
        padding-left: 18px;
        padding-right: 18px
    }

    .split-grid {
        gap: 34px
    }

    .photo-collage {
        padding: 0
    }

    .photo-collage .small {
        position: relative;
        width: 100%;
        min-height: 220px;
        border: 0;
        margin-top: 12px
    }

    .photo-frame,.photo-frame.tall {
        min-height: 320px
    }

    .check-list {
        grid-template-columns: 1fr
    }

    .solution-grid,.engine-mini-grid,.engine-grid,.shipping-steps,.value-grid,.shipping-detail-grid,.gallery-grid,.footer-grid {
        grid-template-columns: 1fr
    }

    .solution-media {
        height: 180px
    }

    .page-hero {
        min-height: 390px
    }

    .page-hero-copy,.catalog-hero .page-hero-copy {
        padding: 70px 0
    }

    .page-hero h1 {
        font-size: min(var(--fs-h1),42px)
    }

    .brand-section-title {
        align-items: flex-start;
        flex-direction: column
    }

    .engine-card {
        min-height: 300px
    }

    .process-line {
        grid-template-columns: 1fr
    }

    .process-line article {
        border-right: 0!important;
        border-bottom: 1px solid rgba(255,255,255,.10)!important
    }

    .process-line article:last-child {
        border-bottom: 0!important
    }

    .prefooter-inner {
        grid-template-columns: 1fr
    }

    .prefooter-actions .btn {
        width: 100%
    }

    .footer-bottom {
        flex-direction: column
    }

    .wa-floating {
        width: 54px;
        height: 54px;
        border-radius: 50%;
        padding: 0;
        justify-content: center
    }

    .wa-floating span {
        display: none
    }

    .wa-floating i {
        font-size: 24px
    }
}

@media(prefers-reduced-motion:reduce) {
    * {
        scroll-behavior: auto!important
    }

    .reveal-up,.reveal-left,.reveal-right {
        opacity: 1!important;
        transform: none!important;
        transition: none!important
    }

    .engine-card,.engine-mini,.btn {
        transition: none!important
    }
}

/* =========================================================
   v5 - catalogo motori + footer contatti
========================================================= */
.catalog-hero-v5 {
    min-height: 600px
}

.catalog-hero-v5-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0,1.25fr) 390px;
    gap: 58px;
    align-items: center;
    min-height: 600px
}

.catalog-hero-v5 .page-hero-copy {
    padding: 86px 0;
    max-width: none
}

.catalog-hero-v5 .page-hero-copy p {
    max-width: 760px
}

.catalog-hero-points {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
    margin-top: 34px
}

.catalog-hero-points>span {
    display: grid;
    grid-template-columns: 34px 1fr;
    column-gap: 9px;
    align-items: center;
    padding: 14px 15px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(7,19,38,.46);
    backdrop-filter: blur(10px)
}

.catalog-hero-points i {
    grid-row: 1/3;
    color: #69b4ff;
    font-size: 20px
}

.catalog-hero-points b {
    font-size: 14px;
    color: #fff
}

.catalog-hero-points small {
    font-size: 10px;
    color: #b9c9dc;
    line-height: 1.35
}

.catalog-hero-card {
    background: #fff;
    color: var(--ink);
    padding: 30px;
    border-top: 4px solid var(--electric);
    box-shadow: 0 30px 80px rgba(0,0,0,.22)
}

.catalog-hero-card-kicker {
    display: block;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 10px;
    font-weight: 600;
    color: var(--electric)
}

.catalog-hero-card h2 {
    color: var(--navy);
    margin: 10px 0 12px
}

.catalog-hero-card p {
    color: var(--muted);
    font-size: calc(var(--fs-p)*.84);
    text-align: justify;
    margin-bottom: 20px
}

.catalog-hero-card a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: var(--electric);
    color: #fff;
    min-height: 48px;
    padding: 0 18px
}

.catalog-hero-card a:hover {
    background: var(--electric-dark)
}

.brand-browser-v5 {
    padding: 48px 0;
    background: #fff
}

.brand-browser-v5 .brand-browser-head {
    align-items: end;
    margin-bottom: 24px
}

.brand-browser-v5 .brand-browser-head h2 {
    font-size: min(var(--fs-h2),34px);
    margin: 7px 0 0;
    color: var(--navy)
}

.brand-browser-v5 .brand-browser-head small {
    max-width: 360px;
    text-align: right;
    line-height: 1.6
}

.brand-pills-v5 {
    gap: 10px
}

.brand-pills-v5 a {
    gap: 10px;
    justify-content: space-between;
    min-width: 150px;
    padding: 0 16px;
    border-color: #d9e3ef;
    background: #f9fbfe;
    color: var(--navy)
}

.brand-pills-v5 a i {
    font-size: 10px;
    color: var(--electric)
}

.brand-pills-v5 a:hover i {
    color: #fff
}

.engine-explain-v5 .content-block p {
    max-width: 700px;
    text-align: justify
}

.catalog-listing-v5 {
    background: #f7f9fc;
    padding-top: 84px
}

.catalog-heading-v5 {
    max-width: 850px;
    margin-bottom: 30px
}

.brand-engine-section-v5 {
    padding: 44px 0 58px;
    border-top: 1px solid #dfe7f1
}

.brand-section-title-v5 {
    display: grid;
    grid-template-columns: 58px 1fr auto;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px
}

.brand-title-mark {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg,var(--electric),var(--electric-2));
    color: #fff;
    font-size: 23px;
    font-weight: 600;
    box-shadow: 0 12px 28px rgba(6,103,255,.22)
}

.brand-title-copy .eyebrow {
    margin: 0
}

.brand-title-copy h2 {
    margin: 3px 0;
    color: var(--navy);
    font-size: min(var(--fs-h2),34px)
}

.brand-title-copy p {
    margin: 0;
    color: var(--muted);
    font-size: 12px
}

.brand-section-title-v5 .brand-count {
    justify-self: end;
    border: 1px solid #dce6f1;
    background: #fff;
    color: #52647b
}

.catalog-v5-grid {
    grid-template-columns: repeat(3,1fr);
    gap: 18px
}

.catalog-v5-card {
    padding: 0;
    min-height: 390px;
    border: 1px solid #dce5ef;
    box-shadow: 0 8px 26px rgba(11,23,48,.045);
    background: #fff
}

.catalog-v5-card:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg,var(--electric),#68b7ff)
}

.catalog-v5-card .engine-card-top {
    padding: 22px 22px 0
}

.catalog-v5-card h3 {
    font-size: min(var(--fs-h3),30px);
    margin: 16px 22px 12px;
    color: var(--navy);
    letter-spacing: -.02em
}

.catalog-v5-card .engine-type-icon {
    background: #eef5ff;
    color: var(--electric);
    border: 1px solid #dcecff
}

.engine-main-spec {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 22px 14px
}

.engine-main-spec span {
    font-size: 11px;
    color: #44546a;
    background: #f3f6fa;
    border: 1px solid #e4eaf1;
    padding: 7px 9px
}

.application-chips {
    margin: 0 22px;
    padding-top: 14px
}

.application-chips>div {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 8px
}

.application-chips>div span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 9px;
    background: #fff;
    border: 1px solid #dce5ef;
    color: #394b61;
    font-size: 10px
}

.application-chips>div span:first-child {
    border-color: #b9d7ff;
    background: #f0f7ff;
    color: #0756c9
}

.engine-tags-v5 {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin: 16px 22px 18px
}

.engine-tags-v5 span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    background: #f5f8fc;
    color: #42566f;
    font-size: 10px;
    border: 1px solid #e1e8f0
}

.engine-tags-v5 i {
    color: var(--electric)
}

.engine-wa-v5 {
    margin: 0 22px 22px;
    min-height: 52px;
    background: #16a66a;
    padding: 0 14px;
    display: grid;
    grid-template-columns: 20px 1fr auto
}

.engine-wa-v5 i {
    font-size: 19px
}

.engine-wa-v5 span {
    text-align: left;
    font-size: 12px
}

.engine-wa-v5 b {
    font-size: 11px;
    font-weight: 600
}

.catalog-v5-card:hover {
    transform: translateY(-6px);
    border-color: #bcd4f0;
    box-shadow: 0 20px 48px rgba(11,23,48,.11)
}

.catalog-end-v5 .section-heading {
    max-width: 850px
}

.footer-v5 {
    padding-top: 64px
}

.footer-grid-v5 {
    grid-template-columns: 1.25fr .62fr 1fr 1.2fr;
    gap: 44px
}

.footer-grid-v5 h3 {
    margin-top: 0
}

.footer-grid-v5 h4 {
    margin: 2px 0 18px
}

.footer-company p {
    max-width: 400px
}

.footer-mini-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 17px
}

.footer-mini-actions a {
    display: inline-flex!important;
    align-items: center;
    gap: 7px!important;
    border: 1px solid rgba(255,255,255,.14);
    padding: 9px 11px;
    margin: 0!important;
    color: #dce8f4!important
}

.footer-mini-actions a:hover {
    border-color: #3a90ff;
    background: rgba(6,103,255,.12)
}

.footer-contact-row,.footer-address {
    display: grid!important;
    grid-template-columns: 30px 1fr;
    gap: 10px;
    align-items: start;
    margin: 0 0 14px!important
}

.footer-contact-row>i,.footer-address>i {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    background: rgba(6,103,255,.13);
    color: #69b4ff
}

.footer-contact-row span,.footer-address span {
    margin: 0!important;
    font-size: 11px!important;
    line-height: 1.5;
    overflow-wrap: anywhere
}

.footer-contact-row b,.footer-address b {
    display: block;
    color: #fff;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 2px
}

.footer-data {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid rgba(255,255,255,.08);
    padding-top: 9px;
    margin-top: 9px
}

.footer-data span,.footer-data b {
    margin: 0!important
}

.footer-data span {
    font-size: 10px!important;
    color: #7f93aa
}

.footer-data b {
    font-size: 11px;
    color: #dbe6f2;
    overflow-wrap: anywhere
}

.footer-pages a {
    position: relative;
    padding-left: 12px
}

.footer-pages a:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 4px;
    background: var(--electric);
    transform: translateY(-50%)
}

.topbar-inner a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #b8c7dc;
    font-size: 11px
}

.topbar-inner a:hover {
    color: #fff
}

@media(max-width: 1100px) {
    .catalog-hero-v5-grid {
        grid-template-columns:1fr;
        gap: 0;
        padding-bottom: 55px
    }

    .catalog-hero-v5 .page-hero-copy {
        padding-bottom: 30px
    }

    .catalog-hero-card {
        max-width: 620px
    }

    .catalog-v5-grid {
        grid-template-columns: 1fr 1fr
    }

    .footer-grid-v5 {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width: 720px) {
    .catalog-hero-v5-grid {
        min-height:auto
    }

    .catalog-hero-points {
        grid-template-columns: 1fr
    }

    .catalog-hero-card {
        padding: 22px
    }

    .brand-browser-v5 .brand-browser-head small {
        text-align: left
    }

    .brand-pills-v5 a {
        min-width: 145px
    }

    .brand-section-title-v5 {
        grid-template-columns: 48px 1fr
    }

    .brand-title-mark {
        width: 48px;
        height: 48px
    }

    .brand-section-title-v5 .brand-count {
        grid-column: 2;
        justify-self: start
    }

    .catalog-v5-grid {
        grid-template-columns: 1fr
    }

    .catalog-v5-card {
        min-height: 370px
    }

    .footer-grid-v5 {
        grid-template-columns: 1fr
    }

    .footer-company p {
        max-width: none
    }
}

/* =========================================================
   v6 - restyling ispirato ai riferimenti utente
========================================================= */
:root {
    --electric: #496b9b;
    --electric-2: #5d80b3;
    --electric-dark: #35547d;
    --navy: #071325;
    --navy-2: #111b2f;
    --soft: #f3f4f6;
    --soft-blue: #eef2f7;
    --line: #d8dfe8;
    --shadow: 0 24px 60px rgba(7,19,37,.12);
}

body {
    background: #f5f5f6;
    color: var(--ink)
}

body.nav-open {
    overflow: hidden
}

p,.long-copy,.content-block p,.editorial-copy p,.solution-card p,.engine-mini p,.product-card-body p,.step-card p,.catalog-side-card p,.hero-side-card p,.page-hero-copy p,.footer-company p,.search-hero-copy p,.benefit-card p {
    text-align: justify
}

.site-header-v6 {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgb(255 255 255 / 92%);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,.08)
}

.site-header-v6 .header-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 26px;
    height: 88px
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #fff;
    text-decoration: none
}

.brand-mark {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg,var(--electric),var(--electric-2));
    color: #fff;
    font-size: 20px;
    box-shadow: 0 10px 30px rgba(73,107,155,.35)
}

.brand-copy b {
    display: block;
    color: #fff;
    font-size: 20px;
    letter-spacing: .01em
}

.brand-copy small {
    display: block;
    color: #000000;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 10px;
    margin-top: 4px
}

.desktop-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px
}

.desktop-nav a {
    color: #000000;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 0;
    position: relative
}

.desktop-nav a:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 2px;
    background: var(--electric-2);
    transition: width .25s ease
}

.desktop-nav a:hover:after,.desktop-nav a.active:after {
    width: 100%
}

.header-search {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 28px;
    border-radius: 10px;
    background: var(--electric);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 16px 32px rgba(73,107,155,.30)
}

.header-search:hover {
    background: var(--electric-dark)
}

.nav-toggle {
    display: none;
    appearance: none;
    border: 0;
    background: transparent;
    color: #101f3f;
    font-size: 28px;
    padding: 8px;
    cursor: pointer
}

.main-nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    opacity: 0;
    visibility: hidden;
    transition: .25s ease;
    z-index: 1001
}

.main-nav-backdrop.open {
    opacity: 1;
    visibility: visible
}

.mobile-nav-v6 {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(420px,100%);
    background: var(--electric);
    color: #fff;
    transform: translateX(-100%);
    transition: transform .28s ease;
    z-index: 1002;
    padding: 18px 32px 28px;
    display: flex;
    flex-direction: column;
    right: 0;
    top: 0;
    height: 100vh;
}

.mobile-nav-v6.open {
    transform: translateX(0)
}

.mobile-nav-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 36px
}

.mobile-nav-title {
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase
}

.nav-close {
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    padding: 6px
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 12px;
}

.mobile-nav-links a {
    display: block;
    color: #fff;
    text-decoration: none;
    font-size: 26px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.2;
    text-align: right;
    padding: 4px 0
}

.mobile-nav-links a.active {
    opacity: .88
}

.mobile-nav-cta {
    margin-top: auto;
    display: grid;
    gap: 12px
}
.mobile-nav-cta .btn-outline-light {
    border: 1px solid rgb(15 86 14 / 45%);
    color: #fff;
    background: #09af2d !important
}
.btn-outline-light {
    /* border: 1px solid rgba(255,255,255,.45); */
    color: #fff;
    background: #087365;
}

.btn-outline-light:hover {
    background: rgb(37 145 106);
}

.hero-ref {
    position: relative;
    min-height: 760px;
    background: linear-gradient(rgba(7,19,37,.58),rgba(7,19,37,.58)),var(--hero,linear-gradient(135deg,#0a1528,#2c3f61));
    background-size: cover;
    background-position: center
}

.hero-ref-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0,1fr) 360px;
    gap: 56px;
    align-items: center;
    min-height: 760px;
    padding: 72px 0
}

.hero-ref .hero-copy {
    max-width: 740px;
    color: #fff
}

.hero-ref .hero-copy h1 {
    font-size: min(var(--fs-h1),72px);
    line-height: 1.02;
    color: #fff;
    letter-spacing: -.035em
}

.hero-ref .hero-copy p {
    color: #d8e2ef;
    max-width: 650px
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px
}

.btn-dark {
    background: #496b9b;
    color: #fff
}

.btn-dark:hover {
    background: #1a1a1a
}

.hero-trust.compact {
    display: none;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 24px;
    color: #d7e0ea
}

.hero-trust.compact span {
    display: inline-flex;
    align-items: center;
    gap: 8px
}

.hero-trust.compact i {
    color: #8ab0e4
}

.hero-side-card,.catalog-side-card {
    background: rgba(10,13,20,.92);
    color: #fff;
    border-radius: 24px;
    padding: 34px 34px 30px;
    box-shadow: 0 28px 70px rgba(0,0,0,.28);
    position: relative;
    overflow: hidden
}


.hero-side-card .mini-kicker,.catalog-side-card .mini-kicker {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 11px;
    color: #d8e3f0;
    margin-bottom: 14px
}

.hero-side-card h3,.catalog-side-card h3 {
    color: #fff;
    font-size: min(var(--fs-h2),32px);
    margin: 0 0 12px
}

.hero-side-points,.search-side-points {
    display: grid;
    gap: 10px;
    margin: 16px 0 24px
}

.hero-side-points span {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03)
}

.side-card-icon,.search-form-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: var(--electric);
    color: #fff;
    font-size: 24px;
    margin-bottom: 14px
}

.side-phone {
    margin-top: 12px;
    background: #fff!important;
    color: var(--navy)!important
}

.intro-band {
    padding-top: 34px
}

.cta-banner {
    background: linear-gradient(135deg,var(--electric-dark),var(--electric));
    color: #fff;
    border-radius: 20px;
    padding: 38px 40px;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 22px;
    align-items: center;
    box-shadow: var(--shadow)
}

.cta-banner h2 {
    color: #fff;
    margin: 6px 0 12px
}

.cta-banner p {
    color: #dce6f2;
    max-width: 760px
}

.split-grid-hero {
    align-items: center;
    gap: 68px
}

.large-photo-frame {
    min-height: 460px
}

.content-block-large h2 {
    font-size: min(var(--fs-h2),54px);
    line-height: 1.02
}

.two-cols {
    grid-template-columns: repeat(2,1fr)
}

.steps-section {
    padding-top: 30px
}

.steps-cards {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px
}

.step-card {
    background: #dde3eb;
    padding: 34px 32px;
    min-height: 295px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 12px 34px rgba(7,19,37,.06)
}

.step-card h3 {
    margin: 8px 0 0
}

.step-card .step-icon {
    font-size: 34px;
    color: var(--navy)
}

.step-link,.step-note {
    margin-top: auto
}

.step-link {
    display: inline-flex;
    align-self: flex-start;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid var(--navy);
    color: var(--navy);
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 600
}

.step-card.card-accent {
    background: var(--electric);
    color: #fff
}

.step-card.card-accent h3,.step-card.card-accent p,.step-card.card-accent .step-icon,.step-card.card-accent .step-note {
    color: #fff
}

.step-card.card-dark {
    background: #090707;
    color: #fff
}

.step-card.card-dark h3,.step-card.card-dark p,.step-card.card-dark .step-icon,.step-card.card-dark .step-note {
    color: #fff
}

.step-note {
    display: inline-flex;
    align-self: flex-start;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
    font-size: 12px
}

.home-product-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px
}

.home-products-lite .home-product-grid,.two-products {
    grid-template-columns: repeat(2,1fr)
}

.product-card {
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(7,19,37,.08);
    border: 1px solid #e2e8f0
}

.product-card-media {
    height: 235px;
    background: #eef2f7
}

.product-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.product-card-body {
    padding: 24px
}

.product-card-body h3 {
    font-size: min(var(--fs-h3),22px);
    margin: 14px 0 12px
}

.product-badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--electric);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em
}

.product-card-body ul {
    list-style: none;
    padding: 0;
    margin: 18px 0 22px;
    display: grid;
    gap: 10px
}

.product-card-body li {
    position: relative;
    padding-left: 18px;
    color: #44546a
}

.product-card-body li:before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--electric);
    font-weight: 700
}

.featured-compact {
    background: #ffffff;
}

.compact-grid {
    grid-template-columns: repeat(3,1fr)
}

.compact-grid .engine-mini {
    background: #fff;
    border: 1px solid rgba(255,255,255,.06)
}

.value-bullets {
    display: grid;
    gap: 12px;
    margin-top: 24px
}

.value-bullets span,.check-list span {
    display: flex;
    align-items: center;
    gap: 10px
}

.search-hero-v6 {
    position: relative;
    min-height: 780px;
    background: linear-gradient(rgba(7,19,37,.56),rgba(7,19,37,.56)),var(--hero,linear-gradient(135deg,#0a1528,#2c3f61));
    background-size: cover;
    background-position: center
}

.search-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0,650px) minmax(280px,1fr);
    gap: 54px;
    align-items: center;
    padding: 64px 0;
    min-height: 780px
}

.search-form-card {
    background: #fff;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,.2)
}

.search-form-card-head {
    padding: 34px 44px;
    background: linear-gradient(180deg,#5678a9 0%,#476792 100%);
    color: #fff;
    position: relative;
    overflow: hidden
}

.search-form-card-head:after {
    content: "";
    position: absolute;
    right: -30px;
    top: -26px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 32px solid rgba(255,255,255,.08)
}

.wizard-badge {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.35);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 16px
}

.wizard-steps {
    display: grid;
    grid-template-columns: 56px 1fr 56px;
    align-items: center;
    gap: 12px;
    margin-top: 30px
}

.wizard-steps span {
    display: grid;
    place-items: center;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
    font-weight: 600
}

.wizard-steps span.active {
    background: #fff;
    color: var(--electric-dark)
}

.wizard-steps span:nth-child(2) {
    width: 100%;
    height: 2px;
    border-radius: 0;
    background: rgba(255,255,255,.35)
}

.wizard-labels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 10px
}

.wizard-labels b:first-child {
    text-align: left
}

.wizard-labels b:last-child {
    text-align: right
}

.search-form-card-body {
    padding: 34px 44px 40px
}

.search-form-intro {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 16px;
    align-items: start;
    margin-bottom: 20px
}

.search-form-intro h2 {
    margin: 3px 0 10px;
    color: #000;
}

.search-hero-copy {
    color: #fff
}

.search-hero-copy h1 {
    color: #fff;
    font-size: min(var(--fs-h1),66px);
    line-height: 1.02
}

.search-hero-copy p {
    color: #d7e1ec;
    max-width: 580px
}

.search-side-points div {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,.09)
}

.search-side-points i {
    color: #8ab0e4;
    font-size: 18px;
    margin-top: 2px
}

.search-side-points b {
    display: block;
    color: #fff;
    font-size: 15px
}

.search-side-points small {
    color: #c8d6e8;
    font-size: 12px;
    line-height: 1.45
}

.request-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px
}

.benefit-card {
    background: #fff;
    padding: 28px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 16px 34px rgba(7,19,37,.06)
}

.benefit-card i {
    font-size: 28px;
    color: var(--electric);
    margin-bottom: 12px
}

.catalog-hero-v6 {
    position: relative;
    min-height: 620px;
    background: linear-gradient(rgba(7,19,37,.58),rgba(7,19,37,.58)),var(--hero,linear-gradient(135deg,#0a1528,#2c3f61));
    background-size: cover;
    background-position: center
}

.catalog-hero-v6-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0,1fr) 330px;
    gap: 56px;
    align-items: center;
    min-height: 620px;
    padding: 54px 0
}

.catalog-hero-v6 .page-hero-copy {
    padding: 0;
    max-width: 760px
}

.catalog-hero-v6 .page-hero-copy h1 {
    color: #fff
}

.catalog-hero-v6 .page-hero-copy p {
    color: #d8e3f0
}

.catalog-hero-points.simple {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 22px
}

.catalog-hero-points.simple span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.10);
    color: #fff
}

.brand-browser-v6 {
    padding: 44px 0 20px;
    background: #fff
}

.catalog-listing-v6 {
    background: #f6f8fb
}

.catalog-v5-card {
    border-radius: 18px;
    overflow: hidden
}

.catalog-v5-card .application-chips small {
    display: block;
    margin-bottom: 8px;
    color: #72839a;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 10px
}

.engine-card-brand {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #6887b1;
    font-weight: 700
}

.about-hero-v6,.shipping-hero-v6 {
    position: relative;
    min-height: 460px;
    background: linear-gradient(rgba(7,19,37,.58),rgba(7,19,37,.58)),var(--hero,linear-gradient(135deg,#0a1528,#2c3f61));
    background-size: cover;
    background-position: center
}

.page-hero-copy {
    position: relative;
    z-index: 2;
    padding: 100px 0;
    max-width: 760px
}

.page-hero-copy h1 {
    color: #fff;
    letter-spacing: -.03em
}

.page-hero-copy p {
    color: #d7e1ec
}

.cards-v6 article {
    padding: 28px 24px;
    background: rgba(255,255,255,.04)
}

.gallery-grid-v6 {
    grid-template-columns: repeat(3,1fr);
    gap: 18px
}

.shipping-steps-v6 article {
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 16px 34px rgba(7,19,37,.06)
}

.shipping-steps-v6 .step-photo {
    height: 180px;
    background: #eef2f7
}

.shipping-steps-v6 .step-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.shipping-steps-v6 article b,.shipping-steps-v6 article h3,.shipping-steps-v6 article p {
    padding-left: 20px;
    padding-right: 20px
}

.shipping-steps-v6 article b {
    display: block;
    padding-top: 16px
}

.shipping-steps-v6 article p {
    padding-bottom: 22px
}

.classic-engine-form {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none
}

.classic-form-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 16px
}

.classic-form-grid label {
    display: grid;
    gap: 8px
}

.classic-form-grid label.wide {
    grid-column: 1 / -1
}

.classic-form-grid input,.classic-form-grid select,.classic-form-grid textarea {
    width: 100%;
    min-height: 58px;
    border-radius: 16px;
    border: 1px solid #d7dee8;
    background: #fff;
    padding: 0 18px;
    font-size: 15px;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease
}

.classic-form-grid input:focus,.classic-form-grid select:focus,.classic-form-grid textarea:focus {
    border-color: #93afd4;
    box-shadow: 0 0 0 4px rgba(73,107,155,.12)
}

.classic-form-grid span {
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
    color: #344054
}

.classic-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px
}

.request-privacy {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: #58667c
}

.request-privacy input {
    margin-top: 3px
}

.request-form-status {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 14px;
    font-size: 14px;
    display: none
}

.request-form-status.ok,.request-form-status.error {
    display: block
}

.request-form-status.ok {
    background: #edf9f1;
    color: #0c6a3d;
    border: 1px solid #cdebd8
}

.request-form-status.error {
    background: #fff1f1;
    color: #a33535;
    border: 1px solid #f2c8c8
}

.prefooter {
    /* background: #fff; */
    padding: 56px 0;
    /* border-top: 1px solid #e4e9f0; */
}

.prefooter-inner {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 26px;
    align-items: center
}

.prefooter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px
}

.footer-v6 {
    background: #071325;
    color: #d5dfeb;
    padding: 70px 0 22px
}

.footer-grid-v6 {
    display: grid;
    grid-template-columns: 1.1fr .7fr .9fr 1.05fr;
    gap: 34px
}

.footer-v6 h3,.footer-v6 h4 {
    color: #fff
}

.footer-v6 a {
    color: #d5dfeb;
    text-decoration: none
}

.footer-v6 a:hover {
    color: #fff
}

.footer-contact-row,.footer-address {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 10px;
    align-items: start;
    margin: 0 0 14px
}

.footer-contact-row i,.footer-address i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    background: rgba(73,107,155,.22);
    color: #b7cae1
}

.footer-contact-row b,.footer-address b {
    display: block;
    color: #fff;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em
}

.footer-contact-row span,.footer-address span {
    font-size: 13px;
    line-height: 1.55
}

.footer-data {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid rgba(255,255,255,.08);
    padding-top: 10px;
    margin-top: 10px
}

.footer-data span {
    font-size: 12px;
    color: #aab7c8
}

.footer-data b {
    font-size: 13px;
    color: #fff
}

.footer-pages a {
    display: block;
    padding: 7px 0
}

.footer-mini-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px
}

.footer-mini-actions a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08)
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 26px;
    margin-top: 24px;
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: 13px
}

.wa-floating {
    background: #22c55e;
    color: #fff;
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 80;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 0 18px;
    border-radius: 999px;
    box-shadow: 0 18px 36px rgba(34,197,94,.28);
    text-decoration: none
}

.wa-floating:hover {
    background: #1daf51
}

@media(max-width: 1180px) {
    .hero-ref-grid,.catalog-hero-v6-grid,.search-hero-grid,.footer-grid-v6,.home-product-grid,.request-benefits-grid,.steps-cards {
        grid-template-columns:1fr 1fr
    }

    .hero-side-card,.catalog-side-card {
        max-width: 420px
    }

    .prefooter-inner {
        grid-template-columns: 1fr
    }
}

@media(max-width: 920px) {
    .site-header-v6 .header-inner {
        grid-template-columns: auto 1fr;
        gap: 14px;
        height: 78px
    }

    .desktop-nav,.header-search {
        display: none
    }

    .nav-toggle {
        display: block;
        justify-self: end
    }

    .hero-ref,.search-hero-v6,.catalog-hero-v6 {
        min-height: auto
    }

    .hero-ref-grid,.search-hero-grid,.catalog-hero-v6-grid,.split-grid-hero,.home-product-grid,.steps-cards,.request-benefits-grid,.footer-grid-v6,.gallery-grid-v6,.compact-grid,.two-products {
        grid-template-columns: 1fr !important;
    }

    .hero-ref-grid,.search-hero-grid,.catalog-hero-v6-grid {
        padding: 54px 0
    }

    .cta-banner,.prefooter-inner,.classic-form-footer {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: stretch
    }

    .hero-ref .hero-copy h1,.search-hero-copy h1 {
        font-size: min(var(--fs-h1),52px)
    }
}

@media(max-width: 640px) {
    .container {
        width:min(calc(100% - 32px),1240px)
    }

    .mobile-nav-v6 {
        padding: 12px 26px 26px
    }

    .mobile-nav-links a {
        font-size: 22px
    }

    .hero-ref .hero-copy h1,.search-hero-copy h1,.page-hero-copy h1 {
        font-size: min(var(--fs-h1),42px)
    }

    .cta-banner {
        padding: 28px 22px;
        border-radius: 16px
    }

    .content-block-large h2 {
        font-size: min(var(--fs-h2),38px)
    }

    .product-card-media {
        height: 190px
    }

    .large-photo-frame {
        min-height: 300px
    }

    .classic-form-grid {
        grid-template-columns: 1fr
    }

    .classic-form-grid label.wide {
        grid-column: auto
    }

    .search-form-card-head,.search-form-card-body {
        padding: 24px 20px
    }

    .search-form-intro {
        grid-template-columns: 1fr
    }

    .wizard-steps {
        grid-template-columns: 46px 1fr 46px
    }

    .wizard-labels {
        font-size: 12px
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start
    }

    .wa-floating {
        width: 58px;
        height: 58px;
        padding: 0;
        justify-content: center
    }

    .wa-floating span {
        display: none
    }

    .wa-floating i {
        font-size: 24px
    }
}