/* Home hero. The block slides under the sticky (transparent) header so its grid and glow start at the top of the page. */
.fx-hm-hero { position: relative; overflow: hidden; margin-top: calc(-1 * var(--header-h)); padding: 148px 0 88px; }
.fx-hm-hero__grid {
	position: absolute; inset: 0; pointer-events: none;
	background-image: linear-gradient(rgba(91, 43, 217, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(91, 43, 217, .06) 1px, transparent 1px);
	background-size: 72px 72px; background-position: center top;
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, #000 20%, transparent 75%);
	mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, #000 20%, transparent 75%);
}
.fx-hm-hero__glow { position: absolute; right: -180px; top: -160px; width: 820px; height: 820px; border-radius: 50%; background: radial-gradient(circle, rgba(91, 43, 217, .16) 0%, rgba(91, 43, 217, .05) 45%, transparent 70%); pointer-events: none; animation-duration: 12s; }
.fx-hm-hero__glow2 { position: absolute; left: -220px; bottom: 40px; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, rgba(238, 90, 58, .09) 0%, transparent 65%); pointer-events: none; }
.fx-hm-hero__inner { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; }
.fx-hm-hero__copy { grid-column: span 7; display: flex; flex-direction: column; gap: 30px; padding-bottom: 24px; min-width: 0; }
.fx-hm-hero__visual { grid-column: span 5; position: relative; margin-right: calc(-1 * min(64px, max(0px, (100vw - 1280px) / 2 - 16px))); }

/* Pill */
.fx-hm-pill {
	align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; padding: 6px 14px 6px 6px; border-radius: 999px;
	background: var(--surface); border: 1px solid var(--line); box-shadow: 0 8px 20px -16px rgba(23, 17, 46, .4);
	font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); line-height: 1.3;
}
.fx-hm-pill__tag { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px; background: var(--ink); color: #fff; letter-spacing: .08em; white-space: nowrap; }
.fx-hm-pill__dot, .fx-hm-chat__dot, .fx-hm-ticker__dot { position: relative; width: 7px; height: 7px; flex: none; }
.fx-hm-pill__dot > span, .fx-hm-chat__dot > span, .fx-hm-ticker__dot > span { position: absolute; inset: 0; border-radius: 2px; background: #3CC4A8; }

/* H1: two editable lines; line 2 is violet with the hand-drawn coral underline. */
.fx-hm-h1 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 88px; line-height: .96; letter-spacing: -0.035em; color: var(--ink); }
.fx-hm-h1__w { display: block; overflow: hidden; padding-bottom: .04em; }
.fx-hm-h1__w.is-l2 { padding-bottom: .2em; margin-bottom: -.1em; }
.fx-hm-h1 .line-in { animation-duration: 700ms; }
.fx-hm-h1 .l2 { position: relative; display: inline-block; color: var(--violet); animation-delay: 240ms; }
/* The stroke sits under the last visual line of line 2 only; view.js measures that line (--ul-x/w/y). */
.fx-hm-h1__ul { position: absolute; left: var(--ul-x, 0); width: var(--ul-w, 100%); top: calc(var(--ul-y, 100%) - 8px); overflow: visible; }
.fx-hm-h1__ul path { stroke-dasharray: 100; stroke-dashoffset: 100; animation: heroUl 900ms cubic-bezier(.6, 0, .2, 1) 900ms forwards; }
@keyframes heroUl { to { stroke-dashoffset: 0; } }

.fx-hm-hero__lead { font-size: 20px; line-height: 1.55; color: var(--muted); max-width: 600px; }
.fx-hm-hero__btns { gap: 14px; align-items: center; }
.fx-hm-btn-shadow { box-shadow: 0 16px 30px -18px rgba(204, 63, 37, .9); }
.fx-hm-btn-sec { background-color: var(--surface); }

/* Trust line */
.fx-hm-trust { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.fx-hm-trust__faces { display: flex; }
.fx-hm-trust__faces > span {
	width: 36px; height: 36px; border-radius: 10px; border: 2px solid var(--bg); display: flex; align-items: center; justify-content: center;
	font-family: var(--font-display); font-weight: 800; font-size: 14px; color: #fff;
}
.fx-hm-trust__faces > span + span { margin-left: -8px; }
.fx-hm-trust__faces > .is-more { background: var(--ink); font-family: var(--font-mono); font-weight: 400; font-size: 11px; }
.fx-hm-trust__txt { display: flex; flex-direction: column; gap: 2px; }
.fx-hm-trust__t { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; line-height: 1.4; }
.fx-hm-trust__s { font-size: 14px; color: var(--muted); line-height: 1.4; }
.fx-hm-stars { color: var(--star); letter-spacing: 1px; }
.fx-hm-trust__rule { width: 1px; height: 34px; background: var(--line); }

/* Country code chip (AU coral, CA violet) */
.fx-hm-cc { font-family: var(--font-mono); font-size: 10px; line-height: 1.3; padding: 2px 5px; border-radius: 4px; background: var(--coral-soft); color: #AB2F1C; letter-spacing: 0; }
.fx-hm-cc.is-ca { background: var(--violet-soft); color: var(--violet); }

/* ---------- Map stage ---------- */
.fx-hm-px { position: absolute; right: 26px; top: -34px; width: 64px; height: 64px; z-index: 3; }
.fx-hm-px > span { position: absolute; width: 28px; height: 28px; border-radius: 5px; background: var(--violet); transform: rotate(var(--tr)); }
.fx-hm-px > span:nth-child(1) { left: 0; top: 0; }
.fx-hm-px > span:nth-child(2) { left: 33px; top: 0; }
.fx-hm-px > span:nth-child(3) { left: 0; top: 33px; }
.fx-hm-px > span.is-o { left: 35px; top: 35px; width: 26px; height: 26px; background: var(--coral); }
.px-in { animation: pxIn 900ms var(--ease) both; }
@keyframes pxIn { from { transform: translate(var(--fx), var(--fy)) rotate(var(--fr)); opacity: 0; } to { transform: translate(0, 0) rotate(var(--tr)); opacity: 1; } }

.fx-hm-stage {
	position: relative; height: 640px; border-radius: 28px; background: linear-gradient(170deg, #FFFFFF 0%, #F7F6FF 100%); border: 1px solid var(--line);
	box-shadow: 0 60px 120px -70px rgba(23, 17, 46, .55), 0 2px 0 rgba(255, 255, 255, .9) inset; overflow: hidden;
}
.fx-hm-stage__top { position: absolute; left: 20px; right: 20px; top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; z-index: 3; }
.fx-hm-seg { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.fx-hm-seg__thumb { position: absolute; left: 4px; top: 4px; bottom: 4px; width: calc(50% - 4px); border-radius: 9px; background: var(--surface); box-shadow: 0 6px 14px -8px rgba(23, 17, 46, .45); transition: transform 380ms var(--ease); }
[data-region="ca"] .fx-hm-seg__thumb { transform: translateX(100%); }
.fx-hm-seg__btn {
	position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px; border: 0; border-radius: 9px; background: none;
	font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; transition: color 250ms;
}
.fx-hm-seg__btn::after { content: ""; position: absolute; inset: -5px 0; }
.fx-hm-seg__btn[aria-pressed="true"] { color: var(--ink); }
.fx-hm-seg__btn:hover { color: var(--ink); }
.fx-hm-stage__label { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bk-rec { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); flex: none; animation: bkRec 1.6s ease-in-out infinite; }
@keyframes bkRec { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.fx-hm-stage__maps { position: absolute; left: 0; right: 0; top: 74px; bottom: 112px; }
/* No clock row: shorter card, map keeps its space */
.fx-hm-stage.is-noclock { height: 552px; }
.fx-hm-stage.is-noclock .fx-hm-stage__maps { bottom: 24px; }
.fx-hm-layer {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none;
	transition: opacity 500ms ease, transform 700ms var(--ease), filter 500ms ease;
}
.fx-hm-stage[data-region="au"] .fx-hm-layer[data-layer="ca"],
.fx-hm-stage[data-region="ca"] .fx-hm-layer[data-layer="au"] { opacity: 0; transform: scale(.96) translateY(8px); filter: blur(6px); visibility: hidden; transition: opacity 500ms ease, transform 700ms var(--ease), filter 500ms ease, visibility 0s 700ms; }
.fx-hm-map { position: relative; flex: none; transform: scale(var(--map-s, 1)); }
.fx-hm-map__base { position: absolute; left: 0; top: 0; display: block; }
.fx-hm-sweep {
	position: absolute; left: 0; top: 0; width: 100%; height: 100%;
	-webkit-mask-image: linear-gradient(105deg, transparent 38%, #000 50%, transparent 62%); mask-image: linear-gradient(105deg, transparent 38%, #000 50%, transparent 62%);
	-webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	animation: hmSweep 7s cubic-bezier(.45, 0, .25, 1) infinite;
}
.fx-hm-sweep svg { display: block; }
@keyframes hmSweep { 0% { -webkit-mask-position: 100% 0; mask-position: 100% 0; } 100% { -webkit-mask-position: 0% 0; mask-position: 0% 0; } }
.fx-hm-dot { position: absolute; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 1.5px; background: var(--violet); opacity: .75; }
.fx-hm-pin { position: absolute; width: 0; height: 0; }
.fx-hm-pin__core { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 2.5px; background: var(--coral); box-shadow: 0 0 0 2px #FFFFFF, 0 4px 10px -2px rgba(238, 90, 58, .6); animation: hmCore 20.8s var(--ease) var(--d, 0s) infinite both; }
.fx-hm-pin__ring { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 3px; border: 1.5px solid var(--coral); opacity: 0; animation: hmRing 20.8s ease-out var(--d, 0s) infinite both; }
@keyframes hmCore { 0% { transform: scale(1) rotate(0deg); } 2% { transform: scale(1.9) rotate(14deg); } 4%, 10.5% { transform: scale(1.45) rotate(14deg); } 12.5%, 100% { transform: scale(1) rotate(0deg); } }
@keyframes hmRing { 0% { opacity: .9; transform: scale(1); } 6% { opacity: 0; transform: scale(4.2); } 6.1% { opacity: .7; transform: scale(1); } 12% { opacity: 0; transform: scale(4.2); } 12.1%, 100% { opacity: 0; transform: scale(1); } }
.fx-hm-card {
	position: absolute; z-index: 2; display: flex; gap: 10px; align-items: flex-start; width: 228px; padding: 11px 12px; border-radius: 14px;
	background: rgba(255, 255, 255, .96); border: 1px solid var(--line); box-shadow: 0 24px 40px -24px rgba(23, 17, 46, .55), 0 2px 6px -2px rgba(23, 17, 46, .12);
	opacity: 0; animation: hmCard 20.8s var(--ease) var(--d, 0s) infinite both;
}
@keyframes hmCard { 0% { opacity: 0; transform: translateY(10px) scale(.95); } 2.2%, 10.6% { opacity: 1; transform: none; } 12.5%, 100% { opacity: 0; transform: translateY(-8px) scale(.98); } }
.fx-hm-card__ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.fx-hm-card__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fx-hm-card__city { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); line-height: 1.4; }
.fx-hm-card__t { font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--ink); }
.fx-hm-card__s { font-size: 12px; line-height: 1.3; color: var(--muted); }

/* Live clocks */
.fx-hm-clocks {
	position: absolute; left: 0; right: 0; bottom: 0; height: 112px; border-top: 1px solid var(--line); background: rgba(255, 255, 255, .82);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 14px 20px 16px; display: flex; flex-direction: column; gap: 10px; z-index: 3;
}
.fx-hm-clocks__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); line-height: 1.4; }
.fx-hm-clocks__row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 8px; }
.fx-hm-clocks__row[hidden] { display: none; }
.fx-hm-clock { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fx-hm-clock__city { font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; }
.fx-hm-clock__time { min-height: 22px; font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.fx-hm-clock__st { min-height: 16px; display: flex; align-items: center; gap: 5px; font-size: 11px; line-height: 1.4; color: var(--teal); white-space: nowrap; overflow: hidden; }
.fx-hm-clock__st > i { width: 6px; height: 6px; border-radius: 2px; background: currentColor; flex: none; }
.fx-hm-clock__st:not(.is-set) > i { display: none; }
.fx-hm-clock__st.is-after { color: var(--cta); }

/* ---------- Phones: ticker + text-back card ---------- */
.fx-hm-mtrust, .fx-hm-chat { display: none; }
.fx-hm-mtrust { flex-direction: column; gap: 8px; font-family: var(--font-mono); font-size: 12px; line-height: 1.7; color: var(--muted); }
.fx-hm-ticker { position: relative; display: flex; align-items: center; gap: 8px; }
.fx-hm-ticker__dot { width: 8px; height: 8px; }
.fx-hm-ticker__dot > span { background: var(--violet); }
.fx-hm-ticker__core { animation: cityDot 2.25s ease-in-out infinite; }
@keyframes cityDot { 0%, 100% { transform: none; } 10% { transform: scale(1.35) rotate(14deg); } 22% { transform: none; } }
.fx-hm-ticker__tk { display: inline-grid; overflow: hidden; height: 24px; align-items: center; padding-right: 2px; }
.fx-hm-ticker__i { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; opacity: 0; transform: translateY(110%); transition: opacity 280ms var(--ease), transform 420ms var(--ease); }
.fx-hm-ticker__i:first-child, .fx-hm-ticker__i.is-on { opacity: 1; transform: none; }
.fx-hm-ticker.is-live .fx-hm-ticker__i:not(.is-on) { opacity: 0; transform: translateY(110%); }
.fx-hm-ticker.is-live .fx-hm-ticker__i.is-out { opacity: 0; transform: translateY(-110%); }
.fx-hm-ticker__c { color: var(--ink); font-weight: 500; }
.fx-hm-ticker .fx-hm-cc { font-size: 9px; letter-spacing: .06em; padding: 2px 6px; }

.fx-hm-chat { margin-top: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px; flex-direction: column; gap: 10px; }
.fx-hm-chat__missed { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.fx-hm-chat__dot { width: 8px; height: 8px; }
.fx-hm-chat__dot > span { background: var(--coral); }
.fx-hm-chat__out { align-self: flex-end; max-width: 88%; background: var(--violet); color: #fff; border-radius: 14px 14px 4px 14px; padding: 11px 13px; font-size: 15px; line-height: 1.45; transform-origin: right bottom; }
.fx-hm-chat__sent { align-self: flex-end; font-family: var(--font-mono); font-size: 12px; color: var(--teal); }
.fx-hm-chat__in-wrap { display: grid; justify-items: start; align-items: end; }
.fx-hm-chat__typing { grid-area: 1 / 1; display: flex; gap: 4px; padding: 13px 14px; border-radius: 14px 14px 14px 4px; background: var(--bg); opacity: 0; }
.fx-hm-chat__in { grid-area: 1 / 1; background: var(--bg); border-radius: 14px 14px 14px 4px; padding: 10px 13px; font-size: 15px; line-height: 1.45; transform-origin: left bottom; }
.tdot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #7A778E; animation: tdot 1s ease-in-out infinite; }
.tdot:nth-child(2) { animation-delay: 150ms; } .tdot:nth-child(3) { animation-delay: 300ms; }
@keyframes tdot { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.sq-1 { animation: sq1 9s ease-out infinite both; }
.sq-sent { animation: sqSent 9s ease-out infinite both; }
.sq-typing { animation: sqTyping 9s ease-out infinite both; }
.sq-2 { animation: sq2 9s ease-out infinite both; }
@keyframes sq1 { 0%, 8% { opacity: 0; transform: translateY(10px) scale(.96); } 14%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes sqSent { 0%, 17% { opacity: 0; } 21%, 90% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes sqTyping { 0%, 24% { opacity: 0; } 27%, 38% { opacity: 1; } 41%, 100% { opacity: 0; } }
@keyframes sq2 { 0%, 40% { opacity: 0; transform: translateY(10px) scale(.96); } 45%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }

/* ---------- Responsive ---------- */
@media (min-width: 1101px) and (max-width: 1279px) { .fx-hm-h1 { font-size: clamp(64px, 6.9vw, 88px); } }
@media (max-width: 1100px) {
	.fx-hm-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 56px; }
	.fx-hm-hero__copy, .fx-hm-hero__visual { grid-column: 1 / -1; }
	.fx-hm-hero__visual { margin: 0 auto; width: min(587px, 100%); }
	.fx-hm-h1 { font-size: clamp(48px, 7.6vw, 80px); }
	/* Narrower screens: let line 2 follow line 1 so no single word is left on its own line. */
	.fx-hm-h1__w, .fx-hm-h1__w.is-l2 { display: inline; overflow: visible; padding: 0; margin: 0; }
	.fx-hm-h1 .line-in { display: inline; animation: rise 700ms var(--ease) both; }
	.fx-hm-h1 .l2 { display: inline-block; padding-bottom: .12em; }
}
@media (max-width: 600px) {
	.fx-hm-hero { padding: 112px 0 28px; }
	.fx-hm-hero__copy { gap: 22px; padding-bottom: 0; }
	.fx-hm-hero__visual, .fx-hm-trust { display: none; }
	.fx-hm-mtrust, .fx-hm-chat { display: flex; }
	.fx-hm-pill { gap: 10px; padding: 5px 12px 5px 5px; font-size: 11px; box-shadow: none; }
	.fx-hm-pill__tag { gap: 6px; padding: 4px 8px; }
	.fx-hm-pill__dot .ping { display: none; }
	.fx-hm-h1 { font-size: 48px; line-height: .98; }
	/* Phones: the two lines flow together (as in the mobile design); no underline. */
	.fx-hm-h1__w, .fx-hm-h1__w.is-l2 { display: inline; overflow: visible; padding: 0; margin: 0; }
	.fx-hm-h1 .line-in, .fx-hm-h1 .l2 { display: inline; animation: rise 700ms var(--ease) both; }
	.fx-hm-h1__ul { display: none; }
	.fx-hm-hero__lead { font-size: 17px; }
	.fx-hm-hero__btns { gap: 12px; }
	.fx-hm-hero__btns .fx-btn--sec { height: 52px; }
	.fx-hm-hero__glow { width: 520px; height: 520px; right: -260px; top: -200px; }
}
@media (prefers-reduced-motion: reduce) {
	.fx-hm-card.is-first { opacity: 1; }
	.fx-hm-h1__ul path { stroke-dashoffset: 0; }
	.fx-hm-layer { transition: none; }
}