@media only screen and (max-width: 600px) {
    .justify-content-end {
        -webkit-box-pack: end !important;
        -ms-flex-pack: end !important;
        justify-content: center !important;
    }

    .nav-process {
        margin-left: -15px;
    }

    .css-pad {
        padding-top: 50px;
    }
}

.hover-lift{-webkit-transform:translateY(0);transform:translateY(0);-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out}.hover-lift:hover{-webkit-transform:translateY(-10px);transform:translateY(-10px)}.hover-shadow{-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.hover-shadow:hover{-webkit-box-shadow:-1px 3px 15px 0 rgba(0,0,0,.075)!important;box-shadow:-1px 3px 15px 0 rgba(0,0,0,.075)!important}.shadow-box{-webkit-box-shadow:0 5px 5px 0 rgba(0,0,0,.1);box-shadow:0 5px 5px 0 rgba(0,0,0,.1)}

.bg-primary-subtle{background-color:#d6ffe8!important;background-color:var(#d6ffe8)!important}.bg-secondary-subtle{background-color:#e7ebf1!important;background-color:var(#e7ebf1)!important}.bg-success-subtle{background-color:#ccf0e7!important;background-color:var(#ccf0e7)!important}.bg-info-subtle{background-color:#cff4fc!important;background-color:var(#cff4fc)!important}.bg-warning-subtle{background-color:#fff2d9!important;background-color:var(#fff2d9)!important}.bg-danger-subtle{background-color:#ffcce6!important;background-color:var(#ffcce6)!important}.bg-light-subtle{background-color:#fcfdfe!important;background-color:var(#fcfdfe)!important}.bg-dark-subtle{background-color:#c6d3e6!important;background-color:var(#c6d3e6)!important}

.home-hero-browser {
    overflow: hidden;
}

.home-hero-browser img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1000 / 573;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 767px) {
    .home-hero-browser img {
        height: clamp(220px, 58vw, 360px);
    }
}

/* Partner logos hover effect */
.partners .swiper-slide {
    transition: all 0.3s ease-out;
}

.partners .swiper-slide img {
    filter: grayscale(100%) opacity(0.7);
    transition: all 0.3s ease-out;
    max-width: 100%;
    height: auto;
}

.partners .swiper-slide:hover img {
    filter: grayscale(0%) opacity(1);
    transform: scale(1.05);
}

/* Our Work / Projects Section */
.our-work-section {
    padding-bottom: 0;
}

.our-work-section .section-heading {
    position: relative;
}

.our-work-line {
    display: inline-block;
    width: 30px;
    height: 3px;
    background-color: #e91e63;
    vertical-align: middle;
    margin-right: 8px;
}

.our-work-title {
    font-size: 2.5rem;
    letter-spacing: -0.5px;
}

.project-card {
    transition: all 0.3s ease;
}

.project-card img {
    max-width: 100%;
    height: auto;
    transition: transform 0.4s ease;
}

.project-card:hover img {
    transform: scale(1.02);
}

.project-card h3 {
    font-size: 1.75rem;
}

.project-card .badge {
    font-weight: 400;
    font-size: 0.85rem;
}

@media (max-width: 991px) {
    .our-work-title {
        font-size: 2rem;
    }
    .project-card .col-lg-6 {
        margin-top: 1.5rem;
    }
    .btn-block-sm {
        display: block;
        width: 100%;
    }
}

/* See more heading responsive */
@media (max-width: 991px) {
    .see-more-arrow {
        top: 0;
        margin-left: -1.5rem!important;
    }
    .see-more-heading {
        font-size: 1.5rem;
    }
}

@media (min-width: 992px) {
    .see-more-heading {
        font-size: 3.25rem !important;
    }
    .see-more-arrow {
        top: 50px!important;
        margin-left: 2.5rem!important;
    }
}

/* EVIA Values Section */
.evia-values-section {
    background-color: #fff;
}

.evia-value-card {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    padding: 1.5rem;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-color: #eef1f6;
    transition: background-color 0.4s ease;
    cursor: pointer;
}

.evia-value-card .evia-value-title {
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
    color: transparent;
    transition: color 0.4s ease;
    width: 100%;
    text-align: left;
}

.evia-value-card .evia-letter {
    display: block;
    font-size: 8rem;
    font-weight: 800;
    line-height: 0.85;
    color: rgba(0, 0, 0, 0.85);
    text-align: left;
    transition: font-size 0.4s ease, color 0.4s ease;
}

.evia-value-card .evia-value-desc {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 0;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.4s ease 0.1s, max-height 0.4s ease;
    width: 100%;
    text-align: left;
}

/* Hover state */
.evia-value-card:hover {
    background-color: #1a1a2e;
}

.evia-value-card:hover .evia-value-title {
    color: #fff;
}

.evia-value-card:hover .evia-letter {
    display: inline;
    font-size: inherit;
    font-weight: 700;
    color: #fff;
}

.evia-value-card:hover .evia-value-desc {
    opacity: 1;
    max-height: 200px;
    color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 991px) {
    .evia-value-card {
        min-height: 180px;
    }
    .evia-value-card .evia-letter {
        font-size: 7rem;
    }
}

@media (max-width: 575px) {
    .evia-value-card {
        min-height: 160px;
        padding: 1.25rem;
    }
    .evia-value-card .evia-letter {
        font-size: 5.5rem;
    }
}

/* ===== ECOMMERCE PAGE =====
   One accent only: the brand green (#3cdc86). Everything else is ink,
   grey and hairlines. No gradients, no coloured badge palette. */
.eco-page,
.eco-tone,
.home-page {
    --eco-ink: #10161d;
    --eco-ink-2: #5b6570;
    --eco-line: #e4e8ec;
    --eco-line-dark: rgba(255, 255, 255, 0.14);
    --eco-surface: #ffffff;
    --eco-surface-2: #f6f7f8;
    --eco-dark: #0b1016;
    --eco-accent: #3cdc86;
    --eco-accent-dark: #2fc878;
    --eco-accent-ink: #0d7a47;
}

.eco-page h1,
.eco-page h2,
.eco-page h3,
.eco-page h4,
.eco-page h5 {
    color: var(--eco-ink);
    letter-spacing: -0.02em;
}

.eco-page p {
    color: var(--eco-ink-2);
}

.eco-eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--eco-ink-2);
}

.eco-section {
    padding: 6rem 0;
}

/* dashcore pads every [class^="container"] inside a <section> by 90px top and bottom;
   .eco-section owns the vertical rhythm here, so neutralise it. */
.eco-page section > [class^="container"] {
    padding-top: 0;
    padding-bottom: 0;
}

.eco-section--alt {
    background: var(--eco-surface-2);
}

.eco-section--tight {
    padding: 4rem 0;
}

.eco-section + .eco-section:not(.eco-section--alt):not(.eco-accent-block) {
    border-top: 1px solid var(--eco-line);
}

/* ----- Section heading: statement left, context right ----- */
.eco-head {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 2rem 4rem;
    align-items: start;
    margin-bottom: 3.5rem;
}

.eco-head h2 {
    font-size: clamp(1.75rem, 3.1vw, 2.5rem);
    line-height: 1.14;
    margin: 0.75rem 0 0;
}

.eco-head-aside p:last-child {
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .eco-head {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        margin-bottom: 2.5rem;
    }
}

/* ----- Buttons ----- */
.eco-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.6rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.94rem;
    font-weight: 600;
    line-height: 1.2;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.eco-btn-primary {
    background: var(--eco-accent);
    color: #fff;
}

.eco-btn-primary:hover {
    background: var(--eco-accent-dark);
    color: #fff;
}

.eco-btn-dark {
    background: var(--eco-ink);
    color: #fff;
}

.eco-btn-dark:hover {
    background: #000;
    color: #fff;
}

.eco-btn-outline {
    border-color: var(--eco-line);
    color: var(--eco-ink);
}

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

.eco-btn-ghost {
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
}

.eco-btn-ghost:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}

.eco-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--eco-ink);
    border-bottom: 1px solid var(--eco-ink);
    padding-bottom: 0.15rem;
}

.eco-link:hover {
    color: var(--eco-accent-ink);
    border-bottom-color: var(--eco-accent-ink);
}

.eco-link svg,
.eco-link i {
    transition: transform 0.2s ease;
}

.eco-link:hover svg,
.eco-link:hover i {
    transform: translateX(3px);
}

/* ----- Hero ----- */
.eco-hero {
    background: var(--eco-dark);
    padding: 8.5rem 0 0;
}

.eco-hero h1 {
    color: #fff;
    font-size: clamp(2.3rem, 4.9vw, 3.75rem);
    line-height: 1.04;
    letter-spacing: -0.035em;
    margin: 1.25rem 0 0;
}

.eco-hero p {
    color: rgba(255, 255, 255, 0.68);
}

.eco-hero .eco-eyebrow {
    color: var(--eco-accent);
}

.eco-hero-visual {
    border: 1px solid var(--eco-line-dark);
    background: rgba(255, 255, 255, 0.03);
    padding: 0.5rem;
}

.eco-hero-visual img {
    display: block;
    width: 100%;
    height: auto;
}

.eco-hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 5rem;
    border-top: 1px solid var(--eco-line-dark);
}

.eco-hero-stat {
    padding: 1.9rem 1.5rem 1.9rem 0;
    border-right: 1px solid var(--eco-line-dark);
}

.eco-hero-stat:last-child {
    border-right: 0;
}

.eco-hero-stat:not(:first-child) {
    padding-left: 1.5rem;
}

.eco-hero-stat strong {
    display: block;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.eco-hero-stat span {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 767px) {
    .eco-hero {
        padding-top: 6.5rem;
    }
    .eco-hero-stats {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 3rem;
    }
    .eco-hero-stat {
        padding: 1.4rem 1rem 1.4rem 0;
    }
    .eco-hero-stat:nth-child(2n) {
        border-right: 0;
        padding-left: 1rem;
    }
    .eco-hero-stat:nth-child(n + 3) {
        border-top: 1px solid var(--eco-line-dark);
    }
}

/* ----- Sticky section tabs ----- */
.eco-tabs {
    background: #fff;
    border-bottom: 1px solid var(--eco-line);
}

.eco-tabs .nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.eco-tabs .nav::-webkit-scrollbar {
    display: none;
}

.eco-tabs .nav-link {
    padding: 1.1rem 0;
    margin-right: 2.25rem;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    color: var(--eco-ink-2);
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.eco-tabs .nav-link:hover {
    color: var(--eco-ink);
    background: transparent;
}

.eco-tabs .nav-link.active {
    color: var(--eco-ink);
    border-bottom-color: var(--eco-ink);
    background: transparent;
}

.eco-tabs .nav-link:last-child {
    margin-right: 0;
    color: var(--eco-accent-ink);
}

/* ----- Hairline grid ----- */
.eco-grid {
    display: grid;
    gap: 1px;
    border: 1px solid var(--eco-line);
    background: var(--eco-line);
}

.eco-grid > * {
    background: var(--eco-surface);
    padding: 2.25rem;
}

.eco-section--alt .eco-grid > * {
    background: var(--eco-surface-2);
}

.eco-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

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

@media (max-width: 991px) {
    .eco-grid--3 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .eco-grid--2 {
        grid-template-columns: 1fr;
    }
    .eco-grid > * {
        padding: 1.6rem;
    }
}

.eco-num {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--eco-ink-2);
}

.eco-cell {
    display: flex;
    flex-direction: column;
}

.eco-cell h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 1rem 0 0.6rem;
}

.eco-cell p {
    font-size: 0.94rem;
    line-height: 1.6;
    margin: 0;
}

.eco-cell-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--eco-ink-2);
}

.eco-cell-foot {
    margin-top: auto;
    padding-top: 1.5rem;
}

/* ----- Live demos ----- */
.eco-demo {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--eco-line);
    transition: border-color 0.25s ease;
}

.eco-demo:hover {
    border-color: #c9d1d9;
}

.eco-demo-media {
    position: relative;
    display: block;
    overflow: hidden;
    border-bottom: 1px solid var(--eco-line);
    background: var(--eco-surface-2);
}

.eco-demo-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.eco-demo:hover .eco-demo-media img {
    transform: scale(1.03);
}

.eco-demo-zoom {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--eco-dark);
    color: #fff;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.eco-demo:hover .eco-demo-zoom,
.eco-demo-media:focus-visible .eco-demo-zoom {
    opacity: 1;
    transform: translateY(0);
}

.eco-demo-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 2.25rem;
}

.eco-demo-body h3 {
    font-size: 1.35rem;
    margin: 1rem 0 0.75rem;
}

.eco-tag {
    display: inline-block;
    align-self: flex-start;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--eco-line);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--eco-ink-2);
}

.eco-list {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
}

.eco-list li {
    position: relative;
    padding: 0.65rem 0 0.65rem 1.3rem;
    border-top: 1px solid var(--eco-line);
    font-size: 0.92rem;
    color: var(--eco-ink-2);
}

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

.eco-demo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: auto;
    padding-top: 1.75rem;
}

.eco-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    margin-top: 2.5rem;
    padding: 1.9rem 2.25rem;
    border: 1px solid var(--eco-line);
}

.eco-note h3 {
    font-size: 1.1rem;
    margin: 0 0 0.35rem;
}

.eco-note p {
    margin: 0;
    font-size: 0.94rem;
    max-width: 62ch;
}

/* ----- Capabilities ----- */
.eco-accordion .accordion-item {
    border: 0;
    border-top: 1px solid var(--eco-line);
    background: transparent;
    border-radius: 0;
}

.eco-accordion .accordion-item:last-child {
    border-bottom: 1px solid var(--eco-line);
}

.eco-accordion .accordion-button {
    padding: 1.4rem 2.5rem 1.4rem 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    color: var(--eco-ink);
    font-size: 1.02rem;
    font-weight: 700;
}

.eco-accordion .accordion-button:not(.collapsed) {
    color: var(--eco-ink);
    background: transparent;
}

.eco-accordion .accordion-button:focus {
    box-shadow: none;
}

.eco-accordion .accordion-button::after {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    background-size: 1rem;
}

.eco-accordion .accordion-body {
    padding: 0 2.5rem 1.6rem 0;
    color: var(--eco-ink-2);
    font-size: 0.95rem;
    line-height: 1.65;
}

.eco-aside {
    border: 1px solid var(--eco-line);
    background: #fff;
}

.eco-aside-body {
    padding: 2rem;
}

.eco-aside-body + .eco-aside-body {
    border-top: 1px solid var(--eco-line);
}

.eco-aside-body h3 {
    font-size: 1rem;
    margin: 0 0 0.5rem;
}

.eco-aside-body p {
    font-size: 0.92rem;
    margin: 0;
}

/* ----- Accent block (the page's one block of colour) ----- */
.eco-accent-block {
    background: var(--eco-accent);
}

.eco-accent-block h2,
.eco-accent-block h3,
.eco-accent-block p,
.eco-accent-block .eco-eyebrow,
.eco-accent-block .eco-quote-meta,
.eco-accent-block .eco-quote-meta strong {
    color: #fff;
}

.eco-quote {
    font-size: clamp(1.35rem, 2.6vw, 2rem);
    line-height: 1.3;
    letter-spacing: -0.02em;
    font-weight: 600;
    margin: 1.5rem 0 2rem;
}

.eco-quote-meta {
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    font-size: 0.9rem;
}

/* ----- Contact ----- */
.eco-contact-panel {
    height: 100%;
    padding: 3rem;
    background: var(--eco-dark);
}

.eco-contact-panel h2 {
    color: #fff;
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    line-height: 1.15;
    margin: 0.9rem 0 1rem;
}

.eco-contact-panel > p {
    color: rgba(255, 255, 255, 0.68);
}

.eco-contact-panel .eco-eyebrow {
    color: var(--eco-accent);
}

.eco-contact-row {
    display: flex;
    gap: 1rem;
    padding: 1.3rem 0;
    border-top: 1px solid var(--eco-line-dark);
}

.eco-contact-row:first-of-type {
    margin-top: 1rem;
}

.eco-contact-row i {
    color: var(--eco-accent);
    margin-top: 0.25rem;
}

.eco-contact-row h3 {
    color: #fff;
    font-size: 0.95rem;
    margin: 0 0 0.2rem;
}

.eco-contact-row p,
.eco-contact-row a {
    margin: 0;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.68);
}

.eco-contact-row a:hover {
    color: #fff;
}

.eco-form {
    height: 100%;
    padding: 2.75rem;
    background: #fff;
    border: 1px solid var(--eco-line);
}

.eco-form label,
.eco-form .eco-form-label {
    display: block;
    margin-bottom: 0.6rem;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--eco-ink-2);
}

.eco-form .form-control {
    min-height: 50px;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--eco-line);
    border-radius: 0;
    box-shadow: none;
    background: #fff;
    color: var(--eco-ink);
    font-size: 0.95rem;
}

.eco-form .form-control:focus {
    border-color: var(--eco-ink);
    box-shadow: none;
}

.eco-form textarea.form-control {
    min-height: 130px;
    resize: vertical;
}

.eco-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.eco-chip {
    padding: 0.5rem 1rem;
    border: 1px solid var(--eco-line);
    border-radius: 999px;
    background: #fff;
    color: var(--eco-ink-2);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.eco-chip:hover {
    border-color: var(--eco-ink);
    color: var(--eco-ink);
}

.eco-chip.is-active {
    background: var(--eco-ink);
    border-color: var(--eco-ink);
    color: #fff;
}

.eco-btn.loading {
    opacity: 0.65;
    pointer-events: none;
}

.eco-btn.loading-end {
    opacity: 1;
    pointer-events: auto;
}

.eco-form label.error {
    margin: 0.5rem 0 0;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: #b42318;
}

.eco-form .form-control.is-invalid {
    border-color: #b42318;
}

.eco-consent {
    padding: 1rem 1rem 1rem 2.1rem;
    border: 1px solid var(--eco-line);
    background: var(--eco-surface-2);
}

.eco-consent .form-check-label {
    font-size: 0.88rem;
    color: var(--eco-ink-2);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

.eco-consent a {
    color: var(--eco-ink);
    text-decoration: underline;
}

.eco-form .form-check-input:checked {
    background-color: var(--eco-ink);
    border-color: var(--eco-ink);
}

@media (max-width: 767px) {
    .eco-contact-panel,
    .eco-form {
        padding: 1.75rem;
    }
    .eco-note {
        padding: 1.5rem;
    }
    .eco-demo-body {
        padding: 1.6rem;
    }
    .eco-section {
        padding: 4rem 0;
    }
}

/* ----- Anchor offset under the fixed navbar + sticky tab bar ----- */
.eco-page [id],
.eco-section[id] {
    scroll-margin-top: 120px;
}

.contact-project-grid {
    position: relative;
}

.contact-intro-panel {
    background: radial-gradient(circle at top left, rgba(60, 220, 134, 0.28), transparent 42%), linear-gradient(155deg, #132238 0%, #0b1322 100%);
    border-radius: 24px;
    padding: 2.5rem;
    box-shadow: 0 24px 50px rgba(7, 16, 29, 0.28);
}

.contact-eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #9edcb9;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.text-contrast-75 {
    color: rgba(255, 255, 255, 0.75);
}

.contact-awards {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.contact-award-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.7rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    font-size: 0.84rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.contact-side-card {
    padding: 1.1rem 1.2rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.contact-form-card {
    border-radius: 24px;
}

.contact-form-card .form-control {
    min-height: 52px;
    border: 1px solid #d8e2ef;
    border-radius: 14px;
    box-shadow: none;
}

.contact-form-card textarea.form-control {
    min-height: 160px;
    resize: vertical;
}

.contact-upload-box {
    border: 1px dashed #b7c8db;
    border-radius: 18px;
    padding: 1.3rem 1.4rem;
    background: #f7fafc;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.contact-upload-box:hover {
    border-color: #3cdc86;
    background: #f0fbf5;
}

.contact-upload-title,
.contact-upload-subtitle {
    display: block;
}

.contact-upload-title {
    color: #132238;
    font-weight: 700;
}

.contact-upload-subtitle {
    margin-top: 0.25rem;
    color: #6b7a90;
    font-size: 0.92rem;
}

.js-file-upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.contact-consent {
    padding: 1rem 2.1rem;
    border-radius: 16px;
    background: #f7fafc;
    border: 1px solid #e4ebf3;
}

.contact-consent .form-check-input {
    margin-top: 0.25rem;
}

@media (max-width: 991px) {
    .contact-intro-panel,
    .contact-form-card {
        padding: 2rem;
    }
}

@media (max-width: 575px) {
    .contact-intro-panel,
    .contact-form-card {
        padding: 1.5rem;
    }

    .contact-award-pill {
        width: 100%;
        justify-content: center;
    }
}

/* Accessibility text contrast refinements */
.bg-light .text-muted,
.nav-process small {
    color: #4b5b6b !important;
}

.swiper-center-nav .swiper-button,
.swiper-button-next,
.swiper-button-prev {
    color: #3cdc86 !important;
}

.swiper-center-nav .swiper-button:hover {
    background-color: #3cdc86 !important;
    color: #ffffff !important;
}

/* ----- Product pages: shared additions ----- */
.eco-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--eco-line-dark);
}

.eco-stats .eco-hero-stat:last-child {
    border-right: 0;
}

.eco-dark-section {
    background: var(--eco-dark);
}

.eco-dark-section h2,
.eco-dark-section h3 {
    color: #fff;
}

.eco-dark-section p {
    color: rgba(255, 255, 255, 0.68);
}

.eco-dark-section .eco-eyebrow {
    color: var(--eco-accent);
}

.eco-frame {
    border: 1px solid var(--eco-line);
    background: var(--eco-surface-2);
    padding: 0.5rem;
}

.eco-frame img {
    display: block;
    width: 100%;
    height: auto;
}

/* Plan comparison table */
.eco-compare-wrap {
    overflow-x: auto;
    border: 1px solid var(--eco-line);
    background: #fff;
    -webkit-overflow-scrolling: touch;
}

.eco-compare {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
    font-size: 0.93rem;
}

.eco-compare th,
.eco-compare td {
    padding: 1rem 1.25rem;
    text-align: left;
    border-bottom: 1px solid var(--eco-line);
    vertical-align: top;
}

.eco-compare thead th {
    border-bottom: 1px solid var(--eco-ink);
    color: var(--eco-ink);
    font-weight: 700;
    white-space: nowrap;
}

.eco-compare thead th span {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--eco-ink-2);
}

.eco-compare tbody th {
    font-weight: 600;
    color: var(--eco-ink);
    width: 34%;
}

.eco-compare tbody td {
    color: var(--eco-ink-2);
}

.eco-compare tbody tr:last-child th,
.eco-compare tbody tr:last-child td {
    border-bottom: 0;
}

.eco-compare .eco-yes {
    color: var(--eco-accent-ink);
    font-weight: 700;
}

.eco-compare .eco-no {
    color: #aab2bb;
}

.eco-compare-note {
    margin-top: 1rem;
    font-size: 0.88rem;
}

/* Split panel: copy on the left, checklist on the right */
.eco-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    border: 1px solid var(--eco-line);
    background: #fff;
}

.eco-split > * {
    padding: 2.5rem;
}

.eco-split > * + * {
    border-left: 1px solid var(--eco-line);
}

@media (max-width: 767px) {
    .eco-split {
        grid-template-columns: 1fr;
    }
    .eco-split > * {
        padding: 1.6rem;
    }
    .eco-split > * + * {
        border-left: 0;
        border-top: 1px solid var(--eco-line);
    }
}

/* Dark closing panel with two actions */
.eco-cta-panel {
    padding: 3.5rem;
    background: var(--eco-dark);
}

.eco-cta-panel h2 {
    color: #fff;
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    margin: 0.9rem 0 1rem;
}

.eco-cta-panel p {
    color: rgba(255, 255, 255, 0.68);
    max-width: 62ch;
    margin: 0;
}

.eco-cta-panel .eco-eyebrow {
    color: var(--eco-accent);
}

.eco-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 2rem;
}

@media (max-width: 767px) {
    .eco-cta-panel {
        padding: 1.75rem;
    }
}
/* ----- About / Services: shared additions ----- */
.eco-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1199px) {
    .eco-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .eco-grid--4 {
        grid-template-columns: 1fr;
    }
}

.eco-letter {
    display: block;
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--eco-accent-ink);
}

/* Technology logos: quiet by default, brand colour on hover */
.eco-logos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    border: 1px solid var(--eco-line);
    background: var(--eco-line);
}

.eco-logos > * {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1.5rem 0.75rem;
    background: var(--eco-surface);
    text-align: center;
}

.eco-section--alt .eco-logos > * {
    background: var(--eco-surface-2);
}

.eco-logos img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    filter: grayscale(100%) contrast(1.15);
    opacity: 0.8;
    transition: filter 0.25s ease, opacity 0.25s ease;
}

/* ----- Products index ----- */
.product-index-page {
    --product-blue: #3267ff;
    --product-blue-soft: #e7edff;
    --product-paper: #f8fbff;
    --product-line: #dce6f7;
    background: var(--product-paper);
}

.product-index-page .main-nav.dark-link .nav-link,
.product-index-page .main-nav.dark-link .st-root-link {
    color: #11182f;
}

.product-index-hero {
    position: relative;
    min-height: 860px;
    padding: clamp(9rem, 18vw, 18rem) 0 clamp(6rem, 12vw, 11rem);
    overflow: hidden;
    border-bottom: 1px solid var(--product-line);
    background:
        linear-gradient(rgba(50, 103, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(50, 103, 255, 0.045) 1px, transparent 1px),
        radial-gradient(circle at 78% 18%, rgba(50, 103, 255, 0.08), transparent 28rem),
        var(--product-paper);
    background-size: 96px 96px, 96px 96px, auto, auto;
}

.product-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.75fr);
    gap: clamp(2rem, 8vw, 8rem);
    align-items: end;
}

.product-index-hero .eco-eyebrow {
    color: var(--product-blue);
    letter-spacing: 0.18em;
}

.product-index-hero h1 {
    max-width: 820px;
    margin: 1.4rem 0 0;
    color: #070b24;
    font-size: clamp(4.2rem, 9vw, 8.4rem);
    font-weight: 400;
    line-height: 0.9;
    letter-spacing: -0.075em;
}

.product-index-hero h1 em {
    display: block;
    color: var(--product-blue);
    font-style: italic;
    font-weight: 400;
}

.product-hero-copy {
    max-width: 380px;
    padding-bottom: 0.7rem;
}

.product-hero-copy p {
    margin: 0 0 1.7rem;
    color: #66728a;
    font-size: 1rem;
    line-height: 1.72;
}

.product-text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--product-blue);
    font-size: 0.88rem;
    font-weight: 600;
}

.product-text-link:hover {
    color: #1549d8;
}

.product-orbit,
.product-diamond {
    position: absolute;
    pointer-events: none;
}

.product-orbit {
    right: -8rem;
    top: -9rem;
    width: clamp(18rem, 32vw, 31rem);
    height: clamp(18rem, 32vw, 31rem);
    border: clamp(3.5rem, 7vw, 6.5rem) solid rgba(50, 103, 255, 0.1);
    border-radius: 50%;
}

.product-diamond {
    right: 18%;
    top: 22%;
    width: 5.5rem;
    height: 5.5rem;
    border: 1px solid rgba(50, 103, 255, 0.28);
    transform: rotate(45deg);
}

.product-portfolio-section {
    padding: clamp(7rem, 13vw, 12rem) 0;
    background: var(--product-paper);
}

.product-stage {
    position: relative;
    width: min(980px, 100%);
    min-height: clamp(560px, 80vw, 980px);
    margin: 0 auto clamp(5rem, 10vw, 9rem);
    overflow: hidden;
    border: 1px solid rgba(50, 103, 255, 0.08);
    background:
        radial-gradient(circle at 22% 20%, rgba(255, 255, 255, 0.64), transparent 18rem),
        linear-gradient(135deg, #dfe7ff, #edf3ff 62%, #d8e4ff);
}

.product-stage-card {
    position: absolute;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.66);
    box-shadow: 0 28px 80px rgba(48, 88, 160, 0.18);
}

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

.product-stage-card--ranktim {
    left: 8%;
    top: 13%;
    width: 58%;
    aspect-ratio: 3 / 2;
}

.product-stage-card--fluxserp {
    right: 7%;
    top: 34%;
    width: 43%;
    aspect-ratio: 16 / 10;
}

.product-stage-card--sendtim {
    left: 21%;
    bottom: 12%;
    width: 56%;
    aspect-ratio: 16 / 9;
}

.product-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid var(--product-line);
    background: var(--product-line);
}

.product-feature {
    display: flex;
    min-width: 0;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.78);
}

.product-feature-media {
    padding: 0.8rem;
    border-bottom: 1px solid var(--product-line);
    background: #fff;
}

.product-feature-media img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: left top;
    background: var(--product-blue-soft);
}

.product-feature-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: clamp(1.5rem, 3vw, 2.25rem);
}

.product-feature-topline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.product-feature-topline span,
.product-feature-topline em {
    display: inline-flex;
    align-items: center;
    min-height: 1.85rem;
    border: 1px solid var(--product-line);
    padding: 0.32rem 0.62rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.76);
    color: #5e6881;
    font-size: 0.64rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.product-feature h3 {
    margin: 0 0 0.85rem;
    color: #070b24;
    font-size: clamp(2.1rem, 4vw, 3.4rem);
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: -0.065em;
}

.product-feature p {
    margin: 0;
    color: #657087;
    font-size: 0.92rem;
    line-height: 1.62;
}

.product-feature-list {
    display: grid;
    gap: 0.65rem;
    padding: 1.35rem 0 1.6rem;
    margin: 0;
    list-style: none;
}

.product-feature-list li {
    position: relative;
    padding-left: 1.25rem;
    color: #293246;
    font-size: 0.86rem;
    line-height: 1.45;
}

.product-feature-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.48rem;
    width: 0.38rem;
    height: 0.38rem;
    border-radius: 999px;
    background: var(--product-blue);
}

.product-feature .eco-link {
    margin-top: auto;
    padding-top: 0.95rem;
    border-top: 1px solid #aeb9cd;
    border-bottom: 0;
    color: #10182f;
}

.product-feature--orange .product-feature-list li::before {
    background: #ff5a1f;
}

.product-feature--green .product-feature-list li::before {
    background: #31c979;
}

.product-feature--red .product-feature-list li::before {
    background: #ff4d24;
}

.product-index-page .eco-section--alt {
    border-top: 1px solid var(--product-line);
    border-bottom: 1px solid var(--product-line);
    background:
        linear-gradient(rgba(50, 103, 255, 0.038) 1px, transparent 1px),
        linear-gradient(90deg, rgba(50, 103, 255, 0.038) 1px, transparent 1px),
        #f2f6ff;
    background-size: 96px 96px;
}

.product-index-page .eco-cta-panel {
    border: 1px solid var(--product-line);
    background: #fff;
}

.product-index-page .eco-cta-panel h2 {
    color: #070b24;
}

.product-index-page .eco-cta-panel p {
    color: #657087;
}

.product-index-page .eco-cta-panel .eco-eyebrow {
    color: var(--product-blue);
}

.product-index-page .eco-cta-panel .eco-btn-ghost {
    border-color: var(--product-line);
    color: #10182f;
}

.product-index-page .eco-cta-panel .eco-btn-ghost:hover {
    border-color: #10182f;
    background: transparent;
    color: #10182f;
}

@media (max-width: 991px) {
    .product-index-hero {
        min-height: auto;
    }
    .product-hero-grid,
    .product-list {
        grid-template-columns: 1fr;
    }
    .product-hero-copy {
        max-width: 520px;
    }
    .product-stage {
        min-height: 620px;
    }
}

@media (max-width: 575px) {
    .product-index-hero {
        padding-top: 8rem;
    }
    .product-index-hero h1 {
        font-size: clamp(3.15rem, 17vw, 5rem);
    }
    .product-diamond {
        display: none;
    }
    .product-stage {
        min-height: 0;
        padding: 1rem;
    }
    .product-stage-card {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        width: 100%;
        margin-bottom: 1rem;
        aspect-ratio: 16 / 10;
    }
    .product-stage-card:last-child {
        margin-bottom: 0;
    }
}

.product-index-page {
    --products-bg: #f8faf8;
    --products-line: rgba(13, 19, 28, 0.075);
    --products-soft: #eef8f1;
    background: var(--products-bg);
}

.products-hero {
    position: relative;
    min-height: 86vh;
    display: flex;
    align-items: flex-end;
    padding: 9.5rem 0 7rem;
    overflow: hidden;
    background:
        linear-gradient(var(--products-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--products-line) 1px, transparent 1px),
        radial-gradient(circle at 80% 16%, rgba(60, 220, 134, 0.16), transparent 26rem),
        var(--products-bg);
    background-size: 104px 104px, 104px 104px, auto, auto;
    border-bottom: 1px solid var(--eco-line);
}

.products-orbit {
    position: absolute;
    top: -11rem;
    right: -9rem;
    width: 30rem;
    height: 30rem;
    border: 3.8rem solid rgba(60, 220, 134, 0.16);
    border-radius: 50%;
    pointer-events: none;
}

.products-diamond {
    position: absolute;
    top: 14rem;
    right: 22%;
    width: 5.25rem;
    height: 5.25rem;
    border: 1px solid rgba(60, 220, 134, 0.38);
    transform: rotate(45deg);
    pointer-events: none;
}

.products-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.6fr);
    gap: clamp(2rem, 8vw, 8rem);
    align-items: end;
}

.products-hero h1 {
    max-width: 9.5ch;
    margin: 1.1rem 0 0;
    color: var(--eco-ink);
    font-size: clamp(4rem, 10vw, 8.8rem);
    line-height: 0.88;
    letter-spacing: -0.07em;
    font-weight: 400;
}

.products-hero h1 em {
    display: block;
    color: var(--eco-accent-ink);
    font-style: italic;
    font-weight: 300;
    letter-spacing: -0.065em;
}

.products-hero .eco-eyebrow,
.products-section-head .eco-eyebrow,
.products-method .eco-eyebrow,
.products-cta .eco-eyebrow {
    color: var(--eco-accent-ink);
}

.products-hero-copy {
    padding-bottom: 1rem;
}

.products-hero-copy p {
    max-width: 37ch;
    margin: 0 0 2rem;
    color: var(--eco-ink-2);
    font-size: 1.03rem;
    line-height: 1.75;
}

.products-canvas-section {
    padding: clamp(5rem, 9vw, 9rem) 0;
    background: linear-gradient(180deg, #fff 0%, var(--products-bg) 100%);
}

.products-canvas {
    position: relative;
    min-height: clamp(540px, 72vw, 920px);
    width: min(980px, 100%);
    margin: 0 auto;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(60, 220, 134, 0.18), rgba(238, 243, 255, 0.94)),
        linear-gradient(var(--products-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--products-line) 1px, transparent 1px);
    background-size: auto, 72px 72px, 72px 72px;
    border: 1px solid rgba(13, 19, 28, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.products-preview {
    position: absolute;
    overflow: hidden;
    border: 1px solid rgba(13, 19, 28, 0.08);
    background: #fff;
    box-shadow: 0 28px 70px rgba(13, 19, 28, 0.16);
}

.products-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.products-preview span {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    color: var(--eco-ink);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    backdrop-filter: blur(12px);
}

.products-preview-ranktim {
    left: 8%;
    top: 12%;
    width: 68%;
    height: 48%;
}

.products-preview-fluxserp {
    right: 7%;
    bottom: 13%;
    width: 52%;
    height: 31%;
}

.products-preview-sendtim {
    left: 14%;
    bottom: 10%;
    width: 37%;
    height: 24%;
}

.products-list-section {
    padding: clamp(5rem, 9vw, 8rem) 0;
    background: #fff;
    border-top: 1px solid var(--eco-line);
}

.products-section-head {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
    gap: 2rem;
    margin-bottom: 3rem;
}

.products-section-head h2 {
    max-width: 12ch;
    margin: 1rem 0 0;
    color: var(--eco-ink);
    font-size: clamp(2.4rem, 5.4vw, 5rem);
    line-height: 0.95;
    letter-spacing: -0.06em;
    font-weight: 400;
}

.products-list {
    display: grid;
    gap: 1px;
    border: 1px solid var(--eco-line);
    background: var(--eco-line);
}

.product-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.82fr);
    min-height: 520px;
    gap: 1px;
    background: var(--eco-line);
}

.product-row-media,
.product-row-copy {
    background: #fff;
}

.product-row-media {
    display: block;
    padding: clamp(1rem, 2.4vw, 1.6rem);
    overflow: hidden;
}

.product-row-media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 470px;
    object-fit: cover;
    object-position: left top;
    background: var(--products-soft);
    transition: transform 0.5s ease;
}

.product-row:hover .product-row-media img {
    transform: scale(1.025);
}

.product-row-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.8rem, 4.2vw, 4.2rem);
}

.product-row-kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1.5rem;
}

.product-row-kicker span,
.product-row-kicker strong,
.product-row-kicker em {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    border: 1px solid var(--eco-line);
    border-radius: 999px;
    padding: 0.35rem 0.7rem;
    color: var(--eco-ink-2);
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.product-row-kicker span {
    color: var(--eco-accent-ink);
}

.product-row-kicker strong {
    color: var(--eco-ink);
}

.product-row h3 {
    margin: 0 0 1rem;
    color: var(--eco-ink);
    font-size: clamp(2.6rem, 5vw, 5.2rem);
    line-height: 0.92;
    letter-spacing: -0.065em;
    font-weight: 400;
}

.product-row p {
    max-width: 47ch;
    margin: 0;
    color: var(--eco-ink-2);
    font-size: 1rem;
    line-height: 1.7;
}

.product-row ul {
    display: grid;
    gap: 0.72rem;
    padding: 1.6rem 0 1.8rem;
    margin: 0;
    list-style: none;
}

.product-row li {
    position: relative;
    padding-left: 1.35rem;
    color: var(--eco-ink);
    font-size: 0.94rem;
}

.product-row li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: var(--eco-accent);
}

.products-method {
    padding: clamp(5rem, 9vw, 8rem) 0;
    background: var(--products-bg);
    border-top: 1px solid var(--eco-line);
}

.products-method-head {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 0.85fr);
    gap: 2rem 5rem;
    align-items: end;
    margin-bottom: 3.5rem;
}

.products-method-head h2 {
    margin: 1rem 0 0;
    color: var(--eco-ink);
    font-size: clamp(2rem, 4.2vw, 4rem);
    line-height: 1;
    letter-spacing: -0.055em;
    font-weight: 400;
}

.products-method-head p {
    margin: 0;
    color: var(--eco-ink-2);
    line-height: 1.7;
}

.products-cta-section {
    padding: clamp(5rem, 9vw, 8rem) 0;
    background: #fff;
}

.products-cta {
    padding: clamp(2rem, 5vw, 4.5rem);
    background: var(--eco-dark);
}

.products-cta h2 {
    max-width: 16ch;
    margin: 1rem 0;
    color: #fff;
    font-size: clamp(2rem, 4.2vw, 4rem);
    line-height: 1;
    letter-spacing: -0.055em;
    font-weight: 400;
}

.products-cta p {
    max-width: 56ch;
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.7;
}

.products-cta .eco-link,
.products-cta .eco-eyebrow {
    color: var(--eco-accent);
}

@media (max-width: 991px) {
    .products-hero {
        min-height: auto;
        padding: 8rem 0 5rem;
    }
    .products-hero-grid,
    .products-section-head,
    .product-row,
    .products-method-head {
        grid-template-columns: 1fr;
    }
    .products-hero h1 {
        max-width: 10ch;
    }
    .products-canvas {
        min-height: 620px;
    }
    .products-preview-ranktim {
        left: 5%;
        width: 78%;
    }
    .products-preview-fluxserp {
        right: 5%;
        width: 68%;
    }
    .products-preview-sendtim {
        left: 7%;
        width: 54%;
    }
    .product-row {
        min-height: auto;
    }
    .product-row-media img {
        min-height: 0;
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 575px) {
    .products-hero {
        padding: 7rem 0 4rem;
        background-size: 64px 64px, 64px 64px, auto, auto;
    }
    .products-orbit {
        width: 18rem;
        height: 18rem;
        border-width: 2.5rem;
    }
    .products-diamond {
        display: none;
    }
    .products-hero h1 {
        font-size: clamp(3.2rem, 20vw, 5rem);
    }
    .products-canvas-section {
        padding: 3rem 0 4rem;
    }
    .products-canvas {
        min-height: 460px;
    }
    .products-preview span {
        left: 0.7rem;
        bottom: 0.7rem;
        min-height: 1.7rem;
        font-size: 0.64rem;
    }
    .products-list-section,
    .products-method,
    .products-cta-section {
        padding: 4rem 0;
    }
    .product-row-copy {
        padding: 1.6rem;
    }
    .product-row h3 {
        font-size: clamp(2.5rem, 16vw, 4rem);
    }
}

.product-index-page {
    background: #fff;
}

.products-service-hero .eco-hero-visual {
    overflow: hidden;
}

.products-service-hero .eco-hero-visual img {
    aspect-ratio: 16 / 11;
    object-fit: cover;
    object-position: left top;
}

.products-service-hero p.lead {
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.75);
}

.product-suite-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid var(--eco-line);
    background: var(--eco-line);
}

.product-suite-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    background: #fff;
}

.product-suite-media {
    position: relative;
    display: block;
    overflow: hidden;
    border-bottom: 1px solid var(--eco-line);
    background: #fff;
}

.product-suite-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 8;
    object-fit: cover;
    object-position: center;
    background: #fff;
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.product-suite-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0.14) 100%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.product-suite-card:hover .product-suite-media img {
    transform: scale(1.03);
}

.product-suite-card:hover .product-suite-media::after {
    opacity: 1;
}

.product-suite-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: clamp(1.5rem, 3vw, 2.25rem);
}

.product-suite-body h3 {
    margin: 1rem 0 0.75rem;
    color: var(--eco-ink);
    font-size: clamp(2rem, 3.4vw, 3.2rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.055em;
}

.product-suite-body p {
    margin: 0;
    color: var(--eco-ink-2);
    font-size: 0.94rem;
    line-height: 1.65;
}

.product-suite-body ul {
    display: grid;
    gap: 0.65rem;
    padding: 1.35rem 0 1.65rem;
    margin: 0;
    list-style: none;
}

.product-suite-body li {
    position: relative;
    padding-left: 1.25rem;
    color: var(--eco-ink);
    font-size: 0.88rem;
    line-height: 1.45;
}

.product-suite-body li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.52rem;
    width: 0.38rem;
    height: 0.38rem;
    border-radius: 999px;
    background: var(--eco-accent);
}

.product-suite-body .eco-link {
    margin-top: auto;
}

.product-index-page .eco-section--alt {
    border-top: 1px solid var(--eco-line);
    border-bottom: 1px solid var(--eco-line);
    background: var(--eco-surface-2);
}

.product-index-page .eco-cta-panel {
    border: 0;
    background: var(--eco-dark);
}

.product-index-page .eco-cta-panel h2 {
    color: #fff;
}

.product-index-page .eco-cta-panel p {
    color: rgba(255, 255, 255, 0.68);
}

.product-index-page .eco-cta-panel .eco-eyebrow {
    color: var(--eco-accent);
}

.product-index-page .eco-cta-panel .eco-btn-ghost {
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
}

.product-index-page .eco-cta-panel .eco-btn-ghost:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}

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

.eco-logos > *:hover img {
    filter: grayscale(0);
    opacity: 1;
}

.eco-logos span {
    font-size: 0.78rem;
    color: var(--eco-ink-2);
    line-height: 1.3;
}

@media (max-width: 479px) {
    .eco-logos {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }
}

.eco-logos-label {
    display: block;
    margin: 2.5rem 0 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--eco-ink-2);
}

.eco-logos-label:first-of-type {
    margin-top: 0;
}

/* Image panel with a centred play button */
.eco-media-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 380px;
    padding: 3rem;
    border: 1px solid var(--eco-line);
    background-position: center;
    background-size: cover;
    text-align: center;
    overflow: hidden;
}

.eco-media-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(11, 16, 22, 0.66);
}

.eco-media-panel > * {
    position: relative;
}

.eco-media-panel h2,
.eco-media-panel h3 {
    color: #fff;
}

.eco-media-panel p {
    color: rgba(255, 255, 255, 0.72);
}

.eco-media-panel .eco-eyebrow {
    color: var(--eco-accent);
}

.eco-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-top: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    color: #fff;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.eco-play:hover {
    background: var(--eco-accent);
    border-color: var(--eco-accent);
    color: #fff;
}

/* Team */
.eco-person {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--eco-line);
    background: #fff;
}

.eco-person-photo {
    aspect-ratio: 4 / 3;
    background-position: center top;
    background-size: cover;
    border-bottom: 1px solid var(--eco-line);
    filter: grayscale(100%);
    transition: filter 0.35s ease;
}

.eco-person:hover .eco-person-photo {
    filter: grayscale(0);
}

.eco-person-body {
    padding: 1.75rem;
}

.eco-person-body h3 {
    font-size: 1.1rem;
    margin: 0 0 0.25rem;
}

.eco-person-role {
    display: block;
    margin-bottom: 1rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--eco-ink-2);
}

.eco-person-body p {
    margin: 0;
    font-size: 0.94rem;
}
/* ----- Homepage: brought in line with the rest of the site -----
   Structure and content stay as they were; only the palette, the hero
   treatment and the button styles are aligned with the other pages. */
/* the single testimonial band used a green gradient; the rest of the site
   uses one flat accent block */
.home-page .singl-testimonial .gradient,
.home-page .singl-testimonial .gradient-primary-dark {
    background: var(--eco-accent) !important;
    background-image: none !important;
}

.home-page .singl-testimonial .text-contrast,
.home-page .singl-testimonial .gradient p,
.home-page .singl-testimonial .gradient .small,
.home-page .singl-testimonial .gradient span {
    color: #fff !important;
}

.home-page .singl-testimonial .badge.bg-contrast {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.home-page .singl-testimonial hr {
    border-color: rgba(255, 255, 255, 0.35);
    opacity: 1;
}

/* technology logos: quiet by default, brand colour on hover — same treatment
   as the partner strip above them and as the /about page */
.home-page .tab-content .card img {
    filter: grayscale(100%) contrast(1.15);
    opacity: 0.8;
    transition: filter 0.25s ease, opacity 0.25s ease;
}

.home-page .tab-content .card:hover img {
    filter: grayscale(0);
    opacity: 1;
}

.home-page .tab-content .card {
    border: 1px solid var(--eco-line) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    transition: border-color 0.25s ease;
}

.home-page .tab-content .card:hover {
    border-color: #c9d1d9 !important;
}

/* section tabs match the ecommerce page's underline tabs */
.home-page .nav-tabs.tabs-clean .nav-link,
.home-page .nav-tabs.nav-slide .nav-link {
    color: var(--eco-ink-2);
    font-weight: 600;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
}

.home-page .nav-tabs.tabs-clean .nav-link.active,
.home-page .nav-tabs.nav-slide .nav-link.active {
    color: var(--eco-ink);
    border-bottom-color: var(--eco-ink);
    background: transparent;
}

.home-page .nav-tabs.nav-slide .slide-line,
.home-page .nav-tabs.tabs-clean .slide-line {
    display: none;
}

/* dashcore paints every non-.btn link inside .bg-dark/.bg-darker grey-blue
   (.bg-dark a:not(.btn)), which swallowed the shared button colours there */
.bg-dark a.eco-btn-primary,
.bg-darker a.eco-btn-primary {
    color: #fff;
}

.bg-dark a.eco-btn-dark,
.bg-darker a.eco-btn-dark,
.bg-dark a.eco-btn-ghost,
.bg-darker a.eco-btn-ghost {
    color: #fff;
}

.bg-dark a.eco-link,
.bg-darker a.eco-link {
    color: #fff;
    border-bottom-color: #fff;
}

/* ===== Shared tone for pages that keep their own structure =====
   (homepage, blog, case studies). Palette and chrome only — no layout. */
.eco-tone .eco-page-hero {
    background: var(--eco-dark);
}

.eco-tone .eco-page-hero h1,
.eco-tone .eco-page-hero h2,
.eco-tone .eco-page-hero .text-contrast {
    color: #fff;
}

.eco-tone .eco-page-hero p,
.eco-tone .eco-page-hero p.lead {
    color: rgba(255, 255, 255, 0.68);
}

/* cards become hairline boxes instead of floating shadows */
.eco-tone .card {
    border: 1px solid var(--eco-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: border-color 0.25s ease;
}

.eco-tone .card:hover {
    border-color: #c9d1d9 !important;
    transform: none;
}

.eco-tone .card .card-img-top,
.eco-tone .card .card-img-bottom {
    border-radius: 0 !important;
}

.eco-tone .card-title a {
    color: var(--eco-ink);
}

.eco-tone .card-title a:hover {
    color: var(--eco-accent-ink);
}

/* the "New" pill was danger-red */
.eco-tone .badge.eco-badge-new {
    background: var(--eco-accent) !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* compact button for use inside cards */
.eco-btn-sm {
    padding: 0.45rem 1rem;
    font-size: 0.82rem;
}

.eco-btn-sm i {
    font-size: 0.8em;
}

/* blog cards: equal height and a consistent image crop */
.eco-tone .card-blog {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.eco-tone .card-blog > a:first-child {
    display: block;
}

.eco-tone .card-blog .card-img-top {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.eco-tone .card-blog .card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.eco-tone .card-blog .card-text {
    flex: 1 1 auto;
}

/* project/demo cards keep a common height so the grid lines stay aligned */
.eco-tone .card-demo {
    height: 100%;
}

/* landscape app mockups are shown whole inside the fixed-height preview pane */
.card-demo .preview-pane--fit {
    background: #eef8f5;
}

.card-demo .preview-pane--fit .preview-page {
    overflow: hidden;
}

.card-demo .preview-pane--fit .preview-page img {
    width: 100%;
    height: 320px;
    object-fit: contain;
}

/* ----- Product demo media (chatbot GIFs) ----- */
.eco-phone {
    max-width: 280px;
    margin: 0 auto;
    padding: 6px;
    border: 1px solid var(--eco-line);
    border-radius: 20px;
    background: #fff;
    overflow: hidden;
}

/* the demo captures are 800px and 376px wide; never scale them past that */
.eco-frame--demo {
    max-width: 840px;
    margin: 0 auto;
}

.eco-phone img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
}

.eco-media-caption {
    display: block;
    max-width: 840px;
    margin-top: 0.85rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--eco-ink-2);
}

.eco-frame--demo + .eco-media-caption {
    margin-left: auto;
    margin-right: auto;
}

/* Footer copy stays white on every page, including pages whose own
   scoped styles (e.g. .evc p on ecommerce) would otherwise grey it out. */
footer.site-footer p {
    color: #fff;
}

/* Blog covers include their title and the official logo in the PNG. */
.blog-single-header {
    min-height: 0;
    aspect-ratio: 1672 / 941;
    background-size: cover !important;
    background-position: center center !important;
}

.blog-single-header .container {
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.blog-single-header .scrollto {
    display: none;
}

/* Top navbar: links centered across the full bar. Logo and "Get in touch"
   sit in equal-width side columns so the middle column is centered on the
   page, not just in the leftover space. */

@media (min-width: 768px) {
    .st-nav .st-nav-menu > .st-nav-section:first-child,
    .st-nav .st-nav-section.st-nav-secondary {
        flex: 1 1 0;
    }

    .st-nav .st-nav-section.st-nav-secondary {
        justify-content: flex-end;
        margin-left: 0;
    }
}

/* ==========================================================================
   Products mega menu
   The shared stripe dropdown only fitted a narrow list of four links. The
   products entry now spans the viewport with three columns: a showcase
   screenshot, the product links and trust signals.

   The stripe script still measures the panel and keeps state on the
   container, but it centres the panel on the hovered link. That overflows
   once the panel is this wide, so the inline transform is neutralised here
   and the panel is centred on the viewport instead. The script's measured
   width/height are reused through --mega-w so both stay in sync.
   ========================================================================== */

.st-nav {
    --mega-w: min(1160px, calc(100vw - 48px));
    --mega-ink: #0a0c0f;
    --mega-line: rgba(255, 255, 255, 0.13);
    --mega-accent: #3cdc86;
}

/* ---------- Panel shell ---------- */
.st-nav .st-dropdown-bg,
.st-nav .st-alt-bg {
    display: none;
}

.st-nav .st-dropdown-container {
    left: 50% !important;
    margin-left: calc(var(--mega-w) / -2);
    -webkit-transform: none !important;
    transform: none !important;
    border-radius: 16px;
    background: var(--mega-ink);
    -webkit-box-shadow: 0 34px 70px -22px rgba(3, 18, 11, 0.62), 0 6px 22px rgba(3, 18, 11, 0.24);
    box-shadow: 0 34px 70px -22px rgba(3, 18, 11, 0.62), 0 6px 22px rgba(3, 18, 11, 0.24);
}

.st-nav .st-dropdown-content {
    width: var(--mega-w);
}

.st-nav .st-dropdown-section[data-dropdown="products"] {
    background: transparent;
}

.st-nav .st-dropdown-arrow {
    background: var(--mega-ink);
    -webkit-box-shadow: none;
    box-shadow: none;
}

/* ---------- Three column layout ---------- */
.mega-panel {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: var(--mega-w);
}

.mega-col {
    min-width: 0;
    padding: 30px 32px 32px;
}

.mega-col--showcase {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 36%;
    flex: 1 1 36%;
}

.mega-col--products {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 32%;
    flex: 0 0 32%;
    border-left: 1px solid var(--mega-line);
}

.mega-col--tools {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 32%;
    flex: 1 1 32%;
    border-left: 1px solid var(--mega-line);
    background: rgba(255, 255, 255, 0.035);
}

.mega-label {
    margin: 0 0 1.3rem;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
}

/* ---------- Showcase screenshots ---------- */
.mega-shots {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 18px;
}

.mega-shot {
    display: block;
    text-decoration: none;
}

.mega-shot-frame {
    display: block;
    overflow: hidden;
    border: 1px solid var(--mega-line);
    border-radius: 12px;
    background: #14181d;
    -webkit-box-shadow: 0 24px 44px -20px rgba(0, 0, 0, 0.9);
    box-shadow: 0 24px 44px -20px rgba(0, 0, 0, 0.9);
    -webkit-transition: border-color 0.3s ease, -webkit-transform 0.3s ease;
    transition: border-color 0.3s ease, -webkit-transform 0.3s ease;
    transition: transform 0.3s ease, border-color 0.3s ease;
    transition: transform 0.3s ease, border-color 0.3s ease, -webkit-transform 0.3s ease;
}

.mega-shot-frame img {
    display: block;
    width: 100%;
    height: auto;
}

.mega-shot-bar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 6px;
    padding: 10px 13px;
    border-bottom: 1px solid var(--mega-line);
}

.mega-shot-bar i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.24);
}

.mega-shot-caption {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    gap: 8px;
    margin-top: 11px;
}

.mega-shot-name {
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
    -webkit-transition: color 0.25s ease;
    transition: color 0.25s ease;
}

.mega-shot-desc {
    font-size: 0.78rem;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.55);
}

.mega-shot:hover .mega-shot-frame {
    border-color: rgba(60, 220, 134, 0.55);
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
}

.mega-shot:hover .mega-shot-name {
    color: var(--mega-accent);
}

/* ---------- Product links ---------- */
.mega-products {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 20px -14px;
    width: calc(100% + 28px);
}

.mega-product {
    display: block;
    padding: 11px 14px;
    border-radius: 10px;
    text-decoration: none;
    -webkit-transition: background-color 0.25s ease;
    transition: background-color 0.25s ease;
}

.mega-product-name {
    display: block;
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #fff;
    -webkit-transition: color 0.25s ease;
    transition: color 0.25s ease;
}

.mega-product-desc {
    display: block;
    margin-top: 3px;
    font-size: 0.79rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.58);
}

.mega-product:hover {
    background-color: rgba(255, 255, 255, 0.07);
}

.mega-product:hover .mega-product-name {
    color: var(--mega-accent);
}

/* ---------- Buttons ---------- */
/* Scoped to .st-nav so the colour beats the `.st-nav a` rule in dashcore.css. */
.st-nav .mega-btn {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 10px;
    margin-top: auto;
    padding: 12px 20px;
    border: 1px solid var(--mega-accent);
    border-radius: 10px;
    background: var(--mega-accent);
    color: #06351f;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    -webkit-transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.st-nav .mega-btn svg {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-transition: -webkit-transform 0.25s ease;
    transition: -webkit-transform 0.25s ease;
    transition: transform 0.25s ease;
    transition: transform 0.25s ease, -webkit-transform 0.25s ease;
}

.st-nav .mega-btn:hover {
    background: #5ff0a5;
    border-color: #5ff0a5;
    color: #06351f;
}

.st-nav .mega-btn:hover svg {
    -webkit-transform: translateX(3px);
    transform: translateX(3px);
}

.st-nav .mega-btn--outline {
    background: transparent;
    color: var(--mega-accent);
    border-color: rgba(60, 220, 134, 0.5);
}

.st-nav .mega-btn--outline:hover {
    background: rgba(60, 220, 134, 0.13);
    border-color: var(--mega-accent);
    color: #8affc0;
}

/* ---------- Trust logos ---------- */
.mega-logos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 16px 14px;
    margin: 0 0 26px;
}

.mega-logos img {
    width: 100%;
    max-height: 26px;
    -o-object-fit: contain;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.48;
    -webkit-transition: opacity 0.25s ease;
    transition: opacity 0.25s ease;
}

.mega-logos img:hover {
    opacity: 0.85;
}

/* ---------- Dropdown caret on the trigger ---------- */
@media (min-width: 768px) {
    .st-nav .st-has-dropdown[data-dropdown="products"] {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 6px;
    }

    .st-nav .st-has-dropdown[data-dropdown="products"]::after {
        content: "";
        width: 7px;
        height: 7px;
        margin-top: -3px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-transition: -webkit-transform 0.25s ease;
        transition: -webkit-transform 0.25s ease;
        transition: transform 0.25s ease;
        transition: transform 0.25s ease, -webkit-transform 0.25s ease;
    }

    .st-nav.dropdown-active .st-has-dropdown[data-dropdown="products"]::after {
        -webkit-transform: translateY(3px) rotate(225deg);
        transform: translateY(3px) rotate(225deg);
    }
}

/* ---------- Narrow desktop ---------- */
@media (min-width: 768px) and (max-width: 1100px) {
    .mega-panel {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .mega-col {
        padding: 26px 26px 30px;
    }

    .mega-col--products {
        -ms-flex: none;
        flex: none;
    }

    .mega-col--tools {
        grid-column: 1 / -1;
        border-left: 0;
        border-top: 1px solid var(--mega-line);
    }

    .mega-logos {
        grid-template-columns: repeat(6, 1fr);
        margin-bottom: 22px;
    }
}