/* FREEQ — Network inner page (Figma 543:5021) */
.nw{position:relative;z-index:1;overflow-x:clip}
.nw section{position:relative}
.nw .eyebrow{font-size:20px;letter-spacing:.06em;margin:0}
.nw h2.disp{margin:0;font-size:clamp(34px,3.6vw,52px);line-height:.96;letter-spacing:.018em}
.nw .lede{font-weight:300;font-size:clamp(16px,1.25vw,18px);line-height:1.45;color:rgba(255,255,255,.78);margin:0}
.lime{color:var(--lime)}
.rings{position:absolute;border-radius:50%;pointer-events:none}
.rings i{position:absolute;border-radius:50%;border:1.5px solid rgba(255,255,255,.12)}
.rings i:nth-child(1){inset:0}.rings i:nth-child(2){inset:7.9%}.rings i:nth-child(3){inset:15.6%}

/* HERO */
.nw-hero{min-height:765px;display:flex;align-items:center;padding:120px 0 60px}
.nw-hero .wrap{display:grid;grid-template-columns:minmax(0,520px) 1fr;gap:40px;align-items:center}
.nw-hero h1{margin:0;font-size:clamp(44px,4.6vw,66px);line-height:.96;letter-spacing:.02em;max-width:400px}
.nw-hero .lede{margin-top:28px;max-width:520px;color:rgba(255,255,255,.85)}
.nw-hero .lede+.lede{margin-top:22px}
.hero-art{position:relative;height:560px}
.hero-dots{position:absolute;left:-10%;top:-30%;width:150%;aspect-ratio:1;background:url(img/flow-orb.png) center/contain no-repeat;opacity:.55;filter:saturate(1.4);mask-image:radial-gradient(circle,#000 30%,transparent 70%);-webkit-mask-image:radial-gradient(circle,#000 30%,transparent 70%);pointer-events:none}
.ig{position:absolute;width:220px;background:#fff;color:#0a0a0a;border-radius:10px;padding:10px;box-shadow:0 22px 54px rgba(0,0,0,.55);font-family:var(--font-body)}
.ig-h{display:flex;align-items:center;gap:7px;height:22px;font-size:9px;font-weight:700;line-height:1.1}
.ig-h small{display:block;font-weight:400;color:#8a8a8a;font-size:7px}
.ig-h em{margin-left:auto;font-style:normal;letter-spacing:1px}
.ig-logo{width:18px;height:18px;border-radius:5px;background:radial-gradient(circle at 30% 107%,#fdf497 0,#fd5949 45%,#d6249f 60%,#285aeb 90%);display:grid;place-items:center}
.ig-logo::after{content:"";width:8px;height:8px;border:1.5px solid #fff;border-radius:3px}
.ig-ph{display:block;width:100%;aspect-ratio:199/249;object-fit:cover;border-radius:3px;margin-top:8px}
.ig-a{display:flex;gap:8px;align-items:center;margin-top:8px;font-size:13px}
.ig-a .h{color:#ff3b5c}.ig-a b{margin-left:auto;font-weight:400}
.ig-c{font-size:9px;margin-top:6px}
.ig--1{left:48%;top:0}.ig--2{left:6%;top:236px}
.sale{position:absolute;left:10%;top:87px;display:flex;align-items:center;gap:15px;background:#fff;color:#14141a;border-radius:20px;padding:17px 22px 17px 17px;box-shadow:0 0 49px rgba(209,255,163,.35),0 22px 54px rgba(0,0,0,.55);z-index:2}
.sale img{width:61px;height:80px;object-fit:contain}
.sale small{display:block;font-size:12px;color:#6b6b73}
.sale strong{display:block;font-family:var(--font-ui);font-size:32px;line-height:1.15}
.sale .ok{position:absolute;left:-12px;top:-12px;width:32px;height:32px;border-radius:50%;background:#7ed957;color:#05040c;display:grid;place-items:center;font-weight:700;border:2px solid #05040c}
.activity{position:absolute;right:0;top:376px;width:306px;background:rgba(20,20,26,.92);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:18px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:2}
.activity>span{font-family:var(--font-ui);font-weight:700;font-size:9px;letter-spacing:.12em;color:rgba(255,255,255,.6)}
.act{display:flex;align-items:center;gap:12px;padding:12px 0;font-size:12px;font-weight:700;line-height:1.15}
.act+.act{border-top:1px solid rgba(255,255,255,.12)}
.act img{width:36px;height:36px;object-fit:cover;border-radius:6px}
.act small{display:block;font-weight:400;color:rgba(255,255,255,.55);font-size:10px;margin-top:3px}
.tag{margin-left:auto;font-size:10px;font-weight:500;padding:5px 9px;border-radius:6px;white-space:nowrap;border:1px solid}
.tag--ok{color:var(--lime);border-color:var(--lime);background:rgba(209,255,162,.08)}
.tag--warn{color:#ffc46b;border-color:#ffc46b;background:rgba(255,196,107,.08)}

/* HUB */
.hub{padding:60px 0 80px;display:flex;justify-content:center}
.hub-in{position:relative;width:min(864px,100% - 2*var(--gut));display:flex;flex-direction:column;align-items:center;gap:14px;z-index:1}
.hub .rings{left:50%;top:50%;width:802px;aspect-ratio:1;transform:translate(-50%,-50%)}
.hub .rings i{border-style:dashed;border-color:rgba(255,255,255,.14)}
.hub-orb{position:absolute;left:50%;top:52%;width:571px;aspect-ratio:571/541;transform:translate(-50%,-50%);background:url(img/flow-orb.png) center/contain no-repeat;opacity:.75;pointer-events:none}
.hub-logo{height:64px;width:auto;margin-bottom:6px}
.pill{background:#000;color:#fff;border-radius:99px;padding:9px 16px;font-size:14px;line-height:1.4;white-space:nowrap}
.hub-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;width:93%}
.app-pill{display:flex;align-items:center;justify-content:space-between;gap:16px;height:90px;padding:0 36px;border-radius:99px;background:rgba(10,10,14,.92);border:1.5px solid rgba(255,255,255,.25)}
.app-pill img{height:26px;width:auto}
.live{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-ui);font-weight:700;font-size:14px;letter-spacing:.06em;color:var(--lime)}
.live::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--lime)}
.hub-mid{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:100%}
.hub-mid::before{content:"";position:absolute;left:40%;right:40%;top:50%;border-top:1px solid rgba(255,255,255,.5)}
.hub-mid .pill{position:relative;margin:0 8px;align-self:start}
.side{display:flex;align-items:center;gap:14px;min-height:112px;padding:14px 22px;border-radius:12px;border:1.5px solid rgba(255,255,255,.45)}
.side--d{background:linear-gradient(135deg,#8b00c2,#5b0b9a)}
.side--s{background:linear-gradient(135deg,#7ed957,#3d7a1f)}
.side h3{margin:0 0 4px;font-family:var(--font-ui);font-weight:700;font-size:18px;text-transform:uppercase}
.side p{margin:0;font-size:13px;line-height:1.3}
.side-img{position:relative;flex:none;width:86px;height:80px}
.side-img img{position:absolute;object-fit:cover;border-radius:4px}
.cust{display:flex;align-items:center;width:78%;height:104px;border-radius:99px;background:rgba(10,10,14,.92);border:1.5px solid rgba(255,255,255,.25)}
.cust>*{flex:1;text-align:center}
.cust strong{font-family:var(--font-display);font-size:clamp(22px,2.4vw,34px);text-transform:uppercase;border-right:1px solid rgba(255,255,255,.5);padding:6px 0}
.cust span{font-family:var(--font-ui);font-weight:500;font-size:clamp(16px,1.7vw,24px)}
.hub-foot{font-size:14px;color:rgba(255,255,255,.85);margin-top:8px}

/* AGREED OUTCOMES */
.agreed{padding:120px 0 90px}
.agreed .rings{left:calc(50% + 0px);top:48px;width:724px;aspect-ratio:1;transform:translateX(-4%)}
.agreed-grid{display:grid;grid-template-columns:minmax(0,507px) 1fr;gap:40px;align-items:center;min-height:540px}
.agreed-copy{display:flex;flex-direction:column;gap:20px}
.agreed-copy .lede{max-width:440px}
.agreed-art{position:relative;height:520px}
.nwm{position:absolute;width:331px;padding:21px;border-radius:16px;background:#0d0c13;border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.nwm--hf{left:0;top:0}.nwm--vx{left:300px;top:140px}
.mini-top{display:flex;align-items:center;justify-content:space-between;height:20px;margin-bottom:14px}
.mini-top img{height:16px;width:auto}
.nwm .live{font-size:9px}.nwm .live::before{width:6px;height:6px}
.mini-col{height:176px;border-radius:8px;overflow:hidden;display:flex;align-items:center;gap:8px;padding:10px 12px}
.mini-col--hf{background:url(img/hf/bg.png) center/cover}
.mini-col--vx{background:url(img/vx/bg.png) center/cover}
.nwm h4{margin:16px 0 4px;font-family:var(--font-ui);font-weight:700;font-size:11px;letter-spacing:.1em}
.nwm p{margin:0;font-size:12px;color:rgba(255,255,255,.75)}
.nwm .fa-ig{padding:5px;gap:4px;font-size:6px;border-radius:5px}
.nwm .fa-ig .u img{width:10px;height:10px}
.nwm .fa-ig>img{width:90px;height:84px}
.nwm .fa-ig small{font-size:5px}
.nwm .fa-cw{width:auto;flex:1;padding:7px;gap:5px;border-radius:6px}
.nwm .fa-cw>span{font-size:6px}
.nwm .fa-cw div{font-size:8px;padding:4px 6px;gap:5px;border-radius:4px}
.nwm .fa-cw div::before{width:12px;height:12px;font-size:7px}
.mini-vx{flex:1;display:flex;flex-direction:column;gap:5px}
.mini-vx>img{width:100%;height:105px;object-fit:cover;object-position:50% 38%;border:1.5px solid #f8d849;border-radius:5px}
.mini-vx .bar{height:2px;background:linear-gradient(90deg,#ffd445 30%,rgba(255,255,255,.25) 30%)}
.mini-vx .th{display:flex;gap:3px}.mini-vx .th img{flex:1;min-width:0;height:16px;object-fit:cover;border-radius:2px}
.mini-story{width:auto;height:118px;aspect-ratio:9/19.5;flex:none;object-fit:cover;border:1px solid rgba(255,255,255,.35);border-radius:6px}
.steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);max-width:946px;margin:30px auto 0;text-align:center}
.steps::before{content:"";position:absolute;left:16.6%;right:16.6%;top:16px;border-top:1px solid rgba(209,255,162,.6)}
.steps li{position:relative;list-style:none;display:flex;flex-direction:column;align-items:center;gap:18px;font-family:var(--font-ui);font-weight:700;font-size:16px;letter-spacing:.08em;color:rgba(255,255,255,.85)}
.steps li::before{content:"✓";width:32px;height:32px;border-radius:50%;background:var(--lime);color:#05040c;display:grid;place-items:center;font-size:16px;box-shadow:0 0 0 4px rgba(209,255,162,.15)}

/* SHARED RECORD */
.record{padding:100px 0}
.record-grid{display:grid;grid-template-columns:540px 1fr;gap:56px;align-items:center}
.ledger{padding:28px;border-radius:20px;background:#0d0c13;border:1px solid rgba(255,255,255,.12)}
.ledger>small{font-family:var(--font-ui);font-weight:700;font-size:10px;letter-spacing:.1em;color:rgba(255,255,255,.55)}
.ledger h3{margin:6px 0 2px;font-family:var(--font-display);font-size:24px;text-transform:uppercase}
.ledger>p{margin:0 0 18px;font-size:12px;color:rgba(255,255,255,.65)}
.lrow{display:grid;grid-template-columns:150px 1fr 28px;gap:16px;align-items:center;padding:16px 0;border-top:1px solid rgba(255,255,255,.1)}
.lrow b{font-size:13px;font-weight:600}
.lrow span{font-size:11px;color:rgba(255,255,255,.5);line-height:1.35}
.lrow i{width:24px;height:24px;border-radius:50%;background:var(--lime);color:#05040c;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:700}
.record-copy{display:flex;flex-direction:column;gap:20px}
.record-copy .lede{max-width:604px}

/* FRAUD */
.fraud{padding:100px 0;min-height:725px;display:flex;align-items:center}
.fraud .wrap{display:grid;grid-template-columns:minmax(0,536px) 1fr;gap:40px;align-items:center}
.fraud-copy{display:flex;flex-direction:column;gap:20px}
.fraud-copy h2.disp{font-size:clamp(40px,4.4vw,64px)}
.fraud-copy .lede{max-width:520px}
.fraud-art{position:relative;height:629px;display:grid;place-items:center}
.fraud-art .rings{width:628px;aspect-ratio:1;left:50%;top:50%;transform:translate(-50%,-50%)}
.fraud-art .ig{position:relative;width:320px;padding:14px}
.fraud-art .ig-h{height:32px;font-size:12px}.fraud-art .ig-h small{font-size:9px}
.fraud-art .ig-logo{width:26px;height:26px}
.fraud-art .ig-a{font-size:18px}.fraud-art .ig-c{font-size:13px}

/* APPS + JOIN */
.nw-apps{padding:100px 0}
.apps-head{text-align:center;display:flex;flex-direction:column;gap:20px;align-items:center}
.nw-apps .fa{margin-top:40px}
.join{text-align:center;padding:101px 0 40px}
.join .wrap{display:flex;flex-direction:column;align-items:center;gap:24px}
.join h2.disp{font-size:clamp(40px,4.4vw,64px)}
.join .lede{max-width:687px}
.join .cta-lime{margin-top:0}
.nw .foot{margin-top:60px}

@media (max-width:1100px){
.nw-hero .wrap,.agreed-grid,.record-grid,.fraud .wrap{grid-template-columns:1fr}
.hero-art{height:600px;max-width:620px;width:100%;margin:0 auto}
.agreed-art{max-width:640px;width:100%;margin:0 auto}
.record-grid .ledger{order:2}
.fraud-art{height:520px}
}
@media (max-width:760px){
.hub-row{grid-template-columns:1fr;width:100%}
.hub-mid{grid-template-columns:1fr;gap:12px}.hub-mid::before{display:none}.hub-mid .pill{justify-self:center;order:-1}
.cust{width:100%;flex-direction:column;height:auto;border-radius:24px;padding:16px;gap:6px}.cust strong{border:0}
.hub .rings,.hub-orb{display:none}
.hero-art{transform:scale(.62);transform-origin:top left;height:380px;width:161%}
.agreed-art{transform:scale(.55);transform-origin:top left;height:300px;width:182%}
.steps li{font-size:12px}
.lrow{grid-template-columns:1fr 24px}.lrow span{grid-column:1;grid-row:2}.lrow i{grid-row:1/3;grid-column:2}
.fraud-art{height:auto;padding:40px 0}.fraud-art .rings{width:120%}
.fraud-art .ig{width:min(320px,100%)}
.foot{flex-direction:column}
}
.hub-in>*:not(.rings):not(.hub-orb){position:relative;z-index:1}
.hero-dots{width:120%;left:0;top:-20%;opacity:.4}
.nw-hero{overflow:clip}
.ledger h3{font-weight:700}
.steps li{text-transform:uppercase}
.cust span{padding:0 20px}
@media (max-width:760px){
.hero-art{transform:scale(.52);width:192%;max-width:none;height:310px;margin:0}
.agreed-art{transform:scale(.5);width:200%;max-width:none;height:250px;margin:0}
}

/* Fraud section storyboard (Figma 543:6144) */
.fraud-art{display:block;height:700px;position:relative}
.fs{position:absolute;left:0;top:0;width:720px;height:700px;transform:scale(var(--k,1));transform-origin:0 0;font-family:var(--font-body)}
.fs>*{position:absolute;transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1),filter .6s}
.fs-rings{left:104px;top:28px;width:628px;height:628px}
.fs-rings i{position:absolute;border-radius:50%;border:1.5px solid rgba(255,255,255,.12);transition:border-color .6s,box-shadow .6s}
.fs-rings i:nth-child(1){inset:0}.fs-rings i:nth-child(2){inset:7.9%}.fs-rings i:nth-child(3){inset:15.7%}
.fs[data-s="2"] .fs-rings i:nth-child(3),.fs[data-s="3"] .fs-rings i:nth-child(3){border-color:var(--lime);box-shadow:0 0 24px rgba(209,255,162,.25)}
.fs[data-s="2"] .fs-rings i:nth-child(2),.fs[data-s="3"] .fs-rings i:nth-child(2){border-color:rgba(209,255,162,.35)}
.fs-tag{font-family:var(--font-ui);font-weight:700;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#ff5470;border:1px solid #ff5470;background:rgba(255,84,112,.08);border-radius:99px;padding:6px 12px;white-space:nowrap}
.fs-tag--a{left:555px;top:26px;--r:-8deg}.fs-tag--c{left:497px;top:654px;--r:14deg}
.fs-post{left:259px;top:102px;width:320px;padding:14px}
.fs-post .ig-h{height:32px;font-size:12px}.fs-post .ig-h small{font-size:9px}.fs-post .ig-logo{width:26px;height:26px}.fs-post .ig-a{font-size:18px}.fs-post .ig-c{font-size:13px}
.fs-buy{left:264px;top:114px;width:307px;padding:28px 16px 18px;background:#fff;color:#111;border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.fs-buy .grab{position:absolute;left:136px;top:9px;width:35px;height:4px;border-radius:2px;background:#ccc}
.fs-buy .ph{position:relative;height:236px;border-radius:4px;overflow:hidden}
.fs-buy .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.fs-buy .ph span{position:absolute;left:12px;top:12px;background:rgba(0,0,0,.6);color:#fff;font-size:10px;padding:4px 9px;border-radius:99px}
.fs-buy .t{display:block;margin-top:14px;font-size:19px}
.fs-buy .pr{display:flex;align-items:center;justify-content:space-between}
.fs-buy strong{font-family:var(--font-ui);font-size:34px}
.fs-buy .sw{display:flex;gap:6px}.fs-buy .sw i{width:22px;height:22px;border-radius:50%}.fs-buy .sw i.on{box-shadow:0 0 0 2px #fff,0 0 0 3px #d1ffa2}
.fs-buy small{font-size:11px;color:#777}
.fs-buy .btn{margin-top:16px;height:50px;border-radius:99px;background:#111;color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px}
.fs-ext{left:8px;top:545px;width:191px;padding:12px;background:#fff;color:#111;border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.5);--r:-5deg}
.fs-ext .eh{display:flex;gap:7px;align-items:center}
.fs-ext .ei{width:33px;height:33px;border-radius:8px;background:#ff5470;display:grid;place-items:center}
.fs-ext b{display:block;font-size:14px}.fs-ext small{font-size:10px;color:#888}
.fs-ext .es{display:inline-block;margin:8px 0 6px;padding:5px 9px;border-radius:6px;background:#ffe4e9;color:#ff3d63;font-family:var(--font-ui);font-weight:700;font-size:9px;letter-spacing:.06em;text-transform:uppercase}
.fs-ext .et{display:block;color:#222}
.fs-sale{left:231px;top:256px;width:374px;display:flex;align-items:center;gap:22px;padding:24px;background:#fff;color:#14141a;border-radius:24px;box-shadow:0 0 60px rgba(209,255,163,.35),0 24px 60px rgba(0,0,0,.55)}
.fs-sale>img{width:93px;height:123px;object-fit:contain}
.fs-sale small{display:block;font-size:19px;color:#77777f}.fs-sale div small:last-child{font-size:14px}
.fs-sale strong{display:block;font-family:var(--font-ui);font-size:48px;line-height:1.2}
.fs-sale .ck{position:absolute;left:273px;top:-18px;width:48px;height:48px;border-radius:50%;background:#7ed957;color:#05040c;display:grid;place-items:center;font-size:26px;font-weight:700}
.fs-sale .av{position:absolute;left:313px;top:-18px;width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid #d1ffa2}
.fs-pay{left:212px;top:101px;width:412px;height:497px;padding:112px 40px 0;border-radius:22px;background:#17171c;border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 70px rgba(0,0,0,.6);text-align:center;display:flex;flex-direction:column;align-items:center}
.fs-pay .av{position:absolute;left:153px;top:-56px;width:104px;height:104px;border-radius:50%;object-fit:cover;border:3px solid var(--lime)}
.fs-pay .h{font-size:17px;margin-top:-58px}
.fs-pay .by{margin-top:18px;font-family:var(--font-ui);font-weight:700;font-size:11px;letter-spacing:.14em;color:var(--lime)}
.fs-pay .lg{height:46px;width:auto;margin-top:8px}
.fs-pay .amt{font-family:var(--font-ui);font-size:62px;line-height:1.2;margin-top:12px;font-variant-numeric:tabular-nums}
.fs-pay .er{font-size:14px;color:rgba(255,255,255,.55)}
.fs-pay dl{width:100%;display:grid;grid-template-columns:1fr auto;gap:24px 0;margin:24px 0 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:14px;text-align:left}
.fs-pay dt{color:rgba(255,255,255,.6)}.fs-pay dd{margin:0;font-weight:700;text-align:right}
.fs-toast{display:flex;align-items:center;gap:12px;padding:10px 18px 10px 10px;background:#fff;color:#111;border-radius:12px;box-shadow:0 14px 34px rgba(0,0,0,.45);white-space:nowrap}
.fs-toast i{width:40px;height:40px;border-radius:50%;background:#d1ffa2;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:17px}
.fs-toast b{display:block;font-size:14px}.fs-toast small{font-size:12px;color:#777}

/* scene states — default hidden */
.fs-tag,.fs-buy,.fs-ext,.fs-sale,.fs-pay,.fs-toast{opacity:0;pointer-events:none}
.fs-tag{transform:rotate(var(--r)) scale(.85)}
.fs-buy{transform:translateY(40px) scale(.96)}
.fs-ext{transform:translate(-30px,20px) rotate(var(--r))}
.fs-sale{transform:scale(.8)}
.fs-pay{transform:translateY(40px) scale(.95)}
.fs-toast{transform:translateY(16px) scale(.9)}
/* 1: post */
.fs:not([data-s="1"]) .fs-post{opacity:0;transform:scale(.94);filter:blur(4px)}
/* 2: buy sheet + extension attacks */
.fs[data-s="2"] .fs-buy{opacity:1;transform:none}
.fs[data-s="2"] .fs-ext{opacity:1;transform:rotate(var(--r));transition-delay:.7s}
.fs[data-s="2"] .fs-tag,.fs[data-s="3"] .fs-tag{opacity:1;transform:rotate(var(--r));transition-delay:1.1s}
.fs[data-s="2"] .fs-tag--c{transition-delay:1.35s}
/* 3: sale confirmed, extension rejected */
.fs[data-s="3"] .fs-sale{opacity:1;transform:none;transition-delay:.15s}
.fs[data-s="3"] .fs-ext{opacity:.35;transform:translate(-18px,12px) rotate(var(--r)) scale(.96);filter:grayscale(1) blur(1.5px)}
.fs[data-s="3"] .fs-tag{opacity:.35;transition-delay:0s}
.fs[data-s="3"] .fs-sale .ck{animation:fsPop .5s .6s both}
/* 4: payout */
.fs[data-s="4"] .fs-pay{opacity:1;transform:none}
.fs[data-s="4"] .fs-toast{opacity:1;transform:none;transition-delay:var(--d)}
@keyframes fsPop{0%{transform:scale(0)}70%{transform:scale(1.2)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.fs>*{transition:none!important}}
@media (max-width:1100px){.fraud-art{max-width:720px;width:100%;margin:0 auto}}
@media (max-width:760px){.fraud-art{padding:0}}

/* Fraud step tabs (Figma option G, 543:7815) */
.fs-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:500px;margin-top:20px}
.fs-nav button{background:none;border:0;padding:0 0 4px;text-align:left;cursor:pointer;color:#fff;font-family:var(--font-ui);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.fs-nav i{position:relative;display:block;height:3px;border-radius:2px;background:rgba(255,255,255,.15);overflow:hidden;margin-bottom:12px}
.fs-nav i::after{content:"";position:absolute;inset:0;background:var(--lime);transform:scaleX(0);transform-origin:0 50%}
.fs-nav .done i::after{transform:none;opacity:.5}
.fs-nav .on i::after{animation:fsFill var(--t,3s) linear forwards}
.fs-nav span{opacity:.4;transition:opacity .3s;white-space:nowrap}
.fs-nav .on span,.fs-nav button:hover span{opacity:1}
.fs-nav button:focus-visible{outline:2px solid var(--lime);outline-offset:4px;border-radius:2px}
.fs-cap{margin:0;min-height:1.4em;font-family:var(--font-ui);font-weight:500;font-size:18px;color:var(--lime);transition:opacity .2s}
@keyframes fsFill{to{transform:scaleX(1)}}
@media (max-width:600px){.fs-nav span{font-size:10px;white-space:normal}.fs-cap{font-size:16px}}

/* Exaggerated block (scene 3) */
.fs-ext .stamp{position:absolute;left:50%;top:50%;padding:6px 14px;border:3px solid #ff3d63;border-radius:8px;color:#ff3d63;background:rgba(255,255,255,.92);font-family:var(--font-display);font-weight:700;font-size:26px;letter-spacing:.08em;text-transform:uppercase;opacity:0;transform:translate(-50%,-50%) rotate(-14deg) scale(2.6);pointer-events:none}
.fs-tag::after{content:"";position:absolute;left:6px;right:6px;top:50%;height:2px;background:#ff5470;transform:scaleX(0);transform-origin:0 50%}
.fs-tag{position:absolute}
.fs[data-s="3"] .fs-ext{opacity:1;filter:none;transform:rotate(var(--r));animation:fsBlock 1.8s cubic-bezier(.3,.7,.2,1) forwards}
.fs[data-s="3"] .fs-ext .stamp{animation:fsStamp .45s .55s cubic-bezier(.2,1.4,.4,1) forwards}
.fs[data-s="3"] .fs-tag{opacity:1;animation:fsTag 1.6s cubic-bezier(.3,.7,.2,1) forwards}
.fs[data-s="3"] .fs-tag--c{animation-delay:.15s}
.fs[data-s="3"] .fs-tag::after{animation:fsStrike .35s .35s ease-out forwards}
.fs[data-s="3"] .fs-tag--c::after{animation-delay:.5s}
.fs[data-s="3"] .fs-sale{transition-delay:.9s}
@keyframes fsBlock{
0%{transform:rotate(var(--r))}
8%{transform:translateX(-14px) rotate(calc(var(--r) - 4deg))}
16%{transform:translateX(12px) rotate(calc(var(--r) + 4deg))}
24%{transform:translateX(-9px) rotate(var(--r))}
32%{transform:translateX(6px) rotate(var(--r));box-shadow:0 0 0 4px rgba(255,61,99,.9),0 0 50px rgba(255,61,99,.7)}
55%{transform:scale(1.04) rotate(var(--r));opacity:1;filter:none;box-shadow:0 0 0 4px rgba(255,61,99,.9),0 0 50px rgba(255,61,99,.6)}
100%{transform:translate(-40px,40px) rotate(calc(var(--r) - 10deg)) scale(.86);opacity:.3;filter:grayscale(1) blur(2px);box-shadow:none}}
@keyframes fsStamp{to{opacity:1;transform:translate(-50%,-50%) rotate(-14deg) scale(1)}}
@keyframes fsStrike{to{transform:scaleX(1)}}
@keyframes fsTag{
0%{transform:rotate(var(--r))}
10%{transform:translateX(-8px) rotate(calc(var(--r) - 3deg))}
20%{transform:translateX(8px) rotate(calc(var(--r) + 3deg))}
30%{transform:translateX(-4px) rotate(var(--r));background:rgba(255,84,112,.3);box-shadow:0 0 24px rgba(255,84,112,.6)}
60%{transform:rotate(var(--r)) scale(1.05);opacity:1;background:rgba(255,84,112,.3)}
100%{transform:translateY(-16px) rotate(var(--r)) scale(.9);opacity:.25}}
@media (prefers-reduced-motion:reduce){.fs *{animation:none!important}}
.fs[data-s="3"] .fs-ext{animation:fsBlock2 2.6s cubic-bezier(.3,.7,.2,1) forwards}
.fs[data-s="3"] .fs-ext .stamp{animation-delay:.5s}
.fs[data-s="3"] .fs-tag{animation-duration:2.4s}
.fs[data-s="3"] .fs-sale{transition-delay:1.5s}
@keyframes fsBlock2{
0%{transform:rotate(var(--r))}
6%{transform:translateX(-14px) rotate(calc(var(--r) - 4deg))}
12%{transform:translateX(12px) rotate(calc(var(--r) + 4deg))}
18%{transform:translateX(-9px) rotate(var(--r))}
24%{transform:translateX(6px) rotate(var(--r));box-shadow:0 0 0 4px rgba(255,61,99,.9),0 0 50px rgba(255,61,99,.7)}
30%{transform:scale(1.08) rotate(var(--r))}
65%{transform:scale(1.04) rotate(var(--r));opacity:1;filter:none;box-shadow:0 0 0 4px rgba(255,61,99,.9),0 0 50px rgba(255,61,99,.6)}
100%{transform:translate(-40px,40px) rotate(calc(var(--r) - 10deg)) scale(.86);opacity:.3;filter:grayscale(1) blur(2px);box-shadow:none}}

/* Block lands 3/4 through the "Protected" step (4.6s step → starts at 3.45s) */
.fs[data-s="2"] .fs-ext{animation:fsBlock2 1.6s 3.45s cubic-bezier(.3,.7,.2,1) forwards}
.fs[data-s="2"] .fs-ext .stamp{animation:fsStamp .4s 3.75s cubic-bezier(.2,1.4,.4,1) forwards}
.fs[data-s="2"] .fs-tag{animation:fsTag 1.5s 3.45s cubic-bezier(.3,.7,.2,1) forwards}
.fs[data-s="2"] .fs-tag--c{animation-delay:3.55s}
.fs[data-s="2"] .fs-tag::after{animation:fsStrike .3s 3.65s ease-out forwards}
.fs[data-s="2"] .fs-tag--c::after{animation-delay:3.75s}
/* Verified: stays blocked, sale card comes in right away */
.fs[data-s="3"] .fs-ext{animation:none;opacity:.3;filter:grayscale(1) blur(2px);transform:translate(-40px,40px) rotate(calc(var(--r) - 10deg)) scale(.86);transition-delay:0s}
.fs[data-s="3"] .fs-ext .stamp{animation:none;opacity:1;transform:translate(-50%,-50%) rotate(-14deg) scale(1)}
.fs[data-s="3"] .fs-tag{animation:none;opacity:.25;transform:translateY(-16px) rotate(var(--r)) scale(.9);transition-delay:0s}
.fs[data-s="3"] .fs-tag::after{animation:none;transform:none}
.fs[data-s="3"] .fs-sale{transition-delay:.15s}
.fs-cap{min-height:2.8em;max-width:500px}
/* Verified: blocked items fully fade out 3/4 through the step (2.8s → 2.1s) */
.fs[data-s="3"] .fs-ext,.fs[data-s="3"] .fs-tag{animation:fsGone .5s 2.1s ease forwards}
@keyframes fsGone{to{opacity:0}}
/* Verified: blocked items shrink & fade gradually across the step */
.fs[data-s="3"] .fs-ext{transition:none;animation:fsShrinkExt 2.6s cubic-bezier(.45,0,.55,1) forwards}
.fs[data-s="3"] .fs-tag{transition:none;animation:fsShrinkTag 2.4s cubic-bezier(.45,0,.55,1) forwards}
.fs[data-s="3"] .fs-tag--c{animation-delay:.1s}
@keyframes fsShrinkExt{
from{opacity:.3;filter:grayscale(1) blur(2px);transform:translate(-40px,40px) rotate(calc(var(--r) - 10deg)) scale(.86)}
to{opacity:0;filter:grayscale(1) blur(4px);transform:translate(-70px,70px) rotate(calc(var(--r) - 16deg)) scale(.35)}}
@keyframes fsShrinkTag{
from{opacity:.25;transform:translateY(-16px) rotate(var(--r)) scale(.9)}
to{opacity:0;transform:translateY(-28px) rotate(var(--r)) scale(.4)}}

/* Hero: WebGL orb backdrop + responsive scaled stage */
.hero-dots{display:none}
.hero-art{position:relative;width:100%;max-width:620px;height:560px;justify-self:end}
.hero-stage{position:absolute;left:0;top:0;width:620px;height:560px;transform-origin:0 0}
.hero-gl{position:absolute;left:50%;top:50%;width:1150px;height:1150px;transform:translate(-50%,-50%);pointer-events:none;opacity:.9}
.hero-gl canvas,.hero-gl img{display:block;width:100%;height:100%}
@media (max-width:1100px){
.nw-hero .wrap{grid-template-columns:1fr;justify-items:center;text-align:center}
.nw-hero h1{margin-inline:auto}
.nw-hero .lede{margin-inline:auto}
.hero-art{justify-self:center;margin:24px auto 0;transform:none!important;width:100%}
.hero-gl{width:180%;height:auto;aspect-ratio:1}
}
@media (max-width:760px){
.hero-art{transform:none!important;width:100%!important;height:auto;margin-top:16px}
.nw-hero{padding-top:110px}
}
.hero-stage{text-align:left}
.nw-hero .wrap>div:first-child{position:relative;z-index:2}
@media (max-width:760px){.hero-gl{width:140%}}
/* Agreed outcomes: scale visual block to fit on tablet/mobile */
.agreed-stage{position:absolute;left:0;top:0;width:640px;height:470px;transform-origin:0 0}
@media (max-width:1100px){.agreed-art{transform:none!important;width:100%!important;max-width:640px;margin:32px auto 0}}
@media (max-width:760px){.agreed .steps{margin-top:40px}.steps li{font-size:11px;letter-spacing:.06em}}
/* Agreed visual scales at every width so it never overflows its column */
.agreed-art{width:100%;max-width:640px;min-width:0}
.agreed-grid>*{min-width:0}
/* Hub: live WebGL orb instead of static image */
.hub-orb{background:none;opacity:1;width:900px;aspect-ratio:1}
.hub-orb canvas,.hub-orb img{display:block;width:100%;height:100%}
/* Breathing room: hero fills the screen, hub (and its rings) start below the fold */
.nw-hero{min-height:100vh;min-height:100svh}
.hub{padding-top:200px}
@media (max-width:1100px){.nw-hero{min-height:0}.hub{padding-top:120px}}

/* Agreed outcomes: animated progress (line fills, steps check off in turn) */
.steps::before{border-top-color:rgba(255,255,255,.12)}
.steps::after{content:"";position:absolute;left:16.6%;right:16.6%;top:16px;border-top:2px solid var(--lime);margin-top:-.5px;transform:scaleX(0);transform-origin:0 50%;box-shadow:0 0 12px rgba(209,255,162,.5)}
.steps li{z-index:1;color:rgba(255,255,255,.35);transition:color .4s}
.steps li::before{background:#1a1a22;color:transparent;box-shadow:0 0 0 4px rgba(255,255,255,.06);transition:background .35s,color .35s,box-shadow .35s,transform .35s cubic-bezier(.2,1.6,.4,1)}
.js .steps.rv{opacity:1;transform:none}
.steps.in::after{animation:stFill 2.4s .3s cubic-bezier(.65,0,.35,1) forwards}
.steps.in li{animation:stTxt .4s forwards}
.steps.in li::before{animation:stDot .5s cubic-bezier(.2,1.6,.4,1) forwards}
.steps.in li:nth-child(1),.steps.in li:nth-child(1)::before{animation-delay:.3s}
.steps.in li:nth-child(2),.steps.in li:nth-child(2)::before{animation-delay:1.5s}
.steps.in li:nth-child(3),.steps.in li:nth-child(3)::before{animation-delay:2.7s}
@keyframes stFill{to{transform:scaleX(1)}}
@keyframes stTxt{to{color:rgba(255,255,255,.9)}}
@keyframes stDot{0%{transform:scale(1)}50%{transform:scale(1.3)}100%{transform:scale(1);background:var(--lime);color:#05040c;box-shadow:0 0 0 4px rgba(209,255,162,.18),0 0 18px rgba(209,255,162,.45)}}
@media (prefers-reduced-motion:reduce){.steps::after{transform:none}.steps li{color:rgba(255,255,255,.9)}.steps li::before{background:var(--lime);color:#05040c}}

/* Shared performance record: rows write in one by one and check off */
.ledger{position:relative;overflow:hidden}
.lrow{position:relative;opacity:.25;transition:opacity .45s}
.lrow::after{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--lime),transparent);transform:scaleX(0);opacity:0}
.lrow i{background:#1a1a22;color:transparent;box-shadow:0 0 0 3px rgba(255,255,255,.06);transition:none}
.lrow span{clip-path:inset(0 100% 0 0)}
.ledger.in .lrow{animation:lrIn .45s forwards}
.ledger.in .lrow::after{animation:lrScan .9s ease-out forwards}
.ledger.in .lrow span{animation:lrType .8s steps(28,end) forwards}
.ledger.in .lrow i{animation:lrChk .5s cubic-bezier(.2,1.6,.4,1) forwards}
.ledger.in .lrow:nth-of-type(1),.ledger.in .lrow:nth-of-type(1)::after,.ledger.in .lrow:nth-of-type(1) span{animation-delay:.4s}
.ledger.in .lrow:nth-of-type(1) i{animation-delay:1.1s}
.ledger.in .lrow:nth-of-type(2),.ledger.in .lrow:nth-of-type(2)::after,.ledger.in .lrow:nth-of-type(2) span{animation-delay:1.2s}
.ledger.in .lrow:nth-of-type(2) i{animation-delay:1.9s}
.ledger.in .lrow:nth-of-type(3),.ledger.in .lrow:nth-of-type(3)::after,.ledger.in .lrow:nth-of-type(3) span{animation-delay:2s}
.ledger.in .lrow:nth-of-type(3) i{animation-delay:2.7s}
.ledger.in .lrow:nth-of-type(4),.ledger.in .lrow:nth-of-type(4)::after,.ledger.in .lrow:nth-of-type(4) span{animation-delay:2.8s}
.ledger.in .lrow:nth-of-type(4) i{animation-delay:3.5s}
@keyframes lrIn{to{opacity:1}}
@keyframes lrScan{0%{transform:scaleX(0);opacity:1}70%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes lrType{to{clip-path:inset(0 0 0 0)}}
@keyframes lrChk{0%{transform:scale(.6)}60%{transform:scale(1.25)}100%{transform:scale(1);background:var(--lime);color:#05040c;box-shadow:0 0 0 3px rgba(209,255,162,.18),0 0 16px rgba(209,255,162,.45)}}
@media (prefers-reduced-motion:reduce){.lrow{opacity:1}.lrow span{clip-path:none}.lrow i{background:var(--lime);color:#05040c}}
/* Block now lands halfway through the "Secured" step (4.6s step → starts at 2.3s) */
.fs[data-s="2"] .fs-ext{animation:fsBlock2 1.6s 2.3s cubic-bezier(.3,.7,.2,1) forwards}
.fs[data-s="2"] .fs-ext .stamp{animation:fsStamp .4s 2.6s cubic-bezier(.2,1.4,.4,1) forwards}
.fs[data-s="2"] .fs-tag{animation:fsTag 1.5s 2.3s cubic-bezier(.3,.7,.2,1) forwards}
.fs[data-s="2"] .fs-tag--c{animation-delay:2.4s}
.fs[data-s="2"] .fs-tag::after{animation:fsStrike .3s 2.5s ease-out forwards}
.fs[data-s="2"] .fs-tag--c::after{animation-delay:2.6s}

/* hub refresh 2026-10-23 */
.hub .pill{background:var(--lime);color:#000;font-family:var(--font-ui);font-weight:500;font-size:16px;padding:10px 22px}
.hub-mid::before{display:none!important}
.side{min-height:122px;padding:18px 24px;border-radius:14px;border:1.5px solid rgba(255,255,255,.55)}
.side--d{background:linear-gradient(180deg,#8a1ad6 0%,#6a0aa8 55%,#55068a 100%)}
.side--s{background:linear-gradient(180deg,#4b5fe0 0%,#3a47c4 55%,#2b35a6 100%)}
.side h3{font-family:var(--font-display);font-size:20px;letter-spacing:.02em;margin-bottom:6px}
.side p{font-size:14px;line-height:1.3;color:rgba(255,255,255,.92)}
.hub-foot{margin-top:14px;color:#000}
@media (min-width:761px){
 .hub-mid{grid-template-columns:1fr 1fr;gap:90px}
 .hub-mid .pill{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;z-index:3;box-shadow:0 0 0 0 transparent}
 .hub-mid .side--d{grid-column:1;grid-row:1}
 .hub-mid .side--s{grid-column:2;grid-row:1}
}
@media (max-width:760px){
 .hub-mid{grid-template-columns:1fr;gap:28px}
 .hub-mid .pill{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;z-index:3;order:0}
 .hub-mid .side{gap:18px;padding:18px 20px}
}
@media (max-width:760px){
 .hub-mid{gap:0}
 .hub-mid .pill{position:relative;left:auto;top:auto;transform:none;justify-self:center;margin:-10px 0}
}