/* Section redesigns (Nov 2026), loaded after et-site.css on every page.
   1. Page explainer sections as infographics (include/et-seo-design.php, js/et-sections.js)
   2. Product page "Benefits" tabs
   3. Career page: benefit tiles and job cards */

/* ---------- 1. Explainer sections as infographics (include/et-seo-design.php) ----------
   Reveal: js/et-sections.js adds .is-in when a block scrolls into view. Without JS or with
   reduced motion (no html.et-js) everything shows in its final state. */
main .et-seo-content.et-seo-designed { padding: 90px 0 50px; background: linear-gradient(180deg, #fff 0%, #f4f7f7 100%); }
main .et-seo-designed .container { max-width: 1180px; }
main .et-ix { margin: 0 0 88px; }
main .et-ix:last-child { margin-bottom: 0; }
main .et-ix__head { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
main .et-ix__head h2 { margin: 0 !important; font-size: clamp(24px, 2.8vw, 36px); line-height: 1.15; letter-spacing: -.02em; color: var(--et-ink); }
main .et-ix__num {
    flex: none; position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px;
    background: var(--et-ink); color: #fff; font-family: var(--et-font-head, inherit); font-size: 15px; font-weight: 800;
}
main .et-ix__num::after { content: ""; position: absolute; right: -5px; bottom: -5px; width: 14px; height: 14px; border-radius: 50%; background: var(--et-orange); border: 3px solid #fff; }
main .et-seo-designed p, main .et-seo-designed li { font-size: 16px; line-height: 1.7; color: var(--et-text); }
main .et-seo-designed a { color: var(--et-teal); font-weight: 600; }
main .et-ix__lead { max-width: 800px; margin-bottom: 22px; }
main .et-ix-ico {
    flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--et-teal-50); color: var(--et-teal);
}
main .et-ix-ico svg { width: 24px; height: 24px; }

/* intro: dark card + queue strip */
main .et-ix--intro {
    position: relative; overflow: hidden; padding: 48px 52px 0; border-radius: 30px; color: #fff;
    background: radial-gradient(520px 300px at 100% 0%, rgba(15, 148, 136, .55), transparent 70%), var(--et-ink);
}
main .et-ix--intro .et-ix__head::before { content: ""; flex: none; width: 5px; align-self: stretch; border-radius: 3px; background: linear-gradient(180deg, var(--et-teal), var(--et-orange)); }
main .et-ix--intro h2 { color: #fff !important; }
main .et-ix--intro p { max-width: 880px; color: rgba(255, 255, 255, .86); font-size: 17px; }
main .et-ix--intro a { color: #8fe6db; }
main .et-ix-queue { position: relative; display: flex; align-items: center; height: 92px; margin: 34px -52px 0; padding-left: 52px; background: rgba(255, 255, 255, .05); border-top: 1px solid rgba(255, 255, 255, .1); overflow: hidden; }
main .et-ix-queue__belt { display: flex; gap: 12px; padding-right: 180px; animation: etIxBelt 18s linear infinite; }
main .et-ix-queue__tk {
    flex: none; padding: 9px 16px; border-radius: 10px; background: rgba(255, 255, 255, .1); border: 1px dashed rgba(255, 255, 255, .28);
    font-family: var(--et-font-head, inherit); font-size: 16px; font-weight: 700; color: rgba(255, 255, 255, .85);
}
main .et-ix-queue::before { content: ""; position: absolute; right: 150px; top: 0; bottom: 0; width: 90px; background: linear-gradient(90deg, transparent, #18485a); z-index: 1; }
main .et-ix-queue__desk {
    position: absolute; right: 0; top: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; width: 170px; padding-left: 22px;
    background: #18485a; border-left: 1px solid rgba(255, 255, 255, .12);
}
main .et-ix-queue__desk small { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8fe6db; }
main .et-ix-queue__desk b { font-family: var(--et-font-head, inherit); font-size: 30px; line-height: 1.1; color: #fff; }
main .et-ix-queue__desk b::after { content: ""; display: inline-block; width: 9px; height: 9px; margin-left: 10px; border-radius: 50%; background: var(--et-orange); vertical-align: middle; animation: etIxPulse 1.5s infinite; }
@keyframes etIxBelt { to { transform: translateX(-50%); } }
@keyframes etIxPulse { 50% { opacity: .2; } }

/* steps: process timeline */
main .et-ix-steps { position: relative; display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 22px; margin: 0; padding: 0; list-style: none; }
main .et-ix-steps::before, main .et-ix-steps::after {
    content: ""; position: absolute; left: calc(50% / var(--n, 3)); right: calc(50% / var(--n, 3)); top: 27px; height: 3px; border-radius: 2px;
}
main .et-ix-steps::before { background: var(--et-teal-100); }
main .et-ix-steps::after { background: linear-gradient(90deg, var(--et-teal), var(--et-orange)); transform-origin: left; transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
main .et-ix-step { position: relative; margin: 0; padding: 0; }
main .et-ix-step::before { content: none !important; }
main .et-ix-step__node {
    position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 22px; border-radius: 50%;
    background: #fff; border: 3px solid var(--et-teal); transition: transform .5s cubic-bezier(.3, 1.6, .5, 1), background .4s;
}
main .et-ix-step__no { font-family: var(--et-font-head, inherit); font-size: 20px; font-weight: 800; color: var(--et-ink); }
main .et-ix-step:last-child .et-ix-step__node { background: var(--et-ink); border-color: var(--et-orange); }
main .et-ix-step:last-child .et-ix-step__no { color: #fff; }
main .et-ix-step__card {
    height: calc(100% - 78px); padding: 24px; border-radius: 20px; background: #fff; border: 1px solid var(--et-line);
    transition: transform .6s ease, opacity .6s ease, border-color .2s;
}
main .et-ix-step__card:hover { border-color: var(--et-teal-100); }
main .et-ix-step__ico { margin-bottom: 16px; }
main .et-ix-step h3 { margin: 0 0 8px !important; font-size: 18px; line-height: 1.35; color: var(--et-ink); }
main .et-ix-step p { margin: 0; font-size: 15px; line-height: 1.65; }

/* features: icon bento */
main .et-ix-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
main .et-ix-grid > li {
    position: relative; display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 22px; border-radius: 18px; background: #fff; border: 1px solid var(--et-line);
    font-size: 15.5px; line-height: 1.6; transition: transform .55s ease, opacity .55s ease, border-color .2s, box-shadow .2s;
}
main .et-ix-grid > li::before { content: none !important; }
main .et-ix-grid--features > li:hover { border-color: var(--et-teal-100); box-shadow: 0 18px 34px -24px rgba(11, 42, 51, .35); }
main .et-ix-grid--features > li:first-child { background: var(--et-ink); border-color: var(--et-ink); color: rgba(255, 255, 255, .86); }
main .et-ix-grid--features > li:first-child .et-ix-ico { background: rgba(255, 255, 255, .12); color: #8fe6db; }
main .et-ix-grid--features > li:first-child .et-ix-label { color: #fff; }
main .et-ix-grid--features > li:first-child a { color: #8fe6db; }
main .et-ix-label { display: block; font-size: 17px; font-weight: 700; color: var(--et-ink); }

/* problems: the cross becomes a tick when the block is shown */
main .et-ix-grid--problems > li { flex-direction: row; align-items: center; gap: 16px; padding: 18px 20px; }
main .et-ix-solve { position: relative; flex: none; width: 40px; height: 40px; border-radius: 12px; background: #e8f6f4; transition: background .5s .3s; }
main .et-ix-solve::before, main .et-ix-solve::after { content: ""; position: absolute; left: 50%; top: 50%; border-radius: 2px; transition: all .5s .3s cubic-bezier(.3, 1.4, .5, 1); }
main .et-ix-solve::before { width: 8px; height: 3px; background: var(--et-teal); transform: translate(-90%, 2px) rotate(45deg); }
main .et-ix-solve::after { width: 16px; height: 3px; background: var(--et-teal); transform: translate(-30%, -1px) rotate(-50deg); }
html.et-js main .et-ix--problems:not(.is-in) .et-ix-solve { background: #fdecec; }
html.et-js main .et-ix--problems:not(.is-in) .et-ix-solve::before { width: 16px; background: #e45454; transform: translate(-50%, -50%) rotate(45deg); }
html.et-js main .et-ix--problems:not(.is-in) .et-ix-solve::after { width: 16px; background: #e45454; transform: translate(-50%, -50%) rotate(-45deg); }
main .et-ix--problems .et-ix__head h2::after {
    content: "Solved"; margin-left: 14px; padding: 5px 10px; border-radius: 999px; background: var(--et-teal-50); color: var(--et-teal);
    font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; vertical-align: middle;
}

/* related: link cards */
main .et-ix-grid--related > li { flex-direction: row; align-items: center; gap: 16px; padding: 20px 52px 20px 20px; cursor: pointer; }
main .et-ix-grid--related > li::after { content: "\2192"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--et-teal); transition: transform .2s; }
main .et-ix-grid--related > li:hover { border-color: var(--et-teal); }
main .et-ix-grid--related > li:hover::after { transform: translate(5px, -50%); }
main .et-ix-grid--related a { display: block; font-size: 17px; color: var(--et-ink); text-decoration: none; }

/* who: industry icon strip */
main .et-ix--who .et-ix__body { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; padding: 28px 32px; border-radius: 22px; background: #fff; border: 1px solid var(--et-line); }
main .et-ix-who { display: grid; grid-template-columns: repeat(4, 52px); gap: 10px; }
main .et-ix-who__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: #f4f7f7; transition: transform .5s cubic-bezier(.3, 1.6, .5, 1), opacity .5s; }
main .et-ix-who__ic:nth-child(odd) { background: var(--et-teal-50); }
main .et-ix--who p { margin: 0; }

/* compare: A VS B */
main .et-ix--compare .et-ix__body { padding: 30px 32px; border-radius: 22px; background: #fff; border: 1px solid var(--et-line); }
main .et-ix-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-bottom: 22px; }
main .et-ix-vs__side { padding: 14px 18px; border-radius: 14px; background: #f4f7f7; text-align: center; font-weight: 700; color: var(--et-ink); transition: transform .6s ease, opacity .6s; }
main .et-ix-vs__side:last-child { background: var(--et-teal-50); }
main .et-ix-vs__mark { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--et-orange); color: #fff; font-family: var(--et-font-head, inherit); font-weight: 800; transition: transform .5s .3s cubic-bezier(.3, 1.6, .5, 1); }
main .et-ix--compare p { margin: 0; }

/* note: callout */
main .et-ix--note .et-ix__body { display: flex; gap: 20px; align-items: flex-start; padding: 26px 30px; border-radius: 22px; background: var(--et-teal-50); border-left: 4px solid var(--et-teal); }
main .et-ix--note .et-ix-ico { background: #fff; }
main .et-ix--note p { margin: 0 0 8px; }
main .et-ix--note p:last-child { margin: 0; }

/* cards (h3 + p) */
main .et-ix--cards .et-ix__body { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
main .et-ix-card { padding: 24px; border-radius: 18px; background: #fff; border: 1px solid var(--et-line); }
main .et-ix-card h3 { margin: 14px 0 8px !important; font-size: 18px; color: var(--et-ink); }
main .et-ix-card p { margin: 0; font-size: 15px; }

/* FAQ */
main .et-ix-faq { display: grid; gap: 12px; max-width: 940px; }
main .et-ix-q { border-radius: 16px; background: #fff; border: 1px solid var(--et-line); transition: border-color .2s, box-shadow .2s; }
main .et-ix-q[open] { border-color: var(--et-teal-100); box-shadow: 0 18px 34px -26px rgba(11, 42, 51, .35); }
main .et-ix-q summary { display: flex; align-items: center; gap: 16px; padding: 18px 22px; cursor: pointer; list-style: none; }
main .et-ix-q summary::-webkit-details-marker { display: none; }
main .et-ix-q__no { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: #f4f7f7; color: var(--et-teal); font-size: 13px; font-weight: 800; transition: background .2s, color .2s; }
main .et-ix-q[open] .et-ix-q__no { background: var(--et-ink); color: #fff; }
main .et-ix-q summary h3 { flex: 1; margin: 0 !important; font-size: 17px; line-height: 1.4; color: var(--et-ink); }
main .et-ix-q summary::after { content: "+"; flex: none; font-size: 24px; font-weight: 400; line-height: 1; color: var(--et-teal); transition: transform .25s; }
main .et-ix-q[open] summary::after { transform: rotate(45deg); }
main .et-ix-q summary:focus-visible { outline: 3px solid rgba(247, 132, 37, .6); outline-offset: 2px; border-radius: 16px; }
main .et-ix-q__a { padding: 0 22px 20px 76px; }
main .et-ix-q__a p { margin: 0; font-size: 15.5px; }
main .et-ix-q[open] .et-ix-q__a { animation: etIxOpen .35s ease; }
@keyframes etIxOpen { from { opacity: 0; transform: translateY(-6px); } }

/* scroll reveal (motion allowed + JS only) */
html.et-js main .et-ix:not(.is-in) .et-ix-steps::after { transform: scaleX(0); }
html.et-js main .et-ix:not(.is-in) .et-ix-step__node { transform: scale(.4); }
html.et-js main .et-ix:not(.is-in) .et-ix-step__card,
html.et-js main .et-ix:not(.is-in) .et-ix-grid > li,
html.et-js main .et-ix:not(.is-in) .et-ix-who__ic,
html.et-js main .et-ix:not(.is-in) .et-ix-q,
html.et-js main .et-ix:not(.is-in) .et-ix-vs__side { opacity: 0; transform: translateY(22px); }
html.et-js main .et-ix:not(.is-in) .et-ix-vs__mark { transform: scale(0) rotate(-90deg); }
html.et-js main .et-ix .et-ix-q { transition: opacity .5s ease, transform .5s ease, border-color .2s, box-shadow .2s; }
html.et-js main .et-ix .et-ix-step:nth-child(1) .et-ix-step__node { transition-delay: .15s; }
html.et-js main .et-ix .et-ix-step:nth-child(2) .et-ix-step__node { transition-delay: .55s; }
html.et-js main .et-ix .et-ix-step:nth-child(3) .et-ix-step__node { transition-delay: .95s; }
html.et-js main .et-ix .et-ix-step:nth-child(4) .et-ix-step__node { transition-delay: 1.35s; }
html.et-js main .et-ix .et-ix-step:nth-child(1) .et-ix-step__card { transition-delay: .25s; }
html.et-js main .et-ix .et-ix-step:nth-child(2) .et-ix-step__card { transition-delay: .65s; }
html.et-js main .et-ix .et-ix-step:nth-child(3) .et-ix-step__card { transition-delay: 1.05s; }
html.et-js main .et-ix .et-ix-step:nth-child(4) .et-ix-step__card { transition-delay: 1.45s; }
html.et-js main .et-ix [style*="--d"] { transition-delay: var(--d) !important; }
@media (prefers-reduced-motion: reduce) {
    main .et-ix-queue__belt, main .et-ix-queue__desk b::after { animation: none; }
}

@media (max-width: 991.98px) {
    main .et-ix { margin-bottom: 64px; }
    main .et-ix-steps { grid-template-columns: 1fr; gap: 14px; padding-left: 0; }
    main .et-ix-steps::before, main .et-ix-steps::after { left: 27px; right: auto; top: 28px; bottom: 28px; width: 3px; height: auto; }
    main .et-ix-steps::after { transform-origin: top; }
    html.et-js main .et-ix:not(.is-in) .et-ix-steps::after { transform: scaleY(0); }
    main .et-ix-step { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; }
    main .et-ix-step__node { margin: 0; }
    main .et-ix-step__card { height: auto; }
}
@media (max-width: 767.98px) {
    main .et-seo-content.et-seo-designed { padding: 60px 0 30px; }
    main .et-ix--intro { padding: 30px 22px 0; border-radius: 22px; }
    main .et-ix-queue { margin: 26px -22px 0; padding-left: 22px; height: 76px; }
    main .et-ix-queue__desk { width: 128px; padding-left: 16px; }
    main .et-ix-queue__desk b { font-size: 24px; }
    main .et-ix-queue::before { right: 128px; }
    main .et-ix-grid { grid-template-columns: 1fr; }
    main .et-ix--who .et-ix__body { grid-template-columns: 1fr; padding: 22px; }
    main .et-ix--compare .et-ix__body, main .et-ix--note .et-ix__body { padding: 22px; }
    main .et-ix-vs { gap: 8px; }
    main .et-ix-vs__side { padding: 10px; font-size: 14px; }
    main .et-ix-vs__mark { width: 40px; height: 40px; font-size: 13px; }
    main .et-ix-q__a { padding-left: 22px; }
    main .et-ix__num { width: 40px; height: 40px; font-size: 13px; }
    main .et-ix--problems .et-ix__head h2::after { display: none; }
}

/* ---------- 2. Product page "Benefits" tabs ----------
   The tab list sets the height and the picture fills the space beside it, so there is
   no empty area under the tabs and the inset is the same on every side. */
main .finance-inner-tab .spa-main .spa-slide .tab-section { padding: 14px; }
main .finance-inner-tab .spa-main .spa-slide .tab-section .vtabs1 > .row { align-items: stretch; margin: 0; }
main .finance-inner-tab .spa-main .spa-slide .tab-section .vtabs1 > .row > [class*="col-"] { display: flex; padding: 0 7px; }
main .finance-inner-tab .spa-main .spa-slide .tab-section .vtabs1 > .row > [class*="col-"]:first-child { padding-left: 0; }
main .finance-inner-tab .spa-main .spa-slide .tab-section .vtabs1 > .row > [class*="col-"]:last-child { padding-right: 0; }
main .finance-inner-tab .spa-main .spa-slide .tab-section .vtabs1 .right-section-list { width: 100%; display: flex; padding: 12px; border-radius: 14px; }
main .finance-inner-tab .spa-main .spa-slide .tab-section .vtabs1 .nav-pills { flex: 1; display: flex; flex-direction: column; gap: 8px; margin: 0 !important; padding: 0; }
main .finance-inner-tab .spa-main .spa-slide .tab-section .vtabs1 .nav-link {
    flex: 1 1 0; min-height: 84px; display: flex; align-items: center; margin: 0 !important; background: #fff; border: 1px solid var(--et-line);
}
main .finance-inner-tab .spa-main .spa-slide .tab-section .vtabs1 .nav-link.active { border-color: transparent; background: var(--et-ink); }
main .finance-inner-tab .spa-main .spa-slide .tab-section .vtabs1 .nav-link .tab-title { margin: 0; font-size: 16px; }
main .finance-inner-tab .spa-main .spa-slide .tab-section .tab-content { position: relative; width: 100%; padding: 0 !important; display: flex; }
main .finance-inner-tab .spa-main .spa-slide .tab-section .tab-content > #tab-point { position: absolute; top: -90px; }
main .finance-inner-tab .spa-main .spa-slide .tab-section .tab-content > .tab-pane { flex: 1; min-height: 380px; }
main .finance-inner-tab .spa-main .spa-slide .tab-section .tab-content > .tab-pane:not(.active) { display: none; }
main .finance-inner-tab .spa-main .spa-slide .tab-section .tab-content .service-img { position: relative; height: 100%; margin: 0; }
main .finance-inner-tab .spa-main .spa-slide .tab-section .tab-content .service-img img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 14px; box-shadow: none;
}
@media (max-width: 767.98px) {
    main .finance-inner-tab .spa-main .spa-slide .tab-section .vtabs1 > .row > [class*="col-"] { padding: 0; }
    main .finance-inner-tab .spa-main .spa-slide .tab-section .vtabs1 > .row > [class*="col-"] + [class*="col-"] { margin-top: 12px; }
    main .finance-inner-tab .spa-main .spa-slide .tab-section .vtabs1 .nav-link { min-height: 64px; flex: none; }
    main .finance-inner-tab .spa-main .spa-slide .tab-section .tab-content > .tab-pane { min-height: 0; aspect-ratio: 4 / 3; }
}

/* ---------- 3. Career page ---------- */
/* benefit tiles: one card each (et-site.css drew the icon box and the tile as two cards) */
main .work-on-etoken { padding: 70px 0 50px; background: #f4f7f7; }
main .work-on-etoken .platform-sec { margin-top: 44px; }
main .work-on-etoken .platform-sec .row { row-gap: 20px; }
main .work-on-etoken .platform-sec .row > [class*="col-"] { display: flex; }
main .work-on-etoken .platform-sec .platform-box {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 0; padding: 28px 16px 24px;
    background: #fff; border: 1px solid var(--et-line) !important; border-radius: 18px; box-shadow: none !important; text-align: center;
}
main .work-on-etoken .platform-sec .platform-box:hover { border-color: var(--et-teal-100) !important; transform: translateY(-4px); }
main .work-on-etoken .platform-sec .platform-box .icon-box { padding: 0 !important; margin: 0; background: none !important; border: 0 !important; box-shadow: none !important; transform: none !important; }
main .work-on-etoken .platform-sec .platform-box .icon {
    display: grid; place-items: center; width: 76px; height: 76px; margin: 0; border: 0; border-radius: 20px; background: var(--et-teal-50);
}
main .work-on-etoken .platform-sec .platform-box .icon img { width: 40px !important; height: 40px; }
main .work-on-etoken .platform-sec .platform-box .title { margin: 0; font-size: 15.5px; font-weight: 600; line-height: 1.4; }
main .work-on-etoken .platform-sec .platform-box .title a { color: var(--et-ink); }
main .work-on-etoken .platform-sec .platform-box .title::after { content: none; }

/* job cards */
main .career-sec .job-opening-sec .job-bg .job-list { margin-top: 36px; }
main .career-sec .et-job-col { display: flex; }
main .career-sec .et-job {
    flex: 1; display: flex; flex-direction: column; padding: 28px; background: #fff; border: 1px solid var(--et-line); border-radius: var(--et-r);
    transition: border-color .2s;
}
main .career-sec .et-job:hover { border-color: var(--et-teal-100); }
main .career-sec .et-job__title { margin: 0 0 16px; font-size: 21px; font-weight: 700; line-height: 1.3; color: var(--et-ink); }
main .career-sec .et-job__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
main .career-sec .et-job__meta li {
    margin: 0; padding: 8px 12px; border-radius: 10px; background: #f4f7f7; border: 1px solid var(--et-line);
    font-size: 14.5px; font-weight: 600; color: var(--et-ink); line-height: 1.3;
}
main .career-sec .et-job__meta li::before { content: none !important; }
main .career-sec .et-job__meta li span { display: block; margin-bottom: 2px; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--et-muted); }
main .career-sec .et-job__req { position: relative; max-height: 230px; overflow: hidden; }
main .career-sec .et-job__req::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff); pointer-events: none;
}
main .career-sec .et-job.is-open .et-job__req { max-height: none; }
main .career-sec .et-job.is-open .et-job__req::after { content: none; }
main .career-sec .et-job__req-title { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--et-teal); }
main .career-sec .et-job__req ul { margin: 0; padding: 0; list-style: none; }
main .career-sec .et-job__req li { position: relative; margin: 0 0 8px; padding-left: 22px; font-size: 15px; line-height: 1.6; color: var(--et-text); }
main .career-sec .et-job__req li::before { content: ""; position: absolute; left: 4px; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--et-teal); }
main .career-sec .et-job__more {
    align-self: flex-start; margin: 10px 0 0; padding: 0; background: none; border: 0; font-size: 14.5px; font-weight: 600; color: var(--et-teal); cursor: pointer;
}
main .career-sec .et-job__more:hover { text-decoration: underline; }
main .career-sec .et-job__apply { align-self: flex-start; margin-top: auto !important; }
main .career-sec .et-job__more + .et-job__apply { margin-top: 22px; }
main .career-sec .et-job__more { margin-bottom: 22px; }
@media (max-width: 767.98px) { main .career-sec .et-job { padding: 22px; } }
main .career-sec .et-job, main .career-sec .et-job * { text-align: left; }
main .career-sec .et-job__req li p { display: inline; margin: 0; }

/* ---------- 4. View Demo: video thumbnails were stretched to 168x90 ---------- */
main .video-thumb .thumb-img img { object-fit: cover; }

/* ---------- 5. Home: "Grow your business" industry tabs ----------
   Segmented tab bar with industry icons; each tab is one card: text left, photo right. */
main .marketing-sec { background: linear-gradient(180deg, #fff 0%, #f4f7f7 100%) !important; padding-bottom: 70px !important; }
main .marketing-sec .nav-tab-top { margin-bottom: 26px; }
main .marketing-sec .nav-tab-top .nav-tabs.tab-btns {
    display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 6px !important;
    background: #fff !important; border: 1px solid var(--et-line) !important; border-radius: 999px !important;
}
main .marketing-sec .tab-btns .nav-link {
    display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px 10px 14px !important; margin: 0 !important;
    border: 0 !important; border-radius: 999px !important; background: transparent !important;
    font-size: 15.5px !important; font-weight: 600 !important; color: var(--et-ink) !important; transition: background .2s, color .2s;
}
main .marketing-sec .tab-btns .nav-link::before {
    content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--et-teal-50) center / 18px no-repeat;
}
main .marketing-sec .tab-btns .nav-link:nth-child(1)::before { background-image: url(../images/blog_category_icon/20230707134817hospital.svg); }
main .marketing-sec .tab-btns .nav-link:nth-child(2)::before { background-image: url(../images/blog_category_icon/20230707134957service_center.svg); }
main .marketing-sec .tab-btns .nav-link:nth-child(3)::before { background-image: url(../images/blog_category_icon/20230707134825retail_store.svg); }
main .marketing-sec .tab-btns .nav-link:nth-child(4)::before { background-image: url(../images/blog_category_icon/20230624180851saloon.svg); }
main .marketing-sec .tab-btns .nav-link:nth-child(5)::before { background-image: url(../images/blog_category_icon/20230707135004restaurant.svg); }
main .marketing-sec .tab-btns .nav-link:nth-child(6)::before { background-image: url(../images/blog_category_icon/20230719102415bank.svg); }
main .marketing-sec .tab-btns .nav-link:hover { background: #f4f7f7 !important; }
main .marketing-sec .tab-btns .nav-link.active { background: var(--et-ink) !important; color: #fff !important; }
main .marketing-sec .tab-btns .nav-link.active::before { background-color: #fff; }

main .marketing-sec .tab-btn-sec { min-height: 0 !important; }
main .marketing-sec .tab-btn-sec .tab-content { padding: 0 !important; }
main .marketing-sec .tab-btn-sec .inner-content {
    overflow: hidden; background: #fff; border: 1px solid var(--et-line); border-radius: var(--et-r-lg);
}
main .marketing-sec .tab-btn-sec .inner-content > .row { margin: 0; padding: 0 !important; align-items: stretch; }
main .marketing-sec .tab-btn-sec .inner-content > .row > .col-lg-1 { display: none; }
main .marketing-sec .tab-btn-sec .inner-content > .row > .col-lg-5 { padding: 0; }
main .marketing-sec .tab-btn-sec .inner-content > .row > .col-lg-5:nth-child(2) { display: flex; align-items: center; }
main .marketing-sec .tab-btn-sec .inner-content .marketing-right-text { padding: 48px 48px 44px; }
main .marketing-sec .tab-btn-sec .inner-content .marketing-right-text::before {
    content: "Case study"; display: inline-block; margin-bottom: 16px; padding: 6px 12px; border-radius: 999px;
    background: var(--et-orange-50); color: var(--et-orange-text, #c45a0b); font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
main .marketing-sec .tab-btn-sec .inner-content .marketing-right-text .right-title { margin: 0 0 14px !important; font-size: clamp(22px, 2.2vw, 30px) !important; line-height: 1.3 !important; font-weight: 700 !important; color: var(--et-ink); }
main .marketing-sec .tab-btn-sec .inner-content .marketing-right-text p {
    margin-bottom: 26px; font-size: 16px !important; line-height: 1.75 !important; color: var(--et-text);
    display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
main .marketing-sec .tab-btn-sec .inner-content .marketing-right-text .btn { padding: 12px 26px !important; border-radius: 12px !important; font-weight: 600; }
main .marketing-sec .tab-btn-sec .inner-content .marketing-right-text .btn-video {
    background: transparent !important; color: var(--et-ink) !important; border: 1px solid var(--et-line-2) !important; box-shadow: none !important;
}
main .marketing-sec .tab-btn-sec .inner-content .marketing-right-text .btn-video:hover { background: #f4f7f7 !important; }
main .marketing-sec .tab-btn-sec .inner-content > .row > .col-lg-5:last-child { flex: 1 1 0; max-width: none; }
main .marketing-sec .tab-btn-sec .inner-content .marketing-img { position: relative; height: 100%; min-height: 380px; text-align: left !important; }
main .marketing-sec .tab-btn-sec .inner-content .marketing-img img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; box-shadow: none !important;
}
@media (min-width: 992px) {
    main .marketing-sec .tab-btn-sec .inner-content > .row > .col-lg-5:nth-child(2) { flex: 0 0 52%; max-width: 52%; }
}
@media (max-width: 991.98px) {
    main .marketing-sec .nav-tab-top .nav-tabs.tab-btns { border-radius: 20px !important; }
    main .marketing-sec .tab-btn-sec .inner-content .marketing-right-text { padding: 28px 24px 26px; }
    main .marketing-sec .tab-btn-sec .inner-content .marketing-img { min-height: 0; aspect-ratio: 16 / 10; }
    main .marketing-sec .tab-btn-sec .inner-content > .row > .col-lg-5:last-child { order: -1; flex: 0 0 100%; }
}
@media (max-width: 575.98px) {
    main .marketing-sec .nav-tab-top .nav-tabs.tab-btns { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    main .marketing-sec .tab-btns .nav-link { font-size: 14px !important; padding: 8px 12px 8px 8px !important; }
}

/* ---------- 6. Home explainer: one visual per topic, built on the "token" idea ---------- */
main .et-hx { padding: 90px 0 60px; background: #fff; }
main .et-hx .container { max-width: 1180px; }
main .et-hx__block { margin: 0 0 96px; }
main .et-hx__block:last-child { margin-bottom: 0; }
main .et-hx h2 { margin: 0 0 16px !important; font-size: clamp(26px, 3vw, 40px); line-height: 1.15; letter-spacing: -.02em; color: var(--et-ink); }
main .et-hx p { font-size: 16.5px; line-height: 1.75; color: var(--et-text); }
main .et-hx a { color: var(--et-teal); font-weight: 600; }
main .et-hx__intro { max-width: 720px; margin: 0 auto 36px; text-align: center; }
main .et-hx__kicker {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--et-orange-text, #c45a0b);
}
main .et-hx__kicker::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--et-teal), var(--et-orange)); }

/* 1. queue of tickets */
main .et-hx-queue { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin: 0; padding: 0; list-style: none; }
main .et-hx-queue::before { content: ""; position: absolute; left: 8%; right: 8%; top: 43px; border-top: 2px dashed var(--et-teal-100); }
main .et-hx-ticket { position: relative; margin: 0; padding: 0 26px 26px; background: #fff; border: 1px solid var(--et-line); border-radius: 18px; }
main .et-hx-ticket::before { content: none !important; }
/* perforation: dashed line with a notch on each side */
main .et-hx-ticket::after { content: ""; position: absolute; left: 18px; right: 18px; top: 86px; border-top: 2px dashed var(--et-line-2); }
main .et-hx-ticket__no::before, main .et-hx-ticket__no::after {
    content: ""; position: absolute; top: 76px; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 1px solid var(--et-line);
}
main .et-hx-ticket__no::before { left: -11px; clip-path: inset(0 0 0 50%); }
main .et-hx-ticket__no::after { right: -11px; clip-path: inset(0 50% 0 0); }
main .et-hx-ticket__no {
    display: flex; align-items: center; height: 86px; font-family: var(--et-font-head, inherit); font-size: 34px; font-weight: 800; letter-spacing: -.02em; color: var(--et-ink);
}
main .et-hx-ticket h3 { margin: 22px 0 8px !important; font-size: 18px; line-height: 1.35; color: var(--et-ink); }
main .et-hx-ticket p { margin: 0; font-size: 15px; line-height: 1.65; }
main .et-hx-ticket--now { background: var(--et-ink); border-color: var(--et-ink); }
main .et-hx-ticket--now .et-hx-ticket__no, main .et-hx-ticket--now h3 { color: #fff; }
main .et-hx-ticket--now p { color: rgba(255, 255, 255, .8); }
main .et-hx-ticket--now::after { border-top-color: rgba(255, 255, 255, .22); }
main .et-hx-ticket__badge {
    position: absolute; right: 22px; top: 30px; padding: 5px 10px; border-radius: 999px; background: var(--et-orange); color: #fff;
    font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
main .et-hx-ticket__badge::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #fff; vertical-align: 1px; animation: etHxPulse 1.6s infinite; }
@keyframes etHxPulse { 50% { opacity: .25; } }

/* 2. who uses it */
main .et-hx-who { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; }
main .et-hx-who__quote { margin: 26px 0 0; padding: 22px 24px; border-radius: 16px; background: var(--et-teal-50); border-left: 4px solid var(--et-teal); }
main .et-hx-who__quote p { margin: 0; font-size: 15.5px; }
main .et-hx-who__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
main .et-hx-who__grid li {
    display: flex; align-items: center; gap: 14px; margin: 0; padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--et-line);
    font-size: 16px; font-weight: 600; color: var(--et-ink); transition: transform .2s, border-color .2s;
}
main .et-hx-who__grid li::before { content: none !important; }
main .et-hx-who__grid li:hover { transform: translateY(-3px); border-color: var(--et-teal-100); }
main .et-hx-who__grid li:last-child { grid-column: 1 / -1; }
main .et-hx-who__grid img { flex: none; width: 46px; height: 46px; padding: 9px; border-radius: 12px; background: #f4f7f7; }

/* 3. online token vs paper */
main .et-hx-split { display: grid; grid-template-columns: 6fr 5fr; gap: 64px; align-items: center; }
main .et-hx-token { position: relative; min-height: 340px; display: flex; align-items: center; }
main .et-hx-token__paper {
    position: absolute; left: 0; top: 30px; width: 180px; padding: 22px 18px; transform: rotate(-9deg); background: #fbf8f1; border: 1px dashed #d9cfb8;
    font-family: "Courier New", monospace; font-size: 26px; font-weight: 700; color: #a99d84; text-align: center;
}
main .et-hx-token__paper span { display: block; margin-top: 6px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
main .et-hx-token__paper::after { content: ""; position: absolute; left: -10px; right: -10px; top: 50%; height: 3px; background: #e45454; transform: rotate(-14deg); border-radius: 2px; }
main .et-hx-token__card {
    position: relative; margin-left: auto; width: min(320px, 100%); padding: 26px; border-radius: 24px; background: var(--et-ink); color: #fff;
    box-shadow: 0 30px 60px -30px rgba(11, 42, 51, .6);
}
main .et-hx-token__live { position: absolute; right: 22px; top: 24px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8fe6db; }
main .et-hx-token__live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #3ddc97; animation: etHxPulse 1.6s infinite; }
main .et-hx-token__label { font-size: 13px; color: rgba(255, 255, 255, .7); }
main .et-hx-token__num { display: block; margin: 4px 0 18px; font-family: var(--et-font-head, inherit); font-size: 72px; line-height: 1; font-weight: 800; letter-spacing: -.03em; }
main .et-hx-token__rows { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
main .et-hx-token__rows span { padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, .08); font-size: 16px; font-weight: 700; }
main .et-hx-token__rows em { display: block; margin-bottom: 4px; font-style: normal; font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, .65); }
main .et-hx-token__bar { height: 6px; margin-top: 18px; border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; }
main .et-hx-token__bar i { display: block; width: 72%; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--et-teal), var(--et-orange)); }

/* 4. TV board */
main .et-hx-tv { display: grid; grid-template-columns: 5fr 6fr; gap: 64px; align-items: center; }
main .et-hx-tv__screen {
    position: relative; margin-bottom: 34px; padding: 34px; border-radius: 22px; background: #071f26; border: 10px solid #15333b; text-align: center; color: #fff;
    box-shadow: 0 40px 60px -40px rgba(7, 31, 38, .8);
}
main .et-hx-tv__screen::after { content: ""; position: absolute; left: 50%; bottom: -34px; width: 90px; height: 24px; transform: translateX(-50%); border-radius: 0 0 8px 8px; background: #15333b; }
main .et-hx-tv__head { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8fe6db; }
main .et-hx-tv__now { display: block; margin: 6px 0 2px; font-family: var(--et-font-head, inherit); font-size: clamp(64px, 7vw, 96px); line-height: 1; font-weight: 800; letter-spacing: -.02em; color: #fff; }
main .et-hx-tv__counter { font-size: 15px; color: var(--et-orange); font-weight: 700; }
main .et-hx-tv__next { display: flex; justify-content: center; gap: 10px; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(255, 255, 255, .12); list-style: none; }
main .et-hx-tv__next li { margin: 0; padding: 8px 14px; border-radius: 10px; background: rgba(255, 255, 255, .08); font-size: 18px; font-weight: 700; color: rgba(255, 255, 255, .85); }
main .et-hx-tv__next li::before { content: none !important; }

/* 5. apps */
main .et-hx-apps { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin: 0; padding: 0; list-style: none; }
main .et-hx-app {
    display: grid; grid-template-columns: 170px 1fr; gap: 28px; align-items: center; margin: 0; padding: 28px 32px 0;
    border-radius: 24px; background: linear-gradient(160deg, var(--et-teal-50), #fff 70%); border: 1px solid var(--et-line); overflow: hidden;
}
main .et-hx-app::before { content: none !important; }
main .et-hx-app__phone { align-self: end; padding: 8px 6px 0; background: #0f2228; border-radius: 26px 26px 0 0; }
main .et-hx-app__phone img { display: block; width: 100%; height: 250px; object-fit: cover; object-position: top; border-radius: 20px 20px 0 0; }
main .et-hx-app p { margin: 0 0 28px; font-size: 16px; }
main .et-hx-app h3 { margin: 0 0 8px !important; font-size: 21px; }
main .et-hx-app h3 a { color: var(--et-ink); text-decoration: none; }
main .et-hx-app h3 a::after { content: " 92"; color: var(--et-teal); }

/* 6. pricing */
main .et-hx-price > p { max-width: 860px; margin: 26px auto 0; text-align: center; font-size: 15.5px; }
main .et-hx-price__plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
main .et-hx-price__plans li { margin: 0; padding: 24px; border-radius: 18px; background: #fff; border: 1px solid var(--et-line); text-align: center; }
main .et-hx-price__plans li::before { content: none !important; }
main .et-hx-price__plans b { display: block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--et-muted); }
main .et-hx-price__plans strong { display: block; margin: 8px 0 4px; font-family: var(--et-font-head, inherit); font-size: 30px; font-weight: 800; color: var(--et-ink); }
main .et-hx-price__plans small { font-size: 14px; font-weight: 600; color: var(--et-muted); }
main .et-hx-price__plans span { font-size: 14px; color: var(--et-text); }
main .et-hx-price__plans .is-pick { background: var(--et-ink); border-color: var(--et-ink); }
main .et-hx-price__plans .is-pick b, main .et-hx-price__plans .is-pick small, main .et-hx-price__plans .is-pick span { color: rgba(255, 255, 255, .75); }
main .et-hx-price__plans .is-pick strong { color: #fff; }

/* 7. getting started */
main .et-hx-go {
    display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center; padding: 40px 48px; border-radius: 28px;
    background: radial-gradient(500px 240px at 0% 0%, rgba(15, 148, 136, .45), transparent 70%), var(--et-ink);
}
main .et-hx-go h2 { color: #fff !important; }
main .et-hx-go p { margin: 0; color: rgba(255, 255, 255, .85); }
main .et-hx-go a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
main .et-hx-go__clock {
    position: relative; display: grid; place-items: center; align-content: center; width: 150px; height: 150px; border-radius: 50%;
    background: conic-gradient(var(--et-orange) 0 30deg, rgba(255, 255, 255, .12) 30deg); color: #fff; text-align: center;
}
main .et-hx-go__clock::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--et-ink); }
main .et-hx-go__clock strong, main .et-hx-go__clock span { position: relative; }
main .et-hx-go__clock strong { font-family: var(--et-font-head, inherit); font-size: 52px; line-height: 1; font-weight: 800; }
main .et-hx-go__clock span { max-width: 90px; font-size: 12px; font-weight: 600; line-height: 1.3; color: rgba(255, 255, 255, .75); }

@media (max-width: 991.98px) {
    main .et-hx__block { margin-bottom: 72px; }
    main .et-hx-queue { grid-template-columns: 1fr; }
    main .et-hx-queue::before { display: none; }
    main .et-hx-who, main .et-hx-split, main .et-hx-tv { grid-template-columns: 1fr; gap: 36px; }
    main .et-hx-apps { grid-template-columns: 1fr; }
    main .et-hx-price__plans { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
    main .et-hx { padding: 60px 0 40px; }
    main .et-hx-who__grid { grid-template-columns: 1fr; }
    main .et-hx-token { min-height: 0; padding-top: 110px; display: block; }
    main .et-hx-token__paper { top: 0; width: 150px; font-size: 20px; }
    main .et-hx-app { grid-template-columns: 120px 1fr; gap: 18px; padding: 22px 20px 0; }
    main .et-hx-app__phone img { height: 190px; }
    main .et-hx-go { grid-template-columns: 1fr; justify-items: start; padding: 30px 24px; gap: 24px; }
    main .et-hx-go__clock { width: 120px; height: 120px; }
    main .et-hx-tv__screen { padding: 24px 16px; }
}

main .et-ix-txt { min-width: 0; }
main .et-ix-grid--related .et-ix-txt, main .et-ix-grid--problems .et-ix-txt { flex: 1; }
main .et-ix-grid--related .et-ix-txt a { margin-bottom: 2px; }
/* beat the older ".et-seo-content ul li" padding in et-site.css */
main .et-seo-designed ul.et-ix-grid > li { padding: 22px; }
main .et-seo-designed ul.et-ix-grid--problems > li { padding: 18px 20px; }
main .et-seo-designed ul.et-ix-grid--related > li { padding: 20px 56px 20px 20px; }

/* ---------- 7. Blog and case-study listings (blog.php) ---------- */
main .blog-sec .et-bl { max-width: 1200px; }
main .et-bl-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
main .et-bl-bar__title { margin: 0 0 4px !important; font-size: clamp(26px, 2.8vw, 36px); letter-spacing: -.02em; color: var(--et-ink); }
main .et-bl-bar__count { margin: 0; font-size: 15px; color: var(--et-muted); }
main .et-bl-search { position: relative; flex: 0 1 360px; }
main .et-bl-search input {
    width: 100%; height: 52px; padding: 0 56px 0 20px; border-radius: 999px; background: #fff; border: 1px solid var(--et-line-2);
    font-size: 15.5px; color: var(--et-ink); transition: border-color .2s, box-shadow .2s;
}
main .et-bl-search input:focus { outline: 0; border-color: var(--et-teal); box-shadow: 0 0 0 4px rgba(15, 148, 136, .12); }
main .et-bl-search button {
    position: absolute; right: 6px; top: 6px; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%;
    background: var(--et-ink); color: #fff; cursor: pointer;
}
main .et-bl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 34px; }
main .et-bl-chip {
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--et-line);
    font-size: 14.5px; font-weight: 600; color: var(--et-ink) !important; text-decoration: none !important; transition: border-color .2s, background .2s;
}
main .et-bl-chip:hover { border-color: var(--et-teal); }
main .et-bl-chip.is-active { background: var(--et-ink); border-color: var(--et-ink); color: #fff !important; }
main .et-bl-chip.is-active img { filter: brightness(0) invert(1); }

/* cards */
main .et-bl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
main .et-bl-card {
    position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; background: #fff; border: 1px solid var(--et-line);
    transition: transform .3s ease, box-shadow .3s ease, border-color .2s;
}
main .et-bl-card:hover { transform: translateY(-5px); border-color: var(--et-teal-100); box-shadow: 0 30px 50px -34px rgba(11, 42, 51, .45); }
main .et-bl-card__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--et-teal-50); }
main .et-bl-card__media > img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
main .et-bl-card:hover .et-bl-card__media > img { transform: scale(1.05); }
main .et-bl-card__ph { display: grid; place-items: center; width: 100%; height: 100%; background: radial-gradient(circle at 30% 20%, #fff, var(--et-teal-50)); }
main .et-bl-card__cat {
    position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 8px; border-radius: 999px;
    background: rgba(255, 255, 255, .94); font-size: 13px; font-weight: 700; color: var(--et-ink); box-shadow: 0 6px 16px -8px rgba(11, 42, 51, .5);
}
main .et-bl-card__body { flex: 1; display: flex; flex-direction: column; padding: 22px 24px 22px; }
main .et-bl-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--et-muted); }
main .et-bl-card__title { margin: 0 0 10px !important; font-size: 19px !important; line-height: 1.35 !important; font-weight: 700; }
main .et-bl-card__title a { color: var(--et-ink); text-decoration: none; }
main .et-bl-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }   /* whole card clickable */
main .et-bl-card__text { margin: 0 0 18px; font-size: 15px; line-height: 1.65; color: var(--et-text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
main .et-bl-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--et-line); }
main .et-bl-card__author { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--et-ink); }
main .et-bl-card__author > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--et-teal-50); color: var(--et-teal); font-size: 11.5px; font-weight: 800; }
main .et-bl-card__more { position: relative; z-index: 2; font-size: 14px; font-weight: 700; color: var(--et-teal) !important; text-decoration: none !important; white-space: nowrap; }
main .et-bl-card__more::after { content: " \2192"; display: inline-block; transition: transform .2s; }
main .et-bl-card:hover .et-bl-card__more::after { transform: translateX(4px); }

/* featured (first) story */
main .et-bl-card--feature { display: grid; grid-template-columns: 1.15fr 1fr; margin-bottom: 24px; border-radius: 28px; }
main .et-bl-card--feature .et-bl-card__media { aspect-ratio: auto; min-height: 380px; }
main .et-bl-card--feature .et-bl-card__body { justify-content: center; padding: 44px 48px; }
main .et-bl-card--feature .et-bl-card__body::before {
    content: "Featured"; align-self: flex-start; margin-bottom: 14px; padding: 5px 12px; border-radius: 999px; background: var(--et-orange-50);
    color: var(--et-orange-text, #c45a0b); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
main .et-bl-card--feature .et-bl-card__title { font-size: clamp(22px, 2.3vw, 30px) !important; line-height: 1.25 !important; }
main .et-bl-card--feature .et-bl-card__text { -webkit-line-clamp: 4; font-size: 16px; }
main .et-bl-card--feature .et-bl-card__foot { margin-top: 8px; }

main .et-bl-empty { padding: 60px 20px; border-radius: 24px; background: #fff; border: 1px dashed var(--et-line-2); text-align: center; color: var(--et-teal); }
main .et-bl-empty h3 { margin: 14px 0 6px !important; font-size: 20px; color: var(--et-ink); }
main .et-bl-empty p { margin: 0; color: var(--et-text); }

/* blog "Guides" (include/seo_content/blog-intro.php) in the same card language */
main .et-guides { padding: 70px 0 10px; }
main .et-guides .container { max-width: 1200px; }
main .et-guides h2 { margin: 0 0 24px !important; font-size: clamp(26px, 2.8vw, 36px); letter-spacing: -.02em; }
main .et-guides-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 18px !important; }
main .et-guide-card {
    position: relative; display: flex; flex-direction: column; padding: 24px !important; border-radius: 20px !important; background: #fff;
    border: 1px solid var(--et-line) !important; box-shadow: none !important; transition: transform .3s, border-color .2s, box-shadow .3s;
}
main .et-guide-card:hover { transform: translateY(-4px); border-color: var(--et-teal-100) !important; box-shadow: 0 24px 40px -30px rgba(11, 42, 51, .45) !important; }
main .et-guide-card .et-guide-meta { order: -1; margin: 0 0 12px !important; font-size: 12.5px !important; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--et-teal) !important; }
main .et-guide-card h3 { margin: 0 0 10px !important; font-size: 18px !important; line-height: 1.35 !important; }
main .et-guide-card h3 a { color: var(--et-ink); text-decoration: none; }
main .et-guide-card h3 a::after { content: ""; position: absolute; inset: 0; }
main .et-guide-card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--et-text); }
main .et-guide-card::after { content: "Read guide \2192"; margin-top: auto; padding-top: 16px; font-size: 14px; font-weight: 700; color: var(--et-teal); }

@media (max-width: 991.98px) {
    main .et-bl-grid, main .et-guides-grid { grid-template-columns: repeat(2, 1fr) !important; }
    main .et-bl-card--feature { grid-template-columns: 1fr; }
    main .et-bl-card--feature .et-bl-card__media { min-height: 0; aspect-ratio: 16 / 9; }
    main .et-bl-card--feature .et-bl-card__body { padding: 28px; }
}
@media (max-width: 767.98px) {
    main .et-bl-bar { flex-direction: column; align-items: stretch; }
    main .et-bl-search { flex: none; }
    main .et-bl-chips { flex-wrap: nowrap; overflow-x: auto; margin-right: -12px; padding-bottom: 6px; scrollbar-width: none; }
    main .et-bl-chip { flex: none; }
    main .et-bl-grid, main .et-guides-grid { grid-template-columns: 1fr !important; }
    main .et-bl-card--feature .et-bl-card__body { padding: 22px 22px 20px; }
}

/* blog: guides now follow the article list */
main .blog-sec + .et-guides, main .et-guides + .et-guides-slot { margin-top: 0; }
main .et-guides { padding: 10px 0 70px; }



/* ---------- 8. Contact page (contact-etoken-solution.php) ---------- */
main .et-ct { padding: 36px 0 0; }
main .et-ct .container, main .contact-form-sec .container { max-width: 1200px; }
main .et-ct-hero {
    position: relative; overflow: hidden; display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; padding: 56px 56px;
    border-radius: 30px; color: #fff; background: radial-gradient(560px 320px at 100% 0%, rgba(15, 148, 136, .55), transparent 70%), var(--et-ink);
}
main .et-ct-hero__kicker {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8fe6db;
}
main .et-ct-hero__kicker::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--et-teal), var(--et-orange)); }
main .et-ct-hero h1, main .et-ct-hero .contact-title { margin: 0 0 14px !important; color: #fff !important; font-size: clamp(30px, 3.6vw, 48px) !important; line-height: 1.12 !important; letter-spacing: -.02em; }
main .et-ct-hero p { max-width: 560px; margin: 0 0 26px; font-size: 17px; line-height: 1.7; color: rgba(255, 255, 255, .85); }
main .et-ct-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
main .et-ct-hero__cta .btn { padding: 13px 26px !important; border-radius: 12px !important; background: var(--et-orange) !important; border-color: var(--et-orange) !important; color: #fff !important; font-weight: 700; }
main .et-ct-hero__link { font-weight: 600; color: #fff !important; text-decoration: underline; text-underline-offset: 4px; }
main .et-ct-hero__art { position: relative; display: flex; flex-direction: column; gap: 14px; }
main .et-ct-bubble {
    max-width: 300px; padding: 16px 18px; border-radius: 18px; font-size: 15px; line-height: 1.5; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .6);
}
main .et-ct-bubble--a { align-self: flex-start; background: #24596a; color: #fff; border-bottom-left-radius: 4px; }
main .et-ct-bubble--b { align-self: flex-end; background: #fff; color: var(--et-ink); border-bottom-right-radius: 4px; }
main .et-ct-bubble--b::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: #3ddc97; vertical-align: middle; }

main .et-ct-cards { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: -34px 28px 0; padding: 0; list-style: none; }
main .et-ct-card {
    display: flex; flex-direction: column; margin: 0; padding: 26px; border-radius: 22px; background: #fff; border: 1px solid var(--et-line);
    box-shadow: 0 24px 44px -32px rgba(11, 42, 51, .5); transition: transform .25s, border-color .2s;
}
main .et-ct-card::before { content: none !important; }
main .et-ct-card:hover { transform: translateY(-4px); border-color: var(--et-teal-100); }
main .et-ct-card__ico { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 16px; border-radius: 14px; background: var(--et-teal-50); color: var(--et-teal); }
main .et-ct-card__ico svg { width: 24px; height: 24px; }
main .et-ct-card h3 { margin: 0 0 4px !important; font-size: 19px; color: var(--et-ink); }
main .et-ct-card p, main .et-ct-card__addr { margin: 0 0 16px; font-size: 15px; font-style: normal; line-height: 1.6; color: var(--et-text); }
main .et-ct-card__value { margin-top: auto; font-size: 16.5px; font-weight: 700; color: var(--et-teal) !important; text-decoration: none !important; word-break: break-word; }
main .et-ct-card__value::after { content: " \2192"; display: inline-block; transition: transform .2s; }
main .et-ct-card:hover .et-ct-card__value::after { transform: translateX(4px); }

/* form + map */
main .contact-form-sec { padding-top: 70px !important; }
main .contact-form-sec .row { align-items: stretch; }
main .contact-form-sec .row > [class*="col-"] { display: flex; }
main .contact-form-sec .row > [class*="col-"] > div { flex: 1; display: flex; }
main .contact-form-main { flex: 1; padding: 36px !important; border-radius: 24px !important; background: #fff; border: 1px solid var(--et-line) !important; box-shadow: none !important; }
main .contact-form-main .form-main { width: 100%; }
main .contact-form-main .contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }
main .contact-form-main .contact-form > h2, main .contact-form-main .contact-form > .et-ct-form__lead,
main .contact-form-main .contact-form > .msg-input, main .contact-form-main .contact-form > .submit-btn, main .contact-form-main .contact-form > .et-full { grid-column: 1 / -1; }
main .contact-form-main .contact-form > h2 { margin: 0 0 4px !important; font-size: clamp(24px, 2.4vw, 30px) !important; letter-spacing: -.01em; }
main .et-ct-form__lead { margin: 0 0 18px; color: var(--et-text); }
main .contact-form-main label { margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--et-ink); }
main .contact-form-main .input-text {
    width: 100%; height: 50px; margin-bottom: 12px; padding: 0 16px; border-radius: 12px !important; background: #f7fafa; border: 1px solid var(--et-line-2) !important;
    font-size: 15px; transition: border-color .2s, box-shadow .2s, background .2s;
}
main .contact-form-main textarea.input-text { height: 130px; padding: 14px 16px; resize: vertical; }
main .contact-form-main .input-text:focus { outline: 0; background: #fff; border-color: var(--et-teal) !important; box-shadow: 0 0 0 4px rgba(15, 148, 136, .12); }
main .contact-form-main .submit-btn { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 6px; }
main .contact-form-main .submit-btn .btn { order: -1; min-width: 170px; padding: 14px 28px !important; border-radius: 12px !important; font-weight: 700; cursor: pointer; }
main .et-ct-map { position: relative; flex: 1; overflow: hidden; border-radius: 24px; border: 1px solid var(--et-line); min-height: 420px; }
main .et-ct-map iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
main .et-ct-map__card {
    position: absolute; left: 18px; bottom: 18px; z-index: 1; max-width: 320px; padding: 16px 18px; border-radius: 16px; background: #fff;
    box-shadow: 0 20px 40px -20px rgba(11, 42, 51, .5); font-size: 14px; line-height: 1.5; color: var(--et-text);
}
main .et-ct-map__card b { display: block; margin-bottom: 4px; font-size: 15.5px; color: var(--et-ink); }

@media (max-width: 991.98px) {
    main .et-ct-hero { grid-template-columns: 1fr; padding: 40px 32px 70px; }
    main .et-ct-hero__art { display: none; }
    main .et-ct-cards { grid-template-columns: 1fr; margin: -40px 16px 0; }
    main .et-ct-map { min-height: 360px; }
}
@media (max-width: 575.98px) {
    main .et-ct { padding-top: 16px; }
    main .et-ct-hero { padding: 32px 22px 64px; border-radius: 22px; }
    main .et-ct-cards { margin: -40px 8px 0; }
    main .contact-form-main { padding: 24px !important; }
    main .contact-form-main .contact-form { grid-template-columns: 1fr; }
}