.nx-comp { position: relative; isolation: isolate; overflow: hidden; padding: 82px 0 62px; background: radial-gradient(ellipse at 100% 65%,#004e8226,transparent 45%),radial-gradient(ellipse at 0 20%,#0069a41c,transparent 32%),#050c12; color: #f0f6fd; scroll-margin-top: 84px; border-top: 1px solid #163047; }
.nx-comp::before { content: ''; position: absolute; z-index: -1; inset: 0; background-image: linear-gradient(#1c4d6814 1px,transparent 1px),linear-gradient(90deg,#1c4d6814 1px,transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(#000,transparent 65%); }
.nx-comp::after { content: ''; position: absolute; z-index: -1; width: 750px; height: 550px; border: 1px solid #048fe06b; border-radius: 50%; top: 130px; left: -580px; box-shadow: 0 0 70px #0088f21a; transform: rotate(-30deg); }
.nx-comp-container { width: min(1400px,calc(100% - 64px)); margin: auto; }
.nx-comp-heading { text-align: center; margin: 0 auto 38px; }
.nx-comp-kicker { display: inline-flex; align-items: center; gap: 20px; color: #61caff; letter-spacing: 2.4px; font-size: 12px; font-weight: 700; }
.nx-comp-kicker::before,.nx-comp-kicker::after { content: ''; width: 42px; height: 1px; background: #159bd4; }
.nx-comp-heading h2 { margin: 15px 0 18px; font-size: clamp(32px,3.6vw,52px); line-height: 1.15; letter-spacing: -1.5px; font-weight: 800; }
.nx-comp-heading h2 span { color: #2aaef4; }
.nx-comp-heading p { margin: 0; color: #a8b7c6; font-size: 16px; line-height: 1.6; }
.nx-comp-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.nx-comp-card { min-width: 0; position: relative; padding: 25px; border: 1px solid #24465b; border-radius: 22px; background: linear-gradient(130deg,#0b1720b3,#060d13ed); box-shadow: inset 0 1px #67cbff06,0 20px 40px #0002; display: flex; flex-direction: column; }
.nx-comp-card-head { display: flex; align-items: center; gap: 18px; }
.nx-comp-card-head > span { display: grid; place-items: center; width: 42px; height: 44px; border: 1px solid #18c6ff; border-radius: 11px; background: linear-gradient(140deg,#1288c2,#003470 70%,#075f9d); color: white; font-size: 17px; font-weight: 800; box-shadow: inset 0 0 12px #00bbff40,0 0 25px #0088d522; }
.nx-comp-card-head small { color: #b2c3d2; font-size: 10px; letter-spacing: .5px; }
.nx-comp-main { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0; align-items: center; flex: 1; margin: 15px 0 22px; }
.nx-comp-copy { position: relative; z-index: 1; }
.nx-comp-copy h3 { margin: 0 0 18px; font-size: clamp(21px,1.9vw,28px); letter-spacing: -.9px; line-height: 1.2; font-weight: 800; }
.nx-comp-copy h3 span { display: block; color: #21b6fb; }
.nx-comp-copy p { margin: 0; color: #b0bfcc; font-size: 12px; line-height: 1.55; }
.nx-comp-visual { position: relative; align-self: stretch; display: flex; align-items: end; min-height: 195px; margin: 0 -12px 0 -10px; }
.nx-comp-art { display: block; width: 100%; overflow: visible; filter: drop-shadow(0 7px 10px #008dea1c); }
.nx-comp-badge { position: absolute; top: -25px; right: 7px; padding: 8px 9px; background: linear-gradient(130deg,#071827,#003357); border: 1px solid #057ec3; border-radius: 9px; text-align: center; box-shadow: 0 8px 15px #0004; }
.nx-comp-badge::after { content: ''; position: absolute; width: 10px; height: 10px; background: #00263f; border-right: 1px solid #057ec3; border-bottom: 1px solid #057ec3; bottom: -6px; right: 18px; transform: skewY(35deg); }
.nx-comp-badge strong { display: block; color: #7fe6ff; font-size: 19px; }.nx-comp-badge small { display: block; color: #66cfff; font-size: 8px; margin-top: 3px; }
.nx-comp-reward { display: flex; align-items: center; gap: 13px; border: 1px solid #1e3b4f; border-radius: 15px; padding: 12px; background: #060f16a6; }
.nx-comp-icon { width: 56px; height: 56px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(140deg,#0a273a,#05121e); }
.nx-comp-icon svg { width: 29px; height: 31px; fill: none; stroke: #20bfff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.nx-comp-reward > div { min-width: 0; }.nx-comp-reward > div > span { color: #b9c9d7; font-size: 12px; }
.nx-comp-reward-value { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; row-gap: 4px; margin-top: 3px; }
.nx-comp-reward-value strong { color: #12b3f7; font-size: 27px; line-height: 1.1; font-weight: 800; letter-spacing: -.7px; }
.nx-comp-reward-value small { color: #9aacba; font-size: 8px; line-height: 1.5; max-width: 120px; }
.nx-comp-team .nx-comp-reward-value strong { font-size: 19px; }
.nx-comp-benefits { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 22px; border: 1px solid #1b303e; border-radius: 22px; padding: 16px 0; background: #050d12c9; }
.nx-comp-benefits > div { display: flex; align-items: center; gap: 18px; padding: 0 28px; position: relative; }
.nx-comp-benefits > div + div::before { content: ''; position: absolute; left: 0; height: 40px; width: 1px; background: #1c3340; }
.nx-comp-benefits p { margin: 0; }.nx-comp-benefits strong { display: block; font-size: 13px; font-weight: 500; line-height: 1.5; }.nx-comp-benefits p span { display: block; margin-top: 5px; color: #8496a6; font-size: 12px; line-height: 1.5; }
.nx-comp-terms { max-width: 1000px; margin: 18px auto 0; text-align: center; color: #748b9c; font-size: 10px; line-height: 1.7; }
@media (min-width:1600px) { .nx-comp-container { max-width: 1500px; }.nx-comp-main { min-height: 205px; }.nx-comp-copy p { font-size: 14px; }.nx-comp-visual { min-height: 225px; } }
@media (max-width:1100px) { .nx-comp-container { width: calc(100% - 40px); }.nx-comp-grid { gap: 12px; }.nx-comp-card { padding: 18px; }.nx-comp-main { grid-template-columns: 1fr; }.nx-comp-copy h3 { font-size: 25px; }.nx-comp-visual { width: 165px; min-height: 170px; margin: 30px auto 0; }.nx-comp-badge { top: -10px; right: -12px; }.nx-comp-benefits > div { padding: 0 16px; gap: 10px; }.nx-comp-benefits .nx-comp-icon { width: 42px; height: 42px; }.nx-comp-reward { gap: 8px; padding: 10px; }.nx-comp-reward .nx-comp-icon { width: 40px; height: 40px; }.nx-comp-reward-value strong { font-size: 24px; } }
@media (max-width:760px) { .nx-comp { padding: 66px 0 48px; }.nx-comp-heading p { font-size: 14px; }.nx-comp-break { display: none; }.nx-comp-kicker { gap: 12px; font-size: 10px; }.nx-comp-kicker::before,.nx-comp-kicker::after { width: 24px; }.nx-comp-grid { grid-template-columns: 1fr; gap: 16px; max-width: 520px; margin: auto; }.nx-comp-card { padding: 24px; }.nx-comp-main { grid-template-columns: 1.3fr 1fr; margin-top: 20px; }.nx-comp-visual { width: auto; min-height: 190px; margin: 0 -8px 0 0; }.nx-comp-copy h3 { font-size: 24px; }.nx-comp-copy p { font-size: 12px; }.nx-comp-badge { top: -8px; right: 0; }.nx-comp-reward-value small { max-width: none; }.nx-comp-benefits { max-width: 520px; margin: 20px auto 0; grid-template-columns: 1fr; gap: 18px; padding: 20px; }.nx-comp-benefits > div { padding: 0; gap: 16px; }.nx-comp-benefits > div + div::before { display: none; } }
@media (max-width:380px) { .nx-comp-container { width: calc(100% - 28px); }.nx-comp-card { padding: 18px; }.nx-comp-copy h3 { font-size: 22px; }.nx-comp-main { grid-template-columns: 1fr; }.nx-comp-visual { width: 160px; min-height: 165px; margin: 22px auto 0; }.nx-comp-heading h2 { font-size: 31px; }.nx-comp-badge { right: -15px; } }