/* Decision pages: Not-sure quiz, Bank eligibility, For your company, Financial Control. Built on pages.css. Brand tokens only. */

/* ---------- Shared: big turning fan that ticks a quarter turn on every answer ---------- */
.big-fan { position: absolute; z-index: -1; pointer-events: none; color: var(--cx-paper); opacity: .07; }
.big-fan .turn { inline-size: 100%; block-size: 100%; transform: rotate(var(--turn, 0deg)); transition: transform 1.4s cubic-bezier(.3,1.4,.4,1); }
.big-fan .spin { inline-size: 100%; block-size: 100%; animation: bg-fan-turn 90s linear infinite; }
.big-fan ih-hub { --ih-hub-size: 100%; }
.glass { background: color-mix(in srgb, var(--cx-paper) 6%, transparent); border: 1px solid var(--cx-line); backdrop-filter: blur(10px); }
.kbd { display: inline-grid; place-items: center; min-inline-size: 22px; block-size: 22px; padding-inline: 5px; border-radius: 6px; font-size: 11px; font-weight: 800; border: 1px solid currentColor; opacity: .55; }

/* ---------- QUIZ ---------- */
.qz { position: relative; isolation: isolate; overflow: hidden; background: var(--cx-ink); color: var(--cx-paper); min-block-size: calc(100svh - 64px); display: grid; }
.qz::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(900px 600px at 80% 30%, color-mix(in srgb, var(--cx-or) 30%, transparent), transparent 65%), radial-gradient(600px 400px at 0% 100%, color-mix(in srgb, var(--ih-color-orange-700) 28%, transparent), transparent 60%); transition: opacity 600ms; }
.qz::after { content: ""; position: absolute; inset: 0; z-index: -2; opacity: .45; background-image: radial-gradient(color-mix(in srgb, var(--cx-paper) 14%, transparent) 1px, transparent 1.4px); background-size: 26px 26px; mask-image: linear-gradient(black, transparent 90%); -webkit-mask-image: linear-gradient(black, transparent 90%); }
.qz .big-fan { inset-block-start: 50%; right: -16%; inline-size: min(92vh, 900px); aspect-ratio: 1; translate: 0 -50%; transition: opacity 800ms, color 800ms; }
.qz.is-result .big-fan { opacity: .16; color: var(--cx-or); }
.qz-in { position: relative; display: grid; grid-template-rows: auto 1fr; gap: clamp(20px, 4vh, 40px); padding-block: clamp(24px, 4vh, 40px) clamp(40px, 7vh, 72px); }
.qz-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.qz-prog { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; font-size: var(--ih-font-size-sm); }
.qz-prog ih-hub { --ih-hub-size: 44px; color: var(--cx-paper); }
.qz-bars { display: flex; gap: 6px; }
.qz-bars i { inline-size: 36px; block-size: 5px; border-radius: 5px; background: var(--cx-line); overflow: hidden; position: relative; }
.qz-bars i::after { content: ""; position: absolute; inset: 0; background: var(--cx-or); transform: scaleX(0); transform-origin: left; transition: transform 600ms cubic-bezier(.2,.8,.2,1); }
[dir="rtl"] .qz-bars i::after { transform-origin: right; }
.qz-bars i.on::after { transform: scaleX(1); }
.qz-top .sp { flex: 1; }
.qz-ghost { font: inherit; font-weight: 700; font-size: var(--ih-font-size-sm); color: var(--cx-paper); background: transparent; border: 1px solid var(--cx-line); border-radius: var(--ih-radius-pill); padding: 8px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.qz-ghost:hover { border-color: var(--cx-paper); }
.qz-ghost[hidden] { display: none; }
.qz-stage { position: relative; align-self: center; }
.qz-step { display: grid; gap: clamp(18px, 3vh, 28px); max-inline-size: 980px; }
.qz-step.enter { animation: qz-in 520ms cubic-bezier(.2,.8,.2,1) both; }
.qz-step.leave { animation: qz-out 260ms ease both; }
@keyframes qz-in { from { opacity: 0; transform: translateX(40px); } }
@keyframes qz-out { to { opacity: 0; transform: translateX(-40px); } }
[dir="rtl"] .qz-step.enter { animation-name: qz-in-rtl; } [dir="rtl"] .qz-step.leave { animation-name: qz-out-rtl; }
@keyframes qz-in-rtl { from { opacity: 0; transform: translateX(-40px); } }
@keyframes qz-out-rtl { to { opacity: 0; transform: translateX(40px); } }
.qz-step .cx-kicker { color: var(--ih-color-orange-300); }
.qz-step h1 { font-size: clamp(32px, 5.2vw, 64px); line-height: 1.04; letter-spacing: -0.045em; color: var(--cx-paper); max-inline-size: 18ch; }
:lang(ar) .qz-step h1 { letter-spacing: 0; line-height: 1.25; }
.qz-step > p { color: var(--cx-dim); font-size: clamp(16px, 1.5vw, 19px); max-inline-size: 52ch; }
.qz-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .qz-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .qz-tiles { grid-template-columns: 1fr; } }
.qz-tile { position: relative; font: inherit; text-align: start; cursor: pointer; display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center; padding: 18px; border-radius: 20px; color: var(--cx-paper); transition: transform 300ms cubic-bezier(.2,.8,.2,1), border-color 200ms, background 200ms, box-shadow 300ms; animation: qz-tile 500ms cubic-bezier(.2,.8,.2,1) both; }
.qz-tile:nth-child(2) { animation-delay: 50ms; } .qz-tile:nth-child(3) { animation-delay: 100ms; } .qz-tile:nth-child(4) { animation-delay: 150ms; } .qz-tile:nth-child(5) { animation-delay: 200ms; } .qz-tile:nth-child(6) { animation-delay: 250ms; }
@keyframes qz-tile { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.qz-tile:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--cx-or) 70%, transparent); box-shadow: 0 24px 50px -30px var(--cx-or); }
.qz-tile:focus-visible { outline: 3px solid var(--cx-or); outline-offset: 3px; }
.qz-tile .em { grid-row: span 2; inline-size: 52px; block-size: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 26px; line-height: 1; background: color-mix(in srgb, var(--cx-paper) 8%, transparent); transition: transform 400ms cubic-bezier(.2,1.4,.4,1), background 200ms; }
.qz-tile:hover .em { transform: rotate(-8deg) scale(1.08); }
.qz-tile b { font-size: var(--ih-font-size-md); }
.qz-tile small { color: var(--cx-dim); font-size: 12.5px; font-weight: 600; }
.qz-tile .kbd { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; }
@media (hover: none) { .qz-tile .kbd { display: none; } }
.qz-tile.is-picked { background: var(--cx-or); color: var(--cx-ink); border-color: var(--cx-or); transform: scale(1.03); }
.qz-tile.is-picked small { color: color-mix(in srgb, var(--cx-ink) 70%, transparent); }
.qz-tile.is-picked .em { background: color-mix(in srgb, var(--cx-ink) 12%, transparent); }
.qz-flags { position: absolute; inset-block: 14% 12%; right: 2%; inline-size: min(16vw, 240px); z-index: -1; pointer-events: none; }
[dir="rtl"] .qz-flags { right: auto; left: 2%; }
.qz-flags span { position: absolute; font-size: 34px; inline-size: 64px; block-size: 64px; display: grid; place-items: center; border-radius: 50%; translate: -50% -50%; transition: transform 700ms cubic-bezier(.2,1.4,.4,1), opacity 500ms, box-shadow 500ms; animation: cx-float 6s ease-in-out infinite; }
.qz-flags span:nth-child(2) { animation-delay: -1.5s; } .qz-flags span:nth-child(3) { animation-delay: -3s; } .qz-flags span:nth-child(4) { animation-delay: -4.5s; }
.qz.is-result .qz-flags span { opacity: .25; }
.qz.is-result .qz-flags span.pick { opacity: 1; transform: scale(1.5); box-shadow: 0 0 0 10px color-mix(in srgb, var(--cx-or) 30%, transparent), 0 0 60px var(--cx-or); }
@media (max-width: 1240px) { .qz-flags { display: none; } }
@media (max-width: 900px) { .qz .big-fan { right: -60%; opacity: .05; } }
/* Result */
.qz-res { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 960px) { .qz-res { grid-template-columns: 1fr; } }
.qz-res h1 { font-size: clamp(34px, 5vw, 62px); line-height: 1.04; letter-spacing: -0.045em; color: var(--cx-paper); }
:lang(ar) .qz-res h1 { letter-spacing: 0; line-height: 1.25; }
.qz-res h1 .fl { display: inline-block; margin-inline-end: 12px; animation: qz-pop 800ms cubic-bezier(.2,1.6,.4,1) both; }
@keyframes qz-pop { from { transform: scale(0) rotate(-30deg); } }
.qz-why { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.qz-why li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; font-weight: 600; color: var(--cx-dim); animation: qz-tile 500ms cubic-bezier(.2,.8,.2,1) both; }
.qz-why li:nth-child(1) { animation-delay: .3s; } .qz-why li:nth-child(2) { animation-delay: .45s; } .qz-why li:nth-child(3) { animation-delay: .6s; }
.qz-why li b { color: var(--cx-paper); }
.qz-why i { inline-size: 30px; block-size: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--cx-or); color: var(--cx-ink); font-style: normal; font-weight: 800; }
.qz-plan { border-radius: 24px; background: var(--ih-surface); color: var(--ih-text); padding: 22px; display: grid; gap: 10px; box-shadow: 0 40px 80px -40px black; animation: qz-tile 600ms cubic-bezier(.2,.8,.2,1) .2s both; }
.qz-plan h2 { font-size: var(--ih-font-size-xl); display: flex; align-items: center; gap: 10px; }
.qz-plan h2 ih-hub { --ih-hub-size: 26px; }
.qz-plan .ln { animation: qz-tile 450ms cubic-bezier(.2,.8,.2,1) both; }
.qz-plan .ln:nth-of-type(1) { animation-delay: .5s; } .qz-plan .ln:nth-of-type(2) { animation-delay: .65s; } .qz-plan .ln:nth-of-type(3) { animation-delay: .8s; } .qz-plan .ln:nth-of-type(4) { animation-delay: .95s; }
.qz-plan .ln a { color: inherit; text-decoration: none; }
.qz-plan .ln a:hover { color: var(--ih-text-accent); }
.qz-plan .tot b { color: var(--ih-text); }
.qz-plan .note { font-size: 12px; }
.qz-alt { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 18px; color: var(--cx-paper); text-decoration: none; transition: border-color 200ms, transform 200ms; }
.qz-alt:hover { border-color: var(--cx-or); transform: translateY(-2px); }
.qz-alt .fl { font-size: 28px; }
.qz-alt small { display: block; color: var(--cx-dim); font-weight: 600; }

/* ---------- BANK ELIGIBILITY ---------- */
.vault { position: relative; aspect-ratio: 1; inline-size: 100%; max-inline-size: 520px; justify-self: center; direction: ltr; }
.vault .ring { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--cx-or) 45%, transparent); animation: bg-fan-turn 60s linear infinite; }
.vault .ring.r2 { inset: 16%; border-style: solid; border-color: var(--cx-line); animation-duration: 90s; animation-direction: reverse; }
.vault .chipb { position: absolute; translate: -50% -50%; padding: 8px 12px; border-radius: 12px; font-size: 12.5px; font-weight: 800; white-space: nowrap; color: var(--cx-paper); background: color-mix(in srgb, var(--cx-ink) 60%, var(--ih-color-neutral-800)); border: 1px solid var(--cx-line); display: inline-flex; align-items: center; gap: 6px; transition: background 300ms, color 300ms, border-color 300ms; }
.vault .chipb i { inline-size: 16px; block-size: 16px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 10px; background: var(--cx-line); }
.vault .chipb.ok { background: color-mix(in srgb, var(--ih-color-status-success) 30%, var(--cx-ink)); border-color: color-mix(in srgb, var(--ih-color-status-success) 60%, transparent); }
.vault .chipb.ok i { background: var(--ih-color-status-success); }
.vault .beam { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 80%, color-mix(in srgb, var(--cx-or) 45%, transparent) 96%, transparent 100%); animation: bg-fan-turn 4s linear infinite; mask-image: radial-gradient(circle, transparent 30%, black 31%); -webkit-mask-image: radial-gradient(circle, transparent 30%, black 31%); }
.vault .core { position: absolute; inset: 34%; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, var(--ih-color-neutral-800), var(--cx-ink)); box-shadow: 0 0 0 1px var(--cx-line), 0 30px 80px -20px color-mix(in srgb, var(--cx-or) 60%, transparent); }
.vault .core ih-hub { --ih-hub-size: 64%; color: var(--cx-paper); }
.ck-tool { position: relative; z-index: 2; margin-block-start: clamp(-80px, -6vw, -40px); border-radius: 28px; background: var(--ih-surface); border: 1px solid var(--ih-border); box-shadow: 0 50px 100px -60px black; padding: clamp(20px, 3vw, 32px); display: grid; gap: 20px; }
.ck-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; align-items: start; }
@media (max-width: 560px) { .ck-grid { grid-template-columns: 1fr; } }
.ck-f { display: grid; gap: 6px; }
.ck-f label, .ck-f .lbl { font-weight: 800; font-size: var(--ih-font-size-sm); }
.ck-f select { font: inherit; font-weight: 600; min-block-size: 50px; border-radius: 14px; border: 1.5px solid var(--ih-border); background: var(--ih-bg); padding-inline: 12px; color: var(--ih-text); }
.ck-f select:focus { outline: none; border-color: var(--cx-or); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cx-or) 16%, transparent); }
.ck-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.ck-seg label { cursor: pointer; }
.ck-seg input { position: absolute; opacity: 0; pointer-events: none; }
.ck-seg span { display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; border-radius: 12px; border: 1.5px solid var(--ih-border); background: var(--ih-bg); font-weight: 700; font-size: 13px; transition: border-color 200ms, background 200ms, transform 200ms; }
.ck-seg input:checked + span { border-color: var(--cx-or); background: var(--ih-color-orange-50); transform: translateY(-1px); }
.ck-seg input:focus-visible + span { outline: 3px solid var(--ih-focus-ring); outline-offset: 2px; }
.ck-go { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.ck-go .btn--primary { min-block-size: 54px; padding-inline: 26px; font-size: var(--ih-font-size-md); }
.ck-go small { color: var(--ih-text-muted); font-weight: 600; }
.ck-sum { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; padding: 22px; border-radius: 24px; background: var(--cx-ink); color: var(--cx-paper); animation: qz-tile 500ms cubic-bezier(.2,.8,.2,1) both; }
.ck-sum .gauge { position: relative; inline-size: 96px; block-size: 96px; }
.ck-sum .gauge svg { inline-size: 100%; block-size: 100%; transform: rotate(-90deg); }
.ck-sum .gauge circle { fill: none; stroke-width: 9; }
.ck-sum .gauge .bg { stroke: var(--cx-line); }
.ck-sum .gauge .fg { stroke: var(--cx-or); stroke-linecap: round; stroke-dasharray: 264; stroke-dashoffset: 264; transition: stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1) .2s; }
.ck-sum .gauge b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 24px; font-weight: 800; }
.ck-sum h2 { font-size: clamp(22px, 2.6vw, 30px); color: var(--cx-paper); }
.ck-sum p { color: var(--cx-dim); }
.ck-mk { display: grid; gap: 12px; }
.ck-mk > h3 { display: flex; align-items: center; gap: 10px; font-size: var(--ih-font-size-xl); margin-block-start: 10px; }
.ck-mk > h3 .fl { font-size: 26px; }
.ck-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.bkc { position: relative; overflow: hidden; display: grid; gap: 8px; align-content: start; padding: 18px; border-radius: 20px; background: var(--ih-surface); border: 1.5px solid var(--ih-border); animation: qz-tile 500ms cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 70ms); }
.bkc.ok { border-color: color-mix(in srgb, var(--ih-success) 40%, var(--ih-border)); }
.bkc.no { opacity: .6; }
.bkc .hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bkc b { font-size: var(--ih-font-size-md); }
.bkc .bkc-n { display: block; margin-top: 2px; }
.bkc .st2 { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; padding: 4px 10px; border-radius: var(--ih-radius-pill); white-space: nowrap; }
.st2.ok { background: var(--ih-color-status-success-bg); color: var(--ih-success); }
.st2.rv { background: var(--ih-color-orange-100); color: var(--ih-text-accent); }
.st2.no { background: var(--ih-color-status-danger-bg); color: var(--ih-danger); }
.bkc p { color: var(--ih-text-muted); font-size: 13px; }
.bkc .meta { display: flex; flex-wrap: wrap; gap: 6px; }
.bkc .meta span { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 6px; background: var(--ih-surface-alt); color: var(--ih-text-muted); }
.bkc .mbg3 { font-size: 11.5px; font-weight: 800; padding: 6px 10px; border-radius: 10px; background: var(--ih-color-status-success-bg); color: var(--ih-success); }
.bkc .nr { font-size: 11.5px; font-weight: 700; padding: 6px 10px; border-radius: 10px; background: var(--ih-surface-alt); color: var(--ih-text-muted); }
.bkc .row2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-block-start: 4px; }
.bkc .fee { font-weight: 800; font-size: var(--ih-font-size-lg); }
.bkc .add { font-weight: 800; font-size: 13px; color: var(--ih-text-accent); text-decoration: none; }
.ck-note { font-size: 12.5px; color: var(--ih-text-muted); }

/* ---------- FOR YOUR COMPANY (finder) ---------- */
.idc { position: relative; justify-self: center; inline-size: min(100%, 440px); aspect-ratio: 1.15; }
.idc .card { position: absolute; inset: 14% 8%; border-radius: 24px; padding: 22px; display: grid; align-content: space-between; color: var(--cx-paper); background: linear-gradient(135deg, var(--ih-color-neutral-800), var(--cx-ink)); border: 1px solid var(--cx-line); box-shadow: 0 40px 90px -30px black, 0 0 80px -30px var(--cx-or); animation: idc-tilt 8s ease-in-out infinite; transform-style: preserve-3d; }
@keyframes idc-tilt { 0%, 100% { transform: perspective(900px) rotateY(-10deg) rotateX(4deg); } 50% { transform: perspective(900px) rotateY(8deg) rotateX(-3deg); } }
.idc .card .top { display: flex; align-items: center; justify-content: space-between; }
.idc .card .top ih-hub { --ih-hub-size: 34px; color: var(--cx-paper); }
.idc .card .nm { font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; letter-spacing: -0.02em; min-block-size: 1.3em; }
.idc .card .nm::after { content: ""; display: inline-block; inline-size: 2px; block-size: .9em; margin-inline-start: 3px; background: var(--cx-or); vertical-align: -0.1em; animation: cx-caret 1s steps(1) infinite; }
.idc .card .rows { display: grid; gap: 6px; font-size: 12px; color: var(--cx-dim); }
.idc .card .rows span { display: flex; justify-content: space-between; gap: 10px; border-block-end: 1px dashed var(--cx-line); padding-block-end: 5px; }
.idc .card .rows b { color: var(--cx-paper); }
.idc .tk { position: absolute; inline-size: 50px; block-size: 50px; border-radius: 16px; display: grid; place-items: center; background: var(--cx-or); color: var(--cx-ink); box-shadow: 0 16px 30px -12px var(--ih-color-orange-700); animation: cx-float 5s ease-in-out infinite; z-index: 2; }
.idc .tk .ico { inline-size: 24px; block-size: 24px; }
.idc .tk .ico .acc { stroke: var(--cx-paper); }
.idc .tk:nth-of-type(2) { animation-delay: -1s; } .idc .tk:nth-of-type(3) { animation-delay: -2s; } .idc .tk:nth-of-type(4) { animation-delay: -3s; } .idc .tk:nth-of-type(5) { animation-delay: -4s; }
.fd { position: relative; z-index: 2; margin-block-start: clamp(-80px, -6vw, -40px); display: grid; gap: 18px; }
.fd-panel { border-radius: 28px; background: var(--ih-surface); border: 1px solid var(--ih-border); box-shadow: 0 50px 100px -60px black; padding: clamp(20px, 3vw, 32px); display: grid; gap: 22px; }
.fd-step { display: grid; gap: 12px; }
.fd-step > .h { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: var(--ih-font-size-lg); }
.fd-step > .h .n { inline-size: 32px; block-size: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ih-text); color: var(--ih-bg); font-size: 13px; }
.cty { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 700px) { .cty { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cty button, .tasks button { font: inherit; cursor: pointer; text-align: start; border-radius: 18px; border: 1.5px solid var(--ih-border); background: var(--ih-bg); color: var(--ih-text); transition: transform 250ms cubic-bezier(.2,.8,.2,1), border-color 200ms, background 200ms, box-shadow 250ms; }
.cty button { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; padding: 14px; }
.cty button .fl { grid-row: span 2; font-size: 30px; }
.cty button b { font-size: var(--ih-font-size-md); }
.cty button small { color: var(--ih-text-muted); font-weight: 600; font-size: 12px; }
.cty button:hover, .tasks button:hover { transform: translateY(-3px); border-color: var(--ih-text); }
.cty button[aria-pressed="true"], .tasks button[aria-pressed="true"] { border-color: var(--cx-or); background: var(--ih-color-orange-50); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cx-or) 14%, transparent); }
.tasks { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1100px) { .tasks { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tasks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tasks button { display: grid; gap: 8px; justify-items: start; padding: 14px; }
.tasks .tile { inline-size: 42px; block-size: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--ih-surface); border: 1px solid var(--ih-border); transition: transform 400ms cubic-bezier(.2,1.4,.4,1), background 200ms; }
.tasks .tile .ico { inline-size: 22px; block-size: 22px; }
.tasks button:hover .tile, .tasks button[aria-pressed="true"] .tile { transform: rotate(-10deg) scale(1.06); background: var(--cx-or); border-color: var(--cx-or); }
.tasks b { font-size: 13.5px; line-height: 1.3; }
.tasks small { font-size: 11px; font-weight: 800; color: var(--ih-text-muted); }
.fd-search { position: relative; }
.fd-search input { inline-size: 100%; min-block-size: 54px; border-radius: 16px; border: 1.5px solid var(--ih-border); background: var(--ih-bg); font: inherit; font-size: 16px; font-weight: 600; padding-inline: 50px 16px; color: var(--ih-text); }
.fd-search input:focus { outline: none; border-color: var(--cx-or); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cx-or) 16%, transparent); }
.fd-search .ico { position: absolute; inset-inline-start: 16px; inset-block-start: 50%; translate: 0 -50%; inline-size: 22px; block-size: 22px; color: var(--ih-text-muted); }
.fd-res-h { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.fd-res-h h2 { font-size: var(--ih-font-size-2xl); }
.fd-res-h span { color: var(--ih-text-muted); font-weight: 700; font-size: var(--ih-font-size-sm); }
.fd-res { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.svc { position: relative; overflow: hidden; display: grid; gap: 8px; align-content: start; padding: 18px; border-radius: 20px; background: var(--ih-surface); border: 1px solid var(--ih-border); color: var(--ih-text); text-decoration: none; transition: transform 260ms cubic-bezier(.2,.8,.2,1), border-color 200ms, box-shadow 260ms; animation: qz-tile 450ms cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 45ms); }
.svc:hover { transform: translateY(-5px); border-color: var(--ih-text); box-shadow: 0 30px 60px -40px black; }
.svc .ic { inline-size: 40px; block-size: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--ih-color-orange-50); transition: transform 400ms cubic-bezier(.2,1.4,.4,1); }
.svc:hover .ic { transform: rotate(-10deg); }
.svc .ic .ico { inline-size: 22px; block-size: 22px; }
.svc b { font-size: var(--ih-font-size-md); }
.svc p { color: var(--ih-text-muted); font-size: 13px; }
.svc .go { margin-block-start: auto; font-weight: 800; font-size: 13px; color: var(--ih-text-accent); }
.svc .due { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; font-size: 10.5px; font-weight: 800; padding: 3px 8px; border-radius: var(--ih-radius-pill); background: var(--ih-color-orange-100); color: var(--ih-text-accent); }
.fd-empty { padding: 30px; text-align: center; color: var(--ih-text-muted); border: 1.5px dashed var(--ih-border); border-radius: 20px; }
.move { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(20px, 4vw, 48px); align-items: center; border-radius: 32px; background: var(--cx-ink); color: var(--cx-paper); padding: clamp(24px, 5vw, 56px); position: relative; overflow: hidden; isolation: isolate; }
@media (max-width: 860px) { .move { grid-template-columns: 1fr; } }
.move::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(500px 300px at 100% 0%, color-mix(in srgb, var(--cx-or) 35%, transparent), transparent 70%); }
.move h2 { font-size: clamp(28px, 4vw, 46px); line-height: 1.05; letter-spacing: -0.035em; color: var(--cx-paper); }
:lang(ar) .move h2 { letter-spacing: 0; line-height: 1.25; }
.move p { color: var(--cx-dim); }
.move ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.move li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: center; font-weight: 700; }
.move li i { inline-size: 28px; block-size: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--cx-or); color: var(--cx-ink); font-style: normal; font-weight: 800; }
.transfer { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; direction: ltr; }
.transfer .box { padding: 16px; border-radius: 18px; text-align: center; font-weight: 800; font-size: 13px; }
.transfer .box.them { color: var(--cx-dim); }
.transfer .box.us { background: var(--cx-or); color: var(--cx-ink); }
.transfer .box.us ih-hub { --ih-hub-size: 30px; display: block; margin: 0 auto 6px; }
.transfer .lane { position: relative; inline-size: 70px; block-size: 4px; border-radius: 4px; background: var(--cx-line); overflow: hidden; }
.transfer .lane::after { content: ""; position: absolute; inset-block: 0; inline-size: 24px; border-radius: 4px; background: var(--cx-or); animation: fd-lane 1.6s ease-in-out infinite; }
@keyframes fd-lane { from { left: -24px; } to { left: 100%; } }
.transfer .docs { position: absolute; inset-inline-start: 50%; inset-block-start: -26px; translate: -50% 0; font-size: 22px; animation: fd-doc 1.6s ease-in-out infinite; }
@keyframes fd-doc { 0% { transform: translateX(-60px); opacity: 0; } 30%, 70% { opacity: 1; } 100% { transform: translateX(60px); opacity: 0; } }

/* ---------- FINANCIAL CONTROL ---------- */
.dash { position: relative; justify-self: center; inline-size: min(100%, 560px); border-radius: 26px; padding: 16px; display: grid; gap: 12px; color: var(--cx-paper); box-shadow: 0 50px 100px -40px black; }
.dash-h { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: var(--ih-font-size-sm); }
.dash-h ih-hub { --ih-hub-size: 22px; color: var(--cx-paper); }
.dash-h .sync { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--cx-dim); }
.dash-h .sync ih-hub { --ih-hub-size: 14px; }
.dash-k { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kpi { padding: 12px; border-radius: 16px; background: color-mix(in srgb, var(--cx-paper) 6%, transparent); display: grid; gap: 4px; }
.kpi small { font-size: 11px; color: var(--cx-dim); font-weight: 700; }
.kpi b { font-size: clamp(16px, 2vw, 22px); font-variant-numeric: tabular-nums; }
.kpi em { font-style: normal; font-size: 11px; font-weight: 800; color: var(--ih-color-status-success-bg); }
.kpi em.dn { color: var(--ih-color-orange-300); }
.chart { position: relative; border-radius: 16px; background: color-mix(in srgb, var(--cx-paper) 5%, transparent); padding: 12px; }
.chart svg { inline-size: 100%; block-size: 150px; display: block; overflow: visible; }
.chart .grid line { stroke: var(--cx-line); stroke-width: 1; }
.chart .area { fill: url(#fcGrad); opacity: 0; transition: opacity 1s .9s; }
.chart .line { fill: none; stroke: var(--cx-or); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 2s cubic-bezier(.4,0,.2,1); }
.chart .bars rect { fill: color-mix(in srgb, var(--cx-paper) 22%, transparent); transform-origin: bottom; transform-box: fill-box; transform: scaleY(0); transition: transform 700ms cubic-bezier(.2,.8,.2,1); }
.chart .dot { fill: var(--cx-or); stroke: var(--cx-ink); stroke-width: 3; opacity: 0; transition: opacity 300ms 2s; }
.dash.go .chart .line { stroke-dashoffset: 0; }
.dash.go .chart .area { opacity: .9; }
.dash.go .chart .bars rect { transform: scaleY(1); }
.dash.go .chart .dot { opacity: 1; }
.dash-acc { display: flex; flex-wrap: wrap; gap: 6px; }
.dash-acc span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; padding: 6px 10px; border-radius: var(--ih-radius-pill); background: color-mix(in srgb, var(--cx-paper) 8%, transparent); }
.dash-acc span i { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--ih-color-status-success); }
.dash-toast { position: absolute; inset-inline-end: -18px; inset-block-end: 70px; display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; max-inline-size: 260px; padding: 12px 14px; border-radius: 16px; background: var(--ih-surface); color: var(--ih-text); box-shadow: 0 24px 50px -20px black; font-size: 12.5px; font-weight: 700; opacity: 0; transform: translateY(14px) scale(.96); transition: opacity 400ms, transform 500ms cubic-bezier(.2,1.4,.4,1); }
.dash-toast.on { opacity: 1; transform: none; }
.dash-toast .bl { inline-size: 34px; block-size: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--ih-color-orange-100); color: var(--ih-text-accent); animation: cx-ring 3s ease-in-out infinite; transform-origin: 50% 10%; }
.dash-toast .bl svg { inline-size: 18px; block-size: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dash-toast small { display: block; color: var(--ih-text-muted); font-weight: 600; }
@media (max-width: 600px) { .dash-toast { inset-inline-end: 8px; inset-block-end: -20px; } .dash-k { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash-k .kpi:last-child { display: none; } }
.free-badge { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 7px 14px; border-radius: var(--ih-radius-pill); background: var(--ih-color-status-success); color: var(--cx-paper); font-weight: 800; font-size: var(--ih-font-size-sm); }
.feat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1000px) { .feat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .feat { grid-template-columns: 1fr; } }
.feat article { display: grid; gap: 12px; align-content: start; padding: 20px; border-radius: 24px; background: var(--ih-surface); border: 1px solid var(--ih-border); transition: transform 260ms cubic-bezier(.2,.8,.2,1), border-color 260ms, box-shadow 260ms; }
.feat article:hover { transform: translateY(-6px); border-color: var(--cx-or); box-shadow: 0 30px 60px -40px var(--ih-color-orange-700); }
.feat h3 { font-size: var(--ih-font-size-xl); }
.feat p { color: var(--ih-text-muted); font-size: var(--ih-font-size-sm); }
.fx { block-size: 150px; border-radius: 16px; background: var(--ih-bg); border: 1px solid var(--ih-border); position: relative; overflow: hidden; display: grid; place-items: center; }
/* fx1: accounts plug into the hub */
.fx1 .hubc { inline-size: 54px; block-size: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--cx-ink); z-index: 2; }
.fx1 .hubc ih-hub { --ih-hub-size: 32px; color: var(--cx-paper); }
.fx1 .acc { position: absolute; font-size: 11px; font-weight: 800; padding: 5px 9px; border-radius: 8px; background: var(--ih-surface); border: 1px solid var(--ih-border); }
.fx1 .acc:nth-of-type(1) { left: 8%; top: 16%; } .fx1 .acc:nth-of-type(2) { right: 8%; top: 16%; } .fx1 .acc:nth-of-type(3) { left: 8%; bottom: 16%; } .fx1 .acc:nth-of-type(4) { right: 8%; bottom: 16%; }
.fx1 > svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.fx1 > svg path { fill: none; stroke: var(--cx-or); stroke-width: 2; stroke-dasharray: 3 6; animation: cx-flow 1s linear infinite; }
/* fx2: transactions sort into categories */
.fx2 { place-items: stretch; padding: 14px; gap: 6px; align-content: center; }
.fx2 .tx { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; font-size: 11.5px; font-weight: 700; padding: 6px 10px; border-radius: 8px; background: var(--ih-surface); border: 1px solid var(--ih-border); animation: fx2 6s ease-in-out infinite; }
.fx2 .tx:nth-child(2) { animation-delay: .4s; } .fx2 .tx:nth-child(3) { animation-delay: .8s; }
.fx2 .tx em { font-style: normal; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: var(--ih-radius-pill); background: var(--ih-surface-alt); color: var(--ih-text-muted); transition: background 300ms; animation: fx2b 6s ease-in-out infinite; animation-delay: inherit; }
@keyframes fx2 { 0%, 8% { opacity: 0; transform: translateX(-20px); } 16%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes fx2b { 0%, 30% { background: var(--ih-surface-alt); color: var(--ih-text-muted); } 40%, 90% { background: var(--ih-color-orange-100); color: var(--ih-text-accent); } }
/* fx3: deadline ring counts down */
.fx3 svg { inline-size: 110px; block-size: 110px; transform: rotate(-90deg); }
.fx3 circle { fill: none; stroke-width: 10; }
.fx3 .bg { stroke: var(--ih-surface-alt); }
.fx3 .fg { stroke: var(--cx-or); stroke-linecap: round; stroke-dasharray: 283; animation: fx3 6s ease-in-out infinite; }
@keyframes fx3 { 0% { stroke-dashoffset: 0; } 45%, 55% { stroke-dashoffset: 141; } 100% { stroke-dashoffset: 212; } }
.fx3 .lbl { position: absolute; display: grid; text-align: center; font-weight: 800; }
.fx3 .lbl b { font-size: 24px; }
.fx3 .lbl small { font-size: 10px; color: var(--ih-text-muted); }
/* fx4: currencies tick */
.fx4 .rates { display: grid; gap: 6px; inline-size: 80%; }
.fx4 .rates span { display: flex; justify-content: space-between; font-size: 12px; font-weight: 800; padding: 6px 10px; border-radius: 8px; background: var(--ih-surface); border: 1px solid var(--ih-border); }
.fx4 .rates em { font-style: normal; font-variant-numeric: tabular-nums; color: var(--ih-success); }
/* fx5: P&L bars */
.fx5 .pl { display: flex; align-items: end; gap: 8px; block-size: 100px; }
.fx5 .pl i { inline-size: 18px; border-radius: 5px 5px 2px 2px; background: var(--ih-color-neutral-300); animation: fx5 4s ease-in-out infinite; transform-origin: bottom; }
.fx5 .pl i:nth-child(odd) { background: var(--cx-or); }
.fx5 .pl i:nth-child(2) { animation-delay: .2s; } .fx5 .pl i:nth-child(3) { animation-delay: .4s; } .fx5 .pl i:nth-child(4) { animation-delay: .6s; } .fx5 .pl i:nth-child(5) { animation-delay: .8s; } .fx5 .pl i:nth-child(6) { animation-delay: 1s; }
@keyframes fx5 { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }
/* fx6: file my taxes button */
.fx6 .fbtn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 14px; background: var(--cx-or); color: var(--cx-ink); font-weight: 800; font-size: 13px; box-shadow: 0 14px 30px -12px var(--ih-color-orange-700); animation: fx6 4s ease-in-out infinite; }
.fx6 .fbtn ih-hub { --ih-hub-size: 18px; color: var(--cx-ink); }
@keyframes fx6 { 0%, 60%, 100% { transform: none; } 65% { transform: scale(.94); } 72% { transform: scale(1.04); } }
.fx6 .sent { position: absolute; inset-block-end: 14px; font-size: 11px; font-weight: 800; color: var(--ih-success); animation: fx6b 4s ease-in-out infinite; }
@keyframes fx6b { 0%, 70% { opacity: 0; transform: translateY(6px); } 78%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.safe { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 4vw, 48px); align-items: center; border-radius: 32px; background: var(--cx-ink); color: var(--cx-paper); padding: clamp(24px, 5vw, 56px); overflow: hidden; position: relative; }
@media (max-width: 760px) { .safe { grid-template-columns: 1fr; } }
.shield { position: relative; inline-size: 140px; block-size: 160px; display: grid; place-items: center; }
.shield svg { inline-size: 100%; block-size: 100%; }
.shield .sh { fill: color-mix(in srgb, var(--cx-or) 18%, transparent); stroke: var(--cx-or); stroke-width: 2.5; }
.shield .ck { fill: none; stroke: var(--cx-paper); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: sh-ck 3s ease-in-out infinite; }
@keyframes sh-ck { 20%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 60; } }
.shield::after { content: ""; position: absolute; inset: 10%; border-radius: 50%; border: 2px solid var(--cx-or); animation: cx-pulse 3s ease-out infinite; }
.safe h2 { font-size: clamp(26px, 3.6vw, 42px); color: var(--cx-paper); line-height: 1.1; }
.safe ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; color: var(--cx-dim); font-weight: 600; }
.safe li::before { content: "✓"; color: var(--cx-or); font-weight: 800; margin-inline-end: 10px; }

@media (prefers-reduced-motion: reduce) {
  .big-fan .spin, .qz-tile, .qz-step.enter, .qz-step.leave, .qz-flags span, .qz-why li, .qz-plan, .qz-plan .ln, .vault .ring, .vault .beam, .ck-sum, .bkc, .idc .card, .idc .tk, .idc .card .nm::after, .svc, .transfer .lane::after, .transfer .docs,
  .fx1 > svg path, .fx2 .tx, .fx2 .tx em, .fx3 .fg, .fx5 .pl i, .fx6 .fbtn, .fx6 .sent, .shield .ck, .shield::after, .dash-toast .bl { animation: none !important; }
  .big-fan .turn, .chart .line, .chart .bars rect, .ck-sum .gauge .fg { transition: none !important; }
  .fx6 .sent { opacity: 1; } .shield .ck { stroke-dashoffset: 0; }
}