/* ==================================================
   ECOMHUBX HOMEPAGE — DEDICATED STYLES
   Namespaced under .ehx-* to avoid breaking global styles
   ================================================== */

:root {
    --ehx-black: #071018;
    --ehx-white: #ffffff;
    --ehx-paper: #f4f7f9;
    --ehx-muted: #65717c;
    --ehx-border: #dce5ea;
    --ehx-accent: #0096FF;
    --ehx-accent-dark: #007dcc;
    --ehx-pad: clamp(20px, 5vw, 84px);
}

/* Reset scoped to home */
.ehx-home {
    background: var(--ehx-paper);
    color: var(--ehx-black);
    font-family: Inter, Arial, sans-serif;
}
.ehx-home * { box-sizing: border-box; }
.ehx-home h1, .ehx-home h2, .ehx-home h3 {
    font-family: Manrope, Inter, sans-serif;
    letter-spacing: 0;
    text-transform: uppercase;
    margin: 0;
}

/* ---------- Eyebrow ---------- */
.ehx-eyebrow {
    font: 500 12px Manrope, sans-serif;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ehx-muted);
    margin: 0 0 20px;
}
.ehx-eyebrow:before { content: '— '; color: var(--ehx-accent); }
.ehx-eyebrow-light { color: #e6f5ff; }
.ehx-eyebrow-light:before { color: #fff; }

/* ---------- Buttons ---------- */
.ehx-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 15px 24px;
    font: 700 11px Inter, sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    border: 1px solid transparent;
    transition: .3s;
    text-decoration: none;
    cursor: pointer;
}
.ehx-btn-primary {
    background: var(--ehx-accent);
    color: #fff;
    border-color: var(--ehx-accent);
}
.ehx-btn-primary:hover {
    background: var(--ehx-accent-dark);
    transform: translateY(-2px);
}
.ehx-btn-ghost {
    background: transparent;
    color: var(--ehx-black);
    border-color: var(--ehx-black);
}
.ehx-btn-ghost:hover { background: var(--ehx-black); color: #fff; }
.ehx-btn-ghost-light {
    background: transparent;
    color: #fff;
    border-color: #ffffff66;
}
.ehx-btn-ghost-light:hover { background: #fff; color: var(--ehx-accent); }

/* ==================================================
   01 — HERO
   ================================================== */
.ehx-hero {
    background: var(--ehx-accent);
    color: #fff;
    position: relative;
    overflow: hidden;
    min-height: calc(100vh - 78px);
}
.ehx-hero-inner {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    min-height: calc(100vh - 78px);
    position: relative;
}
.ehx-hero-copy {
    padding: 120px var(--ehx-pad) 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 2;
}
.ehx-hero h1 {
    font: 800 clamp(48px, 6.5vw, 96px)/.92 Manrope, sans-serif;
    letter-spacing: -.01em;
    margin-bottom: 30px;
}
.ehx-hero-sub {
    max-width: 480px;
    margin: 0 0 40px;
    color: #e6f5ff;
    font-size: 16px;
    line-height: 1.65;
}
.ehx-hero-actions {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    align-items: center;
}
.ehx-hero-actions .ehx-btn-primary {
    background: #fff;
    color: var(--ehx-accent);
    border-color: #fff;
}
.ehx-hero-actions .ehx-btn-primary:hover {
    background: var(--ehx-black);
    color: #fff;
    border-color: var(--ehx-black);
}
.ehx-hero-photo {
    margin: 0;
    position: relative;
    overflow: hidden;
    background: #000;
}
.ehx-hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(.4) contrast(1.08);
}
.ehx-hero-photo:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #0096ffaa, transparent 45%),
                linear-gradient(0deg, #07101899, transparent 55%);
}
.ehx-hero-word {
    position: absolute;
    bottom: -.24em;
    left: -.05em;
    font: 800 26vw/1 Manrope, sans-serif;
    color: #ffffff14;
    pointer-events: none;
    z-index: 1;
}

/* ==================================================
   02 — PLATFORM STRIP
   ================================================== */
.ehx-platforms {
    padding: 40px var(--ehx-pad);
    background: var(--ehx-black);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
    border-top: 1px solid #ffffff1a;
}
.ehx-platforms-title {
    font: 500 11px Manrope, sans-serif;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #8ecbff;
    margin: 0;
    max-width: 280px;
}
.ehx-platforms-list {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    align-items: center;
}
.ehx-platform {
    font: 700 18px Manrope, sans-serif;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #fff;
    text-decoration: none;
    position: relative;
    opacity: .75;
    transition: .3s;
}
.ehx-platform:hover { opacity: 1; color: var(--ehx-accent); }
.ehx-platform:after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--ehx-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s;
}
.ehx-platform:hover:after { transform: scaleX(1); }

/* ==================================================
   03 — PROBLEM / POSITIONING
   ================================================== */
.ehx-problem {
    padding: clamp(90px, 12vw, 160px) var(--ehx-pad);
    background: var(--ehx-white);
}
.ehx-problem-grid {
    display: grid;
    grid-template-columns: .55fr 1.45fr;
    gap: 60px;
}
.ehx-problem-body h2 {
    font: 800 clamp(40px, 5.5vw, 78px)/.94 Manrope, sans-serif;
    margin-bottom: 45px;
    max-width: 900px;
}
.ehx-problem-copy {
    display: grid;
    gap: 20px;
    max-width: 720px;
    color: var(--ehx-muted);
    font-size: 16px;
    line-height: 1.7;
}
.ehx-problem-copy strong { color: var(--ehx-black); font-weight: 700; }
.ehx-problem-highlight {
    margin-top: 55px;
    padding-top: 35px;
    border-top: 1px solid var(--ehx-black);
    display: flex;
    flex-wrap: wrap;
    gap: 20px 45px;
    font: 800 clamp(24px, 3.2vw, 44px)/1.05 Manrope, sans-serif;
    text-transform: uppercase;
}
.ehx-problem-highlight span:not(:last-child):after {
    content: '·';
    margin-left: 45px;
    color: var(--ehx-accent);
}

/* ==================================================
   05 — SERVICES
   ================================================== */
.ehx-services {
    padding: clamp(90px, 12vw, 160px) var(--ehx-pad);
    background: var(--ehx-accent);
    color: #fff;
    position: relative;
}
.ehx-services-head { max-width: 900px; margin-bottom: 70px; }
.ehx-services-head h2 {
    font: 800 clamp(40px, 5.5vw, 76px)/.94 Manrope, sans-serif;
    color: #fff;
    margin-bottom: 25px;
}
.ehx-services-intro {
    color: #d9edff;
    font-size: 16px;
    max-width: 620px;
    line-height: 1.7;
}
.ehx-service-layout {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 55px;
    align-items: start;
}
.ehx-service-list {
    border-top: 1px solid #ffffff55;
}
.ehx-service {
    display: grid;
    grid-template-columns: 55px 1fr 30px;
    gap: 15px;
    padding: 28px 0;
    border-bottom: 1px solid #ffffff33;
    text-decoration: none;
    color: #fff;
    transition: padding .35s, background .35s;
    align-items: start;
}
.ehx-service:hover,
.ehx-service.is-active {
    padding-left: 22px;
    background: #ffffff10;
}
.ehx-service-num {
    font: 500 11px Manrope, sans-serif;
    letter-spacing: .15em;
    opacity: .7;
    padding-top: 6px;
}
.ehx-service-body h3 {
    font: 700 clamp(22px, 2.4vw, 36px)/1 Manrope, sans-serif;
    color: #fff;
    text-transform: uppercase;
    margin: 0 0 8px;
}
.ehx-service-body p {
    margin: 0;
    color: #d9edff;
    font-size: 13px;
    line-height: 1.6;
    max-width: 520px;
}
.ehx-service-arrow {
    font-size: 22px;
    transition: transform .3s;
}
.ehx-service:hover .ehx-service-arrow { transform: translateX(6px); }
.ehx-service-photo {
    position: relative;
    min-height: 520px;
    overflow: hidden;
}
.ehx-service-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(.7) contrast(1.1);
    opacity: 0;
    transform: scale(1.05);
    transition: opacity .7s, transform .7s;
}
.ehx-service-photo img.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* ==================================================
   06 — FLOW
   ================================================== */
.ehx-flow {
    padding: clamp(90px, 12vw, 160px) var(--ehx-pad);
    background: var(--ehx-white);
}
.ehx-flow-head { max-width: 900px; margin-bottom: 70px; }
.ehx-flow-head h2 {
    font: 800 clamp(36px, 5vw, 72px)/.94 Manrope, sans-serif;
}
.ehx-flow-stages {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    border-top: 1px solid var(--ehx-black);
}
.ehx-stage {
    padding: 35px 25px 35px 0;
    border-right: 1px solid var(--ehx-border);
    opacity: .35;
    transition: opacity .4s, background .4s;
}
.ehx-stage:last-child { border-right: 0; padding-right: 0; }
.ehx-stage.is-active { opacity: 1; }
.ehx-stage-num {
    display: block;
    font: 500 11px Manrope, sans-serif;
    letter-spacing: .18em;
    color: var(--ehx-accent);
    margin-bottom: 18px;
}
.ehx-stage h3 {
    font: 700 clamp(18px, 1.6vw, 24px)/1.05 Manrope, sans-serif;
    text-transform: uppercase;
    margin: 0 0 12px;
}
.ehx-stage p {
    margin: 0;
    color: var(--ehx-muted);
    font-size: 13px;
    line-height: 1.6;
}

/* ==================================================
   07 — WHY
   ================================================== */
.ehx-why {
    padding: clamp(90px, 12vw, 160px) var(--ehx-pad);
    background: var(--ehx-paper);
}
.ehx-why-head { max-width: 900px; margin-bottom: 70px; }
.ehx-why-head h2 {
    font: 800 clamp(36px, 5vw, 72px)/.96 Manrope, sans-serif;
}
.ehx-why-list { border-top: 1px solid var(--ehx-black); }
.ehx-why-row {
    display: grid;
    grid-template-columns: 80px 1fr 1.3fr;
    gap: 30px;
    padding: 32px 0;
    border-bottom: 1px solid var(--ehx-border);
    align-items: start;
    transition: padding .3s, background .3s;
}
.ehx-why-row:hover {
    padding-left: 25px;
    background: var(--ehx-white);
}
.ehx-why-num {
    font: 500 11px Manrope, sans-serif;
    letter-spacing: .18em;
    color: var(--ehx-accent);
    padding-top: 8px;
}
.ehx-why-row h3 {
    font: 700 clamp(22px, 2.4vw, 36px)/1.05 Manrope, sans-serif;
    text-transform: uppercase;
    margin: 0;
}
.ehx-why-row p {
    margin: 0;
    color: var(--ehx-muted);
    font-size: 15px;
    line-height: 1.7;
}

/* ==================================================
   08 — WIDE VISUAL
   ================================================== */
.ehx-wide-visual {
    position: relative;
    height: 80vh;
    min-height: 500px;
    overflow: hidden;
    background: #06111a;
    color: #fff;
}
.ehx-wide-visual img {
    width: 100%;
    height: 115%;
    object-fit: cover;
    filter: grayscale(.55) contrast(1.12);
    will-change: transform;
}
.ehx-wide-visual:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, #06111acc, transparent 55%);
}
.ehx-wide-copy {
    position: absolute;
    inset: auto var(--ehx-pad) 60px;
    z-index: 2;
}
.ehx-wide-copy h2 {
    font: 800 clamp(44px, 6vw, 96px)/.94 Manrope, sans-serif;
    color: #fff;
}

/* ==================================================
   09 — PROCESS
   ================================================== */
.ehx-process {
    padding: clamp(90px, 12vw, 160px) var(--ehx-pad);
    background: var(--ehx-white);
}
.ehx-process-head { max-width: 900px; margin-bottom: 70px; }
.ehx-process-head h2 {
    font: 800 clamp(36px, 5vw, 72px)/.96 Manrope, sans-serif;
}
.ehx-process-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--ehx-black);
}
.ehx-step {
    padding: 40px 25px 40px 0;
    border-right: 1px solid var(--ehx-border);
    position: relative;
}
.ehx-step:last-child { border-right: 0; padding-right: 0; }
.ehx-step-num {
    display: block;
    font: 800 clamp(48px, 6vw, 90px)/1 Manrope, sans-serif;
    color: var(--ehx-accent);
    opacity: .25;
    margin-bottom: 15px;
}
.ehx-step h3 {
    font: 700 clamp(20px, 2vw, 28px)/1.05 Manrope, sans-serif;
    text-transform: uppercase;
    margin: 0 0 15px;
}
.ehx-step p {
    margin: 0;
    color: var(--ehx-muted);
    font-size: 14px;
    line-height: 1.65;
}

/* ==================================================
   10 — PLATFORM DETAIL
   ================================================== */
.ehx-platform-detail {
    padding: clamp(90px, 12vw, 160px) var(--ehx-pad);
    background: var(--ehx-paper);
}
.ehx-platform-detail-grid {
    display: grid;
    grid-template-columns: .55fr 1.45fr;
    gap: 60px;
}
.ehx-platform-detail h2 {
    font: 800 clamp(36px, 5vw, 72px)/.96 Manrope, sans-serif;
    margin-bottom: 35px;
    max-width: 900px;
}
.ehx-platform-detail-copy {
    color: var(--ehx-muted);
    font-size: 16px;
    line-height: 1.75;
    max-width: 680px;
}
.ehx-platform-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 40px;
    padding-top: 35px;
    border-top: 1px solid var(--ehx-black);
}
.ehx-platform-tags span {
    font: 700 14px Manrope, sans-serif;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 10px 22px;
    border: 1px solid var(--ehx-black);
    transition: .3s;
}
.ehx-platform-tags span:hover {
    background: var(--ehx-accent);
    color: #fff;
    border-color: var(--ehx-accent);
}

/* ==================================================
   11 — SHOWCASE SLIDER
   ================================================== */
.ehx-showcase {
    padding: clamp(90px, 12vw, 160px) 0 clamp(90px, 12vw, 160px) var(--ehx-pad);
    background: var(--ehx-accent);
    color: #fff;
    overflow: hidden;
}
.ehx-showcase-head { max-width: 900px; margin-bottom: 55px; padding-right: var(--ehx-pad); }
.ehx-showcase-head h2 {
    font: 800 clamp(36px, 5vw, 72px)/.96 Manrope, sans-serif;
    color: #fff;
}
.ehx-slider { position: relative; overflow: hidden; }
.ehx-slider-track {
    display: flex;
    gap: 20px;
    transition: transform .8s cubic-bezier(.4, 0, .2, 1);
    cursor: grab;
    padding-right: var(--ehx-pad);
}
.ehx-slider-track:active { cursor: grabbing; }
.ehx-slide {
    flex: 0 0 calc((100% - 40px) / 3);
    position: relative;
    height: 450px;
    margin: 0;
    overflow: hidden;
    background: #06111a;
}
.ehx-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(.4) contrast(1.1);
    transition: transform .6s, filter .6s;
}
.ehx-slide:hover img {
    transform: scale(1.06);
    filter: grayscale(0) contrast(1.05);
}
.ehx-slide:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, #06111ac9, transparent 60%);
}
.ehx-slide figcaption {
    position: absolute;
    z-index: 2;
    bottom: 22px;
    left: 25px;
    right: 25px;
    display: flex;
    justify-content: space-between;
    color: #fff;
    font: 500 11px Manrope, sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    border-top: 1px solid #fff6;
    padding-top: 12px;
}

.ehx-slider-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 35px;
    padding-right: var(--ehx-pad);
}
.ehx-slider-btn {
    width: 48px;
    height: 48px;
    background: transparent;
    color: #fff;
    border: 1px solid #ffffff66;
    font-size: 18px;
    cursor: pointer;
    transition: .25s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ehx-slider-btn:hover:not(:disabled) {
    background: #fff;
    color: var(--ehx-accent);
    border-color: #fff;
}
.ehx-slider-btn:disabled { opacity: .3; cursor: not-allowed; }
.ehx-slider-dots {
    display: flex;
    gap: 6px;
    margin-left: auto;
}
.ehx-slider-dots button {
    width: 26px;
    height: 3px;
    border: 0;
    background: #ffffff44;
    cursor: pointer;
    transition: .25s;
    padding: 0;
}
.ehx-slider-dots button.is-active {
    background: #fff;
    width: 42px;
}

/* ==================================================
   13 — STATS
   ================================================== */
.ehx-stats {
    padding: clamp(90px, 12vw, 160px) var(--ehx-pad);
    background: var(--ehx-white);
}
.ehx-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-top: 45px;
}
.ehx-stat {
    border-top: 1px solid var(--ehx-black);
    padding-top: 25px;
}
.ehx-stat b {
    display: block;
    font: 800 clamp(36px, 5vw, 70px)/1 Manrope, sans-serif;
    text-transform: uppercase;
    margin-bottom: 15px;
}
.ehx-stat span {
    display: block;
    font: 500 11px Manrope, sans-serif;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--ehx-muted);
}

/* ==================================================
   14 — CTA
   ================================================== */
.ehx-cta {
    background: var(--ehx-black);
    color: #fff;
    padding: clamp(90px, 12vw, 160px) var(--ehx-pad);
    position: relative;
    overflow: hidden;
}
.ehx-cta:before {
    content: 'HUBX';
    position: absolute;
    bottom: -.25em;
    right: -.05em;
    font: 800 22vw/1 Manrope, sans-serif;
    color: #ffffff0a;
    pointer-events: none;
}
.ehx-cta-inner { position: relative; z-index: 2; max-width: 1000px; }
.ehx-cta h2 {
    font: 800 clamp(40px, 6vw, 92px)/.94 Manrope, sans-serif;
    color: #fff;
    margin-bottom: 30px;
    text-transform: uppercase;
}
.ehx-cta-copy {
    color: #b7cddd;
    font-size: 17px;
    line-height: 1.7;
    max-width: 620px;
    margin-bottom: 40px;
}
.ehx-cta-actions {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 65px;
}
.ehx-cta-actions .ehx-btn-primary {
    background: var(--ehx-accent);
    color: #fff;
    border-color: var(--ehx-accent);
}
.ehx-cta-contact {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding-top: 40px;
    border-top: 1px solid #ffffff22;
}
.ehx-cta-label {
    display: block;
    font: 500 10px Manrope, sans-serif;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #8ecbff;
    margin-bottom: 10px;
}
.ehx-cta-contact a,
.ehx-cta-contact span {
    color: #fff;
    font-size: 15px;
    text-decoration: none;
    line-height: 1.5;
}
.ehx-cta-contact a:hover { color: var(--ehx-accent); }

/* ==================================================
   DARK MODE SUPPORT (body.dark)
   ================================================== */
body.dark .ehx-home { background: #06111a; color: #f6fbff; }
body.dark .ehx-problem,
body.dark .ehx-process,
body.dark .ehx-stats { background: var(--ehx-black); }
body.dark .ehx-flow,
body.dark .ehx-why { background: #0d1b25; }
body.dark .ehx-platform-detail { background: #06111a; }
body.dark .ehx-problem-body h2,
body.dark .ehx-flow-head h2,
body.dark .ehx-why-head h2,
body.dark .ehx-process-head h2,
body.dark .ehx-platform-detail h2,
body.dark .ehx-step h3,
body.dark .ehx-why-row h3,
body.dark .ehx-stage h3,
body.dark .ehx-problem-highlight { color: #f6fbff; }
body.dark .ehx-step,
body.dark .ehx-why-row,
body.dark .ehx-stage { border-color: #213441; }
body.dark .ehx-stat { border-color: #f6fbff; }
body.dark .ehx-platform-tags span { border-color: #f6fbff; color: #f6fbff; }

/* ==================================================
   RESPONSIVE
   ================================================== */
@media (max-width: 1100px) {
    .ehx-hero-inner { grid-template-columns: 1fr; }
    .ehx-hero-photo { height: 55vh; min-height: 380px; }
    .ehx-problem-grid,
    .ehx-platform-detail-grid { grid-template-columns: 1fr; gap: 35px; }
    .ehx-service-layout { grid-template-columns: 1fr; }
    .ehx-service-photo { min-height: 380px; order: -1; }
    .ehx-flow-stages { grid-template-columns: 1fr 1fr; }
    .ehx-stage { border-right: 0; border-bottom: 1px solid var(--ehx-border); padding: 30px 20px 30px 0; }
    .ehx-process-steps { grid-template-columns: 1fr 1fr; }
    .ehx-step { border-right: 0; border-bottom: 1px solid var(--ehx-border); }
    .ehx-stats-grid { grid-template-columns: 1fr 1fr; }
    .ehx-slide { flex: 0 0 calc((100% - 20px) / 2); height: 360px; }
    .ehx-cta-contact { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 700px) {
    .ehx-hero-copy { padding: 90px 24px 60px; }
    .ehx-hero h1 { font-size: clamp(38px, 10vw, 56px); }
    .ehx-hero-actions { flex-direction: column; align-items: flex-start; }
    .ehx-platforms { flex-direction: column; align-items: flex-start; padding: 40px 24px; }
    .ehx-platforms-list { gap: 20px; }
    .ehx-platform { font-size: 15px; }
    .ehx-problem,
    .ehx-flow,
    .ehx-why,
    .ehx-process,
    .ehx-platform-detail,
    .ehx-stats,
    .ehx-services,
    .ehx-cta { padding: 70px 24px; }
    .ehx-showcase { padding: 70px 0 70px 24px; }
    .ehx-flow-stages { grid-template-columns: 1fr; }
    .ehx-process-steps { grid-template-columns: 1fr; }
    .ehx-stats-grid { grid-template-columns: 1fr; }
    .ehx-why-row { grid-template-columns: 40px 1fr; gap: 12px; }
    .ehx-why-row p { grid-column: 2; }
    .ehx-service { grid-template-columns: 40px 1fr 25px; gap: 10px; padding: 22px 0; }
    .ehx-service:hover,
    .ehx-service.is-active { padding-left: 12px; }
    .ehx-slide { flex: 0 0 calc(100% - 24px); height: 300px; }
    .ehx-slider-dots { margin-left: 0; }
    .ehx-problem-highlight span:not(:last-child):after { margin-left: 20px; }
}

/* ==================================================
   REDUCED MOTION
   ================================================== */
@media (prefers-reduced-motion: reduce) {
    .ehx-home *,
    .ehx-home *:before,
    .ehx-home *:after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
    .ehx-wide-visual img { height: 100%; transform: none !important; }
}

/* ==================================================
   SCROLL PERFORMANCE FIXES
   ================================================== */

/* 1. Smooth scrolling sirf anchor links ke liye, JS animations ko affect na kare */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* 2. Reveal animation via class (much smoother than inline styles) */
.ehx-reveal {
    opacity: 0;
    transform: translate3d(0, 25px, 0);
    transition: opacity .7s cubic-bezier(.25, .46, .45, .94),
                transform .7s cubic-bezier(.25, .46, .45, .94);
    will-change: opacity, transform;
}
.ehx-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    will-change: auto; /* remove will-change after animation */
}

/* 3. GPU acceleration for smooth transforms */
.ehx-hero-photo img,
.ehx-service-photo img,
.ehx-wide-visual img,
.ehx-slide img {
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* 4. Prevent layout thrash on hover/transition sections */
.ehx-service,
.ehx-stage,
.ehx-why-row,
.ehx-step {
    contain: layout style;
}

/* 5. Remove heavy transitions that cause jank */
.ehx-service-photo img {
    transition: opacity .5s ease, transform .5s ease;
}

/* 6. Content-visibility for below-fold sections (big perf win) */
.ehx-flow,
.ehx-why,
.ehx-wide-visual,
.ehx-process,
.ehx-platform-detail,
.ehx-showcase,
.ehx-stats,
.ehx-cta {
    content-visibility: auto;
    contain-intrinsic-size: auto 800px;
}

/* 7. Fix potential overflow issues causing scroll jank */
.ehx-home {
    overflow-x: hidden;
    width: 100%;
}
.ehx-hero,
.ehx-services,
.ehx-showcase,
.ehx-cta {
    overflow: hidden;
}

/* 8. Optimize large typography rendering */
.ehx-hero h1,
.ehx-hero-word,
.ehx-cta:before,
.ehx-wide-copy h2 {
    text-rendering: optimizeSpeed;
    transform: translateZ(0);
}