.brand-landing{--bl-ink:#181329;--bl-muted:#656078;--bl-purple:#7135da;--bl-purple-dark:#3c176e;--bl-lilac:#f5f0ff;--bl-border:#e4d9f7;background:#fff;color:var(--bl-ink);font-family:Arimo,Arial,sans-serif;overflow:hidden}.brand-landing *{box-sizing:border-box}.brand-landing__container{width:min(1180px,calc(100% - 40px));margin-inline:auto}.brand-landing__hero{padding:76px 0 64px;background:radial-gradient(circle at 85% 18%,rgba(150,98,237,.2),transparent 31%),linear-gradient(135deg,#fbf9ff,#f2eaff)}.brand-landing__hero-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(520px,1.08fr);gap:64px;align-items:center}.brand-landing__eyebrow,.brand-landing__section-head>p,.brand-landing__cta p{margin:0 0 16px;color:var(--bl-purple);font-size:.8rem;font-weight:800;letter-spacing:.12em}.brand-landing__hero h1{margin:0;font-family:"Saira Stencil",Arimo,sans-serif;font-size:clamp(3rem,5vw,5.25rem);font-weight:600;line-height:.94;letter-spacing:-.035em}.brand-landing__hero h1 span{color:var(--bl-purple)}.brand-landing__lead{max-width:620px;margin:26px 0 0;color:var(--bl-muted);font-size:1.12rem;line-height:1.65}.brand-landing__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.brand-landing__button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 22px;border:1px solid transparent;border-radius:13px;font-weight:700;text-decoration:none;transition:.2s ease}.brand-landing__button:hover{transform:translateY(-2px)}.brand-landing__button--primary{background:linear-gradient(135deg,#6830ce,#8b4aef);color:#fff;box-shadow:0 14px 28px rgba(92,42,183,.23)}.brand-landing__button--outline{border-color:#9c75db;background:#fff;color:#5c27ae}.brand-landing__assurances{display:flex;gap:18px;flex-wrap:wrap;margin:24px 0 0;padding:0;list-style:none;color:#544d67;font-size:.88rem}.brand-landing__assurances i{margin-right:5px;color:#29916b}.brand-landing__visual{padding:20px;border:1px solid rgba(106,50,205,.2);border-radius:24px;background:rgba(255,255,255,.94);box-shadow:0 28px 60px rgba(48,21,92,.16);transform:rotate(1deg)}.brand-landing__visual-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid #eee8f7}.brand-landing__visual-head span{font-weight:800}.brand-landing__visual-head span i{margin-right:8px;color:var(--bl-purple)}.brand-landing__visual-head strong{padding:6px 10px;border-radius:20px;background:#e0f5eb;color:#197354;font-size:.72rem}.brand-landing__visual-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}.brand-landing__visual-kpis article{position:relative;padding:14px;border-radius:13px;background:#faf8fd;overflow:hidden}.brand-landing__visual-kpis small,.brand-landing__visual-kpis b{display:block}.brand-landing__visual-kpis small{color:#777083}.brand-landing__visual-kpis b{margin-top:4px;font-size:1.25rem}.brand-landing__visual-kpis article span{position:absolute;inset:auto 0 0;height:3px}.is-purple{background:#7b3ddd}.is-green{background:#2f9c74}.is-gold{background:#e6a523}.brand-landing__visual-flow{display:flex;align-items:center;justify-content:space-between;padding:13px;border-radius:12px;background:#f3eefb;font-size:.78rem}.brand-landing__visual-flow span{padding:7px 9px;border-radius:8px}.brand-landing__visual-flow .done{color:#23775a;background:#e5f6ef}.brand-landing__visual-flow .active{color:#6030ad;background:#e9dcff}.brand-landing__visual-list{display:grid;gap:8px;margin-top:14px}.brand-landing__visual-list>div{display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;padding:10px;border:1px solid #eee8f7;border-radius:12px}.brand-landing__visual-list>div>i{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#eee5fb;color:#6e35c6}.brand-landing__visual-list span b,.brand-landing__visual-list span small{display:block}.brand-landing__visual-list span small{margin-top:2px;color:#777083;font-size:.74rem}.brand-landing__visual-list em{color:#6c6580;font-size:.72rem;font-style:normal}.brand-landing__trust{padding:28px 0;border-block:1px solid #eee8f7;background:#fff}.brand-landing__trust p{text-align:center;color:#746d83;font-size:.82rem}.brand-landing__logos{display:flex;align-items:center;justify-content:center;gap:clamp(30px,6vw,72px);margin-top:20px}.brand-landing__logos img{width:100px;height:34px;object-fit:contain;filter:grayscale(1);opacity:.62}.brand-landing__section{padding:92px 0}.brand-landing__section--soft{background:#f7f4fb}.brand-landing__section-head{max-width:720px;margin-bottom:42px}.brand-landing__section-head h2{margin:0;font-family:"Saira Stencil",Arimo,sans-serif;font-size:clamp(2.3rem,4vw,4rem);font-weight:500;line-height:1.03;letter-spacing:-.025em}.brand-landing__section-head>span{display:block;margin-top:16px;color:var(--bl-muted);font-size:1.05rem;line-height:1.6}.brand-landing__section-head--center{margin-inline:auto;text-align:center}.brand-landing__benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.brand-landing__benefits article,.brand-landing__governance article{padding:24px;border:1px solid var(--bl-border);border-radius:18px;background:#fff}.brand-landing__benefits article>span{display:grid;place-items:center;width:48px;height:48px;border-radius:13px;background:#eee5ff;color:var(--bl-purple);font-size:1.2rem}.brand-landing h3{margin:20px 0 9px;font-size:1.05rem}.brand-landing__benefits p,.brand-landing__governance p{margin:0;color:var(--bl-muted);line-height:1.6}.brand-landing__split{display:grid;grid-template-columns:.78fr 1.22fr;gap:76px;align-items:start}.brand-landing__steps{display:grid;gap:12px;margin:0;padding:0;list-style:none}.brand-landing__steps li{display:grid;grid-template-columns:58px 1fr;gap:18px;padding:20px;border:1px solid var(--bl-border);border-radius:17px;background:#fff}.brand-landing__steps b{color:#8c4dea;font-size:1.65rem}.brand-landing__steps h3{margin:0 0 7px}.brand-landing__steps p{margin:0;color:var(--bl-muted);line-height:1.5}.brand-landing__governance{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.brand-landing__governance i{color:var(--bl-purple);font-size:1.5rem}.brand-landing__cta{padding:58px 0;background:linear-gradient(115deg,#35125f,#7237cf);color:#fff}.brand-landing__cta>.brand-landing__container{display:flex;align-items:center;justify-content:space-between;gap:30px}.brand-landing__cta p{margin-bottom:10px;color:#d7bfff}.brand-landing__cta h2{margin:0;font-size:clamp(2rem,3vw,3rem)}.brand-landing__cta span{display:block;margin-top:8px;color:#e0d4ee}.brand-landing__cta .brand-landing__actions{margin:0;flex-shrink:0}.brand-landing__button--light{background:#fff;color:#4c1b87}.brand-landing__button--ghost{border-color:#c4a4ee;color:#fff}.brand-landing__button--ghost:hover{background:rgba(255,255,255,.1)}@media(max-width:991px){.brand-landing__hero-grid,.brand-landing__split{grid-template-columns:1fr}.brand-landing__hero-grid{gap:44px}.brand-landing__visual{transform:none}.brand-landing__benefits{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){.brand-landing__container{width:min(100% - 28px,1180px)}.brand-landing__hero{padding:54px 0}.brand-landing__hero-grid{grid-template-columns:minmax(0,1fr)}.brand-landing__visual{padding:13px}.brand-landing__visual-kpis{grid-template-columns:1fr}.brand-landing__visual-flow{gap:5px;overflow:auto}.brand-landing__logos{gap:22px;overflow:hidden;justify-content:flex-start}.brand-landing__logos img{width:82px;flex:0 0 auto}.brand-landing__section{padding:66px 0}.brand-landing__benefits,.brand-landing__governance{grid-template-columns:1fr}.brand-landing__cta>.brand-landing__container{align-items:flex-start;flex-direction:column}.brand-landing__cta .brand-landing__actions,.brand-landing__cta .brand-landing__button{width:100%}}
/* Full-bleed public Brand landing: the shared public layout normally keeps a 16px gutter. */
body:has(.brand-landing) {
    overflow-x: hidden;
}

body:has(.brand-landing) .topstar-main {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 !important;
}

/* Motion is opt-in from JS so content remains visible when JavaScript is unavailable. */
.brand-landing.is-motion-ready .bl-reveal {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition:
        opacity .72s cubic-bezier(.22, 1, .36, 1),
        transform .72s cubic-bezier(.22, 1, .36, 1);
    transition-delay: var(--bl-delay, 0ms);
    will-change: opacity, transform;
}

.brand-landing.is-motion-ready .brand-landing__hero-copy .bl-reveal {
    transform: translate3d(-24px, 18px, 0);
}

.brand-landing.is-motion-ready .brand-landing__visual.bl-reveal {
    transform: translate3d(24px, 24px, 0) rotate(2deg) scale(.975);
}

.brand-landing.is-motion-ready .bl-reveal.is-visible,
.brand-landing.is-motion-ready .brand-landing__hero-copy .bl-reveal.is-visible,
.brand-landing.is-motion-ready .brand-landing__visual.bl-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.brand-landing__benefits article,
.brand-landing__steps li,
.brand-landing__governance article,
.brand-landing__logos img,
.brand-landing__visual-list > div {
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, opacity .25s ease;
}

.brand-landing__benefits article:hover,
.brand-landing__steps li:hover,
.brand-landing__governance article:hover {
    transform: translateY(-6px);
    border-color: #cbb2f1;
    box-shadow: 0 18px 34px rgba(61, 25, 116, .11);
}

.brand-landing__logos img:hover {
    transform: translateY(-3px) scale(1.06);
    filter: grayscale(0);
    opacity: 1;
}

.brand-landing__visual-list > div:hover {
    transform: translateX(5px);
    border-color: #cfb9ef;
    box-shadow: 0 8px 18px rgba(61, 25, 116, .08);
}

.brand-landing__visual.is-visible {
    animation: brand-dashboard-float 6.5s ease-in-out 1s infinite;
}

.brand-landing__visual-head strong {
    position: relative;
    padding-left: 22px;
}

.brand-landing__visual-head strong::before {
    position: absolute;
    top: 50%;
    left: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #29916b;
    content: "";
    transform: translateY(-50%);
    animation: brand-status-pulse 2s ease-out infinite;
}

@keyframes brand-dashboard-float {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    50% { transform: translate3d(0, -9px, 0) rotate(.35deg); }
}

@keyframes brand-status-pulse {
    0% { box-shadow: 0 0 0 0 rgba(41, 145, 107, .38); }
    70%, 100% { box-shadow: 0 0 0 8px rgba(41, 145, 107, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .brand-landing.is-motion-ready .bl-reveal,
    .brand-landing.is-motion-ready .brand-landing__hero-copy .bl-reveal,
    .brand-landing.is-motion-ready .brand-landing__visual.bl-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .brand-landing__visual.is-visible,
    .brand-landing__visual-head strong::before {
        animation: none;
    }
}

/* 2026-08-14: Fresh KOC palette for /danh-cho-brand.
   Keep violet as the brand anchor and use teal, cyan, coral and gold by purpose. */
.brand-landing {
    --brand-violet: #7357e8;
    --brand-cyan: #2fb8c6;
    --brand-teal: #1d9b83;
    --brand-coral: #f06f7b;
    --brand-gold: #f2b84b;
    --brand-navy: #14263b;
    background: #fbfaf7;
    color: var(--brand-navy);
}

.brand-landing__hero {
    background:
        radial-gradient(circle at 10% 12%, rgba(242, 184, 75, .20), transparent 28%),
        radial-gradient(circle at 84% 13%, rgba(115, 87, 232, .20), transparent 30%),
        radial-gradient(circle at 73% 88%, rgba(47, 184, 198, .17), transparent 28%),
        linear-gradient(135deg, #fffdf8 0%, #f8f5ff 52%, #f0fbfa 100%);
}

.brand-landing__eyebrow { color: #db5968; }

.brand-landing__button--primary {
    border-color: transparent;
    background: linear-gradient(135deg, var(--brand-violet), var(--brand-cyan));
    box-shadow: 0 12px 30px rgba(83, 91, 204, .22);
}

.brand-landing__button--secondary {
    border-color: rgba(29, 155, 131, .36);
    background: rgba(255, 255, 255, .86);
    color: var(--brand-navy);
}

.brand-landing__button:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(20, 38, 59, .16);
}

.brand-landing__kpis > div,
.brand-landing__visual-list > *,
.brand-landing__benefits > article,
.brand-landing__steps > li,
.brand-landing__governance > article {
    transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.brand-landing__kpis > div:hover,
.brand-landing__visual-list > *:hover,
.brand-landing__benefits > article:hover,
.brand-landing__steps > li:hover,
.brand-landing__governance > article:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(20, 38, 59, .12);
}

.brand-landing__kpis > div:nth-child(1) { border-top-color: var(--brand-violet); background: linear-gradient(145deg, #fff, #f1edff); }
.brand-landing__kpis > div:nth-child(2) { border-top-color: var(--brand-teal); background: linear-gradient(145deg, #fff, #eaf9f5); }
.brand-landing__kpis > div:nth-child(3) { border-top-color: var(--brand-gold); background: linear-gradient(145deg, #fff, #fff6de); }

.brand-landing__trust {
    background: linear-gradient(90deg, #f1fbfa 0%, #fffaf0 52%, #f5f1ff 100%);
}

.brand-landing__logos > *:nth-child(4n + 1) { border-color: rgba(115, 87, 232, .24); }
.brand-landing__logos > *:nth-child(4n + 2) { border-color: rgba(29, 155, 131, .24); }
.brand-landing__logos > *:nth-child(4n + 3) { border-color: rgba(240, 111, 123, .24); }
.brand-landing__logos > *:nth-child(4n) { border-color: rgba(242, 184, 75, .34); }

.brand-landing__benefits > article {
    --accent: var(--brand-violet);
    --soft: #f2eeff;
    border-top: 4px solid var(--accent);
    background: linear-gradient(145deg, #fff 42%, var(--soft));
}
.brand-landing__benefits > article:nth-child(2) { --accent: var(--brand-teal); --soft: #e9f9f5; }
.brand-landing__benefits > article:nth-child(3) { --accent: var(--brand-coral); --soft: #fff0f2; }
.brand-landing__benefits > article:nth-child(4) { --accent: var(--brand-gold); --soft: #fff7e4; }
.brand-landing__benefits > article i { color: var(--accent); }

.brand-landing__section--soft {
    background:
        radial-gradient(circle at 12% 26%, rgba(47, 184, 198, .12), transparent 25%),
        radial-gradient(circle at 88% 74%, rgba(240, 111, 123, .12), transparent 25%),
        linear-gradient(135deg, #f8fbfd, #fffaf4 52%, #f7f3ff);
}

.brand-landing__steps > li {
    --step-accent: var(--brand-violet);
    border-top: 4px solid var(--step-accent);
    background: linear-gradient(180deg, #fff, #faf8ff);
}
.brand-landing__steps > li:nth-child(2) { --step-accent: var(--brand-cyan); background: linear-gradient(180deg, #fff, #eefbfc); }
.brand-landing__steps > li:nth-child(3) { --step-accent: var(--brand-coral); background: linear-gradient(180deg, #fff, #fff1f3); }
.brand-landing__steps > li:nth-child(4) { --step-accent: var(--brand-gold); background: linear-gradient(180deg, #fff, #fff7e4); }
.brand-landing__steps > li::before { background: var(--step-accent); }

.brand-landing__section--governance {
    background:
        radial-gradient(circle at 10% 10%, rgba(240, 111, 123, .20), transparent 24%),
        radial-gradient(circle at 92% 84%, rgba(47, 184, 198, .22), transparent 28%),
        linear-gradient(120deg, #14263b, #203652 55%, #224c4c);
}

.brand-landing__governance > article:nth-child(1) { border-top-color: var(--brand-cyan); }
.brand-landing__governance > article:nth-child(2) { border-top-color: var(--brand-coral); }
.brand-landing__governance > article:nth-child(3) { border-top-color: var(--brand-gold); }

.brand-landing__cta {
    color: #fff;
    background:
        radial-gradient(circle at 84% 20%, rgba(242, 184, 75, .25), transparent 25%),
        radial-gradient(circle at 14% 80%, rgba(240, 111, 123, .22), transparent 28%),
        linear-gradient(112deg, #14263b 0%, #1f4e58 58%, #7357e8 100%);
}
.brand-landing__cta h2,
.brand-landing__cta p { color: #fff; }
.brand-landing__cta .brand-landing__button--primary {
    background: linear-gradient(135deg, var(--brand-gold), var(--brand-coral));
    color: var(--brand-navy);
}
.brand-landing__cta .brand-landing__button--secondary {
    border-color: rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .10);
    color: #fff;
}

@media (max-width: 767.98px) {
    .brand-landing__hero,
    .brand-landing__section,
    .brand-landing__cta { overflow-x: clip; }
}

/* Governance is one connected control system, not three unrelated cards. */
.brand-landing__section--governance {
    background: linear-gradient(135deg, #fff 0%, #fbf9ff 48%, #f5efff 100%);
}

.brand-landing__governance-layout {
    display: grid;
    grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr);
    gap: clamp(44px, 6vw, 82px);
    align-items: center;
}

.brand-landing__governance-layout .brand-landing__section-head {
    margin: 0;
}

.brand-landing__governance-layout .brand-landing__section-head strong {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 24px;
    padding: 10px 14px;
    border: 1px solid #ddd0f4;
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    color: #59369b;
    font-size: .82rem;
}

.brand-landing__governance {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 8px 28px;
    border: 1px solid var(--bl-border);
    border-radius: 26px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 24px 58px rgba(57, 28, 103, .09);
}

.brand-landing__governance article {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    padding: 25px 0;
    border: 0;
    border-bottom: 1px solid #ece4f7;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.brand-landing__governance article:last-child {
    border-bottom: 0;
}

.brand-landing__governance article:hover {
    border-color: #ece4f7;
    box-shadow: none;
    transform: translateX(5px);
}

.brand-landing__governance article > span {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: linear-gradient(135deg, #eee4ff, #f8f4ff);
    color: var(--bl-purple);
}

.brand-landing__governance article > span i {
    font-size: 1.2rem;
}

.brand-landing__governance small {
    color: #7b42d7;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .1em;
}

.brand-landing__governance h3 {
    margin: 6px 0 7px;
    font-size: 1.08rem;
}

@media (max-width: 991px) {
    .brand-landing__governance-layout {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .brand-landing__governance-layout .brand-landing__section-head {
        max-width: 760px;
    }
}

@media (max-width: 600px) {
    .brand-landing__governance {
        padding: 5px 18px;
        border-radius: 20px;
    }

    .brand-landing__governance article {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 13px;
        padding: 21px 0;
    }

    .brand-landing__governance article > span {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }
}

/* Keep the hero usable on narrow phones even when global typography or button
   rules are changed elsewhere in the public bundle. */
@media (max-width: 700px) {
    .brand-landing__hero-copy,
    .brand-landing__visual,
    .brand-landing__visual-head,
    .brand-landing__visual-list > div {
        min-width: 0;
        max-width: 100%;
    }

    .brand-landing__hero h1 {
        max-width: 100%;
        font-size: clamp(2.45rem, 12vw, 3.35rem);
        overflow-wrap: anywhere;
    }

    .brand-landing__lead {
        overflow-wrap: anywhere;
    }

    .brand-landing__hero .brand-landing__actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .brand-landing__hero .brand-landing__button {
        width: 100%;
        min-width: 0;
        padding-inline: 16px;
        white-space: normal;
        text-align: center;
    }

    .brand-landing__visual {
        width: 100%;
    }
}

/* Final CTA: keep public-page typography readable over the purple background. */
.brand-landing__cta {
    position: relative;
    padding: 64px 0;
    background:
        radial-gradient(circle at 82% 20%, rgba(174, 111, 255, .34), transparent 30%),
        linear-gradient(110deg, #34105f 0%, #5820a5 52%, #7738d7 100%);
    overflow: hidden;
}

.brand-landing__cta::before {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, rgba(255, 255, 255, .035), transparent 45%);
    content: "";
    pointer-events: none;
}

.brand-landing__cta > .brand-landing__container {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(36px, 7vw, 100px);
    align-items: center;
}

.brand-landing__cta p {
    margin-bottom: 12px;
    color: #d9c5ff !important;
}

.brand-landing__cta h2 {
    max-width: 760px;
    margin: 0;
    color: #fff !important;
    font-family: "Saira Stencil", Arimo, sans-serif;
    font-size: clamp(2.35rem, 4vw, 3.8rem);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -.025em;
}

.brand-landing__cta span {
    max-width: 680px;
    margin-top: 14px;
    color: #ede4fa !important;
    font-size: 1rem;
    line-height: 1.55;
}

.brand-landing__cta .brand-landing__actions {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 12px;
    margin: 0;
}

.brand-landing__cta .brand-landing__button {
    min-width: 160px;
    min-height: 52px;
    border-radius: 14px;
}

.brand-landing__cta .brand-landing__button--light {
    border-color: #fff;
    background: #fff;
    color: #4c1b87;
    box-shadow: 0 14px 28px rgba(29, 7, 55, .18);
}

@media (max-width: 900px) {
    .brand-landing__cta > .brand-landing__container {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

@media (max-width: 520px) {
    .brand-landing__cta {
        padding: 52px 0;
    }

    .brand-landing__cta .brand-landing__actions {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .brand-landing__cta .brand-landing__button {
        width: 100%;
    }
}

/* Connected campaign journey */
.brand-landing__process .brand-landing__section-head {
    max-width: 830px;
    margin-bottom: 58px;
}

.brand-landing__steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    counter-reset: brand-process;
}

.brand-landing__steps::before {
    position: absolute;
    z-index: 0;
    top: 35px;
    right: 9%;
    left: 9%;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #7135da 0%, #9253ea 48%, #c6a8f2 100%);
    content: "";
    box-shadow: 0 0 0 6px rgba(113, 53, 218, .06);
}

.brand-landing__steps li {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    min-height: 238px;
    padding: 0 20px 24px;
    border: 1px solid var(--bl-border);
    border-radius: 20px;
    background: rgba(255, 255, 255, .92);
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 14px 30px rgba(57, 28, 103, .06);
}

.brand-landing__steps li > b {
    display: grid;
    width: 70px;
    height: 70px;
    margin: -1px 0 18px;
    border: 8px solid #f7f4fb;
    border-radius: 50%;
    background: linear-gradient(135deg, #7135da, #9555ed);
    color: #fff;
    place-items: center;
    font-size: 1.05rem;
    box-shadow: 0 10px 20px rgba(113, 53, 218, .22);
}

.brand-landing__steps li > div {
    display: flex;
    height: 100%;
    flex-direction: column;
}

.brand-landing__steps h3 {
    margin: 0 0 10px;
    font-size: 1.05rem;
}

.brand-landing__steps p {
    margin: 0;
    color: var(--bl-muted);
    line-height: 1.6;
}

.brand-landing__steps li::after {
    position: absolute;
    top: 25px;
    right: -17px;
    width: 13px;
    height: 13px;
    border-top: 3px solid #9b68e6;
    border-right: 3px solid #9b68e6;
    content: "";
    transform: rotate(45deg);
}

.brand-landing__steps li:last-child::after {
    display: none;
}

.brand-landing__steps li:hover > b {
    transform: scale(1.07);
    box-shadow: 0 13px 26px rgba(113, 53, 218, .3);
}

.brand-landing__steps li > b {
    transition: transform .25s ease, box-shadow .25s ease;
}

@media (max-width: 900px) {
    .brand-landing__steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .brand-landing__steps::before,
    .brand-landing__steps li::after {
        display: none;
    }
}

@media (max-width: 600px) {
    .brand-landing__process .brand-landing__section-head {
        margin-bottom: 36px;
        text-align: left;
    }

    .brand-landing__steps {
        grid-template-columns: 1fr;
        gap: 14px;
        padding-left: 20px;
    }

    .brand-landing__steps::before {
        display: block;
        top: 30px;
        bottom: 30px;
        left: 33px;
        width: 3px;
        height: auto;
    }

    .brand-landing__steps li {
        min-height: 0;
        padding: 18px 18px 18px 54px;
        align-items: flex-start;
        text-align: left;
    }

    .brand-landing__steps li > b {
        position: absolute;
        top: 18px;
        left: -20px;
        width: 52px;
        height: 52px;
        margin: 0;
        border-width: 6px;
        font-size: .82rem;
    }
}

/* A single continuous journey instead of four separate cards. */
@media (min-width: 901px) {
    .brand-landing__steps {
        gap: 0;
        padding: 32px 18px 28px;
        border: 1px solid var(--bl-border);
        border-radius: 28px;
        background: rgba(255, 255, 255, .78);
        box-shadow: 0 22px 50px rgba(57, 28, 103, .07);
        overflow: hidden;
    }

    .brand-landing__steps::before {
        z-index: 1;
        top: 65px;
        right: 12.5%;
        left: 12.5%;
        height: 4px;
        background: linear-gradient(90deg, #7135da 0%, #9c59ef 24%, #f4eaff 44%, #7a39dd 62%, #c9adf3 100%);
        background-size: 220% 100%;
        box-shadow: 0 0 0 7px rgba(113, 53, 218, .055);
        animation: brand-progress-flow 3.2s linear infinite;
    }

    .brand-landing__steps::after {
        position: absolute;
        z-index: 4;
        top: 58px;
        left: 12.5%;
        width: 18px;
        height: 18px;
        border: 4px solid #fff;
        border-radius: 50%;
        background: #8b48e8;
        content: "";
        opacity: 0;
        box-shadow: 0 0 0 7px rgba(139, 72, 232, .13), 0 0 22px rgba(113, 53, 218, .72);
        transform: translateX(-50%);
        animation: brand-progress-run 4.6s cubic-bezier(.45, 0, .3, 1) infinite;
    }

    .brand-landing__steps li {
        min-height: 205px;
        padding: 0 28px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .brand-landing__steps li:not(:last-child) > div::after {
        position: absolute;
        top: 79px;
        right: 0;
        bottom: 0;
        width: 1px;
        background: linear-gradient(180deg, rgba(218, 204, 240, 0), #ddd0ef 35%, rgba(218, 204, 240, 0));
        content: "";
    }

    .brand-landing__steps li > b {
        z-index: 2;
        width: 68px;
        height: 68px;
        margin: 0 0 26px;
        border: 8px solid #faf8fd;
        flex: 0 0 auto;
    }

    .brand-landing__steps li > div {
        position: relative;
        width: calc(100% + 56px);
        margin-inline: -28px;
        padding-inline: 28px;
    }

    .brand-landing__steps li::after {
        display: block;
        z-index: 3;
        top: 28px;
        right: -7px;
        width: 12px;
        height: 12px;
        border-top: 3px solid #9b68e6;
        border-right: 3px solid #9b68e6;
        background: transparent;
        filter: drop-shadow(0 0 3px rgba(113, 53, 218, .2));
        transform: rotate(45deg);
    }

    .brand-landing__steps li:last-child::after {
        display: none;
    }

    .brand-landing__steps li:hover {
        border-color: transparent;
        box-shadow: none;
        transform: translateY(-3px);
    }
}

@keyframes brand-progress-flow {
    from { background-position: 100% 0; }
    to { background-position: -120% 0; }
}

@keyframes brand-progress-run {
    0% { left: 12.5%; opacity: 0; }
    7% { opacity: 1; }
    24% { left: 37.5%; }
    50% { left: 62.5%; }
    76% { left: 87.5%; opacity: 1; }
    86%, 100% { left: 87.5%; opacity: 0; }
}

@media (min-width: 601px) and (max-width: 900px) {
    .brand-landing__steps::after {
        display: none;
    }
}

@media (max-width: 600px) {
    .brand-landing__steps::before {
        background: linear-gradient(180deg, #7135da, #a66bef 48%, #d4bff5);
        background-size: 100% 220%;
        animation: brand-progress-flow-y 3.2s linear infinite;
    }

    .brand-landing__steps::after {
        position: absolute;
        z-index: 4;
        top: 30px;
        left: 27px;
        width: 15px;
        height: 15px;
        border: 3px solid #fff;
        border-radius: 50%;
        background: #8b48e8;
        content: "";
        opacity: 0;
        box-shadow: 0 0 0 6px rgba(139, 72, 232, .13), 0 0 18px rgba(113, 53, 218, .65);
        transform: translate(-50%, -50%);
        animation: brand-progress-run-y 4.6s ease-in-out infinite;
    }
}

@keyframes brand-progress-flow-y {
    from { background-position: 0 100%; }
    to { background-position: 0 -120%; }
}

@keyframes brand-progress-run-y {
    0% { top: 30px; opacity: 0; }
    8% { opacity: 1; }
    88% { opacity: 1; }
    96%, 100% { top: calc(100% - 30px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .brand-landing__steps::before,
    .brand-landing__steps::after {
        animation: none !important;
    }

    .brand-landing__steps::after {
        display: none;
    }
}