.esb {
    --cyan: #3db7d7;
    --cyan-2: #69d2e9;
    --green: #68df8b;
    --ink: #08131a;
    --dark: #06151c;
    --dark-2: #0b2d38;
    --light: #f3f5f6;
    --border: #dce2e5;
    --muted: #68757e;
    color: var(--ink);
}

.esb-shell { padding-inline: 28px; }
.esb-section { padding: 30px 0; }
.esb-section--compact { padding-top: 28px; padding-bottom: 28px; }
.esb-section--last h2 {
  color: white;
}
.esb h1,
.esb h2,
.esb h3,
.esb p { margin-top: 0; }

.esb-pill,
.esb-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border-radius: 999px;
}

.esb-pill {
    padding: 8px 15px;
    border: 1px solid rgba(61,183,215,.46);
    color: var(--cyan);
    background: rgba(61,183,215,.04);
    font-size: 14px;
}

.esb-kicker {
    padding: 8px 14px;
    color: var(--cyan);
    background: #eefbfe;
    border: 1px solid rgba(61,183,215,.35);
    font-size: 14px;
    margin-bottom: 18px;
}

.esb-kicker--dark {
    color: var(--cyan-2);
    background: rgba(61,183,215,.08);
}

.esb-head { margin-bottom: 28px; }
.esb-head h2 {
    max-width: 1000px;
    margin-bottom: 0;
    font-size: clamp(42px, 5vw, 78px);
    line-height: .98;
    letter-spacing: -.055em;
    font-weight: 800;
}
.esb-head h2 span,
.esb-mobile h2 span,
.esb-cta h2 span { color: var(--cyan); }
.esb-head p {
    max-width: 500px;
    margin: 0 0 7px auto;
    color: var(--muted);
    font-size: 20px;
    line-height: 1.42;
}

/* HERO */
.esb-hero { padding-top: 8px; }
.esb-hero__panel {
    position: relative;
    overflow: hidden;
    border-radius: 36px;
    background:
        radial-gradient(circle at 82% 43%, rgba(61,183,215,.11), transparent 28%),
        linear-gradient(112deg, var(--dark) 0%, #071b24 50%, var(--dark-2) 100%);
}
.esb-hero__copy {
    position: relative;
    z-index: 8;
    max-width: 690px;
    padding: 2rem;
}
.esb-hero__copy h1 {
    max-width: 680px;
    margin: 30px 0 23px;
    color: #fff;
    font-size: clamp(50px, 3.45vw, 76px);
    line-height: .98;
    letter-spacing: -.055em;
    font-weight: 800;
}
.esb-hero__copy h1 span {
    display: block;
    color: var(--cyan);
}
.esb-hero__copy > p {
    max-width: 620px;
    margin-bottom: 0;
    color: rgba(255,255,255,.78);
    font-size: 20px;
    line-height: 1.2;
}
.esb-actions { margin-top: 30px; }
.esb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 57px;
    padding: 0 25px;
    border: 1px solid transparent;
    border-radius: 11px;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.esb-btn:hover { transform: translateY(-2px); }
.esb-btn--primary { color:#fff; background:var(--cyan); }
.esb-btn--primary:hover { color:#fff; background:#4cc2df; }
.esb-btn--ghost { color:#fff; border-color:rgba(255,255,255,.25); background:rgba(255,255,255,.02); }
.esb-btn--ghost:hover { color:#fff; border-color:rgba(255,255,255,.5); }

.esb-hero__micro {
    display:flex;
    flex-wrap:wrap;
        gap: 8px 11px;
    margin-top:27px;
    color:rgba(255,255,255,.64);
    font-size:13px;
}
.esb-hero__micro span { display:inline-flex; align-items:center; gap:7px; }
.esb-hero__micro i {
    width:7px; height:7px; border-radius:50%;
    background:var(--green);
    box-shadow:0 0 14px rgba(104,223,139,.5);
}

.esb-hero__visual {
    position:relative;
    height:100%;
    isolation:isolate;
}
.esb-hero__glow {
    position:absolute;
    width:570px; height:570px;
    right:1%; top:13%;
    border-radius:50%;
    background:radial-gradient(circle,rgba(61,183,215,.17),rgba(61,183,215,.035) 48%,transparent 70%);
    animation:esbGlow 7s ease-in-out infinite;
}
.esb-hero__screen {
    position:absolute;
    z-index:2;
    width:min(700px,86%);
    right:4%;
    top:49%;
    transform:translateY(-50%);
    overflow:hidden;
    border:1px solid rgba(255,255,255,.13);
    border-radius:24px;
    background:#fff;
    box-shadow:0 35px 90px rgba(0,0,0,.35);
    animation:esbScreen 7s ease-in-out infinite;
}
.esb-hero__screen::after {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(115deg,transparent 24%,rgba(255,255,255,.19) 43%,transparent 57%);
    transform:translateX(-135%);
    animation:esbShine 8s ease-in-out infinite 1.4s;
}
.esb-hero__screen img { display:block; width:100%; height:auto; object-fit:contain; }

.esb-hero__phone {
    position:absolute;
    z-index:5;
    width:clamp(112px,10vw,158px);
    right:1.7%;
    bottom:35px;
    overflow:hidden;
    border-radius:23px;
    box-shadow:0 24px 58px rgba(0,0,0,.4);
    animation:esbPhone 5.5s ease-in-out infinite;
}
.esb-hero__phone img {
    display:block;
    width:100%;
    height:auto;
    max-height:none;
    object-fit:contain;
}

.esb-signal {
    position:absolute;
    z-index:7;
    display:flex;
    align-items:center;
    gap:11px;
    min-width:190px;
    padding:11px 14px;
    color:#fff;
    border:1px solid rgba(255,255,255,.14);
    border-radius:15px;
    background:rgba(17,50,62,.76);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    box-shadow:0 16px 42px rgba(0,0,0,.24);
}
.esb-signal__icon {
    display:grid; place-items:center;
    flex:0 0 38px; width:38px; height:38px;
    border-radius:10px;
    color:var(--cyan-2);
    background:rgba(61,183,215,.12);
}
.esb-signal small {
    display:block;
    color:rgba(255,255,255,.5);
    font-size:9px;
    font-weight:800;
    letter-spacing:.08em;
}
.esb-signal strong { display:block; margin-top:2px; font-size:13px; line-height:1.2; }
.esb-signal--brand { top:102px; right:8%; animation:esbFloatA 6s ease-in-out infinite; }
.esb-signal--clients { left:3%; bottom:108px; animation:esbFloatB 7s ease-in-out infinite; }
.esb-signal--growth { right:13%; bottom:70px; animation:esbFloatC 6.3s ease-in-out infinite; }

.esb-benefits { margin-top: 16px; }
.esb-benefit {
    min-height: 180px;
    height:100%;
    padding: 14px 17px;
    border-radius:25px;
}
.esb-benefit--green { background:#68df8b; }
.esb-benefit--dark { color:#fff; background:#071218; }
.esb-benefit--dark h2, .esb-benefit--cyan h2 {
  color:#fff;
}
.esb-benefit--cyan { color:#fff; background:var(--cyan); }
.esb-benefit--light { background:#f0f2f3; }
.esb-benefit .esb-icon {
    display:inline-grid; place-items:center;
    font-size: 2.5rem;
    margin-bottom:20px;
}
.esb-benefit h2 { margin-bottom:8px; font-size:23px; font-weight:800; letter-spacing:-.03em; }
.esb-benefit p { margin:0; color:inherit; opacity:.73; font-size:15px; line-height:1.45; }

/* Cards */
.esb-card {
    height:100%;
        min-height: 265px;
    padding:24px;
    border:1px solid var(--border);
    border-radius:28px;
    background:var(--light);
}
.esb-card__icon {
    display:grid; place-items:center;
    width:52px; height:52px;
    margin-bottom:42px;
    border-radius:15px;
    color:var(--cyan);
    background:#dff4f9;
}
.esb-card h3,
.esb-showcase h3,
.esb-step h3 { margin-bottom:9px; font-size:26px; line-height:1.03; font-weight:800; letter-spacing:-.04em; }
.esb-card p,
.esb-showcase p,
.esb-step p { margin:0; color:var(--muted); font-size:16px; line-height:1.45; }

/* Dark business block */
.esb-dark,
.esb-ecosystem,
.esb-cta {
    overflow:hidden;
    border-radius:32px;
    color:#fff;
    background:linear-gradient(115deg,#07151c,#0b2d38);
}
.esb-dark { padding:54px; }
.esb-dark__copy h2 {
    max-width:700px;
    margin:27px 0 18px;
    font-size:clamp(40px,4vw,64px);
    line-height:.98;
    letter-spacing:-.05em;
    font-weight:800;
}
.esb-dark__copy h2 span { color:var(--cyan); }
.esb-dark__copy > p { max-width:650px; color:rgba(255,255,255,.72); font-size:18px; line-height:1.55; }
.esb-dark__rows { margin-top:28px; border-top:1px solid rgba(255,255,255,.12); }
.esb-dark__rows div {
    display:grid;
    grid-template-columns:180px 1fr;
    gap:20px;
    padding:18px 0;
    border-bottom:1px solid rgba(255,255,255,.12);
}
.esb-dark__rows span { color:rgba(255,255,255,.66); }
.esb-audience-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    height:100%;
}
.esb-audience-grid article {
    min-height:180px;
    padding:22px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:22px;
    background:rgba(255,255,255,.055);
}
.esb-audience-grid__icon {
    display:grid; place-items:center;
    width:42px; height:42px;
    margin-bottom:25px;
    border-radius:12px;
    color:var(--cyan-2);
    background:rgba(61,183,215,.11);
}
.esb-audience-grid small { display:block; margin-bottom:7px; color:#fff; font-size:15px; font-weight:800; }
.esb-audience-grid p { margin:0; color:rgba(255,255,255,.64); font-size:14px; line-height:1.4; }

/* Ecosystem */
.esb-ecosystem { padding:48px; }
.esb-head--dark h2 { color:#fff; }
.esb-head--dark p { color:rgba(255,255,255,.67); }
.esb-eco-card {
    display:flex;
    flex-direction:column;
    min-height:150px;
    padding:20px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:20px;
    background:rgba(255,255,255,.055);
}
.esb-eco-card > span {
    display:grid; place-items:center;
    width:42px; height:42px;
    color:var(--cyan);
}
.esb-eco-card strong { max-width:120px; line-height:1.08; font-size:16px; }

/* Showcase */
.esb-showcase {
    height:100%;
    padding:14px 14px 24px;
    border:1px solid var(--border);
    border-radius:28px;
    background:var(--light);
}
.esb-showcase__image {
    overflow:hidden;
    aspect-ratio: 1.79 / 1;
    margin-bottom:22px;
    border-radius:20px;
    background:#fff;
}
.esb-showcase__image img {
    width:100%;       object-fit: cover;
    height: 100%;
}
.esb-showcase h3,
.esb-showcase p { padding-inline:5px; }

/* Steps */
.esb-step {
    min-height: 243px;
    padding:26px;
    border:1px solid var(--border);
    border-radius:28px;
    background:#fff;
}
.esb-step__top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:26px;
}
.esb-step__number {
    color:var(--cyan);
    font-size:44px;
    font-weight:800;
    letter-spacing:-.06em;
}
.esb-step__icon {
    display:grid; place-items:center;
    width:48px; height:48px;
    border-radius:14px;
    color:var(--cyan);
    background:#e3f6fa;
}

/* Mobile app block */
.esb-mobile {
    overflow:hidden;
    padding:52px;
    border-radius:32px;
    background:#f1f3f4;
}
.esb-mobile__copy h2 {
    max-width:700px;
    margin:0 0 18px;
    font-size:clamp(42px,4vw,66px);
    line-height:.98;
    letter-spacing:-.05em;
    font-weight:800;
}
.esb-mobile__copy p {
    max-width:620px;
    margin-bottom:27px;
    color:var(--muted);
    font-size:18px;
    line-height:1.52;
}
.esb-mobile__image {
    overflow:hidden;
    border-radius:26px;
    background:#fff;
}
.esb-mobile__image img {
    display:block;
    width:100%;
    height:auto;
}

/* Cases */
.esb-case {
    position:relative;
    overflow:hidden;
    margin:0;
    aspect-ratio:1/1;
    border-radius:28px;
    background:#eee;
}
.esb-case img {
    width:100%; height:100%; object-fit:cover;
    transition:transform .5s ease;
}
.esb-case:hover img { transform:scale(1.025); }
.esb-case figcaption {
    position:absolute;
    left:18px; right:18px; bottom:18px;
    padding:13px 15px;
    border-radius:14px;
    color:#fff;
    background:rgba(6,21,28,.76);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    font-weight:700;
}

/* FAQ */
.esb-faq {
    max-width:1100px;
}
.esb-faq .accordion-item {
    border:0;
    border-bottom:1px solid var(--border);
    border-radius:0;
}
.esb-faq .accordion-button {
    padding:24px 0;
    background:#fff;
    box-shadow:none;
    color:var(--ink);
    font-size:22px;
    font-weight:700;
}
.esb-faq .accordion-button:not(.collapsed) { color:var(--cyan); }
.esb-faq .accordion-body {
    padding:0 0 26px;
    max-width:900px;
    color:var(--muted);
    font-size:17px;
    line-height:1.55;
}

/* CTA */
.esb-cta {
    display:flex;
    justify-content:space-between;
    gap:40px;
    align-items:flex-end;
    padding:54px;
}
.esb-cta h2 {
    max-width:850px;
    margin:0 0 16px;
    font-size:clamp(42px,4.5vw,70px);
    line-height:.98;
    letter-spacing:-.05em;
    font-weight:800;
}
.esb-cta p {
    max-width:650px;
    margin:0;
    color:rgba(255,255,255,.66);
    font-size:18px;
    line-height:1.5;
}

/* OFFICIAL GOOGLE MATERIAL SYMBOLS OUTLINED SVG */
.msvg {
    display:inline-block;
    width:1.2em;
    height:1.2em;
    flex:0 0 auto;
    background-color:currentColor;
    -webkit-mask:var(--msvg) center / contain no-repeat;
    mask:var(--msvg) center / contain no-repeat;
}
.msvg-storefront{--msvg:url("https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/storefront/default/24px.svg")}
.msvg-arrow-forward{--msvg:url("https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/arrow_forward/default/24px.svg")}
.msvg-verified{--msvg:url("https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/verified/default/24px.svg")}
.msvg-group{--msvg:url("https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/group/default/24px.svg")}
.msvg-trending-up{--msvg:url("https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/trending_up/default/24px.svg")}
.msvg-rocket-launch{--msvg:url("https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/rocket_launch/default/24px.svg")}
.msvg-favorite{--msvg:url("https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/favorite/default/24px.svg")}
.msvg-add-business{--msvg:url("https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/add_business/default/24px.svg")}
.msvg-visibility{--msvg:url("https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/visibility/default/24px.svg")}
.msvg-language{--msvg:url("https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/language/default/24px.svg")}
.msvg-inventory-2{--msvg:url("https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/inventory_2/default/24px.svg")}
.msvg-sync-alt{--msvg:url("https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/sync_alt/default/24px.svg")}
.msvg-factory{--msvg:url("https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/factory/default/24px.svg")}
.msvg-local-shipping{--msvg:url("https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/local_shipping/default/24px.svg")}
.msvg-apps{--msvg:url("https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/apps/default/24px.svg")}
.msvg-cloud{--msvg:url("https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/cloud/default/24px.svg")}
.msvg-payments{--msvg:url("https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/payments/default/24px.svg")}
.msvg-smartphone{--msvg:url("https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/smartphone/default/24px.svg")}
.msvg-auto-awesome{--msvg:url("https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/auto_awesome/default/24px.svg")}
.msvg-extension{--msvg:url("https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/extension/default/24px.svg")}
.msvg-check-circle{--msvg:url("https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/check_circle/default/24px.svg")}
.msvg-route{--msvg:url("https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/route/default/24px.svg")}
.msvg-workspaces{--msvg:url("https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/workspaces/default/24px.svg")}
.msvg-help{--msvg:url("https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/help/default/24px.svg")}

/* animation */
@keyframes esbGlow{0%,100%{transform:scale(1);opacity:.72}50%{transform:scale(1.07);opacity:1}}
@keyframes esbScreen{0%,100%{transform:translateY(-50%)}50%{transform:translateY(calc(-50% - 5px))}}
@keyframes esbPhone{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes esbShine{0%,67%{transform:translateX(-135%);opacity:0}73%{opacity:.55}86%{transform:translateX(135%);opacity:0}100%{transform:translateX(135%);opacity:0}}
@keyframes esbFloatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes esbFloatB{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@keyframes esbFloatC{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

@media (prefers-reduced-motion:reduce){
    .esb-hero__glow,.esb-hero__screen,.esb-hero__screen::after,.esb-hero__phone,.esb-signal{animation:none}
}

@media(max-width:1199.98px){
    .esb-hero__copy{padding-left:50px}
    .esb-hero__screen{width:90%}
    .esb-signal--clients{left:0}
}

@media(max-width:991.98px){
    .esb-shell{padding-inline:14px}

    .esb-hero__panel{min-height:auto;border-radius:27px}
    .esb-hero__copy{padding:48px 28px 24px}
    .esb-hero__copy h1{font-size:clamp(44px,9vw,64px)}
    .esb-hero__copy>p{font-size:18px}
    .esb-hero__screen{width:82%;right:9%;top:45%}
    .esb-hero__phone{width:128px;right:5%;bottom:20px}
    .esb-signal--brand{top:12px;right:6%}
    .esb-signal--clients{left:5%;bottom:18px}
    .esb-signal--growth{display:none}
    .esb-head p{margin:22px 0 0}
    .esb-dark,.esb-ecosystem,.esb-mobile,.esb-cta{padding:34px}
    .esb-cta{display:block}
    .esb-cta .d-flex{margin-top:28px}
}
.esb-audience-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.mobile-horizontal-scroll {
    display: flex;
}
@media (max-width: 767.98px) {
   .mobile-horizontal-scroll {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 12px;

        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;
    }

    .mobile-horizontal-scroll::-webkit-scrollbar {
        display: none;
    }

    .mobile-horizontal-scroll > * {
        flex: 0 0 82%;
        min-width: 82%;
        scroll-snap-align: start;
    }
   .esb-audience-grid {
        display: flex;
        flex-wrap: nowrap;
        gap: 12px;

        overflow-x: auto;
        overflow-y: hidden;

        padding-bottom: 8px;

        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;
    }

    .esb-audience-grid::-webkit-scrollbar {
        display: none;
    }

    .esb-audience-grid article {
        flex: 0 0 85%;
        min-width: 85%;

        scroll-snap-align: start;
    }
    .esb-benefits {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;

        margin-left: 0;
        margin-right: 0;
        margin-top: 0;
        padding-bottom: 8px;
       
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;
    }

    .esb-benefits::-webkit-scrollbar {
        display: none;
    }

    .esb-benefits > [class*="col-"] {
        flex: 0 0 82%;
        width: 82%;
        max-width: 82%;
 padding: 0;
        padding-right: 1rem;
        scroll-snap-align: start;
    }
}
@media(max-width:575.98px){
    .esb-hero__copy{padding:21px 20px 18px}

    .esb-hero__copy h1{font-size:clamp(39px,12vw,51px);line-height:1.01}
    .esb-hero__copy>p{font-size:16.5px;line-height:1.5}
    .esb-actions{display:grid;grid-template-columns:1fr;width:100%}
    .esb-btn{width:100%}
    .esb-hero__micro{display:grid;gap:9px}
    .esb-hero__screen{width:91%;right:4.5%;top:44%}
    .esb-hero__phone{width:87px;right:2%;bottom:12px;border-radius:16px}
    .esb-signal{min-width:auto;padding:8px 10px}
    .esb-signal__icon{width:31px;height:31px;flex-basis:31px}
    .esb-signal strong{font-size:11.5px}
    .esb-signal--brand{top:0;right:3%}
    .esb-signal--clients{left:3%;bottom:4px}
    .esb-head h2{font-size:clamp(38px,11vw,52px)}
    .esb-dark,.esb-ecosystem,.esb-mobile,.esb-cta{padding:24px;border-radius:25px}
    .esb-audience-grid{grid-template-columns:1fr}
    .esb-dark__rows div{grid-template-columns:1fr;gap:5px}
}

/* =====================================================================
   FINAL REWORK — Ewonta seller / brand landing
   ===================================================================== */

/* Typography */
.esb h1,
.esb h2,
.esb h3,
.esb-benefit h2,
.esb-card h3,
.esb-showcase h3,
.esb-step h3,
.esb-cta h2,
.esb-mobile__copy h2,
.esb-together__copy h2,
.esb-faq-intro h2 {
    font-weight: 700;
}

.esb-head h2 {
    max-width: 940px;
    font-size: clamp(42px, 3.5vw, 68px);
    line-height: 1;
    letter-spacing: -0.05em;
}

.esb-head p {
    font-size: 18px;
    line-height: 1.5;
}



.esb-hero__copy {
    max-width: 650px;
    padding: 2rem;
}

.esb-hero__copy h1 {
    max-width: 640px;
    margin: 28px 0 22px;
    font-size: clamp(48px, 3.5vw, 72px);
    line-height: .99;
    letter-spacing: -.052em;
}

.esb-hero__lead {
    max-width: 590px;
    color: rgba(255,255,255,.78);
    font-size: 19px;
    line-height: 1.55;
}

.esb-hero__visual {
    position: relative;
    height: 100%;
    isolation: isolate;
}

.esb-hero__halo {
    position: absolute;
    width: 520px;
    height: 520px;
    left: 50%;
    top: 50%;
    transform: translate(-45%,-50%);
    border-radius: 50%;
    background: radial-gradient(circle,rgba(61,183,215,.17),rgba(61,183,215,.03) 52%,transparent 72%);
    animation: esbFinalHalo 7s ease-in-out infinite;
}

.esb-hero__desktop {
    position: absolute;
    z-index: 2;
    width: min(650px,80%);
    left: 50%;
    top: 49%;
    transform: translate(-46%,-50%);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 36px 90px rgba(0,0,0,.34);
    animation: esbFinalDesktop 7s ease-in-out infinite;
}

.esb-hero__desktop img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.esb-hero__phone {
    position: absolute;
    z-index: 5;
    width: clamp(102px,8.5vw,138px);
    right: 5.5%;
    bottom: 72px;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 22px 55px rgba(0,0,0,.38);
    animation: esbFinalPhone 5.5s ease-in-out infinite;
}

.esb-hero__phone img {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
}

.esb-signal {
    min-width: 178px;
    padding: 10px 13px;
}

.esb-signal__icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
}

.esb-signal small {
    font-weight: 700;
    font-size: 8px;
}

.esb-signal strong {
    font-size: 12.5px;
}

.esb-signal--brand {
    top: 88px;
    right: 8%;
}

.esb-signal--clients {
    left: 5%;
    bottom: 88px;
}

.esb-signal--growth {
    right: 17%;
    bottom: 42px;
}

@keyframes esbFinalHalo {
    0%,100% { opacity: .72; transform: translate(-45%,-50%) scale(1); }
    50% { opacity: 1; transform: translate(-45%,-50%) scale(1.06); }
}
@keyframes esbFinalDesktop {
    0%,100% { transform: translate(-46%,-50%); }
    50% { transform: translate(-46%,-51%); }
}
@keyframes esbFinalPhone {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

/* Marketplace + own store: deliberately different from the ecosystem block */
.esb-together {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 30px;
    background: #f4f6f7;
}

.esb-pill--light {
    background: #fff;
    border-color: #bfeaf4;
}

.esb-together__copy {
    height: 100%;
    padding: 50px;
}

.esb-together__copy h2 {
    max-width: 690px;
    margin: 25px 0 17px;
    font-size: clamp(40px,3.5vw,60px);
    line-height: 1;
    letter-spacing: -.048em;
}

.esb-together__copy > p {
    max-width: 640px;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.55;
}

.esb-together__comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 28px;
}

.esb-together__comparison > div {
    display: grid;
    grid-template-columns: 34px 1fr;
    column-gap: 10px;
    row-gap: 3px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #fff;
}

.esb-together__comparison .msvg {
    grid-row: 1 / 3;
    margin-top: 3px;
    color: var(--cyan);
    font-size: 24px;
}

.esb-together__comparison strong { font-size: 15px; }
.esb-together__comparison small {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.4;
}

.esb-audience-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    height: 100%;
    padding: 24px;
    background: linear-gradient(135deg,#071820,#0c313d);
}

.esb-audience-grid article {
    min-height: 170px;
    padding: 20px;
    border-radius: 20px;
}

/* Ecosystem is light now, so it no longer repeats the preceding section */
.esb-eco-card {
    display: flex;
    flex-direction: column;
    min-height: 145px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: #fff;
}

.esb-eco-card__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 25px;
    border-radius: 12px;
    color: var(--cyan);
    background: #e7f7fb;
}

.esb-eco-card strong {
    max-width: 130px;
    font-size: 15px;
    line-height: 1.12;
}

/* Mobile app: smaller controlled screenshot, no giant phone */
.esb-mobile {
    padding: 46px 50px;
}

.esb-mobile__copy h2 {
    max-width: 650px;
    font-size: clamp(40px,3.6vw,60px);
    line-height: 1;
}

.esb-mobile__copy p {
    max-width: 610px;
    font-size: 17px;
}

.esb-mobile__visual {
    position: relative;
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.esb-mobile__frame {
    width: min(380px,72%);
    overflow: hidden;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(8,20,27,.13);
}

.esb-mobile__frame img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: cover;
    object-position: top center;
}

.esb-mobile__note {
    position: absolute;
    right: 3%;
    bottom: 48px;
    display: flex;
    align-items: center;
    gap: 11px;
    max-width: 260px;
    padding: 13px 15px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 14px 35px rgba(8,20,27,.10);
}

.esb-mobile__note > .msvg {
    color: var(--cyan);
    font-size: 26px;
}

.esb-mobile__note strong,
.esb-mobile__note small { display: block; }
.esb-mobile__note strong { font-size: 14px; }
.esb-mobile__note small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.35;
}

/* FAQ: real two-column composition, no empty right side */
.esb-faq-layout {
    display: grid;
    grid-template-columns: minmax(300px,.78fr) minmax(0,1.22fr);
    gap: 64px;
    align-items: start;
}

.esb-faq-intro h2 {
    max-width: 560px;
    margin: 0 0 18px;
    font-size: clamp(42px,4vw,64px);
    line-height: 1;
    letter-spacing: -.05em;
}

.esb-faq-intro > p {
    max-width: 500px;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.55;
}

.esb-faq-contact {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 470px;
    margin-top: 28px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 18px;
    color: var(--ink);
    background: var(--light);
}

.esb-faq-contact__icon {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    color: var(--cyan);
    background: #dff4f9;
}

.esb-faq-contact strong,
.esb-faq-contact small { display:block; }
.esb-faq-contact strong { font-size:15px; }
.esb-faq-contact small {
    margin-top:3px;
    color:var(--muted);
    font-size:12.5px;
    line-height:1.35;
}
.esb-faq-contact > .msvg:last-child { margin-left:auto;color:var(--cyan); }

.esb-faq .accordion-button {
    padding: 22px 0;
    font-size: 19px;
    font-weight: 700;
}

.esb-faq .accordion-body {
    padding: 0 0 24px;
    font-size: 16px;
}

/* Extra Material Symbols SVG masks */
.msvg-notifications{--msvg:url("https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/notifications/default/24px.svg")}
.msvg-chat{--msvg:url("https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/chat/default/24px.svg")}

@media (prefers-reduced-motion: reduce) {
    .esb-hero__halo,.esb-hero__desktop,.esb-hero__phone,.esb-signal { animation:none; }
}

@media (max-width:1199.98px) {
    .esb-hero__copy { padding-left:48px; }
    .esb-hero__desktop { width:82%;transform:translate(-48%,-50%); }
    .esb-signal--clients { left:1%; }
}

@media (max-width:991.98px) {
    .esb-hero__panel { min-height:auto; }
    .esb-hero__copy { padding:46px 27px 20px; }
    .esb-hero__copy h1 { font-size:clamp(43px,9vw,62px); }
    .esb-hero__desktop { width:78%;left:48%;top:45%;transform:translate(-50%,-50%); }
    .esb-hero__phone { width:112px;right:7%;bottom:22px; }
    .esb-signal--brand { top:10px;right:7%; }
    .esb-signal--clients { left:7%;bottom:20px; }
    .esb-signal--growth { display:none; }
    .esb-together__copy { padding:34px; }
    .esb-audience-grid { padding:20px; }
    .esb-mobile { padding:34px; }
    .esb-mobile__visual { min-height:420px; }
    .esb-faq-layout { grid-template-columns:1fr;gap:30px; }
}

@media (max-width:575.98px) {
    .esb-hero__copy { padding:34px 20px 18px; }
    .esb-hero__copy h1 { font-size:clamp(38px,11.5vw,50px); }
    .esb-hero__desktop { width:88%;left:49%;top:44%; }
    .esb-hero__phone { width:78px;right:3%;bottom:12px;border-radius:14px; }
    .esb-signal { min-width:auto;padding:7px 9px; }
    .esb-signal__icon { width:30px;height:30px;flex-basis:30px; }
    .esb-signal strong { font-size:11px; }
    .esb-signal--brand { top:0;right:3%; }
    .esb-signal--clients { left:3%;bottom:4px; }
    .esb-head h2 { font-size:clamp(38px,10vw,50px); }
    .esb-together__copy { padding:24px; }
    .esb-together__comparison { grid-template-columns:1fr; }
    .esb-audience-grid { grid-template-columns:1fr;padding:14px; }
    .esb-mobile { padding:24px;border-radius:24px; }
    .esb-mobile__visual { min-height:340px; }
    .esb-mobile__frame { width:min(300px,80%); }
    .esb-mobile__frame img { max-height:360px; }
    .esb-mobile__note { right:0;bottom:12px;max-width:220px; }
}