/* TWAZ motion: CSS only, no dependencies, scripts, tracking or CSP changes.
 * Default presentation is complete and readable. Time-based entrance ends
 * within 780ms. Scroll scenes follow the reader (short entry range), never
 * Reduced-motion keeps every final value; illustrative cycles are pausable.
 */
.landing { --tm-ease: cubic-bezier(.18,.8,.25,1); --tm-direction: -1; }
[dir="rtl"] .landing { --tm-direction: 1; }
/* Use the exact live-site system stack on the body as well as :root.
   Explicit body inheritance also survives an embedded preview's host styles. */
.landing { font-family: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Noto Sans", "Noto Sans Arabic", sans-serif; font-synthesis-weight: none; }
.landing .tm-demo { margin-block-start: 24px; }
.landing .tm-pause { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.landing .tm-motion-control { display: inline-flex; align-items: center; gap: 8px; padding: 10px 0; min-height: 44px; color: var(--muted); font-size: .75rem; cursor: pointer; }
.landing .tm-motion-control::before { content: "Ⅱ"; color: var(--accent); }
.landing .tm-resume-label { display: none; }
.landing .tm-pause:checked + .tm-motion-control .tm-pause-label { display: none; }
.landing .tm-pause:checked + .tm-motion-control .tm-resume-label { display: inline; }
.landing .tm-pause:checked + .tm-motion-control::before { content: "▷"; }
.landing .tm-pause:focus-visible + .tm-motion-control { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.landing .tm-pause:checked ~ [role="img"] { --tm-state: paused; }
.landing .tm-demo .rd-finance-preview, .landing .tm-demo .rd-qatta-preview { margin-block-start: 4px; }
.landing .tm-demo-label { color: var(--quiet); font-size: .65rem; font-weight: 400; }
.landing .tm-sort { padding: 22px; position: relative; }
.landing .tm-sort-title { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: .78rem; }
.landing .tm-bubble-scene { position: relative; height: 150px; margin-block: 12px; isolation: isolate; }
.landing .tm-bubble { position: absolute; width: 80px; height: 80px; border-radius: 50%; background: var(--aura-deep); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.landing .tm-bubble > span { color: var(--accent); font-size: 1.15rem; }
.landing .tm-bubble small { font-size: .65rem; color: var(--text); }
.landing .tm-bubble-1 { inset-inline-start: 2%; top: 32px; }
.landing .tm-bubble-2 { inset-inline-start: calc(50% - 40px); top: 4px; background: var(--aura-mid); }
.landing .tm-bubble-3 { inset-inline-end: 2%; top: 55px; background: var(--raised-2); }
.landing .tm-token { display: none; position: absolute; top: 98px; inset-inline-start: calc(50% - 25px); min-width: 50px; height: 35px; align-items: center; justify-content: center; gap: 6px; background: var(--recessed); color: var(--accent); border: 1px solid var(--line-strong); border-radius: 10px; font-size: .72rem; opacity: 0; }
.landing .tm-bars { display: grid; gap: 12px; margin-block: 8px 24px; }
.landing .tm-bar-row { display: grid; grid-template-columns: 72px minmax(0,1fr) 50px; gap: 12px; align-items: center; font-size: .72rem; }
.landing .tm-bar-row > span { color: var(--muted); }
.landing .tm-bar-row > bdi { text-align: end; font-variant-numeric: tabular-nums; }
.landing .tm-track { height: 5px; background: var(--track); border-radius: 6px; }
.landing .tm-fill { display: block; height: 100%; border-radius: inherit; background: var(--accent); transform-origin: left; }
.landing[dir="rtl"] .tm-fill, [dir="rtl"] .landing .tm-fill { transform-origin: right; }
.landing .tm-fill-1 { width: 25%; }
.landing .tm-fill-2 { width: 100%; }
.landing .tm-fill-3 { width: 62.5%; }
.landing .tm-today { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block-start: 18px; border-block-start: 1px solid var(--line-strong); }
.landing .tm-today > span { color: var(--muted); font-size: .8rem; }
.landing .tm-today > strong { font-size: 1.7rem; color: var(--theme-ink); font-weight: 650; }
.landing .tm-today small { color: var(--quiet); font-size: .65rem; font-weight: 400; }
.landing .tm-split-scene { position: relative; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; padding-block: 20px 8px; }
.landing .tm-split-line { position: absolute; inset-inline: 16%; top: 39px; height: 1px; background: var(--line-strong); z-index: 0; }
.landing .tm-person { text-align: center; position: relative; }
.landing .tm-avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; margin: 0 auto 10px; background: var(--aura-mid); color: var(--accent); font-size: .85rem; border: 4px solid var(--raised); }
.landing .tm-person strong { display: block; font-size: 1.1rem; font-weight: 600; color: var(--theme-ink); }
.landing .tm-person small { font-size: .65rem; color: var(--quiet); }
.landing .tm-equal { color: var(--muted); text-align: center; font-size: .72rem; margin: 10px 0 20px; }
.landing .rd-product, .landing .rd-download { transition: transform 160ms var(--tm-ease), border-color 160ms var(--tm-ease); }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
 .landing .rd-product:hover { transform: translateY(-4px); border-color: var(--line-strong); }
 .landing .rd-download:hover { transform: translateY(-2px); }
}
@media (prefers-reduced-motion:no-preference) {
 .landing .rd-hero-copy > .eyebrow { animation: tm-enter 300ms var(--tm-ease) both; }
 .landing .rd-hero-copy > h1 { animation: tm-enter 420ms 50ms var(--tm-ease) both; }
 .landing .rd-hero-copy > .lead { animation: tm-enter 380ms 110ms var(--tm-ease) both; }
 .landing .rd-hero-copy > .actions { animation: tm-enter 320ms 160ms var(--tm-ease) both; }
 .landing .rd-hero-copy > .facts { animation: tm-enter 280ms 210ms var(--tm-ease) both; }
 .landing .tm-showroom .device-wrap { animation: tm-device 500ms 100ms var(--tm-ease) both; }
 .landing .tm-showroom .rd-floating-tasks { animation: tm-gather-tasks 500ms 180ms var(--tm-ease) both; }
 .landing .tm-showroom .rd-floating-counter { animation: tm-gather-counter 500ms 240ms var(--tm-ease) both; }
 .landing .tm-showroom .rd-home-finance { animation: tm-home-card 360ms 200ms var(--tm-ease) both; }
 .landing .tm-showroom .rd-home-personal > div { animation: tm-home-card 360ms 290ms var(--tm-ease) both; }
 .landing .tm-showroom .rd-home-qatta { animation: tm-home-card 360ms 380ms var(--tm-ease) both; }
 .landing .tm-showroom .rd-home-ask { animation: tm-home-card 300ms 480ms var(--tm-ease) both; }
 @supports (animation-timeline: view()) {
  .landing .tm-sort .tm-token-2 { animation-name: tm-sort-two; }
  .landing .tm-sort .tm-token-3 { animation-name: tm-sort-three; }
  .landing .tm-split .tm-person-2 { animation-name: tm-person-two; }
  .landing .tm-split .tm-person-3 { animation-name: tm-person-three; }
  .landing .rd-product-copy { animation: tm-copy linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  .landing .rd-task .rd-check { animation: tm-check linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  .landing .rd-counter-line > span { animation: tm-bar linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  .landing .rd-answer { animation: tm-copy linear both; animation-timeline: view(); animation-range: entry 0% entry 65%; }
  .landing .rd-lock { animation: tm-lock linear both; animation-timeline: view(); animation-range: entry 0% entry 65%; }
 }
}
@keyframes tm-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes tm-device { from { opacity: 0; transform: translateY(28px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes tm-gather-tasks { from { opacity: 0; transform: translate(64px,46px) rotate(9deg) scale(.94); } to { opacity: 1; transform: translateY(24px) rotate(3deg); } }
@keyframes tm-gather-counter { from { opacity: 0; transform: translate(-64px,12px) rotate(-9deg) scale(.94); } to { opacity: 1; transform: translateY(-38px) rotate(-3deg); } }
@keyframes tm-home-card { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes tm-copy { from { opacity: .35; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes tm-bubble { from { opacity: .25; transform: scale(.82); } to { opacity: 1; transform: scale(1); } }
@keyframes tm-sort-one { 0% { opacity: 0; transform: translate(0,28px) scale(.8); } 20% { opacity: 1; } 72% { opacity: 1; transform: translate(calc(100px * var(--tm-direction)),-50px) scale(.72); } 100% { opacity: 0; transform: translate(calc(100px * var(--tm-direction)),-50px) scale(.3); } }
@keyframes tm-sort-two { 0%,10% { opacity: 0; transform: translate(0,28px) scale(.8); } 32% { opacity: 1; } 78% { opacity: 1; transform: translate(0,-90px) scale(.72); } 100% { opacity: 0; transform: translate(0,-90px) scale(.3); } }
@keyframes tm-sort-three { 0%,20% { opacity: 0; transform: translate(0,28px) scale(.8); } 40% { opacity: 1; } 84% { opacity: 1; transform: translate(calc(-100px * var(--tm-direction)),-25px) scale(.72); } 100% { opacity: 0; transform: translate(calc(-100px * var(--tm-direction)),-25px) scale(.3); } }
@keyframes tm-bar { from { transform: scaleX(.08); } to { transform: scaleX(1); } }
@keyframes tm-person-one { from { opacity: .2; transform: translateX(-30px) translateY(-20px) scale(.7); } to { opacity: 1; transform: none; } }
@keyframes tm-person-two { from { opacity: .2; transform: translateY(-20px) scale(.7); } to { opacity: 1; transform: none; } }
@keyframes tm-person-three { from { opacity: .2; transform: translateX(30px) translateY(-20px) scale(.7); } to { opacity: 1; transform: none; } }
@keyframes tm-line { from { opacity: .1; transform: scaleX(0); } to { opacity: 1; transform: none; } }
@keyframes tm-check { from { transform: scale(.7); } to { transform: scale(1); } }
@keyframes tm-lock { from { transform: translateY(14px) rotate(-8deg) scale(.9); } to { transform: none; } }
/* Always-visible illustrative scenes. A quick 1.5s action is followed by a
   2.5s hold; native checkboxes pause each scene without JavaScript. Text and
   financial values stay legible throughout; only decorative shapes reset. */
@media (prefers-reduced-motion:no-preference) {
 .landing .tm-sort .tm-bubble { animation: tm-category-cycle 4s var(--tm-ease) infinite; }
 .landing .tm-sort .tm-token { display: flex; animation: tm-token-cycle 4s var(--tm-ease) infinite; --tm-x: calc(100px * var(--tm-direction)); --tm-y: -50px; }
 .landing .tm-sort .tm-token-2 { --tm-x: 0px; --tm-y: -90px; animation-delay: 130ms; }
 .landing .tm-sort .tm-token-3 { --tm-x: calc(-100px * var(--tm-direction)); --tm-y: -25px; animation-delay: 260ms; }
 .landing .tm-sort .tm-fill { animation: tm-bar-cycle 4s var(--tm-ease) infinite; }
 .landing .tm-split .tm-avatar { animation: tm-avatar-cycle 4s var(--tm-ease) infinite; }
 .landing .tm-split .tm-person-2 .tm-avatar { animation-delay: 100ms; }
 .landing .tm-split .tm-person-3 .tm-avatar { animation-delay: 200ms; }
 .landing .tm-split .tm-split-line { animation: tm-line-cycle 4s var(--tm-ease) infinite; }
 .landing .tm-demo [role="img"] * { animation-play-state: var(--tm-state, running); }
}
@keyframes tm-category-cycle { 0%, 100% { transform: scale(1); } 12% { transform: scale(.91); } 28%, 88% { transform: scale(1); } }
@keyframes tm-token-cycle { 0%, 3% { opacity: 0; transform: translate(0,28px) scale(.8); } 10% { opacity: 1; } 26% { opacity: 1; transform: translate(var(--tm-x),var(--tm-y)) scale(.72); } 34%, 100% { opacity: 0; transform: translate(var(--tm-x),var(--tm-y)) scale(.3); } }
@keyframes tm-bar-cycle { 0%, 14% { transform: scaleX(.16); } 38%, 94% { transform: scaleX(1); } 100% { transform: scaleX(.16); } }
@keyframes tm-avatar-cycle { 0%, 6% { transform: translateY(-12px) scale(.8); } 25%, 92% { transform: none; } 100% { transform: translateY(-12px) scale(.8); } }
@keyframes tm-line-cycle { 0%, 5% { transform: scaleX(.08); } 24%, 92% { transform: scaleX(1); } 100% { transform: scaleX(.08); } }
@media (max-width: 560px) {
 .landing .tm-sort { padding: 18px; }
 .landing .tm-bubble { width: 70px; height: 70px; }
 .landing .tm-bubble-2 { inset-inline-start: calc(50% - 35px); }
 .landing .tm-bar-row { grid-template-columns: 64px minmax(0,1fr) 44px; gap: 8px; }
 .landing .tm-person strong { font-size: .95rem; }
 .landing .tm-today > strong { font-size: 1.5rem; }
}
@media (prefers-reduced-motion:reduce) {
 .landing *, .landing *::before, .landing *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
 .landing .tm-token, .landing .tm-motion-control { display: none; }
}
@media (forced-colors:active) { .landing .tm-bubble, .landing .tm-avatar { outline: 1px solid CanvasText; } }