.fx-hm-sec.fx-hm-help { padding: 0 0 112px; }
.fx-hm-help__head { display: flex; flex-direction: column; gap: 20px; }
.fx-hm-help__thread { position: relative; display: block; height: 96px; margin-bottom: -20px; }
.fx-hm-help__thread::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 14px; border-left: 1.5px dashed var(--violet-400); }
.fx-hm-help__h { max-width: 760px; }

.fx-hm-svcs { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.fx-hm-svc { grid-column: span 5; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 36px; display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.fx-hm-svc.is-web, .fx-hm-svc.is-brand { grid-column: span 7; }
.fx-hm-svc.is-web { overflow: hidden; }
.fx-hm-svc__copy { display: flex; flex-direction: column; gap: 12px; max-width: 520px; }
.fx-hm-svc__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fx-hm-svc__eb { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); line-height: 1.4; }
.fx-hm-svc__px { display: none; width: 40px; height: 40px; border-radius: 10px; background: var(--violet-soft); align-items: center; justify-content: center; flex: none; }
.fx-hm-svc__px .fx-px { gap: 1.5px; }
.fx-hm-svc__t { margin: 0; font-weight: 700; font-size: 32px; line-height: 1.1; letter-spacing: -0.02em; }
.fx-hm-svc__p { font-size: 17px; line-height: 1.6; color: var(--muted); }
.fx-hm-svc__link { align-self: flex-start; font-weight: 600; font-size: 15px; color: var(--violet); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.fx-hm-svc__link .arr { display: inline-block; transition: transform 150ms ease-out; }
.fx-hm-svc__link:hover .arr { transform: translateX(3px); }
.fx-hm-svc.is-dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.fx-hm-svc.is-dark .fx-hm-svc__eb { color: #ABA3C2; }
.fx-hm-svc.is-dark .fx-hm-svc__p { color: var(--dark-body); }
.fx-hm-svc.is-dark .fx-hm-svc__link { color: var(--violet-400); }
.fx-hm-svc.is-dark .fx-hm-svc__link:hover { color: #fff; }
.fx-hm-svc.is-dark .fx-hm-svc__px { background: #211A42; }

/* Website mock */
.fx-hm-web { margin: 0 -36px -36px 36px; background: var(--violet-soft); border-radius: 16px 0 0 0; padding: 22px 0 0 22px; }
.fx-hm-web__win { background: #fff; border-radius: 12px 0 0 0; border: 1px solid var(--line); border-right: 0; border-bottom: 0; height: 250px; overflow: hidden; }
.fx-hm-web__bar { height: 30px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 6px; padding: 0 12px; }
.fx-hm-web__bar > span { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.fx-hm-web__bar > i { margin-left: 14px; height: 14px; width: 200px; border-radius: 999px; background: var(--bg); }
.fx-hm-web__page { position: relative; padding: 22px 24px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.fx-hm-web__hero { grid-column: span 7; display: flex; flex-direction: column; gap: 10px; }
.fx-hm-web__l { display: block; height: 9px; border-radius: 3px; background: var(--line); }
.fx-hm-web__l.is-h { height: 16px; border-radius: 4px; background: var(--ink); }
.fx-hm-web__btns { display: flex; gap: 8px; margin-top: 8px; }
.fx-hm-web__cta { height: 26px; width: 92px; border-radius: 6px; background: var(--cta); }
.fx-hm-web__sec { height: 26px; width: 74px; border-radius: 6px; border: 1.5px solid var(--ink); }
.fx-hm-web__img { grid-column: span 5; border-radius: 10px; background: linear-gradient(150deg, #DED9FE, #A898FF); }
.fx-hm-web__tile { grid-column: span 4; height: 52px; border-radius: 8px; background: var(--bg); }
.fx-hm-web__cursor { position: absolute; left: 0; top: 0; pointer-events: none; animation: hmCursor 6s cubic-bezier(.4, 0, .2, 1) infinite both; }
@keyframes hmCursor { 0% { transform: translate(280px, 180px); opacity: 0; } 10% { opacity: 1; } 40% { transform: translate(66px, 134px); } 45% { transform: translate(66px, 134px) scale(.82); } 50%, 78% { transform: translate(66px, 134px) scale(1); opacity: 1; } 90%, 100% { transform: translate(200px, 200px); opacity: 0; } }
.mock-btn { animation: mockBtn 6s ease-out infinite; }
@keyframes mockBtn { 0%, 43% { box-shadow: 0 0 0 0 rgba(204, 63, 37, 0); } 48% { box-shadow: 0 0 0 7px rgba(204, 63, 37, .3); } 62%, 100% { box-shadow: 0 0 0 0 rgba(204, 63, 37, 0); } }

/* Search result mock */
.fx-hm-seo { margin-top: auto; background: var(--bg); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.fx-hm-seo__q { height: 40px; border-radius: 999px; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; gap: 10px; padding: 0 14px; font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.fx-hm-seo__hit { background: #fff; border: 1.5px solid var(--violet); border-radius: 12px; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.fx-hm-seo__htxt { display: flex; flex-direction: column; gap: 2px; }
.fx-hm-seo__ht { font-weight: 600; font-size: 15px; line-height: 1.4; }
.fx-hm-seo__hs { font-size: 13px; color: var(--muted); line-height: 1.4; }
.fx-hm-seo__rank { font-family: var(--font-mono); font-size: 12px; color: var(--violet); }
.fx-hm-seo__ai { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.fx-hm-seo__src { font-family: var(--font-mono); font-size: 11px; color: var(--muted); line-height: 1.4; }
.fx-hm-seo__say { font-size: 14px; line-height: 1.45; }

/* Automation timeline */
.fx-hm-flow { margin: auto 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.fx-hm-flow__row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; background: #211A42; border: 1px solid var(--dark-line); font-size: 15px; line-height: 1.4; animation: flowRow 8s ease-out infinite both; }
.fx-hm-flow__t { font-family: var(--font-mono); font-size: 12px; color: #3CC4A8; width: 48px; flex: none; }
@keyframes flowRow { 0% { opacity: .35; transform: none; } 5%, 58% { opacity: 1; transform: translateX(4px); } 68%, 100% { opacity: .35; transform: none; } }

/* ---------- Brand & design studio ---------- */
.fx-hm-svc.is-brand { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.fx-hm-brand__side { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.fx-hm-bk__tabs { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.fx-hm-bk__tab {
	position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 10px 12px; border-radius: 12px; border: 1px solid transparent; background: transparent;
	color: var(--ink); text-align: left; cursor: pointer; overflow: hidden; transition: background-color 220ms ease-out, border-color 220ms ease-out, box-shadow 220ms ease-out;
}
.fx-hm-bk__tab:hover { background: var(--bg); }
.fx-hm-bk__tab.is-on { background: var(--bg); border-color: var(--line); box-shadow: 0 10px 22px -18px rgba(23, 17, 46, .5); }
.fx-hm-bk__ic { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--violet-soft); color: var(--violet); display: flex; align-items: center; justify-content: center; transition: background-color 220ms ease-out, color 220ms, transform 320ms cubic-bezier(.3, 1.5, .5, 1); }
.fx-hm-bk__tab.is-on .fx-hm-bk__ic { background: var(--violet); color: #fff; transform: rotate(-8deg) scale(1.06); }
.fx-hm-bk__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fx-hm-bk__name { font-size: 15px; font-weight: 600; line-height: 1.3; }
.fx-hm-bk__sub { font-size: 13px; line-height: 1.35; color: var(--muted); }
.fx-hm-bk__arr { margin-left: auto; font-size: 15px; color: var(--violet); opacity: 0; transform: translateX(-6px); transition: opacity 220ms ease-out, transform 220ms ease-out; }
.fx-hm-bk__tab.is-on .fx-hm-bk__arr { opacity: 1; transform: none; }
.fx-hm-bk__prog { position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; border-radius: 2px; background: var(--violet); transform: scaleX(0); transform-origin: left center; }
.is-auto .fx-hm-bk__tab.is-on .fx-hm-bk__prog { animation: bkProg 3.6s linear both; }
.is-held .fx-hm-bk__tab.is-on .fx-hm-bk__prog { animation-play-state: paused; }
@keyframes bkProg { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.fx-hm-bk__stage {
	position: relative; display: flex; flex-direction: column; min-height: 400px; border-radius: 18px; border: 1px solid var(--line); overflow: hidden;
	background-color: #F7F4EE; background-image: radial-gradient(rgba(23, 17, 46, .08) 1px, transparent 1.3px); background-size: 14px 14px;
}
.fx-hm-bk__bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 0; }
.fx-hm-bk__sample { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.fx-hm-bk__sample .bk-rec { width: 6px; height: 6px; }
.fx-hm-bk__dots { display: flex; gap: 4px; }
.fx-hm-bk__dots > i { display: block; height: 6px; width: 6px; border-radius: 3px; background: #D8D0E6; transition: width 300ms var(--ease), background-color 300ms; }
[data-active="0"] .fx-hm-bk__dots > i:nth-child(1), [data-active="1"] .fx-hm-bk__dots > i:nth-child(2),
[data-active="2"] .fx-hm-bk__dots > i:nth-child(3), [data-active="3"] .fx-hm-bk__dots > i:nth-child(4) { width: 18px; background: var(--violet); }

.fx-hm-bk__scenes { flex: 1; display: grid; place-items: center; padding: 8px 10px; }
.fx-hm-bk__scene { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(14px) scale(.96); transition: opacity 420ms ease, transform 560ms var(--ease); }
[data-active="0"] .is-logo, [data-active="1"] .is-card, [data-active="2"] .is-social, [data-active="3"] .is-flyer { opacity: 1; transform: none; }

/* 0: logo draws */
.fx-hm-bk__logo { position: relative; width: 240px; height: 190px; }
.fx-hm-bk__guides { position: absolute; left: 0; top: 0; overflow: visible; }
.bk-draw { stroke-dasharray: 100; stroke-dashoffset: 100; }
[data-active="0"] .bk-draw { animation: bkDraw 900ms cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes bkDraw { to { stroke-dashoffset: 0; } }
.bk-note { opacity: 0; }
[data-active="0"] .bk-note { animation: bkNote 400ms ease-out 900ms forwards; }
@keyframes bkNote { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
.fx-hm-bk__mark { position: absolute; left: 88px; top: 30px; width: 64px; height: 64px; border-radius: 16px; background: #0E6B62; box-shadow: 0 14px 24px -14px rgba(15, 46, 42, .7); transform: scale(.55) rotate(-24deg); transition: transform 640ms cubic-bezier(.3, 1.45, .5, 1) 140ms; }
.fx-hm-bk__mark svg { display: block; }
.fx-hm-bk__wm { position: absolute; left: 0; right: 0; top: 110px; text-align: center; opacity: 0; transform: translateY(10px); transition: opacity 400ms ease 260ms, transform 600ms var(--ease) 260ms; }
[data-active="0"] .fx-hm-bk__mark, [data-active="0"] .fx-hm-bk__wm { transform: none; opacity: 1; }
.fx-hm-bk__wm1 { display: block; font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1; letter-spacing: -0.035em; color: #0F2E2A; }
.fx-hm-bk__wm2 { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .34em; color: #0E6B62; }

/* Shared sample-brand bits */
.fx-hm-bk__g28, .fx-hm-bk__g20, .fx-hm-bk__g18, .fx-hm-bk__g16 { flex: none; display: block; }
.fx-hm-bk__g28 { width: 28px; height: 28px; }
.fx-hm-bk__g20 { width: 20px; height: 20px; border-radius: 6px; background: #0E6B62; }
.fx-hm-bk__g18 { width: 18px; height: 18px; border-radius: 5px; background: #0E6B62; }
.fx-hm-bk__g16 { width: 16px; height: 16px; }
.fx-hm-bk__g28 svg, .fx-hm-bk__g20 svg, .fx-hm-bk__g18 svg, .fx-hm-bk__g16 svg { display: block; }
.fx-hm-bk__cback, .fx-hm-bk__cfront, .fx-hm-bk__pback, .fx-hm-bk__pfront, .fx-hm-bk__brochure, .fx-hm-bk__menu { box-shadow: 0 22px 34px -22px rgba(15, 46, 42, .6), 0 2px 6px -2px rgba(15, 46, 42, .18); }

/* 1: business card */
.fx-hm-bk__cardwrap { zoom: 1.12; position: relative; width: 230px; height: 160px; perspective: 900px; }
.bk-float { animation: bkFloat 5s ease-in-out infinite; }
@keyframes bkFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.fx-hm-bk__cback { position: absolute; left: 15px; top: 21px; width: 200px; height: 118px; border-radius: 10px; background: #0E6B62; display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: -0.03em; color: #fff; transition: transform 720ms var(--ease) 160ms; }
.fx-hm-bk__cfront { position: absolute; left: 15px; top: 21px; width: 200px; height: 118px; border-radius: 10px; background: #fff; padding: 14px 16px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; transform-origin: left center; transform: rotateY(-95deg); transition: transform 820ms var(--ease); }
[data-active="1"] .fx-hm-bk__cback { transform: translate(24px, -18px) rotate(7deg); }
[data-active="1"] .fx-hm-bk__cfront { transform: rotateY(-12deg) rotateX(8deg); }
.fx-hm-bk__crow { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: #0F2E2A; }
.fx-hm-bk__cname { font-size: 13px; font-weight: 600; color: #0F2E2A; line-height: 1.4; }
.fx-hm-bk__crole { font-family: var(--font-mono); font-size: 9.5px; color: var(--muted); line-height: 1.4; }
.fx-hm-bk__cstripe { position: absolute; right: 0; bottom: 0; width: 64px; height: 6px; background: #F4C38A; }

/* 2: social post */
.fx-hm-bk__post { zoom: 1.12; position: relative; width: 210px; height: 226px; }
.fx-hm-bk__pback { position: absolute; left: 15px; top: 10px; width: 180px; height: 206px; border-radius: 14px; background: #0E6B62; transition: transform 720ms var(--ease) 120ms; }
.fx-hm-bk__pfront { position: absolute; left: 15px; top: 10px; width: 180px; height: 206px; border-radius: 14px; background: #fff; display: flex; flex-direction: column; overflow: hidden; transition: transform 720ms var(--ease); }
[data-active="2"] .fx-hm-bk__pback { transform: translate(22px, -4px) rotate(8deg); }
[data-active="2"] .fx-hm-bk__pfront { transform: rotate(-3deg); }
.fx-hm-bk__phead { display: flex; align-items: center; gap: 6px; padding: 8px 10px; }
.fx-hm-bk__handle { font-size: 10.5px; font-weight: 600; color: #0F2E2A; }
.fx-hm-bk__more { margin-left: auto; font-size: 12px; line-height: 1; color: #A39BB8; }
.fx-hm-bk__pimg { position: relative; margin: 0 8px; height: 118px; border-radius: 8px; background: #F4E9DA; padding: 12px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.fx-hm-bk__sun { position: absolute; right: -10px; top: -10px; width: 46px; height: 46px; border-radius: 50%; background: #F4C38A; }
.fx-hm-bk__ptitle { position: relative; font-family: var(--font-display); font-weight: 800; font-size: 19px; line-height: 1.02; letter-spacing: -0.03em; color: #0F2E2A; }
.fx-hm-bk__pbtn { position: relative; align-self: flex-start; padding: 4px 8px; border-radius: 999px; background: #0E6B62; color: #fff; font-family: var(--font-mono); font-size: 9px; line-height: 1.3; }
.fx-hm-bk__bigheart { position: absolute; left: 50%; top: 50%; margin: -24px 0 0 -24px; filter: drop-shadow(0 4px 10px rgba(15, 46, 42, .35)); opacity: 0; }
[data-active="2"] .fx-hm-bk__bigheart { animation: bkHeart 1.3s var(--ease) 500ms both; }
@keyframes bkHeart { 0% { opacity: 0; transform: scale(0); } 18% { opacity: 1; transform: scale(1.25); } 30% { transform: scale(.92); } 42%, 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.1) translateY(-8px); } }
.fx-hm-bk__pfoot { display: flex; align-items: center; gap: 8px; padding: 9px 10px 0; }
.fx-hm-bk__like { transform: scale(.7); transition: transform 380ms cubic-bezier(.3, 1.6, .5, 1) 900ms; }
.fx-hm-bk__like path { fill: transparent; stroke: #0F2E2A; transition: fill 200ms ease 900ms, stroke 200ms ease 900ms; }
[data-active="2"] .fx-hm-bk__like { transform: none; }
[data-active="2"] .fx-hm-bk__like path { fill: #E5484D; stroke: #E5484D; }
.fx-hm-bk__fmt { margin-left: auto; font-family: var(--font-mono); font-size: 9.5px; color: var(--muted); }

/* 3: flyer + menu */
.fx-hm-bk__flyer { zoom: 1.12; position: relative; width: 236px; height: 226px; }
.fx-hm-bk__brochure { position: absolute; left: 62px; top: 22px; width: 120px; height: 172px; border-radius: 6px; background: #F4E9DA; background-image: linear-gradient(90deg, transparent 39px, rgba(15, 46, 42, .14) 40px, transparent 41px, transparent 79px, rgba(15, 46, 42, .14) 80px, transparent 81px); transition: transform 720ms var(--ease) 120ms; }
.fx-hm-bk__menu { position: absolute; left: 52px; top: 12px; width: 132px; height: 190px; border-radius: 6px; background: #fff; display: flex; flex-direction: column; overflow: hidden; transition: transform 720ms var(--ease); }
[data-active="3"] .fx-hm-bk__brochure { transform: translate(-48px, 8px) rotate(-9deg); }
[data-active="3"] .fx-hm-bk__menu { transform: rotate(2deg); }
.fx-hm-bk__mhead { background: #0E6B62; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.fx-hm-bk__mbrand { display: flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 700; color: #fff; }
.fx-hm-bk__mtitle { font-family: var(--font-display); font-weight: 800; font-size: 15px; line-height: 1; letter-spacing: -0.02em; color: #fff; }
.fx-hm-bk__items { padding: 10px; display: flex; flex-direction: column; gap: 7px; }
.fx-hm-bk__item { width: 0; overflow: hidden; white-space: nowrap; transition: width 520ms var(--ease) calc(260ms + var(--i) * 100ms); }
.fx-hm-bk__item > div { display: flex; align-items: baseline; gap: 4px; width: 112px; font-family: var(--font-mono); font-size: 8.5px; line-height: 1.4; color: #0F2E2A; }
[data-active="3"] .fx-hm-bk__item { width: 112px; }
.fx-hm-bk__lead { flex: 1; border-bottom: 1px dotted #A39BB8; }
.fx-hm-bk__price { font-weight: 600; }
.fx-hm-bk__mbtn { margin: auto 10px 10px; height: 22px; border-radius: 5px; background: #F4C38A; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #0F2E2A; }
.fx-hm-bk__sticker { position: absolute; left: 160px; top: 0; width: 50px; height: 50px; border-radius: 50%; background: var(--coral); color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--font-mono); font-size: 8px; font-weight: 600; line-height: 1.15; box-shadow: 0 10px 18px -10px rgba(238, 90, 58, .8); transform: rotate(-60deg) scale(0); transition: transform 560ms cubic-bezier(.3, 1.6, .5, 1) 640ms; }
[data-active="3"] .fx-hm-bk__sticker { transform: rotate(-12deg) scale(1); }

/* Swatches */
.fx-hm-bk__swatches { display: flex; gap: 6px; height: 38px; padding: 0 12px 12px; box-sizing: content-box; }
.fx-hm-bk__sw { flex: 1 1 0; min-width: 0; border-radius: 8px; border: 1px solid; display: flex; align-items: flex-end; padding: 0 0 4px 7px; overflow: hidden; transition: flex-grow 320ms var(--ease); }
.fx-hm-bk__sw > span { font: 500 10px var(--font-mono); white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity 200ms ease-out, transform 200ms ease-out; }
.fx-hm-bk__sw:hover { flex-grow: 2.8; }
.fx-hm-bk__sw:hover > span { opacity: 1; transform: none; }

@media (max-width: 960px) {
	.fx-hm-sec.fx-hm-help { padding-bottom: 72px; }
	.fx-hm-svc, .fx-hm-svc.is-web, .fx-hm-svc.is-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
	.fx-hm-sec.fx-hm-help { padding: 48px 0 64px; }
	.fx-hm-help__thread { display: none; }
	.fx-hm-svcs { gap: 20px; }
	.fx-hm-svc, .fx-hm-svc.is-brand { display: flex; padding: 26px; border-radius: 22px; gap: 12px; }
	.fx-hm-svc__px { display: flex; }
	.fx-hm-svc__t { font-size: 28px; }
	.fx-hm-svc__p { font-size: 16px; }
	.fx-hm-svc__link { min-height: 32px; }
	.fx-hm-web, .fx-hm-seo, .fx-hm-flow, .fx-hm-bk__tabs, .fx-hm-bk__stage { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.bk-draw { stroke-dashoffset: 0; }
	.bk-note { opacity: 1; }
	.fx-hm-bk__bigheart { display: none; }
	.fx-hm-bk__prog { display: none; }
}