{"id":476,"date":"2026-10-06T06:28:13","date_gmt":"2026-10-06T06:28:13","guid":{"rendered":"https:\/\/aqavsecure.io\/?page_id=476"},"modified":"2026-10-08T05:30:14","modified_gmt":"2026-10-08T05:30:14","slug":"demo","status":"publish","type":"page","link":"https:\/\/aqavsecure.io\/fr\/demo\/","title":{"rendered":"D\u00e9monstration"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"476\" class=\"elementor elementor-476\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6ff3749 e-flex e-con-boxed e-con e-parent\" data-id=\"6ff3749\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e2fb3c2 elementor-widget elementor-widget-html\" data-id=\"e2fb3c2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     AQAV \u2014 APP SIMULATION\r\n     Phone mockup + keypad demo + step list.\r\n     Paste this ENTIRE block into a WordPress Custom HTML block.\r\n     ============================================================ -->\r\n\r\n<style>\r\n  \/* ---------- theme tokens ---------- *\/\r\n  :root {\r\n    --k0:oklch(0.14 0.028 252);\r\n    --k1:oklch(0.97 0.01 230);\r\n    --k2:oklch(0.84 0.14 198);\r\n    --k5:oklch(0.62 0.05 238 \/ 24%);\r\n    --k6:oklch(0.62 0.05 238 \/ 30%);\r\n    --k7:oklch(0.84 0.02 235);\r\n    --k8:oklch(0.9 0.02 232);\r\n    --k9:oklch(0.84 0.14 198 \/ 26%);\r\n    --k10:oklch(0.7 0.16 272 \/ 10%);\r\n    --k11:oklch(0.7 0.16 272);\r\n    --k12:oklch(0.7 0.16 272 \/ 45%);\r\n    --k13:oklch(0.84 0.14 198 \/ 55%);\r\n    --k14:oklch(0.48 0.03 246);\r\n    --k15:oklch(0.2 0.02 250);\r\n    --k16:oklch(0.32 0.03 248);\r\n    --k17:oklch(0.05 0.03 250 \/ 85%);\r\n    --k18:oklch(0.7 0.03 240 \/ 25%);\r\n    --k19:oklch(0.84 0.14 198 \/ 45%);\r\n    --k20:oklch(0.19 0.035 245);\r\n    --k21:oklch(1 0 0 \/ 7%);\r\n    --k22:oklch(0.7 0.025 235);\r\n    --k23:oklch(0.84 0.14 198 \/ 70%);\r\n    --k24:oklch(0.86 0.1 205);\r\n    --k33:oklch(0.17 0.04 245);\r\n    --k37:oklch(0.28 0.045 245);\r\n    --k55:oklch(0.74 0.025 235);\r\n    --k67:oklch(0.62 0.05 238 \/ 35%);\r\n    --k68:oklch(0.68 0.025 235);\r\n    --k74:oklch(0.62 0.05 238 \/ 22%);\r\n    --k75:oklch(0.84 0.14 198 \/ 9%);\r\n    --k76:oklch(0.24 0.04 244 \/ 40%);\r\n  }\r\n  html[data-theme=\"light\"] {\r\n    --k0:oklch(0.935 0.012 252); --k1:oklch(0.177 0.02 230);\r\n    --k2:oklch(0.52 0.13 222); --k5:oklch(0.45 0.04 240 \/ 24%);\r\n    --k6:oklch(0.45 0.04 240 \/ 30%); --k7:oklch(0.294 0.03 235);\r\n    --k8:oklch(0.24 0.03 232); --k9:oklch(0.52 0.13 222 \/ 26%);\r\n    --k10:oklch(0.5 0.17 276 \/ 10%); --k11:oklch(0.5 0.17 276);\r\n    --k12:oklch(0.5 0.17 276 \/ 45%); --k13:oklch(0.52 0.13 222 \/ 55%);\r\n    --k14:oklch(0.48 0.03 246); --k15:oklch(0.955 0.012 250);\r\n    --k16:oklch(0.994 0.012 248); --k17:oklch(0.905 0.012 250 \/ 85%);\r\n    --k18:oklch(0.45 0.04 240 \/ 25%); --k19:oklch(0.52 0.13 222 \/ 45%);\r\n    --k20:oklch(0.952 0.012 245); --k21:oklch(1 0 0 \/ 42%);\r\n    --k22:oklch(0.42 0.038 235); --k23:oklch(0.52 0.13 222 \/ 70%);\r\n    --k24:oklch(0.52 0.13 222); --k33:oklch(0.945 0.012 245);\r\n    --k37:oklch(0.981 0.012 245); --k55:oklch(0.384 0.038 235);\r\n    --k67:oklch(0.45 0.04 240 \/ 35%); --k68:oklch(0.438 0.038 235);\r\n    --k74:oklch(0.45 0.04 240 \/ 22%); --k75:oklch(0.52 0.13 222 \/ 9%);\r\n    --k76:oklch(0.968 0.012 244 \/ 40%);\r\n  }\r\n\r\n  \/* ---------- animations ---------- *\/\r\n  @keyframes dmIn    { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }\r\n  @keyframes dmShake { 0%, 100% { transform: none; } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }\r\n\r\n  @media (prefers-reduced-motion: reduce) {\r\n    .aq-sim *, .aq-sim *::before, .aq-sim *::after {\r\n      animation-duration: .01ms !important;\r\n      transition-duration: .01ms !important;\r\n    }\r\n  }\r\n\r\n  \/* ---------- shell ---------- *\/\r\n  .aq-sim {\r\n    margin-top: clamp(24px, 4vw, 44px);\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));\r\n    gap: clamp(28px, 4vw, 56px);\r\n    align-items: start;\r\n    color: var(--k1);\r\n    font-family: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;\r\n    -webkit-font-smoothing: antialiased;\r\n    -moz-osx-font-smoothing: grayscale;\r\n  }\r\n  .aq-sim *, .aq-sim *::before, .aq-sim *::after { box-sizing: border-box; }\r\n  .aq-sim button {\r\n    font: inherit; color: inherit;\r\n    background: none; border: none; cursor: pointer;\r\n  }\r\n  .aq-sim :focus-visible {\r\n    outline: 2px solid var(--k2); outline-offset: 3px; border-radius: 6px;\r\n  }\r\n\r\n  \/* ---------- stage \/ rig ---------- *\/\r\n  .aq-sim-stage {\r\n    min-width: 0;\r\n    display: flex;\r\n    justify-content: center;\r\n    perspective: 1500px;\r\n    padding: 20px 0 50px;\r\n    touch-action: pan-y;\r\n    overflow: clip visible;\r\n  }\r\n  .aq-sim-rig {\r\n    position: relative;\r\n    width: min(348px, 100%);\r\n    transform-style: preserve-3d;\r\n    will-change: transform;\r\n    transform: translateZ(0) rotateX(-4deg) rotateY(-17deg);\r\n    transition: transform .6s cubic-bezier(.22,1,.36,1);\r\n  }\r\n  .aq-sim-halo {\r\n    position: absolute; left: 50%; top: 50%;\r\n    width: 620px; height: 620px;\r\n    margin: -310px 0 0 -310px;\r\n    transform: translateZ(-160px);\r\n    border-radius: 50%;\r\n    background: radial-gradient(circle, var(--k9), var(--k10) 40%, transparent 66%);\r\n    pointer-events: none;\r\n  }\r\n  .aq-sim-ring1 {\r\n    position: absolute; left: 50%; top: 50%;\r\n    width: 560px; height: 560px;\r\n    margin: -280px 0 0 -280px;\r\n    border-radius: 50%;\r\n    pointer-events: none;\r\n    background: conic-gradient(from 0deg, transparent 0 58%, var(--k2) 74%, var(--k11) 90%, transparent 100%);\r\n    -webkit-mask: radial-gradient(circle, transparent 64%, #000 65%, #000 66.3%, transparent 67.3%);\r\n            mask: radial-gradient(circle, transparent 64%, #000 65%, #000 66.3%, transparent 67.3%);\r\n    transform: translateZ(-90px) rotateX(74deg);\r\n    animation: aqSimSpin1 32s linear infinite;\r\n  }\r\n  .aq-sim-ring2 {\r\n    position: absolute; left: 50%; top: 50%;\r\n    width: 460px; height: 460px;\r\n    margin: -230px 0 0 -230px;\r\n    border-radius: 50%;\r\n    border: 1px dashed var(--k12);\r\n    pointer-events: none;\r\n    transform: translateZ(-40px) rotateX(74deg);\r\n    animation: aqSimSpin2 44s linear infinite reverse;\r\n  }\r\n  .aq-sim-shadow {\r\n    position: absolute; left: 8%; right: 8%; bottom: -44px; height: 60px;\r\n    border-radius: 50%;\r\n    transform: translateZ(-40px) rotateX(80deg);\r\n    background: radial-gradient(closest-side, var(--k13), transparent);\r\n    filter: blur(8px);\r\n    pointer-events: none;\r\n  }\r\n  @keyframes aqSimSpin1 { to { transform: translateZ(-90px) rotateX(74deg) rotateZ(360deg); } }\r\n  @keyframes aqSimSpin2 { to { transform: translateZ(-40px) rotateX(74deg) rotateZ(360deg); } }\r\n\r\n  \/* ---------- phone ---------- *\/\r\n  .aq-sim-phone {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 720px;\r\n    padding: 10px;\r\n    border-radius: 50px;\r\n    transform: translateZ(0);\r\n    transform-style: preserve-3d;\r\n    background: linear-gradient(160deg, var(--k14), var(--k15) 60%, var(--k16));\r\n    box-shadow:\r\n      0 70px 100px -54px var(--k17),\r\n      0 0 0 1px var(--k18),\r\n      0 0 90px -30px var(--k19);\r\n    --gx: 0.5;\r\n  }\r\n  .aq-sim-screen {\r\n    position: relative;\r\n    width: 100%; height: 100%;\r\n    border-radius: 41px;\r\n    overflow: hidden;\r\n    background: var(--k20);\r\n    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;\r\n    color: var(--k1);\r\n  }\r\n  .aq-sim-notch {\r\n    position: absolute; top: 10px; left: 50%;\r\n    width: 96px; height: 28px; margin-left: -48px;\r\n    border-radius: 99px; background: rgb(4, 6, 11); z-index: 9;\r\n  }\r\n  .aq-sim-glare {\r\n    position: absolute; inset: 0; z-index: 20;\r\n    pointer-events: none;\r\n    border-radius: 41px;\r\n    background: linear-gradient(115deg,\r\n      transparent calc(var(--gx, 0.5) * 100% - 40%),\r\n      var(--k21) calc(var(--gx, 0.5) * 100% - 12%),\r\n      transparent calc(var(--gx, 0.5) * 100% + 10%));\r\n    mix-blend-mode: screen;\r\n  }\r\n  .aq-sim-status {\r\n    position: absolute; top: 0; left: 0; right: 0; height: 48px;\r\n    padding: 16px 28px 0;\r\n    display: flex; justify-content: space-between;\r\n    font-size: 13px; font-weight: 600;\r\n    z-index: 8;\r\n  }\r\n  .aq-sim-status .net {\r\n    font-family: 'JetBrains Mono', monospace;\r\n    font-size: 10px; letter-spacing: 0.1em;\r\n    color: var(--k22);\r\n  }\r\n\r\n  \/* ---------- lock screen ---------- *\/\r\n  .aq-sim-lock {\r\n    position: absolute; inset: 0;\r\n    padding: 74px 26px 30px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    animation: dmIn .35s ease;\r\n  }\r\n  .aq-sim-lock img {\r\n    width: 64px; height: 64px;\r\n    border-radius: 20px;\r\n    box-shadow: 0 0 40px -10px var(--k23);\r\n  }\r\n  .aq-sim-lock .title {\r\n    margin-top: 18px;\r\n    font-size: 19px;\r\n    font-weight: 600;\r\n  }\r\n  .aq-sim-lock .sub {\r\n    margin-top: 6px;\r\n    font-size: 13px;\r\n    color: var(--k22);\r\n    text-align: center;\r\n  }\r\n  .aq-sim-dots {\r\n    margin-top: 20px;\r\n    font-size: 22px;\r\n    letter-spacing: 0.4em;\r\n    color: var(--k24);\r\n    font-variant-numeric: tabular-nums;\r\n  }\r\n  .aq-sim-keypad {\r\n    margin-top: auto;\r\n    width: 100%;\r\n    display: grid;\r\n    grid-template-columns: repeat(3, 1fr);\r\n    gap: 12px;\r\n  }\r\n  .aq-sim-keypad button {\r\n    height: 58px;\r\n    border-radius: 999px;\r\n    background: var(--k37);\r\n    font-size: 24px;\r\n    font-weight: 500;\r\n    color: var(--k1);\r\n    transition: background .15s ease, transform .1s ease;\r\n  }\r\n  .aq-sim-keypad button:hover { background: color-mix(in oklab, var(--k37) 80%, var(--k2)); }\r\n  .aq-sim-keypad button:active { transform: scale(.94); }\r\n  .aq-sim-keypad button.fn { background: transparent; font-size: 16px; }\r\n  .aq-sim-faceid {\r\n    margin-top: 16px;\r\n    min-height: 44px;\r\n    padding: 0 18px;\r\n    border-radius: 999px;\r\n    font-size: 13.5px;\r\n    font-weight: 500;\r\n    color: var(--k2);\r\n  }\r\n\r\n  \/* ---------- aside ---------- *\/\r\n  .aq-sim-aside { min-width: 0; }\r\n  .aq-sim-eyebrow {\r\n    display: flex; align-items: center; gap: 12px;\r\n    font-family: 'JetBrains Mono', monospace;\r\n    font-size: 10.5px;\r\n    letter-spacing: 0.24em;\r\n    color: var(--k2);\r\n  }\r\n  .aq-sim-eyebrow .line { width: 28px; height: 1px; background: currentColor; }\r\n  .aq-sim-aside h1 {\r\n    margin-top: 14px;\r\n    font-size: clamp(2rem, 4vw, 3rem);\r\n    line-height: 1.02;\r\n    letter-spacing: -0.035em;\r\n    font-weight: 600;\r\n    text-wrap: balance;\r\n  }\r\n  .aq-sim-aside .lede {\r\n    margin-top: 14px;\r\n    max-width: 48ch;\r\n    font-size: 15.5px;\r\n    line-height: 1.6;\r\n    color: var(--k7);\r\n  }\r\n  .aq-sim-steps {\r\n    margin: 26px 0 0;\r\n    padding: 0;\r\n    list-style: none;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 8px;\r\n  }\r\n  .aq-sim-step {\r\n    display: flex; gap: 14px; align-items: center;\r\n    padding: 12px 16px;\r\n    border-radius: 18px;\r\n    border: 1px solid var(--k74);\r\n    background: var(--k76);\r\n    transition: background .3s, border-color .3s;\r\n  }\r\n  .aq-sim-step.is-active {\r\n    border-color: var(--k13);\r\n    background: var(--k75);\r\n  }\r\n  .aq-sim-step .num {\r\n    flex-shrink: 0;\r\n    width: 28px; height: 28px;\r\n    border-radius: 99px;\r\n    display: grid; place-items: center;\r\n    font-family: 'JetBrains Mono', monospace;\r\n    font-size: 11px; font-weight: 500;\r\n    color: var(--k55);\r\n    background: var(--k37);\r\n    transition: background .3s, color .3s;\r\n  }\r\n  .aq-sim-step.is-active .num {\r\n    color: var(--k33);\r\n    background: var(--k2);\r\n  }\r\n  .aq-sim-step .t {\r\n    font-size: 15px;\r\n    font-weight: 600;\r\n    color: var(--k1);\r\n    margin-bottom: 0px !important;\r\n  }\r\n  .aq-sim-step .d {\r\n    margin-top: 3px;\r\n    font-size: 13px;\r\n    line-height: 1.5;\r\n    color: var(--k55);\r\n      margin-bottom: 0px !important;\r\n  }\r\n\r\n  .aq-sim-cta {\r\n    margin-top: 22px;\r\n    display: flex; flex-wrap: wrap; gap: 10px;\r\n  }\r\n  .aq-sim-cta button,\r\n  .aq-sim-cta a {\r\n    min-height: 46px;\r\n    padding: 0 20px;\r\n    border-radius: 999px;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    font-size: 13.5px;\r\n    text-decoration: none;\r\n  }\r\n  .aq-sim-cta button {\r\n    border: 1px solid var(--k67);\r\n    color: var(--k8);\r\n  }\r\n  .aq-sim-cta a {\r\n    font-weight: 600;\r\n    color: var(--k33);\r\n    background: linear-gradient(100deg, var(--k2), var(--k11));\r\n  }\r\n  .aq-sim-note {\r\n    margin-top: 16px;\r\n    font-size: 12px;\r\n    line-height: 1.55;\r\n    color: var(--k68);\r\n  }\r\n<\/style>\r\n\r\n\r\n<!-- ============================================================\r\n     MARKUP\r\n     ============================================================ -->\r\n<div class=\"aq-sim\">\r\n\r\n  <!-- LEFT: PHONE -->\r\n  <div class=\"aq-sim-stage\">\r\n    <div class=\"aq-sim-rig\" id=\"aq-sim-rig\">\r\n      <div class=\"aq-sim-halo\"  aria-hidden=\"true\"><\/div>\r\n      <div class=\"aq-sim-ring1\" aria-hidden=\"true\"><\/div>\r\n      <div class=\"aq-sim-ring2\" aria-hidden=\"true\"><\/div>\r\n      <div class=\"aq-sim-shadow\" aria-hidden=\"true\"><\/div>\r\n\r\n      <div class=\"aq-sim-phone\" id=\"aq-sim-phone\">\r\n        <div class=\"aq-sim-screen\">\r\n\r\n          <div class=\"aq-sim-notch\" aria-hidden=\"true\"><\/div>\r\n          <div class=\"aq-sim-glare\" id=\"aq-sim-glare\" aria-hidden=\"true\"><\/div>\r\n\r\n          <div class=\"aq-sim-status\" aria-hidden=\"true\">\r\n            <span>9:41<\/span>\r\n            <span class=\"net\">5G \u25ae\u25ae\u25ae<\/span>\r\n          <\/div>\r\n\r\n          <div class=\"aq-sim-lock\" id=\"aq-sim-lock\">\r\n            <img decoding=\"async\" src=\"\/WordPress\/wp-content\/uploads\/2026\/10\/image-2-1.jpg\" alt=\"\" width=\"64\" height=\"64\">\r\n            <p class=\"title\" id=\"aq-sim-title\">Enter your passcode<\/p>\r\n            <p class=\"sub\" id=\"aq-sim-sub\">2841 real \u00b7 9110 duress<\/p>\r\n\r\n            <div class=\"aq-sim-dots\" id=\"aq-sim-dots\" aria-live=\"polite\">\u25cb\u25cb\u25cb\u25cb<\/div>\r\n\r\n            <div class=\"aq-sim-keypad\" id=\"aq-sim-keypad\">\r\n              <button type=\"button\" data-k=\"1\">1<\/button>\r\n              <button type=\"button\" data-k=\"2\">2<\/button>\r\n              <button type=\"button\" data-k=\"3\">3<\/button>\r\n              <button type=\"button\" data-k=\"4\">4<\/button>\r\n              <button type=\"button\" data-k=\"5\">5<\/button>\r\n              <button type=\"button\" data-k=\"6\">6<\/button>\r\n              <button type=\"button\" data-k=\"7\">7<\/button>\r\n              <button type=\"button\" data-k=\"8\">8<\/button>\r\n              <button type=\"button\" data-k=\"9\">9<\/button>\r\n              <button type=\"button\" class=\"fn\" data-k=\"C\" aria-label=\"Clear\">C<\/button>\r\n              <button type=\"button\" data-k=\"0\">0<\/button>\r\n              <button type=\"button\" class=\"fn\" data-k=\"B\" aria-label=\"Delete last digit\">\u232b<\/button>\r\n            <\/div>\r\n\r\n            <button type=\"button\" class=\"aq-sim-faceid\" id=\"aq-sim-faceid\">Use Face ID instead<\/button>\r\n          <\/div>\r\n\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- RIGHT: ASIDE -->\r\n  <aside class=\"aq-sim-aside\">\r\n    <div class=\"aq-sim-eyebrow\">\r\n      <span class=\"line\" aria-hidden=\"true\"><\/span>\r\n      <span>SIMULATION \u00b7 INDIVIDUALS<\/span>\r\n    <\/div>\r\n    <h1>Try the app.<\/h1>\r\n    <p class=\"lede\">Everything runs in this page. Nothing is sent.<\/p>\r\n\r\n    <ol class=\"aq-sim-steps\" id=\"aq-sim-steps\">\r\n      <li class=\"aq-sim-step is-active\" data-step=\"0\">\r\n        <span class=\"num\">01<\/span>\r\n        <div>\r\n          <p class=\"t\">Unlock<\/p>\r\n          <p class=\"d\">Code 2841 or Face ID.<\/p>\r\n        <\/div>\r\n      <\/li>\r\n      <li class=\"aq-sim-step\" data-step=\"1\">\r\n        <span class=\"num\">02<\/span>\r\n        <div>\r\n          <p class=\"t\">Receive a request<\/p>\r\n          <p class=\"d\">A business asks for one check.<\/p>\r\n        <\/div>\r\n      <\/li>\r\n      <li class=\"aq-sim-step\" data-step=\"2\">\r\n        <span class=\"num\">03<\/span>\r\n        <div>\r\n          <p class=\"t\">Approve or refuse<\/p>\r\n          <p class=\"d\">Face ID confirms it is you.<\/p>\r\n        <\/div>\r\n      <\/li>\r\n      <li class=\"aq-sim-step\" data-step=\"3\">\r\n        <span class=\"num\">04<\/span>\r\n        <div>\r\n          <p class=\"t\">Check the receipt<\/p>\r\n          <p class=\"d\">A signed yes\/no, nothing more.<\/p>\r\n        <\/div>\r\n      <\/li>\r\n      <li class=\"aq-sim-step\" data-step=\"4\">\r\n        <span class=\"num\">05<\/span>\r\n        <div>\r\n          <p class=\"t\">Duress code<\/p>\r\n          <p class=\"d\">Type 9110 to see the decoy.<\/p>\r\n        <\/div>\r\n      <\/li>\r\n    <\/ol>\r\n\r\n    <div class=\"aq-sim-cta\">\r\n      <button type=\"button\" id=\"aq-sim-restart\">\u21ba Restart<\/button>\r\n      <a href=\"\/wordpress\/#cta\">Join the waitlist<\/a>\r\n    <\/div>\r\n\r\n    <p class=\"aq-sim-note\">Fictitious demo data.<\/p>\r\n  <\/aside>\r\n<\/div>\r\n\r\n\r\n<!-- ============================================================\r\n     SCRIPT\r\n     ============================================================ -->\r\n<script>\r\n(function () {\r\n  var root    = document.querySelector('.aq-sim');\r\n  if (!root) return;\r\n\r\n  var rig     = document.getElementById('aq-sim-rig');\r\n  var phone   = document.getElementById('aq-sim-phone');\r\n  var glare   = document.getElementById('aq-sim-glare');\r\n  var dots    = document.getElementById('aq-sim-dots');\r\n  var keypad  = document.getElementById('aq-sim-keypad');\r\n  var faceid  = document.getElementById('aq-sim-faceid');\r\n  var restart = document.getElementById('aq-sim-restart');\r\n  var steps   = Array.prototype.slice.call(document.querySelectorAll('.aq-sim-step'));\r\n\r\n  var code = '';\r\n  var step = 0;\r\n\r\n  \/* ---------- state ---------- *\/\r\n  function setStep(n) {\r\n    step = n;\r\n    steps.forEach(function (el, i) {\r\n      el.classList.toggle('is-active', i === n);\r\n    });\r\n  }\r\n\r\n  function renderDots() {\r\n    var out = '';\r\n    for (var i = 0; i < 4; i++) out += i < code.length ? '\u25cf' : '\u25cb';\r\n    dots.textContent = out;\r\n  }\r\n\r\n  function reset() {\r\n    code = '';\r\n    renderDots();\r\n    setStep(0);\r\n  }\r\n\r\n  \/* ---------- keypad ---------- *\/\r\n  if (keypad) {\r\n    keypad.addEventListener('click', function (e) {\r\n      var b = e.target.closest('button[data-k]');\r\n      if (!b) return;\r\n      var k = b.getAttribute('data-k');\r\n\r\n      if (k === 'C') { code = ''; renderDots(); return; }\r\n      if (k === 'B') { code = code.slice(0, -1); renderDots(); return; }\r\n\r\n      if (code.length >= 4) return;\r\n      code += k;\r\n      renderDots();\r\n\r\n      if (code.length === 4) {\r\n        if (code === '2841') {\r\n          setStep(1);\r\n          setTimeout(function () { setStep(2); }, 800);\r\n          setTimeout(function () { setStep(3); }, 1600);\r\n          setTimeout(function () { code = ''; renderDots(); }, 2200);\r\n        } else if (code === '9110') {\r\n          setStep(4);\r\n          setTimeout(function () { code = ''; renderDots(); }, 1400);\r\n        } else {\r\n          phone.animate(\r\n            [{ transform: 'translateX(0)' },\r\n             { transform: 'translateX(-8px)' },\r\n             { transform: 'translateX(8px)' },\r\n             { transform: 'translateX(0)' }],\r\n            { duration: 320, easing: 'ease-in-out' }\r\n          );\r\n          setTimeout(function () { code = ''; renderDots(); }, 500);\r\n        }\r\n      }\r\n    });\r\n  }\r\n\r\n  \/* ---------- face id shortcut ---------- *\/\r\n  if (faceid) {\r\n    faceid.addEventListener('click', function () {\r\n      setStep(1);\r\n      setTimeout(function () { setStep(2); }, 800);\r\n      setTimeout(function () { setStep(3); }, 1600);\r\n    });\r\n  }\r\n\r\n  \/* ---------- restart ---------- *\/\r\n  if (restart) restart.addEventListener('click', reset);\r\n\r\n  \/* ---------- 3D tilt on hover ---------- *\/\r\n  var fine = !!(window.matchMedia &&\r\n    window.matchMedia('(hover: hover) and (pointer: fine)').matches);\r\n  var reduced = !!(window.matchMedia &&\r\n    window.matchMedia('(prefers-reduced-motion: reduce)').matches);\r\n\r\n  if (rig && fine && !reduced) {\r\n    var tx = -17, ty = -4, qx = tx, qy = ty;\r\n    var queued = false, raf = 0;\r\n\r\n    var apply = function () {\r\n      queued = false;\r\n      qx += (tx - qx) * 0.12;\r\n      qy += (ty - qy) * 0.12;\r\n      rig.style.transform =\r\n        'translateZ(0) rotateX(' + qy.toFixed(2) + 'deg) rotateY(' + qx.toFixed(2) + 'deg)';\r\n      if (glare) {\r\n        var gx = 0.5 + (qx \/ 60);\r\n        if (gx < 0.15) gx = 0.15;\r\n        if (gx > 0.85) gx = 0.85;\r\n        glare.style.setProperty('--gx', gx.toFixed(3));\r\n      }\r\n      if (Math.abs(tx - qx) > 0.05 || Math.abs(ty - qy) > 0.05) kick();\r\n    };\r\n    var kick = function () {\r\n      if (!queued) { queued = true; raf = requestAnimationFrame(apply); }\r\n    };\r\n\r\n    rig.addEventListener('pointermove', function (e) {\r\n      var r = rig.getBoundingClientRect();\r\n      var px = (e.clientX - r.left) \/ r.width  - 0.5;\r\n      var py = (e.clientY - r.top)  \/ r.height - 0.5;\r\n      tx = -17 + px * 26;   \/\/ horizontal\r\n      ty = -4  - py * 18;   \/\/ vertical\r\n      kick();\r\n    });\r\n    rig.addEventListener('pointerleave', function () {\r\n      tx = -17; ty = -4; kick();\r\n    });\r\n  }\r\n\r\n  \/* ---------- boot ---------- *\/\r\n  renderDots();\r\n  setStep(0);\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5e84348 e-flex e-con-boxed e-con e-parent\" data-id=\"5e84348\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c3a873b elementor-widget elementor-widget-html\" data-id=\"c3a873b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\n  #intro-overlay {\r\n    position: fixed;\r\n    inset: 0;\r\n    z-index: 1000;\r\n    overflow: hidden;\r\n    font-family: 'Geist', system-ui, sans-serif;\r\n    color: #eef6fb;\r\n    background: transparent;\r\n  }\r\n\r\n  \/* Background layer *\/\r\n  #intro-bg {\r\n    position: absolute;\r\n    inset: 0;\r\n    background: #050913;\r\n  }\r\n\r\n  \/* Canvas \u2014 the element you referenced *\/\r\n  #intro-canvas {\r\n    position: absolute;\r\n    inset: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    transform-origin: 50% 66%;\r\n    \/* transform is set dynamically by JS (scale grows over time) *\/\r\n  }\r\n\r\n  \/* Vignette overlay *\/\r\n  #intro-vig {\r\n    position: absolute;\r\n    inset: 0;\r\n    pointer-events: none;\r\n    background:\r\n      linear-gradient(180deg, rgba(5,9,19,.75), transparent 30%),\r\n      radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(3,6,12,.85) 100%);\r\n  }\r\n\r\n  \/* Deck that holds the document cards *\/\r\n  #intro-deck {\r\n    position: absolute;\r\n    inset: 0;\r\n    pointer-events: none;\r\n  }\r\n\r\n  \/* Document card base styling (individual styles set inline by JS) *\/\r\n  .intro-card {\r\n    position: absolute;\r\n    left: 0;\r\n    top: 0;\r\n    width: 148px;\r\n    height: 94px;\r\n    margin: -47px 0 0 -74px;\r\n    border-radius: 12px;\r\n    padding: 11px 12px;\r\n    opacity: 0;\r\n    will-change: transform, opacity;\r\n    background: linear-gradient(150deg, rgba(44,86,120,.96), rgba(24,34,78,.96));\r\n    border: 1px solid rgba(159,230,245,.4);\r\n    box-shadow:\r\n      0 24px 50px -24px rgba(95,211,234,.7),\r\n      inset 0 1px 0 rgba(255,255,255,.14);\r\n    font-family: 'JetBrains Mono', monospace;\r\n    color: #e6f8ff;\r\n    overflow: hidden;\r\n  }\r\n\r\n  \/* Top bar *\/\r\n  #intro-tag {\r\n    position: absolute;\r\n    left: clamp(18px, 4vw, 44px);\r\n    right: clamp(18px, 4vw, 44px);\r\n    top: clamp(18px, 3vw, 34px);\r\n    display: flex;\r\n    justify-content: space-between;\r\n    gap: 16px;\r\n    font-family: 'JetBrains Mono', monospace;\r\n    font-size: 10.5px;\r\n    letter-spacing: 0.24em;\r\n    color: #9fb3c4;\r\n  }\r\n  #intro-tag .dot {\r\n    width: 6px;\r\n    height: 6px;\r\n    border-radius: 50%;\r\n    background: #5fd3ea;\r\n    box-shadow: 0 0 10px #5fd3ea;\r\n  }\r\n  #intro-tag .cy { color: #5fd3ea; }\r\n\r\n  \/* Headline block *\/\r\n  #intro-head {\r\n    position: absolute;\r\n    left: 0;\r\n    right: 0;\r\n    top: clamp(64px, 11vh, 120px);\r\n    text-align: center;\r\n    padding: 0 20px;\r\n    pointer-events: none;\r\n    text-shadow: 0 2px 22px #050913, 0 0 3px #050913;\r\n  }\r\n  #intro-head h1 {\r\n    margin: 0;\r\n    font-size: clamp(1.5rem, 3.4vw, 2.7rem);\r\n    font-weight: 600;\r\n    letter-spacing: -0.04em;\r\n    line-height: 1.05;\r\n    opacity: 0;\r\n  }\r\n  #intro-head p {\r\n    margin: 12px 0 0;\r\n    font-size: clamp(14px, 1.3vw, 16px);\r\n    color: #c6d6e2;\r\n    opacity: 0;\r\n  }\r\n\r\n  \/* Core rings *\/\r\n  #intro-core {\r\n    position: absolute;\r\n    left: 50%;\r\n    top: 42%;\r\n    width: 0;\r\n    height: 0;\r\n  }\r\n  #intro-core .r1,\r\n  #intro-core .r2 {\r\n    position: absolute;\r\n    left: -70px;\r\n    top: -70px;\r\n    width: 140px;\r\n    height: 140px;\r\n    border-radius: 50%;\r\n    opacity: 0;\r\n  }\r\n  #intro-core .r1 {\r\n    border: 1px solid #5fd3ea;\r\n    box-shadow: 0 0 50px rgba(95,211,234,.6), inset 0 0 40px rgba(95,211,234,.35);\r\n  }\r\n  #intro-core .r2 {\r\n    border: 1px solid #8c84ff;\r\n  }\r\n  #intro-core .r3 {\r\n    position: absolute;\r\n    left: -110px;\r\n    top: -110px;\r\n    width: 220px;\r\n    height: 220px;\r\n    border-radius: 50%;\r\n    border: 1px dashed rgba(159,230,245,.35);\r\n    opacity: 0;\r\n  }\r\n\r\n  \/* Fixed logo (match-cut element) *\/\r\n  #intro-logo {\r\n    position: fixed;\r\n    left: 50%;\r\n    top: 42%;\r\n    width: 96px;\r\n    height: 96px;\r\n    margin: -48px 0 0 -48px;\r\n    border-radius: 28px;\r\n    overflow: hidden;\r\n    opacity: 0;\r\n    z-index: 1002;\r\n    pointer-events: none;\r\n    border: 1px solid rgba(95,211,234,.55);\r\n    box-shadow: 0 0 70px -8px #5fd3ea, 0 0 0 6px rgba(95,211,234,.06);\r\n    background: #0b1424;\r\n    transform-origin: 50% 50%;\r\n  }\r\n  #intro-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }\r\n\r\n  \/* Final phrase block *\/\r\n  #intro-fin {\r\n    position: absolute;\r\n    left: 0;\r\n    right: 0;\r\n    top: calc(42% + 88px);\r\n    text-align: center;\r\n    padding: 0 20px;\r\n    pointer-events: none;\r\n    opacity: 0;\r\n  }\r\n  #intro-fin .big {\r\n    margin: 0;\r\n    font-size: clamp(1.7rem, 4vw, 3.1rem);\r\n    font-weight: 600;\r\n    letter-spacing: -0.045em;\r\n    line-height: 1.05;\r\n  }\r\n  #intro-fin .big span {\r\n    background: linear-gradient(100deg, #dff6ff 10%, #5fd3ea 45%, #8c84ff 90%);\r\n    -webkit-background-clip: text;\r\n    background-clip: text;\r\n    color: transparent;\r\n  }\r\n  #intro-fin .sub {\r\n    margin: 14px 0 0;\r\n    font-family: 'JetBrains Mono', monospace;\r\n    font-size: 10.5px;\r\n    letter-spacing: 0.26em;\r\n    color: #9fb3c4;\r\n  }\r\n\r\n  \/* Bottom progress bar *\/\r\n  #intro-bar {\r\n    position: absolute;\r\n    left: 0;\r\n    bottom: 0;\r\n    height: 1px;\r\n    width: 100%;\r\n    transform-origin: left;\r\n    transform: scaleX(0);\r\n    background: linear-gradient(90deg, #5fd3ea, #8c84ff);\r\n    box-shadow: 0 0 10px #5fd3ea;\r\n  }\r\n\r\n  \/* Skip button *\/\r\n  #intro-skip {\r\n    position: absolute;\r\n    right: clamp(16px, 4vw, 44px);\r\n    bottom: clamp(18px, 4vw, 36px);\r\n    min-height: 44px;\r\n    padding: 0 18px;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    border-radius: 999px;\r\n    border: 1px solid rgba(159,179,196,.28);\r\n    background: rgba(5,9,19,.5);\r\n    color: #eef6fb;\r\n    font-family: 'JetBrains Mono', monospace;\r\n    font-size: 10.5px;\r\n    letter-spacing: 0.18em;\r\n    cursor: pointer;\r\n    outline-offset: 3px;\r\n  }\r\n  #intro-skip span { opacity: .6; }\r\n  #intro-skip:focus-visible { outline: 2px solid #5fd3ea; }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- Intro overlay -->\r\n<div id=\"intro-overlay\" role=\"dialog\" aria-label=\"AQAV intro\">\r\n  <div id=\"intro-bg\"><\/div>\r\n\r\n  <!-- \u2b07\u2b07\u2b07  THE CANVAS YOU REFERENCED  \u2b07\u2b07\u2b07 -->\r\n  <canvas id=\"intro-canvas\" aria-hidden=\"true\"><\/canvas>\r\n\r\n  <div id=\"intro-vig\" aria-hidden=\"true\"><\/div>\r\n  <div id=\"intro-deck\" aria-hidden=\"true\"><\/div>\r\n\r\n  <div id=\"intro-tag\" aria-hidden=\"true\">\r\n    <span style=\"display:flex;align-items:center;gap:10px;\">\r\n      <span class=\"dot\"><\/span>\r\n      <span class=\"cy\">AQAV<\/span>\r\n      <span>SIMULATION<\/span>\r\n    <\/span>\r\n    <span>\r\n      COPIES IN CIRCULATION\r\n      <span id=\"intro-count\" style=\"color:#eef6fb;\">00<\/span>\r\n    <\/span>\r\n  <\/div>\r\n\r\n  <div id=\"intro-head\" aria-hidden=\"true\">\r\n    <h1 id=\"intro-h1\">Today, your personal data is everywhere.<\/h1>\r\n    <p id=\"intro-h1b\">Copied, scanned, stored \u2014 by people you never see.<\/p>\r\n  <\/div>\r\n\r\n  <div id=\"intro-core\" aria-hidden=\"true\">\r\n    <div class=\"r1\"><\/div>\r\n    <div class=\"r2\"><\/div>\r\n    <div class=\"r3\"><\/div>\r\n  <\/div>\r\n\r\n  <div id=\"intro-fin\" aria-hidden=\"true\">\r\n    <p class=\"big\"><span>From now on, you decide.<\/span><\/p>\r\n    <p class=\"sub\">NO COPIES \u00b7 EVERY REQUEST APPROVED BY YOU<\/p>\r\n  <\/div>\r\n\r\n  <div id=\"intro-bar\" aria-hidden=\"true\"><\/div>\r\n\r\n  <button id=\"intro-skip\" type=\"button\">\r\n    Skip <span aria-hidden=\"true\">ESC<\/span>\r\n  <\/button>\r\n<\/div>\r\n\r\n<!-- The fixed logo used for the match-cut -->\r\n<div id=\"intro-logo\" aria-hidden=\"true\">\r\n  <img id=\"intro-logo-img\" alt=\"\">\r\n<\/div>\r\n\r\n<script>\r\n\/* ============================================================\r\n   AQAV Intro Canvas \u2014 full implementation\r\n   Recreates the city skyline + orbiting document cards + timeline\r\n   ============================================================ *\/\r\n(function () {\r\n  'use strict';\r\n\r\n  \/* ---------- config ---------- *\/\r\n  var TOTAL = 6200;          \/\/ total intro duration in ms\r\n  var REDUCED = window.matchMedia\r\n    ? window.matchMedia('(prefers-reduced-motion: reduce)').matches\r\n    : false;\r\n\r\n  var CY = '#5fd3ea';\r\n  var IN = '#8c84ff';\r\n  var INK = '#eef6fb';\r\n  var MUTE = '#9fb3c4';\r\n\r\n  \/* ---------- element refs ---------- *\/\r\n  var ov     = document.getElementById('intro-overlay');\r\n  var cv     = document.getElementById('intro-canvas');\r\n  var deck   = document.getElementById('intro-deck');\r\n  var tagEl  = document.getElementById('intro-tag');\r\n  var countEl= document.getElementById('intro-count');\r\n  var head   = document.getElementById('intro-head');\r\n  var h1El   = document.getElementById('intro-h1');\r\n  var h1bEl  = document.getElementById('intro-h1b');\r\n  var core   = document.getElementById('intro-core');\r\n  var r1El   = core.querySelector('.r1');\r\n  var r2El   = core.querySelector('.r2');\r\n  var r3El   = core.querySelector('.r3');\r\n  var logo   = document.getElementById('intro-logo');\r\n  var logoImg= document.getElementById('intro-logo-img');\r\n  var fin    = document.getElementById('intro-fin');\r\n  var bar    = document.getElementById('intro-bar');\r\n  var skip   = document.getElementById('intro-skip');\r\n\r\n  \/* Use the page favicon as the logo image (matches runtime behaviour) *\/\r\n  var fav = document.querySelector('link[rel=\"icon\"]');\r\n  if (fav && fav.href) logoImg.src = fav.href;\r\n\r\n  \/* ---------- canvas state ---------- *\/\r\n  var ctx = cv.getContext('2d');\r\n  var dpr = Math.min(2, window.devicePixelRatio || 1);\r\n\r\n  var W = 0, H = 0, hz = 0, cx = 0;\r\n  var layers = [];   \/\/ 3 depth layers of buildings\r\n  var launch = [];   \/\/ window lights used as card launch points\r\n  var cards  = [];   \/\/ document cards\r\n\r\n  \/* ---------- build the city ---------- *\/\r\n  function build() {\r\n    W  = window.innerWidth;\r\n    H  = window.innerHeight;\r\n    hz = Math.round(H * 0.66);   \/\/ horizon line\r\n    cx = W \/ 2;\r\n\r\n    cv.width  = Math.round(W * dpr);\r\n    cv.height = Math.round(H * dpr);\r\n    \/* NOTE: inline width\/height attributes get set here, matching the\r\n       \"width=1920 height=603\" you saw \u2014 they depend on viewport & dpr. *\/\r\n\r\n    var mob = W < 700;\r\n\r\n    var defs = [\r\n      { top:'#0b1628', bot:'#08111f', a:0.38, fw:mob?2:3, fh:2,\r\n        gx:mob?4:5, gy:5, wMin:22, wMax:60, hMin:0.16, hMax:0.42,\r\n        dens:0.5, lag:0 },\r\n      { top:'#09131f', bot:'#060d18', a:0.68, fw:mob?3:4, fh:2,\r\n        gx:mob?5:7, gy:7, wMin:34, wMax:86, hMin:0.14, hMax:0.5,\r\n        dens:0.42, lag:100 },\r\n      { top:'#060b15', bot:'#04080f', a:1,    fw:mob?4:6, fh:3,\r\n        gx:mob?7:10, gy:10, wMin:54, wMax:130, hMin:0.08, hMax:0.3,\r\n        dens:0.34, lag:200 }\r\n    ];\r\n\r\n    layers = defs.map(function (d, li) {\r\n      var bs = [];\r\n      var x = -30;\r\n      while (x < W + 30) {\r\n        var w = d.wMin + Math.random() * (d.wMax - d.wMin);\r\n        \/* centre buildings taller *\/\r\n        var cen = 1 - Math.min(1, Math.abs(x + w\/2 - cx) \/ (W\/2));\r\n        var h = H * (d.hMin + Math.random() * (d.hMax - d.hMin))\r\n                    * (0.7 + cen * 0.65);\r\n\r\n        \/* window lights *\/\r\n        var wins = [];\r\n        for (var yy = hz - h + d.gy * 1.5; yy < hz - d.gy; yy += d.gy) {\r\n          for (var xx = x + d.gx * 0.8; xx < x + w - d.gx; xx += d.gx) {\r\n            if (Math.random() < d.dens) {\r\n              var dist = Math.abs(xx - cx) \/ (W \/ 2);\r\n              wins.push({\r\n                x: xx, y: yy,\r\n                w: d.fw, h: d.fh,\r\n                \/* lit window timeline *\/\r\n                on:  260 + ((xx + 30) \/ (W + 60)) * 1500 + Math.random() * 380 + d.lag,\r\n                off: 3450 + (1 - dist) * 120 + dist * 650 + Math.random() * 260,\r\n                keep: Math.random() < 0.05,\r\n                c: Math.random() < 0.12 ? '#fff1d6'\r\n                   : (Math.random() < 0.5 ? '#bff3ff' : CY),\r\n                b: 0.35 + Math.random() * 0.65,\r\n                f: Math.random() < 0.05,     \/\/ flicker\r\n                p: Math.random() * 6          \/\/ phase\r\n              });\r\n            }\r\n          }\r\n        }\r\n\r\n        \/* per-building gradient *\/\r\n        var gg = ctx.createLinearGradient(0, hz - h, 0, hz);\r\n        gg.addColorStop(0, d.top);\r\n        gg.addColorStop(1, d.bot);\r\n\r\n        bs.push({\r\n          x: x, w: w, h: h, wins: wins, g: gg,\r\n          spire: li > 0 && h > H * 0.3 && Math.random() < 0.5\r\n        });\r\n\r\n        x += w + (Math.random() < 0.35 ? 3 + Math.random() * 14 : 1);\r\n      }\r\n      return Object.assign({}, d, { bs: bs });\r\n    });\r\n\r\n    \/* pick which windows will launch cards (early-lit, upper-ish) *\/\r\n    launch = [];\r\n    layers.slice(1).forEach(function (L) {\r\n      L.bs.forEach(function (b) {\r\n        b.wins.forEach(function (w) {\r\n          if (w.on < 1700 && w.y < hz - 30) launch.push(w);\r\n        });\r\n      });\r\n    });\r\n  }\r\n\r\n  \/* ---------- draw the city for a given time ---------- *\/\r\n  function drawCity(t) {\r\n    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\r\n\r\n    \/* sky *\/\r\n    var sky = ctx.createLinearGradient(0, 0, 0, hz);\r\n    sky.addColorStop(0,   '#04070f');\r\n    sky.addColorStop(0.7, '#081325');\r\n    sky.addColorStop(1,   '#0d1d36');\r\n    ctx.globalAlpha = 1;\r\n    ctx.fillStyle = sky;\r\n    ctx.fillRect(0, 0, W, hz + 1);\r\n\r\n    \/* how \"lit\" the scene is (rises, then fades during recall) *\/\r\n    var lit = Math.min(1, Math.max(0, (t - 200) \/ 1800)) *\r\n              (1 - Math.min(1, Math.max(0, (t - 3500) \/ 900)) * 0.75);\r\n\r\n    \/* warm horizon glow *\/\r\n    var hg = ctx.createRadialGradient(cx, hz, 0, cx, hz, Math.max(W, H) * 0.65);\r\n    hg.addColorStop(0,   'rgba(95,211,234,' + (0.26 * lit).toFixed(3) + ')');\r\n    hg.addColorStop(0.5, 'rgba(140,132,255,' + (0.08 * lit).toFixed(3) + ')');\r\n    hg.addColorStop(1,   'rgba(0,0,0,0)');\r\n    ctx.fillStyle = hg;\r\n    ctx.fillRect(0, 0, W, hz + 1);\r\n\r\n    \/* scanning light sweeping across the city *\/\r\n    var sx = ((t - 260) \/ 1500) * (W + 60) - 30;\r\n\r\n    \/* draw each depth layer *\/\r\n    layers.forEach(function (L, li) {\r\n      L.bs.forEach(function (b) {\r\n        \/* building body *\/\r\n        ctx.globalAlpha = 1;\r\n        ctx.fillStyle = b.g;\r\n        ctx.fillRect(b.x, hz - b.h, b.w, b.h);\r\n\r\n        \/* spire *\/\r\n        if (b.spire) {\r\n          ctx.fillRect(b.x + b.w \/ 2 - 0.75, hz - b.h - 22, 1.5, 22);\r\n        }\r\n\r\n        \/* rim highlight as the scan passes *\/\r\n        if (sx > b.x) {\r\n          var rim = Math.min(1, (sx - b.x) \/ 160) * lit;\r\n          ctx.globalAlpha = L.a * 0.5 * rim;\r\n          ctx.fillStyle = '#bff3ff';\r\n          ctx.fillRect(b.x, hz - b.h, b.w, 1);\r\n          if (b.spire && Math.sin(t * 0.005 + b.x) > 0.2) {\r\n            ctx.globalAlpha = L.a * 0.9;\r\n            ctx.fillStyle = '#ff7d8a';\r\n            ctx.fillRect(b.x + b.w \/ 2 - 1.25, hz - b.h - 24, 2.5, 2.5);\r\n          }\r\n        }\r\n\r\n        \/* window lights *\/\r\n        for (var i = 0; i < b.wins.length; i++) {\r\n          var w = b.wins[i];\r\n          if (t < w.on) continue;\r\n\r\n          var a = Math.min(1, (t - w.on) \/ 260);\r\n          if (t - w.on < 80) a = 1.6;                       \/\/ pop\r\n          if (!w.keep && t > w.off) {\r\n            a *= Math.max(0, 1 - (t - w.off) \/ 160);         \/\/ fade out\r\n          }\r\n          if (a <= 0) continue;\r\n          if (w.f && Math.sin(t * 0.018 + w.p) > 0.86) a *= 0.3;\r\n\r\n          ctx.globalAlpha = Math.min(1, a * L.a * w.b);\r\n          ctx.fillStyle = w.c;\r\n          ctx.fillRect(w.x, w.y, w.w, w.h);\r\n        }\r\n      });\r\n\r\n      \/* haze between layers *\/\r\n      if (li < 2) {\r\n        var hz2 = ctx.createLinearGradient(0, hz - H * 0.35, 0, hz);\r\n        hz2.addColorStop(0, 'rgba(8,17,32,0)');\r\n        hz2.addColorStop(1, 'rgba(13,29,54,' + (0.32 - li * 0.1) + ')');\r\n        ctx.globalAlpha = 1;\r\n        ctx.fillStyle = hz2;\r\n        ctx.fillRect(0, hz - H * 0.35, W, H * 0.35);\r\n      }\r\n    });\r\n\r\n    \/* scanning beam *\/\r\n    if (sx > -40 && sx < W + 40) {\r\n      var sl = ctx.createLinearGradient(sx - 90, 0, sx, 0);\r\n      sl.addColorStop(0, 'rgba(95,211,234,0)');\r\n      sl.addColorStop(1, 'rgba(95,211,234,0.16)');\r\n      ctx.globalAlpha = 1;\r\n      ctx.fillStyle = sl;\r\n      ctx.fillRect(sx - 90, hz - H * 0.55, 90, H * 0.55);\r\n\r\n      ctx.fillStyle = 'rgba(220,250,255,0.85)';\r\n      ctx.fillRect(sx, hz - H * 0.55, 1, H * 0.55);\r\n    }\r\n\r\n    \/* water \/ ground below horizon *\/\r\n    ctx.globalAlpha = 1;\r\n    ctx.fillStyle = '#03060d';\r\n    ctx.fillRect(0, hz, W, H - hz);\r\n\r\n    var depth = Math.min(H - hz, hz * 0.55);\r\n\r\n    \/* reflection of nearest layer *\/\r\n    var L2 = layers[2];\r\n    ctx.globalAlpha = 0.5;\r\n    ctx.fillStyle = '#07101e';\r\n    L2.bs.forEach(function (b) {\r\n      ctx.fillRect(b.x, hz + 1, b.w, Math.min(depth, b.h * 0.8));\r\n    });\r\n\r\n    \/* shimmering window reflections *\/\r\n    layers.forEach(function (L) {\r\n      L.bs.forEach(function (b) {\r\n        for (var i = 0; i < b.wins.length; i += 2) {\r\n          var w = b.wins[i];\r\n          if (t < w.on || (!w.keep && t > w.off + 160)) continue;\r\n          var ry = 2 * hz - w.y - w.h;\r\n          var k  = (ry - hz) \/ depth;\r\n          if (k > 1) continue;\r\n          var off = Math.sin(t * 0.004 + ry * 0.3) * (1 + k * 6);\r\n          ctx.globalAlpha = 0.32 * L.a * w.b * (1 - k) * (1 - k);\r\n          ctx.fillStyle = w.c;\r\n          ctx.fillRect(w.x + off, ry, w.w * (1 + k), Math.max(1, w.h * 0.7));\r\n        }\r\n      });\r\n    });\r\n\r\n    \/* glowing horizon line *\/\r\n    ctx.globalAlpha = 0.55 * lit;\r\n    ctx.fillStyle = CY;\r\n    ctx.fillRect(0, hz, W, 1);\r\n\r\n    \/* ground shock ring when copies return *\/\r\n    if (t > 4150 && t < 5600) {\r\n      var p  = (t - 4150) \/ 1450;\r\n      var rr = p * W * 0.7;\r\n      ctx.globalAlpha = 0.6 * (1 - p);\r\n      ctx.strokeStyle = CY;\r\n      ctx.lineWidth = 1.2;\r\n      ctx.beginPath();\r\n      ctx.ellipse(cx, hz + 6, rr, rr * 0.08, 0, 0, Math.PI * 2);\r\n      ctx.stroke();\r\n    }\r\n    ctx.globalAlpha = 1;\r\n  }\r\n\r\n  \/* ---------- document cards ---------- *\/\r\n  var TYPES = [\r\n    ['IDENTITY CARD', 'CH', 'S\u00b7\u00b7\u00b7 \u00b7\u00b7\u00b7 4172'],\r\n    ['PASSPORT',      'CH', 'X\u00b7\u00b7\u00b7 \u00b7\u00b7\u00b7 0931'],\r\n    ['DRIVING LICENCE','GE','GE \u00b7\u00b7\u00b7 \u00b7\u00b7\u00b7 58'],\r\n    ['DIPLOMA',       'HES','SIGNED \u00b7 2024']\r\n  ];\r\n\r\n  function buildCards() {\r\n    deck.innerHTML = '';\r\n    cards = [];\r\n    var N = W < 700 ? 9 : 14;\r\n\r\n    for (var i = 0; i < N; i++) {\r\n      var ty = TYPES[i % TYPES.length];\r\n      var el = document.createElement('div');\r\n      el.className = 'intro-card';\r\n      el.innerHTML =\r\n        '<div style=\"display:flex;justify-content:space-between;font-size:7.5px;letter-spacing:.18em;color:#a8ecf8;\">' +\r\n          '<span>' + ty[0] + '<\/span><span>' + ty[1] + '<\/span>' +\r\n        '<\/div>' +\r\n        '<div style=\"display:flex;gap:10px;margin-top:10px;align-items:center;\">' +\r\n          '<span style=\"width:26px;height:30px;border-radius:5px;background:linear-gradient(160deg,rgba(207,233,242,.55),rgba(127,182,204,.25));\"><\/span>' +\r\n          '<span style=\"display:flex;flex-direction:column;gap:5px;\">' +\r\n            '<span style=\"width:62px;height:3px;border-radius:2px;background:rgba(230,248,255,.65);\"><\/span>' +\r\n            '<span style=\"width:44px;height:3px;border-radius:2px;background:rgba(230,248,255,.35);\"><\/span>' +\r\n            '<span style=\"width:52px;height:3px;border-radius:2px;background:rgba(230,248,255,.25);\"><\/span>' +\r\n          '<\/span>' +\r\n        '<\/div>' +\r\n        '<div style=\"margin-top:10px;font-size:9px;letter-spacing:.12em;color:#d4e8f2;\">' + ty[2] + '<\/div>' +\r\n        '<span data-sheen style=\"position:absolute;top:-40%;bottom:-40%;width:40%;left:-60%;' +\r\n          'background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);' +\r\n          'transform:skewX(-18deg);\"><\/span>';\r\n\r\n      deck.appendChild(el);\r\n      cards.push({\r\n        el: el,\r\n        sheen: el.querySelector('[data-sheen]'),\r\n        src: null,\r\n        t0: 1350 + i * (1050 \/ N) + Math.random() * 60\r\n      });\r\n    }\r\n\r\n    \/* assign each card a launch point (a lit window) *\/\r\n    cards.forEach(function (c) {\r\n      c.src = launch.length\r\n        ? launch[(Math.random() * launch.length) | 0]\r\n        : { x: Math.random() * W, y: hz - 80 };\r\n    });\r\n  }\r\n\r\n  \/* easing helpers *\/\r\n  function ease(x) { return 1 - Math.pow(1 - x, 3); }\r\n  function eio(x) {\r\n    return x < 0.5\r\n      ? 4 * x * x * x\r\n      : 1 - Math.pow(-2 * x + 2, 3) \/ 2;\r\n  }\r\n\r\n  function drawCards(t) {\r\n    var R   = Math.min(W * 0.4, 470);\r\n    var oy  = H * 0.42;\r\n    var spin = t * 0.00042;\r\n\r\n    \/* recall factor: 0 = in orbit, 1 = fully recalled *\/\r\n    var recall = Math.max(0, Math.min(1, (t - 3450) \/ 750));\r\n    var rc = eio(recall);\r\n    var visible = 0;\r\n\r\n    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\r\n\r\n    cards.forEach(function (c, i) {\r\n      if (t < c.t0) { c.el.style.opacity = '0'; return; }\r\n\r\n      var th = spin + (i \/ cards.length) * Math.PI * 2;\r\n      var d  = (Math.cos(th) + 1) \/ 2;\r\n\r\n      var ox  = cx + Math.sin(th) * R * (1 - rc);\r\n      var oyy = oy + Math.cos(th) * R * 0.2 * (1 - rc);\r\n\r\n      var sc = (0.55 + d * 0.5) * (1 - rc * 0.55);\r\n      var op = (0.35 + d * 0.65);\r\n      var ry = -Math.sin(th) * 38 * (1 - rc);\r\n\r\n      \/* fly-in from launch point *\/\r\n      var fl = Math.min(1, (t - c.t0) \/ 720);\r\n      var e  = ease(fl);\r\n      var x  = c.src.x + (ox - c.src.x) * e;\r\n      var y  = c.src.y + (oyy - c.src.y) * e;\r\n      sc = 0.12 + (sc - 0.12) * e;\r\n      op *= Math.min(1, fl * 2.5) * (1 - Math.max(0, (recall - 0.7) \/ 0.3));\r\n\r\n      if (op > 0.05 && recall < 1) visible++;\r\n\r\n      c.el.style.transform =\r\n        'translate3d(' + x.toFixed(1) + 'px,' + y.toFixed(1) + 'px,0) ' +\r\n        'perspective(700px) rotateY(' + ry.toFixed(1) + 'deg) ' +\r\n        'scale(' + sc.toFixed(3) + ')';\r\n      c.el.style.opacity = op.toFixed(3);\r\n      c.el.style.zIndex  = String(Math.round(d * 100));\r\n\r\n      \/* sheen sweep *\/\r\n      c.sheen.style.left = (-60 + ((t * 0.05 + i * 23) % 220)) + '%';\r\n\r\n      \/* launch beam *\/\r\n      if (fl < 0.75) {\r\n        var bg2 = ctx.createLinearGradient(c.src.x, c.src.y, x, y);\r\n        bg2.addColorStop(0, 'rgba(95,211,234,0)');\r\n        bg2.addColorStop(1, 'rgba(191,243,255,' + (0.8 * (1 - fl \/ 0.75)).toFixed(3) + ')');\r\n        ctx.globalAlpha = 1;\r\n        ctx.strokeStyle = bg2;\r\n        ctx.lineWidth = 1;\r\n        ctx.beginPath();\r\n        ctx.moveTo(c.src.x, c.src.y);\r\n        ctx.lineTo(x, y);\r\n        ctx.stroke();\r\n\r\n        ctx.globalAlpha = 0.9 * (1 - fl);\r\n        ctx.strokeStyle = CY;\r\n        ctx.lineWidth = 1;\r\n        ctx.beginPath();\r\n        ctx.arc(c.src.x + 2, c.src.y + 1, 2 + fl * 16, 0, Math.PI * 2);\r\n        ctx.stroke();\r\n\r\n        ctx.globalAlpha = 1 - fl;\r\n        ctx.fillStyle = '#ffffff';\r\n        ctx.fillRect(c.src.x, c.src.y - 1, 4, 3);\r\n      }\r\n\r\n      \/* recall beams back to the core *\/\r\n      if (recall > 0 && recall < 1) {\r\n        ctx.globalAlpha = 0.5 * (1 - recall);\r\n        ctx.strokeStyle = CY;\r\n        ctx.lineWidth = 1;\r\n        ctx.beginPath();\r\n        ctx.moveTo(x, y);\r\n        ctx.lineTo(cx, oy);\r\n        ctx.stroke();\r\n      }\r\n    });\r\n\r\n    ctx.globalAlpha = 1;\r\n    countEl.textContent = String(visible).padStart(2, '0');\r\n    countEl.style.color = recall > 0.9 ? CY : INK;\r\n  }\r\n\r\n  \/* ---------- animation timeline ---------- *\/\r\n  var anims = [];\r\n  function at(el, kf, opt) {\r\n    var a = el.animate(kf, Object.assign({\r\n      fill: 'both',\r\n      easing: 'cubic-bezier(.22,1,.36,1)'\r\n    }, opt));\r\n    anims.push(a);\r\n    return a;\r\n  }\r\n\r\n  var raf = 0;\r\n  var done = false;\r\n  var t0 = performance.now();\r\n\r\n  function loop(now) {\r\n    if (done) return;\r\n    var t = now - t0;\r\n    drawCity(t);\r\n    drawCards(t);\r\n    cv.style.transform = 'scale(' + (1 + Math.min(1, t \/ TOTAL) * 0.06).toFixed(4) + ')';\r\n    bar.style.transform = 'scaleX(' + Math.min(1, t \/ TOTAL).toFixed(4) + ')';\r\n    raf = requestAnimationFrame(loop);\r\n  }\r\n\r\n  function buildTimeline() {\r\n    \/* headline *\/\r\n    at(h1El, [\r\n      { opacity: 0, transform: 'translateY(16px)', filter: 'blur(8px)' },\r\n      { opacity: 1, transform: 'none',            filter: 'blur(0)' }\r\n    ], { duration: 800, delay: 450 });\r\n\r\n    at(h1bEl, [\r\n      { opacity: 0, transform: 'translateY(10px)' },\r\n      { opacity: 1, transform: 'none' }\r\n    ], { duration: 700, delay: 800 });\r\n\r\n    at(head, [\r\n      { opacity: 1 },\r\n      { opacity: 0, transform: 'translateY(-12px)', filter: 'blur(6px)' }\r\n    ], { duration: 500, delay: 3350, fill: 'forwards' });\r\n\r\n    \/* core rings *\/\r\n    at(r1El, [\r\n      { opacity: 0, transform: 'scale(.2)' },\r\n      { opacity: 1, transform: 'scale(1)',   offset: 0.25 },\r\n      { opacity: 0, transform: 'scale(3.6)' }\r\n    ], { duration: 1300, delay: 4150, easing: 'cubic-bezier(.2,.7,.2,1)' });\r\n\r\n    at(r2El, [\r\n      { opacity: 0,  transform: 'scale(.4)' },\r\n      { opacity: .8, transform: 'scale(1)', offset: 0.3 },\r\n      { opacity: 0,  transform: 'scale(2.6)' }\r\n    ], { duration: 1400, delay: 4300, easing: 'cubic-bezier(.2,.7,.2,1)' });\r\n\r\n    at(r3El, [\r\n      { opacity: 0, transform: 'scale(.8) rotate(0deg)' },\r\n      { opacity: 1, transform: 'scale(1) rotate(90deg)', offset: 0.4 },\r\n      { opacity: 0, transform: 'scale(1.1) rotate(160deg)' }\r\n    ], { duration: 1500, delay: 4200, easing: 'linear' });\r\n\r\n    \/* logo *\/\r\n    at(logo, [\r\n      { opacity: 0, transform: 'scale(.4) rotate(-14deg)', filter: 'blur(10px)' },\r\n      { opacity: 1, transform: 'scale(1.08) rotate(0)',    filter: 'blur(0)', offset: 0.6 },\r\n      { opacity: 1, transform: 'scale(1)' }\r\n    ], { duration: 750, delay: 4150 });\r\n\r\n    \/* final phrase *\/\r\n    at(fin, [\r\n      { opacity: 0, transform: 'translateY(18px)', filter: 'blur(8px)' },\r\n      { opacity: 1, transform: 'none',             filter: 'blur(0)' }\r\n    ], { duration: 750, delay: 4400 });\r\n  }\r\n\r\n  \/* ---------- teardown ---------- *\/\r\n  function clean() {\r\n    cancelAnimationFrame(raf);\r\n    anims.forEach(function (a) { try { a.cancel(); } catch (e) {} });\r\n    window.removeEventListener('resize', onResize);\r\n    window.removeEventListener('keydown', onKey);\r\n    if (ov.parentNode) ov.parentNode.removeChild(ov);\r\n    if (logo.parentNode) logo.parentNode.removeChild(logo);\r\n    document.documentElement.style.overflow = prevOverflow;\r\n  }\r\n\r\n  var prevOverflow = '';\r\n\r\n  function finish(fast) {\r\n    if (done) return;\r\n    done = true;\r\n    window.removeEventListener('keydown', onKey);\r\n\r\n    var dur = fast ? 380 : 900;\r\n\r\n    \/* fade the whole overlay *\/\r\n    ov.animate(\r\n      [{ opacity: 1 }, { opacity: 0 }],\r\n      { duration: dur, easing: 'cubic-bezier(.65,0,.35,1)', fill: 'forwards' }\r\n    );\r\n\r\n    \/* match-cut: fly the fixed logo onto the phone lock-screen icon *\/\r\n    var imgs = Array.prototype.slice.call(document.querySelectorAll('img'))\r\n      .filter(function (im) {\r\n        return !ov.contains(im) && !logo.contains(im) && !im.closest('header');\r\n      });\r\n    var target = imgs[0];\r\n    var lr = logo.getBoundingClientRect();\r\n\r\n    if (target && !fast && lr.width) {\r\n      var tr = target.getBoundingClientRect();\r\n      var dx = (tr.left + tr.width \/ 2) - (lr.left + lr.width \/ 2);\r\n      var dy = (tr.top + tr.height \/ 2) - (lr.top + lr.height \/ 2);\r\n      var k  = tr.width \/ lr.width;\r\n\r\n      var m = logo.animate([\r\n        { transform: 'translate(0,0) scale(1)',      opacity: 1, borderRadius: '28px' },\r\n        { transform: 'translate(' + dx + 'px,' + dy + 'px) scale(' + k + ')',\r\n          opacity: 1, borderRadius: (20 \/ k) + 'px', offset: 0.85 },\r\n        { transform: 'translate(' + dx + 'px,' + dy + 'px) scale(' + k + ')',\r\n          opacity: 0, borderRadius: (20 \/ k) + 'px' }\r\n      ], { duration: 1050, easing: 'cubic-bezier(.65,0,.25,1)', fill: 'forwards' });\r\n\r\n      m.onfinish = clean;\r\n    } else {\r\n      logo.animate(\r\n        [{ opacity: getComputedStyle(logo).opacity }, { opacity: 0 }],\r\n        { duration: dur, fill: 'forwards' }\r\n      ).onfinish = clean;\r\n    }\r\n  }\r\n\r\n  function onKey(e) {\r\n    if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {\r\n      e.preventDefault();\r\n      finish(true);\r\n    }\r\n  }\r\n\r\n  function onResize() {\r\n    build();\r\n    \/* reassign launch points to existing cards *\/\r\n    cards.forEach(function (c) {\r\n      c.src = launch.length\r\n        ? launch[(Math.random() * launch.length) | 0]\r\n        : { x: Math.random() * W, y: hz - 80 };\r\n    });\r\n  }\r\n\r\n  \/* ---------- boot ---------- *\/\r\n  function boot() {\r\n    if (REDUCED) {\r\n      \/* Just a still frame + immediate fade-out for reduced-motion users *\/\r\n      build();\r\n      drawCity(1500);\r\n      drawCards(1500);\r\n      setTimeout(function () { finish(true); }, 400);\r\n      return;\r\n    }\r\n\r\n    prevOverflow = document.documentElement.style.overflow;\r\n    document.documentElement.style.overflow = 'hidden';\r\n    window.scrollTo(0, 0);\r\n\r\n    build();\r\n    buildCards();\r\n    buildTimeline();\r\n\r\n    window.addEventListener('resize', onResize);\r\n    window.addEventListener('keydown', onKey);\r\n    skip.addEventListener('click', function () { finish(true); });\r\n\r\n    raf = requestAnimationFrame(loop);\r\n\r\n    \/* hard timeout \u2014 auto-finish shortly after the timeline ends *\/\r\n    setTimeout(function () { finish(false); }, 5350);\r\n  }\r\n\r\n  \/* Ensure fonts \/ favicon are available before booting *\/\r\n  if (document.readyState === 'complete' ||\r\n      document.readyState === 'interactive') {\r\n    setTimeout(boot, 0);\r\n  } else {\r\n    document.addEventListener('DOMContentLoaded', boot);\r\n  }\r\n})();\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>9:41 5G \u25ae\u25ae\u25ae Enter your passcode 2841 real \u00b7 9110 duress \u25cb\u25cb\u25cb\u25cb 1 2 3 4 5 6 7 8 9 C 0 \u232b Use Face ID instead SIMULATION \u00b7 INDIVIDUALS Try the app. Everything runs in this page. Nothing is sent. 01 Unlock Code 2841 or Face ID. 02 Receive a request A business [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-476","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/aqavsecure.io\/fr\/wp-json\/wp\/v2\/pages\/476","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aqavsecure.io\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aqavsecure.io\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aqavsecure.io\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aqavsecure.io\/fr\/wp-json\/wp\/v2\/comments?post=476"}],"version-history":[{"count":25,"href":"https:\/\/aqavsecure.io\/fr\/wp-json\/wp\/v2\/pages\/476\/revisions"}],"predecessor-version":[{"id":713,"href":"https:\/\/aqavsecure.io\/fr\/wp-json\/wp\/v2\/pages\/476\/revisions\/713"}],"wp:attachment":[{"href":"https:\/\/aqavsecure.io\/fr\/wp-json\/wp\/v2\/media?parent=476"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}