.product-demo{position:relative;overflow:hidden;padding:118px 40px 130px;background:#eef1f8;border-top:1px solid #e4e8f1;border-bottom:1px solid #e4e8f1}
.demo-heading{text-align:center;position:relative;z-index:2}
.demo-heading h2{font-size:clamp(44px,4.8vw,72px)}
.demo-heading p{font-size:16px;margin-top:20px}
.demo-tabs{position:relative;z-index:4;display:flex;justify-content:center;gap:8px;margin:48px auto 44px}
.demo-tabs button{position:relative;min-width:132px;padding:14px 20px;border:1px solid transparent;border-radius:8px;background:transparent;color:#858c9e;font:12px var(--mono);transition:color .3s,background .3s,border-color .3s}
.demo-tabs button:after{content:"";position:absolute;left:22px;right:22px;bottom:-1px;height:2px;background:linear-gradient(90deg,#45c7ef,#4e6bf5,#7958d8);transform:scaleX(0);transition:transform .3s}
.demo-tabs button[aria-selected=true]{color:#181a21;background:#f8f9fd;border-color:#d9deea;box-shadow:0 8px 25px #32446a08}
.demo-tabs button[aria-selected=true]:after{transform:scaleX(1)}
.demo-stage{position:relative;z-index:2;max-width:1030px;margin:auto;display:grid;grid-template-columns:280px 430px;gap:90px;align-items:center;justify-content:center}
.demo-context span{font:10px var(--mono);color:#8790a6;letter-spacing:1px}
.demo-context h3{font-size:42px;color:var(--blue);margin-top:15px}
.demo-context p{font-size:17px;color:#4e5568;margin-top:13px;min-height:54px}
.demo-rule{height:1px;background:linear-gradient(90deg,#4e6bf5,#745ada,transparent);margin:30px 0 18px}
.demo-context small{font:9px/1.8 var(--mono);color:#9299aa;letter-spacing:.5px}
.demo-visual{position:relative;display:grid;place-items:center;min-height:710px}
.demo-visual:before{content:"";position:absolute;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,#607bf51a 0,#735ee008 37%,transparent 68%);filter:blur(2px)}
.demo-orbit{position:absolute;border:1px solid #8ca0e822;border-radius:50%;pointer-events:none}
.orbit-one{width:570px;height:270px;transform:rotate(-13deg)}
.orbit-two{width:500px;height:420px;transform:rotate(22deg)}
.demo-device{position:relative;z-index:2;width:430px;min-height:690px;overflow:hidden;background:#fbfcff;border:1px solid #d9dfeb;border-radius:34px;box-shadow:0 30px 70px #26386716,0 4px 12px #303d6008;padding:10px 13px 18px}
.demo-device:before{content:"";display:block;width:54px;height:4px;border-radius:4px;background:#d8dce8;margin:1px auto 9px}
.demo-appbar{height:49px;display:flex;align-items:center;justify-content:space-between;padding:0 7px;border-bottom:1px solid #e9edf4}
.demo-appbar>div{display:flex;align-items:center;gap:7px}.demo-appbar img{border-radius:7px}.demo-appbar b{font-size:19px;letter-spacing:-.8px}.demo-appbar>span{font:8px var(--mono);letter-spacing:1px;color:#8c93a5;border:1px solid #e0e4ee;border-radius:12px;padding:5px 8px}
.demo-screen{position:relative;min-height:555px;overflow:hidden;padding:20px 15px 10px}
.demo-panel{animation:demo-enter .42s ease both}
.demo-screen.leaving .demo-panel{animation:demo-leave .22s ease both}
@keyframes demo-enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes demo-leave{to{opacity:0;transform:translateY(-12px)}}
.portfolio-top{position:relative;padding:22px;border-radius:19px;background:linear-gradient(125deg,#111b3d,#23356f);color:white;overflow:hidden}
.portfolio-top:after{content:"";position:absolute;width:170px;height:170px;border-radius:50%;right:-55px;top:-80px;background:#7390ff22}
.portfolio-top>span,.portfolio-top>small{display:block;color:#aebae1;font-size:11px}.portfolio-top>small{position:absolute;right:20px;top:23px;font-size:9px}.portfolio-top strong{display:block;font-size:38px;font-weight:500;letter-spacing:-1.8px;margin:10px 0 4px}.portfolio-top b{font-size:10px;color:#55d6b1;font-weight:500}
.portfolio-chart{display:block;width:100%;height:86px;margin:14px 0 3px}.chart-line{fill:none;stroke:#526ef4;stroke-width:2;stroke-linecap:round;stroke-dasharray:500;animation:chart-draw .7s ease both}.chart-area{fill:url(#chart-fill);opacity:0;animation:fade-in .5s .25s both}@keyframes chart-draw{from{stroke-dashoffset:500}to{stroke-dashoffset:0}}@keyframes fade-in{to{opacity:1}}
.demo-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:5px 0 22px}.demo-actions button{border:1px solid #e1e6f1;background:white;border-radius:12px;padding:10px 5px;color:#626b83;font-size:10px}.demo-actions i{display:grid;place-items:center;width:25px;height:25px;border-radius:8px;margin:0 auto 6px;background:#edf1ff;color:#4e6bf5;font-style:normal;font-size:15px}
.asset-heading{display:flex;justify-content:space-between;font-size:11px;font-weight:600;margin-bottom:5px}.asset-heading small{font-size:9px;color:#9aa1b2;font-weight:400}
.demo-asset-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #eceff5;opacity:0;animation:row-enter .45s forwards}.demo-asset-row:nth-child(2){animation-delay:.12s}.demo-asset-row:nth-child(3){animation-delay:.18s}.demo-asset-row:nth-child(4){animation-delay:.24s}.demo-asset-row:nth-child(5){animation-delay:.3s}@keyframes row-enter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.demo-asset-row img{width:28px;height:28px;border-radius:50%;object-fit:cover}.demo-asset-row span{min-width:0}.demo-asset-row b{display:block;font-size:11px}.demo-asset-row small{display:block;font-size:8px;color:#929aac;margin-top:3px}.demo-asset-row strong{margin-left:auto;font-size:11px;font-weight:500}
.demo-appnav{height:51px;display:flex;align-items:center;justify-content:space-around;border-top:1px solid #e8ebf2;color:#a0a6b5;font-size:16px}.demo-appnav span{display:grid;place-items:center;gap:2px;min-width:58px}.demo-appnav small{font-size:7px}.demo-appnav .active{color:#4e6bf5}
.wallet-screen-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.wallet-screen-title h4{font-size:25px;font-weight:550;letter-spacing:-.8px}.wallet-screen-title small{font:8px var(--mono);color:#8f96a8}
.form-card{background:white;border:1px solid #e2e6ef;border-radius:16px;padding:16px;margin-bottom:12px;box-shadow:0 8px 22px #3c4d7508}.form-card label{font-size:9px;color:#8f96a8;margin:0 0 9px}.field-row{display:flex;align-items:center;gap:9px}.field-row img{width:28px;height:28px;border-radius:50%;object-fit:cover}.field-row b{font-size:13px}.field-row small{display:block;color:#9299aa;font-size:8px;margin-top:3px}.field-row strong{margin-left:auto;font-size:19px;font-weight:500}.field-row input{min-width:0;width:100%;border:0;background:transparent;font-size:20px;color:#202433;outline:0}.token-choice{display:flex;align-items:center;gap:7px;border:0;background:#f0f3fb;border-radius:10px;padding:6px 8px}.token-choice img{width:25px;height:25px;border-radius:50%}.token-choice span{font-size:11px;font-weight:600}
.swap-switch{display:grid;place-items:center;width:34px;height:34px;border:1px solid #dce2ef;border-radius:10px;background:#f8f9fd;color:#4e6bf5;margin:-18px auto -6px;position:relative;z-index:2;transition:transform .3s}.swap-switch.turn{transform:rotate(180deg)}
.rate-card{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:15px 2px;color:#858da2;font-size:9px}.rate-card span:nth-child(even){text-align:right;color:#555f77}.demo-primary{width:100%;min-height:48px;border:0;border-radius:12px;color:white;background:linear-gradient(100deg,#4e6bf5,#705cde);font:10px var(--mono);letter-spacing:.5px;margin-top:8px}.demo-primary[disabled]{background:#c8cfdf}
.step-track{display:flex;align-items:center;justify-content:space-between;margin:-3px 0 19px}.step-track span{display:flex;align-items:center;gap:5px;color:#a1a7b6;font-size:8px}.step-track span:before{content:"";width:6px;height:6px;border-radius:50%;background:#d1d6e1}.step-track span.active{color:#4e6bf5}.step-track span.active:before{background:#4e6bf5;box-shadow:0 0 0 3px #e7ebff}
.input-block{opacity:0;transform:translateY(7px);animation:row-enter .36s forwards}.input-block:nth-of-type(2){animation-delay:.1s}.input-block:nth-of-type(3){animation-delay:.2s}.input-block:nth-of-type(4){animation-delay:.3s}
.address{font:10px var(--mono);color:#40495f;word-break:break-all}.fee-summary{background:#f1f4fa;border-radius:12px;padding:13px;margin-top:13px;display:grid;gap:8px}.fee-summary span{display:flex;justify-content:space-between;color:#858da2;font-size:9px}.fee-summary b{color:#50586d;font-weight:500}
.network-pills{display:flex;gap:7px}.network-pills button{border:1px solid #e0e5ee;background:#f7f8fb;border-radius:8px;padding:8px 10px;color:#8b92a5;font-size:9px}.network-pills button.active{border-color:#9babea;background:#edf1ff;color:#4e6bf5}
.demo-mobile-caption{display:none;text-align:center;margin-top:21px;font-size:14px;color:#666e82}
.product-demo:not(.visible) .demo-stage,.product-demo:not(.visible) .demo-tabs,.product-demo:not(.visible) .demo-heading{opacity:0;transform:translateY(12px)}.product-demo.visible .demo-stage,.product-demo.visible .demo-tabs,.product-demo.visible .demo-heading{transition:opacity .65s,transform .65s;opacity:1;transform:none}.product-demo.visible .demo-tabs{transition-delay:.08s}.product-demo.visible .demo-stage{transition-delay:.16s}
@media(max-width:900px){.demo-stage{grid-template-columns:1fr;gap:24px}.demo-context{text-align:center;max-width:430px;margin:auto}.demo-context p{min-height:0}.demo-rule,.demo-context small{display:none}.demo-visual{min-height:700px}}
@media(max-width:760px){.product-demo{padding:88px 14px 95px}.demo-heading{padding:0 12px}.demo-heading h2{font-size:45px}.demo-heading p{font-size:14px}.demo-tabs{justify-content:flex-start;overflow-x:auto;padding:4px 2px 8px;margin:35px auto 25px;scrollbar-width:none}.demo-tabs::-webkit-scrollbar{display:none}.demo-tabs button{min-width:112px;padding:13px 15px}.demo-context{display:none}.demo-visual{min-height:650px}.demo-device{width:min(100%,430px);min-height:640px;border-radius:28px;padding-inline:10px}.demo-screen{min-height:508px;padding:17px 11px 8px}.portfolio-top{padding:18px}.portfolio-top strong{font-size:33px}.portfolio-chart{height:70px}.demo-asset-row{padding:9px 0}.demo-orbit{opacity:.6}.orbit-one{width:470px}.orbit-two{width:420px}.demo-mobile-caption{display:block}.wallet-screen-title{margin-bottom:18px}.form-card{padding:14px}.demo-appnav{height:48px}}
@media(max-width:390px){.demo-heading h2{font-size:40px}.demo-device{border-radius:25px}.demo-screen{padding-inline:8px}.form-card{padding:12px}.portfolio-top strong{font-size:30px}}
@media(prefers-reduced-motion:reduce){.demo-panel,.demo-screen.leaving .demo-panel,.chart-line,.chart-area,.demo-asset-row,.input-block{animation:none!important;opacity:1;transform:none}.product-demo:not(.visible) .demo-stage,.product-demo:not(.visible) .demo-tabs,.product-demo:not(.visible) .demo-heading{opacity:1;transform:none}}

/* Product preview text remains compact but readable. */
.demo-tabs button{font-size:13px}
.demo-context span,.demo-context small{font-size:12px;line-height:1.6}
.demo-appbar>span,.portfolio-top>span,.portfolio-top>small,.portfolio-top b{font-size:12px}
.demo-actions button,.asset-heading,.asset-heading small,.demo-asset-row b,.demo-asset-row small,.demo-asset-row strong,.demo-appnav small{font-size:12px}
.wallet-screen-title small,.form-card label,.field-row small,.token-choice span,.rate-card,.demo-primary,.step-track span,.address,.fee-summary span,.network-pills button{font-size:12px}
.demo-heading p,.demo-context p{font-size:16px;line-height:1.65}
@media(max-width:760px){.demo-heading p,.demo-mobile-caption{font-size:15px;line-height:1.65}.demo-tabs button{font-size:13px}}