/* Identity Protect illustrations (templates/site/identity_protected_art.html).
   Every piece is laid out in px at its original 1x size inside .ipa__s and scaled to the column by
   identity-art.js (--s). Motion: entrance runs once when a piece scrolls in (.is-in), loops run only
   while it is on screen (.is-on). Only transform / opacity animate. Reduced motion = the static art. */

.ipa {
    --s: 1;
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: calc(var(--w) * 1px);
    max-width: 100%;
    aspect-ratio: var(--w) / var(--h);
    font-size: 0;
    text-align: left;
    line-height: 1.2;
    color: #fff;
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
}
.ipa__s {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(var(--w) * 1px);
    height: calc(var(--h) * 1px);
    transform: scale(var(--s));
    transform-origin: 0 0;
}
.ipa__s > *, .ipa__s * { box-sizing: border-box; }
.ipa svg { display: block; overflow: visible; }
/* A piece's min-content width is its full 1x width, where the <img> it replaced could shrink to nothing (max-width:100%).
   The hero's right column is a shrink-to-fit flex item, so let it shrink as before; otherwise the text column takes all
   the squeeze between ~1200 and 1025 px and the hero grows taller. */
.ftbk_col_right { min-width: 0; }
.ipa i { display: block; }

/* ---------- motion kit ---------- */
@keyframes ipa-rise { from { opacity: 0; translate: 0 18px; } }
@keyframes ipa-fade { from { opacity: 0; } }
@keyframes ipa-pop { from { opacity: 0; scale: .86; } }
@keyframes ipa-grow { from { scale: 0 1; } }
@keyframes ipa-slide { from { opacity: 0; translate: -16px 0; } }
@keyframes ipa-float { 50% { transform: translateY(-6px); } }
@keyframes ipa-float-s { 50% { transform: translateY(-3px); } }
@keyframes ipa-spin { to { transform: rotate(360deg); } }
@keyframes ipa-breathe { 50% { transform: scale(1.06); } }
@keyframes ipa-ping { from { transform: scale(.7); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }
@keyframes ipa-blink { 50% { opacity: .35; } }

.ipa.is-armed:not(.is-in) .a-rise,
.ipa.is-armed:not(.is-in) .a-fade,
.ipa.is-armed:not(.is-in) .a-pop,
.ipa.is-armed:not(.is-in) .a-slide { opacity: 0; }
.ipa.is-armed:not(.is-in) .a-grow { scale: 0 1; }
.ipa.is-in .a-rise { animation: ipa-rise .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) backwards; }
.ipa.is-in .a-fade { animation: ipa-fade .9s ease var(--d, 0s) backwards; }
.ipa.is-in .a-pop { animation: ipa-pop .8s cubic-bezier(.2, .8, .2, 1.1) var(--d, 0s) backwards; }
.ipa.is-in .a-slide { animation: ipa-slide .7s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) backwards; }
.ipa.is-in .a-grow { transform-origin: 0 50%; animation: ipa-grow .9s cubic-bezier(.3, .7, .2, 1) var(--d, 0s) backwards; }
.ipa .a-grow { transform-origin: 0 50%; }

.ipa-float { animation: ipa-float 6s ease-in-out 1.2s infinite; }
/* off screen: drop the loops entirely (not just pause) so their layers are released */
.ipa:not(.is-on) *, .ipa:not(.is-on) *::before, .ipa:not(.is-on) *::after { animation-name: none !important; }

@media (prefers-reduced-motion: reduce) {
    .ipa *, .ipa *::before, .ipa *::after { animation: none !important; }
}

/* ---------- shared bits ---------- */
.ipa-card { position: absolute; }
.ipa-bar { position: absolute; height: 3px; border-radius: 2px; }

/* ---------- 1. hero: Identity / Scanning Broker Sites ---------- */
.ipa-hero__dots { position: absolute; left: 0; top: 0; }
.ipa-hero__dots rect { fill: none; stroke: rgba(160, 175, 235, .55); stroke-width: 1; stroke-dasharray: 1 3; }

.ipa-hero__id {
    left: 0; top: 104px; width: 266px; height: 237px;
    border-radius: 24px;
    background: linear-gradient(170deg, #273ba2 0%, #2b40ad 55%, #2e44b6 100%);
    box-shadow: inset 0 0 0 1px rgba(150, 165, 235, .35);
}
.ipa-hero__head { position: absolute; left: 0; right: 0; top: 22px; height: 28px; }
.ipa-hero__back { position: absolute; left: 27px; top: 6px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ipa-hero__more { position: absolute; left: 231px; top: 6px; fill: #fff; }
.ipa-hero__title { position: absolute; left: 0; right: 0; top: -2px; text-align: center; font-size: 21px; font-weight: 500; letter-spacing: -.01em; }
.ipa-hero__panel {
    position: absolute; left: 20px; top: 56px; width: 225px; height: 160px;
    border-radius: 8px;
    background: rgba(120, 140, 230, .1);
    box-shadow: inset 0 0 0 1px rgba(150, 165, 235, .22);
}
.ipa-hero__ds { position: absolute; left: 16px; top: 16.5px; font-size: 11.3px; font-weight: 400; }
.ipa-hero__up { position: absolute; left: 196px; top: 21px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ipa-hero__b1 { left: 16px; top: 42px; width: 136px; background: rgba(150, 165, 230, .55); }
.ipa-hero__b2 { left: 16px; top: 51px; width: 47px; height: 2px; background: rgba(150, 165, 230, .3); }
.ipa-hero__row { position: absolute; left: 16px; height: 24px; width: 200px; }
.ipa-hero__ic { position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: rgba(200, 205, 240, .55); display: flex; align-items: center; justify-content: center; }
.ipa-hero__ic svg { fill: none; stroke: #fff; stroke-width: 1.1; stroke-linecap: round; }
.ipa-hero__lbl { position: absolute; left: 36px; top: 3px; font-size: 10.3px; white-space: nowrap; }
.ipa-hero__sb { left: 36px; top: 19px; height: 2px; background: rgba(150, 165, 230, .5); }

.ipa-hero__scan {
    left: 291px; top: 198px; width: 278px; height: 314px;
    border-radius: 24px;
    background: linear-gradient(95deg, #2037b0 0%, #1d339f 30%, #1a2c86 60%, #142160 85%, #131d53 100%);
    box-shadow: inset 0 0 0 1px rgba(130, 145, 220, .35);
}
.ipa-hero__h { position: absolute; left: 20px; top: 20.5px; font-size: 15.5px; font-weight: 600; line-height: 19px; }
.ipa-hero__next { position: absolute; left: 242px; top: 23px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ipa-hero__sub { position: absolute; left: 20px; top: 67px; font-size: 16px; line-height: 22px; color: rgba(205, 212, 245, .78); }
.ipa-hero__radar { position: absolute; left: 74px; top: 128px; width: 130px; height: 130px; border-radius: 50%; overflow: hidden; }
.ipa-hero__sweep {
    position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(from 270deg, rgba(190, 200, 240, .62), rgba(150, 160, 215, .42) 25%, rgba(120, 130, 190, .28) 50%, rgba(90, 105, 190, .18) 75%, rgba(60, 80, 190, 0) 100%);
}
.ipa.is-on .ipa-hero__sweep { animation: ipa-spin 7s linear 1.4s infinite; }
.ipa-hero__note { position: absolute; left: 0; right: 0; top: 279.5px; text-align: center; font-size: 11.5px; font-weight: 500; }

.ipa-hero__hex { position: absolute; left: 148px; top: 276px; width: 180px; height: 166px; }
.ipa-hero__hex svg:first-child { position: absolute; left: 0; top: 0; }
.ipa-hero__hexo { fill: url(#ipaHexOut); stroke: url(#ipaHexOut); stroke-width: 30; stroke-linejoin: round; opacity: .9; }
.ipa-hero__hexi { fill: url(#ipaHexIn); stroke: url(#ipaHexIn); stroke-width: 44; stroke-linejoin: round; }
.ipa-hero__lock { position: absolute; left: 60px; top: 50px; }
.ipa-hero__shield { fill: none; stroke: #fff; stroke-width: 5; }
.ipa-hero__key { fill: #fff; }

/* loops shared by several pieces */
.ipa-float-s { animation: ipa-float-s 5s ease-in-out 1s infinite; }
.ipa-breathe { animation: ipa-breathe 4s ease-in-out 1s infinite; }
@keyframes ipa-nudge { 0%, 70%, 100% { transform: none; } 80% { transform: translateX(3px); } 90% { transform: translateX(0); } }
.ipa-nudge { animation: ipa-nudge 3.2s ease-in-out 1.6s infinite; }
.ipa .f { fill: #fff; stroke: none; }

/* ---------- 2. why it matters: Banrox Protect Your Identity ---------- */
.ipa-about__bg {
    position: absolute; inset: 0; border-radius: 30px; overflow: hidden;
    background: linear-gradient(90deg, #11194a 0%, #142067 55%, #15216a 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.ipa-about__glow { position: absolute; left: 20px; top: -60px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(closest-side, rgba(36, 64, 205, .95), rgba(30, 55, 190, .55) 55%, rgba(30, 55, 190, 0)); }
.ipa-about__arcs { position: absolute; left: 0; top: 0; -webkit-mask: linear-gradient(to top right, transparent 38%, #000 62%); mask: linear-gradient(to top right, transparent 38%, #000 62%); }
.ipa-arc { fill: none; stroke: rgba(150, 165, 255, .14); stroke-width: 1; }
@keyframes ipa-arc { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.ipa.is-on .ipa-arc { animation: ipa-arc 4s ease-in-out calc(var(--i) * .35s) infinite; }
.ipa-about__main { left: 50px; top: 75px; width: 245px; height: 136px; border-radius: 20px; background: rgba(120, 140, 255, .08); box-shadow: inset 0 0 0 1.5px rgba(160, 175, 255, .25); text-align: center; }
.ipa-about__shield { position: absolute; left: 102.5px; top: 21px; }
.ipa-about__t { position: absolute; left: 0; right: 0; top: 74.5px; font-size: 13.45px; font-weight: 600; }
.ipa-about__d { position: absolute; left: 0; right: 0; top: 103.5px; font-size: 9.6px; color: rgba(205, 212, 250, .75); }
.ipa-about__tile { position: absolute; width: 49px; height: 49px; }
.ipa-about__tile > div { width: 100%; height: 100%; border-radius: 10px; background: rgba(140, 155, 255, .16); display: flex; align-items: center; justify-content: center; }
.ipa-about__tile svg { fill: none; stroke: #fff; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.ipa-about__dw { left: 253.5px; top: 221px; width: 170px; height: 103px; border-radius: 16px; background: rgba(120, 140, 255, .08); box-shadow: inset 0 0 0 1.5px rgba(160, 175, 255, .25); }
.ipa-about__dwt { position: absolute; left: 14.5px; top: 17px; font-size: 11.15px; font-weight: 600; }
.ipa-about__chev { position: absolute; left: 143px; top: 18px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ipa-about__dwd { position: absolute; left: 14.5px; top: 37px; font-size: 9.5px; line-height: 13px; color: rgba(205, 212, 250, .75); }
.ipa-about__dwl { position: absolute; left: 14.5px; top: 79px; font-size: 8.35px; font-weight: 500; }
.ipa-about__dwl span { color: rgba(205, 212, 250, .6); margin-right: 2px; }

/* ---------- 3. 24/7 monitoring: radar + magnifier ---------- */
.ipa--radar { margin-bottom: -24px; }
.ipa--radar .ipa__s { overflow: hidden; }
.ipa-radar__panel { position: absolute; left: 142.5px; top: 42.5px; width: 341px; height: 360px; border-radius: 35px; background: linear-gradient(90deg, rgba(46, 50, 88, .24), rgba(46, 54, 110, .26)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.ipa-radar__names span { position: absolute; font-size: 13px; font-weight: 500; color: transparent; text-shadow: 0 0 4px rgba(255, 255, 255, .75); white-space: nowrap; }
@keyframes ipa-name { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.ipa.is-on .ipa-radar__names span { animation: ipa-name 5s ease-in-out calc(var(--i) * -1.1s) infinite; }
.ipa-radar__rings { position: absolute; left: 184px; top: 84px; width: 258px; height: 258px; }
.ipa-radar__rings i { position: absolute; border-radius: 50%; }
.ipa-radar__r1 { inset: 0; background: rgba(38, 47, 101, .36); }
.ipa-radar__r2 { inset: 17px; background: radial-gradient(closest-side, rgba(60, 85, 255, .95), rgba(55, 72, 200, .55) 42%, rgba(42, 50, 120, .5) 75%, rgba(40, 46, 105, .55)); }
.ipa-radar__ping { inset: 17px; border: 1.5px solid rgba(120, 140, 255, .55); opacity: 0; }
.ipa.is-on .ipa-radar__ping { animation: ipa-ping 3.2s cubic-bezier(.2, .6, .3, 1) 1s infinite; }
.ipa-radar__core { position: absolute; left: 269px; top: 169px; width: 88px; height: 88px; }
.ipa-radar__core > div { width: 100%; height: 100%; border-radius: 50%; border: 4px solid rgba(100, 103, 135, .95); background: linear-gradient(90deg, #3152fd, #8a87ee); display: flex; align-items: center; justify-content: center; }
.ipa-radar__core svg { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; }
.ipa-radar__mag { position: absolute; left: 377px; top: 123px; width: 230px; height: 200px; }
@keyframes ipa-orbit { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-8px, 5px) rotate(-3deg); } 50% { transform: translate(-3px, 11px) rotate(0); } 75% { transform: translate(5px, 4px) rotate(2deg); } }
.ipa-radar__orbit { animation: ipa-orbit 7s ease-in-out 1.2s infinite; transform-origin: 67px 67px; }

/* ---------- 4/6. alert + status rows ---------- */
.ipa-row { position: absolute; left: 0; width: 451px; height: 116px; border-radius: 24px; background: rgba(255, 255, 255, .04); }
.ipa-row--alert { top: 44px; }
.ipa-row--ok { top: 25px; height: 120px; width: 450px; }
.ipa-row__ic { position: absolute; left: 17px; top: 14px; width: 86px; height: 86px; }
.ipa-row--ok .ipa-row__ic { top: 17px; }
.ipa-row__ic > i { position: absolute; border-radius: 50%; }
.ipa-row__halo { inset: 0; background: rgba(69, 99, 255, .23); }
.ipa-row__ping { inset: 0; background: rgba(69, 99, 255, .35); opacity: 0; }
.ipa-row__dot { inset: 14.5px; background: #3a5cff; display: flex !important; align-items: center; justify-content: center; }
.ipa-row--alert .ipa-row__halo { background: rgba(255, 91, 91, .23); }
.ipa-row--alert .ipa-row__ping { background: rgba(255, 91, 91, .35); }
.ipa-row--alert .ipa-row__dot { background: #ff4242; }
.ipa-row__dot svg { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ipa.is-on .ipa-row__ping { animation: ipa-ping 2.8s ease-out 1.2s infinite; }
.ipa-row__t { position: absolute; left: 128px; top: 31.5px; font-size: 19.4px; font-weight: 500; letter-spacing: -.01em; }
.ipa-row--ok .ipa-row__t { left: 125px; top: 25.5px; font-size: 19.2px; }
.ipa-badge { position: absolute; left: 289px; top: 31.5px; height: 22px; padding: 0 8px 0 20px; border-radius: 6px; font-size: 9.9px; line-height: 20px; font-weight: 500; white-space: nowrap; }
.ipa-badge i { position: absolute; left: 8.5px; top: 7.5px; width: 6px; height: 6px; border-radius: 50%; }
.ipa-badge--red { border: 1px solid #ff4242; background: rgba(255, 139, 139, .09); }
.ipa-badge--red i { background: #ff4242; }
.ipa-badge--green { left: 261px; top: 25.5px; border: 1px solid #31a650; background: rgba(128, 197, 151, .09); }
.ipa-badge--green i { background: #31a650; }
.ipa.is-on .ipa-badge i { animation: ipa-blink 2s ease-in-out 1.5s infinite; }
.ipa-row__d { position: absolute; left: 128px; top: 69px; font-size: 11px; line-height: 16px; color: rgba(255, 255, 255, .6); white-space: nowrap; }
.ipa-row--ok .ipa-row__d { left: 125px; top: 62.5px; font-size: 10.9px; line-height: 16.5px; }

/* ---------- 5. comprehensive monitoring: chart + total ---------- */
.ipa--monitor { margin-bottom: -24px; }
.ipa--monitor .ipa__s { overflow: hidden; }
.ipa-mon__chart { position: absolute; left: 0; top: 7px; width: 344px; height: 240px; border-radius: 30px; overflow: hidden; background: linear-gradient(100deg, #101223 0%, #141838 40%, #192772 100%); box-shadow: inset 0 0 0 1px rgba(120, 130, 210, .3); }
.ipa-mon__t { position: absolute; left: 27.5px; top: 31px; font-size: 15.8px; letter-spacing: -.01em; }
.ipa-mon__wipe, .ipa-mon__unwipe { position: absolute; left: 0; top: -7px; width: 344px; height: 220px; }
.ipa-mon__wipe { overflow: hidden; }
.ipa-mon__unwipe { top: 0; }
@keyframes ipa-wipe { from { transform: translateX(-100%); } }
@keyframes ipa-unwipe { from { transform: translateX(100%); } }
.ipa.is-in .ipa-mon__wipe { animation: ipa-wipe 1.6s cubic-bezier(.4, .1, .2, 1) .4s backwards; }
.ipa.is-in .ipa-mon__unwipe { animation: ipa-unwipe 1.6s cubic-bezier(.4, .1, .2, 1) .4s backwards; }
.ipa.is-armed:not(.is-in) .ipa-mon__wipe { transform: translateX(-100%); }
.ipa-mon__line { fill: none; stroke: #3a5cff; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.ipa-mon__stat { position: absolute; left: 370px; top: 61.5px; width: 252.5px; height: 89.5px; }
.ipa-mon__stat > div { width: 100%; height: 100%; border-radius: 10px; background: linear-gradient(100deg, #1c2b75, #1e2d7b); box-shadow: inset 0 0 0 1px rgba(90, 110, 230, .45); }
.ipa-mon__ic { position: absolute; left: 19px; top: 25.5px; fill: none; stroke: #3a5cff; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.ipa-mon__l { position: absolute; left: 72.5px; top: 15.5px; font-size: 14.6px; letter-spacing: -.01em; }
.ipa-mon__n { position: absolute; left: 72.5px; top: 44px; font-size: 30.3px; font-weight: 500; }

/* ---------- 7. actionable next steps checklist (also in trust) ---------- */
.ipa-steps { position: absolute; left: 47.5px; top: 47.5px; width: 354px; height: 254px; border-radius: 35px; background: rgba(40, 42, 60, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.ipa-steps__in { position: absolute; left: 15.5px; top: 16px; width: 323px; height: 219.5px; border-radius: 14px; background: linear-gradient(115deg, #1a1b2c 0%, #1b1f3d 45%, #233391 100%); overflow: hidden; }
.ipa-steps__row { position: absolute; left: 16.5px; width: 289.5px; height: 57px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.ipa-steps__row:nth-child(1) { top: 0; }
.ipa-steps__row:nth-child(2) { top: 57px; }
.ipa-steps__row:nth-child(3) { top: 114px; }
.ipa-steps__row > span { position: absolute; left: 35px; top: 17px; font-size: 10.4px; font-weight: 500; letter-spacing: -.01em; }
.ipa-chk { position: absolute; left: 1.5px; top: 20.5px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .3); }
.ipa-chk.is-done { border-color: #31a650; display: flex !important; align-items: center; justify-content: center; }
.ipa-chk svg { fill: none; stroke: #31a650; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ipa.is-in .ipa-chk.is-done svg { animation: ipa-pop .5s cubic-bezier(.2, .8, .2, 1.3) calc(var(--d, 0s) + .6s + var(--c, 0s)) backwards; }
.ipa-steps__bar { position: absolute; left: 35px; top: 40.5px; width: 159px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .07); }
.ipa-steps__chev { position: absolute; left: 276px; top: 24.5px; fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.ipa-steps__foot { position: absolute; left: 16.5px; top: 185px; width: 289.5px; height: 22px; }
.ipa-steps__track { position: absolute; left: 0; top: 7.5px; width: 142px; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.ipa-steps__track i { width: 76px; height: 100%; border-radius: 4px; background: #31a650; }
.ipa-steps__foot span { position: absolute; right: 0; top: 4px; font-size: 10.6px; color: rgba(255, 255, 255, .6); }

/* ---------- 8. bank-level security: shield disc ---------- */
.ipa--bank .ipa__s { overflow: hidden; }
.ipa-bank__panel { position: absolute; left: 4px; top: 0; width: 366px; height: 230px; border-radius: 23px; background: linear-gradient(110deg, rgba(45, 45, 55, .2), rgba(45, 48, 75, .2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.ipa-bank__ring { position: absolute; left: 98.5px; top: 11px; width: 175px; height: 175px; }
.ipa-bank__halo { position: absolute; inset: 0; border-radius: 50%; background: rgba(41, 44, 57, .32); }
.ipa-bank__disc { position: absolute; inset: 12.5px; border-radius: 50%; background: linear-gradient(135deg, #30313f 0%, #24263e 55%, #2c3256 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); display: flex; align-items: center; justify-content: center; }
.ipa-bank__shine { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, 0) 70%); opacity: 0; }
@keyframes ipa-shine { 0% { opacity: 0; transform: rotate(-60deg); } 50% { opacity: 1; } 100% { opacity: 0; transform: rotate(120deg); } }
.ipa.is-on .ipa-bank__shine { animation: ipa-shine 6s ease-in-out infinite; }
.ipa.is-on .ipa-bank__halo { animation: ipa-breathe 4s ease-in-out 1s infinite; }
.ipa-bank__sh { position: relative; }

/* ---------- 9. trust: status + disc + checklist ---------- */
.ipa-trust__status { position: absolute; left: 0; top: -25px; width: 450px; height: 170px; }
.ipa-trust__steps { position: absolute; left: .5px; top: 188.5px; width: 450px; height: 350px; }
.ipa-trust__disc { position: absolute; left: 177.5px; top: 130.5px; width: 95px; height: 95px; }
.ipa-trust__disc .ipa-bank__disc { inset: 6.5px; }

/* ---------- 10. join: Dark Web Scan Complete + Security & Compliance ---------- */
.ipa-join__sec { position: absolute; left: 326px; top: 37.5px; width: 330px; height: 333.5px; border-radius: 40px; overflow: hidden; background: radial-gradient(120% 70% at 15% 105%, rgba(75, 88, 205, .75), rgba(40, 45, 120, .35) 45%, rgba(20, 20, 40, 0) 75%), linear-gradient(180deg, #111120 0%, #121327 60%, #13142a 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 4px 20px rgba(255, 255, 255, .06); }
.ipa-join__map { position: absolute; inset: 0; background: radial-gradient(circle, rgba(120, 130, 220, .22) 1.6px, transparent 2px) 0 0 / 11px 11px; -webkit-mask: radial-gradient(70% 55% at 50% 45%, #000 40%, transparent 100%); mask: radial-gradient(70% 55% at 50% 45%, #000 40%, transparent 100%); }
@keyframes ipa-map { 50% { opacity: .55; } }
.ipa.is-on .ipa-join__map { animation: ipa-map 5s ease-in-out 1s infinite; }
.ipa-join__fp { position: absolute; left: 113px; top: 68px; width: 104px; height: 104px; border-radius: 20px; background: #3a5cff; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.ipa-join__fp svg { position: relative; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; }
.ipa-join__scan { position: absolute; left: 0; right: 0; top: 0; height: 30px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .22) 85%, rgba(255, 255, 255, .5)); transform: translateY(-40px); }
@keyframes ipa-scan { 0% { transform: translateY(-40px); } 55%, 100% { transform: translateY(110px); } }
.ipa.is-on .ipa-join__scan { animation: ipa-scan 3.6s cubic-bezier(.5, 0, .5, 1) 1.4s infinite; }
.ipa-join__t { position: absolute; left: 0; right: 0; top: 200px; text-align: center; font-size: 25px; font-weight: 500; letter-spacing: -.01em; }
.ipa-join__d { position: absolute; left: 0; right: 0; top: 245px; text-align: center; font-size: 15px; color: rgba(255, 255, 255, .85); }
.ipa-join__scanc { position: absolute; left: 0; top: 124px; width: 305px; height: 116px; border-radius: 25px; background: linear-gradient(90deg, #0f1020, #191a3a); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.ipa-join__ok { position: absolute; left: 27px; top: 27px; width: 38px; height: 38px; border-radius: 50%; background: #3a5cff; display: flex !important; align-items: center; justify-content: center; }
.ipa-join__ok svg { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ipa-join__h { position: absolute; left: 85px; top: 22px; font-size: 29.1px; font-weight: 400; letter-spacing: -.01em; }
.ipa-join__c { position: absolute; left: 85px; top: 67px; font-size: 24px; color: #31a650; }
.ipa-join__shield { position: absolute; left: 161px; top: 199px; width: 190px; height: 214px; }
.ipa-join__tick { fill: none; stroke: #fff; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }