﻿.nx-how { position:relative; isolation:isolate; overflow:hidden; padding:80px 0 45px; background:radial-gradient(ellipse at 65% 0,#03216460,transparent 52%),#020d16; color:#f1f6ff; border-top:1px solid #14314b; scroll-margin-top:84px; }
.nx-how::before { content:''; position:absolute; z-index:-1; inset:0; background-image:linear-gradient(#0d539720 1px,transparent 1px),linear-gradient(90deg,#0d539720 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(125deg,#000,transparent 40%); }
.nx-how::after { content:''; position:absolute; z-index:-1; width:650px; height:450px; top:100px; left:-550px; border-top:2px solid #0bb4ff; border-radius:50%; transform:rotate(-45deg); box-shadow:0 -7px 30px #034ed140; }
.nx-how-container { width:min(1280px,calc(100% - 64px)); margin:auto; }
.nx-how-heading { text-align:center; margin-bottom:62px; }
.nx-how-heading > span { color:#02cbff; font-size:12px; letter-spacing:3px; font-weight:700; display:inline-flex; align-items:center; gap:13px; }
.nx-how-heading > span::before,.nx-how-heading > span::after { content:''; width:20px; height:1px; background:#009dde; }
.nx-how-heading h2 { margin:14px 0 16px; font-size:clamp(32px,3.6vw,48px); letter-spacing:-1.6px; line-height:1.15; font-weight:800; }
.nx-how-heading em { color:#00acfa; font-style:normal; }
.nx-how-heading p { color:#b9cfe2; margin:0; font-size:16px; line-height:1.7; }
.nx-how-steps { position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; list-style:none; margin:0; padding:0; }
.nx-how-steps::before { content:''; position:absolute; left:8%; right:8%; top:-9px; border-top:1px dashed #00caff; }
.nx-how-step { position:relative; min-width:0; border:1px solid #083c59; border-radius:21px; background:linear-gradient(135deg,#03203260,#010e19d9); }
.nx-how-number { position:absolute; z-index:2; top:-29px; left:50%; transform:translateX(-50%); display:grid; place-items:center; width:46px; height:46px; border:2px solid #00cfff; border-radius:50%; background:linear-gradient(125deg,#052c51,#061128); box-shadow:0 0 18px #005dff60,inset 0 0 10px #006bff30; color:#00d9ff; font-size:20px; font-weight:800; }
.nx-how-step-link { height:100%; display:flex; flex-direction:column; align-items:center; padding:28px 17px 17px; border-radius:21px; transition:background .2s,box-shadow .2s; }
.nx-how-step-link:hover { background:#06305b38; box-shadow:0 0 24px #0088d51a; }.nx-how-step-link:focus-visible,.nx-how-start a:focus-visible { outline:2px solid #6ce1ff; outline-offset:4px; }
.nx-how-art { width:min(100%,190px); height:174px; flex:0 0 auto; filter:drop-shadow(0 4px 9px #003fe84d); }
.nx-how-copy { text-align:center; flex:1; }
.nx-how-copy h3 { font-size:17px; margin:12px 0 14px; line-height:1.3; letter-spacing:-.45px; }
.nx-how-copy p { margin:0; color:#afc8df; font-size:13px; line-height:1.65; }
.nx-how-feature { display:flex; align-items:center; gap:11px; width:100%; padding:9px; margin-top:20px; border:1px solid #0c2940; border-radius:12px; background:#01142270; font-size:12px; line-height:1.5; color:#c3ddf5; }
.nx-how-feature > span { display:grid; place-items:center; flex:0 0 auto; width:40px; height:42px; border:1px solid #114ade; border-radius:10px; color:#02c3ff; background:linear-gradient(135deg,#06395b,#080c2d); font-size:26px; }
.nx-how-chevron { display:none; }
.nx-how-benefits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:23px; padding:20px; border:1px solid #12425b; border-radius:19px; background:#020e1880; }
.nx-how-benefits > div { display:flex; align-items:center; gap:16px; padding:0 18px; }.nx-how-benefits > div + div { border-left:1px solid #123048; }
.nx-how-benefits > div > span { display:grid; place-items:center; width:54px; height:54px; flex:0 0 auto; border:1px solid #064e82; border-radius:50%; background:#02213a; color:#04c7ff; font-size:29px; }
.nx-how-benefits p { margin:0; }.nx-how-benefits strong { display:block; font-size:12px; }.nx-how-benefits small { display:block; margin-top:6px; color:#99b7d1; font-size:11px; line-height:1.5; }
.nx-how-start { display:none; }.nx-how-note { text-align:center; margin:20px auto 0; color:#7491aa; font-size:10px; line-height:1.7; max-width:980px; }
@media (max-width:1050px) and (min-width:701px) { .nx-how-steps { grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px 20px; }.nx-how-steps::before { display:none; }.nx-how-benefits { padding:16px 10px; }.nx-how-benefits > div { padding:0 10px; gap:10px; }.nx-how-benefits > div > span { width:40px; height:40px; } }
@media (max-width:700px) {
 .nx-how { padding:54px 0 32px; }.nx-how-container { width:calc(100% - 32px); max-width:500px; }.nx-how-heading { margin-bottom:28px; }.nx-how-heading > span { font-size:10px; letter-spacing:2.7px; }.nx-how-heading h2 { font-size:28px; letter-spacing:-.9px; margin:13px 0 15px; }.nx-how-heading em { display:block; }.nx-how-heading p { font-size:13px; line-height:1.6; padding:0 8px; }.nx-how-break { display:none; }
 .nx-how-steps { grid-template-columns:1fr; gap:13px; padding-left:33px; }.nx-how-steps::before { display:block; left:15px; right:auto; top:27px; bottom:43px; border:0; width:1px; background:linear-gradient(#00cbff,#03a9ef); }
 .nx-how-step { border-radius:13px; }.nx-how-number { top:15px; left:-19px; width:34px; height:36px; border-width:2px; font-size:16px; }
 .nx-how-step-link { display:grid; grid-template-columns:70px minmax(0,1fr) 10px; gap:10px; padding:12px 10px; border-radius:13px; min-height:108px; }.nx-how-art { width:75px; height:82px; margin-left:-3px; }.nx-how-copy { text-align:left; }.nx-how-copy h3 { font-size:12px; letter-spacing:-.2px; line-height:1.4; margin:0 0 7px; }.nx-how-copy p { font-size:10px; line-height:1.55; }.nx-how-chevron { display:block; color:#24d3ff; font-size:26px; }.nx-how-feature,.nx-how-benefits { display:none; }
 .nx-how-start { display:block; margin-top:16px; padding:14px 10px 10px; border:1px solid #125076; border-radius:14px; text-align:center; background:#031422; }.nx-how-start h3 { margin:0 0 7px; font-size:14px; }.nx-how-start p { margin:0 auto 12px; max-width:290px; font-size:12px; color:#a6c2da; line-height:1.6; }.nx-how-start a { display:flex; align-items:center; justify-content:center; gap:14px; min-height:44px; border-radius:9px; background:linear-gradient(105deg,#00b6f4,#7737fb); color:white; font-size:13px; font-weight:700; }.nx-how-start a > span { font-size:20px; }
 .nx-how-note { font-size:9px; }
}
@media (max-width:360px) { .nx-how-container { width:calc(100% - 24px); }.nx-how-step-link { grid-template-columns:55px minmax(0,1fr) 7px; gap:7px; padding:12px 8px; }.nx-how-art { width:60px; height:72px; }.nx-how-copy h3 { font-size:11px; }.nx-how-copy p { font-size:10px; }.nx-how-heading h2 { font-size:26px; } }
@media (prefers-reduced-motion:reduce) { .nx-how-step-link { transition:none; } }
