/* Raptool AI Blocks catalogue (/ai-blocks/) - same dark look as /ai-framework/blocks/ */
html{background:#0a0b14}body{margin:0;background:#0a0b14;color:#eef0ff;font-family:Inter,"Segoe UI",system-ui,sans-serif;overflow-x:hidden}
.ab{--c:#b6a4ff;overflow-x:clip}
.ab .w{max-width:1240px;margin:0 auto;padding:0 5%;box-sizing:border-box}
.ab .eb{margin:0 0 14px;font:600 12px/1 Inter,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:#b6a4ff}
.ab em{font-style:italic;color:#b6a4ff;padding-right:.08em}
.ab .lead{max-width:720px;margin:0;font-size:18px;line-height:1.6;color:#b9bedf}
.ab .lead a{color:#cfc4ff;font-weight:600;text-decoration:none;white-space:nowrap}
.ab .lead a:hover{text-decoration:underline}
/* category colours */
.c-dev{--c:#3ddc97;--c2:#1f8f60}.c-int{--c:#6d8bff;--c2:#3a4fd0}.c-dat{--c:#ffb547;--c2:#c27612}
.c-ui{--c:#ff6fb5;--c2:#c23a7f}.c-ai{--c:#b6a4ff;--c2:#7c5cff}.c-com{--c:#34d3ff;--c2:#1491b8}
/* hero */
.ab-hero{position:relative;padding:150px 0 0}
.ab-hero h1{margin:0 0 20px;font:800 clamp(44px,7vw,92px)/.98 Sora,Inter,sans-serif;letter-spacing:-.045em}
.ab-orbs{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.ab-orbs i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.38}
.ab-orbs i:nth-child(1){width:420px;height:420px;background:#7c5cff;right:6%;top:40px;animation:abFloat 14s ease-in-out infinite}
.ab-orbs i:nth-child(2){width:300px;height:300px;background:#34d3ff;right:28%;top:200px;opacity:.22;animation:abFloat 18s ease-in-out infinite reverse}
.ab-orbs i:nth-child(3){width:260px;height:260px;background:#ff6fb5;right:-4%;top:260px;opacity:.2;animation:abFloat 16s ease-in-out infinite}
@keyframes abFloat{50%{transform:translate(-40px,30px) scale(1.08)}}
/* sticky filter row (the row that holds the chips and the count; it sticks under the menu) */
.ab-sentinel{height:1px}
.ab-filter{position:sticky;top:72px;z-index:40;margin-top:40px;padding:12px 0;border-bottom:1px solid transparent;transition:background .25s,border-color .25s}
.ab-filter.stuck{background:rgba(10,11,20,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:#1b1f36}
.ab-fw{display:flex;align-items:center;gap:16px;justify-content:space-between}
.ab-chips{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.ab-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;border:1px solid #2a3054;background:#121527;color:#d9dcf5;font:600 14px/1 Inter,sans-serif;cursor:pointer;transition:background .2s,border-color .2s,color .2s,transform .2s}
.ab-chip i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.ab-chip[data-cat=Device]{--c:#3ddc97}.ab-chip[data-cat=Integration]{--c:#6d8bff}.ab-chip[data-cat=Data]{--c:#ffb547}.ab-chip[data-cat=UI]{--c:#ff6fb5}.ab-chip[data-cat=AI]{--c:#b6a4ff}.ab-chip[data-cat=Communication]{--c:#34d3ff}
.ab-chip:hover{border-color:#4a5290;transform:translateY(-1px)}
.ab-chip:focus-visible{outline:2px solid #b6a4ff;outline-offset:2px}
.ab-chip[aria-pressed=true]{background:#eef0ff;color:#0a0b14;border-color:#eef0ff}
.ab-count{flex:none;color:#8f95bd;font-size:14px;white-space:nowrap}
/* one segment per block */
.ab-list{min-height:200px}
.ab-empty{max-width:1240px;margin:80px auto;padding:0 5%;color:#8f95bd;font-size:17px;box-sizing:border-box}
.ab-seg{position:relative;padding:110px 0;border-top:1px solid #1b1f36;scroll-margin-top:140px}
.ab-seg:before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 25% 50%,color-mix(in srgb,var(--c) 10%,transparent),transparent 70%);pointer-events:none}
.ab-seg.flip:before{background:radial-gradient(60% 70% at 75% 50%,color-mix(in srgb,var(--c) 10%,transparent),transparent 70%)}
.ab-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:72px;align-items:center}
.ab-seg.flip .ab-ill{order:2}
.ab-txt h2{margin:18px 0 16px;font:800 clamp(32px,4.2vw,54px)/1.04 Sora,Inter,sans-serif;letter-spacing:-.035em}
.ab-exp{margin:0 0 22px;font-size:19px;line-height:1.6;color:#c4c8e8;max-width:620px}
.ab-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}
.ab-cat{display:inline-flex;align-items:center;gap:8px;font:600 12px/1 Inter,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--c);margin-right:6px}
.ab-cat i{width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 12px var(--c)}
.ab-st,.ab-v{display:inline-flex;align-items:center;padding:5px 11px;border-radius:999px;font:700 12px/1 Inter,sans-serif;border:1px solid #2a3054;color:#d9dcf5}
.ab-st:before{content:"";width:7px;height:7px;border-radius:50%;margin-right:7px;background:currentColor}
.st-idea{color:#9aa0c8}.st-planned{color:#8fb6ff}.st-building{color:#ffc35c;border-color:#5c4a22}
.st-ready{color:#5fe0a6;border-color:#21543f}.st-published{color:#0a0b14;background:#5fe0a6;border-color:#5fe0a6}
.st-building:before{animation:abBlink 1.4s ease-in-out infinite}
@keyframes abBlink{50%{opacity:.25}}
.ab-v{font-weight:600;color:#8f95bd;font-variant-numeric:tabular-nums}
.ab-ex{margin:0 0 24px;padding:16px 18px;border-radius:14px;background:#121527;border:1px solid #232846;border-left:3px solid var(--c);max-width:620px}
.ab-ex span{display:block;margin-bottom:6px;font:600 11px/1 Inter,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#8f95bd}
.ab-ex p{margin:0;color:#d9dcf5;font-size:15.5px;line-height:1.6}
.ab-pf{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.pf{display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 10px;border-radius:10px;background:#121527;border:1px solid #232846;font-size:13px;line-height:1}
.pf b{font-weight:700;color:#eef0ff}
.pf span{display:inline-flex;align-items:center;gap:5px;color:#8f95bd}
.pf span:before{content:"";width:8px;height:8px;border-radius:50%;background:#4a5078}
.pf.s-yes span{color:#5fe0a6}.pf.s-yes span:before{background:#5fe0a6;box-shadow:0 0 8px #5fe0a6}
.pf.s-update span{color:#8fb6ff}.pf.s-update span:before{background:#8fb6ff}
.pf.s-waiting span{color:#ffc35c}.pf.s-waiting span:before{background:transparent;border:2px solid #ffc35c;width:5px;height:5px}
.pf.s-planned span:before{background:transparent;border:2px dashed #6b7199;width:5px;height:5px}
.pf.s-no,.pf.s-na{opacity:.55}
/* illustration stage */
.ab-ill{position:relative;aspect-ratio:1/1;max-width:440px;width:100%;justify-self:center;border-radius:32px;background:linear-gradient(160deg,#151933,#0e1122);border:1px solid #232846;box-shadow:0 40px 80px -40px color-mix(in srgb,var(--c) 45%,transparent);overflow:hidden;color:var(--c)}
.ab-glow{position:absolute;inset:-20%;background:radial-gradient(circle at 50% 55%,color-mix(in srgb,var(--c) 26%,transparent),transparent 55%)}
.ab-ill svg{position:relative;width:78%;height:78%;margin:11%;overflow:visible;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
/* scroll reveal */
.ab-seg .ab-ill,.ab-seg .ab-txt>*{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.ab-seg .ab-ill{transform:translateY(34px) scale(.94)}
.ab-seg.in .ab-ill,.ab-seg.in .ab-txt>*{opacity:1;transform:none}
.ab-seg.in .ab-txt>:nth-child(2){transition-delay:.08s}.ab-seg.in .ab-txt>:nth-child(3){transition-delay:.16s}
.ab-seg.in .ab-txt>:nth-child(4){transition-delay:.24s}.ab-seg.in .ab-txt>:nth-child(5){transition-delay:.32s}
/* animations only run while the segment is on screen (.play) */
.ab-ill *{animation-play-state:paused}
.ab-seg.play .ab-ill *{animation-play-state:running}
/* gps */
.a-gps .a-grid{stroke:#2a3054;stroke-width:1.5}
.a-gps .a-route{stroke-dasharray:6 8;animation:abDash 2s linear infinite}
.a-gps .a-ring{transform-origin:100px 104px;animation:abRing 2.6s ease-out infinite;stroke-width:2.5}
.a-gps .r2{animation-delay:.85s}.a-gps .r3{animation-delay:1.7s}
.a-gps .a-pin path{fill:var(--c);fill-opacity:.22}.a-gps .a-pin{animation:abBob 2.6s ease-in-out infinite}
@keyframes abRing{0%{transform:scale(.4);opacity:1}100%{transform:scale(5.4);opacity:0}}
@keyframes abBob{50%{transform:translateY(-6px)}}
@keyframes abDash{to{stroke-dashoffset:-28}}
/* scanner */
.a-scanner .a-code rect{fill:#eef0ff;fill-opacity:.06}.a-scanner .a-code path{stroke:#eef0ff;stroke-opacity:.8;stroke-width:3.2}
.a-scanner .a-corner{stroke-width:4}
.a-scanner .a-laser{fill:var(--c);stroke:none;filter:drop-shadow(0 0 8px currentColor);animation:abLaser 2.4s ease-in-out infinite}
.a-scanner .a-ok{fill:var(--c);stroke:none;opacity:0;animation:abOk 2.4s ease-in-out infinite}
@keyframes abLaser{0%,100%{transform:translateY(-34px)}50%{transform:translateY(34px)}}
@keyframes abOk{0%,40%{opacity:0;transform:scale(.4)}50%,70%{opacity:1;transform:none}100%{opacity:0}}
.a-scanner .a-ok{transform-origin:164px 44px}
/* nfc */
.a-nfc .a-card{fill:var(--c);fill-opacity:.12}.a-nfc .a-chip{fill:var(--c);fill-opacity:.4}
.a-nfc .a-wave{animation:abWave 2s ease-in-out infinite;opacity:.15}
.a-nfc .w2{animation-delay:.2s}.a-nfc .w3{animation-delay:.4s}.a-nfc .w4{animation-delay:.6s}
@keyframes abWave{30%{opacity:1}70%,100%{opacity:.15}}
/* calendar */
.a-calendar .a-cal{fill:var(--c);fill-opacity:.08}
.a-calendar .a-page{transform-origin:100px 94px;animation:abFlip 3.6s cubic-bezier(.6,0,.3,1) infinite}
.a-calendar .a-page rect{fill:var(--c);fill-opacity:.2}
.a-calendar .a-dot{fill:var(--c);stroke:none;animation:abWave 1.8s ease-in-out infinite}
.a-calendar .d2{animation-delay:.25s}.a-calendar .d3{animation-delay:.5s}
.a-calendar .a-sync{transform-origin:140px 132px;animation:abSpin 3.6s linear infinite}
@keyframes abFlip{0%,35%{transform:none;opacity:1}55%{transform:perspective(400px) rotateX(-88deg);opacity:0}56%{transform:perspective(400px) rotateX(88deg);opacity:0}76%,100%{transform:none;opacity:1}}
@keyframes abSpin{to{transform:rotate(360deg)}}
/* printer */
.a-printer .a-body{fill:#151933}.a-printer .a-roll{fill:var(--c);fill-opacity:.18}
.a-printer .a-label{animation:abFeed 3s cubic-bezier(.5,0,.4,1) infinite}
.a-printer .a-label rect{fill:#eef0ff;fill-opacity:.92;stroke:#eef0ff}.a-printer .a-label path{stroke:#0a0b14;stroke-width:2.6}
.a-printer .a-led{fill:var(--c);stroke:none;animation:abBlink .5s steps(2) infinite}
@keyframes abFeed{0%{transform:translateY(-62px)}60%,85%{transform:translateY(0)}100%{transform:translateY(14px);opacity:0}}
/* email */
.a-email .a-tray{stroke:#4a5078}
.a-email .a-env rect{fill:#151933}
.a-email .e1{animation:abSort1 3.6s ease-in-out infinite}.a-email .e2{animation:abSort2 3.6s ease-in-out infinite 1.2s}.a-email .e3{animation:abSort3 3.6s ease-in-out infinite 2.4s}
.a-email .a-env{opacity:0}
@keyframes abSort1{0%{opacity:0;transform:translate(0,-20px)}15%{opacity:1;transform:translate(0,10px)}55%{opacity:1;transform:translate(-48px,94px) scale(.8)}70%,100%{opacity:0;transform:translate(-48px,104px) scale(.8)}}
@keyframes abSort2{0%{opacity:0;transform:translate(0,-20px)}15%{opacity:1;transform:translate(0,10px)}55%{opacity:1;transform:translate(8px,94px) scale(.8)}70%,100%{opacity:0;transform:translate(8px,104px) scale(.8)}}
@keyframes abSort3{0%{opacity:0;transform:translate(0,-20px)}15%{opacity:1;transform:translate(0,10px)}55%{opacity:1;transform:translate(56px,94px) scale(.6)}70%,100%{opacity:0;transform:translate(56px,104px) scale(.6)}}
/* bell / messages */
.a-bell .a-phone{fill:#151933}
.a-bell .a-bub rect{fill:var(--c);fill-opacity:.25}
.a-bell .a-bub{opacity:0;animation:abPop 3.6s ease-out infinite}
.a-bell .b2{animation-delay:.5s}.a-bell .b3{animation-delay:1s}
.a-bell .a-bell{transform-origin:150px 52px;animation:abRingBell 3.6s ease-in-out infinite}
.a-bell .a-bell path:first-child{fill:var(--c);fill-opacity:.25}
@keyframes abPop{0%{opacity:0;transform:translateY(10px)}12%,75%{opacity:1;transform:none}90%,100%{opacity:0}}
@keyframes abRingBell{0%,60%,100%{transform:none}64%{transform:rotate(14deg)}70%{transform:rotate(-12deg)}76%{transform:rotate(8deg)}82%{transform:rotate(-4deg)}}
/* import */
.a-import .a-file{fill:none;animation:abBob 2.4s ease-in-out infinite}
.a-import .a-arrow{animation:abNudge 1.2s ease-in-out infinite}
.a-import .a-table{fill:#151933}
.a-import .a-rows rect{fill:var(--c);fill-opacity:.35;stroke:none;opacity:0;animation:abRow 3.2s ease-out infinite}
.a-import .rw2{animation-delay:.3s}.a-import .rw3{animation-delay:.6s}.a-import .rw4{animation-delay:.9s}
@keyframes abNudge{50%{transform:translateX(6px)}}
@keyframes abRow{0%{opacity:0;transform:translateX(-20px)}15%,80%{opacity:1;transform:none}100%{opacity:0}}
/* key / sign-in */
.a-key .a-lockb{fill:var(--c);fill-opacity:.14}
.a-key .a-shackle{animation:abShackle 3s ease-in-out infinite}
.a-key .a-dots circle{fill:var(--c);stroke:none;opacity:.2;animation:abWave 3s ease-in-out infinite}
.a-key .a-dots circle:nth-child(2){animation-delay:.15s}.a-key .a-dots circle:nth-child(3){animation-delay:.3s}.a-key .a-dots circle:nth-child(4){animation-delay:.45s}
@keyframes abShackle{0%,45%{transform:none}60%,85%{transform:translateY(-12px)}100%{transform:none}}
/* camera */
.a-camera .a-cam{fill:#151933}.a-camera .a-lens{fill:var(--c);fill-opacity:.12}
.a-camera .a-iris{transform-origin:100px 108px;animation:abIris 3s ease-in-out infinite;fill:var(--c);fill-opacity:.35}
.a-camera .a-flash{fill:#fff;stroke:none;opacity:0;animation:abFlash 3s ease-out infinite}
@keyframes abIris{0%,40%{transform:scale(1)}50%{transform:scale(.4)}60%,100%{transform:scale(1)}}
@keyframes abFlash{0%,48%{opacity:0}50%{opacity:.5}60%,100%{opacity:0}}
/* ai */
.a-ai .a-net{stroke:#3a4170;stroke-width:2}
.a-ai .a-n{fill:#151933;animation:abNode 2.4s ease-in-out infinite}
.a-ai .n2{animation-delay:.3s}.a-ai .n3{animation-delay:.6s}.a-ai .n4{animation-delay:.9s}.a-ai .n5{animation-delay:1.2s}.a-ai .n6{animation-delay:1.5s}
.a-ai .a-spark{fill:var(--c);stroke:none;transform-origin:100px 100px;animation:abSpark 2.4s ease-in-out infinite}
@keyframes abNode{50%{fill:var(--c)}}
@keyframes abSpark{50%{transform:scale(1.25) rotate(45deg)}}
/* payment */
.a-payment .a-card{fill:var(--c);fill-opacity:.12;animation:abBob 3s ease-in-out infinite}
.a-payment .a-tick{stroke-width:5;stroke-dasharray:60;stroke-dashoffset:60;animation:abTick 3s ease-in-out infinite}
@keyframes abTick{30%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
/* sync */
.a-sync .a-box{fill:var(--c);fill-opacity:.12}.a-sync .a-line{stroke:#3a4170}
.a-sync .a-pkt{fill:var(--c);stroke:none}
.a-sync .p1{animation:abP1 1.8s ease-in-out infinite}.a-sync .p2{animation:abP2 1.8s ease-in-out infinite .9s}
@keyframes abP1{0%{transform:none;opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateX(36px);opacity:0}}
@keyframes abP2{0%{transform:none;opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateX(-36px);opacity:0}}
/* data */
.a-data .a-db>ellipse{fill:var(--c);fill-opacity:.2}
.a-data .a-band{animation:abWave 2.4s ease-in-out infinite}.a-data .b2{animation-delay:.6s}
/* ui */
.a-ui .a-win{fill:#151933}.a-ui .a-dotw{fill:var(--c);stroke:none}
.a-ui .a-tile{fill:var(--c);fill-opacity:.18;animation:abTile 3.6s ease-in-out infinite}
.a-ui .t2{animation-delay:.4s}.a-ui .t3{animation-delay:.8s}
@keyframes abTile{0%,100%{fill-opacity:.12}30%{fill-opacity:.45}}
/* compass */
.a-compass .a-dial{fill:var(--c);fill-opacity:.08}.a-compass .a-ticks{stroke-width:4}
.a-compass .a-needle{transform-origin:100px 100px;animation:abNeedle 5s ease-in-out infinite}
.a-compass .nn{fill:var(--c);stroke:none}.a-compass .ns{fill:#3a4170;stroke:none}.a-compass .a-hub{fill:#eef0ff;stroke:none}
@keyframes abNeedle{0%,100%{transform:rotate(-30deg)}30%{transform:rotate(40deg)}55%{transform:rotate(10deg)}75%{transform:rotate(25deg)}}
/* motion sensors */
.a-motion .a-tilt{transform-origin:100px 150px;animation:abTilt 3s ease-in-out infinite}
.a-motion .a-phone{fill:#151933}.a-motion .a-bubble{fill:var(--c);stroke:none;animation:abBubble 3s ease-in-out infinite}
.a-motion .a-lvl{stroke:#3a4170}
.a-motion .a-arc{opacity:.2}.a-motion .a1{animation:abWave 3s ease-in-out infinite}.a-motion .a2{animation:abWave 3s ease-in-out infinite 1.5s}
@keyframes abTilt{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}
@keyframes abBubble{0%,100%{transform:translateX(12px)}50%{transform:translateX(-12px)}}
/* signal: wifi / ble / bluetooth */
.a-signal .a-src{fill:var(--c);stroke:none}
.a-signal .a-arcw{stroke-width:6;opacity:.15;animation:abWave 2s ease-in-out infinite}
.a-signal .w2{animation-delay:.2s}.a-signal .w3{animation-delay:.4s}.a-signal .w4{animation-delay:.6s}
/* clock: background tasks */
.a-clock .a-face{fill:var(--c);fill-opacity:.08}.a-clock .a-hub{fill:#eef0ff;stroke:none}
.a-clock .a-hand{stroke-width:5;transform-origin:100px 100px}.a-clock .hh{animation:abSpin 12s linear infinite}.a-clock .mh{animation:abSpin 3s linear infinite}
.a-clock .a-orbit{stroke:#3a4170;stroke-dasharray:4 8}
.a-clock .a-sat{fill:var(--c);stroke:none;transform-origin:100px 100px;animation:abSpin 4s linear infinite}
/* call to action */
.ab-cta{padding:110px 0;border-top:1px solid #1b1f36;text-align:center}
.ab-cta h2{margin:0 0 18px;font:800 clamp(32px,4.4vw,56px)/1.04 Sora,Inter,sans-serif;letter-spacing:-.035em}
.ab-cta .lead{margin:0 auto}
.ab-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.ab-btns a{display:inline-flex;align-items:center;padding:14px 26px;border-radius:999px;font-weight:700;text-decoration:none}
.ab-btns .p{background:#eef0ff;color:#0a0b14}.ab-btns .s{border:1px solid #3a4170;color:#eef0ff}
@media (max-width:900px){
 .ab-grid{grid-template-columns:1fr;gap:36px}.ab-seg.flip .ab-ill{order:0}.ab-ill{max-width:340px}
 .ab-seg{padding:72px 0}.ab-hero{padding-top:118px}
}
@media (max-width:560px){
 .ab-fw{flex-direction:column;align-items:flex-start;gap:8px}.ab-chip{padding:8px 12px;font-size:13px}
 .ab-filter{margin-top:32px;padding:10px 0}.ab-ill{max-width:280px}.ab-exp{font-size:17px}.ab-cta{padding:72px 0}
 .ab-count{display:none}
}
@media (prefers-reduced-motion:reduce){
 .ab *,.ab *:before{animation:none!important;transition:none!important}
 .ab-seg .ab-ill,.ab-seg .ab-txt>*{opacity:1;transform:none}
 .a-email .e2,.a-bell .a-bub,.a-signal .a-arcw,.a-nfc .a-wave,.a-import .a-rows rect,.a-sync .a-pkt{opacity:1}
}